/* Diseño «papel» del sitio público: un cuaderno a la luz de la tarde.
   Lienzo cálido (#f6f5f4) y tarjetas blancas con borde fino, sin sombras;
   un solo azul, el #1D63E6 de la marca, para la acción principal (el bloque
   oscuro es el navy #0E1A2B y el panel claro, el azul claro #5B9BFF); el color va en paneles planos,
   como notas adhesivas. Inter en todo y Source Serif 4 solo para la voz
   editorial (entradillas). Sin degradados.

   Se carga en el sitio público (landing, directorio, blog, referidos,
   cotización y legales), en el acceso (auth/*) y en el acceso del programa
   de referidos; nunca en el panel ni en el back-office. Casi todo se adapta
   reemplazando las variables de aliviado.css; aquí van además los ajustes
   de cada página. La landing suma inicio.css. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); }

:root {
  /* Tokens del sistema */
  --pa-lienzo: #f6f5f4;
  --pa-blanco: #ffffff;
  --pa-tinta: rgba(0, 0, 0, .95);
  --pa-tinta-90: rgba(0, 0, 0, .9);
  --pa-tinta-60: rgba(0, 0, 0, .6);
  --pa-tinta-54: rgba(0, 0, 0, .54);
  --pa-tinta-40: rgba(0, 0, 0, .4);
  --pa-grafito: #615d59;
  --pa-borde: rgba(0, 0, 0, .08);
  --pa-borde-fuerte: rgba(0, 0, 0, .14);
  --pa-celeste: #eaf0fd;
  --pa-durazno: #f6d5b8;
  --pa-marigold: #ffb110;
  --pa-coral: #f64932;
  --pa-azafran: #e89d01;
  --pa-moca: #b18164;
  --pa-azul-senal: #1d63e6;
  --pa-cielo: #5b9bff;
  --pa-noche: #0e1a2b;
  --pa-sombra-maqueta: 0 4px 12px rgba(0, 0, 0, .1);
  --pa-sombra-nav: 0 .7px 1.462px rgba(0, 0, 0, .015), 0 3px 9px rgba(0, 0, 0, .03);
  --pa-resorte: cubic-bezier(.34, 1.56, .64, 1);
  --pa-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --pa-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  /* Variables de aliviado.css: el azul es el de la marca. Si el back-office
     define un color de marca, su <style> las reemplaza después. */
  --tinta: #1d63e6;
  --tinta-claro: #1d63e6;
  --tinta-oscura: #0e1a2b;
  --tinta-noche: #0e1a2b;
  --tinta-50: #eaf0fd;
  --tinta-100: #d6e2fb;
  --tinta-200: #b0c8f6;
  --acento: #5b9bff;
  --papel: #fbfaf9;
  --fondo: #f6f5f4;
  --superficie: #ffffff;
  --borde: #e6e4e1;
  --borde-suave: #edebe8;
  --texto: #191918;
  --texto-medio: #37352f;
  --texto-suave: #615d59;
  --texto-tenue: #9b9690;
  --radius: 8px;
  --radius-lg: 12px;
  --radius-xl: 12px;
  --sombra-xs: none;
  --sombra-sm: none;
  --sombra-md: 0 4px 12px rgba(0, 0, 0, .1);
  --sombra-lg: 0 4px 12px rgba(0, 0, 0, .1);
  --anillo: 0 0 0 3px rgba(29, 99, 230, .25);
  --transicion: 200ms ease;

  --pa-azul: var(--tinta);
}

