/* ============================================================================
   L8-V2 — hoja de estilo de la web
   ----------------------------------------------------------------------------
   Hereda de las aplicaciones Pulso lo que las hace reconocibles —paleta,
   tipografía, tarjeta blanca, radios y antetítulos en mayúsculas— y suelta lo
   que solo tiene sentido dentro de una app: densidad de tabla, barras
   inferiores, estados operativos y seis niveles de sombra.

   Orden: tokens · base · utilidades · aviso · cabecera · portada · servicios ·
   método · compromisos · producto · documentación · confianza · contacto ·
   pie · adaptaciones.
   ========================================================================== */

/* --- Tokens -------------------------------------------------------------- */
:root {
  color-scheme: light dark;

  --tinta: #1f2933;
  --tinta-suave: #66737f;
  --papel: #ffffff;
  --fondo: #edf1f4;
  --fondo-alt: #e5ebef;
  --borde: #ccd6dd;
  --borde-fuerte: #afbec8;

  /* Verde original de la web, compartido con la identidad L8-V2. */
  --marca-verde: #36b875;
  --marca-verde-oscuro: #087f36;
  --marca-verde-claro: #79cfa0;
  --acento: var(--marca-verde-oscuro);
  --acento-contraste: #ffffff;
  --acento-oscuro: #06652b;
  --acento-tenue: #e9faef;
  --exito: #247044;

  --sombra: 0 6px 22px rgba(31, 41, 51, .09);
  --sombra-alta: 0 18px 45px rgba(31, 41, 51, .13);
  --sombra-captura: 0 30px 70px rgba(31, 41, 51, .18);

  --radio: 1rem;
  --radio-control: .7rem;
  --radio-pildora: 999px;

  --fuente: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Consolas, monospace;

  --ancho: 72rem;
  --alto-cabecera: 4.5rem;
  --ancho-texto: 40rem;
  --franja: clamp(2.75rem, 5vw, 4.5rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --tinta: #e9edf1;
    --tinta-suave: #9ba7b3;
    --papel: #171d23;
    --fondo: #11161b;
    --fondo-alt: #161d23;
    --borde: #2a343d;
    --borde-fuerte: #3a464f;
    --acento: var(--marca-verde);
    --acento-contraste: #0f1519;
    --acento-oscuro: var(--marca-verde-claro);
    --acento-tenue: #10291b;
    --sombra: 0 5px 20px rgba(0, 0, 0, .35);
    --sombra-alta: 0 18px 45px rgba(0, 0, 0, .45);
    --sombra-captura: 0 30px 70px rgba(0, 0, 0, .55);
  }
}

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

html { scroll-behavior: smooth; scroll-padding-top: 5.5rem; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 1.0625rem/1.65 var(--fuente);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.03em; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 1.3rem + 3vw, 3.5rem); line-height: 1.04; letter-spacing: -.04em; }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.35rem); }
h3 { font-size: 1.15rem; letter-spacing: -.02em; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg { max-width: 100%; display: block; }
strong { font-weight: 700; }
code { font-family: var(--mono); font-size: .92em; }

:focus-visible { outline: 3px solid var(--acento); outline-offset: 3px; border-radius: .35rem; }

.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--papel); color: var(--tinta); padding: .75rem 1rem;
  border-radius: 0 0 var(--radio-control) 0; font-weight: 700;
}
.salto-contenido:focus { left: 0; }

/* --- Utilidades ---------------------------------------------------------- */
.contenedor { width: min(100% - 2.5rem, var(--ancho)); margin-inline: auto; }

.seccion { padding-block: var(--franja); }
.seccion--papel { background: var(--papel); }
.seccion--borde { border-top: 1px solid var(--borde); }

