/* ============================================================================
   OKT SEGURIDAD INTELIGENTE — hoja de estilos única
   Identidad tomada de los catálogos PDF: carbón #141414, blanco, grises y
   línea fina. Tipografía de sistema (Arial/Helvetica), métricamente igual a la
   Liberation Sans usada en los PDF. Sin librerías externas.

   ---------------------------------------------------------------------------
   PALETA OSCURA (julio 2026)
   El negro es el color dominante del sitio: fondo del menú, de las secciones y
   del pie. Los grises dan profundidad (bloques elevados, separadores, texto
   secundario) y el blanco se reserva para dos cosas: los titulares y las
   "islas claras" donde van las FOTOS DE PRODUCTO (fichas, tarjetas de línea,
   mosaico de categorías y la ventana de ficha). Esas fotos vienen con fondo
   blanco desde el catálogo, así que su superficie tiene que ser blanco puro
   para que no se vea un recuadro; además así las cerraduras negras resaltan.

   CÓMO SE MANTIENE EL CONTRASTE
   Todo el color se resuelve con "variables de superficie" (--sup-*). Por
   defecto valen los tonos claros sobre negro; dentro de una isla clara se
   redefinen a tonos oscuros sobre blanco. Los componentes (botones, listas,
   reglas, etiquetas) usan esas variables, así que se invierten solos y NUNCA
   queda texto oscuro sobre fondo oscuro ni al revés.
   ========================================================================== */

:root {
  /* --- negros y grises de la marca --- */
  --negro: #141414;         /* carbón: fondo dominante */
  --negro-hondo: #0D0D0D;   /* pie de página: ancla la parte baja */
  --negro-alto: #1B1B1B;    /* bloque elevado: secciones destacadas */
  --linea-oscura: #262626;  /* separador sobre negro */
  --borde-oscuro: #3A3A3A;  /* borde de campos y botones de contorno */

  --gray: #9A9A9A;          /* gris de marca — 6,7:1 sobre negro */
  /* El #6A6A6A del catálogo sólo da 3,5:1 sobre negro, así que como TEXTO se
     sube a #8E8E8E (5,8:1). El tono original se conserva para bordes y filetes
     en --gris-filete, donde el contraste de lectura no aplica. */
  --gray2: #8E8E8E;
  --gris-filete: #6A6A6A;
  --hair: #E2E2E2;          /* línea fina sobre blanco */
  --white: #FFFFFF;
  --bg-soft: #F5F5F5;       /* gris muy suave dentro de las islas claras */

  /* --- variables de superficie: valores del CONTEXTO OSCURO (por defecto) --- */
  --sup-fondo: #141414;     /* el fondo sobre el que estoy pintando */
  --sup-titulo: #FFFFFF;    /* titulares, íconos, reglas y botón principal */
  --sup-texto: #C7C7C7;     /* texto corrido — 11:1 sobre negro */
  --sup-texto2: #A8A8A8;    /* texto secundario — 7,9:1 sobre negro */
  --sup-linea: #262626;     /* separadores */
  --sup-hover: #E4E4E4;     /* relleno del botón principal al pasar el ratón */

  --max: 1200px;
  --pad: 24px;
  --nav-h: 68px;

  --sans: Arial, "Helvetica Neue", Helvetica, "Segoe UI", "Liberation Sans", sans-serif;

  color-scheme: dark;       /* menús desplegables y barras de scroll en oscuro */
}

/* --- ISLAS CLARAS ---------------------------------------------------------
   Superficies blancas que existen para que las fotos de producto se vean
   nítidas. Al redefinir aquí las variables, todo lo que hay dentro (títulos,
   textos, listas, botones, etiquetas) se recolorea solo al contexto claro. */
.ficha,
.linea-tarjeta,
.categoria-tarjeta,
.modal__panel {
  --sup-fondo: #FFFFFF;
  --sup-titulo: #141414;
  --sup-texto: #2A2A2A;
  --sup-texto2: #6A6A6A;
  --sup-linea: #E2E2E2;
  --sup-hover: #000000;
  background: var(--sup-fondo);
  color: var(--sup-texto);
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 20px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--sup-texto);
  background: var(--negro);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 { color: var(--sup-titulo); line-height: 1.18; margin: 0 0 .5em; font-weight: 700; }
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.5rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); }
p { margin: 0 0 1em; }
strong { color: var(--sup-titulo); font-weight: 700; }

