/* Ordenatec · plantilla de guía (una por entrada del blog)
   Se carga DESPUÉS de comun.css y no cambia ninguna de sus reglas: solo añade las piezas propias
   de la guía. Mismo sistema: colores, radios, sombras y curvas de comun.css (portada publicada).
   Idea: la guía es un documento, así que es PAPEL sobre la noche. Lo esencial va «subrayado» como
   el pliego de la escena Comprender de la portada: un trazo de rotulador azul bajo la frase clave de la
   respuesta corta y ámbar en el aviso. Un solo momento orquestado: al cargar sube el titular y la hoja se posa. */

/* Cabecera fija sobre el papel (≥ 1024 px): opaca y con un filo corto. El degradado largo de la portada
   está pensado para pasar sobre la noche; sobre la hoja dejaba una banda gris con el texto debajo (y con
   0,97 aún se transparentaba el papel). Sobre la noche se ve igual que en la portada.
   Solo en la guía: Contacto y Guías conservan la cabecera idéntica a la portada. */
@media (min-width: 1024px) {
  .cabecera { background: var(--noche); }
  .cabecera::after { height: 10px; background: linear-gradient(to bottom, rgba(3, 11, 26, .35), rgba(3, 11, 26, 0)); }
}

/* Anclas: ni la cabecera fija (escritorio) ni la barra del índice (tableta) tapan el epígrafe.
   En el teléfono la cabecera no es fija y el índice no flota: basta un poco de aire. */
html { scroll-padding-top: 24px; }
@media (min-width: 700px) and (min-height: 560px) { html { scroll-padding-top: 88px; } }
@media (min-width: 1024px) { html { scroll-padding-top: 96px; } }
@media (min-width: 1024px) and (min-height: 560px) { html { scroll-padding-top: 168px; } }
@media (min-width: 1280px) { html { scroll-padding-top: 104px; } }

/* =========================================================
   REJILLA: índice | hoja (≤ 800 px, centrada) | aire
   Por debajo de 1280 px, una columna centrada y el índice pasa a barra desplegable.
   ========================================================= */
.guia-rejilla { padding-left: var(--margen); padding-right: var(--margen); }
.guia-cabeza-texto, .guia-indice, .guia-hoja { max-width: 800px; margin-left: auto; margin-right: auto; }
@media (min-width: 1280px) {
  .guia-rejilla {
    display: grid; column-gap: 48px;
    grid-template-columns: minmax(212px, 1fr) minmax(0, 800px) minmax(0, 1fr);
  }
  .guia-cabeza-texto { grid-column: 2 / 4; max-width: 1000px; margin: 0; }
  .guia-indice { grid-column: 1; justify-self: end; align-self: start; width: 100%; max-width: 248px; margin: 0; }
  .guia-hoja { grid-column: 2; margin: 0; }
}

/* =========================================================
   CABECERA DE LA GUÍA (sobre noche)
   ========================================================= */
.guia-cabeza { position: relative; padding-top: 136px; padding-bottom: clamp(40px, 5vw, 64px); }
@media (max-width: 1023px) { .guia-cabeza { padding-top: 104px; } }
.guia-etiquetas { margin-bottom: 22px; }
.guia-h1 { max-width: 19ch; }
/* segunda línea del H1: el paréntesis, más pequeña y ligera dentro del mismo h1 */
.guia-h1 .guia-h1-sub {
  margin-top: .34em; font-size: .5em; font-weight: 700; font-stretch: 104%;
  letter-spacing: -0.012em; line-height: 1.18; color: var(--suave);
}

/* Entrada (una vez, al cargar): el titular sube por líneas y la hoja se posa desde abajo */
.anima .guia-h1 .ln-in { animation: ln-sube .95s var(--curva-llegada) both; animation-delay: .06s; }
.anima .guia-h1 .guia-h1-sub .ln-in { animation-delay: .16s; }
.anima .guia-etiquetas { animation: revela .6s var(--curva-llegada) both; }
.anima .guia-hoja { animation: guia-hoja-llega 1.15s var(--curva-llegada) .3s both; }
.anima .guia-indice { animation: revela .8s var(--curva-llegada) .7s both; }
@keyframes guia-hoja-llega { from { opacity: 0; transform: translateY(64px); } to { opacity: 1; transform: none; } }
/* Con ancla (#seccion) o al volver atrás (html.sin-entrada, script del head) no hay entrada: el navegador
   calcula el salto con la hoja ya en su sitio y el epígrafe no queda tapado */
