/* ==========================================================================
   geomytsa.es — hoja de estilos del sitio estático
   Geomytsa · Geofísica Mar y Tierra (Madrid, desde 1982)

   Sistema de diseño:
     --navy        #000066  color de marca (usado en el tema original y en el logo)
     --slate       #5f727f  color de texto
     --bg          #f0f3f2  fondo de página
     --footer      #181828  fondo del pie
   Tipografías auto-hospedadas en /assets/fonts (Montserrat + Source Sans Pro).
   Sin dependencias externas: ni jQuery, ni CDNs, ni Google Fonts.
   ========================================================================== */

/* ------------------------------------------------------------------ fuentes */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Montserrat SemiBold'), local('Montserrat-SemiBold'),
       url('../fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Montserrat Bold'), local('Montserrat-Bold'),
       url('../fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: local('Montserrat ExtraBold'), local('Montserrat-ExtraBold'),
       url('../fonts/montserrat-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'),
       url('../fonts/source-sans-pro-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro'), local('SourceSansPro-Regular'),
       url('../fonts/source-sans-pro-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Source Sans Pro SemiBold'), local('SourceSansPro-SemiBold'),
       url('../fonts/source-sans-pro-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'),
       url('../fonts/source-sans-pro-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------ tokens */
:root {
  --navy: #000066;
  --navy-soft: #141b63;
  --slate: #5f727f;
  --bg: #f0f3f2;
  --white: #fff;
  --line: #dfe5e8;
  --btn: #494c64;
  --footer: #181828;
  --accent: #81a0f7;

  --font-head: 'Montserrat', 'Trebuchet MS', Arial, sans-serif;
  --font-body: 'Source Sans Pro', 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;

  --container: 1200px;
  --gap: 24px;
  --section-y: 72px;
  --radius: 3px;
  --shadow: 0 6px 22px rgba(15, 21, 46, .07);
  --shadow-hover: 0 14px 34px rgba(15, 21, 46, .13);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--slate);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; border: 0; display: block; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  color: var(--navy);
  margin: 0 0 .6em;
  line-height: 1.25;
}
h1 { font-size: clamp(30px, 4.2vw, 44px); font-weight: 800; }
h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: .5px; }
h3 { font-size: clamp(17px, 1.7vw, 20px); font-weight: 600; }
h4 { font-size: 15px; font-weight: 700; letter-spacing: .6px; }

p { margin: 0 0 1.1em; }

a { color: var(--navy); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
a:hover { color: var(--navy-soft); text-decoration: underline; }
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-outline:focus-visible,
.hamburger:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

strong, b { font-weight: 700; color: #40525d; }
/* …pero dentro de un titular manda el color del titular: si no, un <strong> suelto
   (el título «Oceanografía, Biología y Medio Ambiente» lo traía del original) se
   pintaba en gris azulado y desentonaba con los demás títulos. */
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong,
.section__title strong, .eq-group__title strong, .svc-box__panel h5 strong { color: inherit; }

blockquote {
  margin: 0 0 1.4em;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--navy);
  font-size: 18px;
  color: var(--navy);
}

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* --------------------------------------------------------------- utilidades */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gap);
}
.container--narrow { max-width: 900px; }
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mb-32 { margin-bottom: 32px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--navy);
  color: var(--white);
  padding: 12px 20px;
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  text-decoration: none;
  color: var(--white);
}

/* ------------------------------------------------------------------ topbar */
/* Réplica de la .top-area del original: fondo #f4f6f7, 56 px, borde inferior
   #dfe5e8, texto #5f727f, enlaces con "›" y botón gris azulado 30 px. */
.topbar {
  background: #f4f6f7;
  border-bottom: 1px solid var(--line);
  color: var(--slate);
  font-size: 15px;
  line-height: 1.4;
}
.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  min-height: 56px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.topbar a { color: var(--slate); }
.topbar a:hover { color: var(--navy); text-decoration: none; }
.topbar__left,
.topbar__right {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
}
.topbar__item { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.topbar__label { color: var(--slate); }
.topbar__icon { width: 15px; height: 15px; flex: 0 0 auto; stroke: var(--navy); fill: none; stroke-width: 1.7; }
.topbar__sep { width: 1px; height: 18px; background: var(--line); }
.topbar__link { font-size: 14px; }
/* Botón de LinkedIn de la barra (50ª revisión, 2026). La regla lleva `.topbar a`
   delante para ganar a `.topbar a` (color) y a `.topbar a:hover`. */
.topbar a.topbar__social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; color: var(--navy);
  transition: background .2s ease, color .2s ease;
}
.topbar a.topbar__social:hover { background: var(--navy); color: var(--white); }
.topbar__social-icon { width: 15px; height: 15px; fill: currentColor; display: block; }
/* Icono dentro de un botón (enlace al LinkedIn de la página de empleo, 50ª revisión) */
.btn .btn-icon,
.btn-outline .btn-icon { width: 15px; height: 15px; fill: currentColor; margin-right: 8px; vertical-align: -2px; }
.prose__linkedin { margin-top: 26px; }
.topbar a.topbar__social:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.btn--sm {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 3px;
  background: var(--btn);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .2px;
  text-transform: none;
}
.btn--sm:hover { background: var(--navy); color: var(--white); text-decoration: none; }

/* ------------------------------------------------------------------ header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 10px rgba(15, 21, 46, .04);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 91px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.site-header__logo { display: inline-flex; align-items: center; }
.site-header__logo img { width: 190px; height: auto; }
.site-header__logo:hover { text-decoration: none; }

.nav__list {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav__link {
  display: block;
  white-space: nowrap;
  padding: 8px 15px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 2px solid transparent;
}
.nav__link:hover { color: var(--navy); text-decoration: none; border-bottom-color: rgba(0, 0, 102, .35); }
.nav__link.is-active { color: var(--navy); border-bottom-color: var(--navy); }

/* hamburguesa */
.hamburger {
  display: none;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}
.hamburger:hover { border-color: var(--navy); }
.hamburger__bars { display: block; width: 20px; height: 14px; position: relative; }
.hamburger__bars span {
  position: absolute; left: 0; width: 100%; height: 2px; background: var(--navy);
  transition: transform .2s ease, opacity .2s ease;
}
.hamburger__bars span:nth-child(1) { top: 0; }
.hamburger__bars span:nth-child(2) { top: 6px; }
.hamburger__bars span:nth-child(3) { top: 12px; }
.hamburger[aria-expanded="true"] .hamburger__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] .hamburger__bars span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] .hamburger__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ------------------------------------------------- selector de idioma (ES/EN)
   35ª revisión: `<details>`/`<summary>` — se abre y se cierra SIN JavaScript.
   Vive en el header, después de la hamburguesa y del menú: en móvil queda a la
   derecha del botón de menú (el botón lleva `margin-left: auto` para empujar el
   grupo al borde) y en escritorio es el ÚLTIMO elemento del header, a la
   derecha del todo. Las banderas son SVG en línea (la CSP es `default-src
   'self'` y los emoji de bandera no se pintan en Windows). */
.lang { position: relative; flex: 0 0 auto; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  list-style: none;
}
.lang__btn::-webkit-details-marker { display: none; }
.lang__btn::marker { content: ""; }
.lang__btn:hover { border-color: var(--navy); }
.lang__btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.lang[open] > .lang__btn { border-color: var(--navy); }
.lang__flag { display: block; flex: 0 0 auto; border-radius: 2px; }
.lang__caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform .18s ease;
}
.lang[open] .lang__caret { transform: rotate(180deg); }
.lang__list {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 16px 32px rgba(15, 21, 46, .18);
}
.lang__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  color: var(--navy);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.lang__opt:hover { background: var(--bg); text-decoration: none; }
.lang__opt:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.lang__opt[aria-current="true"] { background: var(--bg); }
.lang__opt[aria-current="true"]::after { content: "✓"; margin-left: auto; color: var(--accent); }

/* -------------------------------------------------------------------- hero */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  height: 56vh;
  max-height: 560px;
  overflow: hidden;
  background-color: var(--navy);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  text-align: center;
  color: var(--white);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 102, .55), rgba(0, 0, 102, .35));
}
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero__inner {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 40px;
}
.hero h1 {
  margin: 0 0 14px;
  color: var(--white);
  font-size: clamp(30px, 4.6vw, 50px);
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .28);
}
.hero__subtitle {
  margin: 0 auto;
  max-width: 780px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.45;
  text-transform: uppercase;
}
.hero__lead {
  margin: 18px auto 0;
  max-width: 760px;
  color: rgba(255, 255, 255, .92);
  font-size: 17px;
  line-height: 1.6;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 28px;
}
.hero .breadcrumb {
  position: absolute;
  bottom: 16px;
  left: 0;
  right: 0;
  z-index: 2;
}
.hero .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  letter-spacing: .5px;
  color: rgba(255, 255, 255, .8);
}
.hero .breadcrumb a { color: rgba(255, 255, 255, .9); }
.hero .breadcrumb li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .55); }

/* hero plano (páginas internas): navy liso con textura sutil */
.hero--plain {
  min-height: 320px;
  height: auto;
  max-height: none;
  background-color: var(--navy);
  background-image:
    radial-gradient(circle at 18% 24%, rgba(129, 160, 247, .16) 0, rgba(129, 160, 247, 0) 42%),
    radial-gradient(circle at 82% 78%, rgba(129, 160, 247, .12) 0, rgba(129, 160, 247, 0) 46%),
    linear-gradient(135deg, #000055 0%, #000066 55%, #05053f 100%);
}
.hero--plain::after { content: none; }
.hero--plain .hero__inner { padding-top: 92px; padding-bottom: 78px; }
.hero--plain h1 { font-size: clamp(28px, 4vw, 50px); }

/* ---------------------------------------------------------------- secciones */
.section { padding: var(--section-y) 0; background: var(--bg); }
.section--white { background: var(--white); }

/* 60ª revisión: al pasar la sección de la empresa a gris, los textos secundarios se
   quedaban en 4,48:1 de contraste (el mínimo AA es 4,5:1). Se oscurecen un punto,
   sólo en esta sección: el resto de la web no se toca. */
.section--empresa p,
.section--empresa .cifra__concepto { color: #55666f; }
.section--navy { background: var(--navy); color: #d3daf6; }
.section--navy h2, .section--navy h3 { color: var(--white); }
.section--tight { padding: 48px 0; }
.section__title {
  margin-bottom: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.section__intro {
  max-width: 860px;
  margin: 0 auto 44px;
  font-size: 17px;
}
.section--divided { border-top: 1px solid var(--line); }

/* páginas internas: contenido centrado, párrafos con ancho máximo ~900px */
.page-internal .section { text-align: center; }
.page-internal .section h2 { text-transform: uppercase; letter-spacing: 1.4px; color: var(--slate); }
.page-internal .prose,
.page-internal .section > .container > p,
.page-internal .section > .container > h2,
.page-internal .section > .container > h3 {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.page-internal .prose > p,
.page-internal .section > .container > p { text-align: center; }
.page-internal .prose > h3 { text-align: center; }
.page-internal .prose ul,
.page-internal .prose ol { text-align: left; }

/* página legal (Política de Privacidad): es un texto largo y en el original va
   alineado a la izquierda; se le da además una medida de lectura cómoda
   (~760 px) sin tocar el estilo general del sitio */
.page-internal .section--legal { text-align: left; }
.page-internal .section--legal .prose,
.page-internal .section--legal > .container > h2 { max-width: 760px; }
.page-internal .section--legal > .container > h2 { text-align: left; }
.page-internal .section--legal .prose > p,
.page-internal .section--legal .prose > ul,
.page-internal .section--legal .prose > ol { text-align: left; }
.page-internal .section--legal .prose > p { line-height: 1.75; }

/* aviso de prevalencia del árbol inglés (37ª revisión): es lo primero que se
   lee en /en/privacy-policy/ y tiene que notarse sin romper la página legal */
.page-internal .section--legal .prose > p.legal-note {
  border-left: 3px solid var(--navy);
  background: #f0f3f2;
  padding: 14px 18px;
  margin: 0 0 1.9em;
  font-size: 15px;
  line-height: 1.6;
}

/* -------------------------------------------------------------- componentes */
.prose { font-size: 16px; }
.prose > *:last-child { margin-bottom: 0; }
.prose h3 { margin-top: 34px; color: var(--navy); }
.prose ul, .prose ol { margin: 0 0 1.4em; padding: 0; list-style: none; }

.prose ul,
.list-check { list-style: none; margin: 0 0 1.4em; padding: 0; }
.prose ul > li,
.list-check li { position: relative; padding-left: 26px; margin-bottom: 8px; }
.prose ul > li::before,
.list-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--navy);
  border-radius: 50%;
}
.list-check li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
}
.list-check li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--navy);
  border-radius: 50%;
}
.list-inline { display: inline-block; text-align: left; }

