/* =========================================================================
   EFICATIO — Sistema de diseño
   Hacemos que los proyectos crezcan.
   ---------------------------------------------------------------------
   Paleta construida sobre la identidad real de Eficatio (ámbar #F1C045 +
   tinta negra del logotipo). Pautia hereda su propio verde teal real
   (#0B5D53, tomado de mipautia.com) y Melilla su azul marino, tomado del
   mapa de conexiones existente. Una sola familia tipográfica: Manrope.
   ========================================================================= */

/* ------------------------------ Tipografía ------------------------------ */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* -------------------------------- Tokens -------------------------------- */
:root {
  /* Marca */
  --ambar: #f1c045;
  --ambar-claro: #ffd977;
  --ambar-oscuro: #8a6209;   /* 4,9:1 sobre papel: válido para texto pequeño */
  --tinta: #101013;
  --tinta-80: #35353b;
  --tinta-60: #5d5d67;
  --tinta-40: #8a8a93;

  /* Fondos */
  --papel: #fbfaf7;
  --papel-2: #f4f1ea;
  --blanco: #ffffff;
  --borde: #e6e1d6;
  --borde-fuerte: #d5cec0;

  /* Universos */
  --pautia: #0b5d53;
  --pautia-oscuro: #08423b;
  --pautia-suave: #dcefec;
  --pautia-crema: #f6f4ee;
  --melilla: #141c4b;
  --melilla-oscuro: #0c1233;
  --melilla-suave: #e6e9f6;

  /* Escala tipográfica fluida */
  --t-display: clamp(2.75rem, 1.5rem + 6.2vw, 4.5rem);
  --t-h1: clamp(2.35rem, 1.4rem + 4.4vw, 3.4rem);
  --t-h2: clamp(1.85rem, 1.2rem + 2.8vw, 2.5rem);
  --t-h3: clamp(1.3rem, 1.05rem + 1.05vw, 1.6rem);
  --t-h4: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
  --t-lead: clamp(1.08rem, 1rem + 0.55vw, 1.22rem);
  --t-body: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
  --t-small: 0.875rem;
  --t-micro: 0.78rem;

  /* Ritmo */
  --e1: 0.5rem;
  --e2: 0.875rem;
  --e3: 1.25rem;
  --e4: 2rem;
  --e5: 3rem;
  --e6: 3.75rem;
  --e7: clamp(4rem, 2.6rem + 4.4vw, 6rem);

  --ancho: 1200px;
  --ancho-texto: 68ch;
  --radio: 18px;
  --radio-s: 12px;
  --radio-l: 28px;
  --radio-pill: 999px;

  --sombra: 0 1px 2px rgba(16, 16, 19, 0.04), 0 8px 24px rgba(16, 16, 19, 0.06);
  --sombra-alta: 0 2px 8px rgba(16, 16, 19, 0.06), 0 26px 60px rgba(16, 16, 19, 0.13);

  --transicion: 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--t-body);
  font-weight: 450;
  line-height: 1.65;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

h1, h2, h3, h4, h5 {
  margin: 0 0 var(--e3);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); letter-spacing: -0.028em; line-height: 1.15; }
h4 { font-size: var(--t-h4); letter-spacing: -0.02em; line-height: 1.3; }

p { margin: 0 0 var(--e3); max-width: var(--ancho-texto); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }

ul, ol { margin: 0 0 var(--e3); padding-left: 1.2em; }
li { margin-bottom: 0.4em; }

strong, b { font-weight: 700; }

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

:focus-visible {
  outline: 3px solid var(--tinta);
  outline-offset: 3px;
  border-radius: 4px;
}
.seccion--oscura :focus-visible,
.seccion--pautia :focus-visible,
.seccion--melilla :focus-visible { outline-color: var(--ambar); }

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

.saltar {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--tinta);
  color: #fff;
  padding: 0.9rem 1.4rem;
  border-radius: 0 0 var(--radio-s) 0;
  font-weight: 700;
}
.saltar:focus { left: 0; }

.vo {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* -------------------------------- Layout -------------------------------- */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}
@media (min-width: 700px) { .contenedor { width: min(100% - 4rem, var(--ancho)); } }

.seccion { padding-block: var(--e7); position: relative; }
.seccion--compacta { padding-block: var(--e6); }

