/* La portada de ormeu.com (4 nov 2026). Solo la portada: las demás páginas siguen con estilo.css.
   La estrategia y cada medida, en 06_diseño/portada_web_2026-11-04/ESTRATEGIA_PORTADA.md: «hecha para ti», un solo
   color de marca, Poppins en los títulos, el rosco como dibujo propio y capturas reales de la app. Se mueve al bajar
   sin un solo guion (la seguridad de la web no deja ninguno): con las animaciones de CSS ligadas al desplazamiento.
   Donde no las hay, o con «Reducir movimiento», todo se ve quieto y entero. */

@font-face { font-family: "Poppins"; src: url("letra/Poppins-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("letra/Poppins-Medium.ttf") format("truetype"); font-weight: 500; font-display: swap; }

:root {
  --fondo: #FFFFFF; --suave: #F3F5F8; --superficie: #FFFFFF; --tinta: #0E141C; --gris: #5B6275; --tenue: #9AA3B2;
  --marca: #0A4358; --sobre-marca: #FFFFFF; --bien: #15795A; --linea: #E3E6EC; --pista: #E9EDF2; --marcas: #C9D0DA;
  --sombra: 0 40px 80px -30px rgba(10, 40, 60, 0.35), 0 12px 30px -12px rgba(10, 40, 60, 0.18);
  --brillo: rgba(10, 67, 88, 0.10);
  --ancho: 1180px; --lado: max(20px, calc((100% - var(--ancho)) / 2));
  color-scheme: light;
}
/* De noche: los colores de la app de noche */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #070F15; --suave: #0D1820; --superficie: #111D26; --tinta: #EEF2F5; --gris: #98A5B2; --tenue: #5F6E7C;
    --marca: #86B2CC; --sobre-marca: #071219; --bien: #74BFA0; --linea: #1E2C37; --pista: #16232D; --marcas: #2B3C4A;
    --sombra: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --brillo: rgba(134, 178, 204, 0.16);
    color-scheme: dark;
  }
}
:root[data-theme="dark"], .tema-noche {
  --fondo: #070F15; --suave: #0D1820; --superficie: #111D26; --tinta: #EEF2F5; --gris: #98A5B2; --tenue: #5F6E7C;
  --marca: #86B2CC; --sobre-marca: #071219; --bien: #74BFA0; --linea: #1E2C37; --pista: #16232D; --marcas: #2B3C4A;
  --sombra: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --brillo: rgba(134, 178, 204, 0.16);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 18px/1.55 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
main > section, footer.abajo { background: var(--fondo); color: var(--tinta); }
a { color: var(--marca); }
h1, h2, h3 { font-family: Poppins, -apple-system, BlinkMacSystemFont, sans-serif; font-weight: 600; margin: 0; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.05; }
h2.grande { font-size: clamp(44px, 7.6vw, 104px); line-height: 0.98; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 6px; }
p { margin: 0 0 14px; text-wrap: pretty; }
.tenue { color: var(--tenue); }
.marca-color { color: var(--marca); }
.antetitulo { font-family: Poppins, sans-serif; font-weight: 500; font-size: 15px; letter-spacing: 0.02em; color: var(--marca); margin-bottom: 16px; }
.nota { color: var(--gris); font-size: 15px; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 3px; border-radius: 8px; }

/* Botones: 52 de alto (el dedo pide al menos 44) */
.boton { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; border-radius: 999px; background: var(--marca); color: var(--sobre-marca); font-family: Poppins, sans-serif; font-weight: 500; font-size: 17px; text-decoration: none; transition: transform .2s ease, filter .2s ease; }
.boton:hover { filter: brightness(1.1); transform: translateY(-1px); }
.boton.pequeno { min-height: 40px; padding: 0 18px; font-size: 15px; }
.enlace { font-family: Poppins, sans-serif; font-weight: 500; text-decoration: none; font-size: 17px; }

/* Cabecera: encima de la portada, sube con la página (una franja fija se come el móvil y se veía oscura sobre lo blanco) */
header.arriba { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; padding: 0 var(--lado); color: var(--tinta); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; font-family: Poppins, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.marca img { border-radius: 8px; display: block; }
header.arriba nav { display: flex; align-items: center; gap: 26px; font-size: 15px; }
header.arriba nav a:not(.boton) { color: var(--gris); text-decoration: none; }
header.arriba nav a:not(.boton):hover { color: var(--tinta); }
@media (max-width: 720px) { header.arriba nav a:not(.boton) { display: none; } }

/* Los iPhone: la captura de verdad dentro de un marco sobrio (derecho, sin huecos, sin logos: las normas de Apple) */
.telefono { position: relative; margin: 0; border-radius: 16.5% / 7.6%; padding: 2.4%; background: #050607; box-shadow: 0 0 0 1.5px #4A515B, 0 0 0 3px #16191E, var(--sombra); }
.telefono::before, .telefono::after { content: ""; position: absolute; width: 1.1%; border-radius: 2px; background: linear-gradient(90deg, #2A2F36, #4A515B); }
.telefono::before { left: -1.6%; top: 22%; height: 7%; }
.telefono::after { right: -1.6%; top: 27%; height: 11%; }
.telefono img { display: block; width: 100%; height: auto; aspect-ratio: 1206 / 2622; border-radius: 14.4% / 6.6%; }
.tema-noche .telefono { box-shadow: 0 0 0 1.5px #5A626D, 0 0 0 3px #22272E, 0 50px 120px -40px rgba(0, 0, 0, 0.9); }

/* 1 · La portada */
.portada { position: relative; padding: calc(64px + clamp(40px, 7vh, 88px)) 20px 0; text-align: center; overflow: hidden; }
.portada::before { content: ""; position: absolute; left: 50%; bottom: -20%; width: 140vw; height: 90%; transform: translateX(-50%); background: radial-gradient(closest-side, var(--brillo), transparent); pointer-events: none; }
.portada-texto { position: relative; max-width: 980px; margin: 0 auto; }
.portada h1 { font-size: clamp(56px, 9.6vw, 136px); line-height: 0.96; letter-spacing: -0.05em; margin-bottom: 28px; }
.entrada { font-size: clamp(19px, 1.9vw, 23px); line-height: 1.45; color: var(--gris); max-width: 640px; margin: 0 auto 32px; text-wrap: balance; }
.acciones { display: flex; gap: 14px 28px; align-items: center; justify-content: center; flex-wrap: wrap; }
/* los tres iPhone se funden con el fondo al final, en vez de cortarse en seco */
.trio { position: relative; display: flex; justify-content: center; align-items: flex-start; margin-top: clamp(48px, 7vh, 72px); height: clamp(420px, 44vw, 640px); -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); mask-image: linear-gradient(to bottom, #000 62%, transparent 100%); }
.trio .telefono { flex: none; }
.trio .centro { position: relative; z-index: 2; width: clamp(240px, 25vw, 350px); }
.trio .lado { width: clamp(200px, 21vw, 290px); margin-top: clamp(56px, 6vw, 96px); }
.trio .izq { margin-right: -1%; }
.trio .der { margin-left: -1%; }
@media (max-width: 720px) {
  .portada h1 { font-size: 56px; }
  .trio { height: 128vw; }
  .trio .centro { width: 66vw; }
  .trio .lado { width: 46vw; margin-top: 18vw; }
  .trio .izq { margin-right: -22vw; }
  .trio .der { margin-left: -22vw; }
}

/* 2 · El rosco */
.rosco { position: relative; }
.rosco .fijo { min-height: 100svh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 80px var(--lado); }
.rosco-texto p { font-size: clamp(19px, 1.8vw, 22px); color: var(--gris); max-width: 420px; margin-top: 24px; }
.rosco-pieza { position: relative; width: min(100%, 540px); justify-self: center; }
.rosco-dibujo { display: block; width: 100%; height: auto; overflow: visible; }
.rosco-dibujo .pista, .rosco-dibujo .cierre { fill: none; stroke-width: 14; }
.rosco-dibujo .pista { stroke: var(--pista); }
.rosco-dibujo .cierre { stroke: var(--marca); stroke-linecap: round; stroke-dasharray: 0 100; transform: rotate(-90deg); transform-origin: 300px 300px; }
.rosco-dibujo .esfera { fill: var(--superficie); stroke: var(--linea); stroke-width: 2; }
.rosco-dibujo .marcas line { stroke: var(--marcas); stroke-width: 3; stroke-linecap: round; }
.cuenta circle { fill: var(--superficie); stroke: var(--linea); stroke-width: 3; }
.cuenta { color: var(--marca); }
.cuenta path { fill: currentColor; }
/* Quieto: tres hechas y dos por hacer */
.cuenta.c1 circle, .cuenta.c2 circle, .cuenta.c3 circle { fill: var(--marca); stroke: var(--marca); }
.cuenta.c1, .cuenta.c2, .cuenta.c3 { color: var(--sobre-marca); }
.rosco-centro { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; }
/* las seis cifras, una encima de otra: se ve la que toca (contar con números animados no va a la par en Safari) */
.rosco-centro .cifras { display: grid; }
.rosco-centro .n { grid-area: 1 / 1; font-family: Poppins, sans-serif; font-weight: 600; font-size: clamp(64px, 9vw, 112px); line-height: 1; letter-spacing: -0.04em; opacity: 0; }
.rosco-centro .n2 { opacity: 1; }
.rosco-centro .pend { color: var(--gris); font-size: clamp(15px, 1.5vw, 19px); margin-top: 4px; }
.rosco-centro .hecho { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); font-family: Poppins, sans-serif; font-weight: 600; color: var(--bien); font-size: clamp(18px, 1.8vw, 22px); opacity: 0; }
@media (max-width: 860px) {
  .rosco .fijo { grid-template-columns: 1fr; text-align: center; gap: 24px; padding: 72px 20px; align-content: center; }
  .rosco-texto p { margin: 16px auto 0; }
  .rosco-pieza { width: min(84vw, 50svh); }
}

/* 3–6 · Cada parte: el texto y su iPhone, en zigzag en el ordenador; uno debajo de otro en el móvil */
.parte { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(40px, 6vw, 96px); padding: clamp(96px, 15vh, 168px) var(--lado); }
.parte .texto { max-width: 560px; }
.parte h2 { font-size: clamp(34px, 3.8vw, 54px); }
.parte .texto > p:not(.antetitulo):not(.nota) { font-size: clamp(19px, 1.8vw, 22px); color: var(--gris); margin-top: 24px; }
.parte .texto .nota { margin-top: 8px; }
.parte .telefono { width: clamp(260px, 27vw, 360px); justify-self: center; }
.parte.al-reves .texto { order: 2; }
@media (max-width: 860px) {
  .parte { grid-template-columns: 1fr; text-align: center; gap: 48px; padding: 96px 20px; }
  .parte .texto { margin: 0 auto; }
  .parte.al-reves .texto { order: 0; }
  .parte .telefono { width: min(78vw, 340px); }
}

/* 5 · La dosis: cuatro barras que bajan (menos a la izquierda, más a la derecha, D460); el tope, siempre lleno */
.escalera { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 22px; text-align: left; }
.escalera li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: baseline; }
.escalera .barra { grid-column: 1 / -1; display: block; height: 10px; border-radius: 5px; background: var(--pista); margin-bottom: 10px; overflow: hidden; }
.escalera .barra span { display: block; height: 100%; border-radius: 5px; background: var(--marca); transform-origin: left center; }
.escalera .e1 .barra span { width: 100%; }
.escalera .e2 .barra span { width: 66%; }
.escalera .e3 .barra span { width: 33%; }
.escalera .e4 .barra { background: transparent; border: 2px dashed var(--marcas); }
.escalera .e4 .barra span { width: 0; }
.escalera b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -0.01em; }
.escalera small { color: var(--gris); font-size: 15px; }
.escalera .hoy { grid-column: 1 / -1; justify-self: start; margin-top: 8px; font-style: normal; font-family: Poppins, sans-serif; font-weight: 500; font-size: 14px; color: var(--marca); border: 1px solid color-mix(in srgb, var(--marca) 45%, transparent); border-radius: 999px; padding: 3px 12px; }
@media (max-width: 860px) { .escalera { max-width: 420px; margin-left: auto; margin-right: auto; } }

/* 7 · La persona detrás */
.persona { padding: clamp(96px, 15vh, 168px) var(--lado); }
.persona .tres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 56px; }
.persona .tres > div { background: var(--suave); border-radius: 28px; padding: 30px 28px 26px; }
.persona .ico { width: 28px; height: 28px; color: var(--marca); margin-bottom: 20px; }
.persona .tres p { color: var(--gris); font-size: 17px; margin: 0; }
@media (max-width: 860px) { .persona .tres { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; } .persona .tres > div { padding: 24px 22px 22px; } }

/* 8 · Tus datos */
.datos { padding: clamp(48px, 8vh, 96px) var(--lado) clamp(96px, 15vh, 168px); }
.hechos { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.hechos li { border-top: 2px solid var(--marca); padding-top: 18px; display: grid; gap: 6px; }
.hechos b { font-family: Poppins, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; }
.hechos span { color: var(--gris); font-size: 16px; }
.pie-datos { margin-top: 40px; color: var(--gris); font-size: 15px; }
@media (max-width: 960px) { .hechos { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hechos { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; } }

/* 9 · Preguntas */
.preguntas { padding: 0 max(20px, calc((100% - 820px) / 2)) clamp(96px, 15vh, 168px); }
.preguntas h2 { font-size: clamp(32px, 4vw, 48px); margin-bottom: 24px; }
.lista details { border-top: 1px solid var(--linea); }
.lista details:last-child { border-bottom: 1px solid var(--linea); }
.lista summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; font-family: Poppins, sans-serif; font-weight: 500; font-size: 19px; }
.lista summary::-webkit-details-marker { display: none; }
.lista summary::after { content: "+"; font-size: 28px; line-height: 1; color: var(--marca); transition: transform .25s ease; }
.lista details[open] summary::after { transform: rotate(45deg); }
.lista details p { color: var(--gris); padding-bottom: 22px; margin: 0; max-width: 680px; }

/* 10 · Empezar */
.empezar { text-align: center; padding: clamp(96px, 16vh, 184px) 20px; position: relative; overflow: hidden; }
.empezar::before { content: ""; position: absolute; left: 50%; top: 10%; width: 900px; height: 700px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--brillo), transparent); pointer-events: none; }
.empezar > * { position: relative; }
.icono-app { border-radius: 22px; display: block; margin: 0 auto 36px; box-shadow: var(--sombra); }
.empezar p { color: var(--gris); font-size: clamp(18px, 1.8vw, 22px); max-width: 560px; margin: 24px auto 32px; }
.empezar .nota { font-size: 15px; margin-top: 24px; }

footer.abajo { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; padding: 28px var(--lado); border-top: 1px solid var(--linea); color: var(--gris); font-size: 14px; }
footer.abajo nav { display: flex; gap: 20px; flex-wrap: wrap; }
footer.abajo a { color: var(--gris); text-decoration: none; }
footer.abajo a:hover { color: var(--tinta); }

/* Las direcciones con noche: el fondo de detrás y una luz azul muy suave detrás de los iPhone de arriba */
.dir-noche body, .dir-dia body { background: #070F15; }
.tema-noche.portada::before { background: radial-gradient(closest-side, rgba(134, 178, 204, 0.16), transparent); }

/* ── El movimiento (sin guiones) ── */
@media (prefers-reduced-motion: no-preference) {
  /* al abrir: el titular y los iPhone suben despacio */
  .portada .portada-texto > * { animation: llega 1s cubic-bezier(.2, .7, .2, 1) both; }
  .portada .portada-texto > :nth-child(2) { animation-delay: .08s; }
  .portada .portada-texto > :nth-child(3) { animation-delay: .16s; }
  .portada .portada-texto > :nth-child(4) { animation-delay: .24s; }
  .trio .centro { animation: llega-tel 1.3s .25s cubic-bezier(.2, .7, .2, 1) both; }
  .trio .lado { animation: llega-tel 1.3s .45s cubic-bezier(.2, .7, .2, 1) both; }
  @keyframes llega { from { opacity: 0; transform: translateY(24px); } }
  @keyframes llega-tel { from { opacity: 0; transform: translateY(120px); } }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* cada parte entra subiendo un poco mientras aparece */
    .sube { animation: sube linear both; animation-timeline: view(); animation-range: entry 0% cover 26%; }
    @keyframes sube { from { opacity: 0; transform: translateY(72px); } }

    /* El rosco: la pantalla se queda quieta y las cuentas se encienden de una en una; la cifra, a la par */
    .rosco { height: 320svh; view-timeline: --rosco block; }
    .rosco .fijo { position: sticky; top: 0; height: 100svh; min-height: 0; }
    .cuenta circle { animation: enciende-c linear both; animation-timeline: --rosco; }
    .cuenta { animation: enciende-i linear both; animation-timeline: --rosco; }
    .cuenta.c1, .cuenta.c1 circle { animation-range: contain 13% contain 17%; }
    .cuenta.c2, .cuenta.c2 circle { animation-range: contain 29% contain 33%; }
    .cuenta.c3, .cuenta.c3 circle { animation-range: contain 45% contain 49%; }
    .cuenta.c4, .cuenta.c4 circle { animation-range: contain 61% contain 65%; }
    .cuenta.c5, .cuenta.c5 circle { animation-range: contain 77% contain 81%; }
    @keyframes enciende-c { from { fill: var(--superficie); stroke: var(--linea); } to { fill: var(--marca); stroke: var(--marca); } }
    @keyframes enciende-i { from { color: var(--marca); } to { color: var(--sobre-marca); } }
    /* cada cifra se ve solo en su tramo: cambia justo cuando su cuenta acaba de encenderse */
    .rosco-centro .n, .rosco-centro .n2 { opacity: 0; animation: ver linear none; animation-timeline: --rosco; }
    .rosco-centro .n5 { animation-fill-mode: backwards; animation-range: contain 0% contain 17%; }
    .rosco-centro .n4 { animation-range: contain 17% contain 33%; }
    .rosco-centro .n3 { animation-range: contain 33% contain 49%; }
    .rosco-centro .n2 { animation-range: contain 49% contain 65%; }
    .rosco-centro .n1 { animation-range: contain 65% contain 81%; }
    .rosco-centro .n0 { animation-range: contain 81% contain 88%; }
    @keyframes ver { from, to { opacity: 1; } }
    .rosco-centro .pend { animation: desaparece linear both; animation-timeline: --rosco; animation-range: contain 86% contain 88%; }
    @keyframes desaparece { to { opacity: 0; } }
    .rosco-dibujo .cierre { animation: cierra linear both; animation-timeline: --rosco; animation-range: contain 81% contain 90%; }
    @keyframes cierra { to { stroke-dasharray: 100 100; } }
    .rosco-centro .hecho { animation: aparece linear both; animation-timeline: --rosco; animation-range: contain 88% contain 93%; }
    @keyframes aparece { from { opacity: 0; transform: translateY(-30%) scale(.92); } to { opacity: 1; transform: translateY(-50%); } }

    /* La dosis: el tope, lleno desde el principio; las demás se llenan al llegar */
    .escalera { view-timeline: --dosis block; }
    .escalera .e2 .barra span, .escalera .e3 .barra span { animation: llena linear both; animation-timeline: --dosis; }
    .escalera .e2 .barra span { animation-range: entry 30% entry 100%; }
    .escalera .e3 .barra span { animation-range: entry 50% cover 50%; }
    @keyframes llena { from { transform: scaleX(0); } }
  }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }