/* ============================================================
   SOCOAM — Sociedad de Consultorías Ambientales
   Hoja de estilos principal
   Paleta corporativa: azul #0D3E80 · verde #005028 · gris #505050
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* SOCOAM pidió azules más claros, menos sólidos. Se sube todo el rango un
     par de escalones manteniendo el tono de marca; el #0D3E80 original queda
     sólo como el extremo oscuro de los degradados. */
  --azul:        #1B4F94;
  --azul-osc:    #133A6C;
  --azul-clr:    #4277BC;
  --azul-lav:    #EEF5FB;
  --verde:       #005028;
  --verde-clr:   #0A7A3E;
  --verde-lav:   #EAF3EE;
  --gris:        #505050;
  --gris-med:    #7C7C7C;
  --gris-sua:    #A8A8A8;
  --borde:       #E1E9ED;
  --fondo:       #FFFFFF;
  --fondo-alt:   #F4F6FB;

  --fuente:      "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;

  --header-h:    84px;
  --ancho:       1360px;
  --radio:       10px;
  /* Superficies grandes en degradado: SOCOAM pidio que los azules y verdes
     no se vieran planos ni a todo volumen, sino matizados, en la linea del
     dibujo del pie de pagina. Los tonos siguen siendo los de la marca. */
  --azul-suave:  #4477BA;
  --verde-suave: #0B6E3A;
  --deg-azul:    linear-gradient(155deg, #487BBE 0%, #285999 100%);
  --deg-azul-cl: linear-gradient(155deg, #5B8CCE 0%, #386BAE 100%);
  --deg-verde:   linear-gradient(155deg, #0C7440 0%, #044A26 100%);
  --deg-lavado:  linear-gradient(160deg, #F1F8FC 0%, #E7F2F8 100%);
  /* Pie de pagina: el cliente insistio (16-09) en que seguia viendose como un
     bloque azul solido y lo queria matizado, como en las imagenes de IA. El
     degradado arranca casi lavanda en la franja de la silueta y solo se cierra
     hacia abajo; donde empieza el texto ya va en #5988BA, que sobre blanco da
     5.3:1 de contraste. */
  --deg-pie:     linear-gradient(180deg, #A6C6E6 0%, #85AED7 16%, #5988BA 34%, #3B6899 70%, #2D5988 100%);

  --sombra:      0 2px 14px rgba(32,87,158, .07);
  --sombra-alta: 0 14px 44px rgba(32,87,158, .14);
  --transicion:  .4s cubic-bezier(.4, 0, .2, 1);
  --franja:      min(14.4vw, 230px);   /* alto de la silueta del pie */
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--gris);
  background: var(--fondo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--azul); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--fuente-cond);
  font-weight: 600;
  line-height: 1.12;
  color: var(--azul);
  letter-spacing: .005em;
  text-wrap: balance;
}
p { text-wrap: pretty; }

/* SOCOAM pidió no resaltar palabras sueltas en otro color: el énfasis se
   marca sólo con el grosor, nunca cambiando el color del texto. */
strong, b { font-weight: 600; color: inherit; }

:focus-visible { outline: 3px solid var(--azul-clr); outline-offset: 3px; border-radius: 3px; }

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--azul); color: #fff; padding: .8rem 1.4rem; font-weight: 600;
}
.salto-contenido:focus { left: 12px; top: 12px; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3. Utilidades de layout ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px; }
.seccion {
  position: relative;
  padding-block: clamp(2.2rem, 3.6vw, 3.4rem);
  overflow: hidden;      /* recorta las tramas decorativas que sobresalen */
  overflow: clip;        /* preferido: no crea contexto de scroll */
}
.seccion--alt { background: var(--fondo-alt); }

.eyebrow {
  font-family: var(--fuente-cond);
  font-size: .95rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--verde-clr);
  display: flex; align-items: center; gap: .8rem; margin-bottom: .6rem;
}
.eyebrow::after { content: ""; flex: 0 0 46px; height: 2px; background: currentColor; opacity: .5; }
.eyebrow--centro { justify-content: center; }
.eyebrow--centro::before { content: ""; flex: 0 0 46px; height: 2px; background: currentColor; opacity: .5; }

.titulo-seccion { font-size: clamp(1.65rem, 2.7vw, 2.15rem); text-transform: uppercase; }
.bajada { font-size: 1.06rem; color: var(--gris-med); max-width: 66ch; margin-top: .8rem; }
.centrado { text-align: center; }
.centrado .bajada { margin-inline: auto; }

/* Textos justificados (obs. 6 del cliente). Se aplica a las columnas de
   lectura corrida, que es donde justificar mejora la mancha de texto; en
   tarjetas angostas y rótulos de interfaz se deja en bandera, porque ahí el
   justificado abre ríos. El guionado automático los evita en español. */
.duo p,
.intro-servicio p,
.articulo > p,
.item__cuerpo p,
/* Los productos van en columna estrecha: justificados abrían ríos de espacio
   entre palabras. Alineados a la izquierda, y sin partir palabras. */
.ficha__cuerpo p,
.texto-largo p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
.duo .eyebrow, .intro-servicio .eyebrow { text-align: left; }

/* ---------- 4. Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .65rem;
  font-family: var(--fuente-cond); font-size: 1.02rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  padding: .92rem 2rem; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: var(--transicion); text-align: center;
}
.btn svg { width: 17px; height: 17px; flex: none; transition: transform var(--transicion); }
.btn:hover svg { transform: translateX(4px); }

.btn--azul { background: var(--deg-azul); color: #fff; border-color: transparent; }
.btn--azul:hover { background: var(--deg-azul-cl); border-color: transparent; box-shadow: var(--sombra-alta); }

.btn--verde { background: var(--deg-verde); color: #fff; border-color: transparent; }
.btn--verde:hover { background: var(--verde-clr); border-color: var(--verde-clr); }

.btn--linea { background: transparent; color: var(--azul); border-color: var(--borde); }
.btn--linea:hover { border-color: var(--azul); background: var(--azul-lav); }

.btn--fantasma { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn--fantasma:hover { background: #fff; color: var(--azul); border-color: #fff; }

/* ---------- 5. Header fijo ---------- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  height: var(--header-h);
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow var(--transicion);
}
.header.esta-fijo { box-shadow: 0 4px 22px rgba(32,87,158,.10); }

.header__interior {
  height: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.header__logo { flex: none; display: block; }
.header__logo img { width: clamp(150px, 15vw, 196px); }

/* Portada: el logo se despega del borde y crece, para que quede destacado y
   esquinado sobre el hero (obs. del cliente). Sale del alto del header y se
   apoya sobre la primera foto, con una pastilla blanca que lo sostiene. */
.header--portada .header__interior { position: relative; }
.header--portada .header__logo {
  /* En el flujo del flex, NO absoluto: en absoluto el logo dejaba de ocupar
     ancho y el menú se le montaba encima. Se mantiene pegado a la esquina
     con margen negativo y una placa blanca que baja sobre el hero. */
  position: relative;
  z-index: 2;
  align-self: stretch;
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 0 0 var(--radio) 0;
  padding: .55rem 1.4rem .55rem 24px;
  margin-left: -24px;
  box-shadow: 2px 2px 0 rgba(32,87,158,.05);
}

/* El logo de la portada es más ancho, así que el menú reduce su separación
   para que las 8 secciones sigan cabiendo sin solaparse. */
.header--portada .nav { gap: clamp(.35rem, .95vw, 1.05rem); }
.header--portada .header__cta { padding: .6rem 1.15rem; font-size: .88rem; }
.header--portada .header__logo img { width: clamp(168px, 15.5vw, 224px); }
@media (max-width: 1180px) {
  .header--portada .header__logo { position: static; translate: none; padding: 0; margin-left: 0; background: none; }
  .header--portada .header__logo img { width: clamp(150px, 26vw, 196px); }
}

.nav { display: flex; align-items: center; gap: clamp(.55rem, 1.1vw, 1.25rem); }
.nav__link {
  position: relative;
  font-family: var(--fuente-cond); font-size: clamp(.86rem, .95vw, .99rem); font-weight: 600;
  letter-spacing: .085em; text-transform: uppercase; color: var(--gris);
  padding: .45rem 0; transition: color var(--transicion); white-space: nowrap;
}
.nav__link::after {
  content: ""; position: absolute; left: 50%; bottom: 0; translate: -50% 0;
  width: 0; height: 2px; background: var(--verde-clr); transition: width var(--transicion);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--azul); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { width: 100%; }
.nav__link--doble { line-height: 1.05; text-align: center; white-space: normal; max-width: 7.4em; }

/* Industria, Servicios y Especialidades ya no tienen pagina propia: en el
   menu son un titulo que despliega su listado, no un enlace (obs. 1). */
/* El botón ya lleva la clase .nav__link, así que aquí sólo se le quita el
   aspecto de botón. Antes esta regla repetía la tipografía e imponía
   white-space: nowrap, lo que anulaba el salto de línea de .nav__link--doble
   y hacía que "Especialidades Ambientales" se montara sobre "Proyectos". */
