/* Las fuentes se sirven desde el propio dominio y no desde Google Fonts: la página
   tiene que abrir rápido con datos móviles en la puerta de un restaurante, y una
   petición a un tercero es una ronda de red más y un punto de fallo ajeno. */
/* En woff2 y con solo los caracteres que el espanol necesita: 658 KB de TTF
   pasan a 70 KB. En la puerta de un restaurante, con datos moviles, esa es la
   diferencia entre que la pagina abra y que alguien cierre la pestana.

   El TTF queda detras como respaldo para el navegador que no entienda woff2, y
   solo lo pide si el primero falla. El eje de peso se conserva entero: si se
   fijara en un valor, los 400, 500, 600 y 700 se dibujarian todos iguales. */
@font-face{
  font-family:'Space Grotesk';
  src:url('fuentes/SpaceGrotesk-Variable.woff2') format('woff2-variations'),
      url('fuentes/SpaceGrotesk-Variable.ttf') format('truetype-variations');
  font-weight:300 700;font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('fuentes/IBMPlexSans-Variable.woff2') format('woff2-variations'),
      url('fuentes/IBMPlexSans-Variable.ttf') format('truetype-variations');
  font-weight:100 700;font-display:swap;
}

/* Paleta de Restonov: cocina comercial — mesón de acero, pizarra, ticket de comanda.
   `flame` se reserva EXCLUSIVAMENTE para acción; nunca decora.

   La misma paleta y las mismas dos tipografías que usa el software (ver
   app/lib/core/app_theme.dart). Quien entra desde acá a la aplicación tiene que
   sentir que sigue en el mismo lugar. */
:root{
  /* El naranja sale del archivo del logo, no al revés. Ver marca/LEEME.md. */
  --acero:#F7F7F5; --carbon:#2B2724; --llama:#FB4C13; --hierba:#3F7A5A;
  --brasa:#D98E2B; --ceniza:#E4E1DA; --papel:#FBFAF8;
  --tinta-suave:rgba(43,39,36,.66);

  /* ESCALA DE TEXTO — seis pasos y cuatro titulares fluidos. Nada de tipografía
     se escribe fuera de acá.

     Antes había veinte tamaños sueltos: 15 y 15.5, 17 y 17.5, 12.5 y 13, 14 y 14.5.
     Ninguno de esos pares se distingue mirando un renglón, pero sumados a lo largo
     de una página larga hacen que nada termine de alinearse con nada. */
  --t-etiqueta:13px;   /* mayúsculas espaciadas: entradillas, pie del ticket */
  --t-menor:15px;      /* barra superior, letra chica, pie de página */
  --t-lista:16px;      /* renglones de lista y textos de apoyo */
  --t-cuerpo:17px;     /* cuerpo, botones, títulos de tarjeta */
  --t-guia:19px;       /* bajada del titular, pasos, preguntas */
  --t-cifra:46px;      /* el total del ticket: la cifra que la pagina viene a prometer */
  /* La distancia entre el titular y el cuerpo era corta —62 contra 17— y por eso
     todo se leia igual de importante. Una pagina que se ve compuesta tiene
     contraste violento entre lo enorme y lo chico. */
  --t-titulo:clamp(42px,6.4vw,82px);
  --t-seccion:clamp(30px,4.4vw,52px);
  --t-cierre:clamp(32px,4.6vw,58px);
  --t-monto:clamp(32px,4vw,42px);

  /* ESPACIADO — todo cae en la rejilla de 4. Los valores impares que había (5, 7,
     9, 11, 13, 22, 26, 30, 34) no respondían a ninguna regla: eran el resultado de
     empujar cada cosa por separado hasta que se veía bien. Los que se repiten en
     toda la página tienen nombre; el resto son múltiplos de 4 escritos a la vista. */
  --e8:8px; --e12:12px; --e16:16px; --e24:24px;
  --seccion-y:88px;    /* aire vertical de cada sección */
  --bloque:44px;       /* del titular de una sección a su contenido */

  /* ESQUINAS. La del ticket es aparte —6px— y va explicada donde se usa. */
  --r-chico:8px; --r-medio:10px; --r-grande:14px;

  /* MOVIMIENTO. Un solo par para todo lo que responde al mouse. */
  --dur:.15s; --ease:cubic-bezier(.2,0,0,1);

  --ancho:1100px;
  --ancho-prosa:68ch;  /* ningún párrafo largo pasa de acá */
}

/* Tres cortes, no diez. Antes había ocho anchos distintos (520, 620, 720, 760, 800,
   820, 860, 900) y ninguno coincidía con otro, así que la página se reacomodaba de a
   pedazos: los pasos se apilaban a 820 y los planes seguían en tres hasta 900.
   Acá el espaciado se recalcula redefiniendo los tokens, no repitiendo reglas. */
