/* =========================================================================
   ERGOSFERA — Hoja de estilos única
   Dirección visual: Anexo A. Sans dominante, color como acento,
   formas rectas, sin sombras, sin degradados, sin animación de scroll.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. VARIABLES
   ------------------------------------------------------------------------- */
:root {
  /* Paleta de marca */
  --ink:        #1C2B39;
  --deep:       #22485D;
  --teal:       #5AA3B5;
  --teal-dark:  #3E7E92;
  --soft:       #A9CDD6;
  --paper:      #F4F7F8;
  --line:       #D9E3E7;
  --grey:       #63717B;
  --white:      #FFFFFF;

  /* Derivados de apoyo (ver NOTAS-DECISIONES.md)
     --claro: texto de parrafo sobre fondo oscuro, mas brillante que --soft
     --linea-oscura: separadores sobre fondo --ink */
  --claro:        #DCE7EB;
  --teal-texto:   #37738A;   /* celeste oscurecido: unica variante que pasa AA como texto sobre fondos claros */
  --linea-oscura: rgba(169, 205, 214, 0.24);

  /* Escala de espaciado (base 8px) */
  --e1: 8px;
  --e2: 16px;
  --e3: 24px;
  --e4: 32px;
  --e5: 48px;
  --e6: 64px;
  --e7: 96px;
  --e8: 128px;

  /* Tipografia */
  --sans:  "Instrument Sans", "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  /* Estructura */
  --ancho: 1100px;
  --margen-lateral: var(--e3);
  /* Medida unica de la columna de lectura: parrafos, listas, recuadros y
     bloques normativos comparten borde derecho (ver NOTAS-DECISIONES 12.3).

     Se mantiene en 68ch, que es lo que dice el Anexo A 3.1 al pie de la letra.
     Una pasada anterior lo bajo a 46ch para que la linea rindiera 68 caracteres
     reales en vez de 83, porque ch es el ancho del glifo "0" (0,666em aqui) y no
     el de un caracter promedio (0,452em). Tipograficamente era correcto, pero
     dejaba el texto ocupando la mitad del contenedor de 1100px y la pagina se
     veia pegada a la izquierda con un vacio a la derecha. Con este contenedor
     mandan los 68ch. Ver NOTAS-DECISIONES 15. */
  --medida: 68ch;
  /* Anexo A 3.3: "preferir 0px en la mayoria de elementos". Los paneles van a
     canto vivo; solo los controles que se tocan conservan 2px. */
  --radio: 0px;
  --radio-control: 2px;
  --transicion: 150ms ease;
}

/* -------------------------------------------------------------------------
   2. REINICIO
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

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

body, h1, h2, h3, h4, p, ul, ol, li, figure, blockquote, dl, dd {
  margin: 0;
  padding: 0;
}

ul, ol { list-style: none; }

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

button, input, textarea, select { font: inherit; color: inherit; }

/* -------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
}

h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.01em; }
h4 { font-size: 19px; letter-spacing: -0.01em; }

/* Separacion de encabezado a texto. Antes solo existia dentro de .bloque, asi
   que en la portada los H2 se pegaban al primer parrafo. Una sola regla para
   todo el sitio. */
h2 { margin-bottom: var(--e3); }
h3 { margin-bottom: var(--e2); }

/* Reparto de lineas: evita palabras sueltas al final de un titular o parrafo.
   Es progresivo; donde no exista, el texto se corta como siempre. */
h1, h2, h3, h4 { text-wrap: balance; }
p, li, dd, figcaption { text-wrap: pretty; }

p { max-width: var(--medida); }
p + p { margin-top: var(--e3); }

strong, b { font-weight: 600; }

a { color: var(--deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ink); }

/* Foco visible y consistente en todo el sitio */
:focus-visible {
  outline: 3px solid var(--teal-dark);
  outline-offset: 2px;
}
.bloque-oscuro :focus-visible,
.hero :focus-visible,
.cabecera :focus-visible,
.cabecera-pagina :focus-visible,
.pie :focus-visible {
  outline-color: var(--soft);
}