.seccion--gris { background: var(--papel-2); }
.seccion--oscura { background: var(--tinta); color: #f3f1ec; }
.seccion--oscura h2, .seccion--oscura h3 { color: #fff; }
.seccion--pautia { background: var(--pautia-oscuro); color: #eaf3f1; }
.seccion--melilla { background: var(--melilla); color: #e8ebf7; }

.cabecera-seccion { max-width: 62ch; margin-bottom: var(--e5); }
.cabecera-seccion--centro { margin-inline: auto; text-align: center; }
.cabecera-seccion p { font-size: var(--t-lead); color: var(--tinta-60); }
.seccion--oscura .cabecera-seccion p,
.seccion--pautia .cabecera-seccion p,
.seccion--melilla .cabecera-seccion p { color: rgba(255, 255, 255, 0.72); }
.cabecera-seccion--centro p { margin-inline: auto; }

.lead { font-size: var(--t-lead); line-height: 1.5; color: var(--tinta-80); }
.seccion--oscura .lead, .seccion--pautia .lead, .seccion--melilla .lead { color: rgba(255, 255, 255, 0.78); }

.nota {
  font-size: var(--t-small);
  color: var(--tinta-60);
  line-height: 1.55;
}
.seccion--oscura .nota, .seccion--pautia .nota, .seccion--melilla .nota { color: rgba(255, 255, 255, 0.6); }

/* -------------------------------- Eyebrow ------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-60);
  margin-bottom: var(--e3);
}
.eyebrow::before {
  content: '';
  width: 1.8rem;
  height: 2px;
  background: var(--ambar);
  border-radius: 2px;
}
.seccion--oscura .eyebrow, .seccion--pautia .eyebrow, .seccion--melilla .eyebrow {
  color: rgba(255, 255, 255, 0.62);
}
.seccion--pautia .eyebrow::before { background: #7fd6c6; }

/* -------------------------------- Botones ------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.95rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--radio-pill);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform var(--transicion), background-color var(--transicion),
    color var(--transicion), border-color var(--transicion), box-shadow var(--transicion);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn .flecha { transition: transform var(--transicion); }
.btn:hover .flecha { transform: translateX(3px); }

.btn--primario {
  background: var(--ambar);
  color: var(--tinta);
  box-shadow: 0 6px 18px rgba(241, 192, 69, 0.42);
}
.btn--primario:hover { background: var(--ambar-claro); box-shadow: 0 10px 26px rgba(241, 192, 69, 0.5); }

.btn--tinta { background: var(--tinta); color: #fff; }
.btn--tinta:hover { background: #26262c; }

.btn--linea { border-color: var(--borde-fuerte); color: var(--tinta); background: transparent; }
.btn--linea:hover { border-color: var(--tinta); background: rgba(16, 16, 19, 0.04); }

.btn--linea-clara { border-color: rgba(255, 255, 255, 0.35); color: #fff; background: transparent; }
.btn--linea-clara:hover { border-color: #fff; background: rgba(255, 255, 255, 0.1); }

.btn--pautia { background: #6fd0be; color: var(--pautia-oscuro); }
.btn--pautia:hover { background: #8fe0d0; }

.btn--grande { padding: 1.15rem 2rem; font-size: 1.06rem; }
.btn--bloque { width: 100%; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2);
  align-items: center;
}

/* Enlace-flecha */
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--tinta);
  border-bottom: 2px solid var(--ambar);
  padding-bottom: 2px;
  transition: gap var(--transicion), border-color var(--transicion);
}
.enlace-flecha:hover { gap: 0.75rem; border-color: var(--tinta); }
.seccion--oscura .enlace-flecha, .seccion--pautia .enlace-flecha, .seccion--melilla .enlace-flecha { color: #fff; }
.seccion--oscura .enlace-flecha:hover, .seccion--melilla .enlace-flecha:hover { border-color: #fff; }
.seccion--pautia .enlace-flecha { border-color: #6fd0be; }

/* -------------------------------- Header -------------------------------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 247, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion), background-color var(--transicion);
}
.cabecera[data-scroll='si'] { border-bottom-color: var(--borde); }

.cabecera__interior {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  min-height: 4.5rem;
}

.logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.logo img { height: 30px; width: auto; }
@media (min-width: 700px) { .logo img { height: 34px; } }

.nav { display: none; }
@media (min-width: 1060px) {
  .nav { display: flex; align-items: center; gap: 0.35rem; }
}
.nav a {
  padding: 0.55rem 0.8rem;
  border-radius: var(--radio-pill);
  font-size: 0.95rem;
  font-weight: 650;
  text-decoration: none;
  color: var(--tinta-80);
  transition: color var(--transicion), background-color var(--transicion);
  white-space: nowrap;
}
.nav a:hover { color: var(--tinta); background: rgba(16, 16, 19, 0.05); }
.nav a[aria-current='page'] { color: var(--tinta); font-weight: 800; }

.cabecera__acciones { display: flex; align-items: center; gap: var(--e1); }
.cabecera__acciones .btn { padding: 0.7rem 1.25rem; font-size: 0.94rem; }
@media (max-width: 640px) { .cabecera__cta { display: none; } }

.hamburguesa {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 46px;
  height: 46px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  cursor: pointer;
}
@media (min-width: 1060px) { .hamburguesa { display: none; } }
.hamburguesa span {
  display: block;
  height: 2px;
  background: var(--tinta);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion);
}
.hamburguesa[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburguesa[aria-expanded='true'] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.menu-movil {
  display: none;
  border-top: 1px solid var(--borde);
  background: var(--papel);
  padding-block: var(--e3) var(--e4);
}
.menu-movil[data-abierto='si'] { display: block; }
@media (min-width: 1060px) { .menu-movil { display: none !important; } }
.menu-movil ul { list-style: none; margin: 0 0 var(--e3); padding: 0; }
.menu-movil li { margin: 0; border-bottom: 1px solid var(--borde); }
.menu-movil a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.95rem 0.25rem;
  font-size: 1.15rem;
  font-weight: 750;
  letter-spacing: -0.02em;
  text-decoration: none;
}
.menu-movil a span { color: var(--ambar-oscuro); }

/* --------------------------------- Hero --------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 4.5rem) clamp(3rem, 2rem + 4vw, 4.5rem);
  overflow: hidden;
}
.hero__rejilla {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(16, 16, 19, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 16, 19, 0.045) 1px, transparent 1px);
  background-size: 68px 68px;
  mask-image: radial-gradient(120% 90% at 70% 10%, #000 5%, transparent 70%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 10%, #000 5%, transparent 70%);
}
.hero__mancha {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.34;
  pointer-events: none;
}
.hero__mancha--a { width: 40vw; height: 40vw; max-width: 440px; max-height: 440px; background: var(--ambar); top: -22%; right: -10%; }
.hero__mancha--b { width: 26vw; height: 26vw; max-width: 280px; max-height: 280px; background: #ffe6a3; bottom: -22%; left: -12%; opacity: 0.45; }

.hero__contenido { position: relative; z-index: 1; }

.hero h1 {
  font-size: var(--t-display);
  letter-spacing: -0.045em;
  line-height: 0.94;
  margin-bottom: var(--e4);
  max-width: 15ch;
}
/* Subrayado ámbar dibujado con un fondo, no con un pseudoelemento absoluto:
   así acompaña al texto cuando el titular parte en varias líneas (móvil). */
.hero h1 em {
  font-style: normal;
  background-image: linear-gradient(var(--ambar), var(--ambar));
  background-repeat: no-repeat;
  background-position: 0 86%;
  background-size: 0 0.2em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  animation: subrayar 900ms cubic-bezier(0.22, 0.61, 0.36, 1) 320ms forwards;
}
@keyframes subrayar { to { background-size: 100% 0.2em; } }

.hero__lead {
  font-size: var(--t-lead);
  line-height: 1.5;
  color: var(--tinta-80);
  max-width: 46ch;
  margin-bottom: var(--e4);
}

.hero__disciplinas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
  list-style: none;
  margin: var(--e5) 0 0;
  padding: 0;
}
.hero__disciplinas li {
  margin: 0;
  padding: 0.42rem 0.95rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  font-size: 0.83rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.6);
}

/* Tarjetas "prueba" del hero */
.hero__pruebas {
  display: grid;
  gap: var(--e2);
  margin-top: var(--e5);
  position: relative;
  z-index: 1;
}
@media (min-width: 860px) {
  .hero__pruebas { grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
}
.prueba {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--e3) var(--e3) var(--e3);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  box-shadow: var(--sombra);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.prueba:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }
.prueba__tag {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
}
.prueba strong { font-size: 1.12rem; letter-spacing: -0.025em; line-height: 1.25; }
.prueba span.txt { font-size: 0.92rem; color: var(--tinta-60); line-height: 1.5; }
.prueba--pautia .prueba__tag { color: var(--pautia); }
.prueba--melilla .prueba__tag { color: #3b4bb8; }

/* ------------------------------- Rejillas ------------------------------- */
.rejilla { display: grid; gap: var(--e3); }
.rejilla--2 { grid-template-columns: 1fr; }
.rejilla--3 { grid-template-columns: 1fr; }
.rejilla--4 { grid-template-columns: 1fr; }
@media (min-width: 620px) {
  .rejilla--2 { grid-template-columns: repeat(2, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .rejilla--3 { grid-template-columns: repeat(3, 1fr); }
  .rejilla--4 { grid-template-columns: repeat(4, 1fr); }
  .rejilla { gap: var(--e4); }
}

.dos-columnas {
  display: grid;
  gap: var(--e5);
  /* Por defecto arriba: cuando una columna es mucho más alta que la otra
     (un formulario frente a un párrafo), centrar deja un hueco enorme. */
  align-items: start;
}
.dos-columnas--centrado { align-items: center; }
/* Sin min-width:0 el contenido mínimo (titulares largos, filas de botones)
   desborda el reparto en fr y una columna se come a la otra. */
.dos-columnas > * { min-width: 0; }
/* Los titulares dentro de una columna estrecha necesitan un tope menor
   que el de ancho completo, o se comen cinco líneas. */
.dos-columnas h1 { font-size: clamp(2.3rem, 1.5rem + 2.9vw, 2.95rem); }
.dos-columnas h2 { font-size: clamp(1.8rem, 1.25rem + 2vw, 2.3rem); }
@media (min-width: 960px) {
  .dos-columnas { grid-template-columns: 1fr 1fr; gap: clamp(3rem, 5vw, 5.5rem); }
  .dos-columnas--texto-ancho { grid-template-columns: 1.05fr 0.95fr; }
  .dos-columnas--figura-ancha { grid-template-columns: 0.9fr 1.1fr; }
}

/* ------------------------------- Pilares -------------------------------- */
.pilar { position: relative; padding-top: var(--e3); border-top: 3px solid var(--tinta); }
.pilar h3 { font-size: var(--t-h4); margin-bottom: 0.5rem; }
.pilar p { color: var(--tinta-60); font-size: 0.98rem; margin: 0; }
.seccion--oscura .pilar { border-top-color: var(--ambar); }
.seccion--oscura .pilar p { color: rgba(255, 255, 255, 0.68); }

/* ------------------------------- Tarjetas ------------------------------- */
.tarjeta {
  display: flex;
  flex-direction: column;
  padding: var(--e4);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}
.tarjeta h2,
.tarjeta h3 { font-size: var(--t-h3); margin-bottom: 0.6rem; }
.tarjeta p { color: var(--tinta-60); font-size: 0.98rem; }
.tarjeta__pie { margin-top: auto; padding-top: var(--e3); }
a.tarjeta { text-decoration: none; }
a.tarjeta:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); border-color: var(--borde-fuerte); }

.tarjeta--hueca { background: transparent; }
.seccion--oscura .tarjeta {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.13);
}
.seccion--oscura .tarjeta p { color: rgba(255, 255, 255, 0.68); }
.seccion--melilla .tarjeta {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.seccion--melilla .tarjeta p { color: rgba(255, 255, 255, 0.7); }
.seccion--melilla .tarjeta h3 { color: #fff; }

/* Icono de tarjeta */
.icono {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--ambar);
  color: var(--tinta);
  margin-bottom: var(--e3);
  flex-shrink: 0;
}
.icono svg { width: 22px; height: 22px; }
.seccion--melilla .icono { background: rgba(255, 255, 255, 0.12); color: var(--ambar); }

/* --------------------------- Necesidades (Q&A) -------------------------- */
.necesidades { display: grid; gap: 0; border-top: 1px solid var(--borde); }
.necesidad {
  display: grid;
  gap: 0.4rem var(--e4);
  align-items: baseline;
  padding: var(--e4) 0;
  border-bottom: 1px solid var(--borde);
  text-decoration: none;
  transition: background-color var(--transicion), padding-inline var(--transicion);
}
@media (min-width: 860px) {
  .necesidad { grid-template-columns: 1.15fr 1fr auto; align-items: center; }
  .necesidad:hover { background: var(--blanco); padding-inline: var(--e3); }
}
.necesidad__q {
  font-size: clamp(1.25rem, 1rem + 1vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  margin: 0;
  max-width: none;
}
.necesidad__a { color: var(--tinta-60); font-size: 0.98rem; margin: 0; max-width: none; }
.necesidad__a b { color: var(--tinta); font-weight: 750; }
.necesidad__ir {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--borde-fuerte);
  flex-shrink: 0;
  transition: background-color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.necesidad:hover .necesidad__ir { background: var(--ambar); border-color: var(--ambar); transform: translateX(4px); }
.necesidad--destacada .necesidad__q::after {
  content: 'Servicio propio';
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.6rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radio-pill);
  background: var(--melilla);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------- Servicios ------------------------------ */
.servicio {
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.servicio:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.servicio h3 { margin: 0; font-size: 1.22rem; }
.servicio p { margin: 0; font-size: 0.96rem; color: var(--tinta-60); }
.servicio__beneficio {
  margin-top: auto;
  padding-top: var(--e2);
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--ambar-oscuro);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* --------------------------------- Pasos -------------------------------- */
.pasos { counter-reset: paso; display: grid; gap: var(--e4); }
@media (min-width: 760px) { .pasos--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .pasos--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) { .pasos--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pasos--5 { grid-template-columns: repeat(5, 1fr); } }

.paso { position: relative; padding-top: var(--e3); border-top: 1px solid currentColor; }
.paso__num {
  display: block;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ambar-oscuro);
  margin-bottom: 0.5rem;
}
.seccion--oscura .paso__num, .seccion--melilla .paso__num { color: var(--ambar); }
.paso h3 { font-size: 1.15rem; margin-bottom: 0.4rem; }
.paso p { font-size: 0.94rem; color: var(--tinta-60); margin: 0; }
.seccion--oscura .paso p, .seccion--melilla .paso p { color: rgba(255, 255, 255, 0.68); }
.seccion--oscura .paso, .seccion--melilla .paso { border-top-color: rgba(255, 255, 255, 0.22); }

/* ------------------------------ Cita / claim ---------------------------- */
.claim {
  font-size: clamp(1.7rem, 1.1rem + 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.06;
  max-width: 22ch;
  margin: 0;
  text-wrap: balance;
}
/* Sobre fondo claro el ámbar como texto no llega ni al mínimo de texto grande:
   se usa como subrayado y el énfasis lo pone la tinta. Sobre fondo oscuro sí
   funciona como color de texto. */
.claim span {
  color: var(--tinta);
  background-image: linear-gradient(var(--ambar), var(--ambar));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 100% 0.16em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.seccion--oscura .claim span,
.seccion--ia .claim span,
.seccion--melilla .claim span,
.seccion--pautia .claim span { color: var(--ambar); background-image: none; }
.claim--centro { margin-inline: auto; text-align: center; max-width: 24ch; }

.banda-claim {
  padding-block: var(--e6);
  background: var(--ambar);
  color: rgba(16, 16, 19, 0.72);
}
/* En la banda ámbar el énfasis se hace con la tinta a plena opacidad:
   el blanco sobre #F1C045 no llega al contraste mínimo. */
.banda-claim .claim span { color: var(--tinta); }

/* --------------------------------- Marquee ------------------------------ */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--borde);
  padding-block: var(--e2);
  background: var(--blanco);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__pista {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: desplazar 38s linear infinite;
}
.marquee__pista span {
  font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--tinta-40);
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 3rem;
}
.marquee__pista span::after { content: '·'; color: var(--ambar); }
@keyframes desplazar { to { transform: translateX(-50%); } }
.marquee:hover .marquee__pista { animation-play-state: paused; }

/* --------------------------------- Pautia ------------------------------- */
.seccion--pautia { position: relative; overflow: hidden; }
.seccion--pautia::before {
  content: '';
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 208, 190, 0.28), transparent 65%);
  top: -25%; right: -18%;
  pointer-events: none;
}
.pautia-marca {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: var(--e3);
}
.pautia-marca__icono {
  width: 44px; height: 44px;
  border-radius: 13px;
  background: #fff;
  display: grid;
  place-items: center;
  color: var(--pautia);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.06em;
}
.pautia-marca__nombre { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.04em; color: #fff; }

.etiqueta-propia {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radio-pill);
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: var(--e3);
}
.etiqueta-propia::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ambar);
}

.pautia-lista { list-style: none; padding: 0; margin: var(--e3) 0 var(--e4); }
.pautia-lista li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.65rem;
  color: rgba(255, 255, 255, 0.82);
}
.pautia-lista li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #6fd0be;
}