@media (max-width:820px){
  :root{--seccion-y:56px; --bloque:32px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--acero);color:var(--carbon);
  font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
  font-size:var(--t-cuerpo);line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.grotesk{font-family:'Space Grotesk','IBM Plex Sans',sans-serif;letter-spacing:-.02em}
h1,h2,h3{margin:0;line-height:1.12;font-weight:600;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit}
img,svg{max-width:100%}

.envoltura{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--e24)}
section{padding:var(--seccion-y) 0}

/* Cifras alineadas en columna: en una cuenta, los pesos tienen que caer uno debajo
   del otro o deja de leerse como una cuenta. */
.cifras{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------- Barra superior ---------- */
.barra{
  position:sticky;top:0;z-index:10;background:var(--carbon);color:var(--acero);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.barra .envoltura{display:flex;align-items:center;justify-content:space-between;height:64px}
/* El logo va como imagen, no como texto: la barra es lo único que un visitante ve en
   TODAS las pantallas, y es donde la marca tiene que verse de verdad. Se le da alto
   fijo y ancho automático para que no dependa del tamaño exacto del archivo. */
.marca{display:flex;align-items:center;text-decoration:none}
.marca img{height:30px;width:auto;display:block}
.entrar{
  color:var(--acero);text-decoration:none;font-size:var(--t-menor);font-weight:500;
  padding:var(--e12) var(--e16);border:1px solid rgba(255,255,255,.28);border-radius:var(--r-chico);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.entrar:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5)}

/* ---------- Botones ---------- */
/* Blanco sobre el naranja de la marca da 3.42:1, y la norma pide 4.5:1 para texto
   corriente. Las salidas eran tres: oscurecer el naranja —cambiar la marca—, poner
   el texto en carbon —que da 4.45:1 y tampoco alcanza— o agrandar el texto, que a
   19px en negrita entra en la categoria de texto grande, donde el minimo es 3:1.
   Se agranda: es lo unico que no cambia la marca, y de paso el boton principal de
   la pagina se ve como el boton principal de la pagina. */
.boton{
  display:inline-block;background:var(--llama);color:#fff;text-decoration:none;
  font-weight:700;font-size:var(--t-guia);padding:var(--e16) 28px;border-radius:var(--r-medio);
  transition:transform var(--dur) var(--ease),filter var(--dur) var(--ease);
}
.boton:hover{filter:brightness(1.06);transform:translateY(-1px)}
.boton.contorno{background:transparent;color:var(--carbon);border:1.5px solid var(--carbon)}
.boton.contorno:hover{background:var(--carbon);color:var(--acero);filter:none}
a:focus-visible,button:focus-visible{outline:3px solid var(--llama);outline-offset:3px;border-radius:var(--r-chico)}

/* ---------- Portada ---------- */
.portada{padding:76px 0 88px}
/* El ticket con ancho fijo y el texto ocupando lo que queda: es el objeto de la
   pagina, no un acompanante que se encoge cuando el titular necesita sitio. */
.portada .envoltura{display:grid;grid-template-columns:1fr 430px;gap:56px;align-items:center}
.portada h1{font-size:var(--t-titulo);font-weight:700;line-height:1.02;letter-spacing:-.035em}
.portada h1 em{font-style:normal;color:var(--llama)}
.bajada{margin-top:20px;font-size:var(--t-guia);color:var(--tinta-suave);max-width:34ch}
.acciones{margin-top:32px;display:flex;gap:var(--e12);flex-wrap:wrap;align-items:center}
.letra-chica{margin-top:var(--e12);font-size:var(--t-menor);color:var(--tinta-suave)}

/* ---------- EL TICKET: el elemento que la página tiene que dejar grabado ----------
   Muestra el cierre del día —lo que el software le devuelve al dueño— con la forma
   de un ticket de verdad: papel, renglones, línea punteada y borde troquelado. Es el
   objeto que el visitante mira veinte veces por día, así que no tiene que aprender a
   leerlo. Y responde de entrada a la pregunta con la que la página abre: cuánto ganó.

   El precio NO va acá: primero se muestra lo que hay, y recién después lo que cuesta. */
.cuenta{
  background:var(--papel);
  border:1px solid var(--ceniza);
  border-bottom:none;
  /* 6px, fuera de la escala de esquinas a propósito: un ticket de papel tiene la
     esquina apenas quebrada, no redondeada como una tarjeta. */
  border-radius:6px 6px 0 0;
  padding:36px 30px 28px;
  max-width:430px;margin:0 auto;
  box-shadow:0 18px 40px -28px rgba(43,39,36,.55);
}
/* El troquelado de abajo: un ticket de verdad se corta, no termina en línea recta. */
.troquel{
  max-width:430px;margin:0 auto;height:14px;
  background:var(--papel);
  border-left:1px solid var(--ceniza);border-right:1px solid var(--ceniza);
  -webkit-mask:radial-gradient(9px at 9px 100%,transparent 98%,#000) repeat-x 0 0/18px 14px;
  mask:radial-gradient(9px at 9px 100%,transparent 98%,#000) repeat-x 0 0/18px 14px;
  filter:drop-shadow(0 12px 20px rgba(43,39,36,.16));
}
.cuenta-cabeza{text-align:center;padding-bottom:var(--e16);border-bottom:1px dashed var(--ceniza)}
.cuenta-cabeza .titulo{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--t-lista);letter-spacing:.14em;text-transform:uppercase}
.cuenta-cabeza .sub{font-size:var(--t-etiqueta);color:var(--tinta-suave);margin-top:4px}

.renglon{display:flex;align-items:baseline;gap:var(--e8);padding:10px 0;font-size:var(--t-lista)}
.renglon .que{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.renglon .guia{flex:1;border-bottom:1px dotted var(--ceniza);transform:translateY(-4px)}
.renglon .cuanto{color:var(--hierba);font-weight:600;white-space:nowrap}
/* Las cifras del día van en tinta normal; el verde queda para lo que es una buena
   noticia (la caja cuadra, lo que quedó), y así el color sigue significando algo. */
.renglon .cuanto.neutro{color:var(--carbon);font-weight:500}
.cuenta-total .monto.bueno{color:var(--hierba)}

.cuenta-total{
  margin-top:var(--e16);padding-top:var(--e16);border-top:1px dashed var(--ceniza);
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--e12);
}
.cuenta-total .etiqueta{font-family:'Space Grotesk',sans-serif;font-weight:600;font-size:var(--t-etiqueta);letter-spacing:.14em;text-transform:uppercase}
.cuenta-total .monto{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--t-cifra);letter-spacing:-.03em}
.cuenta-total .periodo{display:block;text-align:right;font-size:var(--t-etiqueta);color:var(--tinta-suave);font-weight:400;letter-spacing:0;text-transform:none;font-family:'IBM Plex Sans',sans-serif}
.cuenta-pie{margin-top:var(--e16);text-align:center;font-size:var(--t-etiqueta);color:var(--tinta-suave);letter-spacing:.04em}

/* ---------- Banda oscura ---------- */
.oscura{background:var(--carbon);color:var(--acero)}
.oscura h2{color:var(--acero)}
/* El precio recién aparece acá, después de haber mostrado qué hay. Va resaltado
   porque es el remate de la página, no su entrada. */
.oscura h2 em{font-style:normal;color:var(--brasa);white-space:nowrap}
.oscura .apagado{color:rgba(247,247,245,.72)}

.titulo-seccion{font-size:var(--t-seccion)}
.entrada{font-size:var(--t-etiqueta);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--llama);margin-bottom:var(--e12)}
.oscura .entrada{color:var(--brasa)}

