/* ─── Mejoras de Responsiveness Complementarias ───────────────────────── */
/* Este archivo complementa components.css con mejoras de mobile-first */

/* ── Form Fields Responsive ── */
.form-field input,
.form-field textarea {
  font-size: 16px !important; /* Evita zoom automático en iOS */
  padding: clamp(10px, 2vw, 16px) 12px !important;
  box-sizing: border-box;
}

.form-field input:focus,
.form-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(18,58,94,0.1);
}

.consent-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* ── Buttons Responsive ── */
.btn {
  min-height: 44px;
  padding: clamp(10px, 2vw, 14px) clamp(16px, 3vw, 28px);
  font-size: clamp(var(--t-xs), 1.5vw, var(--t-sm));
}

@media (max-width: 479px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .hero-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .hero-actions .btn {
    width: 100% !important;
  }
  
  /* Buttons dentro de grillas también */
  div[style*="display:flex"] .btn,
  div[style*="display: flex"] .btn {
    width: auto;
    min-width: auto;
  }
}

/* ── Container Responsive ── */
.container {
  padding-inline: var(--gap-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--gap-tablet);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-inline: var(--gap-desktop);
  }
}

/* ── Sections Spacing Responsive ── */
.hero,
.problem,
.services,
.cases,
.process,
.metrics-band,
.expertise,
.faq,
.cta-final,
.contact,
.about-mini {
  padding-inline: var(--gap-mobile);
}

@media (min-width: 768px) {
  .hero,
  .problem,
  .services,
  .cases,
  .process,
  .metrics-band,
  .expertise,
  .faq,
  .cta-final,
  .contact,
  .about-mini {
    padding-inline: var(--gap-tablet);
  }
}

