/* ==========================================================================
   SEEBEK · components.css
   --------------------------------------------------------------------------
   Piezas con nombre propio: cabecera, pie, botones, fichas, tablas de
   especificación, bloques de dato, formulario y botón de WhatsApp.

   Cada bloque está separado por un título en mayúsculas para que sea fácil
   encontrarlo. Buscá el nombre de la pieza que querés cambiar.
   ========================================================================== */


/* ==========================================================================
   1. CABECERA (header)
   --------------------------------------------------------------------------
   El contenido del menú NO se edita acá: se edita en partials/header.html
   ========================================================================== */

.cabecera {
  background-color: var(--negro);
  color: var(--gris-niebla);
  position: relative;
  z-index: 100;
}

/* --- Barra superior fina ------------------------------------------------- */
.cabecera__barra {
  border-bottom: 1px solid var(--linea-sobre-negro);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.cabecera__barra-contenido {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-lg);
  justify-content: space-between;
  align-items: center;
  padding-block: 10px;
  color: var(--gris-niebla);
}

.cabecera__barra-contenido p { max-width: none; margin: 0; }

.cabecera__barra a {
  color: var(--gris-niebla);
  text-decoration: none;
}

.cabecera__barra a:hover { color: var(--blanco-puro); }

/* En celular la barra superior se reduce a lo esencial. */
@media (max-width: 639px) {
  .cabecera__barra-dato-secundario { display: none; }
}

/* --- Fila principal ------------------------------------------------------ */
.cabecera__principal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-lg);
  padding-block: var(--esp-md);
}

.cabecera__logo {
  display: block;
  flex-shrink: 0;
  line-height: 0;
}

/* Sobre fondo negro va SIEMPRE la versión clara del logo. */
.cabecera__logo img {
  width: 118px;
  height: auto;
}

/* --- Botón hamburguesa (solo celular) ------------------------------------ */
.hamburguesa {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 10px;
  background: none;
  border: 1px solid var(--linea-sobre-negro);
  border-radius: var(--radio-caja);
  cursor: pointer;
}

.hamburguesa__linea {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--blanco-puro);
  transition: transform var(--transicion), opacity var(--transicion);
}

/* Las tres líneas se convierten en una cruz cuando el menú está abierto. */
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2) {
  opacity: 0;
}
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* --- Navegación ---------------------------------------------------------- */
.nav__lista {
  display: flex;
  align-items: center;
  gap: var(--esp-lg);
}

.nav__enlace,
.nav__boton {
  display: inline-block;
  padding-block: var(--esp-sm);
  font-family: var(--font-texto);
  font-size: 15px;
  font-weight: 500;
  color: var(--gris-niebla);
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion);
}

.nav__enlace:hover,
.nav__boton:hover {
  color: var(--blanco-puro);
}

/* Página actual: subrayado rojo. La clase la pone js/includes.js solo. */
.nav__enlace--activo,
.nav__boton--activo {
  color: var(--blanco-puro);
  border-bottom-color: var(--rojo);
}

/* --- Menú desplegable "Productos" ---------------------------------------- */
/* Está pensado para crecer: sumar un producto es agregar un <li> en
   partials/header.html. No hay que tocar nada de este CSS. */
.nav__desplegable {
  position: relative;
}

.nav__boton::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}

.nav__submenu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 210px;
  padding-block: var(--esp-sm);
  background-color: var(--negro);
  border: 1px solid var(--linea-sobre-negro);
  border-radius: var(--radio-caja);
}

.nav__boton[aria-expanded="true"] + .nav__submenu {
  display: block;
}

.nav__submenu a {
  display: block;
  padding: 10px var(--esp-md);
  font-size: 15px;
  color: var(--gris-niebla);
  text-decoration: none;
  border-left: 2px solid transparent;
}

.nav__submenu a:hover {
  color: var(--blanco-puro);
  background-color: var(--hover-sobre-negro);
}