::selection { background: var(--white); color: var(--negro); }

.contenedor { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }

/* Rótulo pequeño en mayúsculas espaciadas — el recurso tipográfico del catálogo */
.rotulo {
  font-size: .69rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--sup-texto2); margin: 0 0 1rem;
}

/* Regla corta bajo los títulos, como en las portadas del catálogo */
.regla { width: 64px; height: 2px; background: var(--sup-titulo); border: 0; margin: 0 0 1.6rem; }

.centrado { text-align: center; }
.centrado .regla { margin-left: auto; margin-right: auto; }

/* ---------- secciones ----------
   Fondo negro por defecto. Una línea fina separa dos secciones seguidas del
   mismo tono, para que el corte se lea sin necesidad de cambiar de color. */
.seccion { padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--linea-oscura); }
.seccion--suave { background: var(--negro-alto); }
.seccion--linea { border-top: 1px solid var(--linea-oscura); }

/* Bloques destacados (constructoras, hotelería, catálogo, demostración):
   se elevan un tono para despegarse del negro plano. */
.oscuro { background: var(--negro-alto); }

.entradilla { font-size: 1.06rem; color: var(--sup-texto2); max-width: 62ch; }

/* Fotos de producto sueltas dentro de una sección (no van en tarjeta): se
   montan sobre una placa blanca, porque el recorte del catálogo trae fondo
   blanco y sobre negro se vería un rectángulo suelto. */
.rejilla--2 > div > picture {
  display: block; background: var(--white);
  padding: clamp(20px, 3vw, 38px); border: 1px solid var(--linea-oscura);
}

/* ---------- logo ----------
   Bloque blanco con "OKT" en negro: exactamente el logotipo provisional de las
   portadas del catálogo. Sobre el negro dominante es el elemento que más
   resalta de todo el sitio. */
.logo {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--negro);
  font-weight: 700; letter-spacing: .09em; line-height: 1;
  padding: .52em .72em; border-radius: 7px; text-decoration: none;
  font-size: 1.32rem;
}
.logo--claro { background: var(--white); color: var(--negro); }
.logo--grande { font-size: 2rem; border-radius: 11px; }

/* ---------- navegación ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 20, 20, .92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--linea-oscura);
}
.nav__caja {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
  height: var(--nav-h); display: flex; align-items: center; gap: 1.5rem;
}
.nav__menu {
  display: flex; align-items: center; gap: 1.75rem;
  margin-left: auto; list-style: none; padding: 0; margin-block: 0;
}
.nav__menu li { flex: none; }   /* el botón de WhatsApp no debe encogerse ni recortarse */

/* `:not(.boton)` es imprescindible: sin él estas reglas pisarían el color y el
   relleno del botón de WhatsApp del menú. */
.nav__menu a:not(.boton) {
  text-decoration: none; color: var(--sup-texto);
  font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: .4rem 0; border-bottom: 2px solid transparent; display: inline-block;
}
.nav__menu a:not(.boton):hover { color: var(--white); border-bottom-color: var(--borde-oscuro); }
.nav__menu a:not(.boton)[aria-current="page"] { color: var(--white); border-bottom-color: var(--white); }

.nav__hamburguesa {
  display: none; margin-left: auto; background: none; border: 1px solid var(--borde-oscuro);
  border-radius: 6px; width: 42px; height: 38px; cursor: pointer; padding: 0;
}
.nav__hamburguesa span, .nav__hamburguesa span::before, .nav__hamburguesa span::after {
  display: block; width: 18px; height: 1.5px; background: var(--white); content: ''; margin: 0 auto;
  transition: transform .2s ease, opacity .2s ease;
}
.nav__hamburguesa span::before { transform: translateY(-6px); }
.nav__hamburguesa span::after  { transform: translateY(4.5px); }
.nav__hamburguesa[aria-expanded="true"] span { background: transparent; }
.nav__hamburguesa[aria-expanded="true"] span::before { transform: rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] span::after  { transform: rotate(-45deg) translateY(1.5px); }

@media (max-width: 1120px) { .nav__menu { gap: 1.1rem; } }

