@font-face{font-family:"Montserrat";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/montserrat-600.woff2) format("woff2");}

@font-face{font-family:"Montserrat";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/montserrat-700.woff2) format("woff2");}

@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-400.woff2) format("woff2");}

@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/poppins-500.woff2) format("woff2");}

@font-face{font-family:"Great Vibes";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/greatvibes-400.woff2) format("woff2");}

:root{
    --sky:#BFDFF5;
    --deep:#264D79;
    --deep-2:#1c3a5c;
    --gold:#C9A66B;
    --gold-soft:#e2cda3;
    --white:#FFFFFF;
    --grey:#D8D8D8;
    --cream:#F8F5EF;

    --bg-1:var(--cream);
    --bg-2:var(--sky);
    --bg-3:var(--white);
    --ink:var(--deep);
    --ink-soft:color-mix(in srgb, var(--deep) 90%, transparent);
    --accent:var(--gold);
    /* El dorado de marca vive en los detalles; como texto se oscurece para que se lea */
    --accent-ink:#6b4f1e;
    --hairline:var(--grey);
    --card-bg:color-mix(in srgb, var(--white) 88%, var(--sky) 12%);
    --shadow:0 30px 60px -30px color-mix(in srgb, var(--deep) 35%, transparent);
    --vein-opacity:.55;
    /* Clave alta: el video se vuelve una acuarela luminosa, no una foto */
    --video-filter:saturate(.72) brightness(1.5) contrast(.72);
    --video-opacity:1;

    /* Claro en el centro para el texto, imagen viva en los bordes */
    --scrim:38%;
    --veil-a:72%;
    --veil-b:32%;
    --text-halo:color-mix(in srgb, var(--bg-1) 82%, transparent);

    /* Liquid glass del CTA */
    --glass-1:color-mix(in srgb, var(--deep) 88%, transparent);
    --glass-2:color-mix(in srgb, var(--deep) 76%, transparent);
    --glass-rim-hi:rgba(255,255,255,.9);
    --glass-rim-lo:rgba(255,255,255,.12);
    --glass-inner:rgba(255,255,255,.55);
  }

