/* ============================================================================
   ASESORÍA — hoja de estilos

   Sistema de diseño en tres piezas:
     1. Un fondo azul casi negro.
     2. UNA sola tinta clara (--tinta) de la que salen todos los grises, por
        transparencia. Nunca se usa un gris suelto: por eso el conjunto se ve
        parejo y no sucio.
     3. UN solo color de acento (--azul), usado con medida.

   Tipografías: Anton para los títulos (condensada, en mayúsculas) y Manrope
   para todo lo demás.

   Para cambiar la identidad visual entera alcanza con tocar :root.
   ========================================================================== */

:root{
  /* -- la tinta, en RGB suelto para poder derivarle transparencias -- */
  --tinta: 226 235 250;

  /* -- fondos -- */
  --bg:      #060911;
  --bg-alt:  #0a0e1a;

  /* -- texto -- */
  --txt:   rgb(var(--tinta));
  --txt-2: rgb(var(--tinta) / .64);
  --txt-3: rgb(var(--tinta) / .42);

  /* -- superficies y bordes: siempre tinta transparente, nunca grises fijos -- */
  --sup:    rgb(var(--tinta) / .035);
  --sup-2:  rgb(var(--tinta) / .07);
  --linea:  rgb(var(--tinta) / .10);
  --linea-2:rgb(var(--tinta) / .18);

  /* -- acento -- */
  --azul-rgb: 46 125 255;
  --azul:     rgb(var(--azul-rgb));
  --azul-2:   #6cb2ff;
  --azul-txt: #030814;

  /* único tono extra del sistema: marca el "antes" sin gritar */
  --rojo-rgb: 217 96 79;
  --rojo:     rgb(var(--rojo-rgb));

  --radio:   18px;
  --radio-s: 12px;
  --pill:    999px;
  --max:     1180px;

  --sombra:   0 24px 60px -28px rgb(0 0 0 / .9);
  --sombra-a: 0 10px 26px -12px rgb(var(--azul-rgb) / .42);

  --t: .24s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:80px;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--txt);
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
[hidden]{ display:none !important; }
a{ color:inherit; }

::selection{ background:rgb(var(--azul-rgb) / .3); }

:focus-visible{
  outline:2px solid var(--azul-2);
  outline-offset:3px;
  border-radius:4px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--azul); color:#fff;
  padding:12px 18px; font-weight:700; border-radius:0 0 var(--radio-s) 0;
}
.skip:focus{ left:0; }

/* ---------------------------------------------------------------- layout -- */
.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:22px; }
.wrap--narrow{ max-width:780px; }
.center{ text-align:center; }

.sec{ padding:78px 0; }
.sec--alt{ background:var(--bg-alt); }

/* ------------------------------------------------------------ tipografía -- */
.display{
  font-family:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.012em;
  /* 1.06 y no menos: Anton dibuja las tildes muy altas y con un interlineado
     más ajustado la Á de una línea pisa la de arriba. */
  line-height:1.06;
}

.h1{
  margin:0 0 20px;
  font-size:clamp(2.25rem,8.8vw,4.2rem);
}
.h1 em{
  display:block;          /* que la frase de color arranque siempre en su renglón */
  font-style:normal;
  color:var(--azul-2);
}

.h2{
  margin:0 0 26px;
  font-size:clamp(1.9rem,6vw,3rem);
}
.h2 span{ color:var(--azul-2); }

.kicker{
  display:flex; align-items:center; gap:10px;
  margin:0 0 14px;
  font-size:.74rem; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--azul-2);
}
.kicker::before{
  content:''; width:22px; height:2px; border-radius:2px;
  background:var(--azul); flex:none;
}
.center .kicker{ justify-content:center; }

.lead{
  margin:0 0 30px;
  font-size:clamp(1rem,2.4vw,1.16rem);
  color:var(--txt-2);
  max-width:58ch;
}
.lead--center{ margin-inline:auto; text-align:center; }

