/* === 00_tokens.css === */
/* ------------------------------------------------------------------ *
 * Lago Becu v3 - tokens
 * Paleta y tipografia del brief de diseno, seccion 3.2 y 3.3.
 * Ningun valor de color, tamano o espacio se escribe fuera de aqui.
 * ------------------------------------------------------------------ */

:root {
  /* Color */
  --tinta: #2B2B2B;
  --grafito: #4D4D4D;
  --gris: #6B6B6B;
  --gris-claro: #8A8A8A;
  --naranja: #D96526;
  --naranja-tinta: #B5501A;
  --naranja-oscuro: #8F3F13;
  --marfil: #F8F5EF;
  --piedra: #E7E1D6;
  --blanco: #FFFFFF;

  /* Tipografia */
  --serifa: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;

  --t-h1: clamp(2.25rem, 1.2rem + 3.2vw, 4.25rem);       /* 36 -> 68 px */
  --t-hero-sub: clamp(1.1875rem, 1.08rem + 0.38vw, 1.5rem); /* 19 -> 24 px */
  --t-h2: clamp(1.625rem, 1.42rem + 0.7vw, 2.125rem);   /* 26 -> 34 px */
  --t-h2-nota: 1.375rem;                                 /* 22 px */
  --t-h3: clamp(1.125rem, 1.08rem + 0.15vw, 1.25rem);   /* 18 -> 20 px */
  --t-lectura: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem); /* 18 -> 21 px */
  --t-cuerpo: clamp(1rem, 0.96rem + 0.14vw, 1.125rem);  /* 16 -> 18 px */
  --t-cuerpo-fijo: 1.0625rem;                           /* 17 px */
  --t-menu: 0.9375rem;                                  /* 15 px */
  --t-antetitulo: 0.8125rem;                            /* 13 px */
  --t-pequeno: 0.875rem;                                /* 14 px */
  --t-numero: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);   /* 28 -> 40 px */

  --interlineado-titular: 1.1;
  --interlineado-cuerpo: 1.55;
  --espaciado-antetitulo: 0.08em;

  /* Escala de espacio, base 8 px */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;
  --e10: 8rem;

  /* Anchos */
  --ancho-contenido: 1120px;
  --ancho-medida: 68ch;      /* 60-72 caracteres de medida de lectura */
  --ancho-titular: 20ch;
  --margen-lateral: 1.5rem;  /* 24 px en movil */

  /* Ritmo vertical entre secciones */
  --seccion-y: var(--e7);        /* 48 px en movil */
  --seccion-y-nota: var(--e6);   /* 32 px - secciones de nota */
  --seccion-y-amplia: var(--e9);

  /* Detalles */
  --radio: 2px;
  --regla: 1px;
  --transicion: color 150ms linear, background-color 150ms linear,
                border-color 150ms linear;
}

@media (min-width: 62rem) {
  :root {
    --margen-lateral: 3rem;    /* 48 px en escritorio */
    --seccion-y: var(--e8);    /* 64 px */
    --seccion-y-amplia: var(--e10); /* 128 px */
  }
}

/* === 01_reset.css === */
/* ------------------------------------------------------------------ *
 * Reset minimo. Sin normalize externo.
 * ------------------------------------------------------------------ */

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

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

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

ul, ol { list-style: none; }

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

a { color: inherit; }

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

table { border-collapse: collapse; }

::selection {
  background: var(--piedra);
  color: var(--tinta);
}

/* === 02_tipografia.css === */
/* ------------------------------------------------------------------ *
 * Fuentes propias (site/fonts/), sin conexion a terceros.
 * Source Serif 4 y Source Sans 3, SIL Open Font License 1.1.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-sans-3-400.woff2") format("woff2");
}

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-sans-3-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/source-serif-4-600.woff2") format("woff2");
}

@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/source-serif-4-400-italic.woff2") format("woff2");
}

body {
  font-family: var(--sans);
  font-size: var(--t-cuerpo);
  line-height: var(--interlineado-cuerpo);
  color: var(--tinta);
  background: var(--blanco);
}

h1, h2 {
  font-family: var(--serifa);
  font-weight: 600;
  line-height: var(--interlineado-titular);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--t-h1);
  max-width: var(--ancho-titular);
}

h2 { font-size: var(--t-h2); max-width: 24ch; }

h3 {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: var(--t-h3);
  line-height: 1.25;
}

p { max-width: var(--ancho-medida); }

strong { font-weight: 600; }

/* Antetitulo: la unica ornamentacion tipografica del sitio */
.antetitulo {
  font-family: var(--sans);
  font-size: var(--t-antetitulo);
  font-weight: 600;
  letter-spacing: var(--espaciado-antetitulo);
  text-transform: uppercase;
  color: var(--grafito);
  margin-bottom: var(--e4);
}

.subtitulo {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-hero-sub);
  line-height: 1.35;
  color: var(--tinta);
  max-width: 34ch;
}

.entradilla {
  font-size: var(--t-cuerpo);
  color: var(--grafito);
}

.pequeno { font-size: var(--t-pequeno); }

.nota-margen {
  font-family: var(--serifa);
  font-style: italic;
  font-weight: 400;
  font-size: var(--t-cuerpo-fijo);
  line-height: 1.45;
  color: var(--gris);
  max-width: 30ch;
}

/* Enlaces dentro de texto corrido */
.prosa a,
.enlace-texto {
  color: var(--naranja-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: var(--transicion);
}

.prosa a:hover,
.enlace-texto:hover { color: var(--naranja-oscuro); }

.prosa p + p,
.prosa ul + p,
.prosa p + ul { margin-top: var(--e4); }

.prosa li {
  position: relative;
  padding-left: var(--e5);
  margin-bottom: var(--e2);
  max-width: var(--ancho-medida);
}

.prosa li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 10px;
  height: 1px;
  background: var(--grafito);
}

