/* ==========================================================================
   VIVENTIA - DESIGN SYSTEM
   --------------------------------------------------------------------------
   Tokens derivados del PDF de diseño (viventia-web.pdf, 1920 x 9456 px).
   Los valores marcados [PDF] fueron extraídos del archivo, no estimados.

   Tipografías del proyecto (NO reemplazar):
     Gloock  -> títulos editoriales
     Roboto  -> interfaz y lectura
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     1. COLOR  [PDF: extraído por área pintada]
     ---------------------------------------------------------------------- */

  /* Superficies */
  --color-cream:        #f6f5eb;  /* fondo base, secciones claras */
  --color-sand:         #eee9dd;  /* fondo alterno de sección */
  --color-stone:        #ccc5b7;  /* fondo de cards, bordes sutiles */
  --color-ink:          #0a1019;  /* header, footer, botón oscuro */

  /* Marca */
  --color-gold:         #b39647;  /* acento: bandas, CTA, isotipo */

  /* Texto */
  --color-charcoal:     #363634;  /* texto principal sobre claro */
  --color-black:        #000000;  /* eyebrows, labels */
  --color-white:        #ffffff;

  /* Roles semánticos - usar estos en los componentes, no los literales */
  --bg-base:            var(--color-cream);
  --bg-alt:             var(--color-sand);
  --bg-card:            var(--color-stone);
  --bg-dark:            var(--color-ink);
  --bg-accent:          var(--color-gold);

  --text-primary:       var(--color-charcoal);
  --text-strong:        var(--color-black);
  --text-on-dark:       var(--color-cream);
  --text-on-accent:     var(--color-white);
  --text-muted:         color-mix(in srgb, var(--color-charcoal) 70%, transparent);

  --border-subtle:      var(--color-stone);
  --border-on-accent:   color-mix(in srgb, var(--color-white) 60%, transparent);

  /* Botones */
  --btn-primary-bg:     var(--color-ink);
  --btn-primary-text:   var(--color-white);
  --btn-secondary-bg:   var(--color-cream);
  --btn-secondary-text: var(--color-ink);
  --btn-accent-bg:      var(--color-gold);
  --btn-accent-text:    var(--color-white);


  /* ----------------------------------------------------------------------
     2. TIPOGRAFÍA - FAMILIAS
     ---------------------------------------------------------------------- */

  --font-heading: 'Gloock', 'Times New Roman', serif;
  --font-body:    'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Pesos */
  --fw-light:     300;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;


  /* ----------------------------------------------------------------------
     3. ESCALA TIPOGRÁFICA
     Cada clamp() interpola linealmente entre 375px y 1920px de viewport.
     El máximo de cada token es el tamaño exacto medido en el PDF.
     ---------------------------------------------------------------------- */

  --fs-h1:         clamp(2.25rem,   1.780rem + 2.006vw, 4.1875rem); /* [PDF] 67px - Hero */
  --fs-h2:         clamp(1.875rem,  1.496rem + 1.618vw, 3.4375rem); /* [PDF] 55px - Section */
  --fs-h2-lg:      clamp(2rem,      1.575rem + 1.812vw, 3.75rem);   /* [PDF] 60px - Section destacada */
  --fs-h3:         clamp(1.5rem,    1.364rem + 0.583vw, 2.0625rem); /* [PDF] 33px - Título de card */
  --fs-h4:         clamp(1.25rem,   1.159rem + 0.388vw, 1.625rem);  /* [PDF] 26px - Nombre / título de post */

  --fs-eyebrow:    clamp(1rem,      0.909rem + 0.388vw, 1.375rem);  /* [PDF] 22px - Antetítulo de sección */

  --fs-body-lg:    clamp(1.0625rem, 0.956rem + 0.453vw, 1.5rem);    /* [PDF] 24px - Párrafo de sección */
  --fs-body:       clamp(1rem,      0.939rem + 0.259vw, 1.25rem);   /* [PDF] 20px - Texto base */
  --fs-body-sm:    clamp(0.9375rem, 0.892rem + 0.194vw, 1.125rem);  /* [PDF] 18px - Card, rol, excerpt */
  --fs-small:      clamp(0.875rem,  0.845rem + 0.129vw, 1rem);      /* [PDF] 16px - Fecha, metadata */

  --fs-nav:        0.9375rem;                                       /* [PDF] 15px - Nav header (fijo) */
  --fs-nav-footer: clamp(1.125rem,  1.049rem + 0.324vw, 1.4375rem); /* [PDF] 23px - Nav footer */
  --fs-address:    clamp(1rem,      0.955rem + 0.194vw, 1.1875rem); /* [PDF] 19px - Dirección footer */

  --fs-btn:        clamp(1rem,      0.970rem + 0.129vw, 1.125rem);  /* [PDF] 18px - Botón */
  --fs-btn-lg:     clamp(1.0625rem, 0.9715rem + 0.388vw, 1.4375rem); /* [PDF] 23px - Botón CTA grande */

  /* Line-height */
  --lh-tight:      1.0;   /* [PDF] Hero H1: 67px de tipo, 67px de interlínea */
  --lh-heading:    1.1;   /* [PDF] H2 y H3 */
  --lh-body:       1.5;   /* Ver NOTA A11Y abajo */
  --lh-body-pdf:   1.17;  /* [PDF] valor literal del mockup: 28px sobre 24px */

  /* NOTA A11Y - El PDF usa interlínea 1.17 en el cuerpo de texto. Para una
     audiencia de adultos mayores eso queda por debajo del mínimo razonable de
     lectura (WCAG 1.4.12 espera soportar 1.5). El token por defecto se fijó en
     1.5. Para volver al valor exacto del mockup:
         --lh-body: var(--lh-body-pdf);
     Es un cambio de una línea; la decisión es del cliente. */

  --ls-heading:   -0.01em;
  --ls-body:       0;
  --ls-label:      0.02em;  /* labels en mayúscula del diagrama "Cómo funciona" */


  /* ----------------------------------------------------------------------
     4. CONTAINERS Y GRILLA  [PDF]
     ---------------------------------------------------------------------- */

  --container:        81.375rem; /* [PDF] 1302px - ancho de contenido */
  --container-narrow: 56rem;     /* 896px - bloques de texto largo */
  --container-full:   120rem;    /* 1920px - ancho del mockup */

  --gutter:    clamp(1.25rem, 4vw, 2rem);          /* padding lateral del container */
  --grid-gap:  clamp(1.25rem, 1.875vw, 2.25rem);   /* [PDF] 36px entre columnas */
  --grid-cols: 3;                                  /* [PDF] 3 col de 410px */


  /* ----------------------------------------------------------------------
     5. SPACING - escala base 8px
     ---------------------------------------------------------------------- */

  --space-1:   0.25rem;  /*   4px */
  --space-2:   0.5rem;   /*   8px */
  --space-3:   0.75rem;  /*  12px */
  --space-4:   1rem;     /*  16px */
  --space-5:   1.5rem;   /*  24px */
  --space-6:   2rem;     /*  32px */
  --space-7:   2.5rem;   /*  40px */
  --space-8:   3rem;     /*  48px */
  --space-9:   4rem;     /*  64px */
  --space-10:  5rem;     /*  80px */
  --space-11:  6rem;     /*  96px */
  --space-12:  7.5rem;   /* 120px */
  --space-13:  10rem;    /* 160px */

  /* Ritmo vertical fluido */
  --space-section:    clamp(4rem, 7.5vw, 9rem);  /* padding vertical de sección */
  --space-section-sm: clamp(2.5rem, 5vw, 5rem);
  --space-block:      clamp(2rem, 3.5vw, 4rem);  /* entre bloques dentro de una sección */

  /* Ritmo tipográfico */
  --space-eyebrow-title: var(--space-4);  /* [PDF] ~16px de eyebrow a H2 */
  --space-title-body:    var(--space-8);  /* [PDF] ~48px de H2 a párrafo */
  --space-paragraph:     1.75rem;         /* [PDF] 28px entre párrafos */


  /* ----------------------------------------------------------------------
     6. BORDER RADIUS  [PDF]
     El diseño es deliberadamente angular: cards, imágenes y bandas en 0.
     Solo los botones son pill.
     ---------------------------------------------------------------------- */

  --radius-none:  0;
  --radius-sm:    0.25rem;  /* inputs, si el diseño lo requiere */
  --radius-md:    0.5rem;
  --radius-pill:  62.4375rem;
  --radius-full:  50%;      /* flechas circulares del diagrama */

  --radius-card:   var(--radius-none);
  --radius-image:  var(--radius-none);
  --radius-button: var(--radius-pill);


  /* ----------------------------------------------------------------------
     7. TRANSICIONES Y EASING
     ---------------------------------------------------------------------- */

  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 400ms;

  --transition-color:     color var(--duration-fast) var(--ease-out),
                          background-color var(--duration-fast) var(--ease-out),
                          border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-out);
  --transition-all:       all var(--duration-base) var(--ease-out);


  /* ----------------------------------------------------------------------
     8. ELEVACIÓN Y CAPAS
     ---------------------------------------------------------------------- */

  --shadow-sm: 0 1px 2px color-mix(in srgb, var(--color-ink) 8%, transparent);
  --shadow-md: 0 4px 16px color-mix(in srgb, var(--color-ink) 10%, transparent);

  --z-base:    1;
  --z-overlay: 10;
  --z-header:  100;
  --z-modal:   1000;
}


