/* ============================================================
   DuchaVip — SISTEMA DE DISEÑO ANCLADO
   Valores MEDIDOS del sitio en producción (computed styles,
   Chrome headless @1440px, 11-sep-2026). No estimados.
   Toda página nueva se construye con estos tokens.
   ============================================================ */

:root {
  /* ---- COLOR (tema oscuro, el real del cliente) ---- */
  --bg-base:      #0B1119;  /* fondo principal, navy casi negro */
  --bg-elevated:  #19232E;  /* secciones y tarjetas elevadas */
  --bg-light:     #F9FAFB;  /* bloques claros puntuales */

  --fg:           #E7EBEF;  /* texto principal sobre oscuro */
  --fg-muted:     #7B8C9D;  /* texto secundario */
  --fg-on-light:  #222222;  /* texto sobre bloques claros */

  --accent:       #2AB0E5;  /* CIAN de marca — acentos y enlaces */
  --brand-deep:   #1E73BE;  /* AZUL de autoridad — botones/CTA */
  --brand-tint:   #C1E4F8;  /* tint claro (del logo) */

  /* Derivados por opacidad sobre el hue de marca (nunca grises sueltos) */
  --border-subtle: rgba(231, 235, 239, 0.10);
  --border-strong: rgba(231, 235, 239, 0.22);
  --overlay:       rgba(11, 17, 25, 0.72);

  /* ---- TIPOGRAFÍA ---- */
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;  /* titulares */
  --font-body:    'Jost', 'Inter', system-ui, sans-serif;          /* cuerpo */

  /* Escala medida (desktop) */
  --h1-size: 80px;  --h1-weight: 800;  --h1-lh: 1.10;  --h1-ls: -0.01em;
  --h2-size: 48px;  --h2-weight: 700;  --h2-lh: 1.15;  --h2-ls: -0.01em;
  --h3-size: 28px;  --h3-weight: 600;  --h3-lh: 1.25;  --h3-ls: -0.01em;
  --h4-size: 16px;  --h4-weight: 600;  --h4-lh: 1.50;  --h4-ls: -0.01em;
  --body-size: 16px; --body-lh: 1.50;
  --small-size: 14px;

  /* Label en mayúsculas (el sello visual de la marca) */
  --label-size: 13px; --label-weight: 600; --label-ls: 0.08em;

  /* ---- LAYOUT ---- */
  --container: 1400px;   /* medido en el sitio real */
  --gutter: 20px;
  --pad-side-desktop: 40px;
  --pad-side-mobile: 20px;
  --section-y-desktop: 96px;
  --section-y-mobile: 56px;

  /* ---- COMPONENTES ---- */
  --btn-font: var(--font-body);
  --btn-size: 15px; --btn-weight: 500;
  --btn-radius: 6px;
  --btn-pad: 14px 26px;       /* medido 10px; ampliado a área táctil AA */
  --btn-bg: var(--brand-deep);
  --btn-fg: #FFFFFF;

  --card-radius: 10px;
  --card-bg: var(--bg-elevated);
  --card-border: 1px solid var(--border-subtle);

  --shadow-soft: 0 2px 10px rgba(0, 0, 0, 0.28);
  --shadow-lift: 0 12px 28px rgba(0, 0, 0, 0.40);
  --transition: 220ms cubic-bezier(.2, .7, .3, 1);
}

/* ---- RESPONSIVE (regla de casa: los pequeños no se tocan) ---- */
@media (max-width: 1200px) {
  :root { --h1-size: 64px; --h2-size: 48px; --section-y-desktop: 72px; }
}
@media (max-width: 768px) {
  :root {
    --h1-size: 40px; --h2-size: 32px; --h3-size: 24px;
    --container: 100%;
  }
}

/* ---- BASE ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg-base);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--body-size);
  line-height: var(--body-lh);
}

/* Trampa documentada en LEARNINGS: width/height como atributos estiran la imagen
   si el CSS solo fija width. Esta regla global lo evita SIEMPRE. */
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--fg);
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); line-height: var(--h1-lh); letter-spacing: var(--h1-ls); }
h2 { font-size: var(--h2-size); font-weight: var(--h2-weight); line-height: var(--h2-lh); letter-spacing: var(--h2-ls); }
h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); line-height: var(--h3-lh); letter-spacing: var(--h3-ls); }
h4 { font-size: var(--h4-size); font-weight: var(--h4-weight); line-height: var(--h4-lh); }

p { margin: 0 0 1em; max-width: 62ch; }   /* 50-60 caracteres por línea */
a { color: var(--accent); text-decoration: none; }

.label {                                   /* el sello de la marca */
  font-family: var(--font-display);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-ls);
  text-transform: uppercase;
  color: var(--accent);
}

.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-side-desktop); }
@media (max-width: 768px) { .wrap { padding-inline: var(--pad-side-mobile); } }

.section { padding-block: var(--section-y-desktop); }
@media (max-width: 768px) { .section { padding-block: var(--section-y-mobile); } }

.btn {
  display: inline-block;
  font-family: var(--btn-font);
  font-size: var(--btn-size);
  font-weight: var(--btn-weight);
  padding: var(--btn-pad);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 0; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); background: #2481D2; }
@media (max-width: 768px) { .btn { width: 100%; text-align: center; } }

.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: 28px;
  transition: transform var(--transition), box-shadow var(--transition);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); }

/* ---- REVELADO ROBUSTO (contenido visible sin JS) ---- */
.reveal { opacity: 1; }
html.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
html.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}