/* ============================================================
   Miravalle — Colors & Type
   Clínica / Laboratorio · Reynosa, Tamaulipas
   ============================================================ */

/* Fonts: Montserrat oficial — cargada desde Google Fonts vía <link> en index.html.
   (Se evita el archivo variable local porque el sandbox no aplica bien el eje
   de peso, lo que provocaba que el navegador sintetizara bolds engordando la
   instancia Thin — el resultado se veía deforme.) */

:root {
  /* ---------------------------------------------------------
     BRAND PALETTE — derived from the official Miravalle logo
     and sub-brand variants (Juárez, Rio Mante, Laboratorios).
     --------------------------------------------------------- */

  /* Primary blue — the "miravalle" wordmark & icon blue. */
  --mv-blue-50:  #e8f0fb;
  --mv-blue-100: #c7daf4;
  --mv-blue-200: #8fb4e8;
  --mv-blue-300: #568edc;
  --mv-blue-400: #1f63cf;
  --mv-blue-500: #0047bb;   /* ◆ primary — matches main logo */
  --mv-blue-600: #003da1;
  --mv-blue-700: #003285;
  --mv-blue-800: #00276a;
  --mv-blue-900: #001a4a;

  /* Deep navy — used in the sub-brand logos (Juárez/Rio Mante)
     for the "miravalle" wordmark next to the cyan locality. */
  --mv-navy-500: #003d8f;
  --mv-navy-600: #002e6e;
  --mv-navy-700: #001f4d;

  /* Secondary cyan — sub-brand locality color (juárez, rio mante)
     also used for "laboratorios clínicos" subtitle. */
  --mv-cyan-50:  #e6f5fb;
  --mv-cyan-100: #bfe4f3;
  --mv-cyan-200: #8fd0ea;
  --mv-cyan-300: #5fbce0;
  --mv-cyan-400: #34aed8;
  --mv-cyan-500: #20a5de;   /* ◆ secondary — locality accent */
  --mv-cyan-600: #1d8cbd;
  --mv-cyan-700: #186f95;

  /* Acento mint / turquesa — tercer color de marca, fresco y sanitario */
  --mv-mint-50:  #e6f7f3;
  --mv-mint-100: #c3ebe2;
  --mv-mint-200: #92d9c6;
  --mv-mint-300: #5cc4a7;
  --mv-mint-400: #2fb089;
  --mv-mint-500: #159b73;   /* ◆ tercer color */
  --mv-mint-600: #0f7e5d;
  --mv-mint-700: #0a6148;

  /* Neutrals */
  --mv-white:     #ffffff;
  --mv-paper:     #fafbfd;  /* off-white page */
  --mv-mist:      #f2f5f9;  /* subtle section bg */
  --mv-fog:       #e6eaf0;  /* hairline / divider on dark */
  --mv-stone-100: #d9dee6;
  --mv-stone-200: #b8c0cc;
  --mv-stone-300: #8a94a3;
  --mv-stone-400: #5c6675;
  --mv-stone-500: #3b4452;
  --mv-ink:       #141a24;  /* body text */
  --mv-black:     #06090f;

  /* Semantic — clinical context (urgencias, success, warning).
     Kept restrained; the brand wants trust, not alarm. */
  --mv-emergency: #d6312b;   /* urgencias / 24h red */
  --mv-emergency-soft: #fbe7e6;
  --mv-success:   #198754;
  --mv-success-soft: #e4f4ec;
  --mv-warning:   #d18700;
  --mv-warning-soft: #fbf1dc;
  --mv-info:      var(--mv-cyan-500);
  --mv-info-soft: var(--mv-cyan-50);

  /* ---------------------------------------------------------
     SEMANTIC TOKENS
     --------------------------------------------------------- */
  --bg-page:    var(--mv-paper);
  --bg-surface: var(--mv-white);
  --bg-subtle:  var(--mv-mist);
  --bg-brand:   var(--mv-blue-500);
  --bg-brand-deep: var(--mv-navy-500);

  --fg-1: var(--mv-ink);         /* primary text */
  --fg-2: var(--mv-stone-500);   /* secondary text */
  --fg-3: var(--mv-stone-400);   /* muted / meta */
  --fg-4: var(--mv-stone-300);   /* placeholder */
  --fg-on-brand: var(--mv-white);
  --fg-brand: var(--mv-blue-500);
  --fg-accent: var(--mv-cyan-500);

  --border-1: var(--mv-stone-100);
  --border-2: var(--mv-fog);
  --border-strong: var(--mv-stone-200);

  /* ---------------------------------------------------------
     TYPOGRAPHY
     --------------------------------------------------------- */
  --font-sans: 'Montserrat', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --font-display: 'Montserrat', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale — slightly tighter than default for clinical density */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-48: 3rem;
  --fs-56: 3.5rem;
  --fs-64: 4rem;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-heavy:    800;
  --fw-black:    900;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  /* The logo wordmark is lowercase + heavy + slightly tight;
     we mirror that on display headings. */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;

  /* ---------------------------------------------------------
     SPACING — 4px base grid
     --------------------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------------------------------------------------------
     RADII — the logo "smile" is very round; UI carries rounded
     but not pillish corners (except CTAs which can be pills).
     --------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  /* ---------------------------------------------------------
     SHADOWS — low, soft, tinted with brand blue.
     --------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(0, 40, 110, 0.06);
  --shadow-sm: 0 2px 6px rgba(0, 40, 110, 0.06), 0 1px 2px rgba(0, 40, 110, 0.04);
  --shadow-md: 0 8px 20px rgba(0, 40, 110, 0.08), 0 2px 6px rgba(0, 40, 110, 0.05);
  --shadow-lg: 0 18px 40px rgba(0, 40, 110, 0.12), 0 4px 10px rgba(0, 40, 110, 0.06);
  --shadow-focus: 0 0 0 3px rgba(0, 71, 187, 0.25);
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Usage: add class 'mv' to a root element to get the defaults.
   ============================================================ */
.mv {
  font-family: var(--font-sans);
  color: var(--fg-1);
  background: var(--bg-page);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mv h1, .mv .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-heavy);
  font-size: clamp(var(--fs-32), 4vw, var(--fs-56));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--mv-blue-500);
  margin: 0 0 var(--space-4);
}
.mv h2, .mv .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-24), 3vw, var(--fs-40));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--mv-navy-500);
  margin: 0 0 var(--space-3);
}
.mv h3, .mv .h3 {
  font-weight: var(--fw-bold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}
.mv h4, .mv .h4 {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-18);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: 0 0 var(--space-2);
}