/* Mockup de móvil — reproduce la interfaz real de Pautia */
.movil {
  width: min(320px, 100%);
  margin-inline: auto;
  background: var(--pautia-crema);
  border: 10px solid #17181b;
  border-radius: 42px;
  box-shadow: var(--sombra-alta);
  overflow: hidden;
  font-size: 14px;
  color: #232323;
}
.movil__barra {
  background: var(--pautia);
  color: #fff;
  padding: 0.9rem 1rem 1rem;
}
.movil__barra .marca { font-weight: 800; letter-spacing: -0.03em; font-size: 1.05rem; }
.movil__barra .dia { font-size: 0.78rem; opacity: 0.82; }
.movil__cuerpo { padding: 0.85rem; display: grid; gap: 0.7rem; }
.franja { background: #fff; border: 1px solid #eae7df; border-radius: 14px; padding: 0.7rem 0.8rem; }
.franja__cab {
  display: flex; align-items: center; gap: 0.45rem;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.franja__cab i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; font-style: normal; }
.franja--m .franja__cab { color: #7a5a00; } .franja--m .franja__cab i { background: #ffd84d; }
.franja--t .franja__cab { color: #8a4413; } .franja--t .franja__cab i { background: #ffa361; }
.franja--n .franja__cab { color: #1f4f9e; } .franja--n .franja__cab i { background: #6d97e0; }
.franja--a .franja__cab { color: #4b2e8c; } .franja--a .franja__cab i { background: #9d84dd; }
.toma { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.3rem 0; }
.toma__check {
  width: 18px; height: 18px; border-radius: 6px;
  border: 2px solid #cfc9bb; flex-shrink: 0; margin-top: 2px;
  display: grid; place-items: center; font-size: 11px; color: #fff;
}
.toma__check--ok { background: var(--pautia); border-color: var(--pautia); }
.toma__txt { line-height: 1.3; }
.toma__txt b { display: block; font-size: 0.86rem; font-weight: 750; }
.toma__txt small { font-size: 0.72rem; color: #5a5a5a; }

/* Tarjetas de captura de Pautia */
.captura {
  background: var(--pautia-crema);
  border-radius: var(--radio);
  padding: var(--e3);
  color: #232323;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.captura h3 { font-size: 0.98rem; margin-bottom: 0.5rem; color: var(--pautia-oscuro); }
.captura p { font-size: 0.86rem; color: #5a5a5a; margin: 0; }
.captura__fase {
  display: flex; justify-content: space-between; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px dashed #e0dbcf;
  font-size: 0.83rem;
}
.captura__fase:last-child { border-bottom: 0; }
.captura__fase b { font-weight: 750; }

/* -------------------------------- Melilla ------------------------------- */
.seccion--melilla { position: relative; overflow: hidden; }
.seccion--melilla::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(90% 70% at 20% 0%, #000, transparent 75%);
  mask-image: radial-gradient(90% 70% at 20% 0%, #000, transparent 75%);
  pointer-events: none;
}
.seccion--melilla > .contenedor { position: relative; z-index: 1; }

.ventaja {
  padding: var(--e4);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.055);
  border: 1px solid rgba(255, 255, 255, 0.13);
}
.ventaja__cifra {
  font-size: clamp(2.4rem, 1.8rem + 2.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ambar);
  display: block;
  margin-bottom: 0.4rem;
}
.ventaja h3 { font-size: 1.06rem; margin-bottom: 0.45rem; color: #fff; }
.ventaja p { font-size: 0.92rem; color: rgba(255, 255, 255, 0.7); margin: 0; }

.aviso {
  display: flex;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-left: 4px solid var(--ambar);
  font-size: 0.95rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.8);
  max-width: 78ch;
}
.aviso--claro {
  background: #fff8e6;
  border-color: #f0e2bb;
  border-left-color: var(--ambar);
  color: var(--tinta-80);
}
.aviso p { margin: 0; max-width: none; }
.aviso strong { color: inherit; }
.aviso--claro strong { color: var(--tinta); }

/* Cadena Ubicación → Personas → …
   En móvil se apila en vertical con flechas hacia abajo; a partir de tablet
   pasa a una sola línea. Así nunca queda una flecha colgando al saltar de
   línea, que es lo que pasa cuando se deja envolver libremente. */
.cadena {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Canalón fijo a la izquierda para la flecha: así las píldoras quedan
   alineadas en vertical en lugar de escalonarse. */
.cadena li { margin: 0; position: relative; padding-left: 1.9rem; }
.cadena li span {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: var(--radio-pill);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 750;
  font-size: 0.92rem;
  white-space: nowrap;
}
.cadena li:not(:first-child)::before {
  content: '↓';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.9rem;
  text-align: center;
  color: var(--ambar);
  font-weight: 800;
  line-height: 1;
}
.cadena li:last-child span { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }

@media (min-width: 760px) {
  .cadena { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 0; }
  .cadena li { padding-left: 0; display: flex; align-items: center; }
  .cadena li:not(:first-child)::before {
    content: '→';
    position: static;
    transform: none;
    width: clamp(1.4rem, 0.6rem + 1.1vw, 2rem);
  }
  .cadena li span {
    font-size: clamp(0.76rem, 0.6rem + 0.4vw, 0.92rem);
    padding-inline: clamp(0.7rem, 0.4rem + 0.6vw, 1rem);
  }
}

/* CTA intercalada dentro de contenido */
.cta-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e4);
  margin-block: var(--e4);
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--borde);
}
.cta-inline p { margin: 0; font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em; }
.seccion--melilla .cta-inline {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.16);
}

/* ------------------------------- Acordeón ------------------------------- */
.acordeon { border-top: 1px solid var(--borde); }
.acordeon details { border-bottom: 1px solid var(--borde); }
.acordeon summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e3);
  padding: var(--e3) 0;
  cursor: pointer;
  list-style: none;
  font-size: 1.1rem;
  font-weight: 750;
  letter-spacing: -0.02em;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
  content: '+';
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  color: var(--ambar-oscuro);
  transition: transform var(--transicion);
  flex-shrink: 0;
}
.acordeon details[open] summary::after { transform: rotate(45deg); }
.acordeon .respuesta { padding-bottom: var(--e3); color: var(--tinta-60); }

/* -------------------------------- Artículos ----------------------------- */
.articulo-card {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--transicion), box-shadow var(--transicion);
}
.articulo-card:hover { transform: translateY(-4px); box-shadow: var(--sombra-alta); }
.articulo-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--papel-2);
}
.articulo-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--transicion); }
.articulo-card:hover .articulo-card__img img { transform: scale(1.04); }
.articulo-card__cuerpo { padding: var(--e3) var(--e3) var(--e4); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.articulo-card h2,
.articulo-card h3 { font-size: 1.15rem; margin: 0; }
.articulo-card p { font-size: 0.93rem; color: var(--tinta-60); margin: 0; }
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-40);
}
.meta .categoria { color: var(--ambar-oscuro); }