.nav__link--grupo { background: none; border: 0; cursor: default; }
.nav__grupo:hover .nav__link--grupo,
.nav__grupo:focus-within .nav__link--grupo { color: var(--azul); }
.nav__grupo:hover .nav__link--grupo::after,
.nav__grupo:focus-within .nav__link--grupo::after { width: 100%; }
.nav__link--grupo[aria-current="page"] { color: var(--azul); }

.header__cta { flex: none; padding: .68rem 1.5rem; font-size: .93rem; }

.hamburguesa {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.hamburguesa span { display: block; height: 2px; background: var(--azul); border-radius: 2px; transition: var(--transicion); }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   6. HERO — 4 paneles con velo que se aclara + cambio de foto
   Mecanismo: capa de fotos superpuestas (crossfade por opacidad)
   + paneles en flex; el panel activo recibe velo azul de marca,
   los inactivos velo neutro oscuro.
   ============================================================ */
.hero {
  position: relative;
  margin-top: var(--header-h);
  height: calc(100svh - var(--header-h));
  min-height: 540px; max-height: 780px;
  overflow: hidden;
  background: var(--azul-osc);
}

/* --- capa de fotos --- */
.hero__fotos { position: absolute; inset: 0; z-index: 0; }
.hero__foto {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity .9s ease;
  will-change: opacity;
}
.hero__foto.es-visible { opacity: 1; }
.hero__foto img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s cubic-bezier(.2, 0, .2, 1);
}
/* la foto del panel bajo el cursor se amplía lentamente */
.hero__foto.es-visible img { transform: scale(1.14); }
@media (prefers-reduced-motion: reduce) {
  .hero__foto img, .hero__foto.es-visible img { transform: none; transition: none; }
}

/* --- rejilla de paneles --- */
.hero__paneles {
  position: relative; z-index: 1;
  display: flex; height: 100%;
}
.hero__panel {
  position: relative; flex: 1 1 25%; min-width: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* La onda inferior escala con el ancho del viewport (alto = 100vw x 48/1440),
     y su punto blanco más alto llega a 100vw x 30/1440 = 2.08vw desde abajo.
     El relleno inferior se calcula sobre esa misma base para que el botón
     "Descubrir" mantenga una separación constante del blanco a cualquier ancho. */
  padding: 2rem 1.9rem calc(2.1vw + 1.7rem);
  color: #fff; text-decoration: none;
  border-left: 1px solid rgba(255,255,255,.16);
  isolation: isolate;
}
.hero__panel:first-child { border-left: 0; }

/* En escritorio la foto la pone la capa .hero__fotos. El fondo propio de cada
   panel se reserva para móvil, donde esa capa no existe: si se dejara activo
   en escritorio la imagen se veía dos veces —una en el panel y otra detrás—,
   que es justo lo que observó el cliente. */
@media (min-width: 901px) { .hero__panel { background-image: none !important; } }

/* velo: neutro oscuro por defecto, azul de marca cuando esta activo */
.hero__panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg,
      rgba(13,22,29,.16) 0%, rgba(13,22,29,.34) 42%, rgba(13,22,29,.74) 100%);
  transition: background .55s ease;
}
.hero__panel.es-activo::after {
  background: linear-gradient(180deg,
      rgba(39,99,177,.04) 0%, rgba(34,90,163,.24) 42%, rgba(27,75,139,.68) 100%);
}

.hero__panel-titulo {
  font-family: var(--fuente-cond);
  font-size: clamp(1.32rem, 1.75vw, 1.72rem); font-weight: 600;
  line-height: 1.14; letter-spacing: .045em; text-transform: uppercase;
  color: #fff; margin-bottom: 1.15rem;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.hero__panel.es-activo .hero__panel-titulo { transform: translateY(-6px); }

.hero__panel-btn {
  align-self: flex-start;
  font-family: var(--fuente-cond); font-size: .93rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  padding: .62rem 1.6rem; border: 2px solid rgba(255,255,255,.65); border-radius: 999px;
  transition: var(--transicion);
}
.hero__panel.es-activo .hero__panel-btn { background: #fff; color: var(--azul); border-color: #fff; }
.hero__panel:hover .hero__panel-btn { background: #fff; color: var(--azul); border-color: #fff; }

/* linea inferior de progreso del panel activo */
.hero__panel::before {
  content: ""; position: absolute; left: 0; bottom: 0; z-index: 1;
  width: 0; height: 3px; background: var(--verde-clr);
  transition: width .55s ease;
}
.hero__panel.es-activo::before { width: 100%; }

/* --- onda inferior --- */
.onda { position: relative; z-index: 2; display: block; width: 100%; margin-top: -1px; }
.onda svg { display: block; width: 100%; height: auto; }
.hero .onda { position: absolute; left: 0; right: 0; bottom: -1px; }

/* --- version movil: paneles apilados, sin hover --- */
@media (max-width: 900px) {
  .hero { height: auto; max-height: none; }
  .hero__fotos { display: none; }
  .hero__paneles { flex-direction: column; }
  .hero__panel {
    flex: none; min-height: 188px; padding: 1.6rem 1.5rem;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.16);
    /* En móvil la capa de fotos está oculta y los paneles se apilan, así que
       cada uno pinta la suya desde la variable --foto que trae en el marcado.
       En escritorio NO se usa: ahí manda la capa con fundido cruzado, y
       pintarla aquí también hacía que la foto se viera duplicada.
       OJO: la url() de --foto se resuelve contra ESTA hoja (/assets/css/),
       no contra el HTML, por eso en el marcado va como ruta absoluta. */
    background-image: var(--foto);
    background-size: cover; background-position: center;
  }
  .hero__panel::after { background: linear-gradient(180deg, rgba(32,87,158,.20) 0%, rgba(20,58,108,.76) 100%); }
  .hero__panel::before { width: 100%; }
  .hero .onda { position: relative; bottom: auto; }
}

/* ---------- 7. Tramas decorativas ---------- */
.trama {
  position: absolute; z-index: 0; pointer-events: none; user-select: none;
  width: clamp(240px, 30vw, 430px); opacity: .07;
}
.trama--izq { left: -70px; top: 8%; }
.trama--der { right: -70px; bottom: 6%; }
.seccion > .contenedor { position: relative; z-index: 1; }
@media (max-width: 900px) { .trama { display: none; } }

/* ---------- 8. Quiénes somos (dos columnas) ---------- */
.duo {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(1.8rem, 3.2vw, 3rem); align-items: center;
}
.duo__figura { position: relative; }
.duo__figura img { width: 100%; border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.duo p + p { margin-top: 1.05rem; }
.duo .btn { margin-top: 1.5rem; }

.nota-lateral {
  display: flex; gap: 1.1rem; align-items: flex-start;
  margin-top: 1.5rem; padding-top: 1.7rem; border-top: 1px solid var(--borde);
}
.nota-lateral__icono {
  flex: none; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--verde-clr); color: var(--verde);
}
.nota-lateral__icono svg { width: 25px; height: 25px; }
.nota-lateral p { font-size: 1rem; color: var(--gris-med); }

/* La foto acompaña al texto hasta bastante abajo: el cliente pidio verla
   al lado de la descripcion, no debajo. Solo se apila en pantallas angostas. */
@media (max-width: 1080px) { .duo { grid-template-columns: 1.05fr .95fr; } }
@media (max-width: 700px)  { .duo { grid-template-columns: 1fr; } }

/* ---------- 9. Valores (4 tarjetas) ---------- */
.valores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-top: 1.6rem; }
.valor {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 2.6rem 1.7rem; text-align: center; transition: var(--transicion);
}
.valor:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: transparent; }
.valor__icono { color: var(--verde); margin-bottom: 1.4rem; display: grid; place-items: center; }
.valor__icono svg { width: 54px; height: 54px; }
.valor::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--verde-clr); opacity: .35; margin: 0 auto 1.2rem;
}
.valor p { font-size: 1.02rem; color: var(--gris); }

@media (max-width: 980px) { .valores { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .valores { grid-template-columns: 1fr; } }

/* ---------- 10. Noticias ---------- */
.noticias { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1.6rem; }
.noticia {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: var(--transicion);
}
.noticia:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: transparent; }
.noticia__tapa {
  aspect-ratio: 16 / 9; position: relative;
  background: var(--deg-azul-cl);
  display: grid; place-items: center; overflow: hidden;
}
.noticia__tapa svg { width: 64px; height: 64px; color: rgba(255,255,255,.36); }
.noticia__tapa img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.noticia__tapa img + svg { display: none; }
.noticia__tapa::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,58,108,.10) 0%, rgba(20,58,108,.42) 100%);
}
.noticia__etiqueta { z-index: 1; }
.noticia__etiqueta {
  position: absolute; top: 1rem; left: 1rem;
  font-family: var(--fuente-cond); font-size: .78rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--verde); color: #fff; padding: .34rem .85rem; border-radius: 999px;
}
.noticia__cuerpo { padding: 1.6rem 1.5rem 1.8rem; display: flex; flex-direction: column; flex: 1; }
.noticia__fecha {
  font-family: var(--fuente-cond); font-size: .87rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--gris-sua); margin-bottom: .6rem;
}
.noticia h3 { font-size: 1.22rem; line-height: 1.25; margin-bottom: .8rem; }
.noticia h3 a { color: inherit; }
.noticia h3 a::after { content: ""; position: absolute; inset: 0; }
.noticia { position: relative; }
.noticia p { font-size: .99rem; color: var(--gris-med); flex: 1; }
/* El tamaño de la flecha se fija aquí y no en el atributo del <svg>: sin esta
   regla, un <svg> sin width se dibuja a 300 px y la flecha se ve enorme. */