.mv p, .mv .p {
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

.mv .eyebrow {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--mv-cyan-500);
}

.mv .lead {
  font-size: var(--fs-20);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  font-weight: var(--fw-regular);
}

.mv .meta {
  font-size: var(--fs-13);
  color: var(--fg-3);
  letter-spacing: var(--tracking-wide);
}

.mv code, .mv .mono {
  font-family: var(--font-mono);
  font-size: 0.95em;
  background: var(--bg-subtle);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

.mv a {
  color: var(--mv-blue-500);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s ease, color .15s ease;
}
.mv a:hover { color: var(--mv-blue-600); border-bottom-color: currentColor; }

/* Los .btn son pills con borde en los 4 lados. La regla `.mv a` de arriba
   fuerza un border-bottom transparente que, por especificidad (0,1,1),
   le gana al border-color de las variantes ghost y borra su borde inferior.
   Restauramos el color por variante con especificidad (0,2,1). */
.mv a.btn { border-bottom-style: solid; border-bottom-width: 1.5px; }
.mv a.btn-ghost { border-color: var(--mv-blue-200); }
.mv a.btn-ghost-on-dark { border-color: rgba(255,255,255,.3); }
.mv a.btn-ghost-on-dark:hover { border-color: rgba(255,255,255,.6); }

/* The "24 HORAS" badge pattern seen on business cards */
.mv .badge-24h {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 4px 10px;
  background: var(--mv-emergency);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-12);
  letter-spacing: var(--tracking-caps);
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

/* ============================================================
   Mobile responsive — reglas compartidas por todas las páginas
   que cargan miravalle.css (buzon, trabaja, encuesta, resultados).
   El index.html añade reglas adicionales inline para sus secciones
   únicas (hero, servicios, cotizador, etc.).
   ============================================================ */
@media (max-width: 640px) {
  /* Header — más compacto en móvil. Antes se veía un espacio en blanco
     extra arriba del logo porque la altura fija (88px) era demasiada
     para el logo pequeño centrado verticalmente. */
  .mv-header-inner {
    height: 64px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .mv-header-logo {
    height: 44px !important;
    width: 44px !important;
  }
  /* Header WhatsApp button — solo icono en móvil para no saturar */
  .mv-header-wa { padding: 8px 12px !important; gap: 0 !important; }
  .mv-header-wa-text { display: none !important; }
  /* Hamburger button — visible solo en móvil */
  .mv-header-burger { display: inline-flex !important; }
  /* Drawer del menú móvil */
  .mv-mobile-menu { display: block !important; }
  .mv-mobile-menu[aria-hidden="true"] { pointer-events: none; }
  .mv-mobile-menu-backdrop {
    position: fixed; inset: 0; z-index: 49;
    background: rgba(11, 30, 65, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity .2s cubic-bezier(.2,.8,.2,1);
  }
  .mv-mobile-menu[data-open="true"] .mv-mobile-menu-backdrop { opacity: 1; }
  .mv-mobile-menu-sheet {
    position: fixed; top: 64px; left: 0; right: 0; z-index: 50;
    background: #fff;
    border-bottom: 1px solid var(--border-1);
    border-radius: 0 0 18px 18px;
    padding: 14px 16px 20px;
    box-shadow: 0 24px 40px rgba(11, 30, 65, .18);
    transform: translateY(-12px);
    opacity: 0;
    transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .18s;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .mv-mobile-menu[data-open="true"] .mv-mobile-menu-sheet {
    transform: translateY(0);
    opacity: 1;
  }

  /* Footer — 3 sucursales apiladas en una columna */
  footer .container > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  /* Footer — fila legal (copyright + enlaces) apilada */
  footer .container > div[style*="justify-content: space-between"][style*="flex-wrap"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  footer .container > div[style*="justify-content: space-between"][style*="flex-wrap"] > div:last-child {
    flex-wrap: wrap !important;
    gap: 14px !important;
  }

  /* Buzón — card "¿Nos acabas de visitar?" se apila en móvil para que
     el texto del medio no se aplaste entre el ícono y el pill amarillo. */
  section#buzon a[href="encuesta.html"] {
    flex-direction: column !important;
    text-align: center !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 20px !important;
  }
  section#buzon a[href="encuesta.html"] > div {
    flex: none !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* Conecta con nosotros — 3 cards lado a lado, responsivas */
.conecta-grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) {
  .conecta-grid { grid-template-columns: 1fr; }
}