/* SYMI website · base común (EST-L01 Maximalismo controlado)
   Solo usa variables de tokens.css. No agregar colores ni tamaños sueltos. */

/* ---------- Reinicio ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip;scroll-padding-top:calc(var(--symi-layout-touch) + var(--symi-space-5))}
body{
  min-height:100vh;
  background:var(--symi-color-bg-base);
  color:var(--symi-color-text-primary);
  font-family:var(--symi-font-body);
  font-weight:var(--symi-font-body-weight);
  font-size:var(--symi-size-md);
  line-height:var(--symi-leading-normal);
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%}
/* hidden siempre gana, aunque el componente defina su propio display */
[hidden]{display:none!important}
img{height:auto}
a{color:var(--symi-color-text-link)}
ul[role="list"]{list-style:none;padding:0}
button{font:inherit;color:inherit}
h1,h2,h3{
  font-family:var(--symi-font-display);
  font-weight:var(--symi-font-display-weight);
  letter-spacing:var(--symi-font-display-tracking);
  text-transform:var(--symi-font-display-transform);
  line-height:var(--symi-leading-tight);
  overflow-wrap:normal;hyphens:manual;
}
p{overflow-wrap:break-word}
.mono{font-family:var(--symi-font-mono)}

/* Foco visible en todo lo interactivo */
:focus-visible{outline:3px solid var(--symi-color-focus-ring);outline-offset:3px}

/* Solo 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}

/* Saltar al contenido */
.saltar{
  position:absolute;left:var(--symi-space-2);top:calc(-1 * var(--symi-space-8));z-index:100;
  background:var(--symi-color-action-primary-bg);color:var(--symi-color-action-primary-fg);
  padding:var(--symi-space-3);border-radius:var(--symi-radius-sm);font-weight:var(--symi-font-body-strong);
}
.saltar:focus{top:var(--symi-space-2)}

/* ---------- Contenedor ---------- */
.envoltura{width:100%;max-width:var(--symi-layout-maxw);margin-inline:auto;padding-inline:var(--symi-space-3)}
@media (min-width:768px){.envoltura{padding-inline:var(--symi-space-5)}}

/* ---------- Iconos (un solo conjunto: líneas tipo Lucide) ---------- */
.ic{
  width:var(--symi-icon-size);height:var(--symi-icon-size);flex:none;
  fill:none;stroke:currentColor;stroke-width:var(--symi-icon-stroke);stroke-linecap:round;stroke-linejoin:round;
}
.ic-sm{width:var(--symi-size-lg);height:var(--symi-size-lg)}

/* ---------- Botones ---------- */
.boton{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--symi-space-2);
  min-height:var(--symi-layout-touch);padding:var(--symi-space-2) var(--symi-space-4);
  border:var(--symi-border-width) solid transparent;border-radius:var(--symi-radius-pill);
  font-family:var(--symi-font-body);font-size:var(--symi-size-md);font-weight:var(--symi-font-body-strong);line-height:1.2;
  text-decoration:none;text-align:center;cursor:pointer;
  transition:transform var(--symi-motion-base) var(--symi-motion-ease),box-shadow var(--symi-motion-base) var(--symi-motion-ease),background-color var(--symi-motion-fast);
}
.boton-primario{
  background:var(--symi-color-action-primary-bg);color:var(--symi-color-action-primary-fg);
  border-color:var(--symi-color-action-primary-fg);box-shadow:var(--symi-shadow-sm);
}
.boton-primario:hover{background:var(--symi-color-action-primary-hover);transform:translate(-2px,-2px);box-shadow:var(--symi-shadow-md)}
.boton-secundario{
  background:var(--symi-color-action-secondary-bg);color:var(--symi-color-action-secondary-fg);
  border-color:var(--symi-color-action-secondary-border);
}
.boton-secundario:hover{background:var(--symi-color-text-primary);color:var(--symi-color-text-inverse)}
/* Botón oscuro en ambos modos (va sobre el degradado de la llamada final) */
.boton-oscuro{background:var(--symi-color-text-inverse);color:var(--symi-color-accent-cream);border-color:var(--symi-color-text-inverse)}
.boton-oscuro:hover{transform:translate(-2px,-2px);box-shadow:var(--symi-shadow-sm)}

/* ---------- Encabezado ---------- */
.encabezado{
  position:sticky;top:0;z-index:50;
  background:var(--symi-color-bg-base);
  border-bottom:var(--symi-border-width) solid var(--symi-color-border-default);
}
.encabezado-fila{display:flex;align-items:center;justify-content:space-between;gap:var(--symi-space-3);min-height:calc(var(--symi-layout-touch) + var(--symi-space-4))}
.logo{
  display:inline-flex;align-items:center;min-height:var(--symi-layout-touch);
  font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);font-size:var(--symi-size-xl);
  letter-spacing:var(--symi-font-display-tracking);color:var(--symi-color-text-primary);text-decoration:none;
}
/* Logo oficial (BRANDING SYMI.pdf): isotipo turquesa; la palabra SYMI toma el color del texto */
.logo-svg{display:block;height:42px;width:auto;flex:none}
.logo-svg-lema{height:60px}
.logo-lema{fill:var(--symi-color-logo-lema)}

