/* ============================================================
   ARES — Hoja de estilos principal
   ------------------------------------------------------------
   Organización del archivo:
   1.  Variables (colores, tipografía, medidas)   <- EDITA AQUÍ PARA CAMBIAR LA MARCA
   2.  Reinicio y base
   3.  Utilidades y componentes (botones, etiquetas)
   4.  Barra superior y cabecera
   5.  Hero e indicadores
   6.  Servicios
   7.  Nosotros
   8.  Franja de llamada a la acción
   9.  Contacto y formulario
   10. Pie de página
   11. Botones flotantes
   12. Animaciones
   13. Responsive (móvil y tablet)
   ============================================================ */


/* ============================================================
   1. VARIABLES  —  cambia estos valores para re-marcar el sitio
   ============================================================ */
:root {
  /* Colores de marca — tomados del logotipo oficial de ARES */
  --color-oscuro:        #0D0D0F;   /* Negro de marca (fondos) */
  --color-oscuro-2:      #1A1A1E;   /* Variante para tarjetas oscuras */
  --color-acento:        #CA0300;   /* Rojo ARES (botones, resaltados) */
  --color-acento-fuerte: #9E0200;   /* Rojo al pasar el cursor */
  --color-acento-suave:  #FDEBEA;   /* Fondo suave del rojo */

  /* Neutros */
  --color-texto:         #1B1B1F;
  --color-texto-suave:   #616168;
  --color-borde:         #E5E5E8;
  --color-fondo:         #FFFFFF;
  --color-fondo-2:       #F7F7F8;
  --color-blanco:        #FFFFFF;
  --color-whatsapp:      #25D366;

  /* Tipografía */
  --fuente-titulos: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --fuente-texto:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Medidas */
  --ancho-maximo:   1200px;
  --radio:          10px;
  --radio-grande:   16px;
  --transicion:     .25s ease;

  /* Sombras */
  --sombra-suave:  0 2px 8px rgba(13, 13, 15, .07);
  --sombra-media:  0 10px 30px rgba(13, 13, 15, .12);
  --sombra-fuerte: 0 20px 50px rgba(13, 13, 15, .20);
}


/* ============================================================
   2. REINICIO Y BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  /* Compensa la altura de la cabecera fija al saltar a una sección */
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-texto);
  background: var(--color-fondo);
  overflow-x: hidden;
}

body.menu-abierto { overflow: hidden; }

img, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; font-size: inherit; }

h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
}

/* Foco visible para navegación con teclado (accesibilidad) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--color-acento);
  outline-offset: 2px;
  border-radius: 4px;
}

.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
}

.salta-contenido {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 999;
  background: var(--color-acento);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radio) var(--radio);
  font-weight: 600;
  transition: top var(--transicion);
}
.salta-contenido:focus { top: 0; }


/* ============================================================
   3. UTILIDADES Y COMPONENTES
   ============================================================ */

/* --- Etiqueta pequeña sobre los títulos --- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-acento);
  margin-bottom: 14px;
}
.etiqueta::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--color-acento);
}

/* --- Botones --- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radio);
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .01em;
  text-align: center;
  transition: transform var(--transicion), background var(--transicion),
              color var(--transicion), box-shadow var(--transicion);
  white-space: nowrap;
}
.boton:hover { transform: translateY(-2px); }
.boton:active { transform: translateY(0); }
.boton svg { width: 20px; height: 20px; fill: currentColor; }

.boton--primario {
  background: var(--color-acento);
  color: var(--color-blanco);
  box-shadow: 0 6px 18px rgba(202, 3, 0, .30);
}
.boton--primario:hover {
  background: var(--color-acento-fuerte);
  box-shadow: 0 10px 26px rgba(202, 3, 0, .40);
}

.boton--fantasma {
  background: transparent;
  color: var(--color-blanco);
  border: 2px solid rgba(255, 255, 255, .35);
}
.boton--fantasma:hover {
  background: rgba(255, 255, 255, .10);
  border-color: var(--color-blanco);
}

.boton--oscuro {
  background: var(--color-oscuro);
  color: var(--color-blanco);
}
.boton--oscuro:hover { background: #000000; }

.boton--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-blanco);
  box-shadow: 0 6px 18px rgba(37, 211, 102, .30);
}
.boton--whatsapp:hover { background: #1EBE5A; }

/* Botón secundario sobre fondo claro (ej. descargar catálogo) */
.boton--contorno {
  background: transparent;
  color: var(--color-oscuro);
  border: 2px solid var(--color-borde);
}
.boton--contorno:hover {
  border-color: var(--color-acento);
  color: var(--color-acento);
}