.noticia__mas svg { width: 13px; height: 13px; flex: none; transition: transform var(--transicion); }
.noticia:hover .noticia__mas svg { transform: translateX(4px); }

.noticia__mas {
  margin-top: 1.1rem; font-family: var(--fuente-cond); font-size: .89rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--azul);
  display: inline-flex; align-items: center; gap: .45rem;
}
@media (max-width: 980px) { .noticias { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- 11. Contacto ----------
   Rehecho sobre el diseño de referencia de SOCOAM: formulario a la
   izquierda, columna de información a la derecha separada por una línea.
   Los campos no llevan etiqueta visible; el rótulo va en el marcador de
   posición y el nombre accesible queda en un <label> para lectores de
   pantalla, con un ícono dentro del propio campo.
   ------------------------------------------------------------------ */
.contacto { background: var(--fondo-alt); position: relative; }
.contacto__grid {
  display: grid; grid-template-columns: 1.12fr .88fr;
  gap: clamp(1.8rem, 3.6vw, 3.4rem); align-items: start; margin-top: 1.5rem;
}
.contacto__grid > .datos { position: relative; }
.contacto__grid > .datos::before {
  content: ""; position: absolute; left: calc(-1 * clamp(.9rem, 1.8vw, 1.7rem));
  top: .4rem; bottom: .4rem; width: 1px; background: var(--borde);
}

/* --- cabecera de bloque: azulejo con ícono + título subrayado --- */
.info-bloque__cabeza { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; }
.info-tile {
  flex: none; width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--deg-lavado); color: var(--azul);
  border: 1px solid var(--borde);
}
.info-tile svg { width: 22px; height: 22px; }
.info-bloque__cabeza h3 {
  font-size: 1.12rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.16;
}
.info-bloque__cabeza h3::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--verde-clr); opacity: .7; margin-top: .5rem;
}

/* --- formulario --- */
.formulario {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
}
.formulario__intro { font-size: .99rem; color: var(--gris-med); margin-bottom: 1.4rem; }

