/* =============================================================================================
   RESTWARE · LA PÁGINA DE INICIO PÚBLICA. Hoja PROPIA Y AISLADA, separada de la del panel y del
   mostrador, y FUERA de la lista ESTATICOS de sw.js: tocar esto no invalida la caché del mostrador
   sin conexión ni obliga a mover su huella.

   MARCA. Cuatro colores: tinta #0D2E3D, turquesa #49EDCB, secundario #598381, papel #F4F2F3, más una
   escala de neutros de siete pasos. Todo medido, no puesto a ojo:
     · El turquesa NUNCA es texto sobre claro (1.32:1 sobre papel). Va como bloque sólido con tinta
       encima (9.67:1) o como acento gráfico: la regla de cada etiqueta, el resplandor, los bordes.
     · El secundario #598381 tampoco es texto pequeño (3.78:1). El texto de apoyo sobre claro es
       #3F5D5B (6.43:1); sobre oscuro, #B8C7CC (8.19:1). Los enlaces, #1F6A60 (5.73:1 sobre papel).

   RITMO. Secciones claras sobre papel y oscuras sobre tinta, alternadas. Las oscuras cargan las
   imágenes más luminosas: la cocina, el corte y el modo sin conexión. El gesto de la marca —regla
   turquesa gruesa y corta bajo cada etiqueta de sección— se repite en las doce y es lo que las cose.

   MÓVIL PRIMERO. Escrito para 390 px y hacia arriba con media queries. Lo que se toca mide 44 px o más.

   TIPOGRAFÍA. Archivo (títulos) + IBM Plex Sans (cuerpo), autoalojadas en /vendor/fonts, variables,
   subset latino, font-display: swap. Escala fluida con clamp(); tres niveles por sección y ni uno más.
   ============================================================================================= */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("/vendor/fonts/ibm-plex-sans-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Los cuatro de la marca */
  --tinta: #0D2E3D;
  --turquesa: #49EDCB;
  --secundario: #598381;
  --papel: #F4F2F3;

  /* La escala de neutros derivada. Al lado, el contraste medido de lo que se usa como texto. */
  --n900: #0D2E3D;  /* tinta                                   12.77:1 sobre papel */
  --n800: #12404F;  /* superficie elevada sobre oscuro                              */
  --n700: #1A5263;  /* bordes y separadores sobre oscuro                            */
  --n600: #3F5D5B;  /* texto de apoyo sobre claro               6.43:1 sobre papel  */
  --n500: #6E8C92;  /* iconografía y trazos sobre claro                             */
  --n400: #B8C7CC;  /* texto de apoyo sobre oscuro              8.19:1 sobre tinta  */
  --n300: #D6DFE2;  /* bordes sobre claro                                           */
  --n200: #E4E8EA;  /* superficie alterna                                           */
  --n100: #ECEDEE;  /* cebra de la tabla                                            */
  --blanco: #FFFFFF;

  --enlace: #1F6A60;          /* 5.73:1 sobre papel */
  --si: #1F6A60;              /* la paloma de la comparativa */
  --no: #3F5D5B;              /* la tacha, NEUTRA: no es un reproche, es un dato. 6.43:1 sobre papel */
  --turquesa-honda: #2ED9B7;  /* el botón al pasar por encima, 7.95:1 con tinta */
  --turquesa-tinte: #DFFBF4;  /* la franja de nuestra columna, 13.04:1 con tinta */

  --titulos: "Archivo", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cuerpo: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --ancho: 1200px;
  --barra-h: 60px;
  --medida: 68ch;

  --r: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;

  /* Sombras de varias capas: una foto no flota, se apoya. */
  --sombra-1: 0 1px 2px rgba(13, 46, 61, .05), 0 6px 16px rgba(13, 46, 61, .07);
  --sombra-2: 0 2px 4px rgba(13, 46, 61, .04), 0 12px 28px rgba(13, 46, 61, .09), 0 32px 64px rgba(13, 46, 61, .08);
  --sombra-oscura: 0 4px 10px rgba(0, 0, 0, .26), 0 22px 50px rgba(0, 0, 0, .38);

  --seccion: clamp(3.5rem, 8vw, 7rem);
  --hueco: clamp(1.5rem, 4vw, 3rem);
}

/* ─────────────────────────────────────────────────────────────────────────── base y utilidades */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--barra-h) + 16px);
}

body {
  margin: 0;
  font: 400 1.0625rem/1.62 var(--cuerpo);
  color: var(--tinta);
  background: var(--papel);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 1.125rem; } }