.micro{ font-size:.85rem; color:var(--txt-3); margin:14px 0 0; }
.micro a{ color:var(--azul-2); text-underline-offset:3px; }

.nota{
  margin:30px 0 0; padding:18px 20px;
  border:1px solid var(--linea);
  border-left:2px solid var(--azul);
  background:var(--sup);
  border-radius:0 var(--radio-s) var(--radio-s) 0;
  color:var(--txt-2); font-size:.95rem;
}

.legal{
  margin:22px auto 0; max-width:60ch;
  font-size:.78rem; color:var(--txt-3); text-align:center; line-height:1.6;
}

code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em; background:var(--sup-2);
  padding:2px 6px; border-radius:5px; color:var(--azul-2);
}

/* ---------------------------------------------------------------- botón --- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 30px;
  background:var(--azul); color:#fff;
  font-family:'Manrope',sans-serif;
  font-weight:800; font-size:1rem; letter-spacing:-.005em;
  text-decoration:none; white-space:nowrap;
  border:0; border-radius:var(--pill);
  cursor:pointer;
  box-shadow:var(--sombra-a);
  transition:transform var(--t), box-shadow var(--t), background var(--t);
}
.btn:hover{
  background:#3f8bff;
  transform:translateY(-2px);
  box-shadow:0 14px 32px -14px rgb(var(--azul-rgb) / .55);
}
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:19px 40px; font-size:1.06rem; }
.btn--sm{ padding:10px 20px; font-size:.9rem; box-shadow:none; }
.btn--full{ width:100%; }
@media (max-width:599px){ .btn--full-m{ width:100%; } }

/* botón secundario, sin peso visual */
.btn--fantasma{
  background:transparent; color:var(--txt);
  border:1px solid var(--linea-2); box-shadow:none;
}
.btn--fantasma:hover{ background:var(--sup-2); border-color:var(--azul); }

/* --------------------------------------------------------------- header --- */
.hdr{
  position:sticky; top:0; z-index:50;
  background:rgb(6 9 17 / .6);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid transparent;
  transition:border-color var(--t), background var(--t);
}
.hdr.is-scrolled{ border-bottom-color:var(--linea); background:rgb(6 9 17 / .9); }
.hdr__in{ display:flex; align-items:center; justify-content:space-between; height:68px; }
.hdr__logo{
  display:flex; align-items:center; gap:11px;
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:1.22rem; text-transform:uppercase; letter-spacing:.06em;
  text-decoration:none;
}
.hdr__mark{
  width:11px; height:22px; border-radius:3px;
  background:linear-gradient(180deg,var(--azul-2),var(--azul));
  flex:none;
}

/* ----------------------------------------------------------------- hero --- */
.hero{ position:relative; padding:30px 0 60px; overflow:hidden; }
.hero__glow{
  position:absolute; inset:-40% -25% auto -25%; height:760px;
  background:
    radial-gradient(48% 52% at 50% 8%, rgb(var(--azul-rgb) / .26), transparent 72%),
    radial-gradient(70% 40% at 85% 0%, rgb(108 178 255 / .10), transparent 70%);
  pointer-events:none;
}
.hero__in{
  position:relative;
  display:grid; gap:26px;
  grid-template-areas:'head' 'video' 'rest';
}
.hero__head{ grid-area:head; }
.hero__video{ grid-area:video; margin:0; }
.hero__rest{ grid-area:rest; }
.hero__head .h1{ margin-bottom:0; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  margin:0 0 18px; padding:7px 15px 7px 12px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--pill);
  font-size:.76rem; font-weight:700; letter-spacing:.02em; color:var(--txt-2);
}
.dot{
  width:7px; height:7px; border-radius:50%; background:var(--azul-2);
  box-shadow:0 0 0 4px rgb(var(--azul-rgb) / .2);
  animation:pulso 2.6s ease-in-out infinite;
}
@keyframes pulso{ 50%{ box-shadow:0 0 0 9px rgb(var(--azul-rgb) / 0); } }