:root[data-theme="dark"]{
    --bg-1:#0d1e30;
    --bg-2:#16314e;
    --bg-3:#132a44;
    --ink:#eef4fa;
    --ink-soft:color-mix(in srgb, #eef4fa 88%, transparent);
    --accent:#dab97e;
    --accent-ink:#dab97e;
    --hairline:color-mix(in srgb, var(--sky) 22%, transparent);
    --card-bg:color-mix(in srgb, #16314e 88%, #000 6%);
    --shadow:0 30px 70px -25px rgba(0,0,0,.55);
    --vein-opacity:.75;
    --video-filter:saturate(.7) brightness(.42) contrast(1.08) hue-rotate(-4deg);
    --video-opacity:.9;

    --scrim:58%;
    --veil-a:60%;
    --veil-b:28%;
    --text-halo:color-mix(in srgb, #0a1725 72%, transparent);

    --glass-1:color-mix(in srgb, #3d6d9c 82%, transparent);
    --glass-2:color-mix(in srgb, #2a5480 70%, transparent);
    --glass-rim-hi:rgba(255,255,255,.7);
    --glass-rim-lo:rgba(255,255,255,.08);
    --glass-inner:rgba(255,255,255,.4);
  }

@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg-1:#0d1e30;
      --bg-2:#16314e;
      --bg-3:#132a44;
      --ink:#eef4fa;
      --ink-soft:color-mix(in srgb, #eef4fa 88%, transparent);
      --accent:#dab97e;
      --accent-ink:#dab97e;
      --hairline:color-mix(in srgb, var(--sky) 22%, transparent);
      --card-bg:color-mix(in srgb, #16314e 88%, #000 6%);
      --shadow:0 30px 70px -25px rgba(0,0,0,.55);
      --vein-opacity:.75;
      --video-filter:saturate(.7) brightness(.42) contrast(1.08) hue-rotate(-4deg);
      --video-opacity:.9;

      --scrim:58%;
      --veil-a:60%;
      --veil-b:28%;
      --text-halo:color-mix(in srgb, #0a1725 72%, transparent);

      --glass-1:color-mix(in srgb, #3d6d9c 82%, transparent);
      --glass-2:color-mix(in srgb, #2a5480 70%, transparent);
      --glass-rim-hi:rgba(255,255,255,.7);
      --glass-rim-lo:rgba(255,255,255,.08);
      --glass-inner:rgba(255,255,255,.4);
    }
  }

/* La marca vive como mascara alfa: un solo archivo para los dos temas */
  :root{--logo-src:url("/assets/img/logo.png");}

*{box-sizing:border-box;}

html,body{margin:0;padding:0;}

body{
    background:var(--bg-1);
    color:var(--ink);
    font-family:"Poppins",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }

/* Marca en el encabezado. El hero sigue abriendo con la pregunta:
     el logo identifica, no anuncia. */
  .site-header{
    position:absolute;
    top:0;
    left:0;
    right:0;
    z-index:30;
    display:flex;
    align-items:center;
    padding:clamp(20px,3vh,32px) 6vw;
    pointer-events:none;
  }

.brand{
    pointer-events:auto;
    display:inline-flex;
    align-items:center;
    text-decoration:none;
    line-height:1;
  }

.brand img{
    display:block;
    height:clamp(54px,7vw,76px);
    width:auto;
  }

@media (max-width:640px){
    .site-header{justify-content:center;}
  }

/* Liquid glass: vidrio azul tintado — refracta el video sin perder legibilidad */
  .cta{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    margin-top:6px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:17px 32px;
    border-radius:999px;
    /* Relleno solido por defecto. El vidrio se activa con .cta--glass, solo
       donde hay imagen detras que refractar: sobre fondo plano no refracta
       nada y solo resta contraste. */
    background:linear-gradient(142deg, var(--deep) 0%, var(--deep-2) 100%);
    color:var(--white);
    text-decoration:none;
    font-family:"Poppins",sans-serif;
    font-weight:500;
    font-size:15px;
    letter-spacing:.01em;
    box-shadow:
      inset 0 1px 0 var(--glass-inner),
      inset 0 -14px 22px -16px rgba(255,255,255,.5),
      0 14px 34px -14px rgba(12,32,54,.55);
    transition:transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s ease;
  }

/* Aro refractivo: luz arriba-izquierda, glint dorado abajo-derecha */
  .cta::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(142deg,
      var(--glass-rim-hi) 0%,
      var(--glass-rim-lo) 38%,
      color-mix(in srgb, var(--gold) 75%, transparent) 66%,
      var(--glass-rim-hi) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }

/* Destello especular que barre al pasar el cursor */
  .cta::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(102deg, transparent 22%, rgba(255,255,255,.34) 46%, transparent 64%);
    transform:translateX(-130%);
    transition:transform .9s cubic-bezier(.2,.7,.2,1);
    pointer-events:none;
  }

.cta:hover, .cta:focus-visible{
    transform:translateY(-3px);
    box-shadow:
      inset 0 1px 0 var(--glass-inner),
      inset 0 -14px 24px -14px rgba(255,255,255,.6),
      0 20px 44px -14px rgba(12,32,54,.6);
  }

.cta:hover::after, .cta:focus-visible::after{transform:translateX(130%);}

.cta:active{transform:translateY(-1px);}

.cta svg{width:19px;height:19px;flex:none;}

/* Liquid glass: solo sobre imagen o video */
  .cta--glass{
    background:linear-gradient(142deg, var(--glass-1) 0%, var(--glass-2) 100%);
    -webkit-backdrop-filter:blur(16px) saturate(1.7);
    backdrop-filter:blur(16px) saturate(1.7);
  }
  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .cta--glass{background:linear-gradient(142deg, var(--deep) 0%, var(--deep-2) 100%);}
  }

.eyebrow{
    font-family:"Poppins",sans-serif;
    font-size:11px;
    letter-spacing:.18em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0 0 16px;
  }

/* Divisor: linea fina dorada con un punto, en vez de un simbolo cargado */
  .divider{
    display:flex;
    align-items:center;
    gap:10px;
    margin:34px 0 40px;
    color:var(--accent);
  }

.divider span{display:block;height:1px;width:clamp(40px,8vw,80px);
    background:linear-gradient(90deg,transparent,currentColor);}

.divider span:last-child{background:linear-gradient(90deg,currentColor,transparent);}

.divider i{width:5px;height:5px;border-radius:50%;background:currentColor;}

.section-title{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:clamp(26px,4vw,40px);
    line-height:1.25;
    color:var(--ink);
    margin:0;
    text-wrap:balance;
  }

.section-title em{font-style:normal;font-weight:700;color:var(--accent-ink);}

.section-lead{
    font-family:"Poppins",sans-serif;
    font-size:clamp(14px,1.6vw,16px);
    line-height:1.7;
    color:var(--ink-soft);
    max-width:46ch;
    margin:18px 0 0;
  }

.exp-all{
    display:flex;
    justify-content:center;
    margin-top:44px;
  }

.link-gold{
    font-family:"Poppins",sans-serif;
    font-size:14.5px;
    font-weight:500;
    color:var(--accent-ink);
    text-decoration:none;
    border-bottom:1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    padding-bottom:3px;
    transition:border-color .25s ease;
  }

.link-gold:hover, .link-gold:focus-visible{border-bottom-color:var(--accent);}

.btn-light{
    display:inline-flex;align-items:center;gap:10px;
    padding:15px 28px;border-radius:999px;
    background:#ffffff;color:var(--deep);
    font-family:"Poppins",sans-serif;font-weight:500;font-size:14.5px;
    text-decoration:none;
    box-shadow:0 14px 30px -16px rgba(0,0,0,.5);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }

.btn-light:hover{transform:translateY(-2px);}

.btn-light svg{width:18px;height:18px;flex:none;}

.btn-ghost{
    font-family:"Poppins",sans-serif;font-size:14px;
    color:var(--gold-soft);
    background:transparent;
    border:1px solid color-mix(in srgb, var(--gold-soft) 45%, transparent);
    border-radius:999px;
    padding:14px 24px;
    cursor:pointer;
    transition:border-color .3s ease, background .3s ease;
  }

.btn-ghost:hover{border-color:var(--gold-soft);background:rgba(255,255,255,.06);}

.btn-ghost:focus-visible{outline:2px solid var(--gold-soft);outline-offset:3px;}

.site-footer{
    background:var(--bg-1);
    border-top:1px solid var(--hairline);
    padding:44px 6vw 56px;
  }

.footer-inner{
    max-width:1100px;margin:0 auto;
    display:flex;flex-wrap:wrap;gap:32px;
    align-items:flex-start;justify-content:space-between;
  }

.footer-brand{display:flex;flex-direction:column;gap:14px;max-width:280px;}

.footer-tag{
    font-family:"Poppins",sans-serif;font-size:13px;line-height:1.7;color:var(--ink-soft);margin:0;
  }

.footer-nav{display:flex;flex-wrap:wrap;gap:10px 34px;}

.footer-col{display:flex;flex-direction:column;gap:10px;}

.footer-col-titulo{
    font-family:"Poppins",sans-serif;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
    color:var(--ink-soft);margin:0 0 4px;font-weight:500;
  }

.footer-col a{
    font-family:"Poppins",sans-serif;font-size:14px;color:var(--ink);text-decoration:none;
    border-bottom:1px solid transparent;align-self:flex-start;transition:border-color .25s ease;
  }

.footer-col a:hover, .footer-col a:focus-visible{border-bottom-color:var(--accent);}

.footer-base{
    max-width:1100px;margin:38px auto 0;padding-top:22px;
    border-top:1px solid var(--hairline);
    display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;
    font-family:"Poppins",sans-serif;font-size:12px;color:var(--ink-soft);
  }

/* Marca dibujada con mascara: se tiñe con el dorado de cada tema */
  .logo-mark{
    display:block;
    background-color:var(--accent);
    -webkit-mask:var(--logo-src) center/contain no-repeat;
    mask:var(--logo-src) center/contain no-repeat;
  }

.brand .logo-mark{width:clamp(88px,11vw,124px);aspect-ratio:900/865;}

.footer-brand .logo-mark{width:104px;aspect-ratio:900/865;}

.wa-float{
    position:fixed;
    right:22px;
    bottom:22px;
    z-index:50;
    width:58px;
    height:58px;
    border-radius:50%;
    background:linear-gradient(142deg, var(--deep) 0%, var(--deep-2) 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--white);
    text-decoration:none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.4),
      0 14px 30px -10px rgba(12,32,54,.6);
    animation:breathe 3.4s ease-in-out infinite;
  }

.wa-float::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(142deg,
      rgba(255,255,255,.85) 0%,
      rgba(255,255,255,.1) 40%,
      color-mix(in srgb, var(--gold) 75%, transparent) 68%,
      rgba(255,255,255,.5) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
    pointer-events:none;
  }

.wa-float svg{width:27px;height:27px;}

@keyframes breathe{
    0%,100%{transform:scale(1);}
    50%{transform:scale(1.06);}
  }

.theme-toggle{
    position:fixed;
    top:18px;
    right:18px;
    z-index:40;
    display:flex;
    gap:6px;
    padding:5px;
    border-radius:999px;
    background:color-mix(in srgb, var(--bg-3) 78%, transparent);
    backdrop-filter:blur(8px);
    border:1px solid var(--hairline);
    box-shadow:var(--shadow);
  }

.theme-toggle button{
    border:none;
    background:transparent;
    color:var(--ink-soft);
    font-family:"Poppins",sans-serif;
    font-size:11px;
    letter-spacing:.06em;
    padding:7px 12px;
    border-radius:999px;
    cursor:pointer;
  }

.theme-toggle button[aria-pressed="true"]{
    background:var(--deep);
    color:var(--white);
  }

.note{
    position:fixed;
    left:18px;
    bottom:18px;
    z-index:40;
    max-width:260px;
    font-family:"Poppins",sans-serif;
    font-size:11px;
    line-height:1.6;
    color:var(--ink-soft);
    background:color-mix(in srgb, var(--bg-3) 78%, transparent);
    backdrop-filter:blur(8px);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:12px 14px;
  }

.note b{color:var(--ink);}

@media (max-width:640px){
    .note{display:none;}
  }

@media (prefers-reduced-motion: reduce){
    .wa-float{animation:none !important;}
  }

  /* Tarjeta de experiencia: la usan Home y el hub de /experiencias */
  .exp-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:22px;
  }
  .exp-card{
    display:flex;
    flex-direction:column;
    gap:14px;
    text-decoration:none;
  }
  .exp-card figure{
    margin:0;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:18px;
    background:var(--card-bg);
    position:relative;
  }
  .exp-card img{
    width:100%;height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s cubic-bezier(.2,.8,.2,1);
  }
  .exp-card:hover img, .exp-card:focus-visible img{transform:scale(1.05);}
  .exp-card:hover figure::after, .exp-card:focus-visible figure::after{
    box-shadow:inset 0 0 0 1px var(--accent);
  }
  .exp-q{
    font-family:"Poppins",sans-serif;
    font-size:13.5px;
    line-height:1.55;
    color:var(--accent-ink);
    margin:0;
  }
  .exp-card h3{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:17px;
    color:var(--ink);
    margin:0;
  }
  .exp-card p.d{
    font-family:"Poppins",sans-serif;
    font-size:14px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0;
  }
  /* Hilo dorado que aparece al pasar: el detalle, no el protagonista */
  .exp-card figure::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 0%, transparent);
    transition:box-shadow .4s ease;
  }
  .exp-card img{transition:transform .7s cubic-bezier(.2,.8,.2,1);}
  @media (prefers-reduced-motion: reduce){ .exp-card img{transition:none !important;} }

  /* Tarjeta sin foto: misma acuarela del banner, para que no se vea un hueco */
  .exp-wash{
    display:block;width:100%;height:100%;
    background:
      radial-gradient(70% 60% at 26% 22%, color-mix(in srgb, var(--sky) 60%, transparent) 0%, transparent 64%),
      radial-gradient(60% 55% at 80% 80%, color-mix(in srgb, var(--gold) 20%, transparent) 0%, transparent 62%),
      linear-gradient(160deg, var(--bg-1) 0%, color-mix(in srgb, var(--sky) 38%, var(--bg-1)) 58%, var(--bg-1) 100%);
  }

  /* Encabezado de paginas interiores (experiencias, testimonios, FAQ, clases) */
  .page-head{
  position:relative;
  background:var(--bg-1);
  padding:clamp(140px,20vh,210px) 6vw clamp(56px,8vh,84px);
  text-align:center;
  overflow:hidden;
}
/* Acuarela suave detras del encabezado, sin robarle el foco al texto */
.page-head::before{
  content:"";
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(60% 70% at 18% 10%, color-mix(in srgb, var(--sky) 45%, transparent) 0%, transparent 60%),
    radial-gradient(55% 60% at 86% 82%, color-mix(in srgb, var(--gold) 12%, transparent) 0%, transparent 62%);
}
.page-head-inner{position:relative;z-index:1;max-width:720px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;}

  /* Tarjeta de producto en el hub: contenido, no recorte */
  .exp-card figure.producto{
    background:
      radial-gradient(70% 60% at 26% 22%, color-mix(in srgb, var(--sky) 55%, transparent) 0%, transparent 64%),
      linear-gradient(160deg, var(--bg-1) 0%, color-mix(in srgb, var(--sky) 32%, var(--bg-1)) 60%, var(--bg-1) 100%);
    display:flex;align-items:center;justify-content:center;
    padding:14%;
  }
  .exp-card figure.producto img{
    width:100%;height:auto;object-fit:contain;
    filter:drop-shadow(0 14px 24px rgba(12,32,54,.18));
  }
  .exp-card:hover figure.producto img{transform:scale(1.04);}

  /* Saltar al contenido: invisible hasta que alguien navega con teclado */
  .saltar{
    position:absolute;
    left:-9999px;
    top:0;
    z-index:100;
    background:var(--deep);
    color:var(--white);
    font-family:"Poppins",sans-serif;
    font-size:14px;
    padding:14px 22px;
    border-radius:0 0 12px 0;
    text-decoration:none;
  }
  .saltar:focus{left:0;}

  /* En táctil los enlaces del pie iban a 22px de alto: muy justos para el dedo.
     En escritorio se conserva el interlineado apretado. */
  @media (pointer:coarse), (max-width:720px){
    .footer-col{gap:0;}
    .footer-col a{
      min-height:44px;
      display:flex;
      align-items:center;
    }
    .link-gold{padding-top:12px;padding-bottom:12px;}
  }

  /* Visible solo para lectores de pantalla: da estructura sin alterar el diseño */
  .solo-lectores{
    position:absolute;
    width:1px;height:1px;
    padding:0;margin:-1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
    border:0;
  }


.hero{
    position:relative;
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    padding:min(12vh,120px) 6vw 10vh;
    text-align:center;
    overflow:hidden;
  }

.bg-video{
    position:absolute;
    inset:0;
    z-index:-4;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    filter:var(--video-filter);
    opacity:var(--video-opacity);
    transition:filter .4s ease, opacity .4s ease;
  }

.bg-watercolor{
    position:absolute;
    inset:0;
    z-index:-3;
    mix-blend-mode:soft-light;
  }

:root[data-theme="dark"] .bg-watercolor{mix-blend-mode:screen;}

@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .bg-watercolor{mix-blend-mode:screen;}
  }

.bg-watercolor svg{width:100%;height:100%;display:block;}

.bg-wash{
    position:absolute;
    inset:0;
    z-index:-2;
    background:
      radial-gradient(120% 70% at 50% -10%, color-mix(in srgb, var(--bg-1) 80%, transparent) 0%, transparent 62%),
      radial-gradient(120% 60% at 50% 112%, color-mix(in srgb, var(--bg-1) 84%, transparent) 0%, transparent 58%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 32%, transparent) 0%, color-mix(in srgb, var(--bg-1) 14%, transparent) 42%, color-mix(in srgb, var(--bg-1) 14%, transparent) 58%, color-mix(in srgb, var(--bg-2) 30%, transparent) 100%),
      linear-gradient(color-mix(in srgb, var(--bg-1) var(--scrim), transparent) 0%, color-mix(in srgb, var(--bg-1) var(--scrim), transparent) 100%);
    transition:background .4s ease;
  }