/* Enlace de salto para lectores de pantalla y teclado */
.salto {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--ink);
  padding: var(--e2) var(--e3);
  z-index: 200;
  font-weight: 600;
}
.salto:focus {
  left: var(--e2);
  top: var(--e2);
}

/* -------------------------------------------------------------------------
   4. ESTRUCTURA
   ------------------------------------------------------------------------- */
.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.seccion { padding-block: var(--e6); }

.bloque-oscuro {
  background: var(--ink);
  color: var(--claro);
}
.bloque-oscuro h1,
.bloque-oscuro h2,
.bloque-oscuro h3,
.bloque-oscuro h4 { color: var(--white); }

.bloque-papel { background: var(--paper); }

.etiqueta {
  display: block;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-texto);
  line-height: 1.4;
  margin-bottom: var(--e2);
}
/* Sobre cualquier fondo petroleo la etiqueta va en --soft:
   el --teal-texto esta calculado para fondos claros y ahi no alcanza contraste AA. */
.bloque-oscuro .etiqueta,
.cabecera-pagina .etiqueta,
.hero .etiqueta,
.pie .etiqueta { color: var(--soft); }

.texto-secundario {
  font-size: 16px;
  color: var(--grey);
}
.bloque-oscuro .texto-secundario { color: var(--soft); }

/* -------------------------------------------------------------------------
   5. CABECERA Y NAVEGACION
   ------------------------------------------------------------------------- */
.cabecera {
  background: var(--ink);
  color: var(--claro);
  border-bottom: 1px solid var(--linea-oscura);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e2);
  min-height: 72px;
  padding-block: var(--e2);
  flex-wrap: wrap;
}

.marca { display: inline-flex; align-items: center; flex: 0 0 auto; }
/* El ancho del logo sube por tramos: en celular tiene que convivir con el boton
   de menu en la misma linea, y en escritorio puede tener mas presencia.
   En celular el ancho se limita solo: pide 176px, pero si la pantalla es tan
   estrecha que el boton "Menu" no cabria al lado, se encoge lo necesario.
   Asi la cabecera nunca se parte en dos lineas. Los 186px que se restan son el
   espacio que ocupan los margenes, el boton, la separacion y la barra de
   desplazamiento del navegador. */
.marca img { width: min(176px, calc(100vw - 186px)); height: auto; }

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--linea-oscura);
  color: var(--white);
  padding: 10px var(--e2);
  border-radius: var(--radio-control);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transicion);
}
.menu-boton:hover { border-color: var(--soft); }
.menu-boton__barras {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: currentColor;
  position: relative;
}
.menu-boton__barras::before,
.menu-boton__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after  { top: 6px; }

.nav { display: none; width: 100%; }
.nav.esta-abierto { display: block; }

.nav__lista {
  display: flex;
  flex-direction: column;
  padding-bottom: var(--e3);
}

.nav__enlace,
.nav__desplegable-boton {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--linea-oscura);
  color: var(--claro);
  text-decoration: none;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 0;
  cursor: pointer;
  transition: var(--transicion);
}
.nav__enlace:hover,
.nav__desplegable-boton:hover { color: var(--white); }
.nav__enlace[aria-current="page"] { color: var(--white); font-weight: 600; }

.nav__desplegable-boton::after {
  content: "";
  display: inline-block;
  margin-left: var(--e1);
  border: 5px solid transparent;
  border-top-color: currentColor;
  transform: translateY(3px);
  transition: var(--transicion);
}
.nav__desplegable-boton[aria-expanded="true"]::after { transform: translateY(-2px) rotate(180deg); }

.nav__submenu { display: none; padding: 0 0 var(--e2) var(--e2); }
.nav__submenu.esta-abierto { display: block; }
.nav__submenu a {
  display: block;
  color: var(--soft);
  text-decoration: none;
  font-size: 16px;
  padding: 10px 0;
  transition: var(--transicion);
}
.nav__submenu a:hover { color: var(--white); }

