/* Base compartida — sistema aprendido de los clones verificados:
   escala de tres pasos por rol, tipografía fluida con clamp(), un solo ritmo
   vertical, fuentes en local. Cada marca define sus variables encima. */

@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap;
  src: url("fonts/barlow-400.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap;
  src: url("fonts/barlow-600.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 800; font-display: swap;
  src: url("fonts/barlow-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap;
  src: url("fonts/barlow-condensed-700.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-display: swap;
  src: url("fonts/barlow-condensed-800.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 800; font-style: italic; font-display: swap;
  src: url("fonts/barlow-condensed-800-italic.woff2") format("woff2"); }

:root {
  --tipo: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --tipo-display: "Barlow Condensed", "Barlow", Impact, sans-serif;
  --ancho: 1240px;
  --pad: clamp(18px, 4vw, 32px);
  --sec: clamp(64px, 8vw, 120px);
  --t-display: clamp(2.6rem, 7vw, 5.6rem);
  --t-1: clamp(1.9rem, 4vw, 3.2rem);
  --t-2: clamp(1.3rem, 2.1vw, 1.75rem);
  --t-3: 1.0625rem;
  --t-etq: 0.75rem;
  --paso: .32s cubic-bezier(.4,0,.2,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--tipo); font-size: var(--t-3); line-height: 1.55;
  color: var(--texto); background: var(--fondo); overflow-x: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--t-display); line-height: .98; letter-spacing: -.01em; }
h2 { font-size: var(--t-1); line-height: 1.06; letter-spacing: -.01em; }
h3 { font-size: var(--t-2); line-height: 1.15; }

.contenedor { width: min(100% - 2 * var(--pad), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--sec); }
.etiqueta { font-size: var(--t-etq); font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento); display: inline-flex; align-items: center; gap: .75em; }
.etiqueta::before { content: ""; width: 26px; height: 2px; background: var(--acento); }
.intro { max-width: 60ch; color: var(--texto-2); font-size: clamp(1.05rem, 1.4vw, 1.25rem); }
.grid { display: grid; gap: clamp(14px, 2vw, 24px); }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .g4, .g3, .g2 { grid-template-columns: minmax(0, 1fr); } }

.boton { display: inline-flex; align-items: center; gap: .6em; font-weight: 800; letter-spacing: .04em;
  text-transform: uppercase; font-size: .9rem; padding: .95em 1.6em; border-radius: var(--r-boton);
  background: var(--acento); color: var(--sobre-acento); transition: transform var(--paso), background var(--paso); }
.boton:hover { transform: translateY(-2px); background: var(--acento-2); }
.boton.secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 var(--b) var(--linea-viva); }
.boton.secundario:hover { background: var(--fondo-2); }

.nav { position: sticky; top: 0; z-index: 20; height: var(--nav); display: flex; align-items: center;
  background: color-mix(in srgb, var(--fondo-nav) 92%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea); }
.nav .contenedor { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav ul { display: flex; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; }
.nav ul a { font-size: .85rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.nav ul a:hover { color: var(--acento); }
@media (max-width: 860px) { .nav ul { display: none; } }

.tarjeta { background: var(--fondo-2); border: var(--b) solid var(--linea); border-radius: var(--r);
  padding: clamp(20px, 2.6vw, 32px); transition: border-color var(--paso), transform var(--paso); }
.tarjeta:hover { border-color: var(--acento); transform: translateY(-3px); }
.tarjeta h3 { margin-top: 14px; }
.tarjeta p { margin-top: 10px; color: var(--texto-2); }
.icono { width: 48px; height: 48px; color: var(--acento); }
.icono svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.banda { background: var(--acento-fondo); color: var(--sobre-acento-fondo); padding-block: clamp(22px, 3vw, 34px); }
.banda .contenedor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; }
.banda strong { font-family: var(--tipo-display); font-size: clamp(1.3rem, 2.6vw, 2rem); text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }

.lista-check { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px 22px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.lista-check li { display: flex; gap: 10px; align-items: flex-start; color: var(--texto-2); }
.lista-check li::before { content: ""; flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%;
  background: var(--acento); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/70% no-repeat, linear-gradient(#000 0 0); mask-composite: exclude; }

.pie { border-top: 1px solid var(--linea); padding-block: 34px; color: var(--texto-3); font-size: .9rem; }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 24px; align-items: center; }
.pendiente { border: 1.5px dashed #E0A400; background: #FFF7DE; color: #6B4E00; border-radius: var(--r); padding: 14px 18px; font-size: .95rem; }
.pendiente strong { color: #8A6200; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }