/* =========================================================================
   RANDE DISEÑO WEB — hoja de estilos única
   Sistema visual: «ingeniería». Naranja de obra sobre acero, esquinas
   rectas, cifras en monoespaciada, motivo de los tirantes del puente.
   Un solo archivo para las siete páginas. Sin dependencias externas.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. TIPOGRAFÍAS AUTOALOJADAS
   Se sirven desde este mismo servidor: ni una petición a terceros.
   Chivo es variable (un archivo cubre los pesos 400 a 900).
   ------------------------------------------------------------------------- */

@font-face {
  font-family: 'Chivo';
  src: url('../fuentes/Chivo-variable.woff2') format('woff2-variations'),
       url('../fuentes/Chivo-variable.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fuentes/IBMPlexMono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fuentes/IBMPlexMono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

/* Respaldo con métricas ajustadas: mientras carga Chivo se pinta Arial
   con el mismo alto de línea y anchura aproximada, de modo que al llegar
   la fuente real el texto no salta (evita el desplazamiento de diseño). */
@font-face {
  font-family: 'Chivo respaldo';
  src: local('Arial'), local('Helvetica Neue'), local('Liberation Sans');
  size-adjust: 97%;
  ascent-override: 92%;
  descent-override: 24%;
  line-gap-override: 0%;
}

/* -------------------------------------------------------------------------
   2. FICHAS DE COLOR Y MEDIDAS
   ------------------------------------------------------------------------- */

:root {
  /* Los cinco colores del sistema */
  --papel: #f0f2f1;
  --blanco: #ffffff;
  --tinta: #101619;
  --naranja: #b8410f;
  --acero: #17454f;
  --gris: #5c6866;

  /* Derivados: aclarados y oscurecidos de los anteriores */
  --prosa: #2a3336;
  --naranja-hover: #8e3009;
  --naranja-lavado: #fbf3ef;
  --acero-hondo: #123a43;
  --acero-texto: #d3dedf;
  --acero-tenue: #8fa8ab;
  --acero-linea: #3d6a73;
  --gris-pie: #8a9694;
  --linea: #c6cdca;
  --linea-suave: #e1e5e3;
  --linea-barra: #d7dcda;
  --pie-linea: #2c3538;

  /* Tipografías */
  --tipo-texto: 'Chivo', 'Chivo respaldo', 'Helvetica Neue', Arial, sans-serif;
  --tipo-dato: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;

  /* Ritmo vertical y anchura */
  --ancho: 1280px;
  --margen: 20px;
  --medida: 34em;
}

@media (min-width: 900px) {
  :root { --margen: 80px; }
}

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--tipo-texto);
  font-size: 16.5px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@media (min-width: 900px) {
  body { font-size: 18px; line-height: 1.5; }
}

h1, h2, h3, h4 {
  margin: 0;
  line-height: 1.04;
  letter-spacing: -0.025em;
  text-wrap: balance;
  font-weight: 900;
}

p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, svg { display: block; max-width: 100%; }

a { color: var(--naranja); text-decoration: none; }
a:hover { color: var(--naranja-hover); }

/* Foco visible en todo lo enfocable: obligatorio para navegación con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--naranja);
  outline-offset: 2px;
}

/* Salto al contenido para lectores de pantalla y teclado */
.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--naranja);
  color: var(--blanco);
  padding: 12px 18px;
  font-weight: 700;
  z-index: 100;
}
.saltar:focus {
  left: 0;
  color: var(--blanco);
}

.solo-lectores {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------------------------------
   4. RETÍCULA
   ------------------------------------------------------------------------- */

.franja { padding: 34px var(--margen); }
@media (min-width: 900px) { .franja { padding: 72px var(--margen); } }

.franja--blanca {
  background: var(--blanco);
  border-top: 1px solid var(--linea-barra);
  border-bottom: 1px solid var(--linea-barra);
}
.franja--acero { background: var(--acero); color: var(--blanco); }
.franja--acero h1, .franja--acero h2, .franja--acero h3 { color: var(--blanco); }
.franja--tinta { background: var(--tinta); color: var(--blanco); }
.franja--tinta h1, .franja--tinta h2, .franja--tinta h3 { color: var(--blanco); }

.centro { max-width: var(--ancho); margin-inline: auto; }

.pila { display: flex; flex-direction: column; }
.pila--s { gap: 10px; }
.pila--m { gap: 18px; }
.pila--l { gap: 26px; }
.pila--xl { gap: 36px; }

.rejilla { display: grid; gap: 24px; }
@media (min-width: 900px) {
  .rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 64px; }
  .rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
  .rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; }
}