/* ==========================================================================
   BASE
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--text-primary);
  background-color: var(--bg-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* --------------------------------------------------------------------------
   TÍTULOS - Gloock
   -------------------------------------------------------------------------- */

h1, h2,
.heading-editorial {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);   /* Gloock solo existe en 400 */
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-primary);
  margin: 0;
}

h1, .h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
}

h2, .h2  { font-size: var(--fs-h2); }
.h2--lg  { font-size: var(--fs-h2-lg); }

/* H3 y H4 también usan Gloock en este diseño: títulos de card, nombres del
   equipo y títulos de artículo del blog. */
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-regular);
  font-size: var(--fs-h4);
  line-height: var(--lh-heading);
  margin: 0;
}

/* H5 y H6 vuelven a Roboto: son labels funcionales, no editoriales. */
h5, h6 {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-heading);
  margin: 0;
}


/* --------------------------------------------------------------------------
   TEXTO - Roboto
   -------------------------------------------------------------------------- */

p { margin: 0 0 var(--space-paragraph); }
p:last-child { margin-bottom: 0; }

.text-lg   { font-size: var(--fs-body-lg); }
.text-base { font-size: var(--fs-body); }
.text-sm   { font-size: var(--fs-body-sm); }
.text-xs   { font-size: var(--fs-small); }

