/*
  Hardman Soluciones — secciones.css
  Estilos propios de cada bloque de la página de una sola página.
  Requiere tokens.css y base.css cargados antes.
  Índice: 1.Quiénes somos 2.Qué hacemos 3.Contacto 4.Bloque final
  (contador + apartado borroso) 5.Aviso de cookies
*/

/* ===== 1. QUIÉNES SOMOS (#empresa) ===== */
/* Fondo: foto de ferralla en blanco y negro (hardman-fondo-pie.webp).
   Su mitad izquierda ya es casi negra, que es donde
   cae el texto, así que basta un velo suave que se aclara hacia la derecha
   para dejar ver el detalle. En móvil el texto ocupa todo el ancho y pisa la
   zona clara de la foto: ahí el velo es más opaco y uniforme. */
#empresa {
  position: relative;
  padding-block: calc(var(--space-9) + var(--space-5)) var(--space-9);
  background-color: var(--fondo);
  background-image: linear-gradient(90deg, rgba(0, 0, 0, .7) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, .15) 100%), url("../img/hardman-fondo-pie.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  #empresa {
    background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("../img/hardman-fondo-pie.webp");
  }
}
.empresa__kicker {
  display: inline-block;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.empresa__lema {
  font-size: 1.125rem;
  color: var(--texto);
  margin-top: var(--space-3);
  max-width: 42rem;
}
#empresa h2 { margin-top: var(--space-7); }
#empresa .empresa__texto { max-width: 46rem; font-size: 1.05rem; margin-top: var(--space-4); }
.empresa__acciones { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }
.empresa__telefono {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 500;
  color: var(--texto);
}
.empresa__telefono svg { width: 20px; height: 20px; color: var(--texto); flex-shrink: 0; }

/* ===== 2. QUÉ HACEMOS (#que-hacemos, con las 4 áreas; la primera es la destacada) ===== */
.seccion { padding-block: var(--space-9); background: var(--fondo); }
.seccion--alt { background: var(--superficie); }
.seccion__cabecera { max-width: 46rem; margin-bottom: var(--space-7); }
.seccion__cabecera p { margin-top: var(--space-4); font-size: 1.05rem; }

/* Escritorio: 3 columnas; la destacada ocupa la fila entera y las otras tres van debajo */
.areas {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
.area--destacada { grid-column: 1 / -1; }
/* Tableta: 2 columnas; la destacada sigue a todo el ancho y, si la última tarjeta
   queda sola en su fila, se estira para no dejar hueco */
@media (max-width: 980px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .areas > .area:last-child:nth-child(even) { grid-column: 1 / -1; }
  /* la tarjeta que ocupa la fila entera usa foto apaisada para no crecer en exceso */
  .areas > .area:last-child:nth-child(even) .area__foto { aspect-ratio: 16 / 9; }
}
/* Móvil: una sola columna */
@media (max-width: 560px) {
  .areas { grid-template-columns: 1fr; }
  .areas > .area:last-child:nth-child(even) { grid-column: auto; }
  .areas > .area:last-child:nth-child(even) .area__foto { aspect-ratio: 4 / 3; }
}

.area {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .02);
  overflow: hidden;
  transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
  scroll-margin-top: var(--header-h);
}
.area:hover, .area:focus-within {
  border-color: var(--texto);
  background: rgba(255, 255, 255, .06);
}
.area__foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.area__cuerpo { padding: var(--space-5); display: flex; flex-direction: column; flex-grow: 1; }
.area__titulo { font-size: 1.15rem; margin-bottom: var(--space-3); }
.area__texto { font-size: .95rem; flex-grow: 1; }

/* Tarjeta destacada en tableta: foto apaisada arriba y texto algo más grande */
.area--destacada .area__foto { aspect-ratio: 16 / 9; }
.area--destacada .area__titulo { font-size: 1.4rem; }
.area--destacada .area__texto { font-size: 1rem; }
/* Móvil: la destacada se apila igual que las demás, con la proporción general */
@media (max-width: 560px) {
  .area--destacada .area__foto { aspect-ratio: 4 / 3; }
  .area--destacada .area__titulo { font-size: 1.25rem; }
}
/* Escritorio: la destacada pasa a horizontal, con la foto a la izquierda (55 %)
   a toda la altura de la tarjeta y el texto centrado en vertical a la derecha */
@media (min-width: 981px) {
  .area--destacada { display: grid; grid-template-columns: 55fr 45fr; }
  .area--destacada .area__foto { height: 100%; min-height: 22rem; aspect-ratio: auto; }
  .area--destacada .area__cuerpo { justify-content: center; padding: var(--space-8); }
  .area--destacada .area__titulo { font-size: 1.6rem; }
  .area--destacada .area__texto { font-size: 1.05rem; flex-grow: 0; }
}

/* ===== 3. CONTACTO (#contacto) ===== */
.contacto__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-8);
  align-items: start;
}
@media (max-width: 860px) {
  .contacto__grid { grid-template-columns: 1fr; gap: var(--space-7); }
}
/* separación del segundo bloque de datos de contacto */
.contacto__titulo--separado { margin-top: var(--space-7); }