.antetitulo {
  font-size: .78rem; font-weight: 900; letter-spacing: .09em;
  text-transform: uppercase; color: var(--acento); margin-bottom: .85rem;
}
.titular { max-width: 44rem; }
.entradilla { max-width: var(--ancho-texto); color: var(--tinta-suave); font-size: 1.09rem; margin-top: 1rem; }
.cabecera-seccion { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

.boton {
  display: inline-flex; white-space: nowrap; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.35rem;
  border: 1px solid transparent; border-radius: var(--radio-control);
  font: inherit; font-weight: 700; letter-spacing: -.01em; text-decoration: none; cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.boton--principal { background: var(--acento); color: var(--acento-contraste); box-shadow: 0 6px 18px rgba(8, 127, 54, .22); }
.boton--principal:hover { background: var(--acento-oscuro); transform: translateY(-1px); }
.boton--secundario { background: var(--papel); color: var(--tinta); border-color: var(--borde-fuerte); }
.boton--secundario:hover { border-color: var(--acento); color: var(--acento-oscuro); transform: translateY(-1px); }
.boton__flecha { transition: transform .18s ease; }
.enlace-accion { display: inline-flex; align-items: center; gap: .5rem; color: var(--acento-oscuro); font-weight: 700; text-underline-offset: .2em; }
.enlace-accion:hover { text-decoration-thickness: 2px; }
.boton:hover .boton__flecha { transform: translateX(3px); }

.pildora {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .28rem .6rem; border-radius: var(--radio-pildora);
  font-size: .74rem; font-weight: 800; letter-spacing: .01em;
  background: var(--acento-tenue); color: var(--acento-oscuro);
}
.pildora--neutra { background: var(--fondo-alt); color: var(--tinta-suave); }

.punto { width: .55rem; height: .55rem; border-radius: 50%; background: currentColor; flex: none; }

.lista-marcada { display: grid; gap: .55rem; }
.lista-marcada li { position: relative; padding-left: 1.4rem; color: var(--tinta-suave); }
.lista-marcada li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--marca, var(--acento));
}

/* Aparición al hacer scroll. Solo se oculta si hay JavaScript: sin él, todo el
   contenido se lee igual. También se desactiva con movimiento reducido. */
.tiene-js .revelar { opacity: 0; transform: translateY(16px); }
.tiene-js .revelar.visible {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tiene-js .revelar { opacity: 1; transform: none; }
  .boton, .boton__flecha, .servicio { transition: none; }
}