@media (max-width: 767px) {
  .hero-grid,
  .contact-grid,
  .about-grid,
  .case-item {
    grid-template-columns: 1fr !important;
  }
  
  .services-grid,
  .cred-grid,
  .expertise-grid,
  .metrics-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  }
  
  .offer-card--featured::before {
    top: -10px;
    left: var(--s-4);
  }
  
  /* ── Eyebrow y small text ── */
  p[style*="font-size: 13px"],
  p[style*="font-size: 12px"],
  span[style*="font-size: 12px"],
  span[style*="font-size: 13px"] {
    font-size: clamp(12px, 1.8vw, 13px) !important;
  }
  
  /* Mejorar div con font-size pequeño */
  div[style*="font-size: 14px"] {
    font-size: clamp(13px, 2vw, 14px) !important;
  }
  
  div[style*="font-size: 24px"] {
    font-size: clamp(18px, 4vw, 24px) !important;
  }
  
  /* ── Agenda page - Timeline items ── */
  div[style*="display:flex;gap:var(--s-4);align-items:flex-start"] {
    gap: clamp(12px, 2.5vw, 16px) !important;
  }
  
  /* Timeline numbers - mejorar font size */
  span[style*="font-family:'JetBrains Mono'"][style*="font-size:var(--t-xs)"] {
    font-size: clamp(11px, 2vw, 13px) !important;
    padding-top: clamp(1px, 0.5vw, 3px) !important;
  }
  
  /* Strong text dentro de flex items */
  div[style*="display:flex;gap:var(--s-4);align-items:flex-start"] strong {
    font-size: clamp(15px, 2.2vw, 18px) !important;
  }
  
  /* Párrafos dentro de timeline items */
  div[style*="display:flex;gap:var(--s-4);align-items:flex-start"] p {
    font-size: clamp(13px, 1.9vw, 16px) !important;
    line-height: 1.5 !important;
  }
  
  /* Boxes con "Qué traer" y "Para quién no es útil" */
  div[style*="border:1px solid var(--hairline)"][style*="padding:var(--s-6)"],
  div[style*="border-left:3px"][style*="padding:var(--s-6)"] {
    margin-top: clamp(24px, 4vw, 40px) !important;
    padding: clamp(16px, 3vw, 24px) !important;
  }
  
  /* H3 dentro de boxes */
  div[style*="border:1px solid var(--hairline)"] h3 {
    font-size: clamp(16px, 2.2vw, 18px) !important;
    margin-bottom: clamp(12px, 2vw, 16px) !important;
  }
  
  /* Lists dentro de boxes */
  div[style*="border:1px solid var(--hairline)"] li,
  div[style*="border-left:3px"] li {
    font-size: clamp(12px, 1.8vw, 14px) !important;
  }
  
  /* Box azul de "Elige el horario" */
  div[style*="border:2px solid var(--steel)"][style*="background:#f0f5fb"] {
    padding: clamp(20px, 4vw, 32px) !important;
    border-radius: var(--radius) !important;
  }
  
  /* H2 en box de horario */
  div[style*="border:2px solid var(--steel)"] h2 {
    font-size: clamp(18px, 2.5vw, 22px) !important;
    margin-bottom: clamp(12px, 2vw, 16px) !important;
    margin-top: clamp(8px, 1.5vw, 12px) !important;
  }
  
  /* Botón calendario en box */
  div[style*="border:2px solid var(--steel)"] .btn {
    padding: clamp(12px, 2vw, 16px) clamp(16px, 3vw, 24px) !important;
    font-size: clamp(14px, 2vw, 16px) !important;
  }
  
  /* Eyebrow en box de horario */
  div[style*="border:2px solid var(--steel)"] .eyebrow {
    font-size: clamp(10px, 1.5vw, 12px) !important;
  }
  
  /* Pequeño texto "Google Calendar" */
  div[style*="border:2px solid var(--steel)"] p[style*="font-family:'JetBrains Mono'"] {
    font-size: clamp(10px, 1.5vw, 12px) !important;
    margin-top: clamp(12px, 2vw, 16px) !important;
  }
  
  /* "¿Prefiere escribir primero?" box */
  div[style*="border:1px solid var(--hairline)"][style*="margin-top"] {
    margin-top: clamp(16px, 3vw, 24px) !important;
    padding: clamp(16px, 3vw, 24px) !important;
  }
  
  div[style*="border:1px solid var(--hairline)"][style*="margin-top"] strong {
    font-size: clamp(13px, 2vw, 14px) !important;
  }
  
  div[style*="border:1px solid var(--hairline)"][style*="margin-top"] p {
    font-size: clamp(12px, 1.8vw, 14px) !important;
    margin-top: clamp(8px, 1.5vw, 12px) !important;
  }
  
  /* ── Page header improvements ── */
  .page-header {
    margin-bottom: clamp(40px, 8vw, 64px) !important;
  }
  
  .page-header .eyebrow {
    margin-bottom: clamp(12px, 2vw, 16px) !important;
  }
  
  .page-header h1 {
    font-size: clamp(32px, 7vw, 48px) !important;
    margin-bottom: clamp(16px, 3vw, 24px) !important;
  }
  
  .page-header .lead {
    font-size: clamp(15px, 2.2vw, 18px) !important;
    line-height: 1.6 !important;
  }
  
  /* Main padding */
  main[style*="padding-top"] {
    padding-left: clamp(16px, 4vw, 40px) !important;
    padding-right: clamp(16px, 4vw, 40px) !important;
  }
  
  /* Navigation improvements for agenda */
  .nav-actions {
    display: none !important;
  }
  
  .nav-logo {
    font-size: clamp(16px, 2.2vw, 18px) !important;
  }
  
  .nav-link {
    font-size: clamp(13px, 2vw, 15px) !important;
  }
  
  /* Footer link improvements */
  .footer-copy {
    font-size: clamp(11px, 1.5vw, 12px) !important;
  }
  
  footer a {
    font-size: clamp(11px, 1.5vw, 13px) !important;
  }
  
  /* 2-column grids → 1 column (con y sin espacios en el atributo) */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap-mobile) !important;
  }
  
  /* Auto + 1fr grids (sobre-mi.html page-header) → 1 column */
  div[style*="grid-template-columns:auto 1fr"],
  div[style*="grid-template-columns: auto 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap-mobile) !important;
  }
  
  /* 3-column grids → auto-fit (con y sin espacios) */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--gap-mobile) !important;
  }
  
  /* Page body grid específico */
  .page-body {
    grid-template-columns: 1fr !important;
    gap: var(--gap-mobile) !important;
    width: 100% !important;
  }
  
  /* Contenedor principal - full width en mobile */
  .container {
    width: 100% !important;
  }
  
  /* Divs dentro de page-body - full width */
  .page-body > div {
    width: 100% !important;
  }
  
  /* Boxes de información mejorados */
  div[style*="border:2px solid var(--steel)"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  div[style*="border:1px solid var(--hairline)"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  div[style*="border-left:3px"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  
  /* Timeline items - full width */
  div[style*="display:flex;gap:var(--s-4);align-items:flex-start"] {
    width: 100% !important;
  }
  
  /* 3-column grids → auto-fit */
  div[style*="grid-template-columns: repeat(3"] {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
    gap: var(--gap-mobile) !important;
  }
  
  /* 2-column repeat grids → auto-fit */
  div[style*="grid-template-columns: repeat(2"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap-mobile) !important;
  }
  
  /* Iconos + texto (60px 1fr) → apilados */
  div[style*="grid-template-columns: 60px 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--s-3) !important;
  }
  
  /* Auto + content → apilado */
  div[style*="grid-template-columns: auto 1fr"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--gap-mobile) !important;
  }
  
  /* Gaps fixos → responsive en mobile */
  div[style*="gap: 64px"],
  div[style*="gap: 32px"],
  div[style*="gap: 48px"] {
    gap: var(--gap-mobile) !important;
  }
  
  /* Cambiar align-items a flex-start en mobile */
  div[style*="align-items: center"][style*="grid"] {
    align-items: flex-start !important;
  }
  
  /* Corregir headings en elementos inline-styled en mobile */
  div[style*="grid-template-columns"] h1,
  div[style*="grid-template-columns"] h2,
  div[style*="grid-template-columns"] h3,
  div[style*="grid-template-columns"] h4 {
    font-size: clamp(24px, 5vw, 44px) !important;
  }
  
  /* Mejorar padding en elementos con border dentro de grillas */
  div[style*="padding: 32px"] {
    padding: clamp(16px, 4vw, 32px) !important;
  }
  
  div[style*="padding: 48px"] {
    padding: clamp(20px, 5vw, 48px) !important;
  }
  
  /* Mejorar margin-bottom en headings */
  h1[style*="margin-bottom: 12px"],
  h2[style*="margin-bottom: 12px"],
  h3[style*="margin-bottom: 16px"] {
    margin-bottom: clamp(16px, 2vw, 28px) !important;
  }
  
  /* Mejorar spacing de párrafos */
  p[style*="margin-bottom: 36px"] {
    margin-bottom: clamp(24px, 3vw, 36px) !important;
  }
  
  /* Cambiar text-align center a left en mobile */
  div[style*="text-align: center"] {
    text-align: left !important;
  }
  
  /* Images - asegurar que escalen bien */
  div[style*="display: flex"] img,
  div[style*="display:flex"] img,
  div[style*="grid-template-columns"] img {
    max-width: 100% !important;
    height: auto !important;
    width: auto !important;
  }
  
  /* Lists en grillas - mejor spacing */
  div[style*="grid-template-columns"] ul,
  div[style*="grid-template-columns"] li {
    font-size: clamp(13px, 2vw, 16px) !important;
    line-height: 1.6 !important;
  }
  
  /* Spans y contenedores pequeños con background */
  span[style*="background:"],
  span[style*="background-color"],
  span[style*="padding:"] {
    padding: clamp(2px, 1vw, 8px) clamp(4px, 2vw, 12px) !important;
  }
  
  /* Mejorar elementos con border */
  div[style*="border:"],
  div[style*="border: 1px"] {
    border-width: 1px !important;
    padding: clamp(16px, 4vw, 32px) !important;
  }
  
  /* Mejorar border-left en párrafos de énfasis */
  p[style*="border-left:"] {
    border-left-width: 2px !important;
    border-left-width: 2px !important;
    padding-left: clamp(12px, 3vw, 20px) !important;
    margin-left: 0 !important;
    margin-bottom: clamp(20px, 3vw, 36px) !important;
  }
  
  /* Mejor width para imgs - evitar desbordamiento */
  img[width],
  img[height] {
    max-width: 100% !important;
    height: auto !important;
    width: 100% !important;
  }
  
  /* Mejorar blockquote/quotes */
  blockquote,
  blockquote[style] {
    padding: clamp(12px, 3vw, 24px) !important;
    margin: clamp(16px, 3vw, 24px) 0 !important;
  }

  
  /* Headings muy grandes → escalados con clamp */
  h1[style*="font-size: 64"] { font-size: clamp(36px, 5.5vw, 64px) !important; }
  h1[style*="font-size: 56"] { font-size: clamp(34px, 5.5vw, 56px) !important; }
  h1[style*="font-size: 48"] { font-size: clamp(36px, 6vw, 48px) !important; }
  
  h2[style*="font-size: 48"] { font-size: clamp(32px, 5.5vw, 48px) !important; }
  h2[style*="font-size: 40"] { font-size: clamp(30px, 5vw, 40px) !important; }
  h2[style*="font-size: 36"] { font-size: clamp(28px, 5vw, 36px) !important; }
  
  /* Párrafos pequeños */
  p[style*="font-size: 18"] { font-size: clamp(15px, 3.5vw, 18px) !important; }
  p[style*="font-size: 17"] { font-size: clamp(15px, 3.5vw, 17px) !important; }
  p[style*="font-size: 16"] { font-size: clamp(14px, 3vw, 16px) !important; }
  p[style*="font-size: 14"] { font-size: clamp(12px, 2.5vw, 14px) !important; }
  p[style*="font-size: 13"] { font-size: clamp(11px, 2vw, 13px) !important; }
  
  .eyebrow { font-size: clamp(11px, 1.5vw, 13px) !important; }
}