/* Antetítulo de sección - Roboto Medium, sobre el H2 */
.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  line-height: 1.2;
  color: var(--text-strong);
  margin: 0 0 var(--space-eyebrow-title);
}

/* Label en mayúscula - pasos del diagrama "Cómo funciona" */
.label-step {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-strong);
}

.meta {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  color: var(--text-strong);
}

a { color: inherit; transition: var(--transition-color); }


/* --------------------------------------------------------------------------
   LAYOUT
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  /* --container es el ancho de CONTENIDO (1302px en el PDF). Con box-sizing
     border-box el padding se comeria 64px, asi que se suma al max-width. */
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container--full   { max-width: calc(var(--container-full) + var(--gutter) * 2); }

.section     { padding-block: var(--space-section); }
.section--sm { padding-block: var(--space-section-sm); }

.section--base   { background-color: var(--bg-base); }
.section--alt    { background-color: var(--bg-alt); }
.section--dark   { background-color: var(--bg-dark);   color: var(--text-on-dark); }
.section--accent { background-color: var(--bg-accent); color: var(--text-on-accent); }

.section--dark .eyebrow { color: var(--text-on-dark); }
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 { color: var(--text-on-dark); }
.section--accent h1,
.section--accent h2 { color: var(--text-on-dark); }

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: var(--grid-gap);
}

.grid--2 { --grid-cols: 2; }
.grid--3 { --grid-cols: 3; }

@media (max-width: 1024px) { .grid { --grid-cols: 2; } }
@media (max-width: 640px)  { .grid { --grid-cols: 1; } }


/* --------------------------------------------------------------------------
   BOTONES  [PDF] pill, Roboto Medium
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-btn);
  line-height: 1;
  text-decoration: none;
  padding: var(--space-4) var(--space-7);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: var(--transition-color), var(--transition-transform);
}

.btn--lg { font-size: var(--fs-btn-lg); padding: var(--space-5) var(--space-8); }

.btn--primary   { background: var(--btn-primary-bg);   color: var(--btn-primary-text); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }
.btn--accent    { background: var(--btn-accent-bg);    color: var(--btn-accent-text); }
.btn--outline   { background: transparent; color: currentColor; border-color: currentColor; }

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }


/* --------------------------------------------------------------------------
   CARDS  [PDF] radius 0, fondo stone o sand
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--bg-card);
  border-radius: var(--radius-card);
  padding: var(--space-6);
  transition: var(--transition-color);
}

.card__title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.card__text  { font-size: var(--fs-body-lg); margin: 0; }

/* Card de artículo: imagen arriba, fondo sand */
.card--post { background-color: var(--bg-alt); padding: 0; }
.card--post img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}
.card--post .card__body { padding: var(--space-5); }


/* --------------------------------------------------------------------------
   NAVEGACIÓN, HEADER Y FOOTER
   -------------------------------------------------------------------------- */

.nav-link {
  font-family: var(--font-body);
  font-weight: var(--fw-medium);
  font-size: var(--fs-nav);
  text-decoration: none;
  transition: var(--transition-color);
}

.nav-link--active,
.nav-link[aria-current="page"] { font-weight: var(--fw-bold); }

.site-header {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  position: relative;
  z-index: var(--z-header);
}

.site-footer {
  background-color: var(--bg-dark);
  color: var(--text-on-dark);
  padding-block: var(--space-11);
}

.site-footer .nav-link { font-size: var(--fs-nav-footer); }
.site-footer address {
  font-style: normal;
  font-size: var(--fs-address);
  line-height: 1.35;
}


/* --------------------------------------------------------------------------
   ACCESIBILIDAD
   -------------------------------------------------------------------------- */

:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
}

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