/* === 03_layout.css === */
/* ------------------------------------------------------------------ *
 * Rejilla editorial asimetrica. Doce columnas, 1120 px de contenido.
 * ------------------------------------------------------------------ */

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-contenido) + var(--margen-lateral) * 2);
  margin-inline: auto;
  padding-inline: var(--margen-lateral);
}

.rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--e5);
  row-gap: var(--e6);
}

@media (max-width: 61.9375rem) {
  .rejilla { grid-template-columns: minmax(0, 1fr); }
  .rejilla > * { grid-column: auto !important; }
}

/* Reparto asimetrico por bloque, solo en escritorio */
@media (min-width: 62rem) {
  .col-7 { grid-column: span 7; }
  .col-5 { grid-column: span 5; }
  .col-8 { grid-column: span 8; }
  .col-4 { grid-column: span 4; }
  .col-9 { grid-column: span 9; }
  .col-3 { grid-column: span 3; }
  .col-12 { grid-column: span 12; }
  .col-4-fin { grid-column: 9 / span 4; }
}

/* Seccion: el ritmo lo marca el espacio, no un cambio de fondo */
.seccion { padding-block: var(--seccion-y); }
.seccion--amplia { padding-block: var(--seccion-y-amplia); }
.seccion--ajustada { padding-block: var(--e7); }
.seccion--marfil { background: var(--marfil); }

/* Regla de ancho completo entre secciones sobre fondo blanco */
.seccion--regla { border-top: var(--regla) solid var(--piedra); }

.cabecera-seccion { margin-bottom: var(--e7); }
.cabecera-seccion p { margin-top: var(--e4); color: var(--grafito); }

.pila-2 > * + * { margin-top: var(--e2); }
.pila-4 > * + * { margin-top: var(--e4); }
.pila-5 > * + * { margin-top: var(--e5); }
.pila-6 > * + * { margin-top: var(--e6); }

.salto-lectura { max-width: var(--ancho-medida); }

/* Enlace de salto al contenido */
.salto-contenido {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tinta);
  color: var(--blanco);
  padding: var(--e3) var(--e4);
  text-decoration: none;
}

.salto-contenido:focus {
  left: var(--margen-lateral);
  top: var(--e2);
}

/* Dos franjas de marfil seguidas se separan con una regla, no se funden */
.seccion--marfil + .seccion--marfil { border-top: var(--regla) solid var(--piedra); }

/* Seccion de nota: menos aire vertical */
.seccion--nota { padding-block: var(--seccion-y-nota); }

/* Columna de lectura: 7 columnas, font-size lectura, letra capital */
.columna-lectura {
  font-size: var(--t-lectura);
  line-height: 1.6;
  max-width: 60ch;
}

.columna-lectura p:first-of-type::first-letter {
  float: left;
  font-family: var(--serifa);
  font-size: 3.2em;
  line-height: 0.82;
  margin-right: 0.1em;
  margin-top: 0.06em;
  color: var(--tinta);
}

/* Margen editorial: columnas 9-12, regla superior grafito */
@media (min-width: 62rem) {
  .margen {
    grid-column: 9 / span 4;
    border-top: 1px solid var(--grafito);
    padding-top: var(--e5);
    font-size: var(--t-pequeno);
    color: var(--grafito);
    align-self: start;
  }
}

/* Figura a sangre derecha: columna + margen hasta el borde de ventana */
@media (min-width: 62rem) {
  .a-sangre-derecha {
    width: calc(100% + (100vw - var(--ancho-contenido)) / 2 - 8px + var(--margen-lateral));
    max-width: none;
    margin-right: calc(-1 * ((100vw - var(--ancho-contenido)) / 2) + 8px - var(--margen-lateral));
  }
}

/* === 04_cabecera_pie.css === */
/* ------------------------------------------------------------------ *
 * Cabecera estatica (no fija) y pie tipo colofon.
 * ------------------------------------------------------------------ */

.cabecera {
  border-bottom: var(--regla) solid var(--piedra);
  background: var(--blanco);
}

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: var(--e5);
  min-height: 72px;
  padding-block: var(--e3);
}

.marca {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  text-decoration: none;
  flex: 0 0 auto;
}

.marca__nombre {
  font-family: var(--serifa);
  font-weight: 600;
  /* 24 px: por debajo de ese tamano el naranja de marca no llega a 4.5:1
     sobre blanco (brief 3.2). A 24 px el minimo exigible es 3:1 y da 3.6. */
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--naranja);
}

/* Logo vertical (correo de Flavia 2026-09-20): 56 px de alto en cabecera y pie; con
   menos, la coletilla del logo deja de leerse. */
.marca__logo {
  display: block;
  height: 56px;
  width: auto;
}

.marca__logo--pie { height: 56px; }

.marca picture { display: block; line-height: 0; }

.marca__coletilla {
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--gris);
  display: none;
}

@media (min-width: 48rem) {
  .marca__coletilla { display: inline; }
}

.nav-principal { margin-left: auto; }

.nav-principal__lista {
  display: flex;
  align-items: center;
  gap: var(--e5);
}

/* Compromiso social cierra el menu, separada del bloque tecnico.
   P1: una regla vertical en vez de un margen mayor, para que la separacion
   se lea como intencionada y no como un error de alineacion. */
.nav-principal__lista .nav-principal__social {
  margin-left: var(--e2);
  padding-left: var(--e5);
  border-left: var(--regla) solid var(--piedra);
}