.nav__accion { margin-top: var(--e3); }

/* -------------------------------------------------------------------------
   6. BOTONES
   ------------------------------------------------------------------------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e1);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  padding: 16px 32px;
  border: 1px solid transparent;
  border-radius: var(--radio-control);
  cursor: pointer;
  transition: var(--transicion);
  text-align: center;
}

.boton--primario {
  background: var(--ink);
  color: var(--white);
  border-color: var(--ink);
}
.boton--primario:hover { background: var(--deep); border-color: var(--deep); color: var(--white); }

.boton--secundario {
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}
.boton--secundario:hover { background: var(--ink); color: var(--white); }

/* Variantes sobre fondo oscuro */
.boton--claro {
  background: var(--white);
  color: var(--ink);
  border-color: var(--white);
}
.boton--claro:hover { background: var(--soft); border-color: var(--soft); color: var(--ink); }

.boton--contorno-claro {
  background: transparent;
  color: var(--white);
  border-color: var(--soft);
}
.boton--contorno-claro:hover { background: var(--soft); color: var(--ink); border-color: var(--soft); }

.boton--compacto { padding: 12px 20px; }

.grupo-botones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  margin-top: var(--e5);
}
/* En celular los dos botones ocupan el mismo ancho: la pareja se lee como un
   bloque y no como dos piezas de tamanos distintos. */
@media (max-width: 599px) {
  .grupo-botones > .boton { flex: 1 1 100%; }
}

.enlace-flecha {
  display: inline-block;
  font-weight: 600;
  font-size: 16px;
  color: var(--teal-texto);
  text-decoration: none;
  transition: var(--transicion);
}
.enlace-flecha:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 4px; }

/* -------------------------------------------------------------------------
   7. PORTADA — HERO
   ------------------------------------------------------------------------- */
.hero {
  background: var(--ink);
  color: var(--claro);
  padding-block: var(--e6);
  border-bottom: 1px solid var(--linea-oscura);
}
.hero h1 {
  font-family: var(--serif);          /* Aparicion 1 de 2 de la serif */
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  font-size: 40px;
  color: var(--white);
  max-width: 17ch;
}
/* Entrada y credencial comparten medida: la regla fina y los dos textos
   terminan en la misma vertical, en vez de tres bordes derechos distintos. */
.hero__entrada {
  font-size: 19px;
  color: var(--claro);
  margin-top: var(--e3);
  max-width: 54ch;
}
/* La credencial no se limita en ancho: asi la regla fina que la separa recorre
   toda la columna del hero, como el filete de una portada de informe, y en
   escritorio la licencia cabe en una sola linea. */
.hero__credencial {
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--linea-oscura);
  font-size: 16px;
  color: var(--soft);
}

/* -------------------------------------------------------------------------
   8. PORTADA — CONTEXTO Y DATO
   ------------------------------------------------------------------------- */
.contexto__rejilla {
  display: grid;
  gap: var(--e5);
}

.dato {
  border-left: 3px solid var(--teal);
  padding-left: var(--e3);
}
.dato__cifra {
  font-family: var(--serif);          /* Aparicion 2 de 2 de la serif */
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: block;
}
.dato__glosa {
  display: block;
  margin-top: var(--e2);
  font-size: 16px;
  color: var(--grey);
  max-width: 34ch;
}

/* -------------------------------------------------------------------------
   9. PORTADA — SERVICIOS
   ------------------------------------------------------------------------- */
.lista-servicios {
  margin-top: var(--e5);
  border-top: 1px solid var(--line);
}

.servicio-fila {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 var(--e2);
  align-items: start;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: transform var(--transicion);
}
.servicio-fila::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--teal);
  opacity: 0;
  transition: opacity var(--transicion);
}
.servicio-fila:hover,
.servicio-fila:focus-visible { transform: translateX(4px); }
.servicio-fila:hover::before,
.servicio-fila:focus-visible::before { opacity: 1; }