.btn,
.btn-outline {
  display: inline-block;
  border-radius: var(--radius);
  padding: 14px 22px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1.2;
  text-transform: uppercase;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn { background: var(--btn); color: var(--white); }
.btn:hover { background: var(--navy); color: var(--white); text-decoration: none; transform: translateY(-1px); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); text-decoration: none; transform: translateY(-1px); }
.btn--light { background: var(--white); color: var(--navy); }
.btn--light:hover { background: var(--accent); color: var(--navy); }
.btn-outline--light { border-color: rgba(255, 255, 255, .8); color: var(--white); }
.btn-outline--light:hover { background: var(--white); color: var(--navy); }

/* rejilla de tarjetas */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
  align-items: stretch;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  text-align: left;
  transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.card__media {
  position: relative;
  display: block;
  padding-top: 62.5%; /* 16:10 */
  background: var(--navy);
  overflow: hidden;
}
.card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__body { padding: 24px 26px 28px; }
.card h3 { margin-bottom: 10px; color: var(--navy); }
.card p { margin-bottom: 16px; font-size: 15.5px; }
.card__more {
  display: inline-block;
  margin-top: auto;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.card__more::after { content: " →"; }
.card--flat { box-shadow: none; }
.card--flat:hover { box-shadow: var(--shadow); }

/* figuras */
.figure { margin: 0 0 28px; }

/* 66ª revisión (portada): en la galería de «Investigación y Desarrollo», cuando
   el subapartado tiene tres fotos la última ocupa las dos columnas; si no, el
   tercer ladrillo cuelga solo y parece pertenecer al bloque de arriba. Se le da
   proporción apaisada (16:9) para que el mosaico quede compensado. */
/* 67ª revisión: los dos subapartados de I+D van apilados y las fotos en una fila
   uniforme, con un ancho máximo para que dos fotos no se estiren de más. */
.section--idi .idi__bloque + .idi__bloque { margin-top: 56px; }
/* `auto-fit` + `minmax(0,1fr)`: las N fotos del bloque reparten el ancho entero en
   N columnas iguales (con `minmax(200px,1fr)` sobraban columnas vacías y las fotos
   salían a 244 px, descuadradas). */
.section--idi .figure-grid--galeria {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-width: none; margin: 26px 0 0;
}
/* Con una sola foto en el bloque (al mover el ICP-OES al carrusel), la galería
   la estiraba a todo el ancho: se limita y se centra. */
.section--idi .figure-grid--galeria { justify-items: center; }
.section--idi .figure-grid--galeria .figure { max-width: 640px; }
.section--idi .figure-grid--galeria .figure img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
}

/* En pantalla estrecha, dos columnas: con tres, cada foto bajaba a 105 px y no se
   veía nada. La tercera pasa sola a la fila siguiente. */
@media (max-width: 600px) {
  .section--idi .figure-grid--galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 67ª revisión: el mapa de «Presencia Internacional» centrado y con aire sobre el
   texto. La regla `.figure-grid .figure { margin: 0 }` le quitaba el `auto` de los
   lados y lo dejaba pegado a la izquierda (medido: 100 px a un lado, 372 al otro). */
.section--presencia .figure-grid { margin-top: 34px; }
.section--presencia .figure-grid .figure { margin: 0 auto; }
.figure img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.figure figcaption {
  margin-top: 10px;
  font-size: 13.5px;
  font-style: italic;
  color: #7d8e99;
}
.figure--media-right,
.figure--media-left { max-width: 760px; margin-left: auto; margin-right: auto; }

.figure-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 22px;
  margin: 0 0 30px;
}
.figure-grid .figure { margin: 0; }
.figure-grid .figure img { height: 100%; object-fit: cover; }

/* Galerías de fotos de servicio (campaña «FOTOS WEB NUEVAS»): teselas iguales,
   porque las fotos del cliente vienen en proporciones muy distintas (verticales,
   horizontales y capturas de pantalla). */
.figure-grid--galeria { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.figure-grid--galeria .figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Pestaña «Fotografías» de Oceanografía (campaña «FOTOS WEB NUEVAS»): cada
   apartado con su título y sus fotos en fichas con pie. Las fichas muestran la
   imagen entera (`contain`), que es lo que necesita el disco Secchi (vertical)
   y el captador de partículas (pequeño). */
.fotos-oceano__grupo--sep {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.prose h3.fotos-oceano__titulo {      /* como el título de los apartados del panel */
  margin: 0 0 18px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
}
.figure-grid--fichas {
  grid-template-columns: repeat(auto-fit, minmax(0, 240px));
  justify-content: center;      /* el grupo, centrado en el panel: con una o dos fotos no queda torcido */
  gap: 26px 22px;
}
.figure-grid--fichas .figure {
  margin: 0;
  padding: 12px 12px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.figure-grid--fichas .figure img {
  width: 100%;
  height: 200px;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
  background: var(--bg);
}
.figure-grid--fichas .figure figcaption {
  margin-top: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: normal;
  color: var(--slate);
}

/* logos / certificaciones */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px 18px;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}
.logo-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* sin tarjeta blanca alrededor: las imágenes se ven a su tamaño */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 4px 2px;
  text-align: center;
  box-shadow: none;
}
.logo-grid__item img {
  max-height: 96px;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(15, 21, 46, .08));
}
.logo-grid__item-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--navy);
}
.logo-grid__item span {
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--slate);
}

/* ventanas emergentes de los servicios (<dialog>) */
/* En el original cada entrada de la lista abría un popup con la explicación y
   las fotos del servicio: aquí es un <dialog> que se abre con showModal() y,
   sin JavaScript, con el patrón `dialog:target` (el enlace lleva al `id`). */
.service-dialog {
  width: min(880px, calc(100% - 32px));   /* 16 px de margen a cada lado en móvil */
  max-width: none;                        /* manda la medida de arriba */
  max-height: calc(100vh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--slate);
  box-shadow: var(--shadow-hover);
  overflow: auto;
  overscroll-behavior: contain;
}
.service-dialog::backdrop { background: rgba(15, 21, 46, .62); }
/* Sin JavaScript (no hay showModal): el enlace abre la ventana por :target */
.service-dialog:target {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 120;
}
/* y el velo oscuro que en el modo modal pone ::backdrop lo simula un halo */
.service-dialog:target:not(:modal) {
  box-shadow: 0 0 0 100vmax rgba(15, 21, 46, .62), var(--shadow-hover);
}
html.has-dialog,
html:has(dialog.service-dialog:target) { overflow: hidden; }

.service-dialog__inner {
  position: relative;
  padding: 32px 36px 36px;
  text-align: left;
}
.service-dialog__title {
  margin: 0 44px 16px 0;
  font-family: var(--font-head);
  font-size: clamp(19px, 2.1vw, 24px);
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: none;      /* el <h2> del sitio va en mayúsculas */
  color: var(--navy);
}
/* (selectores con el elemento `dialog` delante: ganan a los del <h2> y los
   párrafos de las páginas internas, que van en mayúsculas y centrados) */
dialog.service-dialog h2.service-dialog__title {
  text-transform: none;
  color: var(--navy);
}
.service-dialog__body { font-size: 16px; text-align: left; }
dialog.service-dialog .service-dialog__body > p,
dialog.service-dialog .service-dialog__body > ul,
dialog.service-dialog .service-dialog__body li,
dialog.service-dialog .service-dialog__body figcaption { text-align: left; }
.service-dialog__body .figure { margin: 22px 0 0; }
.service-dialog__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg);
  color: var(--slate);
}
.service-dialog__close svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.service-dialog__close:hover { background: var(--navy); color: var(--white); text-decoration: none; }
.service-dialog__close:focus,
.service-dialog__close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

@media (max-width: 768px) {
  .service-dialog__inner { padding: 24px 20px 26px; }
  .service-dialog__title { margin-right: 40px; }
}

/* datos de contacto */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 26px;
  margin-bottom: 44px;
  text-align: left;
}
.contact-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
.contact-card h2, .contact-card h3 {
  margin-bottom: 12px;
  font-size: 15px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--navy);
}
.contact-card p { margin-bottom: 8px; font-size: 15.5px; }
.contact-card p:last-child { margin-bottom: 0; }
.contact-data { list-style: none; margin: 0; padding: 0; }
.contact-data li { margin-bottom: 8px; }
.contact-data b { font-weight: 600; color: #40525d; }

/* formularios de contacto y de CV (sin backend: se validan en el navegador y
   main.js abre el cliente de correo con los datos; ver README_DEPLOY.md) */
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
  text-align: left;
}
.site-form {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow);
  text-align: left;
}
.form-field { margin-bottom: 18px; }
.form-field label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--navy);
}
.form-req { color: #b3261e; }
.site-form input[type="text"],
.site-form input[type="email"],
.site-form input[type="tel"],
.site-form input[type="file"],
.site-form textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: #40525d;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.site-form textarea { resize: vertical; min-height: 120px; }
.site-form input[type="file"] { padding: 10px 12px; background: var(--bg); font-size: 15px; }
.site-form input:focus-visible,
.site-form textarea:focus-visible,
.accordion__summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}
.site-form input[aria-invalid="true"],
.site-form textarea[aria-invalid="true"] {
  border-color: #b3261e;
  background: #fdf4f3;
}
.form-error {
  margin: 6px 0 0;
  color: #b3261e;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.form-error[hidden] { display: none; }
.form-note {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-left: 3px solid var(--navy);
  background: var(--bg);
  font-size: 15px;
}
.form-status {
  margin: 0 0 18px;
  padding: 14px 16px;
  border-left: 3px solid var(--navy);
  background: #eef1fb;
  color: var(--navy);
  font-size: 15.5px;
  font-weight: 600;
}
.form-status[hidden] { display: none; }
.form-actions { margin: 22px 0 0; }
.site-form .btn { border: 0; cursor: pointer; }
.form-field--check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 10px;
  align-items: start;
}
.form-field--check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 4px 0 0;
  accent-color: var(--navy);
}
.form-field--check label {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
}
.form-field--check .form-error { grid-column: 2; margin-top: 0; }
.contact-aside__actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 0; }