/* --- Aviso superior ------------------------------------------------------ */
.aviso-superior { background: #1f2933; color: #eef1f4; font-size: .82rem; padding: .55rem 0; }
.aviso-superior .contenedor { display: flex; gap: .6rem; align-items: center; justify-content: center; text-align: center; }
.aviso-superior .punto { background: var(--acento); }

/* --- Cabecera ------------------------------------------------------------ */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.cabecera.con-scroll { border-bottom-color: var(--borde); box-shadow: 0 6px 24px rgba(31, 41, 51, .05); }
/* Mientras la portada oscura está debajo, la cabecera toma su color: el bloque
   se lee entero. Al pasar la portada vuelve a la superficie del tema. */
.cabecera.cabecera--oscura {
  background: rgba(18, 26, 32, .93); border-bottom-color: transparent;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.cabecera--oscura .marca { color: #f2f6f9; --marca-acento: var(--marca-verde); }
.cabecera--oscura .navegacion a:hover { color: #f2f6f9; }
.cabecera--oscura:not(.abierta) .navegacion a { color: #bfceda; }
.cabecera--oscura .navegacion a:hover { border-bottom-color: var(--marca-verde); }
.cabecera--oscura .menu-boton { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #eaf0f5; }
body .cabecera--oscura.abierta .navegacion { background: #141c22; border-bottom-color: rgba(255, 255, 255, .14); }
body .cabecera--oscura.abierta .navegacion a { color: #dbe5ec; border-bottom-color: rgba(255, 255, 255, .12); }
.cabecera .contenedor { display: flex; align-items: center; gap: 1.5rem; min-height: var(--alto-cabecera); padding-block: .6rem; }

.marca { display: inline-flex; align-items: center; gap: .5rem; flex: none; text-decoration: none; color: var(--tinta); font-weight: 800; letter-spacing: -.02em; --marca-acento: var(--marca-verde-oscuro); }
.marca__simbolo { width: 2.8rem; height: 2.8rem; flex: none; }
.cabecera .marca__simbolo { width: 2.5rem; height: 2.5rem; transform: translateY(.15rem); }
.marca__texto { display: grid; gap: .25rem; }
.marca__nombre { font-family: var(--fuente); font-size: 2.35rem; font-weight: 800; line-height: 1; letter-spacing: -.045em; white-space: nowrap; }
.marca__acento { color: var(--marca-acento); }
.marca__descriptor { font-size: .5rem; font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: .15em; }
@media (prefers-color-scheme: dark) { .marca { --marca-acento: var(--marca-verde); } }
.cabecera__cta-movil { display: none; }

.navegacion { display: flex; gap: 1.35rem; margin-left: auto; }
.navegacion a {
  text-decoration: none; color: var(--tinta-suave); font-size: .93rem; font-weight: 600;
  white-space: nowrap; padding-block: .4rem; border-bottom: 2px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.navegacion a:hover { color: var(--tinta); border-bottom-color: var(--acento); }
.cabecera .boton { min-height: 2.6rem; padding: .5rem 1.1rem; font-size: .95rem; }

.menu-boton {
  display: none; margin-left: auto; width: 2.75rem; height: 2.75rem;
  align-items: center; justify-content: center;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio-control);
  color: var(--tinta); cursor: pointer;
}
.menu-boton svg { width: 1.35rem; height: 1.35rem; }

/* --- Portada --------------------------------------------------------------
   La portada es oscura siempre, en los dos temas: es la escena de la empresa.
   El grafo va de fondo, a sangre, y se apaga justo por donde pasa la copy. */
.hero {
  position: relative; overflow: hidden; color: #eaf0f5;
  /* La primera pantalla entera: la portada no se corta a media altura. */
  min-height: max(36rem, calc(100vh - var(--alto-cabecera)));
  min-height: max(36rem, calc(100svh - var(--alto-cabecera)));
  display: grid; align-items: center;
  /* Transición breve: no deja una banda gris borrosa entre secciones. */
  --fundido: 2rem;
  padding-block: clamp(3rem, 7vw, 5.5rem) calc(clamp(3rem, 7vw, 5.5rem) + var(--fundido) / 2);
  background: linear-gradient(158deg, #0f1519 0%, #141c22 46%, #1a242c 100%);
  /* Colores del grafo: son de la portada, no del tema. */
  --grafo-eje: #eaf0f5; --grafo-hoja: #8fa4b4; --grafo-acento: var(--marca-verde); --grafo-papel: #121a20;
}
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 130%;
  background:
    radial-gradient(44rem 30rem at 78% 6%, rgba(54, 184, 117, .22), transparent 62%),
    radial-gradient(36rem 26rem at 14% 96%, rgba(40, 101, 138, .28), transparent 66%),
    radial-gradient(28rem 20rem at 54% 88%, rgba(118, 85, 143, .22), transparent 72%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(85% 80% at 62% 40%, #000 0%, transparent 100%);
  mask-image: radial-gradient(85% 80% at 62% 40%, #000 0%, transparent 100%);
  pointer-events: none;
}
.hero__grafo { position: absolute; inset: 0 max(1.25rem, calc((100% - var(--ancho)) / 2)); z-index: 0; }
.hero__grafo canvas { display: block; width: 100%; height: 100%; }
/* Una transición corta conserva la continuidad sin ocupar media pantalla. */
.hero__fundido {
  position: absolute; inset: auto 0 0 0; height: var(--fundido); z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--papel));
}
/* El contenedor no estorba al grafo; el texto sí recibe el ratón. */
.hero .contenedor { position: relative; z-index: 1; display: block; pointer-events: none; }
.hero__texto { max-width: 39rem; pointer-events: auto; }
.hero__titular { font-size: clamp(2.1rem, 1.1rem + 2.5vw, 3.05rem); letter-spacing: -.045em; }
.hero__titular em { font-style: normal; color: var(--marca-verde); }
.hero .antetitulo { color: var(--marca-verde-claro); }
.hero .entradilla { max-width: 32rem; font-size: 1.06rem; color: #c3d1dc; }
.hero__acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.hero__notas { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin-top: 1.75rem; color: #a9bac7; font-size: .9rem; }
.hero__notas li { display: flex; align-items: center; gap: .5rem; }
.hero__notas .punto { background: #57c48d; }
.hero .boton--secundario { background: transparent; color: #eaf0f5; border-color: #46545f; }
.hero .boton--secundario:hover { border-color: var(--marca-verde); color: var(--marca-verde-claro); }
.hero .boton--principal { box-shadow: 0 8px 24px rgba(54, 184, 117, .28); }

/* --- Servicios ----------------------------------------------------------- */
.rejilla-servicios { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.servicio {
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 1.65rem;
  display: flex; flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.servicio:hover { transform: translateY(-3px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }
.servicio h3 { font-size: 1.22rem; }
.servicio__resumen { margin: .7rem 0 1.1rem; color: var(--tinta-suave); }
.servicio .lista-marcada li { font-size: .95rem; }
.servicio__entrega { margin-top: auto; padding-top: 1.25rem; color: var(--tinta-suave); font-size: .95rem; }
.servicio__entrega strong { color: var(--tinta); }
.servicio .enlace-accion { margin-top: 1rem; }

/* --- Ejemplos reales, no maquetas de producto ----------------------------- */
.rejilla-ejemplos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.ejemplo { min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--papel); overflow: hidden; }
.ejemplo__texto, .ejemplo__pie { padding: 1.5rem; }
.ejemplo__texto > p:not(.antetitulo) { color: var(--tinta-suave); margin-top: .7rem; font-size: .97rem; }
.ejemplo__texto .antetitulo { font-size: .72rem; }
.ejemplo h3 { font-size: 1.3rem; }
.ejemplo__pasos { display: flex; gap: .65rem; margin: 1.1rem 0 0; padding: 0; list-style: none; color: var(--tinta-suave); font-size: .79rem; }
.ejemplo__pasos li { flex: 1; border-top: 2px solid var(--borde-fuerte); padding-top: .45rem; }
.ejemplo__pasos li:last-child { border-color: var(--acento); color: var(--tinta); font-weight: 650; }
.ejemplo__imagenes { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .8rem; background: var(--fondo-alt); padding: 1rem 1.5rem; margin-top: auto; }
.ejemplo__figura { margin: 0; min-width: 0; }
.ejemplo__figura a { display: block; border: 1px solid var(--borde); border-radius: .45rem; overflow: hidden; background: #fff; }
.ejemplo__figura img { width: 100%; height: 23rem; object-fit: cover; object-position: top; }
.ejemplo__figura--informe img { object-position: center 60%; }
.ejemplo__figura figcaption { color: var(--tinta-suave); font-size: .78rem; margin-top: .5rem; }
.ejemplo__pie { padding-top: 1rem; }
.ejemplo__pie p { color: var(--tinta-suave); font-size: .8rem; margin-bottom: .8rem; }
.ejemplo__pie a { font-size: .9rem; }

/* --- Método -------------------------------------------------------------- */
.recorrido { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.recorrido::before {
  content: ""; position: absolute; left: 0; right: 0; top: 1.05rem; height: 2px;
  background: linear-gradient(90deg, var(--acento), var(--borde) 85%); opacity: .35;
}
.paso { position: relative; padding-top: 3rem; }
.paso__marca {
  position: absolute; top: 0; left: 0;
  width: 2.15rem; height: 2.15rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--papel); border: 2px solid var(--acento); color: var(--acento-oscuro);
  font-weight: 800; font-size: .9rem;
}
.paso h3 { font-size: 1.05rem; }
.paso p { margin-top: .5rem; color: var(--tinta-suave); font-size: .93rem; }

.compromisos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: clamp(2.5rem, 5vw, 4rem); }
.compromiso { border-left: 3px solid var(--acento); padding-left: 1.25rem; }
.compromiso h3 { font-size: 1.12rem; letter-spacing: -.02em; }
.compromiso p { margin-top: .4rem; color: var(--tinta-suave); font-size: .93rem; }

/* --- Producto ------------------------------------------------------------ */
.rejilla-apps { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; }
.app-chip {
  display: flex; align-items: center; gap: .85rem;
  background: var(--papel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: .9rem 1.1rem;
  height: 100%; color: var(--tinta); text-decoration: none;
}
.app-chip:hover { border-color: var(--marca); }
.app-chip__flecha { margin-left: auto; }
.app-chip::before { content: ""; width: .35rem; align-self: stretch; border-radius: 999px; background: var(--marca); flex: none; }
.app-chip img { width: 2.5rem; height: 2.5rem; border-radius: .7rem; flex: none; }
.app-chip b { display: block; font-size: 1.02rem; }
.app-chip span { color: var(--tinta-suave); font-size: .92rem; }

.producto__nota { margin-top: 1.4rem; color: var(--tinta-suave); max-width: 52rem; }
.producto__nota b { color: var(--tinta); }
.canales-linea {
  margin-top: 1.25rem; padding: 1.15rem 1.3rem;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio);
  color: var(--tinta-suave); font-size: .96rem;
  display: grid; gap: .7rem;
}
.canales-linea__etiqueta { font-size: .74rem; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-suave); }
.canales-linea__medios { display: flex; flex-wrap: wrap; gap: .6rem; }
.canales-linea__medios li {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--fondo-alt); border-radius: var(--radio-pildora);
  padding: .35rem .85rem .35rem .4rem; font-weight: 700; color: var(--tinta);
}
.medio__icono {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--papel); color: var(--acento-oscuro);
}
.medio__icono svg { width: 1.05rem; height: 1.05rem; }
.canales-linea__texto { max-width: 52rem; }
.canales-linea strong { color: var(--tinta); }

/* --- El manual es una puerta, no otra portada dentro de la portada -------- */
.documentacion { padding-block: 2rem; border-block: 1px solid var(--borde); }
.documentacion__interior { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.documentacion h2 { font-size: 1.25rem; }
.documentacion p:not(.antetitulo) { margin-top: .6rem; max-width: 43rem; color: var(--tinta-suave); font-size: .95rem; }
.documentacion .boton { flex-shrink: 0; }

/* --- Contacto técnico directo, sin inventar una biografía ----------------- */
.perfil { display: grid; grid-template-columns: 1fr 1.5fr; gap: 3rem; align-items: center; }
.perfil__identidad { border-left: 3px solid var(--acento); padding-left: 1.5rem; }
.perfil__identidad h2 { font-size: 2rem; }
.perfil__identidad > p:not(.antetitulo) { margin-top: .6rem; color: var(--tinta-suave); }
.perfil__colegiacion { font-size: .88rem; line-height: 1.5; }
.perfil__texto { color: var(--tinta-suave); max-width: 40rem; }
.perfil__compromiso { margin-top: 1rem; color: var(--tinta); font-weight: 650; }

/* --- Confianza ----------------------------------------------------------- */
.rejilla-confianza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; align-items: start; }
.confianza { border-top: 2px solid var(--acento); padding-top: 1rem; }
.confianza h3 { font-size: 1rem; }
.confianza p { margin-top: .4rem; color: var(--tinta-suave); font-size: .93rem; }

/* --- Contacto ------------------------------------------------------------ */
.contacto {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  background: var(--papel); border: 1px solid var(--borde); border-radius: calc(var(--radio) * 1.25);
  box-shadow: var(--sombra-alta); padding: clamp(1.75rem, 4vw, 3rem);
}
.contacto__acciones { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
.contacto__alternativa { color: var(--tinta-suave); font-size: .92rem; max-width: 22rem; }
.contacto__datos { display: grid; gap: .9rem; }
.contacto__datos div { display: grid; gap: .15rem; padding-bottom: .9rem; border-bottom: 1px solid var(--borde); }
.contacto__datos dt { font-size: .74rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-suave); }
.contacto__datos dd { margin: 0; font-weight: 600; }
.contacto__datos div:last-child { border-bottom: 0; padding-bottom: 0; }
.contacto__preguntas { margin-top: 2rem; max-width: 52rem; }
.contacto__preguntas h3 { font-size: 1.15rem; margin-bottom: .75rem; }
.contacto__preguntas details { border-bottom: 1px solid var(--borde); padding: 1rem 0; }
.contacto__preguntas summary { cursor: pointer; font-weight: 650; }
.contacto__preguntas summary:focus-visible { outline: 2px solid var(--acento); outline-offset: 5px; }
.contacto__preguntas p { color: var(--tinta-suave); margin: .75rem 0 0; }

/* Más profundidad en las superficies del tema claro. */
@media (prefers-color-scheme: light) {
  .ejemplo { box-shadow: var(--sombra); }
  .contacto { background: #edf7f1; border-color: #bdd8c8; }
}

/* --- Pie ----------------------------------------------------------------- */
.pie { background: var(--tinta); color: rgba(238, 241, 244, .72); margin-top: 1rem; }
@media (prefers-color-scheme: dark) { .pie { background: #0b1014; } }
.pie a { text-decoration: none; color: inherit; }
.pie a:hover { color: #fff; }
.pie__rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem; padding-block: 3rem 2rem; }
.pie h3 { color: #fff; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 1rem; }
.pie li + li { margin-top: .5rem; }
.pie__marca { display: flex; align-items: center; gap: .5rem; color: #fff; font-weight: 800; letter-spacing: -.02em; margin-bottom: .9rem; --marca-acento: var(--marca-verde); }
.pie__sector { font-size: .88rem; margin-top: 1rem; }
.pie__abajo {
  display: grid; grid-template-columns: 1fr auto; gap: .4rem 2rem; align-items: baseline;
  border-top: 1px solid rgba(255, 255, 255, .12); padding-block: 1.35rem 2rem; font-size: .84rem;
}
.pie__abajo span:last-child { grid-column: 1 / -1; opacity: .85; }

/* --- Adaptaciones -------------------------------------------------------- */
@media (max-width: 1080px) {
  .rejilla-confianza, .compromisos { grid-template-columns: repeat(2, 1fr); }
  .recorrido { grid-template-columns: repeat(2, 1fr); }
  .recorrido::before { display: none; }
}

@media (max-width: 900px) {
  .hero__texto { max-width: 34rem; }
  .hero__grafo { inset-inline: 0; }
  .hero__grafo canvas { opacity: .22; }
  .navegacion, .cabecera .boton { display: none; }
  .menu-boton { display: inline-flex; }
  .cabecera.abierta { border-bottom-color: var(--borde); }
  .cabecera.abierta .navegacion {
    display: grid; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--papel); border-bottom: 1px solid var(--borde);
    padding: 1rem 1.25rem 1.5rem; gap: .35rem; box-shadow: var(--sombra-alta);
  }
  .cabecera.abierta .navegacion a { padding-block: .8rem; border-bottom: 1px solid var(--borde); }
  .cabecera.abierta .cabecera__cta-movil { display: block; }
  .rejilla-apps { grid-template-columns: 1fr; }
  .contacto { grid-template-columns: 1fr; }
  .perfil { gap: 1.5rem; grid-template-columns: 1fr; }
  .documentacion__interior { align-items: flex-start; flex-direction: column; gap: 1rem; }
  .pie__rejilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 1rem; }
  .hero__texto { max-width: none; }
  .hero__acciones .boton { width: 100%; }
  br.salto-ancho { display: none; }
  .rejilla-servicios, .rejilla-confianza, .compromisos, .recorrido, .rejilla-ejemplos { grid-template-columns: 1fr; }
  .ejemplo__texto, .ejemplo__pie { padding: 1.2rem; }
  .ejemplo__imagenes { padding: 1rem 1.2rem; }
  .ejemplo__figura img { height: 15rem; }
  .ejemplo__figura--informe img { height: 18rem; }
  .boton { white-space: normal; text-align: center; }
  .recorrido { gap: 1.5rem; }
  .paso { padding: 0 0 0 3.2rem; }
  .compromisos { margin-top: 2rem; gap: 1.2rem; }
  .contacto__datos dd { overflow-wrap: anywhere; }
  .pie__rejilla { grid-template-columns: 1fr; }
  .compromiso { border-left-width: 2px; }
}