.servicio-num {
  font-size: 20px;
  font-weight: 600;
  color: var(--teal-texto);
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
.servicio-fila h3 { margin-bottom: var(--e1); }
.servicio-fila p { color: var(--grey); font-size: 16px; max-width: 60ch; }
.servicio-fila > .enlace-flecha { grid-column: 2; margin-top: var(--e2); }

.nota-pie-seccion {
  margin-top: var(--e4);
  font-size: 16px;
  color: var(--grey);
  max-width: var(--medida);
}

/* -------------------------------------------------------------------------
   10. PORTADA — METODOLOGIA
   ------------------------------------------------------------------------- */
.metodos {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-top: var(--e5);
}
.metodos li {
  border: 1px solid var(--linea-oscura);
  border-radius: var(--radio);
  padding: 10px 14px;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--soft);
  line-height: 1.4;
}

/* -------------------------------------------------------------------------
   11. PORTADA — PLATAFORMA
   ------------------------------------------------------------------------- */
.columnas-3 {
  display: grid;
  gap: var(--e5);
  margin-top: var(--e5);
}
.columnas-3 h3 { margin-bottom: var(--e1); font-size: 19px; }   /* mismo escalon que h4 */
.columnas-3 p { font-size: 16px; color: var(--grey); }

/* -------------------------------------------------------------------------
   12. FIGURA / MARCADOR DE FOTOGRAFIA
   ------------------------------------------------------------------------- */
.figura { margin-top: var(--e5); }
.figura__marcador {
  aspect-ratio: 16 / 9;
  background: #E7EDF0;
  border: 1px solid var(--line);
  border-radius: 2px;      /* fijado: los marcadores de foto quedan como estaban */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e3);
}
.figura__marcador span {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--deep);
  text-align: center;
  line-height: 1.6;
  max-width: 36ch;
}
.figura figcaption {
  margin-top: var(--e2);
  font-size: 16px;
  color: var(--grey);
  max-width: var(--medida);
}

/* -------------------------------------------------------------------------
   13. PAGINAS DE SERVICIO
   ------------------------------------------------------------------------- */
.cabecera-pagina {
  background: var(--ink);
  color: var(--claro);
  padding-block: var(--e5) var(--e6);
  border-bottom: 1px solid var(--linea-oscura);
}
.cabecera-pagina h1 {
  color: var(--white);
  max-width: 20ch;
  margin-top: var(--e4);
}
.cabecera-pagina__entrada {
  margin-top: var(--e3);
  font-size: 19px;
  color: var(--claro);
  max-width: 60ch;
}

.migaja { font-size: 16px; color: var(--soft); }
.migaja ol { display: flex; flex-wrap: wrap; gap: var(--e1); }
/* El separador va detras de cada eslabon y no delante del siguiente: cuando la
   ruta se parte en dos lineas en celular, la segunda empieza por el nombre de
   la pagina y no por una barra suelta. */
.migaja li:not(:last-child)::after { content: "/"; margin-left: var(--e1); color: var(--soft); opacity: .5; }
.migaja a { color: var(--soft); text-decoration: none; }
.migaja a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.migaja [aria-current="page"] { color: var(--claro); }

/* Las lineas divisorias siguen el margen del documento en vez de cruzar la
   pantalla de lado a lado. Las bandas de color (cabecera, hero, bloques
   oscuros) si van a sangre: separan secciones, no contenido. */
.bloque { padding-block: var(--e6); position: relative; }
.bloque:not(.bloque--sin-linea)::after {
  content: "";
  position: absolute;
  bottom: 0;
  inset-inline: max(var(--margen-lateral), calc(50% - (var(--ancho) / 2) + var(--margen-lateral)));
  height: 1px;
  background: var(--line);
}