.medida { max-width: var(--medida); }

/* -------------------------------------------------------------------------
   5. TIPOGRAFÍA APLICADA
   ------------------------------------------------------------------------- */

.titular {
  font-size: clamp(2.15rem, 7.2vw, 4.1rem);
  line-height: 0.98;
}

.titular-pagina { font-size: clamp(2rem, 5.6vw, 3.5rem); }

.titular-seccion {
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
}

.titular-bloque {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.entradilla {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--prosa);
}
.franja--acero .entradilla,
.franja--tinta .entradilla { color: var(--acero-texto); }

.etiqueta {
  font-family: var(--tipo-dato);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--naranja);
}
.franja--acero .etiqueta,
.franja--tinta .etiqueta { color: var(--acero-tenue); }

.dato {
  font-family: var(--tipo-dato);
  font-variant-numeric: tabular-nums;
}

.apunte { font-size: 0.92rem; color: var(--gris); }
.franja--acero .apunte,
.franja--tinta .apunte { color: var(--acero-tenue); }

/* -------------------------------------------------------------------------
   6. BOTONES
   Altura mínima 52 px: se pulsan con el pulgar sin fallar.
   ------------------------------------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  border: 0;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
@media (min-width: 900px) { .boton { min-height: 56px; font-size: 1.05rem; } }

.boton:active { transform: translateY(1px); }

.boton--principal { background: var(--naranja); color: var(--blanco); }
.boton--principal:hover { background: var(--naranja-hover); color: var(--blanco); }

.boton--linea {
  background: transparent;
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--tinta);
}
.boton--linea:hover { background: var(--tinta); color: var(--papel); }

.franja--tinta .boton--linea,
.franja--acero .boton--linea {
  color: var(--blanco);
  box-shadow: inset 0 0 0 1.5px var(--blanco);
}
.franja--tinta .boton--linea:hover,
.franja--acero .boton--linea:hover { background: var(--blanco); color: var(--tinta); }

.boton--ancho { width: 100%; }

.botonera { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 600px) { .botonera { flex-direction: row; flex-wrap: wrap; } }

/* -------------------------------------------------------------------------
   7. BARRA SUPERIOR
   ------------------------------------------------------------------------- */

.barra {
  background: var(--blanco);
  border-bottom: 1px solid var(--linea-barra);
  position: sticky;
  top: 0;
  z-index: 40;
}

.barra__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 12px var(--margen);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.marca { display: flex; align-items: baseline; gap: 8px; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.marca__nombre {
  font-weight: 900;
  font-size: 1.2rem;
  letter-spacing: -0.03em;
}
.marca__cola {
  font-family: var(--tipo-dato);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gris);
}
@media (min-width: 900px) {
  .marca__nombre { font-size: 1.4rem; }
  .marca__cola { font-size: 0.68rem; }
}

.menu { display: none; }
@media (min-width: 900px) {
  .menu { display: flex; align-items: center; gap: 30px; }
}
.menu a { color: var(--tinta); font-size: 0.95rem; }
.menu a:hover { color: var(--naranja); }
.menu a[aria-current='page'] {
  color: var(--naranja);
  box-shadow: inset 0 -2px 0 var(--naranja);
}
.menu .boton { min-height: 44px; padding: 10px 20px; font-size: 0.95rem; }