img, svg { max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1rem; max-width: var(--medida); }
a { color: var(--enlace); text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }

h1, h2, h3 {
  font-family: var(--titulos);
  color: inherit;
  margin: 0;
  font-weight: 700;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.3rem, 1.55rem + 3.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -.028em;
}
h2 {
  font-size: clamp(1.9rem, 1.42rem + 2.05vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.024em;
}
h3 {
  font-size: clamp(1.3rem, 1.16rem + .6vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -.015em;
}
/* El aire después de un título. Los títulos no llevan margen propio —así cada sección decide el
   suyo— y este par de reglas pone el hueco donde siempre hace falta, sin tocar a los que ya
   declaran el suyo (el subtítulo del hero, el de sección, las tarjetas de función): una clase
   siempre gana a un selector de hermano. */
h1 + p, h2 + p, h3 + p, h2 + ul, h3 + ul { margin-top: 1rem; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.simbolos { position: absolute; width: 0; height: 0; overflow: hidden; }

.interior { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }
.interior--estrecho { max-width: 860px; }

/* LA ETIQUETA DE SECCIÓN Y SU REGLA TURQUESA. Es el gesto de la marca y se repite en todas: versalitas
   pequeñas con espaciado entre letras, y debajo una regla gruesa y corta. Nada más lleva turquesa
   sólido sobre claro, así que la vista aprende en dos secciones qué significa. */
.etiqueta {
  margin: 0 0 1.1rem;
  font: 600 .8125rem/1.2 var(--cuerpo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--n600);
  max-width: none;
}
.etiqueta::after {
  content: "";
  display: block;
  width: 44px;
  height: 4px;
  margin-top: .75rem;
  border-radius: 2px;
  background: var(--turquesa);
}

.cabecera-seccion { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.cabecera-seccion__sub {
  margin: 1rem 0 0;
  font-size: clamp(1.0625rem, 1rem + .35vw, 1.25rem);
  color: var(--n600);
}
.cabecera-seccion--centrada { text-align: center; }
.cabecera-seccion--centrada .etiqueta::after { margin-inline: auto; }
.cabecera-seccion--centrada .cabecera-seccion__sub { margin-inline: auto; }

.bloque__texto > p { color: var(--n600); }
.bloque__texto > p:last-child { margin-bottom: 0; }

/* LA LÁMINA. Ninguna captura del producto flota desnuda: todas van sobre una superficie con esquinas
   redondeadas, un borde de un píxel muy tenue y una sombra de varias capas. */
.lamina {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid rgba(13, 46, 61, .10);
  box-shadow: var(--sombra-2);
}
.lamina img { display: block; width: 100%; }
/* Las imágenes que YA traen su propio fondo de marca no necesitan tarjeta: sólo el canto y la sombra. */
.lamina--sin-marco { background: transparent; border: 0; box-shadow: 0 24px 56px rgba(13, 46, 61, .20); }
.lamina--oscura { background: var(--n800); border-color: rgba(255, 255, 255, .14); box-shadow: var(--sombra-oscura); }

/* EL RESPLANDOR TURQUESA. Difuso, detrás de las piezas de producto en las secciones oscuras. Es el
   segundo gesto propio y no lleva ningún coste: es un degradado, no una imagen. */
.resplandor {
  /* Circular y MÁS GRANDE que la pieza que ilumina, no un rectángulo pegado a ella: con `inset` el
     degradado tomaba el alto del chip —150 px— y se quedaba en una raya. Centrado y con lado propio,
     es el faro que la sección necesita. La sección lo recorta (overflow: hidden), así que por muy
     grande que sea no empuja la página a lo ancho. */
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(135%, 660px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(73, 237, 203, .34), rgba(73, 237, 203, .10) 46%, rgba(73, 237, 203, 0) 72%);
}

.acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 3vw, 2rem); }

.lista { margin: 1.25rem 0 0; padding: 0; list-style: none; }
.lista li { position: relative; padding-left: 1.85rem; margin-bottom: .6rem; max-width: var(--medida); }
.lista li::before {
  position: absolute; left: 0; top: .1em;
  width: 1.15rem; height: 1.15rem;
  display: grid; place-content: center;
  border-radius: 50%;
  font: 700 .75rem/1 var(--cuerpo);
}
.lista--si li::before { content: "✓"; content: "✓" / ""; background: var(--turquesa); color: var(--tinta); }
.lista--no li::before { content: "×"; content: "×" / ""; background: var(--n200); color: var(--n600); font-size: .9rem; }
/* Los opcionales llevan el MISMO aro que la tabla comparativa, no un signo nuevo: el cliente aprende
   una sola forma y la reconoce en las dos pantallas. */
.lista--opcional li { padding-left: 0; display: flex; gap: .7rem; align-items: start; }
.lista--opcional .marca { margin-top: .15em; }

/* APARICIÓN AL ENTRAR EN PANTALLA. Sólo opacity y transform, una sola vez, y sólo si landing.js pudo
   poner la clase en <html>: si el guion no llega, no hay nada oculto que revelar. */
.con-revelado [data-revelar] { opacity: 0; transform: translateY(10px); }
.con-revelado [data-revelar].visible {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22, .7, .3, 1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .con-revelado [data-revelar] { opacity: 1; transform: none; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ─────────────────────────────────────────────────────────────── enlace de salto y botones */

.saltar {
  position: absolute; left: 1rem; top: -100px; z-index: 100;
  background: var(--tinta); color: var(--papel); padding: .8rem 1.1rem; border-radius: 10px;
  font-weight: 600; text-decoration: none;
}
.saltar:focus { top: 1rem; outline: 3px solid var(--turquesa); outline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: 0 1.25rem; border-radius: var(--r);
  font: 600 1rem/1.2 var(--cuerpo); text-decoration: none; text-align: center;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, transform .12s;
}
.btn:active { transform: translateY(1px); }
.btn--primario { background: var(--turquesa); color: var(--tinta); border-color: var(--turquesa); }
.btn--primario:hover { background: var(--turquesa-honda); border-color: var(--turquesa-honda); color: var(--tinta); }
.btn--secundario { background: transparent; color: var(--tinta); border-color: rgba(13, 46, 61, .28); }
.btn--secundario:hover { background: rgba(13, 46, 61, .06); border-color: var(--tinta); color: var(--tinta); }
.btn--oscuro { background: var(--tinta); color: var(--papel); border-color: var(--tinta); }
.btn--oscuro:hover { background: #082430; border-color: #082430; color: var(--blanco); }
.btn--grande { min-height: 56px; padding: 0 1.7rem; font-size: 1.0625rem; border-radius: 14px; }
.btn--compacto { min-height: 44px; padding: 0 1rem; font-size: .9375rem; }
.btn--bloque { width: 100%; }

/* ───────────────────────────────────────────────────────────────────────────── la barra superior */

.barra {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244, 242, 243, .88);
  -webkit-backdrop-filter: saturate(150%) blur(12px);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid rgba(13, 46, 61, .08);
}
.barra__interior {
  width: min(100% - 2rem, var(--ancho)); margin-inline: auto;
  min-height: var(--barra-h); display: flex; align-items: center; gap: .75rem;
}
.barra__marca { display: inline-flex; align-items: center; gap: .55rem; color: var(--tinta); min-height: 44px; text-decoration: none; flex: 0 0 auto; }
.monograma { width: 28px; height: 28px; flex: 0 0 auto; object-fit: contain; }
.marca { width: 112px; height: 18px; display: block; fill: currentColor; }
.marca--pie { width: 146px; height: 24px; }
.barra__nav { display: none; }
.barra__acciones { margin-left: auto; display: flex; align-items: center; gap: .5rem; min-width: 0; }
.barra__entrar { display: none; }
.barra__acciones .btn { font-size: .875rem; padding: 0 .85rem; }
.solo-ancho { display: none; }
@media (min-width: 480px) {
  .solo-ancho { display: inline; }
  .solo-angosto { display: none; }
}
@media (max-width: 419px) {
  .monograma { width: 24px; height: 24px; }
  .marca { width: 94px; height: 15px; }
  .barra__interior { gap: .5rem; }
  .barra__acciones .btn { font-size: .8125rem; padding: 0 .7rem; }
}

/* El menú móvil es un <details>: el botón, el estado y el teclado los pone el navegador. */
.barra__movil { position: relative; flex: 0 0 auto; }
.barra__hamburguesa {
  list-style: none; display: grid; place-content: center;
  width: 44px; height: 44px; border-radius: 10px; cursor: pointer; color: var(--tinta);
}
.barra__hamburguesa::-webkit-details-marker { display: none; }
.barra__icono-cerrar { display: none; }
.barra__movil[open] .barra__icono-abrir { display: none; }
.barra__movil[open] .barra__icono-cerrar { display: block; }
.barra__desplegable {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 60;
  width: min(78vw, 17rem); display: grid; gap: .25rem;
  background: var(--blanco); border: 1px solid var(--n300); border-radius: var(--r-md);
  box-shadow: var(--sombra-2); padding: .5rem;
}
.barra__desplegable a {
  display: flex; align-items: center; min-height: 44px; padding: 0 .75rem;
  border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 500;
}
.barra__desplegable a:hover { background: var(--n100); }
.barra__desplegable .btn { margin-top: .35rem; }

@media (min-width: 900px) {
  .barra__movil { display: none; }
  .barra__nav { display: block; margin-left: 1.5rem; }
  .barra__nav ul { display: flex; gap: .25rem; list-style: none; margin: 0; padding: 0; }
  .barra__nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .7rem;
    border-radius: 9px; color: var(--tinta); text-decoration: none; font-size: .9375rem; font-weight: 500;
  }
  .barra__nav a:hover { background: rgba(13, 46, 61, .06); }
  .barra__entrar {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 .9rem;
    border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 600; font-size: .9375rem;
  }
  .barra__entrar:hover { background: rgba(13, 46, 61, .06); }
  .barra__acciones .btn { font-size: .9375rem; padding: 0 1.1rem; }
}

/* ────────────────────────────────────────────────────────────────────────────────────── 2 · hero */

.hero { position: relative; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); }
.hero__interior { display: grid; gap: clamp(2rem, 5vw, 3.25rem); align-items: center; }
.hero__texto { min-width: 0; }
.hero__sub {
  margin: 1.25rem 0 0;
  font-size: clamp(1.0625rem, 1rem + .5vw, 1.3125rem);
  line-height: 1.55;
  color: var(--n600);
}
.hero__visual { min-width: 0; }

@media (min-width: 1040px) {
  .hero__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr); gap: clamp(2.5rem, 4vw, 4rem); }
}