.lista-marcada { margin-top: var(--e2); }
.lista-marcada > li {
  position: relative;
  padding-left: var(--e3);
  padding-block: 12px;
  max-width: var(--medida);
  border-bottom: 1px solid var(--line);
}
.lista-marcada > li:first-child { border-top: 1px solid var(--line); }
.lista-marcada > li::before {
  content: "";
  position: absolute;
  left: 0;
  /* Se calcula desde el tamano de letra para que el guion caiga siempre a la
     altura de x de la primera linea, tanto en celular (17px) como en
     escritorio (18px). */
  top: calc(12px + 0.82em);
  width: 10px;
  height: 1px;
  background: var(--teal);
}
.bloque-oscuro .lista-marcada > li { border-color: var(--linea-oscura); }
.bloque-oscuro .lista-marcada > li:first-child { border-top-color: var(--linea-oscura); }

.fases { margin-top: var(--e3); }
.fases > li {
  border-left: 2px solid var(--line);
  padding: 0 0 var(--e5) var(--e4);
  position: relative;
}
.fases > li:last-child { padding-bottom: 0; }
.fases > li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 8px;
  width: 8px;
  height: 8px;
  background: var(--teal);
}
.fases h3 { font-size: 19px; margin-bottom: var(--e1); }
.fases p { font-size: 16px; color: var(--grey); }

.aviso {
  border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  background: var(--paper);
  padding: var(--e4);
  border-radius: var(--radio);
  margin-top: var(--e4);
  max-width: var(--medida);
}
/* El recuadro de delimitacion profesional es una afirmacion central, no una
   nota al pie: se lee al mismo tamano que el cuerpo que lo rodea. */
.aviso p { max-width: none; }

.normativa {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radio);
  padding: var(--e4);
  max-width: var(--medida);
}
.normativa li {
  font-size: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
}
.normativa li:last-child { border-bottom: 0; }

.otros-servicios { margin-top: var(--e4); }
.otros-servicios li { border-bottom: 1px solid var(--line); }
.otros-servicios li:first-child { border-top: 1px solid var(--line); }
.otros-servicios a {
  position: relative;
  display: block;
  padding: var(--e3) 0;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  font-size: 17px;
  transition: transform var(--transicion), color var(--transicion);
}
/* Mismo comportamiento que .servicio-fila en la portada: borde de acento a la
   izquierda y desplazamiento de 4px. Las dos listas de servicios del sitio se
   comportan igual. */
.otros-servicios a::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--teal);
  opacity: 0;
  transition: opacity var(--transicion);
}
.otros-servicios a:hover,
.otros-servicios a:focus-visible { color: var(--teal-dark); transform: translateX(4px); }
.otros-servicios a:hover::before,
.otros-servicios a:focus-visible::before { opacity: 1; }
.otros-servicios span {
  display: block;
  font-weight: 400;
  font-size: 16px;
  color: var(--grey);
  margin-top: 2px;
  max-width: var(--medida);
}

/* -------------------------------------------------------------------------
   14. CONTACTO
   ------------------------------------------------------------------------- */
.canales {
  display: grid;
  gap: var(--e4);
  margin-top: var(--e5);
}
.canal {
  border: 1px solid var(--line);
  border-top: 3px solid var(--teal);
  border-radius: var(--radio);
  padding: var(--e4);
}
.canal h2 { font-size: 24px; margin-bottom: var(--e2); }
.canal p { font-size: 16px; color: var(--grey); }
.canal .boton { margin-top: var(--e3); display: flex; width: fit-content; }
.canal__dato {
  display: block;
  width: fit-content;
  margin-top: var(--e3);
  font-size: 17px;
  font-weight: 600;
  color: var(--deep);
  text-decoration: none;
}
/* El telefono es un enlace tel: y debe verse como tal al pasar por encima */
a.canal__dato:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.datos-lista { margin-top: var(--e3); }
.datos-lista > div {
  padding-block: var(--e3);
  border-bottom: 1px solid var(--line);
  max-width: var(--medida);
}
.datos-lista > div:first-child { border-top: 1px solid var(--line); }
/* La ultima fila no lleva linea inferior: la de la credencial ya cierra el
   bloque. Antes quedaban dos lineas paralelas con una franja vacia en medio. */