/* llamada a la acción */
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: 40px 44px;
  background: var(--navy);
  border-radius: var(--radius);
  text-align: left;
}
.cta h2 { margin: 0 0 8px; color: var(--white); text-transform: uppercase; letter-spacing: 1.2px; font-size: 24px; }
.cta p { margin: 0; color: #ccd4f5; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ------------------------------------------------------------------ footer */
.footer {
  background: var(--footer);
  color: #c9cfdd;
  font-size: 15px;
}
.footer a { color: #c9cfdd; }
.footer a:hover { color: var(--white); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
  gap: 40px;
  padding-top: 60px;
  padding-bottom: 44px;
}
.footer__col h2, .footer__col h3 {
  margin-bottom: 16px;
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.footer__logo { width: 190px; margin-bottom: 18px; }
.footer__text { font-size: 15px; line-height: 1.7; color: #aeb6cb; }
.footer__list { list-style: none; margin: 0; padding: 0; }
.footer__list li { margin-bottom: 9px; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 13.5px;
  color: #98a0b8;
}

/* escritorio: menú de 5 apartados en una sola línea (medidas del original:
   Montserrat 700 14px #81a0f7, enlaces con 15px de aire) */
@media (min-width: 1151px) {
  .nav__list { gap: 2px; }
  .nav__link { font-size: 14px; letter-spacing: 1px; padding: 8px 12px; }
  .site-header__logo img { width: 190px; }
}

/* --------------------------------------------------------- menú móvil (JS) */
@media (max-width: 1150px) {
  .hamburger { display: inline-flex; margin-left: auto; }
  /* 35ª revisión: el logo se queda a la izquierda y el grupo «hamburguesa +
     selector de idioma» se va al borde derecho. Con `space-between` y tres
     elementos, la hamburguesa quedaba en el centro y el selector lejos de
     ella; con `flex-start` + `margin-left: auto` el selector queda pegado a su
     derecha, que es lo que pidió el cliente. */
  .site-header__inner { min-height: 72px; justify-content: flex-start; }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px rgba(15, 21, 46, .12);
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
  }
  .nav.is-open { max-height: 640px; overflow-y: auto; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gap) 18px;
  }
  .nav__list li { border-bottom: 1px solid var(--line); }
  .nav__list li:last-child { border-bottom: 0; }
  .nav__link { padding: 15px 0; border-bottom: 0; }
  .nav__link.is-active { border-bottom: 0; color: var(--navy); }
  .nav__link.is-active::before { content: "› "; }
  .nav__sub-link.is-active::before { content: "› "; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .cta { padding: 34px 30px; }
}

@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
  :root { --section-y: 48px; }
  .hero { min-height: 380px; height: 48vh; }
  .hero__subtitle { font-size: 17px; letter-spacing: 1.4px; }
  .hero .breadcrumb { position: static; margin-top: 26px; }
  .section__intro { margin-bottom: 32px; }
  .cards { grid-template-columns: 1fr; gap: 22px; }
  .footer__grid { grid-template-columns: 1fr; padding-top: 46px; padding-bottom: 34px; }
  .figure-grid { grid-template-columns: 1fr; }
  /* 34ª revisión — barra superior en móvil: «Contacto» y «Trabaja con
     nosotros» se veían ocultos (`display: none` en `.topbar__right`). Ahora la
     barra muestra las cuatro cosas: teléfono, correo, el enlace «› Contacto» y
     el botón. Para que quepa en un máximo de TRES líneas y sin desbordes se
     oculta la dirección (la más larga, y ya está en el pie) y los separadores
     verticales, se centra el contenido y el botón baja a 28 px (esa regla va al
     final del fichero, después de la que fija los 30 px de escritorio). */
  .topbar__inner { justify-content: center; row-gap: 6px; }
  .topbar__left,
  .topbar__right { justify-content: center; gap: 4px 14px; }
  .topbar__addr,
  .topbar__sep { display: none; }
  .logo-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  :root { --gap: 16px; --section-y: 44px; }
  body { font-size: 15.5px; }
  .site-header__logo img { width: 150px; }
  .topbar { font-size: 12px; }
  .topbar__inner { justify-content: center; }
  .hero { min-height: 320px; }
  .hero__inner { padding-top: 32px;
    padding-bottom: 32px; }
  .cta { padding: 26px 22px; }
  .cta__actions { width: 100%; }
  .logo-grid { grid-template-columns: 1fr; }
  .contact-grid { gap: 18px; }
  .site-form { padding: 20px 16px; }
}

/* --------------------------------------------------- animación de entrada */
/* Se oculta sólo cuando el JS ha arrancado (html.js-reveal): sin JavaScript el
   contenido se ve siempre, nunca queda una página en blanco. */
.js-reveal .fade-in {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: opacity, transform;
}
.js-reveal .fade-in.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.respect-motion .js-reveal .fade-in { opacity: 1; transform: none; transition: none; }
  html.respect-motion .card,
  html.respect-motion .btn,
  html.respect-motion .btn-outline { transition: none; }
  html.respect-motion .card:hover,
  html.respect-motion .btn:hover,
  html.respect-motion .btn-outline:hover { transform: none; }
}

/* ------------------------------------------------------------------ print */
@media print {
  .topbar, .site-header, .hero, .footer, .cta, .skip-link { display: none; }
  body { background: #fff; color: #000; }
  .section { padding: 12px 0; }
  a { color: #000; text-decoration: underline; }
}

/* ---------------------------------------------------------------------------
   Pulido final (revisión de Raúl): el hero del original no lleva velo y sus
   botones van en navy; los botones corrientes mantienen el #494c64 original.
   --------------------------------------------------------------------------- */
.topbar .btn--sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 14px;
  border-radius: 3px;
  background: var(--btn);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;          /* texto centrado verticalmente en los 30 px */
  letter-spacing: .2px;
  text-transform: none;
}
.topbar .btn--sm:hover { background: var(--navy); color: var(--white); }

/* 34ª revisión: en móvil el botón de la barra superior baja a 28 px. La regla va
   aquí, DESPUÉS de la de arriba (misma especificidad), porque es la de arriba la
   que fija los 30 px de escritorio y una regla anterior no la sobrescribe. */
@media (max-width: 768px) {
  .topbar .btn--sm { height: 28px; padding: 0 12px; }
}

.hero::after { background: linear-gradient(rgba(0, 0, 102, .72), rgba(0, 0, 102, .5)); }
.hero h1, .hero p, .hero .hero__sub { text-shadow: 0 1px 4px rgba(0, 6, 40, .55); }

.hero .btn { background: var(--navy); }
.hero .btn:hover { background: var(--navy-soft); }
.hero .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .85); }
.hero .btn-outline:hover { background: #fff; color: var(--navy); }

/* ==========================================================================
   HERO CON SLIDER (portada) — medidas tomadas del original (Revolution Slider)
   alto 630 px · foto limpia SIN velo azul · texto alineado a la izquierda en
   una columna de 1000 px · titular Montserrat 700 80px #0c024f ·
   segunda línea Montserrat 300 60px #0a004f · subtítulo Source Sans 300 24px
   blanco en mayúsculas · flechas 55x55 rgba(60,57,80,.7) pegadas a los bordes.
   ========================================================================== */
.hero--slider {
  display: block;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  background: var(--navy);
  color: var(--navy);
  text-align: left;
}
.hero--slider::after { content: none; }               /* sin velo: foto limpia */
.hero--slider h1, .hero--slider p { text-shadow: none; }

.slider { position: relative; height: 630px; overflow: hidden; background: #dfe5e8; }
.slider__slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.slider__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slider__slide.is-active { opacity: 1; }
.slider__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slider__caption {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 100%;
  max-width: 1000px;
  transform: translate(-50%, -54%);
  padding: 0 24px;
}
.hero .slider__title {
  margin: 0;
  color: #0c024f;
  font-family: var(--font-head);
  font-size: 80px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 2px;
}
.hero .slider__title--light { color: #0a004f; font-size: 60px; font-weight: 300; }
.slider__subtitle {
  margin: 16px 0 0;
  color: var(--white);
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.slider__btn {
  margin-top: 26px;
  min-width: 168px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
}
.slider__btn:hover { background: var(--navy-soft); }
.slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55px;
  height: 55px;
  margin-top: -27px;
  padding: 0;
  border: 0;
  background: rgba(60, 57, 80, .7);
  color: var(--white);
  cursor: pointer;
  transition: background .2s ease;
}
.slider__arrow:hover { background: rgba(60, 57, 80, .95); }
.slider__arrow--prev { left: 0; }
.slider__arrow--next { right: 0; }
.slider__arrow svg { width: 26px; height: 26px; stroke: var(--white); stroke-width: 1.7; fill: none; stroke-linecap: round; }

@media (max-width: 1199px) {
  .slider__caption { max-width: 94%; }
  .hero .slider__title { font-size: 62px; }
  .hero .slider__title--light { font-size: 46px; }
}
@media (max-width: 1023px) {
  .slider { height: 480px; }
  .hero .slider__title { font-size: 50px; }
  .hero .slider__title--light, .hero .slider__title--thin { font-size: 36px; }
  .slider__subtitle { font-size: 18px; letter-spacing: 1.6px; }
}
@media (max-width: 767px) {
  .slider { height: 420px; }
  .slider__caption { max-width: 100%; padding: 0 52px; }
  .hero .slider__title { font-size: 34px; letter-spacing: 1px; }
  .hero .slider__title--light, .hero .slider__title--thin { font-size: 24px; }
  .hero .slider__kicker { font-size: 13px; letter-spacing: 1.2px; }
  .slider__subtitle { margin-top: 12px; font-size: 13.5px; letter-spacing: 1.2px; }
  .slider__btn { margin-top: 20px; min-width: 0; }
  .slider__arrow { width: 40px; height: 40px; margin-top: -20px; }
  .slider__arrow svg { width: 20px; height: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html.respect-motion .slider__slide { transition: none; }
}

/* ------------------------------------------------- desplegable del menú (JS no necesario) */
.nav__item { position: relative; }
.nav__sub {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  min-width: 290px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 18px 30px rgba(15, 21, 46, .12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
.nav__item:hover > .nav__sub,
.nav__item:focus-within > .nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__sub a {
  display: block;
  padding: 8px 18px;
  color: var(--slate);
  font-size: 14.5px;
  line-height: 1.35;
  white-space: normal;
}
.nav__sub a:hover { background: var(--bg); color: var(--navy); text-decoration: none; }
/* Servicio en el que estás: mismo lenguaje que el menú principal (color de marca),
   y en móvil la marca «› » delante, como en `.nav__link.is-active`. */
.nav__sub-link.is-active { background: var(--bg); color: var(--navy); font-weight: 700; }
.nav__caret { display: inline-block; width: 8px; height: 8px; margin-left: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translateY(-2px); }

@media (max-width: 1150px) {
  .nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 6px 16px;
    border: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__sub a { padding: 9px 0; font-size: 14px; }
  .nav__caret { display: none; }
}

/* ==========================================================================
   PORTADA 2026 — secciones nuevas (contenido del cliente) y animación de
   entrada/salida al hacer scroll. Todo se apoya en el sistema de diseño que
   ya existe (.section, .cards/.card, .prose, .section__title, .logo-grid).
   ========================================================================== */

/* sección a ancho completo con foto de fondo: la foto se oscurece con un
   degradado navy para que el texto blanco se lea con contraste suficiente */
.section--photo {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: #dbe1f6;
}
.section--photo > .section__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.section--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* velo ajustado para que la foto se vea de verdad: el texto blanco sigue
     con contraste sobrado porque la foto de inicio ya es oscura */
  background: linear-gradient(180deg, rgba(0, 0, 60, .58) 0%, rgba(0, 8, 55, .44) 100%);
}
.section--photo > .container { position: relative; z-index: 2; }
.section--photo h2,
.section--photo h3,
.section--photo .section__title { color: var(--white); }
/* Sobre foto el titular va SIEMPRE en blanco: hay que ganar en especificidad a
   `.page-internal .section h2`, que lo pintaba en gris y se perdía sobre la imagen. */
.page-internal .section--photo h2,
.page-internal .section--photo h3,
.page-internal .section--photo .section__title {
  color: var(--white);
  text-shadow: 0 2px 14px rgba(0, 4, 30, .55);
}
.page-internal .section--photo .prose { color: #e3e8fb; text-shadow: 0 1px 10px rgba(0, 4, 30, .5); }
.section--photo .prose { color: #dbe1f6; }

/* 1 · Eslogan (bloque destacado, texto grande, sobre la foto de inicio) */
.section--eslogan { padding: 104px 0; text-align: center; }
.eslogan__claim {
  margin: 0 0 16px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 1.2px;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 4, 30, .55);
}
.eslogan__sub {
  margin: 0;
  color: #dfe4fa;
  font-family: var(--font-head);
  font-size: clamp(15px, 1.7vw, 21px);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 1px;
  text-wrap: balance;
}

/* 2 · Seis tarjetas de servicios en tres columnas (minmax(0,…) para que un
   texto largo nunca ensanche la rejilla y provoque scroll horizontal) */
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* 3-4 · Texto a un lado, foto al otro (la variante --reverse la invierte) */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  text-align: left;
}
.split__text { min-width: 0; }
.split__text h2 { margin-bottom: 14px; }
.split__media { min-width: 0; }
.split__media img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.split--reverse .split__media { order: -1; }

/* 5 · Historia: ancho completo, foto de fondo y texto animado al scroll */
.section--historia { padding: 96px 0; }
.section--historia .section__title { margin: 34px 0 22px; }
.section--historia .prose { font-size: 17.5px; line-height: 1.85; max-width: 860px; }
/* los dos párrafos de la historia, claramente diferenciados */
.prose--historia p { margin: 0 0 1.35em; }
.prose--historia p:last-child { margin-bottom: 0; }
/* el eslogan y la historia entran escalonados dentro de la misma sección */
.js-reveal .reveal > .eslogan__claim { transition-delay: .05s; }
.js-reveal .reveal > .eslogan__sub { transition-delay: .18s; }
.js-reveal .reveal > .section__title { transition-delay: .30s; }
.js-reveal .reveal > .prose--historia { transition-delay: .44s; }

/* animación de entrada y de salida al hacer scroll (.reveal).
   La clase `js-reveal` la añade main.js en el <html>: si el JavaScript no
   llega a ejecutarse, el texto se ve siempre (mejora progresiva). */
/* Se animan los HIJOS de .reveal (no el bloque), para que el eslogan, el
   subtítulo, el titular y los párrafos entren escalonados de verdad. */
.js-reveal .reveal > * {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity .75s ease, transform .75s ease;
  will-change: opacity, transform;
}
.js-reveal .reveal.is-visible > * { opacity: 1; transform: none; }
.js-reveal .reveal.is-visible { opacity: 1; transform: none; }

/* 8 · Fila de logotipos de certificación (ISO 9001, ISO 14001 y Dekra) */
.logo-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: center;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}
.logo-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  padding: 14px 10px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.logo-row img { width: auto; max-width: 100%; max-height: 84px; object-fit: contain; }

@media (max-width: 1024px) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split { gap: 34px; }
}
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 26px; }
  .split__media { order: -1; }
}
@media (max-width: 768px) {
  .section--eslogan { padding: 66px 0; }
  .section--historia { padding: 62px 0; }
  .section--historia .prose { font-size: 16.5px; }
}
@media (max-width: 640px) {
  .cards--3 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .logo-row { gap: 10px; }
  .logo-row li { min-height: 78px; padding: 10px 6px; }
  .logo-row img { max-height: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  html.respect-motion .js-reveal .reveal,
  html.respect-motion .js-reveal .reveal > * { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   PORTADA 2026 (2ª entrega del cliente): los tres mensajes, la empresa con sus
   cinco cifras, los cinco proyectos y la banda de empleo. Todo con las clases
   del sistema de diseño (.section, .cards/.card, .section__title, .btn).
   -------------------------------------------------------------------------- */

/* 2 · Los tres mensajes en una rejilla de tres tarjetas: la de servicios va en
   navy y sin foto (lleva las etiquetas) y las otras dos, con su foto arriba. */
.card--mensaje .card__body { display: flex; flex-direction: column; flex: 1 1 auto; }
.card--mensaje h3 { font-size: clamp(18px, 1.7vw, 21px); }
.card--servicios {
  background: var(--navy);
  border-color: var(--navy);
  color: #dbe1f6;
}
.card--servicios h3 { color: var(--white); }
.card--servicios .mensaje__sub {
  margin: 0 0 24px;
  font-size: 16px;
  color: #dfe4fa;
}
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: auto 0 0;          /* las etiquetas se apoyan en el pie de la tarjeta */
  padding: 0;
  list-style: none;
}
.tags li { margin: 0; }
.tag {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 100px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .6px;
  line-height: 1;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.tag:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
  text-decoration: none;
}

/* 3 · La empresa y sus cinco cifras (tira con separadores de 1 px) */
.section__intro--empresa { margin-bottom: 48px; font-size: 18.5px; line-height: 1.75; }
.cifras {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cifra {
  padding: 28px 16px;
  border-left: 1px solid var(--line);
  text-align: center;
}
.cifra:first-child { border-left: 0; }
.cifra__num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.5px;
  color: var(--navy);
}
.cifra__concepto {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--slate);
}

/* 4 · Los cinco proyectos: rejilla de dos columnas, foto arriba (a altura fija
   para que todas las tarjetas queden igualadas), categoría y año en la cabecera
   y el resumen debajo. La última ocupa las dos columnas en escritorio. */
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card--proyecto .card__media { padding-top: 0; height: 220px; }
.proyecto__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.proyecto__categoria {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 100px;
  background: rgba(0, 0, 102, .07);
  color: var(--navy);
  font-family: var(--font-head);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
}
.proyecto__anio {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #93a2ac;
}
.card--proyecto h3 { margin-bottom: 10px; font-size: clamp(17px, 1.5vw, 19.5px); }
.card--proyecto .card__body { display: flex; flex-direction: column; }
.card--proyecto p:last-child { margin-bottom: 0; }

@media (min-width: 901px) {
  /* el último proyecto, a lo ancho: foto a un lado y texto al otro.
     Solo con un número IMPAR de proyectos (con seis, la rejilla de 2 columnas
     ya queda pareja y las tarjetas van todas iguales: 43ª revisión). */
  .cards--2--impar > .card--proyecto:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .cards--2--impar > .card--proyecto:last-child .card__media {
    flex: 0 0 46%;
    width: 46%;
    height: auto;
  }
  .cards--2--impar > .card--proyecto:last-child .card__body { justify-content: center; }
}

@media (max-width: 1024px) and (min-width: 641px) {
  /* a tres tarjetas en dos columnas, la de servicios ocupa la fila de arriba */
  .section--mensajes .cards--3 > .card--mensaje:first-child { grid-column: 1 / -1; }
  .section--mensajes .cards--3 > .card--mensaje:first-child .tags { margin-top: 6px; }
}

@media (max-width: 1024px) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cifra { border-left: 0; }
}

@media (max-width: 900px) {
  .cards--2--impar > .card--proyecto:last-child { grid-column: auto; }
}

@media (max-width: 640px) {
  .cards--2 { grid-template-columns: 1fr; }
  .cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 14px;
    border: 0;
  }
  .cifra { padding: 0; }
  .cifra__num { font-size: 32px; }
  .card--proyecto .card__media { height: 190px; }
}