/* ---------- El problema ----------
   La unica seccion de la pagina con esta forma: el titular se queda a la izquierda
   y los tres problemas bajan por la derecha, separados por una linea. Es tambien la
   unica en negativo, asi que se lee lenta y con aire — un problema no se enumera en
   tres cajitas de veintidos pixeles. */
.problema .envoltura{display:grid;grid-template-columns:1fr 1.1fr;column-gap:64px;align-items:start}
.problema .entrada{grid-column:1;grid-row:1;margin-bottom:var(--e16)}
.problema h2{grid-column:1;grid-row:2}
.problema .apagado{grid-column:1;grid-row:3}
.dolores{grid-column:2;grid-row:1/span 4;display:flex;flex-direction:column}
.dolor{padding:26px 0;border-top:1px solid rgba(247,247,245,.16)}
.dolor:first-child{padding-top:0;border-top:none}
.dolor:last-child{padding-bottom:0}
.dolor h3{font-size:clamp(21px,2.4vw,28px);margin-bottom:10px;letter-spacing:-.02em}
.dolor p{font-size:var(--t-guia);color:rgba(247,247,245,.72);max-width:42ch}

/* ---------- Pasos ---------- */
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:var(--bloque);counter-reset:paso}
.paso{counter-increment:paso;position:relative}
/* La linea que va de un paso al siguiente. Sin ella son tres cosas sueltas que
   dan la casualidad de estar numeradas; con ella se leen como lo que son, una
   detras de otra. Arranca despues del circulo y cruza el hueco de la rejilla. */
.paso:not(:last-child)::after{
  content:'';position:absolute;left:58px;right:-32px;top:36px;height:1px;
  background:var(--ceniza);
}
/* El numero deja de ser una vineta dentro de un circulo y pasa a ser el elemento
   grafico del bloque, en el ambar de la marca — que fuera de la banda oscura no
   aparece en ningun otro lado del recorrido claro. Es decoracion y no informacion:
   el orden lo dicen la posicion y la linea que los une, y lo que hay que leer es el
   titulo del paso. */
.paso::before{
  content:counter(paso);display:block;line-height:1;
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:72px;
  letter-spacing:-.04em;color:var(--brasa);margin-bottom:var(--e12);
}
.paso h3{font-size:var(--t-guia);margin-bottom:var(--e8)}
.paso p{color:var(--tinta-suave);font-size:var(--t-lista)}