.content-veil{
    position:absolute;
    inset:0;
    z-index:0;
    /* Meseta: cubre todo el bloque de texto, luego libera hacia los bordes */
    background:radial-gradient(72% 64% at 50% 47%,
      color-mix(in srgb, var(--bg-1) var(--veil-a), transparent) 0%,
      color-mix(in srgb, var(--bg-1) var(--veil-a), transparent) 36%,
      color-mix(in srgb, var(--bg-1) var(--veil-b), transparent) 64%,
      transparent 84%);
    pointer-events:none;
    transition:background .4s ease;
  }

.sparkles{position:absolute;inset:0;z-index:1;pointer-events:none;}

.spark{
    position:absolute;
    animation:twinkle ease-in-out infinite;
    color:var(--accent);
  }

.spark.w{color:var(--white);}

@keyframes twinkle{
    0%,100%{opacity:.15; transform:scale(.7);}
    50%{opacity:.9; transform:scale(1);}
  }

.hero-content{
    position:relative;
    z-index:2;
    max-width:760px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:26px;
  }

.kicker{
    font-family:"Great Vibes",cursive;
    font-size:clamp(28px,4vw,40px);
    color:var(--accent-ink);
    margin:0;
    line-height:1;
    font-weight:400;
    text-shadow:0 1px 10px var(--text-halo), 0 0 26px var(--text-halo);
  }