.nav-principal__enlace {
  font-size: var(--t-menu);
  color: var(--grafito);
  text-decoration: none;
  padding-block: var(--e2);
  border-bottom: 2px solid transparent;
  transition: var(--transicion);
  white-space: nowrap;
}

.nav-principal__enlace:hover { color: var(--tinta); }

.nav-principal__enlace[aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
  border-bottom-color: var(--grafito);
}

.cabecera__acciones {
  display: flex;
  align-items: center;
  gap: var(--e4);
  margin-left: auto;
}

.cabecera .nav-principal + .cabecera__acciones { margin-left: var(--e5); }

.menu-boton {
  display: none;
  background: none;
  border: var(--regla) solid var(--grafito);
  border-radius: var(--radio);
  color: var(--tinta);
  font-size: var(--t-menu);
  padding: var(--e2) var(--e4);
  cursor: pointer;
  transition: var(--transicion);
}

.menu-boton:hover { background: var(--marfil); }

@media (max-width: 81.9375rem) {
  .menu-boton { display: inline-block; order: 2; margin-left: var(--e3); }

  .nav-principal {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    border-top: var(--regla) solid var(--piedra);
    padding-block: var(--e4);
  }

  .nav-principal[hidden] { display: none; }

  .nav-principal__lista {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--e3);
  }

  .nav-principal__lista .nav-principal__social {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
  }

  .cabecera__fila { flex-wrap: wrap; align-items: center; gap: var(--e3); }

  /* O1: logo, boton "Hablemos" y "Menu" caben en una sola linea a 390 px.
     Logo vertical a 44 px de alto en movil (unos 63 px de ancho). */
  .marca { max-width: 9rem; }
  .marca__logo { height: 44px; }

  .cabecera__acciones { order: 1; margin-left: auto; }

  .cabecera .nav-principal + .cabecera__acciones { margin-left: auto; }

  .boton--cabecera { padding: var(--e2) var(--e3); }
}

/* Si no cupieran en un dispositivo mas estrecho de 360 px, "Contacto" ya esta
   en el menu plegado: el boton de cabecera se oculta y no hace falta. */
@media (max-width: 22.5rem) {
  .cabecera__acciones { display: none; }
}

/* Migas de pan */
.migas {
  border-bottom: var(--regla) solid var(--piedra);
  background: var(--blanco);
}

.migas__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  font-size: var(--t-pequeno);
  color: var(--gris);
  padding-block: var(--e3);
}

.migas__lista a {
  color: var(--gris);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.migas__lista a:hover { color: var(--tinta); }

.migas__lista li + li::before {
  content: "/";
  margin-right: var(--e2);
  color: var(--gris-claro);
}

/* Navegacion secundaria de la familia social */
.nav-social {
  border-bottom: var(--regla) solid var(--piedra);
}

.nav-social__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e5);
  padding-block: var(--e4);
  font-size: var(--t-menu);
}

.nav-social__lista a {
  color: var(--grafito);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  padding-bottom: var(--e1);
  transition: var(--transicion);
}

.nav-social__lista a:hover { color: var(--tinta); }

.nav-social__lista a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
  border-bottom-color: var(--grafito);
}

/* Pie */
.pie {
  border-top: var(--regla) solid var(--grafito);
  padding-block: var(--e7) var(--e5);
  font-size: var(--t-pequeno);
  color: var(--grafito);
}

.pie__columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e6);
}

@media (min-width: 40rem) {
  .pie__columnas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 62rem) {
  .pie__columnas { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--e5); }
}

.pie__titulo {
  font-family: var(--sans);
  font-size: var(--t-antetitulo);
  font-weight: 600;
  letter-spacing: var(--espaciado-antetitulo);
  text-transform: uppercase;
  color: var(--gris);
  margin-bottom: var(--e4);
}

.pie__lista li + li { margin-top: var(--e2); }

.pie a {
  color: var(--grafito);
  text-decoration: none;
  transition: var(--transicion);
}

.pie a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 2px; }

.pie__frase {
  font-family: var(--serifa);
  font-size: var(--t-cuerpo-fijo);
  line-height: 1.4;
  color: var(--tinta);
  margin-top: var(--e4);
  max-width: 26ch;
}

.pie__direccion { font-style: normal; }
.pie__direccion p + p { margin-top: var(--e3); }

.pie__legal {
  margin-top: var(--e7);
  padding-top: var(--e4);
  border-top: var(--regla) solid var(--piedra);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e4);
  color: var(--gris);
}

.pie__nota { margin-top: var(--e3); }
.pie__nota a { text-decoration: underline; text-underline-offset: 2px; }

/* "Contacto" solo aparece dentro del menu plegado: fuera de el ya esta el boton */
.menu-solo-movil { display: none; }

@media (max-width: 81.9375rem) {
  .menu-solo-movil { display: block; }
}

/* === 05_componentes.css === */
/* ------------------------------------------------------------------ *
 * Componentes. Ninguno usa caja con sombra, gradiente ni icono.
 * ------------------------------------------------------------------ */

/* --- Botones -------------------------------------------------------- */

.boton {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--t-cuerpo-fijo);
  font-weight: 600;
  line-height: 1.2;
  padding: var(--e3) var(--e5);
  border: var(--regla) solid transparent;
  border-radius: var(--radio);
  text-decoration: none;
  cursor: pointer;
  transition: var(--transicion);
}

.boton--primario {
  background: var(--naranja-tinta);
  border-color: var(--naranja-tinta);
  color: var(--blanco);
}

.boton--primario:hover {
  background: var(--naranja-oscuro);
  border-color: var(--naranja-oscuro);
}

.boton--secundario {
  background: transparent;
  border-color: var(--grafito);
  color: var(--tinta);
}