/* ---------- Qué incluye: dos niveles ----------
   Tres funciones son las que venden el software y seis lo completan. Con nueve
   tarjetas del mismo tamaño la sección se leía como una lista de la compra, y
   todo con el mismo peso es decir que nada importa más que lo de al lado. */
.destacadas{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e16);margin-top:var(--bloque)}
.destacada{
  background:var(--papel);border:1px solid var(--ceniza);border-radius:var(--r-grande);
  padding:28px var(--e24);
}
.destacada h3{font-size:var(--t-guia);margin-bottom:var(--e8)}
.destacada p{font-size:var(--t-cuerpo);color:var(--tinta-suave)}
.icono-grande{width:44px;height:44px;margin-bottom:var(--e16)}
.icono-grande svg{width:22px;height:22px}

/* Las otras seis: renglones, no tarjetas. Se recorren de un vistazo y no compiten
   con las tres de arriba. */
.tambien-entrada{margin:var(--bloque) 0 var(--e12)}
.tambien{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;column-gap:var(--bloque);
  border-top:1px solid var(--ceniza);
}
.tambien li{display:flex;gap:var(--e12);padding:var(--e16) 0;border-bottom:1px solid var(--ceniza)}
.tambien h3{font-size:var(--t-cuerpo);margin-bottom:2px}
.tambien p{font-size:var(--t-lista);color:var(--tinta-suave)}
.icono-menor{color:var(--llama);flex:none;display:inline-flex;margin-top:3px}
.icono-menor svg{width:18px;height:18px}

.aviso{
  margin-top:32px;padding:var(--e16) var(--e24);border:1px solid var(--ceniza);border-radius:var(--r-medio);
  background:var(--papel);font-size:var(--t-lista);color:var(--tinta-suave);
}
.aviso strong{color:var(--carbon);font-weight:600}

/* ---------- Descargar la aplicación de Windows ----------
   Antes esto era un párrafo de aviso que contaba las dos razones para instalarla
   —imprimir en térmica y aguantar un corte de internet— y no ofrecía cómo hacerlo.
   El instalador existía y estaba publicado, pero no había un solo enlace hacia él
   en toda la página: había que conocer la dirección de memoria.

   Dos columnas: el motivo a la izquierda, la acción a la derecha. En celular se
   apilan y el botón queda de ancho completo, que es donde se toca con el pulgar. */
.descarga{
  /* La barra de arriba es fija: al saltar desde el enlace, sin esto el encabezado
     del bloque queda tapado por ella. */
  scroll-margin-top:96px;
  margin-top:32px;padding:var(--e24);border:1px solid var(--ceniza);border-radius:var(--r-medio);
  background:var(--papel);display:grid;grid-template-columns:1fr minmax(260px,320px);
  gap:var(--e24);align-items:center;
}
.descarga-texto .entrada{margin-bottom:var(--e8)}
.descarga-texto h3{font-size:var(--t-guia);margin-bottom:var(--e12);color:var(--carbon);letter-spacing:-.01em}
.descarga-texto p{font-size:var(--t-lista);color:var(--tinta-suave)}
.descarga-texto strong{color:var(--carbon);font-weight:600}

.descarga-accion{display:flex;flex-direction:column;align-items:stretch;gap:var(--e12)}
/* El botón es el único de la página con ícono: descargar un archivo es la única
   acción que saca al visitante del sitio hacia su propio computador, y conviene
   que se lea distinta de "probar" o "ver". */
.boton.grande{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 24px;font-size:16px;text-align:center;
}
.boton.grande svg{width:19px;height:19px;flex:0 0 auto}
.descarga-datos{font-size:13px;color:var(--tinta-suave);text-align:center;margin:0}
.descarga-nota{
  font-size:12.5px;line-height:1.5;color:var(--tinta-suave);margin:0;
  padding-top:var(--e12);border-top:1px solid var(--ceniza);
}
.descarga-nota strong{color:var(--carbon);font-weight:600}

/* El enlace de la portada: sin peso de botón, para no competir con "Probar 30
   días gratis", pero subrayado para que se lea como algo en lo que se puede tocar. */
.enlace-descarga{color:var(--carbon);text-decoration:underline;text-underline-offset:3px;font-weight:500}
.enlace-descarga:hover{color:var(--llama)}

/* ---------- Los planes ----------
   Van lado a lado y de la misma altura: los precios se comparan mirándolos juntos, y
   una tarjeta más grande que la otra inclina la decisión con el tamaño en vez de con
   el argumento. El anual se distingue solo por el borde y la cinta del ahorro. */