.boton--grande  { padding: 16px 32px; font-size: 1rem; }
.boton--bloque  { display: flex; width: 100%; }

/* --- Lista con check --- */
.lista-check { margin-top: 18px; display: grid; gap: 9px; }
.lista-check li {
  position: relative;
  padding-left: 26px;
  font-size: .9rem;
  color: var(--color-texto-suave);
  line-height: 1.5;
}
/* Círculo rojo sólido */
.lista-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .34em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--color-acento);
}
/* Palomita blanca: dos bordes de una caja girados 45° */
.lista-check li::after {
  content: "";
  position: absolute;
  left: 5.5px;
  top: .58em;
  width: 4px;
  height: 7px;
  border-right: 2px solid var(--color-blanco);
  border-bottom: 2px solid var(--color-blanco);
  transform: rotate(45deg);
}

/* --- Estructura de secciones --- */
.seccion { padding: 100px 0; }
.seccion--clara  { background: var(--color-fondo-2); }
.seccion--blanca { background: var(--color-fondo); }
.seccion--oscura { background: var(--color-oscuro); color: rgba(255,255,255,.78); }

.seccion__cabecera {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}
.seccion__cabecera .etiqueta { justify-content: center; }

.seccion__titulo {
  font-size: clamp(2rem, 4.4vw, 2.9rem);
  color: var(--color-oscuro);
  margin-bottom: 16px;
}
.seccion--oscura .seccion__titulo { color: var(--color-blanco); }

.seccion__descripcion {
  font-size: 1.05rem;
  color: var(--color-texto-suave);
}
.seccion--oscura .seccion__descripcion { color: rgba(255,255,255,.72); }

.seccion__pie {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 20px;
  text-align: center;
  color: var(--color-texto-suave);
}


/* ============================================================
   4. BARRA SUPERIOR Y CABECERA
   ============================================================ */
.barra-superior {
  background: var(--color-oscuro);
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.barra-superior__interior {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}
.barra-superior__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color var(--transicion);
}
a.barra-superior__item:hover { color: var(--color-acento); }
.barra-superior__item svg {
  width: 15px; height: 15px;
  fill: var(--color-acento);
  flex-shrink: 0;
}

.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-blanco);
  border-bottom: 1px solid var(--color-borde);
  transition: box-shadow var(--transicion), padding var(--transicion);
}
.cabecera.compacta { box-shadow: var(--sombra-media); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  transition: min-height var(--transicion);
}
.cabecera.compacta .cabecera__interior { min-height: 70px; }

.logo img { height: 52px; width: auto; transition: height var(--transicion); }
.cabecera.compacta .logo img { height: 44px; }

.navegacion__lista {
  display: flex;
  align-items: center;
  gap: 6px;
}
.navegacion__enlace {
  position: relative;
  display: block;
  padding: 10px 16px;
  font-weight: 500;
  font-size: .96rem;
  color: var(--color-texto);
  border-radius: var(--radio);
  transition: color var(--transicion), background var(--transicion);
}
.navegacion__enlace::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  background: var(--color-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.navegacion__enlace:hover { color: var(--color-acento); }
.navegacion__enlace:hover::after,
.navegacion__enlace.activo::after { transform: scaleX(1); }
.navegacion__enlace.activo { color: var(--color-acento); font-weight: 600; }

.navegacion__cta-movil { display: none; }

.hamburguesa {
  display: none;
  width: 46px;
  height: 46px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: var(--radio);
}
.hamburguesa span {
  display: block;
  width: 24px;
  height: 2.5px;
  background: var(--color-oscuro);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa.activo span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburguesa.activo span:nth-child(2) { opacity: 0; }
.hamburguesa.activo span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }


/* ============================================================
   5. HERO E INDICADORES
   ============================================================ */
.hero {
  position: relative;
  background: var(--color-oscuro);
  color: var(--color-blanco);
  overflow: hidden;
}
/* Foto de fondo con un velo oscuro encima. El velo es mas denso a la
   izquierda —donde va el texto— y se aclara hacia la derecha para que se
   siga viendo al tecnico. Sin el velo, el titulo no se leeria. */
.hero__fondo {
  position: absolute;
  inset: 0;
  background-color: var(--color-oscuro);
  background-image:
    linear-gradient(95deg,
      rgba(13,13,15,.96) 0%,
      rgba(13,13,15,.90) 32%,
      rgba(13,13,15,.62) 60%,
      rgba(13,13,15,.45) 100%),
    radial-gradient(circle at 84% 26%, rgba(202,3,0,.30), transparent 52%),
    url("../img/hero-generador.jpg");
  background-repeat: no-repeat;
  background-size: cover, cover, cover;
  background-position: center, center, center;
}
/* Textura diagonal sutil, tipo industrial */
.hero__fondo::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,.028) 0 2px,
    transparent 2px 12px
  );
}