.nav__submenu a.nav__enlace--activo {
  color: var(--blanco-puro);
  border-bottom: 0;
  border-left-color: var(--rojo);
}

/* --- Navegación en ESCRITORIO (a partir de 900px) ------------------------ */
@media (min-width: 900px) {
  .hamburguesa { display: none; }

  .nav {
    display: flex !important;   /* siempre visible en escritorio */
    align-items: center;
    gap: var(--esp-xl);
  }
}

/* --- Navegación en CELULAR (hasta 899px) --------------------------------- */
@media (max-width: 899px) {
  .nav {
    display: none;              /* oculto hasta tocar la hamburguesa */
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: var(--esp-lg) var(--gutter) var(--esp-xl);
    background-color: var(--negro);
    border-top: 1px solid var(--linea-sobre-negro);
  }

  .nav--abierto { display: block; }

  .nav__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__lista > li {
    border-bottom: 1px solid var(--linea-sobre-negro);
  }

  .nav__enlace,
  .nav__boton {
    display: block;
    width: 100%;
    padding-block: var(--esp-md);
    font-size: 17px;
    text-align: left;
    border-bottom: 0;
  }

  /* En celular el activo se marca con una barra roja a la izquierda. */
  .nav__enlace--activo,
  .nav__boton--activo {
    border-bottom: 0;
    box-shadow: inset 3px 0 0 var(--rojo);
    padding-left: var(--esp-md);
  }

  .nav__boton::after { float: right; margin-top: 10px; }

  .nav__submenu {
    position: static;
    min-width: 0;
    border: 0;
    padding-block: 0 var(--esp-sm);
  }

  .nav__submenu a { padding-left: var(--esp-lg); }

  /* El botón de acción del menú ocupa todo el ancho en celular. */
  .nav > .boton {
    display: block;
    width: 100%;
    margin-top: var(--esp-lg);
    text-align: center;
  }
}


/* ==========================================================================
   2. BOTONES
   --------------------------------------------------------------------------
   Regla del sistema: un solo botón rojo por sección de contenido.
   El rojo es señal, no decoración.
   ========================================================================== */

.boton {
  display: inline-block;
  padding: 14px var(--esp-lg);
  font-family: var(--font-texto);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio-boton);
  cursor: pointer;
  transition: background-color var(--transicion),
              color var(--transicion),
              border-color var(--transicion);
}

/* Primario: la acción principal de la pantalla. */
.boton--primario {
  background-color: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco-puro);
}

.boton--primario:hover {
  background-color: var(--rojo-profundo);
  border-color: var(--rojo-profundo);
  color: var(--blanco-puro);
}

/* Secundario sobre fondo claro: borde negro, se invierte al pasar el mouse. */
.boton--secundario {
  background-color: transparent;
  border-color: var(--negro);
  color: var(--negro);
}

.boton--secundario:hover {
  background-color: var(--negro);
  color: var(--blanco-puro);
}

/* Secundario sobre fondo NEGRO: borde claro. */
.boton--claro {
  background-color: transparent;
  border-color: var(--gris-niebla);
  color: var(--blanco-puro);
}

.boton--claro:hover {
  background-color: var(--blanco-puro);
  border-color: var(--blanco-puro);
  color: var(--negro);
}

/* Grupo de botones uno al lado del otro. */
.botonera {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-md);
  margin-top: var(--esp-xl);
}


/* ==========================================================================
   3. HERO (la primera pantalla de la Home)
   ========================================================================== */

.hero {
  background-color: var(--negro);
  color: var(--gris-niebla);
  padding-block: clamp(48px, 7vw, 88px);
}

/* Ancho máximo de la columna de texto del hero. Se mide en píxeles y no en
   "ch" porque adentro conviven tamaños muy distintos (título de 60px y
   cuerpo de 17px) y la medida en caracteres daría una columna diminuta. */
