/* KZUP se ve oscuro siempre — decision de Marcelo: "esto se va a ver
   mejor en negro, no blanco". Antes seguia el tema del sistema
   (prefers-color-scheme); ahora el oscuro es la base fija, sin importar
   el modo del telefono o el navegador de quien lo visite. Se deja
   [data-theme="light"] como interruptor manual por si mas adelante se
   quiere ofrecer un boton de "modo claro" — hoy nada lo activa. */
:root{
    --ground:#111412;
    --surface:#191D1A;
    --surface-2:#232823;
    --line:#333930;
    --ink:#EEEFE9;
    --ink-soft:#B7BCB2;
    --blue:#4FA8E8;
    --blue-ink:#071A2A;
    --orange:#FFA53D;
    --orange-ink:#2A1500;
    --shadow-ink: rgba(0,0,0,0.5);
  }
  :root[data-theme="light"]{
    --ground:#EDEEE8;
    --surface:#F8F8F3;
    --surface-2:#E4E5DD;
    --line:#CDCEC3;
    --ink:#15181A;
    --ink-soft:#4A5049;
    --blue:#1D82C7;
    --blue-ink:#F5FAFF;
    --orange:#F5921E;
    --orange-ink:#2A1500;
    --shadow-ink: rgba(20,24,20,0.16);
  }

  *{box-sizing:border-box;}
  html{ overflow-x:hidden; }
  body{
    margin:0; overflow-x:hidden; background:var(--ground); color:var(--ink);
    font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:"Anton", "Arial Narrow", sans-serif;
    font-weight:400;
    text-transform:uppercase;
    letter-spacing:0.01em;
    line-height:0.95;
    text-wrap:balance;
    margin:0;
  }
  p{ margin:0; text-wrap:pretty; }
  a{ color:inherit; }
  img{ display:block; }
  .wrap{ max-width:1080px; margin:0 auto; padding:0 24px; }
  section{ padding:76px 0; }
  @media (max-width:640px){ section{ padding:52px 0; } }

  .court-rule{
    height:10px;
    background:repeating-linear-gradient(90deg, var(--line) 0 28px, transparent 28px 44px);
    opacity:.9;
  }

  .ext{ width:13px; height:13px; margin-left:5px; vertical-align:-1px; opacity:.7; }

  /* ---------- NAV ---------- */
  .nav{
    position:sticky; top:0; z-index:30;
    background:color-mix(in srgb, var(--ground) 88%, transparent);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
  }
  .nav .wrap{ display:flex; align-items:center; justify-content:space-between; padding-top:10px; padding-bottom:10px; gap:16px; }
  .nav-brand{ display:flex; align-items:center; padding:4px; border-radius:50%;
    background:radial-gradient(circle, color-mix(in srgb, var(--blue) 24%, transparent) 0%, transparent 72%); }
  .nav-brand img{ width:42px; height:42px; border-radius:50%; object-fit:cover; display:block; }
  .nav-links{ display:flex; gap:14px; font-size:13.5px; font-weight:600; }
  .nav-links a{ text-decoration:none; white-space:nowrap; }
  .nav-links a:hover{ color:var(--blue); }
  /* Marca la pagina en la que uno ya esta — el menu es IDENTICO en las 3
     paginas (index.php, cumpleanos.php, quienes-somos.php), nunca cambia
     de items entre una y otra, solo esto le dice a quien navega donde
     esta parado. */
  .nav-links a.actual{ color:var(--blue); }
  @media (max-width:820px){ .nav-links{ display:none; } }
  .nav .cta{
    display:inline-flex; align-items:center; gap:7px;
    font-family:"Work Sans"; font-weight:700; font-size:14px;
    background:var(--orange); color:var(--orange-ink);
    padding:10px 18px; border-radius:999px; text-decoration:none;
    white-space:nowrap; box-shadow:0 8px 16px -10px var(--shadow-ink);
    transition:transform .16s ease;
  }
  .nav .cta:hover{ transform:translateY(-1px); }

  /* ---------- HERO ---------- */
  .hero{ position:relative; overflow:hidden; min-height:min(88vh, 640px); display:flex; align-items:flex-end; }
  .hero-slides{ position:absolute; inset:0; }
  .hero-slide{
    position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;
    background-size:cover; background-position:center;
  }
  .hero-slide.is-active{ opacity:1; }
  .hero::after{
    content:""; position:absolute; inset:0; z-index:1;
    background:linear-gradient(0deg, rgba(10,12,10,.86) 0%, rgba(10,12,10,.5) 42%, rgba(10,12,10,.18) 70%, rgba(10,12,10,.35) 100%);
  }
  .hero-inner{ position:relative; z-index:2; padding:64px 24px 40px; color:#F4F5F0; width:100%; }
  .kicker-stats{ display:flex; flex-wrap:wrap; gap:8px 10px; margin-bottom:20px; }
  .stat-chip{
    font-size:13px; font-weight:600; padding:6px 12px;
    background:rgba(20,22,18,.5); border:1px solid rgba(255,255,255,.25); border-radius:999px;
    color:#F4F5F0;
  }
  .hero h1{ font-size:clamp(38px, 7.2vw, 76px); max-width:12ch; color:#fff; }
  .hero .sub{ margin-top:18px; font-size:clamp(16.5px,2.2vw,19px); color:#E4E6DF; max-width:46ch; line-height:1.5; }
  .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
  .btn{
    display:inline-flex; align-items:center; gap:10px;
    font-family:"Work Sans"; font-weight:700; font-size:15.5px;
    padding:14px 26px; border-radius:999px; text-decoration:none;
    border:1px solid transparent; cursor:pointer;
    box-shadow:0 10px 22px -12px var(--shadow-ink);
    transition:transform .16s ease, box-shadow .16s ease, filter .2s ease;
  }
  .btn:hover{ transform:translateY(-2px); box-shadow:0 16px 28px -14px var(--shadow-ink); }
  .btn-primary{ background:var(--blue); color:var(--blue-ink); }
  .btn-accent{ background:var(--orange); color:var(--orange-ink); }
  .btn-ghost{ background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.4); box-shadow:none; }
  .btn-ghost-line{ box-shadow:none; }
  .btn svg{ flex:none; }

  .hero-dots{ position:relative; z-index:2; display:flex; gap:8px; justify-content:center; padding-bottom:20px; }
  .hero-dots button{
    width:26px; height:4px; border-radius:2px; border:0; padding:0; cursor:pointer;
    background:rgba(255,255,255,.35);
  }
  .hero-dots button.is-active{ background:#fff; }

  /* ---------- SECTION HEADS ---------- */
  .head{ max-width:56ch; margin-bottom:36px; }
  .head h2{ font-size:clamp(28px,5vw,44px); }
  .head p{ margin-top:14px; color:var(--ink-soft); font-size:17px; max-width:48ch; line-height:1.55; }

  /* ---------- HISTORIA ---------- */
  .historia{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:center; }
  @media (max-width:780px){ .historia{ grid-template-columns:1fr; } }
  .historia-photo{ border-radius:10px; overflow:hidden; aspect-ratio:4/5; }
  .historia-photo img{ width:100%; height:100%; object-fit:cover; }
  .historia-copy h2{ font-size:clamp(28px,5vw,42px); max-width:12ch; }
  .historia-copy p{ margin-top:16px; color:var(--ink-soft); font-size:16.5px; line-height:1.62; max-width:50ch; }
  .historia-copy p + p{ margin-top:12px; }
  .historia-stats{ display:flex; gap:28px; margin-top:26px; flex-wrap:wrap; }
  .historia-stat .n{ font-family:"Anton"; font-size:30px; color:var(--blue); }
  .historia-stat .l{ font-size:13px; color:var(--ink-soft); }

  /* ---------- MAP / LEGEND ---------- */
  .legend{
    display:grid; grid-template-columns:repeat(2, 1fr); gap:2px;
    background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;
  }
  @media (max-width:720px){ .legend{ grid-template-columns:1fr; } }
  .legend-item{ background:var(--surface); padding:26px 24px; display:flex; gap:16px; }
  .pin{
    flex:none; width:34px; height:34px; border-radius:50%;
    background:var(--orange); color:var(--orange-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:"Anton"; font-size:16px;
  }
  .legend-copy h3{ font-family:"Work Sans"; text-transform:none; font-weight:700; font-size:17px; letter-spacing:0; }
  .legend-copy p{ margin-top:6px; color:var(--ink-soft); font-size:15px; line-height:1.5; }

  /* ---------- PRICING ---------- */
  .plans{ display:grid; grid-template-columns:1fr 1.16fr 1fr; gap:22px; align-items:center; }
  @media (max-width:860px){ .plans{ grid-template-columns:1fr; max-width:420px; margin:0 auto; } }
  .ticket{
    position:relative; background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:28px 26px 26px; display:flex; flex-direction:column; gap:18px;
  }
  .ticket.is-featured{ border-color:var(--blue); box-shadow:0 18px 34px -20px color-mix(in srgb, var(--blue) 45%, transparent); }
  .ticket::before, .ticket::after{
    content:""; position:absolute; width:22px; height:22px; border-radius:50%;
    background:var(--ground); border:1px solid var(--line); top:154px;
  }
  .ticket::before{ left:-12px; } .ticket::after{ right:-12px; }
  .plan-name{ font-size:24px; }
  .plan-tag{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
  .plan-price{ display:flex; align-items:baseline; gap:8px; margin-top:6px; }
  .plan-price .amount{ font-family:"Anton"; font-size:40px; font-variant-numeric:tabular-nums; }
  .plan-price .unit{ font-size:14px; color:var(--ink-soft); }
  .plan-min{ font-size:13px; color:var(--ink-soft); }
  .stub-rule{ border:0; border-top:1px dashed var(--line); margin:2px 0; }
  .plan-features{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; flex:1; }
  .plan-features li{ display:flex; gap:10px; font-size:14.5px; line-height:1.4; }
  .plan-features svg{ flex:none; width:18px; height:18px; margin-top:1px; color:var(--blue); }
  .plan-cta{ margin-top:4px; text-align:center; justify-content:center; }

  /* ---------- SKATE BAND ---------- */
  .band{ background:var(--blue); color:var(--blue-ink); }
  .band .wrap{ display:flex; gap:40px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
  .band h2{ font-size:clamp(28px,5vw,42px); max-width:14ch; color:var(--blue-ink); }
  .band p{ margin-top:14px; max-width:44ch; opacity:.92; font-size:16px; line-height:1.55; }
  .band .btn-accent{ flex:none; }

  /* ---------- COMUNIDAD / PRUEBA SOCIAL ---------- */
  .comunidad{ display:grid; grid-template-columns:1fr 1fr; gap:44px; }
  @media (max-width:780px){ .comunidad{ grid-template-columns:1fr; } }
  .stat-row{ display:flex; gap:30px; flex-wrap:wrap; margin-bottom:28px; }
  .stat-row .n{ font-family:"Anton"; font-size:34px; color:var(--orange); }
  .stat-row .l{ font-size:13.5px; color:var(--ink-soft); max-width:16ch; margin-top:2px; }
  .link-list{ display:flex; flex-direction:column; gap:10px; }
  .link-list a{ font-size:15px; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
  .quote-mark{ width:40px; height:30px; color:var(--orange); }
  .testimonial blockquote{
    margin:14px 0 0; font-family:"Work Sans"; font-style:italic; font-weight:500;
    font-size:clamp(19px,3vw,24px); line-height:1.4; max-width:32ch;
  }
  .testimonial cite{ display:block; margin-top:16px; font-style:normal; font-size:14px; color:var(--ink-soft); }

  /* ---------- DISPONIBILIDAD ---------- */
  .disponibilidad{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
  .disponibilidad .wrap{ display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap; }
  .disponibilidad h2{ font-size:clamp(24px,4vw,32px); max-width:16ch; }
  .disponibilidad p{ margin-top:10px; color:var(--ink-soft); font-size:15.5px; max-width:44ch; }

  /* ---------- CONTACT ---------- */
  .contact-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:start; }
  @media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
  .contact-rows{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
  .contact-row{ display:flex; gap:14px; align-items:flex-start; font-size:15.5px; }
  .contact-row svg{ flex:none; width:22px; height:22px; color:var(--blue); margin-top:1px; }
  .contact-row a{ text-decoration:underline; text-underline-offset:3px; }
  .map-card{
    background:var(--surface); border:1px solid var(--line); border-radius:8px; padding:22px;
    display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px;
  }
  .map-card svg{ width:100%; max-width:200px; height:auto; color:var(--blue); }
  .map-card .area{ font-family:"Anton"; font-size:19px; }
  .map-card .sub{ color:var(--ink-soft); font-size:14px; }

  /* ---------- CTA FINAL ---------- */
  .cta-final{
    position:relative; overflow:hidden; text-align:center; padding:88px 0;
    isolation:isolate;
  }
  .cta-final-media{ position:absolute; inset:0; z-index:-2; }
  .cta-final-media img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
  .cta-final::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(150deg, color-mix(in srgb, var(--blue) 92%, black 8%) 0%, rgba(10,14,18,.94) 100%);
    opacity:.88;
  }
  /* Brillo suave detras del texto, para que el cierre no se sienta plano
     junto a la foto — un solo acento, no varios. */
  .cta-final::after{
    content:""; position:absolute; z-index:-1; left:50%; top:38%;
    width:640px; height:640px; transform:translate(-50%,-50%);
    background:radial-gradient(circle, color-mix(in srgb, var(--orange) 30%, transparent) 0%, transparent 68%);
    pointer-events:none;
  }
  .cta-final-inner{ color:#F5FAFF; display:flex; flex-direction:column; align-items:center; }
  .cta-final-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:22px; }
  .cta-badge{
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.28);
    backdrop-filter:blur(4px); border-radius:999px; padding:7px 14px 7px 10px;
    font-size:13px; font-weight:600; color:#fff;
  }
  .cta-badge svg{ width:15px; height:15px; color:var(--orange); flex:none; }
  .cta-final h2{ font-size:clamp(30px,5.5vw,48px); color:#fff; max-width:16ch; margin:0 auto; }
  .cta-final p{ margin:16px auto 0; max-width:44ch; font-size:16.5px; color:#DCE6EE; }
  .cta-final-botones{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:30px; }
  .cta-final .btn-accent{ font-size:17px; padding:17px 32px; }
  .cta-final .btn-ghost{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.5); }

  /* ---------- PIE AMPLIADO ---------- */
  footer{ border-top:1px solid var(--line); padding:48px 0 0; background:var(--surface); }
  .footer-grid{
    display:grid; grid-template-columns:1.3fr 1fr; gap:32px;
    padding-bottom:36px;
  }
  @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
  .footer-col:not(.footer-marca){ flex-direction:row; flex-wrap:wrap; gap:8px 22px; align-content:flex-start; }
  .footer-col{ display:flex; flex-direction:column; gap:10px; }
  .footer-marca img{
    width:44px; height:44px; border-radius:50%; margin-bottom:4px; padding:5px; box-sizing:content-box;
    background:radial-gradient(circle, color-mix(in srgb, var(--blue) 22%, transparent) 0%, transparent 72%);
  }
  .footer-marca p{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); max-width:32ch; }
  .footer-titulo{ font-size:12.5px; font-weight:700; color:var(--ink-soft); margin-bottom:2px; }
  .footer-col a, .footer-texto{ font-size:14px; color:var(--ink); text-decoration:none; }
  .footer-col a:hover{ color:var(--blue); text-decoration:underline; text-underline-offset:2px; }
  .footer-texto{ color:var(--ink-soft); }
  .footer-copy{
    border-top:1px solid var(--edge, var(--line)); padding:16px 24px 22px;
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
    font-size:12.5px; color:var(--ink-soft);
  }
  .footer-copy .footer-legal{ display:flex; gap:16px; }


  /* ---------- PAGINAS LEGALES (terminos / privacidad) ---------- */
  .legal{ padding:56px 0 80px; }
  .legal-doc{ max-width:66ch; }
  .legal-doc h1{ font-size:clamp(30px,5vw,44px); }
  .legal-fecha{ margin-top:10px; font-size:13.5px; color:var(--ink-soft); }
  .legal-lead{ margin-top:20px; font-size:16.5px; line-height:1.6; color:var(--ink-soft); }
  .legal-indice{
    margin:28px 0 40px; padding:20px 24px; background:var(--surface);
    border:1px solid var(--line); border-radius:10px; font-size:14.5px;
  }
  .legal-indice strong{ display:block; margin-bottom:8px; font-size:13px; color:var(--ink-soft); }
  .legal-indice ol{ margin:0; padding-left:20px; display:flex; flex-direction:column; gap:5px; }
  .legal-indice a{ text-decoration:underline; text-underline-offset:2px; }
  .legal-doc h2{
    font-size:20px; text-transform:none; font-family:"Work Sans"; font-weight:700;
    margin-top:36px; margin-bottom:12px; scroll-margin-top:80px;
  }
  .legal-doc p{ font-size:15.5px; line-height:1.65; color:var(--ink-soft); margin-top:10px; }
  .legal-doc ul{ margin:12px 0 0; padding-left:20px; color:var(--ink-soft); font-size:15.5px; line-height:1.6; }
  .legal-doc ul li + li{ margin-top:6px; }
  .legal-doc strong{ color:var(--ink); }
  .legal-nota{
    margin-top:44px; padding:16px 18px; border-left:3px solid var(--orange);
    background:var(--surface); font-size:13.5px; line-height:1.55; color:var(--ink-soft);
  }

  .fab{
    position:fixed; right:20px; bottom:20px; z-index:40;
    width:58px; height:58px; border-radius:50%;
    background:#25D366; color:#fff;
    display:flex; align-items:center; justify-content:center;
    text-decoration:none; box-shadow:0 12px 26px -8px rgba(0,0,0,.45);
    transition:transform .18s ease;
  }
  .fab:hover{ transform:scale(1.07); }
  .fab svg{ width:29px; height:29px; display:block; }

  /* ---------- BARRA EN MOVIMIENTO ---------- */
  .marquee{
    overflow:hidden; background:var(--ink); color:var(--ground);
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding:11px 0;
  }
  .marquee-track{ display:flex; width:max-content; animation:desfile 34s linear infinite; }
  .marquee-track span{
    font-family:"Anton", sans-serif; font-size:14.5px; letter-spacing:.05em;
    text-transform:uppercase; white-space:nowrap;
    display:inline-flex; align-items:center; gap:20px; padding-right:20px;
  }
  .marquee-track span::after{
    content:""; width:6px; height:6px; border-radius:50%; background:var(--orange);
  }
  /* Si la animacion no corre, el texto igual se lee: solo deja de desplazarse. */
  @keyframes desfile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  /* ---------- TINTES DE SECCION (auditoria #1) ---------- */
  /* Antes: todo el sitio corria sobre el mismo gris neutro, con azul y
     naranjo solo como acento de boton — leia mas "SaaS" que "cumpleanos".
     Estos tintes son sutiles (8-10% de mezcla), no cambian la paleta,
     solo la hacen respirar. */
  .tinte-celeste{ background:color-mix(in srgb, var(--blue) 7%, var(--ground)); }
  .tinte-durazno{ background:color-mix(in srgb, var(--orange) 8%, var(--ground)); }

  /* ---------- MOTIVOS ---------- */
  .motivo-destacado{
    display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center;
    background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--orange);
    border-radius:12px; padding:28px 30px; margin-bottom:18px;
  }
  @media (max-width:820px){
    .motivo-destacado{ grid-template-columns:1fr; gap:16px; padding:24px 22px; }
    .motivo-destacado .mdes-cta{ justify-self:start; }
  }
  .mdes-icono{ display:block; width:50px; height:50px; color:var(--orange); }
  .mdes-icono svg{ width:100%; height:100%; }
  .mdes-texto h3{ font-size:clamp(21px,3vw,27px); }
  .mdes-texto p{ margin-top:9px; color:var(--ink-soft); font-size:15.5px; line-height:1.55; max-width:58ch; }

  .motivos{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:860px){ .motivos{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .motivos{ grid-template-columns:1fr; } }
  /* Auditoria #2: sin borde — la separacion la da el color de fondo y el
     espacio, no una linea. Auditoria #3: sombra teñida del propio acento,
     no negro plano. Iconos rellenos (badge de color), no solo linea. */
  .motivo{
    background:var(--surface); border-radius:12px;
    padding:24px 22px; transition:transform .22s ease, box-shadow .22s ease;
    box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  }
  .motivo:hover, .motivo.aparece:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 28px -16px color-mix(in srgb, var(--blue) 55%, transparent);
  }
  .motivo:nth-child(3n+2){ background:color-mix(in srgb, var(--blue) 6%, var(--surface)); }
  .motivo:nth-child(3n+3){ background:color-mix(in srgb, var(--orange) 7%, var(--surface)); }
  .motivo-icono{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border-radius:50%; margin-bottom:14px;
    background:var(--blue); color:var(--blue-ink);
  }
  .motivo:nth-child(3n+3) .motivo-icono{ background:var(--orange); color:var(--orange-ink); }
  .motivo-icono svg{ width:22px; height:22px; }
  .motivo h3{ font-size:19px; }
  .motivo p{ margin-top:8px; color:var(--ink-soft); font-size:14.5px; line-height:1.5; }

  /* ---------- EL ESPACIO ---------- */
  .esp-principal{ margin:0 0 18px; border-radius:14px; overflow:hidden; position:relative; }
  .esp-principal img{ width:100%; height:clamp(250px, 40vw, 440px); object-fit:cover; display:block; }
  .esp-principal figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:56px 30px 24px; color:#F4F5F0;
    background:linear-gradient(0deg, rgba(8,10,8,.92) 15%, rgba(8,10,8,.55) 60%, transparent);
  }
  .esp-principal figcaption h3{ font-size:clamp(22px,3.4vw,31px); color:#fff; }
  .esp-principal figcaption p{ margin-top:9px; font-size:15px; line-height:1.5; max-width:58ch; color:#DFE2DA; }

  .esp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
  @media (max-width:900px){ .esp-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:520px){ .esp-grid{ grid-template-columns:1fr; } }
  .esp-item{ margin:0; transition:transform .22s ease; }
  .esp-item:hover{ transform:translateY(-4px); }
  .esp-item img{
    width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; display:block;
    box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
    transition:box-shadow .22s ease;
  }
  .esp-item:hover img{ box-shadow:0 16px 26px -16px color-mix(in srgb, var(--blue) 50%, transparent); }
  .esp-item figcaption{ padding:13px 2px 0; }
  .esp-item figcaption h3{ font-size:16.5px; }
  .esp-item figcaption p{ margin-top:6px; color:var(--ink-soft); font-size:13.5px; line-height:1.45; }

  /* ---------- UN DIA ACA ---------- */
  .dia-grid{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:200px; gap:18px; }
  .dia-item{ margin:0; position:relative; border-radius:14px; overflow:hidden; }
  .dia-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .55s ease; }
  .dia-item:hover img{ transform:scale(1.05); }
  .dia-grande{ grid-column:span 2; grid-row:span 2; }
  .dia-ancha{ grid-column:span 3; }
  .dia-item figcaption{
    position:absolute; left:0; right:0; bottom:0; padding:34px 18px 15px; color:#F4F5F0;
    font-size:14.5px; font-weight:600;
    background:linear-gradient(0deg, rgba(8,10,8,.88), transparent);
  }
  .dia-grande figcaption{
    font-family:"Anton", sans-serif; font-weight:400; text-transform:uppercase;
    font-size:clamp(19px,2.6vw,25px); padding:44px 24px 20px;
  }
  @media (max-width:820px){
    .dia-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
    .dia-grande{ grid-column:span 2; grid-row:span 2; }
    .dia-ancha{ grid-column:span 2; }
  }
  @media (max-width:520px){
    .dia-grid{ grid-template-columns:1fr; grid-auto-rows:200px; }
    .dia-grande{ grid-column:span 1; grid-row:span 2; }
    .dia-ancha{ grid-column:span 1; }
  }

  /* ---------- VIDEOS CON VISTA PREVIA ---------- */
  .videos-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  @media (max-width:860px){ .videos-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width:560px){ .videos-grid{ grid-template-columns:1fr; } }
  .vcard{
    display:grid; grid-template-rows:auto 1fr; text-decoration:none; color:inherit;
    background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
  }
  .vcard:hover, .vcard.aparece:hover{ transform:translateY(-4px); box-shadow:0 18px 32px -20px var(--shadow-ink); }
  .vcard img{ grid-area:1/1; width:100%; aspect-ratio:16/10; object-fit:cover; display:block; }
  .v-play{
    grid-area:1/1; place-self:center; z-index:1;
    width:54px; height:54px; border-radius:50%;
    background:rgba(12,16,12,.55); border:1.5px solid rgba(255,255,255,.8); color:#fff;
    display:flex; align-items:center; justify-content:center;
    transition:transform .25s ease, background .25s ease;
  }
  .vcard:hover .v-play{ transform:scale(1.12); background:rgba(12,16,12,.75); }
  .v-play svg{ width:17px; height:17px; margin-left:3px; }
  .v-info{ grid-area:2/1; padding:16px 18px 18px; }
  .v-plataforma{ font-size:12px; font-weight:700; color:var(--ink-soft); }
  .is-ig .v-plataforma{ color:#D6337E; }
  .v-title{ font-size:18px; margin-top:5px; }
  .v-desc{ margin-top:7px; font-size:13.5px; line-height:1.45; color:var(--ink-soft); }

  .vcard-mas{
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:14px;
    padding:24px; border-color:transparent; color:#F6FAFF;
    background:linear-gradient(150deg, #1D82C7 0%, #14507A 100%);
  }
  .vcard-mas .v-play{ place-self:auto; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.55); }
  .vcard-mas .v-info{ padding:0; }
  .vcard-mas .v-plataforma, .vcard-mas .v-desc{ color:rgba(246,250,255,.85); }
  .vcard-mas .v-title{ color:#fff; }

  /* ---------- AGENDA DE CLASES ---------- */
  .agenda{ display:grid; grid-template-columns:1fr 1fr; gap:46px; align-items:start; }
  @media (max-width:820px){ .agenda{ grid-template-columns:1fr; } }
  .agenda-copy p{ margin-top:14px; color:var(--ink-soft); font-size:16.5px; line-height:1.6; max-width:44ch; }
  .agenda-copy ul{ margin:22px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:12px; }
  .agenda-copy li{ display:flex; gap:11px; font-size:15px; }
  .agenda-copy li svg{ flex:none; width:18px; height:18px; margin-top:2px; color:var(--blue); }
  .form-card{ background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:26px; }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }
  .field label{ font-size:13.5px; font-weight:600; color:var(--ink-soft); }
  .field input, .field select{
    font-family:"Work Sans"; font-size:15px; color:var(--ink); width:100%;
    background:var(--ground); border:1px solid var(--line); border-radius:5px; padding:11px 12px;
  }
  .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
  .form-note{ font-size:12.5px; color:var(--ink-soft); margin-top:14px; line-height:1.45; }
  .btn-block{ width:100%; justify-content:center; }

  /* ---------- MOVIMIENTO ---------- */
  .hero-slide.is-active{ animation:kenburns 9s ease-out forwards; }
  @keyframes kenburns{ from{ transform:scale(1);} to{ transform:scale(1.06);} }
  .g-item img{ transition:transform .55s ease; }
  .g-item:hover img{ transform:scale(1.06); }
  .btn{ transition:transform .14s ease, filter .2s ease; }
  .btn:active{ transform:translateY(0); box-shadow:0 8px 16px -12px var(--shadow-ink); }
  .ticket{ transition:transform .25s ease; }
  .ticket:hover{ transform:translateY(-3px); }
  /* Aparicion: se hace con @keyframes, no con transition, a proposito.
     Si por lo que sea la animacion no corre, el elemento se ve normal.
     Con transition se quedaria invisible para siempre. */
  /* Solo se anima el desplazamiento, NUNCA la opacidad: si la animacion
     se congelara, el peor caso es contenido 16px mas abajo, no invisible. */
  @keyframes aparecer{ from{ transform:translateY(16px); } to{ transform:none; } }
  .aparece{ animation:aparecer .55s ease forwards; }
  @media (prefers-reduced-motion: reduce){
    .hero-slide.is-active{ animation:none; }
    .aparece{ animation:none; }
    .g-item:hover img, .ticket:hover, .vcard:hover{ transform:none; }
  }


  /* ---------- PLAN DESTACADO Y REMATES ---------- */
  .head-centrado{ text-align:center; margin-left:auto; margin-right:auto; }
  .head-centrado p{ margin-left:auto; margin-right:auto; }
  .plans{ align-items:center; }
  .ticket.is-featured{
    padding:38px 30px 32px; border-width:2px;
    box-shadow:0 24px 46px -26px var(--shadow-ink); z-index:1;
  }
  .ticket.is-featured::before, .ticket.is-featured::after{ top:178px; }
  .ticket.is-featured .plan-name{ font-size:29px; }
  .ticket.is-featured .plan-price .amount{ font-size:50px; }
  .plan-badge{
    position:absolute; top:-13px; left:50%; transform:translateX(-50%);
    background:var(--orange); color:var(--orange-ink);
    font-size:12.5px; font-weight:700; padding:5px 15px; border-radius:999px; white-space:nowrap;
  }
  @media (max-width:860px){ .ticket.is-featured::before, .ticket.is-featured::after{ top:190px; } }

  .btn-ghost-line{ background:transparent; color:var(--ink); border-color:var(--line); }
  .btn-ghost-line:hover{ border-color:var(--blue); color:var(--blue); }

  .agenda-copy h2{ font-size:clamp(28px,5vw,42px); max-width:15ch; }

  /* La banda de clases: texto a un lado, foto al otro */
  .band-clase{ position:relative; overflow:hidden; isolation:isolate; }
  /* Mismo brillo radial que el cierre final, para que este apartado no se
     sienta un bloque de color plano junto a secciones mas trabajadas. */
  .band-clase::after{
    content:""; position:absolute; z-index:-1; right:-10%; top:50%;
    width:520px; height:520px; transform:translateY(-50%);
    background:radial-gradient(circle, color-mix(in srgb, var(--orange) 32%, transparent) 0%, transparent 68%);
    pointer-events:none;
  }
  .band-clase .wrap{
    display:grid; grid-template-columns:1.05fr .95fr; gap:44px; align-items:center;
  }
  @media (max-width:820px){ .band-clase .wrap{ grid-template-columns:1fr; gap:28px; } }
  .band-texto h2{ max-width:14ch; }
  .band-texto p{ margin:14px 0 0; max-width:46ch; opacity:.93; font-size:16px; line-height:1.55; }
  .band-badges{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
  .band-foto{ position:relative; }
  .band-foto img{
    width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:16px; display:block;
    box-shadow:0 20px 44px -18px rgba(0,0,0,.5);
  }

  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
    .dia-item:hover img, .motivo:hover, .vcard:hover{ transform:none; }
  }

  /* ---------- VARIANTES DE TITULO ---------- */
  .head-derecha{ margin-left:auto; }
  @media (min-width:641px){
    .head-derecha{ text-align:right; margin-right:0; margin-left:auto; }
    .head-derecha p{ margin-left:auto; }
  }
  .head-grande h2{ font-size:clamp(30px,5.6vw,50px); }
  .titulo-grande{ font-size:clamp(32px,6vw,52px) !important; line-height:1.14 !important; padding-top:4px; }
  .hl{ color:var(--blue); }
  .hl-orange{ color:var(--orange); }

  /* Reveal de solo-transform aplicado a un par de titulos elegidos
     (no a todos: la idea es puntuar, no animar la pagina entera).
     Mismo principio de seguridad que el resto del sitio: si la
     animacion no corre, el titulo se ve normal, nunca invisible. */
  .aparece-titulo{ }
  .aparece-titulo.aparece{ animation:tituloEntra .6s ease forwards; }
  @keyframes tituloEntra{ from{ transform:translateX(-14px); } to{ transform:translateX(0); } }

  /* ---------- COMUNIDAD: TARJETAS EN MOVIMIENTO ---------- */
  .stat-row-centrada{ justify-content:center; }
  .link-list-centrada{ align-items:center; text-align:center; }

  .social-chips{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
  .social-chip{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--surface); border:1px solid var(--line); border-radius:999px;
    padding:10px 18px; font-size:14.5px; text-decoration:none; color:var(--ink);
    transition:border-color .2s ease, transform .2s ease;
  }
  .social-chip:hover{ border-color:var(--blue); transform:translateY(-2px); }
  .social-chip svg{ width:18px; height:18px; color:var(--blue); flex:none; }
  .social-chip strong{ font-weight:700; }

  .testi-marquee{
    margin:34px 0 10px; overflow:hidden;
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
  .testi-track{
    display:flex; gap:18px; width:max-content;
    animation:testiDesfile 42s linear infinite;
  }
  .testi-marquee:hover .testi-track{ animation-play-state:paused; }
  @keyframes testiDesfile{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

  .testi-card{
    flex:none; width:280px; display:flex; flex-direction:column; gap:12px;
    background:var(--surface); border:1px solid var(--line); border-radius:12px;
    padding:20px 20px 18px; text-decoration:none; color:inherit;
  }
  .testi-real{ border-color:var(--blue); }
  .testi-top{ display:flex; align-items:center; gap:10px; }
  .testi-top svg{ width:16px; height:16px; margin-left:auto; color:var(--ink-soft); flex:none; }
  .testi-avatar{
    flex:none; width:34px; height:34px; border-radius:50%;
    background:var(--blue); color:var(--blue-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:"Anton"; font-size:14px;
  }
  .testi-nombre{ font-size:14.5px; font-weight:700; }
  .testi-canal{ font-size:12px; color:var(--ink-soft); }
  .testi-texto{ margin:0; font-size:14.5px; line-height:1.5; color:var(--ink); }
  .testi-cta{ border-style:dashed; justify-content:center; align-items:center; text-align:center; gap:8px; }
  .testi-cta .testi-texto{ color:var(--ink-soft); }
  .testi-cta-link{ font-size:14px; font-weight:700; color:var(--blue); }
  .testi-nota{ font-size:12px; color:var(--ink-soft); text-align:center; margin-top:2px; }

  @media (prefers-reduced-motion: reduce){
    .testi-track{ animation:none; }
    .aparece-titulo.aparece{ animation:none; }
  }

  /* ---------- INSTRUCTOR (banda de clases) ---------- */
  .instructor-card{
    display:inline-flex; align-items:center; gap:11px; margin:18px 0 22px;
    background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22);
    border-radius:999px; padding:8px 18px 8px 8px;
  }
  .instructor-avatar{
    width:34px; height:34px; border-radius:50%; flex:none;
    background:var(--orange); color:var(--orange-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:"Anton"; font-size:15px;
  }
  .instructor-nombre{ font-size:14.5px; font-weight:700; color:#fff; line-height:1.2; }
  .instructor-rol{ font-size:12.5px; color:rgba(255,255,255,.75); }
  .instructor-nota{ margin-top:12px; font-size:12.5px; color:rgba(255,255,255,.7); }

  /* ---------- SISTEMA DE AGENDAMIENTO ---------- */
  .reserva-badges{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:26px 0 46px; }
  #cumpleanos .cta-badge{ background:var(--surface); border-color:var(--line); color:var(--ink); font-size:14px; padding:9px 16px 9px 12px; }
  #cumpleanos .cta-badge svg{ width:17px; height:17px; color:var(--blue); }

  /* La primera seccion de cumpleanos.php va justo debajo de la foto del
     encabezado — con el padding generico de seccion (76px) quedaba una
     franja negra enorme y vacia entre el subtitulo y las badges. Se
     acorta solo el padding superior de esta seccion en particular. */
  .cumpleanos-intro{ padding-top:34px; }

  /* [hidden] del navegador y esta clase pesan lo mismo (0,1,0) — sin este
     empate roto a mano, el display:flex de aca abajo le gana al display:none
     que pone el atributo hidden, y el asistente queda visible aunque tenga
     hidden puesto. Por eso el selector de abajo, no es decorativo. */
  .reserva-wizard[hidden]{ display:none; }
  .reserva-wizard{ display:flex; flex-direction:column; gap:20px; max-width:760px; margin:0 auto; }
  .paso{
    display:grid; grid-template-columns:auto 1fr; gap:20px;
    background:var(--surface); border-radius:16px; padding:28px 26px;
  }
  @media (max-width:560px){ .paso{ grid-template-columns:1fr; gap:12px; padding:22px 18px; } }
  .paso-num{
    width:34px; height:34px; border-radius:50%; flex:none;
    background:var(--blue); color:var(--blue-ink);
    display:flex; align-items:center; justify-content:center;
    font-family:"Anton"; font-size:16px;
  }
  .paso-cuerpo h3{ font-size:19px; font-family:"Work Sans"; text-transform:none; font-weight:700; margin-bottom:16px; }

  /* Calendario */
  .calendario{ max-width:400px; }
  .cal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
  .cal-mes{ font-family:"Anton"; font-size:16px; letter-spacing:.02em; }
  .cal-nav{
    width:30px; height:30px; border-radius:50%; border:1px solid var(--line); background:var(--ground);
    color:var(--ink); font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .16s ease;
  }
  .cal-nav:hover{ background:color-mix(in srgb, var(--blue) 14%, var(--ground)); }
  .cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); text-align:center; font-size:11.5px; color:var(--ink-soft); margin-bottom:4px; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
  .cal-day{
    position:relative; aspect-ratio:1; border-radius:9px; border:1px solid transparent;
    background:var(--ground); font-size:13.5px; font-weight:600; color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer;
    transition:background .16s ease, transform .16s ease;
  }
  .cal-day:hover{ transform:translateY(-1px); }
  .cal-day.es-libre{ background:color-mix(in srgb, var(--blue) 10%, var(--ground)); }
  .cal-day.es-lleno{ background:var(--ground); color:var(--ink-soft); cursor:not-allowed; text-decoration:line-through; opacity:.55; }
  .cal-day.es-cerrado{ background:transparent; color:var(--ink-soft); cursor:not-allowed; opacity:.35; }
  .cal-day.es-vacio{ visibility:hidden; cursor:default; }
  .cal-day.is-selected{ background:var(--blue); color:var(--blue-ink); }
  .cal-leyenda{ display:flex; flex-wrap:wrap; gap:14px; margin-top:14px; font-size:12px; color:var(--ink-soft); }
  .cal-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
  .cal-dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
  .cal-dot--libre{ background:var(--blue); }
  .cal-dot--lleno{ background:var(--ink-soft); }
  .cal-dot--cerrado{ background:var(--line); }

  /* Horarios */
  .horarios{ margin-top:22px; padding-top:20px; border-top:1px dashed var(--line); }
  .horarios-titulo{ font-size:14.5px; color:var(--ink-soft); margin-bottom:12px; }
  .horarios-titulo strong{ color:var(--ink); }
  .horarios-chips{ display:flex; flex-wrap:wrap; gap:10px; }
  .horario-chip{
    padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--ground);
    font-size:14px; font-weight:600; cursor:pointer; transition:border-color .16s ease, background .16s ease;
  }
  .horario-chip:hover{ border-color:var(--blue); }
  .horario-chip.is-selected{ background:var(--blue); border-color:var(--blue); color:var(--blue-ink); }

  /* Opciones de pago */
  .pago-opciones{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .pago-opciones--tres{ grid-template-columns:repeat(3,1fr); }
  @media (max-width:760px){ .pago-opciones--tres{ grid-template-columns:1fr; } }
  @media (max-width:560px){ .pago-opciones{ grid-template-columns:1fr; } }
  .pago-opcion{
    position:relative;
    display:flex; flex-direction:column; gap:5px; cursor:pointer;
    background:var(--ground); border:1.5px solid var(--line); border-radius:12px; padding:16px 18px;
    transition:border-color .16s ease, background .16s ease;
  }
  .pago-opcion:has(input:checked){ border-color:var(--blue); background:color-mix(in srgb, var(--blue) 8%, var(--ground)); }
  .pago-opcion .pago-badge{
    align-self:flex-start; background:var(--orange); color:var(--orange-ink);
    font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px; margin-bottom:2px;
  }
  .pago-nota{ margin-top:14px; font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

  /* ---------- INTRO DE RESERVA (antes de abrir el asistente) ---------- */
  .reserva-intro{ text-align:center; margin:0 0 46px; }
  .btn-agendar{ font-size:17px; padding:17px 34px; }
  .reserva-intro-nota{ margin-top:12px; font-size:13px; color:var(--ink-soft); }
  .pago-opcion input{ position:absolute; opacity:0; pointer-events:none; }
  .pago-titulo{ font-weight:700; font-size:15px; }
  .pago-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
  .pago-opcion--proximamente{
    cursor:default; border-style:dashed; opacity:.7; position:relative;
  }
  .pago-badge{
    position:absolute; top:-9px; right:14px; background:var(--orange); color:var(--orange-ink);
    font-size:10.5px; font-weight:700; padding:3px 10px; border-radius:999px;
  }

  /* Resumen + formulario del paso 3 */
  .reserva-resumen[hidden]{ display:none; }
  .reserva-resumen{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    background:color-mix(in srgb, var(--blue) 10%, var(--ground)); border:1px solid color-mix(in srgb, var(--blue) 35%, var(--line));
    border-radius:10px; padding:12px 16px; margin-bottom:16px; font-size:14px; font-weight:600;
  }
  .resumen-cambiar{
    background:none; border:0; color:var(--blue); font-weight:700; font-size:13px; cursor:pointer;
    text-decoration:underline; text-underline-offset:2px; flex:none;
  }
  .form-card--wizard{ background:transparent; border:0; padding:0; box-shadow:none; }
  .form-error{
    background:color-mix(in srgb, #E0483E 12%, var(--ground)); border:1px solid color-mix(in srgb, #E0483E 40%, var(--line));
    color:#B5271B; font-size:13.5px; font-weight:600; padding:10px 14px; border-radius:8px; margin-bottom:4px;
  }
  :root[data-theme="dark"] .form-error{ color:#FF8078; }
  @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .form-error{ color:#FF8078; } }

  /* ---------- ENCABEZADO DE PAGINA PROPIA (cumpleanos.php, quienes-somos.php) ---------- */
  .pagina-header{ padding:56px 0 12px; }
  .volver-link{
    display:inline-flex; align-items:center; gap:6px; font-size:14px; font-weight:600;
    color:var(--ink-soft); text-decoration:none; margin-bottom:22px;
  }
  .volver-link:hover{ color:var(--blue); }
  .pagina-header h1{ font-size:clamp(32px,6vw,54px); max-width:20ch; }
  .pagina-header p{ margin-top:14px; color:var(--ink-soft); font-size:17px; max-width:54ch; }

  /* Version con foto real de fondo: antes era un bloque de puro texto
     sobre el fondo oscuro liso ("un plano negro" segun Marcelo). Mismo
     tratamiento de degradado que el hero de la home, para que las
     paginas internas no se sientan mas vacias que la home. */
  .pagina-header--foto{
    position:relative; overflow:hidden; isolation:isolate;
    padding:72px 0 50px;
    background-size:cover; background-position:center;
  }
  .pagina-header--foto::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background:linear-gradient(180deg, rgba(10,12,10,.9) 0%, rgba(10,12,10,.74) 55%, var(--ground) 100%);
  }
  .pagina-header--foto .volver-link{ color:rgba(255,255,255,.82); }
  .pagina-header--foto .volver-link:hover{ color:#fff; }
  .pagina-header--foto h1{ color:#fff; }
  .pagina-header--foto p{ color:#E4E6DF; }

  /* ---------- GALERIA: enlace a la pagina completa ---------- */
  .galeria-mas{ text-align:center; margin-top:30px; }

  /* ---------- CAPAS: secciones apiladas, no planas ---------- */
  /* Cada seccion con fondo propio (tinte, banda, foto) redondea su
     borde superior y tira una sombra suave hacia arriba, como si fuera
     una hoja apoyada sobre la seccion anterior. Nada de esto depende de
     JS: si algo falla, la seccion se ve exactamente igual, solo sin el
     borde redondeado — nunca rota. */
  .capa{
    position:relative;
    border-radius:32px 32px 0 0;
    box-shadow:0 -22px 44px -30px rgba(0,0,0,.55);
  }
  @media (max-width:640px){ .capa{ border-radius:22px 22px 0 0; } }

  /* ---------- DOLOR (nueva seccion, justo despues del hero) ---------- */
  /* Ilustracion decorativa (globos + confeti) en vez de una foto real que
     no calzaba con el tono de la seccion — dibujo simple con los mismos
     colores de marca, solo para romper el espacio vacio bajo el titulo. */
  .dolor-ilustracion{ display:block; width:100%; max-width:560px; height:auto; margin:4px auto 8px; }
  @media (max-width:560px){ .dolor-ilustracion{ max-width:100%; } }
  .dolor-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; }
  @media (max-width:680px){ .dolor-grid{ grid-template-columns:1fr; } }
  .dolor-item{
    display:flex; gap:14px; align-items:flex-start;
    background:var(--surface); border-radius:12px; padding:18px 20px;
  }
  /* Badges de color en vez de circulos de contorno gris — mismo criterio
     que los iconos de "motivo" (alterna azul/naranjo), para que el
     apartado de "dolor" no se sienta tan plano ni sin identidad. */
  .dolor-icono{
    flex:none; width:42px; height:42px; border-radius:50%;
    background:var(--blue); color:var(--blue-ink);
    display:flex; align-items:center; justify-content:center;
  }
  .dolor-item:nth-child(even) .dolor-icono{ background:var(--orange); color:var(--orange-ink); }
  .dolor-icono svg{ width:21px; height:21px; }
  .dolor-item{ background:var(--surface); box-shadow:0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent); }
  .dolor-item p{ font-size:15px; line-height:1.5; padding-top:5px; }
  .dolor-remate{
    margin-top:34px; text-align:center; font-family:"Anton"; text-transform:uppercase;
    font-size:clamp(20px,3.2vw,28px); color:var(--blue);
  }

  /* ---------- MOVIMIENTO ENTRE SECCIONES ---------- */
  /* Mismo criterio de siempre: solo se anima transform, nunca opacity.
     En el peor caso (la animacion no corre) la seccion se ve 22px mas
     abajo de donde deberia, jamas invisible. */
  /* Mas notorio que antes (mas recorrido + un poco de escala), para que
     se sienta "entra deslizandose", no solo un empujoncito. Sigue siendo
     solo transform: en el peor caso, la seccion aparece 46px mas abajo
     y un poco mas chica — nunca invisible. */
  .seccion-viva.aparece{ animation:seccionEntra .85s cubic-bezier(.16,.8,.3,1) forwards; }
  @keyframes seccionEntra{ from{ transform:translateY(46px) scale(.975); } to{ transform:translateY(0) scale(1); } }
  /* Variantes con levisimo deslizamiento lateral, para que no todas las
     secciones entren igual — alternadas en el HTML. */
  .seccion-viva--izq.aparece{ animation-name:seccionEntraIzq; }
  .seccion-viva--der.aparece{ animation-name:seccionEntraDer; }
  @keyframes seccionEntraIzq{ from{ transform:translateY(40px) translateX(-18px) scale(.975); } to{ transform:translateY(0) translateX(0) scale(1); } }
  @keyframes seccionEntraDer{ from{ transform:translateY(40px) translateX(18px) scale(.975); } to{ transform:translateY(0) translateX(0) scale(1); } }
  @media (prefers-reduced-motion: reduce){ .seccion-viva.aparece{ animation:none; } }

  /* ---------- SEGUNDO LLAMADO A LA ACCION (home, antes del pie) ---------- */
  .cta-segunda{ position:relative; overflow:hidden; text-align:center; padding:64px 0; }
  .cta-segunda h2{ font-size:clamp(26px,4.5vw,38px); max-width:16ch; margin:0 auto; }
  .cta-segunda p{ margin:14px auto 0; max-width:44ch; color:var(--ink-soft); font-size:15.5px; }
  .cta-segunda .btn{ margin-top:24px; }
  /* Boton accent (naranjo), no el azul generico — es el mismo color que ya
     usa el "Reservar" del nav y el "Agendar mi cumpleanos", asi que se lee
     como el boton importante, no uno mas. */
  .cta-segunda .btn-accent{ font-size:16.5px; padding:16px 30px; }
  .cta-segunda-icono{
    display:flex; align-items:center; justify-content:center; margin:0 auto 16px;
    width:54px; height:54px; border-radius:50%;
    background:var(--blue); color:var(--blue-ink);
  }
  .cta-segunda-icono svg{ width:27px; height:27px; }
  /* Globos decorativos a los lados — mismo dibujo que la seccion de
     "dolor", solo que aca flanquean el texto en vez de ir arriba. */
  .cta-segunda-globo{
    position:absolute; top:50%; transform:translateY(-50%);
    width:90px; height:auto; opacity:.85; pointer-events:none;
  }
  .cta-segunda-globo--izq{ left:5%; }
  .cta-segunda-globo--der{ right:5%; }
  @media (max-width:900px){ .cta-segunda-globo{ width:64px; opacity:.6; } }
  @media (max-width:680px){ .cta-segunda-globo{ display:none; } }

  :focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){
    .hero-slide{ transition:none; }
  }

  /* =====================================================================
     VIDRIO KZUP (2026-10)
     La misma idea del "vidrio calido" de Kordo, adaptada a KZUP: un fondo
     ambiental fijo con luces azul y naranjo de la marca, y las tarjetas
     como vidrio esmerilado encima (lo de atras se ve difuminado).
     Es una aproximacion web con backdrop-filter, no un sistema oficial.
     Si el navegador no soporta el desenfoque, o la persona pidio menos
     transparencias, todo queda solido y se lee igual.
     ===================================================================== */
  :root{
    --glass: rgba(24, 30, 28, .52);
    --glass-strong: rgba(18, 22, 20, .78);
    --glass-inner: rgba(8, 10, 9, .26);
    --edge: rgba(214, 236, 255, .12);
    --edge-strong: rgba(214, 236, 255, .22);
    --glass-hi: rgba(255, 255, 255, .07);
    --glass-blur: 22px;
    --glass-shadow: 0 22px 48px -28px rgba(0, 0, 0, .72);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
  }
  @media (max-width: 760px){ :root{ --glass-blur: 14px; } }

  /* Fondo ambiental: solo degradados (no cuestan nada al hacer scroll).
     Queda fijo, asi las tarjetas pasan por encima de las luces. */
  body::before{
    content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(42% 38% at 10% 16%, rgba(79,168,232,.20), transparent 70%),
      radial-gradient(36% 32% at 90% 28%, rgba(255,165,61,.15), transparent 70%),
      radial-gradient(46% 40% at 72% 94%, rgba(79,168,232,.14), transparent 72%),
      radial-gradient(34% 30% at 16% 84%, rgba(255,165,61,.10), transparent 70%);
  }

  /* Las secciones con tinte pasan a ser semitransparentes: siguen siendo
     "hojas" (capa), pero dejan asomar las luces del fondo. */
  .tinte-celeste{ background:color-mix(in srgb, var(--blue) 9%, rgba(17,20,18,.72)); }
  .tinte-durazno{ background:color-mix(in srgb, var(--orange) 9%, rgba(17,20,18,.72)); }

  /* Barra de navegacion de vidrio */
  .nav{
    background:rgba(15, 18, 16, .58);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    backdrop-filter:blur(20px) saturate(160%);
    border-bottom:1px solid var(--edge);
  }

  /* Tarjetas de vidrio */
  .dolor-item, .motivo, .motivo-destacado, .ticket, .vcard:not(.vcard-mas),
  .paso, .social-chip, #cumpleanos .cta-badge{
    background:var(--glass);
    border:1px solid var(--edge);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    backdrop-filter:blur(var(--glass-blur)) saturate(150%);
    box-shadow:inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
  }
  .motivo-destacado{ border-left:4px solid var(--orange); }
  .motivo:nth-child(3n+2){ background:color-mix(in srgb, var(--blue) 12%, var(--glass)); }
  .motivo:nth-child(3n+3){ background:color-mix(in srgb, var(--orange) 11%, var(--glass)); }
  .ticket::before, .ticket::after{ border-color:var(--edge); }
  .ticket.is-featured{
    background:color-mix(in srgb, var(--blue) 8%, var(--glass));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.10), 0 24px 50px -24px color-mix(in srgb, var(--blue) 55%, transparent);
  }
  .dolor-item:hover, .motivo:hover, .motivo.aparece:hover, .vcard:not(.vcard-mas):hover, .ticket:hover, .social-chip:hover{
    border-color:var(--edge-strong);
  }

  /* Dentro de un panel de vidrio no va otro vidrio (tarjeta dentro de
     tarjeta): los elementos internos son un oscuro translucido, sin blur. */
  .pago-opcion, .cal-day, .cal-nav, .horario-chip{ background:var(--glass-inner); border-color:var(--edge); }
  .cal-day{ border-color:transparent; }
  .cal-day.es-libre{ background:color-mix(in srgb, var(--blue) 16%, var(--glass-inner)); }
  .cal-day.es-lleno{ background:var(--glass-inner); }
  .cal-day.es-cerrado, .cal-day.es-vacio{ background:transparent; }
  .cal-day.is-selected{ background:var(--blue); color:var(--blue-ink); }
  .pago-opcion:has(input:checked){ border-color:var(--blue); background:color-mix(in srgb, var(--blue) 14%, var(--glass-inner)); }
  .horario-chip.is-selected{ background:var(--blue); border-color:var(--blue); color:var(--blue-ink); }

  /* Testimonios en movimiento: vidrio "barato" (translucido sin blur),
     porque desenfocar tarjetas que se mueven todo el rato traba el celular. */
  .testi-card{ background:var(--glass-strong); border-color:var(--edge); box-shadow:inset 0 1px 0 var(--glass-hi); }
  .testi-real{ border-color:color-mix(in srgb, var(--blue) 60%, transparent); }

  /* Sobre fotos (portada y cierre) el vidrio si se luce */
  .btn-ghost{
    background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.34);
    -webkit-backdrop-filter:blur(12px) saturate(160%);
    backdrop-filter:blur(12px) saturate(160%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  }
  .cta-badge{
    -webkit-backdrop-filter:blur(12px) saturate(150%);
    backdrop-filter:blur(12px) saturate(150%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
  }

  footer{
    background:var(--glass-strong);
    -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);
    backdrop-filter:blur(var(--glass-blur)) saturate(140%);
    border-top:1px solid var(--edge);
  }

  /* Luz que sigue al puntero sobre el vidrio (solo con mouse).
     Le dice a la persona "esto responde", sin mover nada de lugar. */
  @media (hover:hover) and (pointer:fine){
    .luz{ position:relative; }
    .luz::after{
      content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.075), transparent 62%);
      opacity:0; transition:opacity .3s ease;
    }
    .luz:hover::after{ opacity:1; }
  }

  /* Botones principales: brillo que cruza al pasar el mouse (solo
     posicion, nunca opacidad del boton) y "hundirse" al apretar. */
  .btn-primary, .btn-accent, .nav .cta{ position:relative; overflow:hidden; isolation:isolate; }
  .btn-primary::after, .btn-accent::after, .nav .cta::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.38) 50%, transparent 70%);
    transform:translateX(-120%);
  }
  @media (hover:hover){
    .btn-primary:hover::after, .btn-accent:hover::after, .nav .cta:hover::after{
      transform:translateX(120%); transition:transform .75s var(--ease-out);
    }
  }
  .btn:active, .nav .cta:active{ transform:translateY(0) scale(.97); }

  /* Entrada al bajar: mismo principio de siempre (solo posicion, nunca
     invisible), ahora escalonada dentro de cada grilla con --i. */
  @keyframes entraSuave{ from{ transform:translateY(18px) scale(.985); } to{ transform:none; } }
  .motivo.aparece, .dolor-item.aparece, .vcard.aparece, .ticket.aparece, .esp-item.aparece, .dia-item.aparece{
    animation:entraSuave .7s var(--ease-out) backwards;
    animation-delay:calc(var(--i, 0) * 70ms);
  }

  @media (prefers-reduced-motion: reduce){
    .btn-primary::after, .btn-accent::after, .nav .cta::after{ display:none; }
    .motivo.aparece, .dolor-item.aparece, .vcard.aparece, .ticket.aparece, .esp-item.aparece, .dia-item.aparece{ animation:none; }
  }

  /* Respaldo: navegador sin desenfoque -> paneles casi solidos */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))){
    :root{ --glass: rgba(25, 29, 26, .94); --glass-strong: rgba(21, 25, 22, .97); }
    .nav{ background:rgba(15, 18, 16, .96); }
  }
  /* Respaldo: la persona pidio menos transparencias en su sistema */
  @media (prefers-reduced-transparency: reduce){
    :root{ --glass: #191D1A; --glass-strong: #151916; --glass-inner: #121512; }
    .nav, footer, .dolor-item, .motivo, .motivo-destacado, .ticket, .vcard, .paso, .social-chip,
    #cumpleanos .cta-badge, .btn-ghost, .cta-badge{ -webkit-backdrop-filter:none; backdrop-filter:none; }
    .nav{ background:#0F1210; }
    .tinte-celeste{ background:color-mix(in srgb, var(--blue) 7%, var(--ground)); }
    .tinte-durazno{ background:color-mix(in srgb, var(--orange) 8%, var(--ground)); }
  }