/* ==========================================================================
   PideFit — home.css (portada, 29-oct-2026)
   Identidad de la app 2.0: fondo claro, negro y blanco, verde #06C167 de acento, botones negros, Onest.
   Héroe con dos iPhones dibujados en CSS (marco propio, sin imágenes de terceros) y pantallas reales de la 2.0.
   Todo se limita a .home-page; las páginas de menús, guías y legales no cambian. Las animaciones respetan
   prefers-reduced-motion y el contenido se ve completo aunque no cargue JavaScript.
   ========================================================================== */

.home-page { --h-verde: #06C167; --h-verde-texto: #03703C; --h-verde-suave: #E8F8EF; --h-gris: #F6F6F6;
  --h-sombra-tel: 0 50px 80px -30px rgba(0, 0, 0, .38), 0 24px 40px -24px rgba(0, 0, 0, .3);
  --h-sombra-tag: 0 1px 2px rgba(0, 0, 0, .06), 0 12px 28px -6px rgba(0, 0, 0, .16); }
.home-page main { overflow-x: clip; }

/* ---------- Piezas comunes ---------- */
.h-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--h-verde-texto);
  font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.h-kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--h-verde); }
.h-section { padding: clamp(64px, 8vw, 112px) 0; }
.h-section--gris { background: var(--h-gris); }
.h-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 64px); text-align: center; }
.h-head--izq { margin: 0; text-align: left; }
.h-head h2, .h-feature h2, .h-precio h2, .h-close h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.4rem); letter-spacing: -0.035em; line-height: 1.04; }
.h-head__lead { margin-top: 18px; color: var(--muted); font-size: clamp(1.05rem, .98rem + .35vw, 1.25rem); line-height: 1.55; }
.h-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 22px; color: var(--ink); font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--h-verde); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.h-link span { transition: transform .2s ease; }
.h-link:hover span { transform: translateX(3px); }
.h-nota { margin-top: 28px; color: var(--muted); font-size: 13.5px; line-height: 1.55; text-align: center; }

