/* =========================================================
   Quimindustriales — Hoja de estilos principal (v2, moderna)
   Paleta: azul tinta corporativo + rojo institucional (del
   logotipo) y un acento aqua ligado al agua/tratamiento, sobre
   fondo blanco. Tipografía: Fraunces (display) + Inter (texto).
   ========================================================= */

:root{
  --azul:              #0B3878;
  --azul-oscuro:       #071F42;
  --azul-suave:        #EAF0F8;
  --rojo:              #C41E24;
  --rojo-oscuro:       #9B171C;
  --aqua:              #0EA5B7;
  --aqua-oscuro:       #087B89;
  --aqua-suave:        #E3F6F8;
  --dorado:            #C79A56;
  --carbon:            #1E2733;
  --gris-texto:        #57677A;
  --gris-linea:        #E4E9EF;
  --blanco:            #FFFFFF;
  --fondo-seccion:     #F7F9FC;

  --negro-barra:       #0B0B0A;
  --rojo-cinta:        #C2101D;

  --fuente-titulo: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fuente-texto:  'Inter', 'Segoe UI', Arial, sans-serif;

  --ancho-contenido: 1180px;
  --espaciado-contenido: 28px;
  --alto-negra: 32px;
  --alto-header: 150px; /* valor de respaldo; se recalcula por JS (--alto-header-real) */
  --radio: 16px;
  --radio-sm: 10px;
  --transicion: 0.3s cubic-bezier(.25,.8,.25,1);
  --sombra-suave: 0 8px 24px rgba(10,35,75,0.08);
  --sombra-media: 0 18px 44px rgba(10,35,75,0.16);
  --sombra-boton: 0 10px 26px rgba(11,56,120,0.24);
}

*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin:0;
  background: var(--blanco);
  color: var(--carbon);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }

h1,h2,h3,h4{
  font-family: var(--fuente-titulo);
  color: var(--azul-oscuro);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.01em;
  margin: 0 0 .55em 0;
}

p{ margin: 0 0 1em 0; color: var(--gris-texto); }

.contenedor{
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px;
}

.etiqueta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family: var(--fuente-texto);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .76rem;
  font-weight: 700;
  color: var(--aqua-oscuro);
  margin-bottom: 16px;
}
.etiqueta::before{
  content:"";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--rojo);
  flex-shrink:0;
}

/* =========================================================
   Estado "sin JavaScript" / progresivo — evita contenido
   invisible si el script no carga: por defecto todo se ve.
   ========================================================= */
.revelar{ opacity:1; transform:none; }
html.js .revelar{
  opacity:0;
  transform: translateY(22px);
  transition: opacity .55s var(--transicion), transform .55s var(--transicion);
}
html.js .revelar.visible{ opacity:1; transform: translateY(0); }
html.js .revelar.retraso-1{ transition-delay:.06s; }
html.js .revelar.retraso-2{ transition-delay:.12s; }
html.js .revelar.retraso-3{ transition-delay:.18s; }
html.js .revelar.retraso-4{ transition-delay:.24s; }

/* =========================================================
   BARRA DE NAVEGACIÓN — siempre visible
   El banner (imagen) y la barra roja del menú comparten el
   mismo ancho que el contenido de la página (--ancho-contenido),
   quedando alineados con los títulos y secciones de abajo.
   ========================================================= */
.barra-nav{
  position: sticky;
  top:0;
  z-index: 1000;
  background: var(--blanco);
  transition: box-shadow var(--transicion);
  display:flex;
  flex-direction:column;
  align-items:center;
}
.barra-nav.con-sombra{ box-shadow: var(--sombra-media); }

/* Envoltorio que agrupa imagen + menú: mismo ancho que .contenedor */
.grupo-banner{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap: 6px;
  width:100%;
  max-width: var(--ancho-contenido);
  margin:0 auto;
  padding: 0 var(--espaciado-contenido);
}

/* Franja superior: logotipo + fotografías (ancho fluido, sin recortes).
   IMPORTANTE: se fija aspect-ratio con las proporciones EXACTAS de la
   imagen (2745 x 353) para que el navegador reserve el espacio antes
   de que la imagen termine de cargar. Sin esto, cada página "salta"
   de tamaño en el instante en que la imagen carga, dando la sensación
   de que el menú cambia entre una página y otra. */
