/* =========================================
   style.css — Base, tokens, reset, helpers, tipografía
   Proyecto: CONSULTOR DIGITAL
   ========================================= */

/* -------------------------------
   DESIGN TOKENS
-------------------------------- */
:root {
  /* Colores base */
  --color-brand-700: #0B3B60;
  --color-accent-600: #00A9C7;
  --color-green-500: #C9E56F;
  --color-green-glow: rgba(201,229,111,.35);
  --color-neutral-900: #0F172A;
  --color-neutral-700: #334155;
  --color-neutral-200: #E2E8F0;
  --color-neutral-100: #F6F8FA;
  --color-bg: #FFFFFF;

  /* Colores semánticos */
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-warning: #FBBF24;
  --color-info: var(--color-accent-600);

  /* Tipografía */
  --font-head: "Poppins", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Escalas */
  --fs-h1: clamp(2.25rem, 3.5vw + 1rem, 3.25rem);
  --fs-h2: clamp(1.75rem, 2.5vw + .5rem, 2.25rem);
  --fs-h3: clamp(1.25rem, 1.4vw + .5rem, 1.5rem);
  --fs-body: clamp(1rem, .4vw + .8rem, 1.125rem);
  --fs-small: .875rem;

  /* Espaciado */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 80px;

  /* Bordes y sombras */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 32px;
  --shadow-card: 0 6px 18px rgba(2,8,23,.06);
  --shadow-float: 0 10px 24px rgba(2,8,23,.10);

  /* Animaciones */
  --motion-base: .25s;
  --ease-standard: cubic-bezier(.2,.6,.2,1);

  /* Layout */
  --header-height: 72px;
  --section-padding-y: var(--space-8);
}

/* -------------------------------
   RESET
-------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:var(--header-height);}
body{
  margin:0;
  background:var(--color-bg);
  color:var(--color-neutral-900);
  font-family:var(--font-body);
  line-height:1.6;
  font-size:var(--fs-body);
  -webkit-font-smoothing:antialiased;
}
img,picture,video,canvas,svg{display:block;max-width:100%;height:auto;}
input,button,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;cursor:pointer;}
a{color:var(--color-accent-600);text-decoration:none;transition:color .2s ease;}
a:hover{color:var(--color-brand-700);}
h1,h2,h3{margin:0 0 var(--space-4);line-height:1.2;font-family:var(--font-head);}
h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);}
h2{font-size:var(--fs-h2);font-weight:var(--fw-semibold);}
h3{font-size:var(--fs-h3);}
p{margin:0 0 var(--space-5);}
hr{border:none;border-top:1px solid var(--color-neutral-200);margin:var(--space-7) 0;}

/* -------------------------------
   LAYOUT HELPERS
-------------------------------- */
.container{width:min(1200px,100% - 2*var(--space-5));margin-inline:auto;}
.section{padding:var(--section-padding-y) 0;}
.text-center{text-align:center;}
.text-muted{color:var(--color-neutral-700);}
.divider{border:0;border-top:1px solid var(--color-neutral-200);margin:var(--space-7) 0;}

/* -------------------------------
   TIPOGRAFÍA Y UTILIDADES
-------------------------------- */
.lead{font-size:clamp(1.125rem,.6vw+1rem,1.25rem);color:var(--color-neutral-700);}
.small{font-size:var(--fs-small);}
.section-title{text-align:center;margin-bottom:var(--space-6);}

/* -------------------------------
   ACCESIBILIDAD
-------------------------------- */
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);}
:focus-visible{outline:3px solid var(--color-accent-600);outline-offset:2px;border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
}