/* ¿Quién te tocó? — prototipo · fondo verde, superficies crema */
:root{
  --verde:#174C3C; --verde-2:#113D30; --verde-3:#1D5946; --coral:#E65B4F; --coral-2:#D2493E;
  --dorado:#F2BC57; --crema:#FFF6E7; --crema-2:#FBEBD2; --blanco:#FFFFFF;
  --linea:rgba(23,76,60,.14); --linea-c:rgba(255,246,231,.16);
  --fuente:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:22px; --r-sm:14px; --sombra:0 14px 34px rgba(0,0,0,.18); --sombra-sm:0 4px 14px rgba(0,0,0,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--verde);color:var(--crema);font:400 16px/1.65 var(--fuente);min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fuente);font-weight:700;line-height:1.15;margin:0 0 .45em;letter-spacing:-.02em}
h1{font-size:clamp(1.9rem,5vw,2.8rem)} h2{font-size:clamp(1.6rem,3.6vw,2.3rem)} h3{font-size:1.1rem;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{width:min(100% - 32px,1080px);margin-inline:auto}
.angosto{width:min(100% - 32px,660px);margin-inline:auto}
main{flex:1;position:relative;z-index:1}
#nieve{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}

/* superficies claras: todo lo que va dentro se lee en verde */
.tarjeta,.lista-p li,.acordeon details,.link-p,.int-card,.carta,.faq details,.nota-todos,.plan-plus,.paso-card{color:var(--verde)}
.tarjeta{background:var(--crema);border-radius:var(--r);padding:24px;box-shadow:var(--sombra)}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(23,76,60,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea-c)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:12px;height:64px}
.top-logo img{height:38px;width:auto}
.top-nav{display:flex;align-items:center;gap:4px}
.top-nav a{text-decoration:none;font-weight:500;padding:8px 12px;border-radius:999px;font-size:.92rem;opacity:.9}
.top-nav a:hover{background:var(--linea-c);opacity:1}
.top-nav .solo-pc{display:none}
@media(min-width:760px){.top-nav .solo-pc{display:inline-block}}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border:0;border-radius:var(--r-sm);background:var(--verde);color:var(--crema);font:600 1rem var(--fuente);cursor:pointer;text-decoration:none;transition:transform .15s,filter .15s,background .15s}
.btn:hover{filter:brightness(1.1);transform:translateY(-1px)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none}
.btn-coral{background:var(--coral);color:#fff}
.btn-dorado{background:var(--dorado);color:var(--verde)}
.btn-blanco{background:var(--blanco);color:var(--verde);box-shadow:inset 0 0 0 1.5px var(--linea)}
.btn-linea{background:transparent;color:var(--crema);box-shadow:inset 0 0 0 1.5px rgba(255,246,231,.45)}
.btn-linea:hover{background:var(--linea-c)}
.btn-fantasma{background:transparent;color:inherit;padding-inline:12px}
.btn-fantasma:hover{background:color-mix(in srgb,currentColor 10%,transparent);filter:none}
.btn-grande{min-height:60px;padding:16px 34px;font-size:1.12rem;border-radius:16px}
.btn-chico{min-height:40px;padding:8px 14px;font-size:.88rem;border-radius:11px}
.btn-bloque{width:100%}
:focus-visible{outline:3px solid var(--dorado);outline-offset:3px}

/* utilidades */
.centro{text-align:center}
.suave{color:color-mix(in srgb,currentColor 72%,transparent)}
.chica{font-size:.88rem}
.fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.etiqueta{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;background:var(--dorado);color:var(--verde);font-weight:600;font-size:.8rem}
.etiqueta-verde{background:var(--verde);color:var(--crema)}
.etiqueta-crema{background:var(--crema-2);color:var(--verde)}
.oculto{display:none!important}
.kicker{display:block;color:var(--dorado);font-weight:600;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}

/* papel picado (solo en el papelito) */
.guirnalda{height:70px;background:url(../img/papel-picado.svg) repeat-x center top/auto 70px;position:relative;z-index:2;pointer-events:none;opacity:.9}

/* ===== portada ===== */
.hero{padding:72px 0 88px;text-align:center}
.hero-logo{width:min(520px,88%);margin:0 auto 26px;animation:entra .8s cubic-bezier(.2,.9,.3,1.2) both}
.hero-sub{font-size:clamp(1.05rem,2.4vw,1.25rem);max-width:520px;margin:0 auto 30px;opacity:.9}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:14px}
.hero-nota{font-size:.88rem;opacity:.7}
@keyframes entra{from{opacity:0;transform:scale(.92) translateY(8px)}to{opacity:1;transform:none}}

.seccion{padding:80px 0;position:relative}
.seccion-alt{background:var(--verde-2)}
.titulo-seccion{text-align:center;max-width:620px;margin:0 auto 44px}

.que-es{display:grid;gap:36px;align-items:center}
@media(min-width:820px){.que-es{grid-template-columns:1.1fr 1fr}}
.que-es p{font-size:1.08rem;opacity:.9;max-width:460px}
.demo-caja{text-align:center}
.demo-caja .chica{opacity:.7;margin-top:4px}

/* pasos: línea de tiempo, sin cajas */
.pasos{display:grid;gap:28px;position:relative;list-style:none;padding:0;margin:0}
.pasos::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;border-left:2px dashed rgba(242,188,87,.45)}
.paso{position:relative;padding-left:72px;min-height:52px}
.paso .num{position:absolute;left:0;top:0;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--verde);border:2px solid var(--dorado);color:var(--dorado);font-weight:700;font-size:1.2rem}
.paso h3{margin:0 0 4px;padding-top:2px}
.paso p{margin:0;font-size:.93rem;opacity:.75;max-width:260px}
@media(min-width:760px){
  .pasos{grid-template-columns:repeat(4,1fr);gap:24px}
  .pasos::before{left:12.5%;right:12.5%;top:26px;bottom:auto;border-left:0;border-top:2px dashed rgba(242,188,87,.45)}
  .paso{padding-left:0;text-align:center}
  .paso .num{position:relative;margin:0 auto 16px}
  .paso p{margin-inline:auto}
}

/* incluye: tarjetas crema sólidas */
.funciones{display:grid;gap:14px}
@media(min-width:640px){.funciones{grid-template-columns:repeat(2,1fr)}}
@media(min-width:960px){.funciones{grid-template-columns:repeat(4,1fr)}}
.funcion{background:var(--crema);color:var(--verde);border-radius:var(--r);padding:24px;box-shadow:var(--sombra)}
.funcion .ico{width:48px;height:48px;border-radius:14px;background:var(--coral);color:#fff;display:grid;place-items:center;margin-bottom:16px}
.funcion .ico svg{width:24px;height:24px}
.funcion h3{margin-bottom:4px}
.funcion p{margin:0;font-size:.93rem;opacity:.75}

/* planes */
.planes{display:grid;gap:20px;max-width:820px;margin:0 auto}
@media(min-width:760px){.planes{grid-template-columns:1fr 1fr}}
.plan{border-radius:26px;padding:30px;position:relative;display:flex;flex-direction:column;border:1px solid var(--linea-c);background:rgba(255,246,231,.04)}
.plan-plus{background:var(--crema);border:0;box-shadow:0 0 0 3px var(--dorado),var(--sombra)}
.plus-caja ul{list-style:none;padding:0;margin:20px auto 26px;max-width:340px;text-align:left}
.plus-caja li{padding:6px 0 6px 28px;position:relative}
.plus-caja li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;background:url(../img/chispa.svg) center/contain no-repeat}
.plus-caja .precio{font:700 2.6rem/1 var(--fuente);margin:10px 0 6px}
.plus-caja .precio small{font-size:1rem;font-weight:500;opacity:.75}
.plan .precio{font:700 2.6rem/1 var(--fuente);margin:10px 0 6px;letter-spacing:-.03em}
.plan .precio small{font-size:1rem;font-weight:500;opacity:.75;letter-spacing:0}
.plan .periodo{font-weight:600}
.plan ul{list-style:none;padding:0;margin:20px 0 26px;flex:1}
.plan li{padding:6px 0 6px 28px;position:relative;font-size:.96rem}
.plan li::before{content:"";position:absolute;left:0;top:11px;width:16px;height:16px;background:url(../img/chispa.svg) center/contain no-repeat}
.plan-cinta{position:absolute;top:-13px;right:22px}