@media (max-width: 900px) {
  .nav__hamburguesa { display: block; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: var(--nav-h);
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--negro); border-bottom: 1px solid var(--linea-oscura);
    padding: .5rem var(--pad) 1.25rem; margin: 0; display: none;
  }
  .nav__menu.abierto { display: flex; }
  .nav__menu li { border-top: 1px solid var(--linea-oscura); }
  .nav__menu a:not(.boton) { display: block; padding: .95rem 0; border-bottom: 0; }
  .nav__menu li:last-child { border-top: 0; padding-top: 1rem; }
  .nav__menu .boton { text-align: center; }
}

/* ---------- botones ----------
   Se pintan con las variables de superficie: sobre negro salen blancos con
   texto negro; dentro de una ficha blanca salen negros con texto blanco.
   Una sola regla, siempre con contraste máximo. */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  padding: .92em 1.6em; border-radius: 999px;
  border: 1px solid var(--sup-titulo);
  background: var(--sup-titulo); color: var(--sup-fondo);
  font-size: .78rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease;
  font-family: inherit; line-height: 1; white-space: nowrap;
}
.boton:hover { background: var(--sup-hover); border-color: var(--sup-hover); }
.boton--linea {
  background: transparent; color: var(--sup-titulo); border-color: var(--borde-oscuro);
}
.boton--linea:hover { background: var(--sup-titulo); color: var(--sup-fondo); border-color: var(--sup-titulo); }
/* dentro de una isla clara el contorno vuelve a la línea fina clara */
.ficha .boton--linea, .modal__panel .boton--linea { border-color: var(--sup-linea); }
.boton--peq { padding: .72em 1.15em; font-size: .68rem; letter-spacing: .1em; }
.boton__icono { width: 15px; height: 15px; fill: currentColor; flex: none; }

.botonera { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- portada de inicio ---------- */
.portada {
  /* leve degradado radial: da profundidad sin salirse del negro */
  background: radial-gradient(115% 85% at 76% 42%, #212121 0%, #141414 58%);
  overflow: hidden; position: relative;
}
.portada::after {   /* marco fino, como el del PDF */
  content: ''; position: absolute; inset: 22px; border: 1px solid var(--linea-oscura);
  pointer-events: none;
}
.portada__caja {
  max-width: var(--max); margin: 0 auto; padding: clamp(48px, 7vw, 84px) var(--pad);
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  position: relative; z-index: 1;
}
.portada__texto { color: var(--sup-texto); font-size: 1.08rem; max-width: 46ch; }
.portada__foto { display: flex; justify-content: center; align-items: center; }
.portada__foto img { max-height: min(62vh, 560px); width: auto; filter: drop-shadow(0 26px 54px rgba(0, 0, 0, .7)); }
.portada__pie {
  margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--linea-oscura);
  font-size: .8rem; color: var(--gray2);
}
@media (max-width: 860px) {
  .portada__caja { grid-template-columns: 1fr; text-align: left; }
  .portada__foto { order: -1; }
  .portada__foto img { max-height: 40vh; }
  .portada::after { inset: 12px; }
}

/* ---------- encabezado de página interior ---------- */
.cabecera {
  background: var(--negro); padding: clamp(46px, 6vw, 78px) 0 clamp(38px, 5vw, 62px);
  border-bottom: 1px solid var(--linea-oscura);
}
.cabecera p { color: var(--sup-texto2); max-width: 60ch; margin: 0; }

/* ---------- rejillas ---------- */
.rejilla { display: grid; gap: clamp(18px, 2.4vw, 32px); }
.rejilla--2 { grid-template-columns: repeat(2, 1fr); }
.rejilla--3 { grid-template-columns: repeat(3, 1fr); }
.rejilla--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .rejilla--3, .rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: 1fr; } }

/* ---------- sellos de confianza ---------- */
.sello { border-top: 2px solid var(--sup-titulo); padding-top: 1.1rem; }
.sello h3 { font-size: 1.02rem; margin-bottom: .35rem; }
.sello p { font-size: .93rem; color: var(--sup-texto2); margin: 0; }