.contacto__lista { display: flex; flex-direction: column; gap: var(--space-4); margin-top: var(--space-5); }
.contacto__lista li { display: flex; align-items: flex-start; gap: var(--space-3); }
.contacto__icono { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: var(--texto); }
.contacto__lista a:hover { color: var(--texto-suave); }

.contacto__redes { display: flex; gap: var(--space-3); margin-top: var(--space-6); }
.contacto__redes a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linea);
  border-radius: 50%;
}
.contacto__redes a:hover, .contacto__redes a:focus-visible { border-color: var(--texto); }
.contacto__redes svg { width: 20px; height: 20px; }

.formulario { display: flex; flex-direction: column; gap: var(--space-5); }
.campo { display: flex; flex-direction: column; gap: var(--space-2); }
.campo label { font-size: .9rem; font-weight: 500; color: var(--texto); }
.campo input,
.campo textarea {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radio);
  padding: var(--space-3) var(--space-4);
  color: var(--texto);
  font-size: 1rem;
}
.campo input:focus-visible,
.campo textarea:focus-visible { border-color: var(--texto); }
.campo textarea { resize: vertical; min-height: 120px; }

/* campo auxiliar del formulario: fuera de pantalla */
.campo-trampa {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.campo-consentimiento {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  flex-direction: row;
}
.campo-consentimiento input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.campo-consentimiento label { font-size: .85rem; font-weight: 400; color: var(--texto-suave); }
.campo-consentimiento a { color: var(--texto); text-decoration: underline; }

#form-estado {
  font-size: .9rem;
  min-height: 1.2em;
}
#form-estado:not(:empty) {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, .4);
  background: rgba(255, 255, 255, .08);
  color: var(--texto);
}

/* ===== 4. BLOQUE FINAL: CONTADOR + APARTADO BORROSO (#proyectos) ===== */
/* Fondo: foto de ferralla en blanco y negro (hardman-fondo-pie.webp),
   con velo negro encima para el contraste del
   texto. Encaja a la derecha (background-position) para dejar ver el detalle
   de la foto; más opaco en móvil. */
#proyectos {
  background-color: var(--superficie);
  background-image: linear-gradient(rgba(0, 0, 0, .8), rgba(0, 0, 0, .8)), url("../img/hardman-fondo-pie.webp");
  background-size: cover;
  background-position: right center;
  background-repeat: no-repeat;
}
@media (max-width: 640px) {
  #proyectos {
    background-image: linear-gradient(rgba(0, 0, 0, .9), rgba(0, 0, 0, .9)), url("../img/hardman-fondo-pie.webp");
  }
}
.proyectos__intro { max-width: 46rem; margin-bottom: var(--space-7); }
.proyectos__intro p { margin-top: var(--space-4); font-size: 1.05rem; }

.proyectos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: stretch;
}
@media (max-width: 760px) {
  .proyectos__grid { grid-template-columns: 1fr; }
}