.hero__contenido { max-width: 560px; }

.hero h1 { color: var(--blanco-puro); }

.hero .bajada {
  color: var(--gris-niebla);
  margin-top: var(--esp-lg);
}

/* La foto va enmarcada en un panel blanco: es el recurso del sistema para
   meter una imagen de producto sobre fondo negro sin ensuciar el fondo. */
.hero__panel {
  background-color: var(--blanco-puro);
  border-radius: var(--radio-caja);
  padding: 0;   /* el aire ya viene dentro de la foto, igual que en .imagen-enmarcada */
}

/* La foto ocupa todo el ancho del panel. Así el producto se ve exactamente
   del mismo tamaño relativo que en las fotos de las secciones interiores. */
.hero__panel img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* El epígrafe va en una franja al pie del panel, separado por una regla fina. */
.hero__panel figcaption {
  padding: var(--esp-md) var(--esp-lg);
  border-top: 1px solid var(--gris-linea);
}


/* ==========================================================================
   4. FICHAS (cards)
   --------------------------------------------------------------------------
   Fondo blanco, borde fino, esquinas rectas, SIN sombras.
   ========================================================================== */

.ficha {
  display: flex;
  flex-direction: column;
  background-color: var(--blanco-puro);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  padding: var(--esp-lg);
}

.ficha h3 { margin-bottom: var(--esp-sm); }

.ficha p { color: var(--gris-acero); }

/* Ficha que es un enlace entero a otra página. */
.ficha--enlace {
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transicion);
}

.ficha--enlace:hover {
  border-color: var(--negro);
  color: inherit;
}

/* Ficha de producto: imagen arriba, texto abajo. */
.ficha-producto {
  display: flex;
  flex-direction: column;
  background-color: var(--blanco-puro);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: border-color var(--transicion);
}

.ficha-producto:hover {
  border-color: var(--negro);
  color: inherit;
}

/* Cuadrado, igual que .imagen-enmarcada y que el panel del hero: una sola
   regla de encuadre para todo el sitio. */
.ficha-producto__imagen {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-bottom: 1px solid var(--gris-linea);
  background-color: var(--blanco-puro);
}

/* SIN padding, por el mismo motivo que .imagen-enmarcada: el aire alrededor
   del producto ya viene dentro de la foto. Si se agrega padding acá, los dos
   márgenes se suman y el producto queda diminuto. */
.ficha-producto__imagen img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ficha-producto__cuerpo {
  padding: var(--esp-lg);
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  flex: 1;
}

.ficha-producto__cuerpo p { color: var(--gris-acero); }

/* "Ver ficha →" al pie de la tarjeta. */
.ficha-producto__accion {
  margin-top: auto;
  padding-top: var(--esp-md);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--rojo);
}

/* Ficha numerada: para los 4 argumentos de "Por qué Seebek". */
.ficha--numerada { position: relative; }

.ficha__numero {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--rojo);
  margin-bottom: var(--esp-md);
}


/* ==========================================================================
   4b. PUNTO NUMERADO
   --------------------------------------------------------------------------
   Regla roja arriba, número en mono y el texto debajo. Se usa para enumerar
   argumentos sin caer en una lista con viñetas.
   ========================================================================== */

.punto {
  border-top: 1px solid var(--rojo);
  padding-top: var(--esp-md);
}

.punto__numero {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--rojo);
  margin-bottom: var(--esp-md);
}

/* Sobre fondo negro el número no puede ir en rojo (contraste insuficiente).
   La regla roja de arriba sigue estando: el rojo se mantiene como señal. */
.seccion--negra .punto__numero { color: var(--gris-niebla); }

.punto p { max-width: 34ch; }