/* Botón de menú en móvil */
.hamburguesa {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  background: transparent;
  border: 1px solid var(--linea);
  color: var(--tinta);
  font-family: var(--tipo-dato);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
@media (min-width: 900px) { .hamburguesa { display: none; } }

.menu-movil {
  display: none;
  border-top: 1px solid var(--linea-barra);
  background: var(--blanco);
  padding: 8px var(--margen) 18px;
}
.menu-movil[data-abierto='true'] { display: block; }
@media (min-width: 900px) { .menu-movil { display: none !important; } }
.menu-movil a {
  display: flex;
  align-items: center;
  min-height: 52px;
  color: var(--tinta);
  border-bottom: 1px solid var(--linea-suave);
  font-size: 1.05rem;
}
.menu-movil a:hover { color: var(--naranja); }
.menu-movil .boton { margin-top: 14px; border-bottom: 0; }

/* -------------------------------------------------------------------------
   8. TIRANTES DEL PUENTE (marca gráfica)
   ------------------------------------------------------------------------- */

.tirantes { width: 100%; height: auto; display: block; }

/* -------------------------------------------------------------------------
   9. PIEZAS DE CONTENIDO
   ------------------------------------------------------------------------- */

/* Lista numerada con la cifra en monoespaciada */
.numerada { display: flex; flex-direction: column; }
.numerada > li {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--linea);
}
.numerada > li:last-child { border-bottom: 1px solid var(--linea); }
.numerada .cifra {
  font-family: var(--tipo-dato);
  font-size: 0.8rem;
  color: var(--naranja);
  padding-top: 3px;
}
@media (min-width: 900px) {
  .numerada--columnas {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 36px;
  }
  .numerada--columnas > li {
    grid-template-columns: 1fr;
    border-top: 1px solid var(--tinta);
    border-bottom: 0 !important;
    padding: 18px 0 0;
    gap: 12px;
  }
}

/* Lista con icono */
.con-icono { display: flex; flex-direction: column; gap: 14px; }
.con-icono > li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  align-items: start;
}
.con-icono svg { margin-top: 2px; }

/* Tarjeta */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (min-width: 900px) { .tarjeta { padding: 32px; } }

.tarjeta--destacada {
  border: 2px solid var(--naranja);
  background: var(--naranja-lavado);
}
@media (min-width: 900px) {
  .tarjeta--destacada { box-shadow: 0 0 0 6px var(--naranja-lavado); }
}

.tarjeta--acero {
  background: transparent;
  border: 1px solid var(--acero-linea);
  color: var(--blanco);
}
.tarjeta--acero-destacada {
  background: var(--acero-hondo);
  border: 2px solid var(--naranja);
  color: var(--blanco);
}

.precio {
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
}
.precio small {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--gris);
  letter-spacing: 0;
}
.tarjeta--acero .precio small,
.tarjeta--acero-destacada .precio small { color: var(--acero-tenue); }

.incluye {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--linea-suave);
  padding-top: 18px;
  font-size: 0.95rem;
}
.tarjeta--acero .incluye,
.tarjeta--acero-destacada .incluye {
  border-top-color: var(--acero-linea);
  color: var(--acero-texto);
}

/* Bloque con filete lateral */
.filete {
  border-left: 3px solid var(--acero);
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Cifra grande de dato */
.cifra-grande {
  font-family: var(--tipo-dato);
  font-weight: 500;
  font-size: clamp(2.8rem, 9vw, 4.9rem);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Tabla de dos columnas (extras, datos técnicos) */
.filas { display: flex; flex-direction: column; }
.filas > li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding: 13px 0;
  border-bottom: 1px solid var(--linea);
}
.filas .valor { font-family: var(--tipo-dato); font-size: 0.95rem; color: var(--acero); white-space: nowrap; }

/* Variante con descripción debajo del nombre y del precio */
.filas--detalle > li { padding: 16px 0; font-weight: 700; }
.filas--detalle > li:first-child { border-top: 1px solid var(--linea); }
.filas--detalle small {
  display: block;
  margin-top: 5px;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--gris);
}
.filas--detalle .valor { text-align: right; font-size: 1.05rem; font-weight: 500; }
.filas--detalle .valor small { font-size: 0.75rem; }

/* Consultas reales de buscador */
.busquedas { display: flex; flex-direction: column; gap: 10px; }
.busquedas > li {
  font-family: var(--tipo-dato);
  font-size: 0.95rem;
  color: var(--blanco);
  border-bottom: 1px solid var(--pie-linea);
  padding-bottom: 10px;
}
.busquedas > li:last-child { border-bottom: 0; padding-bottom: 0; }

/* -------------------------------------------------------------------------
   10. FORMULARIO
   ------------------------------------------------------------------------- */

.campo { display: flex; flex-direction: column; gap: 7px; }

.campo label {
  font-family: var(--tipo-dato);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gris);
}