/* ---------- rasgos con ícono (mismos íconos de la introducción del PDF) ---------- */
.rasgo { text-align: center; padding: 0 .5rem; }
.rasgo svg {
  width: 48px; height: 48px; margin: 0 auto .9rem; display: block;
  stroke: var(--sup-titulo); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.rasgo h3 { font-size: 1rem; margin-bottom: .3rem; }
.rasgo p { font-size: .9rem; color: var(--sup-texto2); margin: 0; }

/* ---------- tarjeta de línea (Premium / Plus) — isla clara ---------- */
.linea-tarjeta {
  border: 1px solid transparent;
  display: flex; flex-direction: column; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.linea-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 16px 38px rgba(0, 0, 0, .5); }
.linea-tarjeta__foto { background: var(--white); padding: 1.6rem; display: flex; justify-content: center; }
.linea-tarjeta__foto img { max-height: 250px; width: auto; }
.linea-tarjeta__cuerpo { padding: 1.5rem 1.7rem 1.8rem; border-top: 1px solid var(--sup-linea); }
.linea-tarjeta h3 { font-size: 1.5rem; margin-bottom: .2rem; }
.linea-tarjeta__meta { font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sup-texto2); }
.linea-tarjeta p { font-size: .95rem; color: var(--sup-texto2); margin: .8rem 0 1.1rem; }
.linea-tarjeta__enlace { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--sup-titulo); }
.linea-tarjeta__enlace::after { content: ' \2192'; }

/* ---------- mosaico de categorías — isla clara ---------- */
.categoria-tarjeta {
  position: relative; display: block; text-decoration: none;
  border: 1px solid transparent; transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.categoria-tarjeta:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(0, 0, 0, .45); }
.categoria-tarjeta img { height: 165px; width: auto; margin: 1.3rem auto .6rem; }
.categoria-tarjeta__pie { border-top: 1px solid var(--sup-linea); padding: .95rem 1.1rem; }
.categoria-tarjeta__num { font-size: .68rem; font-weight: 700; letter-spacing: .18em; color: var(--sup-texto2); }
.categoria-tarjeta h3 { font-size: .98rem; margin: .15rem 0 0; }

/* ---------- filtro de líneas (Productos) ---------- */
.filtro {
  position: sticky; top: var(--nav-h); z-index: 30;
  background: rgba(20, 20, 20, .95); border-bottom: 1px solid var(--linea-oscura);
  backdrop-filter: saturate(180%) blur(12px);
}
.filtro__caja {
  max-width: var(--max); margin: 0 auto; padding: .8rem var(--pad);
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.filtro__etiqueta { font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sup-texto2); margin-right: .4rem; }
.filtro__boton {
  border: 1px solid var(--borde-oscuro); background: transparent; color: var(--sup-texto);
  font-family: inherit; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: .6em 1.1em; border-radius: 999px; cursor: pointer; transition: all .15s ease;
}
.filtro__boton:hover { border-color: var(--white); color: var(--white); }
.filtro__boton[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--negro); }
.filtro__anclas { margin-left: auto; display: flex; flex-wrap: wrap; gap: .9rem; }
.filtro__anclas a { font-size: .7rem; color: var(--sup-texto2); text-decoration: none; }
.filtro__anclas a:hover { color: var(--white); text-decoration: underline; }
@media (max-width: 900px) { .filtro__anclas { display: none; } }

/* ---------- bloque de línea y categoría ---------- */
.linea-bloque { padding: clamp(46px, 6vw, 76px) 0 0; }
.linea-bloque__cabecera { border-top: 3px solid var(--sup-titulo); padding-top: 1.3rem; margin-bottom: 2.4rem; }
.linea-bloque__cabecera h2 { margin-bottom: .15rem; }
.linea-bloque__cabecera p { color: var(--sup-texto2); margin: 0; max-width: 62ch; }

.categoria-bloque { margin: 0 0 clamp(34px, 4.5vw, 56px); scroll-margin-top: calc(var(--nav-h) + 76px); }
.categoria-bloque__titulo {
  display: flex; align-items: baseline; gap: .9rem;
  border-bottom: 1px solid var(--sup-linea); padding-bottom: .7rem; margin-bottom: 1.7rem;
}
.categoria-bloque__num { font-size: .72rem; font-weight: 700; letter-spacing: .18em; color: var(--sup-texto2); }
.categoria-bloque__titulo h3 { font-size: 1.18rem; margin: 0; letter-spacing: .01em; }
.categoria-bloque__conteo { margin-left: auto; font-size: .78rem; color: var(--sup-texto2); }

