/* Tecnifum — Portada y estructura de dos columnas.
   Servicios, ventajas, sectores y plaga del mes viven en secciones.css. */

/* =========================================================
   PORTADA
   ========================================================= */
.hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: min(88vh, 780px);
  padding-block: var(--espacio-16);
  overflow: hidden;
}

/* Fondo de marca. Sustituible por fotografía sin tocar la estructura. */
.hero__fondo {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 18% 20%, var(--marca-acero) 0%, transparent 55%),
    radial-gradient(ellipse at 82% 78%, var(--marca-gris) 0%, transparent 55%),
    linear-gradient(150deg, var(--marca-fuerte) 0%, var(--fondo) 100%);
}

.hero__contenido {
  position: relative;
}

.hero__panel {
  max-width: 640px;
  padding: var(--espacio-12) var(--espacio-8);
}

.hero__panel h1 {
  margin-bottom: var(--espacio-6);
}

.hero__entrada {
  margin-bottom: var(--espacio-8);
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-3);
}

.hero__sellos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espacio-4) var(--espacio-6);
  margin: var(--espacio-8) 0 0;
  padding: 0;
  list-style: none;
}

.hero__sellos li {
  display: flex;
  align-items: center;
  gap: var(--espacio-2);
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
}

.hero__sellos .icono {
  width: 18px;
  height: 18px;
  color: var(--conforme);
}

/* =========================================================
   COLUMNAS
   ========================================================= */
.doble {
  display: grid;
  gap: var(--espacio-12);
  align-items: start;
}

@media (min-width: 900px) {
  .doble { grid-template-columns: 1.1fr 1fr; }
  .doble--invertido { grid-template-columns: 1fr 1.1fr; }
}

.doble__datos {
  gap: var(--espacio-4);
}

.dato {
  padding: var(--espacio-6);
  background-color: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.dato__cifra {
  display: block;
  color: var(--marca);
  font-family: var(--fuente-titulo);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}

.dato__texto {
  display: block;
  margin-top: var(--espacio-2);
  color: var(--texto-secundario);
  font-size: var(--texto-sm);
}