.boton--secundario:hover { background: var(--marfil); }

.boton--cabecera { padding: var(--e2) var(--e4); font-size: var(--t-menu); }

/* O2: la cabecera pasa a contorno para que el naranja de la primera pantalla
   de "/" quede solo en el wordmark, el nodo del diagrama D1 y el boton primario. */
.boton--cabecera {
  background: none;
  color: var(--tinta);
  border-color: var(--grafito);
}

.boton--cabecera:hover { background: var(--marfil); }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e4);
  margin-top: var(--e6);
}

/* --- Hero ----------------------------------------------------------- */

.hero { padding-block: var(--seccion-y-amplia) var(--seccion-y); }

.hero__texto p { margin-top: var(--e5); color: var(--grafito); }

.hero__texto .subtitulo { margin-top: var(--e5); color: var(--tinta); }

/* La unica regla naranja de la pagina, bajo el H1 */
.hero__filete {
  width: 64px;
  height: 3px;
  background: var(--naranja);
  margin-top: var(--e5);
}

/* O2: en la home el diagrama D1 ya aporta el detalle naranja de la primera
   pantalla; el filete solo se mantiene en las paginas interiores. */
.hero:not(.hero--interior) .hero__filete { display: none; }

.hero__figura { align-self: center; }

@media (min-width: 62rem) {
  .hero__figura { margin-top: var(--e6); }
}

/* Hero de las paginas interiores: mas bajo y con marca de capitulo */
.hero--interior { padding-block: var(--e8) var(--e7); }

.hero__marca-capitulo {
  width: 72px;
  height: 72px;
  margin-bottom: var(--e5);
}

.hero__marca-capitulo img,
.hero__marca-capitulo svg { width: 100%; height: auto; }

/* --- Figuras y capturas --------------------------------------------- */

.figura { margin: 0; }

.figura img,
.figura svg { width: 100%; height: auto; display: block; }

.figura__pie {
  margin-top: var(--e3);
  font-size: var(--t-pequeno);
  color: var(--gris);
}

.figura--captura img {
  border: var(--regla) solid var(--piedra);
}

.figura--franja img {
  width: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

/* --- Pilares: tres columnas con reglas verticales, sin cajas -------- */

.pilares {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e7);
}

@media (min-width: 62rem) {
  .pilares {
    grid-template-columns: 1.15fr 1fr 1fr;
    gap: 0;
  }

  .pilar { padding-inline: var(--e6); }
  .pilar:first-child { padding-left: 0; }
  .pilar:last-child { padding-right: 0; }
  .pilar + .pilar { border-left: var(--regla) solid var(--piedra); }
}

@media (max-width: 61.9375rem) {
  .pilar + .pilar {
    border-top: var(--regla) solid var(--piedra);
    padding-top: var(--e6);
  }
}

.numero {
  display: block;
  font-family: var(--serifa);
  font-weight: 600;
  font-size: var(--t-numero);
  line-height: 1;
  color: var(--grafito);
  margin-bottom: var(--e3);
}

.pilar__titulo { margin-bottom: var(--e3); }

.pilar__frase {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-hero-sub);
  line-height: 1.3;
  color: var(--tinta);
  margin-bottom: var(--e4);
}

.pilar p { color: var(--grafito); max-width: 40ch; }

.pilar__enlace { display: inline-block; margin-top: var(--e4); }

/* --- Pasos numerados: regla horizontal por entrada, sin cajas ------- */

.pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

@media (min-width: 62rem) {
  .pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--e5); }
}

.paso {
  border-top: var(--regla) solid var(--grafito);
  padding-top: var(--e4);
  padding-bottom: var(--e5);
}

.paso__titulo { margin: var(--e2) 0 var(--e3); }
.paso p { color: var(--grafito); }

/* --- Lista de servicios: dos columnas con regla entre filas --------- */

.lista-servicios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
  .lista-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--e7); }
}

.servicio {
  border-top: var(--regla) solid var(--piedra);
  padding-block: var(--e5);
}

.servicio__titulo { margin-bottom: var(--e3); }
.servicio p { color: var(--grafito); }

/* --- Sectores: indice de dos columnas, sin cajas -------------------- */

.sectores {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--e8);
}

@media (min-width: 48rem) {
  .sectores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sector {
  border-top: var(--regla) solid var(--piedra);
  padding-block: var(--e4);
}

.sector__titulo {
  font-family: var(--sans);
  font-size: var(--t-cuerpo-fijo);
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--e2);
}

.sector p { color: var(--grafito); font-size: var(--t-cuerpo-fijo); }

/* --- Afirmaciones: dos columnas anchas ----------------------------- */

.afirmaciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--e8);
}

@media (min-width: 48rem) {
  .afirmaciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.afirmacion {
  border-top: var(--regla) solid var(--piedra);
  padding-block: var(--e5);
}

.afirmacion__titulo { margin-bottom: var(--e3); }
.afirmacion p { color: var(--grafito); }

/* --- Cita destacada y sello ---------------------------------------- */

.cita {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: 1.25;
  color: var(--tinta);
  max-width: 26ch;
  border-left: 3px solid var(--naranja);
  padding-left: var(--e5);
}

.sello {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-hero-sub);
  line-height: 1.35;
  color: var(--naranja-tinta);
  max-width: 32ch;
}

/* --- Banda de cierre: marfil, alineada a la izquierda --------------- */

.cierre__texto { margin-top: var(--e5); color: var(--grafito); }

/* --- Logos institucionales ----------------------------------------- */

.logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e5);
  margin-top: var(--e5);
}

.logos img { max-height: 56px; width: auto; }

/* --- Descargas y enlaces de lista ---------------------------------- */