@media (max-width: 479px) {
  .problem-intro {
    margin-bottom: var(--s-8);
  }
  
  .section-header {
    margin-bottom: var(--s-8);
  }
  
  /* En pantallas muy pequeñas (320px - 479px), reducir gaps más agresivamente */
  div[style*="gap: 64px"],
  div[style*="gap: 48px"],
  div[style*="gap: 32px"] {
    gap: var(--s-4) !important;
  }
  
  /* Aside sections - mejorar padding en mobile vertical */
  aside[style*="padding: 48px"],
  aside[style*="padding: 80px"] {
    padding-top: clamp(32px, 6vw, 48px) !important;
    padding-bottom: clamp(32px, 6vw, 48px) !important;
    padding-left: clamp(16px, 4vw, 24px) !important;
    padding-right: clamp(16px, 4vw, 24px) !important;
  }
  
  section[style*="padding: 80px"] {
    padding-top: clamp(40px, 8vw, 80px) !important;
    padding-bottom: clamp(40px, 8vw, 80px) !important;
  }
}

/* Tablet: Restaurar 2 columnas donde sea apropiado */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Restaurar 2 columnas en tablet */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  .page-body {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-tablet) !important;
  }
  
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--gap-tablet) !important;
  }
  
  /* Auto + 1fr → restaurar a auto 1fr en tablet */
  div[style*="grid-template-columns:auto 1fr"],
  div[style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: auto 1fr !important;
    gap: var(--gap-tablet) !important;
  }
  
  /* 3-column en tablet → restaurar 3 columnas */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--gap-tablet) !important;
  }
  
  /* Cambiar text-align a center si lo tenía */
  div[style*="text-align: center"] {
    text-align: center !important;
  }
  
  /* Gaps fixos → responsive en tablet */
  div[style*="gap: 64px"] {
    gap: var(--gap-tablet) !important;
  }
  
  div[style*="gap: 48px"] {
    gap: var(--s-8) !important;
  }
  
  div[style*="gap: 32px"] {
    gap: var(--s-6) !important;
  }
}