.nav-escritorio{display:none}
.nav-escritorio ul{display:flex;align-items:center;gap:var(--symi-space-1);list-style:none;padding:0}
.nav-escritorio a{
  display:inline-flex;align-items:center;min-height:var(--symi-layout-touch);padding-inline:var(--symi-space-3);
  border-radius:var(--symi-radius-pill);color:var(--symi-color-text-primary);text-decoration:none;font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-sm);
}
.nav-escritorio a:hover{color:var(--symi-color-brand-text)}
.nav-escritorio a[aria-current="page"]{background:var(--symi-color-bg-raised);color:var(--symi-color-brand-text)}
.encabezado-acciones{display:flex;align-items:center;gap:var(--symi-space-2)}
.encabezado .boton-primario{display:none}

.boton-menu{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--symi-space-2);
  min-width:var(--symi-layout-touch);min-height:var(--symi-layout-touch);padding-inline:var(--symi-space-3);
  background:transparent;border:var(--symi-border-width) solid var(--symi-color-border-strong);border-radius:var(--symi-radius-pill);
  cursor:pointer;font-weight:var(--symi-font-body-strong);font-size:var(--symi-size-sm);
}

.boton-tema{
  display:inline-grid;place-items:center;width:var(--symi-layout-touch);height:var(--symi-layout-touch);
  background:transparent;border:var(--symi-border-width) solid var(--symi-color-border-default);border-radius:var(--symi-radius-pill);
  color:var(--symi-color-text-primary);cursor:pointer;
}
.boton-tema:hover{border-color:var(--symi-color-border-strong)}
.ic-luna{display:none}
[data-tema="claro"] .ic-sol{display:none}
[data-tema="claro"] .ic-luna{display:block}

@media (min-width:768px){.encabezado .boton-primario{display:inline-flex}}
@media (min-width:1100px){
  .nav-escritorio{display:block}
  .boton-menu{display:none}
}

/* ---------- Menú móvil de pantalla completa ---------- */
.menu-movil{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;
  background:var(--symi-color-bg-base);
  background-image:repeating-linear-gradient(135deg,var(--symi-color-bg-raised) 0 2px,transparent 2px 14px);
  overflow-y:auto;overscroll-behavior:contain;
}
.menu-movil[hidden]{display:none}
.menu-movil-cabecera{display:flex;align-items:center;justify-content:space-between;gap:var(--symi-space-3);min-height:calc(var(--symi-layout-touch) + var(--symi-space-4));border-bottom:var(--symi-border-width) solid var(--symi-color-border-default);background:var(--symi-color-bg-base)}
.menu-movil-lista{list-style:none;padding:var(--symi-space-4) 0;display:grid;gap:var(--symi-space-1)}
.menu-movil-lista a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--symi-space-3);
  min-height:calc(var(--symi-layout-touch) + var(--symi-space-2));padding-block:var(--symi-space-2);
  font-family:var(--symi-font-display);font-weight:var(--symi-font-display-weight);text-transform:var(--symi-font-display-transform);
  letter-spacing:var(--symi-font-display-tracking);font-size:var(--symi-size-2xl);line-height:var(--symi-leading-tight);
  color:var(--symi-color-text-primary);text-decoration:none;border-bottom:var(--symi-border-width) solid var(--symi-color-border-default);
}
.menu-movil-lista a:hover,.menu-movil-lista a[aria-current="page"]{color:var(--symi-color-brand-text)}
.menu-movil-pie{margin-top:auto;padding-block:var(--symi-space-4) var(--symi-space-5);display:grid;gap:var(--symi-space-3)}
.menu-movil-pie .boton{width:100%}
.menu-movil-pie p{color:var(--symi-color-text-secondary);font-size:var(--symi-size-sm)}
html.menu-abierto{overflow:hidden}
html.menu-abierto .whatsapp-flotante{display:none}

/* ---------- Secciones genéricas ---------- */
.seccion{padding-block:var(--symi-space-6)}
@media (min-width:768px){.seccion{padding-block:var(--symi-space-7)}}
.etiqueta{
  font-family:var(--symi-font-mono);font-size:var(--symi-size-sm);font-weight:var(--symi-font-body-strong);
  text-transform:uppercase;letter-spacing:.12em;color:var(--symi-color-brand-text);margin-bottom:var(--symi-space-2);
}

/* Pila vertical con aire uniforme entre hijos */
.pila{display:grid;gap:var(--symi-space-3);justify-items:start}
.pila > h1{font-size:var(--symi-size-display)}
.pila > .acciones{margin-top:var(--symi-space-2)}

