/* ==========================================================================
   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; }

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; }
.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); }

/* -------------------------------------------------------------------- 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); }
.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; }

/* -------------------------------------------------------------- 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; }
.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; }

/* 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; }
  .site-header__inner { min-height: 72px; }
  .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: "› "; }
  .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; }
  .topbar__right { 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); }

.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; }
.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 */
  .cards--2 > .card--proyecto:last-child {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: stretch;
  }
  .cards--2 > .card--proyecto:last-child .card__media {
    flex: 0 0 46%;
    width: 46%;
    height: auto;
  }
  .cards--2 > .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 > .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; }
@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)); }
.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; }
  .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: 55 ms por letra y 0,68 s de recorrido, en lugar de los
   0,5 s por letra y 5 s del original, que era muy lento para una web real).
   ========================================================================== */
.hero--photo .hero__kicker,
.hero--photo h1 { perspective: 700px; }
.hero .ch {
  display: inline-block;
  animation: chIn .68s cubic-bezier(.22, .75, .3, 1) both;
  animation-delay: var(--d, 0ms);   /* tiempo ya calculado en el HTML: sin calc, más compatible */
  will-change: transform, opacity;
}
@keyframes chIn {
  from { opacity: 0; transform: translate(-40px, 30px) rotateX(360deg) scale(.35); }
  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`.
   ========================================================================== */
.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; }
}