/* 5 · Banda de empleo (navy) que cierra la portada */
.section--empleo { padding: 66px 0; text-align: center; }
.section--empleo .section__title { margin-bottom: 16px; }
.empleo__texto {
  max-width: 780px;
  margin: 0 auto 30px;
  font-size: 17.5px;
  line-height: 1.7;
  color: #d3daf6;
}
.empleo__acciones { margin: 0; }

/* ==========================================================================
   Página de Servicios — estructura del original:
   fila con divisor, fila con la introducción y fila con dos cajas al 50 %
   (`vc_col-sm-6`). Cada caja es un `gem-textbox` del tema: imagen arriba y panel
   gris `#f0f3f2` con 30 px de relleno, todo centrado (`centered-box`), rótulo
   `h5` en mayúsculas con letter-spacing .05em y divisor de 1 px.
   ========================================================================== */
/* Espacios medidos en el original: 49 px de la barra de título al párrafo y
   35 px del párrafo a las dos cajas. El divisor que el original tiene encima del
   párrafo es invisible (borde transparente), así que no se dibuja.
   Todo va en una sola sección para que no se sumen rellenos. */
.section--servicios { padding: 49px 0 72px; }
.page-internal .section .svc-intro,
.svc-intro { max-width: 100%; text-align: left; }   /* como el original: a la izquierda y a todo el ancho */
/* la introducción del original va a la izquierda; hay que ganar a
   `.page-internal .prose > p`, que centra los párrafos de las internas */
.page-internal .prose.svc-intro > p { text-align: left; }
.svc-intro p { margin: 0 0 1.15em; }
.svc-intro p:last-child { margin-bottom: 0; }
.svc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
  margin-top: 35px;          /* el hueco del original entre el párrafo y las cajas */
}
.svc-box { text-align: center; margin-bottom: 1.421em; }
.svc-box__picture img { display: inline-block; vertical-align: top; width: 100%; height: auto; }
.svc-box__panel { background: #f0f3f2; padding: 30px; }
.svc-box__panel > :first-child { margin-top: 0; }
.svc-box__panel > :last-child { margin-bottom: 0; }
.svc-box__panel h5 {
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--navy);
  margin: .5em 0;
}
.svc-box__divider { height: 0; font-size: 0; line-height: 0; border-top: 1px solid var(--line); margin: 20px 0; }
.svc-box__links p {
  margin: 0 0 .3em;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--slate);
}
.svc-box__links p:last-child { margin-bottom: 0; }
.svc-box__links a { color: var(--navy); text-decoration: none; transition: color .3s, background-color .3s; }
.svc-box__links a:hover { text-decoration: underline; }
.svc-box__links .btn-outline { margin-top: 16px; }
/* Las cuatro tarjetas de Servicios (2026) van en dos filas de dos, todas del
   mismo ancho: la fila 2 la componen Ingeniería y Nuestros Equipos, con esta
   misma rejilla. Hasta la 32ª revisión Ingeniería iba sola y centrada con un
   modificador que se retiró en la 33ª: ya no hace falta (ver README). */
@media (max-width: 800px) {
  .svc-row { grid-template-columns: 1fr; gap: 24px; }
  .svc-box__panel { padding: 24px 20px; }
}

/* Anclas del menú: que la cabecera fija (92 px) no tape el apartado al saltar */
section[id], div[id], h2[id], h3[id], article[id] { scroll-margin-top: 112px; }