/* ==========================================================================
   4c. IMAGEN ENMARCADA
   --------------------------------------------------------------------------
   Foto de producto sobre panel blanco con borde fino. Esquinas rectas.

   POR QUE ESTA ARMADA ASI:
   las fotos de producto vienen con proporciones muy distintas (hay equipos
   anchos y equipos altos). Si cada foto se mostrara a su proporción real, una
   foto alta estiraría la columna y dejaría un bloque larguísimo al lado de un
   texto corto. Entonces todas van dentro de un panel de proporción fija y la
   foto se acomoda adentro, centrada.

   El panel es cuadrado porque la mayoría de los equipos son verticales
   (torres y gabinetes): así aprovechan toda la altura.

   NO LLEVA PADDING A PROPÓSITO. El aire alrededor del producto ya viene
   preparado dentro de la propia foto: todas están encuadradas para que el
   equipo ocupe el 72% del cuadro. Así todos los productos del sitio se ven
   del mismo tamaño relativo, sin importar cómo venía recortada cada foto
   original. Si acá se agregara padding, ese aire se sumaría al de la foto y
   los productos quedarían chicos.
   ========================================================================== */

.imagen-enmarcada {
  width: 100%;
  max-width: 480px;
  margin-inline: auto;        /* centrada dentro de su columna */
  aspect-ratio: 1 / 1;
  object-fit: contain;        /* nunca deforma la foto */
  border: 1px solid var(--gris-linea);
  background-color: var(--blanco-puro);
}

/* El epígrafe acompaña al panel: se alinea con él y no con toda la columna. */
.imagen-enmarcada + figcaption {
  max-width: 480px;
  margin-inline: auto;
}


/* ==========================================================================
   5. LISTAS MARCADAS Y CITAS
   ========================================================================== */

/* Lista con un cuadradito rojo como viñeta y una regla fina entre ítems. */
.lista-marcada li {
  position: relative;
  padding: var(--esp-md) 0 var(--esp-md) var(--esp-lg);
  border-bottom: 1px solid var(--gris-linea);
}

.lista-marcada li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 27px;
  width: 7px;
  height: 7px;
  background-color: var(--rojo);
}

.lista-marcada li:first-child { border-top: 1px solid var(--gris-linea); }

.seccion--negra .lista-marcada li { border-color: var(--linea-sobre-negro); }
.seccion--negra .lista-marcada li:first-child { border-top-color: var(--linea-sobre-negro); }

/* Cita destacada: barra roja a la izquierda, texto en serif. */
.cita {
  border-left: 3px solid var(--rojo);
  padding-left: var(--esp-lg);
  margin-block: var(--esp-xl);
}

.cita p {
  font-family: var(--font-titulo);
  font-size: clamp(20px, 2.6vw, 28px);
  line-height: 1.3;
  color: var(--negro);
  max-width: 34ch;
}

.seccion--negra .cita p,
.hero .cita p { color: var(--blanco-puro); }


/* ==========================================================================
   6. TABLAS DE ESPECIFICACIÓN
   --------------------------------------------------------------------------
   Números en mono y tabulares para que las columnas queden alineadas.
   En celular la tabla se desplaza sola en horizontal.
   ========================================================================== */

.tabla-envoltorio {
  overflow-x: auto;
  border: 1px solid var(--gris-linea);
  background-color: var(--blanco-puro);
}

.tabla-specs {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  background-color: var(--blanco-puro);
}

.tabla-specs caption {
  text-align: left;
  padding: var(--esp-md) var(--esp-lg);
  border-bottom: 1px solid var(--gris-linea);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--gris-acero);
}

.tabla-specs th,
.tabla-specs td {
  padding: var(--esp-md) var(--esp-lg);
  text-align: left;
  border-bottom: 1px solid var(--gris-linea);
  vertical-align: top;
}

.tabla-specs thead th {
  font-family: var(--font-texto);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--grafito);
  white-space: nowrap;
}

.tabla-specs tbody th {
  font-weight: 600;
  color: var(--negro);
}

.tabla-specs tbody tr:last-child th,
.tabla-specs tbody tr:last-child td { border-bottom: 0; }

