/* =====================================================================
   HMI TV — hmitv.com · dirección «Cromo y ultramar»
   ---------------------------------------------------------------------
   La paleta NO se inventó: sale de decodificar public/assets/img/
   hmi-logo-512.png. El ultramar #000098 es el 11.8% de los píxeles del
   logo y el celeste #529bd9 es el de las letras «TV».

   Los contrastes están MEDIDOS, no estimados. Dos resultados condicionan
   todo lo de abajo:
     · #529bd9 sobre papel claro da 2.80:1 — NO vale como texto. Sobre
       ultramar da 4.85:1 y sí vale. Por eso hay --cielo y --cielo-ink.
     · #787878 sobre papel da 4.15:1 — tampoco. El texto secundario usa
       --cromo-700 (6.01:1).

   Reglas de la dirección, a propósito:
     · Sin sombras. La profundidad viene del color, el solapamiento y el
       metal.
     · Sin esquinas redondeadas en contenedores (sólo en el LNB del plato
       y en los campos, 2px, que es tolerancia de mecanizado, no estilo).
     · Sin degradados decorativos de fondo. Los degradados que hay son
       CROMO: bandas con paradas duras, que es lo que el ojo lee como
       metal pulido.
   ===================================================================== */

:root {
    /* --- Marca, extraída del logo --- */
    --ultramar:      #000098;
    --ultramar-deep: #00006b;
    --ultramar-lift: #1414b4;
    --cielo:         #529bd9;   /* acento SOBRE ultramar (4.85:1) */
    --cielo-ink:     #2f74b4;   /* mismo matiz, texto sobre claro (4.62:1) */

    /* --- Rampa de cromo --- */
    --cromo-100: #f4f5f7;
    --cromo-200: #e4e6ea;
    --cromo-300: #d2d2d2;
    /* NO usar como texto ni como icono: 2.61:1 sobre blanco, por debajo del
       4.5:1 de texto y del 3:1 de objeto gráfico. Sólo controles inhabilitados,
       que WCAG excluye. Para gris legible sobre claro está --cromo-700. */
    --cromo-500: #a0a0a0;
    --cromo-700: #5f5f5f;       /* texto secundario sobre claro (6.01:1) */
    --cromo-900: #2a2a2e;

    --papel:     #f7f8fa;
    --hero-mute: #b9c8e4;       /* texto secundario sobre ultramar (8.56:1) */

    --filete: 1px solid var(--cromo-300);
    --wrap: 1200px;
    /* Esquinas: rectas de serie. El tema del editor puede suavizarlas. */
    --radio: 0px;
}

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

body {
    margin: 0;
    background: var(--papel);
    color: var(--cromo-900);
    font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 17px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; display: block; }
p { margin: 0 0 1em; }

/* Display ancho en versalitas: la voz de la página. */
h1, h2, h3, .eyebrow, .stat-n {
    font-family: Archivo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 6.6vw, 5.6rem); text-transform: uppercase; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); text-transform: uppercase; }
h3 { font-size: 1.28rem; letter-spacing: -0.005em; }