/* --- reproductor --- */
.player{
  position:relative;
  aspect-ratio:9/16;
  height:min(58vh,520px);
  height:min(58svh,520px);
  width:auto; max-width:100%;
  margin-inline:auto;
  background:var(--sup);
  border:1px solid var(--linea-2);
  border-radius:22px;
  overflow:hidden;
  box-shadow:var(--sombra), 0 0 0 6px rgb(var(--azul-rgb) / .06);
}
.player.is-16-9{ aspect-ratio:16/9; height:auto; width:100%; }
.player iframe,.player video{
  position:absolute; inset:0;
  width:100%; height:100%; border:0; object-fit:cover;
}
.player__fallback{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:24px; text-align:center;
  color:var(--txt-3); font-size:.9rem;
  background:
    repeating-linear-gradient(45deg, rgb(var(--tinta) / .02) 0 12px, transparent 12px 24px);
}
.player__fallback p{ margin:0; }
.player__cap{
  margin-top:14px; text-align:center;
  font-size:.84rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--txt-3);
}
.player__btn{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  width:100%; padding:0; border:0; cursor:pointer; background:transparent;
}
.player__btn img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.player__btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgb(6 9 17 / .05), rgb(6 9 17 / .6));
}
.player__play{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:76px; height:76px; border-radius:50%;
  background:var(--azul); color:#fff;
  box-shadow:0 14px 40px -10px rgb(var(--azul-rgb) / .8);
  transition:transform var(--t);
}
.player__btn:hover .player__play{ transform:scale(1.07); }
.player__play svg{ margin-left:4px; }

/* --- barra de confianza --- */
.trust{
  list-style:none; margin:48px 0 0; padding:26px 12px;
  display:grid; grid-template-columns:repeat(2,1fr); gap:26px 10px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio);
  text-align:center;
}
.trust li{ display:flex; flex-direction:column; gap:4px; }
.trust b{
  font-family:'Anton',sans-serif; font-weight:400;
  font-size:1.9rem; letter-spacing:.01em; line-height:1;
  color:var(--azul-2);
}
.trust span{
  font-size:.72rem; color:var(--txt-3); line-height:1.4;
  text-transform:uppercase; letter-spacing:.08em; font-weight:600;
}

