/* ===========================================================================
   BASE COMÚN — sólo lo invisible y la red. Ninguna forma visual de marca vive aquí
   (criterio de Mario: los 4 sitios no comparten plantilla).
   =========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;min-height:100vh;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:3px solid #FFD000;outline-offset:3px}
.saltar{position:absolute;left:-9999px;top:0;z-index:200}
.saltar:focus{left:12px;top:12px;background:#FFD000;color:#000;padding:10px 14px;border-radius:6px;font-weight:700}
.solo-lector{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* nunca texto pegado a los bordes: todo contenido vive dentro de un margen mínimo de 20 px */
.ancho{width:min(100% - 40px, var(--ancho-max, 1240px));margin-inline:auto}

/* LA RED — vínculo con el grupo y cambio de empresa con las líneas de color */
.red{--red-fondo:oklch(0.13 0.01 265);--red-texto:oklch(0.86 0.01 265);--red-borde:oklch(1 0 0 / .1);
  background:var(--red-fondo);color:var(--red-texto);font:500 13px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;border-bottom:1px solid var(--red-borde);position:relative;z-index:60}
.red.red-claro{--red-fondo:oklch(0.97 0.004 265);--red-texto:oklch(0.32 0.01 265);--red-borde:oklch(0 0 0 / .08)}
.red-in{display:flex;align-items:center;gap:8px;min-height:38px;width:min(100% - 32px, 1240px);margin-inline:auto;overflow-x:auto;scrollbar-width:none}
.red-in::-webkit-scrollbar{display:none}
.red-pre{white-space:nowrap;opacity:.8}
.red-casa{display:inline-flex;align-items:center;gap:6px;font-weight:700;text-decoration:none;white-space:nowrap}
.red-casa i{width:8px;height:8px;border-radius:50%;background:#DC2626;box-shadow:0 0 8px #DC2626}
.red-ls{display:flex;gap:2px;margin-left:auto}
.red-l{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 8px;text-decoration:none;border-radius:4px;white-space:nowrap}
.red-l b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--rc);color:#000;font-size:10.5px;font-weight:800;box-shadow:0 0 10px color-mix(in oklch,var(--rc) 55%,transparent)}
.red-l[data-red=agencia] b{color:#fff}
.red-l span{display:none}
.red-l[aria-current]{background:color-mix(in oklch,var(--rc) 16%,transparent)}
.red-l[aria-current] span{display:inline}
@media (min-width:760px){.red-l span{display:inline}}
/* celular: los nombres SÍ se ven (las letras solas no dicen nada — prueba de 5 s, 17-oct); se quita «una empresa de» y se aprieta */
@media (max-width:759px){.red-pre{display:none}.red-in{gap:6px}.red-l{padding:0 5px;gap:4px;font-size:11.5px}.red-l span{display:inline}.red-l b{width:16px;height:16px;font-size:9.5px}.red-casa{font-size:12px}[data-sitio=casa] .red-casa{font-size:0;gap:0}
  .red-in{flex-wrap:wrap;overflow:visible;row-gap:0;padding:2px 0}.red-ls{margin-left:0;flex-wrap:wrap}.red-l{min-height:30px}}
@media (hover:hover){.red-l:hover{background:color-mix(in oklch,var(--rc) 12%,transparent)}}

/* EL BARRIDO — al cambiar de empresa, el color de su línea cruza la pantalla (red.js) */
.red-barrido{position:fixed;inset:0;z-index:300;pointer-events:none;background:var(--barrido,#DC2626);transform:scaleX(0);transform-origin:left}
.red-barrido.sale{transition:transform 280ms cubic-bezier(.7,0,.84,0);transform:scaleX(1)}
.red-barrido.entra{transform:scaleX(1);transform-origin:right}
.red-barrido.entra.ya{transition:transform 380ms cubic-bezier(.16,1,.3,1);transform:scaleX(0)}

/* transición entre páginas del MISMO sitio (navegadores con View Transitions entre documentos) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:180ms cubic-bezier(.4,0,1,1) both vt-sale}
::view-transition-new(root){animation:260ms cubic-bezier(0,0,.2,1) both vt-entra}
@keyframes vt-sale{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-entra{from{opacity:0;transform:translateY(10px)}}

/* marco de demo / interactivo grande: no empuja la página (altura fija, scroll propio) */
.marco-vivo{position:relative;height:min(78vh,760px);min-height:520px;border-radius:14px;overflow:hidden;isolation:isolate}
.marco-vivo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}