/* Celdas con números: mono y cifras tabulares. */
.tabla-specs .celda-dato {
  font-family: var(--font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--grafito);
  white-space: nowrap;
}


/* ==========================================================================
   7. BLOQUE DE DATO / KPI
   --------------------------------------------------------------------------
   Cifra grande en serif + rótulo + la nota del supuesto (obligatoria).
   ========================================================================== */

.kpi {
  border-top: 3px solid var(--rojo);
  padding-top: var(--esp-lg);
}

.kpi__cifra {
  display: block;
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--negro);
  font-variant-numeric: tabular-nums;
}

/* Variantes de color de la cifra según qué tipo de dato sea. */
.kpi__cifra--rojo { color: var(--rojo); }
.kpi__cifra--azul { color: var(--azul-instrumento); }

.kpi__rotulo {
  display: block;
  margin-top: var(--esp-md);
  font-size: 16px;
  font-weight: 600;
  color: var(--grafito);
}

/* La nota del supuesto nunca se borra: un dato sin supuesto no es un dato. */
.kpi__supuesto {
  display: block;
  margin-top: var(--esp-sm);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: var(--gris-acero);
}


/* ==========================================================================
   8. SECTORES (íconos lineales)
   ========================================================================== */

.sector {
  padding-top: var(--esp-lg);
  border-top: 1px solid var(--gris-linea);
}

.sector__icono {
  width: 32px;
  height: 32px;
  margin-bottom: var(--esp-md);
  color: var(--rojo);        /* el SVG hereda este color con currentColor */
}

.sector h3 { margin-bottom: var(--esp-sm); }

.sector p {
  font-size: 15px;
  color: var(--gris-acero);
}


/* ==========================================================================
   9. PASOS DEL PROCESO
   ========================================================================== */

.paso {
  padding-top: var(--esp-lg);
  border-top: 3px solid var(--negro);
}

.paso__numero {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--rojo);
  margin-bottom: var(--esp-sm);
}

.paso h3 { margin-bottom: var(--esp-sm); }

.paso p {
  font-size: 15px;
  color: var(--gris-acero);
}


/* ==========================================================================
   10. FRANJA DE RESPALDO
   ========================================================================== */

.franja {
  background-color: var(--negro);
  color: var(--gris-niebla);
  padding-block: var(--esp-xl);
}

.franja__lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--esp-md) var(--esp-xl);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.franja__lista li { display: flex; align-items: center; gap: var(--esp-xl); }

/* Separador "·" entre ítems, salvo el último. Va en gris y no en rojo:
   sobre fondo negro el rojo no llega al contraste mínimo para texto. */
.franja__lista li:not(:last-child)::after {
  content: "·";
  color: var(--gris-niebla);
}

.franja__destacado { color: var(--blanco-puro); }


/* ==========================================================================
   11. PIE DE PÁGINA (footer)
   --------------------------------------------------------------------------
   El contenido NO se edita acá: se edita en partials/footer.html
   ========================================================================== */

.pie {
  background-color: var(--negro);
  color: var(--gris-niebla);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
  padding-top: var(--esp-2xl);
  margin-top: auto;
}

.pie__grilla {
  display: grid;
  gap: var(--esp-xl);
  grid-template-columns: 1fr;
  padding-bottom: var(--esp-xl);
}

