/* ============================================================================
   GRUPO INDESUS — HOJA DE ESTILOS
   ============================================================================
   Índice de este archivo (usa Ctrl+F para saltar a cada bloque):
     1.  Variables de marca (:root)
     2.  Reset básico
     3.  Utilidades generales (contenedor, botones, animaciones)
     4.  Header / navegación
     5.  Hero
     6.  Sección "Nosotros" + barra de cifras
     7.  Servicios (tarjetas de los 4 pilares)
     8.  Sectores (chips con ícono)
     9.  Aliados
     10. Contacto (layout + formulario)
     11. Footer + botón "volver arriba"
     12. Media queries (responsive)
   ========================================================================== */


/* ----------------------------------------------------------------------------
   1. VARIABLES DE MARCA
   Estos colores fueron tomados directamente del logo oficial de Grupo INDESUS
   (paleta de marca). Al definirlos aquí UNA sola vez como variables CSS,
   cualquier ajuste de marca a futuro (ej. cambiar el morado) se hace en una
   sola línea en vez de buscar el color en todo el archivo.
---------------------------------------------------------------------------- */
:root {
  /* Colores de marca */
  --color-purple:       #5C1A4F;  /* morado principal (logo, botones, títulos) */
  --color-purple-dark:  #3F1236;  /* variante más oscura, para hover / textos fuertes */
  --color-green:        #8CA43C;  /* verde claro de marca (acentos, íconos) */
  --color-green-dark:   #3E5E2C;  /* verde oscuro (detalles, hover de acentos) */
  --color-mauve:        #A489A2;  /* malva/lavanda (fondos suaves, tarjetas) */
  --color-sand:         #C5AF9A;  /* beige/arena (detalles neutros) */

  /* Colores funcionales (derivados, no son de marca pero se usan mucho) */
  --color-bg:           #FFFFFF;
  --color-bg-alt:       #F7F3F6;  /* fondo gris-malva muy claro para secciones alternas */
  --color-text:         #2B2530;  /* casi negro con tinte morado, más suave que #000 */
  --color-text-muted:   #6B6470;

  /* Tipografía */
  --font-heading: 'Poppins', 'Segoe UI', sans-serif;
  --font-body:    'Inter', 'Segoe UI', sans-serif;

  /* Espaciado y bordes reutilizables */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --container-width: 1180px;
  --section-padding: 96px;

  /* Sombra estándar para tarjetas (se usa en varios bloques) */
  --shadow-card: 0 10px 30px rgba(43, 37, 48, 0.08);
}


/* ----------------------------------------------------------------------------
   2. RESET BÁSICO
   Quita los estilos por defecto que cada navegador aplica distinto, para que
   el sitio se vea igual en Chrome, Safari, Edge, etc.
---------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;      /* el padding y el borde ya no suman al ancho total */
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;     /* al hacer clic en un link "#ancla", desplaza suave */
  scroll-padding-top: 90px;    /* evita que el header fijo tape el título al saltar */
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;              /* quita el espacio fantasma que dejan las <img> inline */
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--color-purple);
  line-height: 1.2;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}


/* ----------------------------------------------------------------------------
   3. UTILIDADES GENERALES
   Clases reutilizables en toda la página: contenedor centrado, botones,
   encabezados de sección y la animación "reveal" (aparecer al hacer scroll).
---------------------------------------------------------------------------- */

/* Contenedor centrado con ancho máximo: se usa dentro de CADA sección */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-padding) 0;
}

/* Alterna el fondo de las secciones pares para separar visualmente el
   contenido sin necesitar líneas divisorias */
.section--alt {
  background: var(--color-bg-alt);
}

/* Texto pequeño en mayúsculas que antecede a cada título (ej. "Nuestros servicios") */
.eyebrow {
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-green-dark);
  margin-bottom: 12px;
}

.eyebrow--light {
  color: var(--color-green);
}

.section-heading {
  max-width: 720px;
  margin-bottom: 48px;
}

.section-heading h2 {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.section-heading__sub {
  margin-top: 12px;
  color: var(--color-text-muted);
  font-size: 1.05rem;
}

.lead-text {
  max-width: 780px;
  font-size: 1.1rem;
  color: var(--color-text-muted);
  margin-bottom: 56px;
}

/* --- Botones ---
   Un botón base (.btn) + modificadores (.btn--primary / .btn--ghost / .btn--nav)
   siguiendo el patrón BEM, así es predecible cómo se llamará el próximo botón
   que se necesite (ej. .btn--secondary). */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 999px;        /* botón tipo "píldora" */
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
  transform: translateY(-2px); /* pequeño "levante" al pasar el mouse */
}

