/* =================================================================
   ESTILOS.CSS — Web de Comandix (comandix.io) · v1.0.0 · 08/10/2026
   Estilo de la web de ejemplo que pasó Javier (Base44): fondo crema, el naranja
   del folleto y del robot, tarjetas blancas con borde suave e iconos en naranja.
   Pensada primero para el móvil (los dueños la abren desde el móvil).
   ================================================================= */

:root {
    --crema: #f5f5f7;      /* fondo de la página: gris claro (como apple.com) */
    --crema-2: #ebebef;
    --blanco: #ffffff;
    --tinta: #1f1a15;
    --texto: #4a4038;
    --gris: #7a6f65;
    --borde: #e3e3e8;
    --naranja: #f26b1d;
    --naranja-2: #ff8a1f;
    --naranja-suave: #fff1e6;
    --naranja-borde: #fbd5b8;
    --marron: #2b1a0e;
    --marron-2: #3d2716;
    --verde: #1f9d55;
    --verde-wa: #25d366;
    --sombra: 0 1px 2px rgba(43, 26, 14, .04), 0 8px 24px rgba(43, 26, 14, .06);
    --sombra-alta: 0 2px 4px rgba(43, 26, 14, .05), 0 18px 48px rgba(43, 26, 14, .12);
    --radio: 18px;
    --ancho: 1160px;
    --letra: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --letra-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--crema);
    color: var(--texto);
    font-family: var(--letra);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4 { color: var(--tinta); line-height: 1.12; margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--naranja); outline-offset: 3px; border-radius: 6px; }

.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 20px; }
.seccion { padding: 88px 0; }
.seccion.estrecha { padding: 64px 0; }
.etiqueta {
    display: inline-block;
    font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--naranja); margin-bottom: 14px;
}
.titulo { font-size: clamp(30px, 4.4vw, 46px); font-weight: 800; max-width: 760px; }
.entradilla { font-size: clamp(17px, 1.6vw, 19px); color: var(--texto); max-width: 680px; margin-top: 16px; }
.naranja { color: var(--naranja); }
.centrado { text-align: center; }
.centrado .titulo, .centrado .entradilla { margin-left: auto; margin-right: auto; }

