/* Base de Flieger Studio: solo estructura y accesibilidad, sin apariencia. Colores, tipografía y componentes los pone
   css/sitio.css de cada sitio. Cada bloque cita la regla del manual de desarrollo que cumple. */

/* Variables que el sitio ajusta */
:root{
  --alto-barra:0px;          /* alto de la barra fija, si la hay (regla 22) */
  --alto-flotante:0px;       /* alto del botón flotante, si lo hay (regla 22) */
  --foco:#1a56db;            /* anillo de foco; debe contrastar con el fondo (regla 35 del checklist) */
  --saltar-fondo:#111111;    /* «Saltar al contenido» con contraste AA (regla 23) */
  --saltar-texto:#ffffff;
  /* Texto corrido: en escritorio el tamaño del diseño; en celular 16 px (regla 4) */
  --texto-135:13.5px;--texto-14:14px;--texto-145:14.5px;--texto-15:15px;--texto-155:15.5px;
}
@media (max-width:640px){
  :root{--texto-135:16px;--texto-14:16px;--texto-145:16px;--texto-15:16px;--texto-155:16px}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Márgenes de desplazamiento en html, nunca scroll-margin por elemento (regla 22) */
  scroll-padding-top:var(--alto-barra);scroll-padding-bottom:var(--alto-flotante)}
body{margin:0}
img,svg,video{max-width:100%;height:auto}
img,video{display:block}

/* «Saltar al contenido»: lo primero que recibe el foco en todas las páginas (regla 23) */
.saltar{position:absolute;left:12px;top:-100px;z-index:1000;padding:12px 18px;min-height:44px;
  background:var(--saltar-fondo);color:var(--saltar-texto);font-weight:600;text-decoration:none;border-radius:6px}
.saltar:focus{top:12px}

/* Foco visible con el teclado */
:focus-visible{outline:3px solid var(--foco);outline-offset:3px}

/* Áreas de toque de 44 px en celular (regla 6). .toque para bloques y píldoras; .toque-renglon para enlaces dentro de
   un renglón: agranda el área con relleno y la compensa con margen negativo, sin mover el texto */
@media (max-width:640px){
  .toque{min-height:44px;display:inline-flex;align-items:center}
  .toque-renglon{padding-block:12px;margin-block:-12px;display:inline-block}
}

/* Un número de teléfono nunca se parte entre dos renglones */
.numero{white-space:nowrap}

/* Texto oculto que leen los lectores de pantalla */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Tablas que se deslizan en celular sin desbordar la página (punto 8 del checklist) */
.tabla-desliza{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla-desliza table{border-collapse:collapse;width:100%}

/* Entradas al hacer scroll (regla 39): js/base.js agrega .entradas al documento y .visto a cada [data-entrada] cuando
   entra en pantalla. Sin JavaScript o con «Reducir movimiento» no hay .entradas y todo se ve desde el principio.
   Animación y no transición, para no pisar las transiciones propias de cada elemento */
.entradas [data-entrada]:not(.visto){opacity:0}
.entradas [data-entrada].visto{animation:entrada .9s cubic-bezier(.215,.61,.355,1) both;animation-delay:calc(var(--i,0) * 80ms)}
.entradas [data-entrada].sin-entrada{animation:none}
@keyframes entrada{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Botón flotante de contacto (regla 29): aparece cuando el botón principal [data-cta-principal] no está en pantalla.
   Su aspecto lo pone el sitio; aquí solo cómo entra y sale */
.flotante{position:fixed;right:16px;bottom:16px;z-index:900;transition:opacity .3s,transform .3s}
.flotante[data-oculto]{opacity:0;transform:translateY(12px);pointer-events:none}

/* «Reducir movimiento»: sin animaciones ni desplazamiento suave (punto 11 del checklist) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .entradas [data-entrada]:not(.visto){opacity:1}
}