/* ==========================================================================
   Hero con foto (página «Qué es Geomytsa») — como la portada del original:
   la foto hace un zoom muy lento y continuo y el texto entra animado.
   ========================================================================== */
.hero--photo {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 430px;
  height: auto;
  max-height: none;
  padding: 96px 0;
  overflow: hidden;
  background: var(--navy);
  text-align: center;
  color: var(--white);
}
.hero--photo .hero__zoom { position: absolute; inset: -4%; z-index: 0; }
.hero--photo .hero__zoom img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  animation: heroZoom 12s ease-in-out infinite alternate;
  will-change: transform;
}
.hero--photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 60, .60) 0%, rgba(0, 8, 55, .44) 100%);
}
.hero--photo .hero__inner { position: relative; z-index: 2; }
.hero--photo .breadcrumb { z-index: 3; }
@keyframes heroZoom { from { transform: scale(1); } to { transform: scale(1.15); } }

/* texto del hero: entrada suave (rótulo, titular y entradilla escalonados) */
.hero__kicker {
  margin: 0 0 12px;
  color: #c3cdf2;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
}
.hero .hero__kicker { animation: heroTextIn .9s .05s ease both; }
.hero h1 { animation: heroTextIn .9s .18s ease both; }
.hero .hero__lead { animation: heroTextIn .9s .42s ease both; }
@keyframes heroTextIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero--plain .hero__lead,
.hero--photo .hero__lead {
  max-width: 900px;
  font-size: 19px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .9);
}
@media (max-width: 767px) {
  .hero--photo { min-height: 340px; padding: 66px 0; }
  .hero__kicker { font-size: 12.5px; letter-spacing: 2.5px; }
  .hero--plain .hero__lead, .hero--photo .hero__lead { font-size: 16.5px; }
}
@media (prefers-reduced-motion: reduce) {
  html.respect-motion .hero--photo .hero__zoom img { animation: none; }
  html.respect-motion .hero .hero__kicker,
  html.respect-motion .hero h1,
  html.respect-motion .hero .hero__lead { animation: none; }
}

/* Las figuras de las páginas de contenido no deben ocupar una pantalla entera:
   se limitan y se centran (Oceanografía, Ingeniería, Equipos, I+D+i…). */
.figure { max-width: 880px; margin-left: auto; margin-right: auto; }
.figure img { width: 100%; height: auto; }
.figure figcaption { text-align: center; }
@media (max-width: 767px) { .figure { max-width: 100%; } }

/* ==========================================================================
   Barra de título de las páginas internas, como el original: navy liso,
   FINA (25 px arriba / 13 abajo) y con el título y el subtítulo ALINEADOS A
   LA IZQUIERDA. Oceanografía e Ingeniería la llevan más alta (80/80).
   (Medido en el original: .page-title-block con esos paddings y #000066.)
   ========================================================================== */
.hero--plain {
  min-height: 0;
  height: auto;
  max-height: none;
  padding: 0;
  background-color: var(--navy);
  background-image: none;
  text-align: left;
}
.hero--plain .hero__inner { padding-top: 26px;
  padding-bottom: 16px; }
.hero--plain h1 {
  font-size: clamp(28px, 3.6vw, 50px);
  line-height: 1.12;
  letter-spacing: 2.5px;
}
.hero--plain .hero__lead {
  margin: 10px 0 0;
  max-width: none;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: .2px;
  color: rgba(255, 255, 255, .93);
}
.hero--plain--tall .hero__inner { padding-top: 80px;
  padding-bottom: 80px; }
@media (max-width: 1023px) {
  .hero--plain .hero__inner { padding-top: 24px;
  padding-bottom: 16px; }
  .hero--plain .hero__lead { font-size: 19px; }
}
@media (max-width: 767px) {
  .hero--plain .hero__inner { padding-top: 20px;
  padding-bottom: 14px; }
  .hero--plain--tall .hero__inner { padding-top: 54px;
  padding-bottom: 54px; }
  .hero--plain .hero__lead { font-size: 16.5px; }
}

/* ------------------------------------------- apartados (rejilla) y pestañas
   Páginas /oceanografia-geomytsa/ e /ingenieria-geomytsa/ («Cosas que podemos
   hacer por ud. en…»). El original maquetaba cada pestaña como una rejilla de
   apartados en filas de tres columnas —con una línea de 1 px entre fila y
   fila— y cada apartado con su icono cuadrado navy a la izquierda y el texto a
   la derecha: aquí se reproduce esa estructura.
   Medido en el original (1366 px de ancho):
     · el rótulo (h3) va en mayúsculas, 28 px, #3c3950 y 1,4 px de interletraje;
     · el icono es un cuadrado navy de 50×50 con radio 3 px y un glifo blanco
       de 20×16 px centrado (es el glifo YouTube del pack MaterialDesignIcons);
     · la pestaña activa es blanca con el texto gris y la inactiva va rellena de
       #99a9b5 con el texto blanco; el recuadro del panel es de 2 px #99a9b5 y
       la pestaña activa se funde con él (sin borde inferior);
     · la línea separadora entre filas es de 1 px y color #dfe5e8, partida en
       tres tramos por el canal entre columnas. */
.page-internal .prose--wide { max-width: 1080px; }

.page-internal .prose > h3.prose__rotulo {
  margin: 0 0 26px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #3c3950;
}
@media (max-width: 767px) {
  .page-internal .prose > h3.prose__rotulo { font-size: 21px; letter-spacing: 1px; }
}

.tabs { text-align: left; }
.tabs__list {
  position: relative;         /* la pestaña activa tapa el borde del recuadro */
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 -4px;           /* 2 px de solape con el recuadro del panel */
}
.tabs__tab {
  margin: 2px;
  padding: 11px 25px;
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 25px;
  text-transform: uppercase;
  color: var(--white);
  background: #99a9b5;
  border: 2px solid #99a9b5;
  border-radius: 0;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease;
}
.tabs__tab:hover { background: #8a9caa; border-color: #8a9caa; }
.tabs__tab.is-active {        /* activa: blanca y sin borde inferior */
  color: #99a9b5;
  background: var(--white);
  border-bottom-color: var(--white);
}
.tabs__tab:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.tabs__panels { border: 2px solid #99a9b5; padding: 50px; }
.tabs__panel { text-align: left; }

.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px 30px;
  align-items: start;
  text-align: left;
}
/* la pestaña de dos apartados del original iba a media anchura (1/2 + 1/2) */
.activity-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* la de UN solo apartado (Ingeniería desde la 38ª revisión) ocupa el ancho
   completo del panel: en la rejilla de tres, el apartado se quedaba en 1/3 y
   dejaba dos tercios vacíos */
.activity-grid--1 { grid-template-columns: minmax(0, 1fr); }
.activity {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  min-width: 0;
  text-align: left;
}
/* el cuadrado navy con el glifo blanco (50×50, radio 3 px, como el original) */
.activity__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  margin-top: 7px;
  background: var(--navy);
  border-radius: 3px;
}
.activity__glyph { display: block; width: 24px; height: 24px; }
/* El original pinta el título de cada apartado como texto en negrita del cuerpo
   (Source Sans Pro 700, 16 px, #5f727f), no como titular. */
.activity h3 {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: #5f727f;
}
/* Y sus listas son `disc` con 40 px de sangría (marcador gris del texto). */
.activity ul { list-style: disc; padding-left: 40px; margin: 16px 0 0; }
.activity ul > li { list-style: disc; padding-left: 0; margin-bottom: 6px; }
.activity ul > li::before { content: none; }
/* línea entre filas de apartados: un tramo por columna de la rejilla */
.activity-sep {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 30px;
  margin: 34px 0 30px;
}
.activity-sep span { border-top: 1px solid var(--line); }
@media (max-width: 1023px) {
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 26px; }
  /* el apartado único sigue a ancho completo (el modificador va después que la
     regla base de la rejilla, que aquí pasa a dos columnas) */
  .activity-grid--1 { grid-template-columns: minmax(0, 1fr); }
  .tabs__panels { padding: 34px 30px; }
}
@media (max-width: 767px) {
  .activity-grid,
  .activity-grid--2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .activity-sep { grid-template-columns: minmax(0, 1fr); margin: 24px 0; }
  .activity-sep span + span { display: none; }
  .tabs__panels { padding: 26px 20px; }
  .tabs__tab { padding: 9px 16px; font-size: 12.5px; }
}

/* ---- Trabaja con nosotros: la foto del vibrocorer a la izquierda y el
   formulario de candidatura a la derecha, como en el original (col-4/col-8).
   En pantallas estrechas se apilan con la foto arriba. ---- */
.cv-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 38px;
  align-items: stretch;          /* la columna de la foto llega a la altura del formulario */
  text-align: left;
}
.cv-layout__media,
.cv-layout__form { min-width: 0; }
/* la foto se ajusta exactamente a la altura del formulario y queda centrada */
.cv-layout__media { display: flex; align-items: center; }
.cv-layout__media .figure { margin: 0; width: 100%; height: 100%; max-width: none; }
.cv-layout__media .figure img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  border-radius: var(--radius);
}
/* la etiqueta del CV es el texto literal del original: sin mayúsculas */
.form-field label.form-label--plain {
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--slate);
}
@media (max-width: 900px) {
  .cv-layout { grid-template-columns: 1fr; gap: 26px; align-items: start; }
  .cv-layout__media { order: -1; }
  .cv-layout__media .figure { height: auto; }
  .cv-layout__media .figure img { height: auto; max-height: 420px; object-fit: contain; }
}

/* ==========================================================================
   Letras del hero entrando una a una girando. Reproduce la capa de texto del
   slider original de «Qué es Geomytsa»: split por caracteres, entrando en orden,
   con rX 360°, escala 0.3, desplazamiento x -100 / y 80 y opacidad 0 (aquí con
   un ritmo más ágil: 2,2 s de recorrido por letra y 90 ms entre letra y letra,
   en lugar de los 5 s por letra y los 0,5 s del original, que era muy lento
   para una web real). Los retardos van en reglas `:nth-of-type`, no en el
   marcado, porque la CSP bloquea los atributos `style=` en línea (37ª revisión).
   ========================================================================== */
.hero--photo .hero__kicker,
.hero--photo h1 { perspective: 500px; }   /* más marcado: el giro se aprecia mejor */
.hero .ch {
  display: inline-block;
  animation: chIn .9s ease-out both;
  animation-delay: 0ms;
  will-change: transform, opacity;
}

/* La caja de cada palabra (58ª revisión): indivisible, para que la línea no se
   pueda partir en mitad de una palabra aunque cada letra sea una caja. */
.hero .ch-word { display: inline-block; white-space: nowrap; }
/* El retardo va AQUÍ y no en el marcado (37ª revisión): el retardo en línea
   (`style="--d:…ms"`) lo bloquea la CSP del sitio (`style-src 'self'`, en
   `_headers`), de modo que en Cloudflare las 26 letras del hero de «¿Qué es
   Geomytsa?» se quedaban sin retardo y giraban todas a la vez (en local, sin
   CSP, se veían bien). Con reglas por posición el índice es POR CONTENEDOR
   (el rótulo y el titular son dos contenedores y cada uno empieza en 1), así
   que basta un juego de 40: el texto más largo del hero tiene 13 letras.
   90 ms entre letra y letra, como antes (0, 0,09 s, 0,18 s…). */