/* faq */
.faq{max-width:700px;margin:0 auto}
.faq details{background:var(--crema);border-radius:var(--r-sm);padding:2px 20px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:600;font-size:1.3rem;line-height:1;color:var(--coral)}
.faq details[open] summary::after{content:"–"}
.faq details p{opacity:.8}
.cierre{text-align:center;margin-top:48px}

/* footer */
.pie{background:var(--verde-2);color:var(--crema);padding:40px 0 28px;text-align:center;position:relative;z-index:1;border-top:1px solid var(--linea-c)}
.pie-logo{width:130px;margin:0 auto 14px}
.pie p{margin:4px 0;opacity:.85}
.pie-mini{font-size:.78rem;opacity:.5!important}

/* ===== asistente ===== */
.asistente{padding:28px 0 64px}
.aviso-plan{display:flex;align-items:center;gap:8px;justify-content:center;background:var(--dorado);color:var(--verde);font-weight:600;border-radius:999px;padding:9px 18px;margin:0 auto 24px;width:fit-content;max-width:100%;text-align:center;font-size:.9rem}
.progreso{display:flex;gap:6px;margin-bottom:10px}
.progreso span{flex:1;height:6px;border-radius:99px;background:var(--linea-c)}
.progreso span.hecho{background:var(--coral)}
.progreso span.ahora{background:linear-gradient(90deg,var(--coral) 50%,var(--linea-c) 50%)}
.paso-txt{font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--dorado);margin-bottom:6px}
.campo{margin-bottom:18px}
.campo label,.lbl{display:block;font-weight:600;margin-bottom:6px}
.campo .ayuda{font-size:.85rem;opacity:.7;margin-top:6px}
.input,textarea.input{width:100%;min-height:52px;border:1.5px solid var(--linea);border-radius:var(--r-sm);padding:12px 16px;background:var(--blanco);color:var(--verde);font:500 1rem var(--fuente);transition:border-color .15s,box-shadow .15s}
.input:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 4px rgba(242,188,87,.5)}
.input::placeholder{color:rgba(23,76,60,.4);font-weight:400}
textarea.input{min-height:220px;resize:vertical;line-height:1.6;font-weight:400}
.dos-col{display:grid;gap:0 12px;grid-template-columns:1fr 1fr}
.chips-rapidos{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.chip{border:1.5px solid var(--linea);background:var(--blanco);color:var(--verde);border-radius:999px;padding:6px 14px;font-weight:500;cursor:pointer;font-size:.92rem;transition:all .15s}
.chip:hover{border-color:var(--verde)}
.chip.activo{background:var(--verde);color:var(--crema);border-color:var(--verde)}
.chip.bloq{background:var(--coral);border-color:var(--coral);color:#fff}
.chip.bloq::before{content:"✕ "}
.acciones{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-top:28px;position:sticky;bottom:12px;background:rgba(17,61,48,.92);backdrop-filter:blur(8px);padding:10px;border-radius:18px;border:1px solid var(--linea-c);z-index:5}
.acciones .btn-coral{flex:1;max-width:340px;margin-left:auto}
.acciones.suelta{position:static;background:none;border:0;padding:0}

.agregar{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.agregar{grid-template-columns:1.1fr 1fr auto}}
.contador{display:flex;justify-content:space-between;align-items:center;margin:22px 0 10px;font-weight:600}
.lista-p{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.lista-p li{display:flex;align-items:center;gap:12px;background:var(--crema);border-radius:var(--r-sm);padding:10px 12px 10px 14px;animation:entra .3s ease both}
.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-weight:600;color:#fff;flex:none}
.lista-p .datos{flex:1;min-width:0}
.lista-p .datos strong{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-p .datos span{font-size:.83rem;opacity:.7;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lista-p .datos span.etiqueta{display:inline-flex;opacity:1}
.quitar{border:0;background:transparent;width:40px;height:40px;border-radius:12px;cursor:pointer;font-size:1rem;color:rgba(23,76,60,.6)}
.quitar:hover{background:var(--crema-2);color:var(--coral)}
.vacio{text-align:center;padding:28px 16px;border:1.5px dashed var(--linea-c);border-radius:var(--r);opacity:.85}
.vacio img{width:80px;margin:0 auto 10px}
.pegar{margin-top:12px}
.pegar summary{cursor:pointer;font-weight:600;color:var(--coral-2);font-size:.92rem}
.limite{background:var(--verde);color:var(--crema);border-radius:var(--r-sm);padding:14px 16px;margin-top:12px;font-weight:500}
.limite a{color:var(--dorado);font-weight:700}

.estado{display:flex;gap:12px;align-items:center;border-radius:var(--r-sm);padding:14px 16px;font-weight:600;margin:18px 0}
.estado.ok{background:#E3F1E8;color:var(--verde)}
.estado.mal{background:#FDE3DF;color:#8A2A21}
.estado .ico{font-size:1.3rem}
.interruptor{display:flex;align-items:center;gap:12px;cursor:pointer;font-weight:600;margin:6px 0 16px;user-select:none}
.interruptor input{position:absolute;opacity:0;pointer-events:none}
.interruptor .riel{width:50px;height:28px;border-radius:99px;background:color-mix(in srgb,currentColor 28%,transparent);position:relative;transition:background .2s;flex:none}
.interruptor .riel::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:transform .2s}
.interruptor input:checked+.riel{background:var(--coral)}
.interruptor input:checked+.riel::after{transform:translateX(22px)}
.interruptor input:focus-visible+.riel{outline:3px solid var(--dorado);outline-offset:2px}
.acordeon{display:grid;gap:8px}
.acordeon details{background:var(--crema);border-radius:var(--r-sm)}
.acordeon summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px;padding:10px 14px;font-weight:600}
.acordeon summary::-webkit-details-marker{display:none}
.acordeon summary .cuantos{margin-left:auto;font-size:.82rem;font-weight:500;opacity:.65}
.acordeon summary .cuantos.hay{color:var(--coral-2);opacity:1}
.acordeon summary::after{content:"›";font-size:1.4rem;line-height:1;transition:transform .2s;opacity:.5}
.acordeon details[open] summary::after{transform:rotate(90deg)}
.acordeon .cuerpo{padding:0 14px 16px}
.acordeon .cuerpo p{font-size:.9rem;opacity:.75;margin-bottom:10px}
.grupo-tarjeta{padding:20px;margin-bottom:6px}
.grupo-tarjeta .chip.activo::before{content:"✓ "}

.santa{text-align:center}
.santa .ilus{width:84px;margin:0 auto 10px}
.pestanas{display:flex;background:var(--crema-2);border-radius:13px;padding:4px;margin:18px 0}
.pestanas button{flex:1;border:0;background:transparent;padding:10px;border-radius:10px;font-weight:600;cursor:pointer;color:var(--verde)}
.pestanas button.activo{background:var(--blanco);box-shadow:var(--sombra-sm)}
.resumen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
.resumen div{background:var(--crema-2);border-radius:var(--r-sm);padding:12px;text-align:center}
.resumen strong{display:block;font-size:1.35rem;font-weight:700}
.resumen span{font-size:.8rem;opacity:.7;font-weight:500}

/* panel */
.panel-cab{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.meta{display:flex;flex-wrap:wrap;gap:8px}
.secreto{display:flex;gap:14px;align-items:center;background:rgba(255,246,231,.06);border:1px solid var(--linea-c);border-radius:var(--r);padding:14px 18px;margin-bottom:18px}

.nota-todos{background:var(--crema);border-left:5px solid var(--dorado);border-radius:12px;padding:12px 16px;font-weight:500;margin:0 0 16px;white-space:pre-wrap}
.nota-oscura{background:rgba(255,246,231,.08);color:var(--crema);margin:12px auto 0;text-align:left}
.links{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.link-p{background:var(--crema);border-radius:var(--r-sm);padding:14px;display:grid;gap:10px}
.link-yo{box-shadow:0 0 0 3px var(--dorado)}
.link-p .arriba{display:flex;align-items:center;gap:12px}
.link-p .arriba .datos{flex:1;min-width:0}
.link-p .arriba strong{display:block;font-weight:600}
.estatus{font-size:.78rem;font-weight:600;padding:3px 10px;border-radius:99px;display:inline-block;margin-top:2px}
.estatus.no{background:var(--crema-2);color:rgba(23,76,60,.7)}
.estatus.si{background:#E3F1E8;color:var(--verde)}
.estatus.carta{background:#FFF0CC;color:#7A5300}
.link-p .botones{display:flex;gap:8px;flex-wrap:wrap}
.link-p .botones .btn{flex:1;min-width:110px}
.correo-inline{display:flex;gap:8px}
.correo-inline .input{min-height:42px;font-size:.92rem;padding:8px 12px}
.btn-wa{background:#1F8F4E;color:#fff}

.grid-int{display:grid;gap:14px}
@media(min-width:720px){.grid-int{grid-template-columns:1fr 1fr}}
.int-card{display:block;text-decoration:none;background:var(--crema);border-radius:var(--r);padding:20px;transition:transform .15s;position:relative;overflow:hidden}
.int-card:hover{transform:translateY(-3px)}
.barra{height:8px;border-radius:99px;background:var(--crema-2);overflow:hidden;margin-top:12px}
.barra i{display:block;height:100%;background:var(--coral);border-radius:99px}
.int-card .deco{position:absolute;right:-16px;bottom:-16px;width:90px;opacity:.15;transform:rotate(-12deg)}
.plus-caja{background:var(--crema);color:var(--verde);border-radius:26px;padding:30px;box-shadow:0 0 0 3px var(--dorado),var(--sombra);text-align:center}

/* ===== papelito ===== */
.escena{min-height:calc(100vh - 64px);background:radial-gradient(circle at 50% 30%,var(--verde-3) 0%,var(--verde) 55%,var(--verde-2) 100%);padding:0 0 60px;position:relative;overflow:hidden}
.escena .guirnalda{position:absolute;top:0;left:0;right:0}
.escena-in{position:relative;z-index:2;padding-top:86px;text-align:center}
.escena h1{font-size:clamp(1.5rem,4.4vw,2.2rem);margin-bottom:2px}
.escena .sub{opacity:.75;font-weight:500}
/* cerrado: el escenario mide solo un papelito; al abrir crece al doble */
.nota-escenario{--h:190px;width:min(340px,86vw);height:calc(var(--h) + 24px);margin:16px auto 8px;position:relative;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.nota-escenario.abierta{height:calc(var(--h)*2)}
.nota{position:absolute;left:0;right:0;top:0;height:calc(var(--h)*2);perspective:1400px;transform:translateY(calc(var(--h)*-1 + 12px));transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.nota-escenario.abierta .nota{transform:none}
.nota-dentro{position:absolute;left:0;right:0;top:var(--h);height:var(--h);background:var(--crema);color:var(--verde);border-radius:18px;transition:border-radius .3s .5s;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;box-shadow:0 22px 40px rgba(0,0,0,.25)}
.nota-escenario.abierta .nota-dentro{border-radius:0 0 18px 18px;transition-delay:0s}
.nota-escenario:not(.abierta) .nota-dentro{visibility:hidden}
.nota-dentro::before{content:"";position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(23,76,60,.07) 30px 31px);pointer-events:none}
.nota-nombre{font-weight:700;font-size:clamp(1.9rem,8.5vw,2.7rem);line-height:1.05;letter-spacing:-.02em;color:var(--coral);word-break:break-word;opacity:0;transform:scale(.6);transition:all .5s .75s cubic-bezier(.2,.9,.3,1.4)}
.nota-escenario.abierta .nota-nombre{opacity:1;transform:none}
.nota-tapa{position:absolute;left:0;right:0;top:var(--h);height:var(--h);transform-origin:top center;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.3,.8,.25,1);border:0;padding:0;background:none;cursor:pointer;z-index:2}
.nota-escenario.abierta .nota-tapa{transform:rotateX(180deg);cursor:default}
.nota-cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:18px}
.nota-frente{background:var(--coral);color:#fff;box-shadow:0 22px 40px rgba(0,0,0,.3);background-image:linear-gradient(180deg,rgba(255,255,255,.1),transparent 40%)}
.nota-frente::after{content:"";position:absolute;right:0;bottom:0;width:44px;height:44px;background:linear-gradient(135deg,var(--coral-2) 50%,var(--crema-2) 50%);border-radius:0 0 18px 0}
.nota-frente .shh{font-size:2.2rem;line-height:1}
.nota-frente strong{font-weight:700;font-size:1.45rem;line-height:1.15}
.nota-frente span{font-weight:500;opacity:.92;font-size:.95rem}
.nota-reverso{background:var(--crema);color:var(--verde);transform:rotateX(180deg);border-radius:18px 18px 0 0;border-bottom:2px dashed rgba(23,76,60,.18)}
.nota-reverso img{width:36px}
.nota-reverso p{margin:0;font-weight:600;font-size:1.15rem}
.nota-escenario:not(.abierta) .nota-tapa{animation:llama 2.8s ease-in-out infinite}
@keyframes llama{0%,80%,100%{transform:rotate(0)}84%{transform:rotate(-2.5deg)}88%{transform:rotate(2.5deg)}92%{transform:rotate(-1.5deg)}96%{transform:rotate(1deg)}}
.tras-abrir{opacity:0;transform:translateY(16px);transition:all .6s 1.2s;pointer-events:none}
.tras-abrir.ver{opacity:1;transform:none;pointer-events:auto}
.carta{background:var(--crema);border-radius:var(--r);padding:24px;text-align:left;box-shadow:var(--sombra);margin-top:18px}
.carta .texto{white-space:pre-wrap;line-height:1.75;background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(23,76,60,.08) 28px 29px)}
.carta .sin{background:var(--crema-2);border-radius:var(--r-sm);padding:16px;font-weight:500}
.datos-int{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.datos-int .etiqueta{background:rgba(255,246,231,.12);color:var(--crema)}
.contador-car{text-align:right;font-size:.82rem;font-weight:600;opacity:.6;margin-top:6px}

/* ===== personajes ===== */
/* rig: 5 capas alineadas en un lienzo cuadrado; cada pieza gira desde su pivote */
.rig{position:absolute;aspect-ratio:1;pointer-events:none}
/* No se ve armándose a medias. (opacity y no visibility: con visibility el navegador ni siquiera carga las piezas) */
.camina{transition:opacity .4s}
.camina:not(.listo){opacity:0}
.rig .pz{position:absolute;inset:0;width:100%;height:100%}
.pose{display:block;pointer-events:none}

/* regalo que se asoma en la portada */
.hero{position:relative;overflow:hidden}
.asoma{width:230px;right:6%;bottom:-60px;transform:translateY(105%)}
.asoma.listo{animation:asoma 11s ease-in-out .8s infinite both}
@keyframes asoma{0%,6%{transform:translateY(105%)}14%,60%{transform:translateY(6%)}68%,100%{transform:translateY(105%)}}
.asoma.listo .pz-brazo-derecho{animation:saluda 11s ease-in-out .8s infinite both}
@keyframes saluda{0%,16%{transform:rotate(0)}20%{transform:rotate(-58deg)}25%{transform:rotate(-30deg)}30%{transform:rotate(-58deg)}35%{transform:rotate(-30deg)}40%{transform:rotate(-58deg)}46%,100%{transform:rotate(0)}}
.asoma .pz-cuerpo{transform-origin:50% 70%!important}
.asoma.listo .pz-cuerpo{animation:ladea 11s ease-in-out .8s infinite both}
@keyframes ladea{0%,18%{transform:rotate(0)}26%,44%{transform:rotate(-3deg)}52%,100%{transform:rotate(0)}}
@media(max-width:700px){.asoma{width:140px;right:0;bottom:-30px}}

/* piñata caminando por la línea de los pasos */
.pasos .num{z-index:2}
.camina{display:none}
@media(min-width:760px){
  .camina{display:block;width:130px;top:-63px;left:8%;z-index:1;animation:paseo 16s linear infinite alternate}
  .camina .pz-pierna-izquierda{animation:paso-a .5s ease-in-out infinite alternate}
  .camina .pz-pierna-derecha{animation:paso-b .5s ease-in-out infinite alternate}
  .camina .pz-brazo-izquierdo{animation:paso-b .5s ease-in-out infinite alternate}
  .camina .pz-brazo-derecho{animation:paso-a .5s ease-in-out infinite alternate}
  .camina .pz-cuerpo{animation:bota .25s ease-in-out infinite alternate}
}
@keyframes paseo{from{left:8%}to{left:calc(92% - 130px)}}
@keyframes paso-a{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes paso-b{from{transform:rotate(16deg)}to{transform:rotate(-16deg)}}
@keyframes bota{from{transform:translateY(0)}to{transform:translateY(-2.5%)}}

/* ponche pensativo en preguntas */
.pensando{width:120px;margin:0 auto 4px;animation:flota 4s ease-in-out infinite}
@keyframes flota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)}}

/* festejo al abrir el papelito */
.nota-festejo{position:absolute;width:150px;right:-104px;bottom:-6px;z-index:3;opacity:0;transform:scale(.3) translateY(30px);transition:all .5s 1.3s cubic-bezier(.2,.9,.3,1.5);pointer-events:none}
.nota-escenario.abierta .nota-festejo{opacity:1;transform:none}
@media(max-width:560px){.nota-festejo{width:92px;right:-18px;bottom:-40px}}
.santa .ilus.pj{width:140px;margin:-6px auto 4px}


/* ===== v3: íconos, ventanas, reglas, ficha y papelito claro ===== */
.btn svg{width:18px;height:18px;flex:none}
.btn-chico svg{width:16px;height:16px}
.btn-peligro{background:#B3362C;color:#fff}
.btn-borrar{color:#B3362C}
.etiqueta-tu{padding:1px 8px;font-size:.7rem;vertical-align:2px}
.aviso-editar{background:var(--crema);gap:8px}
.aviso-editar svg{width:16px;height:16px}
.kicker-verde{color:var(--coral-2)}

/* ventana de confirmación */
.modal-fondo{position:fixed;inset:0;z-index:80;background:rgba(8,26,20,.6);backdrop-filter:blur(3px);display:grid;place-items:center;padding:16px;animation:entra .2s ease both}
.modal{background:var(--crema);color:var(--verde);border-radius:var(--r);padding:26px;max-width:440px;width:100%;box-shadow:var(--sombra)}
.modal h2{font-size:1.35rem}
.modal p{opacity:.85}
.modal-acciones{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:8px}

/* paso de reglas */
.bloque{margin-top:14px}
.bloque-cab{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.bloque-cab h3{margin:2px 0 2px}
.bloque-cab p{margin:0}
.bloque-ico{flex:none;width:42px;height:42px;border-radius:12px;background:var(--coral);color:#fff;display:grid;place-items:center}
.bloque-ico svg{width:22px;height:22px}
.renglones{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.renglones li{display:flex;align-items:center;gap:10px;background:var(--blanco);border-radius:12px;padding:10px 8px 10px 14px}
.renglon-txt{flex:1;min-width:0}
.renglon-txt strong{display:block;font-weight:600}
.renglon-txt span{display:block;font-size:.92rem}
.renglon-txt > span:only-child{font-size:.96rem}
.renglon-txt span strong{display:inline}
.renglones .btn{color:#B3362C}
.armando{background:var(--blanco);border-radius:14px;padding:14px;border:2px dashed rgba(23,76,60,.2)}
.regla-form{display:grid;gap:10px;grid-template-columns:1fr}
.regla-form .input{min-height:46px;font-size:.95rem}
.regla-txt{font-weight:600;font-size:.92rem;text-align:center}
.casilla{display:flex;align-items:center;gap:8px;font-weight:500;font-size:.92rem;cursor:pointer}
.casilla input{width:18px;height:18px;accent-color:var(--coral)}
@media(min-width:640px){.regla-form{grid-template-columns:1fr auto 1fr}.regla-form .casilla{grid-column:1/3}.regla-form .btn{grid-column:3}}
.estado svg{width:22px;height:22px;flex:none}

/* ficha del intercambio */
.ficha h1{margin:0;font-size:clamp(1.6rem,4.4vw,2.2rem)}
.ficha-cab{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:18px}
.ficha-botones{display:flex;gap:6px}
.detalles{display:grid;gap:14px;margin:0 0 18px}
@media(min-width:560px){.detalles{grid-template-columns:1fr 1fr}}
.dato{display:flex;gap:12px;align-items:flex-start}
.dato-ico{flex:none;width:38px;height:38px;border-radius:11px;background:var(--crema-2);color:var(--coral-2);display:grid;place-items:center}
.dato-ico svg{width:20px;height:20px}
.dato dt{font-size:.78rem;font-weight:600;opacity:.6;text-transform:uppercase;letter-spacing:.06em}
.dato dd{margin:0;font-weight:600;line-height:1.4}
.dato dd::first-letter{text-transform:uppercase}
.dato a{color:var(--coral-2);font-weight:600}
.ficha-msg{margin:0 0 18px;background:var(--blanco);border-left:4px solid var(--dorado);border-radius:10px;padding:12px 16px;white-space:pre-wrap}
.ficha-msg span{display:block;font-size:.78rem;font-weight:600;opacity:.6;text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.avance-txt{display:flex;justify-content:space-between;font-size:.92rem;font-weight:500}
.avance .barra{margin-top:8px}
.secreto svg{width:22px;height:22px;flex:none;color:var(--dorado)}
.reparte-cab{margin:30px 0 14px}
.reparte-cab h2{margin-bottom:2px}
.reparte-cab .btn-coral{margin-top:6px}
.muestra{margin-top:12px}
.muestra summary{cursor:pointer;font-weight:600;display:inline-flex;gap:8px;align-items:center;opacity:.9}
.muestra summary svg{width:18px;height:18px}
.muestra-cuerpo{background:var(--crema);color:var(--verde);border-radius:var(--r-sm);padding:16px;margin-top:10px}
.muestra-cuerpo .lbl{margin:0 0 6px;font-size:.85rem}
.muestra-wa{white-space:pre-wrap;font:400 .9rem/1.5 var(--fuente);background:#DCF8C6;border-radius:12px;padding:12px;margin:0 0 14px;word-break:break-all}
.muestra-correo{background:var(--blanco);border-radius:12px;padding:12px;font-size:.9rem}
.muestra-correo span{font-weight:600}
.link-p .datos .estatus{margin-right:4px}
.poner-correo summary{cursor:pointer;font-size:.88rem;font-weight:600;color:var(--coral-2)}
.poner-correo form{margin-top:8px}

/* mis intercambios */
.int-card{padding:0;display:flex;flex-direction:column}
.int-card:hover{transform:none}
.int-link{display:block;text-decoration:none;padding:20px 20px 14px}
.int-link h3{margin-bottom:4px}
.int-acciones{display:flex;gap:6px;flex-wrap:wrap;padding:0 14px 14px}

/* papelito: "Para:" afuera, "te toca darle regalo a" adentro */
.nota-para{position:absolute;top:14px;left:18px;font-size:.85rem!important;font-weight:600!important;opacity:.95!important;letter-spacing:.02em}
.nota-toca{font-size:.92rem}
.nota-frente strong{margin-top:8px}
.nota-reverso p{font-size:1.1rem;line-height:1.35}
.nota-secreto{font-size:.8rem;font-weight:500;opacity:0;margin-top:8px;transition:opacity .5s 1.1s}
.nota-escenario.abierta .nota-secreto{opacity:.6}
.escena .nota-para{display:none}
.escena .kicker{margin-bottom:4px}
.escena h1.para{font-size:clamp(2rem,6vw,2.8rem);margin-bottom:4px}
.carta h3{margin-bottom:12px}
.carta .detalles{margin-bottom:12px}
.carta .ficha-msg{margin:0;background:var(--crema-2)}

.confeti{position:fixed;top:-20px;width:10px;height:14px;z-index:50;pointer-events:none;border-radius:2px;animation:cae linear forwards}
@keyframes cae{to{transform:translateY(110vh) rotate(720deg)}}
#toasts{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;display:grid;gap:8px;width:min(92vw,420px)}
.toast{background:var(--crema);color:var(--verde);padding:14px 18px;border-radius:14px;font-weight:600;box-shadow:0 10px 30px rgba(0,0,0,.3);animation:entra .3s ease both}

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

/* ===== v4: app real ===== */
.oculto-visual{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.saltar{position:absolute;left:12px;top:-60px;z-index:100;background:var(--dorado);color:var(--verde);padding:10px 16px;border-radius:10px;font-weight:600;text-decoration:none}
.saltar:focus{top:12px}
#vista:focus{outline:none}
.h3{font-size:1.1rem;letter-spacing:-.01em;margin:0 0 .45em}
.cargando{min-height:60vh;display:grid;place-content:center;justify-items:center;gap:6px;text-align:center;opacity:.9}
.cargando img{width:72px;animation:balanceo 1.4s ease-in-out infinite}
@keyframes balanceo{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg) translateY(-6px)}}
.btn.esperando{position:relative;color:transparent!important}
.btn.esperando::after{content:"";position:absolute;width:20px;height:20px;border-radius:50%;border:2.5px solid rgba(255,255,255,.5);border-top-color:#fff;animation:gira .7s linear infinite}
.btn-blanco.esperando::after,.btn-fantasma.esperando::after,.btn-dorado.esperando::after{border-color:rgba(23,76,60,.25);border-top-color:var(--verde)}
@keyframes gira{to{transform:rotate(360deg)}}
.pill-plus{display:inline-flex;align-items:center;padding:1px 8px;border-radius:999px;background:var(--dorado);color:var(--verde);font-size:.7rem;font-weight:700;letter-spacing:.03em;vertical-align:2px}
.plus-nota{display:flex;align-items:center;gap:8px;font-size:.88rem;opacity:.85;margin:-4px 0 18px}
.plus-nota svg{width:18px;height:18px;flex:none;color:var(--coral-2)}
.agregar.sin-correo{grid-template-columns:1fr auto}
.upsell{display:flex;gap:14px;align-items:center;flex-wrap:wrap;background:linear-gradient(135deg,rgba(242,188,87,.18),rgba(242,188,87,.06));border:1px solid rgba(242,188,87,.45);border-radius:var(--r);padding:14px 18px;margin-bottom:18px}
.upsell > div{flex:1;min-width:200px}
.upsell p{margin:0}
.upsell-ilus{width:64px;height:64px;flex:none}
.ficha-plus{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;border-top:1px solid var(--linea);margin-top:18px;padding-top:16px}
.ficha-plus .interruptor{flex:1;min-width:240px}
.preguntas{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:10px}
.preguntas li{background:var(--crema-2);border-radius:12px;padding:12px 14px}
.preguntas .q{margin:0 0 6px;font-weight:600}
.preguntas .r{margin:0;padding-left:12px;border-left:3px solid var(--coral)}
.preguntas .r.espera{opacity:.6;font-style:italic;border-left-color:var(--linea)}
.preguntas form{margin-top:6px}
.carta h2 svg{width:20px;height:20px;vertical-align:-3px;margin-right:4px;color:var(--coral-2)}
.aviso-pago{background:var(--crema-2);border-radius:12px;padding:12px;font-weight:500}
.plus-caja .ilus{width:140px;margin:0 auto 6px}
.toast.bien{border-left:5px solid #2F7A62}
@media(max-width:420px){.dos-col{grid-template-columns:1fr}.resumen strong{font-size:1.1rem}}

/* ===== v5: menos íconos, más personalidad ===== */
/* Íconos artesanales (img/iconos). Si no existe el archivo, la imagen se quita sola. */
.ico-mini{width:26px;height:26px;object-fit:contain;vertical-align:-7px;margin-right:6px;flex:none}
.ico-bloque{width:54px;height:54px;object-fit:contain;flex:none;transform:rotate(-4deg)}
.ico-funcion{width:68px;height:68px;object-fit:contain;display:block;margin:-6px 0 10px -4px;transform:rotate(-5deg)}
.funcion:nth-child(even) .ico-funcion{transform:rotate(4deg)}
.btn .ico-mini{margin-right:2px}
.bloque-cab{align-items:center}

/* Botones de texto (Editar / Eliminar): sin cajas que compitan con el botón principal */
.btn-texto{background:none;border:0;padding:8px 6px;font:600 .92rem var(--fuente);color:var(--verde);cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(23,76,60,.3);border-radius:8px}
.btn-texto:hover{text-decoration-color:currentColor}
.btn-texto.borrar{color:#B3362C;text-decoration-color:rgba(179,54,44,.35)}
.btn-texto:disabled{opacity:.5}

/* Hojita de calendario */
.cal{flex:none;width:68px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 3px 0 rgba(23,76,60,.12),0 8px 18px rgba(23,76,60,.12);overflow:hidden;transform:rotate(-3deg);color:var(--verde);line-height:1}
.cal-mes{display:block;background:var(--coral);color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;padding:6px 0 5px}
.cal-dia{display:block;font-size:1.85rem;font-weight:700;padding:6px 0 2px;letter-spacing:-.03em}
.cal-sem{display:block;font-size:.7rem;font-weight:600;opacity:.6;padding:0 0 7px;text-transform:lowercase}
.cal.sin-fecha .cal-mes{background:var(--dorado);color:var(--verde)}
.cal.sin-fecha .cal-sem{font-size:.62rem}
.cal-grande{width:84px}
.cal-grande .cal-dia{font-size:2.3rem}

/* Caritas encimadas */
.avatares{display:flex;padding-left:8px}
.avatares .avatar{width:34px;height:34px;font-size:.85rem;margin-left:-8px;border:2.5px solid var(--crema)}
.avatares .avatar.mas{background:var(--crema-2);color:var(--verde);font-size:.75rem}
.int-gente{display:flex;align-items:center;gap:10px;margin:16px 0 14px;font-weight:600;font-size:.92rem}

/* Tarjetas de "Mis intercambios" */
.grid-int{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:22px;margin-top:8px}
.int-card{background:var(--crema);border-radius:24px;padding:0;position:relative;overflow:visible;border-top:7px solid var(--acento);box-shadow:var(--sombra);transition:transform .2s}
.int-card:hover{transform:translateY(-3px)}
.tono-coral{--acento:var(--coral)}
.tono-dorado{--acento:var(--dorado)}
.tono-menta{--acento:#7FCBA4}
.int-pj{position:absolute;right:-10px;top:-42px;width:96px;height:96px;object-fit:contain;transform:rotate(6deg);pointer-events:none;filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))}
.int-card:hover .int-pj{animation:saludito .8s ease-in-out}
@keyframes saludito{0%,100%{transform:rotate(6deg)}30%{transform:rotate(-4deg) translateY(-4px)}60%{transform:rotate(9deg)}}
.int-link{display:block;text-decoration:none;color:inherit;padding:22px 22px 6px}
.int-cab{display:flex;gap:16px;align-items:center;padding-right:58px}
.int-titulo{min-width:0}
.int-titulo h2{font-size:1.25rem;margin:0 0 4px;line-height:1.2}
.int-cuenta{margin:0;font-weight:600;color:var(--coral-2);font-size:.95rem}
.int-lugar{margin:2px 0 0;font-size:.88rem;opacity:.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.int-card .avance-txt{font-size:.88rem}
.int-acciones{display:flex;gap:6px;align-items:center;padding:6px 18px 18px;border-top:1px dashed var(--linea);margin-top:12px;padding-top:14px}
.int-acciones .btn{margin-right:auto}

/* Ficha del intercambio, como invitación */
.ficha{border-top:7px solid var(--acento,var(--coral))}
.ficha-cab{display:flex;gap:18px;align-items:center;margin-bottom:20px;flex-wrap:nowrap}
.ficha-titulo{min-width:0}
.ficha-titulo h1{margin:2px 0 4px;font-size:clamp(1.5rem,4.2vw,2.1rem)}
.ficha-titulo .kicker{margin-bottom:0}
.invitacion{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));margin:0 0 18px;border:1.5px dashed rgba(23,76,60,.22);border-radius:16px;overflow:hidden}
.invitacion > div{padding:12px 16px;border-right:1.5px dashed rgba(23,76,60,.22)}
.invitacion > div:last-child{border-right:0}
.invitacion dt{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin-bottom:2px}
.invitacion dd{margin:0;font-weight:600;line-height:1.35}
.invitacion a{color:var(--coral-2);font-weight:600;white-space:nowrap}
@media(max-width:520px){.invitacion{grid-template-columns:1fr}.invitacion > div{border-right:0;border-bottom:1.5px dashed rgba(23,76,60,.22)}.invitacion > div:last-child{border-bottom:0}}
.ficha .int-gente{margin-top:4px}
.ficha-pie{display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px dashed var(--linea)}
.ficha-secreto{margin:0;font-size:.9rem;font-weight:500;opacity:.8;display:flex;align-items:center}
.ficha-botones{display:flex;gap:4px}
.ficha-plus .btn{gap:4px}
.detalle-cab{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.detalle-cab strong{display:block;color:var(--coral-2)}
.detalle-cab span{display:block;font-size:.92rem;opacity:.75}
.detalle-cab span::first-letter{text-transform:uppercase}

/* ===== Frase escrita a mano (Caveat) ===== */
.frase{font-family:'Caveat','Segoe Print','Bradley Hand',cursive;font-weight:700;line-height:1.05;margin:4px 0 12px;display:inline-block;max-width:100%;letter-spacing:.005em}
.frase .fp{display:inline-block;white-space:nowrap}
.frase .fl{display:inline-block}
.frase-raya{display:block;width:100%;height:12px;margin-top:1px;overflow:visible}
.frase-raya path{fill:none;stroke:var(--coral);stroke-width:3.5;stroke-linecap:round}
.frase-escena{font-size:clamp(2.1rem,7.5vw,2.9rem);color:var(--dorado);margin:8px auto 6px}
.frase-ficha{font-size:clamp(1.8rem,5.2vw,2.3rem);color:var(--coral-2);margin:-8px 0 16px}
.frase-ficha .frase-raya path{stroke:var(--dorado)}
.frase-tarjeta{font-family:'Caveat','Segoe Print',cursive;font-weight:700;font-size:1.25rem;color:var(--verde);opacity:.8;margin:-2px 0 2px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.input-mano{font-family:'Caveat','Segoe Print',cursive;font-size:1.65rem;font-weight:700;padding-top:4px;padding-bottom:4px}
.input-mano::placeholder{font-weight:600}
.chip-mano{font-family:'Caveat','Segoe Print',cursive;font-size:1.15rem;font-weight:700;padding:2px 14px}
/* La animación solo si la persona no pidió "reducir movimiento" (si no, la frase aparece completa) */
@media (prefers-reduced-motion:no-preference){
  .frase .fl{clip-path:inset(-30% 100% -30% -12%);animation:trazo .17s ease-out forwards;animation-delay:calc(var(--i) * 75ms + .35s)}
  .frase-raya path{stroke-dasharray:320;stroke-dashoffset:320;animation:raya .7s ease-in-out forwards;animation-delay:calc(var(--n) * 75ms + .45s)}
}
@keyframes trazo{to{clip-path:inset(-30% -12% -30% -12%)}}
@keyframes raya{to{stroke-dashoffset:0}}

/* ===== ¿Tú también vas a participar? ===== */
.pregunta-yo .lbl{font-size:1.05rem;margin-bottom:10px}
.opciones-yo{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:480px){.opciones-yo{grid-template-columns:1fr}}
.opcion{min-height:56px;padding:12px 16px;border-radius:14px;border:2px solid var(--linea);background:var(--blanco);color:var(--verde);font:600 1rem var(--fuente);cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:border-color .15s,background .15s}
.opcion::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid rgba(23,76,60,.35);background:var(--blanco);transition:all .15s}
.opcion:hover{border-color:var(--verde)}
.opcion.activa{border-color:var(--coral);background:#FFF0EA}
.opcion.activa::before{border-color:var(--coral);background:var(--coral);box-shadow:inset 0 0 0 4px #fff}
.yo-ayuda{margin:12px 0 0;font-size:.95rem;line-height:1.5}
.yo-ayuda .btn-texto{padding:2px 4px;font-size:.95rem}
.pregunta-yo.falta{box-shadow:0 0 0 3px var(--coral),var(--sombra);animation:sacude .4s ease}
.yo-ayuda.error{color:#A8342B;font-weight:600}
@keyframes sacude{0%,100%{transform:none}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
.btn-soy{flex:none;border:2px solid var(--coral);background:var(--blanco);color:var(--coral-2);border-radius:999px;padding:6px 14px;font:700 .88rem var(--fuente);cursor:pointer;white-space:nowrap}
.btn-soy:hover{background:var(--coral);color:#fff}
.lista-p li.es-yo{box-shadow:0 0 0 2.5px var(--dorado)}
/* Las listas en cuadrícula no deben ensancharse por un texto largo (en celular se salían de la pantalla) */
.lista-p,.links,.renglones,.preguntas{grid-template-columns:minmax(0,1fr)}
.lista-p > li,.links > li,.renglones > li{min-width:0}
@media(max-width:420px){.lista-p .datos span{font-size:.78rem}.btn-soy{padding:5px 11px}}

/* Con "reducir movimiento" el regalo se queda quieto, asomado */
@media(prefers-reduced-motion:reduce){.asoma{transform:translateY(6%)}}

/* ===== v6: íconos artesanales, separación y ponche ===== */
/* La tarjeta de Plus ya no queda pegada a la ficha */
.upsell{margin:18px 0}
.titulo-ico{display:flex;align-items:center;gap:10px}
.ico-titulo{width:44px;height:44px;object-fit:contain;flex:none;transform:rotate(-6deg)}
.plan .titulo-ico .ico-titulo{width:34px;height:34px}
.vacio img{width:96px;height:96px;object-fit:contain}
.aviso-plan .ico-mini{width:22px;height:22px;vertical-align:-5px}

/* Hojita de calendario: el dibujo artesanal y encima el día */
.cal{background:url(../img/iconos/calendario.webp) center/contain no-repeat;box-shadow:none;border-radius:0;overflow:visible;width:78px;height:78px;transform:rotate(-4deg);position:relative}
.cal .cal-mes{position:absolute;top:21%;left:21%;right:12%;background:none;color:#fff;font-size:.6rem;padding:0;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.cal .cal-dia{position:absolute;top:38%;left:19%;right:10%;font-size:1.7rem;padding:0;line-height:1}
.cal .cal-sem{position:absolute;top:70%;left:19%;right:10%;padding:0;font-size:.62rem}
.cal-grande{width:96px;height:96px}
.cal-grande .cal-dia{font-size:2.05rem}
.cal-grande .cal-mes{font-size:.68rem}
.cal.sin-fecha .cal-mes{background:none;color:#fff}

/* "Invítanos un ponche": discreto, sin caja ni colores fuertes */
.ponche{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:26px auto 0;font-size:.9rem;opacity:.85}
.ponche .btn-texto{color:var(--crema);text-decoration-color:rgba(255,246,231,.4);padding:4px 2px;font-size:.9rem}
.ponche-mini{width:34px;height:34px;object-fit:contain}
.ponches{display:grid;gap:8px;margin-top:6px}
.ponche-op{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;border:2px solid var(--linea);background:var(--blanco);color:var(--verde);font:600 1rem var(--fuente);cursor:pointer;transition:border-color .15s,background .15s}
.ponche-op:hover{border-color:var(--coral);background:#FFF0EA}
.ponche-op span{color:var(--coral-2);font-weight:700}
.modal .ilus.pj{width:120px;height:120px;margin:-10px auto 4px;display:block}
/* Ajustes: número y "vie · dic" en la parte blanca de la hoja; título pegado al calendario */
.cal .cal-dia{top:36%}
.cal .cal-sem{top:69%;font-weight:700;opacity:.75;color:var(--coral-2);text-transform:lowercase;letter-spacing:.02em}
.ficha-cab{justify-content:flex-start}
/* Página de Plus: beneficios con su ícono */
.plus-caja .lista-ico{list-style:none;padding:0;margin:22px auto 24px;max-width:380px;text-align:left;display:grid;gap:6px}
.plus-caja .lista-ico li{display:flex;align-items:center;gap:12px;padding:4px 0}
.plus-caja .lista-ico li::before{content:none}
.ico-lista{width:40px;height:40px;object-fit:contain;flex:none}
.plus-caja .lista-ico li:nth-child(odd) .ico-lista{transform:rotate(-5deg)}
.plus-caja .lista-ico li:nth-child(even) .ico-lista{transform:rotate(4deg)}

/* ===== v7 ===== */
/* Portada: ícono junto al título, sin espacio muerto */
.funcion-cab{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.funcion-cab h3{margin:0}
.funcion-cab .ico-funcion{width:54px;height:54px;margin:0;flex:none}
.funcion{padding:20px 22px}

/* Calendario: solo día y mes, dentro de la hoja */
.cal .cal-dia{top:37%;left:18%;right:12%;font-size:1.55rem}
.cal .cal-sem{top:70%;left:18%;right:12%;font-size:.66rem;opacity:.85}
.cal-grande .cal-dia{font-size:1.9rem}
.cal-grande .cal-sem{font-size:.75rem}

/* Personas y avance en un solo renglón */
.gente-txt{display:flex;align-items:center;gap:10px;font-size:.9rem}
.gente-txt > span{flex:1;min-width:0;font-weight:500}
.gente-txt .avatares .avatar{width:30px;height:30px;font-size:.78rem;margin-left:-9px}
.avance .barra{margin-top:10px}
.ficha .avance{margin-top:6px}
@media(max-width:480px){.gente-txt{flex-wrap:wrap}.gente-txt > span{flex-basis:100%;order:3}}

/* Frase a mano: que nada se corte (las letras altas de Caveat salen de su caja) */
.frase .fl{padding:0 .02em}
@media (prefers-reduced-motion:no-preference){
  .frase .fl{clip-path:inset(-70% 100% -70% -30%);animation-name:trazo2}
}
@keyframes trazo2{99%{clip-path:inset(-70% -30% -70% -30%)}100%{clip-path:none}}
.frase{padding-top:.08em}
/* "¿Cuál de la lista eres tú?": un solo desplegable dentro de la pregunta */
.elige-yo{margin-top:14px;padding-top:14px;border-top:1px dashed var(--linea)}
.elige-yo label{display:block;font-weight:600;margin-bottom:6px}
.elige-yo select{cursor:pointer}
.elige-yo p{margin:6px 0 0}
.pregunta-yo.falta .elige-yo select{border-color:var(--coral);box-shadow:0 0 0 3px rgba(230,91,79,.2)}
/* "+ Agregar detalles" y la ventana de datos (sin volver a sortear) */
.agregar-detalles{display:block;width:100%;text-align:left;margin:0 0 18px;padding:14px 16px;border:2px dashed rgba(23,76,60,.25);border-radius:14px;background:transparent;color:var(--verde);font:600 1rem var(--fuente);cursor:pointer;transition:border-color .15s,background .15s}
.agregar-detalles:hover{border-color:var(--coral);background:#FFF0EA}
.agregar-detalles span{display:block;font-size:.85rem;font-weight:500;opacity:.65;margin-top:2px}
.btn-texto.mini{font-size:.75rem;padding:0 4px;margin-left:6px;text-transform:none;letter-spacing:0;vertical-align:1px}
.modal{max-height:calc(100vh - 32px);overflow:auto}
.form-datos .campo{margin-bottom:14px}
.form-datos .input{min-height:46px}
/* Calendario: el día y el mes van dentro de una caja que cubre EXACTAMENTE la hoja blanca del dibujo
   (medida sobre el dibujo: 28–84 % de ancho, 40–79 % de alto) y se centran ahí */
.cal .cal-hoja{position:absolute;left:28%;right:16%;top:40%;bottom:21%;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.cal .cal-hoja .cal-dia,.cal .cal-hoja .cal-sem{position:static;padding:0;left:auto;right:auto;top:auto}
.cal .cal-hoja .cal-dia{font-size:1.32rem;letter-spacing:-.02em}
.cal .cal-hoja .cal-sem{font-size:.6rem;margin-top:1px}
.cal-grande .cal-hoja .cal-dia{font-size:1.62rem}
.cal-grande .cal-hoja .cal-sem{font-size:.68rem}
/* Ponche de quien organiza: un poquito más visible (cajita suave con borde dorado) */
.ponche{width:fit-content;max-width:100%;margin:26px auto 0;padding:10px 18px 10px 12px;gap:10px;opacity:1;font-size:.95rem;background:rgba(255,246,231,.07);border:1.5px dashed rgba(242,188,87,.55);border-radius:999px}
.ponche-mini{width:52px;height:52px;margin:-14px 0 -10px;transform:rotate(-6deg);filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.ponche-btn{background:none;border:0;padding:4px 2px;color:var(--dorado);font:700 .95rem var(--fuente);cursor:pointer;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px;text-decoration-color:rgba(242,188,87,.45)}
.ponche-btn:hover{text-decoration-color:var(--dorado)}
@media(max-width:480px){.ponche{border-radius:18px;justify-content:center;text-align:center}}
/* Ponche en el papelito: discreto, al final */
.ponche-pap{margin:22px 0 0;font-size:.85rem;opacity:.7;text-align:center}
.ponche-pap .btn-texto{color:var(--crema);font-size:.85rem;padding:2px;text-decoration-color:rgba(255,246,231,.35)}
/* Ponche: el dibujo va completo DENTRO de la cajita, sin tocar el borde */
.ponche{padding:8px 20px 8px 10px;gap:10px}
.ponche-mini{width:40px;height:40px;margin:0;transform:rotate(-6deg);filter:none}
/* Pie: enlaces (aviso de privacidad y redes) */
.pie-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:16px 0 10px}
.pie-links a{color:var(--crema);font-size:.88rem;font-weight:500;text-decoration:underline;text-decoration-color:rgba(255,246,231,.35);text-underline-offset:4px}
.pie-links a:hover{text-decoration-color:var(--crema)}
/* Aviso de privacidad: lectura cómoda */
.legal{background:var(--crema);color:var(--verde);border-radius:var(--r);padding:32px 28px;margin-top:28px;margin-bottom:40px;box-shadow:var(--sombra)}
.legal .kicker{color:var(--coral-2)}
.legal h1{margin-bottom:12px}
.legal h2{font-size:1.12rem;margin:26px 0 8px}
.legal p,.legal li{line-height:1.7;font-size:.97rem}
.legal ul{padding-left:20px;margin:0 0 12px}
.legal li{margin-bottom:6px}
.legal a{color:var(--coral-2);font-weight:600}
.legal-resumen{background:#fff;border-left:5px solid var(--dorado);border-radius:12px;padding:14px 16px;font-weight:500}
@media(max-width:520px){.legal{padding:24px 18px;border-radius:18px}}
/* Accesibilidad: el coral como TEXTO chico sobre crema daba 4.1:1 de contraste (mínimo recomendado 4.5).
   Este tono da 5.3:1. Los botones y dibujos conservan el coral de la marca. */
:root{--coral-texto:#B83A30}
.kicker-verde,.int-cuenta,.cal .cal-sem,.legal .kicker,.legal a,.dato a,.invitacion a,.detalle-cab strong,
.pegar summary,.poner-correo summary,.plus-nota svg,.carta h2 svg,.yo-ayuda .btn-texto{color:var(--coral-texto)}

/* ===== v17: más claro y más corto ===== */
/* Aviso del plan: una línea tranquila, no un letrero amarillo */
.plan-nota{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 auto 16px;font-size:.9rem;font-weight:500;color:var(--crema);opacity:.82;text-align:center}
.plan-nota .ico-mini{width:20px;height:20px;margin:0}
/* Notas Plus: el texto va junto (ícono a un lado, frase completa al otro) */
.plus-nota > span{flex:1;min-width:0}
/* Paso 1: detalles de la posada plegables */
.mas-detalles{margin-top:14px}
.mas-detalles > summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:1px;padding:15px 18px 15px 58px;border:2px dashed rgba(255,246,231,.35);border-radius:var(--r);position:relative;color:var(--crema);transition:border-color .15s,background .15s}
.mas-detalles > summary::-webkit-details-marker{display:none}
.mas-detalles > summary::before{content:"+";position:absolute;left:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--dorado);color:var(--verde);display:grid;place-items:center;font-weight:700;font-size:1.2rem;line-height:1}
.mas-detalles > summary:hover{border-color:var(--dorado);background:rgba(255,246,231,.05)}
.mas-detalles[open] > summary{border-color:transparent;padding-bottom:8px}
.mas-detalles[open] > summary::before{content:"−"}
.mas-detalles-t{font-weight:600;font-size:1.02rem}
.mas-detalles-s{font-size:.88rem;opacity:.75}
.mas-detalles-cuerpo{margin-top:4px;animation:entra .25s ease both}
/* Portada: "Cómo funciona" en crema para que no todo sea verde */
.seccion-crema{background:var(--crema);color:var(--verde)}
.seccion-crema .kicker{color:var(--coral-texto)}
.seccion-crema .pasos::before{border-color:rgba(23,76,60,.3)}
.seccion-crema .paso .num{background:var(--verde);border-color:var(--verde);color:var(--crema)}
.seccion-crema .paso p{opacity:.8}
@media(max-width:640px){
  .seccion{padding:52px 0}
  .titulo-seccion{margin-bottom:26px}
  .pasos{gap:20px}
  .funciones{gap:10px}
}
/* Panel: una acción principal y lo demás en "⋯" */
.ficha-acciones{display:flex;gap:8px;align-items:center;margin:-4px 0 18px}
.mas-menu{position:relative}
.mas-menu > summary{list-style:none;cursor:pointer;width:42px;height:40px;border-radius:11px;display:grid;place-items:center;font-size:1.35rem;font-weight:700;line-height:1;color:var(--verde);background:var(--blanco);box-shadow:inset 0 0 0 1.5px var(--linea);user-select:none}
.mas-menu > summary::-webkit-details-marker{display:none}
.mas-menu > summary:hover,.mas-menu[open] > summary{background:var(--crema-2)}
.mas-menu > summary:focus-visible{outline:3px solid var(--dorado);outline-offset:2px}
.mas-menu .menu{position:absolute;left:0;top:calc(100% + 6px);z-index:15;display:grid;min-width:170px;padding:6px;background:var(--blanco);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.mas-menu .menu button{background:none;border:0;text-align:left;padding:11px 12px;border-radius:8px;font:600 .97rem var(--fuente);color:var(--verde);cursor:pointer}
.mas-menu .menu button:hover,.mas-menu .menu button:focus-visible{background:var(--crema-2)}
.mas-menu .menu .borrar{color:var(--coral-texto)}
.int-acciones [data-editar]{margin-right:0}
.int-card .mas-menu .menu{top:auto;bottom:calc(100% + 6px);left:auto;right:0}
.opciones-editar{display:grid;gap:10px;margin-top:14px}
.opcion-editar{display:block;width:100%;text-align:left;padding:16px 18px;border-radius:14px;border:2px solid var(--linea);background:var(--blanco);color:var(--verde);font:inherit;cursor:pointer;transition:border-color .15s,transform .15s}
.opcion-editar:hover,.opcion-editar:focus-visible{border-color:var(--coral);outline:0}
.opcion-editar strong{display:block;font-size:1.02rem}
.opcion-editar span{display:block;font-size:.93rem;opacity:.75;margin-top:2px}
/* Progreso en una frase */
.ficha .gente-txt{font-size:.98rem}
.gente-txt > span strong{font-weight:700}
@media(max-width:480px){.gente-txt{flex-wrap:nowrap}.gente-txt > span{flex-basis:auto;order:0}}
/* Recordatorios con más aire, secreto al final de la ficha */
.ficha-plus{margin-top:20px;padding-top:18px;gap:16px}
.ficha-plus .interruptor .suave{font-size:.9rem;margin-top:2px}
.ficha .ficha-secreto{margin-top:20px;padding-top:14px;border-top:1px dashed var(--linea);font-size:.95rem;gap:2px}
/* Correo: cuando ya les llegó a todos */
.correos-listos{display:flex;gap:8px;align-items:center;background:rgba(255,246,231,.08);border-radius:12px;padding:10px 14px;margin:10px 0 0;font-size:.93rem}
.correos-listos .ico-mini{width:22px;height:22px;margin:0}
/* "Ver el mensaje" y "Descargar lista" en una fila de enlaces */
.reparte-extra{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 22px;margin-top:12px}
.reparte-extra .muestra{margin-top:0}
.reparte-extra .muestra[open]{flex-basis:100%}
.enlace-lista{color:var(--crema);font-weight:600;opacity:.9;text-decoration:underline;text-decoration-color:rgba(255,246,231,.35);text-underline-offset:4px}
.enlace-lista:hover{opacity:1;text-decoration-color:var(--crema)}
/* Filtros de la lista */
.filtros{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 12px}
.filtro{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:99px;border:1.5px solid rgba(255,246,231,.3);background:transparent;color:var(--crema);font:600 .93rem var(--fuente);cursor:pointer;transition:background .15s}
.filtro span{background:rgba(255,246,231,.14);border-radius:99px;padding:0 8px;font-size:.82rem;min-width:24px;text-align:center}
.filtro:hover{background:rgba(255,246,231,.08)}
.filtro.activo{background:var(--crema);color:var(--verde);border-color:var(--crema)}
.filtro.activo span{background:var(--crema-2)}
.filtro:focus-visible{outline:3px solid var(--dorado);outline-offset:2px}
.vacio-filtro{text-align:center;opacity:.85;margin:16px 0}
@media(max-width:420px){.filtros{flex-wrap:nowrap}.filtro{flex:1 1 auto;justify-content:center;padding:6px 8px;gap:6px;font-size:.88rem}.filtro span{padding:0 6px;min-width:20px}}
/* Texto secundario un poco más grande */
.estatus{font-size:.84rem}
.btn-chico{font-size:.92rem}
.link-p .datos strong{font-size:1.02rem}