/* =====================================================================
   DESIGN SYSTEM 2.0 — Mi Ruta Profesional
   Capa nueva, aditiva y reversible. TODO va scopeado bajo `.rp` para que
   NO afecte a ninguna página que no lo use. Productiviza design-lab/theme.css
   + el prototipo aprobado design-lab/ficha-fp.html.
   Principio: sección abierta por defecto; tarjeta = excepción.
   Se carga la ÚLTIMA. No borra nada del CSS existente.
   ===================================================================== */

/* ---- TOKENS (sobre el contenedor, sin tocar :root global) ---- */
.rp{
  /* color */
  --navy:#0f1736; --navy-2:#16193f; --coral:#ec3f68; --coral-d:#c4214c;
  --blue:#2563eb; --violet:#7c3aed; --pink:#db2777; --teal:#0e9aa7; --green:#0e9f6e;
  --ink:#16203f; --muted:#5b6480; --line:#e7eaf3; --surface:#f6f7fb; --bg:#ffffff;
  --warning:#b45309; --danger:#c4214c; --success:#0e7a4f;
  /* espacio */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-8:48px; --sp-10:64px; --sp-12:80px;
  /* radio / borde / sombra */
  --radius-sm:9px; --radius-md:13px; --radius-lg:18px;
  --border:1px solid var(--line);
  --shadow-sm:0 8px 20px rgba(13,20,48,.08);
  --shadow-md:0 16px 38px rgba(13,20,48,.10);
  /* lectura / layout */
  --read:720px; --maxw:1200px;

  font-family:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  color:var(--ink); line-height:1.5;
}
.rp *{box-sizing:border-box}
.rp .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(18px,4vw,40px)}
.rp .sec{padding:clamp(32px,5vw,64px) 0}
.rp img{max-width:100%;display:block}