.sin-entrada .guia-hoja, .sin-entrada .guia-indice, .sin-entrada .guia-etiquetas, .sin-entrada .guia-h1 .ln-in { animation: none !important; }

/* =========================================================
   ÍNDICE «En esta guía»
   Escritorio (≥ 1280): columna lateral fija (comun.css .indice) con la sección actual resaltada.
   Tableta (700–1279 px y ≥ 560 px de alto), con JS: barra fija arriba que dice qué sección lees y se despliega.
   Teléfono (< 700 px, o apaisado con < 560 px de alto), con JS: la misma barra, quieta encima de la hoja;
   se despliega en su sitio y empuja la hoja. Nada flota sobre el texto mientras se lee (pasada de responsive:
   la barra fija ocupaba 66 px de 753 y el texto asomaba cortado por debajo y por los lados).
   Sin JS: la lista se ve entera encima de la hoja.
   ========================================================= */
.indice-lista { display: grid; gap: 2px; }
.indice-boton { display: none; }
@media (max-width: 1279px) {
  .guia-indice { margin-bottom: 24px; }
  html.js .guia-indice .indice-titulo { display: none; }
  html.js .indice-boton {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; min-height: 56px; padding: 8px 12px 8px 18px; border: 0; border-radius: 14px; cursor: pointer;
    font: inherit; text-align: left; color: var(--blanco);
    background: linear-gradient(165deg, #0C2347 0%, #0A1B38 100%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), var(--sombra-ui);
  }
  html.js .indice-boton:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), var(--sombra-ui); }
  html.js .guia-indice .indice-lista {
    padding: 8px; border-radius: 16px;
    background: radial-gradient(70% 30% at 50% 0%, rgba(23, 184, 246, .08), transparent 72%), var(--superficie);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--sombra-flotante);
  }
}
/* Teléfono: barra quieta y lista desplegable en su sitio (sin superponerse a la hoja) */
@media (max-width: 699px), (max-width: 1279px) and (max-height: 559px) {
  html.js .guia-indice .indice-lista { margin-top: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), var(--sombra-ui); }
  html.js .guia-indice:not(.es-abierto) .indice-lista { display: none; }
  .anima .guia-indice.es-abierto .indice-lista { animation: indice-abre .3s var(--curva-llegada) both; }
  /* sin barra fija no hay «sección actual» que mostrar: solo «En esta guía» */
  html.js .guia-indice .indice-actual { display: none; }
  html.js .guia-indice.con-actual .indice-boton-rotulo { font-size: 16px; font-weight: 700; color: var(--blanco); }
}
@keyframes indice-abre { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* Tableta: barra fija arriba y lista flotante bajo la barra. La barra va dentro de una franja de todo el
   ancho pegada al borde (o a la cabecera fija desde 1024 px): al quedar fija (.es-fija, guia.js) la franja
   se pinta de noche y el texto de la hoja pasa por debajo de un borde recto, sin asomar por encima ni por
   los lados (pasada de responsive: antes flotaba a 10 u 86 px y se veía una línea cortada en el hueco). */
@media (min-width: 700px) and (max-width: 1279px) and (min-height: 560px) {
  html.js .guia-indice {
    position: sticky; top: 0; z-index: 30;
    max-width: none; margin: 0 calc(var(--margen) * -1) 16px; padding: 8px var(--margen);
  }
  html.js .guia-indice .indice-boton { max-width: 800px; margin: 0 auto; }
  html.js .guia-indice.es-fija { background: var(--noche); box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 12px 18px -14px rgba(3, 11, 26, .9); }
  html.js .guia-indice .indice-lista {
    position: absolute; top: calc(100% + 0px);
    left: max(var(--margen), calc((100% - 800px) / 2)); right: max(var(--margen), calc((100% - 800px) / 2));
    max-height: min(68vh, 540px); overflow: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity .22s ease, transform .3s var(--curva-llegada), visibility 0s .3s;
  }
  html.js .guia-indice.es-abierto .indice-lista { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .3s var(--curva-llegada), visibility 0s; }
}
/* desde 1024 px la cabecera es fija (72 px): la franja se pega a ella */
@media (min-width: 1024px) and (max-width: 1279px) and (min-height: 560px) {
  html.js .guia-indice { top: 72px; }
}
.indice-boton-texto { display: grid; min-width: 0; line-height: 1.3; }
.indice-boton-rotulo { font-size: 16px; font-weight: 700; }
/* la sección actual nunca se corta con «…»: si no cabe en una línea, pasa a la segunda */
.indice-actual { font-size: 16px; font-weight: 700; overflow-wrap: break-word; }
.indice-actual:empty { display: none; }
.guia-indice.con-actual .indice-boton-rotulo { font-size: 14px; font-weight: 600; color: var(--tenue); }
.indice-flecha { width: 24px; height: 24px; flex: none; color: var(--aguamarina); transition: transform .3s var(--curva-llegada); }
.guia-indice.es-abierto .indice-flecha { transform: rotate(180deg); }

/* =========================================================
   LA HOJA: texto de lectura en Source Serif 4
   (solo existe el 600: el eje óptico a 36 le da peso de libro; ~66 caracteres por línea)
   ========================================================= */
.guia-hoja .prosa {
  max-width: 31em; margin-left: auto; margin-right: auto;
  font-family: var(--f-serif); font-size: 20px; line-height: 1.6;
  font-variation-settings: 'opsz' 36; color: #293C57;
}
@media (max-width: 600px) { .guia-hoja .prosa { font-size: 19px; } }
.guia-hoja .prosa strong { color: var(--tinta); font-variation-settings: 'opsz' 14; }
.guia-hoja .prosa em { font-style: normal; color: var(--tinta); }
.guia-hoja .prosa h2 {
  margin-top: 0; font-size: clamp(27px, 2.6vw, 34px); line-height: 1.18;
  font-variation-settings: normal; letter-spacing: -0.01em;
}
.guia-hoja .prosa h3 { font-family: var(--f-sans); font-variation-settings: normal; }
.guia-prosa > .guia-seccion { margin-top: 2.6em; }
.guia-seccion > * + * { margin-top: 1em; }
.guia-hoja .prosa li { padding-left: 26px; }
.guia-hoja .prosa ul li::before { top: .7em; }

/* Entradilla: la primera línea del documento */
.guia-hoja .prosa .guia-entradilla { font-size: 23px; line-height: 1.52; color: var(--tinta); font-variation-settings: 'opsz' 30; }
@media (max-width: 600px) { .guia-hoja .prosa .guia-entradilla { font-size: 20px; } }

/* Referencias: superíndice sin corchetes, enlazado a su fuente */
.guia-hoja sup.ref { position: relative; top: -.5em; vertical-align: baseline; font-size: 14px; line-height: 0; }
.guia-hoja .prosa sup.ref a {
  display: inline-block; min-width: 20px; padding: 0 5px; margin-left: 2px; border-radius: 999px;
  font-family: var(--f-sans); font-weight: 750; line-height: 20px; text-align: center; text-decoration: none;
  color: var(--aguamarina-tinta); background: rgba(11, 100, 240, .09);
}
.guia-hoja .prosa sup.ref a:hover { background: rgba(11, 100, 240, .18); }
.guia-hoja .prosa sup.ref a { position: relative; }
.guia-hoja .prosa sup.ref a::after { content: ""; position: absolute; inset: -12px; }

/* Respuesta corta al empezar cada sección: filete azul del Plan IA a la izquierda y la frase clave
   subrayada con el trazo de rotulador del pliego de la portada (solo la franja inferior, como .aviso-marcador).
   En WordPress: estilo de párrafo «Respuesta corta» (.capsula) + resaltado de la primera frase (<mark>). */
.guia-hoja .prosa .capsula { color: var(--tinta); box-shadow: inset 3px 0 0 #4C7DFF; padding-left: 20px; }
.capsula-clave {
  color: inherit; padding: 0 .08em; margin: 0 -.08em;
  background: linear-gradient(to top, rgba(76, 125, 255, .30) 0, rgba(76, 125, 255, .30) .36em, transparent .36em);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* =========================================================
   FICHA «Datos clave»: la tarjeta del anuncio de la portada (blanca, radio 6),
   rodeada una vez por el aro aguamarina del radar cuando llega a pantalla
   ========================================================= */
.guia-prosa > .ficha { margin-top: 1.7em; }
.ficha {
  position: relative; padding: 22px 26px 10px; border-radius: 6px; background: #fff;
  font-family: var(--f-sans); font-variation-settings: normal;
  box-shadow: 0 0 0 1px rgba(11, 27, 51, .07), 0 1px 2px rgba(11, 27, 51, .08), 0 10px 26px -10px rgba(11, 27, 51, .28);
}
.ficha::after {
  content: ""; position: absolute; inset: -1px; border-radius: 7px; pointer-events: none;
  box-shadow: 0 0 0 2px var(--aguamarina), 0 0 24px -4px rgba(23, 184, 246, .55);
  opacity: 0; /* estado final (también con movimiento reducido): la tarjeta con su borde neutro */
}
/* al llegar a pantalla, el aro del radar se posa (0,6 s) y se apaga (1,6 s): «encontrada», una vez */
.anima .ficha.es-vista::after { animation: ficha-aro 2.2s var(--curva-llegada) .3s both; }
@keyframes ficha-aro {
  0% { opacity: 0; transform: scale(1.025); }
  27% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
.guia-hoja .prosa .ficha-titulo {
  display: flex; align-items: center; gap: 10px; margin: 0 0 8px;
  font-family: var(--f-sans); font-size: 17px; font-weight: 800; font-stretch: 106%;
  letter-spacing: -0.005em; line-height: 1.3; color: var(--tinta);
}
.ficha-icono { width: 22px; height: 22px; flex: none; color: var(--aguamarina-tinta); }
.ficha-datos { margin: 0; }
.ficha-fila { display: grid; grid-template-columns: 144px minmax(0, 1fr); gap: 2px 20px; padding: 13px 0; box-shadow: inset 0 1px 0 rgba(11, 27, 51, .08); }
.ficha-fila dt { padding-top: 2px; font-size: 15px; font-weight: 650; line-height: 1.4; color: var(--gris-tinta); }
.ficha-fila dd { margin: 0; font-family: var(--f-serif); font-size: 18px; line-height: 1.42; color: var(--tinta); font-variation-settings: 'opsz' 24; }
@media (max-width: 560px) {
  .ficha { padding: 18px 18px 6px; }
  .ficha-fila { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================
   TABLA (caja desplazable de comun.css) + aviso solo si desborda
   ========================================================= */
.guia-seccion > .tabla-bloque { margin-top: 1.5em; }
/* el título queda fuera de la caja: en móvil no se corta al desplazar la tabla */
.guia-hoja .prosa .tabla-titulo { margin: 0 0 10px; font-family: var(--f-sans); font-variation-settings: normal; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--tinta); }
.guia-hoja .tabla { --tabla-min: 520px; font-family: var(--f-sans); font-variation-settings: normal; }
.guia-hoja .tabla thead th { padding-top: 16px; }
/* la primera columna (tipo de contrato) se queda fija al desplazar la tabla en móvil */
.guia-hoja .tabla tbody th, .guia-hoja .tabla thead th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
/* Nuevo (pasada de responsive): al desplazar la tabla, el texto de las otras columnas entra bajo la fija por un
   borde suave (blanco macizo 5 px y fundido hasta 18 px) y no se ve cortado a media letra («|irecta»,
   «|ustificación»). En reposo no tapa nada: mide lo mismo que el relleno izquierdo (18 px) de la celda de al lado.
   Empieza bajo el filete de cada fila para no cortarlo. */
.guia-hoja .tabla tbody th::after, .guia-hoja .tabla thead th:first-child::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 18px; pointer-events: none;
  background: linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0));
}
.guia-hoja .tabla tbody tr + tr > th::after { top: 1px; }
.guia-hoja .tabla thead th:first-child::after { bottom: 1.5px; }
/* Nuevo (pasada de responsive): en el teléfono, cada columna se puede leer entera. Con la tabla a 520 px y la
   primera columna fija (167 px, «Tipo de contrato» sin partir), junto a ella quedaban 81–174 px (de 320 a 430 px de
   pantalla) para columnas de 173 y 181: «Tramitación» nunca se veía entera, siempre con letras cortadas a un lado o
   al otro. Cuando la caja es más estrecha que esos 520 px, la tabla mide lo que su contenido (sin mínimo) y las
   cabeceras pueden ir en dos líneas: columnas de 128/119/129 px y cada una cabe entera junto a la fija desde 344 px.
   Por debajo de 300 px de caja (pantallas de 320), el relleno lateral de las celdas pasa de 18 a 12 px (y el borde
   suave, con él). En tableta y escritorio la caja mide 520 px o más: no cambia nada. */
.guia-hoja .tabla-caja { container-type: inline-size; }
@container (max-width: 519.98px) {
  .guia-hoja .tabla { --tabla-min: 0px; }
  .guia-hoja .tabla thead th { white-space: normal; }
}
@container (max-width: 299.98px) {
  .guia-hoja .tabla th, .guia-hoja .tabla td { padding-left: 12px; padding-right: 12px; }
  .guia-hoja .tabla tbody th::after, .guia-hoja .tabla thead th:first-child::after { width: 12px; }
}
.tabla-pista:not([hidden]) { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-family: var(--f-sans); font-size: 15px; font-weight: 600; color: var(--gris-tinta); }
.tabla-pista svg { width: 20px; height: 20px; color: var(--aguamarina-tinta); }

/* =========================================================
   AVISO «Cuándo NO conviene presentarse»: el resalte ámbar del pliego
   ========================================================= */
.guia-prosa > .guia-aviso {
  --aviso-x: clamp(18px, 3.4vw, 32px);
  margin-top: 2.8em; margin-left: calc(var(--aviso-x) * -1); margin-right: calc(var(--aviso-x) * -1);
  padding: 30px var(--aviso-x) 32px; border-radius: 12px;
  background: rgba(242, 193, 78, .13); box-shadow: inset 0 0 0 1px rgba(122, 90, 0, .22);
}
.aviso-marcador {
  padding: 0 .12em; margin: 0 -.12em;
  background: linear-gradient(to top, rgba(242, 193, 78, .62) 0, rgba(242, 193, 78, .62) .42em, transparent .42em);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.guia-hoja .prosa .guia-aviso .capsula { box-shadow: none; padding-left: 0; }

/* =========================================================
   PREGUNTAS FRECUENTES (comun.css .preguntas sobre .hoja) y FUENTES
   ========================================================= */
.guia-seccion > .preguntas { margin-top: .9em; }
.guia-hoja .pregunta > summary { font-family: var(--f-sans); font-variation-settings: normal; font-size: 18px; }
.guia-hoja .pregunta-resp { font-size: 19px; }

.guia-hoja .prosa .fuentes-lista { font-family: var(--f-sans); font-variation-settings: normal; font-size: 16px; line-height: 1.5; }
.guia-hoja .prosa .fuentes-lista li { position: relative; min-height: 44px; padding: 10px 8px 10px 34px; margin-left: -8px; border-radius: 8px; }
.guia-hoja .prosa .fuentes-lista a::after { content: ""; position: absolute; inset: 0; border-radius: 8px; }
.guia-hoja .prosa .fuentes-lista li:hover { background: rgba(11, 100, 240, .05); }
.guia-hoja .prosa .fuentes-lista li::before { left: 10px; top: 10px; }
.guia-hoja .prosa .fuentes-lista li + li { margin-top: 4px; }
.fuente-texto { color: var(--gris-tinta); }
.fuentes-lista li:target { background: rgba(11, 100, 240, .08); }

/* =========================================================
   CIERRE, CAJA DEL PLAN Y GUÍAS RELACIONADAS
   ========================================================= */
.guia-plan { padding-top: 0; }
.guia-plan-caja {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 28px 48px;
  padding: clamp(28px, 4.4vw, 60px);
}
.guia-plan-titular { margin-top: 20px; font-size: clamp(32px, 3.4vw, 50px); max-width: 16ch; }
.guia-plan .guia-plan-linea { margin-top: 16px; font-size: 19px; max-width: 34ch; }
.guia-plan .acciones { margin-top: 30px; }
.guia-plan-condiciones { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--suave-t); max-width: 46ch; }
.guia-plan-caja .pildora[data-plan="ia"] { color: #C9D5F2; }
.tarjeta-ia .guia-plan-boton { color: #1B3C9E; }
.guia-boton-oro { background: #E9B949; color: var(--tinta); box-shadow: 0 14px 30px -16px rgba(233, 185, 73, .7); }
.guia-boton-oro:hover { background: #F2C766; }
.guia-plan-caja .guia-plan-motivo { height: 240px; }
@media (min-width: 901px) { .guia-plan-caja { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* Variante Radar (plan_final = radar): la tarjeta clara de la portada; textos y enlaces en tinta */
.guia-plan-caja.tarjeta-radar .guia-plan-titular { color: var(--tinta); }
.guia-plan-caja.tarjeta-radar .pildora[data-plan="radar"] { color: var(--aguamarina-tinta); background: rgba(11, 100, 240, .08); box-shadow: inset 0 0 0 1px rgba(11, 100, 240, .3); }
.guia-plan-caja.tarjeta-radar .pildora[data-plan="radar"]::before { background: var(--aguamarina-tinta); box-shadow: none; }
.guia-plan-caja.tarjeta-radar .enlace-texto { color: var(--tinta); text-decoration-color: rgba(11, 27, 51, .4); }
.guia-plan-caja.tarjeta-radar .enlace-texto:hover { text-decoration-color: var(--aguamarina-tinta); }
.guia-plan-caja .motivo-radar { display: flex; align-items: center; justify-content: center; }
.guia-plan-caja .motivo-radar .mr-panel { position: relative; inset: auto; width: 100%; max-width: 400px; height: 150px; }
/* Variante Presentación (plan_final = presentacion): el sobre con filo de oro, centrado en su mitad */
.guia-plan-caja .motivo-presentacion .mp-sobre { top: 50%; margin-top: -45px; }
.guia-plan-caja .motivo-presentacion .mp-luz { bottom: auto; top: calc(50% + 30px); }
@media (min-width: 901px) { .guia-plan-caja .motivo-presentacion .mp-sobre { zoom: 1.4; } }
@media (max-width: 900px) { .guia-plan-caja .motivo-radar .mr-panel { height: 116px; } }
@media (max-width: 900px) {
  .guia-plan-caja { grid-template-columns: minmax(0, 1fr); }
  .guia-plan-caja .guia-plan-motivo { order: -1; height: 132px; margin: -6px -6px 0; }
}

/* Guías relacionadas: la misma hoja que el índice de guías (guias.html, assets/guias.css):
   cinta del tema, tema, título en serif, resumen y pie con fecha y minutos.
   Toda la hoja es pulsable con el ::after del enlace del título (el nombre del enlace es solo el título). */
.guia-relacionadas .guias-lista { row-gap: 40px; }
.guia-rel-item { display: flex; min-width: 0; }
.guia.guia-rel { width: 100%; gap: 0; min-height: 0; padding: 30px 28px 24px; }
.guia-rel::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: var(--sombra-flotante); opacity: 0; transition: opacity .2s var(--curva-llegada); }
.guia-rel:hover::after, .guia-rel:focus-within::after { opacity: 1; }
.guia-rel:focus-within { transform: translateY(-4px); }
.guia-rel-cinta {
  position: absolute; z-index: 1; top: -10px; left: 28px; width: 34px; height: 24px; border-radius: 2px 2px 0 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 55%), var(--tema, #17B8F6);
  box-shadow: 0 -1px 6px -2px var(--tema-brillo, rgba(23, 184, 246, .8));
}
.guia-rel-cinta::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: rgba(250, 247, 240, .5); }
.guia-rel .guia-rel-meta { margin-top: 0; }
.guia-rel .guia-tema { color: var(--tema-tinta, var(--aguamarina-tinta)); }
.guia-rel .guia-titulo { margin-top: 10px; font-size: 22px; line-height: 1.22; color: var(--tinta); text-wrap: balance; }
.guia-rel-enlace { color: inherit; text-decoration: none; }
.guia-rel-enlace::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 4px; }
.guia-rel-enlace:focus-visible { outline: none; }
.guia-rel-enlace:focus-visible::after { outline: 3px solid var(--aguamarina); outline-offset: 4px; }
.guia-rel:hover .guia-titulo { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
/* resumen entero, como en el índice de guías (sin corte a dos líneas con «…») */
.guia-resumen { margin-top: 12px; font-size: 16px; line-height: 1.5; color: var(--texto-papel); }
.guia-rel-pie { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin-top: auto; padding-top: 22px; font-size: 15px; line-height: 1.3; color: var(--gris-tinta); }
.guia-rel-pie time { white-space: nowrap; }
.guia-rel-min { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.guia-rel-min svg { width: 16px; height: 16px; flex: none; }
.guia.guia-rel { container-type: inline-size; }
@container (max-width: 270px) { .guia-rel-pie { flex-direction: column; align-items: flex-start; gap: 4px; } }
.guia-todas { margin-top: 32px; }

/* Color de cada tema: los mismos valores que el índice de guías (assets/guias.css).
   --tema: marcador y punto · --tema-tinta: el tema como texto sobre papel */
[data-tema="como-se-licita"] { --tema: #17B8F6; --tema-brillo: rgba(23, 184, 246, .8); --tema-tinta: #0B64F0; --tema-fondo: rgba(23, 184, 246, .1); --tema-borde: rgba(23, 184, 246, .38); }
[data-tema="normativa"] { --tema: #6F97FF; --tema-brillo: rgba(111, 151, 255, .85); --tema-tinta: #1B3C9E; --tema-fondo: rgba(76, 125, 255, .16); --tema-borde: rgba(111, 151, 255, .44); }
[data-tema="obras"] { --tema: #E9B949; --tema-brillo: rgba(233, 185, 73, .85); --tema-tinta: #7A5A00; --tema-fondo: rgba(233, 185, 73, .14); --tema-borde: rgba(233, 185, 73, .42); }
[data-tema="servicios"] { --tema: #8A7CFF; --tema-brillo: rgba(138, 124, 255, .9); --tema-tinta: #2C1F7A; --tema-fondo: rgba(138, 124, 255, .16); --tema-borde: rgba(138, 124, 255, .46); }

/* =========================================================
   MOVIMIENTO REDUCIDO, CONTRASTE ALTO E IMPRESIÓN
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .indice-lista, .indice-flecha, html.js .guia-indice .indice-lista, html.js .guia-indice.es-abierto .indice-lista, .guia-rel::after { transition: none; }
  .guia-rel:focus-within { transform: none; }
}
@media (prefers-contrast: more) {
  .capsula-clave { background: none; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
  .guia-hoja .prosa .capsula { box-shadow: inset 3px 0 0 currentColor; }
}
@media print {
  .guia-indice, .cierre, .guia-plan, .guia-relacionadas, .tabla-pista { display: none !important; }
  .guia-rejilla { display: block; }
  .guia-hoja { max-width: none; }
  .ficha::after { display: none; }
}

[data-tema="suministros"] { --tema: #0D8EF2; --tema-tinta: #0B64F0; }