.headline{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:clamp(30px,5.4vw,58px);
    line-height:1.22;
    letter-spacing:-.01em;
    color:var(--ink);
    margin:0;
    text-wrap:balance;
    max-width:15ch;
    text-shadow:0 1px 12px var(--text-halo), 0 0 30px var(--text-halo);
  }

.headline em{
    font-style:normal;
    font-weight:700;
    color:var(--accent-ink);
  }

.sub{
    font-family:"Poppins",sans-serif;
    font-weight:400;
    font-size:clamp(15px,1.7vw,18px);
    line-height:1.7;
    /* Tinta solida: es copy primario y va sobre video en movimiento */
    color:var(--ink);
    max-width:42ch;
    margin:0;
    text-shadow:0 1px 10px var(--text-halo), 0 0 22px var(--text-halo);
  }

.sub em{
    font-style:normal;
    font-weight:500;
    color:var(--accent-ink);
  }

.scroll-cue{
    position:absolute;
    bottom:34px;
    left:50%;
    transform:translateX(-50%);
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    color:var(--ink-soft);
    font-family:"Poppins",sans-serif;
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
  }

.scroll-cue .line{
    width:1px;height:34px;
    background:linear-gradient(var(--accent), transparent);
    animation:sink 2.2s ease-in-out infinite;
  }

@keyframes sink{
    0%,100%{transform:scaleY(1); transform-origin:top;}
    50%{transform:scaleY(.5); transform-origin:top;}
  }

/* ============ Seccion: ¿Que quieres cambiar? ============ */

  .change{
    position:relative;
    z-index:1;
    background:var(--bg-3);
    padding:clamp(72px,10vh,120px) 6vw clamp(80px,12vh,140px);
    border-top:1px solid var(--hairline);
  }

.change-inner{
    max-width:960px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
  }

.change-title{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:clamp(26px,4vw,40px);
    line-height:1.25;
    color:var(--ink);
    margin:0;
    text-wrap:balance;
  }

.change-title em{font-style:normal;font-weight:700;color:var(--accent-ink);}

.change-lead{
    font-family:"Poppins",sans-serif;
    font-size:clamp(14px,1.6vw,16px);
    line-height:1.7;
    color:var(--ink-soft);
    max-width:44ch;
    margin:18px 0 0;
  }

.needs{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
    gap:14px;
    width:100%;
  }

.need{
    font-family:"Poppins",sans-serif;
    font-size:15px;
    font-weight:400;
    line-height:1.5;
    text-align:left;
    color:var(--ink);
    background:var(--card-bg);
    border:1px solid var(--hairline);
    border-radius:16px;
    padding:20px 22px;
    cursor:pointer;
    transition:border-color .3s ease, transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease;
  }

.need b{font-weight:600;color:var(--ink);}

.need:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow:0 12px 26px -18px color-mix(in srgb, var(--deep) 60%, transparent);
  }

.need:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.need[aria-expanded="true"]{
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 10%, var(--card-bg));
    box-shadow:0 14px 30px -20px color-mix(in srgb, var(--deep) 70%, transparent);
  }

/* Panel de resultado: se abre con grid-template-rows, sin alturas fijas */
  .result{
    width:100%;
    display:grid;
    grid-template-rows:0fr;
    transition:grid-template-rows .5s cubic-bezier(.2,.8,.2,1);
  }

.result[data-open="true"]{grid-template-rows:1fr;}

.result > div{overflow:hidden;}

.result-body{
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .4s ease .1s, transform .4s ease .1s;
    padding-top:34px;
  }

.result[data-open="true"] .result-body{opacity:1;transform:none;}

.result-q{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:clamp(19px,2.6vw,26px);
    line-height:1.4;
    color:var(--accent-ink);
    margin:0 auto;
    max-width:26ch;
    text-wrap:balance;
  }

.result-note{
    font-family:"Poppins",sans-serif;
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:26px 0 16px;
  }

.result-tools{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:16px;
    text-align:left;
  }

/* Mismo trazo que .need, .xp-paso y .ev: todas las tarjetas del sistema
   llevan solo el filete fino. La barra dorada al costado no significaba
   nada aquí y rompía esa consistencia. */