/* El retardo de cada letra va AQUÍ, no en el marcado (la CSP del sitio,
   `style-src 'self'`, bloquea los atributos `style=` en línea: en Cloudflare las
   letras se quedaban sin retardo y giraban todas a la vez).
   40ª revisión: antes eran 40 reglas con 90 ms de paso y 2,2 s por letra, de modo
   que una frase de más de 40 letras se partía en dos animaciones (el principio
   entraba letra a letra y el final de golpe) y las frases largas tardaban 5 s.
   Ahora hay una pauta ÚNICA para cualquier longitud: 9 ms entre letras (tope
   900 ms), así la frase entera entra en menos de 1 s y siempre igual. Hay reglas
   para 160 letras y `build.py` avisa si algún texto las supera. */
.hero .ch.ch-1 { animation-delay: 0ms; }
.hero .ch.ch-2 { animation-delay: 9ms; }
.hero .ch.ch-3 { animation-delay: 18ms; }
.hero .ch.ch-4 { animation-delay: 27ms; }
.hero .ch.ch-5 { animation-delay: 36ms; }
.hero .ch.ch-6 { animation-delay: 45ms; }
.hero .ch.ch-7 { animation-delay: 54ms; }
.hero .ch.ch-8 { animation-delay: 63ms; }
.hero .ch.ch-9 { animation-delay: 72ms; }
.hero .ch.ch-10 { animation-delay: 81ms; }
.hero .ch.ch-11 { animation-delay: 90ms; }
.hero .ch.ch-12 { animation-delay: 99ms; }
.hero .ch.ch-13 { animation-delay: 108ms; }
.hero .ch.ch-14 { animation-delay: 117ms; }
.hero .ch.ch-15 { animation-delay: 126ms; }
.hero .ch.ch-16 { animation-delay: 135ms; }
.hero .ch.ch-17 { animation-delay: 144ms; }
.hero .ch.ch-18 { animation-delay: 153ms; }
.hero .ch.ch-19 { animation-delay: 162ms; }
.hero .ch.ch-20 { animation-delay: 171ms; }
.hero .ch.ch-21 { animation-delay: 180ms; }
.hero .ch.ch-22 { animation-delay: 189ms; }
.hero .ch.ch-23 { animation-delay: 198ms; }
.hero .ch.ch-24 { animation-delay: 207ms; }
.hero .ch.ch-25 { animation-delay: 216ms; }
.hero .ch.ch-26 { animation-delay: 225ms; }
.hero .ch.ch-27 { animation-delay: 234ms; }
.hero .ch.ch-28 { animation-delay: 243ms; }
.hero .ch.ch-29 { animation-delay: 252ms; }
.hero .ch.ch-30 { animation-delay: 261ms; }
.hero .ch.ch-31 { animation-delay: 270ms; }
.hero .ch.ch-32 { animation-delay: 279ms; }
.hero .ch.ch-33 { animation-delay: 288ms; }
.hero .ch.ch-34 { animation-delay: 297ms; }
.hero .ch.ch-35 { animation-delay: 306ms; }
.hero .ch.ch-36 { animation-delay: 315ms; }
.hero .ch.ch-37 { animation-delay: 324ms; }
.hero .ch.ch-38 { animation-delay: 333ms; }
.hero .ch.ch-39 { animation-delay: 342ms; }
.hero .ch.ch-40 { animation-delay: 351ms; }
.hero .ch.ch-41 { animation-delay: 360ms; }
.hero .ch.ch-42 { animation-delay: 369ms; }
.hero .ch.ch-43 { animation-delay: 378ms; }
.hero .ch.ch-44 { animation-delay: 387ms; }
.hero .ch.ch-45 { animation-delay: 396ms; }
.hero .ch.ch-46 { animation-delay: 405ms; }
.hero .ch.ch-47 { animation-delay: 414ms; }
.hero .ch.ch-48 { animation-delay: 423ms; }
.hero .ch.ch-49 { animation-delay: 432ms; }
.hero .ch.ch-50 { animation-delay: 441ms; }
.hero .ch.ch-51 { animation-delay: 450ms; }
.hero .ch.ch-52 { animation-delay: 459ms; }
.hero .ch.ch-53 { animation-delay: 468ms; }
.hero .ch.ch-54 { animation-delay: 477ms; }
.hero .ch.ch-55 { animation-delay: 486ms; }
.hero .ch.ch-56 { animation-delay: 495ms; }
.hero .ch.ch-57 { animation-delay: 504ms; }
.hero .ch.ch-58 { animation-delay: 513ms; }
.hero .ch.ch-59 { animation-delay: 522ms; }
.hero .ch.ch-60 { animation-delay: 531ms; }
.hero .ch.ch-61 { animation-delay: 540ms; }
.hero .ch.ch-62 { animation-delay: 549ms; }
.hero .ch.ch-63 { animation-delay: 558ms; }
.hero .ch.ch-64 { animation-delay: 567ms; }
.hero .ch.ch-65 { animation-delay: 576ms; }
.hero .ch.ch-66 { animation-delay: 585ms; }
.hero .ch.ch-67 { animation-delay: 594ms; }
.hero .ch.ch-68 { animation-delay: 603ms; }
.hero .ch.ch-69 { animation-delay: 612ms; }
.hero .ch.ch-70 { animation-delay: 621ms; }
.hero .ch.ch-71 { animation-delay: 630ms; }
.hero .ch.ch-72 { animation-delay: 639ms; }
.hero .ch.ch-73 { animation-delay: 648ms; }
.hero .ch.ch-74 { animation-delay: 657ms; }
.hero .ch.ch-75 { animation-delay: 666ms; }
.hero .ch.ch-76 { animation-delay: 675ms; }
.hero .ch.ch-77 { animation-delay: 684ms; }
.hero .ch.ch-78 { animation-delay: 693ms; }
.hero .ch.ch-79 { animation-delay: 702ms; }
.hero .ch.ch-80 { animation-delay: 711ms; }
.hero .ch.ch-81 { animation-delay: 720ms; }
.hero .ch.ch-82 { animation-delay: 729ms; }
.hero .ch.ch-83 { animation-delay: 738ms; }
.hero .ch.ch-84 { animation-delay: 747ms; }
.hero .ch.ch-85 { animation-delay: 756ms; }
.hero .ch.ch-86 { animation-delay: 765ms; }
.hero .ch.ch-87 { animation-delay: 774ms; }
.hero .ch.ch-88 { animation-delay: 783ms; }
.hero .ch.ch-89 { animation-delay: 792ms; }
.hero .ch.ch-90 { animation-delay: 801ms; }
.hero .ch.ch-91 { animation-delay: 810ms; }
.hero .ch.ch-92 { animation-delay: 819ms; }
.hero .ch.ch-93 { animation-delay: 828ms; }
.hero .ch.ch-94 { animation-delay: 837ms; }
.hero .ch.ch-95 { animation-delay: 846ms; }
.hero .ch.ch-96 { animation-delay: 855ms; }
.hero .ch.ch-97 { animation-delay: 864ms; }
.hero .ch.ch-98 { animation-delay: 873ms; }
.hero .ch.ch-99 { animation-delay: 882ms; }
.hero .ch.ch-100 { animation-delay: 891ms; }
.hero .ch.ch-101 { animation-delay: 900ms; }
.hero .ch.ch-102 { animation-delay: 900ms; }
.hero .ch.ch-103 { animation-delay: 900ms; }
.hero .ch.ch-104 { animation-delay: 900ms; }
.hero .ch.ch-105 { animation-delay: 900ms; }
.hero .ch.ch-106 { animation-delay: 900ms; }
.hero .ch.ch-107 { animation-delay: 900ms; }
.hero .ch.ch-108 { animation-delay: 900ms; }
.hero .ch.ch-109 { animation-delay: 900ms; }
.hero .ch.ch-110 { animation-delay: 900ms; }
.hero .ch.ch-111 { animation-delay: 900ms; }
.hero .ch.ch-112 { animation-delay: 900ms; }
.hero .ch.ch-113 { animation-delay: 900ms; }
.hero .ch.ch-114 { animation-delay: 900ms; }
.hero .ch.ch-115 { animation-delay: 900ms; }
.hero .ch.ch-116 { animation-delay: 900ms; }
.hero .ch.ch-117 { animation-delay: 900ms; }
.hero .ch.ch-118 { animation-delay: 900ms; }
.hero .ch.ch-119 { animation-delay: 900ms; }
.hero .ch.ch-120 { animation-delay: 900ms; }
.hero .ch.ch-121 { animation-delay: 900ms; }
.hero .ch.ch-122 { animation-delay: 900ms; }
.hero .ch.ch-123 { animation-delay: 900ms; }
.hero .ch.ch-124 { animation-delay: 900ms; }
.hero .ch.ch-125 { animation-delay: 900ms; }
.hero .ch.ch-126 { animation-delay: 900ms; }
.hero .ch.ch-127 { animation-delay: 900ms; }
.hero .ch.ch-128 { animation-delay: 900ms; }
.hero .ch.ch-129 { animation-delay: 900ms; }
.hero .ch.ch-130 { animation-delay: 900ms; }
.hero .ch.ch-131 { animation-delay: 900ms; }
.hero .ch.ch-132 { animation-delay: 900ms; }
.hero .ch.ch-133 { animation-delay: 900ms; }
.hero .ch.ch-134 { animation-delay: 900ms; }
.hero .ch.ch-135 { animation-delay: 900ms; }
.hero .ch.ch-136 { animation-delay: 900ms; }
.hero .ch.ch-137 { animation-delay: 900ms; }
.hero .ch.ch-138 { animation-delay: 900ms; }
.hero .ch.ch-139 { animation-delay: 900ms; }
.hero .ch.ch-140 { animation-delay: 900ms; }
.hero .ch.ch-141 { animation-delay: 900ms; }
.hero .ch.ch-142 { animation-delay: 900ms; }
.hero .ch.ch-143 { animation-delay: 900ms; }
.hero .ch.ch-144 { animation-delay: 900ms; }
.hero .ch.ch-145 { animation-delay: 900ms; }
.hero .ch.ch-146 { animation-delay: 900ms; }
.hero .ch.ch-147 { animation-delay: 900ms; }
.hero .ch.ch-148 { animation-delay: 900ms; }
.hero .ch.ch-149 { animation-delay: 900ms; }
.hero .ch.ch-150 { animation-delay: 900ms; }
.hero .ch.ch-151 { animation-delay: 900ms; }
.hero .ch.ch-152 { animation-delay: 900ms; }
.hero .ch.ch-153 { animation-delay: 900ms; }
.hero .ch.ch-154 { animation-delay: 900ms; }
.hero .ch.ch-155 { animation-delay: 900ms; }
.hero .ch.ch-156 { animation-delay: 900ms; }
.hero .ch.ch-157 { animation-delay: 900ms; }
.hero .ch.ch-158 { animation-delay: 900ms; }
.hero .ch.ch-159 { animation-delay: 900ms; }
.hero .ch.ch-160 { animation-delay: 900ms; }
/* Los valores del original (Revolution Slider): cada letra llega desde
   x:-100px, y:80px, girada 360° sobre su eje, al 30 % de tamaño y transparente.
   El original tarda ~5 s por letra con una cada 0,5 s; aquí 2,2 s por letra y una
   cada 0,09 s, que se ve igual de rotundo sin eternizar la entrada. */
