/* invitame.link — página de marketing (invitame.link / *.invitame.link sin subdominio de
   cliente). Portado del mockup de diseño (Design canvas) a CSS real de producción.
   El acento (--accent) es fijo, de marca — a diferencia del panel del cliente, que sí sigue
   la paleta que cada cliente eligió para su invitación (ver CLAUDE.md). */
:root{
  --ink:#241E1C;
  --ink-soft:#5C5650;
  --ink-faint:#8B8479;
  --paper:#FBF6EF;
  --paper-alt:#F2E9DC;
  --line:rgba(36,30,28,0.12);
  --gold:#B08D57;
  --gold-light:#D4B887;
  --forest:#1F2B22;
  --forest-ink:#ECEFE4;
  --accent:#7A2439;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  --ease:cubic-bezier(.22,.8,.26,1);
}
html{scroll-behavior:smooth; overflow-x:clip; background:var(--paper);}
*{box-sizing:border-box;}
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; overflow-x:clip;}
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}
.container{max-width:1200px; margin-inline:auto; padding-inline:40px;}
.section{padding-block:136px;}

/* ---------- tipografía ---------- */
.eyebrow{display:inline-flex; align-items:center; gap:12px; font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent);}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor;}
.h1{font-family:var(--font-display); font-weight:500; font-size:clamp(44px,5.2vw,76px); line-height:1.02; letter-spacing:-0.025em; margin:0; font-variation-settings:"opsz" 144;}
.h2{font-family:var(--font-display); font-weight:500; font-size:clamp(34px,4.2vw,58px); line-height:1.05; letter-spacing:-0.02em; margin:0; text-wrap:balance; font-variation-settings:"opsz" 144;}
.h3{font-family:var(--font-display); font-weight:500; font-size:22px; margin:0; letter-spacing:-0.01em;}
.it{font-style:italic; font-weight:400; color:var(--accent);}
.lead{font-size:18.5px; line-height:1.65; color:var(--ink-soft); max-width:540px; margin:0;}
.body-text{font-size:15px; line-height:1.65; color:var(--ink-soft); margin:0;}