/* --------------------------------- Prosa -------------------------------- */
.prosa { max-width: 72ch; }
.prosa h2 { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.1rem); margin-top: var(--e5); }
.prosa h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem); margin-top: var(--e4); }
.prosa p, .prosa li { font-size: 1.06rem; line-height: 1.72; }
.prosa ul { padding-left: 1.1em; }
.prosa li::marker { color: var(--ambar-oscuro); }
.prosa a { color: var(--tinta); text-decoration-color: var(--ambar); text-decoration-thickness: 2px; }
.prosa a:hover { text-decoration-color: var(--tinta); }
.prosa figure { margin: var(--e4) 0; }
.prosa figure img { border-radius: var(--radio); border: 1px solid var(--borde); }
.prosa figcaption { font-size: var(--t-small); color: var(--tinta-60); margin-top: 0.6rem; }

.cabecera-articulo { padding-block: var(--e6) var(--e5); }
.cabecera-articulo h1 { max-width: 20ch; }

.etiquetas { display: flex; flex-wrap: wrap; gap: 0.45rem; list-style: none; padding: 0; margin: var(--e4) 0 0; }
.etiquetas li { margin: 0; }
.etiquetas a {
  display: inline-block;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--tinta-60);
}
.etiquetas a:hover { border-color: var(--tinta); color: var(--tinta); }

/* ------------------------------ Formularios ----------------------------- */
.formulario {
  display: grid;
  gap: var(--e3);
  padding: var(--e4);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-l);
  box-shadow: var(--sombra);
}
@media (min-width: 620px) { .formulario { padding: clamp(2rem, 3vw, 2.75rem); } }
.formulario__fila { display: grid; gap: var(--e3); }
@media (min-width: 620px) { .formulario__fila--2 { grid-template-columns: 1fr 1fr; } }

.campo { display: grid; gap: 0.4rem; }
.campo label { font-size: 0.88rem; font-weight: 750; letter-spacing: -0.01em; }
.campo label .opc { font-weight: 500; color: var(--tinta-40); }
.campo input,
.campo select,
.campo textarea {
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--papel);
  color: var(--tinta);
  width: 100%;
  transition: border-color var(--transicion), box-shadow var(--transicion), background-color var(--transicion);
}
.campo textarea { min-height: 120px; resize: vertical; }
.campo select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23101013' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.6rem; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--tinta);
  background: var(--blanco);
  box-shadow: 0 0 0 4px rgba(241, 192, 69, 0.35);
}
.campo .ayuda { font-size: 0.8rem; color: var(--tinta-60); }

.consentimiento {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.85rem;
  color: var(--tinta-60);
  line-height: 1.5;
}
.consentimiento input { width: 20px; height: 20px; margin-top: 2px; flex-shrink: 0; accent-color: var(--tinta); }
.consentimiento a { color: var(--tinta); }