.tool{
    background:var(--card-bg);
    border:1px solid var(--hairline);
    border-radius:14px;
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

.tool h3{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:16px;
    color:var(--ink);
    margin:0;
  }

.tool p{
    font-family:"Poppins",sans-serif;
    font-size:14px;
    line-height:1.65;
    color:var(--ink-soft);
    margin:0;
  }

.tool a{
    font-family:"Poppins",sans-serif;
    font-size:13px;
    font-weight:500;
    color:var(--accent-ink);
    text-decoration:none;
    margin-top:auto;
    padding-top:6px;
    border-bottom:1px solid transparent;
    align-self:flex-start;
    transition:border-color .25s ease;
  }

.tool a:hover, .tool a:focus-visible{border-bottom-color:var(--accent);}

.result-wa{
    display:inline-flex;
    align-items:center;
    gap:10px;
    margin-top:28px;
    padding:15px 28px;
    border-radius:999px;
    background:var(--deep);
    color:var(--white);
    text-decoration:none;
    font-family:"Poppins",sans-serif;
    font-weight:500;
    font-size:14.5px;
    box-shadow:0 14px 30px -16px rgba(12,32,54,.6);
    transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
  }

.result-wa:hover{transform:translateY(-2px);background:var(--deep-2);}

.result-wa svg{width:18px;height:18px;flex:none;}

/* Salida siempre disponible: nunca obligar a elegir */
  .unsure{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:6px 12px;
    width:100%;
    margin-top:34px;
    padding:18px 24px;
    border:1px dashed color-mix(in srgb, var(--accent) 60%, transparent);
    border-radius:16px;
    background:transparent;
    text-decoration:none;
    font-family:"Poppins",sans-serif;
    font-size:14.5px;
    color:var(--ink-soft);
    transition:background .3s ease, border-color .3s ease;
  }

.unsure:hover, .unsure:focus-visible{
    background:color-mix(in srgb, var(--accent) 8%, transparent);
    border-color:var(--accent);
  }

.unsure b{color:var(--accent-ink);font-weight:500;}

/* ============ Vista previa de experiencias ============ */

  .exp{
    background:var(--bg-1);
    padding:clamp(72px,10vh,120px) 6vw;
    border-top:1px solid var(--hairline);
  }

.exp-inner{max-width:1100px;margin:0 auto;}

.exp-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:46px;}





















/* ============ Vive en la pregunta ============ */

  .live{
    position:relative;
    background:var(--deep);
    padding:clamp(84px,13vh,150px) 6vw;
    text-align:center;
    overflow:hidden;
    isolation:isolate;
  }

:root[data-theme="dark"] .live{background:#0a1725;}

@media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]) .live{background:#0a1725;}
  }

.live::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    background:
      radial-gradient(70% 60% at 22% 18%, color-mix(in srgb, var(--sky) 22%, transparent) 0%, transparent 62%),
      radial-gradient(60% 50% at 82% 88%, color-mix(in srgb, var(--gold) 13%, transparent) 0%, transparent 60%);
  }

.live-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;}

.live-eyebrow{
    font-family:"Great Vibes",cursive;
    font-size:clamp(26px,3.6vw,36px);
    color:var(--gold-soft);
    margin:0 0 26px;
    line-height:1;
  }

.live-q{
    font-family:"Montserrat",sans-serif;
    font-weight:600;
    font-size:clamp(24px,4.2vw,42px);
    line-height:1.34;
    color:#ffffff;
    margin:0;
    min-height:2.7em;
    display:flex;
    align-items:center;
    justify-content:center;
    text-wrap:balance;
    transition:opacity .45s ease, transform .45s ease;
  }

.live-q[data-fade="true"]{opacity:0;transform:translateY(8px);}

.live-actions{
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    justify-content:center;
    align-items:center;
    margin-top:38px;
  }

/* ============ Testimonios ============ */

  .tst{
    background:var(--bg-3);
    padding:clamp(72px,10vh,120px) 6vw;
  }

.tst-inner{max-width:1000px;margin:0 auto;}

.tst-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:46px;}

.tst-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
  }

.tst-card{
    background:var(--card-bg);
    border:1px solid var(--hairline);
    border-radius:18px;
    padding:28px 26px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }

.tst-card blockquote{
    margin:0;
    font-family:"Poppins",sans-serif;
    font-size:15px;
    line-height:1.75;
    color:var(--ink);
  }

.tst-card blockquote b{font-weight:500;color:var(--accent-ink);}

.tst-who{
    display:flex;align-items:center;gap:12px;
    margin-top:auto;
  }

.tst-ini{
    width:46px;height:46px;flex:none;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:color-mix(in srgb, var(--accent) 16%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    font-family:"Montserrat",sans-serif;font-weight:600;font-size:13.5px;
    color:var(--accent-ink);
  }

.tst-meta{
    font-family:"Poppins",sans-serif;font-size:12.5px;line-height:1.4;
    color:var(--ink-soft);
  }

/* ============ Cierre + pie ============ */

  .close{
    background:var(--bg-1);
    padding:clamp(72px,11vh,130px) 6vw clamp(60px,8vh,90px);
    text-align:center;
    border-top:1px solid var(--hairline);
  }

.close-inner{max-width:640px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:26px;}

@media (prefers-reduced-motion: reduce){
    .live-q{transition:none !important;}
  }

@media (max-width:640px){
    .hero{padding-top:16vh;}
  }

@media (prefers-reduced-motion: reduce){
    .spark,.scroll-cue .line{animation:none !important;}
    .spark{opacity:.6;}
  }
/* ============ Quién te acompaña ============ */
.alma-teaser{
  background:var(--bg-3);
  padding:clamp(60px,9vh,100px) 6vw;
  border-top:1px solid var(--hairline);
}
.alma-teaser-inner{
  max-width:920px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:clamp(28px,5vw,56px);
  align-items:center;
}
.alma-foto{
  margin:0;
  aspect-ratio:4/5;
  overflow:hidden;
  border-radius:18px;
  background:var(--card-bg);
}
.alma-foto img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:50% 30%;
  display:block;
}
.alma-texto{display:flex;flex-direction:column;align-items:flex-start;}
.alma-texto .section-lead{margin:18px 0 0;max-width:44ch;}
.alma-texto .link-gold{margin-top:24px;}

@media (max-width:720px){
  .alma-teaser-inner{grid-template-columns:1fr;justify-items:center;text-align:center;}
  .alma-foto{max-width:260px;}
  .alma-texto{align-items:center;}
  .alma-texto .link-gold{align-self:center;}
}


/* ============ Conoce a Alma ============ */