/* ---------- botones ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:999px; font-size:15px; font-weight:600; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s ease, color .3s ease; border:none;}
.btn .arrow{transition:transform .35s var(--ease);}
.btn:hover .arrow{transform:translateX(4px);}
.btn-primary{background:var(--accent); color:var(--paper);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 18px 32px -14px var(--accent);}
.btn-ghost{color:var(--ink); background:transparent; box-shadow:inset 0 0 0 1.5px rgba(36,30,28,0.25);}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--ink);}
.btn-light{background:var(--paper); color:var(--accent);}
.btn-light:hover{transform:translateY(-2px); box-shadow:0 18px 36px -14px rgba(0,0,0,0.45);}

.nav-link{position:relative; font-size:14.5px; font-weight:500; color:var(--ink-soft); padding-block:4px; transition:color .25s ease;}
.nav-link::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px; background:currentColor; transition:right .35s var(--ease);}
.nav-link:hover{color:var(--ink);}
.nav-link:hover::after{right:0;}

/* ---------- teléfonos ---------- */
.phone{position:relative; padding:10px; border-radius:48px; background:linear-gradient(150deg,#2d2926 0%,#141210 60%,#221e1b 100%); box-shadow:inset 0 0 0 1px rgba(255,255,255,0.07), 0 50px 90px -35px rgba(20,16,14,0.6), 0 20px 40px -20px rgba(20,16,14,0.35);}
.phone::after{content:""; position:absolute; top:19px; left:50%; transform:translateX(-50%); width:84px; height:24px; border-radius:20px; background:#0a0908; z-index:5;}
.phone.mini{border-radius:36px; padding:8px;}
.phone.mini::after{top:15px; width:58px; height:17px;}
.screen{position:relative; overflow:hidden; border-radius:38px; width:100%; height:100%; background:#fff;}
.phone.mini .screen{border-radius:28px;}
.rep{position:absolute; inset:0; opacity:0; transition:opacity .9s ease, transform 1.2s var(--ease);}
.rep.active{opacity:1;}
.ph-main .rep{transform:scale(1.06);}
.ph-main .rep.active{transform:scale(1);}
.tint{transition:background-color .6s ease, color .6s ease, border-color .6s ease;}

/* ---------- héroe ---------- */
.hero-line{display:block; overflow:hidden; padding-bottom:0.08em;}
.hero-line > span{display:inline-block; animation:lineUp 1.1s var(--ease) both;}
.fade-up{animation:fadeUp 1s var(--ease) both;}
.stage{position:relative; width:600px; height:640px; margin-inline:auto;}
.ring{position:absolute; top:50%; left:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;}
.glow{position:absolute; top:50%; left:50%; width:560px; height:560px; transform:translate(-50%,-50%); border-radius:50%; filter:blur(20px); opacity:.75; pointer-events:none;}
.ph-main{position:absolute; left:160px; top:10px; width:280px; height:590px; z-index:3; --r:0deg; animation:phoneIn 1.2s var(--ease) .35s both;}
.ph-left{position:absolute; left:0; top:96px; width:212px; height:446px; z-index:2; --r:-9deg; animation:phoneIn 1.2s var(--ease) .55s both;}
.ph-right{position:absolute; right:0; top:96px; width:212px; height:446px; z-index:2; --r:9deg; animation:phoneIn 1.2s var(--ease) .7s both;}
.dot-btn{height:8px; width:8px; border-radius:999px; border:none; padding:0; background-color:rgba(36,30,28,0.2); transition:width .5s var(--ease), background-color .5s ease;}
.dot-btn.active{width:30px; background-color:var(--accent);}
.stat{display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:13px; font-weight:600; color:var(--ink-soft); letter-spacing:0.02em;}
.stat .sep{color:var(--gold); font-size:10px;}

/* ---------- selector de plantillas ---------- */
.tpl-row{display:flex; gap:16px; align-items:flex-start; width:100%; text-align:left; padding:18px 20px; border-radius:18px; border:1px solid transparent; background:transparent; transition:background-color .4s ease, box-shadow .5s var(--ease), border-color .4s ease;}
.tpl-row:hover{background:rgba(255,255,255,0.55);}
.tpl-row.selected{background-color:#fff; border-color:rgba(36,30,28,0.1); box-shadow:0 22px 40px -26px rgba(36,30,28,0.4);}
.tpl-swatch{width:36px; height:36px; border-radius:12px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.06);}
.swatch-btn{border-radius:50%; border:none; padding:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,0.08); transition:box-shadow .35s var(--ease), transform .35s var(--ease);}
.swatch-btn:hover{transform:scale(1.08);}
.pal-item.selected .swatch-btn{box-shadow:0 0 0 3px var(--paper), 0 0 0 4.5px currentColor, 0 10px 20px -8px currentColor;}
.pal-item .pal-label{font-size:11.5px; text-align:center; font-weight:500; color:var(--ink-faint);}
.pal-item.selected .pal-label{font-weight:700; color:var(--ink);}
.group-label{font-size:11.5px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--ink-faint);}
.desc-in{animation:fadeUp .6s var(--ease) both;}

/* ---------- storyboard ---------- */
.step-num{font-family:var(--font-display); font-style:italic; font-size:15px; color:var(--gold-light); letter-spacing:0.04em;}
.heart{position:absolute; bottom:40%; color:#F2B8C2; opacity:0; animation:heartRise 4.2s ease-in infinite;}
.cs-layer{position:absolute; inset:0;}
.cs1{animation:cs1 7.5s linear infinite;}
.cs2{animation:cs2 7.5s linear infinite;}
.cs3{animation:cs3 7.5s linear infinite;}
.seg{flex:1; height:2px; border-radius:2px; background:rgba(255,255,255,0.35); overflow:hidden;}
.seg > span{display:block; height:100%; background:#fff;}
.sg1{animation:sg1 7.5s linear infinite;}
.sg2{animation:sg2 7.5s linear infinite;}
.sg3{animation:sg3 7.5s linear infinite;}
.ripple{position:absolute; left:50%; top:50%; width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%; background:rgba(255,255,255,0.55); animation:ripple 2.6s ease-out infinite;}
.pill-pulse{animation:pillPulse 2.6s ease-in-out infinite;}
.check-path{stroke-dasharray:40; animation:check 4.5s var(--ease) infinite;}

/* ---------- tarjetas ---------- */
.feature{position:relative; background:#fff; border:1px solid var(--line); border-radius:24px; padding:28px; display:flex; flex-direction:column; gap:14px; transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s ease;}
.feature:hover{transform:translateY(-6px); box-shadow:0 30px 50px -30px rgba(36,30,28,0.35); border-color:rgba(36,30,28,0.18);}
.feature.addon{background:var(--paper);}
.ico{width:46px; height:46px; border-radius:14px; display:grid; place-items:center;}
.tag{position:absolute; top:22px; right:22px; font-size:10.5px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; color:var(--ink-faint); border:1px solid var(--line); border-radius:999px; padding:4px 10px;}

/* ---------- invitación completa (se recorre con el scroll) ---------- */
.inv-track{position:relative;}
.inv-sticky{display:flex; flex-direction:column; align-items:center; gap:56px; padding:150px 20px 40px; text-align:center;}
.inv-head{display:flex; flex-direction:column; align-items:center; gap:20px; max-width:820px;}
.inv-hint{margin:0; font-size:13px; letter-spacing:.04em; color:var(--ink-faint);}
.inv-stage{display:flex; align-items:center; justify-content:center; gap:56px; width:100%;}
.inv-pin{display:contents;}
.anno{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; width:250px;}
.anno li{display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-size:20px; color:var(--ink); line-height:1.25;}
.anno-left li{justify-content:flex-end; text-align:right;}
.anno-left li::after, .anno-right li::before{content:""; flex-shrink:0; width:36px; height:1px; background:var(--gold); transition:width .3s ease;}
.inv-scroll{animation:invScroll 44s ease-in-out infinite alternate;}
.phone:hover .inv-scroll{animation-play-state:paused;}
.it-row{position:relative; display:flex; align-items:baseline; gap:10px; padding:0 0 14px 22px; font-family:'Lato', sans-serif; font-size:11px; color:#75695a; border-left:1px solid #e3d6bf; margin-left:6px;}
.it-row:last-child{border-left-color:transparent;}
.it-row b{font-weight:700; color:#B08D57; min-width:58px;}
.it-dot{position:absolute; left:-5px; top:2px; width:9px; height:9px; border-radius:50%; background:#B08D57; box-shadow:0 0 0 3px #fff;}
@keyframes invScroll{0%,8%{transform:translateY(0);} 92%,100%{transform:translateY(calc(-100% + 728px));}}
/* El recorrido con scroll (sticky a pantalla completa) solo en pantallas anchas: en iPhone,
   Safari pinta una franja sólida detrás de su barra de abajo mientras haya un elemento
   fijo/sticky tocando el borde inferior, y la deja así aunque se regrese. En celular queda la
   versión sin sticky: el teléfono recorre su contenido solo (invScroll). */
@supports (animation-timeline: view()){
  @media (min-width:900px){
    .inv-track{height:620vh; view-timeline-name:--inv;}
    .inv-sticky{position:sticky; top:0; height:100vh; padding:0 20px; gap:0; justify-content:center; overflow:clip;}
    .inv-head{position:absolute; top:11vh; left:0; right:0; margin-inline:auto; padding-inline:20px; animation:invHeadOut linear both; animation-timeline:--inv; animation-range:contain 3% contain 16%;}
    .inv-rise{animation:invRise linear both; animation-timeline:--inv; animation-range:contain 0% contain 20%;}
    .inv-scroll{animation:invScrollSD linear both; animation-timeline:--inv; animation-range:contain 22% contain 96%;}
    .phone:hover .inv-scroll{animation-play-state:running;}
    .anno li{animation:annLight linear both; animation-timeline:--inv;}
  }
}
@keyframes invHeadOut{from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(-48px);}}
@keyframes invRise{from{transform:translateY(44vh) scale(1.2);} to{transform:translateY(0) scale(1);}}
@keyframes invFitIn{from{opacity:0; transform:scale(.82);} to{opacity:1; transform:scale(1);}}
@keyframes invScrollSD{from{transform:translateY(0);} to{transform:translateY(calc(-100% + 728px));}}
@keyframes annLight{0%{opacity:.25;} 15%,85%{opacity:1; color:var(--accent);} 100%{opacity:.45;}}
@media (max-height:880px){ .inv-fit{zoom:.86;} }
@media (max-height:780px){ .inv-fit{zoom:.76;} }
@media (max-height:680px){ .inv-fit{zoom:.66;} }
@media (max-width:899px){
  /* Mismo punto de corte que el scroll fijo de arriba (min-width:900px): por debajo de eso no
     hay sticky ni sincronía con el scroll, así que estos títulos tampoco deben intentar tenerla.
     Antes se quedaban ocultos del todo y en celular solo se veía el teléfono recorriéndose
     solo, sin ninguna guía de qué se está viendo — ahora van fijos arriba y abajo del teléfono,
     sin el efecto de iluminarse en sincronía con el scroll (eso es solo de escritorio). */
  .inv-stage{flex-direction:column; gap:24px;}
  .anno{display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:10px 22px; width:100%; max-width:480px;}
  .anno li{font-size:15px; opacity:.75;}
  .anno-left li{justify-content:center; text-align:center;}
  /* Sin sticky, pero el teléfono igual puede hacer zoom al entrar (animation-timeline:view()
     sobre el propio elemento no requiere fijarlo a la pantalla — eso fue lo que causaba el
     problema en Safari). El teléfono en sí no queda sincronizado con el scroll (su contenido
     interno sigue en su propio bucle — intentar eso sin sticky resultó frágil en un dispositivo
     real, ver commit revertido); pero los títulos sí pueden encenderse uno por uno conforme se
     avanza, reusando exactamente el mismo mecanismo de escritorio (view-timeline-name + los
     mismos rangos contain X% Y% que ya trae cada <li> en su estilo) — nada más le falta el
     position:sticky del escritorio, que aquí no hace falta porque no se busca fijar nada. */
  .inv-track{view-timeline-name:--inv;}
  .inv-fit{animation:invFitIn linear both; animation-timeline:view(); animation-range:entry 0% cover 45%;}
  .anno li{animation:annLight linear both; animation-timeline:--inv;}
  @supports not (animation-timeline: view()){
    .inv-fit{animation:none;}
    .anno li{animation:none;}
  }
  .anno-left li::after, .anno-right li::before{display:none;}
}

/* Celular: el recorrido completo, como en escritorio, solo con CSS. El contenido del teléfono y
   el título de arriba avanzan con la MISMA línea de tiempo (--inv) y los mismos rangos que ya
   usan los títulos, así que no pueden desincronizarse (el intento con JS, revertido en 3a53070,
   temblaba porque movía el teléfono a mano).
   Sticky solo en el teléfono y lejos del borde de abajo: Safari 26 toma el color de los
   elementos fijos/sticky que tocan el borde para pintar detrás de su barra (la franja de antes
   venía de un sticky de 100vh). Por eso el teléfono va escalado para que su borde inferior quede
   bien arriba de la barra en cualquier alto de pantalla. Ojo con subirlo: en WebKit el contenido
   del teléfono se congela (se queda en un cuadro, aunque el título sí avance) cuando el teléfono
   ocupa ~68% o más del ancho — a 393px falla desde .72, a 360-375px desde .68. Por eso .68 solo
   desde 390px y .64 en pantallas más angostas; probar con zoomtest antes de cambiarlo.
   Solo aplica si hay animaciones por scroll y movimiento permitido; si no, queda el diseño de
   arriba (títulos en lista, teléfono en bucle). */
@supports (animation-timeline: view()){
  @media (max-width:899px) and (prefers-reduced-motion: no-preference){
    .inv-track{height:auto;}
    /* Sin position:sticky: un sticky que entra por el borde de abajo hace que Safari 26 pinte su
       barra (la franja) y ya no la suelte. El teléfono se sostiene con una animación ligada al
       scroll: .inv-pin es alto y con padding-top de 112px; mientras se recorre ("contain"), el
       escenario baja exactamente lo que sube la página (--pin-dist lo mide marketing.js con el
       alto real de la pantalla). Mismo mecanismo que ya mueve el contenido del teléfono. */
    .inv-sticky{height:auto; justify-content:flex-start;}
    .inv-pin{display:block; width:100%; height:560svh; padding-top:112px; view-timeline-name:--pin;}
    .inv-stage{position:relative; display:grid; justify-items:center; gap:14px; will-change:transform; animation:invPin linear both; animation-timeline:--pin; animation-range:contain 0% contain 100%;}
    .anno{grid-row:1; grid-column:1; display:grid; width:100%; max-width:none;}
    .anno li{grid-area:1 / 1; justify-content:center; text-align:center; font-size:17px; animation:annCap linear both; animation-timeline:--inv;}
    .inv-fit{grid-row:2; grid-column:1; zoom:.68; animation:none;}
    .inv-scroll{animation:invScrollSD linear both; animation-timeline:--inv; animation-range:contain 22% contain 96%;}
  }
  @media (max-width:389px) and (prefers-reduced-motion: no-preference){
    .inv-fit{zoom:.64;}
  }
  @media (max-width:899px) and (max-height:760px) and (prefers-reduced-motion: no-preference){
    .inv-fit{zoom:.62;}
  }
  @media (max-width:899px) and (max-height:680px) and (prefers-reduced-motion: no-preference){
    .inv-fit{zoom:.5;}
    .inv-pin{padding-top:100px;}
  }
}
@keyframes annCap{0%{opacity:0; transform:translateY(10px);} 15%,85%{opacity:1; transform:none; color:var(--accent);} 100%{opacity:0; transform:translateY(-10px);}}

/* ---------- réplica del panel real ---------- */
.pn-window{border-radius:18px; overflow:hidden; background:#fff; box-shadow:0 0 0 1px rgba(36,30,28,0.08), 0 60px 100px -50px rgba(36,30,28,0.5), 0 24px 40px -24px rgba(36,30,28,0.25);}
.pn-chrome{display:flex; align-items:center; gap:7px; padding:13px 18px; background:#f1efeb; border-bottom:1px solid #e7e6e9;}
.pn-dot{width:11px; height:11px; border-radius:50%; background:#ddd8cf;}
.pn-url{margin-left:14px; font-size:11.5px; color:#8c877f; background:#fff; border:1px solid #e7e6e9; border-radius:999px; padding:4px 16px; font-family:'Plus Jakarta Sans', sans-serif;}
.pn{font-family:'Plus Jakarta Sans', system-ui, sans-serif; color:#17161a; background:#f6f5f3; text-align:left;}
.pn-top{display:flex; justify-content:space-between; align-items:center; padding:18px 28px; background:#fff;}
.pn-avatar{flex-shrink:0; width:40px; height:40px; border-radius:50%; background:linear-gradient(145deg,#d8c4a0,#B08D57); color:#fff; display:grid; place-items:center; font-size:13px; font-weight:700;}
.pn-badge{font-size:11px; font-weight:700; padding:5px 11px; border-radius:999px;}
.pn-tabs{display:flex; gap:4px; padding:0 20px; background:#fff; border-top:1px solid #efeeec; border-bottom:1px solid #e7e6e9; overflow-x:auto;}
.pn-tab{font-family:inherit; font-size:13px; padding:14px 10px 12px; border:none; background:none; color:#6b6660; white-space:nowrap; box-shadow:inset 0 -2px 0 transparent; transition:color .2s ease, box-shadow .3s ease;}
button.pn-tab{cursor:pointer;}
button.pn-tab:hover{color:#17161a;}
.pn-tab.active{color:#17161a; font-weight:700; box-shadow:inset 0 -2px 0 #B08D57;}
.pn-body{height:540px; overflow:hidden; padding:20px 28px; position:relative;}
.pn-body::after{content:""; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(transparent, #f6f5f3); pointer-events:none;}
.pn-panel{display:none;}
.pn-panel.active{display:block;}
.pn-in{animation:fadeUp .5s var(--ease) both;}
.pn-kpis{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:10px;}
.pn-kpi{background:#fff; border:1px solid #e7e6e9; border-radius:14px; padding:14px 16px; display:flex; flex-direction:column; gap:6px;}
.pn-kpi span{font-size:10px; font-weight:600; letter-spacing:.04em; color:#8c877f;}
.pn-kpi b{font-size:24px; font-weight:700;}
.pn-card{background:#fff; border:1px solid #e7e6e9; border-radius:14px; padding:18px;}
.pn-btn{display:inline-flex; align-items:center; padding:9px 14px; border-radius:9px; border:none; background:#B08D57; color:#fff; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:filter .2s ease, transform .2s ease;}
.pn-btn:hover{filter:brightness(1.06); transform:translateY(-1px);}
.pn-btn-out{display:inline-flex; align-items:center; padding:9px 14px; border-radius:9px; border:1px solid #dcdbdf; background:#fff; color:#3b3833; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; transition:border-color .2s ease;}
.pn-btn-out:hover{border-color:#17161a;}
.pn-link{display:inline-block; margin-top:12px; padding:0; border:none; background:none; font-family:inherit; font-size:12px; font-weight:700; color:#8b6c3c; cursor:pointer;}
.pn-link:hover{text-decoration:underline;}
.pn-mini{border:none; background:none; font-family:inherit; font-size:11.5px; font-weight:600; color:#3b3833; cursor:pointer; padding:4px;}
.pn-toast{position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:5; background:#17161a; color:#fff; font-size:12px; font-weight:600; padding:10px 16px; border-radius:999px; box-shadow:0 14px 30px -12px rgba(0,0,0,0.5); animation:fadeUp .35s var(--ease) both; white-space:nowrap;}
.pn-thumb{flex-shrink:0; border-radius:10px; background:linear-gradient(160deg,#e9dcc3,#B08D57 80%,#8b6c3c); display:grid; place-items:center; color:#fff; font-family:'Playfair Display', serif; font-style:italic; font-size:15px;}
.pn-seg{display:flex; background:#ecebe8; border-radius:9px; padding:3px;}
.pn-seg button{border:none; background:transparent; border-radius:7px; padding:6px 12px; font-family:inherit; font-size:12px; color:#8c877f; cursor:pointer; transition:background-color .2s ease, color .2s ease;}
.pn-seg button.active{background-color:#fff; color:#17161a; font-weight:600; box-shadow:0 1px 2px rgba(0,0,0,0.08);}
.pn-subpanel{display:none;}
.pn-subpanel.active{display:block;}
.pn-toggle{position:relative; display:inline-block; width:36px; height:20px; border-radius:999px; background:#dcdbdf; flex-shrink:0;}
.pn-toggle i{position:absolute; left:2px; top:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,0.2);}
.pn-toggle.is-on{background:#B08D57;} .pn-toggle.is-on i{left:18px;}
.pn-grid3{display:grid; grid-template-columns:1.2fr 1.3fr .6fr; gap:10px; margin-top:10px;}
.pn-grid2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:10px;}
.pn-grid3 label, .pn-grid2 label, .pn-card > label{font-size:11px; font-weight:600; color:#3b3833;}
.pn-grid3 .pn-field, .pn-grid2 .pn-field{margin-top:6px; padding:9px 11px; font-size:12.5px;}
.pn-chip{font-size:11px; padding:5px 10px; border-radius:999px; border:1px solid #e7e6e9; background:#faf9f7; color:#3b3833;}
.pn-foto{position:relative; aspect-ratio:1; border-radius:12px; border:none; padding:0; overflow:hidden;}
.pn-tag{position:absolute; left:6px; top:6px; font-style:normal; font-size:8.5px; font-weight:700; color:#fff; background:rgba(43,38,32,0.6); border:none; border-radius:6px; padding:3px 6px; font-family:inherit; cursor:pointer;}
.pn-x{position:absolute; right:6px; top:6px; width:18px; height:18px; border-radius:50%; background:rgba(43,38,32,0.7); color:#fff; font-style:normal; font-size:9px; display:grid; place-items:center;}
.pn-enc{position:absolute; right:6px; bottom:6px; font-style:normal; font-size:8.5px; font-weight:700; color:#fff; background:rgba(43,38,32,0.7); border-radius:999px; padding:3px 7px;}
.pn-subir{border:1px dashed #cfcac2; background:#faf9f7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-family:inherit; font-size:11px; color:#8c877f; cursor:pointer;}
.pn-song{display:grid; grid-template-columns:16px minmax(0,1fr) 16px 200px; gap:10px; align-items:center; margin-top:12px; font-size:12px;}
.pn-ord{font-size:8px; line-height:1.3; color:#b1aca5; text-align:center;}
.pn-audio{display:flex; align-items:center; gap:6px; height:34px; border:none; border-radius:999px; background:#f1f0ee; padding:0 14px; font-family:inherit; font-size:11px; color:#17161a; cursor:pointer;}
.pn-audio i{flex:1; height:3px; border-radius:3px; background:#d9d6d0;}
.pn-leg{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:5px; vertical-align:middle;}
.pn-mesa{padding:14px; display:flex; flex-direction:column; gap:8px;}
.pn-mesa > div{display:flex; justify-content:space-between; align-items:center;}
.pn-mesa > div i{font-style:normal; font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px;}
.pn-mesa p{margin:0; display:flex; flex-wrap:wrap; gap:5px; min-height:26px;}
.pn-mesa p span{font-size:10.5px; padding:4px 8px; border-radius:999px; background:#f3f2ef; color:#3b3833;}
.pn-mesa .pn-link{margin-top:0;}
.pn-crear{border:1px dashed #cfcac2; background:#faf9f7; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-family:inherit; font-size:12px; color:#8c877f; cursor:pointer; min-height:128px;}
.pn-plano{position:relative; height:340px; padding:0; background-color:#fff; background-image:radial-gradient(#e2dfda 1px, transparent 1px); background-size:22px 22px;}
.pn-t{position:absolute; width:78px; height:78px; border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:10px; color:#6b6660; transform:translate(-50%,-50%);}
.pn-t b{font-size:13px; color:#17161a;}
.pn-el{position:absolute; padding:10px 18px; border:1px solid #d8d4cc; border-radius:8px; background:#faf8f5; font-size:10.5px; color:#6b6660;}
.pn-kv{display:flex; justify-content:space-between; color:#6b6660;}
.pn-kv b{color:#17161a;}
.pn-radio{display:flex; gap:12px; align-items:flex-start; width:100%; text-align:left; margin-top:10px; padding:13px 14px; border-radius:12px; border:1px solid #e7e6e9; background:#fff; font-family:inherit; font-size:11.5px; color:#6b6660; cursor:pointer; transition:background-color .2s ease, border-color .2s ease;}
.pn-radio i{flex-shrink:0; width:14px; height:14px; border-radius:50%; border:1.5px solid var(--rad,#cfcac2); background:var(--radbg,transparent); box-shadow:inset 0 0 0 2.5px #fff; margin-top:2px;}
.pn-radio b{display:block; font-size:12.5px; color:#17161a; margin-bottom:2px;}
.pn-radio.active{border-color:#B08D57; background-color:#fbf3e7; --rad:#B08D57; --radbg:#B08D57;}
.pn-search{font-size:12px; color:#9b99a0; border:1px solid #dcdbdf; border-radius:9px; padding:9px 12px; width:160px;}
.pn-row{display:grid; grid-template-columns:1.5fr 1.1fr .6fr .6fr 1.1fr 1.3fr; align-items:center; gap:8px; padding:11px 18px; border-bottom:1px solid #efeeec; font-size:12.5px;}
.pn-head{font-size:10px; font-weight:700; letter-spacing:.05em; color:#8c877f; border-top:1px solid #efeeec; padding-block:9px;}
.pn-pill{font-style:normal; font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:999px;}
.pn-soft{color:#8c877f;}
.pn-acts{display:flex; align-items:center; justify-content:flex-end; gap:6px; font-size:11.5px; font-weight:600; color:#3b3833;}
.pn-ic{width:24px; height:24px; border-radius:50%; background:#efeeec; border:none;}
.pn-wa{background:#e3f2e7;}
.pn-field{margin-top:12px; border:1px solid #e7e6e9; border-radius:10px; padding:11px 13px; font-size:13px; color:#17161a; background:#fff;}
.pn-sw{width:16px; height:16px; border-radius:50%; box-shadow:0 0 0 2px #fff;}
@media (max-width:900px){ .pn-kpis{grid-template-columns:repeat(3,minmax(0,1fr));} .pn-row{grid-template-columns:1.4fr 1.1fr .5fr .5fr; } .pn-row > :nth-child(5), .pn-row > :nth-child(6){display:none;} }
/* Réplica del panel en celular: se acomoda como el panel real en un teléfono (tarjetas a lo
   ancho, campos que crecen con su texto, galería en 3 columnas) en vez de encoger el layout de
   escritorio. Las clases m-* marcan cada layout en el template; los !important ganan a los
   inline styles de escritorio. */
@media (max-width:640px){
  .pn-top{flex-wrap:wrap; gap:12px; padding:16px;}
  .pn-tabs{padding:0 8px;}
  .pn-body{height:auto; max-height:none; padding:16px 14px 20px;}
  .pn-body::after{display:none;}
  .pn-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}
  .pn-card{padding:16px;}
  .pn-body .pn-field{height:auto !important;}
  .pn-grid3, .pn-grid2{grid-template-columns:1fr;}
  .m-stack{grid-template-columns:1fr !important;}
  .m-2col{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .m-col{flex-direction:column; align-items:stretch !important; gap:12px !important;}
  .m-wrap{flex-wrap:wrap;}
  .m-grow{width:100%;}
  .m-grow .pn-search{flex:1; min-width:0; width:auto;}
  .m-full{flex:1 1 100%; width:auto !important;}
  .m-thumb{width:100% !important;}
  .m-leyenda{flex-basis:100%; margin-left:0 !important;}
  .pn-seg{width:100%;}
  .pn-seg button{flex:1; padding:7px 6px; line-height:1.25;}
  .m-tiendas{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) 14px !important;}
  .m-tiendas .pn-field{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:9px 10px;}
  .m-galeria{grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important;}
  .pn-song{grid-template-columns:16px minmax(0,1fr) 16px;}
  .pn-song .pn-audio{grid-column:1 / -1;}
  .pn-plano{height:300px;}
}

/* ---------- módulos en el teléfono ---------- */
.mod-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px;}
.mod-btn{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; border:1px solid var(--line); background:#fff; color:var(--ink); font-family:inherit; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .25s ease, background-color .25s ease, color .25s ease;}
.mod-btn:hover{transform:translateY(-2px); box-shadow:0 14px 26px -18px rgba(36,30,28,0.4);}
.mod-btn.active{border-color:var(--accent); background-color:var(--accent); color:#FBF6EF; box-shadow:0 14px 26px -16px var(--accent);}
.mod-desc{padding:6px 0 6px 18px;}
.mod-desc-text{display:none;}
.mod-desc-text.active{display:block;}
.cd-u{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:44px;}
.cd-u b{font-weight:400; font-size:30px; line-height:1; font-variant-numeric:tabular-nums;}
.cd-u span{font-family:'Lato', sans-serif; font-size:7.5px; letter-spacing:.2em; color:#75695a;}
.cd-sep{font-style:normal; font-size:22px; color:#B08D57; line-height:1.1; animation:blink 1s steps(1) infinite;}
.mus-bar{height:100%; width:0; background:#B08D57; animation:musBar 14s linear infinite;}
.eq{display:flex; align-items:flex-end; gap:2px; height:16px;}
.eq i{width:3px; background:#B08D57; border-radius:2px; animation:eq 1s ease-in-out infinite;}
.eq i:nth-child(2){animation-delay:.2s;} .eq i:nth-child(3){animation-delay:.4s;} .eq i:nth-child(4){animation-delay:.1s;}
.map-pop{animation:popIn 4s var(--ease) infinite;}
.ph{display:block; aspect-ratio:1; border-radius:6px;}
.msg{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; animation:msgCycle 12s ease-in-out infinite;}
.msg i{font-family:'Playfair Display', serif; font-size:16px; line-height:1.5; color:#2b2620;}
.msg span{font-family:'Lato', sans-serif; font-size:8.5px; letter-spacing:.2em; color:#75695a;}
.msg2{animation-delay:4s;} .msg3{animation-delay:8s;}
.gift{width:100%; display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid #e3d6bf; background:#f5ecdc; text-align:left;}
.gift i{width:30px; height:30px; border-radius:50%; background:#fbf3e7;}
.gift span{flex:1; font-family:'Playfair Display', serif; font-size:14px; color:#2b2620;}
.gift b{font-family:'Lato', sans-serif; font-size:8.5px; letter-spacing:.1em; color:#B08D57;}
@keyframes blink{50%{opacity:.25;}}
@keyframes musBar{to{width:100%;}}
@keyframes eq{0%,100%{height:4px;} 50%{height:16px;}}
@keyframes popIn{0%{opacity:0; transform:translateY(20px) scale(.96);} 12%,88%{opacity:1; transform:none;} 100%{opacity:0; transform:translateY(8px);}}
@keyframes msgCycle{0%{opacity:0; transform:translateY(8px);} 6%,30%{opacity:1; transform:none;} 36%,100%{opacity:0; transform:translateY(-6px);}}

/* ---------- flujo, checklist, módulos, preguntas ---------- */
.flow{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.flow-step{display:inline-flex; align-items:center; gap:10px; padding:10px 18px; border-radius:999px; border:1px solid rgba(212,184,135,0.35); font-family:var(--font-display); font-size:19px; color:var(--forest-ink);}
.flow-step b{font-family:var(--font-body); font-size:11px; font-weight:700; color:var(--gold-light); letter-spacing:.08em;}
.flow-arrow{color:var(--gold-light); font-size:18px;}
.check-card{background:#fff; border:1px solid var(--line); border-radius:28px; padding:40px; display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:28px 44px; box-shadow:0 40px 70px -50px rgba(36,30,28,0.4);}
.check-item{display:flex; gap:16px; align-items:flex-start;}
.check-mark{flex-shrink:0; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:13px; font-weight:800; margin-top:2px;}
.faq-intro{position:sticky; top:110px;}
/* Por debajo de ~900px las dos columnas de flex-wrap se apilan (300+520+72 de gap ya no cabe) —
   ahí "sticky" deja de tener sentido: no hay nada al lado para acompañar, solo tapa las
   preguntas al hacer scroll. */
@media (max-width:900px){ .faq-intro{position:static;} }
.faq{border-top:1px solid var(--line);}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; padding:24px 0; font-family:var(--font-display); font-size:21px; color:var(--ink);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .plus{flex-shrink:0; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; font-family:var(--font-body); font-size:18px; color:var(--ink-soft); transition:transform .35s var(--ease), background-color .3s ease;}
.faq[open] summary .plus{transform:rotate(45deg); background:var(--paper-alt);}
.faq summary:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:6px;}
.faq p{margin:0 0 26px; max-width:680px; font-size:15.5px; line-height:1.7; color:var(--ink-soft);}

/* ---------- aparición al hacer scroll ---------- */
.reveal{animation:revealUp linear both; animation-timeline:view(); animation-range:entry 0% cover 30%;}
.reveal-stagger > *:nth-child(2){animation-delay:.06s;}
.reveal-stagger > *:nth-child(3){animation-delay:.12s;}
.reveal-stagger > *:nth-child(4){animation-delay:.18s;}
.reveal-stagger > *:nth-child(5){animation-delay:.24s;}
.reveal-stagger > *:nth-child(6){animation-delay:.3s;}
.reveal-stagger > *:nth-child(7){animation-delay:.36s;}
.reveal-stagger > *:nth-child(8){animation-delay:.42s;}
@supports not (animation-timeline: view()){
  .reveal{animation:none;}
}

/* ---------- sobre de entrada ---------- */
body.intro-activa .hero-line > span, body.intro-activa .fade-up, body.intro-activa .ph-main, body.intro-activa .ph-left, body.intro-activa .ph-right{animation:none;}
.intro{position:absolute; top:0; left:0; right:0; height:calc(100vh + 160px); height:calc(100lvh + 160px); z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:56px; padding:max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom)); padding-bottom:calc(max(24px, env(safe-area-inset-bottom)) + 160px); padding-bottom:calc(max(24px, env(safe-area-inset-bottom)) + 100lvh - 100svh + 160px); background:radial-gradient(ellipse at 50% 46svh, #FFFDF9 0%, var(--paper) 45%, var(--paper-alt) 100%); overflow:hidden; transition:opacity .9s var(--ease);}
/* position:absolute (no fixed) a propósito: en iPhone, un elemento fixed que toca el borde de
   abajo hace que Safari pinte una franja sólida detrás de su barra en vez de dejar ver la
   página. Absoluto arriba del documento + scroll bloqueado (html.intro-bloqueo) se ve igual
   y sí llega hasta abajo. Mide 100lvh + 160px a propósito: en iPhone, 100lvh
   todavía quedaba ~56px corto del borde real y se asomaba la página de atrás. Como el scroll está
   bloqueado, que sobre de alto no se nota; el mismo extra va en el padding-bottom (junto con
   lvh - svh) para que el contenido siga centrado en la parte visible, y los anillos y el
   degradado se anclan a 50svh, el centro de lo visible. */
html.intro-bloqueo, html.intro-bloqueo body{overflow:hidden;}
.intro[hidden]{display:none;} /* [hidden] por sí solo pierde contra el display:flex explícito de arriba */
.intro-ring{position:absolute; top:50%; top:50svh; left:50%; border-radius:50%; transform:translate(-50%,-50%); pointer-events:none;}
.intro-head{display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; animation:fadeUp 1s var(--ease) .1s both; transition:opacity .4s ease;}
.intro-foot{display:flex; flex-direction:column; align-items:center; gap:14px; animation:fadeUp 1s var(--ease) .5s both; transition:opacity .35s ease;}
.skip{background:none; border:none; padding:4px 2px; font-size:13px; color:var(--ink-faint); text-decoration:underline; text-underline-offset:3px;}
.skip:hover{color:var(--ink);}
.env-wrap{position:relative; width:min(460px, 86vw); aspect-ratio:46/30; perspective:1400px; animation:envIn 1.2s var(--ease) .2s both; transition:transform .9s var(--ease), opacity .7s ease;}
.env-float{position:absolute; inset:0; perspective:1400px; animation:envFloat 5s ease-in-out 1.4s infinite;}
.env-back{position:absolute; inset:0; border-radius:6px; transition:opacity .6s ease, transform .8s var(--ease); background:linear-gradient(180deg,#E3D0B3,#EADBC5); box-shadow:0 40px 70px -34px rgba(60,40,20,0.45), 0 14px 26px -16px rgba(60,40,20,0.3);}
.env-letter{position:absolute; left:5%; right:5%; top:5%; height:86%; z-index:2; border-radius:4px; background:#FFFDF9; box-shadow:0 10px 24px -14px rgba(60,40,20,0.4); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:0 18px 12%; text-align:center; transition:transform 1s var(--ease) .7s, box-shadow .8s ease;}
.env-letter::before{content:""; position:absolute; inset:8px; border:1px solid rgba(176,141,87,0.45); border-radius:2px;}
.env-front{position:absolute; inset:0; z-index:3; border-radius:6px; background:linear-gradient(170deg,#F6ECDD 0%,#EFE2CE 100%); clip-path:polygon(0 0, 50% 56%, 100% 0, 100% 100%, 0 100%); transition:opacity .6s ease, transform .8s var(--ease); display:flex; flex-direction:column; align-items:center; justify-content:flex-end; padding-bottom:6%;}
.env-flap{position:absolute; left:0; right:0; top:0; height:100%; z-index:4; transform-origin:50% 0; background:linear-gradient(180deg,#F3E7D6 0%,#E8D7BD 100%); clip-path:polygon(0 0, 100% 0, 50% 60%); transition:transform .75s var(--ease) .2s, z-index 0s linear .55s, opacity .5s ease;}
.env-seal{
  /* Del mismo tamaño de sobre que .env-wrap (min(460px,86vw)) — sin esto, el sello se queda a
     66px fijos aunque el sobre encoja en celular real y termina encima de "Para ustedes". */
  --s:min(66px, 10vw);
  position:absolute; left:50%; top:60%; z-index:5; width:var(--s); height:var(--s);
  margin:calc(var(--s) * -0.606) 0 0 calc(var(--s) * -0.5);
  border:none; border-radius:50%; background-color:var(--accent); background-image:radial-gradient(circle at 34% 28%, rgba(255,255,255,0.32), transparent 52%), radial-gradient(circle at 70% 78%, rgba(0,0,0,0.25), transparent 60%); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 82%, #000), 0 10px 18px -6px rgba(40,10,15,0.55); color:var(--gold-light); font-size:calc(var(--s) * 0.303); display:grid; place-items:center; animation:sealPulse 2.6s ease-in-out 1.6s infinite; transition:transform .45s var(--ease), opacity .35s ease;
}
.env-seal:hover{transform:scale(1.06);}
.env-seal:focus-visible, .intro .btn:focus-visible, .skip:focus-visible{outline:2px solid var(--accent); outline-offset:4px;}
.intro.abriendo .env-seal{transform:scale(1.35); opacity:0; animation:none;}
.intro.abriendo .env-flap{transform:rotateX(180deg); z-index:1;}
.intro.abriendo .env-letter{transform:translateY(-54%);}
.cd-fecha{font-family:var(--font-display); font-size:15px; letter-spacing:-0.005em; color:var(--ink);}
.cd-row{display:flex; align-items:flex-start; gap:14px;}
.cd-u{display:flex; flex-direction:column; align-items:center; gap:3px; min-width:48px;}
.cd-num{font-family:var(--font-display); font-weight:400; font-size:36px; line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em;}
.cd-lbl{font-size:7.5px; font-weight:700; letter-spacing:.2em; color:var(--ink-faint);}
.cd-sep{font-family:var(--font-display); font-size:26px; line-height:1.2; color:var(--gold-light);}
.cd-num.tic-a{animation:ticA .5s var(--ease);}
.cd-num.tic-b{animation:ticB .5s var(--ease);}
.cd-estado{position:relative; height:18px; width:100%;}
.cd-estado > span{position:absolute; inset:0; transition:opacity .5s ease, transform .6s var(--ease);}
.cd-llego{opacity:0; transform:translateY(8px); font-family:var(--font-display); font-style:italic; font-size:16px; color:var(--accent);}
.campanas{position:absolute; left:50%; top:-19%; z-index:6; display:flex; gap:6px; transform:translateX(-50%); opacity:0; pointer-events:none; transition:opacity .5s ease;}
.campana{width:min(40px, 6vw); height:min(40px, 6vw); color:var(--gold); transform-origin:50% 8%;}
.confeti{position:absolute; top:0; left:var(--l); z-index:7; width:var(--w); height:var(--h); border-radius:var(--br); background:var(--c); opacity:0; visibility:hidden; pointer-events:none;}
.intro.abriendo .env-float{animation-play-state:paused;}
.intro.cuenta .intro-head{opacity:0;}
.intro.cuenta .env-back, .intro.cuenta .env-front{opacity:0; transform:translateY(70px);}
.intro.cuenta .env-flap{opacity:0; transform:translateY(70px) rotateX(180deg);}
.intro.cuenta .env-letter{transform:translateY(-6%) scale(1.3); transition:transform .9s var(--ease), box-shadow .8s ease; box-shadow:0 40px 80px -40px rgba(60,40,20,0.45);}
.intro.celebra .cd-falta{opacity:0; transform:translateY(-8px);}
.intro.celebra .cd-llego{opacity:1; transform:none;}
.intro.celebra .campanas{opacity:1;}
.intro.celebra .campana:first-child{animation:campanaIzq 1.1s ease-in-out 2 both;}
.intro.celebra .campana:last-child{animation:campanaDer 1.1s ease-in-out 2 both;}
.intro.celebra .confeti{visibility:visible; animation:caer var(--t) cubic-bezier(.3,.1,.6,1) var(--d) both;}
.intro.abriendo .intro-foot{opacity:0; pointer-events:none;}
.intro.saliendo{opacity:0; pointer-events:none;}
.intro.saliendo .env-wrap{transform:scale(1.35) translateY(-4%); opacity:0;}
.intro.saliendo .intro-head{opacity:0;}
@keyframes ticA{0%{transform:scale(1.35); color:var(--accent);} 100%{transform:none;}}
@keyframes ticB{0%{transform:scale(1.35); color:var(--accent);} 100%{transform:none;}}
@keyframes campanaIzq{0%,100%{transform:rotate(0);} 30%{transform:rotate(-22deg);} 70%{transform:rotate(14deg);}}
@keyframes campanaDer{0%,100%{transform:rotate(0);} 30%{transform:rotate(22deg);} 70%{transform:rotate(-14deg);}}
@keyframes caer{0%{opacity:0; transform:translate3d(0,-8vh,0) rotate(0deg) rotateY(0deg);} 8%{opacity:1;} 85%{opacity:1;} 100%{opacity:0; transform:translate3d(var(--dx),104vh,0) rotate(var(--rot)) rotateY(var(--ry));}}
@keyframes envIn{from{opacity:0; transform:translateY(50px) rotate(-3deg) scale(.94);} to{opacity:1; transform:none;}}
@keyframes envFloat{0%,100%{transform:translateY(0) rotate(0);} 50%{transform:translateY(-8px) rotate(-.6deg);}}
@keyframes sealPulse{0%,100%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 82%, #000), 0 10px 18px -6px rgba(40,10,15,0.55), 0 0 0 0 color-mix(in srgb, var(--accent) 35%, transparent);} 50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 82%, #000), 0 10px 18px -6px rgba(40,10,15,0.55), 0 0 0 14px color-mix(in srgb, var(--accent) 0%, transparent);}}

@keyframes lineUp{from{transform:translateY(108%);} to{transform:translateY(0);}}
@keyframes fadeUp{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
@keyframes revealUp{from{opacity:0; transform:translateY(34px);} to{opacity:1; transform:none;}}
@keyframes phoneIn{from{opacity:0; transform:translateY(60px) rotate(var(--r));} to{opacity:1; transform:translateY(0) rotate(var(--r));}}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg);}}
@keyframes heartRise{0%{opacity:0; transform:translateY(0) scale(.6);} 15%{opacity:1;} 100%{opacity:0; transform:translateY(-190px) scale(1.1) rotate(18deg);}}
@keyframes cs1{0%,30%{opacity:1;} 36%,94%{opacity:0;} 100%{opacity:1;}}
@keyframes cs2{0%,30%{opacity:0;} 36%,63%{opacity:1;} 69%,100%{opacity:0;}}
@keyframes cs3{0%,63%{opacity:0;} 69%,94%{opacity:1;} 100%{opacity:0;}}
@keyframes sg1{0%{width:0;} 33.3%{width:100%;} 99%{width:100%;} 100%{width:0;}}
@keyframes sg2{0%,33.3%{width:0;} 66.6%{width:100%;} 99%{width:100%;} 100%{width:0;}}
@keyframes sg3{0%,66.6%{width:0;} 99%{width:100%;} 100%{width:0;}}
@keyframes ripple{0%{transform:scale(.3); opacity:.8;} 70%,100%{transform:scale(2.6); opacity:0;}}
@keyframes pillPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,0);} 50%{box-shadow:0 0 0 5px rgba(176,141,87,0.22);}}
@keyframes check{0%{stroke-dashoffset:40;} 25%,85%{stroke-dashoffset:0;} 100%{stroke-dashoffset:40;}}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{animation:none !important; transition:none !important;}
  .inv-track{height:auto !important;}
  .inv-sticky{position:relative !important; height:auto !important; padding:150px 20px 40px !important; gap:56px !important;}
  .inv-head{position:static !important;}
  .msg1{opacity:1;}
}
@media (max-width:1100px){
  .stage{transform:scale(.86); transform-origin:top center; height:560px;}
}
@media (max-width:760px){
  .container{padding-inline:20px;}
  .section{padding-block:76px;}
  .stage{transform:scale(.62); height:410px; width:600px; margin-left:50%; translate:-50% 0;}
  header nav{gap:16px;}
  header .nav-link{display:none;}
  /* Las 5 paletas en una sola fila (con su ancho fijo de escritorio, la quinta bajaba sola). */
  .pal-row{flex-wrap:nowrap; gap:4px; justify-content:space-between;}
  .pal-row .pal-item{width:auto !important; flex:1 1 0; min-width:0;}
  /* Abre / Confirma / Listo: tres pastillas iguales en una fila; el orden lo dan los números. */
  .flow{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
  .flow-arrow{display:none;}
  .flow-step{justify-content:center; gap:6px; padding:9px 6px; font-size:16px;}
  /* Storyboard: teléfono y texto de cada paso centrados. */
  #como-funciona .phone.mini{align-self:center !important;}
  #como-funciona .step-text{align-items:center; text-align:center;}
}

/* Demo en vivo del selector de Diseños: la invitación real (390px de ancho) a escala dentro del
   teléfono; marketing.js ajusta la escala al tamaño de la pantalla y la muestra al cargar. */
.demo-vivo{position:absolute; top:0; left:0; width:390px; border:0; transform-origin:0 0; opacity:0; transition:opacity .6s ease; background:#fff; z-index:3;}
.demo-vivo.listo{opacity:1;}

/* "Para sus invitados": los complementos (add-ons) llevan una etiqueta, tanto en el título de
   los lados como en su bloque dentro del teléfono, para que se distinga lo que es extra. */
.anno-tag{display:inline-block; vertical-align:middle; margin-left:6px; padding:3px 8px 2px; border:1px solid color-mix(in srgb, var(--gold) 55%, transparent); border-radius:999px; font-family:var(--font-body, 'Manrope', sans-serif); font-size:9px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); line-height:1.4; white-space:nowrap;}
.anno-left .anno-tag{margin-left:0; margin-right:0;}
.anno-left li > span{display:flex; flex-direction:column; align-items:flex-end; gap:5px;}
.anno-right li > span{display:flex; flex-direction:column; align-items:flex-start; gap:5px;}
.anno .anno-tag{margin-left:0;}
.cmp-bloque{position:relative;}
.cmp-tag{position:absolute; top:14px; right:14px; padding:3px 8px 2px; border-radius:999px; background:#fff; border:1px solid #d9c49f; font-family:'Lato', sans-serif; font-size:7.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#B08D57;}
.cd-u{width:62px; padding:12px 0 9px; border:1px solid #eadfcb; background:#fdf9f2; display:flex; flex-direction:column; align-items:center; gap:3px;}
.cd-u b{font-family:'Playfair Display', serif; font-weight:400; font-size:22px; color:#2b2620; line-height:1;}
.cd-u span{font-family:'Lato', sans-serif; font-size:7.5px; letter-spacing:.2em; color:#B08D57;}
.mapa-mock{width:100%; height:170px; border:1px solid #eadfcb; overflow:hidden;}
.mapa-mock svg{display:block; width:100%; height:100%;}
.rg-row{width:100%; display:flex; justify-content:space-between; align-items:center; padding:13px 14px; border:1px solid #eadfcb; background:#fdf9f2; font-family:'Playfair Display', serif; font-size:15px; color:#2b2620;}
.rg-row b{font-family:'Lato', sans-serif; font-size:8.5px; letter-spacing:.12em; color:#B08D57;}
.msg-dot{width:6px; height:6px; border-radius:3px; background:#e3d6bf;}
.msg-dot.on{width:18px; background:#B08D57;}
@media (max-width:899px){ .anno-left li > span, .anno-right li > span{align-items:center;} }

/* WebKit (iPhone) deja de animar una capa demasiado grande: el contenido del teléfono ya mide
   ~5000px y a 3x de densidad se congelaba mientras los títulos sí avanzaban. En vez de mover
   .inv-scroll completo, marketing.js le pone .por-bloques y cada bloque se mueve como su propia
   capa chica, todas con el mismo desplazamiento (--recorrido, medido en JS). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .inv-scroll.por-bloques{animation:none !important; transform:none !important;}
    .inv-scroll.por-bloques > *{animation:invBloqueSD linear both; animation-timeline:--inv; animation-range:contain 22% contain 96%; will-change:transform;}
  }
}
@keyframes invBloqueSD{from{transform:translateY(0);} to{transform:translateY(calc(-1 * var(--recorrido, 0px)));}}
.bil-switch{display:inline-flex; gap:2px; padding:3px; border-radius:999px; border:1px solid #eadfcb; background:#fdf9f2; font-family:'Lato', sans-serif; font-size:9px; font-weight:700; letter-spacing:.08em;}
.bil-switch span{padding:4px 10px; border-radius:999px; color:#B08D57;}
.bil-switch span.on{background:#B08D57; color:#fff;}
.ft{aspect-ratio:1 / 1; border-radius:6px;}

/* "Paso a paso": cómo se contrata (4 pasos, en orden real — por eso numerados) */
.pasos{list-style:none; margin:64px 0 0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; counter-reset:none;}
.paso-c{position:relative; display:flex; flex-direction:column; gap:12px; padding:30px 26px 32px; background:var(--paper-alt); border:1px solid var(--line); border-radius:22px;}
.paso-n{font-family:var(--font-display); font-style:italic; font-size:34px; line-height:1; color:var(--gold);}
.paso-c h3{margin:0; font-family:var(--font-display); font-weight:500; font-size:22px; line-height:1.2; color:var(--ink);}
.paso-c p{margin:0; font-size:14.5px; line-height:1.65; color:var(--ink-soft);}
@media (max-width:1020px){ .pasos{grid-template-columns:repeat(2, minmax(0,1fr));} }
@media (max-width:640px){ .pasos{grid-template-columns:1fr; gap:14px;} .paso-c{padding:24px 22px 26px;} }

.intro-origen{font-family:var(--font-display); font-style:italic; font-size:14.5px; color:var(--ink-faint); margin-top:2px; text-wrap:balance;}
@keyframes invPin{from{transform:none;} to{transform:translateY(var(--pin-dist, calc(560svh - 100svh)));}}

/* Isotipo de marca (app/templates/_logo.html): sobre en vino y destello dorado; en fondo oscuro, todo oro claro. */
.marca-iso{display:block; flex-shrink:0; color:var(--accent); --iso-destello:var(--gold);}
.marca-iso-oscuro{color:var(--gold-light); --iso-destello:var(--gold-light);}

/* Simulador del panel: las mismas reglas que el panel real (app/static/js/panel.js) —
   escribir → barra "cambios sin guardar"; switches → se guardan solos; agregar → botón punteado. */
.pn-agregar{display:flex; align-items:center; justify-content:center; width:100%; margin-top:12px; padding:10px 14px; border-radius:9px; border:1.5px dashed #d6c4a4; background:#fff; color:#8b6c3c; font-family:inherit; font-size:12px; font-weight:700; cursor:pointer; transition:background .2s ease;}
.pn-agregar:hover{background:#fbf3e7;}
.pn-subir, .pn-crear{border:1.5px dashed #d6c4a4; color:#8b6c3c; font-weight:700;}
.pn-field[contenteditable]{cursor:text; outline:none; transition:border-color .15s ease, box-shadow .15s ease;}
.pn-field[contenteditable]:focus{border-color:#B08D57; box-shadow:0 0 0 3px rgba(176,141,87,0.18);}
.pn-field.pn-mod{border-color:#B08D57;}
.pn-toggle, .pn-radio{cursor:pointer;}
.pn-barra{position:sticky; bottom:14px; z-index:6; margin:18px auto 0; width:min(100%, 460px); display:flex; align-items:center; gap:8px; padding:8px 8px 8px 14px; border-radius:12px; background:#17161a; color:#fff; font-size:12px; font-weight:600; box-shadow:0 14px 34px -10px rgba(0,0,0,0.5); animation:fadeUp .3s var(--ease) both;}
.pn-barra[hidden]{display:none;}
.pn-barra span{flex:1; display:flex; align-items:center; gap:7px; min-width:0;}
.pn-barra span::before{content:""; width:7px; height:7px; border-radius:50%; background:#f0b44c; flex-shrink:0;}
.pn-barra button{border-radius:8px; padding:8px 12px; font-family:inherit; font-size:12px; font-weight:600; cursor:pointer;}
.pn-barra-descartar{background:transparent; border:1px solid rgba(255,255,255,0.25); color:rgba(255,255,255,0.8);}
.pn-barra-guardar{background:#B08D57; border:none; color:#fff;}
/* Números del evento: una franja, como en el panel real */
.pn-kpis{gap:0; background:#fff; border:1px solid #e7e6e9; border-radius:14px; overflow:hidden;}
.pn-kpis .pn-kpi{border:none; border-radius:0; box-shadow:-1px 0 0 #e7e6e9, 0 -1px 0 #e7e6e9;}

/* Simulador en celular: igual que el panel real en celular — encabezado compacto y navegación
   inferior flotante de vidrio (en vez de pestañas arriba). overflow:clip (no hidden) para que la
   navegación y la barra de cambios puedan pegarse abajo mientras el panel está en pantalla. */
.pn-navinf{display:none;}
@media (max-width:640px){
  .pn-window, .pn-body{overflow:clip;}
  .pn-tabs, .pn-avatar, .pn-cuenta, .pn-salir{display:none !important;}
  .pn-top{flex-wrap:nowrap; padding:12px 16px;}
  .pn-saludo{font-size:15px !important;}
  .pn-navinf{display:grid; grid-template-columns:repeat(5,1fr); position:sticky; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:7; margin:0 10px 10px; height:58px; border-radius:20px; background:rgba(255,255,255,0.86); -webkit-backdrop-filter:blur(18px) saturate(1.8); backdrop-filter:blur(18px) saturate(1.8); border:1px solid rgba(23,22,26,0.06); box-shadow:0 4px 20px rgba(23,22,26,0.08);}
  .pn-navinf > .pn-nb, .pn-nb-mas{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:none; background:none; font-family:inherit; font-size:10px; font-weight:600; color:#8b8990; cursor:pointer;}
  .pn-navinf svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
  .pn-navinf > .pn-nb.active, .pn-nb-mas.active{color:#17161a;}
  .pn-navinf > .pn-nb.active svg, .pn-nb-mas.active svg{color:#B08D57;}
  .pn-mas{position:absolute; right:6px; bottom:calc(100% + 8px); display:flex; flex-direction:column; min-width:170px; padding:6px; border-radius:14px; background:#fff; box-shadow:0 14px 34px -10px rgba(0,0,0,0.3), 0 0 0 1px rgba(23,22,26,0.06);}
  .pn-mas[hidden]{display:none;}
  .pn-mas .pn-nb{text-align:left; padding:11px 12px; border:none; border-radius:9px; background:none; font-family:inherit; font-size:13px; font-weight:500; color:#17161a; cursor:pointer;}
  .pn-mas .pn-nb.active{background:#fbf3e7; color:#8b6c3c; font-weight:700;}
  .pn-barra{bottom:calc(84px + env(safe-area-inset-bottom, 0px));}
}
/* Módulos opcionales: si quedan en número impar, el último ocupa el ancho (no queda un hueco). */
.mod-grid .mod-btn:last-child:nth-child(odd){grid-column:1 / -1;}

/* Simulador del panel — pestaña Álbum (misma estructura que panel/album.html) */
.pn-alb-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:14px 16px;}
.pn-alb-foto{border:1px solid #e7e6e9; border-radius:10px; overflow:hidden; background:#fff; display:flex; flex-direction:column; min-width:0;}
.pn-alb-img{position:relative; display:block; aspect-ratio:1;}
.pn-alb-img em{position:absolute; top:6px; left:6px; font-style:normal; font-size:8.5px; font-weight:700; color:#fff; background:rgba(0,0,0,.55); padding:3px 7px; border-radius:999px;}
.pn-alb-foto.oculta .pn-alb-img{filter:grayscale(1); opacity:.4;}
.pn-alb-pie{display:flex; align-items:center; gap:2px; padding:5px 4px 5px 8px; font-size:9.5px; color:#8c877f;}
.pn-alb-pie span{flex:1; min-width:0; line-height:1.3;}
.pn-alb-pie b{display:block; color:#17161a; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pn-alb-pie button{display:grid; place-items:center; width:24px; height:24px; border:none; border-radius:6px; background:none; color:#9b99a0; cursor:pointer; flex-shrink:0;}
.pn-alb-pie button:hover{background:#f3f2f0; color:#17161a;}
.pn-alb-pie button.peligro:hover{background:#fdecec; color:#b14848;}
.pn-alb-pie svg{width:13px; height:13px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pn-alb-tarjeta{display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px; border:2px solid #B08D57; outline:1px solid #B08D57; outline-offset:-6px; background:#fbf8f3; text-align:center;}
.pn-alb-tarjeta span{font-size:8px; font-weight:700; letter-spacing:.14em; color:#B08D57;}
.pn-alb-tarjeta em{font-family:'Playfair Display', serif; font-style:normal; font-size:15px; color:#2b2620;}
.pn-alb-tarjeta svg{background:#fff; padding:5px; border:1px solid #e3d6bf;}
@media (max-width:640px){ .pn-alb-grid{grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px;} }