/* Portada de oyematilde.com (MAT-150). Hoja propia y no `estilo.css`, que lleva las reglas de la
   pantalla de pedido (barras fijas, pestañas abajo en el móvil) y aquí estorbarían. Los colores son
   los mismos: `tests/portada.test.ts` compara cada token de aquí con el de `estilo.css`. */
:root{
  --fondo:#f2f0ea; --tarjeta:#fffdf8; --tinta:#101a24; --tinta2:#3a444e; --raya:#d9d3c6;
  --acento:#101a24; --sobre-acento:#f2f0ea; --ambar:#835e2a; --ambar-vivo:#c08a3e; --ambar-suave:#f7ecd8; --verde:#1c6b3f;
  --tipo:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root{ --fondo:#0e1520; --tarjeta:#16202c; --tinta:#e7eaee; --tinta2:#a9b2bd; --raya:#2a3543;
         --acento:#e7eaee; --sobre-acento:#0e1520; --ambar:#c08a3e; --ambar-vivo:#c08a3e; --ambar-suave:#2b2008; --verde:#5fd08a; }
}
*{box-sizing:border-box}
html{font-size:106.25%}
body{margin:0 auto; max-width:1120px; padding:0 16px calc(24px + env(safe-area-inset-bottom));
  background:var(--fondo); color:var(--tinta); font-family:var(--tipo); line-height:1.5; -webkit-text-size-adjust:100%}
a{color:var(--tinta); text-underline-offset:3px}
:where(a,button,input,textarea):focus-visible{outline:3px solid var(--acento); outline-offset:3px}
img{max-width:100%; height:auto; display:block}

.cabecera{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  padding:12px 0; border-bottom:1px solid var(--raya)}
.marca{display:inline-flex; align-items:center; gap:10px; min-height:48px; text-decoration:none;
  font-size:calc(22rem / 17); font-weight:700}
.signo{color:var(--tinta); flex:0 0 auto}
.cabecera nav{display:flex; align-items:center; gap:4px 16px; flex-wrap:wrap}
.cabecera nav a{display:inline-flex; align-items:center; min-height:48px}

.boton-principal,.boton-borde{display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  padding:10px 20px; border-radius:12px; font:inherit; font-weight:700; text-decoration:none; cursor:pointer}
.boton-principal{background:var(--acento); color:var(--sobre-acento); border:1px solid var(--acento)}
.boton-borde{background:var(--tarjeta); color:var(--tinta); border:1px solid var(--tinta2)}
.cabecera nav .boton-borde{padding:6px 16px}

h1{font-size:calc(34rem / 17); line-height:1.15; margin:0 0 16px; letter-spacing:0}
h2{font-size:calc(26rem / 17); line-height:1.2; margin:0 0 20px}
h3{font-size:calc(20rem / 17); line-height:1.25; margin:16px 0 6px; display:flex; align-items:center; gap:10px}
.entradilla{font-size:calc(19rem / 17); margin:0 0 24px}
.nota{color:var(--tinta2); font-size:calc(14rem / 17); line-height:1.43}

.apertura{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,380px); gap:56px; align-items:center; padding:56px 0 64px}
.apertura-texto{max-width:620px}
.antetitulo{display:flex; align-items:center; gap:14px; margin:0 0 18px; color:var(--ambar); font-weight:700;
  font-size:calc(15rem / 17); letter-spacing:.06em; text-transform:uppercase}
.acciones{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:12px}

/* La onda de la entrada (`estilo.css`), copiada: esta hoja no carga aquella. Quieta, con las alturas
   escalonadas, salvo que la persona acepte movimiento (bloque del final). */