/* Los tres datos duros, en texto y sin adornos. */
.hechos {
  list-style: none; padding: 1.5rem 0 0; margin-block: clamp(2.25rem, 5vw, 3.5rem) 0;
  border-top: 1px solid var(--n300);
  display: grid; gap: .8rem;
  font-size: .9375rem; color: var(--n600);
}
.hechos strong { color: var(--tinta); font-weight: 600; }
@media (min-width: 760px) { .hechos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* ───────────────────────────────────────────────────────────── 3 · qué necesitas para empezar */
/* Tres columnas de texto llano sobre tinta, con el acento turquesa en la regla de cada etiqueta y en
   el icono. Rejilla de UNA columna hasta 720 px: en el celular se apilan solas, sin carrusel y sin una
   línea de JavaScript. */

.requisitos {
  background: var(--tinta);
  color: var(--papel);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}
.requisitos__rejilla {
  /* OJO: aquí NO va `margin: 0`. Este <ul> lleva también la clase .interior, que centra con
     `margin-inline: auto`; el atajo lo borraría y la rejilla se pegaría al borde izquierdo. */
  list-style: none; margin-block: 0; padding: 0;
  display: grid; gap: clamp(1.75rem, 4vw, 2.5rem);
}
.requisito { min-width: 0; }
.requisito .etiqueta { color: var(--n400); margin-bottom: .9rem; }
.requisito p:not(.etiqueta) {
  margin: 0 0 .5rem;
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--n400);
  max-width: 42ch;
}
.requisito p:not(.etiqueta):first-of-type { color: var(--papel); }
.requisito p:last-child { margin-bottom: 0; }
.requisito__icono {
  width: 24px; height: 24px; display: block; margin-bottom: .9rem;
  fill: none; stroke: var(--turquesa); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
@media (min-width: 720px) {
  .requisitos__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ───────────────────────────────────────────────────────────────────────── 4 · multiplataforma */

.dispositivos { padding-block: var(--seccion); }
.dispositivos__interior { display: grid; gap: var(--hueco); align-items: center; }
@media (min-width: 900px) {
  .dispositivos__interior { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ─────────────────────────────────────────────────────────── 5 · el turno, paso a paso */

.turno { padding-block: var(--seccion) 0; }
.paso { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: center; padding-block: clamp(2rem, 5vw, 3.5rem); }
.paso__texto { min-width: 0; }
.paso__texto > p { color: var(--n600); }
.paso__texto > p:last-child { margin-bottom: 0; }
.paso__visual { min-width: 0; }

@media (min-width: 900px) {
  .paso { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
  .paso--invertido .paso__texto { order: 2; }
  .paso--invertido .paso__visual { order: 1; }
}

/* 5.3 · la cocina, en oscuro y a sangre: es la foto más luminosa de la página. */
.paso-oscuro {
  background: var(--tinta);
  color: var(--papel);
  margin-block: clamp(2rem, 5vw, 3.5rem);
  position: relative;
  overflow: hidden;
}
.paso-oscuro .etiqueta { color: var(--n400); }
.paso-oscuro .paso__texto > p { color: var(--n400); }

/* La principal manda; la segunda se recuesta debajo, a la derecha, y se mete un poco por debajo. */
.paso__visual--apilado { display: grid; gap: clamp(.75rem, 2vw, 1.15rem); }
.paso__visual--chica { width: min(66%, 320px); justify-self: end; }
@media (min-width: 560px) { .paso__visual--chica { margin-top: clamp(-2.5rem, -4vw, -1rem); } }

/* 5.4 · el celular de la cuenta cobrada, con la ventana de cobro al lado. */
.paso__visual--montaje { display: grid; gap: clamp(.75rem, 2.5vw, 1.25rem); align-items: end; }
.paso__visual--celular { width: min(78%, 360px); justify-self: start; }
.paso__visual--modal { width: min(70%, 300px); justify-self: end; }
@media (min-width: 560px) {
  .paso__visual--montaje { grid-template-columns: minmax(0, 1fr) minmax(0, .74fr); }
  .paso__visual--celular, .paso__visual--modal { width: auto; }
  .paso__visual--modal { margin-bottom: clamp(1rem, 4vw, 2.5rem); }
}

/* 5.5 · la comanda y el ticket, dos objetos de papel, uno al lado del otro. */
.paso__visual--par { display: grid; gap: clamp(.75rem, 2.5vw, 1.25rem); align-items: start; }
@media (min-width: 480px) { .paso__visual--par { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }

/* ────────────────────────────────────────────────────────────────────────── 6 · caja y corte */

.corte { background: var(--tinta); color: var(--papel); padding-block: var(--seccion); position: relative; overflow: hidden; }
.corte .etiqueta { color: var(--n400); }
.corte .bloque__texto > p { color: var(--n400); }
.corte__interior { display: grid; gap: var(--hueco); align-items: center; position: relative; z-index: 1; }
/* El recorte del corte mide 560 px de ancho y no hay más: por encima de eso se estiraría, y una
   captura estirada en la sección que habla de cuadrar el dinero es justo donde no conviene. */
.corte__visual { max-width: 560px; margin-inline: auto; width: 100%; }
@media (min-width: 900px) {
  .corte__interior { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* ───────────────────────────────────────────────────────────────── 7 · el modo sin conexión */
/* La sección estrella: el tratamiento más fuerte de la página. Fondo más profundo que el resto de
   las oscuras, el resplandor turquesa grande y el título al tamaño de un hero. */

.sinred {
  position: relative;
  overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, #143F52 0%, var(--tinta) 55%, #07202B 100%);
  color: var(--papel);
  padding-block: clamp(4rem, 9vw, 7.5rem);
  border-block: 1px solid var(--n700);
}
.sinred__interior { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; position: relative; z-index: 1; }
.sinred .etiqueta { color: var(--turquesa); }
.sinred h2 { font-size: clamp(2.1rem, 1.5rem + 2.7vw, 3.5rem); }
.sinred__sub { margin-top: 1.25rem; color: var(--n400); font-size: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); }
.sinred__visual { position: relative; margin: 0; display: grid; justify-items: center; }
.sinred__chip {
  position: relative; z-index: 1; display: block; width: min(100%, 455px);
  border-color: rgba(73, 237, 203, .32);
  box-shadow: 0 0 0 1px rgba(73, 237, 203, .16), 0 10px 30px rgba(0, 0, 0, .35), 0 30px 70px rgba(0, 0, 0, .42);
}
.sinred__chip img { display: block; width: 100%; }
.sinred__pie {
  position: relative; z-index: 1; margin-top: 1.25rem;
  font-size: .9375rem; color: var(--n400); text-align: center; max-width: 42ch;
}
@media (min-width: 900px) {
  .sinred__interior { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(3rem, 6vw, 5rem); }
}

/* ────────────────────────────────────────────────────────────────────── 8 · la vista del dueño */

.dueno { padding-block: var(--seccion); }
.rejilla-funciones { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 620px) { .rejilla-funciones { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .rejilla-funciones { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }

.funcion {
  background: var(--blanco);
  border: 1px solid var(--n300);
  border-radius: var(--r-md);
  padding: 1.35rem 1.35rem 1.5rem;
  box-shadow: var(--sombra-1);
}
.funcion h3 { font-size: 1.0625rem; margin: .9rem 0 .4rem; letter-spacing: -.01em; }
.funcion p { margin: 0; font-size: .9375rem; color: var(--n600); }
.funcion__icono {
  width: 26px; height: 26px; display: block;
  fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}

.dueno__visual { margin-top: clamp(2rem, 5vw, 3.25rem); max-width: 1000px; margin-inline: auto; }

/* ────────────────────────────────────────────────────────────────────────── 9 · la comparativa */

.comparativa { padding-block: var(--seccion); background: var(--n200); }
.celda { display: inline-flex; align-items: baseline; gap: .45rem; }
.marca-si, .marca-no {
  width: .95em; height: .95em; flex: 0 0 auto; align-self: center;
  fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.marca-si { stroke: var(--si); }
.marca-no { stroke: var(--no); }

/* LOS TRES ESTADOS DE NUESTRA COLUMNA. Las siluetas se distinguen SIN color y de un vistazo: disco
   lleno, aro hueco, aspa suelta. Medido: el turquesa sobre el fondo de la columna da 1.2-1.5:1, así
   que un disco liso sería una mancha; con aro de tinta, el aro da 11.5-14.2:1 y la paloma de tinta
   dentro del turquesa 9.67:1. El aro del opcional (#598381) da 3.4-4.2:1 y el aspa (#3F5D5B)
   5.8-7.2:1, los dos por encima del 3:1 que pide un objeto gráfico. */
.marca {
  width: 1.15em; height: 1.15em; flex: 0 0 auto; align-self: center;
  display: inline-grid; place-content: center; border-radius: 50%;
}
.marca svg { width: .78em; height: .78em; display: block; fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* INCLUIDO: bloque sólido turquesa con la paloma en tinta, la única forma en que el turquesa lleva
   un signo sobre fondo claro. */
.marca--incluido { background: var(--turquesa); box-shadow: inset 0 0 0 1px var(--tinta); }
.marca--incluido svg { stroke: var(--tinta); }
/* OPCIONAL CON COSTO: hueco, nunca lleno, y con un más en vez de la paloma. Ni entornando los ojos se
   confunde con el disco; y la celda dice la palabra, que es lo que de verdad se lee. */
.marca--opcional { background: transparent; box-shadow: inset 0 0 0 1.5px var(--secundario); }
.marca--opcional svg { stroke: var(--secundario); }

/* El pie de la tabla: qué significa opcional, dicho una vez. */
.comparativa__nota {
  margin: .9rem 0 0;
  max-width: 78ch;
  font-size: .8125rem;
  line-height: 1.55;
  color: var(--n600);
}

/* MÓVIL: la tabla se vuelve tarjetas, una por fila de comparación. Nunca un scroll horizontal ciego:
   el dueño de la fonda lee esto con el pulgar y no va a descubrir que la tabla se arrastra. */
.tabla-comparativa { width: 100%; border-collapse: collapse; margin: 0; }
.tabla-comparativa thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
.tabla-comparativa tr {
  display: block; background: var(--blanco);
  border: 1px solid var(--n300); border-radius: var(--r-md);
  margin-bottom: .875rem; overflow: hidden;
}
.tabla-comparativa th[scope="row"] {
  display: block; text-align: left;
  background: var(--tinta); color: var(--papel);
  padding: .8rem 1rem;
  font: 700 1rem/1.25 var(--titulos); letter-spacing: -.01em;
}
.tabla-comparativa td {
  display: grid; grid-template-columns: 8.25rem minmax(0, 1fr); gap: .75rem; align-items: start;
  padding: .75rem 1rem; border-top: 1px solid var(--n200); font-size: .9375rem;
}
.tabla-comparativa td::before {
  content: attr(data-columna);
  font-weight: 600; font-size: .8125rem; line-height: 1.5; color: var(--n600);
}
.tabla-comparativa td.tabla-comparativa__nosotros {
  background: var(--turquesa-tinte);
  box-shadow: inset 4px 0 0 var(--turquesa);
}
.tabla-comparativa td.tabla-comparativa__nosotros::before { color: var(--tinta); }

@media (min-width: 800px) {
  .comparativa__tabla {
    background: var(--blanco); border: 1px solid var(--n300);
    border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sombra-1);
  }
  /* REPARTO FIJO, Y NO ES UN CAPRICHO. Con el reparto automático el navegador da a cada columna lo
     que le sobra, y la del concepto —que es la que menos contenido tiene por celda— se quedaba
     exprimida hasta su palabra más larga: «Pedidos de apps de reparto» salía a renglón por palabra.
     Cuatro anchos escritos y se acabó. */
  .tabla-comparativa { table-layout: fixed; }
  .tabla-comparativa th[scope="col"]:first-child { width: 23%; }
  .tabla-comparativa th[scope="col"] + th[scope="col"] { width: 25.66%; }
  .tabla-comparativa thead { position: static; width: auto; height: auto; clip: auto; clip-path: none; }
  .tabla-comparativa tr { display: table-row; background: none; border: 0; border-radius: 0; margin: 0; }
  .tabla-comparativa th, .tabla-comparativa td { display: table-cell; vertical-align: top; }
  .tabla-comparativa thead th {
    background: var(--tinta); color: var(--papel);
    padding: 1rem 1.15rem; text-align: left;
    font: 700 1rem/1.25 var(--titulos); letter-spacing: -.01em;
  }
  .tabla-comparativa thead th.tabla-comparativa__nosotros { background: var(--turquesa); color: var(--tinta); }
  .tabla-comparativa tbody tr:nth-child(odd) { background: var(--blanco); }
  .tabla-comparativa tbody tr:nth-child(even) { background: var(--n100); }
  /* La franja de nuestra columna se pinta ENCIMA de la cebra con un degradado plano, para que las dos
     cosas convivan sin pelearse por la propiedad `background-color`. */
  .tabla-comparativa td.tabla-comparativa__nosotros,
  .tabla-comparativa th.tabla-comparativa__nosotros {
    background-image: linear-gradient(rgba(73, 237, 203, .18), rgba(73, 237, 203, .18));
    box-shadow: none;
  }
  .tabla-comparativa th[scope="row"] {
    background: none; color: var(--tinta);
    padding: .95rem 1.15rem; font-size: .9375rem; font-weight: 600;
  }
  .tabla-comparativa td { padding: .95rem 1.15rem; border: 0; font-size: .9375rem; }
  .tabla-comparativa td::before { content: none; }
}

/* El respaldo de la tabla: plegado, con las palabras exactas de cada empresa. <details> otra vez,
   que es el único revelado accesible sin JavaScript. */
.respaldo { margin-top: 1.5rem; border: 1px solid var(--n300); border-radius: var(--r-md); background: var(--blanco); }
.respaldo__resumen {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 52px; padding: .75rem 1.15rem;
  font-weight: 600; color: var(--tinta);
}
.respaldo__resumen::-webkit-details-marker { display: none; }
.respaldo__flecha { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: var(--n600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.respaldo[open] .respaldo__flecha { transform: rotate(180deg); }
.respaldo__cuerpo { padding: 0 1.15rem 1.25rem; border-top: 1px solid var(--n200); }
.respaldo__intro { margin: 1rem 0 1.5rem; font-size: .9375rem; color: var(--n600); }
.respaldo__fila + .respaldo__fila { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--n200); }
.respaldo__concepto { font-size: .9375rem; margin-bottom: .5rem; }
.respaldo__citas { margin: 0; font-size: .875rem; }
.respaldo__citas dt { font-weight: 600; color: var(--tinta); margin-top: .5rem; }
.respaldo__citas dd { margin: .15rem 0 0 1rem; color: var(--n600); }
.respaldo__ausente { font-style: italic; }

/* ──────────────────────────────────────────────────────────────────────────────── 10 · precio */

.precio { background: var(--tinta); color: var(--papel); padding-block: var(--seccion); }
.precio .etiqueta { color: var(--n400); }
.precio .cabecera-seccion__sub { color: var(--n400); }

.plan {
  background: var(--blanco); color: var(--tinta);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-oscura);
  overflow: hidden;
}
.plan__cabecera { padding: clamp(1.75rem, 5vw, 2.75rem); text-align: center; border-bottom: 1px solid var(--n200); }
.plan__precio { margin: 0; font: 700 clamp(3rem, 2.1rem + 4vw, 4.5rem)/1 var(--titulos); letter-spacing: -.035em; max-width: none; }
.plan__signo { font-size: .5em; vertical-align: .42em; margin-right: .08em; }
.plan__periodo { font: 500 .9375rem/1 var(--cuerpo); letter-spacing: 0; color: var(--n600); display: block; margin-top: .6rem; }
.plan__anual { margin: 1rem auto 0; max-width: 42ch; font-size: .9375rem; color: var(--n600); }
.plan__anual strong { color: var(--tinta); }
.plan__nota { margin: .35rem auto 1.5rem; max-width: 42ch; font-size: .875rem; color: var(--n600); }
.plan__cabecera .btn { max-width: 24rem; margin-inline: auto; }
.plan__prueba { margin: .9rem auto 0; max-width: 40ch; font-size: .8125rem; color: var(--n600); }
.plan__listas { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); padding: clamp(1.5rem, 4vw, 2.5rem); }
.plan__opcional { margin: .8rem 0 0; font-size: .8125rem; color: var(--n600); }
.plan__listas h3 { font-size: 1rem; }
.plan__listas .lista { margin-top: .9rem; }
.plan__listas li { font-size: .9375rem; color: var(--n600); }
@media (min-width: 860px) { .plan__listas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ───────────────────────────────────────────────────────────────────────────── 11 · preguntas */

.preguntas { padding-block: var(--seccion); }
.faq { border-top: 1px solid var(--n300); }
.faq__item { border-bottom: 1px solid var(--n300); }
.faq__pregunta {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 1.25rem;
  min-height: 60px; padding: .9rem 0;
  font: 600 clamp(1rem, .96rem + .25vw, 1.125rem)/1.35 var(--cuerpo); color: var(--tinta);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__flecha { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: var(--n600); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.faq__item[open] .faq__flecha { transform: rotate(180deg); }
.faq__respuesta { padding: 0 0 1.25rem; }
.faq__respuesta p { margin: 0; color: var(--n600); }

/* ──────────────────────────────────────────────────────────────────────────────── 12 · cierre */

.cierre { background: var(--turquesa); color: var(--tinta); padding-block: clamp(3rem, 7vw, 5.5rem); text-align: center; }
.cierre h2 { margin: 0 auto; max-width: 20ch; }
.cierre .btn { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
/* El botón de WhatsApp vive dentro de una fila con el número al lado: el margen del botón principal
   no le toca, o se descuelga y deja de estar a la altura del número. */
.cierre__wa .btn { margin-top: 0; }
.cierre__contacto { margin: 1.5rem auto 0; max-width: 54ch; font-size: .9375rem; color: #0A2836; text-wrap: pretty; }
.cierre__contacto a { color: #0A2836; text-decoration-thickness: 2px; font-weight: 600; }
/* El botón de WhatsApp y, al lado, el número como se lee: hay quien prefiere marcarlo a mano. */
.cierre__wa {
  margin: .75rem auto 0; max-width: none;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem .9rem;
}
.cierre__numero { font-size: .9375rem; font-weight: 600; color: #0A2836; white-space: nowrap; }
/* Contorno tinta sobre el turquesa del cierre: 9.67:1 con el fondo, y no compite con el botón oscuro. */
.btn--contorno { background: transparent; color: var(--tinta); border-color: rgba(13, 46, 61, .45); }
.btn--contorno:hover { background: rgba(13, 46, 61, .08); border-color: var(--tinta); color: var(--tinta); }

/* ─────────────────────────────────────────────────────────────────────────────────── 13 · el pie */

.pie { background: var(--tinta); color: var(--n400); padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.pie__interior { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; display: grid; gap: 1.75rem; }
.pie__marca { color: var(--papel); }
.pie__marca p { margin: .85rem 0 0; font-size: .9375rem; color: var(--n400); }
.pie__marca a, .pie__legal a, .pie__nav a { color: var(--papel); }
.pie__nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie__nav a, .pie__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; text-decoration: none; }
.pie__nav a:hover, .pie__legal a:hover, .pie__marca a:hover { text-decoration: underline; }
.pie__legal { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.pie__copy { margin: 0; font-size: .8125rem; color: #8FA6AD; }
@media (min-width: 860px) {
  .pie__interior { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; }
  .pie__copy { grid-column: 1 / -1; }
}

/* ──────────────────────────────────────────────────────── páginas secundarias (las legales) */

.pagina { padding-block: clamp(2rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.prosa { background: var(--blanco); border: 1px solid var(--n300); border-radius: var(--r-lg); padding: clamp(1.5rem, 4vw, 3rem); }
.prosa__ceja { margin: 0 0 .75rem; font: 600 .8125rem/1.35 var(--cuerpo); letter-spacing: .1em; text-transform: uppercase; color: var(--n600); }
.prosa h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; }
.prosa__fecha { margin: 0 0 2rem; font-size: .9375rem; color: var(--n600); }
.prosa h2 { margin: 1.75rem 0 .5rem; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.01em; }
.prosa p, .prosa li { max-width: var(--medida); }
.prosa ul { padding-left: 1.25rem; }
.prosa li { margin-bottom: .5rem; }