@keyframes chIn {
  from { opacity: 0; transform: translate(-100px, 80px) rotateX(360deg) scale(.3); }
  55% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
/* El espaciado entre letras (letter-spacing) del titular se sigue aplicando
   entre las cajas de cada letra, así que no hace falta añadir márgenes: */
.hero__kicker .ch, .hero h1 .ch { margin-right: 0; }

/* ==========================================================================
   Página de Equipos (/nuestros-equipos/) — calcada del original.
   En el original cada grupo es un <h2> con el nombre del grupo y, debajo, un
   recuadro blanco con borde de 1 px donde el texto va a la izquierda (los
   subapartados y, debajo, la relación de equipos, uno por línea) y la foto del
   grupo a la derecha (`alignright`), a su tamaño original.
   Medido en la página original en vivo (1366 px) y usado aquí tal cual:
     · h2 del grupo: Montserrat 400, 36 px, mayúsculas, #3c3950, 1,8 px de
       interletraje, alto de línea 53 px y margen 0 0 6,25 px, a la izquierda;
     · recuadro: fondo blanco, borde de 1 px (en el original mide #b6c6c9; aquí
       se usa el gris de borde del sitio, #dfe5e8) y 50 px de relleno;
     · h5 del subapartado: Montserrat 700, 19 px, mayúsculas, #3c3950, 0,95 px
       de interletraje, alto de línea 30 px y 9,5 px por debajo;
     · equipos: 16 px, 400, #5f727f, alto de línea 25 px y 17,6 px entre líneas;
     · fotos: a la derecha, con 25,6 px de separación al texto y su tamaño del
       original (409×341 la de Ecosondas, 407×305 la de Sísmica, 226×361 + 370×175
       las dos de Posicionamiento…).
   El original montaba cada grupo en un acordeón de un solo panel: encima del
   recuadro había una barra blanca de 50 px con un botón «+». Aquí se ha omitido
   (el recuadro se ve siempre completo y sin un mando que no haría nada).
   En pantallas estrechas (≤820 px) las dos columnas se apilan: primero el texto
   y debajo la foto.
   ========================================================================== */
.section--equipos { background: var(--white); padding: 49px 0 64px; }
/* La entradilla del original va a la izquierda y a todo el ancho: hay que ganar
   a `.page-internal .prose` (900 px centrados) y a `.page-internal .prose > p`. */
.page-internal .section--equipos .eq-intro,
.page-internal .section--equipos .eq-intro > p { max-width: none; text-align: left; }
.eq-intro > p:last-child { margin-bottom: 0; }

/* Tira de fotos del resumen breve al final de Servicios */
.eq-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.eq-strip__item { margin: 0; }
.eq-strip__item img {
  display: block;
  width: 100%;
  height: 170px;
  object-fit: cover;
  border-radius: var(--radius);
}
@media (max-width: 820px) {
  .eq-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .eq-strip__item img { height: 130px; }
}

/* un grupo: el <h2> con su nombre y, debajo, el recuadro */
.page-internal .section--equipos .eq-group { margin: 0 0 22px; text-align: left; }
.page-internal .section--equipos .eq-group:last-child { margin-bottom: 0; }
.page-internal .section--equipos .eq-group__title {
  margin: 0 0 6.25px;
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 400;
  line-height: 53px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #3c3950;
}
.eq-box {
  display: flow-root;                    /* contiene la foto, que va flotando */
  background: var(--white);
  border: 1px solid #b6c6c9;             /* el gris del recuadro de la original */
  padding: 50px;
}
/* la foto del grupo flota a la derecha, como el `alignright` del original */
.eq-box__media {
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  max-width: 62%;
  margin: 0 0 26px 26px;                 /* 25,6 px de aire al texto, como el original */
}
.eq-box__media--pair {                   /* Posicionamiento: sus dos fotos, juntas */
  flex-direction: row-reverse;
  align-items: flex-start;
}
.eq-fig { margin: 0; min-width: 0; }
.eq-fig img { display: block; max-width: 100%; height: auto; }
.eq-box__sub {
  margin: 17.6px 0 9.5px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  line-height: 30px;
  letter-spacing: .95px;
  text-transform: uppercase;
  color: #3c3950;
}
.eq-box__sub:first-child { margin-top: 0; }
/* La lista de equipos: una línea por equipo y sin marcador, como el original
   (allí eran párrafos con el texto en negrita; aquí la misma lista sin la
   ristra de negritas, con el alto de línea y el aire medidos). */
.eq-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  color: var(--slate);
}
.eq-list > li { margin: 0 0 17.6px; }
.eq-list > li:last-child { margin-bottom: 0; }

@media (max-width: 1023px) {
  .eq-box { padding: 36px 30px; }
  .eq-box__media { margin: 0 0 22px 22px; }
}
@media (max-width: 820px) {
  .section--equipos { padding: 34px 0 48px; }
  /* apilado: primero el texto y debajo la foto (el flotante deja de flotar) */
  .eq-box { display: flex; flex-direction: column; padding: 30px 22px; }
  .eq-box__text { order: 1; }
  .eq-box__media {
    order: 2;
    float: none;
    max-width: 100%;
    gap: 14px;
    align-items: center;
    margin: 26px 0 0;
  }
  .eq-box__media--pair { flex-direction: column; align-items: center; }
  .page-internal .section--equipos .eq-group__title {
    margin-bottom: 5px;
    font-size: 26px;
    line-height: 36px;
    letter-spacing: 1.2px;
  }
}

/* ==========================================================================
   Bloque «Nuestros Equipos» del final de /nuestros-servicios/ (2026): doce
   fichas —la foto y el nombre de cada grupo de /nuestros-equipos/, con enlace a
   su apartado— y el botón a la página, que ya no está en el menú principal.
   Se monta con los mimbres del resto del sitio: sección normal (fondo #f0f3f2,
   72 px de relleno), titular de sección, entradilla centrada y botón `.btn`.
   ========================================================================== */
/* El titular del bloque va del **navy de marca** (`--navy`), como los rótulos
   `h5` de los dos recuadros de la misma página: `.page-internal .section h2`
   lo pintaba en el gris del sitio y el cliente los quiere los tres iguales.
   Sólo el color: tamaño, mayúsculas e interletraje no se tocan. */
.page-internal .section--eq-resumen .section__title { color: var(--navy); }
.eq-resumen__intro { margin-bottom: 38px; }
.eq-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.eq-tile { margin: 0; }
.eq-tile__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 16px 14px 18px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.eq-tile__link:hover,
.eq-tile__link:focus-visible {
  border-color: var(--navy);
  box-shadow: var(--shadow);
  text-decoration: none;
}
/* caja fija: las fotos entran enteras (tienen proporciones muy distintas) */
.eq-tile__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 132px;
  margin-bottom: 14px;
}
.eq-tile__media img { max-width: 100%; max-height: 132px; width: auto; height: auto; }
.eq-tile__name {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #3c3950;
  text-align: center;
}
.eq-resumen__cta { margin: 34px 0 0; text-align: center; }
@media (max-width: 1023px) {
  .eq-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
}
@media (max-width: 767px) {
  .eq-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .eq-tile__media { height: 104px; margin-bottom: 12px; }
  .eq-tile__media img { max-height: 104px; }
  .eq-resumen__cta { margin-top: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  html.respect-motion .hero .ch { animation: none; }
}



/* ==========================================================================
   /proyectos-i-d-i/ · sección «Laboratorio» (contenido nuevo del cliente 2026)
   Cierra la página: el reclamo destacado, la introducción, los tres bloques de
   análisis (físico-químicos, biológicos y microbiológicos), la galería de las
   cinco fotos del laboratorio y el cierre con el botón a /contacto/.
   Se monta con los mimbres del resto del sitio: sección normal (fondo blanco,
   72 px de relleno), titular de sección, prosa centrada y `.btn`, más una
   rejilla de tarjetas y otra de fotos con los tokens de siempre
   (navy #000066, slate #5f727f, --bg #f0f3f2, --line #dfe5e8).
   ========================================================================== */

/* reclamo: bloque destacado delante de la introducción */
.labo__reclamo {
  max-width: 900px;
  margin: 0 auto 28px;
  padding: 24px 30px;
  background: var(--bg);
  border-left: 3px solid var(--navy);
  border-radius: var(--radius);
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--navy);
}

/* los tres bloques de análisis en tres columnas (2 en tablet, 1 en móvil) */
.labo__bloques {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  margin: 30px 0 0;
}
.labo-bloque {
  padding: 24px 24px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: left;
}
.labo-bloque h3 {
  margin: 0 0 14px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
}
.labo-bloque p { margin: 0; font-size: 15.5px; }
/* Las listas de los bloques biológico y microbiológico llevan el mismo punto
   navy del resto del sitio (`.list-check`). */
.labo-bloque__lista { margin: 0; padding: 0; list-style: none; }
.labo-bloque__lista li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 8px;
  font-size: 15.5px;
}
.labo-bloque__lista li:last-child { margin-bottom: 0; }
.labo-bloque__lista li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--navy);
  border-radius: 50%;
}

/* galería de las cinco fotos del laboratorio: tres columnas en escritorio,
   dos en tablet y una en móvil. La caja va a proporción fija (4:3) y la foto
   entra entera con `object-fit: contain`: las cinco tienen proporciones muy
   distintas (desde 214x253 hasta 2000x900) y así no se recorta ninguna ni se
   amplía la más pequeña. */