/* Monoespaciada para cifras, etiquetas y numeración: el registro técnico. */
.mono, .eyebrow, .num, .rule-label, .field label, .foot-meta {
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.eyebrow {
    font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.22em; text-transform: uppercase;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 28px; }
.section { padding: clamp(64px, 8vw, 112px) 0; }
/* Estas cuatro existen porque la CSP prohíbe los atributos `style=`: sin
   ellas el navegador descarta el estilo y el maquetado se descoloca. */
.section-tight { padding-top: 14px; }
.mt-l  { margin-top: 26px; }
.mt-xl { margin-top: 34px; }

.skip {
    position: absolute; left: -9999px;
    background: var(--cielo); color: var(--ultramar-deep);
    padding: 12px 18px; font-weight: 700; z-index: 100;
}
.skip:focus { left: 0; top: 0; }

a { color: var(--cielo-ink); }
a:hover { color: var(--ultramar); }

/* ── Cabecera: filete inferior, sin sombra ─────────────────────────── */
.site-head {
    background: var(--ultramar);
    border-bottom: 1px solid var(--ultramar-lift);
}
.site-head .wrap {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; min-height: 74px;
}
/* min-height 44px: es el mínimo de objetivo táctil, y el logo es un enlace. */
.brand {
    display: inline-flex; align-items: center; gap: 13px;
    text-decoration: none; min-height: 44px;
}
.brand img { width: 40px; height: 40px; }
.brand-name {
    color: #fff; font-weight: 700; font-size: 1.16rem;
    letter-spacing: 0.02em; text-transform: uppercase;
}
.head-tel {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--cielo); text-decoration: none;
    /* Sin letter-spacing: en monoespaciada los dígitos ya van separados por
       construcción, y el extra hacía que el teléfono se leyera como tres
       números sueltos en vez de uno. El separador es un guion, el formato
       estadounidense de siempre: es lo que un cliente espera leer y marcar. */
    font-size: 0.9rem; white-space: nowrap;
}
.head-tel:hover { color: #fff; }
/* Menú (se enciende desde el editor). */
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: #fff; text-decoration: none; font-size: 0.82rem; font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase;
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.site-nav a:hover { color: var(--cielo); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Botones: rectangulares, de canto marcado ──────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 12px;
    padding: 17px 30px; min-height: 54px;
    font: inherit; font-weight: 700; font-size: 0.96rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    text-decoration: none; cursor: pointer;
    border: 2px solid transparent; border-radius: var(--radio);
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn-cielo { background: var(--cielo); color: var(--ultramar-deep); }
.btn-cielo:hover { background: #fff; color: var(--ultramar); }
.btn-line { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.btn-line:hover { border-color: var(--cielo); color: var(--cielo); }
.btn-ultramar { background: var(--ultramar); color: #fff; width: 100%; }
.btn-block { width: 100%; }
.btn-ultramar:hover { background: var(--ultramar-lift); }
.btn-ultramar:disabled { background: var(--cromo-500); cursor: default; }
.btn-marca { background: var(--ultramar); color: #fff; }
.btn-marca:hover { background: var(--ultramar-lift); }

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
    position: relative; overflow: hidden;
    background: var(--ultramar); color: #fff;
    perspective: 1400px;
    perspective-origin: 74% 46%;
}
.hero > .wrap {
    position: relative; z-index: 2;
    padding-top: clamp(64px, 9vw, 116px);
    padding-bottom: clamp(64px, 9vw, 116px);
    max-width: var(--wrap);
}
.hero-copy { max-width: 660px; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; color: var(--cielo); }
.hero-lede {
    margin: 26px 0 0; max-width: 44ch;
    color: var(--hero-mute); font-size: 1.12rem;
}
.hero .eyebrow { color: var(--cielo); display: block; margin-bottom: 22px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }

/* El plato sangra por el borde derecho y pisa al titular: es el gesto de
   la dirección. En pantallas estrechas se recoloca (ver el media query). */
.hero-scene {
    position: absolute; z-index: 1;
    top: 52%; right: -9%;
    width: min(720px, 58vw);
    margin-top: calc(min(720px, 58vw) * -0.407);   /* medio alto del SVG (620/760) */
    pointer-events: none;
    transform-style: preserve-3d;
    /* --sy lo mueve el scroll; --rx/--ry el puntero. Una sola transform con dos
       orígenes: si se separan, la segunda pisa a la primera. */
    transform: translate3d(0, var(--sy, 0px), 0)
               rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
/* Foto de fondo elegida en el editor: tapa el plato y los arcos, y lleva un
   velo (claro/medio/oscuro) para que el titular blanco siga leyéndose. */
.hero-bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.hero:has(.hero-bg:not([hidden])) :is(.hero-scene, .hero-arcs) { display: none; }
.hero:has(.hero-bg:not([hidden]))::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 50, .55); }
.hero[data-velo="claro"]::before  { background: rgba(0, 0, 50, .3); }
.hero[data-velo="oscuro"]::before { background: rgba(0, 0, 50, .78); }
.hero-scene.apuntando { transition: transform .12s ease-out; }
.hero-dish { display: block; width: 100%; }
/* Arcos de señal: 1px de celeste, nada más. */
.hero-arcs { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* Franja de datos bajo el hero: numeración en monoespaciada, sin círculos. */
.hero-strip {
    position: relative; z-index: 2;
    border-top: 1px solid var(--ultramar-lift);
    background: var(--ultramar-deep);
}
.hero-strip .wrap {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
}
.strip-item {
    padding: 26px 0 26px 26px;
    border-left: 1px solid var(--ultramar-lift);
}
.strip-item:first-child { padding-left: 0; border-left: 0; }
.num { color: var(--cielo); font-size: 0.76rem; letter-spacing: 0.16em; }
.strip-item p { margin: 7px 0 0; color: #fff; font-weight: 600; font-size: 1.02rem; }

/* ── Servicios: lista reglada, no tarjetas ─────────────────────────── */
.rules { border-top: var(--filete); margin-top: 48px; }
.rule {
    display: grid; grid-template-columns: 84px 1fr auto;
    gap: 28px; align-items: center;
    padding: 30px 20px 30px 4px;
    border-bottom: var(--filete);
    transition: background-color .16s ease, color .16s ease, padding-left .16s ease;
}
.rule:hover { background: var(--ultramar); color: #fff; padding-left: 22px; }
.rule-label { color: var(--cromo-700); font-size: 0.78rem; letter-spacing: 0.14em; }
.rule:hover .rule-label { color: var(--cielo); }
.rule-body h3 { margin-bottom: 5px; }
.rule-body p { margin: 0; color: var(--cromo-700); font-size: 0.98rem; max-width: 62ch; }
.rule:hover .rule-body p { color: var(--hero-mute); }
.rule-ico { color: var(--cromo-700); }
.rule:hover .rule-ico { color: var(--cielo); }

/* ── Sección de argumentos: rejilla con filetes, sin sombras ───────── */
.split {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 0; margin-top: 8px;
}
.split > div {
    padding: 34px 30px 34px 0;
    border-top: 2px solid var(--ultramar);
}
.split > div + div { padding-left: 30px; border-left: var(--filete); }
.split h3 { margin-bottom: 9px; }
.split p { margin: 0; color: var(--cromo-700); font-size: 0.98rem; }

.lede { color: var(--cromo-700); font-size: 1.1rem; max-width: 56ch; margin: 18px 0 0; }

/* ── Formulario: panel de ultramar, campos de canto cromado ────────── */
.quote { background: var(--ultramar); color: #fff; }
.quote-grid {
    display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(36px, 6vw, 84px); align-items: start;
}
.quote h2 { color: #fff; }
.quote .lede { color: var(--hero-mute); }
.quote-aside .eyebrow { color: var(--cielo); display: block; margin-bottom: 20px; }
.quote-list { list-style: none; margin: 34px 0 0; padding: 0; }
.quote-list li {
    display: flex; gap: 16px; align-items: baseline;
    padding: 15px 0; border-top: 1px solid var(--ultramar-lift);
    color: var(--hero-mute); font-size: 0.97rem;
}
.quote-list .num { flex-shrink: 0; }

.form-panel {
    background: var(--ultramar-deep);
    padding: clamp(26px, 3.4vw, 42px);
    /* Canto cromado superior: sin él el panel y el fondo son dos azules casi
       iguales y la pieza no se despega. */
    border-top: 3px solid var(--cielo);
    box-shadow: none;
}
.field { margin-bottom: 22px; }
.field label {
    display: block; margin-bottom: 9px;
    color: var(--cielo); font-size: 0.72rem;
    letter-spacing: 0.16em; text-transform: uppercase;
}
.req { color: #fff; }
.field input, .field select, .field textarea {
    width: 100%; padding: 14px 15px;
    font: inherit; font-size: 1rem; color: #fff;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.41);
    border-radius: 2px;
    transition: border-color .16s ease, background-color .16s ease;
}
.field textarea { resize: vertical; min-height: 108px; }
.field input::placeholder, .field textarea::placeholder { color: rgba(255,255,255,.53); }
.field select option { color: var(--cromo-900); background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--cielo);
    background: rgba(255,255,255,.12);
}

/* ── Sugerencias de dirección ───────────────────────────────────────
   El desplegable va sobre el panel de ultramar, así que se pinta claro:
   ahí sí se puede leer una lista larga de un vistazo. */
.field-suggest { position: relative; }
.suggest-list {
    position: absolute; z-index: 30; left: 0; right: 0; top: 100%;
    margin: 4px 0 0; padding: 0; list-style: none;
    max-height: 264px; overflow-y: auto;
    background: #fff;
    border: 1px solid var(--cielo);
    border-radius: 2px;
    box-shadow: 0 10px 24px rgba(0, 0, 60, .28);
}
.suggest-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 14px; border: 0; border-bottom: 1px solid var(--cromo-200);
    background: #fff; cursor: pointer; font: inherit;
}
.suggest-list li:last-child .suggest-item { border-bottom: 0; }
.suggest-item.is-active, .suggest-item:focus-visible {
    background: var(--cromo-100); outline: none;
}
.suggest-main { display: block; color: var(--cromo-900); font-size: .95rem; }
.suggest-sub  { display: block; color: var(--cromo-700); font-size: .8rem; margin-top: 2px; }
.suggest-help { margin-top: 8px; }
.hint { margin: 8px 0 0; color: var(--hero-mute); font-size: 0.82rem; }

/* ── Vía de contacto + permiso ──────────────────────────────────────
   Dos piezas que el cliente tiene que tocar a conciencia, así que se
   despegan del resto del formulario con un filete cromado arriba, el
   mismo recurso que separa el panel del fondo. Sin esquinas redondeadas
   ni sombras, como el resto de la pieza. */
.consent {
    margin: 30px 0 0; padding: 22px 0 0;
    border: 0; border-top: 1px solid rgba(255,255,255,.28);
}
.consent legend {
    padding: 0; margin-bottom: 14px;
    color: var(--cielo); font-size: 0.72rem;
    letter-spacing: 0.16em; text-transform: uppercase;
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* Las tres vías: celdas de canto recto, como los botones. */
.pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pick-opt { position: relative; display: block; cursor: pointer; }
/* El radio real se mantiene EN el flujo (no display:none) para que el
   navegador lo enfoque y `checkValidity()` lo cuente; sólo se oculta. */
.pick-opt input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    margin: 0; opacity: 0; cursor: pointer;
}
.pick-face {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 7px; min-height: 76px; padding: 12px 8px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.41);
    border-radius: 2px;
    transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.pick-face svg { width: 22px; height: 22px; fill: var(--cielo); transition: fill .16s ease; }
.pick-name {
    color: #fff; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
    font-family: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.pick-opt:hover .pick-face { border-color: var(--cielo); background: rgba(255,255,255,.12); }
/* Marcada: se invierte a cromo claro. El contraste del texto pasa a ser
   sobre fondo claro, por eso el ink oscuro y no el blanco. */
.pick-opt input:checked + .pick-face {
    background: var(--cielo); border-color: var(--cielo);
}
.pick-opt input:checked + .pick-face svg { fill: #00003d; }
.pick-opt input:checked + .pick-face .pick-name { color: #00003d; }
.pick-opt input:focus-visible + .pick-face { outline: 2px solid #fff; outline-offset: 2px; }
/* El campo que pide la vía elegida (ver app.js): cuelga de los botones, así
   que se le quita el margen inferior de `.field` y el aire de abajo lo pone
   `.agree`, que ya trae el suyo. */
.pick-field { margin: 18px 0 0; }

/* El permiso: casilla cuadrada dibujada a mano para poder darle el
   tamaño y el color de la marca; la real queda oculta pero operativa. */
.agree {
    /* `relative` a propósito: el checkbox real va absoluto y sin esto se
       colocaría respecto al ancestro posicionado que hubiera más arriba. Hoy
       cae en su sitio por casualidad; el día que alguien ponga `relative` en
       un contenedor de en medio, el objetivo de clic se iría de paseo. */
    position: relative;
    display: flex; align-items: flex-start; gap: 12px;
    margin-top: 20px; cursor: pointer;
}
.agree input {
    position: absolute; opacity: 0;
    width: 22px; height: 22px; margin: 0; cursor: pointer;
}
.agree-box {
    flex: 0 0 auto; display: grid; place-items: center;
    width: 22px; height: 22px; margin-top: 1px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 2px;
    transition: background-color .16s ease, border-color .16s ease;
}
.agree-box svg { width: 15px; height: 15px; fill: #00003d; opacity: 0; transition: opacity .12s ease; }
.agree:hover .agree-box { border-color: var(--cielo); }
.agree input:checked + .agree-box { background: var(--cielo); border-color: var(--cielo); }
.agree input:checked + .agree-box svg { opacity: 1; }
.agree input:focus-visible + .agree-box { outline: 2px solid #fff; outline-offset: 2px; }
.agree-text {
    color: var(--hero-mute); font-size: 0.84rem; line-height: 1.55;
}
.agree-text strong { color: #fff; font-weight: 600; }

@media (max-width: 420px) {
    /* A tres columnas el nombre se parte en móviles estrechos. */
    .pick { grid-template-columns: 1fr; gap: 8px; }
    .pick-face { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 0 14px; }
}

/* Trampa para bots: fuera de vista pero SIN display:none, que algunos
   rellenadores automáticos saltan. */
.hp { display: none !important; }
/* Aviso del formulario tras un envío rechazado (lo pone pagina.php con ?e=N). */
.form-error {
    margin: 0 0 20px; padding: 12px 14px; border-radius: 6px;
    background: #fff4e5; color: #7a3b00; border: 1px solid #f3c58a;
    font-size: 0.95rem; line-height: 1.45;
}
.form-error a { color: inherit; font-weight: 700; }

/* ── Confirmación ──────────────────────────────────────────────────── */
.thanks {
    background: var(--ultramar); color: #fff;
    min-height: 78vh; display: grid; place-items: center;
    text-align: center; padding: 56px 28px;
}
.thanks .eyebrow { color: var(--cielo); display: block; margin-bottom: 20px; }
.thanks p { color: var(--hero-mute); max-width: 52ch; margin-inline: auto; }

/* ── Aviso superior (se enciende desde el panel) ─────────────────── */
/* Una franja fina sobre la cabecera, en el mismo registro que la franja de
   datos del hero: ultramar profundo, texto blanco, enlace en celeste. Sin
   botón de cerrar a propósito: es una línea, no una ventana. */
.notice {
    background: var(--ultramar-deep); color: #fff;
    border-bottom: 1px solid var(--ultramar-lift);
    font-size: 0.95rem;
}
.notice .wrap {
    display: flex; flex-wrap: wrap; gap: 6px 22px;
    align-items: center; justify-content: center;
    min-height: 44px; padding-top: 8px; padding-bottom: 8px;
    text-align: center;
}
.notice-link {
    color: var(--cielo); font-size: 0.8rem; letter-spacing: 0.12em;
    text-transform: uppercase; text-decoration: none;
    display: inline-flex; align-items: center; min-height: 32px;
}
.notice-link:hover { color: #fff; text-decoration: underline; }

/* ── Galería de trabajos (se enciende desde el panel) ─────────────── */
/* Rejilla reglada, sin sombras ni esquinas: la foto va a sangre dentro de
   una celda con filete, y el pie en monoespaciada, como una etiqueta de
   archivo. Las fotos se recortan a 4:3 para que la rejilla no baile con
   fotos de móvil verticales y horizontales mezcladas. */
.gallery .shots {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0; margin-top: 40px;
    border-top: var(--filete); border-left: var(--filete);
}
.shot {
    margin: 0; padding: 14px;
    border-right: var(--filete); border-bottom: var(--filete);
    background: #fff;
}
.shot img {
    width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    background: var(--cromo-100);
}
.shot figcaption {
    margin-top: 10px; color: var(--cromo-700);
    font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
}

/* ── Cifras (bloque de la biblioteca) ──────────────────────────── */
/* Misma franja que la del hero pero sobre papel: número grande en display,
   etiqueta en monoespaciada, filetes entre celdas. */
.figures {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0; border-top: 2px solid var(--ultramar);
}
.figure { padding: 28px 24px 26px 0; border-bottom: var(--filete); }
.figure + .figure { padding-left: 24px; border-left: var(--filete); }
.stat-n { display: block; font-size: clamp(2.2rem, 4.5vw, 3.4rem); color: var(--ultramar); line-height: 1; }
.stat-l { display: block; margin-top: 8px; color: var(--cromo-700); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }

/* ── Opiniones (bloque de la biblioteca) ────────────────────────── */
.quotes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 0; margin-top: 40px; border-top: var(--filete); border-left: var(--filete);
}
.quote-card {
    margin: 0; padding: 28px 26px 24px; background: #fff;
    border-right: var(--filete); border-bottom: var(--filete);
    display: flex; flex-direction: column; gap: 18px;
}
.quote-card blockquote {
    margin: 0; font-size: 1.05rem; line-height: 1.5; color: var(--cromo-900);
    border-left: 3px solid var(--cielo); padding-left: 16px;
}
.quote-card figcaption { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; }
.quote-card figcaption .mono { font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ultramar); }
.quote-card .place { color: var(--cromo-700); font-size: 0.9rem; }

/* ── Preguntas frecuentes (bloque de la biblioteca) ─────────────── */
.faqs { margin-top: 36px; border-top: var(--filete); }
.faq-item { border-bottom: var(--filete); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 20px 44px 20px 0; position: relative;
    font-weight: 600; font-size: 1.05rem; color: var(--cromo-900);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+"; position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-family: "IBM Plex Mono", ui-monospace, monospace; color: var(--cielo-ink); font-size: 1.3rem;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p { margin: 0 0 22px; color: var(--cromo-700); max-width: 68ch; }

/* ── Zona de servicio (bloque de la biblioteca) ─────────────────── */
.areas { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.area {
    padding: 10px 16px; border: var(--filete); background: #fff;
    font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ultramar);
}

/* ── Banners con foto (bloque de la biblioteca) ─────────────────── */
/* La foto es un <img> y no un background: la CSP prohíbe `style=`. Un velo
   en degradado, sólo hacia el lado del texto, lo mantiene legible encima de
   cualquier foto sin apagar la mitad que no lleva texto. */
.photo-banner {
    position: relative; overflow: hidden;
    display: flex; align-items: center;
    min-height: clamp(380px, 48vw, 560px);
    background: var(--ultramar-deep); color: #fff;
}
.pb-img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.photo-banner::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(0, 0, 40, .82) 0%, rgba(0, 0, 40, .5) 50%, rgba(0, 0, 40, .08) 100%);
}
.pb-copy { position: relative; z-index: 1; width: 100%; padding-top: 72px; padding-bottom: 72px; }
.pb-copy h2 { max-width: 15ch; }
.pb-copy p { max-width: 44ch; margin: 18px 0 30px; font-size: 1.15rem; color: #e3e9f6; }
.banner-list > .photo-banner + .photo-banner { border-top: 3px solid var(--cielo); }

/* ── Imagen y texto (bloque de la biblioteca) ──────────────────── */
.it-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.it-media { margin: 0; }
.it-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); background: var(--cromo-100); }
.imagetext[data-lado="der"] .it-media { order: 2; }
/* Varios «imagen y texto» seguidos: separados, y en «alterno» la foto cambia de lado cada uno. */
.it-grid + .it-grid { margin-top: clamp(48px, 7vw, 96px); }
.imagetext[data-lado="alterno"] .it-grid:nth-child(even) .it-media { order: 2; }
.it-copy .eyebrow { display: block; margin-bottom: 14px; color: var(--cielo-ink); }
.it-copy .btn { margin-top: 30px; }

/* ── Tarjetas con foto (bloque de la biblioteca) ───────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; }
.photo-card {
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; color: var(--cromo-900);
    border: var(--filete); border-radius: var(--radio);
}
.photo-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--cromo-100); }
.pc-body { padding: 22px 22px 26px; }
.pc-body h3 { margin-bottom: 10px; }
.pc-body p { margin: 0; color: var(--cromo-700); }

/* ── Llamada a la acción (bloque de la biblioteca) ─────────────── */
.cta-band { background: var(--ultramar); color: #fff; padding: clamp(48px, 6vw, 84px) 0; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.cta-band p { margin: 12px 0 0; max-width: 52ch; color: var(--hero-mute); }
.cta-inner + .cta-inner { margin-top: 36px; padding-top: 36px; border-top: 1px solid rgba(255, 255, 255, .22); }

/* ── Cartel de la previa compartible (pagina.php?previa=…) ─────── */
/* Es una clase y no un style= porque la CSP de la web no admite estilos en línea. */
.previa-cartel {
    position: sticky; top: 0; z-index: 99999;
    background: #b91c1c; color: #fff; text-align: center;
    font: 600 13px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    padding: 6px 12px; letter-spacing: .04em;
}

/* ── Horario y contacto (bloque de la biblioteca) ──────────────── */
.hours-grid { margin-top: 32px; max-width: 640px; }
.hours-row { display: grid; grid-template-columns: 120px 1fr; gap: 12px 24px; padding: 16px 0; border-bottom: var(--filete); }
.hours-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cromo-700); padding-top: 3px; }
.hours-v { white-space: pre-line; color: inherit; text-decoration: none; }
a.hours-v:hover { text-decoration: underline; }
[data-alineacion="centro"] .hours-grid { margin-inline: auto; }
@media (max-width: 560px) { .hours-row { grid-template-columns: 1fr; gap: 4px; } }

/* ── Equipo (bloque de la biblioteca) ──────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 32px 24px; margin-top: 40px; }
.member { text-align: center; }
.member img { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; background: var(--cromo-100); margin-bottom: 18px; }
.member h3 { margin-bottom: 6px; font-size: 20px; }
.member p { margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cromo-700); }
[data-fondo="marca"] .member p, [data-fondo="oscuro"] .member p { color: var(--hero-mute); }

/* ── Precios (bloque de la biblioteca) ─────────────────────────── */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 40px; }
.plan {
    display: flex; flex-direction: column; padding: 30px 28px 32px;
    background: #fff; color: var(--cromo-900);
    border: var(--filete); border-radius: var(--radio);
}
.plan h3 { margin-bottom: 8px; }
.plan-price { margin: 0 0 18px; font-weight: 800; font-size: 34px; line-height: 1.1; color: var(--ultramar); }
.plan-features { margin: 0 0 26px; white-space: pre-line; color: var(--cromo-700); line-height: 1.7; flex: 1; }
.plan .btn { align-self: flex-start; }
[data-alineacion="centro"] .plan { align-items: center; }

/* ── Marcas (bloque de la biblioteca) ──────────────────────────── */
.brand-strip { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.brand img { height: 44px; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: opacity .2s, filter .2s; }
.brand:hover img { filter: none; opacity: 1; }
[data-fondo="marca"] .brand img, [data-fondo="oscuro"] .brand img { filter: grayscale(1) brightness(10); }
[data-alineacion="centro"] .brand-strip { justify-content: center; }

/* ── Vídeo y mapa (bloques de la biblioteca) ───────────────────── */
.video-box, .map-box {
    margin-top: 36px; overflow: hidden; border-radius: var(--radio);
    background: var(--cromo-100); border: var(--filete);
    aspect-ratio: 16 / 9; display: grid; place-items: center;
}
.map-box { aspect-ratio: 16 / 7; }
.video-frame, .map-frame { width: 100%; height: 100%; border: 0; display: block; }
.box-empty { margin: 0; padding: 24px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cromo-700); text-align: center; }

/* ── Ajustes finos de cada bloque (se eligen en el editor) ──────── */
/* Alineación, espacio, tamaño de letra y «oculto en móvil» van como
   atributos data-* en la etiqueta del bloque; nada de style= (la CSP). */
[data-alineacion="centro"] { text-align: center; }
[data-alineacion="centro"] :is(.lede, .hero-lede, .pb-copy p, .cta-band p, .faq-item p) { margin-inline: auto; }
[data-alineacion="centro"] :is(.areas, .hero-cta, .cta-inner) { justify-content: center; }
[data-alineacion="centro"] .it-copy { text-align: left; }
.section[data-espacio="compacto"], .cta-band[data-espacio="compacto"] { padding-top: 36px; padding-bottom: 36px; }
.section-tight[data-espacio="compacto"] { padding-top: 6px; }
.section[data-espacio="amplio"], .cta-band[data-espacio="amplio"] { padding-top: clamp(96px, 12vw, 160px); padding-bottom: clamp(96px, 12vw, 160px); }
.section-tight[data-espacio="amplio"] { padding-top: 40px; }
[data-letra="grande"] :is(p, .lede, li, summary, blockquote, .stat-l, .rule-text) { font-size: 1.14em; }
[data-letra="grande"] h2 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
[data-letra="grande"] h3 { font-size: 1.45rem; }
@media (max-width: 760px) {
    [data-movil="oculto"] { display: none !important; }
}
/* Botones de contorno para toda la web (Colores y letras → Botones). */
[data-botones="contorno"] :is(.btn-cielo, .btn-marca, .btn-ultramar) { background: transparent; border-color: currentColor; color: inherit; }
[data-botones="contorno"] .hero .btn-cielo, [data-botones="contorno"] .photo-banner .btn-cielo, [data-botones="contorno"] .cta-band .btn-cielo { color: #fff; }
[data-botones="contorno"] .btn-ultramar { color: #fff; border-color: rgba(255, 255, 255, .55); }
[data-botones="contorno"] :is(.btn-cielo, .btn-marca):hover { background: var(--cielo); color: var(--ultramar-deep); border-color: var(--cielo); }

/* ── Fondo de cada bloque (data-fondo, se elige en el editor) ───── */
/* Sobre fondo de marca u oscuro, todo lo que tiene color propio pasa a
   claro; las tarjetas blancas (opiniones, fotos) siguen blancas y su texto
   sigue oscuro. */
[data-fondo="claro"]  { background: #fff; color: var(--cromo-900); }
[data-fondo="gris"]   { background: var(--cromo-100); color: var(--cromo-900); }
[data-fondo="marca"]  { background: var(--ultramar); color: #fff; }
[data-fondo="oscuro"] { background: #0c0c16; color: #fff; }
:is([data-fondo="marca"], [data-fondo="oscuro"]) :is(.lede, .stat-l, .faq-item p, .shot figcaption) { color: var(--hero-mute); }
:is([data-fondo="marca"], [data-fondo="oscuro"]) :is(.stat-n, .faq-item summary, .rule-title) { color: #fff; }
:is([data-fondo="marca"], [data-fondo="oscuro"]) .it-copy .eyebrow { color: var(--cielo); }
:is([data-fondo="marca"], [data-fondo="oscuro"]) .figures { border-top-color: var(--cielo); }
:is([data-fondo="marca"], [data-fondo="oscuro"]) :is(.figure, .faq-item, .faqs) { border-color: rgba(255, 255, 255, .22); }
:is([data-fondo="marca"], [data-fondo="oscuro"]) .area { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
:is([data-fondo="marca"], [data-fondo="oscuro"]) .btn-marca { background: var(--cielo); color: var(--ultramar-deep); }
:is([data-fondo="claro"], [data-fondo="gris"]).cta-band p { color: var(--cromo-700); }
:is([data-fondo="claro"], [data-fondo="gris"]).cta-band .btn-cielo { background: var(--ultramar); color: #fff; }

/* ── Pie ───────────────────────────────────────────────────────────── */
.site-foot { background: var(--ultramar-deep); color: var(--hero-mute); padding: 48px 0; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 18px 34px; justify-content: space-between; align-items: center; }
.site-foot a {
    display: inline-flex; align-items: center; min-height: 44px;
    color: var(--cielo); text-decoration: none;
}
.site-foot a:hover { color: #fff; }
.site-foot .brand-name { font-size: 1rem; }
.foot-meta { font-size: 0.8rem; letter-spacing: 0.06em; }
/* Correo, dirección, horario y redes: sólo lo que se rellena en el editor. */
.foot-contact { display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center; margin-top: 18px; font-size: 0.9rem; }
.foot-contact:empty, .foot-contact:not(:has(*)) { display: none; }
.foot-row { white-space: pre-line; }
.social { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
.social a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--cielo); }
.social a:hover { color: #fff; }
.social-ico { width: 22px; height: 22px; fill: currentColor; }

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 940px) {
    .quote-grid { grid-template-columns: 1fr; }
    .it-grid { grid-template-columns: 1fr; }
    .imagetext[data-lado="der"] .it-media, .imagetext[data-lado="alterno"] .it-grid:nth-child(even) .it-media { order: 0; }
}
@media (max-width: 760px) {
    body { font-size: 16px; }
    /* El plato va DESPUÉS del texto. Está antes en el DOM (lo necesita el
       posicionamiento absoluto del escritorio), así que en vertical se
       reordena con flex: si no, empuja el titular y la llamada a la acción
       fuera de la primera pantalla, que es justo lo que no puede pasar. */
    .hero { display: flex; flex-direction: column; }
    .hero > .wrap { order: 1; padding-bottom: 8px; }
    .hero-scene {
        order: 2;
        position: relative; top: auto; right: auto; transform: none;
        width: 132%; max-width: none;
        margin: 18px 0 -14% -16%;
    }
    .hero-arcs { display: none; }   /* a este ancho sólo son ruido */
    .hero-strip { order: 3; }
    .hero-strip .wrap { grid-template-columns: 1fr; }
    .strip-item { padding: 20px 0; border-left: 0; border-top: 1px solid var(--ultramar-lift); }
    .strip-item:first-child { border-top: 0; }
    .rule { grid-template-columns: 1fr; gap: 10px; padding: 24px 14px 24px 4px; }
    .rule-ico { display: none; }
    .split > div + div { padding-left: 0; border-left: 0; }
    .hero-cta .btn { width: 100%; }
    .head-tel { display: none; }
}

/* ── Movimiento ─────────────────────────────────────────────────────
   Todo es transform/opacity: son las dos únicas propiedades que el navegador
   compone en la GPU sin volver a maquetar. Animar `top` o `height` aquí
   costaría un reflow por fotograma.

   Nada de esto se aplica si el visitante no tiene JS: las clases de aparición
   sólo muerden bajo `html.js-anim`, que pone el propio script. Si falla,
   la página se ve entera y quieta, que es el estado correcto.
   ────────────────────────────────────────────────────────────────── */

/* Flotación del plato. Va en la imagen y no en el escenario porque el
   escenario ya tiene la transform del puntero. */
@keyframes flotar {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -14px, 0); }
}
.js-anim .hero-dish { animation: flotar 9s ease-in-out infinite; }

/* Los arcos laten hacia fuera: el de dentro primero, el de fuera el último.
   Conserva la opacidad base de cada uno, que es la que da la profundidad. */
@keyframes latido-1 { 0%, 70%, 100% { opacity: .90; } 18% { opacity: 1; } }
@keyframes latido-2 { 0%, 70%, 100% { opacity: .55; } 18% { opacity: .92; } }
@keyframes latido-3 { 0%, 70%, 100% { opacity: .30; } 18% { opacity: .74; } }
.js-anim .hero-arcs path:nth-child(1) { animation: latido-1 3.6s ease-in-out infinite; }
.js-anim .hero-arcs path:nth-child(2) { animation: latido-2 3.6s ease-in-out .42s infinite; }
.js-anim .hero-arcs path:nth-child(3) { animation: latido-3 3.6s ease-in-out .84s infinite; }
.hero-arcs { transform: translate3d(0, var(--sy, 0px), 0); }

/* Entrada del hero: una sola vez, al cargar. */
@keyframes entrar {
    from { opacity: 0; transform: translate3d(0, 18px, -60px); }
    to   { opacity: 1; transform: none; }
}
.js-anim .hero-copy > * { animation: entrar .8s cubic-bezier(.22,.61,.36,1) backwards; }
.js-anim .hero-copy > *:nth-child(1) { animation-delay: .05s; }
.js-anim .hero-copy > *:nth-child(2) { animation-delay: .16s; }
.js-anim .hero-copy > *:nth-child(3) { animation-delay: .27s; }
.js-anim .hero-copy > *:nth-child(4) { animation-delay: .38s; }
.js-anim .hero-scene { animation: entrar 1.1s cubic-bezier(.22,.61,.36,1) backwards; }

/* Aparición al entrar en pantalla. El giro en X es lo que la hace leer como
   profundidad y no como un simple desvanecido. */
.js-anim .aparece {
    opacity: 0;
    transform: translate3d(0, 26px, -70px) rotateX(7deg);
    transform-origin: 50% 100%;
    transition: opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}
.js-anim .aparece.dentro { opacity: 1; transform: none; }

/* La lista de servicios se levanta un poco al pasar por encima. */
.rule { transform-style: preserve-3d; }
.js-anim .rule { transition: background-color .16s ease, color .16s ease,
                             padding-left .16s ease, transform .22s ease; }
.js-anim .rule:hover { transform: translate3d(0, -2px, 24px); }

/* El panel del formulario se inclina un pelo hacia el visitante. Muy poco:
   es donde se escribe, y un panel que se mueve mientras tecleas es un error. */
.js-anim .quote-grid { perspective: 1600px; }
.js-anim .form-panel { transform: rotateY(-1.4deg); transition: transform .5s ease; }
.js-anim .form-panel:focus-within { transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    /* Sin esto, lo que ya hubiera escrito el script en --sy/--rx/--ry se
       quedaría congelado en pantalla en vez de volver a su sitio. */
    .hero-scene, .hero-arcs { transform: none !important; }
    .js-anim .aparece { opacity: 1 !important; transform: none !important; }
    .js-anim .form-panel { transform: none !important; }
}