body, body.layout-sitio { background: var(--pa-lienzo); color: var(--pa-tinta); font-family: var(--pa-sans); font-feature-settings: "lnum"; }
body.layout-sitio { font-size: 16px; }
kbd { font-family: var(--pa-sans); }
::selection { background: var(--pa-durazno); color: #000; }
.layout-sitio .sitio-contenedor { max-width: 76rem; }
.form-input { border-color: var(--pa-borde-fuerte); border-radius: 6px; box-shadow: none; }
.form-input:focus { border-color: var(--pa-azul); box-shadow: var(--anillo); }

/* Botones: un solo relleno azul; lo demás es celeste, blanco o texto. */
.btn { border-radius: 8px; font-weight: 500; letter-spacing: 0; }
.btn--primario { background: var(--pa-azul); color: #fff; box-shadow: none; }
.btn--primario:hover { background: color-mix(in srgb, var(--pa-azul) 85%, #000); color: #fff; }
.btn--primario:focus-visible { box-shadow: var(--anillo); }
.btn--celeste { background: var(--pa-celeste); color: var(--pa-azul); }
.btn--celeste:hover { background: color-mix(in srgb, var(--pa-celeste) 88%, var(--pa-azul)); color: var(--pa-azul); }
.btn--blanco { background: var(--pa-blanco); color: var(--pa-tinta); border-color: var(--pa-borde-fuerte); }
.btn--blanco:hover { background: #fbfaf9; border-color: rgba(0, 0, 0, .24); color: #000; }
.btn--secundario { border-color: var(--pa-borde-fuerte); box-shadow: none; }
.btn--fantasma:hover { background: rgba(0, 0, 0, .05); }
.btn--grande { border-radius: 8px; }
.enlace-flecha { color: var(--pa-azul); font-size: .875rem; font-weight: 500; }

/* Cabecera: barra clara de 64 px; al desplazarse gana la sombra de la barra (app.js). */
.sitio-cabecera { background: rgba(246, 245, 244, .86); border-bottom-color: transparent; transition: box-shadow 200ms ease, border-color 200ms ease, background 200ms ease; }
.sitio-cabecera--desplazada { background: rgba(255, 255, 255, .92); border-bottom-color: var(--pa-borde); box-shadow: var(--pa-sombra-nav); }
.sitio-cabecera__inner { height: 4rem; }
.sitio-cabecera .sitio-nav { margin: 0 auto; }
.sitio-cabecera .sitio-nav a, .sitio-cabecera__entrar { padding: .45rem .75rem; border-radius: 8px; color: var(--pa-tinta-54); font-size: .9rem; font-weight: 500; }
.sitio-cabecera .sitio-nav a:hover, .sitio-cabecera__entrar:hover { background: transparent; color: var(--pa-tinta); }
.sitio-cabecera .sitio-nav a[aria-current="page"] { background: transparent; color: var(--pa-tinta); font-weight: 500; }
.sitio-cabecera__acciones { margin-left: 0; }
.sitio-cabecera__acciones .btn { height: 2.25rem; padding: 0 .95rem; border-radius: 8px; font-size: .875rem; }
.sitio-cabecera .marca, .sitio-cabecera .marca:hover { color: #000; }
.sitio-menu summary { border-color: var(--pa-borde-fuerte); border-radius: 8px; }
.sitio-menu__panel { border-color: var(--pa-borde); border-radius: 12px; }
.sitio-menu__panel a { border-radius: 8px; }
.sitio-menu__panel a:hover, .sitio-menu__panel a[aria-current="page"] { background: rgba(0, 0, 0, .04); color: #000; }
/* Logo: el de la marca (Marca::contenido) con el wordmark en Outfit 600, igual en la cabecera, el pie y el acceso. */
.sitio-cabecera .marca, .sitio-pie .marca { gap: .6rem; font-family: "Outfit", var(--pa-sans); font-size: 1.45rem; font-weight: 600; letter-spacing: -.035em; text-decoration: none; }
.sitio-cabecera .marca .marca__imagen, .sitio-cabecera .marca .marca__logo, .sitio-pie .marca .marca__imagen, .sitio-pie .marca .marca__logo { width: 2.1rem; height: 2.1rem; filter: none; }

/* Piezas comunes: etiqueta de sección, marcas en círculo y etiquetas de estado. */
.pa-eyebrow, .sitio-eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 1rem; padding: .25rem .75rem .25rem .6rem; border: 0; border-radius: 9999px; background: var(--pa-blanco); box-shadow: inset 0 0 0 1px var(--pa-borde); color: var(--pa-tinta-60); font-size: .8125rem; font-weight: 500; letter-spacing: 0; }
.pa-eyebrow .icono, .sitio-eyebrow .icono { width: .95rem; height: .95rem; color: var(--pa-azul); }
.pa-eyebrow--noche, .sitio-eyebrow--oscuro { background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .78); }
.pa-eyebrow--noche .icono, .sitio-eyebrow--oscuro .icono { color: var(--pa-cielo); }
.pa-marca { flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 2px solid var(--pa-marca-color, var(--pa-azul)); border-radius: 9999px; background: var(--pa-blanco); color: var(--pa-marca-icono, var(--pa-marca-color)); }
.pa-marca .icono { width: 1.2rem; height: 1.2rem; stroke-width: 2; }
.pa-marca--azul { --pa-marca-color: var(--pa-azul-senal); }
.pa-marca--coral { --pa-marca-color: var(--pa-coral); }
.pa-marca--ambar { --pa-marca-color: var(--pa-marigold); --pa-marca-icono: var(--pa-azafran); }
.pa-marca--cielo { --pa-marca-color: var(--pa-cielo); --pa-marca-icono: var(--pa-azul-senal); }
.pa-tag { display: inline-flex; align-items: center; gap: .25rem; width: fit-content; padding: 0 .5rem; border-radius: 9999px; font-size: .72rem; font-weight: 500; line-height: 1.35rem; white-space: nowrap; }
.pa-tag .icono { width: .8rem; height: .8rem; }
/* El rojo es solo para alergias: el único rojo permitido es la alerta clínica. */
.pa-tag--rojo { background: #fdebec; color: #9f2f2d; }
.pa-tag--ambar { background: #fbf3db; color: #8a5a00; }
.pa-tag--verde { background: #edf3ec; color: #2f6136; }
.pa-tag--azul { background: var(--pa-celeste); color: #1a4fb8; }
.pa-tag--gris { background: #f1f1ef; color: #5a5752; }

/* ---------- Piezas compartidas (landing, directorio y blog) ---------- */
.pa-btn-xl { height: 3rem; padding: 0 1.25rem; font-size: 1rem; }
.pa-btn-xl .icono { transition: transform 200ms ease; }
.pa-btn-xl:hover .icono { transform: translateX(3px); }
.pa-seccion { padding: 5rem 0; }
.pa-seccion--ajustada { padding: 3rem 0; }
.pa-encabezado { max-width: 46rem; margin-bottom: 3rem; }
.pa-encabezado--centro { margin-left: auto; margin-right: auto; text-align: center; }
.pa-encabezado h2 { color: #000; font-size: clamp(2.125rem, 4.4vw, 3.375rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.pa-encabezado > p:not(.pa-eyebrow) { margin-top: 1.1rem; color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.15rem; line-height: 1.56; text-wrap: pretty; }
.pa-encabezado--centro > p:not(.pa-eyebrow) { max-width: 38rem; margin-left: auto; margin-right: auto; }
.pa-marcas { list-style: none; display: flex; justify-content: center; gap: .5rem; margin: 0 0 1.75rem; padding: 0; }
.pa-marcas .pa-marca { animation: pa-saltar 700ms var(--pa-resorte) backwards; animation-delay: calc(var(--i) * 70ms + 120ms); }
.pa-marcas .pa-marca:hover { transform: translateY(-4px) rotate(-6deg); transition: transform 300ms var(--pa-resorte); }
@keyframes pa-saltar { from { opacity: 0; transform: translateY(14px) scale(.6); } to { opacity: 1; transform: none; } }
.pa-anuncio { display: inline-flex; align-items: center; gap: .55rem; max-width: 100%; padding: .25rem .8rem .25rem .25rem; border-radius: 9999px; background: var(--pa-blanco); box-shadow: inset 0 0 0 1px var(--pa-borde); color: var(--pa-tinta-60); font-size: .84rem; font-weight: 500; text-align: left; text-decoration: none; transition: color 200ms ease, box-shadow 200ms ease; }
.pa-anuncio:hover { color: var(--pa-tinta); box-shadow: inset 0 0 0 1px var(--pa-borde-fuerte); }
.pa-anuncio__etiqueta { flex: none; padding: 0 .55rem; border-radius: 9999px; background: var(--pa-celeste); color: #1a4fb8; font-size: .75rem; line-height: 1.4rem; }
.pa-anuncio .icono { width: .85rem; height: .85rem; transition: transform 200ms ease; }
.pa-anuncio:hover .icono { transform: translateX(2px); }
.pa-resalte { display: inline-block; padding: 0 .28em .04em; border-radius: 9999px; background: var(--pa-durazno); line-height: 1.05; animation: pa-resaltar 900ms var(--pa-resorte) 500ms both; }
@keyframes pa-resaltar { from { transform: scale(.85) rotate(-3deg); } to { transform: none; } }
.pa-destello { position: absolute; top: -.35em; right: -.1em; width: .5em; height: .5em; color: var(--pa-marigold); animation: pa-girar 7s linear infinite; }
.pa-destello svg { display: block; width: 100%; height: 100%; }
@keyframes pa-girar { to { transform: rotate(360deg); } }
.pa-acciones { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.pa-etiqueta { display: inline-flex; align-items: center; gap: .4rem; margin: 0 0 .75rem; color: var(--pa-tinta-60); font-size: .875rem; font-weight: 500; }
.pa-etiqueta .icono { width: 1rem; height: 1rem; color: var(--pa-azul); }
.pa-lista { list-style: none; display: grid; gap: .55rem; margin: 0; padding: 0; color: var(--pa-grafito); font-size: .94rem; line-height: 1.5; }
.pa-lista li { display: flex; align-items: flex-start; gap: .6rem; }
.pa-lista .icono { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; color: var(--pa-azul); stroke-width: 2.4; }
.pa-lista--suelta { gap: .8rem; font-size: 1rem; }
.pa-nota { margin: 1.25rem 0 0; padding: .75rem .9rem; border-radius: 8px; background: rgba(0, 0, 0, .035); color: var(--pa-grafito); font-size: .84rem; line-height: 1.55; }
.pa-lienzo { position: relative; display: grid; align-content: center; min-height: 26rem; padding: 3rem 2.5rem; border-radius: 12px; background: var(--pa-lienzo-color); }
.pa-lienzo--marigold { --pa-lienzo-color: var(--pa-marigold); }
.pa-lienzo--cielo { --pa-lienzo-color: var(--pa-cielo); }
.pa-lienzo--coral { --pa-lienzo-color: var(--pa-coral); }
.pa-lienzo--moca { --pa-lienzo-color: var(--pa-moca); }
.pa-lienzo--noche { --pa-lienzo-color: var(--pa-noche); }
.pa-lienzo__marca { position: absolute; top: 1.25rem; left: 1.25rem; width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border-radius: 9999px; background: rgba(255, 255, 255, .9); color: #000; }
.pa-lienzo--noche .pa-lienzo__marca { background: rgba(255, 255, 255, .12); color: #fff; }
.pa-lienzo__marca .icono { width: 1.15rem; height: 1.15rem; }
.pa-tablero { list-style: none; display: grid; gap: .75rem; width: 100%; max-width: 24rem; margin: 0 auto; padding: 0; }
.pa-tarea { display: grid; gap: .3rem; padding: .8rem 1rem; border: 1px solid var(--pa-borde); border-radius: 8px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); }
.pa-tarea:nth-child(2) { margin-left: 1.75rem; margin-right: -1.75rem; }
.pa-tarea strong { color: var(--pa-tinta); font-size: .94rem; font-weight: 600; }
.pa-tarea > span:not(.pa-tag) { color: var(--pa-tinta-54); font-size: .8rem; line-height: 1.4; }
.pa-tarjeta { padding: 2rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); scroll-margin-top: 6rem; }
.pa-tarjeta h3 { color: #000; font-size: 1.4rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.pa-tarjeta__resumen { margin: .5rem 0 1.25rem; color: var(--pa-grafito); line-height: 1.5; }
.pa-mas { margin-top: 2rem; text-align: center; }
.pa-seccion--cierre { padding-top: 1rem; }
.pa-cta { padding: 4rem 2rem; border-radius: 12px; background: var(--pa-marigold); color: #000; text-align: center; }
.pa-marcas--cierre { margin-bottom: 1.5rem; }
.pa-cta h2 { max-width: 40rem; margin: 0 auto; font-size: clamp(2rem, 4.4vw, 3.375rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; text-wrap: balance; }
.pa-cta p { max-width: 34rem; margin: 1rem auto 0; color: rgba(0, 0, 0, .72); font-family: var(--pa-serif); font-size: 1.15rem; line-height: 1.56; }
.pa-cta .btn--blanco { border-color: transparent; }
.con-revelar .pa-cta .pa-marca { animation-play-state: paused; }
.con-revelar .pa-cta.revelado .pa-marca { animation-play-state: running; }
@media (max-width: 1024px) {
  .pa-lienzo { min-height: 22rem; }
}
@media (max-width: 760px) {
  .pa-marcas { gap: .35rem; }
  .pa-marcas .pa-marca { width: 2.35rem; height: 2.35rem; }
  .pa-marcas .pa-marca .icono { width: 1rem; height: 1rem; }
  .pa-seccion { padding: 4rem 0; }
}
@media (max-width: 600px) {
  .pa-acciones .btn { width: 100%; }
  .pa-lienzo { min-height: 0; padding: 4rem 1.25rem 2rem; }
  .pa-tarea:nth-child(2) { margin-left: .75rem; margin-right: -.75rem; }
  .pa-cta { padding: 3rem 1.25rem; }
  .pa-tarjeta { padding: 1.35rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pa-marcas .pa-marca, .pa-resalte, .pa-destello { animation: none; }
}

/* Franja de cifras: tipografía en gris, como un muro de logos. */
.pa-cifras { padding: 2.75rem 0; border-block: 1px solid var(--pa-borde); background: var(--pa-blanco); }
.pa-cifras__titulo { margin-bottom: 1.5rem; color: var(--pa-tinta-54); font-size: .875rem; font-weight: 500; text-align: center; }
.pa-cifras__lista { list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; margin: 0; padding: 0; }
.pa-cifras__lista li { display: grid; justify-items: center; gap: .3rem; text-align: center; }
.pa-cifras__lista strong { color: var(--pa-tinta-60); font-size: 2.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.pa-cifras__lista span { max-width: 12rem; color: var(--pa-tinta-54); font-size: .84rem; line-height: 1.4; }
@media (max-width: 1024px) {
  .pa-cifras__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pa-cifras__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pa-cifras__lista li:last-child { grid-column: 1 / -1; }
}

/* Secciones compartidas (directorio, referidos): planas, sobre el lienzo. */
.sitio-seccion--alterna { border-block: 1px solid var(--pa-borde); background: var(--pa-blanco); }
.sitio-titulo-seccion h2 { color: #000; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.035em; line-height: 1.06; }
.sitio-titulo-seccion > p:not(.sitio-eyebrow) { color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.15rem; line-height: 1.56; }
.chip-enlace { border-color: var(--pa-borde); color: var(--pa-tinta-60); }
.chip-enlace:hover { border-color: var(--pa-borde-fuerte); background: var(--pa-blanco); color: var(--pa-tinta); }

/* Pie claro, sobre el mismo lienzo. */
.sitio-pie { border-top: 1px solid var(--pa-borde); background: var(--pa-lienzo); color: var(--pa-grafito); }
.sitio-pie::before { display: none; }
.sitio-pie__titulo { color: #000; font-size: .875rem; font-weight: 600; letter-spacing: 0; text-transform: none; }
.sitio-pie a { color: var(--pa-tinta-60); }
.sitio-pie a:hover { color: #000; }
.sitio-pie .marca, .sitio-pie .marca:hover { color: #000; }
.sitio-cabecera .marca__punto, .sitio-pie .marca__punto { color: #12c08a; }
.sitio-pie__base { border-top-color: var(--pa-borde); color: var(--pa-tinta-54); }
.sitio-pie__base a { color: var(--pa-tinta-60); }

/* ---------- Portadas del directorio y del blog ----------
   El mismo primer plano que la landing: marcas en círculo, etiqueta, titular
   con una palabra en píldora y entradilla en serif. Centrado en las portadas
   y a la izquierda (más compacto) en los listados. */
.pa-portada { padding: 4.5rem 0 3.5rem; text-align: center; }
.pa-portada .migas-sitio ol { justify-content: center; margin-bottom: 2rem; }
.pa-portada .pa-eyebrow { margin-bottom: 0; }
.pa-titular { max-width: 54rem; margin: 1.25rem auto 0; color: #000; font-size: clamp(2.5rem, 6vw, 4.25rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; }
.pa-entradilla { max-width: 40rem; margin: 1.25rem auto 0; color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.2rem; line-height: 1.56; text-wrap: pretty; }
.pa-portada__buscador { max-width: 68rem; margin: 2.5rem auto 0; text-align: left; }
.pa-portada--izquierda { padding: 2.5rem 0 3rem; border-bottom: 1px solid var(--pa-borde); text-align: left; }
.pa-portada--izquierda .migas-sitio ol { justify-content: flex-start; margin-bottom: 1.5rem; }
.pa-portada--izquierda .pa-titular { margin-left: 0; font-size: clamp(2.2rem, 4.6vw, 3.4rem); }
.pa-portada--izquierda .pa-entradilla { margin-left: 0; }
.pa-portada--izquierda .pa-portada__buscador { margin: 2rem 0 0; }
.pa-encabezado--fila { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 1rem 2rem; max-width: none; margin-bottom: 2rem; }
.pa-encabezado--fila h2 { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.pa-encabezado.pa-encabezado--fila > p.dir-resultados__meta { margin: 0; font-family: var(--pa-sans); font-size: .84rem; line-height: 1.4; }
.dir-resultados__cabecera.pa-encabezado--fila h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); }
.pa-seccion--resultados { padding-top: 3rem; }
.pa-cifras__lista--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pa-cifras__lista--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pa-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.pa-tarjetas .pa-tarjeta { padding: 1.75rem; }
.pa-tarjetas .pa-tarjeta h3 { margin-top: 1.1rem; font-size: 1.15rem; font-weight: 600; }
.pa-tarjetas .pa-tarjeta__resumen { margin-bottom: 0; font-size: .92rem; line-height: 1.55; }
.pa-vacio { display: grid; justify-items: center; gap: .5rem; padding: 3.5rem 1.5rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); text-align: center; }
.pa-vacio .pa-marca { margin-bottom: .5rem; }
.pa-vacio__titulo { color: #000; font-size: 1.15rem; font-weight: 600; }
.pa-vacio p:not(.pa-vacio__titulo):not(.pa-vacio__accion) { max-width: 30rem; color: var(--pa-grafito); }
.pa-vacio__accion { margin-top: .75rem; }

/* ---------- Directorio ---------- */
.pa-portada__buscador .buscador-dir { margin-top: 0; padding: 1rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); }
.buscador-dir .form-input { border-color: var(--pa-borde-fuerte); background: var(--pa-blanco); }
.buscador-dir__etiqueta { color: var(--pa-tinta-60); font-weight: 500; }
.dir-hero__apoyos { margin: 1.1rem 0 0; }
.dir-hero__dato { color: var(--pa-tinta-60); }
.dir-hero__dato .icono { color: #2f6136; }
.dir-atajos a, .dir-limpiar { color: var(--pa-azul); font-weight: 500; }
.dir-resultados__meta { border-color: var(--pa-borde); color: var(--pa-tinta-54); }
.dir-resultados__cabecera h2 { color: #000; letter-spacing: -.03em; }
.dir-intro { max-width: 52rem; margin-bottom: 2rem; }
.dir-intro strong { color: #000; }

/* Tarjetas de doctor: blancas con borde fino; el avatar es una marca en círculo. */
.dir-grid { gap: 1rem; }
.dir-tarjeta { gap: .9rem; padding: 1.5rem; border-color: var(--pa-borde); border-radius: 12px; box-shadow: none; transition: border-color 200ms ease; }
.dir-tarjeta:hover { border-color: var(--pa-borde-fuerte); box-shadow: none; transform: none; }
.dir-tarjeta:focus-within { box-shadow: var(--anillo); }
.dir-tarjeta__nombre { font-weight: 600; letter-spacing: -.02em; }
.dir-tarjeta__especialidad { color: var(--pa-azul); font-weight: 500; }
.dir-tarjeta__pie { border-top-color: var(--pa-borde); }
.dir-tarjeta__accion { color: var(--pa-azul); font-weight: 500; }
.dir-tarjeta .pill--tinta { border: 0; background: var(--pa-celeste); color: #1a4fb8; font-weight: 500; }
.dir-avatar, .dir-tarjeta .dir-avatar { border-radius: 9999px; box-shadow: none; }
.dir-avatar--iniciales { border: 2px solid var(--pa-azul-senal); background: var(--pa-blanco); color: var(--pa-azul-senal); }
.dir-sello { border: 0; font-weight: 500; }
.dir-sello--ok { background: #edf3ec; color: #2f6136; }
.dir-sello--tinta, .dir-sello--virtual { background: var(--pa-celeste); color: #1a4fb8; }

/* Especialidades y provincias: tarjetas blancas con su conteo en píldora. */
.dir-especialidad, .dir-provincia { border-color: var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: none; font-weight: 500; }
a.dir-especialidad:hover, a.dir-provincia:hover { border-color: var(--pa-azul); background: var(--pa-blanco); color: #000; box-shadow: inset 0 0 0 1px var(--pa-azul); transform: none; }
.dir-conteo { background: var(--pa-celeste); color: #1a4fb8; font-weight: 600; }
.dir-especialidad--vacia, .dir-catalogo-vacio, .dir-vacio { border-color: var(--pa-borde-fuerte); background: transparent; color: var(--pa-grafito); }
.dir-catalogo-vacio { border-radius: 12px; }

.dir-navegar { margin-top: 3rem; padding-top: 2.5rem; border-top-color: var(--pa-borde); }
.dir-navegar h2 { color: #000; font-size: 1.5rem; font-weight: 700; letter-spacing: -.03em; }
.dir-navegar .pa-etiqueta { margin-bottom: .4rem; }
.chip-enlace { border-color: var(--pa-borde); background: var(--pa-blanco); color: var(--pa-tinta-60); font-weight: 500; }
.chip-enlace:hover { border-color: var(--pa-azul); background: var(--pa-blanco); color: #000; }
.chip-enlace .cifra { color: #1a4fb8; }
.paginacion-sitio__numero, .paginacion-sitio__direccion { border-color: var(--pa-borde); font-weight: 500; }
.paginacion-sitio__numero:hover, .paginacion-sitio__direccion:hover { border-color: var(--pa-borde-fuerte); background: var(--pa-blanco); color: #000; }
.paginacion-sitio__numero--actual { border-color: #000; background: #000; color: #fff; }

/* Perfil público y opiniones: tarjetas blancas sobre el lienzo. */
.perfil-pub-envoltura { background: var(--pa-lienzo); }
.perfil-pub__cabecera, .perfil-pub__seccion { border-color: var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: none; }
.perfil-pub__nombre { color: #000; font-weight: 700; letter-spacing: -.035em; }
.perfil-pub__especialidad { color: var(--pa-azul); font-weight: 500; }
.perfil-pub__subtitulo, .horario-pub__titulo, .disponibilidad__semana, .disponibilidad__mes { color: var(--pa-tinta-54); font-weight: 500; letter-spacing: 0; text-transform: none; }
.perfil-pub__bio { color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.08rem; line-height: 1.6; }
.solicitud { border-color: var(--pa-borde); border-radius: 12px; box-shadow: var(--pa-sombra-maqueta); }
.solicitud__cabecera { background: var(--pa-noche); color: rgba(255, 255, 255, .72); }
.solicitud__cabecera p { color: rgba(255, 255, 255, .64); }

/* ---------- Blog ---------- */
.pa-portada .blog-buscador { max-width: 40rem; margin: 2.25rem auto 0; border-color: var(--pa-borde-fuerte); border-radius: 12px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); text-align: left; }
.blog-buscador:focus-within { border-color: var(--pa-azul); box-shadow: var(--anillo); }
.blog-buscador__icono { display: grid; color: var(--pa-tinta-40); transform: none; }
.blog-buscador__icono .icono { width: 1.15rem; height: 1.15rem; }
.blog-buscador button { border-radius: 8px; background: var(--pa-azul); font-weight: 500; }
.blog-buscador button:hover { background: color-mix(in srgb, var(--pa-azul) 85%, #000); }
.pa-portada .blog-categorias { justify-content: center; flex-wrap: wrap; max-width: 62rem; margin: 1.5rem auto 0; overflow: visible; }
.blog-categorias a { border-color: var(--pa-borde); background: var(--pa-blanco); color: var(--pa-tinta-60); font-weight: 500; }
.blog-categorias a:hover { border-color: var(--pa-azul); color: #000; }
.blog-categorias span { background: var(--pa-celeste); color: #1a4fb8; }

.blog-destacado { gap: 2.5rem; margin: 0 0 4rem; padding: 1.25rem; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); }
.blog-destacado__imagen { border-radius: 8px; box-shadow: none; }
.blog-destacado__cuerpo { padding: .5rem 1rem .5rem 0; }
.blog-destacado__titulo { font-weight: 700; letter-spacing: -.035em; }
.blog-destacado__titulo a { color: #000; }
.blog-destacado__titulo a:hover { color: var(--pa-azul); }
.blog-destacado__resumen { color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.1rem; line-height: 1.56; }
.blog-etiqueta { background: var(--pa-celeste); color: #1a4fb8; font-weight: 500; letter-spacing: 0; text-transform: none; }
.blog-etiqueta:hover { background: #dbe6fb; }
.blog-compartir > p, .blog-cta__marca { color: var(--pa-tinta-54); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }

.blog-grid { gap: 1rem; }
.blog-tarjeta { border-color: var(--pa-borde); border-radius: 12px; box-shadow: none; }
.blog-tarjeta:hover { border-color: var(--pa-borde-fuerte); box-shadow: none; transform: none; }
.blog-tarjeta__titulo { font-weight: 600; letter-spacing: -.02em; }
.blog-tarjeta__titulo a { color: #000; }
.blog-tarjeta__titulo a:hover { color: var(--pa-azul); }
.blog-tarjeta__resumen { color: var(--pa-grafito); }
.blog-tarjeta__leer, .blog-leer { color: var(--pa-azul); font-weight: 500; }
.blog-tarjeta__sin-imagen { background: var(--pa-celeste); color: var(--pa-azul); }
.blog-paginacion a { border-color: var(--pa-borde); border-radius: 8px; font-weight: 500; }
.blog-paginacion a:hover { border-color: var(--pa-borde-fuerte); color: #000; }
.blog-paginacion a[aria-current="page"] { border-color: #000; background: #000; color: #fff; box-shadow: none; }

/* Artículo: cabecera en el lienzo, lectura cómoda y cierre ámbar. */
.blog-articulo__cabecera { background: var(--pa-lienzo); }
.blog-articulo__titulo { color: #000; font-weight: 700; letter-spacing: -.035em; line-height: 1.06; }
.blog-articulo__entradilla { color: var(--pa-grafito); font-family: var(--pa-serif); }
.blog-articulo__portada img, .blog-articulo__cuerpo img { border-radius: 12px; box-shadow: none; }
.blog-articulo__cuerpo { color: rgba(0, 0, 0, .86); }
.blog-articulo__cuerpo h2, .blog-articulo__cuerpo h3, .blog-articulo__cuerpo h4 { color: #000; font-weight: 700; letter-spacing: -.02em; }
.blog-articulo__cuerpo li::marker { color: var(--pa-azul); }
.blog-articulo__cuerpo blockquote { border-left-color: var(--pa-marigold); background: var(--pa-blanco); font-family: var(--pa-serif); }
.blog-articulo__cuerpo pre { border-color: var(--pa-borde); background: var(--pa-blanco); }
.blog-autor__avatar { border: 2px solid var(--pa-azul-senal); background: var(--pa-blanco); color: var(--pa-azul-senal); font-weight: 700; }
.blog-volver { color: var(--pa-tinta-54); font-weight: 500; }
.blog-compartir { border-top-color: var(--pa-borde); }
.blog-cta { border: 0; border-radius: 12px; background: var(--pa-marigold); }
.blog-cta::after { display: none; }
.blog-cta h2 { color: #000; font-weight: 700; letter-spacing: -.03em; }
.blog-cta p { color: rgba(0, 0, 0, .72); }
.blog-cta .btn--blanco { border-color: transparent; }
.blog-relacionados .dir-grid { margin-top: 1.5rem; }

@media (max-width: 1024px) {
  .pa-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .pa-cifras__lista--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .pa-portada { padding: 3rem 0 2.5rem; }
  .pa-portada--izquierda { padding: 1.75rem 0 2.25rem; }
  .pa-entradilla { font-size: 1.08rem; }
  .pa-cifras__lista--3 { grid-template-columns: minmax(0, 1fr); }
  .blog-destacado { padding: 1rem; }
  .blog-destacado__cuerpo { padding: 0; }
}
@media (max-width: 600px) {
  .pa-portada .blog-categorias { justify-content: flex-start; flex-wrap: nowrap; margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; overflow-x: auto; scrollbar-width: none; }
}

/* ---------- Programa de referidos: página pública ---------- */
.rfp-hero { padding: 5.5rem 0 5rem; background: var(--pa-lienzo); color: var(--pa-grafito); }
.rfp-hero h1 { color: #000; font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; letter-spacing: -.035em; line-height: 1.04; }
.rfp-hero__lead { color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.2rem; line-height: 1.56; }
.rfp-hero__acciones .btn--primario { background: var(--pa-azul); border-color: transparent; }
.rfp-hero__entrar { color: var(--pa-azul); font-weight: 500; }
.rfp-hero__entrar:hover { color: var(--pa-azul); }
.rfp-lienzo { display: grid; place-items: center; padding: 3rem 2.5rem; border-radius: 12px; background: var(--pa-cielo); }
.rfp-tarjeta { width: 100%; border: 1px solid var(--pa-borde); border-radius: 12px; background: var(--pa-blanco); box-shadow: var(--pa-sombra-maqueta); color: var(--pa-tinta); }
.rfp-tarjeta__barra span { background: #e3e1dd; }
.rfp-tarjeta__etiqueta { color: var(--pa-tinta-54); font-size: .8rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rfp-tarjeta__enlace { border-radius: 6px; background: var(--pa-lienzo); color: #000; }
.rfp-tarjeta__enlace strong { color: var(--pa-azul); }
.rfp-tarjeta__cifras div { border: 1px solid var(--pa-borde); border-radius: 8px; background: var(--pa-blanco); }
.rfp-tarjeta__cifras strong { color: #000; }
.rfp-tarjeta__cifras span { color: var(--pa-tinta-54); }
.rfp-tarjeta__lista li { border: 1px solid var(--pa-borde); border-radius: 8px; background: var(--pa-blanco); color: var(--pa-tinta); }
.rfp-tarjeta__lista li span { border: 2px solid var(--pa-azul-senal); border-radius: 9999px; background: var(--pa-blanco); color: var(--pa-azul-senal); }
.rfp-tarjeta__lista li:nth-child(2) span { border-color: var(--pa-coral); color: var(--pa-coral); }
.rfp-tarjeta__lista em { white-space: nowrap; background: #fbf3db; color: #8a5a00; font-weight: 500; }
.rfp-tarjeta__lista em.rfp-ok { background: #edf3ec; color: #2f6136; }
.rfp-pasos li { border-color: var(--pa-borde); border-radius: 12px; }
.rfp-pasos li::after { color: rgba(0, 0, 0, .12); }
.rfp-pasos span { border: 2px solid var(--pa-azul-senal); border-radius: 9999px; background: var(--pa-blanco); color: var(--pa-azul-senal); }
.rfp-pasos li:nth-child(2) span { border-color: var(--pa-coral); color: var(--pa-coral); }
.rfp-pasos li:nth-child(3) span { border-color: var(--pa-marigold); color: var(--pa-azafran); }
.rfp-pasos li:nth-child(4) span { border-color: var(--pa-cielo); color: var(--pa-azul-senal); }
.rfp-pasos strong { color: #000; font-weight: 600; }
.rfp-beneficios h2 { color: #000; letter-spacing: -.035em; }
.rfp-beneficios > div > p:not(.sitio-eyebrow) { color: var(--pa-grafito); font-family: var(--pa-serif); font-size: 1.15rem; }
.rfp-beneficios li { border-color: var(--pa-borde); border-radius: 12px; background: var(--pa-lienzo); }
.rfp-beneficios li > .icono { color: var(--pa-azul); }
.rfp-pregunta { border-color: var(--pa-borde); border-radius: 12px; }
.rfp-pregunta summary { font-weight: 500; }
.rfp-pregunta summary .icono { color: #000; }
.rfp-cierre { padding: 1rem 0 5rem; background: var(--pa-lienzo); }
.layout-sitio .rfp-cierre__inner { width: calc(100% - 3rem); max-width: 73rem; padding: 3rem; border-radius: 12px; background: var(--pa-marigold); }
.rfp-cierre h2 { color: #000; font-size: clamp(1.75rem, 3.4vw, 2.6rem); letter-spacing: -.035em; }
.rfp-cierre .btn--primario { background: var(--pa-azul); border-color: transparent; }

/* ---------- Acceso: login, registro, 2FA y recuperación ----------
   Con la paleta del manual «Cruz Pulso»: navy #0E1A2B, chip #101C2E, azul
   #1D63E6 / #5B9BFF, verde #0E9E74 / neón #2FE3A8 y el punto del wordmark
   #12C08A sobre claro. El wordmark va en Outfit 600 (letter-spacing -0.035em).
   Reglas del manual: el degradado solo vive en el símbolo (nunca en textos),
   sin sombras ni efectos, y el pulso nunca suelto fuera del chip. */

.layout-acceso {
  --marca-navy: #0e1a2b;
  --marca-chip: #101c2e;
  --marca-azul: #1d63e6;
  --marca-azul-claro: #5b9bff;
  --marca-verde: #0e9e74;
  --marca-neon: #2fe3a8;
  --marca-punto: #12c08a;
  --marca-claro: #f3f6fa;
  --marca-borde: #e3e8f0;
  --marca-texto: #0e1a2b;
  --marca-suave: #5b6779;
  --marca-titulo: "Outfit", var(--pa-sans);
  --tinta: var(--marca-azul);
  --tinta-claro: var(--marca-azul);
  --tinta-50: #eef3fe;
  --tinta-100: #dbe6fc;
  --tinta-200: #b6cdf8;
  --confirmado: var(--marca-verde);
  --texto: var(--marca-texto);
  --texto-medio: #33405a;
  --texto-suave: var(--marca-suave);
  --texto-tenue: #8a95a6;
  --borde: var(--marca-borde);
  --borde-suave: #ebeff5;
  --anillo: 0 0 0 3px rgba(29, 99, 230, .2);
  background: var(--marca-claro);
  color: var(--marca-texto);
}
.layout-acceso .access-layout { background: var(--marca-claro); }
.layout-acceso .btn--primario { background: var(--marca-azul); color: #fff; }
.layout-acceso .btn--primario:hover { background: #1854c4; color: #fff; }
.layout-acceso .btn--secundario { border-color: var(--marca-borde); background: #fff; color: var(--marca-texto); }
.layout-acceso .btn--secundario:hover { border-color: #cfd7e3; background: var(--marca-claro); }

/* Logo: el símbolo tal cual (imagen del back-office o Icono::marca) y el wordmark en Outfit. */
.layout-acceso .marca { gap: .7rem; color: var(--marca-texto); font-family: var(--marca-titulo); font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; text-decoration: none; }
.layout-acceso .marca:hover { color: var(--marca-texto); }
.layout-acceso .marca .marca__imagen, .layout-acceso .marca .marca__logo { width: 2.5rem; height: 2.5rem; filter: none; }
.layout-acceso .marca__punto { color: var(--marca-punto); }

/* Panel de marca: navy plano con el logo, el mensaje y la vista previa. */
.access-story { top: .75rem; height: calc(100vh - 1.5rem); height: calc(100dvh - 1.5rem); margin: .75rem 0 .75rem .75rem; border-radius: 1.5rem; background: var(--marca-navy); color: #b8c4d6; }
.access-story::before { display: none; }
.layout-acceso .access-story .marca, .layout-acceso .access-story .marca:hover { color: #fff; }
.layout-acceso .access-story .marca__punto { color: var(--marca-neon); }
.access-story__etiqueta { padding: 0; border: 0; background: none; color: var(--marca-neon); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.access-story__etiqueta::before { display: none; }
.access-story h2 { color: #fff; font-family: var(--marca-titulo); font-weight: 600; letter-spacing: -.035em; line-height: 1.05; }
.access-story h2 span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--marca-azul-claro); }
.access-story__contenido > p { color: #b8c4d6; font-family: var(--pa-sans); font-size: 1rem; line-height: 1.6; }
.vista-previa { border: 1px solid rgba(255, 255, 255, .1); border-radius: 1rem; background: var(--marca-chip); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.vista-previa__cabecera { color: #8a98ad; }
.vista-previa__titulo { color: #fff; }
.vista-previa__titulo .icono { color: var(--marca-azul-claro); }
.vista-previa__fila { background: rgba(255, 255, 255, .04); color: #c9d3e1; }
.vista-previa__fila b { color: #fff; }
.vista-previa__fila--actual { background: rgba(91, 155, 255, .12); box-shadow: inset 2px 0 0 var(--marca-azul-claro); }
.vista-previa__estado { background: rgba(47, 227, 168, .14); color: var(--marca-neon); font-weight: 600; }
.vista-previa__estado--pendiente { background: rgba(91, 155, 255, .16); color: var(--marca-azul-claro); }
.vista-previa__estado--hecho { background: rgba(255, 255, 255, .08); color: #a3b0c2; }
.vista-previa__chequeo { border: 1px solid rgba(47, 227, 168, .22); background: rgba(47, 227, 168, .08); color: #c8f5e6; }
.vista-previa__chequeo .icono { color: var(--marca-neon); }
.access-story__funciones li { border: 1px solid rgba(255, 255, 255, .08); border-radius: 1rem; background: rgba(255, 255, 255, .03); }
.access-story__icono { border: 0; border-radius: .7rem; background: var(--marca-chip); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); color: var(--marca-azul-claro); }
.access-story__funciones li:nth-child(2) .access-story__icono { color: var(--marca-neon); }
.access-story__funciones strong { color: #fff; }
.access-story__desc { color: #8a98ad; }
.access-story__pie { color: #6f7d92; }

/* Formulario: tarjeta blanca sobre el fondo claro de la marca. */
.acceso-panel, .access-layout > .wizard-shell { background: var(--marca-claro); }
.acceso-panel__inner { max-width: 28.5rem; padding: 2.5rem 2.25rem; border: 1px solid var(--marca-borde); border-radius: 1.5rem; background: #fff; }
.layout-acceso a.acceso-volver { color: var(--marca-suave); }
.layout-acceso a.acceso-volver:hover { border-color: var(--marca-borde); background: #fff; color: var(--marca-texto); }
.acceso-eyebrow { gap: .4rem; padding: 0; border: 0; background: none; box-shadow: none; color: var(--marca-verde); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.acceso-eyebrow .icono { width: 1rem; height: 1rem; color: var(--marca-verde); }
.acceso-titulo { color: var(--marca-texto); font-family: var(--marca-titulo); font-size: 2.25rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.acceso-texto { color: var(--marca-suave); font-family: var(--pa-sans); font-size: .95rem; line-height: 1.6; }
.acceso-form .form-label { color: var(--marca-texto); font-weight: 600; }
.acceso-form .campo .form-input { height: 3rem; border-color: var(--marca-borde); border-radius: .75rem; background: var(--marca-claro); }
.acceso-form .campo .form-input:hover { background: #fff; }
.acceso-form .campo .form-input:focus { border-color: var(--marca-azul); background: #fff; box-shadow: var(--anillo); }
.acceso-form .campo:focus-within > .icono { color: var(--marca-azul); }
.acceso-form .btn--grande { height: 3rem; border-radius: .75rem; box-shadow: none; }
.acceso-form .btn--grande:focus-visible { box-shadow: var(--anillo); }
.fuerza[data-nivel="3"] .fuerza__barras span:nth-child(-n+3) { background: var(--marca-azul); }
.fuerza[data-nivel="4"] .fuerza__barras span { background: var(--marca-verde); }
.acceso-prueba { border-color: rgba(14, 158, 116, .25); border-radius: .75rem; background: rgba(14, 158, 116, .07); }
.acceso-prueba svg { color: var(--marca-verde); }
.acceso-alterno { color: var(--marca-suave); }
.acceso-confianza { border-top-color: var(--marca-borde); }
.acceso-confianza li { border-color: var(--marca-borde); background: var(--marca-claro); color: var(--marca-suave); }
.acceso-confianza .icono { color: var(--marca-verde); }
.acceso-estado__icono { border-radius: 1rem; background: var(--marca-chip); box-shadow: none; color: var(--marca-neon); }
.acceso-pasos li::before { background: #eef3fe; color: var(--marca-azul); }
.aviso-desarrollo { border-color: #b6cdf8; background: #eef3fe; }
.aviso-desarrollo strong { color: var(--marca-azul); }

@media (max-width: 1024px) {
  .acceso-panel__inner { padding: 2rem 1.5rem; }
  .layout-acceso .acceso-marca-movil { margin-bottom: 1.75rem; }
}
@media (max-width: 480px) {
  .acceso-panel { padding-left: .75rem; padding-right: .75rem; }
  .acceso-panel__inner { padding: 1.75rem 1.25rem; border-radius: 1.25rem; }
  .acceso-titulo { font-size: 1.9rem; }
}


/* ---------- Acceso del programa de referidos ---------- */
.rf-body--acceso { background: var(--pa-lienzo); color: var(--pa-tinta); }
.rf-body--acceso .btn--primario { background: var(--pa-azul); border-color: transparent; }
.rf-body--acceso .btn--primario:hover { background: color-mix(in srgb, var(--pa-azul) 85%, #000); border-color: transparent; }
.rf-body--acceso .rf-contenido a:not(.btn), .rf-acceso__panel a:not(.btn) { color: var(--pa-azul); }
.rf-body--acceso .rf-boton { box-shadow: none; }
.rf-acceso { background: var(--pa-lienzo); }
.rf-acceso__marca { margin: .75rem 0 .75rem .75rem; border-radius: 12px; background: var(--pa-noche); color: rgba(255, 255, 255, .72); }
.rf-acceso__mensaje h2 { letter-spacing: -.035em; }
.rf-acceso__mensaje p:not(.rf-sobretitulo) { color: rgba(255, 255, 255, .72); font-family: var(--pa-serif); font-size: 1.08rem; }
.rf-acceso__camino span { border: 2px solid var(--pa-cielo); color: var(--pa-cielo); }
.rf-acceso__panel { background: var(--pa-lienzo); }
.rf-sobretitulo { color: var(--pa-cielo); font-size: .875rem; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rf-sobretitulo--claro { color: var(--pa-tinta-60); }
.rf-marca__etiqueta { border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-weight: 500; letter-spacing: 0; text-transform: none; }
.rf-titulo { color: #000; font-size: 2rem; letter-spacing: -.035em; }
.rf-texto { color: var(--pa-grafito); }
.rf-body--acceso .form-input { border-color: var(--pa-borde-fuerte); background: var(--pa-blanco); }
.rf-estado__icono { border-radius: 9999px; }
.rf-lista-pasos { background: var(--pa-blanco); }

/* Ocho enlaces en todas las páginas: por debajo de 1180 px pasan al menú. */
@media (max-width: 1180px) {
  .sitio-nav, .sitio-cabecera__entrar { display: none; }
  .sitio-menu { display: block; }
  .sitio-cabecera__acciones { margin-left: auto; }
}
@media (max-width: 900px) {
  .rfp-lienzo { padding: 2rem 1rem; }
  .layout-sitio .rfp-cierre__inner { width: calc(100% - 2rem); padding: 2.25rem 1.5rem; }
}
@media (max-width: 600px) {
  .layout-sitio .sitio-contenedor { padding: 0 1rem; }
}