/* ------------------------------------------------------------- checklist -- */
.checks{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.checks li{
  position:relative;
  padding:17px 20px 17px 54px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio-s);
  color:var(--txt-2);
  transition:border-color var(--t), background var(--t);
}
.checks li:hover{ border-color:var(--linea-2); background:var(--sup-2); }
.checks li::before{
  content:''; position:absolute; left:20px; top:20px;
  width:18px; height:18px; border-radius:50%;
  background:var(--azul-2);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ----------------------------------------------------------------- pasos -- */
.steps{ list-style:none; margin:0; padding:0; display:grid; gap:16px; }
.step{
  position:relative;
  padding:28px 24px 24px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
  transition:border-color var(--t), transform var(--t), background var(--t);
}
.step::after{
  content:''; position:absolute; left:0; top:0; height:2px; width:0;
  background:linear-gradient(90deg,var(--azul),transparent);
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
.step:hover{ border-color:var(--linea-2); background:var(--sup-2); transform:translateY(-3px); }
.step:hover::after{ width:100%; }
.step__n{
  display:block; margin-bottom:14px;
  font-family:'Anton',sans-serif; font-size:2.4rem; line-height:1;
  color:rgb(var(--azul-rgb) / .9);
}
.step h3{ margin:0 0 8px; font-size:1.1rem; font-weight:800; letter-spacing:-.01em; }
.step p{ margin:0; color:var(--txt-2); font-size:.95rem; }

/* ----------------------------------------------------------- grilla card -- */
.grid{ display:grid; gap:16px; }
.card{
  padding:26px 24px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio);
  transition:border-color var(--t), transform var(--t), background var(--t);
}
.card:hover{ border-color:var(--linea-2); background:var(--sup-2); transform:translateY(-3px); }
.card h3{
  margin:0 0 9px; font-size:1.06rem; font-weight:800; letter-spacing:-.01em;
  padding-left:18px; position:relative;
}
.card h3::before{
  content:''; position:absolute; left:0; top:.52em;
  width:7px; height:7px; border-radius:2px; background:var(--azul);
}
.card p{ margin:0; color:var(--txt-2); font-size:.95rem; }

/* --------------------------------------------------- casos (antes/después) -- */
.rail{
  margin:38px 0 26px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.rail::-webkit-scrollbar{ display:none; }
.rail__track{
  display:flex; gap:16px; padding-inline:22px;
  width:max-content; min-width:100%;   /* con pocas tarjetas quedan centradas; con muchas, se desliza */
  justify-content:center;
}

.caso{
  scroll-snap-align:center;
  width:min(86vw,360px);
  display:flex; flex-direction:column;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio); overflow:hidden;
  transition:border-color var(--t);
}
.caso:hover{ border-color:var(--linea-2); }

/* el par de fotos, cuadradas y pegadas, con una línea fina al medio */
.caso__par{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--linea); }
.caso__par figure{ position:relative; margin:0; aspect-ratio:1; background:var(--sup-2); }
.caso__par img{ width:100%; height:100%; object-fit:cover; }
.caso__par figcaption{
  position:absolute; left:8px; top:8px;
  padding:4px 10px; border-radius:var(--pill);
  background:rgb(6 9 17 / .72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:.63rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--txt-2);
}
.caso__par figure:last-child figcaption{ background:var(--azul); color:#fff; }

.caso__cuerpo{ padding:20px; display:flex; flex-direction:column; gap:12px; flex:1; }
.caso__dato{
  margin:0; align-self:flex-start;
  font-family:'Anton',sans-serif; font-size:1.35rem;
  text-transform:uppercase; letter-spacing:.02em; line-height:1;
  color:var(--azul-2);
}
.caso__quote{ margin:0; font-size:.95rem; color:var(--txt-2); flex:1; }
.caso__pie{
  display:flex; flex-direction:column;
  padding-top:14px; border-top:1px solid var(--linea);
}
.caso__pie b{ font-size:.93rem; }
.caso__pie span{ font-size:.8rem; color:var(--txt-3); }

/* ----------------------------------------- casos con video (testimonios) -- */
.caso--video{ width:min(80vw,300px); }

.testi{
  position:relative;
  aspect-ratio:var(--ar,9/16);   /* ambos videos son 9:16: las tarjetas quedan parejas */
  background:#000; overflow:hidden;
}
.testi__btn{
  position:absolute; inset:0; display:block;
  width:100%; padding:0; border:0; cursor:pointer; background:transparent;
}
.testi__btn img{ width:100%; height:100%; object-fit:cover; }
.testi__btn::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgb(6 9 17 / 0) 45%, rgb(6 9 17 / .55));
}
.testi__play{
  position:absolute; left:50%; top:50%; z-index:1;
  display:grid; place-items:center;
  width:64px; height:64px; margin:-32px 0 0 -32px; border-radius:50%;
  background:var(--azul); color:#fff;
  box-shadow:0 12px 34px -8px rgb(var(--azul-rgb) / .8);
  transition:transform var(--t);
}
.testi__play svg{ margin-left:3px; }
.testi__btn:hover .testi__play{ transform:scale(1.08); }
.testi__dur{
  position:absolute; left:12px; bottom:12px; z-index:1;
  padding:4px 11px; border-radius:var(--pill);
  background:rgb(6 9 17 / .72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:.72rem; font-weight:800; letter-spacing:.08em; color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.testi video{
  position:absolute; inset:0; width:100%; height:100%;
  background:#000; object-fit:cover;   /* los dos videos son 9:16 (o casi): no se pierde nada */
}
/* subtitulos del video: chicos y con fondo, para que se lean sobre cualquier ropa o pared */
.testi video::cue{
  font:800 13.5px/1.35 'Manrope',system-ui,sans-serif;
  color:#fff; background:rgb(6 9 17 / .78);
}
.testi__error{
  position:absolute; inset:0; display:grid; place-items:center;
  margin:0; padding:24px; text-align:center; color:var(--txt-2); font-size:.9rem;
}

/* ------------------------------------------------------------------ bio --- */
.bio{ display:grid; gap:30px; align-items:center; }
.bio__foto{ position:relative; }
.bio__foto img{
  width:100%; border-radius:var(--radio);
  border:1px solid var(--linea-2);
  aspect-ratio:4/5; object-fit:cover;
  background:var(--sup-2);
}
/* marco de acento apenas corrido, detrás de la foto */
.bio__foto::before{
  content:''; position:absolute; inset:14px -14px -14px 14px;
  border:1px solid rgb(var(--azul-rgb) / .4);
  border-radius:var(--radio); z-index:-1;
}
.bio__txt p{ color:var(--txt-2); }

.credenciales{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px;
  margin:24px 0 0; padding:0;
}
.credenciales li{
  padding:8px 15px; border-radius:var(--pill);
  border:1px solid var(--linea); background:var(--sup);
  font-size:.8rem; font-weight:700; color:var(--txt-2);
}


/* ---------------------------------------- "no es para quien busca una formula" -- */
.manifiesto{
  max-width:720px; margin:72px auto 0; padding-top:56px;
  border-top:1px solid var(--linea);
}
.manifiesto > p:not(.kicker):not(.manifiesto__cta){
  margin:0 0 18px; color:var(--txt-2);
  font-size:clamp(1.02rem,2.4vw,1.14rem); line-height:1.7;
}
.manifiesto .h2{ margin-bottom:26px; }

/* la linea que resume todo: tipografia grande, sin marco ni adornos */
.manifiesto__cita{
  margin:34px 0 32px; padding:0;
  font-family:'Anton',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.012em; line-height:1.12;
  font-size:clamp(1.7rem,5.6vw,2.6rem);
  color:var(--txt-2);
  text-wrap:balance;
}
.manifiesto__cita em{ display:block; font-style:normal; color:var(--azul-2); }

.manifiesto__cta{ margin:34px 0 0; }

/* ------------------------------------------ "como trabajo", en palabras de Benja -- */
.metodo{ max-width:760px; margin:0 0 76px; }
.metodo > p:not(.kicker){
  margin:0 0 18px; color:var(--txt-2);
  font-size:clamp(1.02rem,2.4vw,1.14rem); line-height:1.7;
}
.metodo .h2{ margin-bottom:24px; }

/* las preguntas que todos hacen: se leen como busquedas, no como titulos */
.metodo__preguntas{
  list-style:none; margin:8px 0 28px; padding:0;
  display:flex; flex-wrap:wrap; gap:10px;
}
.metodo__preguntas li{
  padding:10px 17px;
  border:1px solid var(--linea-2); border-radius:16px;   /* no pill: si pasa a dos renglones no se vuelve una capsula */
  background:var(--sup);
  color:var(--txt-3); font-size:.93rem; font-style:italic; line-height:1.4;
}

/* ------------------------------------------- el antes y el despues de Benja -- */
/* las dos fotos de Benja, juntas y con una linea fina al medio (como en los casos) */
.viaje__fotos{
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  max-width:560px; margin:44px auto 0;
  background:var(--linea);
  border:1px solid var(--linea-2); border-radius:var(--radio);
  overflow:hidden;
}
.viaje__fotos figure{ position:relative; margin:0; aspect-ratio:4/5; background:var(--sup-2); }
.viaje__fotos img{ width:100%; height:100%; object-fit:cover; }
.viaje__fotos figcaption{
  position:absolute; left:10px; top:10px;
  padding:4px 11px; border-radius:var(--pill);
  background:rgb(6 9 17 / .72);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rojo);
}
.viaje__fotos figure:last-child figcaption{ background:var(--azul); color:#fff; }

.viaje{ display:grid; gap:16px; margin-top:44px; }
.viaje__fotos + .viaje{ margin-top:18px; }

.viaje__col{
  padding:26px 24px;
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio);
}
.viaje__col--antes{ border-top:2px solid rgb(var(--rojo-rgb) / .55); }
.viaje__col--hoy{
  border-top:2px solid var(--azul);
  background:linear-gradient(180deg, rgb(var(--azul-rgb) / .07), var(--sup) 60%);
}

.viaje__titulo{
  margin:0 0 18px;
  font-family:'Anton',Impact,sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.03em;
  font-size:1.22rem;
}
.viaje__col--antes .viaje__titulo{ color:var(--rojo); }
.viaje__col--hoy   .viaje__titulo{ color:var(--azul-2); }

.viaje__lista{ list-style:none; margin:0; padding:0; display:grid; gap:13px; }
.viaje__lista li{
  position:relative; padding-left:32px;
  color:var(--txt-2); font-size:.96rem; line-height:1.55;
}
.viaje__lista li::before{
  content:''; position:absolute; left:0; top:.28em;
  width:18px; height:18px; border-radius:50%;
}
/* la cruz del antes */
.viaje__col--antes .viaje__lista li::before{
  background:rgb(var(--rojo-rgb) / .85);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.6' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/contain no-repeat;
}
/* el tilde del hoy */
.viaje__col--hoy .viaje__lista li::before{
  background:var(--azul-2);
  -webkit-mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat;
}

.viaje__cierre{
  margin:26px auto 0; max-width:62ch;
  text-align:center; color:var(--txt);
  font-size:clamp(1.02rem,2.4vw,1.18rem); font-weight:600;
  text-wrap:balance;
}

/* ------------------------------------------------------------------ faq --- */
.faq{
  background:var(--sup); border:1px solid var(--linea);
  border-radius:var(--radio-s); margin-bottom:10px; overflow:hidden;
  transition:border-color var(--t);
}
.faq[open]{ border-color:var(--linea-2); }
.faq summary{
  padding:19px 56px 19px 22px; position:relative;
  font-weight:700; cursor:pointer; list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:''; position:absolute; right:22px; top:24px;
  width:11px; height:11px;
  border-right:2px solid var(--azul-2); border-bottom:2px solid var(--azul-2);
  transform:rotate(45deg); transition:transform var(--t);
}
.faq[open] summary::after{ transform:rotate(-135deg); }
.faq[open] summary{ color:var(--azul-2); }
.faq p{ margin:0; padding:0 22px 22px; color:var(--txt-2); font-size:.95rem; }

/* --------------------------------------------------------------- agenda --- */
.agenda{
  position:relative;
  background:var(--bg);
  border-top:1px solid var(--linea);
  overflow:hidden;
}
.agenda::before{
  content:''; position:absolute; inset:0 0 auto 0; height:420px;
  background:radial-gradient(60% 100% at 50% 0%, rgb(var(--azul-rgb) / .18), transparent 70%);
  pointer-events:none;
}
.agenda .wrap{ position:relative; }

.booking{
  position:relative;
  margin-top:34px;
  min-height:620px;
  background:var(--sup);
  border:1px solid var(--linea);
  border-radius:var(--radio);
  overflow:hidden;
  box-shadow:var(--sombra);
  transition:background var(--t);
}
/* recién cuando el calendario cargó de verdad pasamos a fondo blanco:
   así nunca se ve un bloque blanco vacío */
.booking.is-listo{ background:#fff; border-color:transparent; }
.booking__embed{ position:relative; z-index:1; }
.booking__load{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:32px; text-align:center; color:var(--txt-2);
  background:var(--bg-alt);
}
/* el atributo hidden tiene que poder ganarle al display:flex de arriba */
.booking__load[hidden]{ display:none; }
.booking__load p{ margin:0; }
.booking__load strong{ color:var(--txt); }
.spinner{
  width:34px; height:34px; border-radius:50%;
  border:2px solid rgb(var(--azul-rgb) / .25); border-top-color:var(--azul-2);
  animation:giro .8s linear infinite;
}
@keyframes giro{ to{ transform:rotate(360deg); } }

/* --------------------------------------------------------------- footer --- */
.ftr{ padding:50px 0 110px; border-top:1px solid var(--linea); background:var(--bg-alt); }
.ftr__in{ display:grid; gap:20px; text-align:center; }
.ftr__marca{
  margin:0; font-family:'Anton',sans-serif; font-size:1.3rem;
  text-transform:uppercase; letter-spacing:.06em;
}
/* Instagram / WhatsApp / mail: tres botones chicos, sin competirle al de agendar */
.ftr__contacto{ margin:0; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.ftr__contacto a{
  padding:9px 18px; border-radius:var(--pill);
  border:1px solid var(--linea-2); background:var(--sup);
  color:var(--txt-2); text-decoration:none; font-size:.84rem; font-weight:700;
  transition:border-color var(--t), color var(--t);
}
.ftr__contacto a:hover{ border-color:rgb(var(--azul-rgb) / .6); color:var(--azul-2); }
.ftr__nav{ display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:center; }
.ftr__nav a{ color:var(--txt-2); text-decoration:none; font-size:.9rem; font-weight:600; }
.ftr__nav a:hover{ color:var(--azul-2); }
.ftr__legal{ margin:0; font-size:.77rem; color:var(--txt-3); line-height:1.65; }

/* ----------------------------------------------------- barra fija móvil --- */
.sticky{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom));
  background:rgb(6 9 17 / .88);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-top:1px solid var(--linea);
  transform:translateY(115%);
  transition:transform var(--t);
}
.sticky.is-on{ transform:translateY(0); }

/* ------------------------------------------------- fotos todavía sin subir -- */
.sin-foto{
  display:grid; place-items:center;
  background:repeating-linear-gradient(45deg, rgb(var(--tinta) / .03) 0 10px, transparent 10px 20px);
  border:1px dashed var(--linea-2);
  border-radius:var(--radio-s);
  min-height:150px;
}
.sin-foto::after{
  content:'Falta ' attr(data-falta);
  font-size:.72rem; color:var(--txt-3); text-align:center; padding:10px;
  letter-spacing:.03em;
}
.caso__par .sin-foto{ border-radius:0; min-height:0; aspect-ratio:1; }
.viaje__fotos .sin-foto{ border-radius:0; min-height:0; aspect-ratio:4/5; }
/* el hueco de la foto de perfil conserva su proporción, así la maqueta no miente */
.bio__foto.sin-foto{ aspect-ratio:4/5; min-height:0; border-radius:var(--radio); }

/* =========================================================== responsive == */
@media (min-width:600px){
  .trust{ grid-template-columns:repeat(4,1fr); padding:28px 18px; }
  .grid{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .checks{ grid-template-columns:repeat(2,1fr); }
  .viaje{ grid-template-columns:1fr 1fr; }
}

@media (min-width:900px){
  html{ scroll-padding-top:92px; }
  .sec{ padding:112px 0; }
  .hero{ padding:76px 0 96px; }
  .hero__in{
    grid-template-columns:1.05fr .95fr;
    grid-template-areas:'head video' 'rest video';
    align-content:center; gap:0 60px;
  }
  .hero__head{ align-self:end; }
  .hero__rest{ align-self:start; padding-top:26px; }
  .hero__video{ align-self:center; }
  .player{ height:auto; width:346px; }
  .grid{ grid-template-columns:repeat(3,1fr); }
  .steps{ grid-template-columns:repeat(4,1fr); }
  .bio{ grid-template-columns:.82fr 1.18fr; gap:60px; }
  .viaje{ grid-template-columns:1fr 1fr; gap:20px; }
  .rail__track{ padding-inline:max(22px,calc((100vw - var(--max))/2 + 22px)); }
  /* en escritorio la barra fija molesta: no se muestra */
  .sticky{ display:none; }
  .rail__hint{ display:none; }
  .ftr{ padding-bottom:56px; }
  .ftr__in{ text-align:left; }
  .ftr__nav, .ftr__contacto{ justify-content:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}