.miel { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

/* Bloque contacto */
.contacto-datos { display: grid; gap: var(--e3); }
.contacto-datos a { font-weight: 750; }
.dato { display: flex; gap: var(--e2); align-items: flex-start; }
.dato__icono {
  width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 11px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: var(--ambar);
}
.dato__icono svg { width: 18px; height: 18px; }
.dato strong { display: block; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.55); font-weight: 800; }
.dato a, .dato span { color: #fff; text-decoration: none; font-size: 1.02rem; font-weight: 700; }
.dato a:hover { text-decoration: underline; text-decoration-color: var(--ambar); }

/* --------------------------------- Footer ------------------------------- */
.pie {
  background: var(--tinta);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--e6) var(--e4);
  font-size: 0.95rem;
}
.pie__grid {
  display: grid;
  gap: var(--e5);
  padding-bottom: var(--e5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}
@media (min-width: 720px) { .pie__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 1000px) { .pie__grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--e4); } }
.pie img.logo-pie { height: 30px; width: auto; margin-bottom: var(--e3); }
.pie h3 {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: var(--e3);
}
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin-bottom: 0.6rem; }
.pie a { text-decoration: none; color: rgba(255, 255, 255, 0.75); transition: color var(--transicion); }
.pie a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--ambar); }
.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e3);
  justify-content: space-between;
  align-items: center;
  padding-top: var(--e4);
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.5);
}
.redes { display: flex; gap: 0.55rem; margin-top: var(--e3); }
.redes a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: background-color var(--transicion), border-color var(--transicion);
}
.redes a:hover { background: var(--ambar); border-color: var(--ambar); color: var(--tinta); }
.redes svg { width: 18px; height: 18px; }

/* ------------------------------- Animaciones ---------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition-delay: var(--retardo, 0ms);
}
[data-reveal].visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .hero h1 em { background-size: 100% 0.2em; }
  .marquee__pista { animation: none; }
}

/* --------------------------------- Utils -------------------------------- */
.centrado { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--e3); }
.mt-4 { margin-top: var(--e4); }
.mt-5 { margin-top: var(--e5); }
.mb-4 { margin-bottom: var(--e4); }
.max-60 { max-width: 60ch; }
.figura-marco {
  border-radius: var(--radio-l);
  overflow: hidden;
  border: 1px solid var(--borde);
  box-shadow: var(--sombra-alta);
  background: var(--blanco);
}
.seccion--melilla .figura-marco { border-color: rgba(255, 255, 255, 0.16); }
.figura-pie { font-size: var(--t-small); color: var(--tinta-60); margin-top: 0.75rem; }
.seccion--melilla .figura-pie { color: rgba(255, 255, 255, 0.6); }

@media print {
  .cabecera, .pie, .menu-movil, .hero__mancha, .marquee { display: none !important; }
  body { background: #fff; }
}

/* =========================================================================
   AMPLIACIÓN — capacidades, IA y agentes, sedes, prueba
   -------------------------------------------------------------------------
   Todo se construye con la MISMA paleta: ámbar de marca + tinta + papel.
   No se introduce ningún color nuevo. Para la IA se usa la superficie oscura
   de Eficatio con acentos ámbar: nada de azules, morados ni neones.
   ========================================================================= */

/* Tonos derivados de los que ya había, para superficies y estados */
:root {
  --ambar-tenue: #fdf4de;
  --ambar-borde: #ecd9a2;
  --tinta-superficie: #17171b;
  --tinta-superficie-2: #1f1f25;
}

.acciones--centro { justify-content: center; }

/* -------------------------- Marcas de pendiente ------------------------- */
/* Todo lo que necesita un dato que Eficatio aún no nos ha dado se marca así,
   a la vista, para que no se publique por descuido. */
.pendiente {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.28rem 0.7rem;
  border-radius: var(--radio-pill);
  border: 1px dashed var(--ambar-oscuro);
  background: var(--ambar-tenue);
  color: #7a5a08;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bloque-pendiente {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  padding: var(--e4);
  background: repeating-linear-gradient(-45deg, transparent, transparent 12px, rgba(241, 192, 69, 0.06) 12px, rgba(241, 192, 69, 0.06) 24px);
}
.seccion--oscura .bloque-pendiente,
.seccion--ia .bloque-pendiente { border-color: rgba(255, 255, 255, 0.28); }
.seccion--oscura .pendiente,
.seccion--ia .pendiente { background: rgba(241, 192, 69, 0.12); color: var(--ambar); border-color: rgba(241, 192, 69, 0.5); }

/* ------------------------ Hero: «ahora mismo estamos» -------------------
   Las frases se apilan en la MISMA celda de un grid: así el contenedor mide
   siempre lo que la frase más larga y nunca hay recorte ni salto de altura.
   Sin JS se ve la primera; el JS añade --js y toma el relevo, de modo que no
   hay ningún destello con la lista entera antes de que cargue.
   ----------------------------------------------------------------------- */
.ahora {
  display: grid;
  gap: 0.5rem;
  margin-top: var(--e4);
  padding-top: var(--e3);
  border-top: 1px solid var(--borde);
}
@media (min-width: 680px) {
  .ahora {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0 1rem;
  }
}
.ahora__etiqueta {
  color: var(--tinta-60);
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ahora__lista {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.ahora__lista li {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: clamp(1.05rem, 0.95rem + 0.7vw, 1.45rem);
  font-weight: 750;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: var(--tinta);
  opacity: 0;
  transform: translateY(0.35em);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(0.22, 0.61, 0.36, 1);
  pointer-events: none;
}
.ahora__lista li::before {
  content: '';
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--ambar);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(241, 192, 69, 0.3);
}
/* Estado sin JavaScript: se ve la primera frase, nada más */
.ahora__lista li:first-child { opacity: 1; transform: none; }
/* En cuanto el JS toma el control, manda data-activo */
.ahora__lista--js li:first-child { opacity: 0; transform: translateY(0.35em); }
.ahora__lista--js li[data-activo] { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .ahora__lista li { transition: none; }
}

/* ---------------------------- Áreas de capacidad ------------------------ */
.areas { display: grid; gap: 0; border-top: 1px solid var(--borde); }
.area {
  display: grid;
  gap: var(--e2) var(--e5);
  padding: var(--e5) 0;
  border-bottom: 1px solid var(--borde);
  position: relative;
}
@media (min-width: 900px) {
  .area { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; }
}
.area__indice {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--tinta-40);
}
.area h3 {
  font-size: clamp(1.5rem, 1.15rem + 1.6vw, 1.95rem);
  letter-spacing: -0.035em;
  margin: 0.2rem 0 0.6rem;
}
.area__resumen { color: var(--tinta-60); font-size: 1.02rem; margin: 0; }
.area__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.area__lista li { margin: 0; }
.area__lista span {
  display: inline-block;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  font-size: 0.86rem;
  font-weight: 700;
  background: var(--blanco);
  transition: border-color var(--transicion), background-color var(--transicion), transform var(--transicion);
}
.area:hover .area__lista span { border-color: var(--ambar); }
.area__lista span:hover { background: var(--ambar); border-color: var(--ambar); transform: translateY(-2px); }
.area__cta { margin-top: var(--e3); }

/* ------------------------------- Métricas ------------------------------- */
.metricas {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 860px) { .metricas { grid-template-columns: repeat(4, 1fr); } }
.metrica { border-top: 3px solid var(--ambar); padding-top: var(--e3); }
.metrica strong {
  display: block;
  font-size: clamp(2.2rem, 1.6rem + 2.4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
}
.metrica span { display: block; margin-top: 0.4rem; font-size: 0.92rem; color: var(--tinta-60); }
.seccion--oscura .metrica span, .seccion--ia .metrica span { color: rgba(255, 255, 255, 0.65); }

/* --------------------------------- Citas -------------------------------- */
.cita {
  margin: 0;
  padding: var(--e4) 0 0;
  border-top: 3px solid var(--tinta);
}
.cita blockquote {
  margin: 0 0 var(--e3);
  font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.cita figcaption { font-size: 0.9rem; color: var(--tinta-60); }
.cita figcaption strong { display: block; color: var(--tinta); }

/* --------------------------- Superficie de IA --------------------------- */
/* Misma tinta de marca, un punto más cálida, con el ámbar como único acento. */
.seccion--ia {
  background: var(--tinta-superficie);
  color: #f2f0ea;
  position: relative;
  overflow: hidden;
}
.seccion--ia h2, .seccion--ia h3, .seccion--ia h4 { color: #fff; }
.seccion--ia .eyebrow { color: rgba(255, 255, 255, 0.62); }
.seccion--ia .cabecera-seccion p, .seccion--ia .lead { color: rgba(255, 255, 255, 0.74); }
.seccion--ia .nota { color: rgba(255, 255, 255, 0.55); }
.seccion--ia .tarjeta {
  background: rgba(255, 255, 255, 0.045);
  border-color: rgba(255, 255, 255, 0.12);
}
.seccion--ia .tarjeta p { color: rgba(255, 255, 255, 0.68); }
.seccion--ia .pilar { border-top-color: var(--ambar); }
.seccion--ia .pilar p { color: rgba(255, 255, 255, 0.68); }
.seccion--ia .paso { border-top-color: rgba(255, 255, 255, 0.22); }
.seccion--ia .paso p { color: rgba(255, 255, 255, 0.68); }
.seccion--ia .paso__num { color: var(--ambar); }
.seccion--ia .enlace-flecha { color: #fff; border-color: var(--ambar); }
.seccion--ia .acordeon { border-top-color: rgba(255, 255, 255, 0.16); }
.seccion--ia .acordeon details { border-bottom-color: rgba(255, 255, 255, 0.16); }
.seccion--ia .acordeon summary::after { color: var(--ambar); }
.seccion--ia .acordeon .respuesta { color: rgba(255, 255, 255, 0.7); }
.seccion--ia .cta-inline { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); }
.seccion--ia .aviso { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); border-left-color: var(--ambar); color: rgba(255, 255, 255, 0.8); }

/* Ecuación: trabajo + conocimiento + herramientas + instrucciones = agente */
.ecuacion {
  display: grid;
  gap: var(--e3);
  align-items: stretch;
  counter-reset: pieza;
}
@media (min-width: 780px) { .ecuacion { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ecuacion { grid-template-columns: repeat(4, 1fr) auto; gap: var(--e2); } }

.pieza {
  position: relative;
  padding: var(--e3);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pieza__titulo {
  font-size: 0.95rem;
  margin: 0;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ambar);
  max-width: none;
}
.pieza p { margin: 0; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); }
.pieza ul { margin: 0.2rem 0 0; padding-left: 1.05em; font-size: 0.85rem; color: rgba(255, 255, 255, 0.62); }
.pieza li { margin-bottom: 0.15rem; }
/* El signo + entre piezas: solo decorativo, se oculta a lectores de pantalla */
.pieza:not(:first-child)::before {
  content: '+';
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ambar);
  line-height: 1;
}
@media (min-width: 1080px) {
  .pieza:not(:first-child)::before { top: 50%; left: -0.95rem; transform: translateY(-50%); }
}
.resultado-agente {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  padding: var(--e3) var(--e4);
  border-radius: var(--radio);
  background: var(--ambar);
  color: var(--tinta);
  text-align: center;
  position: relative;
}
.resultado-agente strong { font-size: 1.15rem; letter-spacing: -0.03em; line-height: 1.2; }
.resultado-agente span { font-size: 0.82rem; font-weight: 650; opacity: 0.78; }
.resultado-agente::before {
  content: '=';
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ambar);
  line-height: 1;
}
@media (min-width: 1080px) {
  .resultado-agente { min-width: 190px; }
  .resultado-agente::before { top: 50%; left: -0.95rem; transform: translateY(-50%); }
}

/* Flujo: entradas → agente → salida */
.flujo {
  display: grid;
  gap: var(--e3);
  align-items: center;
  margin: 0;
}
@media (min-width: 900px) { .flujo { grid-template-columns: 1fr auto 1fr auto 1fr; gap: var(--e2); } }
.flujo__grupo {
  display: grid;
  gap: 0.5rem;
  padding: var(--e3);
  border-radius: var(--radio);
  border: 1px dashed rgba(255, 255, 255, 0.24);
}
.flujo__grupo span {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.82);
}
.flujo__grupo span::before {
  content: '';
  width: 16px; height: 20px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 2px;
  flex-shrink: 0;
}
.flujo__nucleo {
  padding: var(--e4) var(--e3);
  border-radius: var(--radio);
  background: var(--ambar);
  color: var(--tinta);
  text-align: center;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.1rem;
}
.flujo__salida {
  padding: var(--e3);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.flujo__salida strong { display: block; font-size: 1.02rem; }
.flujo__salida span { font-size: 0.85rem; color: rgba(255, 255, 255, 0.65); }
.flujo__flecha {
  display: grid;
  place-items: center;
  color: var(--ambar);
  font-size: 1.5rem;
  font-weight: 800;
}
@media (max-width: 899px) { .flujo__flecha { transform: rotate(90deg); } }

/* Qué puede hacer un agente */
.verbos { display: grid; gap: var(--e3); }
@media (min-width: 620px) { .verbos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verbos { grid-template-columns: repeat(4, 1fr); } }
.verbo {
  padding: var(--e3);
  border-radius: var(--radio);
  border: 1px solid rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color var(--transicion), transform var(--transicion), background-color var(--transicion);
}
.verbo:hover { transform: translateY(-3px); border-color: var(--ambar); background: rgba(241, 192, 69, 0.07); }
.verbo h3 {
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ambar);
  margin: 0 0 0.4rem;
}
.verbo p { margin: 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.72); }