/* Marca visible para textos provisionales (se elimina antes de publicar) */
.provisional{outline:var(--symi-border-width) dashed var(--symi-color-accent-yellow);outline-offset:4px}
.aviso-provisional{
  display:inline-flex;align-items:center;gap:var(--symi-space-2);
  background:var(--symi-color-status-warning-bg);color:var(--symi-color-status-warning-fg);
  padding:var(--symi-space-1) var(--symi-space-3);border-radius:var(--symi-radius-pill);
  font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);
}

/* ---------- Llamada final antes del pie ---------- */
.llamada-final{background:var(--symi-gradient-hot);color:var(--symi-color-text-inverse);padding-block:var(--symi-space-6)}
.llamada-final-grilla{display:grid;gap:var(--symi-space-4);align-items:center}
.llamada-final-grilla > div{display:grid;gap:var(--symi-space-3)}
.llamada-final h2{font-size:var(--symi-size-3xl);max-width:16ch}
.llamada-final p{font-size:var(--symi-size-lg);max-width:40ch}
.llamada-final .boton{justify-self:start}
@media (min-width:768px){.llamada-final{padding-block:var(--symi-space-7)}}
@media (min-width:1100px){
  .llamada-final-grilla{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
  .llamada-final .boton{justify-self:end}
}

/* ---------- Pie ---------- */
.pie{
  background:var(--symi-color-bg-sunken);color:var(--symi-color-text-secondary);font-size:var(--symi-size-sm);
  border-top:var(--symi-border-width) solid var(--symi-color-border-default);
  padding-block:var(--symi-space-6) calc(var(--symi-space-6) + var(--symi-layout-touch) + var(--symi-space-3));
}
.pie-grilla{display:grid;gap:var(--symi-space-5);grid-template-columns:minmax(0,1fr)}
.pie-marca p{max-width:34ch;margin-top:var(--symi-space-2)}
.pie h2{font-family:var(--symi-font-mono);font-size:var(--symi-size-xs);letter-spacing:.12em;color:var(--symi-color-text-primary);margin-bottom:var(--symi-space-2)}
.pie ul{list-style:none;padding:0}
.pie li a,.pie-dato{display:flex;align-items:center;gap:var(--symi-space-2);min-height:var(--symi-layout-touch);color:var(--symi-color-text-secondary);text-decoration:none}
.pie li a:hover{color:var(--symi-color-brand-text);text-decoration:underline}
.pie-legal{margin-top:var(--symi-space-5);padding-top:var(--symi-space-4);border-top:var(--symi-border-width) solid var(--symi-color-border-default);display:flex;flex-wrap:wrap;gap:var(--symi-space-2) var(--symi-space-4);justify-content:space-between;align-items:center}
.pie-legal a{color:var(--symi-color-text-secondary);display:inline-flex;align-items:center;min-height:var(--symi-layout-touch)}
@media (min-width:768px){.pie-grilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){
  .pie-grilla{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr))}
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position:fixed;right:var(--symi-space-3);bottom:var(--symi-space-3);z-index:40;
  display:inline-flex;align-items:center;gap:var(--symi-space-2);
  min-height:var(--symi-layout-touch);padding:var(--symi-space-2) var(--symi-space-4) var(--symi-space-2) var(--symi-space-3);
  background:var(--symi-color-action-primary-bg);color:var(--symi-color-action-primary-fg);
  border:var(--symi-border-width) solid var(--symi-color-action-primary-fg);border-radius:var(--symi-radius-pill);
  box-shadow:var(--symi-shadow-lg);
  font-weight:var(--symi-font-body-strong);text-decoration:none;
  transition:transform var(--symi-motion-base) var(--symi-motion-ease);
}
.whatsapp-flotante:hover{transform:translate(-2px,-2px)}
/* En celular solo el ícono: ocupa menos y tapa menos contenido */
@media (max-width:767px){
  .whatsapp-flotante{width:56px;height:56px;padding:0;justify-content:center;box-shadow:var(--symi-shadow-sm)}
  .whatsapp-flotante .ic{width:var(--symi-icon-size);height:var(--symi-icon-size)}
  .whatsapp-flotante span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (min-width:768px){.whatsapp-flotante{right:var(--symi-space-5);bottom:var(--symi-space-5)}}

/* ---------- Página no encontrada ---------- */
.error-pagina{padding-block:var(--symi-space-7);min-height:60vh;display:grid;align-content:center;gap:var(--symi-space-4)}
.error-pagina .codigo{font-family:var(--symi-font-mono);font-weight:var(--symi-font-body-strong);color:var(--symi-color-accent-pink);font-size:var(--symi-size-xl)}
.error-pagina h1{font-size:var(--symi-size-3xl);max-width:18ch}
.error-pagina p{color:var(--symi-color-text-secondary);max-width:46ch}
.acciones{display:flex;flex-wrap:wrap;gap:var(--symi-space-3)}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
}