/* Desktop: Mantener 3 columnas y gaps originales */
@media (min-width: 1024px) {
  /* Restaurar 2 columnas en desktop para page-body */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  .page-body {
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s-16) !important;
  }
  
  /* Restaurar auto 1fr en desktop */
  div[style*="grid-template-columns:auto 1fr"],
  div[style*="grid-template-columns: auto 1fr"] {
    grid-template-columns: auto 1fr !important;
    gap: var(--s-12) !important;
  }
  
  /* Restaurar 3 columnas en desktop */
  div[style*="grid-template-columns:repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3,1fr)"],
  div[style*="grid-template-columns: repeat(3"] {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--s-6) !important;
  }
  
  /* Restaurar text-align center en desktop */
  div[style*="text-align: center"] {
    text-align: center !important;
  }
  
  /* Restaurar flex justify-content */
  div[style*="display: flex"][style*="justify-content: center"] {
    justify-content: center !important;
  }
  
  div[style*="gap: 64px"] {
    gap: 64px !important;
  }
  
  div[style*="gap: 48px"] {
    gap: 48px !important;
  }
  
  div[style*="gap: 32px"] {
    gap: 32px !important;
  }
  
  /* Restaurar padding original */
  div[style*="padding: 32px"] {
    padding: 32px !important;
  }
  
  div[style*="padding: 48px"] {
    padding: 48px !important;
  }
}