/* Tabla no es / sí es */
.contraste { display: grid; gap: var(--e3); }
@media (min-width: 780px) { .contraste { grid-template-columns: 1fr 1fr; gap: var(--e4); } }
.contraste__col { padding: var(--e4); border-radius: var(--radio); }
.contraste__col--no { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); }
.contraste__col--si { background: rgba(241, 192, 69, 0.1); border: 1px solid rgba(241, 192, 69, 0.4); }
.contraste__col h3 { font-size: 1.15rem; margin-bottom: var(--e3); }
.contraste__col ul { list-style: none; padding: 0; margin: 0; }
.contraste__col li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.65rem;
  font-size: 0.96rem;
  color: rgba(255, 255, 255, 0.78);
}
.contraste__col--no li::before { content: '×'; position: absolute; left: 0; top: -0.05em; font-size: 1.15rem; color: rgba(255, 255, 255, 0.45); }
.contraste__col--si li::before { content: '✓'; position: absolute; left: 0; color: var(--ambar); font-weight: 800; }

/* ------------------------------- Sedes ---------------------------------- */
.sedes { display: grid; gap: var(--e4); }
@media (min-width: 720px) { .sedes { grid-template-columns: repeat(2, 1fr); } }
.sede {
  padding: var(--e4);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--blanco);
}
.sede__ciudad {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin-bottom: var(--e2);
}
.sede__ciudad h3 { margin: 0; font-size: 1.5rem; }
.sede__rol {
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar-oscuro);
}
.sede p { font-size: 0.98rem; color: var(--tinta-60); }

.pie__sedes { margin-bottom: var(--e3) !important; }
.pie__sedes li { margin-bottom: 0.75rem; }
.pie__sedes strong { display: block; color: #fff; font-weight: 750; }
.pie__sedes span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.6); }

/* --------------------------- Banda de cierre ---------------------------- */
.cierre-pie {
  background: var(--papel-2);
  border-top: 1px solid var(--borde);
  padding-block: var(--e7);
  text-align: center;
}
.cierre-pie .eyebrow { justify-content: center; }
.cierre-pie .claim { margin-inline: auto; }

/* ------------------------- Banda editorial con foto --------------------- */
.editorial { position: relative; }
.editorial__figura {
  position: relative;
  border-radius: var(--radio-l);
  overflow: hidden;
  background: var(--papel-2);
  aspect-ratio: 4 / 3;
}
.editorial__figura img { width: 100%; height: 100%; object-fit: cover; }
.editorial__figura--vacia {
  display: grid;
  place-items: center;
  border: 1px dashed var(--borde-fuerte);
  background: repeating-linear-gradient(-45deg, transparent, transparent 14px, rgba(241, 192, 69, 0.07) 14px, rgba(241, 192, 69, 0.07) 28px);
  padding: var(--e4);
  text-align: center;
}
.editorial__figura--vacia p { font-size: 0.9rem; color: var(--tinta-60); max-width: 34ch; margin: 0.75rem auto 0; }