/* --- Contador --- */
.contador {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .02);
}
.contador__etiqueta-bloque {
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .8rem;
  font-weight: 500;
  margin-bottom: var(--space-4);
}
.contador__cifras {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.contador__cifra {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
}
.contador__num {
  font-family: var(--fuente);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem);
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.contador__num-etiqueta {
  margin-top: var(--space-2);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--texto-suave);
}
#cd-mensaje { margin-top: var(--space-5); color: var(--texto); font-weight: 500; }

/* --- Apartado borroso "Nuevos proyectos" --- */
.teaser {
  position: relative;
  display: block;
  width: 100%;
  min-height: 260px;
  border-radius: var(--radio);
  overflow: hidden;
  background-image: url("../img/teaser-borroso.svg");
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, .12);
  text-align: left;
}
.teaser:hover, .teaser:focus-visible {
  border-color: var(--texto);
}

/* formas decorativas tipo "esqueleto de carga": solo bloques vacíos, sin texto,
   desenfocadas además por CSS aunque el fondo ya nace borroso en el propio SVG */
#teaser-formas {
  position: absolute;
  inset: 0;
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-3);
  filter: blur(6px);
}
.teaser__barra {
  height: 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .35);
}
.teaser__barra--corta { width: 40%; }
.teaser__barra--media { width: 65%; }
.teaser__barra--larga { width: 85%; }
.teaser__bloque {
  height: 54px;
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .18);
  margin-bottom: var(--space-2);
}
@media (prefers-reduced-motion: no-preference) {
  .teaser__barra, .teaser__bloque { animation: pulso-esqueleto 1.8s ease-in-out infinite; }
  .teaser__barra--media, .teaser__bloque { animation-delay: .25s; }
  .teaser__barra--larga { animation-delay: .5s; }
}
@keyframes pulso-esqueleto {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

.teaser__contenido {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 260px;
  padding: var(--space-6);
  background: linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .1) 60%);
}
.teaser__titulo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--texto);
}
.teaser__titulo::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--texto);
  flex-shrink: 0;
}
.teaser__etiqueta-estado {
  align-self: flex-start;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--fondo);
  background: var(--texto);
  padding: var(--space-1) var(--space-3);
  border-radius: 999px;
}

#teaser-aviso {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radio);
  background: rgba(0, 0, 0, .82);
  border: 1px solid var(--texto);
  color: var(--texto);
  font-size: .9rem;
}

/* ===== 5. AVISO DE COOKIES ===== */
#cookie-banner {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 90;
  max-width: 640px;
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
#cookie-banner p { font-size: .9rem; margin-bottom: var(--space-4); }
#cookie-banner a { color: var(--texto); text-decoration: underline; }
.cookie-banner__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
/* Los tres botones al mismo nivel: mismo tamaño, mismo peso visual.
   Rechazar es tan accesible como aceptar: ninguno lleva relleno ni
   jerarquía distinta. */
.cookie-banner__acciones button {
  flex: 1 1 auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  font-size: .9rem;
  font-weight: 500;
  text-align: center;
  transition: background-color .2s ease, color .2s ease;
}
.cookie-banner__acciones button:hover,
.cookie-banner__acciones button:focus-visible {
  background: var(--texto);
  color: var(--fondo);
}

#cookie-panel {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: 91;
  max-width: 480px;
  margin-inline: auto;
  padding: var(--space-5);
  border-radius: var(--radio);
  background: var(--superficie);
  border: 1px solid var(--linea);
  box-shadow: var(--sombra);
}
#cookie-panel h2 { font-size: 1.15rem; margin-bottom: var(--space-4); }
.cookie-panel__categoria {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.cookie-panel__categoria:first-of-type { border-top: 0; }
.cookie-panel__categoria p { font-size: .82rem; margin-top: var(--space-1); }
#cookie-panel button#ck-guardar {
  margin-top: var(--space-5);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--texto);
  border-radius: var(--radio);
  font-weight: 500;
}
#cookie-panel button#ck-guardar:hover,
#cookie-panel button#ck-guardar:focus-visible {
  background: var(--texto);
  color: var(--fondo);
}

@media (max-width: 480px) {
  #cookie-banner, #cookie-panel { left: var(--space-3); right: var(--space-3); bottom: var(--space-3); padding: var(--space-4); }
  .cookie-banner__acciones { flex-direction: column; }
}