.planes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--e16);margin-top:var(--bloque)}
.plan{
  position:relative;border:1px solid rgba(247,247,245,.18);border-radius:var(--r-grande);
  padding:28px var(--e24);display:flex;flex-direction:column;gap:var(--e12);
}
.plan.destacado{border:2px solid var(--llama);background:rgba(251,76,19,.06)}
.plan h3{font-size:var(--t-cuerpo);letter-spacing:.1em;text-transform:uppercase;color:var(--brasa)}
.plan-monto{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:var(--t-monto);
  letter-spacing:-.03em;line-height:1.05;display:flex;align-items:baseline;gap:var(--e8);flex-wrap:wrap;
}
.plan-monto span{font-family:'IBM Plex Sans',sans-serif;font-size:var(--t-menor);font-weight:400;letter-spacing:0;color:rgba(247,247,245,.6)}
.plan-nota{font-size:var(--t-menor);color:rgba(247,247,245,.78)}
.plan-nota strong{color:var(--acero)}
.plan .boton{margin-top:auto;text-align:center}
.boton.contorno.claro{color:var(--acero);border-color:rgba(247,247,245,.45)}
.boton.contorno.claro:hover{background:var(--acero);color:var(--carbon)}
/* 20px de radio: es una cinta, y una cinta es una pastilla. Fuera de la escala a
   propósito, como el ticket. */
.plan-cinta{
  position:absolute;top:-12px;right:var(--e16);background:var(--llama);color:#fff;
  font-size:var(--t-etiqueta);font-weight:600;padding:4px var(--e12);border-radius:20px;white-space:nowrap;
}

/* ---------- Se adapta ---------- */
.adapta{display:grid;grid-template-columns:1fr 1fr;gap:var(--bloque);align-items:center;margin-top:40px}
.adapta ul{margin:0;padding:0;list-style:none}
.adapta li{padding:var(--e12) 0 var(--e12) var(--e24);position:relative;border-bottom:1px solid var(--ceniza);font-size:var(--t-lista)}
.adapta li:last-child{border-bottom:none}
.adapta li::before{
  content:'';position:absolute;left:0;top:20px;width:12px;height:6px;
  border-left:2px solid var(--llama);border-bottom:2px solid var(--llama);transform:rotate(-45deg);
}

/* ---------- Precio detallado ---------- */
.precio-caja{
  margin-top:var(--bloque);border:1px solid rgba(247,247,245,.16);border-radius:var(--r-grande);padding:36px;
}
/* La lista se reparte en dos columnas en pantalla ancha en vez de estirarse en una
   sola línea larguísima: seis renglones cortos se leen de un vistazo, seis renglones
   de ancho completo obligan a recorrerlos uno por uno. */
.precio-caja ul{margin:0;padding:0;list-style:none;columns:2;column-gap:40px}
.precio-caja li{padding:var(--e8) 0 var(--e8) 28px;position:relative;font-size:var(--t-lista);color:rgba(247,247,245,.85);break-inside:avoid}
.precio-caja li::before{content:'';position:absolute;left:0;top:16px;width:13px;height:7px;border-left:2px solid var(--brasa);border-bottom:2px solid var(--brasa);transform:rotate(-45deg)}
.precio-caja h3{font-size:var(--t-menor);letter-spacing:.14em;text-transform:uppercase;margin-bottom:var(--e8);color:var(--brasa)}

/* ---------- Preguntas ---------- */
.preguntas{margin-top:40px;border-top:1px solid var(--ceniza)}
details{border-bottom:1px solid var(--ceniza)}
summary{
  cursor:pointer;padding:20px 40px 20px 0;font-weight:600;font-size:var(--t-cuerpo);
  font-family:'Space Grotesk',sans-serif;list-style:none;position:relative;
}
summary::-webkit-details-marker{display:none}
summary::after{
  content:'';position:absolute;right:var(--e8);top:50%;width:9px;height:9px;
  border-right:2px solid var(--llama);border-bottom:2px solid var(--llama);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur) var(--ease);
}
details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
details p{padding:0 0 var(--e24);color:var(--tinta-suave);max-width:var(--ancho-prosa)}

/* ---------- Franja de confianza ----------
   Va entre las preguntas y el cierre, con menos aire que una sección entera: es un
   pie de página de la argumentación, no un capítulo aparte. */
.franja{padding:32px 0;border-top:1px solid var(--ceniza)}
.confianza{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--e24)}
.confianza li{display:flex;gap:var(--e8);align-items:flex-start;font-size:var(--t-lista);color:var(--tinta-suave)}
.confianza .icono-menor{margin-top:2px}

/* ---------- Cierre ---------- */
.cierre{text-align:center}
.cierre h2{font-size:var(--t-cierre)}
.cierre p{margin:var(--e16) auto 0;color:var(--tinta-suave);max-width:52ch}
.cierre .acciones{justify-content:center;margin-top:32px}

footer{border-top:1px solid var(--ceniza);padding:36px 0;font-size:var(--t-menor);color:var(--tinta-suave)}
footer .envoltura{display:flex;justify-content:space-between;gap:var(--e16);flex-wrap:wrap;align-items:center}
footer a{color:var(--carbon);text-decoration:none;border-bottom:1px solid var(--ceniza);display:inline-block;padding:4px 0}
footer a:hover{border-color:var(--llama)}