.lista-enlaces li { border-top: var(--regla) solid var(--piedra); padding-block: var(--e4); }
.lista-enlaces li:last-child { border-bottom: var(--regla) solid var(--piedra); }

/* --- Texto legal ---------------------------------------------------- */

.legal h2 {
  font-size: var(--t-h3);
  max-width: var(--ancho-medida);
  margin-top: var(--e7);
  margin-bottom: var(--e4);
  padding-top: var(--e4);
  border-top: var(--regla) solid var(--piedra);
}

.legal h2:first-of-type { margin-top: var(--e6); }
.legal p, .legal li { color: var(--grafito); }
.legal dt { font-weight: 600; margin-top: var(--e4); }

/* O5: los diagramas D2a-c y D3 ya vienen recortados a su contenido; evita que
   la banda marfil se vea como 600 px de fondo con un dibujo pequeno en medio. */
.figura--banda img,
.figura--banda svg { max-width: 56rem; margin-inline: auto; }

/* La banda D3 es ilegible por debajo de tableta: alli mandan los pasos
   numerados, que dicen lo mismo (ARQUITECTURA_V3.md 4.3). */
@media (max-width: 47.9375rem) {
  .figura--banda { display: none; }
}

/* --- Anadidos de C4 (montaje de las doce paginas interiores) -------- */

/* Titulo de entrada enlazado ("Los otros dos servicios") */
.enlace-titulo {
  color: var(--tinta);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--gris-claro);
  transition: var(--transicion);
}

.enlace-titulo:hover { color: var(--naranja-tinta); text-decoration-color: currentColor; }

.servicio__frase {
  font-family: var(--serifa);
  font-weight: 400;
  font-size: var(--t-cuerpo-fijo);
  line-height: 1.35;
  color: var(--grafito);
  margin-bottom: var(--e3);
}

/* Entradas con h3 dentro de un bloque de texto (DIMEN, reconocimiento) */
.entradas .servicio:last-child { border-bottom: var(--regla) solid var(--piedra); }

/* Cita que cierra un bloque de texto (recursos de LIPS) */
.cita--cierre {
  font-size: var(--t-hero-sub);
  font-weight: 400;
  font-style: italic;
}

/* Linea de expediente de los proyectos europeos */
.expediente { color: var(--gris); letter-spacing: 0.02em; }

/* Texto pequeno de una seccion entera ("Con que trabajamos", fecha de las legales) */
.texto-pequeno .prosa p {
  font-size: var(--t-pequeno);
  color: var(--gris);
}

/* Frase que cierra una lista de servicios o modelos */
.frase-cierre p { color: var(--grafito); }

/* Modelos listos para arrancar: fichas a la izquierda, maquetas a la derecha */
.lista-modelos .servicio:last-child { border-bottom: var(--regla) solid var(--piedra); }
.lista-modelos + .frase-cierre { margin-top: var(--e5); }

.modelos__figuras { display: grid; gap: var(--e6); align-content: start; }

@media (min-width: 62rem) {
  .modelos__figuras { position: sticky; top: var(--e6); }
}

/* Listas en columnas (Objetivos de Desarrollo Sostenible) */
.columnas-listas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e5) var(--e7);
}

@media (min-width: 48rem) {
  .columnas-listas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.columnas-listas__lista {
  border-top: var(--regla) solid var(--piedra);
  padding-top: var(--e4);
}

.columnas-listas__lista li { color: var(--grafito); }

/* Logos institucionales: alto acotado, sin recolorear */
.logos img { max-height: 64px; width: auto; height: auto; }
.logos picture { display: inline-block; }

/* Datos directos en la columna libre del hero de Contacto */
.hero__adjunto { align-self: end; }
.datos-directos .prosa p { color: var(--grafito); font-size: var(--t-cuerpo-fijo); }
.datos-directos .prosa a { color: var(--naranja-tinta); }

@media (min-width: 62rem) {
  .hero__adjunto { border-left: var(--regla) solid var(--piedra); padding-left: var(--e5); }
}

/* Texto legal: secciones compactas, un solo bloque visual */
.seccion--legal { padding-block: 0; }
.seccion--legal .prosa { max-width: var(--ancho-medida); }
.seccion--legal .legal-fin, .seccion--legal.texto-pequeno { padding-block: var(--e6) var(--seccion-y); }

/* Ritmo vertical dentro de un bloque de texto: titular, prosa, entradas, figuras,
   logos y enlaces se separan entre si (las clases pila-N solo separan hijos). */
.col-8 > h2 + .prosa,
.col-7 > h2 + .prosa,
.col-8 > h2 + .subtitulo { margin-top: var(--e4); }

.col-8 > h2 + .entradas,
.col-8 > h2 + .formulario,
.col-7 > h2 + .formulario { margin-top: var(--e6); }

.entradas + *, .prosa + .entradas,
.prosa + .figura, .entradas + .figura,
.prosa + .logos, .entradas + .logos, .figura + .logos,
.prosa + .enlaces-bloque, .logos + .enlaces-bloque, .figura + .enlaces-bloque,
.entradas + .enlaces-bloque, .cita--cierre + .logos, .cita--cierre + .enlaces-bloque,
.prosa + .cita--cierre, .prosa + .sello, .lista-servicios + .frase-cierre,
.afirmaciones + .enlaces-bloque, .pasos + .enlaces-bloque, .sectores + .enlaces-bloque,
.pilares + .enlaces-bloque, .lista-servicios + .enlaces-bloque, .lista-servicios + .logos,
.columnas-listas + .logos, .cita + .enlaces-bloque, .cita + .prosa { margin-top: var(--e6); }

.logos .img--vertical { max-height: 140px; }

/* Franja fotografica de Nosotros: 360-420 px en escritorio */
.figura--franja { margin-top: var(--e6); }
.figura--franja img { max-height: 420px; }

/* --- Anadidos de C5 (rediseno humano D5) --------------------------- */

/* Indice sumario: filas de tres columnas (numero | nombre+frase | texto | enlace) */
.indice {
  display: flex;
  flex-direction: column;
}

.entrada {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  border-top: 1px solid var(--grafito);
  padding-block: var(--e5);
}

@media (min-width: 62rem) {
  .entrada {
    grid-template-columns: 2.5rem 4fr 5fr 6rem;
    gap: var(--e5);
    align-items: start;
  }
}

.entrada__numero {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: var(--t-h3);
  color: var(--grafito);
  line-height: 1.4;
}

.entrada__nombre { font-weight: 600; }

.entrada__frase {
  font-family: var(--serifa);
  font-weight: 400;
  font-style: italic;
  color: var(--grafito);
  font-size: var(--t-cuerpo-fijo);
  line-height: 1.35;
  margin-top: var(--e2);
}

.entrada__texto { font-size: var(--t-cuerpo-fijo); color: var(--grafito); }

.entrada__enlace {
  font-size: var(--t-pequeno);
  align-self: start;
  margin-top: var(--e2);
}

.indice + * { border-bottom: 1px solid var(--grafito); }

/* Pasos compactos: lista numerada en margen, numero pequeno */
.pasos--compacto {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: paso-num;
}

.pasos--compacto li {
  counter-increment: paso-num;
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--e3);
  padding-block: var(--e3);
  border-top: 1px solid var(--piedra);
  font-size: var(--t-pequeno);
  color: var(--grafito);
}