/* ── Tipografía estándar global ── */
/* Base: Mejor escalado en mobile vertical */
h1 { font-size: clamp(36px, 5.5vw, 64px); }
h2 { font-size: clamp(28px, 4.5vw, 44px); }
h3 { font-size: clamp(22px, 3.5vw, 30px); }
h4 { font-size: clamp(18px, 2.8vw, 22px); }

p {
  font-size: clamp(14px, 2vw, 18px);
  line-height: 1.7;
}

/* Optimizado para tablet y mayores */
@media (min-width: 768px) {
  h1 { font-size: clamp(40px, 5.5vw, 64px); }
  h2 { font-size: clamp(30px, 4.5vw, 44px); }
  h3 { font-size: clamp(24px, 3.5vw, 30px); }
  h4 { font-size: clamp(20px, 2.8vw, 22px); }
  
  p { font-size: clamp(15px, 2vw, 18px); }
}

@media (max-width: 767px) {
  /* Corregir headings en elementos inline-styled */
  div[style*="grid-template-columns"] h1,
  div[style*="grid-template-columns"] h2,
  div[style*="grid-template-columns"] h3,
  div[style*="grid-template-columns"] h4 {
    font-size: clamp(var(--t-lg), 4vw, var(--t-2xl)) !important;
  }
  
  /* Headings muy grandes (48px+) → escalados */
  h1[style*="font-size: 48"] { font-size: clamp(28px, 5vw, 48px) !important; }
  h2[style*="font-size: 36"] { font-size: clamp(24px, 4.5vw, 36px) !important; }
  h2[style*="font-size: 40"] { font-size: clamp(26px, 5vw, 40px) !important; }
  
  /* Párrafos pequeños */
  p[style*="font-size: 17"] { font-size: clamp(14px, 3.5vw, 17px) !important; }
  p[style*="font-size: 16"] { font-size: clamp(14px, 3vw, 16px) !important; }
}

/* ── Images Responsive ── */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

.hero-profile-img,
.about-photo img {
  max-width: 100%;
  height: auto;
}

/* ── Links and text wrapping ── */
a {
  word-break: break-word;
}

.link-arrow {
  font-size: clamp(var(--t-xs), 1.8vw, var(--t-sm));
}