/* ----------------------- Selector de intención ------------------------- */
.intenciones { display: grid; gap: 0.6rem; }
@media (min-width: 700px) { .intenciones { grid-template-columns: repeat(2, 1fr); } }
.intencion { position: relative; }
.intencion input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}
.intencion span {
  display: block;
  padding: 0.85rem 1.05rem;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  font-size: 0.95rem;
  font-weight: 700;
  background: var(--papel);
  transition: border-color var(--transicion), background-color var(--transicion);
}
.intencion input:hover + span { border-color: var(--tinta-40); }
.intencion input:checked + span { border-color: var(--tinta); background: var(--ambar); }
.intencion input:focus-visible + span { outline: 3px solid var(--tinta); outline-offset: 3px; }

/* Pasos en seis: dos filas de tres en escritorio */
@media (min-width: 700px) { .pasos--6 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pasos--6 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1240px) { .pasos--6 { grid-template-columns: repeat(6, 1fr); gap: var(--e3); } }
@media (min-width: 1240px) { .pasos--6 .paso h3 { font-size: 1.05rem; } }

/* Tarjeta de prueba del hero, variante IA */
.prueba--ia .prueba__tag { color: var(--tinta-80); }

/* ------------------------------- Migas ---------------------------------- */
.miga {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--t-small);
  color: var(--tinta-60);
}
.miga a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.miga a:hover { border-bottom-color: currentColor; }
.miga span[aria-current] { color: var(--tinta); font-weight: 700; }
.seccion--ia .miga, .seccion--oscura .miga, .seccion--melilla .miga { color: rgba(255, 255, 255, 0.6); }
.seccion--ia .miga span[aria-current],
.seccion--oscura .miga span[aria-current],
.seccion--melilla .miga span[aria-current] { color: #fff; }

/* La cadena nació sobre fondo oscuro; sobre papel necesita sus propios tonos */
.seccion--gris .cadena li span,
.seccion:not(.seccion--oscura):not(.seccion--melilla):not(.seccion--ia):not(.seccion--pautia) .cadena li span {
  background: var(--blanco);
  border-color: var(--borde-fuerte);
  color: var(--tinta);
}
.seccion--gris .cadena li:last-child span,
.seccion:not(.seccion--oscura):not(.seccion--melilla):not(.seccion--ia):not(.seccion--pautia) .cadena li:last-child span {
  background: var(--ambar);
  border-color: var(--ambar);
}
.seccion--gris .cadena li:not(:first-child)::before { color: var(--ambar-oscuro); }
.seccion--pautia .cadena li span { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.22); }
.seccion--pautia .cadena li:not(:first-child)::before { color: #8fe0d0; }
.seccion--pautia .cadena li:last-child span { background: #6fd0be; color: var(--pautia-oscuro); border-color: #6fd0be; }

/* La etiqueta de la necesidad destacada, sobre el nuevo mapa de secciones */
.necesidad--destacada .necesidad__q::after { content: 'Línea propia'; }

/* Legend del selector de intención: se comporta como una etiqueta normal */
.formulario legend { display: block; }

/* La navegación creció a seis elementos y el CTA es más largo: el salto a
   escritorio se retrasa para que no se amontonen. */
@media (min-width: 1060px) and (max-width: 1179px) { .nav { display: none; } }
@media (min-width: 1060px) and (max-width: 1179px) { .hamburguesa { display: inline-flex; } }
@media (min-width: 1180px) { .menu-movil { display: none !important; } }
@media (min-width: 1180px) and (max-width: 1319px) {
  .nav a { padding-inline: 0.55rem; font-size: 0.9rem; }
  .cabecera__acciones .btn { font-size: 0.88rem; padding-inline: 1rem; }
}

/* ------------------------ Sedes: dirección y listas --------------------- */
.sede__dir {
  font-size: 0.95rem;
  font-weight: 750;
  color: var(--ambar-oscuro);
  margin-bottom: 0.6rem !important;
}
@media (min-width: 1040px) { .sedes { grid-template-columns: repeat(4, 1fr); } }

/* Lista compacta de sedes (home y contacto) */
.sedes-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
@media (min-width: 520px) { .sedes-lista { grid-template-columns: repeat(2, 1fr); } }
.sedes-lista li {
  margin: 0;
  padding-left: 1rem;
  border-left: 3px solid var(--ambar);
  line-height: 1.35;
}
.sedes-lista strong { display: block; font-size: 1.05rem; letter-spacing: -0.02em; }
.sedes-lista span { font-size: 0.88rem; color: var(--tinta-60); }
.seccion--oscura .sedes-lista span,
.seccion--ia .sedes-lista span,
.seccion--melilla .sedes-lista span { color: rgba(255, 255, 255, 0.62); }
.seccion--oscura .sedes-lista strong,
.seccion--ia .sedes-lista strong,
.seccion--melilla .sedes-lista strong { color: #fff; }

/* Dentro del bloque de datos de contacto va más apretada */
.sedes-lista--pie { gap: 0.55rem; margin-top: 0.35rem; }
.sedes-lista--pie li { border-left-width: 2px; padding-left: 0.7rem; }
.sedes-lista--pie strong { font-size: 0.95rem; font-weight: 700; }
.sedes-lista--pie span { font-size: 0.82rem; }

/* Cuatro sedes en el pie: dos columnas para que no se estire la columna */
@media (min-width: 500px) { .pie__sedes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem 1rem; } }
@media (min-width: 1000px) { .pie__sedes { grid-template-columns: 1fr; gap: 0.6rem; } }
.pie__sedes li { margin-bottom: 0; }

/* =========================================================================
   CORRECCIÓN — legibilidad del formulario sobre secciones oscuras
   -------------------------------------------------------------------------
   La tarjeta del formulario es blanca, pero vive dentro de secciones que
   fijan un color de texto claro (oscura, melilla, ia). Todo lo que no tenía
   color propio —etiquetas, leyendas, opciones— heredaba el claro y quedaba
   casi invisible. La tarjeta pasa a establecer su propio contexto de color.
   ========================================================================= */
.formulario { color: var(--tinta); }
.formulario label,
.formulario legend,
.formulario .intencion span { color: var(--tinta); }
.formulario .campo label .opc { color: var(--tinta-40); }
.formulario .ayuda,
.formulario .consentimiento { color: var(--tinta-60); }
.formulario .consentimiento a,
.formulario legend a { color: var(--tinta); }
.formulario .nota { color: var(--tinta-60); }
.formulario input,
.formulario select,
.formulario textarea { color: var(--tinta); }
.formulario ::placeholder { color: var(--tinta-40); opacity: 1; }
/* El foco del teclado también se recalibra: dentro de la tarjeta el contorno
   claro de las secciones oscuras no se vería. */
.seccion--oscura .formulario :focus-visible,
.seccion--melilla .formulario :focus-visible,
.seccion--ia .formulario :focus-visible { outline-color: var(--tinta); }

/* ------------------- Envío alternativo (sin backend) -------------------- */
.envio-alt {
  display: none;
  margin-top: var(--e3);
  padding: var(--e3);
  border: 1px solid var(--ambar-borde);
  border-radius: var(--radio-s);
  background: var(--ambar-tenue);
  color: var(--tinta);
}
.envio-alt[data-visible] { display: block; }
.envio-alt p { font-size: 0.9rem; color: var(--tinta-80); margin-bottom: var(--e2); }
.envio-alt textarea {
  width: 100%;
  min-height: 130px;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.5;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-s);
  background: var(--blanco);
  color: var(--tinta);
  resize: vertical;
}
.envio-alt__acciones { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: var(--e2); }
.envio-alt__acciones .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }

/* ============================== Mapa de sedes =========================== */
.mapa { margin: 0; }
.mapa__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-l);
  border: 1px solid var(--borde);
  background: #f7f9fe;
}
.mapa__pie {
  font-size: var(--t-small);
  color: var(--tinta-60);
  margin-top: 0.85rem;
  text-align: center;
}
.seccion--oscura .mapa__pie,
.seccion--ia .mapa__pie,
.seccion--melilla .mapa__pie { color: rgba(255, 255, 255, 0.6); }

/* ==================== Diagrama: del desorden al orden ==================== */
.diagrama-ia { margin: 0; }
.diagrama-ia svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radio-l);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.13);
  padding: var(--e3);
  box-sizing: border-box;
}
.diagrama-ia__docs rect {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5;
}
.diagrama-ia__embudo {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
  stroke-dasharray: 4 5;
}
.diagrama-ia__nucleo { fill: var(--ambar); }
.diagrama-ia__flecha { fill: none; stroke: var(--ambar); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.diagrama-ia__orden rect { fill: rgba(255, 255, 255, 0.07); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.diagrama-ia__orden rect.barra { fill: var(--ambar); stroke: none; }
.diagrama-ia__orden line { stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; stroke-linecap: round; }

/* Sobre fondo claro, la misma figura con la tinta invertida */
.seccion:not(.seccion--ia):not(.seccion--oscura):not(.seccion--melilla) .diagrama-ia svg {
  background: var(--blanco);
  border-color: var(--borde);
}
.seccion:not(.seccion--ia):not(.seccion--oscura):not(.seccion--melilla) .diagrama-ia__docs rect { stroke: var(--tinta-40); }
.seccion:not(.seccion--ia):not(.seccion--oscura):not(.seccion--melilla) .diagrama-ia__embudo { stroke: var(--borde-fuerte); }
.seccion:not(.seccion--ia):not(.seccion--oscura):not(.seccion--melilla) .diagrama-ia__orden rect { fill: var(--papel); stroke: var(--borde-fuerte); }
.seccion:not(.seccion--ia):not(.seccion--oscura):not(.seccion--melilla) .diagrama-ia__orden line { stroke: var(--borde-fuerte); }

/* ------------------- Pasos: hilo de proceso entre ellos ----------------- */
.paso { position: relative; }
.paso::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--ambar);
  border: 2px solid var(--papel);
}
.seccion--gris .paso::before { border-color: var(--papel-2); }
.seccion--oscura .paso::before,
.seccion--ia .paso::before { border-color: var(--tinta); }
.seccion--melilla .paso::before { border-color: var(--melilla); }

/* ---------------------- Cronograma semanal de Pautia -------------------- */
.cronograma {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  margin-top: 0.4rem;
}
.cronograma th,
.cronograma td {
  padding: 0.32rem 0.15rem;
  text-align: center;
  border-bottom: 1px solid #e6e1d4;
}
.cronograma thead th {
  font-weight: 800;
  color: #8a8578;
  font-size: 0.66rem;
  letter-spacing: 0.06em;
}
.cronograma tbody th {
  text-align: left;
  font-weight: 700;
  color: #232323;
  white-space: nowrap;
  padding-right: 0.4rem;
}
.cronograma td { color: transparent; }
.cronograma td[data-ok] { color: var(--pautia); font-weight: 800; }
.cronograma tbody tr:last-child th,
.cronograma tbody tr:last-child td { border-bottom: 0; }


/* =========================================================================
   COMUNICACIÓN ACCESIBLE Y DISEÑO CONDUCTUAL
   Mismos colores de siempre. Sin submarca, sin símbolo de discapacidad.
   ========================================================================= */

/* Variante clara de la ecuación que ya usa la página de agentes */
.ecuacion--clara .pieza {
  background: var(--blanco);
  border-color: var(--borde);
}
.ecuacion--clara .pieza__titulo { color: var(--ambar-oscuro); }
.ecuacion--clara .pieza p { color: var(--tinta-60); }
.ecuacion--clara .pieza ul { color: var(--tinta-60); }
.ecuacion--clara .pieza:not(:first-child)::before,
.ecuacion--clara .resultado-agente::before { color: var(--ambar-oscuro); }

/* Escalera: acceder → entender → decidir → actuar */
.escalera { display: grid; gap: var(--e3); counter-reset: peldano; }
@media (min-width: 700px) { .escalera { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .escalera { grid-template-columns: repeat(4, 1fr); gap: var(--e2); } }
.peldano {
  position: relative;
  padding: var(--e4) var(--e3) var(--e3);
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--borde);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.peldano__num {
  position: absolute;
  top: -0.85rem;
  left: var(--e3);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--ambar);
  color: var(--tinta);
  font-size: 0.85rem;
  font-weight: 800;
}
.peldano h3 {
  margin: 0;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.peldano__pregunta { margin: 0; font-weight: 750; color: var(--tinta); font-size: 0.98rem; }
.peldano p:last-child { margin: 0; font-size: 0.94rem; color: var(--tinta-60); }
.seccion--oscura .peldano { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.13); }
.seccion--oscura .peldano h3 { color: #fff; }
.seccion--oscura .peldano__pregunta { color: rgba(255, 255, 255, 0.9); }
.seccion--oscura .peldano p:last-child { color: rgba(255, 255, 255, 0.68); }
/* La flecha entre peldaños, solo cuando van en fila */
@media (min-width: 1080px) {
  .peldano:not(:last-child)::after {
    content: '→';
    position: absolute;
    right: -0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ambar-oscuro);
    font-weight: 800;
    z-index: 1;
  }
  .seccion--oscura .peldano:not(:last-child)::after { color: var(--ambar); }
}

/* Antes / después */
.antes-despues { display: grid; gap: var(--e3); align-items: start; }
@media (min-width: 860px) { .antes-despues { grid-template-columns: 1fr 1fr; gap: var(--e4); } }
.panel {
  padding: var(--e4);
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: var(--blanco);
}
.panel__etiqueta {
  display: inline-block;
  font-size: var(--t-micro);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: var(--e3);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radio-pill);
}
.panel--antes { background: var(--papel-2); }
.panel--antes .panel__etiqueta { background: var(--tinta); color: #fff; }
.panel--despues { border-color: var(--ambar-borde); background: var(--ambar-tenue); }
.panel--despues .panel__etiqueta { background: var(--ambar); color: var(--tinta); }
/* El texto de ejemplo imita un documento, no es copy de la web */
.muestra {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--tinta-80);
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  padding: var(--e3);
}
.panel--antes .muestra { color: var(--tinta-60); }
.muestra p { margin-bottom: 0.7rem; }
.muestra ol { margin: 0.6rem 0 0.9rem; padding-left: 1.3em; }
.muestra li { margin-bottom: 0.35rem; }
.muestra__titulo { font-weight: 800; font-size: 1.05rem; color: var(--tinta); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
.muestra__boton {
  display: inline-block;
  margin-top: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: var(--radio-pill);
  background: var(--tinta);
  color: #fff;
  font-weight: 750;
  font-size: 0.92rem;
}
.panel__diagnostico { margin-top: var(--e3); font-size: 0.9rem; color: var(--tinta-60); }
.panel__diagnostico ul { margin: 0.5rem 0 0; padding-left: 1.1em; }
.panel__diagnostico li { margin-bottom: 0.25rem; }

/* Problemas reconocibles: cita corta con el problema del cliente */
.problema {
  padding: var(--e3) var(--e4);
  border-left: 3px solid var(--ambar);
  background: var(--blanco);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--tinta-80);
}
.problema strong { color: var(--tinta); font-weight: 750; }

/* Objetivo táctil del pie: los enlaces de lista son navegación, no texto
   corrido, así que no les aplica la excepción de los enlaces en línea.
   Con este relleno pasan de 21 px a 27 px de alto pulsable. */
.pie ul a,
.pie__legal a {
  display: inline-block;
  padding-block: 0.2rem;
}
.pie li { margin-bottom: 0.4rem; }