/* =========================================================
   Sinirube · estilos globales (guía de réplica, secciones 2 y 4.4)
   Los colores y tamaños base viven en Betheme › Theme Options;
   aquí van tokens, componentes reutilizables y movimiento.
   ========================================================= */

:root{
  --sin-azul:#3352A0; --sin-azul-oscuro:#294583; --sin-azul-pie:#22396E;
  --sin-rojo:#D2222F; --sin-rojo-hover:#B41E2A; --sin-naranja:#F1471D; --sin-gris:#656263;
  --sin-texto:#1D2433; --sin-texto-2:#4A4F5C;
  --sin-fondo-suave:#F3F5FA; --sin-tinte:#EEF2FA; --sin-borde:#E2E6EF;
  --sin-azul-claro:#DCE3F3; --sin-salmon:#FFB8A6;
  --sin-display:'Archivo','Helvetica Neue',Arial,sans-serif;
  --sin-body:'Helvetica Neue','Inter',Arial,sans-serif;
  --sin-radio:28px;
  --sin-sombra:0 20px 40px rgba(20,40,90,.10);
  --sin-ease:cubic-bezier(.22,1,.36,1);   /* salida suave tipo "expo" */
  --sin-rapido:.25s; --sin-medio:.5s; --sin-lento:.9s;
}
@media (max-width:767px){ :root{ --sin-radio:22px } }

/* Transición entre páginas (navegadores con View Transitions; el resto navega normal) */
@view-transition{ navigation:auto }
::view-transition-old(root){ animation:sin-vt-out .28s var(--sin-ease) both }
::view-transition-new(root){ animation:sin-vt-in .45s var(--sin-ease) both }
@keyframes sin-vt-out{ to{ opacity:0; transform:translateY(-8px) } }
@keyframes sin-vt-in{ from{ opacity:0; transform:translateY(12px) } }