.campos { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo--ancho { grid-column: 1 / -1; }

.campo-icono { position: relative; display: block; }
.campo-icono > svg {
  position: absolute; left: 15px; top: 1.02rem; width: 18px; height: 18px;
  color: var(--gris-sua); pointer-events: none; transition: color .25s;
}
.campo-icono input, .campo-icono textarea {
  width: 100%; padding: .95rem 1rem .95rem 46px;
  border: 1.5px solid var(--borde); border-radius: 10px; background: #fff;
  font-size: 1rem; transition: border-color .25s, box-shadow .25s;
}
.campo-icono textarea { resize: vertical; min-height: 168px; }
.campo-icono input:focus, .campo-icono textarea:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(32,87,158,.11);
}
.campo-icono:focus-within > svg { color: var(--azul); }
.campo-icono input:user-invalid, .campo-icono textarea:user-invalid { border-color: #C0392B; }
.campo__error { font-size: .86rem; color: #C0392B; min-height: 1.1em; }
.campo-icono:has(input:user-invalid) ~ .campo__error::before,
.campo-icono:has(textarea:user-invalid) ~ .campo__error::before { content: attr(data-msg); }

.formulario__enviar { width: 100%; justify-content: center; margin-top: 1.4rem; }
.formulario__nota {
  display: flex; align-items: center; gap: .55rem; justify-content: center;
  font-size: .89rem; color: var(--gris-med); margin-top: .9rem;
}
.formulario__nota svg { width: 15px; height: 15px; flex: none; color: var(--verde); }

.aviso-pendiente {
  display: flex; gap: .7rem; align-items: flex-start;
  background: var(--verde-lav); border-left: 3px solid var(--verde-clr);
  border-radius: 6px; padding: .85rem 1rem; margin-bottom: 1.3rem;
  font-size: .92rem; color: var(--verde);
}
.aviso-pendiente svg { width: 18px; height: 18px; flex: none; margin-top: .15rem; }
.aviso-pendiente a { color: inherit; text-decoration: underline; }

/* --- columna de información --- */
.datos { display: grid; gap: 1.5rem; }
.info-linea { border: 0; border-top: 1px solid var(--borde); margin: 0; }
.info-bloque p { font-size: .99rem; color: var(--gris-med); }
.info-fila {
  display: flex; align-items: flex-start; gap: .75rem;
  font-size: 1rem; color: var(--gris);
}
.info-fila + .info-fila { margin-top: .85rem; }
.info-fila__icono { flex: none; color: var(--verde); margin-top: .15rem; }
.info-fila__icono svg { width: 18px; height: 18px; }
.info-fila a { color: var(--gris); }
.info-fila a:hover { color: var(--azul); text-decoration: underline; }

@media (max-width: 900px) {
  .contacto__grid { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .contacto__grid > .datos::before { display: none; }
}

/* ---------- 12. Footer ---------- */
/* El cliente pidió una franja final más matizada, en tonos de la familia del
   logo pero menos saturados, y más proporcionada: la ilustración original
   (2000x333) resultaba demasiado ancha. Se usa footer-suave.webp, recoloreada
   a #345E94 y reducida a 120 px de alto, sobre un fondo degradado suave. */
.footer {
  background: var(--deg-pie);
  color: rgba(255,255,255,.82); position: relative;
  /* El pie sube el alto de la franja y se solapa sobre la última sección:
     por encima de la línea de tierra se ve esa sección, sea del color que
     sea. Antes se veía el fondo blanco del body y, si la sección terminaba
     en gris, aparecía un corte. */
  margin-top: calc(-1 * var(--franja));
  padding-top: var(--franja);
  -webkit-mask-image: url("../img/marca/footer-tierra.webp"), linear-gradient(#000, #000);
          mask-image: url("../img/marca/footer-tierra.webp"), linear-gradient(#000, #000);
  -webkit-mask-size: 100% var(--franja), 100% calc(100% - var(--franja) + 1px);
          mask-size: 100% var(--franja), 100% calc(100% - var(--franja) + 1px);
  -webkit-mask-position: top left, bottom left;
          mask-position: top left, bottom left;
  -webkit-mask-repeat: no-repeat, no-repeat;
          mask-repeat: no-repeat, no-repeat;
}
@supports not ((mask-image: url("x")) or (-webkit-mask-image: url("x"))) {
  /* sin máscaras el pie arranca recto; se pierde la onda, no el contenido */
  .footer { padding-top: 0; margin-top: 0; }
  .seccion--pie { padding-bottom: clamp(2.2rem, 3.6vw, 3.4rem); }
}

/* La última sección de cada página reserva el alto de la franja, para que el
   pie se le monte encima sin tapar su contenido. */
.seccion--pie { padding-bottom: calc(clamp(2.2rem, 3.6vw, 3.4rem) + var(--franja)); }
/* La silueta del pie es una MÁSCARA sobre el propio pie, no una imagen
   pintada encima. Ventajas: el degradado es uno solo y continuo, y por
   encima de la línea de tierra no hay nada —se ve la página—, así que no
   existe ningún color que empatar con la sección de arriba. Antes el cielo
   iba pintado de --fondo-alt y sobre una sección blanca se veía el corte.

   La primera capa de la máscara recorta la onda en la franja superior; la
   segunda deja pasar todo el resto del pie. */
.footer__ilustracion { display: none; }

.footer__cuerpo {
  display: grid; grid-template-columns: 1.45fr .95fr .8fr .8fr 1fr; gap: 1.8rem 2.2rem;
  padding-block: clamp(2.2rem, 3.6vw, 3.1rem);
}
.footer__logo img { width: 190px; margin-bottom: 1.3rem; }
.footer p { font-size: .97rem; }
.footer h3 {
  color: #fff; font-size: 1.03rem; letter-spacing: .13em;
  text-transform: uppercase; margin-bottom: 1.2rem;
}
.footer__lista { display: grid; gap: .6rem; }
.footer__lista a { color: rgba(255,255,255,.8); font-size: .98rem; transition: var(--transicion); }
.footer__lista a:hover { color: #fff; padding-left: 5px; }

.redes { display: flex; gap: .7rem; margin-top: 1.4rem; }
.red {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  border: 1.5px solid rgba(255,255,255,.35); transition: var(--transicion);
}
.red:hover { background: #fff; color: var(--azul); border-color: #fff; }
.red svg { width: 19px; height: 19px; }

.footer__barra {
  border-top: 1px solid rgba(255,255,255,.18);
  padding-block: 1.4rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; align-items: center;
  font-size: .91rem;
}
.footer__barra a { color: rgba(255,255,255,.8); }
.footer__barra a:hover { color: #fff; }

@media (max-width: 1100px) { .footer__cuerpo { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px)  { .footer__cuerpo { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .footer__cuerpo { grid-template-columns: 1fr; } .footer__barra { justify-content: center; text-align: center; } }

/* ---------- 13. Botón volver arriba ---------- */
.arriba {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 50px; height: 50px; border-radius: 50%; border: 0;
  background: var(--azul); color: #fff; cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: var(--transicion);
}
.arriba.es-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.arriba:hover { background: var(--verde); transform: translateY(-3px); }
.arriba svg { width: 20px; height: 20px; }

/* ---------- 14. Menú móvil ---------- */
@media (max-width: 1180px) {
  :root { --header-h: 68px; }
  .hamburguesa { display: flex; }
  .header__cta { display: none; }
  .nav {
    position: fixed; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1px solid var(--borde);
    padding: .5rem 24px 1.6rem;
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
    transform: translateY(-12px); opacity: 0; visibility: hidden;
    transition: var(--transicion);
    box-shadow: 0 18px 34px rgba(32,87,158,.13);
  }
  .nav.esta-abierto { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav__link {
    padding: .95rem .2rem; border-bottom: 1px solid var(--borde);
    font-size: 1.02rem; text-align: left; max-width: none;
  }
  .nav__link::after { display: none; }
  .nav__cta-movil { margin-top: 1.3rem; justify-content: center; }
}
@media (min-width: 1181px) { .nav__cta-movil { display: none; } }

/* ============================================================
   15. Encabezado de páginas interiores
   ============================================================ */
.encabezado {
  position: relative; margin-top: var(--header-h);
  background: var(--deg-azul); color: #fff; overflow: hidden;
  padding-block: clamp(2.4rem, 4.4vw, 3.6rem) clamp(3.4rem, 5.5vw, 4.8rem);
}
.encabezado__trama {
  position: absolute; right: -60px; top: -40px; width: clamp(260px, 32vw, 460px);
  opacity: .13; pointer-events: none; filter: brightness(0) invert(1);
}
.encabezado .contenedor { position: relative; z-index: 1; }
.encabezado h1 {
  color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.7rem); text-transform: uppercase;
}
/* La sombra permite aclarar el velo sin perder legibilidad: el contraste lo
   da el texto, no el oscurecimiento de toda la fotografía. */
.encabezado--foto h1 {
  text-shadow: 0 2px 18px rgba(8,25,42,.85), 0 1px 4px rgba(8,25,42,.72),
               0 0 2px rgba(8,25,42,.55);
}
.encabezado--foto p {
  text-shadow: 0 1px 14px rgba(8,25,42,.85), 0 1px 3px rgba(8,25,42,.72),
               0 0 2px rgba(8,25,42,.5);
}
.encabezado .eyebrow { color: #fff; opacity: .85; }
.encabezado p { color: rgba(255,255,255,.88); font-size: 1.06rem; max-width: 52ch; margin-top: 1rem; }
.encabezado .onda { position: absolute; left: 0; right: 0; bottom: -1px; }

/* Encabezado con la fotografía del servicio (obs. del cliente): en las
   páginas de servicio la barra azul se reemplaza por la misma imagen que
   representa al servicio en la portada, y queda sólo el título. */
.encabezado--foto { background: var(--azul-osc); }
.encabezado--foto .encabezado__fondo { position: absolute; inset: 0; z-index: 0; }
.encabezado--foto .encabezado__fondo img { width: 100%; height: 100%; object-fit: cover; }
/* El velo va en diagonal desde la izquierda, no cubriendo todo: el texto se
   apoya sobre la zona oscura y la fotografía queda a la vista en el resto.
   Antes era un velo parejo al 58-80 %, que dejaba el encabezado casi azul y
   escondía la foto. */
.encabezado--foto .encabezado__fondo::after {
  content: ""; position: absolute; inset: 0;
  /* El velo se disipa antes que la fotografía. Sobre las tomas ya apagadas
     --Químico, Industrial-- un velo azul repartido por todo el ancho las
     agrisaba todavía más. Los dos primeros tramos no cambian, que es donde
     va el título y donde se mide el contraste; lo que cambia es la cola. */
  background:
    linear-gradient(100deg, rgba(15,36,57,.42) 0%, rgba(15,36,57,.22) 45%,
                            rgba(15,36,57,.04) 70%, rgba(15,36,57,0) 88%),
    linear-gradient(180deg, rgba(15,36,57,.07) 0%, rgba(15,36,57,0) 45%);
}
/* Los titulares de noticias son largos y en mayúsculas: necesitan algo más
   de contraste que un título de una o dos palabras. */
.encabezado--noticia .encabezado__fondo::after {
  background:
    linear-gradient(100deg, rgba(15,36,57,.56) 0%, rgba(15,36,57,.38) 50%,
                            rgba(15,36,57,.14) 78%, rgba(15,36,57,.06) 100%),
    linear-gradient(180deg, rgba(15,36,57,.12) 0%, rgba(15,36,57,0) 50%);
}
/* El alto del encabezado decide cuánta fotografía se ve. Con los 298 px que
   tenía, la caja quedaba en 6,3:1 y de una foto en 3:2 sólo se veía un 24 % de
   sus filas: cualquier sujeto con algo de altura --el animal de Fauna, la
   planta de Químico-- aparecía cortado, y el cliente lo hizo notar. A ~375 px
   la caja baja a 5:1 y el sujeto entra completo. Sube un 26 %, que es lo justo
   para resolverlo sin deshacer la compactación que pidió SOCOAM. */
.encabezado--foto {
  padding-block: clamp(4.9rem, 9.5vw, 8.8rem) clamp(5.5rem, 10vw, 9.2rem);
  /* El relleno deja de crecer a los 1.482 px de ventana, pero el ancho sigue.
     A 2.560 px eso devolvía la caja a 6,2:1 --la misma franja recortada que
     SOCOAM objetó-- porque el alto estaba topado y el ancho no. El min-height
     en vw mantiene la proporción cerca de 5:1 en pantalla completa.
     El suelo del clamp va por debajo del alto que ya da el relleno en móvil,
     para no cambiar ahí nada: en una pantalla estrecha la caja ya es alta y
     subirla más sólo recortaría la foto por los lados. */
  min-height: clamp(270px, 20vw, 600px);
  display: grid; align-content: center;
}
.encabezado--noticia { min-height: clamp(240px, 17vw, 480px); }
.encabezado--foto .encabezado__trama { display: none; }

/* Los titulares de noticias van en mayúsculas sostenidas (así lo pidió SOCOAM)
   y algunos superan los 100 caracteres: con el cuerpo de los demás encabezados
   se comían la pantalla completa, así que aquí bajan un escalón. */
.encabezado--noticia h1 { font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; }
.encabezado--noticia { padding-block: clamp(3.4rem, 7vw, 6.2rem) clamp(4.2rem, 7.5vw, 6.8rem); }

.miga {
  font-family: var(--fuente-cond); font-size: .9rem; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 1.4rem; color: rgba(255,255,255,.7);
}
.miga a { color: rgba(255,255,255,.85); }
.miga a:hover { color: #fff; text-decoration: underline; }
.miga span { margin-inline: .5rem; opacity: .55; }

/* ============================================================
   16. Equipo
   ============================================================ */
.equipo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1.6rem; }

.miembro {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; width: 100%;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 2.4rem 1.6rem 2rem; cursor: pointer;
  font: inherit; color: inherit;
  transition: var(--transicion);
}
.miembro:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: transparent; }

/* PENDIENTE: avatar circular provisional; reemplazar por foto real */
.miembro__avatar {
  width: 128px; height: 128px; border-radius: 50%; margin-bottom: 1.4rem;
  display: grid; place-items: center; position: relative;
  background: var(--deg-azul-cl);
  color: #fff; font-family: var(--fuente-cond); font-size: 2.5rem; font-weight: 700;
  letter-spacing: .04em; overflow: hidden;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--borde);
  transition: var(--transicion);
}
.miembro:hover .miembro__avatar { box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--verde-clr); }
.miembro__avatar img { width: 100%; height: 100%; object-fit: cover; }

.miembro h3 { font-size: 1.24rem; line-height: 1.2; margin-bottom: .35rem; }
.miembro__cargo {
  font-family: var(--fuente-cond); font-size: .96rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--verde);
}
.miembro__cargo[data-pendiente] { color: var(--gris-sua); font-style: italic; }
.miembro__ver {
  margin-top: 1.3rem; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fuente-cond); font-size: .89rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--azul);
  padding: .55rem 1.3rem; border: 1.5px solid var(--borde); border-radius: 999px;
  transition: var(--transicion);
}
.miembro:hover .miembro__ver { background: var(--azul); color: #fff; border-color: var(--azul); }
.miembro__ver svg { width: 14px; height: 14px; transition: transform var(--transicion); }
.miembro:hover .miembro__ver svg { transform: translateY(2px); }

@media (max-width: 1000px) { .equipo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .equipo { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* ---------- Ficha del perfil (diálogo nativo, capa superior) ---------- */
.ficha {
  width: min(760px, calc(100vw - 2.5rem));
  max-height: min(86vh, 900px);
  /* el reset `* { margin: 0 }` anula el centrado que el navegador
     aplica a los diálogos modales, así que lo restituimos aquí */
  margin: auto;
  padding: 0; border: 0; border-radius: var(--radio);
  background: #fff; color: var(--gris);
  box-shadow: 0 30px 80px rgba(20,58,108,.32);
  overflow: hidden;
}
.ficha::backdrop { background: rgba(20,58,108,.66); backdrop-filter: blur(3px); }
.ficha[open] { display: flex; flex-direction: column; }

.ficha__cabecera {
  display: flex; align-items: center; gap: 1.4rem;
  padding: 2rem clamp(1.6rem, 4vw, 2.6rem);
  background: var(--deg-azul); color: #fff; position: relative;
}
.ficha__avatar {
  flex: none; width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.4);
  font-family: var(--fuente-cond); font-size: 1.75rem; font-weight: 700; color: #fff;
}
.ficha__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ficha__cabecera h2 { color: #fff; font-size: clamp(1.4rem, 3vw, 1.85rem); margin-bottom: .3rem; }
.ficha__cargo {
  font-family: var(--fuente-cond); font-size: .95rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.82);
}
.ficha__cerrar {
  position: absolute; top: 1rem; right: 1rem;
  width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff;
  display: grid; place-items: center; transition: var(--transicion);
}
.ficha__cerrar:hover { background: #fff; color: var(--azul); }
.ficha__cerrar svg { width: 19px; height: 19px; }

.ficha__cuerpo { padding: clamp(1.6rem, 4vw, 2.4rem); overflow-y: auto; }
.ficha__cuerpo p + p { margin-top: 1rem; }
.ficha__cuerpo p:first-child { font-size: 1.08rem; color: var(--azul); font-weight: 600; }

@media (max-width: 520px) {
  .ficha__cabecera { flex-direction: column; text-align: center; padding-top: 2.6rem; }
}

/* ============================================================
   17. Submenú desplegable del header
   El brief pide: título visible y, al pasar el cursor, desplegar
   el punteo. Resuelto sólo con CSS (:hover + :focus-within),
   así funciona también con teclado.
   ============================================================ */
.nav__grupo { position: relative; display: flex; align-items: center; }

.submenu {
  position: absolute; top: 100%; left: 50%; translate: -50% 0;
  min-width: 306px; padding: .6rem;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: 0 18px 40px rgba(32,87,158,.16);
  display: grid; gap: .1rem;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: var(--transicion);
  z-index: 20;
}
.nav__grupo::after {           /* puente invisible para que el hover no se corte */
  content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px;
}
.nav__grupo:hover .submenu,
.nav__grupo:focus-within .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.submenu a {
  display: block; padding: .62rem .9rem; border-radius: 6px;
  font-size: .96rem; line-height: 1.32; color: var(--gris);
  transition: background .2s, color .2s;
}
.submenu a:hover, .submenu a:focus-visible { background: var(--azul-lav); color: var(--azul); }
.submenu a[aria-current="page"] { color: var(--azul); font-weight: 600; }

@media (max-width: 1180px) {
  /* en móvil el punteo se muestra siempre, anidado bajo su título */
  .nav__grupo { display: block; }
  .submenu {
    position: static; translate: none; transform: none;
    opacity: 1; visibility: visible;
    min-width: 0; border: 0; box-shadow: none; background: transparent;
    padding: .2rem 0 .7rem .9rem;
    border-bottom: 1px solid var(--borde);
  }
  .nav__grupo > .nav__link { border-bottom: 0; }
  .submenu a { padding: .5rem .4rem; font-size: .95rem; color: var(--gris-med); }
  .nav__grupo::after { display: none; }
}

/* ============================================================
   18. Páginas de servicio
   ============================================================ */
.intro-servicio { max-width: 74ch; }
/* Cuerpo de texto mayor en las paginas de servicio y de rubro (obs. 3). */
.intro-servicio p { font-size: 1.11rem; line-height: 1.66; }
.item__cuerpo p   { font-size: 1.09rem; line-height: 1.66; }
.intro-servicio p + p { margin-top: 1.05rem; }

/* --- índice de servicios (4 tarjetas grandes) --- */
.servicios-lista { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.8rem; margin-top: 1.6rem; }
.servicio-tarjeta {
  display: flex; flex-direction: column; position: relative;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: var(--transicion);
}
.servicio-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: transparent; }
.servicio-tarjeta__foto { aspect-ratio: 16 / 8; overflow: hidden; position: relative; }
.servicio-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.servicio-tarjeta:hover .servicio-tarjeta__foto img { transform: scale(1.07); }
.servicio-tarjeta__foto::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(32,87,158,.12) 0%, rgba(32,87,158,.52) 100%);
}
.servicio-tarjeta__cuerpo { padding: 1.8rem 1.7rem 2rem; display: flex; flex-direction: column; flex: 1; }
.servicio-tarjeta h3 { font-size: 1.4rem; text-transform: uppercase; margin-bottom: .9rem; }
.servicio-tarjeta h3 a { color: inherit; }
.servicio-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.servicio-tarjeta p { font-size: 1rem; color: var(--gris-med); }
.servicio-tarjeta__punteo {
  margin-top: 1.2rem; display: grid; gap: .42rem; flex: 1;
  font-size: .95rem; color: var(--gris);
}
.servicio-tarjeta__punteo li { position: relative; padding-left: 1.15rem; }
.servicio-tarjeta__punteo li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--verde-clr);
}
.servicio-tarjeta__mas {
  margin-top: 1.5rem; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fuente-cond); font-size: .9rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--azul);
}
.servicio-tarjeta__mas svg { width: 14px; height: 14px; transition: transform var(--transicion); }
.servicio-tarjeta:hover .servicio-tarjeta__mas svg { transform: translateX(4px); }

@media (max-width: 860px) { .servicios-lista { grid-template-columns: 1fr; } }

/* --- acordeón de subservicios (details/summary nativo, sin JS) --- */
.acordeon { margin-top: 1.8rem; display: grid; gap: .7rem; }
.item {
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: border-color var(--transicion), box-shadow var(--transicion);
}
.item[open] { border-color: var(--azul); box-shadow: var(--sombra); }
.item > summary {
  display: flex; align-items: center; gap: 1.1rem;
  padding: 1.35rem 1.9rem; cursor: pointer; list-style: none;
  font-family: var(--fuente-cond); font-size: 1.18rem; font-weight: 600;
  letter-spacing: .03em; color: var(--azul); line-height: 1.25;
  transition: background .25s;
}
.item > summary::-webkit-details-marker { display: none; }
.item > summary:hover { background: var(--azul-lav); }
.item[open] > summary { background: var(--azul-lav); }

.item__num {
  background-image: var(--deg-azul);
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul); color: #fff;
  font-size: .95rem; font-variant-numeric: tabular-nums;
}
.item[open] .item__num { background: var(--deg-verde); }
.item__titulo { flex: 1; }
.item__flecha {
  flex: none; width: 22px; height: 22px; color: var(--azul);
  transition: transform var(--transicion);
}
.item[open] .item__flecha { transform: rotate(180deg); }