.banner{
  position:relative;
  isolation:isolate;
  min-height:min(78vh,720px);
  display:flex;
  align-items:flex-end;
  padding:clamp(90px,14vh,160px) 6vw clamp(44px,7vh,72px);
  overflow:hidden;
}
.banner img{
  position:absolute;
  inset:0;
  z-index:-2;
  width:100%;height:100%;
  object-fit:cover;
  /* el caballo y el cielo quedan a la vista; Alma cae a la derecha */
  object-position:62% 42%;
}
/* Degradado desde abajo: el texto se apoya en el, no sobre la foto entera */
.banner::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(
    to top,
    color-mix(in srgb, var(--bg-1) 96%, transparent) 0%,
    color-mix(in srgb, var(--bg-1) 88%, transparent) 22%,
    color-mix(in srgb, var(--bg-1) 40%, transparent) 48%,
    transparent 78%);
}
.banner-inner{
  position:relative;
  max-width:640px;
}
.banner-hola{
  font-family:"Great Vibes",cursive;
  font-size:clamp(38px,6.5vw,68px);
  line-height:1;
  color:var(--accent-ink);
  margin:0 0 18px;
  text-shadow:0 1px 12px var(--text-halo), 0 0 28px var(--text-halo);
}
.banner-lead{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:clamp(19px,2.6vw,27px);
  line-height:1.42;
  color:var(--ink);
  margin:0;
  max-width:24ch;
  text-wrap:balance;
  text-shadow:0 1px 12px var(--text-halo);
}
.banner-credit{
  position:absolute;
  right:6vw;
  bottom:14px;
  font-family:"Poppins",sans-serif;
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-soft);
  opacity:.75;
}

/* --- historia --- */
.story{
  background:var(--bg-3);
  padding:clamp(64px,9vh,104px) 6vw;
}
.story-inner{
  max-width:60ch;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:24px;
}
.story p{
  font-family:"Poppins",sans-serif;
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.85;
  color:var(--ink);
  margin:0;
}
.story p.big{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:clamp(20px,2.8vw,28px);
  line-height:1.45;
  color:var(--accent-ink);
  text-wrap:balance;
}
.story em{font-style:normal;font-weight:500;color:var(--accent-ink);}

/* Marcador visible de texto que Alma debe escribir */
.tofill{
  border:1px dashed color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius:14px;
  padding:20px 22px;
  background:color-mix(in srgb, var(--accent) 7%, transparent);
}
.tofill span{
  display:block;
  font-family:"Poppins",sans-serif;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--accent-ink);
  margin-bottom:10px;
}

/* --- lo que no hago / lo que si --- */
.pairs{
  background:var(--bg-1);
  padding:clamp(64px,9vh,104px) 6vw;
  border-top:1px solid var(--hairline);
}
.pairs-inner{max-width:820px;margin:0 auto;}
.pairs-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:42px;}
.pair-list{display:flex;flex-direction:column;gap:2px;}
.pair{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  padding:22px 4px;
  border-bottom:1px solid var(--hairline);
}
.pair:last-child{border-bottom:none;}
.pair .no{
  font-family:"Poppins",sans-serif;
  font-size:15px;
  line-height:1.6;
  color:var(--ink-soft);
  text-align:right;
}
.pair .si{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
}
.pair .arrow{
  width:26px;height:1px;
  background:linear-gradient(90deg, transparent, var(--accent));
  position:relative;
}
.pair .arrow::after{
  content:"";
  position:absolute;right:0;top:-2px;
  width:5px;height:5px;border-radius:50%;
  background:var(--accent);
}
@media (max-width:640px){
  .pair{grid-template-columns:1fr;gap:8px;padding:18px 0;}
  .pair .no{text-align:left;}
  .pair .arrow{width:1px;height:16px;background:linear-gradient(180deg,transparent,var(--accent));margin-left:2px;}
  .pair .arrow::after{right:auto;left:-2px;top:auto;bottom:0;}
}

/* --- cierre --- */
.close-alma{
  background:var(--bg-3);
  padding:clamp(64px,10vh,110px) 6vw clamp(56px,8vh,90px);
  text-align:center;
  border-top:1px solid var(--hairline);
}
.close-alma-inner{max-width:600px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:24px;}


/* ============ Hub de /experiencias ============ */

.hub-grid-wrap{
  background:var(--bg-3);
  padding:clamp(56px,8vh,90px) 6vw clamp(64px,9vh,100px);
  border-top:1px solid var(--hairline);
}
.hub-grid-inner{max-width:1100px;margin:0 auto;}

/* Nota sobre lo que no tiene pagina propia todavia */
.hub-mas{
  max-width:62ch;
  margin:46px auto 0;
  text-align:center;
  font-family:"Poppins",sans-serif;
  font-size:14.5px;
  line-height:1.75;
  color:var(--ink-soft);
}
.hub-mas b{color:var(--ink);font-weight:500;}

.hub-unsure-wrap{
  background:var(--bg-1);
  padding:clamp(52px,7vh,80px) 6vw clamp(60px,8vh,90px);
  border-top:1px solid var(--hairline);
}
.hub-unsure-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;text-align:center;}


/* ============ Sub-página de experiencia ============ */

.xp-banner{
  position:relative;
  isolation:isolate;
  min-height:min(66vh,600px);
  display:flex;
  align-items:flex-end;
  padding:clamp(90px,14vh,160px) 6vw clamp(40px,6vh,64px);
  overflow:hidden;
}
.xp-banner img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;
}
/* Sin foto: acuarela azul con veta dorada, en vez de un hueco */
.xp-banner--wash::before{
  content:"";
  position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(80% 70% at 22% 20%, color-mix(in srgb, var(--sky) 62%, transparent) 0%, transparent 62%),
    radial-gradient(70% 60% at 84% 78%, color-mix(in srgb, var(--deep) 30%, transparent) 0%, transparent 60%),
    linear-gradient(165deg, var(--bg-1) 0%, color-mix(in srgb, var(--sky) 40%, var(--bg-1)) 55%, var(--bg-1) 100%);
}
.xp-banner--wash .vein{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  opacity:var(--vein-opacity);
}
.xp-banner::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--bg-1) 97%, transparent) 0%,
    color-mix(in srgb, var(--bg-1) 91%, transparent) 30%,
    color-mix(in srgb, var(--bg-1) 54%, transparent) 60%,
    transparent 90%);
}
.xp-banner-inner{position:relative;max-width:660px;}
.xp-kicker{
  font-family:"Poppins",sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-soft);margin:0 0 16px;
}
.xp-pregunta{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:clamp(25px,4.4vw,44px);
  line-height:1.28;
  color:var(--ink);
  margin:0;
  text-wrap:balance;
  text-shadow:0 1px 12px var(--text-halo), 0 0 26px var(--text-halo);
}
.xp-entradilla{
  font-family:"Poppins",sans-serif;
  font-size:clamp(15px,1.8vw,18px);
  line-height:1.7;
  color:var(--ink);
  max-width:44ch;
  margin:20px 0 0;
  text-shadow:0 1px 10px var(--text-halo);
}

/* --- qué es (lo técnico, después de la pregunta) --- */
.xp-que{
  background:var(--bg-3);
  padding:clamp(60px,8vh,96px) 6vw;
}
.xp-que-inner{max-width:62ch;margin:0 auto;display:flex;flex-direction:column;gap:20px;}
.xp-nombre{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:clamp(21px,3vw,30px);
  color:var(--ink);
  margin:0 0 4px;
}
.xp-que p{
  font-family:"Poppins",sans-serif;
  font-size:clamp(15px,1.7vw,17px);
  line-height:1.85;
  color:var(--ink);
  margin:0;
}