.franja-logo{
  background: var(--blanco);
  overflow:hidden;
  padding-top: 6px;
  aspect-ratio: 2745 / 353;
}
.enlace-logo{ display:block; width:100%; height:100%; }
.banner-superior{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;
  transition: transform var(--transicion);
}
.enlace-logo:hover .banner-superior{ transform: scale(1.008); }

/* Franja inferior: barra roja con el menú (mismo ancho que la imagen) */
.franja-negra{
  width:100%;
  height: var(--alto-negra);
  background: linear-gradient(180deg, #D3202D 0%, var(--rojo-cinta) 55%, #A80F1A 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), inset 0 -1px 0 rgba(0,0,0,0.2);
  position:relative;
  overflow:hidden;
}
.franja-negra .nav-interna{
  height:100%;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0 18px;
  position:relative;
  z-index:1;
}

.menu-principal{
  display:flex;
  align-items:center;
  gap: 2px;
  list-style:none;
  margin:0; padding:0;
  height:100%;
}
.menu-principal > li{ position:relative; height:100%; display:flex; align-items:center; }

.menu-principal > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  height:100%;
  padding: 0 14px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #FFFFFF;
  position:relative;
  overflow:hidden;
  white-space:nowrap;
  transition: letter-spacing var(--transicion), transform var(--transicion), text-shadow var(--transicion);
}
/* Halo suave detrás del texto al pasar el mouse */
.menu-principal > li > a::before{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:140%; height:220%;
  background: radial-gradient(circle, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 68%);
  transform: translate(-50%,-50%) scale(.6);
  opacity:0;
  transition: opacity var(--transicion), transform var(--transicion);
  pointer-events:none;
}
/* Línea inferior animada */
.menu-principal > li > a::after{
  content:"";
  position:absolute;
  left:20px; right:20px; bottom:3px;
  height:2px;
  background: #fff;
  border-radius:2px;
  transform: scaleX(0);
  transform-origin:center;
  transition: transform var(--transicion);
}
.menu-principal > li > a:hover{
  transform: translateY(-2px);
  letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}
.menu-principal > li > a:hover::before{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.menu-principal > li > a:hover::after,
.menu-principal > li > a.activo::after{ transform: scaleX(1); }
.menu-principal > li > a.activo{ text-shadow: 0 2px 10px rgba(0,0,0,0.25); }

.icono-caret{
  width:8px; height:8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  margin-top:-3px;
  transition: transform var(--transicion);
}
.tiene-submenu:hover .icono-caret{ transform: rotate(225deg); margin-top:3px; }

.submenu{
  position:absolute;
  top: calc(100% + 3px);
  left: 0;
  min-width: 340px;
  background: var(--blanco);
  border: 1px solid var(--gris-linea);
  border-top: 3px solid var(--rojo-cinta);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra-media);
  padding: 10px;
  list-style:none;
  margin:0;
  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}