.onda{display:inline-flex; align-items:center; gap:4px; height:32px; flex:0 0 auto}
.onda i{display:block; width:4px; height:32px; border-radius:2px; background:var(--tinta); transform-origin:center}
.onda i:nth-child(4),.onda i:nth-child(5),.onda i:nth-child(6){background:var(--ambar-vivo)}
.onda i:nth-child(1),.onda i:nth-child(9){transform:scaleY(.25)}
.onda i:nth-child(2),.onda i:nth-child(8){transform:scaleY(.4)}
.onda i:nth-child(3),.onda i:nth-child(7){transform:scaleY(.7)}
.onda i:nth-child(4),.onda i:nth-child(6){transform:scaleY(.85)}
.onda i:nth-child(5){transform:scaleY(1)}
.onda-mini{height:18px; gap:2px}
.onda-mini i{width:3px; height:18px; border-radius:1.5px}

/* El pedido de la apertura: HTML, no imagen, para que se vaya completando como en la app. */
.escena{margin:0; justify-self:end; width:100%; max-width:380px}
.escena figcaption{margin-top:10px; text-align:center; color:var(--tinta2); font-size:calc(14rem / 17)}
.movil{border:8px solid #0b1118; border-radius:34px; background:var(--tarjeta); padding:18px 18px 20px;
  box-shadow:0 30px 60px -30px rgba(16,26,36,.55), 0 0 0 1px var(--raya); font-size:calc(15rem / 17); line-height:1.35}