.labo-galeria {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.labo-galeria__item {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.labo-galeria__item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* cierre: la invitación a contactar y el botón */
.labo__cierre { max-width: 900px; margin: 36px auto 0; }
.labo__cierre > p { font-size: 16px; }
.labo__cta { margin: 24px 0 0; }

@media (max-width: 1023px) {          /* tablet: dos columnas */
  .labo__bloques { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .labo-galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 639px) {           /* móvil: una columna */
  .labo__reclamo { padding: 20px 22px; font-size: 17px; }
  .labo__bloques,
  .labo-galeria { grid-template-columns: 1fr; }
  .labo-bloque { padding: 20px 18px; }
  .labo-galeria { margin-top: 28px; }
}


/* Cabeceras de las páginas de servicio: la capa oscura sube porque sus fotos
   (batimetrías, mapas, registros) son claras y el rótulo no se leía. */
.hero--photo.hero--fuerte::after {
  background: linear-gradient(180deg, rgba(0, 0, 60, .74) 0%, rgba(0, 8, 55, .62) 100%);
}
.hero--photo.hero--fuerte .hero__kicker { color: #dde3fb; }

/* ========================================================================== */
/* Revisión de los 12 puntos (2026): carrusel de servicios de la portada,      */
/* mosaico de servicios, páginas de servicio y mapa de Proyectos.              */
/* Todas las reglas móviles van DESPUÉS de las de escritorio (misma            */
/* especificidad: gana la última).                                             */
/* ========================================================================== */

/* --- Portada · carrusel de los seis servicios ----------------------------- */
/* El recorte va en un envoltorio SIN relleno: si el `overflow: hidden` está en
   el contenedor con `padding`, la ventana de recorte incluye el relleno y las
   tarjetas vecinas se asoman por los lados (medido). */
.svc-slider { position: relative; }
/* El carrusel se mueve con SCROLL NATIVO del contenedor (`scroll-snap`), no
   transformando la pista con `style` en línea: la CSP del sitio (`style-src
   'self'`, en `_headers`) es lo que ya tumbó el patrón del `transform` en línea.
   Así el dedo en el móvil funciona de serie (con su inercia) y el ratón lo
   arrastra el JS moviendo `scrollLeft`. */
.svc-slider__viewport {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 46px;
  cursor: grab;
}
.svc-slider__viewport::-webkit-scrollbar { display: none; }
.svc-slider__viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
  /* Con el ajuste obligatorio activo, el navegador devuelve el scroll a la
     diapositiva más cercana en cuanto se suelta `scrollLeft`, así que el
     arrastre del ratón no avanzaba (medido). Mientras dura el arrastre se
     desactiva; al soltar vuelve y el carrusel encaja en su diapositiva. */
  scroll-snap-type: none;
}
.svc-slider__track {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* ==========================================================================
   Carrusel de servicios de la portada (61ª revisión): el cliente quiere ver a
   los lados las diapositivas contiguas, atenuadas, y el carrusel un poco más
   ancho que el contenedor de la página.

   · La tarjeta ocupa `--svc-card` (86 % en móvil, 80 % en tableta, 74 % en
     escritorio) en vez del 100 %: así asoma una franja de la anterior y de la
     siguiente.
   · La pista lleva a los lados el margen que sobra (`(100% - --svc-card) / 2`),
     de modo que la tarjeta activa queda centrada **con el mismo cálculo de
     desplazamiento que ya hacía el JS** (`i * ancho de tarjeta`), sin tocarlo.
   · `scroll-snap-align: center` sigue centrando la activa.
   · Un degradado de transparencia (`mask-image`) difumina los extremos.
   · El carrusel escapa del contenedor: `width: min(1560px, 96vw)`, centrado.
   Todo es CSS: nada de estilos en línea (la CSP del sitio no los permite).
   ========================================================================== */
.svc-slider {
  width: min(1560px, 96vw);
  margin-left: calc(50% - min(780px, 48vw));
  --svc-card: 86%;
  --svc-fade: 3%;
}
@media (min-width: 700px) {
  .svc-slider { --svc-card: 80%; --svc-fade: 5%; }
}
@media (min-width: 1024px) {
  .svc-slider { --svc-card: 74%; --svc-fade: 6%; }
}
.svc-slider__viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--svc-fade),
                                      #000 calc(100% - var(--svc-fade)), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 var(--svc-fade),
                              #000 calc(100% - var(--svc-fade)), transparent 100%);
}
/* La pista lleva un SEPARADOR a cada lado (pseudo-elementos, que son items flex):
   con él, la primera y la última tarjeta también pueden quedar centradas y se
   evita el hueco muerto al final. El ancho del separador es lo que sobra en la
   vista, así que el desplazamiento de la tarjeta `i` sigue siendo `i × ancho`,
   que es justo lo que ya calculaba el JS: no hay que tocarlo.
   (Con `padding` en la pista NO vale: el ancho de la tarjeta, que es un
   porcentaje, se calcularía sobre lo que queda —74 % se quedaba en 55 %, medido—.) */
.svc-slider__track { padding: 0; }
.svc-slider__track::before,
.svc-slider__track::after {
  content: "";
  flex: 0 0 calc((100% - var(--svc-card)) / 2);
  align-self: stretch;
}
.svc-card {
  flex: 0 0 var(--svc-card);
  scroll-snap-align: center;
  min-width: 0;
  box-sizing: border-box;
  padding: 0 6px;
}
.svc-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.svc-card__link:hover,
.svc-card__link:focus-visible { box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.svc-card__media {
  position: relative;
  display: block;
  padding-top: 46%;
  background: var(--navy);
  overflow: hidden;
}
.svc-card__media .figure { margin: 0; }
.svc-card__media .figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
}
.svc-card__body { display: block; padding: 22px 26px 26px; }
.svc-card__name {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--navy);
}
.svc-card__text { display: block; font-size: 15.5px; line-height: 1.65; color: var(--slate); }
.svc-card__more {
  display: block;
  margin-top: 16px;
  font-family: var(--font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
}
.svc-slider__arrow {
  position: absolute;
  top: 34%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(60, 57, 80, .82);
  cursor: pointer;
  transition: background .2s ease;
}
.svc-slider__arrow:hover { background: rgba(0, 0, 102, .95); }
.svc-slider__arrow--prev { left: 0; }
.svc-slider__arrow--next { right: 0; }
.svc-slider__arrow svg {
  width: 24px;
  height: 24px;
  stroke: var(--white);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
}
.svc-slider__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}
.svc-slider__dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 1px solid var(--navy);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}
.svc-slider__dot.is-active { background: var(--navy); transform: scale(1.15); }

/* --- Página de Servicios · mosaico de los seis servicios ------------------ */
.svc-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
}
.svc-tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; }
.svc-tile__link { position: absolute; inset: 0; display: block; text-decoration: none; }
.svc-tile__link .figure { margin: 0; width: 100%; height: 100%; }
/* La imagen RELLENA la tesela (100% de alto) en vez de calcular su alto con
   `aspect-ratio`: con la proporción en la imagen, el redondeo de la fila dejaba
   una junta de 1-2 px entre Geofísica y Medio ambiente (medido con el zoom del
   navegador del cliente). La proporción vive en `.svc-tile`. */
.svc-tile__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  transition: transform .6s ease;
}
.svc-tile__name {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 14px 14px;
  background: linear-gradient(to top, rgba(0, 0, 102, .88), rgba(0, 0, 102, 0));
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-align: center;
  text-transform: uppercase;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .3s ease, transform .3s ease;
}
.svc-tile__link:hover img,
.svc-tile__link:focus-visible img { transform: scale(1.06); }
.svc-tile__link:hover .svc-tile__name,
.svc-tile__link:focus-visible .svc-tile__name { opacity: 1; transform: none; }

/* --- Páginas de servicio -------------------------------------------------- */
.section--servicio .section__title { text-wrap: balance; }
/* En las páginas internas el texto va centrado (diseño del tema). En una lista
   eso deja la viñeta pegada al borde izquierdo y el texto a 400 px: el bloque se
   centra y el TEXTO de la lista se alinea a la izquierda, con la viñeta al lado. */
.section--servicio .list-check {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}
.section--servicio .list-check li { padding-left: 24px; }
.section--servicio .list-check li::before { left: 0; }
.section--servicio-intro .prose { max-width: 900px; margin: 0 auto; }

/* ==========================================================================
   Pie de foto (58ª revisión): en el Laboratorio, debajo de cada imagen, qué es.
   La rejilla no se toca: la imagen sigue a 4:3 y del mismo tamaño, y el pie va
   debajo en el gris del sitio. Con el pie, la imagen NO puede estirarse al alto
   de la figura (`height: 100%` en la regla de la rejilla): se le devuelve `auto`
   para que el pie quede justo debajo.
   ========================================================================== */
/* La figura con pie va en columna (imagen arriba, pie debajo) y NO se estira: si la
   figura se estira al alto de la fila, la imagen con `height: auto` se desborda y el
   pie se solapa con la fila siguiente (medido y corregido). */
.figure-grid--servicio .figure--pie { display: flex; flex-direction: column; align-self: flex-start; }
.figure-grid--servicio .figure--pie img { height: auto; }
.figure-grid--servicio .figure--pie figcaption {
  margin-top: 10px; color: var(--slate); font-size: 13.5px; line-height: 1.5; text-align: center;
}

/* ==========================================================================
   Página de Proyectos (54ª revisión): la entradilla —la frase que va debajo del
   hero— empieza a la izquierda, ocupa todo el ancho y deja aire antes del
   listado. Hay que ganar a `.page-internal .prose` (900 px centrados) y a
   `.page-internal .prose > p` (todos los párrafos centrados): mismo criterio que
   `.eq-intro` en «Nuestros equipos».
   ========================================================================== */
.page-internal .section--proyectos .proy-intro,
.page-internal .section--proyectos .proy-intro > p { max-width: none; text-align: left; }
.page-internal .section--proyectos .proy-intro { margin: 0 0 38px; }
.servicio__rotulo {
  margin: 26px 0 12px;
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--navy);
}
/* Foto sin recorte 4:3 (proporción real) y, con `--cap-N`, como mucho a su
   tamaño real: así una foto pequeña del cliente se ve pequeña y nítida en vez de
   ampliada y borrosa. */
.figure-grid--servicio .figure.figure--natural { flex: 1 1 auto; }
/* `.figure.figure--natural img` (una clase más) para ganar a la regla de la
   rejilla, que recorta a 4:3: con la misma especificidad se aplicaba la de la
   rejilla y el magnetómetro salía recortado y estirado (medido: 1,33 en vez de
   3,59 de proporción). */
.figure-grid--servicio .figure.figure--natural img { aspect-ratio: auto; height: auto; object-fit: contain; }
/* `.figure.figure--cap-N` (una clase más) para GANAR a `flex: 1 1 320px` de la
   rejilla: con la misma especificidad ganaba la regla de la rejilla y la foto
   pequeña se estiraba hasta 565 px (medido). */
.figure-grid--servicio .figure.figure--cap-320 { max-width: 320px; flex: 0 0 auto; }
.figure-grid--servicio .figure.figure--cap-384 { max-width: 384px; flex: 0 0 auto; }
.figure-grid--servicio .figure.figure--cap-448 { max-width: 448px; flex: 0 0 auto; }
.figure-grid--servicio .figure.figure--cap-512 { max-width: 512px; flex: 0 0 auto; }
.figure-grid--servicio .figure.figure--cap-576 { max-width: 576px; flex: 0 0 auto; }
.figure-grid--servicio .figure.figure--cap-640 { max-width: 640px; flex: 0 0 auto; }

/* Rejilla de fotos de un apartado: con `auto-fit` una sola foto se quedaba
   pegada a la izquierda con 272 px vacíos a la derecha (medido). En flex, con
   `justify-content: center` y un tope de ancho, una foto va centrada, dos o tres
   llenan la fila como antes y ninguna se estira de más. */
.figure-grid--servicio {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  justify-content: center;
  margin: 0 0 30px;
}
.figure-grid--servicio .figure { flex: 1 1 320px; max-width: 565px; margin: 0; }
.figure-grid--servicio .figure img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.section--cta-servicio .cta__texto { font-size: 20px; line-height: 1.6; }
.section--cta-servicio .cta__acciones { margin: 22px 0 0; }

/* --- Mapa de Geomytsa (Sobre Geomytsa y Proyectos) ------------------------ */
.figure--mapa img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.figure--mapa figcaption { text-align: center; }

/* --- Móvil y tableta ------------------------------------------------------ */
@media (max-width: 1023px) {
  .svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* sin ratón (tableta y móvil) el nombre del servicio se ve siempre */
  .svc-tile__name { opacity: 1; transform: none; }
}
@media (max-width: 768px) {
  .svc-slider__viewport { margin: 0 8px; }
  .svc-slider__arrow { display: none; }
  .svc-card__media { padding-top: 56%; }
  .svc-card__body { padding: 18px 20px 22px; }
  .svc-card__name { font-size: 19px; }
  .figure-grid--servicio .figure { flex-basis: 100%; max-width: 100%; }
}
@media (max-width: 560px) {
  .svc-tiles { grid-template-columns: 1fr; }
  .svc-tile__name { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-slider__track { transition: none; }
  .svc-tile__link img { transition: none; }
}

/* Rótulo de cabecera largo (el eslogan de Laboratorio, 95 caracteres): con el
   tamaño normal se partía en dos líneas y cortaba la última palabra. Se reduce
   proporcionalmente y, en escritorio, no se deja partir. */
.hero__kicker--larga {
  font-size: clamp(11px, 1.02vw, 15px);
  letter-spacing: clamp(.7px, .16vw, 4px);
}
@media (min-width: 1024px) {
  .hero__kicker--larga { white-space: nowrap; }
}