.pasos--compacto li::before {
  content: counter(paso-num);
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--grafito);
  line-height: 1.6;
}

/* Sectores con entrada principal (el libro) y resto en dl */
.sectores--indice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e6);
}

@media (min-width: 62rem) {
  .sectores--indice { grid-template-columns: 5fr 6fr; gap: var(--e7); }
}

.sectores__libro {
  border-top: var(--regla) solid var(--piedra);
  padding-top: var(--e4);
}

.sectores__libro h3 {
  font-family: var(--serifa);
  font-weight: 600;
  font-size: var(--t-h2-nota);
  line-height: 1.3;
  margin-bottom: var(--e4);
}

.sectores__libro p { color: var(--grafito); font-size: var(--t-cuerpo-fijo); }

.sectores__resto dl {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--e6);
  margin: 0;
  padding: 0;
}

.sectores__resto dt {
  font-weight: 600;
  font-size: var(--t-cuerpo-fijo);
  border-top: var(--regla) solid var(--piedra);
  padding-block: var(--e3);
  margin: 0;
}

.sectores__resto dd {
  font-size: var(--t-pequeno);
  color: var(--grafito);
  border-top: var(--regla) solid var(--piedra);
  padding-block: var(--e3);
  margin: 0;
}

/* Lista numerada en prosa (afirmaciones variante lista / exigir) */
.exigir {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: exigir-num;
}

.exigir li {
  counter-increment: exigir-num;
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--e4);
  padding-block: var(--e4);
  border-top: var(--regla) solid var(--piedra);
  font-size: var(--t-lectura);
  line-height: 1.55;
  color: var(--grafito);
}

.exigir li:last-child { border-bottom: var(--regla) solid var(--piedra); }

.exigir li::before {
  content: counter(exigir-num);
  font-family: var(--serifa);
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--grafito);
  padding-top: 0.25em;
}

.exigir strong { color: var(--tinta); font-weight: 600; }

/* Cita en una sola linea sobre regla grafito (variante linea) */
.cita--linea {
  border-top: 1px solid var(--grafito);
  border-left: none;
  padding: 0;
  padding-top: var(--e5);
  font-size: var(--t-h2-nota);
  font-weight: 400;
  font-style: italic;
  max-width: none;
}

/* Colofon: h2 + texto a la izquierda, datos a la derecha, regla superior 2 px */
.colofon {
  border-top: 2px solid var(--grafito);
  padding-top: var(--e5);
}

.colofon__datos {
  font-size: var(--t-pequeno);
  color: var(--grafito);
  line-height: 1.7;
}

.colofon__datos p { margin-bottom: var(--e2); }

/* Bloque de autoria: parrafo, firma, enlace */
.autoria {
  border-top: var(--regla) solid var(--grafito);
  padding-top: var(--e5);
}

.autoria__retrato {
  max-width: 100%;
  height: auto;
  display: block;
  filter: grayscale(1);
  margin-bottom: var(--e5);
}

.autoria__firma {
  max-width: 10rem;
  height: auto;
  display: block;
  filter: grayscale(1);
  margin-block: var(--e5);
}

.autoria__parrafo { color: var(--grafito); font-size: var(--t-cuerpo-fijo); }

/* Portada: hero con foto a sangre y nota de autor */
.portada__foto {
  filter: grayscale(1);
}

@media (min-width: 62rem) {
  .portada__foto {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: calc(100% + (100vw - var(--ancho-contenido)) / 2 - 8px);
    object-fit: cover;
    object-position: center;
    height: 100%;
  }
}

.hero__nota-autor {
  border-top: 1px solid var(--grafito);
  padding-top: var(--e4);
  font-size: var(--t-pequeno);
  color: var(--grafito);
  line-height: 1.55;
}

.hero__nota-autor strong {
  display: block;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: var(--e2);
}

/* H2 de nota: tamano reducido */
.h2-nota { font-size: var(--t-h2-nota) !important; }