.tiene-submenu:hover .submenu,
.tiene-submenu:focus-within .submenu{
  opacity:1; visibility:visible; transform: translateY(0);
}
.submenu li a{
  display:flex;
  align-items:center;
  gap:12px;
  padding: 12px 14px;
  border-radius: var(--radio-sm);
  font-size:.92rem;
  font-weight:600;
  color: var(--carbon);
  transition: background var(--transicion), color var(--transicion);
}
.submenu li a .num{
  display:flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex-shrink:0;
  border-radius:50%;
  background: var(--aqua-suave);
  font-family: var(--fuente-titulo);
  color: var(--aqua-oscuro);
  font-weight:600;
  font-size:.78rem;
}
.submenu li a:hover{ background: var(--azul-suave); color: var(--azul); }
.submenu li a:hover .num{ background: var(--azul); color:#fff; }

.btn-menu{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:40px; height:40px;
  background:none;
  border:none;
  cursor:pointer;
  flex-shrink:0;
}
.btn-menu span{
  display:block; width:100%; height:2px;
  background: #fff;
  border-radius:2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.btn-menu.abierto span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.btn-menu.abierto span:nth-child(2){ opacity:0; }
.btn-menu.abierto span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.espaciador-header{ display:none; }

/* =========================================================
   ENCABEZADO DE PÁGINA — banda compacta para páginas internas
   (evita huecos en blanco: reemplaza el padding vacío)
   ========================================================= */
.franja-superior{
  position:relative;
  padding: 56px 0 46px;
  background:
    radial-gradient(900px 380px at 90% -20%, rgba(14,165,183,0.10), transparent 60%),
    linear-gradient(180deg, var(--azul-suave) 0%, var(--blanco) 100%);
  overflow:hidden;
  border-bottom: 1px solid var(--gris-linea);
}
.franja-superior::after{
  content:"";
  position:absolute;
  right:-90px; top:-90px;
  width:260px; height:260px;
  border-radius:50%;
  border: 1px solid rgba(11,56,120,.12);
}
.franja-superior .contenedor{ position:relative; z-index:1; }
.franja-superior h1{ font-size: clamp(1.8rem, 3vw, 2.4rem); margin-bottom:.3em; }
.franja-superior p.intro{ max-width: 62ch; font-size: 1.02rem; margin:0; }

/* =========================================================
   HERO (Inicio)
   ========================================================= */
.hero{
  position:relative;
  padding: 76px 0 84px;
  background:
    radial-gradient(1000px 460px at 88% -12%, rgba(14,165,183,0.12), transparent 60%),
    radial-gradient(700px 340px at 4% 8%, rgba(11,56,120,0.05), transparent 55%),
    var(--blanco);
  overflow:hidden;
}
.hero::before{
  content:"";
  position:absolute;
  right:-130px; top:-110px;
  width:420px; height:420px;
  border-radius:50%;
  border: 1px solid rgba(11,56,120,.10);
}
.hero::after{
  content:"";
  position:absolute;
  right:20px; top:90px;
  width:210px; height:210px;
  border-radius:50%;
  border: 1px dashed rgba(14,165,183,.35);
}
.hero .contenedor{ position:relative; z-index:1; }

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 56px;
  align-items:center;
}

.hero h1{
  font-size: clamp(2.2rem, 3.8vw, 3.35rem);
  margin-bottom: .38em;
}
.hero .destaque{
  color: var(--rojo);
  position:relative;
}
.hero .destaque-azul{
  color: var(--azul);
  position:relative;
}
.hero p.intro{ font-size: 1.1rem; max-width: 54ch; }
.hero .acciones{ display:flex; gap:14px; flex-wrap:wrap; margin-top: 30px; }

.tarjeta-cifra{
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(10px);
  border: 1px solid var(--gris-linea);
  border-radius: 22px;
  padding: 36px 32px;
  box-shadow: var(--sombra-media);
  text-align:center;
}
.tarjeta-cifra .numero{
  font-family: var(--fuente-titulo);
  font-size: 4.4rem;
  font-weight:600;
  color: var(--azul);
  line-height:1;
}
.tarjeta-cifra .numero span{ color: var(--rojo); }
.tarjeta-cifra .texto{
  margin-top:8px;
  text-transform:uppercase;
  letter-spacing:.1em;
  font-size:.8rem;
  font-weight:700;
  color: var(--gris-texto);
}
.tarjeta-cifra hr{ border:none; border-top:1px solid var(--gris-linea); margin: 22px 0; }
.mini-lista{ list-style:none; margin:0; padding:0; text-align:left; }
.mini-lista li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.92rem; color: var(--carbon);
  padding: 7px 0;
}
.mini-lista li::before{
  content:"";
  width:7px; height:7px; margin-top:8px;
  background: var(--aqua);
  border-radius:2px;
  flex-shrink:0;
}

/* =========================================================
   Botones — estilo píldora moderno
   ========================================================= */
