/* ═══════════════════════════════════════════════
   TAURUS — WEB FONTS
═══════════════════════════════════════════════ */
@font-face {
  font-family: 'Bw Gradual';
  src: url('../fonts/bw-gradual-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ═══════════════════════════════════════════════
   TAURUS — GLOBAL CSS VARIABLES
   Colores según Manual de Marca (Estudio Descapotable, Marzo 2026)
═══════════════════════════════════════════════ */
:root {
  /* Brand Colors — valores exactos del manual de marca */
  --color-primary:        #E84551;   /* Rojo Taurus corporativo */
  --color-primary-dark:   #C41E2B;   /* Rojo oscuro — hover, degradado símbolo */
  --color-dark:           #1D1D1B;   /* Negro sucio — texto principal, fondos */
  --color-symbol-grey:    #CCCBCB;   /* Gris bloques símbolo (RGB 204,203,203) */
  --color-bg:             #FFFFFF;
  --color-surface:        #F1F1F1;   /* Gris claro (RGB 241,241,241) */
  --color-text:           #1D1D1B;
  --color-text-muted:     #6B7280;
  --color-border:         #E5E7EB;

  /* Typography — según manual de marca */
  --font-display: 'Bw Gradual', system-ui, sans-serif;   /* Titulares */
  --font-body:    'Roboto', system-ui, sans-serif;        /* Cuerpo de texto */
  --font-size-base: 1rem;
  --line-height-base: 1.6;

  /* Spacing */
  --space-xs:   0.25rem;
  --space-sm:   0.5rem;
  --space-md:   1rem;
  --space-lg:   2rem;
  --space-xl:   4rem;
  --space-2xl:  6rem;

  /* Layout */
  --container-max:    1200px;
  --border-radius:    0.5rem;
  --border-radius-lg: 1rem;
  --shadow-sm:        0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:        0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg:        0 8px 30px rgba(0,0,0,0.12);

  /* Transitions */
  --transition-fast:  150ms ease;
  --transition-base:  300ms ease;
  --transition-slow:  500ms ease;

  /* Header */
  --header-height: 64px;  /* móvil */
}

/* ═══════════════════════════════════════════════
   RESET
═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img, video, iframe      { max-width: 100%; display: block; }
ul, ol                  { list-style: none; }
a                       { color: inherit; text-decoration: none; }
button                  { font: inherit; }

/* ═══════════════════════════════════════════════
   BASE — MOBILE FIRST
   Todas las reglas base se escriben para móvil.
   Los breakpoints amplían hacia arriba.
═══════════════════════════════════════════════ */
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family:    var(--font-body);
  font-size:      var(--font-size-base);
  line-height:    var(--line-height-base);
  color:          var(--color-text);
  background:     var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ═══════════════════════════════════════════════
   TYPOGRAPHY — MOBILE FIRST
═══════════════════════════════════════════════ */
h1, h2, h3, h4 {
  font-family:    var(--font-display);
  line-height:    1.2;
  color:          var(--color-dark);
  font-weight:    400;   /* Bw Gradual Regular */
}
h1 { font-size: clamp(1.75rem, 6vw, 3.5rem); }
h2 { font-size: clamp(1.4rem, 4vw, 2.5rem); }
h3 { font-size: clamp(1.1rem, 3vw, 1.75rem); }

p + p { margin-top: var(--space-md); }

/* ═══════════════════════════════════════════════
   LAYOUT — MOBILE FIRST
═══════════════════════════════════════════════ */
.container {
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--space-md);   /* 16px móvil */
}

@media (min-width: 48rem) {           /* ≥ 768px tablet */
  .container { padding-inline: var(--space-lg); }
}

@media (min-width: 75rem) {           /* ≥ 1200px desktop */
  .container { padding-inline: var(--space-xl); }
  :root { --header-height: 72px; }
}

.content-section {
  padding: var(--space-xl) 0;
}

@media (min-width: 75rem) {
  .content-section { padding: var(--space-2xl) 0; }
}

.content-section--surface {
  background: var(--color-surface);
}
.content-section--dark {
  background: var(--color-dark);
  color: rgba(255,255,255,0.9);
}
.content-section--dark h2,
.content-section--dark h3 {
  color: #fff;
}
.content-section--dark .section-header p {
  color: rgba(255,255,255,0.7);
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--space-xl);
}
.section-header p {
  color: var(--color-text-muted);
  margin-top: var(--space-md);
  font-size: 1.1rem;
}

/* ── DISCOVER SPLIT — 2/3 text + 1/3 visual ── */
.discover-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: stretch;
}
.discover-split__content h2 {
  margin-bottom: var(--space-md);
}
.discover-split__content p {
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.discover-split__content p:last-child {
  margin-bottom: 0;
}
.discover-split__lead {
  font-size: 1.1rem;
  color: var(--color-text) !important;
  margin-bottom: var(--space-lg) !important;
}
.discover-split__visual {
  display: none;
}
@media (min-width: 768px) {
  .discover-split {
    grid-template-columns: 3fr 1.4fr;
    gap: var(--space-2xl);
    align-items: center;
  }
  .discover-split__visual {
    display: flex;
    align-self: center;
    aspect-ratio: 820 / 947;
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
  }
  .discover-split__visual img {
    width: 100%;
    height: 100%;
    border-radius: var(--radius-lg, 12px);
    object-fit: cover;
  }
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--border-radius);
  z-index: 1000;
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-md); }

/* ═══════════════════════════════════════════════
   SCROLL ANIMATIONS
═══════════════════════════════════════════════ */
.content-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.content-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════
   UTILITY
═══════════════════════════════════════════════ */
.text-center { text-align: center; }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

/* ═══════════════════════════════════════════════
   ACCESSIBILITY
═══════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}
.nav-open { overflow: hidden; }

/* Visually hidden utility for labels */
.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;
}