.btn--primary {
  background: var(--color-purple);
  color: #fff;
  box-shadow: 0 8px 20px rgba(92, 26, 79, 0.35);
}

.btn--primary:hover {
  background: var(--color-purple-dark);
}

.btn--ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Versión del botón que vive DENTRO del menú de navegación (más pequeño) */
.btn--nav {
  background: var(--color-purple);
  color: #fff !important;
  padding: 10px 22px;
  font-size: 0.85rem;
}

/* --- Animación "reveal" ---
   Por defecto todo elemento con class="reveal" empieza invisible y 20px
   abajo de su posición final. script.js le agrega la clase "is-visible"
   cuando el elemento entra en pantalla (usando IntersectionObserver), y esa
   clase activa la transición. Si JavaScript no carga por alguna razón, ver
   la regla ".no-js" más abajo que evita que el contenido quede oculto. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Red de seguridad: si el navegador no soporta JS/IntersectionObserver,
   esta clase (agregada por script.js en <html>) fuerza a mostrar todo. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}


/* ----------------------------------------------------------------------------
   4. HEADER / NAVEGACIÓN
---------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  padding: 16px 0;
  /* Antes empezaba transparente sobre la foto del hero, y solo se volvía
     blanco al hacer scroll (clase .is-scrolled). Se cambió a petición
     directa: con la foto de fondo, el logo y el texto del menú se perdían
     mientras el visitante no había movido el scroll. Ahora el header es
     blanco SIEMPRE, desde que carga la página. */
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(43, 37, 48, 0.06);
  transition: box-shadow 0.3s ease, padding 0.3s ease;
}

/* .is-scrolled ya no cambia el COLOR (el header ya es blanco desde el
   inicio) — solo se queda con un efecto sutil de "compactarse" y una
   sombra un poco más marcada mientras el visitante navega la página. */
.site-header.is-scrolled {
  padding: 10px 0;
  box-shadow: 0 4px 20px rgba(43, 37, 48, 0.1);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Envoltura <a> del logo: solo alinea, el tamaño real lo define __logo */
.site-header__brand {
  display: flex;
  align-items: center;
}

.site-header__logo {
  height: 44px;
  width: auto;
  transition: height 0.3s ease;
}

.site-header.is-scrolled .site-header__logo {
  height: 38px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}

.site-nav__link {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  /* Antes era blanco (pensado para el header transparente sobre la foto).
     Como el header ahora es blanco desde siempre, el texto pasa a ser
     oscuro desde siempre también, para tener buen contraste. */
  color: var(--color-text);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

/* El botón "Contáctanos" del menú SÍ sigue siendo blanco sobre morado
   (.btn--nav ya trae background morado), sin importar si hizo scroll o no. */
.site-nav__link.btn--nav {
  color: #fff !important;
}

/* Estado activo: script.js agrega esta clase al link de la sección visible */
.site-nav__link.is-active {
  border-color: var(--color-green);
}

/* Botón hamburguesa: oculto en escritorio, se muestra en móvil (ver media queries) */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 32px;
  padding: 6px;
}

.nav-toggle__bar {
  height: 2px;
  width: 100%;
  /* Antes era blanco (header transparente); ahora el header siempre es
     blanco, así que el ícono de hamburguesa siempre es morado. */
  background: var(--color-purple);
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
}


/* ----------------------------------------------------------------------------
   5. HERO
---------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;    /* recorta la imagen para llenar el espacio sin deformarla */
  object-position: center;
}

/* Degradado morado -> transparente ENCIMA de la foto, para que el texto
   blanco siempre sea legible sin importar qué parte de la foto quede detrás */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    rgba(63, 18, 54, 0.92) 0%,
    rgba(92, 26, 79, 0.75) 40%,
    rgba(92, 26, 79, 0.35) 100%
  );
}

.hero__content {
  position: relative;  /* para quedar por encima del overlay */
  z-index: 1;
  max-width: 700px;
  padding-top: 120px;
  padding-bottom: 80px;
}

.hero__title {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  color: #fff;
  margin-bottom: 20px;
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.15rem;
  max-width: 560px;
  margin-bottom: 36px;
}

.hero .eyebrow {
  color: var(--color-green);
}

.hero__actions {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Flechita "scroll cue" al final del hero, con animación de rebote suave */
.hero__scroll-cue {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  width: 28px;
  height: 44px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 20px;
}

.hero__scroll-cue span {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  animation: scroll-cue-bounce 1.8s infinite;
}

@keyframes scroll-cue-bounce {
  0%   { top: 8px;  opacity: 1; }
  70%  { top: 20px; opacity: 0; }
  100% { top: 8px;  opacity: 0; }
}


/* ----------------------------------------------------------------------------
   6. SECCIÓN "NOSOTROS" + BARRA DE CIFRAS
---------------------------------------------------------------------------- */
.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  /* Antes era var(--color-purple). Se cambió a verde institucional (el
     verde oscuro de marca, no el verde claro de acento) a petición directa:
     esta barra ya no habla de un producto financiero, habla de trayectoria
     del grupo, y el morado se sentía "demasiado" repetido en la página.

     El color va en rgba() (no con la variable directa) a propósito: así
     podemos bajarle intensidad (alpha) sin usar "opacity", que habría
     aclarado también el texto blanco de encima. #3E5E2C en rgb() es
     (62, 94, 44). Definitivo: 95% de intensidad (alpha 0.95). */
  background: rgba(62, 94, 44, 0.95);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
}

.stat-bar__item {
  text-align: center;
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-bar__item:last-child {
  border-right: none;
}

.stat-bar__number {
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  /* Antes era var(--color-green): ese acento servía para resaltar sobre el
     fondo morado. Sobre el nuevo fondo verde oscuro, verde-sobre-verde
     casi no se leería (muy poco contraste), así que el número pasa a
     blanco puro para que siga siendo el elemento más fuerte del bloque. */
  color: #fff;
}

.stat-bar__label {
  display: block;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.85);
  margin-top: 6px;
}


/* ----------------------------------------------------------------------------
   6b. DIAGRAMA DE 3 PILARES (Energía / Ingeniería / Sustentabilidad)
   Vive dentro de la sección "Nosotros", justo arriba de la barra de cifras
   (.stat-bar, definida más arriba). Es la pieza que reemplazó al viejo
   cuadro de términos financieros — ver el comentario largo en el HTML.
---------------------------------------------------------------------------- */
.pillars-diagram {
  text-align: center;
  margin-bottom: 48px;
}

.pillars-diagram__intro {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--color-purple);
  max-width: 620px;
  margin: 0 auto 32px;
}

/* La imagen la manda el cliente ya armada (círculos + íconos); aquí solo
   controlamos tamaño máximo y separación, el diseño interno viene en el PNG. */
.pillars-diagram__image {
  /* BUG que reportaron en un S25: esta regla es más específica que el
     reset global "img { max-width: 100%; }" (está más arriba en el
     archivo), así que lo pisaba por completo. En pantallas angostas donde
     el contenedor mide menos de 380px, la imagen se salía del contenedor
     por la derecha en vez de encogerse. Se agrega "width: 100%" para que
     SIEMPRE respete el ancho de su contenedor, y max-width solo limite
     qué tan grande puede verse en pantallas anchas. */
  width: 100%;
  max-width: 380px;
  margin: 0 auto 36px;
}

/* Mismo patrón de "3 columnas con borde de color arriba" que usamos en
   otras leyendas del sitio, para que se sienta parte del mismo sistema. */
.pillars-diagram__legend {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 780px;
  margin: 0 auto;
  text-align: left;
}

.pillars-diagram__item {
  border-top: 3px solid transparent;
  padding-top: 12px;
}

.pillars-diagram__item--energia         { border-color: var(--color-purple); }
.pillars-diagram__item--ingenieria      { border-color: var(--color-mauve); }
.pillars-diagram__item--sustentabilidad { border-color: var(--color-green); }

.pillars-diagram__item h3 {
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.pillars-diagram__item p {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin: 0;
}


/* ----------------------------------------------------------------------------
   7. SERVICIOS — tarjetas de los 4 pilares
---------------------------------------------------------------------------- */
.pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.pillar-card {
  background: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;         /* para que la imagen respete las esquinas redondeadas */
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pillar-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(43, 37, 48, 0.14);
}

/* Contenedor con relación de aspecto FIJA (4:3). Así, sin importar si la foto
   original es horizontal o vertical, todas las tarjetas se ven parejas.
   object-fit: cover recorta la imagen para rellenar ese marco. */
.pillar-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pillar-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.pillar-card:hover .pillar-card__media img {
  transform: scale(1.06);   /* zoom suave a la foto cuando el mouse está encima */
}

.pillar-card__body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.pillar-card__body h3 {
  font-size: 1.15rem;
  margin-bottom: 10px;
}

.pillar-card__body p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 14px;
}

.pillar-card__list {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pillar-card__list li {
  font-size: 0.85rem;
  color: var(--color-text);
  padding-left: 18px;
  position: relative;
}

/* Viñeta personalizada (un cuadradito verde) en vez del bullet por defecto */
.pillar-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 7px;
  height: 7px;
  background: var(--color-green);
  border-radius: 2px;
}

/* CTA de cierre al final de "Nuestros servicios", justo debajo del
   pillar-grid. Simple: una línea de texto + el mismo botón .btn--primary
   que ya se usa en el resto del sitio, apuntando a #contacto. */
.services-cta {
  text-align: center;
  margin-top: 56px;
}

.services-cta__text {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: 20px;
}


/* ----------------------------------------------------------------------------
   8. SECTORES — chips con ícono
---------------------------------------------------------------------------- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.sector-chip {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid rgba(92, 26, 79, 0.1);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  font-weight: 500;
  transition: border-color 0.3s ease, background 0.3s ease;
}

.sector-chip:hover {
  border-color: var(--color-green);
  background: var(--color-bg-alt);
}

.sector-chip__icon {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  fill: var(--color-purple);
}


/* ----------------------------------------------------------------------------
   9. ALIADOS
---------------------------------------------------------------------------- */
.partner-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.partner-card {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 32px;
  box-shadow: var(--shadow-card);
}

.partner-card__name {
  font-size: 1.3rem;
  margin-bottom: 12px;
}

.partner-card p {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 16px;
}

.partner-card a {
  font-weight: 600;
  color: var(--color-green-dark);
  border-bottom: 1px solid currentColor;
}

.partner-card__tag {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-purple);
  background: var(--color-bg-alt);
  padding: 6px 14px;
  border-radius: 999px;
}


/* ----------------------------------------------------------------------------
   10. CONTACTO — layout de dos columnas + formulario
---------------------------------------------------------------------------- */
.section--cta {
  background: linear-gradient(160deg, var(--color-purple-dark), var(--color-purple));
  color: #fff;
}

.contact-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.contact-info h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  margin-bottom: 16px;
}

.contact-info p {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 32px;
  max-width: 420px;
}

.contact-info__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contact-info__list a {
  color: var(--color-green);
  font-weight: 600;
}

.contact-info__list strong {
  color: #fff;
  font-weight: 600;
  margin-right: 6px;
}

/* --- Formulario --- */
.contact-form {
  background: #fff;
  border-radius: var(--radius-md);
  padding: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  box-shadow: var(--shadow-card);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Los campos marcados como "full" ocupan las 2 columnas del grid
   (nombre/mensaje/botón), mientras que empresa/correo van uno junto al otro */
.form-field--full {
  grid-column: 1 / -1;
}

.form-field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
}

.form-field input,
.form-field select,
.form-field textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 12px 14px;
  border: 1px solid rgba(43, 37, 48, 0.15);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  background: var(--color-bg-alt);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(140, 164, 60, 0.2);
}

/* Estado de error: script.js agrega esta clase al campo si falla la validación */
.form-field.has-error input,
.form-field.has-error textarea {
  border-color: #C0392B;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.12);
}

.form-feedback {
  grid-column: 1 / -1;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.2em;
}

