/*
  Tokens — Regina Verdi / Cómo mejorar tu empresa
  Capa de tokens Meridian (fuente: clientes/20-regina-verdi/design-system.html).
  Ningún color, radio, sombra o duración vive fuera de este archivo.
*/

:root{
  /* Color */
  --bg:#FFFFFF; --surface:#FFFFFF; --surface-2:#F7F8FA; --elevated:#FFFFFF; --card:#FFFFFF;
  --border:#DDE1E8; --border-strong:#C3C9D4; --divider:#EEF0F4;
  --text:#16283F; --text-2:#55606F; --text-3:#8B95A5; --text-disabled:#AEB6C2; --text-inverse:#FFFFFF;
  --primary:#2A9D8F; --primary-hover:#1F7F74; --primary-active:#1A665E; --primary-soft:#E9F7F4; --primary-soft-text:#1A665E;
  --navy:#1D3557; --navy-soft:#EDF1F7;
  --section-ice:#EAF0FE; /* pedido operador 2026-08-13 (antes #CEDCFC); degradado a blanco en .section-ice */
  --link:#1F7F74; --link-hover:#164F49;
  --hover:#F2F4F7; --active:#E9ECF1; --focus:#2A9D8F;
  --success:#15803D; --success-soft:#E8F6EC; --warning:#B45309; --warning-soft:#FEF3E2;
  --error:#B91C1C; --error-soft:#FDECEC; --info:#1D4ED8; --info-soft:#EAF0FE;
  --skeleton:#EEF0F4; --skeleton-shine:#F7F8FA;
  --text-inverse-2:#AEC1DB; /* secundario sobre fondo navy */
  --primary-on-navy:#9FDDD2; /* teal claro sobre navy (hero-panel, escena) */
  --star:#F0A32B; /* estrellas de testimonios — único uso de este tono */

  /* Sombra — una sola familia, sin variantes decorativas */
  --shadow-xs:0 1px 2px rgba(16,21,30,.06);
  --shadow-sm:0 1px 3px rgba(16,21,30,.08),0 1px 2px rgba(16,21,30,.05);
  --shadow-md:0 4px 8px -2px rgba(16,21,30,.10),0 2px 4px -2px rgba(16,21,30,.06);
  --shadow-lg:0 12px 20px -6px rgba(16,21,30,.12),0 4px 8px -4px rgba(16,21,30,.06);
  --shadow-xl:0 24px 40px -12px rgba(16,21,30,.18),0 8px 16px -8px rgba(16,21,30,.08);

  /* Espaciado — cuadrícula de 8px */
  --space-025:2px; --space-05:4px; --space-1:8px; --space-1-5:12px; --space-2:16px;
  --space-2-5:20px; --space-3:24px; --space-4:32px; --space-5:40px; --space-6:48px;
  --space-7:56px; --space-8:64px; --space-9:72px; --space-10:80px; --space-12:96px; --space-16:128px;

  /* Radio */
  --radius-xs:4px; --radius-sm:6px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-2xl:24px; --radius-full:999px;

  /* Movimiento — 150-300ms, ease-out. Nada por encima de 300ms en UI.
     --duration-scene es solo para loops decorativos (hero), no para chrome. */
  --duration-instant:75ms; --duration-fast:150ms; --duration-base:200ms; --duration-slow:300ms;
  --duration-scene:13s;
  --ease-standard:cubic-bezier(.2,0,0,1); --ease-enter:cubic-bezier(0,0,.2,1); --ease-exit:cubic-bezier(.4,0,1,1); --ease-linear:linear;

  /* Contenedor / breakpoints (sm 480 · md 768 · lg 1024 · xl 1280 · 2xl 1536) */
  --container-max:1200px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Montserrat',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
img,svg{display:block;max-width:100%}
a{color:var(--link);text-decoration:none}
a:hover{color:var(--link-hover);text-decoration:underline}
button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
h1,h2,h3,h4,h5,h6,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* Foco visible siempre — nunca se elimina sin sustituto */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--radius-xs)}
:focus:not(:focus-visible){outline:none}

/* Escala tipográfica */
.t-display{font-weight:700;line-height:1.05;letter-spacing:-.03em;font-size:clamp(2.25rem,4.5vw + 1rem,3.5rem)}
.t-h1{font-weight:700;line-height:1.1;letter-spacing:-.02em;font-size:clamp(1.75rem,3vw + 1rem,2.5rem)}
.t-h2{font-weight:700;line-height:1.15;letter-spacing:-.02em;font-size:clamp(1.5rem,2vw + 1rem,2rem)}
.t-h3{font-weight:700;line-height:1.25;letter-spacing:-.01em;font-size:1.5rem}
.t-h4{font-weight:600;line-height:1.3;letter-spacing:-.01em;font-size:1.25rem}
.t-h5{font-weight:600;line-height:1.4;font-size:1.125rem}
.t-h6{font-weight:600;line-height:1.4;font-size:1rem}
.t-body-lg{font-weight:400;line-height:1.6;font-size:1.125rem}
.t-body-md{font-weight:400;line-height:1.6;font-size:1rem}
.t-body-sm{font-weight:400;line-height:1.55;font-size:.875rem}
.t-caption{font-weight:400;line-height:1.45;letter-spacing:.005em;font-size:.75rem}
.t-label{font-weight:600;line-height:1.2;letter-spacing:.005em;font-size:.875rem}
.t-overline{font-weight:700;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;font-size:.6875rem}

.text-2{color:var(--text-2)}
.text-3{color:var(--text-3)}
.text-inverse{color:var(--text-inverse)}
.text-inverse-2{color:var(--text-inverse-2)}
.text-primary{color:var(--primary)}

/* Medida de párrafo — tope 68ch */
.measure{max-width:68ch}

/* Skeleton — placeholder de media explícito. Shimmer se detiene con reduced-motion. */
.skeleton{
  position:relative;
  overflow:hidden;
  background:var(--skeleton);
  border-radius:var(--radius-lg);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
}
.skeleton::after{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--skeleton-shine),transparent);
  background-size:200% 100%;
  animation:shine 2.4s var(--ease-linear) infinite;
}
.skeleton-label{
  position:relative;z-index:1;
  padding:var(--space-2);color:var(--text-3);font-size:.8125rem;font-weight:600;
}

/* Utilidades de layout mínimas */
.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--space-2)}
@media (min-width:768px){ .container{padding-inline:var(--space-3)} }
@media (min-width:1024px){ .container{padding-inline:var(--space-7)} }

.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.skip-link{
  position:absolute;left:var(--space-2);top:-48px;z-index:200;
  background:var(--navy);color:#fff;padding:var(--space-1) var(--space-2);
  border-radius:var(--radius-md);font-weight:600;font-size:.875rem;
  transition:top var(--duration-fast) var(--ease-standard);
}
.skip-link:focus{top:var(--space-2);text-decoration:none}

@keyframes shine{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }

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