.hero__interior {
  position: relative;
  z-index: 1;
  padding: 118px 24px 128px;
}
/* El texto no ocupa todo el ancho: sobre una foto, las lineas muy largas
   cansan y el velo oscuro solo cubre bien la mitad izquierda. */
.hero__texto { max-width: 660px; }

.hero__titulo {
  font-size: clamp(2.6rem, 6.2vw, 4.4rem);
  margin-bottom: 22px;
}
.hero__titulo .resaltado {
  color: var(--color-acento);
  position: relative;
  display: inline-block;
}

.hero__descripcion {
  font-size: 1.1rem;
  color: rgba(255,255,255,.76);
  max-width: 540px;
  margin-bottom: 34px;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 14px; }

.hero__imagen img {
  width: 100%;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-fuerte);
}

/* --- Franja de indicadores --- */
.indicadores {
  position: relative;
  z-index: 1;
  background: rgba(255,255,255,.05);
  border-top: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(6px);
}
.indicadores__grilla {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding-top: 34px;
  padding-bottom: 34px;
}
.indicador {
  text-align: center;
  padding: 0 12px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.indicador:last-child { border-right: none; }

.indicador__numero,
.indicador__signo {
  font-family: var(--fuente-titulos);
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--color-acento);
  line-height: 1;
}
/* Variante para un indicador con texto en vez de número (ej. "Sureste y centro").
   El min-height iguala la altura de los números grandes para que todos los
   indicadores queden alineados entre sí, incluso si el texto pasa a dos líneas. */
.indicador__signo--solo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2.6rem;
  font-size: 1.5rem;
  text-transform: uppercase;
  line-height: 1.15;
}
.indicador__texto {
  display: block;
  margin-top: 8px;
  font-size: .88rem;
  color: rgba(255,255,255,.70);
}


/* ============================================================
   6. SERVICIOS
   ============================================================ */
/* Flexbox en vez de grid a proposito: con un numero impar de servicios, la
   tarjeta que queda sola en la ultima fila se centra en lugar de quedar
   pegada a la izquierda. Funciona con cualquier cantidad de tarjetas. */
.grilla-servicios {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 26px;
}

.tarjeta-servicio {
  position: relative;
  /* Crecen para llenar la fila; el tope evita que una tarjeta sola
     se estire a lo ancho de toda la seccion. */
  flex: 1 1 320px;
  max-width: 384px;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 34px 30px;
  overflow: hidden;
  transition: transform var(--transicion), box-shadow var(--transicion),
              border-color var(--transicion);
}
/* Barra naranja que aparece arriba al pasar el cursor */
.tarjeta-servicio::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--color-acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.tarjeta-servicio:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-media);
  border-color: transparent;
}
.tarjeta-servicio:hover::before { transform: scaleX(1); }

.tarjeta-servicio__icono {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--color-acento-suave);
  margin-bottom: 20px;
  transition: background var(--transicion);
}
.tarjeta-servicio__icono svg {
  width: 28px; height: 28px;
  fill: var(--color-acento);
  transition: fill var(--transicion);
}
.tarjeta-servicio:hover .tarjeta-servicio__icono { background: var(--color-acento); }
.tarjeta-servicio:hover .tarjeta-servicio__icono svg { fill: var(--color-blanco); }

.tarjeta-servicio__titulo {
  font-size: 1.45rem;
  color: var(--color-oscuro);
  margin-bottom: 12px;
}
.tarjeta-servicio__texto {
  font-size: .95rem;
  color: var(--color-texto-suave);
}


/* ============================================================
   6b. GALERÍA "NUESTRO TRABAJO"
   ============================================================ */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}

.galeria__item {
  position: relative;
  border-radius: var(--radio-grande);
  overflow: hidden;
  background: var(--color-oscuro);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.galeria__item:hover {
  transform: translateY(-6px);
  box-shadow: var(--sombra-media);
}

.galeria__foto {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}
.galeria__item:hover .galeria__foto { transform: scale(1.06); }

/* El degradado sobre la foto es lo que permite leer el texto encima,
   sin importar si esa zona de la imagen es clara u oscura. */
.galeria__pie {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 64px 24px 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(13,13,15,.55) 42%, rgba(13,13,15,.94) 100%);
  color: var(--color-blanco);
}
.galeria__titulo {
  font-size: 1.35rem;
  color: var(--color-blanco);
  margin-bottom: 4px;
}
.galeria__texto {
  font-size: .88rem;
  color: rgba(255,255,255,.80);
  line-height: 1.5;
}


/* ============================================================
   7. NOSOTROS
   ============================================================ */
.nosotros {
  display: grid;
  grid-template-columns: .92fr 1.08fr;
  gap: 64px;
  align-items: center;
}

.nosotros__medios { position: relative; }
.nosotros__imagen {
  width: 100%;
  aspect-ratio: 5 / 3;
  object-fit: cover;
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-fuerte);
}
.nosotros__sello {
  position: absolute;
  right: -18px;
  bottom: -22px;
  background: var(--color-acento);
  color: var(--color-blanco);
  padding: 20px 24px;
  border-radius: var(--radio-grande);
  text-align: center;
  max-width: 170px;
  box-shadow: var(--sombra-media);
}
.nosotros__sello strong {
  display: block;
  font-family: var(--fuente-titulos);
  font-size: 2.6rem;
  line-height: 1;
}
.nosotros__sello span { font-size: .8rem; line-height: 1.35; display: block; margin-top: 4px; }

.nosotros__texto {
  color: rgba(255,255,255,.74);
  margin-bottom: 18px;
}

/* --- Misión y Visión --- */
.proposito {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 32px;
}
.proposito__bloque {
  background: var(--color-oscuro-2);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radio);
  padding: 24px;
}
.proposito__titulo {
  font-size: 1.35rem;
  color: var(--color-blanco);
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-acento);
  display: inline-block;
}
.proposito__texto { font-size: .9rem; color: rgba(255,255,255,.70); line-height: 1.6; }

/* --- Valores corporativos --- */
.valores-bloque { margin-top: 80px; }
.valores-bloque__titulo {
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--color-blanco);
  text-align: center;
  margin-bottom: 34px;
}

.valores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 18px;
}
.valor {
  background: var(--color-oscuro-2);
  border: 1px solid rgba(255,255,255,.08);
  border-left: 3px solid var(--color-acento);
  border-radius: var(--radio);
  padding: 20px;
  transition: transform var(--transicion), background var(--transicion);
}
.valor:hover { transform: translateY(-4px); background: #24242A; }
.valor__titulo {
  font-size: 1.15rem;
  color: var(--color-blanco);
  margin-bottom: 6px;
}
.valor__texto { font-size: .88rem; color: rgba(255,255,255,.66); line-height: 1.55; }


/* ============================================================
   7b. MÉTODO DE TRABAJO
   ============================================================ */
.metodo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
  counter-reset: paso;
  list-style: none;
}

.metodo__paso {
  position: relative;
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 30px 26px 26px;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.metodo__paso:hover { transform: translateY(-5px); box-shadow: var(--sombra-media); }

.metodo__numero {
  display: inline-block;
  font-family: var(--fuente-titulos);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--color-acento);
  margin-bottom: 12px;
}
.metodo__titulo {
  font-size: 1.3rem;
  color: var(--color-oscuro);
  margin-bottom: 8px;
}
.metodo__texto { font-size: .92rem; color: var(--color-texto-suave); }

/* --- Caja destacada al pie de una sección --- */
.destacado {
  margin-top: 34px;
  background: var(--color-oscuro);
  color: rgba(255,255,255,.78);
  border-left: 4px solid var(--color-acento);
  border-radius: var(--radio-grande);
  padding: 32px 34px;
}
.destacado__titulo {
  font-size: 1.4rem;
  color: var(--color-blanco);
  margin-bottom: 10px;
}
.destacado__texto { font-size: .96rem; max-width: 860px; }

.destacado--sobre-oscuro {
  background: var(--color-oscuro-2);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 4px solid var(--color-acento);
  margin-top: 40px;
}