.datos-lista > div:last-child { border-bottom: 0; }
.datos-lista dt {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-texto);
  margin-bottom: var(--e1);
}
/* Colgaba de un 68ch escrito a mano que la pasada anterior no llego a sustituir;
   queda atado a la variable para que no se separe de la medida del sitio. */
.datos-lista dd { font-size: 17px; max-width: var(--medida); }

.credencial {
  margin-top: var(--e5);
  padding-top: var(--e4);
  border-top: 1px solid var(--line);
  max-width: var(--medida);
}
.credencial p { font-size: 16px; color: var(--grey); }
.credencial strong { color: var(--ink); }

/* -------------------------------------------------------------------------
   15. PIE DE PAGINA
   ------------------------------------------------------------------------- */
.pie {
  background: var(--ink);
  color: var(--soft);
  padding-block: var(--e6) var(--e4);
  font-size: 16px;
}
.pie__rejilla {
  display: grid;
  gap: var(--e5);
}
.pie__titulo {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soft);
  margin-bottom: var(--e3);
}
.pie img { width: 168px; height: auto; }
.pie p { color: var(--soft); max-width: 44ch; }
.pie__descripcion { margin-top: var(--e3); }
.pie ul li + li { margin-top: var(--e2); }
.pie a {
  color: var(--claro);
  text-decoration: none;
  transition: var(--transicion);
}
.pie a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 3px; }
.pie__credencial { margin-top: var(--e3); line-height: 1.6; }
.pie__legal {
  /* .pie p limita a 44ch; sin esto la linea divisoria del cierre se cortaba a
     la mitad del pie en vez de recorrer toda la columna. */
  max-width: none;
  margin-top: var(--e6);
  padding-top: var(--e3);
  padding-bottom: var(--e6);   /* deja libre la zona del boton flotante */
  border-top: 1px solid var(--linea-oscura);
  font-size: 16px;
  color: var(--soft);
}

/* -------------------------------------------------------------------------
   16. BOTON FLOTANTE DE WHATSAPP
   ------------------------------------------------------------------------- */
.flotante {
  position: fixed;
  right: var(--e2);
  bottom: var(--e2);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--ink);
  color: var(--white);
  border: 1px solid var(--soft);
  border-radius: var(--radio-control);
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(28, 43, 57, .06);
  transition: var(--transicion);
}
.flotante:hover { background: var(--deep); color: var(--white); }
.flotante svg {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  display: block;
  color: var(--white);
}

/* En pantallas angostas el boton queda solo con el isotipo, para no tapar el texto.
   El nombre accesible lo aporta el atributo aria-label del enlace. */
@media (max-width: 599px) {
  .flotante { padding: 12px; }
  .flotante span { display: none; }
}

/* -------------------------------------------------------------------------
   17. UTILIDADES
   ------------------------------------------------------------------------- */