/* ---------- iPhone dibujado (marco titanio + bisel negro + pantalla real) ---------- */
.h-phone { --w: 250px; position: relative; width: var(--w); margin: 0; padding: calc(var(--w) * .022);
  border-radius: calc(var(--w) * .165);
  background: linear-gradient(150deg, #E9E9EC 0%, #B9B9BE 38%, #8E8E94 62%, #D4D4D8 100%);
  box-shadow: var(--h-sombra-tel), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(0, 0, 0, .12); }
.h-phone::before, .h-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #A7A7AD; }
.h-phone::before { left: -2px; top: 22%; height: 9%; box-shadow: 0 calc(var(--w) * .22) 0 #A7A7AD; }
.h-phone::after { right: -2px; top: 30%; height: 13%; }
.h-phone__bezel { padding: calc(var(--w) * .028); border-radius: calc(var(--w) * .145); background: #050607; }
.h-phone__bezel img { display: block; width: 100%; height: auto; border-radius: calc(var(--w) * .12); background: #F6F6F6; }

/* ---------- Héroe ---------- */
.h-hero { position: relative; padding: clamp(20px, 3.5vw, 48px) 0 clamp(40px, 5vw, 72px);
  background: radial-gradient(1200px 520px at 78% 18%, #EEF9F3 0%, rgba(238, 249, 243, 0) 70%), #FFFFFF; }
.h-hero__grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); column-gap: clamp(32px, 5vw, 72px); align-items: center; }
.h-hero__cta { padding-top: 28px; }

.h-pill { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 7px 14px 7px 10px;
  border: 1px solid var(--line); border-radius: var(--pill); background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
  color: var(--ink); font-size: 14px; font-weight: 600; line-height: 1.3; }
.h-pill__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; }
.h-pill__bars i { display: block; width: 4px; border-radius: 2px; }
.h-pill__bars i:nth-child(1) { height: 70%; background: var(--h-verde); }
.h-pill__bars i:nth-child(2) { height: 100%; background: #2D6FF6; }
.h-pill__bars i:nth-child(3) { height: 55%; background: #F59E0B; }
.h-pill__bars i:nth-child(4) { height: 82%; background: #8B5CF6; }

.h-hero__title { font-size: clamp(2.6rem, 1.6rem + 3.9vw, 4.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: .98; }
.h-hero__title em { position: relative; isolation: isolate; font-style: normal; white-space: nowrap; }
.h-hero__title em::after { content: ""; position: absolute; z-index: -1; left: -2%; right: -2%; bottom: -.04em; height: .3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cpath d='M4 16C60 6 140 4 296 12' fill='none' stroke='%2306C167' stroke-width='9' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.h-hero__title span { display: block; margin-top: .45em; max-width: 15em; color: #2B2B2B; font-size: .42em; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.h-hero__lead { margin-top: 20px; max-width: 32em; color: var(--muted); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.55; }
.h-hero__cta .h-link { margin-top: 18px; font-size: 15.5px; }
.h-hero .tienda__precio { max-width: 400px; font-size: 13.5px; }

/* Escenario: todo en % del ancho para que se vea igual en iPhone y en Mac (consultas de contenedor). */
.h-stage { position: relative; width: min(100%, 620px); justify-self: center; aspect-ratio: 1 / 1.02; container-type: inline-size; }
.h-stage__glow { position: absolute; inset: 8% 4% 4%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(6, 193, 103, .22), rgba(6, 193, 103, 0)); filter: blur(8px); }
.h-stage .h-phone { --w: 39cqw; position: absolute; }
.h-phone--atras { left: 1cqw; top: 11cqw; rotate: -7deg; }
.h-phone--frente { left: 60cqw; top: 1cqw; rotate: 5deg; z-index: 2; }

.h-tag { position: absolute; z-index: 3; display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px;
  padding: .62em .95em .68em; border-radius: 1em; background: #fff; box-shadow: var(--h-sombra-tag);
  color: var(--ink); font-size: clamp(11px, 2.45cqw, 16px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; white-space: nowrap; }
.h-tag small { color: var(--muted); font-size: .72em; font-weight: 600; letter-spacing: 0; }
.h-tag__ring { display: inline-grid; place-items: center; width: 2.6em; height: 2.6em; margin-top: 4px; border: 3px solid var(--h-verde);
  border-radius: 50%; font-size: .72em; font-weight: 800; line-height: 1; }
.h-tag--meta { left: 0; top: 33cqw; }
.h-tag--ideal { left: 49cqw; top: 55cqw; }
.h-tag--proteina { right: 0; top: 46cqw; }
.h-tag--kcal { right: 2cqw; top: 76cqw; }

.h-arrow { position: absolute; left: 38cqw; top: 26cqw; width: 22cqw; height: auto; overflow: visible; z-index: 1; }
.h-arrow path { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.h-arrow__nota { position: absolute; left: 37cqw; top: 8cqw; width: 26cqw; rotate: -4deg; text-align: center;
  color: var(--ink); font-size: clamp(10.5px, 2.5cqw, 16px); font-weight: 600; line-height: 1.2; }
.h-arrow__nota strong { font-weight: 800; background: linear-gradient(transparent 58%, rgba(6, 193, 103, .45) 58%); }

/* Cifras bajo el héroe */
.h-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(36px, 5vw, 64px); list-style: none; }
.h-stats li { padding: 22px 24px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255, 255, 255, .8); }
.h-stats strong { display: block; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.9rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.h-stats span { display: block; margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 1.4; }

/* ---------- Cómo funciona ---------- */
.h-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 28px); list-style: none; }
.h-step { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--h-gris); }
.h-step__copy { padding: 28px 28px 0; }
.h-step__num { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-bottom: 18px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 16px; font-weight: 800; }
.h-step h3 { font-size: 1.4rem; letter-spacing: -0.02em; }
.h-step p { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 1.55; }
.h-step__phone { position: relative; height: 340px; margin-top: auto; padding-top: 28px; box-sizing: content-box; overflow: hidden; }
.h-step__phone .h-phone { --w: 230px; margin: 0 auto; box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .3), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(0, 0, 0, .12); }
.h-tag--paso { left: 50%; top: 178px; translate: 18px 0; font-size: 14px; }

/* ---------- Funciones ---------- */
.h-feature { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.h-feature__phone { position: relative; display: grid; place-items: center; padding: 28px 0 40px; }
.h-phone--inclinado { --w: 270px; rotate: 4deg; }
.h-tag--f1 { left: calc(50% - 205px); top: 34%; font-size: 15px; }
.h-tag--f2 { left: calc(50% + 70px); top: 60%; font-size: 15px; }
.h-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: clamp(56px, 7vw, 96px); list-style: none; }
.h-card { padding: 26px 24px; border-radius: 24px; background: #fff; border: 1px solid var(--line); }
.h-card svg { width: 30px; height: 30px; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.h-card svg .h-lleno { fill: var(--h-verde); stroke: var(--h-verde); }
.h-card h3 { margin-top: 18px; font-size: 1.12rem; }
.h-card p { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }

/* ---------- Datos ---------- */
.h-datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.h-datos__items { display: grid; gap: 16px; }
.h-dato { padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: #fff; }
.h-dato h3 { margin-top: 14px; font-size: 1.2rem; }
.h-dato p { margin-top: 8px; color: var(--muted); font-size: 16px; }

/* ---------- Explorar en la web ---------- */
.h-tools { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.h-tool { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px 28px 30px; border-radius: 24px;
  border: 1px solid var(--line); background: #fff; color: var(--ink); text-decoration: none; transition: border-color .2s ease, translate .2s ease; }
.h-tool:hover { border-color: var(--ink); translate: 0 -2px; }
.h-tool__label { color: var(--h-verde-texto); font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.h-tool strong { margin-top: 10px; padding-right: 32px; font-size: 1.25rem; letter-spacing: -0.02em; line-height: 1.2; }
.h-tool > span:not(.h-tool__label) { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.h-tool b { position: absolute; right: 24px; top: 26px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: 17px; }

/* Bloque generado por paginas.py (@cadenas-populares): mismas clases de siempre, nuevo estilo. */
.home-cadenas { padding: clamp(64px, 8vw, 112px) 0 0; }
.home-cadenas + .h-section--gris { margin-top: clamp(64px, 8vw, 112px); }
.home-section-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 26px; }
.home-section-heading h2 { font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; }
.home-kicker { margin-bottom: 10px; color: var(--h-verde-texto); font-size: 13.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.home-text-link { color: var(--ink); font-weight: 700; text-decoration-color: var(--h-verde); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.home-cadenas__lista { margin-top: 0; list-style: none; }
.home-cadenas__lista .btn--light { border-color: var(--line); background: #fff; }
.home-cadenas__lista .btn--light:hover { border-color: var(--ink); }

/* ---------- Precio ---------- */
.h-precio { padding: clamp(32px, 5vw, 56px); border-radius: 32px; background: #fff; border: 1px solid var(--line); text-align: center; }
.h-precio__lista { display: grid; gap: 10px; max-width: 560px; margin: 26px auto 0; list-style: none; text-align: left; }
.h-precio__lista li { position: relative; padding-left: 32px; color: var(--ink); font-size: 16px; line-height: 1.5; }
.h-precio__lista li::before { content: ""; position: absolute; left: 0; top: .12em; width: 22px; height: 22px; border-radius: 50%;
  background: var(--h-verde) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m6 10.5 2.6 2.6L14 7.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 20px no-repeat; }
.h-precio .h-nota { margin-top: 20px; }

/* ---------- FAQ ---------- */
.home-page .faq details { border-color: var(--line); border-radius: 18px; }
.home-page .faq details[open] { border-color: #CFCFCF; }
.home-page .faq summary { padding: 22px 56px 22px 24px; font-size: 17.5px; letter-spacing: -0.01em; }
.home-page .faq details > div { padding: 0 24px 22px; }

/* ---------- Cierre ---------- */
.h-close { padding: 0 0 clamp(72px, 9vw, 120px); }
.h-close__panel { display: flex; flex-direction: column; align-items: center; padding: clamp(44px, 7vw, 88px) clamp(20px, 5vw, 64px);
  border-radius: 36px; text-align: center;
  background: radial-gradient(600px 300px at 50% 0%, rgba(6, 193, 103, .2), rgba(6, 193, 103, 0) 70%), var(--h-gris); }
.h-close__bolsa { width: 84px; height: 84px; margin-bottom: 22px; border-radius: 22px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 14px 30px -10px rgba(0, 0, 0, .22); }
.h-close h2 { max-width: 14em; }
.h-close .tienda { margin-top: 30px; }

/* ---------- Encabezado y pie en la portada ---------- */
.home-page .nav { background: rgba(255, 255, 255, .82); }

/* ---------- Movimiento: entrada del héroe y aparición al hacer scroll ---------- */
@media (prefers-reduced-motion: no-preference) {
  .h-phone--atras { animation: h-entra-atras .9s cubic-bezier(.2, .8, .2, 1) both; }
  .h-phone--frente { animation: h-entra-frente .9s cubic-bezier(.2, .8, .2, 1) .08s both; }
  .h-tag { animation: h-aparece .5s ease-out both, h-flota 6s ease-in-out 1.2s infinite; }
  .h-tag--meta { animation-delay: .55s, 1.2s; }
  .h-tag--ideal { animation-delay: .7s, 2.4s; }
  .h-tag--proteina { animation-delay: .85s, 1.8s; }
  .h-tag--kcal { animation-delay: 1s, 3s; }
  .h-step .h-tag, .h-feature .h-tag { animation: h-flota 6s ease-in-out infinite; }
  .h-arrow__trazo { stroke-dasharray: 260; stroke-dashoffset: 260; animation: h-traza 1.1s ease-out .6s forwards; }
  .h-arrow__punta { opacity: 0; animation: h-aparece .25s ease-out 1.55s forwards; }
  .h-arrow__nota { animation: h-aparece .5s ease-out 1.2s both; }
  .js .h-reveal { opacity: 0; translate: 0 22px; transition: opacity .7s ease, translate .7s cubic-bezier(.2, .8, .2, 1); }
  .js .h-reveal.is-visible { opacity: 1; translate: 0 0; }
}
@keyframes h-entra-atras { from { opacity: 0; translate: -14px 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes h-entra-frente { from { translate: 14px 32px; } to { translate: 0 0; } }
@keyframes h-aparece { from { opacity: 0; scale: .92; } to { opacity: 1; scale: 1; } }
@keyframes h-flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes h-traza { to { stroke-dashoffset: 0; } }
.h-step .h-tag--paso { animation-name: h-flota-paso; }
@keyframes h-flota-paso { 0%, 100% { translate: 18px 0; } 50% { translate: 18px -6px; } }

/* ---------- Tableta ---------- */
@media (max-width: 1080px) {
  .h-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .h-hero__grid { display: flex; flex-direction: column; align-items: stretch; }
  .h-hero__copy { display: contents; }
  .h-hero__head { order: 1; padding-top: 8px; }
  .h-hero__cta { order: 2; }
  .h-stage { order: 3; align-self: center; }
  .h-stage { width: min(100%, 520px); margin-top: 28px; }
  .h-hero__cta { display: flex; flex-direction: column; align-items: flex-start; padding-top: 22px; }
  .h-hero__cta .h-link { margin-top: 14px; }
  .h-steps { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
  .h-step__phone { height: 300px; }
  .h-feature, .h-datos { grid-template-columns: minmax(0, 1fr); }
  .h-feature__copy, .h-head--izq { text-align: center; }
  .h-head--izq { margin: 0 auto; max-width: 640px; }
  .h-tools { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- iPhone ---------- */
@media (max-width: 560px) {
  .h-hero { padding-top: 18px; }
  .h-pill { margin-bottom: 16px; font-size: 13px; }
  .h-hero__title { font-size: clamp(2.35rem, 1.4rem + 5.2vw, 2.9rem); }
  .h-hero__title span { font-size: .5em; }
  .h-hero__lead { margin-top: 14px; font-size: 1rem; }
  .h-stage { margin-top: 18px; aspect-ratio: 1 / 1.04; }
  .h-section { padding: 64px 0; }
  .h-step__copy { padding: 24px 22px 0; }
  .h-step__phone { height: 270px; padding-top: 22px; }
  .h-step__phone .h-phone { --w: 210px; }
  .h-tag--paso { top: 142px; translate: 0 0; left: auto; right: 12px; font-size: 13px; }
  .h-step .h-tag--paso { animation-name: h-flota; }
  .h-phone--inclinado { --w: 220px; }
  .h-tag--f1 { left: 0; top: 30%; font-size: 13px; }
  .h-tag--f2 { left: auto; right: 0; top: 62%; font-size: 13px; }
  .h-cards { grid-template-columns: minmax(0, 1fr); }
  .h-close__panel { border-radius: 28px; }
  .h-stats { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .h-stats li { padding: 16px 18px; }
  .h-stats strong { font-size: 1.3rem; }
}
@media (max-width: 360px) {
  .h-hero__title { font-size: 2.1rem; }
  .h-step__phone .h-phone { --w: 190px; }
  .h-phone--inclinado { --w: 200px; }
  .h-tag--paso { right: 6px; }
}

/* Navegadores sin consultas de contenedor (iOS 15 o anterior): un solo teléfono recto, sin etiquetas ni flecha. */
@supports not (container-type: inline-size) {
  .h-stage { aspect-ratio: auto; }
  .h-stage .h-phone--atras, .h-stage .h-tag, .h-arrow, .h-arrow__nota { display: none; }
  .h-stage .h-phone--frente { --w: 240px; position: relative; left: auto; top: auto; margin: 0 auto; rotate: none; }
}