/* ==========================================================================
   Tunutriplan · Portada (1.0.28, la C depurada del 9 oct 2026; 1.40.0, 12 oct)
   Dos pantallas: el vídeo a toda pantalla y una hoja que pasa entera encima
   (el paso lo hace portada.js). Poco texto, lo importante grande.
   Primero el móvil; el ordenador, a partir de 900 px. Solo en la portada.
   ========================================================================== */

/* ---------- Arriba, la cabecera: lo enfocado con el tabulador no queda debajo ---------- */
html.p-snap:root{scroll-padding-top:calc(var(--cab-alto,64px) * var(--tnp-z,1))}
:root{--cab-alto:64px}
@media (min-width:900px){:root{--cab-alto:72px}}

/* ---------- Cabecera transparente sobre la foto ---------- */
.cab-portada{margin-bottom:calc(-1 * var(--cab-alto))}
html.p-snap .cab-portada{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .25s,border-color .25s}
html.p-snap .cab-portada.is-solida{background:rgba(250,246,240,.96);border-bottom-color:var(--borde);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
html.p-snap .cab-portada:not(.is-solida) .logo,html.p-snap .cab-portada:not(.is-solida) .logo:hover{color:var(--crema)}
html.p-snap .cab-portada:not(.is-solida) .logo svg path:not([stroke="#E08A3C"]){stroke:var(--crema)}
html.p-snap .cab-portada:not(.is-solida) .nav a{color:rgba(250,246,240,.88)}
html.p-snap .cab-portada:not(.is-solida) .nav a:hover{color:var(--crema)}
html.p-snap .cab-portada:not(.is-solida) .cab-menu-btn{color:var(--crema);border-color:rgba(250,246,240,.45);background:rgba(31,42,38,.2)}
html.p-snap .cab-portada:not(.is-solida) .cab-menu-btn:hover{border-color:var(--crema)}
/* 1.40.0 (clienteb, I11): sobre el vídeo ya está el «Empieza tu plan» grande: el de la cabecera sale con la hoja (sin mover nada). */
html.p-snap .cab-portada .cab-cta{transition:opacity .25s,visibility .25s}
html.p-snap .cab-portada:not(.is-solida) .cab-cta{opacity:0;visibility:hidden;pointer-events:none}
html.p-snap .cab-portada:not(.is-solida) .cab-in>:focus-visible,html.p-snap .cab-portada:not(.is-solida) .nav :focus-visible,html.p-snap .cab-portada:not(.is-solida) .cab-menu-btn:focus-visible{outline-color:var(--crema)}

/* ---------- Hero ---------- */
.portada{position:relative}
.p-hero{position:sticky;top:0;z-index:0;isolation:isolate;height:100vh;height:100svh;min-height:min(520px,100vh);min-height:min(520px,100svh);overflow:hidden;background:var(--carbon);color:var(--crema)}
.p-hero-fondo{position:absolute;inset:0;z-index:-2;transform:scale(calc(1 - .06 * var(--p-lejos,0)));transform-origin:50% 40%}
/* 1.40.0 (#2145): el vídeo, debajo; la foto, encima, hasta que el vídeo se mueve de verdad
   (entonces se desvanece). Safari arranca solo los vídeos que están a la vista: este lo está
   (debajo de la foto, que no cuenta). Nunca un cuadro negro ni el botón de reproducir. */
.p-hero-media{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:var(--p-foco,50% 50%)}
.p-hero-video{pointer-events:none;background:transparent}
.p-hero-video::-webkit-media-controls,.p-hero-video::-webkit-media-controls-enclosure,.p-hero-video::-webkit-media-controls-panel,.p-hero-video::-webkit-media-controls-overlay-play-button,.p-hero-video::-webkit-media-controls-start-playback-button,.p-hero-video::-webkit-media-controls-play-button{display:none!important;-webkit-appearance:none;appearance:none;opacity:0!important}
.p-hero-foto{transition:opacity .6s ease}
.p-hero.is-video .p-hero-foto{opacity:0}
/* La capa oscura: igual sobre el vídeo y sobre la foto. Más oscura donde va el texto (al
   centro) y arriba (la cabecera) y abajo (el botón y la flecha). */
.p-hero-capa{position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(31,42,38,.5) 0,rgba(31,42,38,0) 150px),radial-gradient(130% 55% at 50% 47%,rgba(31,42,38,.5) 0%,rgba(31,42,38,.2) 70%,rgba(31,42,38,0) 100%),linear-gradient(to bottom,rgba(31,42,38,0) 62%,rgba(31,42,38,.6) 100%),rgba(31,42,38,.34)}
.p-hero.sin-fondo .p-hero-capa{background:radial-gradient(120% 80% at 80% 0%,rgba(47,93,80,.55),rgba(31,42,38,0) 60%)}
/* Con la hoja subiendo, todo el primer pantallazo se oscurece (portada.js pone la opacidad). */
.p-hero-sombra{position:absolute;inset:0;z-index:3;background:var(--carbon);opacity:0;pointer-events:none}
/* 1.40.0: el titular y su línea, al centro de la pantalla (un poco por encima: el centro
   que ve el ojo); en el móvil, el botón abajo, donde llega el pulgar. */