/* ---------- Botones ---------- */
.boton {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 15px 24px; border-radius: 14px; border: 1px solid transparent;
    font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    white-space: nowrap;
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton:hover { transform: translateY(-1px); }
.boton.principal {
    background: var(--naranja); color: #fff;
    box-shadow: 0 10px 28px rgba(242, 107, 29, .35);
}
.boton.principal:hover { background: #e35f12; box-shadow: 0 14px 32px rgba(242, 107, 29, .42); }
.boton.secundario { background: var(--blanco); color: var(--tinta); border-color: var(--borde); }
.boton.secundario:hover { border-color: var(--naranja-borde); }
.boton.pequeno { padding: 10px 16px; font-size: 14px; border-radius: 12px; }
.boton.pequeno svg { width: 18px; height: 18px; }
/* «Prueba Comandix en nuestro restaurante demo»: texto largo, en el móvil baja a dos líneas */
.boton.demo { white-space: normal; text-align: left; }
/* Los botones que abren el WhatsApp del bot Comandix (probarlo): verde WhatsApp, distintos de los de ventas (naranja) */
.boton.principal[data-wa-demo], .boton.principal[data-wa-local] { background: #1fbd5b; box-shadow: 0 10px 28px rgba(37, 211, 102, .38); text-shadow: 0 1px 2px rgba(0, 0, 0, .18); }
.boton.principal[data-wa-demo]:hover, .boton.principal[data-wa-local]:hover { background: #18a94f; box-shadow: 0 14px 32px rgba(37, 211, 102, .45); }

/* ---------- Cabecera ---------- */
.cabecera {
    position: sticky; top: 0; z-index: 50;
    background: rgba(245, 245, 247, .82);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border-bottom: 1px solid transparent;
    transition: border-color .2s ease;
}
.cabecera.con-borde { border-bottom-color: var(--borde); }
.cabecera .contenedor { display: flex; align-items: center; gap: 16px; height: 68px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; }
.marca img { width: 38px; height: 38px; }
.marca .marca-palabra { width: auto; height: 17px; display: block; }   /* «Comandix» en Nexa Heavy (dibujo SVG) */
.menu { display: none; gap: 26px; margin-left: 24px; }
.menu a { text-decoration: none; color: var(--texto); font-size: 15px; font-weight: 600; }
.menu a:hover { color: var(--naranja); }
.cabecera .derecha { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.idiomas { display: flex; gap: 2px; background: var(--crema-2); border-radius: 10px; padding: 3px; }
.idioma {
    border: 0; background: transparent; color: var(--gris); cursor: pointer;
    font-size: 12px; font-weight: 700; padding: 6px 8px; border-radius: 8px; line-height: 1;
}
.idioma.activo { background: var(--blanco); color: var(--tinta); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
.cabecera .boton.pequeno { display: none; }

/* ---------- Portada ---------- */
.portada { position: relative; padding: 32px 0 40px; overflow: hidden; }
/* La portada, algo más ancha que el resto: los banners necesitan sitio para el texto y la ilustración */
.portada .contenedor { position: relative; display: grid; gap: 18px; max-width: 1320px; }
/* La frase de arriba de la portada: texto, no botón */
.portada-lema { font-size: clamp(14.5px, 1.5vw, 16px); color: var(--gris); line-height: 1.45; }
.portada-lema strong { color: var(--tinta); font-weight: 700; }
.portada-lema em { font-style: normal; color: var(--naranja); font-weight: 700; }
.portada h1 { font-size: clamp(38px, 6.4vw, 66px); font-weight: 800; margin-top: 22px; letter-spacing: -0.03em; }
.portada h1 .naranja, .portada .titular .naranja { display: block; text-shadow: 0 10px 40px rgba(242, 107, 29, .25); }
/* El titular de los banners 2.º a 4.º: como el h1, algo más pequeño porque son más largos */
.portada .titular { font-size: clamp(32px, 5.2vw, 54px); font-weight: 800; letter-spacing: -0.03em; color: var(--tinta); line-height: 1.12; }
.portada .titular.corto { font-size: clamp(38px, 6.4vw, 66px); }   /* tan grande como el h1 */
.portada .entradilla b { color: var(--tinta); }
.portada .entradilla .destaca { color: var(--naranja); font-weight: 800; letter-spacing: .02em; white-space: nowrap; }

/* Portada: banners que pasan deslizándose hacia la izquierda (web.js · 6). Todos miden lo que el más
   alto (no salta nada) y su texto va centrado en vertical. Los mandos van debajo, en el centro. */
.carrusel { overflow: hidden; margin: 0 -14px; padding: 4px 14px 26px; }
.carrusel-pista { display: flex; gap: 40px; transition: transform .7s cubic-bezier(.65, 0, .35, 1); }
.diapo { flex: 0 0 100%; min-width: 0; display: grid; gap: 28px; align-items: center; background: var(--blanco); border: 1px solid var(--borde); border-radius: 28px; box-shadow: var(--sombra); padding: 28px 22px; }
.diapo h1, .diapo .titular { margin-top: 0; }
.diapo-imagen { display: none; }
/* La ilustración del TPV: pantalla táctil de barra sobre su soporte y, debajo, la caja del dinero abierta */
.terminal-tpv { position: relative; margin: 0 auto; max-width: 470px; display: flex; flex-direction: column; align-items: center; }
.tpv-pantalla { position: relative; width: 100%; padding: 11px 11px 18px; background: linear-gradient(180deg, #262d3e, #151a25); border-radius: 18px; box-shadow: var(--sombra-alta), inset 0 0 0 1px rgba(255, 255, 255, .07); }
.tpv-pantalla img { display: block; width: 100%; height: auto; border-radius: 7px; }
.tpv-pantalla::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 6px #3ddc84; }
.tpv-cuello { width: 58px; height: 30px; background: linear-gradient(90deg, #232a39, #414b60 50%, #232a39); }
.tpv-pie { width: 190px; height: 11px; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #4a556c, #2a3142); }
.tpv-cajon { width: 94%; height: auto; margin-top: -1px; filter: drop-shadow(0 14px 22px rgba(43, 26, 14, .18)); }
.tpv-cuello { position: relative; }
/* El 1.er banner, en español: en el móvil, la conversación de verdad grabada (web.js · 6) en vez del chat dibujado */
.video-demo { display: none; width: 100%; height: auto; background: #efe7dd; }
.escena.con-video { justify-content: center; }
.escena.con-video .wa-cabecera, .escena.con-video .wa-chat, .escena.con-video .comanda, .escena.con-video .chapa { display: none; }
.escena.con-video .video-demo { display: block; }
.diapo .escena.con-video .movil .pantalla { height: auto; }
/* «Caja cerrada y cuadrada», al lado del soporte: entre la pantalla y la caja, sin tapar nada */
.tpv-cuello .chapa { top: 50%; right: auto; left: calc(100% + 16px); transform: translateY(-50%); white-space: nowrap; z-index: 1; }
/* La frase que invita a probar la demo, justo encima del botón */
.invitacion { margin-top: 22px; font-style: italic; font-size: 15px; line-height: 1.5; color: var(--texto); max-width: 600px; }
.invitacion + .acciones { margin-top: 12px; }
.sello-demo { flex: none; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .5); border-radius: 6px; padding: 2px 7px; line-height: 1.3; }
/* «DEMO / EN DIRECTO», en dos líneas centradas */
.sello-demo.dos-lineas { text-align: center; font-size: 10px; line-height: 1.2; padding: 3px 7px; white-space: nowrap; }
.carrusel-mandos { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: -24px; }
.carrusel-mandos[hidden] { display: none; }
.carrusel-punto { position: relative; width: 16px; height: 26px; border: 0; padding: 0; background: none; cursor: pointer; transition: width .3s ease; }
.carrusel-punto::before, .carrusel-punto i { content: ""; position: absolute; left: 0; top: 8px; height: 10px; border-radius: 999px; }
.carrusel-punto::before { right: 0; background: var(--borde); }
.carrusel-punto.activo { width: 64px; }
.carrusel-punto.activo::before { background: var(--naranja-borde); }
.carrusel-punto i { width: 0; background: var(--naranja); }
.carrusel-pausa { margin-left: 8px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--borde); background: var(--blanco); color: var(--texto); display: grid; place-items: center; cursor: pointer; padding: 0; }
.carrusel-pausa svg { width: 12px; height: 12px; }
.carrusel-pausa .si-seguir, .carrusel-pausa.pausado .si-pausa { display: none; }
.carrusel-pausa.pausado .si-seguir { display: block; }
.portada .gancho { margin-top: 22px; font-size: clamp(19px, 2vw, 22px); font-weight: 750; color: var(--tinta); line-height: 1.35; max-width: 640px; }
.portada .entradilla { margin-top: 12px; }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.garantias { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 22px; font-size: 14px; color: var(--gris); }
.garantias span { display: inline-flex; align-items: center; gap: 6px; }
.garantias svg { width: 16px; height: 16px; color: var(--verde); }

/* Escena: el móvil con el WhatsApp y la comanda que sale en cocina */
/* El móvil a la izquierda y, a su derecha, la chapa arriba y la comanda abajo: así la comanda
   no tapa los mensajes (que salen abajo del chat). En el móvil de verdad, uno debajo de otro. */
.escena { position: relative; width: 100%; max-width: 560px; margin: 0 auto; min-height: 560px; display: flex; justify-content: flex-start; }
.movil {
    position: relative; width: 300px; max-width: 100%;
    background: var(--blanco); border-radius: 38px; padding: 12px;
    box-shadow: var(--sombra-alta); border: 1px solid var(--borde);
}
.movil .pantalla { background: #efe7dd; border-radius: 28px; overflow: hidden; height: 520px; display: flex; flex-direction: column; }
.wa-cabecera { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--blanco); border-bottom: 1px solid var(--borde); }
.wa-cabecera img { width: 36px; height: 36px; border-radius: 50%; background: var(--crema-2); }
.wa-cabecera b { display: block; color: var(--tinta); font-size: 15px; line-height: 1.2; }
.wa-cabecera small { color: var(--verde); font-size: 12px; }
.wa-cabecera .wa { margin-left: auto; color: var(--gris); font-size: 11px; }
.wa-chat {
    flex: 1; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; overflow: hidden;
    background-image: radial-gradient(rgba(43, 26, 14, .05) 1px, transparent 1px);
    background-size: 14px 14px;
    justify-content: flex-end;
}
.burbuja {
    max-width: 86%; padding: 8px 11px 6px; border-radius: 12px; font-size: 13.5px; line-height: 1.42;
    color: var(--tinta); box-shadow: 0 1px 1px rgba(0,0,0,.06); white-space: pre-line;
    animation: entrar .35s ease both;
}
.burbuja .hora { display: block; text-align: right; font-size: 10.5px; color: var(--gris); margin-top: 2px; }
.burbuja.cliente { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 4px; }
.burbuja.bot { align-self: flex-start; background: var(--blanco); border-top-left-radius: 4px; }
.burbuja.aviso-ia { align-self: center; background: #fff6d6; color: #6b5300; font-size: 11.5px; text-align: center; max-width: 92%; border-radius: 8px; }
.escribiendo { align-self: flex-start; background: var(--blanco); border-radius: 12px; padding: 10px 14px; display: flex; gap: 4px; animation: entrar .25s ease both; }
.escribiendo i { width: 7px; height: 7px; border-radius: 50%; background: #b9ada1; animation: puntos 1.2s infinite ease-in-out; }
.escribiendo i:nth-child(2) { animation-delay: .15s; }
.escribiendo i:nth-child(3) { animation-delay: .3s; }
@keyframes puntos { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.comanda {
    position: absolute; right: 0; bottom: 30px; width: 218px;
    background: var(--blanco); border-radius: 14px; padding: 14px 16px;
    font-family: var(--letra-mono); font-size: 12px; color: var(--tinta);
    box-shadow: var(--sombra-alta); border: 1px solid var(--borde);
    opacity: 0; transform: translateY(14px);
    transition: opacity .5s ease, transform .5s ease;
}
.comanda.visible { opacity: 1; transform: none; }
.comanda .cab { display: flex; align-items: center; gap: 6px; font-weight: 700; border-bottom: 1px dashed var(--borde); padding-bottom: 8px; margin-bottom: 8px; }
.comanda .cab svg { width: 16px; height: 16px; color: var(--naranja); }
.comanda .cab span:last-child { margin-left: auto; color: var(--gris); font-weight: 400; }
.comanda .meta { color: var(--gris); margin-bottom: 8px; }
.comanda .linea { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; }
.comanda .nota { color: #c2410c; font-weight: 700; padding-left: 14px; }
.comanda .total { display: flex; justify-content: space-between; border-top: 1px dashed var(--borde); margin-top: 8px; padding-top: 8px; font-weight: 700; color: var(--naranja); }
.comanda .ok { display: flex; align-items: center; gap: 6px; color: var(--verde); margin-top: 8px; font-size: 11.5px; }
.comanda .ok svg { width: 14px; height: 14px; }
.chapa {
    position: absolute; right: 8px; top: 64px;
    display: flex; align-items: center; gap: 8px;
    background: var(--marron); color: #fff; border-radius: 12px; padding: 10px 14px;
    font-size: 13px; font-weight: 600; box-shadow: var(--sombra-alta);
}
.chapa .punto { width: 8px; height: 8px; border-radius: 50%; background: var(--verde-wa); box-shadow: 0 0 0 4px rgba(37, 211, 102, .25); animation: latido 1.6s infinite; }
@keyframes latido { 50% { box-shadow: 0 0 0 7px rgba(37, 211, 102, .08); } }

/* Cinta de lo que va pasando */
.cinta { border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); background: var(--blanco); overflow: hidden; }
.cinta-pista { display: flex; gap: 40px; width: max-content; padding: 14px 0; animation: cinta 46s linear infinite; }
.cinta-pista span { display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--texto); white-space: nowrap; }
.cinta-pista span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); }
@keyframes cinta { to { transform: translateX(-50%); } }

/* ---------- Tarjetas ---------- */
.rejilla { display: grid; gap: 18px; margin-top: 44px; }
.tarjeta {
    background: var(--blanco); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 26px; box-shadow: var(--sombra);
}
.icono {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
    background: var(--naranja-suave); border: 1px solid var(--naranja-borde); color: var(--naranja);
    margin-bottom: 18px; flex: none;
}
.icono svg { width: 23px; height: 23px; }
.tarjeta h3 { font-size: 19px; font-weight: 750; }
/* Programa de gestión: el nombre de cada característica, en pequeño encima del problema que resuelve */
.funciones-tpv .tarjeta { display: flex; flex-direction: column; }
.funciones-tpv .icono { margin-bottom: 14px; }
.funcion-nombre { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--naranja); margin-bottom: 6px; }
.funciones-tpv h3 { font-size: 18px; line-height: 1.3; }
.funciones-tpv p { font-size: 15px; }
.tarjeta p { margin-top: 8px; font-size: 15.5px; color: var(--texto); }
.puntos { margin-top: 16px; display: grid; gap: 8px; }
.puntos li { display: flex; gap: 10px; font-size: 15px; align-items: flex-start; }
.puntos li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--naranja); margin-top: 9px; flex: none; }

/* ¿Te suena? — antes y con Comandix, en una tabla (en el móvil, cada fila una debajo de otra) */
.tras-tabla { margin-top: 30px; display: flex; justify-content: center; }
.tras-tabla .boton { white-space: normal; text-align: center; }
.tabla-dolor { margin-top: 36px; background: var(--blanco); border: 1px solid var(--borde); border-radius: 22px; box-shadow: var(--sombra); overflow: hidden; }
.tabla-dolor table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.tabla-dolor th { text-align: left; padding: 16px 30px; }
.tabla-dolor th.col-antes { background: #fbeee4; }
.tabla-dolor th.col-despues { background: #e8f5ec; }
.tabla-dolor .rotulo, .tabla-dolor .rotulo-movil { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.tabla-dolor .col-antes .rotulo, .tabla-dolor .col-antes .rotulo-movil { color: #b45309; }
.tabla-dolor .col-despues .rotulo, .tabla-dolor .col-despues .rotulo-movil { color: var(--verde); }
.tabla-dolor svg { width: 16px; height: 16px; flex: none; }
.tabla-dolor .rotulo-movil { display: none; }
.tabla-dolor td { padding: 18px 30px; vertical-align: middle; border-top: 1px solid var(--borde); }
.tabla-dolor td.col-antes { background: #fcf8f5; }
.tabla-dolor td.col-antes p { color: var(--tinta); font-weight: 650; font-size: 16.5px; line-height: 1.45; }
.tabla-dolor td.col-despues { position: relative; }
.tabla-dolor td.col-despues p { font-size: 16px; line-height: 1.5; }
/* La flechita naranja entre «Antes» y «Con Comandix» */
.tabla-dolor td.col-despues::before { content: "→"; position: absolute; left: -13px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: var(--naranja); color: #fff; font-size: 14px; font-weight: 800; line-height: 26px; text-align: center; box-shadow: 0 4px 10px rgba(242, 107, 29, .35); }
@media (max-width: 699px) {
    .tabla-dolor thead { display: none; }
    .tabla-dolor table, .tabla-dolor tbody, .tabla-dolor tr, .tabla-dolor td { display: block; width: 100%; }
    .tabla-dolor tr + tr { border-top: 8px solid var(--crema); }
    .tabla-dolor td { padding: 16px 20px; border-top: 0; }
    .tabla-dolor td.col-despues { border-top: 1px dashed var(--borde); padding-top: 20px; }
    .tabla-dolor .rotulo-movil { display: inline-flex; margin-bottom: 6px; }
    .tabla-dolor td.col-despues::before { left: 50%; top: -13px; transform: translateX(-50%) rotate(90deg); }
}

/* «¿Lo sabías? 1,50 €», el golpe que abre «¿Te suena?»: a la izquierda la cifra sobre marrón; a la derecha
   la barra de un bar (foto) que se funde con el marrón, con el texto centrado encima */
.perdida { margin-bottom: 64px; border-radius: 28px; overflow: hidden; box-shadow: var(--sombra-alta); display: grid; background: var(--marron); }
.perdida-izq { position: relative; padding: 30px 26px 28px; }
.perdida-izq::after { content: ""; position: absolute; left: -120px; top: -150px; width: 380px; height: 380px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 107, 29, .28), transparent 70%); pointer-events: none; }
.perdida-izq > * { position: relative; z-index: 1; }
.perdida-pregunta { display: block; color: var(--naranja-2); font-size: clamp(20px, 2.1vw, 26px); font-weight: 600; letter-spacing: -0.01em; }
.perdida-cifra { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 2px; }
.cifra-grande { font-size: clamp(60px, 8.6vw, 104px); font-weight: 800; color: var(--naranja-2); letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.perdida-que { display: flex; flex-direction: column; color: var(--naranja-2); line-height: 1.05; }
.perdida-que b { font-size: clamp(28px, 3.4vw, 42px); font-weight: 800; letter-spacing: -0.02em; }
.perdida-que span { margin-top: 3px; font-size: clamp(15px, 1.7vw, 21px); font-weight: 700; }
.perdida-texto { margin-top: 18px; max-width: 470px; color: #e6d9cc; font-size: 17px; line-height: 1.5; }
.perdida-texto b { color: #fff; }
.perdida-der { position: relative; min-height: 230px; display: grid; place-content: center; justify-items: center; gap: 8px; padding: 34px 28px; text-align: center; color: #fff; isolation: isolate; }
/* La foto: un barman sirviendo un cóctel (Unsplash, Olena Bohovyk, licencia Unsplash: uso comercial gratis,
   sin atribución obligatoria), la parte de arriba. Encima, el fundido con el marrón para que se lea el texto. */
.perdida-foto { position: absolute; inset: 0; z-index: -2; background: #2b1a0e url(img/barra-bar.jpg) center 35% / cover no-repeat; }
.perdida-der::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
    radial-gradient(ellipse 62% 58% at 50% 50%, rgba(22, 12, 5, .62), transparent 78%),
    linear-gradient(180deg, var(--marron) 0%, rgba(43, 26, 14, .42) 34%, rgba(43, 26, 14, .2) 100%); }
.perdida-der p { text-wrap: balance; max-width: 420px; font-size: clamp(16px, 1.6vw, 18px); font-weight: 600; line-height: 1.45; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); }
.perdida-der .perdida-golpe { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; line-height: 1.25; }
.perdida-remedio { margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; color: var(--naranja-2); font-weight: 800; font-size: 18px; text-decoration: none; text-shadow: 0 1px 12px rgba(0, 0, 0, .45); background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; text-align: center; }
.perdida-remedio:hover span { text-decoration: underline; text-underline-offset: 4px; }
.perdida-remedio svg { width: 20px; height: 20px; transition: transform .2s ease; }
.perdida-remedio:hover svg { transform: translateX(4px); }

/* Para quién: los 8 tipos de negocio, solo el nombre y su foto, en pequeño (2 por fila en el móvil; 4 desde 700 px:
   filas siempre completas). Como mucho 920 px de ancho, para que no crezcan en pantallas grandes. */
#para-quien .titulo { max-width: 980px; }
.negocios { margin-top: 32px; max-width: 920px; display: flex; flex-wrap: wrap; gap: 14px; }
.negocio-tipo { flex: 0 1 calc(50% - 7px); background: var(--blanco); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden; box-shadow: var(--sombra); display: flex; flex-direction: column; }
.negocio-foto { aspect-ratio: 3 / 2; display: grid; place-items: center; background: var(--naranja-suave); border-bottom: 2px dashed var(--naranja-borde); color: var(--naranja); }
.negocio-foto svg { width: 30px; height: 30px; opacity: .7; }
.negocio-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.negocio-foto.con-foto { background: var(--crema-2); border-bottom: 0; }
.negocio-tipo h3 { padding: 10px 10px 12px; text-align: center; font-size: 14.5px; line-height: 1.25; flex: 1; display: grid; place-items: center; }
@media (min-width: 700px) { .negocio-tipo { flex-basis: calc(25% - 10.5px); } .negocio-tipo h3 { font-size: 15.5px; } }



/* Franja oscura: papeles en regla */
.franja { background: var(--marron); color: #f3e9de; border-radius: 28px; padding: 44px 28px; position: relative; overflow: hidden; }
.franja::after { content: ""; position: absolute; right: -120px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 107, 29, .35), transparent 70%); pointer-events: none; }
.franja .etiqueta { color: var(--naranja-2); }
.franja .titulo { color: #fff; max-width: none; font-size: clamp(28px, 3.8vw, 42px); }
.franja .titulo .bloque { display: block; color: var(--naranja-2); }
.franja .titulo .linea { display: block; }   /* «INSPECCIONES.» y «Sanidad, Trabajo, Hacienda.», cada una en su línea */
.franja .entradilla { color: #d9cbbd; }
.ley { display: grid; gap: 14px; margin-top: 34px; position: relative; z-index: 1; }
.ley div { background: var(--marron-2); border: 1px solid rgba(255, 255, 255, .08); border-radius: 16px; padding: 18px; }
.ley > div > b { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 16px; }
.ley > div > b svg { width: 20px; height: 20px; color: var(--naranja-2); flex: none; }
.ley p { margin-top: 6px; font-size: 14.5px; color: #d9cbbd; }
.ley p strong { color: #fff; font-weight: 700; }

/* Precios */
.precios { display: grid; gap: 18px; margin-top: 44px; align-items: stretch; }
.precio { display: flex; flex-direction: column; }
.precio .nombre { font-size: 18px; font-weight: 750; color: var(--tinta); }
.precio .cifra { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; color: var(--tinta); }
.precio .cifra b { font-size: 50px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.precio .cifra span { color: var(--gris); font-size: 16px; }
.precio .aclara { font-size: 14px; color: var(--gris); margin-top: 6px; min-height: 22px; }
.precio .puntos { flex: 1; }
.precio .boton { margin-top: 24px; width: 100%; }
.precio.estrella { background: var(--marron); border-color: var(--marron); color: #f3e9de; position: relative; box-shadow: var(--sombra-alta); }
.precio.estrella .nombre, .precio.estrella .cifra { color: #fff; }
.precio.estrella .cifra span, .precio.estrella .aclara { color: #d9cbbd; }
.precio.estrella .puntos li { color: #f3e9de; }
.precio .sello { position: absolute; top: -13px; left: 26px; background: var(--naranja); color: #fff; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 5px 12px; box-shadow: 0 6px 16px rgba(242, 107, 29, .35); }
.regalo { margin-top: 16px; background: rgba(242, 107, 29, .16); border: 1px solid rgba(242, 107, 29, .4); border-radius: 12px; padding: 12px 14px; font-size: 14.5px; color: #ffd9bf; display: flex; gap: 10px; }
.regalo svg { width: 20px; height: 20px; color: var(--naranja-2); flex: none; margin-top: 2px; }
.regalo b { color: #fff; }
/* La solución: recuadro oscuro con el precio grande y, dentro, las piezas del pack (2 grandes y 4 pequeñas) */
.pack { margin-top: 36px; background: var(--marron); border-radius: 28px; padding: 34px 18px 30px; box-shadow: var(--sombra-alta); position: relative; overflow: hidden; }
.pack::after { content: ""; position: absolute; right: -140px; top: -160px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 107, 29, .3), transparent 70%); pointer-events: none; }
.pack > * { position: relative; z-index: 1; }
.pack-cabeza { display: grid; justify-items: center; text-align: center; }
.pack .sello { background: var(--naranja); color: #fff; font-size: 14.5px; font-weight: 700; border-radius: 999px; padding: 8px 18px; box-shadow: 0 8px 20px rgba(242, 107, 29, .35); }
.pack .cifra { margin-top: 30px; margin-bottom: 30px; display: flex; align-items: baseline; gap: 8px; color: #fff; }
/* «Por sólo» encima del 200 €, empezando donde empieza el 2; «/mes» debajo, acabando donde acaba el €.
   Los dos casi pegados al número (la separación va con el tamaño del 200 €). */
.pack .cifra .cifra-num { position: relative; display: inline-block; color: #fff; font-size: inherit; line-height: 1; }
.pack .cifra .por { position: absolute; left: .04em; bottom: 100%; margin-bottom: calc(clamp(62px, 9vw, 96px) * -0.13); line-height: 1;   /* = tamaño del 200 €: casi pegado */ white-space: nowrap; color: #d9cbbd; font-size: 15px; }
.pack .cifra b { font-size: clamp(62px, 9vw, 96px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.pack .cifra .mes { position: absolute; right: .02em; top: 100%; margin-top: calc(clamp(62px, 9vw, 96px) * -0.07); color: #d9cbbd; font-size: 15px; line-height: 1; white-space: nowrap; }
.pack .aclara { margin-top: 10px; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: 14px; color: #d9cbbd; }
.pack-grandes, .pack-pequenas { display: grid; gap: 18px; }
.pack-grandes { margin-top: 30px; }
/* Las 4 apps, menos protagonistas: compactas y en una fila (2 × 2 en el móvil) */
.pack-pequenas { margin-top: 18px; grid-template-columns: 1fr 1fr; gap: 12px; }
.pieza { background: var(--blanco); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; }
.pieza-foto { position: relative; flex: none; aspect-ratio: 16 / 7; min-height: 0; overflow: hidden; background: #1b2232; }
.pieza-foto img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.pieza.pequena .pieza-foto { aspect-ratio: 16 / 8; }
@media (max-width: 699px) { .pieza.grande .pieza-foto { aspect-ratio: 16 / 9; } }   /* en el móvil, algo más alta: que se vea */
/* El hueco para la imagen de las piezas pequeñas (hasta tenerla) */
.pieza-foto.vacia { display: grid; place-items: center; background: var(--naranja-suave); border-bottom: 2px dashed var(--naranja-borde); color: var(--naranja); }
.pieza-foto.vacia > svg { width: 34px; height: 34px; opacity: .7; }
.pieza-chip { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; background: var(--naranja); color: var(--marron); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; font-weight: 800; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.pieza-cuerpo { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
/* Para quién es cada pieza: abajo a la derecha (y todas a la misma altura en cada fila) */
.pieza-para { margin-top: auto; margin-bottom: -14px; padding-top: 12px; align-self: flex-end; text-align: right; color: var(--naranja); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
.pieza.pequena .pieza-para { font-size: 9px; padding-top: 10px; margin-bottom: -8px; }
.pieza h3 { font-size: 20px; font-weight: 800; }
.pieza.grande .pieza-cuerpo { padding: 22px 26px 26px; }
.pieza.grande h3 { font-size: clamp(21px, 2.2vw, 26px); }
.pieza.grande p { font-size: 16.5px; margin-top: 10px; }
.pieza h3 .naranja { text-transform: uppercase; letter-spacing: .02em; }
.pieza h3 .sub { color: var(--tinta); font-weight: 650; }
.pieza h3 .sub::before { content: "· "; color: var(--gris); }
.pieza.pequena h3 { font-size: 16px; }
.pieza.pequena .pieza-cuerpo { padding: 14px 16px 16px; }
.pieza.pequena p { font-size: 14px; margin-top: 4px; line-height: 1.45; }
.pieza.pequena .pieza-foto.vacia > svg { width: 26px; height: 26px; }
.pieza p { margin-top: 8px; font-size: 15.5px; color: var(--texto); }
.pieza-etiquetas { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 7px; }
.pieza-etiquetas li { background: var(--crema-2); border: 1px solid var(--borde); border-radius: 8px; padding: 4px 10px; font-size: 13.5px; font-weight: 600; color: var(--tinta); line-height: 1.4; }
.pack-acciones { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* «Lo quiero TODO por 200 € al mes (+IVA)»: más grande, y el (+IVA) en pequeño */
.boton-pack { font-size: 18px; padding: 17px 28px; white-space: normal; text-align: center; }
.boton-pack b { font-weight: 900; }
.boton-pack small { font-size: 12px; font-weight: 600; opacity: .9; }

.horario { margin-top: 22px; display: grid; gap: 24px; }
.horario h3 { font-size: 20px; }
.horario .boton { width: 100%; grid-column: 1 / -1; }
.tabla-horario { width: 100%; border-collapse: collapse; font-size: 15px; margin-top: 4px; }
.tabla-horario td { padding: 9px 0; border-bottom: 1px solid var(--borde); }
.tabla-horario td:last-child { text-align: right; font-weight: 700; color: var(--tinta); white-space: nowrap; }
.tabla-horario tr:last-child td { border-bottom: 0; }
.sin-iva { text-align: center; color: var(--gris); font-size: 14px; margin-top: 22px; }

/* Contacto */
.llamada { background: var(--blanco); border: 1px solid var(--borde); border-radius: 28px; padding: 40px 26px; box-shadow: var(--sombra-alta); display: grid; gap: 28px; align-items: center; position: relative; overflow: hidden; }
.llamada::after { content: ""; position: absolute; right: -80px; bottom: -120px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 107, 29, .16), transparent 70%); pointer-events: none; }
.llamada .robot { width: 92px; height: 92px; }
.llamada .acciones { margin-top: 0; position: relative; z-index: 1; }
/* El cierre: la pregunta a todo lo ancho, centrada, y los botones debajo */
.llamada { text-align: center; justify-items: center; }
.llamada .titulo { font-size: clamp(28px, 4vw, 44px); max-width: 860px; margin: 0 auto; }
.llamada .titulo .naranja { display: block; }
.llamada .titulo > span { display: block; text-wrap: balance; }   /* líneas igualadas: que no quede «antiguo,» solo */
.llamada .entradilla { margin-left: auto; margin-right: auto; }
.llamada .acciones { justify-content: center; }

/* Pie */
.pie { padding: 56px 0 30px; border-top: 1px solid var(--borde); margin-top: 40px; }
.pie .columnas { display: grid; gap: 34px; }
.pie h4 { font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); font-weight: 700; margin-bottom: 14px; }
.pie ul { display: grid; gap: 10px; }
.pie a { text-decoration: none; color: var(--texto); font-size: 15px; display: inline-flex; align-items: center; gap: 9px; }
.pie a:hover { color: var(--naranja); }
.pie a svg { width: 17px; height: 17px; color: var(--naranja); }
.pie .lema { margin-top: 12px; font-size: 15px; max-width: 360px; }
.pie .lema-frase { font-size: 16.5px; font-style: italic; font-weight: 600; color: var(--tinta); line-height: 1.45; }
.pie .abajo { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--borde); font-size: 13.5px; color: var(--gris); }
.pie .abajo nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.pie .abajo a { font-size: 13.5px; color: var(--gris); }
.enlace-boton { background: none; border: 0; padding: 0; color: var(--gris); font-size: 13.5px; cursor: pointer; text-decoration: none; }
.enlace-boton:hover { color: var(--naranja); }

/* Botón flotante de WhatsApp (móvil) */
.flotante {
    position: fixed; right: 16px; bottom: 16px; z-index: 40;
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--verde-wa); color: #fff; display: grid; place-items: center;
    box-shadow: 0 10px 28px rgba(37, 211, 102, .45);
    transition: transform .15s ease;
}
.flotante:hover { transform: scale(1.05); }
.flotante svg { width: 30px; height: 30px; }

/* Programa de gestión: el botón que abre la ventana con todas las características */
.ver-funciones { margin-top: 30px; }
.dialogo-funciones { width: min(1120px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; border: 0; border-radius: 26px; padding: 0 22px 26px; background: var(--crema); color: var(--texto); box-shadow: 0 30px 80px rgba(20, 10, 4, .4); }
.dialogo-funciones::backdrop { background: rgba(31, 19, 10, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialogo-funciones[open] { animation: entrar .3s ease both; }
.dialogo-cabeza { position: sticky; top: 0; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 24px 0 16px; background: var(--crema); border-bottom: 1px solid var(--borde); }
.dialogo-cabeza .etiqueta { margin-bottom: 6px; }
.dialogo-cabeza .titulo { font-size: clamp(24px, 3vw, 34px); }
.dialogo-cabeza .calc-cerrar { position: static; flex: none; width: 42px; height: 42px; font-size: 26px; background: var(--blanco); border: 1px solid var(--borde); box-shadow: var(--sombra); }
.dialogo-pie { margin-top: 26px; display: flex; justify-content: center; }
/* Lo que no es un problema que soluciona (p. ej. «Tú mandas, siempre»): debajo de las tarjetas, como texto normal */
.funciones-notas { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--borde); display: grid; gap: 10px; max-width: 760px; font-size: 15.5px; }
.funciones-notas b { color: var(--tinta); }
.dialogo-pie .boton { min-width: 200px; }
.dialogo-funciones .funciones-tpv { margin-top: 20px; }
@media (min-width: 700px) { .dialogo-funciones { padding: 0 32px 32px; } }

/* El aviso antes de escribirnos por WhatsApp */
.dialogo-aviso { width: min(640px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; border: 0; border-radius: 24px; padding: 32px 28px 28px; background: var(--blanco); color: var(--texto); box-shadow: 0 30px 80px rgba(20, 10, 4, .4); }
.dialogo-aviso::backdrop { background: rgba(31, 19, 10, .7); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.dialogo-aviso[open] { animation: entrar .3s ease both; }
.dialogo-aviso .etiqueta { margin-bottom: 10px; padding-right: 44px; }   /* que no se monte con la × */
.aviso-titulo { font-size: clamp(19px, 2.4vw, 23px); font-weight: 800; line-height: 1.3; padding-right: 30px; }
.aviso-texto { margin-top: 16px; display: grid; gap: 12px; font-size: 15.5px; line-height: 1.55; }
.aviso-texto .puntos { margin-top: 0; }
.aviso-texto .puntos li { font-size: 15px; }
.aviso-texto strong { color: var(--tinta); }
.aviso-acciones { margin-top: 22px; display: flex; justify-content: center; }
.aviso-acciones .boton { white-space: normal; text-align: center; }
@media (min-width: 700px) { .dialogo-aviso { padding: 38px 40px 32px; } }

/* La calculadora de lo que se pierde (ventana encima de la página) */
.calc { width: min(460px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow: auto; border: 0; border-radius: 24px; padding: 30px 26px 26px; background: var(--blanco); color: var(--texto); box-shadow: 0 30px 80px rgba(20, 10, 4, .4); }
.calc::backdrop { background: rgba(31, 19, 10, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.calc[open] { animation: entrar .3s ease both; }
.calc-cerrar { position: absolute; right: 14px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--crema-2); color: var(--tinta); font-size: 22px; line-height: 1; cursor: pointer; }
.calc-cerrar:hover { background: var(--borde); }
.calc .etiqueta { margin-bottom: 8px; }
.calc-titulo { font-size: 24px; font-weight: 800; padding-right: 30px; }
.calc-ayuda { margin-top: 6px; font-size: 15px; color: var(--gris); }
.calc-form { margin-top: 20px; display: grid; gap: 12px; }
.calc-form[hidden], .calc-resultado[hidden], .calc-error[hidden] { display: none; }
.calc-campo { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; font-weight: 700; color: var(--tinta); }
.calc-campo input { width: 100%; font: inherit; font-weight: 600; font-size: 18px; padding: 11px 14px; border: 1.5px solid var(--borde); border-radius: 12px; background: #fbfbfd; color: var(--tinta); }
.calc-campo input:focus { outline: none; border-color: var(--naranja); box-shadow: 0 0 0 4px var(--naranja-suave); }
.calc-error { color: #c2410c; font-size: 14px; font-weight: 600; }
.calc-enviar { margin-top: 6px; width: 100%; }
.calc-resultado { margin-top: 18px; text-align: center; }
.calc-res-texto { font-size: 16px; color: var(--texto); }
.calc-cifra { margin-top: 6px; font-size: clamp(48px, 12vw, 64px); font-weight: 800; color: var(--naranja); letter-spacing: -0.03em; line-height: 1; }
.calc-res-anio { margin-top: 8px; font-size: 16px; color: var(--tinta); font-weight: 650; }
.calc-nota { margin-top: 10px; font-size: 12.5px; color: var(--gris); }
.calc-acciones { margin-top: 20px; display: grid; gap: 10px; }
.calc-acciones .boton { width: 100%; }
@media (max-width: 420px) { .calc-campo { grid-template-columns: 1fr; gap: 6px; } }

/* Aviso de cookies */
.cookies {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
    background: var(--blanco); border: 1px solid var(--borde); border-radius: 18px;
    box-shadow: var(--sombra-alta); padding: 18px; max-width: 560px; margin: 0 auto;
    display: none;
}
.cookies.visible { display: block; animation: entrar .3s ease both; }
.cookies p { font-size: 14.5px; color: var(--texto); }
.cookies p a { color: var(--naranja); font-weight: 600; }
.cookies .botones { display: flex; gap: 10px; margin-top: 14px; }
.cookies .boton { flex: 1; padding: 12px 16px; font-size: 15px; }

/* Páginas legales (privacidad.html, cookies.html): solo texto, cómodo de leer */
.legal { max-width: 760px; margin: 0 auto; padding: 48px 20px 72px; }
.legal .volver { display: inline-flex; align-items: center; gap: 8px; color: var(--naranja); font-weight: 600; text-decoration: none; font-size: 15px; }
.legal .volver svg { width: 18px; height: 18px; transform: rotate(180deg); }
.legal h1 { font-size: clamp(30px, 5vw, 42px); font-weight: 800; margin-top: 18px; }
.legal .fecha { color: var(--gris); font-size: 14px; margin-top: 8px; }
.legal h2 { font-size: 21px; margin-top: 38px; }
.legal p, .legal li { margin-top: 12px; font-size: 16.5px; }
.legal ul { list-style: disc; padding-left: 22px; }
.legal a { color: var(--naranja); }
.legal table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.legal th { color: var(--tinta); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.legal code { font-family: var(--letra-mono); font-size: 14px; background: var(--crema-2); padding: 1px 6px; border-radius: 6px; }
.legal .caja-nota { background: var(--naranja-suave); border: 1px solid var(--naranja-borde); border-radius: 14px; padding: 14px 16px; margin-top: 20px; font-size: 15.5px; }

/* Aparecer al bajar */
.aparece { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.aparece.visto { opacity: 1; transform: none; }

/* ---------- Pantallas más grandes ---------- */
@media (min-width: 700px) {
    .contenedor { padding: 0 32px; }
    .rejilla.r2, .rejilla.r3, .rejilla.r4 { grid-template-columns: repeat(2, 1fr); }
    .ley { grid-template-columns: repeat(2, 1fr); }
    .ley.cuatro { grid-template-columns: repeat(2, 1fr); }
    .cabecera .boton.pequeno { display: inline-flex; }
    .franja { padding: 56px 48px; }
    .llamada { padding: 56px 48px; }
    .pie .columnas { grid-template-columns: 1.4fr 1fr 1fr; }
    .horario { grid-template-columns: 1fr 1fr; align-items: start; }
    .cookies { left: 24px; right: auto; bottom: 24px; margin: 0; }
}
/* El banner del 1,50 €, en horizontal (la foto a la derecha) en cuanto hay sitio; apilado solo en el móvil */
@media (min-width: 760px) {
    .perdida { grid-template-columns: 1.15fr 1fr; }
    .perdida-izq { padding: 34px 0 34px 34px; }
    .perdida-der { padding: 34px 30px; }
    .perdida-der::before { background:
        radial-gradient(ellipse 62% 58% at 50% 50%, rgba(22, 12, 5, .62), transparent 78%),
        linear-gradient(90deg, var(--marron) 0%, rgba(43, 26, 14, .5) 26%, rgba(43, 26, 14, .16) 100%); }
    .cifra-grande { font-size: clamp(56px, 7.4vw, 104px); }
    .pack { padding: 40px 30px 34px; }
    .pack-grandes { grid-template-columns: 1fr 1fr; }
    .pack-pequenas { grid-template-columns: repeat(4, 1fr); gap: 14px; }
}
@media (min-width: 1000px) {
    .menu { display: flex; }
    .portada { padding: 40px 0 48px; }
    .perdida { grid-template-columns: 1.05fr 1fr; }
    .perdida-izq { padding: 40px 0 40px 48px; }
    .perdida-der { padding: 40px 44px; }
    .rejilla.r3 { grid-template-columns: repeat(3, 1fr); }
    .rejilla.r4 { grid-template-columns: repeat(4, 1fr); }
    .ley { grid-template-columns: repeat(5, 1fr); }
    .ley.cuatro { grid-template-columns: repeat(4, 1fr); }
    .precios { grid-template-columns: 1fr 1.08fr 1fr; }
    .pack { padding: 48px 40px 40px; }
    .flotante { display: none; }
}
/* «¿Te suena?»: 8 tarjetas → 4 por fila solo si hay sitio */
@media (min-width: 1100px) { .rejilla.r4-ancha { grid-template-columns: repeat(4, 1fr); } }

@media (min-width: 700px) { .diapo { padding: 40px; } }
/* En el móvil: el banner casi de borde a borde y la letra algo más pequeña, que los textos son largos */
@media (max-width: 699px) {
    .carrusel { margin: 0 -20px; padding: 4px 8px 22px; }
    .carrusel-pista { gap: 16px; }
    .diapo { padding: 26px 20px; border-radius: 22px; }
    .diapo h1 { font-size: 34px; }
    .diapo .titular { font-size: 29px; }
    .diapo .titular.corto { font-size: 34px; }
    .diapo .gancho { font-size: 18px; margin-top: 16px; }
    .diapo .entradilla { font-size: 16px; }
    .diapo .invitacion { margin-top: 18px; font-size: 14.5px; }
}
/* El móvil con el pedido de ejemplo dentro de un banner: tamaño fijo (móvil + comanda sin tapar el chat)
   y, si la columna es más estrecha, se encoge entero (zoom) para que quepa. */
.diapo-imagen { container-type: inline-size; }
.diapo .escena { width: 456px; max-width: none; min-height: 500px; margin: 0 auto; }
.diapo .movil { width: 268px; }
.diapo .movil .pantalla { height: 460px; }
.diapo .comanda { width: 188px; font-size: 11.5px; }
@container (max-width: 455px) { .diapo .escena { zoom: .9; } }
@container (max-width: 410px) { .diapo .escena { zoom: .8; } }
@container (max-width: 365px) { .diapo .escena { zoom: .7; } }

/* Banners con su ilustración a la derecha solo en pantallas anchas; en las estrechas, solo el texto */
@media (min-width: 1000px) {
    .diapo { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 44px; }
    .diapo-imagen { display: block; }
    .diapo h1 { font-size: clamp(40px, 3.5vw, 50px); }
    .diapo .titular { font-size: clamp(32px, 2.9vw, 40px); }
    .diapo .titular.corto { font-size: clamp(40px, 3.5vw, 50px); }
    .diapo .invitacion { margin-top: 20px; }
    .diapo .garantias { margin-top: 18px; }
}
/* Con más sitio, más para el texto que para la ilustración */
@media (min-width: 1280px) { .diapo { grid-template-columns: 1.15fr .85fr; } }
@media (max-width: 599px) {
    .escena { flex-direction: column; align-items: center; min-height: 0; }
    .movil .pantalla { height: 500px; }
    .chapa { position: relative; right: auto; top: auto; order: -1; margin-bottom: 14px; }
    .comanda { position: relative; right: auto; bottom: auto; align-self: flex-end; margin-top: -34px; width: 228px; }
}

/* Quien pide menos movimiento: todo quieto y a la vista */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .aparece { opacity: 1; transform: none; }
    .comanda { opacity: 1; transform: none; }
}

/* Los mandos de los banners (puntos y pausa), dentro del recuadro blanco del banner, abajo en el centro.
   El banner deja sitio abajo para que no tapen nada. */
.carrusel { position: relative; }
.carrusel-mandos { position: absolute; left: 0; right: 0; bottom: 42px; margin: 0; z-index: 2; }
.diapo { padding-bottom: 72px; }
@media (max-width: 699px) {
    .carrusel-mandos { bottom: 38px; }
    .diapo { padding-bottom: 62px; }
}
/* Clientes («solucionantes»): 3 tarjetas con la foto del equipo arriba, su comentario y su local (1 por fila en el
   móvil, 3 desde 760 px). Mientras no haya foto ni comentario: el hueco y el texto «pendiente» con borde de rayas. */
#clientes .entradilla { font-weight: 700; color: var(--tinta); }
.clientes { margin: 32px auto 0; max-width: 1000px; display: grid; gap: 18px; }
@media (min-width: 760px) { .clientes { grid-template-columns: repeat(3, 1fr); } }
.testimonio { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.testimonio-foto { aspect-ratio: 3 / 2; background: var(--crema-2); }   /* 3:2: en las fotos de grupo caben todos */
.testimonio-foto[aria-hidden] { display: grid; place-items: center; background: var(--naranja-suave); border-bottom: 2px dashed var(--naranja-borde); color: var(--naranja); }   /* el hueco, sin foto */
.testimonio-foto svg { width: 30px; height: 30px; opacity: .7; }
.testimonio-foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.testimonio-cuerpo { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px; flex: 1; }
.testimonio-texto { margin: 0; flex: 1; font-size: 16px; line-height: 1.55; color: var(--tinta); }
.testimonio-texto.pendiente { color: var(--gris); font-style: italic; border: 2px dashed var(--borde); border-radius: 12px; padding: 14px; min-height: 110px; display: grid; place-items: center; text-align: center; }
.tarjeta .testimonio-local { margin-top: 0; display: grid; gap: 2px; font-size: 14px; color: var(--gris); }
.testimonio-local b { font-size: 16.5px; color: var(--tinta); }
.testimonio-tipo { color: var(--naranja); font-weight: 700; }   /* el tipo de local, debajo del nombre */
.testimonio-pedir { width: 100%; }

/* Precios: con las tarjetas una debajo de otra (menos de 1000 px), la lista de puntos naranjas más apretada */
@media (max-width: 999px) {
    .precio .puntos { gap: 4px; }
    .precio .puntos li { line-height: 1.4; }
    .precio .puntos li::before { margin-top: 7px; }
}