/* ── Details/Summary responsive ── */
summary {
  padding: clamp(var(--s-3), 2vw, var(--s-5)) 0;
  font-size: clamp(var(--t-sm), 1.8vw, var(--t-md));
  gap: clamp(var(--s-2), 2vw, var(--s-4));
}

.faq-answer {
  font-size: var(--t-sm);
  line-height: 1.7;
}

/* ── Footer Responsive ── */
.footer-inner {
  gap: clamp(var(--s-4), 3vw, var(--s-8));
}

.footer-links {
  gap: clamp(var(--s-4), 2vw, var(--s-6));
  font-size: clamp(var(--t-xs), 1.6vw, var(--t-sm));
}

.footer-copy {
  font-size: clamp(var(--t-xs), 1.4vw, 11px);
  margin-top: clamp(var(--s-4), 2vw, var(--s-8));
  padding-top: clamp(var(--s-4), 2vw, var(--s-8));
}

/* ── Eyebrow text responsive ── */
.eyebrow {
  font-size: clamp(11px, 1.5vw, var(--t-sm));
  letter-spacing: 0.08em;
}

/* ── Accessibility: Ensure touch targets are at least 44x44px ── */
button,
a.btn,
summary,
.consent-label input[type="checkbox"],
input[type="radio"],
input[type="checkbox"] {
  min-width: 44px;
  min-height: 44px;
}

/* ── Ensure no text cutoff ── */
body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  /* Asegurar que nada se desborde en mobile */
  div[style*="grid-template-columns"],
  div[style*="display:grid"],
  div[style*="display: grid"] {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Imágenes dentro de grillas → escalan bien */
  div[style*="grid-template-columns"] img,
  div[style*="display:grid"] img,
  div[style*="display: grid"] img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }
  
  /* Elementos con max-width → no se recorten */
  div[style*="max-width"] {
    margin-left: auto !important;
    margin-right: auto !important;
    padding-inline: var(--s-4) !important;
  }
}

/* ── Improve readability on very small screens ── */
@media (max-width: 360px) {
  html {
    font-size: 14px;
  }
  
  .container {
    padding-inline: var(--s-3);
  }
  
  .btn {
    padding: 10px 12px;
    font-size: var(--t-xs);
  }
  
  .nav-logo {
    font-size: var(--t-sm);
  }
}

/* ── Landscape orientation mobile ── */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding-block: var(--s-8);
  }
  
  .hero-grid {
    gap: var(--s-8);
    padding-block: var(--s-8);
  }
  
  .nav-link {
    padding: var(--s-2) 0;
  }
}

/* ── Offer Cards Responsive ── */
.offer-card--wide {
  grid-template-columns: 1fr !important;
  gap: var(--gap-mobile) !important;
}

@media (min-width: 768px) {
  .offer-card--wide {
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: var(--s-8) !important;
  }
}

@media (max-width: 767px) {
  .offer-card--wide > div {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
  }
  
  .offer-card--wide .btn,
  .offer-card--wide .link-arrow {
    width: 100%;
    text-align: center;
  }
  
  .offer-card--wide .offer-meta {
    flex-direction: column;
    gap: var(--s-3);
  }
}

/* ── Print styles ── */
@media print {
  .nav-hamburger,
  .mobile-cta,
  .nav-actions .btn-pwa,
  .btn {
    display: none !important;
  }
  
  body {
    font-size: 12pt;
    line-height: 1.6;
  }
  
  a {
    color: #000;
    text-decoration: none;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

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

/* ── High contrast mode ── */
@media (prefers-contrast: more) {
  body {
    border: 1px solid var(--ink);
  }
  
  .btn {
    border-width: 2px;
    font-weight: 700;
  }
  
  input,
  textarea {
    border-width: 2px;
  }
}

/* ── Light color scheme preference ── */
@media (prefers-color-scheme: light) {
  body {
    background: var(--paper);
    color: var(--ink);
  }
}