.item__cuerpo { padding: .2rem 1.9rem 1.9rem calc(1.9rem + 38px + 1.1rem); }
.item__cuerpo p { font-size: 1.01rem; }
.item__cuerpo p + p { margin-top: .9rem; }

@media (max-width: 620px) {
  .item > summary { padding: 1.1rem 1.1rem; font-size: 1.06rem; gap: .8rem; }
  .item__cuerpo { padding: .4rem 1.1rem 1.5rem 1.1rem; }
}

/* --- navegación entre servicios --- */
.otros-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: 3rem; }
.otro-servicio {
  display: flex; flex-direction: column; justify-content: center;
  padding: 1.5rem 1.5rem; border: 1px solid var(--borde); border-radius: var(--radio);
  background: #fff; transition: var(--transicion);
}
.otro-servicio:hover { border-color: var(--azul); background: var(--azul-lav); transform: translateY(-4px); }
.otro-servicio span {
  font-family: var(--fuente-cond); font-size: .82rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde);
  margin-bottom: .4rem;
}
.otro-servicio strong { font-family: var(--fuente-cond); font-size: 1.1rem; color: var(--azul); line-height: 1.2; }
@media (max-width: 860px) { .otros-servicios { grid-template-columns: 1fr; } }

/* ============================================================
   19. Especialidades ambientales
   ============================================================ */
.esp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 1.6rem; }
.esp-tarjeta {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: var(--transicion);
}
.esp-tarjeta:hover { transform: translateY(-6px); box-shadow: var(--sombra-alta); border-color: transparent; }
.esp-tarjeta__foto { aspect-ratio: 16 / 10; position: relative; overflow: hidden; }
.esp-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .7s cubic-bezier(.4,0,.2,1); }
.esp-tarjeta:hover .esp-tarjeta__foto img { transform: scale(1.08); }
/* SOCOAM pidio (23-09) las fotografias de estas tarjetas limpias: llevaban un
   degradado azul encima que a la altura del pie de la imagen tapaba el 55% de
   la foto. Se retira; el titulo va en el cuerpo blanco, no sobre la imagen,
   asi que no habia texto que proteger. */
.esp-tarjeta__cuerpo { padding: 1.4rem 1.4rem 1.7rem; display: flex; flex-direction: column; flex: 1; }
.esp-tarjeta h3 { font-size: 1.16rem; line-height: 1.18; text-transform: uppercase; margin-bottom: .7rem; }
.esp-tarjeta h3 a { color: inherit; }
.esp-tarjeta h3 a::after { content: ""; position: absolute; inset: 0; }
.esp-tarjeta p { font-size: .95rem; color: var(--gris-med); flex: 1; }
.esp-tarjeta__mas {
  margin-top: 1.1rem; display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--fuente-cond); font-size: .84rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--azul);
}
.esp-tarjeta__mas svg { width: 13px; height: 13px; transition: transform var(--transicion); }
.esp-tarjeta:hover .esp-tarjeta__mas svg { transform: translateX(4px); }

