/* ============================================================
   miravalle — styles.css (production bundle)
   1) Brand tokens & utilities (was miravalle.css)
   2) Page-level resets & layout helpers (was inline <style> in index.html)
   ============================================================ */

/* ============================================================
   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: 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; }

/* 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;
}

/* ============================================================
   Page-level resets & layout helpers (from index.html <style>)
   ============================================================ */

/* Page-level resets and layout helpers */
    *, *::before, *::after { box-sizing: border-box; }
    html, body { margin: 0; padding: 0; }
    body.mv {
      font-family: var(--font-sans);
      color: var(--fg-1);
      background-color: var(--bg-page);
      background-image: radial-gradient(rgba(0, 71, 187, 0.09) 1.2px, transparent 1.2px);
      background-size: 22px 22px;
      background-position: 0 0;
      background-attachment: fixed;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      font-feature-settings: "ss01", "cv11";
    }
    a { color: inherit; text-decoration: none; }
    button { font-family: inherit; }
    img { display: block; max-width: 100%; }

    :root {
      --accent: var(--mv-blue-500);
      --accent-deep: var(--mv-blue-600);
      --accent-soft: var(--mv-blue-50);
      --accent-ink: var(--mv-navy-500);
      --section-pad: 80px;
    }
    .density-compact { --section-pad: 56px; }

    .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

    .pill {
      display: inline-flex; align-items: center; gap: 8px;
      padding: 6px 14px; border-radius: 999px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
    }
    .pill.danger { background: var(--mv-emergency); color: #fff; }
    .pill.outline-danger { background: #fff; color: var(--mv-emergency); border: 1.5px solid var(--mv-emergency); }
    .pill.cyan { background: var(--mv-cyan-500); color: #fff; }
    .pill.soft { background: var(--accent-soft); color: var(--accent-deep); }
    .pill.dark { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); }

    .btn {
      display: inline-flex; align-items: center; justify-content: center; gap: 8px;
      padding: 14px 24px; border-radius: 999px; border: 1.5px solid transparent;
      font-weight: 700; font-size: 15px; letter-spacing: -0.005em;
      cursor: pointer; transition: all .15s cubic-bezier(.2,.8,.2,1);
      white-space: nowrap; line-height: 1;
    }
    .btn.sm { padding: 9px 16px; font-size: 13px; }
    .btn.lg { padding: 16px 28px; font-size: 16px; }
    .btn-primary { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(0,71,187,.25); }
    .btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,71,187,.32); }
    .btn-white { background: #fff; color: var(--accent-deep); }
    .btn-white:hover { background: var(--mv-paper); }
    .btn-ghost { background: transparent; color: var(--accent); border-color: var(--mv-blue-200); }
    .btn-ghost:hover { background: var(--accent-soft); }
    .btn-ghost-on-dark { background: transparent; color: #fff; border-color: rgba(255,255,255,.3); }
    .btn-ghost-on-dark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.6); }
    .btn-danger { background: var(--mv-emergency); color: #fff; box-shadow: 0 2px 10px rgba(214,49,43,.3); }
    .btn-danger:hover { filter: brightness(.95); }

    /* Defeat `.mv a { color: var(--mv-blue-500) }` from miravalle.css */
    .mv a.btn { border-bottom-style: solid; border-bottom-width: 1.5px; }
    .mv a.btn:hover { border-bottom-color: inherit !important; }
    .mv a.btn-primary, .mv a.btn-primary:hover,
    .mv a.btn-danger,  .mv a.btn-danger:hover,
    .mv a.btn-ghost-on-dark, .mv a.btn-ghost-on-dark:hover { color: #fff; }
    .mv a.btn-white, .mv a.btn-white:hover { color: var(--accent-deep); }
    .mv a.btn-ghost { color: var(--accent); }
    .mv a.btn-ghost:hover { color: var(--accent-deep); }

    .eyebrow {
      font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
      text-transform: uppercase; color: var(--mv-cyan-500);
    }
    .eyebrow.dot::before {
      content: ""; display: inline-block; width: 6px; height: 6px;
      background: currentColor; border-radius: 999px; margin-right: 8px;
      vertical-align: 2px;
    }

    .h1-display {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(40px, 5.2vw, 72px);
      line-height: 1.02; letter-spacing: -0.028em;
      margin: 0;
    }
    .h2-section {
      font-family: var(--font-display); font-weight: 800;
      font-size: clamp(28px, 3.6vw, 48px);
      line-height: 1.08; letter-spacing: -0.024em;
      margin: 0;
      color: var(--mv-navy-500);
    }
    .lead-text {
      font-size: 18px; line-height: 1.55;
      color: var(--fg-2);
    }

    .surface {
      background: #fff; border: 1px solid var(--border-1);
      border-radius: 20px; box-shadow: var(--shadow-sm);
    }
    .hover-lift { transition: transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s cubic-bezier(.2,.8,.2,1); }
    .hover-lift:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

    @keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
    .marquee-track {
      display: flex; gap: 56px; align-items: center;
      white-space: nowrap; width: max-content;
      animation: marquee 38s linear infinite;
    }

    .smile-bg {
      position: absolute; pointer-events: none; user-select: none;
    }

    .wa-fab {
      position: fixed; right: 24px; bottom: 24px; z-index: 90;
      width: 60px; height: 60px; border-radius: 999px;
      background: #25D366; color: #fff;
      display: flex; align-items: center; justify-content: center;
      box-shadow: 0 14px 28px rgba(37, 211, 102, .35), 0 4px 10px rgba(0,0,0,.12);
      cursor: pointer; transition: transform .2s cubic-bezier(.2,.8,.2,1);
      border: 0;
    }
    .wa-fab:hover { transform: translateY(-2px) scale(1.04); }
    .wa-fab svg { width: 30px; height: 30px; fill: currentColor; }

    section.block { padding: var(--section-pad) 0; }

    .h-scroll { overflow-x: auto; scrollbar-width: thin; }

    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; }
      .hover-lift { transition: none; }
    }

    @media (max-width: 880px) {
      .hide-mobile { display: none !important; }
      section#empresas div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
      }
    }

    @media (max-width: 640px) {
      :root { --section-pad: 48px; }
      .container { padding: 0 16px !important; }

      /* Header: respect notch / dynamic island */
      header[style*="position: sticky"] {
        padding-top: max(env(safe-area-inset-top), 36px) !important;
        border-bottom: 0 !important;
      }
      header[style*="position: sticky"] > .container {
        height: auto !important;
        padding-top: 8px !important;
      }
      /* Hide the decorative top light line on the hero — mobile */
      section#inicio > div[aria-hidden="true"] {
        display: none !important;
      }

      /* Generic: collapse any inline grid to one column */
      section [style*="grid-template-columns"],
      section [style*="gridTemplateColumns"] {
        grid-template-columns: 1fr !important;
      }

      /* Hero — stack vertically, photo still visible but smaller */
      section#inicio > div {
        padding-top: 20px !important;
        padding-bottom: 48px !important;
        gap: 24px !important;
      }
      section#inicio h1.h1-display {
        font-size: 40px !important;
      }
      section#inicio p { font-size: 16px !important; }
      /* Hero eyebrow chip "Reynosa, Tamaulipas" — más chico */
      section#inicio div[style*="mv-cyan-300"][style*="border-radius: 999px"] {
        padding: 3px 8px !important;
        font-size: 9px !important;
        margin-bottom: 12px !important;
        letter-spacing: 0.06em !important;
        white-space: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
        border-width: 1px !important;
      }
      section#inicio div[style*="mv-cyan-300"][style*="border-radius: 999px"] > span[style*="cyan-400"] {
        width: 4px !important; height: 4px !important;
        flex: none !important;
      }

      /* HeroPhoto: resize and re-anchor cards */
      section#inicio > div > div:last-child {
        height: auto !important;
        min-height: 420px !important;
      }
      section#inicio > div > div:last-child > div:first-child {
        position: relative !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        width: 100% !important;
        height: 280px !important;
        border-radius: 18px !important;
      }
      /* Both floating cards on mobile — stack BELOW the photo, full width */
      section#inicio > div > div:last-child > a {
        position: relative !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        min-width: 0 !important; width: 100% !important;
        padding: 12px 14px !important;
        margin-top: 10px !important;
        border-radius: 14px !important;
        box-sizing: border-box;
        animation: none !important;
      }
      /* Pagination dots: sit between photo and cards */
      section#inicio > div > div:last-child > div:last-of-type {
        position: relative !important;
        top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
        margin-top: 12px !important;
        justify-content: center !important;
      }

      /* Trust strip — todos los items en una columna, alineados al inicio */
      div[style*="border-bottom: 1px solid var(--border-1)"][style*="padding: 18px 0"] > .container {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
      }
      div[style*="border-bottom: 1px solid var(--border-1)"][style*="padding: 18px 0"] > .container > div {
        width: 100% !important;
        font-size: 13px !important;
      }

      section .container > div[style*="grid-template-columns: 1fr auto"] {
        grid-template-columns: 1fr !important;
      }

      section .container .btn.btn-ghost.hide-mobile,
      section .container > div > button.btn-ghost { display: none; }

      section [style*="repeat(4, 1fr)"][style*="1.2fr"],
      section .container > div[style*="1.2fr repeat(4, 1fr)"] {
        grid-template-columns: 1fr 1fr !important;
      }

      section#empresas div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: 1fr !important;
      }
      footer .container > div[style*="grid-template-columns: auto 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        text-align: center;
      }
      footer .container > div[style*="grid-template-columns: auto 1fr"] img {
        margin-left: auto; margin-right: auto;
        height: 96px !important;
      }
      footer .container > div[style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 32px !important;
      }

      /* Cotizador teaser button (banner with gradient) — stack vertically on mobile */
      button[style*="linear-gradient"][style*="padding: 24px"] {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
        padding: 20px !important;
      }
      button[style*="linear-gradient"][style*="padding: 24px"] > span:last-child {
        align-self: stretch !important;
        justify-content: center !important;
      }
      /* Reduce title font inside the teaser */
      button[style*="linear-gradient"][style*="padding: 24px"] > div > div > div:nth-child(2) {
        font-size: 18px !important;
      }
      /* Smile watermark — smaller / dimmer on mobile */
      button[style*="linear-gradient"][style*="padding: 24px"] > div:first-child {
        opacity: 0.10 !important;
      }

      .btn.lg { padding: 12px 20px !important; font-size: 14px !important; }
      .btn { padding: 12px 18px !important; font-size: 13px !important; }

      section [style*="1.4fr auto"] {
        grid-template-columns: 1fr !important;
      }

      .wa-fab { width: 52px !important; height: 52px !important; right: 16px !important; bottom: 16px !important; }
      .wa-fab svg { width: 24px !important; height: 24px !important; }

      /* Cotizador (inline + modal) — collapse internal grids and pad less */
      section#cotizador .container,
      [class*="cotFadeIn"] .container {
        padding: 0 12px !important;
      }
      [class*="cotFadeIn"] > div {
        border-radius: 12px !important;
        max-height: 92vh !important;
      }
      /* Cotizador inner grids: 2-col grids collapse to 1-col on mobile */
      section#cotizador div[style*="grid-template-columns: 1fr 1fr"],
      [class*="cotFadeIn"] div[style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
      }
      /* But keep 3-method payment chips as 3 columns even on mobile */
      [class*="cotFadeIn"] div[style*="grid-template-columns: repeat(3, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
      }
      /* Touch-friendly form fields */
      section#cotizador input,
      section#cotizador select,
      [class*="cotFadeIn"] input,
      [class*="cotFadeIn"] select {
        min-height: 44px !important;
        font-size: 16px !important; /* prevent iOS zoom on focus */
      }

      [class*="cotFadeIn"] > div { border-radius: 12px !important; }
    }

    html { scroll-behavior: smooth; }
    section[id], footer[id] { scroll-margin-top: 96px; }