:root{
  --negro:#000;
  --hueso:#F2EDE4;
  --gris:#948D85;
  --sol:#D9A441;
  --linea:rgba(242,237,228,.16);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--negro)}
.portada,main,footer{background:var(--negro)}
body{
  margin:0;
  background:var(--negro);
  color:var(--hueso);
  font-family:"Karla",system-ui,sans-serif;
  font-size:19px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;line-height:1.03;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(1.55rem,5.5vw,2rem)}
p{margin:0 0 1.15em}
a{color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.envoltorio{width:min(620px,100% - 44px);margin-inline:auto}

/* ---------- Portada ---------- */
.portada{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:20px 0 44px;overflow:hidden}
.portada-foto{position:absolute;inset:0;z-index:0}
.portada-foto img{object-position:50% 34%}
.velo{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.08) 26%,rgba(0,0,0,.86) 70%,#000 100%)}
.portada>.envoltorio{position:relative;z-index:2}

.barra-alta{display:flex;justify-content:space-between;align-items:center;gap:16px}
.nombre{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1rem;letter-spacing:-.01em}
.idiomas{display:flex;gap:14px;font-size:.85rem}
.idiomas a{text-decoration:none;opacity:.5;padding:4px 1px}
.idiomas a:hover{opacity:1}
.idiomas a[aria-current]{opacity:1;border-bottom:2px solid var(--sol)}

.portada h1{font-size:clamp(2.6rem,11vw,4.2rem);text-wrap:balance}
.entradilla{margin:18px 0 0;font-size:1.05rem;color:#DCD4C8}

/* ---------- Botones ---------- */
.acciones{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.boton{
  display:block;text-align:center;padding:17px 24px;border-radius:2px;text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.02rem;
  transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.boton-sol{background:var(--sol);color:#000}
.boton-sol:hover{background:#EBB65C}
.boton-borde{border:1px solid rgba(242,237,228,.35);color:var(--hueso)}
.boton-borde:hover{border-color:var(--sol);color:var(--sol)}

/* ---------- Puntos ---------- */
.puntos{margin-top:38px;border-top:1px solid var(--linea)}
.punto{padding:17px 0;border-bottom:1px solid var(--linea)}
.punto h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;margin:0 0 3px;letter-spacing:-.01em;color:var(--sol)}
.punto p{margin:0;color:#CFC7BC;font-size:.96rem;line-height:1.5}

/* ---------- Texto ---------- */
.bloque{padding:88px 0 0}
.bloque p:last-child{margin-bottom:0}
.suave{color:#CFC7BC}
.email{margin-top:26px;font-size:.92rem;color:var(--gris)}
.email a{text-decoration:none;border-bottom:1px solid var(--linea)}
.email a:hover{color:var(--sol)}

/* ---------- Fotos ---------- */
.foto-ancha,.tira{margin-top:70px;height:auto;background:var(--negro)}
.foto-ancha img,.tira img{width:auto;height:auto;max-width:100%;object-fit:contain;margin-inline:auto}

footer{color:#635E58;font-size:.8rem;padding:70px 0 96px}

/* ---------- Barra fija móvil ---------- */
.wa-fija{
  position:fixed;left:0;right:0;bottom:0;z-index:9;
  background:var(--sol);color:#000;text-align:center;
  padding:16px;text-decoration:none;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
}

@media(min-width:820px){
  .portada{min-height:100svh;padding-bottom:8vh}
  .portada-foto{left:43%;
    -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 9%,rgba(0,0,0,.68) 20%,#000 33%);
    mask-image:linear-gradient(90deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.22) 9%,rgba(0,0,0,.68) 20%,#000 33%)}
  .portada-foto img{object-position:50% 41%}
  .velo{background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.72) 100%),linear-gradient(90deg,#000 26%,rgba(0,0,0,.4) 45%,rgba(0,0,0,0) 70%)}
  .portada-pie{display:flex;justify-content:space-between;align-items:flex-end;gap:48px}
  .portada-texto{max-width:46%}
  .valora{margin-top:0;text-align:right;max-width:230px}
  .estrellas,.valora .enlaces,.rotador .mini{justify-content:flex-end}
  .envoltorio{width:min(680px,100% - 80px)}
  .portada>.envoltorio{width:min(1360px,100% - 96px)}
  .portada h1{max-width:10ch;font-size:clamp(3.2rem,4.6vw,4.6rem)}
  .portada .entradilla{max-width:32ch;font-size:1.12rem}
  .portada .acciones{max-width:400px}
  .acciones{flex-direction:row;flex-wrap:wrap}
  .boton{padding:16px 30px}
  .portada .boton{padding:20px 40px;font-size:1.08rem}
  .bloque{padding-top:120px}
  .foto-ancha,.tira{height:auto;margin-top:110px}
  .foto-ancha img,.tira img{max-height:78svh}
  .wa-fija{display:none}
  footer{padding-bottom:40px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
a:focus-visible{outline:2px solid var(--sol);outline-offset:4px}

/* ---------- Zonas y preguntas ---------- */
.lista-zonas{margin:20px 0 0;padding:0;list-style:none}
.lista-zonas li{padding:12px 0;border-bottom:1px solid var(--linea);color:#CFC7BC;font-size:.98rem;line-height:1.5}
.lista-zonas li:first-child{border-top:1px solid var(--linea)}
.lista-zonas strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--hueso)}
.faq{margin-top:24px}
.faq > div{padding:19px 0;border-bottom:1px solid var(--linea)}
.faq > div:first-child{border-top:1px solid var(--linea)}
.faq h3{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:1.05rem;margin:0 0 5px;letter-spacing:-.01em;color:var(--sol)}
.faq p{margin:0;color:#CFC7BC;font-size:.96rem;line-height:1.55}

/* ---------- Banderas ---------- */
.banderas{display:inline-flex;gap:5px;margin-left:9px;vertical-align:middle;opacity:.9}
.banderas svg{display:block;width:18px;height:12px;border-radius:1px}

/* ---------- Reseñas en portada ---------- */
.valora{margin-top:34px;max-width:260px}
.valora .titulo{margin:0 0 9px;font-size:.85rem;color:#C6BDB2;line-height:1.4}
.estrellas{display:flex;gap:6px}
.estrellas a{display:block;line-height:0}
.estrellas svg{width:20px;height:20px}
.estrellas path{fill:none;stroke:var(--sol);stroke-width:1.7;stroke-linejoin:round}
.estrellas:hover path{fill:var(--sol)}
.valora .enlaces{display:flex;gap:16px;margin-top:11px;font-size:.84rem}
.valora .enlaces a{color:#C6BDB2;text-decoration:none;border-bottom:1px solid rgba(242,237,228,.28);padding-bottom:2px}
.valora .enlaces a:hover{color:var(--sol);border-color:var(--sol)}

/* ---------- Palmarés ---------- */
.cv{margin-top:26px;padding-top:18px;border-top:1px solid var(--linea);color:var(--gris);font-size:.9rem;line-height:1.55;max-width:52ch}
.cv strong{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:var(--sol)}


/* ---------- Reseñas que rotan ---------- */
.rotador{margin-top:14px;perspective:800px}
.rotador .tarjeta{transition:transform .55s ease,opacity .55s ease;transform-origin:center top}
.rotador .tarjeta.girando{transform:rotateX(-88deg);opacity:0}
.rotador .mini{display:flex;gap:3px;margin:0 0 6px}
.rotador .mini svg{width:12px;height:12px;display:block}
.rotador .mini path{fill:var(--sol);stroke:none}
.rotador .texto{margin:0;font-size:.86rem;line-height:1.55;color:#E2DACE}
.rotador .firma{margin:6px 0 0;font-size:.79rem;color:#A79F95}
@media(prefers-reduced-motion:reduce){.rotador .tarjeta{transition:opacity .3s ease}.rotador .tarjeta.girando{transform:none}}