@media (max-width: 1150px) { .esp-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .esp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .esp-grid { grid-template-columns: 1fr; max-width: 400px; margin-inline: auto; } }

/* --- PENDIENTE: sustituto visual cuando no hay fotografía --- */
.sin-foto {
  display: grid; place-items: center; position: relative;
  background: var(--deg-azul-cl);
}
.sin-foto svg { width: 44%; max-width: 130px; height: auto; color: rgba(255,255,255,.34); }
.sin-foto::after { background: none !important; }
.duo__figura .sin-foto { aspect-ratio: 16 / 10; border-radius: var(--radio); box-shadow: var(--sombra-alta); }
.duo__figura .sin-foto svg { max-width: 160px; }

/* --- listado de productos y servicios --- */
/* Productos y servicios de cada especialidad.
   SOCOAM encontró este bloque poco profesional. El rombo verde era lo de
   menos; lo que lo delataba era la composición:

   1. Texto justificado en una medida de ~48 caracteres. El navegador sólo
      puede estirar los espacios, así que abría ríos entre palabras
      («Evaluación   de   los   efectos»). Ahora va alineado a la izquierda,
      que en columna estrecha es lo correcto.
   2. `columns: 2` reparte los ítems en vertical: las dos columnas terminaban
      a alturas distintas y el bloque cerraba en diagonal. Con rejilla los
      ítems van por filas y las reglas quedan alineadas de columna a columna.
   3. La viñeta de rombo es decorativa. El sitio ya tiene un lenguaje formal
      para enumerar --la numeración de los acordeones de servicio-- y este
      bloque lo recoge, en una versión más liviana.
   4. Las reglas van arriba de cada ítem y la de cierre en el contenedor: así
      el bloque queda cerrado aunque el número de ítems sea impar, que pasa en
      Recursos Hídricos (11) y en Fauna Silvestre (25). */
.productos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.4rem;
  margin-top: 2.2rem;
  border-bottom: 1px solid var(--borde);
}
/* SOCOAM pidio (23-09) el cuerpo mas grande y el isotipo de la marca en lugar
   de la numeracion: es la misma vineta que usan en sus documentos. */
.productos li {
  display: grid;
  grid-template-columns: 1.7rem 1fr;
  gap: 1.05rem;
  align-items: start;
  padding: 1.05rem 0;
  border-top: 1px solid var(--borde);
  font-size: 1.12rem;
  line-height: 1.6;
}
.productos li::before {
  content: "";
  width: 1.7rem;
  aspect-ratio: 160 / 106;
  /* el simbolo lleva su propio aire arriba; este margen lo asienta sobre la
     primera linea de texto en vez de dejarlo flotando */
  margin-top: .3em;
  background: url("../img/marca/isotipo.webp") no-repeat left top / contain;
}
@media (max-width: 820px) {
  .productos { grid-template-columns: 1fr; }
}

/* --- otras especialidades (pastillas) --- */
.pastillas { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: 1.5rem; }
.pastilla {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .68rem 1.3rem; border-radius: 999px;
  border: 1.5px solid var(--borde); background: #fff;
  font-family: var(--fuente-cond); font-size: .95rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gris);
  transition: var(--transicion);
}
.pastilla:hover { border-color: var(--azul); background: var(--azul); color: #fff; transform: translateY(-3px); }
.pastilla[aria-current="page"] { border-color: var(--verde); background: var(--verde); color: #fff; }

/* ============================================================
   20. Proyectos — mapa de ubicaciones, filtros y listado
   ============================================================ */
/* El mapa va a todo el ancho, con el país partido en dos mitades que se
   dibujan una junto a otra: así la escala se duplica y no queda una columna
   vacía al lado del listado. */
.mapa { position: relative; margin-top: 1.6rem; }
.mapa svg {
  height: min(68vh, 700px); width: auto; max-width: 100%;
  margin-inline: auto; display: block; overflow: visible;
}
.mapa__tierra { fill: #ECF4F8; stroke: #C9DAE6; stroke-width: .6; }
.mapa__division { stroke: var(--borde); stroke-width: 1; stroke-dasharray: 4 4; }

/* Un solo mapa con los dos conjuntos: azul el SEIA, verde los sectoriales. */
.mapa__punto {
  stroke: #fff; stroke-width: .45;
  fill-opacity: .72;
  transition: fill-opacity .2s ease;
}
.mapa__punto--seia { fill: var(--azul); }
.mapa__punto--sec  { fill: var(--verde); }
.mapa__punto:hover { fill-opacity: 1; }
.mapa__punto.esta-apagado { fill: var(--gris-sua); fill-opacity: .2; stroke: none; }

.mapa__leyenda {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.4rem;
  margin-top: 1rem; font-size: .9rem; color: var(--gris);
}
.mapa__clave { display: inline-flex; align-items: center; gap: .5rem; }
.mapa__punto-clave { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mapa__punto-clave--seia { background: var(--azul); }
.mapa__punto-clave--sec  { background: var(--verde); }

@media (max-width: 760px) { .mapa svg { height: auto; width: 100%; } }

.mapa__pie {
  margin-top: 1.1rem; font-size: .85rem; color: var(--gris-med); text-align: center;
}
.mapa__pie strong {
  display: block; font-family: var(--fuente-cond); font-size: 1rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--azul);
}
.mapa__globo {
  position: absolute; z-index: 5; pointer-events: none;
  max-width: 230px; padding: .5rem .75rem; border-radius: 8px;
  background: var(--azul); color: #fff; font-size: .85rem; line-height: 1.35;
  box-shadow: var(--sombra-alta); opacity: 0; transition: opacity .15s ease;
}
.mapa__globo.es-visible { opacity: 1; }
.mapa__globo b { display: block; font-weight: 600; }
.mapa__globo span { opacity: .78; font-size: .8rem; }

@media (max-width: 900px) {
  .mapa-bloque { grid-template-columns: 1fr; }
  .mapa svg { height: min(96vh, 820px); }
}

/* --- pestañas SEIA / Sectoriales --- */
.pestanas { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; margin-top: 1.5rem; }
.pestana {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .8rem 1.6rem; border-radius: 999px;
  border: 1.5px solid var(--borde); background: #fff; cursor: pointer;
  font-family: var(--fuente-cond); font-size: 1rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gris);
  transition: var(--transicion);
}
.pestana:hover { border-color: var(--azul); color: var(--azul); }
.pestana[aria-selected="true"] { background: var(--azul); border-color: var(--azul); color: #fff; }
.pestana span {
  font-size: .8rem; padding: .12rem .55rem; border-radius: 999px;
  background: rgba(0,0,0,.12);
}
.pestana[aria-selected="true"] span { background: rgba(255,255,255,.22); }

/* --- barra de filtros --- */
.filtros {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end;
  margin-top: 2.2rem; padding: 1.3rem 1.5rem;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
}
.filtro { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 210px; min-width: 0; }
.filtro label {
  font-family: var(--fuente-cond); font-size: .84rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--azul);
}
.filtro select, .filtro input {
  padding: .68rem .85rem; border: 1.5px solid var(--borde); border-radius: 8px;
  background: #fff; font-size: .98rem; width: 100%;
}
.filtro select:focus, .filtro input:focus {
  outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(32,87,158,.11);
}
.filtros__resultado {
  flex: 0 0 auto; font-family: var(--fuente-cond); font-size: .95rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris-med);
  padding-bottom: .7rem;
}
.filtros__resultado strong { color: var(--azul); font-size: 1.25rem; }
.btn-limpiar {
  flex: 0 0 auto; padding: .68rem 1.2rem; border-radius: 8px;
  border: 1.5px solid var(--borde); background: #fff; cursor: pointer;
  font-family: var(--fuente-cond); font-size: .88rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gris);
  transition: var(--transicion);
}
.btn-limpiar:hover { border-color: var(--azul); color: var(--azul); }

/* --- listado de proyectos --- */
.proyectos-lista { margin-top: 1.8rem; display: grid; gap: .7rem; }
.proyecto {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.2rem;
  padding: 1.15rem 1.4rem;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  transition: var(--transicion);
}
.proyecto:hover { border-color: var(--azul); box-shadow: var(--sombra); transform: translateX(3px); }
.proyecto__region {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--azul-lav); color: var(--azul);
  font-family: var(--fuente-cond); font-size: .88rem; font-weight: 700; letter-spacing: .04em;
}
.proyecto__datos { min-width: 0; }
.proyecto__nombre { font-family: var(--fuente-cond); font-size: 1.15rem; font-weight: 600; color: var(--azul); line-height: 1.24; }
.proyecto__meta {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin-top: .35rem;
  font-size: .89rem; color: var(--gris-med);
}
.proyecto__meta span { display: inline-flex; align-items: center; gap: .35rem; }
.proyecto__meta svg { width: 13px; height: 13px; flex: none; opacity: .65; }
.proyecto__tramite {
  display: inline-block; font-family: var(--fuente-cond); font-size: .8rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--verde-lav); color: var(--verde);
  padding: .22rem .7rem; border-radius: 999px; margin-bottom: .45rem;
}
.proyecto__link {
  flex: none; display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--fuente-cond); font-size: .84rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase; color: var(--azul);
  padding: .55rem 1.1rem; border: 1.5px solid var(--borde); border-radius: 999px;
  transition: var(--transicion); white-space: nowrap;
}
.proyecto__link:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.proyecto__link svg { width: 13px; height: 13px; }