.form-feedback.is-success { color: var(--color-green-dark); }
.form-feedback.is-error   { color: #C0392B; }

.contact-form .btn--primary {
  text-align: center;
}


/* ----------------------------------------------------------------------------
   11. FOOTER + BOTÓN "VOLVER ARRIBA"
---------------------------------------------------------------------------- */
.site-footer {
  background: #1F1721;   /* morado casi negro, más oscuro que cualquier variable de marca */
  padding: 40px 0 28px;
}

/* Fila superior: grid de 3 columnas (izquierda / centro / derecha vacía).
   Esto separa la posición del logo de la del menú, en vez de moverse los
   dos juntos como bloque:
     - El logo va en la columna izquierda, alineado con el mismo borde
       donde arranca el texto "Hablemos" de la sección de contacto (mismo
       .container, mismo punto de arranque a la izquierda).
     - El nav va en la columna central, que al ser la de en medio de un
       grid simétrico 1fr/auto/1fr, cae exactamente a la mitad de la
       página, sin importar cuánto mida el logo.
     - La tercera columna queda vacía a propósito: solo existe para que la
       columna central sea el verdadero centro de la página (balance). */
.site-footer__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding-bottom: 28px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__logo {
  /* Columna izquierda del grid, alineado al inicio (no centrado dentro de
     su columna) para que quede pegado al mismo borde que "Hablemos". */
  grid-column: 1;
  justify-self: start;
  /* Historial de tamaño: 40px -> 64px -> 88px, se fue agrandando a
     petición directa porque se seguía viendo chico. */
  height: 88px;
  filter: brightness(0) invert(1); /* vuelve el logo blanco para que se lea sobre fondo oscuro */
  opacity: 0.95;
}

.site-footer__nav {
  /* Columna central del grid: al ser 1fr/auto/1fr, esta columna cae
     exactamente en medio de la página. */
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  justify-content: center;
}

.site-footer__nav a {
  color: rgba(255, 255, 255, 0.75);
  /* Antes 0.9rem, se sube a 1.05rem para que se lea más grande. */
  font-size: 1.05rem;
  transition: color 0.2s ease;
}

.site-footer__nav a:hover {
  color: var(--color-green);
}

.site-footer__copy {
  color: rgba(255, 255, 255, 0.45);
  /* Antes 0.8rem, se sube a 0.9rem. */
  font-size: 0.9rem;
  text-align: center;
}

/* En pantallas angostas, el logo y el menú no caben cómodos en una sola
   fila: se apilan de nuevo y se centran, igual que antes del cambio. */
@media (max-width: 560px) {
  /* El grid de 3 columnas (logo / nav centrado / vacío) no tiene sentido
     en una pantalla angosta: se cambia a una sola columna, todo apilado
     y centrado, como al principio. */
  .site-footer__top {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .site-footer__logo {
    justify-self: center;
  }
}

/* Botón flotante circular, oculto por defecto.
   script.js le agrega "is-visible" cuando el usuario ha bajado suficiente. */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-purple);
  color: #fff;
  font-size: 1.1rem;
  box-shadow: 0 8px 20px rgba(43, 37, 48, 0.25);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 90;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}


/* ----------------------------------------------------------------------------
   12. MEDIA QUERIES (responsive)
   Estrategia: el sitio se diseñó pensando primero en escritorio (los bloques
   de arriba), y aquí "desarmamos" los grids a columnas más angostas a medida
   que la pantalla se hace más chica. Los puntos de quiebre (breakpoints)
   son: 1024px (tablet horizontal), 768px (tablet vertical / móvil grande).
---------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  :root {
    --section-padding: 72px;
  }

  .pillar-grid {
    grid-template-columns: repeat(2, 1fr); /* 4 tarjetas -> 2 columnas x 2 filas */
  }

  .sector-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .contact-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Menú: pasamos de horizontal a panel desplegable a pantalla completa */
  .nav-toggle {
    display: flex;
  }

  .site-nav {
    position: fixed;
    inset: 0;
    top: 0;
    flex-direction: column;
    justify-content: center;
    background: var(--color-purple);
    gap: 28px;

    /* Oculto por defecto: desplazado fuera de pantalla a la derecha */
    transform: translateX(100%);
    transition: transform 0.35s ease;
  }

  /* script.js agrega esta clase al <nav> al pulsar la hamburguesa */
  .site-nav.is-open {
    transform: translateX(0);
  }

  .site-nav__link {
    color: #fff !important;
    font-size: 1.2rem;
  }

  .stat-bar {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .stat-bar__item:nth-child(2n) {
    border-right: none;
  }

  /* La leyenda de 3 pilares también se apila en una sola columna en móvil,
     igual que el resto de los grids de 3 elementos del sitio. */
  .pillars-diagram__legend {
    grid-template-columns: 1fr;
  }

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

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

  .contact-form {
    grid-template-columns: 1fr;   /* todos los campos a una sola columna */
    padding: 24px;
  }

  .hero__actions {
    flex-direction: column;
  }

  .hero__actions .btn {
    text-align: center;
  }
}