relative de Bootstrap); a zoom el toggle deja de estar pegado al borde
derecho de la pantalla y el menu, casi tan ancho como el viewport, se salia por la
izquierda. Fix: la
host pasa a position:static -> el .dropdown-menu se ancla al
.navbar (ancho del viewport), asi dropdown-menu-end lo pega al borde DERECHO DE LA
PANTALLA. Con el ancho ya capado en min(92vw,1040px), el borde izquierdo nunca cae
bajo ~8vw. Requiere data-bs-display="static" en los toggles (Popper off => posicion
por CSS puro, determinista a cualquier zoom). */
.navbar-inducop .nav-item.areas-megamenu-host { position: static; }
/* S222: margen al borde derecho (no pegado a la esquina, feedback del Guardian).
Alinea el borde derecho del menu con el del contenedor .areas-wide
(min(94vw,1720px)) -> mismo respiro de 3vw que usa el resto de la pagina; en
pantallas > 1720px cae a (100vw-1720)/2 para seguir el contenedor centrado.
El max() nunca lo acerca lo suficiente para reintroducir el desborde por la
izquierda (el mega-menu solo se despliega a viewport >=992px). */
.areas-nav-megamenu.dropdown-menu-end {
right: max(3vw, calc((100vw - 1720px) / 2));
}
/* =============================================================================
S222 · REEL CINEMATICO ADITIVO DEL HERO (.areas-hubreel*) — Variante A+
Spec: Antigravity (SOL_ANTIGRAVITY_HUB_REEL_A_S222_SPEC.md) + 4 fixes de Code.
Token-only · 0 hex · 0 rgb() crudo (guard test_areas_css_cero_hex).
ADITIVO: no toca el zigzag. Movil = dots; desktop = dock sinaptico.
============================================================================= */
.areas-hubreel {
position: relative;
margin-top: var(--space-8);
border-radius: var(--radius-2xl);
overflow: hidden;
/* S222 (QA del Guardian): mas presencia vertical a 100% de zoom (antes 21/8 · 380 · 440).
El aspect 21/9 y el techo mayor le dan al reel el aire del zoom 110% sin depender de el. */
aspect-ratio: 21 / 9;
min-height: 420px;
max-height: 520px;
background: var(--brand-dark);
border: 1px solid color-mix(in srgb, var(--brand-cyan) 22%, transparent);
box-shadow: 0 16px 40px color-mix(in srgb, var(--brand-dark) 50%, transparent);
}
.areas-hubreel__inner { width: 100%; height: 100%; }
.areas-hubreel__item { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; }
/* Imagen base + Ken Burns suave (se anima al activarse el slide) */
.areas-hubreel__img {
width: 100%; height: 100%;
object-fit: cover; object-position: center; display: block;
transform: scale(1.03);
transition: transform 6s ease-out;
}
.areas-hubreel__item.active .areas-hubreel__img { transform: scale(1); }
/* Scrim direccional rebrand-safe (contraste del texto + respiro a la foto) */
.areas-hubreel__scrim {
position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--brand-dark) 90%, transparent) 0%,
color-mix(in srgb, var(--brand-dark) 65%, transparent) 42%,
color-mix(in srgb, var(--brand-dark) 15%, transparent) 75%,
transparent 100%
);
}
/* Caption */
.areas-hubreel__caption {
position: absolute; left: 0; top: 0; bottom: 0;
width: 60%; max-width: 640px;
padding: var(--space-8) var(--space-10);
z-index: 2;
display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
}
.areas-hubreel__meta { margin-bottom: var(--space-3); }
.areas-hubreel__badge {
display: inline-flex; align-items: center;
font-family: var(--font-mono); font-size: var(--text-2xs); font-weight: var(--font-bold);
text-transform: uppercase; letter-spacing: 0.08em;
padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
background: color-mix(in srgb, var(--brand-cyan) 18%, transparent);
color: color-mix(in srgb, var(--brand-cyan), var(--text-inverse) 22%);
border: 1px solid color-mix(in srgb, var(--brand-cyan) 45%, transparent);
}
.areas-hubreel__title {
font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
font-weight: var(--font-extrabold); line-height: 1.15; letter-spacing: -0.01em;
color: var(--text-inverse); margin: 0 0 var(--space-2) 0;
}
.areas-hubreel__line {
font-size: var(--text-sm); line-height: 1.55;
color: color-mix(in srgb, var(--text-inverse), transparent 22%);
margin: 0 0 var(--space-4) 0; max-width: 48ch;
}
.areas-hubreel__cta {
font-size: var(--text-xs); font-weight: var(--font-bold); color: var(--brand-cyan);
display: inline-flex; align-items: center; gap: var(--space-1);
letter-spacing: 0.04em; text-transform: uppercase;
transition: color var(--transition-base);
}
.areas-hubreel__arrow { transition: transform var(--transition-base); }
.areas-hubreel:hover .areas-hubreel__arrow { transform: translateX(4px); }
/* Indicadores (dots) — Bootstrap los auto-sincroniza; solo visibles <=991px (ver responsive) */
.areas-hubreel__indicators {
margin-bottom: var(--space-4); margin-right: var(--space-6);
justify-content: flex-end; gap: var(--space-2); z-index: 3;
}
.areas-hubreel__dot {
position: relative;
width: 8px !important; height: 8px !important; padding: 0 !important; border: 0 !important;
border-radius: var(--radius-full) !important;
background-color: color-mix(in srgb, var(--text-inverse) 35%, transparent) !important;
opacity: 1 !important;
transition: width var(--transition-base), background-color var(--transition-base) !important;
cursor: pointer;
}
/* Hit area accesible de 44px (WCAG 2.5.5) */
.areas-hubreel__dot::before {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%); width: 44px; height: 44px;
}
.areas-hubreel__dot:hover { background-color: color-mix(in srgb, var(--text-inverse) 75%, transparent) !important; }
.areas-hubreel__dot.active { width: 24px !important; background-color: var(--brand-cyan) !important; }
.areas-hubreel__dot:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 3px; }
/* Dock sinaptico (A+) — nombra las 6 areas; solo desktop (>=992px) */
.areas-hubreel__dock {
position: absolute; bottom: var(--space-4); right: var(--space-6); z-index: 3;
display: flex; align-items: center; gap: var(--space-1);
background: color-mix(in srgb, var(--brand-dark) 70%, transparent);
padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
border: 1px solid color-mix(in srgb, var(--border-subtle) 80%, transparent);
backdrop-filter: blur(8px);
}
.areas-hubreel__pill {
background: transparent; border: none;
color: color-mix(in srgb, var(--text-inverse), transparent 40%);
font-size: var(--text-2xs); font-weight: var(--font-semibold);
padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
display: inline-flex; align-items: center; gap: var(--space-1);
cursor: pointer; transition: color var(--transition-base), background-color var(--transition-base);
}
.areas-hubreel__pill-index { font-family: var(--font-mono); opacity: 0.6; }
.areas-hubreel__pill:hover { color: var(--text-inverse); background: color-mix(in srgb, var(--brand-cyan) 20%, transparent); }
.areas-hubreel__pill.active { color: var(--brand-dark); background: var(--brand-cyan); font-weight: var(--font-bold); }
.areas-hubreel__pill.active .areas-hubreel__pill-index { opacity: 0.9; }
.areas-hubreel__pill:focus-visible { outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
/* --- Responsive --- */
/* FIX 2: en desktop mandan los pills del dock; los dots se ocultan (no duplicar navegacion). */
@media (min-width: 992px) {
.areas-hubreel__indicators { display: none; }
}
@media (max-width: 991px) {
/* En tablet/movil el dock colapsa: la navegacion la dan los dots (siempre presentes). */
.areas-hubreel__dock { display: none; }
.areas-hubreel { aspect-ratio: 16 / 8; min-height: 320px; max-height: none; }
.areas-hubreel__caption { width: 75%; padding: var(--space-6) var(--space-8); }
}
@media (max-width: 767px) {
.areas-hubreel { aspect-ratio: 16 / 10; min-height: 270px; border-radius: var(--radius-xl); margin-top: var(--space-6); }
/* En movil el scrim pasa a vertical (texto abajo) */
.areas-hubreel__scrim {
background: linear-gradient(
0deg,
color-mix(in srgb, var(--brand-dark) 95%, transparent) 0%,
color-mix(in srgb, var(--brand-dark) 75%, transparent) 55%,
transparent 100%
);
}
.areas-hubreel__caption { width: 100%; max-width: none; top: auto; bottom: 0; padding: var(--space-4) var(--space-5); }
.areas-hubreel__line {
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; margin-bottom: var(--space-2); font-size: var(--text-xs);
}
.areas-hubreel__indicators { margin-right: 0; margin-bottom: var(--space-2); justify-content: center; }
}
/* FIX 3: sin 'transition-play-state' (propiedad inexistente). La pausa del AVANCE la da
Bootstrap (data-bs-pause="hover"); bajo reduced-motion se congela Ken Burns/fade y el JS
pausa el autoplay. */
@media (prefers-reduced-motion: reduce) {
.areas-hubreel__img { transform: none !important; transition: none !important; }
.areas-hubreel .carousel-item { transition: opacity 0.01s linear !important; }
.areas-hubreel__dot, .areas-hubreel__arrow, .areas-hubreel__pill { transition: none !important; }
}
.areas-nav-megamenu {
/* S214: ancho controlado (no crece sin límite) para el layout horizontal 3-col;
combinado con .dropdown-menu-end no se desborda por la derecha.
S222: ancho reducido a 720px -> a zoom el grid reflows a 2 columnas (2x3, crece
en vertical) en vez de estirarse casi a todo el viewport. */
width: min(92vw, 720px);
max-width: 92vw;
padding: var(--space-4);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
border: 1px solid var(--border-subtle);
background: var(--surface-base);
}
.areas-nav-item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-2);
border-radius: var(--radius-lg);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.areas-nav-item:hover {
background: var(--bg-hover);
}
.areas-nav-item__title {
font-size: var(--text-sm);
font-weight: var(--font-semibold);
color: var(--brand-navy);
}
.areas-nav-item__desc {
font-size: var(--text-xs);
color: var(--text-secondary);
}
/* -----------------------------------------------------------------------------
6. S214 — PANTALLAS DE ÁREA: zigzag + atmósfera de constelación + cortina
Token-only (0 hex guard). Máscaras con keywords black/transparent (no hex).
Namespace .areas-* coherente. Consumido por base_areas.html (hub, detalle, catálogo).
----------------------------------------------------------------------------- */
/* C2/T1 — Tokens de componente: SSOT de los "magic numbers" de esta capa (un solo lugar) */
:root {
--areas-max-width: min(94vw, 1720px); /* ancho de despliegue de las pantallas de área */
--areas-header-logo-h: 52px; /* alto del logo en header compacto y en la cortina */
--areas-nav-icon: 36px; /* wrapper de icono en el mega-menú */
--areas-nav-icon-glyph: 18px; /* glifo (máscara) dentro del wrapper */
}
/* Contenedor ancho: las pantallas de área usan casi todo el ancho de la pantalla */
.areas-wide { max-width: var(--areas-max-width); }
/* Atmósfera: nav + hero comparten el sweep animado y la malla -> continuidad nav->hero.
El nav queda estático (no sticky) y transparente para que el campo sea continuo. */
.areas-atmos { position: relative; }
/* z-index 3 (no 2): el nav debe pintar SOBRE .areas-hub-hero (z:2, posterior en el DOM).
Con z:2 el hero tapaba el mega-menu de Areas abierto -> el clic "no hacia nada" (S216). */
.areas-atmos .navbar-inducop { position: relative !important; z-index: 3; background: transparent; padding-top: var(--space-2); padding-bottom: var(--space-2); }
.areas-atmos .navbar-inducop .container { max-width: var(--areas-max-width); }
/* Coherencia: el header adopta las proporciones compactas de la cortina (logo tokenizado). */
.areas-atmos .navbar-brand-inducop img { height: var(--areas-header-logo-h) !important; width: auto; }
.areas-atmos .areas-hub-hero,
.areas-atmos .catalog-public-hero { position: relative; z-index: 2; background: transparent; margin-bottom: 0; }
/* Malla de la atmósfera: la disolución (forma ∩ degradado) la aporta el átomo
.at-constellation-pattern--dissolve (promovido S214). Aquí solo posición/capa. */
.areas-atmos__mesh { position: absolute; inset: 0; z-index: 1; }
/* Continuación de la malla hacia la ventana de tarjetas (sutil pero presente).
padding-top = margen BLANCO antes de la 1a tarjeta, igual al gap entre tarjetas (S214 p1).
La disolución la aporta el átomo .at-constellation-pattern--dissolve-in. */
.areas-underbleed { position: relative; padding-top: var(--space-8); }
.areas-underbleed > .container { position: relative; z-index: 1; }
.areas-underbleed__mesh { position: absolute; top: 0; left: 0; right: 0; height: 460px; z-index: 0; opacity: 0.16; }
/* N3 (doctrina — átomos compartidos): la fila zigzag REUTILIZA como átomos los sub-elementos
.areas-card__header/__title/__description/__badge/__icon-wrapper/__icon-mask/__tags (sección 2).
NO se duplican sus estilos: centralizar > pureza BEM. El bloque propio es .areas-row__*. */
/* Zigzag vertical: filas full-width, lado alterno; la fila entera es el acceso (sin botón CTA) */
.areas-zigzag { display: flex; flex-direction: column; gap: var(--space-8); }
.areas-row {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
align-items: center;
background: var(--surface-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
overflow: hidden;
transition: box-shadow var(--transition-base), border-color var(--transition-base);
cursor: pointer;
}
.areas-row:hover { border-color: var(--brand-cyan); box-shadow: var(--shadow-card-hover); }
.areas-row__media { aspect-ratio: 16 / 9; height: 100%; overflow: hidden; }
.areas-row__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.areas-row__body { padding: var(--space-6) var(--space-8); }
.areas-row:nth-of-type(even) .areas-row__media { order: 2; }
/* La cubierta clickeable de la fila usa el átomo .at-cover-link (promovido S214). */
@media (max-width: 767px) {
.areas-row { grid-template-columns: 1fr; }
.areas-row:nth-of-type(even) .areas-row__media { order: 0; }
}
/* Mega-menú horizontal: tamaños de icono tokenizados (antes inline en el markup -> T2) */
.areas-nav-item .areas-card__icon-wrapper { width: var(--areas-nav-icon); height: var(--areas-nav-icon); }
.areas-nav-item .areas-card__icon-mask { width: var(--areas-nav-icon-glyph); height: var(--areas-nav-icon-glyph); }
/* Cortina compacta (reveal-on-scroll-up): imitación del header 1.
Hereda el teal de .navbar-inducop; visibility la saca del foco/AT cuando no se ve. */
.areas-floatnav {
position: fixed; top: 0; left: 0; right: 0; z-index: 1040;
padding-top: var(--space-2); padding-bottom: var(--space-2);
transform: translateY(-100%);
visibility: hidden;
box-shadow: var(--shadow-lg);
transition: transform 0.28s ease, visibility 0.28s ease;
}
.areas-floatnav.is-visible { transform: translateY(0); visibility: visible; }
.areas-floatnav .navbar-brand-inducop img { height: var(--areas-header-logo-h); width: auto; }
.areas-floatnav .navbar-nav { gap: var(--space-3); }
@media (prefers-reduced-motion: reduce) {
.areas-floatnav { transition: none; }
}
/* =============================================================================
S215 — CONSTELACIÓN ANIMADA (sancionado): atmósfera inline (H2, rebrand-safe)
+ puentes sinápticos B.1 en el zigzag. Todo por var(--brand-*) => rebrand-safe;
solo transform/opacity/offset-distance/stroke-dashoffset; se apaga con
prefers-reduced-motion. NO usa el asset como máscara (esa vía congela la
animación); la forma va INLINE en el DOM (partials/_areas_constellation_inline
y _areas_bridge).
============================================================================= */
/* --- Atmósfera inline: capa animada bajo nav/hero (z:0), recortada por el propio