/* ============================================================
   7c. PRINCIPALES CLIENTES
   ============================================================ */
.clientes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  list-style: none;
  margin-bottom: 40px;
}

.cliente {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  text-align: center;
  padding: 28px 24px;
  background: var(--color-fondo-2);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  transition: transform var(--transicion), border-color var(--transicion);
}
.cliente:hover { transform: translateY(-4px); border-color: var(--color-acento); }

.cliente__nombre {
  font-family: var(--fuente-titulos);
  font-size: 1.45rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: var(--color-oscuro);
}
.cliente__tipo {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-acento);
}

/* --- Dos notas en paralelo --- */
.dos-columnas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}
.nota {
  background: var(--color-fondo-2);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 28px 26px;
}
.nota__titulo {
  font-size: 1.25rem;
  color: var(--color-oscuro);
  margin-bottom: 10px;
}
.nota__texto { font-size: .92rem; color: var(--color-texto-suave); }


/* ============================================================
   8. FRANJA DE LLAMADA A LA ACCIÓN
   ============================================================ */
.cta-franja {
  background: var(--color-acento);
  color: var(--color-blanco);
  padding: 56px 0;
}
.cta-franja__interior {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
}
.cta-franja__titulo { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: 6px; }
.cta-franja__texto { color: rgba(255,255,255,.92); max-width: 620px; }


/* ============================================================
   9. CONTACTO Y FORMULARIO
   ============================================================ */
.contacto {
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: 34px;
  align-items: start;
}

/* --- Panel de datos --- */
.contacto__datos {
  background: var(--color-oscuro);
  color: rgba(255,255,255,.76);
  border-radius: var(--radio-grande);
  padding: 36px 32px;
  display: grid;
  gap: 26px;
  align-content: start;
}
.dato { display: flex; gap: 16px; align-items: flex-start; }
.dato__icono {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(202,3,0,.16);
}
.dato__icono svg { width: 21px; height: 21px; fill: var(--color-acento); }
.dato__titulo {
  font-size: 1.1rem;
  color: var(--color-blanco);
  margin-bottom: 3px;
}
.dato__texto { font-size: .92rem; line-height: 1.6; }
.dato__texto a { transition: color var(--transicion); }
.dato__texto a:hover { color: var(--color-acento); }

/* --- Formulario --- */
.contacto__formulario {
  background: var(--color-blanco);
  border: 1px solid var(--color-borde);
  border-radius: var(--radio-grande);
  padding: 36px 34px;
  box-shadow: var(--sombra-suave);
}

.campo { margin-bottom: 18px; }
.campo-doble {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.campo__etiqueta {
  display: block;
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-texto);
  margin-bottom: 7px;
}
.campo__etiqueta span { color: var(--color-acento); }

.campo__control {
  width: 100%;
  padding: 13px 15px;
  border: 1.5px solid var(--color-borde);
  border-radius: var(--radio);
  background: var(--color-fondo-2);
  color: var(--color-texto);
  transition: border-color var(--transicion), background var(--transicion),
              box-shadow var(--transicion);
}
.campo__control::placeholder { color: #9AA5B4; }
.campo__control:focus {
  outline: none;
  border-color: var(--color-acento);
  background: var(--color-blanco);
  box-shadow: 0 0 0 4px rgba(202,3,0,.14);
}
textarea.campo__control { resize: vertical; min-height: 130px; }
select.campo__control { cursor: pointer; }

/* Estado de error */
.campo__control.invalido { border-color: #DC2626; background: #FEF2F2; }
.campo__error {
  display: none;
  margin-top: 6px;
  font-size: .82rem;
  color: #DC2626;
}
.campo__error.visible { display: block; }

/* Casilla de aceptación */
.campo--check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 22px 0;
}
.campo--check input {
  width: 18px; height: 18px;
  margin-top: 3px;
  accent-color: var(--color-acento);
  cursor: pointer;
}
.campo--check label { font-size: .88rem; color: var(--color-texto-suave); cursor: pointer; }
.campo--check .campo__error { grid-column: 1 / -1; }

/* Campo trampa anti-spam: oculto sin usar display:none (los bots lo detectan) */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Separador entre el botón de correo y el de WhatsApp: dos líneas y una "o"
   al centro, para que se lean como dos caminos alternativos y no como dos
   pasos que hay que dar. */
.separador-o {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 18px 0;
}
.separador-o::before,
.separador-o::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-borde);
}
.separador-o span {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-texto-suave);
}