.solo-lectores {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.limite-texto { max-width: var(--medida); }

/* -------------------------------------------------------------------------
   18. PUNTOS DE QUIEBRE
   ------------------------------------------------------------------------- */
@media (min-width: 600px) {
  .cabecera__fila { gap: var(--e3); }
  .marca img { width: 196px; }

  .flotante { right: var(--e3); bottom: var(--e3); }

  /* El bloque de marca ocupa el ancho completo; servicios y contacto van a la par */
  .pie__rejilla { grid-template-columns: 1fr 1fr; gap: var(--e5); }
  .pie__rejilla > div:first-child { grid-column: 1 / -1; }
}

@media (min-width: 768px) {
  :root { --margen-lateral: var(--e5); }

  body { font-size: 18px; }

  h1 { font-size: 44px; }
  h2 { font-size: 34px; margin-bottom: var(--e4); }
  h3 { font-size: 24px; }
  h4 { font-size: 20px; }

  /* Con 18px de cuerpo la interlinea es de 30px; una separacion de parrafo de
     24px quedaba por debajo de la propia interlinea y los bloques se leian
     como uno solo. */
  p + p { margin-top: var(--e4); }

  /* Los subtitulos de plataforma y de fases usan el escalon de h4 en vez de un
     tamano suelto de 19px, para que la escala tenga peldanos definidos. */
  .columnas-3 h3,
  .fases h3 { font-size: 20px; }

  .seccion { padding-block: var(--e7); }
  .bloque { padding-block: var(--e7); }

  .hero { padding-block: var(--e7); }
  .hero h1 { font-size: 52px; }
  .hero__entrada { font-size: 21px; }

  .cabecera-pagina { padding-block: var(--e6) var(--e7); }
  .cabecera-pagina__entrada { font-size: 21px; }

  .dato__cifra { font-size: 80px; }

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

  .servicio-fila { grid-template-columns: 72px 1fr auto; padding: var(--e5) 0; }
  .servicio-num { font-size: 22px; line-height: 1.3; }
  .servicio-fila p { font-size: 17px; }
  .servicio-fila > .enlace-flecha {
    grid-column: 3;
    grid-row: 1;
    margin-top: 4px;
    padding-left: var(--e4);
    white-space: nowrap;
  }

  .normativa { padding: var(--e5); }
  .aviso { padding: var(--e5); }
}

@media (min-width: 960px) {
  .marca img { width: 214px; }

  /* A 768px el texto quedaba en una columna de unos 270px, es decir 30
     caracteres por linea. La reticula de dos columnas espera hasta que hay
     ancho suficiente para una linea de lectura completa. */
  .contexto__rejilla { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--e6); align-items: start; }

  .canal { padding: var(--e5); }

  .columnas-3 { grid-template-columns: repeat(3, 1fr); gap: var(--e5); }
  .columnas-3 > li + li {
    border-left: 1px solid var(--line);
    padding-left: var(--e5);
  }

  .pie__rejilla { grid-template-columns: 1.3fr 1fr 1.2fr; gap: var(--e6); }
  .pie__rejilla > div:first-child { grid-column: auto; }

  h1 { font-size: 52px; }
  .hero h1 { font-size: 60px; }
  .cabecera-pagina h1 { font-size: 52px; }

  /* Anexo A 4: el hero debe leerse como la portada de un documento tecnico.
     En escritorio se le da el escalon mayor de la escala. */
  .hero { padding-block: var(--e8); }

  /* Navegacion horizontal en escritorio */
  .menu-boton { display: none; }

  .nav { display: block; width: auto; }
  .nav__lista {
    flex-direction: row;
    align-items: center;
    gap: var(--e4);
    padding-bottom: 0;
  }
  .nav__lista > li { position: relative; }

  .nav__enlace,
  .nav__desplegable-boton {
    width: auto;
    border-top: 0;
    padding: var(--e1) 0;
    font-size: 17px;
    white-space: nowrap;
  }
  .nav__enlace[aria-current="page"],
  .nav__desplegable-boton--seccion { box-shadow: inset 0 -2px 0 var(--teal); }
  .nav__desplegable-boton--seccion { color: var(--white); font-weight: 600; }

  .nav__submenu {
    position: absolute;
    top: calc(100% + var(--e2));
    left: -20px;
    min-width: 330px;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--teal);
    border-radius: var(--radio);
    padding: var(--e1) 0;
    box-shadow: 0 1px 2px rgba(28, 43, 57, .06);
    z-index: 100;
  }
  .nav__submenu a {
    color: var(--ink);
    padding: 10px 20px;
    font-size: 16px;
  }
  .nav__submenu a:hover { color: var(--teal-texto); background: var(--paper); }
  .nav__lista > li:hover > .nav__submenu { display: block; }

  .nav__accion { margin-top: 0; margin-left: var(--e2); }
}

/* -------------------------------------------------------------------------
   19. PREFERENCIAS DE MOVIMIENTO
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .servicio-fila:hover,
  .servicio-fila:focus-visible,
  .otros-servicios a:hover,
  .otros-servicios a:focus-visible { transform: none; }
}