/* --- cómo es una sesión --- */
.xp-sesion{
  background:var(--bg-1);
  padding:clamp(60px,8vh,96px) 6vw;
  border-top:1px solid var(--hairline);
}
.xp-sesion-inner{max-width:900px;margin:0 auto;}
.xp-sesion-head{text-align:center;display:flex;flex-direction:column;align-items:center;margin-bottom:38px;}
.xp-pasos{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:18px;
}
.xp-paso{
  background:var(--card-bg);
  border:1px solid var(--hairline);
  border-radius:16px;
  padding:22px 22px 24px;
  display:flex;flex-direction:column;gap:8px;
}
.xp-paso h3{
  font-family:"Poppins",sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:0;font-weight:500;
}
.xp-paso p{
  font-family:"Poppins",sans-serif;
  font-size:14.5px;line-height:1.65;color:var(--ink);margin:0;
}

/* --- qué suelen notar --- */
.xp-notan{
  background:var(--bg-3);
  padding:clamp(56px,8vh,90px) 6vw;
  text-align:center;
}
.xp-notan-inner{max-width:38ch;margin:0 auto;}
.xp-notan p{
  font-family:"Montserrat",sans-serif;
  font-weight:600;
  font-size:clamp(19px,2.6vw,26px);
  line-height:1.5;
  color:var(--accent-ink);
  margin:0;
  text-wrap:balance;
}

/* --- lo que solo Alma puede escribir --- */
.xp-pendiente{
  background:var(--bg-1);
  padding:clamp(40px,6vh,64px) 6vw;
  border-top:1px solid var(--hairline);
}
.xp-pendiente-inner{
  max-width:62ch;margin:0 auto;
  border:1px dashed color-mix(in srgb, var(--accent) 65%, transparent);
  border-radius:16px;
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  padding:22px 24px;
}
.xp-pendiente h3{
  font-family:"Poppins",sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 12px;font-weight:500;
}
.xp-pendiente ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:8px;}
.xp-pendiente li{
  font-family:"Poppins",sans-serif;font-size:14px;line-height:1.65;color:var(--ink);
}

/* --- cierre --- */
.xp-cierre{
  background:var(--bg-3);
  padding:clamp(60px,9vh,100px) 6vw clamp(52px,7vh,80px);
  text-align:center;
  border-top:1px solid var(--hairline);
}
.xp-cierre-inner{max-width:580px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:22px;}

/* --- otras experiencias --- */
.xp-otras{
  background:var(--bg-1);
  padding:clamp(52px,7vh,80px) 6vw;
  border-top:1px solid var(--hairline);
}
.xp-otras-inner{max-width:900px;margin:0 auto;text-align:center;}
.xp-otras h2{
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:clamp(17px,2.2vw,21px);color:var(--ink);margin:0 0 22px;
}
.xp-chips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;}
.xp-chip{
  font-family:"Poppins",sans-serif;font-size:14px;
  color:var(--ink);text-decoration:none;
  border:1px solid var(--hairline);
  border-radius:999px;
  padding:11px 20px;
  transition:border-color .25s ease, background .25s ease;
}
.xp-chip:hover, .xp-chip:focus-visible{
  border-color:var(--accent);
  background:color-mix(in srgb, var(--accent) 8%, transparent);
}

/* Nota honesta, sin alarmar */
.xp-aviso{
  max-width:62ch;margin:0 auto;
  padding:0 6vw clamp(40px,6vh,60px);
  font-family:"Poppins",sans-serif;
  font-size:12px;line-height:1.7;
  color:var(--ink-soft);
  text-align:center;
  background:var(--bg-1);
}

/* --- precios --- */
.xp-precio{
  max-width:520px;
  margin:30px auto 0;
  border:1px solid var(--hairline);
  border-radius:16px;
  background:var(--card-bg);
  overflow:hidden;
}
.xp-precio-fila{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:15px 22px;
  border-bottom:1px solid var(--hairline);
}
.xp-precio-fila:last-child{border-bottom:none;}
.xp-precio-q{
  font-family:"Poppins",sans-serif;font-size:14px;color:var(--ink-soft);
}
.xp-precio-c{
  font-family:"Montserrat",sans-serif;font-weight:600;font-size:15px;
  color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums;
}

/* Nota de transparencia (relación comercial, naturaleza del producto) */
.xp-nota{
  margin:8px 0 0;
  padding:14px 16px;
  border:1px solid var(--hairline);
  border-radius:12px;
  background:color-mix(in srgb, var(--accent) 6%, transparent);
  font-family:"Poppins",sans-serif;
  font-size:13px;line-height:1.7;color:var(--ink-soft);
}

/* --- dirección (solo donde hay sede fija) --- */
.xp-dir{
  max-width:520px;
  margin:16px auto 0;
  border:1px solid var(--hairline);
  border-radius:16px;
  background:var(--card-bg);
  padding:20px 22px;
  display:flex;flex-direction:column;gap:6px;
}
.xp-dir h3{
  font-family:"Poppins",sans-serif;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 2px;font-weight:500;
}
.xp-dir-calle{
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:15px;line-height:1.5;color:var(--ink);margin:0;
}
.xp-dir-nota{
  font-family:"Poppins",sans-serif;font-size:13.5px;line-height:1.6;
  color:var(--ink-soft);margin:0;
}
.xp-dir .link-gold{margin-top:6px;align-self:flex-start;font-size:13.5px;}

/* Render de producto: flota sobre la acuarela en vez de recortarse a sangre */
.xp-banner--producto{align-items:center;}
.xp-banner--producto .xp-producto{
  position:absolute;
  /* se anula el inset:0 de la regla base, o left:0 gana sobre right */
  inset:auto;
  right:6vw;
  top:50%;
  transform:translateY(-50%);
  z-index:-1;
  width:min(42vw,420px);
  height:auto;
  object-fit:contain;
  filter:drop-shadow(0 24px 40px rgba(12,32,54,.22));
  pointer-events:none;
}
.xp-banner--producto .xp-banner-inner{max-width:min(48%,480px);}
/* Lado a lado solo cuando caben los dos. Por debajo se apilan, y el producto
   pasa a flujo normal: así es imposible que se encimen, midan lo que midan. */
@media (max-width:1100px){
  .xp-banner--producto{
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;
    gap:clamp(20px,3.5vh,38px);
    text-align:center;
  }
  .xp-banner--producto .xp-producto{
    position:relative;
    inset:auto;
    transform:none;
    z-index:0;
    width:min(58vw,290px);
  }
  .xp-banner--producto .xp-banner-inner{max-width:100%;}
  .xp-banner--producto .xp-entradilla{margin-left:auto;margin-right:auto;}
}