.boton{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 14px 28px;
  font-weight:700;
  font-size:.92rem;
  border-radius: 999px;
  letter-spacing:.01em;
  transition: transform var(--transicion), box-shadow var(--transicion), background var(--transicion), color var(--transicion), border-color var(--transicion);
  border:1px solid transparent;
  cursor:pointer;
}
.boton-primario{ background: var(--azul); color: var(--blanco); box-shadow: var(--sombra-boton); }
.boton-primario:hover{ background: var(--azul-oscuro); transform: translateY(-2px); box-shadow: 0 16px 32px rgba(11,56,120,.3); }
.boton-secundario{ background: var(--blanco); color: var(--azul); border-color: var(--gris-linea); }
.boton-secundario:hover{ border-color: var(--azul); background: var(--azul-suave); transform: translateY(-2px); }

/* =========================================================
   Secciones
   ========================================================= */
.seccion{ padding: 84px 0; }
.seccion.alterna{ background: var(--fondo-seccion); }
.encabezado-seccion{ max-width: 640px; margin-bottom: 48px; }
.encabezado-seccion.centrado{ margin-left:auto; margin-right:auto; text-align:center; }
.encabezado-seccion h2{ font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.encabezado-seccion p{ font-size: 1.04rem; }

/* Rejilla de tarjetas */
.rejilla-tarjetas{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rejilla-dos{ grid-template-columns: repeat(2, 1fr); }
.tarjeta{
  background: var(--blanco);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio);
  padding: 32px 28px;
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
  position:relative;
}
.tarjeta:hover{ transform: translateY(-6px); box-shadow: var(--sombra-media); border-color: transparent; }
.tarjeta .icono-tarjeta{
  width:52px; height:52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--aqua) 130%);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  box-shadow: 0 10px 22px rgba(11,56,120,.22);
}
.tarjeta .icono-tarjeta svg{ width:24px; height:24px; }
.tarjeta h3{ font-size:1.15rem; margin-bottom:.5em; }
.tarjeta p{ font-size:.96rem; margin-bottom: 1.1em; }
.tarjeta .enlace-tarjeta{
  font-size:.85rem; font-weight:700; color: var(--rojo);
  text-transform:uppercase; letter-spacing:.05em;
  display:inline-flex; align-items:center; gap:6px;
}
.tarjeta .enlace-tarjeta .flecha{ transition: transform var(--transicion); }
.tarjeta:hover .enlace-tarjeta .flecha{ transform: translateX(5px); }

/* Lista de conocimiento */
.lista-conocimiento{ border-top: 1px solid var(--gris-linea); }
.item-conocimiento{
  display:flex; align-items:center; gap: 26px;
  padding: 24px 10px;
  border-bottom: 1px solid var(--gris-linea);
  border-radius: var(--radio-sm);
  transition: background var(--transicion), padding-left var(--transicion);
}
.item-conocimiento:hover{ background: var(--fondo-seccion); padding-left: 18px; }
.item-conocimiento .num-item{
  font-family: var(--fuente-titulo);
  font-weight:600;
  font-size: 1.9rem;
  color: var(--aqua-oscuro);
  width: 58px; flex-shrink:0;
}
.item-conocimiento .cuerpo-item{ flex:1; }
.item-conocimiento h3{ font-size:1.1rem; margin-bottom:.25em; }
.item-conocimiento p{ margin:0; font-size:.94rem; }
.item-conocimiento .ir{
  flex-shrink:0; width:38px; height:38px; border-radius:50%;
  border: 1px solid var(--gris-linea);
  display:flex; align-items:center; justify-content:center;
  color: var(--azul);
  transition: background var(--transicion), color var(--transicion), transform var(--transicion), border-color var(--transicion);
}
.item-conocimiento:hover .ir{ background: var(--rojo); border-color: var(--rojo); color:#fff; transform: translateX(4px); }

/* Página "próximamente" (subpáginas cc_*) */
.marcador-contenido{
  border: 1px dashed var(--gris-linea);
  background: var(--fondo-seccion);
  border-radius: var(--radio);
  padding: 52px 40px;
  text-align:center;
}
.marcador-contenido .icono-reloj{
  width:58px; height:58px; margin: 0 auto 18px;
  border-radius:16px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--aqua) 130%);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(11,56,120,.22);
}
.marcador-contenido .icono-reloj svg{ width:26px; height:26px; }