.p-hero-in{position:relative;height:100%;display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:calc(var(--cab-alto) + 52px);padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
.p-hero-tx{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;width:100%;padding-bottom:16px}
.p-titular{margin:0;font-size:clamp(36px,11.6vw,48px);line-height:1.04;letter-spacing:-.02em;color:var(--crema);max-width:9.5em;text-wrap:balance;text-shadow:0 2px 24px rgba(31,42,38,.35)}
.p-lead{margin:0;font-size:18px;line-height:1.45;color:#F0EAE1;max-width:21em;text-wrap:balance;text-shadow:0 1px 12px rgba(31,42,38,.45)}
.p-hero-btn{flex:none;width:100%;box-shadow:0 0 0 1.5px rgba(250,246,240,.3),0 8px 24px rgba(31,42,38,.3)}
.p-hero :focus-visible{outline-color:var(--crema)}
/* 1.0.30: la pausa, discreta. Un círculo pequeño y translúcido en la esquina de abajo, a la
   altura de la flecha y sin texto; el botón sigue midiendo 44 px para el dedo (el círculo
   que se ve es su ::before). */
.p-pausa{position:absolute;right:calc(var(--gutter) - 8px);bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:2;width:44px;height:44px;padding:0;border:0;border-radius:999px;background:none;color:var(--crema);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;opacity:.75;transition:opacity .2s}
.p-pausa::before{content:"";position:absolute;inset:8px;border-radius:999px;background:rgba(31,42,38,.3);box-shadow:inset 0 0 0 1px rgba(250,246,240,.3);transition:background-color .2s}
.p-pausa .ic{position:relative;width:12px;height:12px;stroke-width:2.6}
.p-pausa .ic-seguir{fill:currentColor;stroke-width:2}
.p-pausa:hover,.p-pausa:focus-visible{opacity:1}
.p-pausa:hover::before{background:rgba(31,42,38,.6)}
.p-pausa .ic-seguir,.p-hero.is-parado .p-pausa .ic-pausa{display:none}
.p-hero.is-parado .p-pausa .ic-seguir{display:inline}
/* 1.0.30: sobre la foto, el anillo del foco en crema (el verde de accesibilidad.css no se ve
   sobre lo oscuro); en la pausa, pegado al círculo que se ve. */
.p-hero :focus-visible,html.p-snap .cab-portada:not(.is-solida) .cab-in>:focus-visible,html.p-snap .cab-portada:not(.is-solida) .nav :focus-visible,html.p-snap .cab-portada:not(.is-solida) .cab-menu-btn:focus-visible{outline-color:var(--crema)!important}
.p-hero .p-pausa:focus-visible{outline-offset:-6px!important}
/* 1.0.30: en pantallas bajas (el móvil tumbado; las mismas 480 px que portada.js) el texto no
   cabe y el botón baja hasta abajo: la pausa, en la esquina de arriba, bajo la cabecera. */
@media (max-height:479px){.p-pausa{top:calc(var(--cab-alto) + 2px);bottom:auto}.p-hero-in{padding-top:calc(var(--cab-alto) + 16px)}}
/* La flecha de abajo: hay otra pantalla. */
.p-bajar{position:absolute;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:2;width:48px;height:48px;margin-left:-24px;display:flex;align-items:center;justify-content:center;border-radius:999px;color:var(--crema);text-decoration:none}
.p-bajar-ic{width:28px;height:28px;stroke-width:1.8;animation:p-bajar 2.4s ease-in-out 1.6s infinite}
.p-bajar:hover{color:#fff}
@keyframes p-bajar{0%,60%,100%{transform:none}30%{transform:translateY(6px)}}

/* 1.0.30: al volver de la hoja con el teclado, el foco vuelve a la portada (sin anillo: no es
   un control). Mientras dura el paso, nada se pulsa sin querer. */
.p-hero:focus{outline:none}
html.p-pasando .p-hero,html.p-pasando .p-hoja{pointer-events:none}

/* ---------- 1.40.0 (#2147): las dos pantallas ----------
   Con «p-dos» (la pone la cabecera antes de pintar; no en pantallas bajas) la foto o el vídeo
   se quedan fijos detrás y la hoja va encima: en la portada, justo debajo de la pantalla
   (--p-k: 1); en la hoja, en su sitio (--p-k: 0) y la página se desplaza por la hoja, que
   empieza arriba del todo: subiendo, el desplazamiento se para solo en su borde, sin que
   nada tire de él. portada.js mueve --p-k en el paso de una a otra. */
html.p-dos{--p-alto:100vh;--p-alto:100dvh;overscroll-behavior-y:none}
html.p-dos[data-texto]{--p-alto:calc(100vh / var(--tnp-z));--p-alto:calc(100dvh / var(--tnp-z))}
html.p-dos .p-hero{position:fixed;top:0;left:0;right:0;height:var(--p-alto);min-height:0}
html.p-dos .p-hoja{transform:translate3d(0,calc(var(--p-k,1) * var(--p-alto)),0)}
html.p-dos.p-en-portada .pie{transform:translate3d(0,var(--p-alto),0)}
html.p-dos.p-en-portada:not(.p-pasando) .p-hoja{box-shadow:none}
html.p-dos.p-en-hoja .p-hoja{--p-k:0}
html.p-dos.p-en-hoja:not(.p-pasando) .p-hoja{transform:none}
html.p-dos.p-en-hoja:not(.p-pasando) .p-hero{visibility:hidden}
html.p-pasando .p-hoja{will-change:transform}

/* ---------- La hoja ---------- */
.p-hoja{position:relative;z-index:1;background:var(--crema);border-radius:24px 24px 0 0;box-shadow:0 -16px 40px rgba(31,42,38,.28);outline:none}
.p-hoja-in{display:flex;flex-direction:column;gap:72px;padding-top:calc(var(--cab-alto) + 16px);padding-bottom:72px}
.p-sec{display:flex;flex-direction:column;gap:20px;min-width:0}
.p-meta{font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--ambar-oscuro)}
.p-t2{margin:0;font-size:32px;line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
.p-t3{margin:0;font:600 22px/1.2 var(--f-display);font-variation-settings:"opsz" 32;text-wrap:balance}
.p-carril{scrollbar-width:none;-webkit-overflow-scrolling:touch}
.p-carril::-webkit-scrollbar{display:none}
.p-sinfoto{display:block;background:var(--verde-suave)}
.p-enlace{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;font-size:15px;font-weight:600;color:var(--verde);text-decoration:none}
.p-enlace:hover{text-decoration:underline;text-underline-offset:3px}
.p-enlace .ic{width:16px;height:16px}

/* ---------- Un día cualquiera: el día (la comida, abierta) y la compra ---------- */
.p-dia-in{display:flex;flex-direction:column;gap:16px}
.p-tarjeta{background:var(--superficie);border-radius:20px;box-shadow:var(--sombra-reposo)}
.p-hoy{padding:16px 16px 6px}
.p-hoy-t{margin:0;padding-bottom:8px;font:600 20px/1.3 var(--f-display);font-variation-settings:"opsz" 32}
.p-filas{list-style:none;margin:0;padding:0}
.p-fila{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-top:1px solid var(--borde);color:var(--carbon);text-decoration:none}
.p-fila:hover .p-fila-n{color:var(--verde)}
.p-fila-img{flex:none;width:44px;height:44px;border-radius:12px;object-fit:cover}
.p-fila-tx{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.p-fila-n{font-size:16px;font-weight:500;line-height:1.3}
.p-fuerte{font-weight:600}
.p-fila-ir{flex:none;width:16px;height:16px;color:var(--gris)}

.p-comida{display:flex;flex-direction:column;gap:12px;padding:12px 0 14px;border-top:1px solid var(--borde)}
.p-comida-foto{position:relative;display:block;border-radius:14px;overflow:hidden}
.p-comida-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.p-insignia{position:absolute;left:10px;top:10px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;font-size:12px;font-weight:600;line-height:1.4}
.p-insignia.is-libre{background:var(--verde-suave);color:var(--verde)}
.p-insignia.is-plan{background:var(--carbon);color:var(--crema)}
.p-insignia .ic{width:12px;height:12px;stroke-width:2.2}
.p-comida-in{display:flex;flex-direction:column;gap:2px}
.p-comida-n{font:600 22px/1.25 var(--f-display);font-variation-settings:"opsz" 32;text-wrap:balance}
.p-botones{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.p-btn{flex:1 1 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 14px;border-radius:999px;border:1.5px solid var(--verde);font:600 15px/1 var(--f-texto);cursor:pointer;transition:background-color .15s,color .15s}
.p-btn .ic{width:16px;height:16px;stroke-width:2}
.p-btn-p{background:var(--verde);color:#fff}
.p-btn-p:hover{background:var(--verde-hover)}
.p-btn-s{background:#fff;color:var(--verde)}
.p-btn-s:hover{background:var(--verde-suave)}

.p-compra{display:flex;flex-direction:column;gap:10px;padding:16px}
.p-compra .p-hoy-t{padding-bottom:0}
.p-lista{display:flex;flex-direction:column;gap:12px}
.p-lista [hidden]{display:none}
.p-pasillo-t{margin:0;padding-bottom:2px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.p-pasillo ul{list-style:none;margin:0;padding:0}
.p-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0;border:0;border-bottom:1px solid var(--borde);background:none;color:var(--carbon);font-size:16px;line-height:1.35;text-align:left;cursor:pointer}
.p-caja{flex:none;display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;border:1.5px solid #8A948F;color:transparent;transition:background-color .15s,border-color .15s}
.p-caja .ic{width:14px;height:14px;stroke-width:3}
.p-item[aria-pressed="true"]{color:var(--gris);text-decoration:line-through}
.p-item[aria-pressed="true"] .p-caja{background:var(--verde);border-color:var(--verde);color:#fff}
.p-ver-compra{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:44px;padding:0;border:0;background:none;color:var(--verde);font:600 15px/1 var(--f-texto);cursor:pointer}
.p-ver-compra[hidden]{display:none}
.p-ver-compra .ic{width:16px;height:16px;transition:transform .2s}
.p-ver-compra[aria-expanded="true"] .ic{transform:rotate(180deg)}

/* ---------- Los días que no son cualquiera (1.40.0: tres, sin botones; la siguiente asoma) ---------- */
.p-esc-pista{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);overscroll-behavior-x:contain;margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 6px}
.p-esc-card{flex:0 0 86%;min-width:0;scroll-snap-align:start;display:flex;flex-direction:column;gap:14px;padding:18px 16px;border-radius:20px;background:var(--superficie);box-shadow:var(--sombra-reposo)}
/* Las tres del mismo alto; lo de dentro, centrado en su caja (sin huecos raros debajo). */
.p-esc-caja{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:12px;border-radius:14px;background:var(--crema)}
.p-sesion{margin:0;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:14px;line-height:1.4}
.p-sesion strong{font-weight:600}
.p-sesion span{color:var(--gris);font-variant-numeric:tabular-nums}
.p-tuppers{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.p-tupper{display:flex;flex-direction:column;gap:4px;height:100%;padding:6px;border-radius:12px;border:1.5px solid var(--borde);background:#fff;color:var(--carbon);text-decoration:none}
.p-tupper:hover{border-color:var(--verde)}
.p-tupper img,.p-tupper .p-sinfoto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.p-tupper-d{font-size:12px;font-weight:600;line-height:1.3}
.p-tupper-d,.p-tupper-w{overflow-wrap:normal;hyphens:manual}
.p-tupper-w{font-size:12px;line-height:1.3;color:var(--gris)}
.p-invitados{display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;align-content:center;gap:12px}
.p-invitados-foto img,.p-invitados-foto .p-sinfoto{display:block;width:64px;height:64px;border-radius:12px;object-fit:cover}
.p-invitados-tx{display:flex;flex-direction:column;min-width:0}
.p-invitados-n{font-size:15px;font-weight:600;line-height:1.3}
.p-invitados-p{font-size:14px;line-height:1.4;color:var(--gris)}
.p-cuantos{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid var(--borde)}
.p-cuantos-et{font-size:15px;font-weight:500}
.p-contador{display:flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:#fff;border:1.5px solid var(--borde)}
.p-contador button{width:44px;height:44px;border:0;border-radius:999px;background:transparent;color:var(--verde);font-size:20px;font-weight:600;cursor:pointer}
.p-contador button:hover{background:var(--verde-suave)}
.p-contador button[aria-disabled="true"]{color:#8A948F;cursor:default;background:transparent}
.p-contador output{min-width:24px;text-align:center;font-weight:600;font-variant-numeric:tabular-nums}
.p-sobras{list-style:none;margin:0;padding:0;display:flex;gap:6px;flex-wrap:wrap}
.p-sobras li{padding:4px 10px;border-radius:999px;background:#fff;border:1.5px solid var(--borde);font-size:13px;line-height:1.4}
.p-propone{margin:0;display:flex;align-items:center;gap:10px;font-size:14px;color:var(--gris)}
.p-abajo{width:18px;height:18px;color:var(--verde);transform:rotate(90deg)}
.p-fila-caja{min-height:60px;padding:8px;border:0;border-radius:12px;background:#fff}
.p-fila-caja .p-fila-img{width:44px;height:44px}
.p-puntos{display:flex;justify-content:center;gap:6px;margin-top:-8px}
.p-puntos span{display:block;width:6px;height:6px;border-radius:999px;background:rgba(47,93,80,.3);transition:width .2s,background-color .2s}
.p-puntos span.is-on{width:20px;background:var(--verde)}

/* ---------- Recetas para ti ---------- */
.p-cab-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.p-flechas{display:none;gap:8px;flex:none}
.p-flecha{width:44px;height:44px;border-radius:999px;border:1.5px solid var(--borde);background:#fff;color:var(--verde);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.p-flecha:hover{border-color:var(--verde)}
.p-rejilla{list-style:none;display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin:0 calc(-1 * var(--gutter));padding:2px var(--gutter) 8px}
.p-rejilla li{flex:none;display:flex;width:216px;scroll-snap-align:start}
.p-receta{display:flex;flex-direction:column;width:100%;border-radius:16px;background:#fff;box-shadow:var(--sombra-reposo);overflow:hidden;color:var(--carbon);text-decoration:none;transition:box-shadow .15s}
.p-receta:hover{box-shadow:var(--sombra-elevada)}
.p-receta:hover .p-receta-n{color:var(--verde)}
.p-receta-foto{position:relative;display:block}
.p-receta-foto img,.p-receta-foto .p-sinfoto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.p-receta-tx{display:flex;flex-direction:column;gap:2px;padding:12px 14px 16px}
.p-receta-n{font-size:16px;font-weight:600;line-height:1.35}
.p-recetario{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:16px;background:#fff;border:1.5px solid var(--verde);color:var(--carbon);text-decoration:none;transition:background-color .15s}
.p-recetario:hover{background:#F3F8F5;color:var(--carbon)}
.p-caras{flex:none;display:flex}
.p-caras img{width:40px;height:40px;border-radius:999px;object-fit:cover;border:2px solid #fff}
.p-caras img+img{margin-left:-14px}
@media (max-width:379px){.p-caras img:nth-child(3){display:none}}
.p-recetario-tx{flex:1 1 0;display:flex;flex-direction:column;min-width:0}
.p-recetario-tx strong{font-size:16px;font-weight:600;line-height:1.3}
.p-recetario>.ic{flex:none;color:var(--verde)}

/* ---------- Aval: una frase ---------- */
.p-aval{flex-direction:row;align-items:center;justify-content:center;gap:14px;text-align:left}
.p-escudo{flex:none}
.p-escudo-f{fill:var(--verde-suave);stroke:var(--verde)}
.p-escudo-v{stroke:var(--verde)}
.p-aval-tx{margin:0;font:600 24px/1.2 var(--f-display);font-variation-settings:"opsz" 32;text-wrap:balance;max-width:13em}

/* ---------- 1.40.0: herramientas gratis ---------- */
.p-herr{gap:12px}
.p-herr-lista{list-style:none;margin:0;padding:0;border-top:1px solid var(--borde)}
.p-herr-op{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 0;border-bottom:1px solid var(--borde);color:var(--carbon);text-decoration:none}
.p-herr-op:hover .p-herr-n{color:var(--verde)}
.p-herr-ic{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:var(--verde-suave);color:var(--verde)}
.p-herr-ic .ic{width:22px;height:22px}
.p-herr-n{flex:1 1 0;min-width:0;font-size:16px;font-weight:600;line-height:1.3}

/* ---------- Precio y lo que te llevas cada mes ---------- */
.p-precio-card{display:flex;flex-direction:column;gap:16px;padding:24px 20px;border-radius:20px;background:#fff;border:1.5px solid var(--verde);box-shadow:var(--sombra-elevada)}
.p-cifra{margin:0;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.p-cifra-n{font:600 80px/.9 var(--f-display);font-variation-settings:"opsz" 72;letter-spacing:-.03em;color:var(--verde);font-variant-numeric:tabular-nums}
.p-cifra-tx{font:600 24px/1.2 var(--f-display);font-variation-settings:"opsz" 32;color:var(--carbon)}
.p-despues{margin:0;padding-bottom:16px;border-bottom:1px solid var(--borde);color:var(--gris)}
.p-despues strong{color:var(--carbon);font-weight:600}
.p-llevas{margin:0 0 -6px;font-size:12px;font-weight:600;line-height:1.4;letter-spacing:.04em;text-transform:uppercase;color:var(--gris)}
.p-incluye{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.p-incluye li{display:flex;align-items:flex-start;gap:10px;line-height:1.45}
.p-incluye .ic{flex:none;width:18px;height:18px;margin-top:2px;color:var(--verde);stroke-width:2}
.p-nota{margin:-4px 0 0;font-size:14px;line-height:1.5;color:var(--gris);text-align:center}

/* ---------- Preguntas y cierre ---------- */
.p-faq{gap:12px}
.p-faq-lista{border-top:1px solid var(--borde)}
.p-faq details{border-bottom:1px solid var(--borde)}
.p-faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:6px 0;font-weight:500;line-height:1.4;cursor:pointer;list-style:none}
.p-faq summary::-webkit-details-marker{display:none}
.p-faq summary:hover{color:var(--verde)}
.p-giro{flex:none;color:var(--verde);transition:transform .2s}
.p-faq details[open] .p-giro{transform:rotate(180deg)}
.p-faq details p{margin:0 0 16px;color:var(--gris)}
.p-cierre{gap:16px;text-align:center}

/* ---------- «Cambia la comida» (en la hoja del plugin) ---------- */
.p-hoja-tx{margin:0 0 14px;color:var(--gris)}
.p-opciones{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.p-opcion{display:flex;align-items:center;gap:12px;width:100%;padding:10px;border:1.5px solid var(--borde);border-radius:16px;background:#fff;color:var(--carbon);font:inherit;text-align:left;cursor:pointer}
.p-opcion:hover{border-color:var(--verde)}
.p-opcion img,.p-opcion .p-sinfoto{flex:none;width:64px;height:64px;border-radius:12px;object-fit:cover}
.p-opcion-tx{flex:1 1 0;display:flex;flex-direction:column;gap:2px;min-width:0}
.p-opcion-n{font-size:16px;font-weight:600;line-height:1.3}
.p-opcion .p-insignia{position:static;align-self:flex-start;padding:1px 8px}
.p-opcion-ir{flex:none;font-size:14px;font-weight:600;color:var(--verde)}

/* ---------- Tableta y ordenador ---------- */
@media (min-width:768px){
  .p-rejilla,.p-esc-pista{margin-inline:-32px;padding-inline:32px;scroll-padding-inline:32px}
  .p-t2{font-size:42px}
  .p-esc-card{flex-basis:calc((100% - 24px) / 2.2)}
}
@media (min-width:900px){
  .p-hero{min-height:min(600px,100svh)}
  /* Todo al centro, como un grupo: el titular, la línea y el botón debajo. */
  .p-hero-capa{background:linear-gradient(to bottom,rgba(31,42,38,.45) 0,rgba(31,42,38,0) 170px),radial-gradient(60% 55% at 50% 50%,rgba(31,42,38,.5) 0%,rgba(31,42,38,.18) 75%,rgba(31,42,38,0) 100%),linear-gradient(to bottom,rgba(31,42,38,0) 70%,rgba(31,42,38,.45) 100%),rgba(31,42,38,.32)}
  .p-hero-in{justify-content:center;padding-top:var(--cab-alto);padding-bottom:calc(var(--cab-alto) - 8px)}
  .p-hero-tx{flex:none;gap:20px;padding-bottom:0}
  .p-titular{font-size:clamp(64px,6.4vw,84px);line-height:1.02;max-width:10em}
  .p-lead{font-size:20px;max-width:32em}
  .p-hero-btn{width:auto;min-width:280px;margin-top:36px}
  .p-pausa{right:24px}
  .p-hoja{border-radius:32px 32px 0 0}
  .p-hoja-in{gap:104px;padding-top:calc(var(--cab-alto) + 40px);padding-bottom:104px}
  .p-sec{gap:24px}
  /* Un día cualquiera: el día y la compra, lado a lado. */
  .p-dia-in{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:start}
  /* Las tres situaciones, a la vista. */
  .p-esc-pista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;overflow:visible;margin:0;padding:0}
  .p-esc-card{padding:22px 20px}
  .p-puntos{display:none}
  .p-flechas{display:flex}
  .p-rejilla li{width:256px}
  .p-aval-tx{font-size:32px}
  .p-herr-lista{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}
  .p-precio,.p-faq,.p-cierre{width:100%;max-width:640px;margin-inline:auto}
}

/* ---------- Texto grande (zoom en <body>): vh crece, se divide ---------- */
html[data-texto] .p-hero{height:calc(100vh / var(--tnp-z));height:calc(100svh / var(--tnp-z));min-height:calc(min(480px,100svh) / var(--tnp-z))}
@media (min-width:900px){html[data-texto] .p-hero{min-height:calc(min(560px,100svh) / var(--tnp-z))}}
html.p-dos[data-texto] .p-hero{height:var(--p-alto);min-height:0}
/* Con el texto más grande, el titular baja un punto para que quepa en pantallas pequeñas. */
@media (max-width:899px){html[data-texto] .p-titular{font-size:clamp(30px,10vw,46px)}}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html.p-snap{scroll-behavior:auto}
  .p-bajar-ic{animation:none}
  .p-hero-fondo{transform:none}
}
html[data-movimiento="reducido"] .p-bajar-ic{animation:none}
html[data-movimiento="reducido"] .p-hero-fondo{transform:none}
html[data-movimiento="reducido"] .p-hero-foto{transition:none}