.formulario__aviso {
  margin-top: 16px;
  padding: 0;
  font-size: .92rem;
  border-radius: var(--radio);
  text-align: center;
}
.formulario__aviso.exito {
  padding: 14px;
  background: #ECFDF5;
  color: #047857;
  border: 1px solid #A7F3D0;
}
.formulario__aviso.error {
  padding: 14px;
  background: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}

.boton.cargando { opacity: .65; pointer-events: none; }

.mapa {
  margin-top: 56px;
  border-radius: var(--radio-grande);
  overflow: hidden;
  box-shadow: var(--sombra-media);
  line-height: 0;
}


/* ============================================================
   10. PIE DE PÁGINA
   ============================================================ */
.pie {
  background: var(--color-oscuro);
  color: rgba(255,255,255,.66);
  padding-top: 72px;
}
.pie__grilla {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
  gap: 40px;
  padding-bottom: 56px;
}
.pie__columna--marca img { height: 54px; width: auto; margin-bottom: 18px; }
.pie__texto { font-size: .92rem; max-width: 340px; margin-bottom: 22px; }

.pie__titulo {
  font-size: 1.15rem;
  color: var(--color-blanco);
  margin-bottom: 18px;
  position: relative;
  padding-bottom: 10px;
}
.pie__titulo::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 30px; height: 2px;
  background: var(--color-acento);
}

.pie__lista { display: grid; gap: 10px; font-size: .92rem; }
.pie__lista a { transition: color var(--transicion), padding-left var(--transicion); }
.pie__lista a:hover { color: var(--color-acento); padding-left: 5px; }
.pie__lista--datos li { line-height: 1.5; }

.redes { display: flex; gap: 10px; }
.red {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(255,255,255,.07);
  transition: background var(--transicion), transform var(--transicion);
}
.red svg { width: 19px; height: 19px; fill: rgba(255,255,255,.80); transition: fill var(--transicion); }
.red:hover { background: var(--color-acento); transform: translateY(-3px); }
.red:hover svg { fill: var(--color-blanco); }

.pie__legal {
  border-top: 1px solid rgba(255,255,255,.09);
  padding: 22px 0;
  font-size: .86rem;
}
.pie__legal-interior {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  /* Espacio libre a la derecha para que el botón flotante de WhatsApp
     no se monte sobre el texto legal al llegar al final de la página. */
  padding-right: 84px;
}


/* ============================================================
   11. BOTONES FLOTANTES
   ============================================================ */
.whatsapp-flotante {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 90;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-whatsapp);
  box-shadow: 0 8px 24px rgba(37,211,102,.42);
  transition: transform var(--transicion);
}
.whatsapp-flotante svg { width: 30px; height: 30px; fill: var(--color-blanco); }
.whatsapp-flotante:hover { transform: scale(1.09); }
/* Onda expansiva para llamar la atención */
.whatsapp-flotante::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-whatsapp);
  animation: onda 2.2s ease-out infinite;
}
@keyframes onda {
  0%   { transform: scale(1);    opacity: .8; }
  100% { transform: scale(1.65); opacity: 0; }
}

.subir {
  position: fixed;
  right: 22px;
  bottom: 88px;
  z-index: 90;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-oscuro);
  box-shadow: var(--sombra-media);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--transicion), transform var(--transicion),
              visibility var(--transicion), background var(--transicion);
}
.subir svg { width: 20px; height: 20px; fill: var(--color-blanco); }
.subir.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.subir:hover { background: var(--color-acento); }


/* ============================================================
   12. ANIMACIONES DE APARICIÓN
   ============================================================ */
/* Nota: el selector empieza con .js — esa clase la añade un script en el
   <head>. Si el JavaScript no se ejecuta, esta regla nunca aplica y todo el
   contenido se ve normalmente. Nunca queda una página en blanco. */
.js [data-animar] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s ease;
}
.js [data-animar].visible { opacity: 1; transform: translateY(0); }

/* Respeta a quien pide menos movimiento en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js [data-animar] { opacity: 1; transform: none; }
}


/* ============================================================
   13. RESPONSIVE
   ============================================================ */