/* Banda del compromiso social: una sola linea con rejilla */
.social {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e4);
  border-top: 1px solid var(--grafito);
  padding-block: var(--e5);
}

@media (min-width: 62rem) {
  .social { grid-template-columns: 2fr 8fr 2fr; gap: var(--e5); align-items: baseline; }
}

.social .antetitulo { margin-bottom: 0; }

/* --- Lista de servicios apilada: variante de una columna (D48) ------ */

@media (min-width: 48rem) {
  .lista-servicios--apilado { grid-template-columns: minmax(0, 1fr); }
}

/* --- Nav pilar: linea de navegacion entre pilares sobre regla (D48) -- */

.nav-pilar { padding-block: var(--e5); }

.nav-pilar__regla {
  border: none;
  border-top: var(--regla) solid var(--piedra);
  margin-bottom: var(--e4);
}

.nav-pilar__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--e3);
  font-size: var(--t-pequeno);
}

.nav-pilar__label {
  font-family: var(--serifa);
  font-weight: 400;
  color: var(--grafito);
}

.nav-pilar__enlace {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--piedra);
}

.nav-pilar__enlace:hover {
  color: var(--naranja-tinta);
  border-bottom-color: var(--naranja-tinta);
}

.nav-pilar__enlace--extra { color: var(--grafito); }

.nav-pilar__sep {
  color: var(--grafito);
  user-select: none;
}

/* --- Cierre linea: titulo enlazado sobre regla (D49 NOS-N07) -------- */

.cierre-linea { padding-block: var(--e7); }

.cierre-linea__regla {
  border: none;
  border-top: var(--regla) solid var(--piedra);
  margin-bottom: var(--e5);
}

.cierre-linea__enlace {
  display: inline;
  font-family: var(--serifa);
  font-size: var(--t-h2);
  font-weight: 400;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--piedra);
  transition: var(--transicion);
}

.cierre-linea__enlace:hover {
  color: var(--naranja-tinta);
  border-bottom-color: var(--naranja-tinta);
}
.social .cita--linea { border-top: none; padding-top: 0; }

/* === 06_formulario.css === */
/* ------------------------------------------------------------------ *
 * Formulario de contacto. Etiquetas visibles, campos con borde piedra.
 * ------------------------------------------------------------------ */

.formulario { max-width: 34rem; }

.campo + .campo { margin-top: var(--e5); }

.campo__etiqueta {
  display: block;
  font-size: var(--t-pequeno);
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: var(--e2);
}

.campo__ayuda {
  display: block;
  font-size: var(--t-pequeno);
  font-weight: 400;
  color: var(--gris);
  margin-top: var(--e1);
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea,
.campo select {
  width: 100%;
  background: var(--blanco);
  border: var(--regla) solid var(--piedra);
  border-radius: var(--radio);
  padding: var(--e3);
  font-size: var(--t-cuerpo-fijo);
  color: var(--tinta);
  transition: var(--transicion);
}

.campo input:hover,
.campo textarea:hover { border-color: var(--gris-claro); }

.campo textarea { min-height: 9rem; resize: vertical; }

.campo--consentimiento {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--e3);
  align-items: start;
}

.campo--consentimiento input[type="checkbox"] {
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.2rem;
  accent-color: var(--naranja-tinta);
}

.campo--consentimiento label {
  font-size: var(--t-pequeno);
  color: var(--grafito);
}

.formulario__aviso {
  margin-top: var(--e5);
  font-size: var(--t-pequeno);
  color: var(--gris);
  max-width: var(--ancho-medida);
}

.formulario__acciones { margin-top: var(--e6); }

.campo__obligatorio { font-weight: 400; color: var(--gris); }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--gris); opacity: 1; }

.formulario__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e4) var(--e5);
}

.formulario__acciones .formulario__aviso { margin-top: 0; flex: 1 1 16rem; }

.formulario__estado {
  margin-top: var(--e4);
  font-size: var(--t-pequeno);
  color: var(--naranja-tinta);
}

.formulario__estado:empty { display: none; }

.formulario__informativo {
  margin-top: var(--e5);
  font-size: var(--t-pequeno);
  color: var(--gris);
  max-width: var(--ancho-medida);
}

.formulario__informativo a,
.formulario__estado a { color: var(--naranja-tinta); }

.datos-directos p + p { margin-top: var(--e3); }
.datos-directos a { color: var(--naranja-tinta); text-underline-offset: 2px; }

/* === 07_ajustes_flavia.css === */
/* ------------------------------------------------------------------ *
 * Ajustes pedidos por Flavia (correo "Re: Web" 2026-09-21, D55).
 * Hoja aparte y ultima en el orden: se puede retirar entera sin tocar
 * el resto del sistema.
 * ------------------------------------------------------------------ */

/* 1. Titular de la portada algo mas pequeno: de 68 a 52 px en escritorio */
.hero:not(.hero--interior) h1 {
  font-size: clamp(2rem, 1.2rem + 2.2vw, 3.25rem);
}

/* 2. Diagrama de la portada mas grande: de 4 a 5 columnas */
@media (min-width: 62rem) {
  .hero:not(.hero--interior) .hero__figura { grid-column: 8 / span 5; }
}

/* 3. Textos a todo el ancho: sin medida de lectura ni columna estrecha */
p,
h2,
.subtitulo,
.prosa li,
.salto-lectura {
  max-width: none;
}

@media (min-width: 62rem) {
  .rejilla > .col-8:only-child,
  .rejilla > .col-7:only-child { grid-column: 1 / -1; }
}

/* 4. Aire entre el subtitulo y el texto que le sigue */
.subtitulo + .prosa { margin-top: var(--e6); }