/* ---- TIPOGRAFÍA (pocos niveles) ---- */
.rp h1{font-weight:800;font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.03;letter-spacing:-.025em;margin:0}
.rp h2{font-weight:800;font-size:clamp(1.3rem,2.6vw,1.6rem);line-height:1.12;letter-spacing:-.02em;color:var(--navy);margin:0}
.rp h3{font-weight:800;font-size:1.05rem;color:var(--navy);margin:0}
.rp p{font-size:15.5px;line-height:1.62;color:#414b6b;margin:0}

/* ---- KICKER (rótulo de sección: coral + guion, no cápsula) ---- */
.rp .kicker{display:inline-flex;align-items:center;gap:12px;font:700 12.5px 'Plus Jakarta Sans';letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.rp .kicker::before{content:'';width:32px;height:2px;background:var(--coral);flex:none}

/* ---- BOTONES (3 niveles) ---- */
.rp .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font:700 14.5px 'Plus Jakarta Sans';text-decoration:none;cursor:pointer;border:0;border-radius:11px;padding:12px 21px;transition:transform .15s,box-shadow .15s,background .15s,border-color .15s;line-height:1}
.rp .btn--coral{background:linear-gradient(135deg,var(--coral),var(--coral-d));color:#fff;box-shadow:0 8px 20px rgba(236,63,104,.3)}
.rp .btn--coral:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(236,63,104,.4)}
.rp .btn--outline{border:1.5px solid var(--line);color:#384568;background:#fff}
.rp .btn--outline:hover{border-color:var(--coral);color:var(--coral)}
.rp .btn--ghost{color:#384568;background:transparent}

/* ====================  HERO DE FICHA (.phero)  ==================== */
.rp .phero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(100deg,#0b112c 0%,#16193f 38%,#532a55 76%,#cf3360 100%)}
.rp .phero__compass{position:absolute;top:50%;right:-5%;transform:translateY(-50%);width:min(520px,48vw);height:min(520px,48vw);z-index:0;opacity:.14;pointer-events:none}
.rp .phero__compass svg{width:100%;height:100%}
.rp .phero__in{position:relative;z-index:1;padding:clamp(26px,4vw,54px) 0 clamp(32px,5vw,60px);max-width:760px}
.rp .crumb{font-size:13px;color:rgba(255,255,255,.72);margin-bottom:16px}
.rp .crumb a{color:inherit;text-decoration:none}
.rp .crumb a:hover{color:#fff}
.rp .phero .kicker{color:#ff8aa6}
.rp .phero .kicker::before{background:#ff8aa6}
.rp .phero h1{margin-top:10px;color:#fff}
.rp .phero__meta{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:16px;font-size:14px;color:#dfe4f6;font-weight:600}
.rp .phero__meta span{display:inline-flex;align-items:center;gap:8px}
.rp .phero__meta i{width:7px;height:7px;border-radius:50%;background:#ff7a9c;display:inline-block;flex:none}
.rp .phero__ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.rp .phero__ctas .btn--outline{color:#fff;border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06)}
.rp .phero__ctas .btn--outline:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}

/* ====================  CUERPO DE FICHA  ==================== */
.rp .ds-grid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,48px);align-items:start}
.rp .ds-main{max-width:var(--read)}

/* Sección editorial: SIN caja, separada por aire (y línea fina opcional) */
.rp .fblock{padding:0 0 clamp(28px,3.5vw,40px);margin:0 0 clamp(28px,3.5vw,40px);border-bottom:1px solid var(--line)}
.rp .fblock:last-child{border-bottom:0;margin-bottom:0}
.rp .fblock>h2{margin-top:10px}
.rp .fblock>p{margin-top:12px}
.rp .fblock>p+p{margin-top:10px}

/* Módulos: lista de 2 columnas con check (no tarjetas) */
.rp .modulos{display:grid;grid-template-columns:1fr 1fr;gap:11px 24px;margin-top:16px}
.rp .modulos div{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#374063;line-height:1.45}
.rp .modulos svg{width:18px;height:18px;color:var(--coral);flex:none;margin-top:2px}

/* Salidas: chips planos (cortas) o lista abierta (largas) */
.rp .chips2{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.rp .chips2 span{background:#f1f3fa;border:1px solid var(--line);border-radius:9px;padding:9px 14px;font-size:13.5px;font-weight:600;color:#384568}
.rp .flowlist{display:grid;gap:10px;margin-top:16px;padding:0;list-style:none}
.rp .flowlist li{position:relative;padding-left:20px;font-size:15px;line-height:1.55;color:#374063}
.rp .flowlist li::before{content:'';position:absolute;left:0;top:9px;width:7px;height:7px;border-radius:50%;background:var(--coral)}

/* Continúa tu ruta: filas-acción (LinkRow/ActionCard) */
.rp .afterlinks{display:grid;gap:11px;margin-top:16px}
.rp .afterlink{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border:1px solid var(--line);border-radius:13px;text-decoration:none;background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s}
.rp .afterlink:hover{border-color:var(--coral);transform:translateX(3px);box-shadow:var(--shadow-sm)}
.rp .afterlink b{color:var(--navy);font-weight:800;font-size:15px;display:block}
.rp .afterlink small{color:var(--muted);font-size:13px}
.rp .afterlink .go{color:var(--coral);font-weight:800;font-size:18px;flex:none;line-height:1}

/* Datos clave: la ÚNICA tarjeta del cuerpo (sticky) */
.rp .keycard{position:sticky;top:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px;box-shadow:var(--shadow-md)}
.rp .keycard h3{margin-bottom:6px}
.rp .kv{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-size:14px}
.rp .kv:last-of-type{border-bottom:0}
.rp .kv span{color:var(--muted)}
.rp .kv b{color:var(--navy);font-weight:700;text-align:right}
.rp .keycard .btn{width:100%;margin-top:8px}

/* Inserción: banda de estadística (StatBand) */
.rp .statband{position:relative;overflow:hidden;background:linear-gradient(120deg,#16204a,#0e1330);color:#fff;border-radius:20px;padding:clamp(24px,3vw,38px)}
.rp .statband__in{position:relative;z-index:1;display:grid;grid-template-columns:auto 1fr;gap:18px 32px;align-items:center}
.rp .statband h3{color:#fff;font-size:1.25rem;max-width:260px}
.rp .statband .stat b{font-weight:800;font-size:2.1rem;display:block;line-height:1;color:#fff}
.rp .statband .stat span{font-size:13px;color:#aeb7d6;display:block;margin-top:4px}
.rp .statband .statnote{grid-column:1/-1;font-size:12.5px;color:#9aa3c9;margin-top:2px}
.rp .statband .statnote a{color:#ffc2d1}

/* ====================  VER INFORMACIÓN COMPLETA  ==================== */
.rp .ds-more{margin-top:clamp(28px,3.5vw,40px);border-top:1px solid var(--line);padding-top:clamp(20px,2.5vw,28px)}
.rp .ds-more>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:14.5px;color:var(--coral);user-select:none}
.rp .ds-more>summary::-webkit-details-marker{display:none}
.rp .ds-more>summary::after{content:'▾';font-size:12px;transition:transform .2s}
.rp .ds-more[open]>summary::after{transform:rotate(180deg)}
.rp .ds-more__in{margin-top:clamp(20px,2.5vw,28px)}
.rp .subsec{padding:0 0 clamp(22px,3vw,30px);margin:0 0 clamp(22px,3vw,30px);border-bottom:1px solid var(--line)}
.rp .subsec:last-child{border-bottom:0;margin-bottom:0}
.rp .subsec>h3{margin-bottom:10px}
.rp .subsec ul{margin:0;padding-left:20px;display:grid;gap:7px}
.rp .subsec li{font-size:14.5px;line-height:1.55;color:#374063}
.rp .subsec p{margin-top:8px}
.rp .subsec ul.facts{padding-left:0;list-style:none;gap:8px}
.rp .subsec ul.facts li{font-size:14.5px;color:#374063;line-height:1.5}
.rp .subsec ul.facts b{color:var(--navy)}

/* Lista de fuentes / normativa (SourceList): filas con enlace, sin tarjeta */
.rp .srclist{display:grid;gap:2px;margin-top:6px}
.rp .srclist a,.rp .srclist span.src{display:flex;align-items:baseline;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px;color:#374063;text-decoration:none}
.rp .srclist a:last-child{border-bottom:0}
.rp .srclist a:hover{color:var(--coral)}
.rp .srclist b{color:var(--navy);font-weight:700;flex:none}
.rp .srclist .go{margin-left:auto;color:var(--coral);font-weight:800;flex:none}

/* ====================  RELACIONES / COMPARATIVAS (filas, no tarjetas)  ==================== */
.rp .rellist{display:grid;gap:0;margin-top:14px}
.rp .relrow{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.rp .relrow:last-child{border-bottom:0}
.rp .relrow__tag{flex:none;width:92px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.rp .relrow__main{flex:1;min-width:0}
.rp .relrow__t{display:block;font-weight:800;color:var(--navy);font-size:15px;line-height:1.3}
.rp .relrow:hover .relrow__t{color:var(--coral)}
.rp .relrow__m{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.rp .relrow__why{display:block;color:#475569;font-size:13.5px;margin-top:5px;line-height:1.5}
.rp .relrow .go{flex:none;color:var(--coral);font-weight:800;font-size:18px;line-height:1.3}
/* Ruta sugerida: itinerario en línea (sin cajas), con botón para adoptarla */
.rp .relroute{display:flex;flex-wrap:wrap;align-items:center;gap:8px 6px;margin-top:14px}
.rp .relroute .rstep{font-size:14px;color:#374063}
.rp .relroute .rstep b{color:var(--navy)}
.rp .relroute .rarrow{color:var(--coral);font-weight:800}
.rp .relroute-note{margin-top:8px;font-size:13px;color:var(--muted)}
.rp .rp-rel-slot .ficha-related-loading,.rp .relloading{color:var(--muted);font-size:14px;margin-top:16px}
.rp .btn--small{padding:9px 16px;font-size:13.5px;margin-top:14px}

/* ---- Responsive ---- */
@media(max-width:900px){
  .rp .ds-grid{grid-template-columns:1fr}
  .rp .keycard{position:static}
  .rp .ds-main{max-width:none}
  .rp .statband__in{grid-template-columns:1fr}
}
@media(max-width:560px){
  .rp .modulos{grid-template-columns:1fr}
}

/* ====================  PÁGINAS DE CONTENIDO EDITORIAL (Salud Mental, hubs)  ====================
   Secciones abiertas por defecto; solo quedan como "destacado" el hero, la
   alerta de emergencia y el disclaimer. El resto: texto, columnas y LinkRows. */
.rp .page-hero{padding:clamp(26px,4vw,46px) 0 clamp(14px,2vw,22px)}
.rp .page-hero h1{color:var(--navy);margin-top:10px;font-size:clamp(1.9rem,4vw,2.7rem)}
.rp .page-hero .lead{margin-top:14px;max-width:var(--read);font-size:16px;line-height:1.6;color:#414b6b}

/* Alertas (emergencia / aviso) — los únicos recuadros destacados */
.rp .alert{border-left:4px solid var(--line);background:var(--surface);border-radius:12px;padding:18px 20px;margin:clamp(18px,2.5vw,26px) 0}
.rp .alert--danger{border-left-color:var(--coral);background:#fff2f5}
.rp .alert--note{border-left-color:#c3ccde}
.rp .alert>strong{display:block;color:var(--navy);font-weight:800;font-size:15.5px}
.rp .alert>p{margin-top:5px;font-size:14px;line-height:1.55;color:#475569}
.rp .urg-items{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.rp .urg-item{display:block;text-decoration:none;padding:12px 15px;border:1px solid rgba(236,63,104,.25);border-radius:10px;background:#fff}
.rp .urg-item b{display:block;font-size:1.45rem;font-weight:800;color:var(--coral);line-height:1}
.rp .urg-item span{display:block;font-weight:700;color:var(--navy);font-size:14px;margin-top:5px}
.rp .urg-item small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
@media(max-width:560px){.rp .urg-items{grid-template-columns:1fr}}

/* Sección de contenido sin caja */
.rp .csec{padding:clamp(24px,3.5vw,36px) 0;border-top:1px solid var(--line)}
.rp .csec:first-of-type{border-top:0}
.rp .csec>h2{color:var(--navy)}
.rp .csec>.lead{margin-top:8px;max-width:var(--read);color:var(--muted);font-size:15px}

/* Columnas de texto (sin tarjetas) */
.rp .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px 34px;margin-top:18px}
.rp .cols h4{color:var(--navy);font-weight:800;font-size:15.5px;margin:0 0 6px}
.rp .cols p{font-size:14px;line-height:1.55;color:#475569}

/* LinkRows (herramientas, guías, recursos) */
.rp .lrow{display:flex;align-items:flex-start;gap:14px;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none}
.rp .lrow:last-child{border-bottom:0}
.rp .lrow__main{min-width:0;flex:1}
.rp .lrow__t{display:block;font-weight:700;color:var(--navy);font-size:15px;line-height:1.3}
.rp .lrow:hover .lrow__t{color:var(--coral)}
.rp .lrow__m{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.rp .lrow__d{display:block;color:#475569;font-size:13.5px;margin-top:4px;line-height:1.5}
.rp .lrow .go{flex:none;color:var(--coral);font-weight:800;font-size:18px;line-height:1.3}

/* Tabs de público (subrayado, sin cápsula) */
.rp .tabs{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:16px;border-bottom:1px solid var(--line)}
.rp .tab{background:none;border:0;padding:10px 2px;font:700 14.5px 'Plus Jakarta Sans';color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.rp .tab:hover{color:var(--navy)}
.rp .tab.is-active{color:var(--coral);border-bottom-color:var(--coral)}
.rp .tabpanel[hidden]{display:none}

/* Tabla comparativa */
.rp .dtable{width:100%;border-collapse:collapse;margin-top:14px;font-size:14px}
.rp .dtable th{text-align:left;font-weight:800;color:var(--navy);padding:10px 12px;border-bottom:2px solid var(--line)}
.rp .dtable td{padding:10px 12px;border-bottom:1px solid var(--line);color:#475569;vertical-align:top}
.rp .dtable td:first-child{font-weight:700;color:var(--navy)}
.rp .dtable-title{display:block;font-weight:800;color:var(--navy);margin-top:6px}

/* Autochequeo (reflect) — interactivo, sin caja pesada */
.rp .selfcheck{margin-top:16px}
.rp .selfcheck-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px 22px}
.rp .selfcheck-opt{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:#374063;cursor:pointer}
.rp .selfcheck-opt input{margin-top:3px;accent-color:var(--coral)}
.rp .selfcheck-actions{display:flex;align-items:center;gap:16px;margin-top:16px;flex-wrap:wrap}
.rp .selfcheck-note{color:var(--muted);font-size:13px}
.rp .selfcheck-out{margin-top:14px}
.rp .selfcheck-out .msg{font-size:15px;line-height:1.6;color:#374063;max-width:var(--read)}
.rp .selfcheck-out .safe{margin-top:12px;font-size:14px;line-height:1.55;color:var(--navy);background:#fff2f5;border-left:4px solid var(--coral);border-radius:10px;padding:12px 15px}
.rp .selfcheck-out .links{margin-top:12px}

/* ====================  PASADA DE PERSONALIDAD  ====================
   Rompe el gris sin volver a las cajas: acento de color POR TIPO de bloque
   (var --rp-accent; coral sigue siendo la ACCIÓN principal), foto sutil en el
   hero, iconos de línea por sección y tipografía más expresiva. */
.rp { --rp-accent: var(--coral); }

/* Hero: degradado que vira al acento del bloque + foto difuminada detrás */
.rp .phero{background:linear-gradient(100deg,#0b112c 0%,#141a3c 33%,color-mix(in srgb,var(--rp-accent) 48%,#241436) 72%,var(--rp-accent) 100%)}
.rp .phero__photo{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center;opacity:.17;filter:grayscale(.4) contrast(1.05);mix-blend-mode:luminosity;pointer-events:none}
.rp .phero h1{font-size:clamp(2.2rem,4.8vw,3.6rem)}
.rp .phero .kicker,.rp .phero .kicker::before{color:color-mix(in srgb,var(--rp-accent),white 58%)}
.rp .phero .kicker::before{background:color-mix(in srgb,var(--rp-accent),white 58%)}

/* Acento del bloque en kickers, flechas y detalles */
.rp .kicker{color:var(--rp-accent)}
.rp .kicker::before{background:var(--rp-accent)}
.rp .kicker svg{width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rp .kicker:has(svg)::before{display:none}
.rp .afterlink .go,.rp .relrow .go,.rp .lrow .go,.rp .srclist .go{color:var(--rp-accent)}
.rp .afterlink:hover{border-color:var(--rp-accent)}
.rp .afterlink:hover .go{transform:translateX(2px)}
.rp .afterlink .go{transition:transform .15s}
.rp .modulos svg{color:var(--rp-accent)}
.rp .flowlist li::before{background:var(--rp-accent)}

/* Datos clave: filo de color arriba (microdetalle) */
.rp .keycard{border-top:3px solid var(--rp-accent)}

/* Tipografía más expresiva: subrayado corto de acento bajo los títulos de sección */
.rp .fblock>h2,.rp .csec>h2{position:relative}
.rp .fblock>h2::after{content:'';display:block;width:42px;height:3px;border-radius:2px;background:var(--rp-accent);margin-top:12px;opacity:.85}
.rp .statband .stat b{font-size:2.4rem}

/* Hero de página de contenido (Salud Mental y hubs): cálido, no plano */
.rp .page-hero .hl{color:var(--rp-accent)}

/* Contenido editorial (Salud Mental/hubs): mismo trato de personalidad con el
   acento del bloque (p. ej. teal en Salud Mental). */
.rp .csec>h2::after{content:'';display:block;width:42px;height:3px;border-radius:2px;background:var(--rp-accent);margin-top:12px;opacity:.85}
.rp .tab.is-active{color:var(--rp-accent);border-bottom-color:var(--rp-accent)}
.rp .page-hero h1{font-size:clamp(2rem,4.5vw,3rem)}

/* ====================  LISTADOS / CATÁLOGO  ====================
   Resultados como FILAS (no grid de tarjetas), hero de lista con acento del
   bloque y barra de filtros limpia (sin pelotón de cápsulas). */
.rp .list-hero{position:relative;overflow:hidden;color:#fff;width:100vw;margin-left:calc(50% - 50vw);background:linear-gradient(100deg,#0b112c 0%,#141a3c 34%,color-mix(in srgb,var(--rp-accent) 46%,#241436) 72%,var(--rp-accent) 100%)}
.rp .list-hero__in{position:relative;z-index:1;max-width:var(--maxw);margin:0 auto;padding:clamp(22px,3.2vw,40px) clamp(18px,4vw,40px)}
.rp .list-hero h1{color:#fff;font-size:clamp(1.7rem,3.6vw,2.6rem);margin-top:8px}
.rp .list-hero .kicker,.rp .list-hero .kicker::before{color:color-mix(in srgb,var(--rp-accent),white 60%)}
.rp .list-hero .kicker::before{background:color-mix(in srgb,var(--rp-accent),white 60%)}
.rp .list-hero p{color:#d6dcf2;margin-top:10px;font-size:14.5px;max-width:70ch}
.rp .list-hero__back{display:inline-flex;align-items:center;gap:7px;margin-top:16px;color:#fff;text-decoration:none;font-weight:700;font-size:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);border-radius:11px;padding:9px 16px}
.rp .list-hero__back:hover{background:rgba(255,255,255,.2)}

.rp .toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:clamp(20px,3vw,28px) 0 6px}
.rp .toolbar .srch{flex:1;min-width:220px;display:flex;gap:10px}
.rp .toolbar input[type=search]{flex:1;min-width:0;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;font:500 14px 'Plus Jakarta Sans';color:var(--ink);background:#fff}
.rp .toolbar input[type=search]:focus{outline:none;border-color:var(--rp-accent)}
.rp .filterchips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 2px;align-items:center}
.rp .filterchips .lbl{font-size:12.5px;font-weight:700;color:var(--muted);margin-right:2px}
.rp .filterchips a{font:600 13px 'Plus Jakarta Sans';color:#384568;background:#fff;border:1.5px solid var(--line);border-radius:9px;padding:8px 13px;text-decoration:none}
.rp .filterchips a:hover{border-color:var(--rp-accent);color:var(--rp-accent)}
.rp .filterchips a.is-on{background:var(--rp-accent);border-color:var(--rp-accent);color:#fff}
.rp .count-note{color:var(--muted);font-size:13.5px;margin:6px 0 0}

.rp .resrows{margin-top:10px}
.rp .resrow{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:18px 0;border-bottom:1px solid var(--line)}
.rp .resrow:last-child{border-bottom:0}
.rp .resrow__main{min-width:0;flex:1}
.rp .resrow__tag{display:inline-block;font:800 10.5px 'Plus Jakarta Sans';letter-spacing:.08em;text-transform:uppercase;color:var(--rp-accent);margin-bottom:5px}
.rp .resrow__t{font-weight:800;color:var(--navy);font-size:17px;line-height:1.25;margin:0}
.rp .resrow__d{color:#475569;font-size:14px;line-height:1.5;margin:5px 0 0;max-width:64ch}
.rp .resrow__meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:9px;color:var(--muted);font-size:12.5px;font-weight:600}
.rp .resrow__meta span{position:relative}
.rp .resrow-actions{flex:none;display:flex;flex-direction:column;gap:8px;align-items:stretch;width:150px}
.rp .resrow-actions .btn{width:100%;padding:10px 14px;font-size:13.5px}
.rp .empty-list,.rp .relloading{color:var(--muted);font-size:14.5px;padding:24px 0}
@media(max-width:620px){
  .rp .resrow{flex-direction:column;gap:12px}
  .rp .resrow-actions{flex-direction:row;width:auto}
  .rp .list-hero{width:auto;margin-left:0}
}

/* Catálogo VISTOSO: tarjeta con foto + tinte del acento (estilo home) */
.rp .dsgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:18px}
.rp .dscard{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;min-height:278px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;color:#fff;box-shadow:var(--shadow-md);transition:transform .25s ease,box-shadow .25s ease}
.rp .dscard:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(13,20,48,.26)}
.rp .dscard__ph{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;filter:grayscale(.3) contrast(1.05);transition:transform .5s ease}
.rp .dscard:hover .dscard__ph{transform:scale(1.06)}
.rp .dscard__tint{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--rp-accent) 42%,transparent) 0%,rgba(11,17,48,.5) 46%,rgba(11,17,48,.94) 100%)}
.rp .dscard__tag{display:inline-flex;align-items:center;gap:8px;font:800 10.5px 'Plus Jakarta Sans';letter-spacing:.13em;text-transform:uppercase;color:#fff;opacity:.95;margin-bottom:8px}
.rp .dscard__tag::before{content:'';width:16px;height:2px;background:#fff;opacity:.8}
.rp .dscard h3{font-weight:800;font-size:1.18rem;line-height:1.2;letter-spacing:-.01em;color:#fff;margin:0}
.rp .dscard__meta{display:flex;flex-wrap:wrap;gap:3px 14px;margin-top:10px;font-size:12.5px;font-weight:600;color:rgba(255,255,255,.88)}
.rp .dscard__foot{display:flex;gap:9px;margin-top:16px}
.rp .dscard__foot .btn{flex:1;padding:10px 12px;font-size:13px}
.rp .dscard .btn--ghost{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.42);color:#fff}
.rp .dscard .btn--ghost:hover{background:rgba(255,255,255,.26)}

/* ============================================================================
   CATÁLOGO CLÁSICO -> look DS vistoso (SOLO CSS, sin tocar la lógica de cada
   bloque). Aprovecha que todas las listas usan .result-card con --card-photo
   y --accent, y .catalog-head dentro de un .page-card. Reutiliza esos vars.
   ============================================================================ */
/* Fuera el marco blanco de la página de bloque */
#main-view .university-results,#main-view .access-results,#main-view .certification-results,
#main-view .habilitation-results,#main-view .permit-results,#main-view .other-teaching-results,
#main-view .certificate-catalog,#main-view .compact-catalog{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;
}
/* Cabecera -> banda navy->acento a sangre (como el hero de lista de FP) */
#main-view .catalog-head{
  position:relative;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);min-height:0!important;
  background:linear-gradient(100deg,#0b112c 0%,#141a3c 34%,color-mix(in srgb,var(--accent,#2563eb) 46%,#241436) 72%,var(--accent,#2563eb) 100%)!important;
  color:#fff!important;border:0!important;border-radius:0!important;
  padding:clamp(22px,3.2vw,40px) max(clamp(18px,4vw,40px),calc((100vw - 1200px)/2))!important;
  margin-bottom:clamp(18px,2.6vw,28px)!important;
}
#main-view .catalog-head>*{position:relative;z-index:1}
#main-view .catalog-head h2{color:#fff!important}
#main-view .catalog-head p{color:#d6dcf2!important}
#main-view .catalog-head .list-kicker{color:color-mix(in srgb,var(--accent,#2563eb),white 60%)!important}
#main-view .catalog-head .primary-link{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.32)!important;border-radius:11px!important}

/* Tarjetas de resultado -> foto + tinte del acento + texto blanco */
#main-view .result-card{
  position:relative;isolation:isolate;overflow:hidden;min-height:278px;
  display:flex!important;flex-direction:column;justify-content:flex-end;
  padding:22px!important;color:#fff!important;border:0!important;border-radius:18px!important;
  box-shadow:0 16px 38px rgba(13,20,48,.12)!important;background:#0b1130!important;
  transition:transform .25s ease,box-shadow .25s ease;
}
#main-view .result-card:hover{transform:translateY(-5px);box-shadow:0 26px 50px rgba(13,20,48,.26)!important}
#main-view .result-card::before{content:'';position:absolute;inset:0;z-index:-2;background-image:var(--card-photo);background-size:cover;background-position:center;filter:grayscale(.3) contrast(1.05);transition:transform .5s ease}
#main-view .result-card:hover::before{transform:scale(1.06)}
#main-view .result-card::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,color-mix(in srgb,var(--accent,#2563eb) 42%,transparent) 0%,rgba(11,17,48,.5) 46%,rgba(11,17,48,.94) 100%)}
#main-view .result-card h3{color:#fff!important;font-weight:800;font-size:1.16rem;line-height:1.2;margin:0 0 4px}
#main-view .result-card>p{color:rgba(255,255,255,.9)!important;font-size:13px;line-height:1.45;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#main-view .result-card .tag{align-self:flex-start;background:rgba(255,255,255,.18)!important;color:#fff!important;border:0!important;border-radius:8px!important;padding:5px 10px!important;font-weight:800!important;font-size:10.5px!important;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px!important}
#main-view .result-card .result-meta,#main-view .result-card .result-meta--compact{margin-top:8px!important;gap:4px 14px!important;font-size:12.5px!important}
#main-view .result-card .result-meta span{color:rgba(255,255,255,.85)!important;background:transparent!important;border:0!important;padding:0!important}
#main-view .result-card .output-list,#main-view .result-card .profession-signal-row{color:rgba(255,255,255,.85)!important}
#main-view .result-card .output-list strong{color:#fff!important}
#main-view .result-card .card-actions{margin-top:16px!important;display:flex!important;gap:9px!important}
#main-view .result-card .card-actions button{flex:1;border-radius:11px!important;padding:10px 12px!important;font-weight:700!important;font-size:13px!important;cursor:pointer;border:0!important;line-height:1.1}
#main-view .result-card .card-actions button:first-child{background:rgba(255,255,255,.15)!important;border:1px solid rgba(255,255,255,.42)!important;color:#fff!important}
#main-view .result-card .card-actions button:last-child{background:linear-gradient(135deg,#ec3f68,#c4214c)!important;color:#fff!important}

/* ============================================================================
   HUBS DE CONTENIDO (diag-*/vocational-*/emp-*) -> editorial (solo CSS).
   Cubre emprendimiento, mi-trabajo, ahora-que, diagnostico y afines: fuera el
   marco blanco y la sopa de tarjetas; pestanas con subrayado; secciones
   abiertas. La cabecera .catalog-head ya va en banda (regla de catalogo).
   ============================================================================ */
#main-view .vocational-test,#main-view .vocational-page,#main-view .diag-page{
  background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;
}
/* Pestañas: subrayado, sin cápsula */
#main-view .diag-tabs{display:flex;flex-wrap:wrap;gap:4px 22px;margin:clamp(18px,2.5vw,26px) 0 0;border-bottom:1px solid #e7eaf3;background:transparent!important;padding:0!important}
#main-view .diag-tab{background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:10px 2px!important;font:700 14.5px 'Plus Jakarta Sans',system-ui,sans-serif!important;color:#5b6480!important;cursor:pointer;margin-bottom:-1px!important;box-shadow:none!important}
#main-view .diag-tab:hover{color:#0f1736!important}
#main-view .diag-tab.is-active{color:#ec3f68!important;border-bottom-color:#ec3f68!important;background:none!important}
/* Contenido: secciones abiertas y columnas de texto (sin tarjetas) */
#main-view .diag-info{padding-top:clamp(18px,2.5vw,26px)}
#main-view .diag-info-intro{max-width:760px;color:#414b6b;font-size:15.5px;line-height:1.6;margin:0 0 18px}
#main-view .diag-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 32px}
#main-view .diag-info-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
#main-view .diag-info-card h3{color:#0f1736!important;font-weight:800;font-size:15.5px;margin:0 0 6px}
#main-view .diag-info-card p{color:#475569!important;font-size:14px;line-height:1.55;margin:0}
#main-view .diag-info-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px}
#main-view .diag-info-links a{color:#ec3f68!important;font-weight:700;font-size:13.5px;text-decoration:none}
#main-view .diag-info-links a:hover{text-decoration:underline}
#main-view .diag-ent-badge{display:inline-block;font-size:11px;font-weight:700;color:#5b6480;background:#eef1f7;border-radius:7px;padding:2px 8px;margin-left:6px}
/* Banner de herramientas: panel sobrio (no caja dura) */
#main-view .emp-banner{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;background:linear-gradient(120deg,#0f1736,#16204a)!important;color:#fff!important;border:0!important;border-radius:16px!important;padding:18px 22px!important;margin:clamp(16px,2.4vw,24px) 0!important}
#main-view .emp-banner strong{color:#fff!important}
#main-view .emp-banner p{color:#d6dcf2!important;margin-top:4px}
#main-view .emp-banner-links{display:flex;flex-wrap:wrap;gap:9px}
#main-view .emp-banner-links a{background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.3)!important;color:#fff!important;border-radius:11px!important;padding:9px 15px!important;font-weight:700;font-size:13.5px;text-decoration:none}
#main-view .emp-banner-links a:hover{background:rgba(255,255,255,.24)!important}
/* Tabla comparativa limpia */
#main-view .emp-tabla{width:100%;border-collapse:collapse;font-size:14px}
#main-view .emp-tabla th{text-align:left;font-weight:800;color:#0f1736;padding:10px 12px;border-bottom:2px solid #e7eaf3;background:transparent!important}
#main-view .emp-tabla td{padding:10px 12px;border-bottom:1px solid #e7eaf3;color:#475569;vertical-align:top}
#main-view .emp-tabla-key{font-weight:700;color:#0f1736!important}
#main-view .emp-tabla-titulo{color:#0f1736;font-weight:800;font-size:1.15rem;margin:clamp(20px,3vw,28px) 0 2px}
/* Vídeos como filas-enlace */
#main-view .emp-videos{display:grid;gap:0;margin-top:14px}
#main-view .emp-video{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid #e7eaf3;text-decoration:none}
#main-view .emp-video-play{color:#ec3f68;font-size:18px;flex:none}
#main-view .emp-video-txt strong{display:block;color:#0f1736;font-weight:700;font-size:15px}
#main-view .emp-video-txt em{color:#ec3f68;font-size:13px;font-style:normal;font-weight:700}
/* Disclaimer -> aviso */
#main-view .vocational-disclaimer{background:#f6f7fb!important;border:0!important;border-left:4px solid #c3ccde!important;border-radius:12px!important;padding:16px 18px!important;margin-top:clamp(20px,3vw,28px)!important}
#main-view .vocational-disclaimer strong{color:#0f1736!important}

/* ============================================================================
   HUBS DE CONTENIDO (metodo-estudio me-*, hospedajes ho-*, acoso ac-*,
   mi-primera-vez mpv-*, ferias ferias-*) -> editorial (solo CSS).
   Misma estructura que Salud Mental: tabs->subrayado, carruseles->rejilla,
   tarjetas de contenido->columnas abiertas, CTAs rectangulares, tablas limpias.
   Se conservan destacados: urgente/emergencia y el registro de incidentes.
   ============================================================================ */
/* Pestañas */
#main-view .me-tabs,#main-view .ho-tabs,#main-view .ac-tabs{display:flex;flex-wrap:wrap;gap:4px 22px;margin-top:16px;border-bottom:1px solid #e7eaf3;background:transparent!important;padding:0!important}
#main-view .me-tab,#main-view .ho-tab,#main-view .ac-tab{background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:10px 2px!important;font:700 14.5px 'Plus Jakarta Sans',system-ui,sans-serif!important;color:#5b6480!important;cursor:pointer;margin-bottom:-1px!important;box-shadow:none!important}
#main-view .me-tab:hover,#main-view .ho-tab:hover,#main-view .ac-tab:hover{color:#0f1736!important}
#main-view .me-tab.is-active,#main-view .ho-tab.is-active,#main-view .ac-tab.is-active{color:#ec3f68!important;border-bottom-color:#ec3f68!important}
/* Cabeceras de sección */
#main-view .block-head{display:flex;gap:12px;align-items:flex-start;margin-top:clamp(22px,3vw,32px)}
#main-view .block-head-txt h3,#main-view .block-head h3{color:#0f1736!important;font-weight:800}
#main-view .block-head-txt p{color:#5b6480!important;max-width:70ch}
/* Carruseles -> rejilla de columnas */
#main-view .me-carousel,#main-view .ho-carousel,#main-view .ac-carousel{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:22px 32px!important;overflow:visible!important;margin-top:16px}
/* Tarjetas de contenido -> abiertas (sin caja) */
#main-view .me-card,#main-view .ho-card,#main-view .ho-resi-card,#main-view .ac-card,#main-view .mpv-card,#main-view .mpv-out-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;min-width:0!important}
#main-view .me-card h3,#main-view .ho-card h3,#main-view .ac-card h3,#main-view .mpv-card h3,#main-view .mpv-out-card h3,#main-view .me-card h4,#main-view .ho-card h4,#main-view .ac-card h4{color:#0f1736!important;font-weight:800;font-size:15.5px}
#main-view .me-card p,#main-view .ho-card p,#main-view .ac-card p,#main-view .mpv-card p,#main-view .mpv-out-card p{color:#475569!important;font-size:14px;line-height:1.55}
/* CTAs -> botones DS */
#main-view .me-cta,#main-view .ho-cta,#main-view .ac-cta,#main-view .mpv-cta{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#ec3f68,#c4214c)!important;color:#fff!important;border:0!important;border-radius:11px!important;padding:11px 18px!important;font-weight:700!important;font-size:14px!important;text-decoration:none;box-shadow:0 8px 20px rgba(236,63,104,.28)}
#main-view .me-cta--ghost,#main-view .ho-cta--ghost,#main-view .ac-cta--ghost,#main-view .mpv-cta--ghost{background:#fff!important;color:#384568!important;border:1.5px solid #e7eaf3!important;box-shadow:none!important}
/* Tablas */
#main-view .me-table-wrap table,#main-view .ho-table-wrap table,#main-view .ac-table-wrap table{width:100%;border-collapse:collapse;font-size:14px}
#main-view .me-table-wrap th,#main-view .ho-table-wrap th,#main-view .ac-table-wrap th{text-align:left;font-weight:800;color:#0f1736;padding:10px 12px;border-bottom:2px solid #e7eaf3}
#main-view .me-table-wrap td,#main-view .ho-table-wrap td,#main-view .ac-table-wrap td{padding:10px 12px;border-bottom:1px solid #e7eaf3;color:#475569;vertical-align:top}

/* Ferias: tarjetas de feria como filas limpias (catálogo de recursos) */
#main-view .ferias-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:18px}
#main-view .ferias-card{background:#fff!important;border:1px solid #e7eaf3!important;border-radius:14px!important;box-shadow:none!important;padding:18px!important;transition:border-color .2s,box-shadow .2s}
#main-view .ferias-card:hover{border-color:#ec3f68!important;box-shadow:0 12px 26px rgba(13,20,48,.08)!important}
#main-view .ferias-card h3{color:#0f1736!important;font-weight:800}
#main-view .ferias-card-link{color:#ec3f68!important;font-weight:700;text-decoration:none}

/* Competencias (cmp-*): pase ligero de coherencia (sin tocar su logica).
   Pestanas subrayadas, botones/etiquetas rectangulares, bloques mas suaves. */
#main-view .cmp-tabs,#main-view .cmp-subtabs{display:flex;flex-wrap:wrap;gap:4px 20px;border-bottom:1px solid #e7eaf3;background:transparent!important}
#main-view .cmp-tab,#main-view .cmp-subtab{background:none!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;padding:10px 2px!important;font:700 14px 'Plus Jakarta Sans',system-ui,sans-serif!important;color:#5b6480!important;cursor:pointer;margin-bottom:-1px!important;box-shadow:none!important}
#main-view .cmp-tab:hover,#main-view .cmp-subtab:hover{color:#0f1736!important}
#main-view .cmp-tab.is-active,#main-view .cmp-subtab.is-active,#main-view .cmp-tab[aria-selected="true"],#main-view .cmp-subtab[aria-selected="true"]{color:#ec3f68!important;border-bottom-color:#ec3f68!important}
#main-view .cmp-btn{border-radius:11px!important;background:linear-gradient(135deg,#ec3f68,#c4214c)!important;color:#fff!important;border:0!important;font-weight:700!important;box-shadow:0 8px 20px rgba(236,63,104,.26)}
#main-view .cmp-btn--ghost{background:#fff!important;color:#384568!important;border:1.5px solid #e7eaf3!important;box-shadow:none!important}
#main-view .cmp-tag{border-radius:8px!important}
#main-view .cmp-block{border-radius:16px!important;box-shadow:none!important;border:1px solid #e7eaf3!important}

/* ============================================================================
   PICKERS (hierarchy-picker + visual-choice-card) y WIZARD del test/brujula
   (vocational-*): faltaban. Fuera caja blanca de "Paso N", chips de nivel
   sobrios, stepper y secciones limpias. Solo presentacion.
   ============================================================================ */
/* "Paso N" ya no es una caja blanca */
#main-view .hierarchy-picker{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important;margin-top:clamp(16px,2.4vw,24px)}
#main-view .hierarchy-picker>div:first-child{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:6px}
#main-view .hierarchy-picker>div:first-child strong{color:#0f1736;font-weight:800;font-size:14.5px}
#main-view .hierarchy-picker>div:first-child span{color:#5b6480;font-size:13px}
/* Chips de nivel en la tarjeta de eleccion: tags translucidos sobrios */
#main-view .visual-choice-card em{display:flex!important;flex-wrap:wrap;gap:5px!important;margin-top:8px;font-style:normal!important}
#main-view .visual-choice-card em i{background:rgba(255,255,255,.17)!important;color:#fff!important;border:0!important;border-radius:7px!important;padding:3px 8px!important;font:600 10.5px 'Plus Jakarta Sans',system-ui,sans-serif!important;font-style:normal!important;letter-spacing:0!important}

/* Wizard del test (vocational-*): fuera marco y capsulas */
#main-view .vocational-test{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
#main-view .vocational-stepper{display:flex;flex-wrap:wrap;gap:6px 20px;border-bottom:1px solid #e7eaf3;margin-top:clamp(16px,2.4vw,24px);background:transparent!important;padding:0!important}
#main-view .vocational-stepper>*{background:none!important;border:0!important;border-radius:0!important;color:#5b6480!important;padding:10px 2px!important;font-weight:700!important;box-shadow:none!important;border-bottom:2px solid transparent!important;margin-bottom:-1px!important}
#main-view .vocational-stepper>.is-active,#main-view .vocational-stepper>[aria-current],#main-view .vocational-stepper>[aria-selected="true"]{color:#ec3f68!important;border-bottom-color:#ec3f68!important}
#main-view .vocational-section{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:clamp(16px,2.4vw,26px) 0!important}
#main-view .vocational-section-head h2,#main-view .vocational-section-head h3{color:#0f1736!important}
#main-view .vocational-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px 22px}
#main-view .vocational-check{background:#fff!important;border:1px solid #e7eaf3!important;border-radius:12px!important;box-shadow:none!important}
#main-view .vocational-check:hover{border-color:#ec3f68!important}

/* Microcredenciales (universidad): 4 cajas -> columnas; "Que NO son" -> aviso;
   tarjetas de universidad/fuentes -> limpias. (Faltaba.) */
#main-view .microcred{margin-top:clamp(26px,4vw,42px)}
#main-view .microcred-tag{display:inline-block;background:#fff2f5!important;color:#c4214c!important;border:0!important;border-radius:7px!important;padding:3px 9px!important;font-weight:800!important;font-size:10.5px!important;letter-spacing:.08em;text-transform:uppercase}
#main-view .microcred-head h3{color:#0f1736!important}
#main-view .microcred-head p{color:#5b6480!important;max-width:760px}
#main-view .microcred-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important;gap:22px 34px!important;margin-top:18px}
#main-view .microcred-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
#main-view .microcred-card h4{color:#0f1736!important;font-weight:800;font-size:15.5px;margin:0 0 6px}
#main-view .microcred-card p{color:#475569!important;font-size:14px;line-height:1.55}
#main-view .microcred-noson{background:#fffaf0!important;border:0!important;border-left:4px solid #e0a63a!important;border-radius:12px!important;padding:16px 20px!important;margin-top:clamp(20px,3vw,28px)!important;box-shadow:none!important}
#main-view .microcred-noson strong{color:#0f1736!important}
#main-view .microcred-unis{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))!important;gap:14px!important;margin-top:14px}
#main-view .microcred-uni{background:#fff!important;border:1px solid #e7eaf3!important;border-radius:14px!important;box-shadow:none!important;padding:16px!important;text-decoration:none}
#main-view .microcred-uni:hover{border-color:#ec3f68!important}
#main-view .microcred-uni-name{color:#0f1736!important;font-weight:700}
#main-view .microcred-uni-go{color:#ec3f68!important;font-weight:700}
#main-view .microcred-cat{background:#fff!important;border:1px solid #e7eaf3!important;border-radius:12px!important;box-shadow:none!important}
#main-view .microcred-cat b{color:#0f1736!important}

/* Icono representativo de familia/rama en las tarjetas de elección (pickers) */
#main-view .visual-choice-card .choice-ico{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.94);display:grid;place-items:center;color:#16204a;margin-bottom:10px;box-shadow:0 4px 12px rgba(13,20,48,.18)}
#main-view .visual-choice-card .choice-ico svg{width:22px;height:22px}

/* ============================================================================
   BREADCRUMB REFINADO (DS 2.0) — fuera las píldoras "Inicio"/"Volver" chunky.
   Rastro de texto sobrio: enlaces discretos, sin fondo, sin sombra, sin cápsula.
   "Volver" pasa a ser un enlace quieto a la derecha. ds.css carga el último,
   así que esto gana a todas las reglas anteriores de styles.css.
   ============================================================================ */
#main-view .breadcrumb,
.breadcrumb {
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: #8a93a8 !important;
  gap: 7px !important;
  margin: clamp(14px, 2vw, 22px) auto 10px !important;
}
#main-view .breadcrumb a,
#main-view .breadcrumb span,
.breadcrumb a,
.breadcrumb span {
  min-height: 0 !important;
  min-width: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #8a93a8 !important;
}
#main-view .breadcrumb a,
.breadcrumb a { color: #5b6480 !important; transition: color .15s ease; }
#main-view .breadcrumb a:hover,
.breadcrumb a:hover { color: #ec3f68 !important; }
#main-view .breadcrumb span,
.breadcrumb span { color: #16203f !important; font-weight: 700 !important; }
#main-view .breadcrumb b,
.breadcrumb b { color: #c7cedd !important; font-weight: 500 !important; }
/* "Inicio": enlace discreto con flecha fina, sin píldora oscura. */
#main-view .breadcrumb-home,
.breadcrumb-home {
  min-height: 0 !important;
  min-width: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #5b6480 !important;
  font-size: 13.5px !important;
  box-shadow: none !important;
}
#main-view .breadcrumb-home::before,
.breadcrumb-home::before {
  content: "\2190" !important;
  margin-right: 5px !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
}
#main-view .breadcrumb-home::after,
.breadcrumb-home::after { content: none !important; }
/* "Volver": enlace quieto a la derecha, sin recuadro coral. */
#main-view .breadcrumb-goback,
.breadcrumb-goback {
  margin-left: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  color: #8a93a8 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  cursor: pointer;
  transition: color .15s ease;
}
#main-view .breadcrumb-goback:hover,
.breadcrumb-goback:hover { background: none !important; transform: none !important; color: #ec3f68 !important; }

/* Lead dentro del hero de color (hubs con banda phero): legible sobre navy. */
.rp .phero .lead{color:#d7ddf2!important;max-width:60ch}
/* Icono de sección en hubs: chip sobrio con el acento del bloque. */
.rp .csec>h2 .csec-ico,.rp .fblock>h2 .csec-ico{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:color-mix(in srgb,var(--rp-accent) 14%,#fff);color:var(--rp-accent);margin-right:11px;vertical-align:-7px}
.rp .csec>h2 .csec-ico svg,.rp .fblock>h2 .csec-ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================================
   HUBS → EDITORIAL DS 2.0 (restyle CSS-only, sin tocar markup ni JS).
   Filosofía: menos caja, menos borde, menos sombra. Se conserva la identidad de
   color de cada hub (su --accent) y sus alertas/tablas/iconos. Aplana el
   contenedor page-card y las tarjetas boxed a secciones abiertas.
   ============================================================================ */
/* --- Acoso escolar y laboral (ac-) --- */
#main-view .ac-page{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 clamp(12px,3vw,24px)!important;max-width:var(--mr-dash);margin:0 auto}
#main-view .ac-hero{border-radius:0!important;box-shadow:none!important;margin:0 0 24px!important;padding:clamp(30px,5vw,56px) clamp(22px,4vw,46px)!important;min-height:0!important}
#main-view .ac-block{border-top:1px solid #e7eaf3;padding-top:clamp(22px,3vw,32px);margin-top:clamp(22px,3vw,32px)!important}
#main-view .ac-card{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
#main-view .ac-carousel>.ac-card{flex-basis:300px}
#main-view .ac-callout,#main-view .ac-urgente{border:0!important;border-left:4px solid var(--accent,#1e3a8a)!important;box-shadow:none!important;border-radius:12px!important;background:color-mix(in srgb,var(--accent,#1e3a8a) 7%,#fff)!important}
#main-view .ac-urgente-item{box-shadow:none!important}
#main-view .ac-tab{border-radius:11px!important}

/* --- Ferias y networking (ferias-) --- */
#main-view .ferias-page{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 clamp(12px,3vw,24px)!important;max-width:var(--mr-dash);margin:0 auto}
#main-view .ferias-hero{border-radius:0!important;box-shadow:none!important;margin:0 0 22px!important;padding:clamp(30px,5vw,54px) clamp(22px,4vw,46px)!important}
#main-view .ferias-card{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;border-top:1px solid #e7eaf3!important;padding:22px 0!important}
#main-view .ferias-grid{grid-template-columns:1fr!important;gap:0!important}
#main-view .ferias-card-tags span{background:color-mix(in srgb,var(--accent,#6d28d9) 10%,#fff)!important}

/* --- Hospedajes (ho-), Método de estudio (me-), Mi primera vez (mpv-):
       misma estructura que acoso → mismo aplanado editorial. --- */
#main-view .ho-page,#main-view .me-page,#main-view .mpv-page{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 clamp(12px,3vw,24px)!important;max-width:var(--mr-dash);margin:0 auto}
#main-view .ho-hero,#main-view .me-hero,#main-view .mpv-hero{border-radius:0!important;box-shadow:none!important;margin:0 0 24px!important;padding:clamp(30px,5vw,56px) clamp(22px,4vw,46px)!important;min-height:0!important}
#main-view .ho-block,#main-view .me-block,#main-view .mpv-block{border-top:1px solid #e7eaf3;padding-top:clamp(22px,3vw,32px);margin-top:clamp(22px,3vw,32px)!important}
#main-view .ho-card,#main-view .me-card,#main-view .mpv-card{border:0!important;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
#main-view .mpv-cards,#main-view .ho-cards,#main-view .me-cards{gap:22px 34px!important}
#main-view .ho-callout,#main-view .me-callout{border:0!important;border-left:4px solid var(--accent)!important;box-shadow:none!important;border-radius:12px!important;background:color-mix(in srgb,var(--accent) 7%,#fff)!important}
#main-view .ho-callout strong,#main-view .me-callout strong{color:color-mix(in srgb,var(--accent),black 25%)!important}

/* ============================================================================
   CATÁLOGOS "vistosos pero más limpios" (petición de Rafael 2026-10-04):
   que SE VEA la foto (menos tinte oscuro) y menos cápsulas de conteo por tarjeta.
   Capa final → gana por especificidad (#main-view) y orden.
   ============================================================================ */
/* Pickers (visual-choice-card): overlay transparente arriba, oscuro solo abajo. */
#main-view .visual-choice-card,
#main-view .recommend-card.visual-choice-card{
  background:
    linear-gradient(180deg, rgba(8,13,31,0) 0%, rgba(8,13,31,0) 46%, rgba(8,13,31,.5) 76%, rgba(8,13,31,.88) 100%),
    radial-gradient(circle at 16% 10%, color-mix(in srgb,var(--accent),white 30%) 0, transparent 26%),
    var(--photo-shown, none),
    linear-gradient(135deg, color-mix(in srgb,var(--accent),#ffffff 34%), color-mix(in srgb,var(--accent),#10172f 28%)) !important;
  background-position:center!important;background-size:cover!important;
}
/* Máximo 3 cápsulas de conteo por tarjeta (fuera el exceso). */
#main-view .visual-choice-card em i:nth-of-type(n+4){display:none!important}
/* Listados (result-card): mismo criterio, que respire la foto. */
#main-view .result-card::after{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 15%,transparent) 0%,rgba(11,17,48,.08) 42%,rgba(11,17,48,.58) 74%,rgba(11,17,48,.9) 100%)!important;
}

/* --- Premios, concursos y olimpiadas (premios-): misma estructura que ferias --- */
#main-view .premios-page{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 clamp(12px,3vw,24px)!important;max-width:var(--mr-dash);margin:0 auto}
#main-view .premios-hero{border-radius:0!important;box-shadow:none!important;margin:0 0 22px!important;padding:clamp(30px,5vw,54px) clamp(22px,4vw,46px)!important;min-height:0!important}
/* Listado de premios: editorial en 2 columnas (usa el ancho, sin tarjetas).
   Divisor fino arriba + título fuerte = estructura y jerarquía sin encapsular. */
#main-view .premios-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 clamp(30px,3.5vw,56px)!important;align-items:start}
@media (max-width:820px){#main-view .premios-grid{grid-template-columns:1fr!important}}
#main-view .premios-card{border:0!important;box-shadow:none!important;border-radius:0!important;background:transparent!important;border-top:1px solid var(--mr-border-soft)!important;padding:20px 0 22px!important;gap:9px!important}
#main-view .premios-card h4{font-size:1.16rem!important;font-weight:800!important;letter-spacing:-.01em;color:#16203f!important;margin:0 0 2px!important;line-height:1.25}
#main-view .premios-card-org{font-size:.78rem!important;text-transform:uppercase;letter-spacing:.04em;margin:0 0 6px!important}
#main-view .premios-card-desc{color:#475569!important;max-width:60ch}
#main-view .premios-card-tags span{background:color-mix(in srgb,var(--accent) 10%,#fff)!important}
#main-view .premios-card-link{margin-top:2px}

/* --- Matriculaciones y procesos de acceso (matriculations-) ---
   Problema (Rafael): todo metido en una page-card (borde+sombra, 1220px) y DENTRO
   cada sección en otra caja → caja dentro de caja. Fuera la caja exterior y ancho
   de dashboard; cada sección pasa a panel SOFT consistente (surface + border-soft,
   sin sombra). El calendario es la ÚNICA superficie marcada (es rejilla y la
   necesita). Agenda/nota planas con divisor. */
#main-view .matriculations-page{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 clamp(12px,3vw,24px)!important;width:auto!important;max-width:var(--mr-dash)!important;margin:0 auto!important;gap:clamp(18px,2.4vw,26px)!important;overflow:visible!important}
#main-view .matriculations-hero{border:0!important;box-shadow:none!important;margin:0 0 6px!important}
/* Paneles funcionales: superficie suave y consistente (sin sombras ni bordes fuertes) */
#main-view .matriculations-filter-box,
#main-view .matriculations-coverage{background:var(--mr-surface)!important;border:1px solid var(--mr-border-soft)!important;box-shadow:none!important;border-radius:14px!important}
/* Tiras de acento (tipo de estudio / próximos plazos): acento tenue, plano */
#main-view .matriculations-study-strip,
#main-view .matriculations-next-strip{box-shadow:none!important;border-radius:14px!important;border:1px solid color-mix(in srgb,var(--accent,#2f9e8f) 18%,#fff)!important}
/* Calendario: la única superficie "fuerte" de la página */
#main-view .matriculations-calendar-board{background:#fff!important;border:1px solid var(--mr-border-soft)!important;box-shadow:0 10px 30px rgba(15,23,42,.05)!important;border-radius:16px!important}
/* Agenda desplegable: SOLO aplanamos el contenedor exterior (quitamos la caja
   tintada para que no sea caja-dentro-de-caja). La barra "Ver agenda" (summary)
   se deja como está en styles.css: sólida navy con texto blanco = CTA visible. */
#main-view .matriculations-agenda{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;border-top:1px solid var(--mr-border-soft)!important;padding:clamp(18px,2.4vw,26px) 0 0!important}
#main-view .matriculations-note{background:transparent!important;border:0!important;border-top:1px solid var(--mr-border-soft)!important;border-radius:0!important;padding:clamp(16px,2vw,22px) 2px 0!important}

/* --- Mi Trabajo Claro / Nóminas y contratos ([data-mt]) ---
   Problema (Rafael): hero fuerte y DESPUÉS plano (muro de 4 columnas de texto sin
   jerarquía + formulario sin diferenciarse). Scope acotado a [data-mt] para NO
   tocar el simulador ni otras páginas que comparten .diag-*. Damos estructura y
   personalidad a las columnas (regla de acento + jerarquía) y convertimos el
   formulario en un módulo con superficie suave. Sin cajas por cada texto. */
#main-view [data-mt].page-card{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important;padding:0 clamp(12px,3vw,24px)!important;max-width:var(--mr-dash)!important;margin:0 auto!important}
#main-view [data-mt] .diag-hero{box-shadow:none!important}
/* Zona de contenido: aire tras los tabs */
#main-view [data-mt] .diag-info{padding-top:clamp(14px,2vw,20px)!important}
/* Columnas informativas: regla de acento arriba + jerarquía (estructura sin caja) */
#main-view [data-mt] .diag-info-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;gap:clamp(22px,2.6vw,38px) clamp(28px,3vw,44px)!important}
#main-view [data-mt] .diag-info-card{border-top:2px solid color-mix(in srgb,var(--accent) 50%,#fff)!important;padding-top:14px!important}
#main-view [data-mt] .diag-info-card h3{font-size:1.02rem!important;font-weight:800!important;color:#16203f!important;letter-spacing:-.01em;margin:0 0 7px!important;line-height:1.3}
#main-view [data-mt] .diag-info-card p{color:#475569!important;font-size:.95rem;line-height:1.6}
/* Formulario: módulo accionable con superficie suave, separado del texto */
#main-view [data-mt] .mt-form{background:var(--mr-surface)!important;border:1px solid var(--mr-border-soft)!important;border-radius:16px!important;padding:clamp(20px,2.4vw,30px)!important;margin-top:clamp(26px,3.2vw,40px)!important}

/* ============================================================================
   HERO de hub CON FOTO tintada en el color del bloque (petición de Rafael):
   los banners con su imagen semitransparente en su color, no banda plana.
   `phero--rich` pone la foto (--phero-img) bajo un degradado: oscuro a la
   izquierda (texto legible) y semitransparente del acento a la derecha
   (se ve la foto tintada). Solo afecta a los hero que lleven la clase.
   ============================================================================ */
.rp .phero--rich{
  background:
    linear-gradient(105deg, rgba(10,15,38,.94) 0%, rgba(14,20,50,.82) 38%,
      color-mix(in srgb, var(--rp-accent) 60%, transparent) 78%,
      color-mix(in srgb, var(--rp-accent) 40%, transparent) 100%),
    var(--phero-img) center/cover no-repeat !important;
}
.rp .phero--rich .phero__compass{display:none}

/* Salud mental: menos monotonía — callouts/avisos con color de acento (no texto
   plano), y la alerta de emergencia ya destaca. Da vida sin recargar. */
#main-view [data-sm] .alert--note{border:0!important;border-left:4px solid var(--rp-accent,#4f9d8f)!important;background:color-mix(in srgb,var(--rp-accent,#4f9d8f) 8%,#fff)!important;border-radius:12px!important;padding:16px 20px!important}
#main-view [data-sm] .csec>.lead{color:#51607c!important}

/* ============================================================================
   BANNERS DE HUB UNIFORMES (petición de Rafael): todos con su foto
   semitransparente tintada en el color del bloque. Mismo degradado para todos
   (oscuro a la izquierda para el texto, acento translúcido a la derecha donde
   se ve la foto). Cada hero aporta su foto en --hero-img; el color sale de
   --accent de cada *-page. Gana a styles.css por #main-view + orden.
   ============================================================================ */
#main-view .ac-hero{--hero-img:url('/assets/photos/acoso-apoyo.webp')}
#main-view .me-hero{--hero-img:url('/assets/photos/metodo-estudio-estudiar.webp')}
#main-view .ho-hero{--hero-img:url('/assets/photos/hospedajes-habitacion.webp')}
#main-view .mpv-hero{--hero-img:url('/assets/photos/jovenes-primer-empleo.jpg')}
#main-view .ferias-hero{--hero-img:url('/assets/photos/feria-empleo-networking.jpg')}
#main-view .premios-hero{--hero-img:url('/assets/photos/premios-trofeos.jpg')}
#main-view .ac-hero,
#main-view .me-hero,
#main-view .ho-hero,
#main-view .mpv-hero,
#main-view .ferias-hero,
#main-view .premios-hero{
  background:
    linear-gradient(105deg,
      rgba(9,13,33,.92) 0%,
      color-mix(in srgb, var(--accent) 48%, rgba(10,14,36,.72)) 46%,
      color-mix(in srgb, var(--accent) 55%, transparent) 100%),
    var(--hero-img) center 32% / cover no-repeat !important;
}

/* ============================================================================
   FOTO EN TODOS LOS BANNERS (petición de Rafael: toda la página).
   Catálogos/listados (catalog-head, list-hero) usan --list-photo (ya lo ponen
   las vistas). Fichas: su foto deja de ser casi invisible. Mismo degradado:
   oscuro izq (texto) + acento translúcido dcha (se ve la foto tintada).
   ============================================================================ */
#main-view .catalog-head{
  background:
    linear-gradient(105deg, rgba(9,13,33,.93) 0%,
      color-mix(in srgb, var(--accent,#2563eb) 46%, rgba(10,14,36,.72)) 46%,
      color-mix(in srgb, var(--accent,#2563eb) 55%, transparent) 100%),
    var(--list-photo, none) center 30% / cover no-repeat !important;
}
.rp .list-hero{
  background:
    linear-gradient(105deg, rgba(9,13,33,.93) 0%,
      color-mix(in srgb, var(--rp-accent) 46%, rgba(10,14,36,.72)) 46%,
      color-mix(in srgb, var(--rp-accent) 55%, transparent) 100%),
    var(--list-photo, none) center 30% / cover no-repeat !important;
}
/* Ficha: la foto del hero visible (antes casi imperceptible a .17). */
.rp .phero__photo{opacity:.42 !important; mix-blend-mode:normal !important; filter:grayscale(.12) contrast(1.03) !important}

/* ============================================================================
   Heroes de contenido que eran planos/claros → banda con FOTO (todos los banner
   con su foto, petición de Rafael). Texto en blanco, foto tintada.
   ============================================================================ */
#main-view .express-hero{--hero-img:url('/assets/photos/jovenes-primer-empleo.jpg');--hacc:#ec3f68}
#main-view .conocete-hero{--hero-img:url('/assets/photos/hero-estudiante.jpg');--hacc:#2563eb}
#main-view .familias-hero{--hero-img:url('/assets/photos/1509062522246-3755977927d7.webp');--hacc:#6d28d9}
#main-view .porta-hero{--hero-img:url('/assets/photos/1450101499163-c8848c66ca85.webp');--hacc:#16306b}
#main-view .cv-hero-hub{--hero-img:url('/assets/photos/1523580846011-d3a5bc25702b.webp');--hacc:#0e7490}
#main-view .express-hero,
#main-view .conocete-hero,
#main-view .familias-hero,
#main-view .porta-hero,
#main-view .cv-hero-hub{
  position:relative;overflow:hidden;color:#fff!important;max-width:none!important;
  border-radius:16px;padding:clamp(28px,4.2vw,50px) clamp(22px,4vw,42px)!important;
  margin:0 auto clamp(18px,2.6vw,28px)!important;
  background:linear-gradient(105deg, rgba(9,13,33,.93) 0%,
    color-mix(in srgb, var(--hacc) 46%, rgba(10,14,36,.72)) 46%,
    color-mix(in srgb, var(--hacc) 55%, transparent) 100%),
    var(--hero-img) center 30% / cover no-repeat !important;
}
#main-view .express-hero h1,#main-view .express-hero h2,#main-view .express-hero p,
#main-view .conocete-hero h1,#main-view .conocete-hero h2,#main-view .conocete-hero p,
#main-view .familias-hero h1,#main-view .familias-hero h2,#main-view .familias-hero p,
#main-view .porta-hero h1,#main-view .porta-hero h2,#main-view .porta-hero p,
#main-view .cv-hero-hub h1,#main-view .cv-hero-hub h2,#main-view .cv-hero-hub p{color:#fff!important}
#main-view .express-hero .eyebrow,#main-view .familias-hero .eyebrow{color:#ffd0db!important}

/* ============================================================================
   Sección "Herramienta oficial ERGOS FP" en la home (sustituye a "Próximas
   novedades"). Logos de las entidades ERGOS, centrados sobre fondo claro.
   ============================================================================ */
.rd .rd-ergos{text-align:center}
.rd .rd-ergos h2{max-width:820px;margin:8px auto 0}
.rd .rd-ergos-logos{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:clamp(18px,3.5vw,54px);margin-top:clamp(24px,3.2vw,38px)}
.rd .rd-ergos-logos a{display:inline-flex;align-items:center;flex:0 1 auto;min-width:0}
.rd .rd-ergos-logos img{height:clamp(54px,5.2vw,82px);width:auto;max-width:270px;object-fit:contain}
@media (max-width:760px){.rd .rd-ergos-logos{flex-wrap:wrap;gap:22px 34px}.rd .rd-ergos-logos img{height:clamp(46px,11vw,66px)}}

/* Emprendimiento y Matriculaciones: cabeceras con foto (completar "todas"). */
#main-view .entrepreneurship-hero{--hero-img:url('/assets/photos/1556761175-5973dc0f32e7.webp')}
#main-view .matriculations-hero{--hero-img:url('/assets/photos/1434030216411-0b793f4b4173.webp')}
#main-view .entrepreneurship-hero,#main-view .matriculations-hero{
  position:relative;overflow:hidden;color:#fff!important;border-radius:16px;
  padding:clamp(26px,4vw,46px) clamp(22px,4vw,40px)!important;margin-bottom:clamp(16px,2.4vw,24px);
  background:linear-gradient(105deg, rgba(9,13,33,.92) 0%,
    color-mix(in srgb, var(--accent,#2563eb) 46%, rgba(10,14,36,.72)) 46%,
    color-mix(in srgb, var(--accent,#2563eb) 55%, transparent) 100%),
    var(--hero-img) center 30% / cover no-repeat !important;
}
#main-view .entrepreneurship-hero h2,#main-view .entrepreneurship-hero p,
#main-view .matriculations-hero h2,#main-view .matriculations-hero p{color:#fff!important}

/* ============================================================================
   CONSISTENCIA: fuera los botones "Volver" DENTRO de los banners. El breadcrumb
   de arriba ya tiene "← Volver" en todas las páginas, así que sobran y encima
   aparecían en unos banners sí y en otros no. Se conservan los "Volver" de los
   paneles profesional/lanzadera (otras rutas, sin breadcrumb de vuelta).
   ============================================================================ */
#main-view .primary-link.secondary[href="#/home"],
#main-view .catalog-head .primary-link,
#main-view .list-hero__back{display:none!important}

/* ============================================================================
   404 — ruta desconocida. Página sobria y centrada en DS 2.0.
   ============================================================================ */
.notfound{display:flex;justify-content:center;padding:clamp(3rem,10vw,7rem) 1rem}
.notfound__box{max-width:34rem;text-align:center}
.notfound__code{display:inline-block;font-weight:800;font-size:clamp(3rem,10vw,5rem);line-height:1;letter-spacing:-.02em;color:var(--rp-accent,#ec3f68)}
.notfound__box h2{margin:.6rem 0 .4rem;font-size:clamp(1.3rem,4vw,1.8rem)}
.notfound__box p{color:var(--rp-muted,#5b6472);margin:0 auto 1.4rem;max-width:30rem}
.notfound__box code{background:rgba(0,0,0,.05);padding:.1em .4em;border-radius:6px;font-size:.92em}
.notfound__actions{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
/* Cargando breve durante el retorno de login OAuth (en vez del 404 relámpago) */
.route-spinner{display:inline-block;width:34px;height:34px;margin:0 auto .9rem;border:3px solid rgba(236,63,104,.22);border-top-color:var(--rp-accent,#ec3f68);border-radius:50%;animation:route-spin .8s linear infinite}
@keyframes route-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.route-spinner{animation-duration:2.4s}}

/* ============================================================================
   PERFIL DE INSERCIÓN (M1): formulario de datos del usuario. Rejilla sobria de
   2 columnas, 1 en móvil. Campos anchos (dirección, municipios) ocupan la fila.
   ============================================================================ */
#main-view .ins-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:4px 0 14px}
#main-view .ins-grid label{display:flex;flex-direction:column;gap:5px;min-width:0}
#main-view .ins-grid label.ins-wide{grid-column:1 / -1}
#main-view .ins-grid label>span{font-size:.82rem;font-weight:700;color:#475569}
#main-view .ins-grid input,#main-view .ins-grid select{width:100%;border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:11px;padding:10px 12px;font:500 14px 'Plus Jakarta Sans',system-ui,sans-serif;background:#fff;color:#16203f}
#main-view .ins-grid input:focus,#main-view .ins-grid select:focus{outline:2px solid var(--rp-accent,#ec3f68);outline-offset:1px;border-color:transparent}
#main-view .ins-consent{display:flex;gap:9px;align-items:flex-start;margin:4px 0 14px;color:#475569;font-size:.9rem;line-height:1.5}
#main-view .ins-consent input{margin-top:3px;flex:none}
@media (max-width:640px){#main-view .ins-grid{grid-template-columns:1fr}}
#main-view .ins-ta-wrap{display:flex;flex-direction:column;gap:12px;margin:0 0 14px}
#main-view .ins-ta{display:flex;flex-direction:column;gap:5px}
#main-view .ins-ta>span{font-size:.82rem;font-weight:700;color:#475569}
#main-view .ins-ta textarea{width:100%;border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:11px;padding:10px 12px;font:500 14px 'Plus Jakarta Sans',system-ui,sans-serif;background:#fff;color:#16203f;resize:vertical;line-height:1.5}
#main-view .ins-ta textarea:focus{outline:2px solid var(--rp-accent,#ec3f68);outline-offset:1px;border-color:transparent}
#main-view .gsh-ml{margin:10px 0 0}
#main-view .gsh-ml-k{display:block;font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a93ad;margin-bottom:3px}
#main-view .gsh-ml-v{color:#16203f;white-space:pre-line;font-size:.92rem;line-height:1.5}

#main-view .ga-pedir{border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:9px;padding:5px 8px;font:600 12.5px 'Plus Jakarta Sans',system-ui,sans-serif;background:#fff;color:#16203f;cursor:pointer}

/* Mensajería */
#main-view .conv-list{display:flex;flex-direction:column;gap:8px;max-height:340px;overflow-y:auto;padding:12px;background:var(--mr-surface,#f7f8fc);border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:12px;margin-bottom:10px}
#main-view .conv-msg{max-width:78%;padding:9px 12px;border-radius:14px;font-size:.92rem;line-height:1.45}
#main-view .conv-msg p{margin:0;color:inherit}
#main-view .conv-msg span{display:block;font-size:.68rem;opacity:.7;margin-top:3px}
#main-view .conv-mine{align-self:flex-end;background:var(--rp-accent,#ec3f68);color:#fff;border-bottom-right-radius:4px}
#main-view .conv-theirs{align-self:flex-start;background:#fff;color:#16203f;border:1px solid var(--mr-border-soft,#e7eaf3);border-bottom-left-radius:4px}
#main-view .conv-form{display:flex;gap:8px}
#main-view .conv-form input{flex:1;border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:11px;padding:10px 12px;font:500 14px 'Plus Jakarta Sans',system-ui,sans-serif;background:#fff;color:#16203f}

/* Resumen / diagnóstico */
#main-view .diag-wrap{margin-top:14px;border-top:1px solid var(--mr-border-soft,#e7eaf3);padding-top:12px}
#main-view .diag-box{background:var(--mr-surface,#f7f8fc);border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:12px;padding:14px 16px;margin:10px 0}
#main-view .diag-b{margin:0 0 10px}
#main-view .diag-b:last-child{margin-bottom:0}
#main-view .diag-b>strong{display:block;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a93ad;margin-bottom:4px}
#main-view .diag-b ul{margin:0;padding-left:18px;color:#334155}
#main-view .diag-b li{margin:2px 0}
#main-view .diag-b p{margin:2px 0;color:#334155}
#main-view .diag-ia{background:#fff5f8;border:1px solid #ffd9e3;border-radius:12px;padding:14px 16px;margin-top:4px}
#main-view .diag-ia p{margin:0 0 8px;color:#334155;line-height:1.6}

/* Hitos de inserción */
#main-view .hitos-sec{margin-top:16px;border-top:1px solid var(--mr-border-soft,#e7eaf3);padding-top:12px}
#main-view .hito-add{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 4px}
#main-view .hito-add select,#main-view .hito-add input{border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:10px;padding:8px 10px;font:500 13px 'Plus Jakarta Sans',system-ui,sans-serif;background:#fff;color:#16203f}
#main-view .hito-add input[data-hito-lugar]{flex:1;min-width:140px}
#main-view .hito-add input[data-hito-nota]{flex:1;min-width:140px}

/* Notificaciones */
#main-view .notif-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
#main-view .notif-item{display:flex;gap:12px;align-items:flex-start;padding:14px 10px;border-bottom:1px solid var(--mr-border-soft,#e7eaf3);border-radius:8px}
#main-view .notif-item .notif-dot{width:9px;height:9px;border-radius:50%;background:transparent;flex:none;margin-top:6px}
#main-view .notif-item.is-unread .notif-dot{background:var(--rp-accent,#ec3f68)}
#main-view .notif-item.is-unread{background:#fff5f8}
#main-view .notif-body strong{color:#16203f;font-size:.98rem}
#main-view .notif-body p{margin:3px 0 4px;color:#475569;font-size:.9rem}
#main-view .notif-body small{color:#8a93ad;font-size:.8rem}
#main-view .notif-body small a{color:var(--rp-accent,#ec3f68);font-weight:700}

/* Compartir / unirse a grupo (M2) */
#main-view .gsh{margin-top:14px}
#main-view .gsh-invite{margin-top:10px;padding:14px;border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:12px;background:#fff}
#main-view .gsh-invite-grid{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
#main-view .gsh-qr{width:140px;height:140px;flex:none;display:grid;place-items:center;border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:10px;padding:6px;background:#fff}
#main-view .gsh-qr svg{width:100%;height:100%}
#main-view .gsh-invite-data{flex:1;min-width:200px;display:flex;flex-direction:column;gap:8px}
#main-view .gsh-field{display:flex;flex-direction:column;gap:3px}
#main-view .gsh-field>span{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a93ad}
#main-view .gsh-field>b{font-size:1rem;color:#16203f}
#main-view .gsh-code{font-size:1.5rem!important;letter-spacing:.14em;font-weight:900;color:#16203f}
#main-view .gsh-field input{border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:9px;padding:8px 10px;font:500 13px 'Plus Jakarta Sans',system-ui,sans-serif;background:#f7f8fc;color:#16203f}
#main-view .gsh-invite-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
#main-view .gsh-vinc{margin-top:16px}
#main-view .gsh-h{display:block;font-size:.8rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#8a93ad;margin:14px 0 6px}
#main-view .gsh-correo-pref{display:flex;align-items:center;gap:8px;font-size:.86rem;color:#4a5370;margin:0 0 10px;cursor:pointer}
#main-view .gsh-correo-pref input{width:16px;height:16px;flex:none;accent-color:#ec3f68;cursor:pointer}
#main-view .hist-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:6px}
#main-view .hist-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border:1px solid #e8ecf5;border-radius:10px;background:#fff}
#main-view .hist-main{display:flex;flex-direction:column;gap:1px;min-width:0}
#main-view .hist-main b{font-size:.92rem;color:#14235a}
#main-view .hist-main span{font-size:.78rem;color:#8a93ad}
#main-view .hist-badge{flex:none;font-size:.74rem;font-weight:800;letter-spacing:.02em;border-radius:7px;padding:3px 9px}
#main-view .hist-badge--done{background:#e7f6ec;color:#15803d}
#main-view .hist-badge--pend{background:#fdeef0;color:#b4324b}
#main-view .evo-chart{display:grid;gap:7px;margin:8px 0 0}
#main-view .evo-row{display:flex;align-items:center;gap:10px}
#main-view .evo-lab{flex:0 0 70px;font-size:.78rem;color:#64748b;font-weight:700}
#main-view .evo-track{position:relative;flex:1;height:16px;background:#eef1f8;border-radius:8px;overflow:hidden}
#main-view .evo-track i{position:absolute;left:0;top:0;height:100%;border-radius:8px}
#main-view .evo-track .evo-a{background:#c7d0ea;z-index:1}
#main-view .evo-track .evo-b{background:linear-gradient(90deg,#1d2a63,#ec3f68);height:8px;top:4px;z-index:2;opacity:.95}
#main-view .evo-note{font-size:11px;color:#94a3b8;margin:5px 0 0;line-height:1.4}
#main-view .gsh-perfil{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;padding:4px 0}
#main-view .gsh-perfil .gsh-field>b{font-size:.92rem}
@media (max-width:640px){#main-view .gsh-perfil{grid-template-columns:1fr}}
/* Pantalla de consentimiento al unirse */
#main-view .join-card{max-width:var(--mr-read,860px);margin:clamp(2rem,6vw,4rem) auto;padding:clamp(24px,4vw,40px);border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:18px;background:#fff}
#main-view .join-card h1{font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 6px;color:#16203f}
#main-view .join-card .join-what{margin:16px 0;padding:14px 16px;border-left:4px solid var(--rp-accent,#ec3f68);background:#fff5f8;border-radius:10px;color:#475569}
#main-view .join-card .join-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
#main-view .join-code-input{text-transform:uppercase;letter-spacing:.16em;font-weight:800;text-align:center;font-size:1.3rem;border:1px solid var(--mr-border-soft,#e7eaf3);border-radius:11px;padding:12px;width:220px;max-width:100%}

/* ============================================================================
   BOTÓN DE OPINIÓN persistente (petición de Rafael 2026-10-06): que se vea para
   que la gente opine de verdad, no solo en el pie. Pestaña lateral derecha a
   media altura (no choca con accesibilidad abajo-izq ni con Mi Ruta abajo-dcha).
   app.js la muestra solo en páginas públicas con feedback activo. En móvil pasa
   a botón horizontal abajo-dcha, por encima de la barra de Mari Ruta.
   ============================================================================ */
.feedback-tab{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:9000;
  writing-mode:vertical-rl;padding:15px 9px;text-decoration:none;
  background:var(--rp-accent,#ec3f68);color:#fff;
  font:800 13px/1 'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,sans-serif;letter-spacing:.03em;
  border-radius:12px 0 0 12px;box-shadow:0 8px 22px rgba(236,63,104,.34);transition:background .15s,box-shadow .15s}
.feedback-tab:hover{background:#d42f58;box-shadow:0 10px 26px rgba(236,63,104,.46)}
.feedback-tab svg{display:none}
.feedback-tab[hidden]{display:none}
@media (max-width:640px){
  .feedback-tab{writing-mode:horizontal-tb;top:auto;bottom:84px;transform:none;
    display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:12px 0 0 12px}
  .feedback-tab svg{display:block;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .notfound__box code{background:rgba(255,255,255,.08)}}
:root[data-theme="dark"] .notfound__box code{background:rgba(255,255,255,.08)}

/* ============================================================================
   SISTEMA DE ANCHURAS GLOBAL (revisión UX 2026-10-06). Ancho por TIPO de
   contenido, para aprovechar las pantallas grandes sin recargar. Token global
   en #main-view (no toca :root). Lectura estrecha; listados y hubs más anchos.
   ============================================================================ */
#main-view{
  --mr-read:860px;     /* texto/lectura */
  --mr-form:1040px;    /* formularios */
  --mr-list:1260px;    /* listados / catálogos */
  --mr-dash:1360px;    /* hubs / dashboards */
  --mr-surface:#f7f8fc;
  --mr-surface-muted:#eef1f8;
  --mr-border-soft:#e7eaf3;
}