/* Página de inicio de Pliegue / Foldplay. Mismo diseño que la portada vieja de Ometz (estructura y animaciones de
   nachoz.app): blanco amplio, tipografía grande y apretada y una sección oscura con el carrusel. Acento: el amarillo
   de las fichas para rellenos y el verde del paño para texto. */
.lp {
  --lp-bg: #FFFFFF;
  --lp-fg: #111113;
  --lp-gris: #6E6E73;
  --lp-gris-2: #86868B;
  --lp-linea: #E5E5EA;
  --lp-suave: #F5F5F7;
  --lp-acento: #F5C542;
  --lp-acento-texto: #1D6A3F;
  --lp-oscuro: #111111;
  --lp-oscuro-2: #1C1C1E;
  --lp-oscuro-fg: #F5F5F7;
  --lp-fuente: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', Inter, 'Helvetica Neue', Arial, sans-serif;
  --lp-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
  background: var(--lp-bg);
  color: var(--lp-fg);
  font-family: var(--lp-fuente);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
.lp a { color: inherit; text-decoration: none; }
.lp h1, .lp h2, .lp h3 { margin: 0; font-family: var(--lp-fuente); text-wrap: balance; color: inherit; }
.lp p { margin: 0; }
.lp .mono { font-family: var(--lp-mono); }

/* Barra flotante */
.lp-nav {
  position: fixed; z-index: 50; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 14px); transform: translateX(-50%);
  display: flex; align-items: center; gap: 28px; padding: 8px 8px 8px 18px; border-radius: 999px;
  width: max-content; max-width: calc(100% - 24px);
  background: rgba(255, 255, 255, 0.55); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px);
  border: 1px solid rgba(0, 0, 0, 0.06); transition: background .25s, box-shadow .25s;
}
.lp-nav.solida { background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); }
.lp-marca { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; }
.lp-links { display: flex; gap: 24px; font-size: 15px; color: var(--lp-gris); }
.lp-links a:hover { color: var(--lp-fg); }
.lp-cta { background: var(--lp-fg); color: #fff !important; font-weight: 600; font-size: 14px; padding: 9px 16px; border-radius: 999px; }
@media (max-width: 720px) {
  .lp-links { display: none; }
  .lp-nav { gap: 16px; }
}

/* Portada */
.lp-hero {
  position: relative; text-align: center; padding: calc(env(safe-area-inset-top, 0px) + 120px) 16px 0;
  display: grid; justify-items: center; gap: 22px;
  background:
    radial-gradient(55% 45% at 50% 0%, #DCEFE2 0%, rgba(220, 239, 226, 0) 70%),
    radial-gradient(40% 40% at 0% 0%, #F2F1EA 0%, rgba(242, 241, 234, 0) 70%),
    radial-gradient(40% 40% at 100% 0%, #F2F1EA 0%, rgba(242, 241, 234, 0) 70%),
    var(--lp-bg);
}
.lp-hero h1 { font-size: clamp(40px, 7vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.lp-hero > p { max-width: 34em; font-size: clamp(17px, 2vw, 20px); line-height: 1.45; color: #333336; }
.lp-acciones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.lp-boton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--lp-fg); color: #fff !important; font-weight: 600; font-size: 16px; transition: transform .15s;
}
.lp-boton:hover { transform: translateY(-1px); }
.lp-boton.claro { background: rgba(255, 255, 255, .7); color: var(--lp-fg) !important; border: 1px solid rgba(0, 0, 0, .1); }
.lp-boton:focus-visible, .lp-cta:focus-visible, .lp a:focus-visible, .lp button:focus-visible, .lp summary:focus-visible {
  outline: 2px solid var(--lp-acento-texto); outline-offset: 3px;
}

/* Secciones */
.lp-seccion { max-width: 1080px; margin: 0 auto; padding: 120px 20px; display: grid; gap: 18px; }
.lp-seccion h2 { font-size: clamp(34px, 5.4vw, 60px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.04; }
.lp-centro { justify-items: center; text-align: center; }
.lp-bajada { font-size: 19px; color: var(--lp-gris); max-width: 40em; line-height: 1.45; }
.lp-eyebrow { font-size: 15px; font-weight: 600; color: var(--lp-acento-texto); }
.lp-eyebrow.gris { color: var(--lp-gris-2); }
.lp-nota { font-size: 13px; color: var(--lp-gris-2); }

.lp-seccion .lp-declaracion { font-size: clamp(34px, 5.6vw, 64px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; max-width: 15em; }

/* Función con teléfono */
.lp-funcion { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 48px; max-width: 1280px; }
.lp-funcion.invertida { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.lp-funcion-texto { display: grid; gap: 18px; align-content: center; }
.lp-funcion-texto > p { font-size: 19px; line-height: 1.55; color: var(--lp-gris); max-width: 30em; }
.lp-funcion-visual { display: grid; place-items: center; min-height: 760px; }
.lp-funcion-visual .disp { --ancho: clamp(300px, 27vw, 470px); }
.lp-funcion.invertida .lp-funcion-visual { order: -1; }
.lp-ticks { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; }
.lp-ticks li { display: flex; gap: 12px; font-size: 16px; }
.lp-ticks li::before { content: '✓'; color: var(--lp-acento-texto); font-weight: 700; }
@media (max-width: 860px) {
  .lp-funcion, .lp-funcion.invertida { grid-template-columns: 1fr; }
  .lp-funcion.invertida .lp-funcion-visual { order: 0; }
  .lp-funcion-visual { min-height: 0; }
}

/* Sección oscura con carrusel */
.lp-oscuro { background: var(--lp-oscuro); color: var(--lp-oscuro-fg); padding: 120px 0; }
.lp-oscuro-cab { text-align: center; display: grid; gap: 18px; justify-items: center; padding: 0 20px; }
.lp-oscuro h2 { font-size: clamp(36px, 6vw, 72px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.lp-oscuro-cab p { color: #A1A1A6; font-size: 19px; max-width: 34em; }
.lp-oscuro .lp-eyebrow { color: var(--lp-acento); }
.carrusel-envoltura { position: relative; margin-top: 64px; }
.carrusel {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 max(20px, calc(50% - 540px)) 8px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.carrusel::-webkit-scrollbar { display: none; }
.cc {
  flex: 0 0 min(400px, 84vw); scroll-snap-align: center; background: var(--lp-oscuro-2); border-radius: 28px;
  padding: 36px 24px 32px; display: grid; justify-items: center; gap: 22px; text-align: center;
}
.cc h3 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; }
.cc p { color: #A1A1A6; font-size: 16px; line-height: 1.5; max-width: 22em; }
.flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(17, 17, 17, .8); color: #fff; border: 1px solid rgba(255, 255, 255, .2); font-size: 28px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.flecha.prev { left: 20px; }
.flecha.sig { right: 20px; }
@media (max-width: 640px) { .flecha { display: none; } }

/* Teléfono: marco PNG encima; la pantalla se ubica con las proporciones que imprime scripts/marco_iphone.py. */
.disp {
  --ancho: 270px;
  position: relative; width: var(--ancho); max-width: 100%; aspect-ratio: 1312 / 2710; flex-shrink: 0;
  filter: drop-shadow(0 28px 36px rgba(0, 0, 0, .22)) drop-shadow(0 6px 10px rgba(0, 0, 0, .12));
  font-size: calc(var(--ancho) * .05);
}
.disp.inclinado { transform: rotate(5deg); }
.disp.inclinado-izq { transform: rotate(-5deg); }
.disp-pantalla {
  position: absolute; left: 4.04%; top: 1.624%; width: 91.921%; height: 96.753%;
  border-radius: calc(var(--ancho) * .91921 * .1393); overflow: hidden; background: #0b0c0f; text-align: left;
  display: flex; flex-direction: column;
}
.disp-marco { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; }
.tel-contenido { flex: 1; min-height: 0; position: relative; }
/* Capturas y videos reales dentro del teléfono */
.tel-media { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: #0b0c0f; }

/* Principios y sumate */
.lp-principios, .lp-sumate { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 36px; width: 100%; text-align: left; }
.lp-principios > div, .lp-sumate > div { background: var(--lp-suave); border-radius: 24px; padding: 28px; display: grid; gap: 10px; align-content: start; }
.lp-principios h3, .lp-sumate h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.lp-principios p, .lp-sumate p { color: var(--lp-gris); line-height: 1.5; }


/* Final */
.lp-final {
  text-align: center; display: grid; justify-items: center; gap: 20px; padding: 120px 20px;
  background: radial-gradient(45% 55% at 50% 62%, #DCEFE2 0%, rgba(220, 239, 226, 0) 100%), var(--lp-bg);
}
.lp-final h2 { font-size: clamp(36px, 6vw, 68px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; }
.lp-final p { font-size: 19px; color: var(--lp-gris); max-width: 30em; }

/* Preguntas */
.lp-faq { max-width: 820px; }
.faq { margin-top: 24px; border-top: 1px solid var(--lp-linea); }
.faq details { border-bottom: 1px solid var(--lp-linea); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 22px 0; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-weight: 400; font-size: 24px; line-height: 1; color: var(--lp-gris); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; color: var(--lp-gris); font-size: 17px; line-height: 1.6; max-width: 40em; }

.lp-pie { max-width: 1080px; margin: 0 auto; padding: 32px 20px 48px; display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--lp-gris); border-top: 1px solid var(--lp-linea); }
.lp-pie a:hover { color: var(--lp-fg); }

/* Ícono */
html:has(.lp), html:has(.lp) body { background: #fff; color-scheme: light; }
.lp-icono {
  width: 176px; height: 176px; border-radius: 22%; display: grid; place-items: center; color: var(--lp-fg);
  background: var(--lp-acento); box-shadow: 0 16px 34px -10px rgba(29, 74, 47, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.lp-icono svg { width: 62%; height: 62%; }
@media (max-width: 640px) { .lp-icono { width: 128px; height: 128px; } }
.lp-icono.chico { width: 30px; height: 30px; border-radius: 9px; box-shadow: none; }
.lp-final .lp-icono { width: 128px; height: 128px; }
.lp-icono.chico svg { width: 66%; height: 66%; }
.lp-boton.lima { background: var(--lp-acento); color: var(--lp-fg) !important; }
.lp-pronto { font-size: 14px; color: var(--lp-gris); }
.lp-pronto a { color: var(--lp-fg); font-weight: 600; text-decoration: none; }
.lp-pronto a:hover { opacity: 0.7; }

/* Foto de portada, como en nachoz.app: de lado a lado de la pantalla (en el celular 250 % del ancho, centrada y
   recortada). El fondo de la foto es gris muy claro: los bordes se funden con el blanco. */
.lp-hero { overflow: hidden; }
.lp-hero-foto { width: 100vw; margin: -24px calc(50% - 50vw) 0; overflow: hidden; }
.lp-hero-foto img { display: block; width: 100%; height: auto;
  mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%),
    linear-gradient(180deg, transparent 0, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in; }
@media (max-width: 640px) {
  .lp-hero-foto { margin-top: 0; }  /* el margen lateral negativo de arriba sigue: va de borde a borde */
  .lp-hero-foto img { width: 250%; max-width: none; margin-left: -75%; }
}

/* Cómo empezar: tres pasos en orden */
.lp-pasos { list-style: none; padding: 0; margin: 36px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; width: 100%; text-align: left; counter-reset: paso; }
.lp-pasos li { background: var(--lp-suave); border-radius: 24px; padding: 28px; display: grid; gap: 10px; align-content: start; counter-increment: paso; }
.lp-pasos li::before { content: counter(paso); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-acento); color: var(--lp-fg); font-weight: 700; }
.lp-pasos h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.lp-pasos p { color: var(--lp-gris); line-height: 1.5; }
.lp-enlace { color: var(--lp-acento-texto) !important; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }
.lp-pie nav { display: flex; gap: 20px; flex-wrap: wrap; }

/* Animaciones, las mismas de nachoz.app (curva, duraciones, demoras y recorridos). Sin JS o con movimiento reducido,
   todo se ve quieto y completo. */
@keyframes rise { 0% { opacity: 0; transform: translateY(24px); } 100% { opacity: 1; transform: none; } }
@keyframes word-rise { 0% { opacity: 0; filter: blur(6px); transform: translateY(.4em); } 100% { opacity: 1; filter: blur(0); transform: none; } }
@keyframes hero-image-rise {
  0% { opacity: 0; transform: perspective(1200px) translateY(70vh) rotateX(45deg); }
  100% { opacity: 1; transform: perspective(1200px) translateY(0) rotateX(0); }
}
@keyframes track-image-turn {
  0% { opacity: 0; transform: perspective(1400px) rotateY(45deg) translate(6%); }
  100% { opacity: 1; transform: perspective(1400px) rotateY(0) translate(0); }
}
@keyframes discover-image-turn {
  0% { opacity: 0; transform: perspective(1400px) rotateY(-45deg) translate(-6%); }
  100% { opacity: 1; transform: perspective(1400px) rotateY(0) translate(0); }
}
@keyframes overview-to-ink { 0% { color: var(--lp-gris-2); } 100% { color: var(--lp-fg); } }
@keyframes discover-center-settle { 0% { opacity: 0; transform: scale(1.2); } 100% { opacity: 1; transform: scale(1); } }
@keyframes discover-slide-left { 0% { opacity: 0; transform: translate(62%) scale(.88); } 100% { opacity: 1; transform: translate(0) scale(1); } }
@keyframes discover-slide-right { 0% { opacity: 0; transform: translate(-62%) scale(.88); } 100% { opacity: 1; transform: translate(0) scale(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* Portada: al cargar */
  .animate-rise { animation: rise .9s cubic-bezier(.22, 1, .36, 1) both; }
  .hero-word { display: inline-block; animation: word-rise .8s cubic-bezier(.22, 1, .36, 1) both; animation-delay: var(--word-delay, 0s); }
  .hero-image-rise { transform-origin: bottom; will-change: transform, opacity; animation: hero-image-rise 1.2s cubic-bezier(.22, 1, .36, 1) .2s both; }

}

/* Lo que se anima al entrar en pantalla: sólo si hay JS para disparar la animación (si no, queda visible y quieto) */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  /* Bloques que aparecen al entrar en pantalla (la clase is-visible la pone el JS) */
  .fade-in-section { opacity: 0; transform: translateY(28px); will-change: opacity, transform;
    transition: opacity .8s cubic-bezier(.22, 1, .36, 1), transform .8s cubic-bezier(.22, 1, .36, 1); }
  .fade-in-section.is-visible { opacity: 1; transform: none; }

  /* Fotos de las secciones: giran desde su costado al aparecer */
  [data-gira] { opacity: 0; }
  [data-gira="der"].is-visible { transform-origin: 100% 50%; animation: track-image-turn 1.2s cubic-bezier(.22, 1, .36, 1) both; }
  [data-gira="izq"].is-visible { transform-origin: 0 50%; animation: discover-image-turn 1.2s cubic-bezier(.22, 1, .36, 1) both; }

  /* Tres teléfonos: el del medio se asienta y los de los costados salen de atrás */
  .discover-stage .tel-centro, .discover-stage .tel-izq, .discover-stage .tel-der { opacity: 0; will-change: transform, opacity; }
  .discover-stage .tel-centro { transform: scale(1.2); }
  .discover-stage .tel-izq { transform: translate(62%) scale(.88); }
  .discover-stage .tel-der { transform: translate(-62%) scale(.88); }
  .discover-stage.is-revealed .tel-centro { animation: discover-center-settle .9s cubic-bezier(.22, 1, .36, 1) forwards; }
  .discover-stage.is-revealed .tel-izq { animation: discover-slide-left .95s cubic-bezier(.22, 1, .36, 1) .22s forwards; }
  .discover-stage.is-revealed .tel-der { animation: discover-slide-right .95s cubic-bezier(.22, 1, .36, 1) .22s forwards; }
}

/* Frase grande: cada palabra pasa de gris a negro mientras la frase cruza la pantalla (atado al scroll) */
.overview-reveal { color: var(--lp-gris-2); view-timeline-name: --frase; view-timeline-axis: block; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .overview-word { color: var(--lp-gris-2); animation: overview-to-ink linear both; animation-timeline: --frase;
      animation-range: cover var(--word-start) cover var(--word-end); }
  }
}
@supports not (animation-timeline: view()) { .overview-reveal { color: var(--lp-fg); } }
@media (prefers-reduced-motion: reduce) { .overview-reveal { color: var(--lp-fg); } }

/* Escena de tres teléfonos: alturas de nachoz.app (700 y 630 px; 540 y 486; 400 y 360) */
.discover-stage { display: flex; align-items: center; justify-content: center; margin-top: 64px; }
.discover-stage > div { flex-shrink: 0; }
.discover-stage .tel-izq, .discover-stage .tel-der { z-index: 1; margin: 0 -80px; }
.discover-stage .tel-centro { z-index: 2; }
.discover-stage .tel-izq .disp, .discover-stage .tel-der .disp { --ancho: calc(630px * 1312 / 2710); }
.discover-stage .tel-centro .disp { --ancho: calc(700px * 1312 / 2710); }
@media (max-width: 1024px) {
  .discover-stage .tel-izq, .discover-stage .tel-der { margin: 0 -64px; }
  .discover-stage .tel-izq .disp, .discover-stage .tel-der .disp { --ancho: calc(486px * 1312 / 2710); }
  .discover-stage .tel-centro .disp { --ancho: calc(540px * 1312 / 2710); }
}
@media (max-width: 640px) {
  .discover-stage .tel-izq, .discover-stage .tel-der { margin: 0 -48px; }
  .discover-stage .tel-izq .disp, .discover-stage .tel-der .disp { --ancho: calc(360px * 1312 / 2710); }
  .discover-stage .tel-centro .disp { --ancho: calc(400px * 1312 / 2710); }
}

/* Dónde está disponible: dos badges como los de las tiendas */
.lp-disponible { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 48px; }
.lp-badge {
  display: inline-flex; align-items: center; gap: 12px; min-height: 60px; padding: 10px 22px 10px 18px; border-radius: 14px;
  background: var(--lp-fg); color: #fff !important; line-height: 1.1; font-size: 21px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform .15s, box-shadow .15s;
}
.lp-badge:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.lp-badge svg { width: 30px; height: 30px; flex-shrink: 0; }
.lp-badge span { display: grid; }
.lp-badge small { font-size: 12px; font-weight: 500; letter-spacing: 0; opacity: .75; }
.lp-badge.claro { background: #fff; color: var(--lp-fg) !important; box-shadow: inset 0 0 0 1px var(--lp-linea), 0 6px 18px rgba(0, 0, 0, .06); }
.lp-badge.claro:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px #d0d0d6, 0 10px 24px rgba(0, 0, 0, .09); }
.lp-badge.claro small { color: var(--lp-acento-texto); opacity: 1; font-weight: 600; }
@media (max-width: 420px) {
  .lp-disponible { gap: 10px; }
  .lp-badge { min-height: 52px; padding: 8px 16px 8px 13px; gap: 9px; font-size: 18px; border-radius: 12px; }
  .lp-badge svg { width: 24px; height: 24px; }
  .lp-badge small { font-size: 11px; }
}

/* Lo propio de Pliegue */
.lp-icono { background: none; box-shadow: 0 16px 34px -10px rgba(29, 74, 47, .45); overflow: hidden; }
.lp-icono img { width: 100%; height: 100%; display: block; }
.lp-icono.chico { box-shadow: none; }
.lp-idioma { font-size: 14px; font-weight: 600; color: var(--lp-gris); }
.lp-idioma:hover { color: var(--lp-fg); }
/* Portada: el tráiler en una tarjeta de bordes redondeados (el fondo del video es oscuro, no se funde con el blanco) */
.lp-hero { padding-bottom: 40px; }
.lp-hero-video { width: min(1120px, calc(100vw - 32px)); margin-top: 18px; border-radius: 28px; overflow: hidden;
  background: #0d2417; aspect-ratio: 16 / 9; box-shadow: 0 40px 80px -30px rgba(13, 36, 23, .55); }
.lp-hero-video video, .lp-hero-video img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .lp-hero-video { border-radius: 18px; } }
/* Foto del Duo doblado como notebook en vez de un teléfono */
.lp-foto { width: 100%; border-radius: 28px; overflow: hidden; background: #0d2417; box-shadow: 0 30px 60px -28px rgba(13, 36, 23, .5); }
.lp-foto img { display: block; width: 100%; height: auto; }
.lp-funcion-visual:has(.lp-foto) { min-height: 0; }
.cc .disp { --ancho: 250px; }
.lp-pie { align-items: center; }