/* Una sola entrada, y solo en la portada. Quien abre esto está trabajando: el
   movimiento tiene que anunciar la página, no entretener. */
@media (prefers-reduced-motion:no-preference){
  .anima{animation:subir .6s cubic-bezier(.2,.7,.3,1) both}
  .anima:nth-child(2){animation-delay:.08s}
  @keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* ---------- Enlace a la guía en la barra superior ---------- */
/* Va junto a "Entrar" pero sin peso de botón: la acción principal sigue siendo
   entrar, y la guía es una salida para quien todavía está mirando. */
.acciones-barra{display:flex;align-items:center;gap:var(--e16)}
.enlace-barra{
  color:var(--acero);text-decoration:none;font-size:var(--t-menor);
  border-bottom:1px solid transparent;padding-bottom:2px;
}
.enlace-barra:hover{border-bottom-color:var(--llama)}

/* ---------- Icono de cada función ---------- */
/* Las tarjetas de "Qué incluye" eran solo título y texto, y con nueve seguidas la
   sección se leía como una lista. El distintivo con icono le da un punto de entrada
   a cada una. Los dibujos son de lucide, en línea: son cuatro trazos, y un archivo
   aparte costaría una petición más para algo que pesa menos que su propio pedido. */
.icono-pieza{
  width:36px;height:36px;border-radius:var(--r-medio);flex:none;margin-bottom:var(--e12);
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(251,76,19,.10);color:var(--llama);
}
.icono-pieza svg{width:20px;height:20px}

/* ---------- El titular, palabra por palabra ---------- */
/* Cada palabra se enfoca con un retraso propio, en vez de aparecer el bloque entero
   de una vez. El retraso sale de --i para no escribir una regla por palabra.
   Solo se mueve la nitidez y la opacidad: el desplazamiento ya lo hace .anima en el
   contenedor, y sumarle otro dejaría el titular flotando dos veces. */
@media (prefers-reduced-motion:no-preference){
  .portada h1 .palabra{
    display:inline-block;
    animation:enfocar .5s ease both;
    animation-delay:calc(var(--i) * .075s);
  }
  @keyframes enfocar{
    from{opacity:0;filter:blur(9px)}
    to{opacity:1;filter:blur(0)}
  }
}

/* ==========================================================================
   IMÁGENES
   La página se apoyaba entera en el texto, y por eso se leía como escrita por una
   máquina: nueve tarjetas iguales, tres pasos, tres planes, cuatro sellos de
   confianza, todo con la misma forma. Lo que rompe eso no es más texto: es una
   cocina de verdad, una mesa de verdad y capturas del programa funcionando.

   Tres tratamientos, y ninguno se repite dos veces seguidas:
     .banda   — a todo el ancho de la ventana, sin caja. Corta la página en dos.
     .figura  — dentro del contenedor, con su pie. Acompaña a lo que se está diciendo.
     .muestra — texto y pantalla del programa lado a lado, alternando de lado.
   ========================================================================== */

/* Una imagen sin proporción declarada empuja todo lo que tiene debajo cuando
   termina de bajar. Todas llevan width y height en el HTML; esto hace que el
   navegador reserve el hueco exacto desde el primer instante. */
.banda img,.figura img,.muestra-imagen img,.ademas-foto img,.menu-qr-piezas img{
  display:block;width:100%;height:auto;
}

/* ---------- Banda a todo el ancho ---------- */
/* Va pegada a la portada, sin aire entre las dos: el corte tiene que sentirse como
   un cambio de plano, no como otra sección más. */
.banda{margin:0;position:relative}
/* La foto es 16:9 y la ventana de un escritorio es MUCHO más ancha que alta. Sin una
   proporción declarada, el navegador escalaba la imagen al ancho completo y recortaba
   por arriba y por abajo — y arriba es justo donde está el monitor, así que lo
   decapitaba. Se veía como una foto rota.

   En celular no se recorta nada: 16/9 es la proporción de la propia foto. En pantalla
   ancha se recorta a lo cinematográfico, pero anclando el encuadre ARRIBA, que es
   donde vive lo único que esta imagen tiene que enseñar. */
.banda img{aspect-ratio:16/9;object-fit:cover;object-position:center}
.banda figcaption{
  position:absolute;left:0;right:0;bottom:0;
  padding:56px var(--e24) var(--e24);
  background:linear-gradient(to top,rgba(43,39,36,.82),rgba(43,39,36,0));
  color:var(--acero);font-size:var(--t-lista);
}
.banda figcaption strong{font-family:'Space Grotesk',sans-serif;font-weight:600}
/* El pie va alineado con el texto del resto de la página y no con el borde de la
   ventana: si no, en una pantalla ancha queda solo, a un palmo de todo lo demás. */
.banda figcaption > *,.banda figcaption{max-width:none}
@media (min-width:1148px){
  .banda figcaption{padding-left:calc((100vw - var(--ancho)) / 2 + var(--e24))}
}

/* ---------- Figura dentro del contenedor ---------- */
.figura{margin:var(--bloque) 0 0}
.figura img{border-radius:var(--r-grande)}
.figura figcaption{margin-top:var(--e12);font-size:var(--t-lista);color:var(--tinta-suave);max-width:56ch}
.figura-descarga{margin-top:var(--bloque)}

/* ---------- Las tres muestras: texto y pantalla lado a lado ----------
   Tres intentos, y el número que manda es cuánto se achica la interfaz:

     1.a  captura de 1280 en 516 px, al lado  -> al 40 %: ilegible
     2.a  captura de 960 a todo el ancho      -> al 110 %: se lee, pero tres
          pantallas de 1050 px seguidas se comían la página
     3.a  captura de 960 en unos 630 px       -> al 65 %: se lee y ocupa la mitad

   La imagen se lleva casi dos tercios del ancho y cambia de lado en la del medio:
   con las tres del mismo lado vuelve a leerse como una lista. */
.muestras{margin-top:var(--bloque);display:flex;flex-direction:column;gap:72px}
.muestra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:56px;align-items:center}
/* Al cambiar de lado hay que invertir también los anchos: con solo el order, la
   imagen de la del medio caía en la columna angosta y salía a la mitad de tamaño. */