html{ scroll-behavior:smooth }
body{ font-family:var(--sin-body); color:var(--sin-texto); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
::selection{ background:var(--sin-azul); color:#fff }

/* ---------- Tipografía ---------- */
h1,h2,h3,.sin-display{ font-family:var(--sin-display); font-stretch:125%; text-wrap:balance }
.sin-display{ font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.02; color:var(--sin-azul-oscuro) }
.sin-h2, .sin-h2 .title{ font-size:clamp(30px,4vw,54px)!important; line-height:1.02!important }
.sin-eyebrow, .sin-eyebrow .title{ font-family:var(--sin-body)!important; font-stretch:100%; font-size:13px!important; letter-spacing:.18em!important;
  font-weight:700!important; color:var(--sin-rojo)!important; text-transform:uppercase; line-height:1.4!important }
.sin-eyebrow--dark, .sin-eyebrow--dark .title{ color:var(--sin-salmon)!important }
.sin-lead{ font-size:clamp(16px,1.4vw,19px); line-height:1.65; color:var(--sin-texto-2) }
p{ text-wrap:pretty }

/* ---------- Enlaces ---------- */
a{ transition:color var(--sin-rapido) var(--sin-ease), background-color var(--sin-rapido) var(--sin-ease) }

/* ---------- Botones en píldora (clase en el Item Button o en un <a>) ---------- */
.sin-btn, .sin-btn .button, a.sin-btn{ display:inline-flex; align-items:center; gap:14px; min-height:56px; padding:0 30px!important;
  border-radius:999px!important; font-weight:700; font-size:16px; text-decoration:none;
  transition:background-color var(--sin-rapido) var(--sin-ease), color var(--sin-rapido), transform var(--sin-rapido) var(--sin-ease), box-shadow var(--sin-rapido) }
.sin-btn:hover, .sin-btn .button:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(20,40,90,.18) }
.sin-btn--primario .button, a.sin-btn--primario{ background:var(--sin-azul)!important; color:#fff!important; border-color:var(--sin-azul)!important }
.sin-btn--primario .button:hover, a.sin-btn--primario:hover{ background:var(--sin-azul-oscuro)!important }
.sin-btn--rojo .button, a.sin-btn--rojo{ background:var(--sin-rojo)!important; color:#fff!important; border-color:var(--sin-rojo)!important }
.sin-btn--rojo .button:hover, a.sin-btn--rojo:hover{ background:var(--sin-rojo-hover)!important }
.sin-btn--contorno .button, a.sin-btn--contorno{ background:transparent!important; color:var(--sin-azul)!important; border:1.5px solid var(--sin-azul)!important }
.sin-btn--contorno .button:hover, a.sin-btn--contorno:hover{ background:var(--sin-azul)!important; color:#fff!important }
@media (max-width:767px){ .sin-btn, .sin-btn .button, a.sin-btn{ min-height:50px; font-size:15px } }

/* ---------- Tarjetas (Wrap o Item con clase sin-card) ---------- */
.sin-card, .sin-card > .mcb-wrap-inner{ background:#fff; border:1px solid var(--sin-borde); border-radius:var(--sin-radio);
  transition:transform var(--sin-medio) var(--sin-ease), box-shadow var(--sin-medio) var(--sin-ease), border-color var(--sin-medio) }
.sin-card:hover, .sin-card:hover > .mcb-wrap-inner{ transform:translateY(-6px); box-shadow:var(--sin-sombra); border-color:transparent }

/* ---------- Íconos circulares ---------- */
.sin-icono{ width:60px; height:60px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; color:#fff;
  transition:transform var(--sin-medio) var(--sin-ease) }
.sin-card:hover .sin-icono{ transform:scale(1.08) rotate(-6deg) }
.sin-icono--azul{ background:var(--sin-azul) } .sin-icono--rojo{ background:var(--sin-rojo) }
.sin-icono--naranja{ background:var(--sin-naranja) } .sin-icono--oscuro{ background:var(--sin-azul-oscuro) }

/* ---------- Imágenes: zoom suave al pasar el cursor ---------- */
.sin-zoom{ overflow:hidden; border-radius:var(--sin-radio) }
.sin-zoom img{ transition:transform var(--sin-lento) var(--sin-ease) }
.sin-zoom:hover img, a:hover .sin-zoom img{ transform:scale(1.05) }

/* ---------- Círculos decorativos del isotipo ---------- */
.sin-dot{ position:absolute; border-radius:50%; pointer-events:none; z-index:0 }
.sin-dot--float{ animation:sin-float 7s ease-in-out infinite }
.sin-dot--float:nth-child(2n){ animation-duration:9s; animation-delay:-3s }
@keyframes sin-float{ 50%{ transform:translate3d(0,-18px,0) } }

/* ---------- Aparición al hacer scroll (js/sinirube.js añade .is-in) ----------
   .sin-reveal: el elemento sube y aparece. .sin-stagger: sus hijos aparecen en cascada. */
.sin-js .sin-reveal, .sin-js .sin-stagger > *{ opacity:0; transform:translate3d(0,28px,0);
  transition:opacity var(--sin-lento) var(--sin-ease), transform var(--sin-lento) var(--sin-ease) }
.sin-js .sin-reveal.is-in, .sin-js .sin-stagger.is-in > *{ opacity:1; transform:none }
.sin-stagger.is-in > *:nth-child(2){ transition-delay:.08s } .sin-stagger.is-in > *:nth-child(3){ transition-delay:.16s }
.sin-stagger.is-in > *:nth-child(4){ transition-delay:.24s } .sin-stagger.is-in > *:nth-child(5){ transition-delay:.32s }
.sin-stagger.is-in > *:nth-child(6){ transition-delay:.4s }  .sin-stagger.is-in > *:nth-child(n+7){ transition-delay:.48s }

/* ---------- Accesibilidad ---------- */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--sin-naranja); outline-offset:3px; border-radius:6px }

/* Alto contraste (botón de la barra de utilidades) */
html.sin-hc body, html.sin-hc .section, html.sin-hc .mcb-wrap-inner, html.sin-hc #Footer, html.sin-hc header{ background:#000!important; color:#fff!important; border-color:#fff!important }
html.sin-hc h1, html.sin-hc h2, html.sin-hc h3, html.sin-hc h4, html.sin-hc p, html.sin-hc .title{ color:#fff!important }
html.sin-hc a{ color:#FFE600!important; text-decoration:underline!important }
html.sin-hc .sin-dot{ display:none }

/* Sin animaciones para quien las desactiva en su sistema */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *, *::before, *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important }
  .sin-js .sin-reveal, .sin-js .sin-stagger > *{ opacity:1; transform:none }
  @view-transition{ navigation:none }
}

/* =========================================================
   Header (plantilla "Header Sinirube" · guía 5.0 y 5.1)
   Colores, espaciados y radios base están en BeBuilder; aquí sombra, estados y movimiento.
   ========================================================= */

/* Barra de utilidades */
.sin-topbar{ border-bottom:1px solid rgba(255,255,255,.14) }
.sin-topbar .mfn-icon-box{ gap:8px }
.mfn-header-tmpl .sin-topbar .mfn-icon-box .icon-wrapper i{ color:var(--sin-salmon); font-size:14px }
.sin-topbar .desc-wrapper, .sin-topbar a{ color:var(--sin-azul-claro)!important; font-size:13px; line-height:1.4 }
.sin-topbar a:hover .desc-wrapper{ color:#fff!important }

/* Píldora: sombra y entrada al cargar */
.sin-header-pill > .mcb-wrap-inner{ box-shadow:0 18px 40px rgba(15,30,70,.25);
  transition:box-shadow var(--sin-medio) var(--sin-ease), padding var(--sin-medio) var(--sin-ease) }
.sin-header{ animation:sin-header-in .9s var(--sin-ease) backwards }  /* backwards: sin transform residual que rompa el menú lateral fijo */
@keyframes sin-header-in{ from{ opacity:0; transform:translate3d(0,-24px,0) } }
/* Al hacer scroll (Betheme añade .is-sticky al header fijo) la píldora se compacta */
.mfn-header-tmpl.is-sticky .sin-header-pill > .mcb-wrap-inner{ box-shadow:0 10px 30px rgba(15,30,70,.18) }

/* Logo (SVG cuadrado: isotipo + palabra) */
.mfn-header-tmpl .sin-header-pill .logo-wrapper img{ height:58px!important; width:auto!important; max-height:none!important }
@media (max-width:767px){ .mfn-header-tmpl .sin-header-pill .logo-wrapper img{ height:46px!important } }

/* Lema junto al logo (se oculta cuando el menú necesita el espacio) */
.sin-header-tagline{ flex:0 0 auto } .sin-header-tagline .column_attr{ width:170px }
@media (max-width:1535px){ .sin-header-tagline{ display:none!important } }
.sin-header-tagline .column_attr{ padding-left:16px; margin-left:4px; border-left:1px solid var(--sin-borde) }
.sin-header-tagline p{ margin:0; font-size:11px; line-height:1.35; color:var(--sin-gris) }

/* Menú principal: enlaces en píldora con subrayado animado */
.sin-menu .mfn-header-menu > li > a.mfn-menu-link{ padding:10px 14px; border-radius:999px; font-weight:600; font-size:15px;
  transition:background-color var(--sin-rapido) var(--sin-ease), color var(--sin-rapido) }
.sin-menu .mfn-header-menu > li:hover > a.mfn-menu-link{ background-color:var(--sin-tinte) }
.sin-menu .mfn-header-menu{ flex-wrap:nowrap } .sin-menu .mfn-menu-label{ white-space:nowrap }
@media (max-width:1535px){ .sin-menu .mfn-header-menu > li > a.mfn-menu-link{ padding:10px 9px; font-size:14px }
  .sin-header-cta .mfn-icon-box{ padding:0 18px!important } }
.sin-menu ul.mfn-submenu{ padding:10px!important; box-shadow:0 24px 48px rgba(15,30,70,.16); border:1px solid var(--sin-borde) }
.sin-menu ul.mfn-submenu li a.mfn-menu-link{ padding:10px 14px!important; border-radius:12px; font-size:15px;
  transition:background-color var(--sin-rapido) var(--sin-ease), color var(--sin-rapido), padding var(--sin-rapido) var(--sin-ease) }
.sin-menu ul.mfn-submenu li a.mfn-menu-link:hover{ background:var(--sin-fondo-suave); padding-left:20px!important }

/* Botones circulares (búsqueda y hamburguesa) */
.mfn-header-tmpl .sin-header-circulo .mfn-icon-box .icon-wrapper{ width:48px!important; height:48px!important; margin:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  border:1.5px solid #D5DBE8; transition:background-color var(--sin-rapido) var(--sin-ease), border-color var(--sin-rapido), transform var(--sin-rapido) var(--sin-ease) }
.mfn-header-tmpl .sin-header-circulo .mfn-icon-box .icon-wrapper i{ color:var(--sin-azul); font-size:18px; transition:color var(--sin-rapido) }
.mfn-header-tmpl .sin-header-circulo .mfn-icon-box:hover .icon-wrapper{ background:var(--sin-azul); border-color:var(--sin-azul); transform:scale(1.06) }
.mfn-header-tmpl .sin-header-circulo .mfn-icon-box:hover .icon-wrapper i{ color:#fff }
.mfn-header-tmpl .sin-header-burger .mfn-icon-box .icon-wrapper{ background:var(--sin-azul); border-color:var(--sin-azul) }
.mfn-header-tmpl .sin-header-burger .mfn-icon-box .icon-wrapper i{ color:#fff }
@media (max-width:767px){ .mfn-header-tmpl .sin-header-circulo .mfn-icon-box .icon-wrapper{ width:46px!important; height:46px!important } }

/* Botón "Acceso a sistemas" */
.sin-header-cta .mfn-icon-box{ display:inline-flex; align-items:center; gap:10px; height:48px; padding:0 24px; border-radius:999px;
  background:var(--sin-rojo); transition:background-color var(--sin-rapido) var(--sin-ease), transform var(--sin-rapido) var(--sin-ease), box-shadow var(--sin-rapido) }
.sin-header-cta .mfn-icon-box:hover{ background:var(--sin-rojo-hover); transform:translateY(-2px); box-shadow:0 10px 20px rgba(210,34,47,.3) }
.sin-header-cta .icon-wrapper{ order:2; margin:0!important }
.mfn-header-tmpl .sin-header-cta .mfn-icon-box .icon-wrapper i, .mfn-header-tmpl .sin-header-cta .desc-wrapper{ color:#fff!important }
.sin-header-cta .desc-wrapper{ font-weight:700; font-size:15px; white-space:nowrap }
.sin-header-cta .mfn-icon-box:hover .icon-wrapper i{ animation:sin-nudge .5s var(--sin-ease) }
@keyframes sin-nudge{ 50%{ transform:translateX(4px) } }

/* Enlaces "Saltar al contenido" (Betheme): visibles solo con teclado */
#skip-links-menu ul li, #skip-links-menu ul li a{ background:var(--sin-azul-oscuro)!important; color:#fff!important; border-radius:999px }
#skip-links-menu:focus-within{ top:12px; left:16px; z-index:10001 }

/* Menú lateral móvil */
.sin-header-burger .mfn-header-tmpl-menu-sidebar .mfn-header-menu > li > a{ padding:12px 0 }
@media (max-width:959px){ .mfn-header-tmpl .sin-header-buscar{ margin-left:auto!important } }