/* --- Tablet grande --- */
@media (max-width: 1024px) {
  .hero__interior { padding: 84px 24px 96px; }

  .nosotros { grid-template-columns: 1fr; gap: 54px; }
  .nosotros__medios { max-width: 540px; }

  .contacto { grid-template-columns: 1fr; }

  .pie__grilla { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

/* --- Una sola columna de servicios: la tarjeta debe llenar el ancho ---
   Por debajo de ~700px ya no caben dos tarjetas por fila, asi que el tope
   de 384px solo la haria ver angosta frente al resto de la seccion. --- */
@media (max-width: 700px) {
  .tarjeta-servicio { max-width: none; }
}

/* --- Tablet / móvil: aparece el menú hamburguesa --- */
@media (max-width: 900px) {
  html { scroll-padding-top: 74px; }

  /* En vertical, la foto panoramica se recortaria a una franja irreconocible.
     Se cambia por un recorte vertical y el velo pasa a ser de arriba a abajo,
     porque aqui el texto ocupa todo el ancho. */
  .hero__fondo {
    background-image:
      linear-gradient(180deg,
        rgba(13,13,15,.84) 0%,
        rgba(13,13,15,.66) 40%,
        rgba(13,13,15,.92) 100%),
      radial-gradient(circle at 72% 18%, rgba(202,3,0,.26), transparent 55%),
      url("../img/hero-generador-movil.jpg");
    background-position: center, center, center top;
  }

  .hamburguesa { display: flex; }
  .cabecera__cta { display: none; }

  .navegacion {
    position: fixed;
    top: 0;
    right: -100%;
    width: min(320px, 84vw);
    height: 100dvh;
    background: var(--color-blanco);
    box-shadow: -10px 0 40px rgba(13,13,15,.22);
    padding: 92px 26px 34px;
    overflow-y: auto;
    transition: right .32s ease;
    z-index: 99;
  }
  .navegacion.abierta { right: 0; }

  .navegacion__lista {
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
  }
  .navegacion__enlace {
    padding: 14px 12px;
    font-size: 1.05rem;
    border-bottom: 1px solid var(--color-borde);
    border-radius: 0;
  }
  .navegacion__enlace::after { display: none; }
  .navegacion__cta-movil { display: block; margin-top: 20px; }

  /* Fondo oscuro detrás del menú abierto */
  body.menu-abierto::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(13,13,15,.60);
    z-index: 98;
  }

  .indicadores__grilla { grid-template-columns: repeat(2, 1fr); gap: 26px 10px; }
  .indicador:nth-child(2) { border-right: none; }
}

/* --- Móvil --- */
@media (max-width: 640px) {
  .seccion { padding: 68px 0; }
  .contenedor { padding: 0 18px; }

  .barra-superior__interior { justify-content: center; font-size: .78rem; }
  .barra-superior__item--horario { display: none; }

  .hero__interior { padding: 54px 18px 70px; }
  .hero__acciones .boton { flex: 1 1 100%; }

  .indicador__numero, .indicador__signo { font-size: 2.1rem; }

  .seccion__cabecera { margin-bottom: 44px; }

  .tarjeta-servicio { padding: 28px 24px; }

  .valores { grid-template-columns: 1fr; }
  .nosotros__sello { right: 12px; bottom: -18px; padding: 16px 18px; }

  .contacto__formulario,
  .contacto__datos { padding: 28px 22px; }
  .campo-doble { grid-template-columns: 1fr; gap: 0; }
  .campo-doble .campo { margin-bottom: 18px; }

  .galeria__pie { padding: 52px 20px 18px; }
  .galeria__item:hover { transform: none; }
  .galeria__item:hover .galeria__foto { transform: none; }

  .cta-franja__interior { flex-direction: column; align-items: flex-start; }
  .cta-franja .boton { width: 100%; }

  .pie__grilla { grid-template-columns: 1fr; }
  /* En móvil el texto legal se centra: el espacio libre va abajo, no a la derecha */
  .pie__legal-interior {
    justify-content: center;
    text-align: center;
    padding-right: 18px;
    padding-bottom: 62px;
  }

  .whatsapp-flotante { width: 52px; height: 52px; right: 16px; bottom: 16px; }
  .subir { right: 16px; bottom: 78px; }
}


/* ============================================================
   14. IMPRESIÓN
   ============================================================ */
@media print {
  .barra-superior, .cabecera, .hamburguesa,
  .whatsapp-flotante, .subir, .mapa, .cta-franja { display: none !important; }
  body { color: #000; background: #fff; }
  .js [data-animar] { opacity: 1 !important; transform: none !important; }
}