.sin-resultados {
  padding: 3rem 1.5rem; text-align: center; color: var(--gris-med);
  background: #fff; border: 1px dashed var(--borde); border-radius: var(--radio);
}
.sin-resultados strong { display: block; color: var(--azul); font-size: 1.12rem; margin-bottom: .4rem; }

.btn-mas { display: block; margin: 1.8rem auto 0; }

@media (max-width: 760px) {
  .proyecto { grid-template-columns: auto 1fr; }
  .proyecto__link { grid-column: 1 / -1; justify-content: center; }
  .filtros__resultado { flex: 1 1 100%; padding-bottom: 0; }
}

/* ============================================================
   21. Industria — listado de rubros
   ============================================================ */
.esp-grid--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .esp-grid--tres { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .esp-grid--tres { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }

/* enlaces a los servicios desde la página de rubro */
.servicios-rel { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-top: 1.5rem; }
.servicio-rel {
  display: flex; flex-direction: column; gap: .5rem;
  padding: 1.4rem 1.3rem; border-radius: var(--radio);
  border: 1px solid var(--borde); background: #fff;
  transition: var(--transicion);
}
.servicio-rel:hover { border-color: var(--azul); background: var(--azul-lav); transform: translateY(-4px); }
.servicio-rel__num {
  font-family: var(--fuente-cond); font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--verde);
}
.servicio-rel strong { font-family: var(--fuente-cond); font-size: 1.08rem; color: var(--azul); line-height: 1.2; }
@media (max-width: 900px) { .servicios-rel { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .servicios-rel { grid-template-columns: 1fr; } }

/* ============================================================
   22. Noticias — índice y artículo
   ============================================================ */
.noticias-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; margin-top: 1.6rem; }
@media (max-width: 1000px) { .noticias-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .noticias-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; } }

/* --- cuerpo del artículo --- */
.articulo { max-width: 74ch; margin-inline: auto; }
.articulo > p { margin-top: 1.15rem; font-size: 1.07rem; }
.articulo > p:first-child { margin-top: 0; }
.articulo h2 {
  font-size: clamp(1.45rem, 2.8vw, 1.9rem); text-transform: none;
  margin-top: 1.5rem; margin-bottom: .3rem;
  padding-top: 1.6rem; border-top: 1px solid var(--borde);
}
.articulo ul { margin-top: 1.15rem; display: grid; gap: .55rem; }
.articulo ul li { position: relative; padding-left: 1.7rem; font-size: 1.05rem; }
.articulo ul li::before {
  content: ""; position: absolute; left: .2rem; top: .72em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--verde-clr); transform: rotate(45deg);
}
.articulo a { text-decoration: underline; text-underline-offset: 3px; }
.articulo a:hover { color: var(--verde); }

.articulo__bajada {
  font-size: 1.2rem; line-height: 1.55; color: var(--azul);
  font-weight: 600; padding-left: 1.2rem; border-left: 3px solid var(--verde-clr);
}

/* llamada a la acción dentro del artículo */
.cta-articulo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  margin-top: 1.5rem; padding: 1.6rem 1.8rem;
  background: var(--azul-lav); border-radius: var(--radio);
  border-left: 4px solid var(--azul);
}
.cta-articulo p { flex: 1 1 260px; font-size: 1.04rem; color: var(--azul); font-weight: 600; margin: 0; }
.cta-articulo .btn { flex: none; padding: .78rem 1.6rem; font-size: .93rem; }

/* fuente al pie */
.fuente {
  margin-top: 1.5rem; padding-top: 1.4rem; border-top: 1px solid var(--borde);
  font-size: .93rem; color: var(--gris-med);
}
.fuente strong {
  display: block; font-family: var(--fuente-cond); font-size: .86rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--azul); margin-bottom: .4rem;
}
.fuente a { word-break: break-word; }

/* aviso de enlace no verificado */
.aviso-enlace {
  display: flex; gap: .7rem; align-items: flex-start;
  margin-top: 1.2rem; padding: .9rem 1.1rem;
  background: #FFF7E6; border-left: 3px solid #D98B00; border-radius: 6px;
  font-size: .92rem; color: #8A5B00;
}
.aviso-enlace svg { width: 17px; height: 17px; flex: none; margin-top: .15rem; }

/* navegación entre artículos */
.entre-articulos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-width: 74ch; margin: 3rem auto 0;
}
.entre-articulo {
  display: flex; flex-direction: column; gap: .4rem;
  padding: 1.3rem 1.4rem; border: 1px solid var(--borde); border-radius: var(--radio);
  background: #fff; transition: var(--transicion);
}
.entre-articulo:hover { border-color: var(--azul); background: var(--azul-lav); }
.entre-articulo span {
  font-family: var(--fuente-cond); font-size: .8rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--verde);
}
.entre-articulo strong { font-family: var(--fuente-cond); font-size: 1.05rem; color: var(--azul); line-height: 1.24; }
.entre-articulo--sig { text-align: right; }
@media (max-width: 640px) {
  .entre-articulos { grid-template-columns: 1fr; }
  .entre-articulo--sig { text-align: left; }
}

/* ============================================================
   23. Listado de industrias (índice de la sección Industria)
   ============================================================ */
.industrias { display: grid; gap: 1.1rem; margin-top: 1.5rem; }
.industria-fila {
  display: grid; grid-template-columns: 232px 1fr; gap: clamp(1.2rem, 2.5vw, 2rem);
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; transition: var(--transicion);
}
.industria-fila:hover { border-color: var(--azul); box-shadow: var(--sombra-alta); }
.industria-fila__foto { position: relative; overflow: hidden; min-height: 200px; }
.industria-fila__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.industria-fila__cuerpo { padding: 1.5rem 1.6rem 1.6rem 0; }
.industria-fila h3 { font-size: 1.2rem; text-transform: uppercase; margin-bottom: .5rem; }
.industria-fila h3 a { color: inherit; }
.industria-fila p { font-size: .99rem; color: var(--gris-med); }
.industria-fila__servicios {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem;
}
.industria-fila__servicios a {
  font-family: var(--fuente-cond); font-size: .82rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--azul);
  padding: .32rem .8rem; border: 1.5px solid var(--borde); border-radius: 999px;
  transition: var(--transicion);
}
.industria-fila__servicios a:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.industria-fila__ir {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem;
  font-family: var(--fuente-cond); font-size: .86rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase; color: var(--verde);
}
.industria-fila__ir svg { width: 13px; height: 13px; transition: transform var(--transicion); }
.industria-fila:hover .industria-fila__ir svg { transform: translateX(4px); }

@media (max-width: 700px) {
  .industria-fila { grid-template-columns: 1fr; }
  .industria-fila__foto { min-height: 150px; }
  .industria-fila__cuerpo { padding: 1.3rem 1.4rem 1.5rem; }
}

/* --- Formulario compacto dentro de las páginas de servicio (obs. 18) --- */
.contacto--servicio .contacto__grid { grid-template-columns: 1.35fr 1fr; }
.contacto--servicio .formulario { box-shadow: var(--sombra); }


/* ============================================================
   25. Carrusel de tarjetas (especialidades y noticias)
   Scroll horizontal nativo con anclaje: funciona con el dedo, con la
   rueda y con el teclado. Los botones sólo desplazan la pista, y se
   ocultan solos cuando ya no queda hacia dónde avanzar.
   ============================================================ */
.carrusel { position: relative; margin-top: 1.6rem; }
.carrusel__pista {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * 1.4rem) / 3);
  gap: 1.4rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 4px 2px 1rem;
  scrollbar-width: thin; scrollbar-color: var(--borde) transparent;
}
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel__pista::-webkit-scrollbar { height: 6px; }
.carrusel__pista::-webkit-scrollbar-thumb { background: var(--borde); border-radius: 999px; }
.carrusel__pista::-webkit-scrollbar-track { background: transparent; }