.campo input,
.campo textarea {
  font-family: var(--tipo-texto);
  font-size: 1rem;
  color: var(--tinta);
  background: var(--blanco);
  border: 1px solid var(--linea);
  padding: 14px;
  width: 100%;
  min-height: 52px;
}
.campo textarea { min-height: 130px; resize: vertical; }
.campo input::placeholder,
.campo textarea::placeholder { color: #9aa4a2; }

.consentimiento {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  border-top: 1px solid var(--linea-suave);
  padding-top: 20px;
}
.consentimiento input {
  width: 22px;
  height: 22px;
  margin: 2px 0 0;
  accent-color: var(--naranja);
}
.consentimiento label {
  font-family: var(--tipo-texto);
  font-size: 0.9rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gris);
  line-height: 1.45;
}

/* Campo trampa: invisible para personas, visible para robots que lo rellenan */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.aviso {
  padding: 16px 18px;
  border-left: 3px solid var(--naranja);
  background: var(--naranja-lavado);
  font-size: 0.95rem;
}
.aviso--error { border-left-color: #8b3628; background: #f6e6e3; }

/* Información en capas del formulario: lo básico visible, el detalle al abrir */
.capa-rgpd {
  border: 1px solid var(--linea-suave);
  background: var(--papel);
  font-size: 0.88rem;
}
.capa-rgpd > summary {
  cursor: pointer;
  padding: 12px 14px;
  font-family: var(--tipo-dato);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gris);
}
.capa-rgpd > summary:hover { color: var(--tinta); }
.capa-rgpd > div { padding: 0 14px 14px; }
.capa-rgpd .tabla-legal { font-size: 0.85rem; margin: 0; }
.capa-rgpd .tabla-legal th { width: 32%; background: var(--blanco); }

/* -------------------------------------------------------------------------
   11. PIE
   ------------------------------------------------------------------------- */

.pie {
  background: var(--tinta);
  color: var(--gris-pie);
  padding: 34px var(--margen);
}
.pie__interior {
  max-width: var(--ancho);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
@media (min-width: 900px) {
  .pie__interior { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.pie a { color: var(--gris-pie); }
.pie a:hover { color: var(--blanco); }
.pie__marca { color: var(--blanco); font-weight: 900; font-size: 1.1rem; letter-spacing: -0.03em; }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--tipo-dato);
  font-size: 0.75rem;
}
.pie__contacto {
  font-family: var(--tipo-dato);
  font-size: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* -------------------------------------------------------------------------
   12. PÁGINAS DE TEXTO LEGAL
   ------------------------------------------------------------------------- */

.legal { max-width: 42em; margin-inline: auto; }
.legal h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 36px 0 12px;
  letter-spacing: -0.015em;
}
.legal h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 24px 0 8px;
}
.legal p { margin-bottom: 14px; }
.legal ul { list-style: disc; padding-left: 22px; margin-bottom: 14px; }
.legal ul li { margin-bottom: 8px; }
.legal .tabla-legal { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 0.95rem; }
.legal .tabla-legal th,
.legal .tabla-legal td { text-align: left; padding: 10px 12px; border: 1px solid var(--linea); vertical-align: top; }
.legal .tabla-legal th { background: var(--blanco); font-weight: 700; width: 34%; }
.legal .actualizado {
  font-family: var(--tipo-dato);
  font-size: 0.78rem;
  color: var(--gris);
  border-top: 1px solid var(--linea);
  padding-top: 16px;
  margin-top: 36px;
}

/* Desbordamiento horizontal controlado en tablas estrechas */
.desliza { overflow-x: auto; }

/* -------------------------------------------------------------------------
   13. MOVIMIENTO
   Sobrio a propósito: la velocidad en móvil es el argumento de venta.
   Solo apariciones al entrar en pantalla y transiciones cortas.
   ------------------------------------------------------------------------- */

.aparece {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
.aparece.visible {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Si el visitante ha pedido menos movimiento, no hay ninguno.
   Y si el JavaScript no llega a ejecutarse, todo se ve igualmente. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aparece { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

.sin-js .aparece { opacity: 1; transform: none; }

/* -------------------------------------------------------------------------
   14. IMPRESIÓN
   ------------------------------------------------------------------------- */

@media print {
  .barra, .menu-movil, .saltar, .botonera { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .franja { padding: 0 0 18pt; }
  .franja--acero, .franja--tinta { background: #fff !important; color: #000 !important; }
  .franja--acero *, .franja--tinta * { color: #000 !important; }
  a { color: #000; }
  .aparece { opacity: 1 !important; transform: none !important; }
}