.movil p{margin:0}
.movil-titulo{text-align:center; font-weight:700; padding-bottom:12px; border-bottom:1px solid var(--raya)}
.escucha{display:flex; align-items:center; gap:10px; margin:14px 0 10px; font-weight:700}
.estados-escucha{display:grid}
.estados-escucha>span{grid-area:1 / 1}
.e-oigo{visibility:hidden}
.dictado{padding:10px 12px; border-radius:12px; background:var(--fondo); color:var(--tinta2); font-size:calc(14rem / 17)}
.cliente-pedido{margin:14px 0 6px !important; font-weight:700}
.lineas{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.lineas li{display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:10px; padding:9px 12px;
  border:1px solid var(--raya); border-left:4px solid var(--verde); border-radius:10px; background:var(--tarjeta)}
.lineas .codigo{grid-column:1; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:calc(12rem / 17); color:var(--tinta2)}
.lineas .articulo{grid-column:1; font-weight:600}
.lineas .cuenta{grid-column:1; color:var(--tinta2); font-size:calc(13rem / 17)}
.lineas strong{grid-column:2; grid-row:1 / 4; align-self:center; font-variant-numeric:tabular-nums}
.subtotal{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px !important;
  padding-top:12px; border-top:1px solid var(--raya); color:var(--tinta2); font-size:calc(14rem / 17)}
.subtotal strong{color:var(--tinta); font-size:calc(24rem / 17); font-variant-numeric:tabular-nums}
.confirmar-falso{margin-top:12px !important; text-align:center; padding:11px; border-radius:12px; font-weight:700;
  background:var(--acento); color:var(--sobre-acento)}

.rasgos{padding:8px 0 48px}
.rasgos ul,.ayudas ul{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px}
.rasgos li,.ayudas li{border-top:3px solid var(--ambar-vivo); padding-top:14px}
.rasgos strong,.ayudas strong{display:block; font-size:calc(21rem / 17); line-height:1.25; margin-bottom:6px}
.rasgos span,.ayudas span{color:var(--tinta2)}
.ayudas ul{row-gap:32px}
.ayudas .nota{margin:24px 0 0}

section.pasos,section.ayudas,section.detalles,section.contacto{padding:48px 0; border-top:1px solid var(--raya)}
.pasos ol{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px}
.pasos p{margin:0}
.marco{margin:0; padding:6px; border-radius:28px; background:#0b1118; max-width:260px;
  box-shadow:0 24px 48px -28px rgba(16,26,36,.6), 0 0 0 1px var(--raya)}
.marco img{border-radius:22px; width:100%}
.numero{display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 auto;
  border-radius:50%; background:var(--acento); color:var(--sobre-acento); font-size:calc(16rem / 17)}

/* CarPlay: una banda oscura en los dos modos, como la pantalla del coche. */
.coche{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:48px; align-items:center;
  margin:16px 0 48px; padding:48px; border-radius:28px; background:#101a24; color:#e7eaee; border:1px solid var(--raya)}
.coche h2{color:#e7eaee}
.coche p{margin:0 0 16px; font-size:calc(18rem / 17)}
.coche .nota{color:#a9b2bd; font-size:calc(15rem / 17)}
.coche a{color:#e7eaee}
.coche :focus-visible{outline-color:#e7eaee}
.boton-claro{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 20px;
  border-radius:12px; font-weight:700; text-decoration:none; background:#f2f0ea; color:#101a24 !important}
.coche-estados{list-style:none; margin:0; padding:0; display:grid; gap:12px}
.coche-estados li{display:flex; align-items:center; gap:12px; min-height:56px; padding:12px 18px; border-radius:16px;
  background:#16202c; border:1px solid #2a3543; color:#a9b2bd; font-weight:700; font-size:calc(18rem / 17)}
.coche-estados .onda i{background:#e7eaee}
.coche-estados .onda i:nth-child(4),.coche-estados .onda i:nth-child(5),.coche-estados .onda i:nth-child(6){background:#c08a3e}
.coche-estados .c4{color:#e7eaee; border-color:#c08a3e}

.detalles{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:48px; align-items:center}
.detalles ul{margin:0; padding-left:20px; max-width:620px}
.detalles li{margin-bottom:12px}
.detalles .marco{width:240px}

.contacto{max-width:620px}
.contacto form{display:grid; gap:8px}
.contacto label{font-weight:600; font-size:calc(15rem / 17)}
.contacto input,.contacto textarea{width:100%; font:inherit; padding:12px; min-height:48px; border-radius:12px;
  border:1px solid var(--tinta2); background:var(--tarjeta); color:var(--tinta)}
.contacto textarea{resize:vertical}
.contacto button{justify-self:start; margin-top:8px}
.estado{padding:12px 16px; border-left:4px solid var(--ambar-vivo); background:var(--ambar-suave); border-radius:8px}
.estado[hidden]{display:none}
/* La trampa: fuera de la vista y del foco, pero en el DOM para los bots que rellenan todo. */
.trampa{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

.pie{border-top:1px solid var(--raya); padding-top:20px; color:var(--tinta2); font-size:calc(15rem / 17)}
.pie p{margin:0 0 8px}
.pie a{display:inline-flex; align-items:center; min-height:48px; margin-right:16px; color:var(--tinta2)}

@media (max-width:799px){
  .apertura{grid-template-columns:1fr; gap:40px; padding:32px 0 40px}
  .escena{justify-self:center}
  .rasgos ul,.ayudas ul{grid-template-columns:1fr; gap:20px}
  .pasos ol{grid-template-columns:1fr; gap:40px}
  .pasos .marco{margin:0 auto; max-width:240px}
  .coche{grid-template-columns:1fr; gap:28px; padding:28px 20px}
  .detalles{grid-template-columns:1fr; gap:32px}
  .detalles .marco{margin:0 auto}
  h1{font-size:calc(28rem / 17)}
}
@media (max-width:479px){
  .acciones a{flex:1 1 100%}
  .cabecera nav a:not(.boton-borde){display:none}
  .movil{padding:14px 12px 16px; border-width:6px}
}

/* Todo el movimiento va aquí dentro: quien pide movimiento reducido ve la página quieta y completa. */
@media (prefers-reduced-motion: no-preference){
  .onda i{animation:onda 1200ms ease-in-out infinite alternate}
  .onda i:nth-child(1){animation-duration:1100ms; animation-delay:-300ms}
  .onda i:nth-child(2){animation-duration:1400ms; animation-delay:-900ms}
  .onda i:nth-child(3){animation-duration:950ms; animation-delay:-150ms}
  .onda i:nth-child(4){animation-duration:1300ms; animation-delay:-600ms}
  .onda i:nth-child(5){animation-duration:1000ms; animation-delay:-1100ms}
  .onda i:nth-child(6){animation-duration:1450ms; animation-delay:-450ms}
  .onda i:nth-child(7){animation-duration:900ms; animation-delay:-700ms}
  .onda i:nth-child(8){animation-duration:1250ms; animation-delay:-50ms}
  .onda i:nth-child(9){animation-duration:1500ms; animation-delay:-1000ms}
  @keyframes onda{from{transform:scaleY(.25)} to{transform:scaleY(1)}}

  /* Entrada de la apertura al cargar. */
  .apertura-texto>*{animation:sube 700ms cubic-bezier(.2,.7,.2,1) both}
  .apertura-texto>:nth-child(2){animation-delay:80ms}
  .apertura-texto>:nth-child(3){animation-delay:160ms}
  .apertura-texto>:nth-child(4){animation-delay:240ms}
  .apertura-texto>:nth-child(5){animation-delay:320ms}
  .escena{animation:sube 900ms 200ms cubic-bezier(.2,.7,.2,1) both}
  @keyframes sube{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}

  /* El pedido se completa en un ciclo de 14 s: dictado en tres trozos, «He entendido», las tres
     líneas una a una, el subtotal y el botón. Solo opacidad y desplazamiento: nada recoloca la página. */
  .t1,.t2,.t3,.cliente-pedido,.l1,.l2,.l3,.subtotal,.confirmar-falso,.e-oigo,.e-entendido{animation:14s linear infinite both}
  .e-oigo{visibility:visible; animation-name:oigo}
  .e-entendido{animation-name:p26}
  .t1{animation-name:p03} .t2{animation-name:p10} .t3{animation-name:p17}
  .cliente-pedido{animation-name:p29} .l1{animation-name:p33} .l2{animation-name:p40} .l3{animation-name:p47}
  .subtotal{animation-name:p55} .confirmar-falso{animation-name:p60}
  @keyframes oigo{0%{opacity:0} 2%,23%{opacity:1} 26%,100%{opacity:0}}
  @keyframes p03{0%,3%{opacity:0; transform:translateY(6px)} 7%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p10{0%,10%{opacity:0; transform:translateY(6px)} 14%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p17{0%,17%{opacity:0; transform:translateY(6px)} 21%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p26{0%,26%{opacity:0; transform:translateY(6px)} 29%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p29{0%,29%{opacity:0; transform:translateY(6px)} 32%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p33{0%,33%{opacity:0; transform:translateY(10px)} 37%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p40{0%,40%{opacity:0; transform:translateY(10px)} 44%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p47{0%,47%{opacity:0; transform:translateY(10px)} 51%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p55{0%,55%{opacity:0; transform:translateY(6px)} 59%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}
  @keyframes p60{0%,60%{opacity:0; transform:scale(.96)} 64%,90%{opacity:1; transform:none} 95%,100%{opacity:0}}

  /* La pantalla del coche: cada estado se enciende a su turno, 2 s cada uno. */
  .coche-estados li{animation:estado 8s ease-in-out infinite}
  .coche-estados .c2{animation-delay:-6s} .coche-estados .c3{animation-delay:-4s} .coche-estados .c4{animation-delay:-2s}
  .coche-estados .c4{color:#a9b2bd; border-color:#2a3543}
  @keyframes estado{
    0%,22%{background:#1f2c3b; border-color:#c08a3e; color:#e7eaee; transform:translateX(6px)}
    28%,100%{background:#16202c; border-color:#2a3543; color:#a9b2bd; transform:none}
  }

  /* Aparecer al hacer scroll, solo con CSS. Sin soporte la página sale entera, sin más. */
  @supports (animation-timeline: view()){
    .revela{animation:revela linear both; animation-timeline:view(); animation-range:entry 0% entry 70%}
    .pasos li:nth-child(2),.rasgos li:nth-child(2){animation-range:entry 10% entry 80%}
    .pasos li:nth-child(3),.rasgos li:nth-child(3){animation-range:entry 20% entry 90%}
    @keyframes revela{from{opacity:0; transform:translateY(32px)} to{opacity:1; transform:none}}
  }
}