@media (min-width: 640px) {
  .pie__grilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
  .pie__grilla { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.pie__logo img {
  width: 118px;
  height: auto;
  margin-bottom: var(--esp-lg);
}

.pie__titulo {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blanco-puro);
  margin-bottom: var(--esp-md);
}

.pie a {
  color: var(--gris-niebla);
  text-decoration: none;
}

.pie a:hover {
  color: var(--blanco-puro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pie p { max-width: none; }

/* Línea inferior con el año y los datos legales. */
.pie__base {
  border-top: 1px solid var(--linea-sobre-negro);
  padding-block: var(--esp-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-lg);
  justify-content: space-between;
  font-size: 12px;
}


/* ==========================================================================
   12. BOTÓN FLOTANTE DE WHATSAPP
   ========================================================================== */

.wa-flotante {
  position: fixed;
  right: var(--esp-lg);
  bottom: var(--esp-lg);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--esp-sm);
  padding: 12px var(--esp-md);
  background-color: var(--negro);
  border: 1px solid var(--gris-niebla);
  border-radius: var(--radio-boton);
  color: var(--blanco-puro);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color var(--transicion);
}

.wa-flotante:hover {
  background-color: var(--rojo);
  border-color: var(--rojo);
  color: var(--blanco-puro);
}

.wa-flotante svg { width: 18px; height: 18px; flex-shrink: 0; }

/* En celular queda solo el ícono, para no tapar contenido. */
@media (max-width: 639px) {
  .wa-flotante__texto { display: none; }
  .wa-flotante { padding: 14px; }
}


/* ==========================================================================
   13. FORMULARIO
   ========================================================================== */

.formulario {
  background-color: var(--blanco-puro);
  border: 1px solid var(--gris-linea);
  padding: var(--esp-xl);
}

.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-sm);
  margin-bottom: var(--esp-lg);
}

.campo label {
  font-size: 14px;
  font-weight: 600;
  color: var(--negro);
}

/* Marca de campo obligatorio. */
.campo__requerido {
  color: var(--rojo);
  font-weight: 400;
}

.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px var(--esp-md);
  font-size: 16px;   /* 16px evita que el celular haga zoom al enfocar */
  color: var(--grafito);
  background-color: var(--blanco-puro);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio-caja);
  transition: border-color var(--transicion);
}

.campo input:hover,
.campo select:hover,
.campo textarea:hover { border-color: var(--gris-acero); }

.campo textarea { min-height: 140px; resize: vertical; }

/* Campo con error de validación. */
.campo--error input,
.campo--error select,
.campo--error textarea { border-color: var(--estado-critico); }

.campo__error {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--estado-critico);
}

/* Dos campos en la misma fila cuando hay lugar. */
.campo-fila {
  display: grid;
  gap: 0 var(--esp-lg);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .campo-fila { grid-template-columns: 1fr 1fr; }
}

/* Trampa anti-spam: invisible para las personas, visible para los robots.
   NO borrar y NO cambiar a display:none. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Aviso de éxito que reemplaza al formulario una vez enviado. */
.aviso-exito {
  background-color: var(--blanco-puro);
  border: 1px solid var(--gris-linea);
  border-top: 3px solid var(--estado-ok);
  padding: var(--esp-xl);
}

.aviso-exito h2 { margin-bottom: var(--esp-md); }

/* Aviso de error general del envío. */
.aviso-error {
  background-color: var(--blanco-puro);
  border: 1px solid var(--gris-linea);
  border-left: 3px solid var(--estado-critico);
  padding: var(--esp-md) var(--esp-lg);
  margin-bottom: var(--esp-lg);
  font-size: 15px;
}


/* ==========================================================================
   14. DATOS DE CONTACTO (lista de la página Contacto)
   ========================================================================== */

.dato-contacto {
  padding-block: var(--esp-md);
  border-bottom: 1px solid var(--gris-linea);
}

.dato-contacto:first-child { border-top: 1px solid var(--gris-linea); }

.dato-contacto__rotulo {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-acero);
  margin-bottom: var(--esp-xs);
}

.dato-contacto__valor {
  font-size: 17px;
  color: var(--negro);
  text-decoration: none;
}

.dato-contacto__valor:hover { color: var(--rojo); }

/* Mapa embebido. */
.mapa {
  border: 1px solid var(--gris-linea);
  line-height: 0;
}

.mapa iframe {
  width: 100%;
  height: 360px;
  border: 0;
  display: block;
}