.muestra:nth-child(even){grid-template-columns:minmax(0,1.7fr) minmax(0,1fr)}
.muestra:nth-child(even) .muestra-texto{order:2}
.muestra h3{font-size:clamp(24px,2.8vw,32px);margin-bottom:var(--e12)}
.muestra p{font-size:var(--t-guia);color:var(--tinta-suave);max-width:40ch}
/* Las capturas son de un programa de fondo claro sobre una página de fondo claro:
   sin un borde definido se derraman. El borde es el marco de la pantalla. */
.muestra-imagen{display:block}
.muestra-imagen img{
  border:1px solid var(--ceniza);border-radius:var(--r-grande);
  box-shadow:0 18px 40px -24px rgba(43,39,36,.45);
}

/* ---------- Y además: los seis renglones, con una foto al lado ---------- */
.ademas{margin-top:var(--bloque);display:grid;grid-template-columns:1fr minmax(300px,400px);gap:var(--bloque);align-items:start}
.ademas .tambien{grid-template-columns:1fr}
.ademas .tambien-entrada{margin:0 0 var(--e12)}
.ademas-foto{margin:0;position:sticky;top:88px}
.ademas-foto img{border-radius:var(--r-grande)}
.ademas-foto figcaption{margin-top:var(--e12);font-size:var(--t-lista);color:var(--tinta-suave)}

/* ---------- Menú digital ---------- */
/* Fondo oscuro por una razón concreta: las dos piezas son claras —una tarjeta blanca
   sobre madera y una carta sobre fondo blanco— y sobre el gris de la página se
   deshacían. */
/* El teléfono va a la derecha ocupando las dos filas, y a la izquierda el texto
   con la foto de la mesa debajo. Antes las dos imágenes compartían media columna y
   el teléfono quedaba en 196 px: una tira blanca donde no se leía un plato.

   .menu-qr-piezas pasa a display:contents para que sus dos figuras se puedan
   ubicar por separado en la rejilla de la sección sin tocar el HTML. */
.menu-qr .envoltura{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  grid-template-areas:'texto telefono' 'qr telefono';
  column-gap:64px;row-gap:var(--bloque);align-items:start;
}
.menu-qr-texto{grid-area:texto}
.menu-qr-piezas{display:contents}
.menu-qr-piezas figure:first-child{grid-area:qr}
.menu-qr-telefono{grid-area:telefono;align-self:center}
.menu-qr-texto .apagado{margin-top:var(--e16);font-size:var(--t-guia);max-width:44ch}
.menu-qr-texto strong{color:var(--acero);font-weight:600}
.menu-qr-piezas figure{margin:0}
.menu-qr-piezas img{border-radius:var(--r-grande)}
.menu-qr-piezas figcaption{
  margin-top:var(--e12);font-size:var(--t-etiqueta);letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,247,245,.6);
}
/* Un teléfono, no un rectángulo blanco. El marco oscuro con esquinas redondeadas es
   lo que hace que se lea como "esto es lo que ve el comensal en su celular" sin
   tener que explicarlo. La captura es de un teléfono real (390 px lógicos), así que
   la proporción ya es la de uno. */
.menu-qr-telefono picture{
  display:block;padding:9px;background:#0f0e0d;border-radius:40px;
  box-shadow:0 0 0 1px rgba(247,247,245,.10),0 30px 60px -20px rgba(0,0,0,.6);
}
.menu-qr-telefono img{border-radius:31px}