.carrusel__btn {
  position: absolute; top: 38%; translate: 0 -50%; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--borde); background: #fff; color: var(--azul);
  cursor: pointer; display: grid; place-items: center;
  box-shadow: var(--sombra-alta); transition: var(--transicion);
}
.carrusel__btn svg { width: 17px; height: 17px; }
.carrusel__btn:hover { background: var(--deg-azul); color: #fff; border-color: transparent; }
.carrusel__btn[disabled] { opacity: 0; pointer-events: none; }
.carrusel__btn--prev { left: -18px; }
.carrusel__btn--sig  { right: -18px; }

@media (max-width: 1340px) {
  .carrusel__btn--prev { left: 4px; }
  .carrusel__btn--sig  { right: 4px; }
}
@media (max-width: 1150px) { .carrusel__pista { grid-auto-columns: calc((100% - 1.4rem) / 2); } }
@media (max-width: 860px)  { .carrusel__pista { grid-auto-columns: calc((100% - 1.4rem) / 2); } }
@media (max-width: 560px)  { .carrusel__pista { grid-auto-columns: 84%; } }
@media (prefers-reduced-motion: reduce) { .carrusel__pista { scroll-behavior: auto; } }

/* ============================================================
   26. Noticias en tira de paneles
   Misma mecánica que el hero y que la referencia que envió SOCOAM: cada
   noticia es un panel con su foto de fondo; el que queda bajo el cursor
   se ensancha, se le aclara el velo y descubre el resumen.
   ============================================================ */
.carrusel--paneles .carrusel__pista {
  display: flex; gap: 0; padding: 0;
  border-radius: var(--radio);
}
.panel-noticia {
  position: relative; isolation: isolate;
  flex: 0 0 clamp(230px, 33.33%, 460px);
  min-height: clamp(310px, 34vw, 420px);
  background-image: var(--foto);
  background-size: cover; background-position: center;
  border-right: 1px solid rgba(255,255,255,.2);
  transition: flex-basis .55s cubic-bezier(.4, 0, .2, 1);
}
.panel-noticia:last-child { border-right: 0; }
.panel-noticia::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(15,26,35,.30) 0%, rgba(15,26,35,.90) 100%);
  transition: background .5s ease;
}
.panel-noticia:hover, .panel-noticia:focus-within {
  flex-basis: clamp(290px, 46%, 620px);
}
.panel-noticia:hover::after, .panel-noticia:focus-within::after {
  background: linear-gradient(180deg, rgba(32,87,158,.16) 0%, rgba(27,79,148,.86) 100%);
}

.panel-noticia__enlace {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 1.5rem 1.4rem 1.7rem; color: #fff;
}
.panel-noticia__etiqueta {
  position: absolute; top: 1.1rem; left: 1.4rem;
  font-family: var(--fuente-cond); font-size: .76rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  background: var(--deg-verde); color: #fff; padding: .3rem .8rem; border-radius: 999px;
}
.panel-noticia__fecha {
  font-family: var(--fuente-cond); font-size: .84rem; font-weight: 600;
  letter-spacing: .11em; text-transform: uppercase;
  color: rgba(255,255,255,.78); margin-bottom: .45rem;
}
.panel-noticia h3 {
  color: #fff; font-size: 1.08rem; line-height: 1.26; margin-bottom: .2rem;
}
/* el resumen sólo aparece en el panel abierto */
.panel-noticia__bajada {
  font-size: .95rem; color: rgba(255,255,255,.85);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin-top .5s ease;
}
.panel-noticia:hover .panel-noticia__bajada,
.panel-noticia:focus-within .panel-noticia__bajada {
  max-height: 8rem; opacity: 1; margin-top: .5rem;
}
.panel-noticia__btn {
  align-self: flex-start; margin-top: 1rem;
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--fuente-cond); font-size: .86rem; font-weight: 600;
  letter-spacing: .13em; text-transform: uppercase;
  padding: .55rem 1.3rem; border: 2px solid rgba(255,255,255,.6); border-radius: 999px;
  transition: var(--transicion);
}
.panel-noticia__btn svg { width: 14px; height: 14px; }
.panel-noticia:hover .panel-noticia__btn,
.panel-noticia:focus-within .panel-noticia__btn {
  background: #fff; color: var(--azul); border-color: #fff;
}

@media (max-width: 700px) {
  .panel-noticia { flex-basis: 78%; min-height: 300px; }
  .panel-noticia:hover, .panel-noticia:focus-within { flex-basis: 78%; }
  /* en táctil no hay hover: el resumen se muestra siempre */
  .panel-noticia__bajada { max-height: 8rem; opacity: 1; margin-top: .5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .panel-noticia { transition: none; }
}

/* --- Imágenes de noticias ---
   Las que entregó SOCOAM son infografías con texto propio: se muestran
   enteras, sin recortar, sobre un fondo neutro. Recortarlas al vuelo partía
   las palabras por la mitad. */
.noticia__tapa--grafico { background: var(--fondo-alt); aspect-ratio: 3 / 2; }
.noticia__tapa--grafico img { object-fit: contain; }
.noticia__tapa--grafico::after { display: none; }

.articulo__grafico { margin-bottom: 1.8rem; }
.articulo__grafico img {
  width: 100%; height: auto; border-radius: var(--radio);
  border: 1px solid var(--borde);
}
.articulo__grafico figcaption {
  margin-top: .6rem; font-size: .9rem; color: var(--gris-med); text-align: center;
}

/* ============================================================
   22. Cuerpo con riel lateral (Industria y Servicios)
   ------------------------------------------------------------
   Observaciones del cliente del 16-09: la foto debía quedar bajo el
   texto y no al costado, y faltaba en los costados el bloque con los
   demás servicios que hacía que la página se viera más "llena".
   El riel queda pegado al hacer scroll mientras dura el texto.
   ============================================================ */
.con-riel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  gap: clamp(2rem, 3.6vw, 3.6rem);
  align-items: start;
}
.con-riel__cuerpo { min-width: 0; }
/* Con el riel al lado la columna de texto ya está acotada: el tope en ch
   sobraba y dejaba un hueco a la derecha del párrafo. */
.con-riel__cuerpo .intro-servicio { max-width: none; }

.figura-ancha { margin: clamp(1.9rem, 3.2vw, 2.8rem) 0 0; }
.figura-ancha img {
  width: 100%; display: block;
  aspect-ratio: 16 / 8.6; object-fit: cover;
  border-radius: var(--radio); box-shadow: var(--sombra-alta);
}

.riel { position: sticky; top: 104px; display: grid; gap: 1.1rem; }
.riel__bloque {
  background: #fff; border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 1.35rem 1.45rem;
  box-shadow: var(--sombra);
}
.riel__bloque--cta { background: var(--deg-lavado); }
.riel__rotulo {
  font-family: var(--fuente-cond); font-weight: 700;
  font-size: .95rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--azul); margin: 0 0 .95rem;
}
.riel__rotulo::after {
  content: ""; display: block; width: 34px; height: 2px;
  background: var(--verde); margin-top: .5rem;
}
.riel__lista { display: grid; }
.riel__enlace {
  display: block; padding: .62rem 0; font-size: .97rem; line-height: 1.35;
  color: var(--gris); border-top: 1px solid var(--borde);
  transition: var(--transicion);
}
.riel__lista > .riel__enlace:first-child { border-top: 0; padding-top: 0; }
.riel__enlace:hover { color: var(--azul); padding-left: 6px; }
.riel__enlace--actual { color: var(--verde); font-weight: 600; }
.riel__enlace--actual:hover { padding-left: 0; }

.riel__texto { font-size: .96rem; color: var(--gris-med); margin: 0 0 1.05rem; }
.riel__btn { width: 100%; justify-content: center; font-size: .92rem; }
.riel__btn svg { width: 17px; height: 17px; }
.riel__dato {
  display: flex; align-items: center; gap: .55rem; justify-content: center;
  margin-top: .85rem; font-size: .95rem; color: var(--azul); font-weight: 600;
}
.riel__dato svg { width: 16px; height: 16px; }

/* Bajo 1040 px el riel no cabe: pasa a ser una franja al final del bloque. */
@media (max-width: 1040px) {
  .con-riel { grid-template-columns: 1fr; }
  .riel { position: static; grid-template-columns: 1fr 1fr; margin-top: 2.2rem; }
  .figura-ancha img { aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) { .riel { grid-template-columns: 1fr; } }

/* En pantallas angostas la columna baja de ~40 caracteres y el justificado
   abre ríos de espacio que ni el guionado alcanza a cerrar (se ve en Industria
   y Servicios en teléfono). Bajo 760 px se alinea a la izquierda; en escritorio
   se mantiene justificado, como pidió el cliente en la obs. 6. */
@media (max-width: 760px) {
  .duo p, .intro-servicio p, .articulo > p, .item__cuerpo p,
  .ficha__cuerpo p, .texto-largo p { text-align: left; }
}

/* Paisaje y Turismo es un poste de alta tensión contra cielo azul abierto: el
   tercio izquierdo, donde va el título, no tiene una sola zona oscura y con el
   velo normal el contraste cae a 2,68:1, bajo el mínimo AA para texto grande.
   Sólo esa página sube el velo 0,12 en los dos primeros tramos, lo justo para
   llegar a 3,45:1 sin apagar la foto. Medido, no estimado. */
.encabezado--velo-fuerte .encabezado__fondo::after {
  background:
    linear-gradient(100deg, rgba(15,36,57,.54) 0%, rgba(15,36,57,.34) 45%,
                            rgba(15,36,57,.10) 70%, rgba(15,36,57,0) 88%),
    linear-gradient(180deg, rgba(15,36,57,.10) 0%, rgba(15,36,57,0) 45%);
}

/* El aviso del formulario cambia de color segun el resultado: verde para el
   envio correcto, rojo cuando el servicio rechaza el mensaje o no hay
   conexion. Sin esto un fallo se mostraba con el mismo verde que un exito. */
.aviso-pendiente[data-tipo="error"] {
  background: #FCF1EF;
  border-left-color: #C0392B;
  color: #8E2A1E;
}