/* 6. Logo mas visible en cabecera y pie (D55) y lema legible (D57): la imagen ya
   no lleva el lema; va como texto a la derecha del logo, en dos lineas, separado por
   un filete y en el gris del logo. */
.marca {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.marca__logo,
.marca__logo--pie { height: 64px; }
.marca__claim {
  padding-left: 14px;
  border-left: 1px solid var(--piedra);
  font-family: var(--sans);
  font-size: 0.8125rem;      /* 13 px */
  font-weight: 600;
  line-height: 1.3;
  color: #4D4D4D;
  max-width: 11em;           /* dos lineas: different minds / connecting solutions */
}

@media (max-width: 81.9375rem) {
  .marca { max-width: none; gap: 10px; }
  .marca__logo { height: 44px; }
  .marca__claim { padding-left: 10px; font-size: 0.8125rem; }  /* 13 px (D58: antes 11) */
}

/* D57: con el lema al lado del logo, el menu completo no cabe entre 1312 y 1440 px.
   En ese tramo se estrecha el espacio entre entradas; por debajo de 1312 px el menu se
   pliega (punto de corte movido de 1100 a 1312 px en 04_cabecera_pie.css y app.js). */
@media (min-width: 82rem) and (max-width: 89.9375rem) {
  .nav-principal__lista { gap: var(--e4); }
  .nav-principal__lista .nav-principal__social { padding-left: var(--e4); }
  .marca { gap: 10px; }
  .marca__claim { padding-left: 10px; }
}

/* D57, movil: el lema pasa debajo del logo para que logo, "Hablemos" y "Menu" quepan
   en una sola fila. */
@media (max-width: 29.9375rem) {
  .marca { flex-direction: column; align-items: flex-start; gap: 4px; }
  .marca__logo { height: 40px; }
  .marca__claim { padding-left: 0; border-left: 0; font-size: 0.75rem; max-width: 11em; }  /* 12 px */
}

/* D58, legibilidad y zonas de toque en movil (auditoria SEO 2026-09-21): texto minimo
   de 12-14 px y enlaces tactiles de al menos 44 px de alto. Solo afecta a pantallas
   con el menu plegado; el escritorio no cambia. */
@media (max-width: 81.9375rem) {
  .nav-principal__lista { gap: 0; }
  .nav-principal__enlace { display: inline-flex; align-items: center; min-height: 44px; }
  .menu-boton,
  .boton--cabecera { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

@media (max-width: 47.9375rem) {
  .antetitulo,
  .pie__titulo { font-size: var(--t-pequeno); }           /* 14 px */
  .migas__lista a,
  .nav-social__lista a { display: inline-flex; align-items: center; min-height: 44px; }
  .migas__lista { padding-block: 0; align-items: center; }
  .nav-social__lista { gap: 0 var(--e5); padding-block: var(--e2); }
  .pie__lista a,
  .pie__legal a { display: inline-flex; align-items: center; min-height: 44px; }
  .pie__lista li + li { margin-top: 0; }
  .campo--consentimiento input[type="checkbox"] { width: 1.5rem; height: 1.5rem; margin-top: 0; }
  /* Enlaces sueltos (no los que van dentro de una frase): area de toque de 44 px
     con relleno y margen negativo, sin mover nada en pantalla. */
  .enlace-texto,
  .enlace-titulo,
  p > a[href^="mailto:"]:only-child,
  .pie__nota a,
  .pie__direccion a { display: inline-block; padding-block: 11px; margin-block: -11px; }
}

/* D58: con el lema a 12 px y los botones a 44 px de alto, logo, "Hablemos" y "Menu"
   no cabian en una fila entre 361 y 389 px. Se quita el margen duplicado del boton
   "Menu" y se estrecha el relleno lateral de los dos botones. */
@media (max-width: 24.9375rem) {
  .cabecera__fila { column-gap: 8px; }
  .menu-boton { margin-left: 0; padding-inline: var(--e3); }
  .boton--cabecera { padding-inline: 10px; }
}

/* === 07_estados.css === */
/* ------------------------------------------------------------------ *
 * Foco, movimiento y utilidades de accesibilidad.
 * ------------------------------------------------------------------ */

:focus-visible {
  outline: 2px solid var(--grafito);
  outline-offset: 2px;
}

/* Sobre fondo naranja el contorno grafito no se ve: se invierte */
.boton--primario:focus-visible {
  outline-color: var(--tinta);
  outline-offset: 3px;
}

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

/* No hay animaciones de entrada ni movimiento en el sitio.
   La regla queda como red de seguridad para cualquier transicion futura. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* === 08_impresion.css === */
/* ------------------------------------------------------------------ *
 * Impresion: la pagina sigue funcionando en blanco y negro.
 * ------------------------------------------------------------------ */

@media print {
  :root {
    --marfil: #FFFFFF;
    --naranja: #2B2B2B;
    --naranja-tinta: #2B2B2B;
    --naranja-oscuro: #2B2B2B;
  }

  body {
    font-size: 11pt;
    line-height: 1.45;
    color: #000;
    background: #fff;
  }

  .cabecera .nav-principal,
  .cabecera__acciones,
  .menu-boton,
  .nav-social,
  .acciones,
  .boton { display: none !important; }

  .seccion,
  .hero { padding-block: 1.2rem; }

  .seccion--marfil { background: none; border-top: 1px solid #999; }

  a { color: #000; text-decoration: underline; }

  /* Los enlaces internos y externos se leen en papel */
  .prosa a[href^="http"]::after,
  .prosa a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #444;
  }

  h1, h2, h3 { break-after: avoid; }
  .paso, .servicio, .sector, .afirmacion, .pilar, figure { break-inside: avoid; }

  .pie { border-top: 1px solid #000; }
}