/* ============ Clases y eventos · Testimonios · FAQ ============ */

.bloque{
  background:var(--bg-3);
  padding:clamp(56px,8vh,90px) 6vw clamp(64px,9vh,100px);
  border-top:1px solid var(--hairline);
}
.bloque--crema{background:var(--bg-1);}
.bloque-inner{max-width:900px;margin:0 auto;}
.bloque-inner--ancho{max-width:1060px;}
.bloque-cta{
  display:flex;flex-direction:column;align-items:center;gap:22px;
  text-align:center;max-width:600px;margin:0 auto;
}

/* --------- Clases y eventos --------- */

.ev-lista{display:flex;flex-direction:column;gap:16px;}
.ev{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:start;
  gap:24px;
  background:var(--card-bg);
  border:1px solid var(--hairline);
  border-radius:18px;
  padding:24px 26px;
}
/* Fecha como bloque, para escanear la lista de un vistazo */
.ev-fecha{
  flex:none;
  min-width:74px;
  text-align:center;
  border-right:1px solid var(--hairline);
  padding-right:22px;
}
.ev-dia{
  display:block;
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:30px;line-height:1;color:var(--accent-ink);
  font-variant-numeric:tabular-nums;
}
.ev-mes{
  display:block;margin-top:4px;
  font-family:"Poppins",sans-serif;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);
}
.ev-cuerpo{display:flex;flex-direction:column;gap:8px;}
.ev-tipo{
  font-family:"Poppins",sans-serif;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);margin:0;
}
.ev-titulo{
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:18px;line-height:1.35;color:var(--ink);margin:0;
}
.ev-desc{
  font-family:"Poppins",sans-serif;font-size:14.5px;line-height:1.65;
  color:var(--ink-soft);margin:0;
}
.ev-datos{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:2px;}
.ev-dato{
  font-family:"Poppins",sans-serif;font-size:13px;color:var(--ink-soft);
  display:inline-flex;align-items:center;gap:6px;
}
.ev-dato::before{
  content:"";width:4px;height:4px;border-radius:50%;
  background:var(--accent);flex:none;
}
.ev-accion{align-self:center;}
.btn-mini{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:12px 20px;border-radius:999px;
  background:var(--deep);color:var(--white);text-decoration:none;
  font-family:"Poppins",sans-serif;font-weight:500;font-size:13.5px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s ease;
}
.btn-mini:hover{transform:translateY(-2px);background:var(--deep-2);}
.btn-mini svg{width:16px;height:16px;flex:none;}

@media (max-width:720px){
  .ev{grid-template-columns:auto 1fr;gap:18px;}
  .ev-accion{grid-column:1 / -1;justify-self:start;margin-top:4px;}
}
@media (max-width:460px){
  .ev{grid-template-columns:1fr;gap:14px;padding:22px;}
  .ev-fecha{
    display:flex;align-items:baseline;gap:8px;
    min-width:0;text-align:left;border-right:none;padding-right:0;
    border-bottom:1px solid var(--hairline);padding-bottom:12px;
  }
  .ev-dia{font-size:24px;}
  .ev-mes{margin-top:0;}
}

/* Estado vacío: la página tiene que verse bien sin eventos */
.ev-vacio{
  text-align:center;
  border:1px dashed color-mix(in srgb, var(--accent) 50%, transparent);
  border-radius:18px;
  padding:clamp(40px,7vh,64px) 28px;
  display:flex;flex-direction:column;align-items:center;gap:16px;
}
.ev-vacio h2{
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:clamp(19px,2.6vw,24px);color:var(--ink);margin:0;
}
.ev-vacio p{
  font-family:"Poppins",sans-serif;font-size:15px;line-height:1.7;
  color:var(--ink-soft);max-width:44ch;margin:0;
}

/* --------- Testimonios --------- */

.tst-aviso{
  max-width:62ch;margin:0 auto 36px;
  border:1px dashed color-mix(in srgb, var(--accent) 65%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius:16px;padding:18px 22px;
}
.tst-aviso p{
  font-family:"Poppins",sans-serif;font-size:13.5px;line-height:1.7;
  color:var(--ink);margin:0;
}
.tst-aviso b{color:var(--accent-ink);}

.tst-muro{
  columns:3 260px;
  column-gap:18px;
}
.tst-muro .tst-card{
  break-inside:avoid;
  margin:0 0 18px;
}

/* --------- FAQ --------- */

.faq-grupo{margin-bottom:44px;}
.faq-grupo:last-child{margin-bottom:0;}
.faq-grupo > h2{
  font-family:"Poppins",sans-serif;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 16px;font-weight:500;
}
.faq{
  border-bottom:1px solid var(--hairline);
}
.faq:first-of-type{border-top:1px solid var(--hairline);}
.faq summary{
  list-style:none;
  cursor:pointer;
  padding:20px 44px 20px 0;
  position:relative;
  font-family:"Montserrat",sans-serif;font-weight:600;
  font-size:clamp(15.5px,1.9vw,17px);line-height:1.5;
  color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px;}
/* Cruz que gira a "menos" al abrir */
.faq summary::after{
  content:"";
  position:absolute;right:6px;top:50%;
  width:13px;height:13px;
  background:
    linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat,
    linear-gradient(var(--accent),var(--accent)) center/1.5px 13px no-repeat;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .3s cubic-bezier(.2,.8,.2,1);
}
.faq[open] summary::after{
  background:linear-gradient(var(--accent),var(--accent)) center/13px 1.5px no-repeat;
  transform:translateY(-50%) rotate(180deg);
}
.faq-r{padding:0 0 22px;display:flex;flex-direction:column;gap:12px;}
.faq-r p{
  font-family:"Poppins",sans-serif;font-size:15px;line-height:1.8;
  color:var(--ink-soft);margin:0;max-width:64ch;
}
.faq-pendiente{
  border:1px dashed color-mix(in srgb, var(--accent) 65%, transparent);
  background:color-mix(in srgb, var(--accent) 7%, transparent);
  border-radius:12px;padding:14px 16px;
}
.faq-pendiente span{
  display:block;font-family:"Poppins",sans-serif;font-size:10.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:8px;
}
.faq-pendiente p{color:var(--ink);font-size:14px;}

@media (prefers-reduced-motion: reduce){
  .faq summary::after{transition:none;}
}

/* Foto de perfil en testimonio: solo cuando la persona dio permiso */
.tst-foto{
  width:46px;height:46px;flex:none;
  border-radius:50%;
  object-fit:cover;
  border:1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}

/* andamio del boceto, oculto en producción */
.theme-toggle,.note{display:none !important;}