.migas{ font-size:.85rem; color: var(--gris-texto); margin-bottom: 14px; }
.migas a{ color: var(--azul); font-weight:600; }
.migas .sep{ margin: 0 8px; color: var(--gris-linea); }

/* Figuras (imágenes) dentro de los artículos del Centro de Conocimiento */
.figura-articulo{
  margin: 28px 0;
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio);
  overflow:hidden;
  background: var(--fondo-seccion);
}
.figura-articulo img{ width:100%; height:auto; display:block; }
.figura-articulo figcaption{
  padding: 12px 18px;
  font-size: .86rem;
  color: var(--gris-texto);
  border-top: 1px solid var(--gris-linea);
  background: var(--blanco);
}
.figura-articulo.figura-angosta{ max-width: 420px; margin-left:auto; margin-right:auto; }

/* Subtítulos intermedios dentro de un artículo largo */
.subtitulo-articulo{
  font-family: var(--fuente-texto);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--rojo);
  margin: 8px 0 6px;
}

/* =========================================================
   Galería
   ========================================================= */
.rejilla-galeria{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.item-galeria{
  position:relative;
  border-radius: var(--radio);
  overflow:hidden;
  background: var(--azul);
  box-shadow: var(--sombra-suave);
  transition: transform var(--transicion), box-shadow var(--transicion);
  cursor:pointer;
}
.item-galeria:hover{ transform: translateY(-6px); box-shadow: var(--sombra-media); }
.item-galeria img{ width:100%; height: 220px; object-fit:cover; transition: transform .6s var(--transicion); }
.item-galeria:hover img{ transform: scale(1.08); }
.item-galeria figcaption{
  padding: 14px 16px;
  min-height: 60px;
  display:flex;
  align-items:center;
  background: var(--blanco);
  border: 1px solid var(--gris-linea);
  border-top:none;
}
.item-galeria figcaption .titulo-foto{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight:700; font-size:.94rem; color: var(--azul-oscuro); margin-bottom:0;
}
.item-galeria figcaption .desc-foto{ display:none; }

.visor-overlay{
  position:fixed; inset:0;
  background: rgba(6,18,38,.9);
  display:flex; align-items:center; justify-content:center;
  z-index: 2000;
  opacity:0; visibility:hidden;
  transition: opacity var(--transicion), visibility var(--transicion);
  padding: 40px;
}
.visor-overlay.activo{ opacity:1; visibility:visible; }
.visor-caja{ max-width: 860px; width:100%; text-align:center; }
.visor-caja img{ border-radius: var(--radio); max-height:70vh; margin:0 auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.visor-caja .visor-texto{ color:#fff; margin-top:16px; }
.visor-caja .visor-texto .titulo-foto{ font-family: var(--fuente-titulo); font-size:1.2rem; }
.visor-caja .visor-texto .desc-foto{ color:#c7d2e0; font-size:.9rem; }
.visor-cerrar{
  position:absolute; top:28px; right:34px;
  width:44px; height:44px; border-radius:50%;
  background: rgba(255,255,255,.1);
  color:#fff; border:1px solid rgba(255,255,255,.3);
  font-size:1.3rem; cursor:pointer;
  transition: background var(--transicion), transform var(--transicion);
}
.visor-cerrar:hover{ background: rgba(255,255,255,.22); transform: rotate(90deg); }

/* =========================================================
   Contacto
   ========================================================= */
.rejilla-contacto{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.tarjeta-contacto{
  background: var(--blanco);
  border: 1px solid var(--gris-linea);
  border-radius: var(--radio);
  padding: 34px 28px;
  text-align:center;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.tarjeta-contacto:hover{ transform: translateY(-6px); box-shadow: var(--sombra-media); }
.tarjeta-contacto .icono{
  width:54px; height:54px; margin: 0 auto 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--azul) 0%, var(--aqua) 130%);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 22px rgba(11,56,120,.22);
}
.tarjeta-contacto .icono svg{ width:23px; height:23px; }
.tarjeta-contacto h3{ font-size:1.05rem; margin-bottom:.6em; }
.tarjeta-contacto a, .tarjeta-contacto .dato{
  display:block; color: var(--carbon); font-weight:600; font-size:.98rem; padding: 3px 0;
  transition: color var(--transicion);
}
.tarjeta-contacto a:hover{ color: var(--rojo); }

.franja-mapa{
  margin-top: 54px;
  border-radius: var(--radio);
  border: 1px solid var(--gris-linea);
  background: linear-gradient(120deg, var(--azul-suave), var(--aqua-suave));
  padding: 38px 40px;
  display:flex; align-items:center; justify-content:space-between; gap: 24px; flex-wrap:wrap;
}
.franja-mapa h3{ margin-bottom:.2em; }
.franja-mapa p{ margin:0; }

/* =========================================================
   Pie de página
   ========================================================= */
.pie-pagina{ background: var(--azul-oscuro); color: #C9D4E2; padding: 34px 0 16px; }
.pie-grid{
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 32px;
  align-items:start;
  padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.12);
}
.pie-pagina h4{
  color:#fff; font-family: var(--fuente-texto); font-size:.85rem;
  text-transform:uppercase; letter-spacing:.09em; margin-bottom: 10px;
}
.pie-pagina .marca-pie{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.pie-pagina .marca-pie img{ height:34px; background:#fff; padding:5px; border-radius: var(--radio-sm); }
.pie-pagina p{ color:#B7C3D6; font-size:.9rem; margin-bottom:0; }
.pie-pagina ul{ list-style:none; margin:0; padding:0; }
.pie-pagina ul li{ margin-bottom:6px; }
.pie-pagina ul li a{ color:#C9D4E2; font-size:.9rem; transition: color var(--transicion), padding-left var(--transicion); }
.pie-pagina ul li a:hover{ color: var(--aqua); padding-left:4px; }
/* Contacto en formato compacto (en línea, sin apilar cada dato) */
.pie-contacto-lista{
  display:flex;
  flex-wrap:wrap;
  gap: 4px 18px;
}
.pie-contacto-lista li{ margin-bottom:0; }
.pie-inferior{
  padding-top: 14px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:.82rem; color:#8FA0B8;
}

/* =========================================================
   Responsivo
   ========================================================= */
@media (max-width: 980px){
  .rejilla-tarjetas{ grid-template-columns: repeat(2,1fr); }
  .rejilla-galeria{ grid-template-columns: repeat(3,1fr); }
  .hero-grid{ grid-template-columns:1fr; }
  .pie-grid{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px){
  :root{ --alto-negra: 46px; }
  .btn-menu{ display:flex; }
  .franja-negra .nav-interna{ justify-content:flex-end; padding: 0 14px; }

  .menu-principal{
    position:fixed; top: var(--alto-header-real, var(--alto-header)); left:0; right:0; bottom:0;
    height:auto;
    background: var(--blanco);
    flex-direction:column; align-items:stretch; gap:0;
    padding: 10px 20px 30px;
    overflow-y:auto;
    transform: translateX(100%);
    transition: transform var(--transicion);
  }
  .menu-principal.abierto{ transform: translateX(0); }
  .menu-principal > li{ height:auto; display:block; }
  .menu-principal > li > a{
    height:auto; padding: 16px 6px; border-bottom:1px solid var(--gris-linea);
    color: var(--azul-oscuro) !important; background:none !important;
  }
  .menu-principal > li > a::after{ display:none; }
  .menu-principal > li > a.activo{ color: var(--rojo) !important; }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    box-shadow:none; border: none; border-left: 3px solid var(--dorado);
    display:none; margin: 0 0 6px 10px; border-radius:0;
  }
  .tiene-submenu.abierto .submenu{ display:block; }
  .tiene-submenu > a .icono-caret{ transform: rotate(45deg) !important; color: var(--azul-oscuro); }
  .tiene-submenu.abierto > a .icono-caret{ transform: rotate(225deg) !important; }

  .rejilla-tarjetas, .rejilla-galeria, .rejilla-contacto{ grid-template-columns: 1fr; }
  .pie-grid{ grid-template-columns: 1fr; gap: 20px; }
  .seccion{ padding: 58px 0; }
  .franja-superior{ padding: 42px 0 34px; }
  .item-conocimiento{ flex-wrap:wrap; }
}