/* ---------- Cierre sobre la foto ---------- */
.cierre{position:relative;isolation:isolate;color:var(--acero);padding:112px 0}
.cierre-fondo{position:absolute;inset:0;z-index:-2;display:block}
.cierre-fondo img{width:100%;height:100%;object-fit:cover}
/* El velo es casi opaco a propósito. La foto está para dar temperatura, no para
   competir con el titular: si se lee el plato antes que la frase, sobra. */
.cierre::after{content:'';position:absolute;inset:0;z-index:-1;background:rgba(43,39,36,.78)}
.cierre h2{color:var(--acero)}
.cierre p{color:rgba(247,247,245,.78)}
.cierre .boton.contorno{color:var(--acero);border-color:rgba(247,247,245,.5)}
.cierre .boton.contorno:hover{background:var(--acero);color:var(--carbon)}

/* ==========================================================================
   LOS TRES CORTES
   Todo lo que cambia con el ancho vive acá abajo, junto, y no repartido entre
   las secciones. Así se puede leer de un tirón qué le pasa a la página al
   angostarse, que antes había que reconstruirlo saltando por ocho reglas.
   ========================================================================== */

/* 900 — las rejillas de tres dejan de caber, y la portada se apila.
   La portada se va con este grupo y no con el de 820: en el medio quedaba una
   franja de tablet con el titular partido en cuatro renglones contra un ticket
   de 310 px, que es justo la pantalla donde mas se mira esta pagina. */
/* A partir de 900 la ventana ya es claramente apaisada y la foto entera dejaría una
   banda altísima. Se recorta a 2.35:1 —proporción de cine— con el encuadre pegado
   arriba: con el 22 %, el monitor entra completo desde 900 px hasta una pantalla de
   2560, que es el caso donde más se recorta. El tope en vh evita que en un monitor
   enorme la banda se coma la pantalla entera. */
@media (min-width:900px){
  .banda img{aspect-ratio:2.35/1;max-height:78vh;object-position:center 8%}
}

@media (max-width:900px){
  .portada .envoltura{grid-template-columns:1fr;gap:var(--bloque)}
  .portada{padding:52px 0 64px}
  /* Las muestras se apilan: texto arriba, pantalla abajo. El order que alterna los
     lados hay que anularlo, o en la del medio la imagen saldría antes que su título. */
  .muestra,.muestra:nth-child(even){grid-template-columns:1fr;gap:var(--e24)}
  .muestra:nth-child(even) .muestra-texto{order:0}
  .muestras{gap:56px}
  /* Menú digital en una columna: texto, la mesa y el teléfono centrado debajo. */
  .menu-qr .envoltura{grid-template-columns:1fr;grid-template-areas:'texto' 'qr' 'telefono'}
  .menu-qr-telefono{justify-self:center;width:min(280px,72vw)}
  /* Tres planes o uno debajo del otro, nunca dos y medio: con dos columnas el
     tercero queda solo en una fila, y esa fila coja se lee como un error. */
  .planes{grid-template-columns:1fr}
}

/* 820 — una sola columna, y la página respira menos. */
@media (max-width:820px){
  .confianza{grid-template-columns:1fr 1fr}
  /* El problema vuelve a una sola columna: el titular arriba y los tres debajo. */
  .problema .envoltura{grid-template-columns:1fr;row-gap:var(--e24)}
  .problema .entrada,.problema h2,.problema .apagado,.dolores{grid-column:1;grid-row:auto}
  .dolores{margin-top:var(--e8)}
  .dolores{grid-template-columns:1fr}
  .pasos{grid-template-columns:1fr}
  .tambien{grid-template-columns:1fr}
  /* La foto pasa a ser un remate debajo de la lista, no una columna. */
  .ademas{grid-template-columns:1fr}
  .ademas-foto{position:static}
  /* Apilados, la linea que los encadena pasa a ser vertical. */
  .paso:not(:last-child)::after{left:26px;right:auto;top:84px;bottom:-32px;width:1px;height:auto}
  .adapta{grid-template-columns:1fr;gap:var(--e24)}
  .precio-caja{padding:var(--e24)}
  .precio-caja ul{columns:1}
  /* El bloque de descarga se apila: el motivo arriba, el botón abajo y de ancho
     completo. Con dos columnas a 820 px la derecha quedaba en 260 px y el texto
     de la izquierda entraba en renglones de tres palabras. */
  .descarga{grid-template-columns:1fr;gap:var(--e16)}
}

/* 620 — celular. */
@media (max-width:620px){
  .confianza{grid-template-columns:1fr}
  /* El renglon del total del ticket no entra en una linea en un telefono angosto:
     la etiqueta y la cifra se empujan entre si y sacan la pagina 24 px de ancho.
     Venia asi de antes. Se le permite a la cifra bajar de renglon. */
  .cuenta-total{flex-wrap:wrap}
  .cuenta-total .periodo{text-align:left}
  /* La barra no aguanta las dos cosas; manda el botón de entrar, y la guía sigue
     alcanzable desde el pie. */
  .enlace-barra{display:none}
  .cierre{padding:80px 0}
}