/* ---------- ficha de producto — isla clara ----------
   Fondo blanco puro: es lo que hace que la cerradura se vea nítida y recortada,
   igual que en las páginas del catálogo. */
.fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: clamp(16px, 2vw, 26px); }

.ficha {
  border: 1px solid transparent;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .3);
}
.ficha:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .5); }
.ficha--oculta { display: none; }

.ficha__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .8rem 1rem; border-bottom: 1px solid var(--sup-linea);
}
.ficha__marca { font-size: .82rem; font-weight: 700; letter-spacing: .1em; color: var(--sup-titulo); }
.ficha__etiqueta {
  font-size: .58rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  background: var(--sup-titulo); color: var(--sup-fondo); padding: .38em .7em; border-radius: 999px; white-space: nowrap;
}
.ficha__foto {
  padding: 1.4rem 1.2rem; display: flex; align-items: center; justify-content: center;
  min-height: 216px; background: var(--white);
}
.ficha__foto img { max-height: 200px; width: auto; }
.ficha__cuerpo { padding: 0 1.2rem 1.2rem; display: flex; flex-direction: column; flex: 1; }
.ficha__codigo { font-size: 1.32rem; font-weight: 700; color: var(--sup-titulo); letter-spacing: -.01em; margin: 0; }
.ficha__tipo { font-size: .84rem; color: var(--sup-texto2); margin: .2rem 0 .9rem; min-height: 2.4em; }
.ficha__lista { list-style: none; margin: 0 0 1.1rem; padding: 0; border-top: 1px solid var(--sup-linea); padding-top: .85rem; }
.ficha__lista li { position: relative; padding-left: 1.15rem; font-size: .86rem; color: var(--sup-texto); margin-bottom: .38rem; line-height: 1.45; }
/* palomita dibujada en CSS, igual que el check vectorial de las fichas del PDF */
.ficha__lista li::before {
  content: ''; position: absolute; left: 0; top: .34em; width: .5rem; height: .27rem;
  border-left: 1.7px solid var(--sup-titulo); border-bottom: 1.7px solid var(--sup-titulo);
  transform: rotate(-45deg);
}
.ficha__demo {
  display: inline-flex; align-items: center; gap: .5em; align-self: flex-start;
  border: 1px solid var(--sup-linea); border-radius: 999px; padding: .34em .8em; margin-bottom: .9rem;
  font-size: .57rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--sup-texto2);
}
.ficha__demo::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--sup-titulo); flex: none; }
.ficha__acciones { margin-top: auto; display: flex; flex-direction: column; gap: .5rem; }
.ficha__acciones .boton { width: 100%; }

/* ---------- ventana de ficha completa — isla clara ---------- */
.modal { position: fixed; inset: 0; z-index: 100; display: none; }
.modal.abierto { display: block; }
.modal__fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .78); }
.modal__panel {
  position: relative; max-width: 940px; width: calc(100% - 2rem);
  max-height: 88vh; margin: 6vh auto 0; overflow: auto; border-radius: 2px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .6);
}
.modal__cerrar {
  position: absolute; top: .75rem; right: .75rem; width: 38px; height: 38px;
  border: 1px solid var(--sup-linea); background: var(--white); border-radius: 50%;
  font-size: 1.15rem; line-height: 1; cursor: pointer; color: var(--sup-titulo); font-family: inherit;
}
.modal__cerrar:hover { background: var(--bg-soft); }
.modal__cuerpo { display: grid; grid-template-columns: 1fr 1.15fr; gap: 0; }
.modal__foto { padding: 2rem; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--sup-linea); background: var(--white); }
.modal__foto img { max-height: 380px; width: auto; }
.modal__info { padding: 2.2rem 2.2rem 2rem; }
.modal__info h2 { font-size: 2rem; margin-bottom: .1rem; }
.modal__tipo { color: var(--sup-texto2); font-size: .96rem; margin-bottom: 1.2rem; }
.modal__info .ficha__lista { margin-bottom: 1.4rem; }
.modal__info .ficha__lista li { font-size: .92rem; }
@media (max-width: 780px) {
  .modal__cuerpo { grid-template-columns: 1fr; }
  .modal__foto { border-right: 0; border-bottom: 1px solid var(--sup-linea); padding: 1.4rem; }
  .modal__foto img { max-height: 240px; }
  .modal__info { padding: 1.5rem; }
  .modal__panel { margin-top: 3vh; max-height: 92vh; }
}
/* Sin JavaScript la ventana no se abre: la ficha muestra directamente la lista
   completa en lugar del resumen de tres puntos, y se oculta el botón. */
.ficha__completa { display: none; }
html.sin-js .ficha__completa { display: block; }
html.sin-js .ficha__resumen { display: none; }
html.sin-js .ficha__ver { display: none; }

/* ---------- formulario ---------- */
.contacto-rejilla { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
@media (max-width: 860px) { .contacto-rejilla { grid-template-columns: 1fr; } }

.dato { border-top: 1px solid var(--sup-linea); padding: 1.1rem 0; }
.dato__rotulo { font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--sup-texto2); margin-bottom: .3rem; }
.dato__valor { font-size: 1.02rem; color: var(--sup-titulo); word-break: break-word; }
.dato__valor a { text-decoration: none; border-bottom: 1px solid var(--borde-oscuro); }
.dato__valor a:hover { border-bottom-color: var(--white); }

.formulario {
  border: 1px solid var(--linea-oscura); padding: clamp(20px, 3vw, 36px);
  background: var(--negro-alto);
}
.seccion--suave .formulario, .oscuro .formulario { background: var(--negro); }
.campo { margin-bottom: 1.1rem; }
.campo label {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sup-texto2); margin-bottom: .4rem;
}
.campo input, .campo select, .campo textarea {
  width: 100%; font-family: inherit; font-size: .97rem; color: var(--white);
  padding: .8rem .9rem; border: 1px solid var(--borde-oscuro); border-radius: 2px;
  background: var(--negro);
}
.campo input::placeholder, .campo textarea::placeholder { color: #8A8A8A; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: 2px solid var(--white); outline-offset: -2px; border-color: var(--white);
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo--doble { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .campo--doble { grid-template-columns: 1fr; } }
.formulario__nota { font-size: .8rem; color: var(--sup-texto2); margin: 1rem 0 0; }
.formulario__nota a { color: var(--white); }

/* ---------- botón flotante de WhatsApp ----------
   Círculo blanco sobre el negro dominante: es el elemento con más contraste de
   la página, imposible de no ver. */
.wa-flotante {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--white); color: var(--negro);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); text-decoration: none;
  transition: transform .18s ease;
}
/* ¿Prefieres el verde reconocible de WhatsApp? Cambia las dos líneas de arriba por:
   background: #25D366; color: #FFFFFF;  — el resto del diseño no se altera. */
.wa-flotante:hover { transform: scale(1.06); }
.wa-flotante svg { width: 30px; height: 30px; fill: currentColor; }
@media (max-width: 600px) { .wa-flotante { right: 14px; bottom: 14px; width: 52px; height: 52px; } }

/* ---------- pie de página ---------- */
.pie {
  background: var(--negro-hondo); color: var(--sup-texto2);
  padding: clamp(48px, 6vw, 72px) 0 2rem; border-top: 1px solid var(--linea-oscura);
}
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 4vw, 56px); }
@media (max-width: 780px) { .pie__rejilla { grid-template-columns: 1fr; gap: 2rem; } }
.pie h4 { color: var(--white); font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; margin-bottom: 1rem; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .55rem; font-size: .93rem; }
.pie a { color: var(--sup-texto2); text-decoration: none; }
.pie a:hover { color: var(--white); }
.pie__texto { font-size: .93rem; color: var(--sup-texto2); max-width: 38ch; margin: 1.1rem 0 0; }
.pie__base {
  margin-top: clamp(32px, 4vw, 52px); padding-top: 1.4rem; border-top: 1px solid var(--linea-oscura);
  display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; justify-content: space-between;
  font-size: .74rem; color: var(--gray2); letter-spacing: .06em;
}

/* ---------- utilidades ---------- */
.saltar {
  position: absolute; left: -9999px; top: 0; background: var(--white); color: var(--negro);
  padding: .8rem 1.2rem; z-index: 200; text-decoration: none; font-weight: 700;
}
.saltar:focus { left: 0; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}