/* Footer styles — extracted from step_1.html so the footer renders
   correctly on every page, including the no-quotation notice where
   step_1.html (and its inline footer CSS) is not included. Kept in sync
   with the copy still inline in step_1.html. */

/* Hide the desktop footer on mobile (the mobile-footer takes over).
   This lives in a shared media block in step_1.html; replicated here so
   the swap works when step_1.html is absent. */
@media (max-width: 1200px) { .site-footer { display: none !important; } }

  /* ============================================================
     Site footer — three-row dark-blue layout:
       1) brand logo | Google rating | description blurb
       2) SSN registry | attention phone | organismo | SSN logo
       3) copyright centered
     ============================================================ */
  .site-footer {
    /* Solid deep-navy matching the design (no gradient). */
    background: #001a4d;
    color: #ffffff;
    font-family: 'Product Sans', system-ui, -apple-system, sans-serif;
    z-index: 999;
    border-top: 1px solid rgba(78, 143, 255, 0.18);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);
    /* `margin-top: auto` (combined with body's flex-direction: column +
       min-height: 100vh) pushes the footer to the bottom of the viewport
       on short pages — no empty space below it. On tall pages, the auto
       resolves to 0 and the footer simply flows after the content. */
    margin-top: auto;
    /* Escape body's `padding: 24px` (desktop) / `12px` (mobile) so the
       footer's dark color extends edge-to-edge horizontally and touches
       the very bottom of the viewport. */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: -24px;        /* desktop body padding-bottom */
    position: relative;
    bottom: auto;
  }
  @media (max-width: 1200px) {
    .site-footer {
      /* Mobile: don't pin the footer to the viewport bottom. Overrides the
         generic `footer { position: sticky; bottom: 0; margin-top: auto; }`
         in styles.css so it flows right after the content instead. */
      position: static;
      bottom: auto;
      margin-top: auto;
      /* Still span the full screen width: bleed across body's 12px mobile
         padding (set in the max-width:1200px `body { padding: 12px }` rule). */
      width: auto;
      margin-left: -12px;
      margin-right: -12px;
      margin-bottom: -12px;
    }
  }

  /* Inner inset matches the header logo's effective left position (~82px)
     so the divider lines + content land under the header's horizontal frame. */
  .site-footer__inner {
    max-width: none;
    margin: 0;
    padding: 26px clamp(40px, 6vw, 96px) 18px;
  }

  /* TOP ROW — 3 equal columns put the rating at the geometric center
     regardless of sibling widths. justify-content: space-between can't
     guarantee that on a flex row. */
  .site-footer__row--top {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center;
    gap: clamp(20px, 3vw, 48px);
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  }
  .site-footer__brand     { justify-self: start;  }
  .site-footer__rating    { justify-self: center; }
  .site-footer__description { justify-self: end; }

  /* MIDDLE ROW — split into two halves at the horizontal center so
     "Organismo de control..." starts at 50% width. Within the right half,
     the SSN logo is centered in the space remaining after "Organismo..." */
  .site-footer__row--info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    font-size: 15px;
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: 0.2px;
  }
  .info-group {
    display: grid;
    align-items: center;
  }
  /* Left half: item 1 at far left, item 2 centered in the remaining space
     between item 1 and the center divider (mirrors the right half's pattern). */
  .info-group--left {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
  }
  .info-group--left > :first-child { justify-self: start; }
  .info-group--left > :last-child  { justify-self: center; }
  /* Right half: "Organismo..." at start of half (~50% viewport), SSN
     logo centered in the rest of the half (the 1fr column). */
  .info-group--right {
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
  }
  .info-group--right > .footer-info-item { justify-self: start; }
  .info-group--right > .footer-ssn-logo { justify-self: center; }
  .site-footer__row--info a {
    color: inherit;
    text-decoration: none;
  }
  .site-footer__row--info a:hover { text-decoration: underline; }

  /* Phone CTA — base styling. On desktop it reads as an inline bold number
     beside the label; on mobile (overridden below) it becomes a pill button
     sized for thumbs. The icon is inline so no extra request. */
  .footer-tel {
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .footer-tel:hover,
  .footer-tel:focus-visible { text-decoration: underline; }
  .footer-tel__icon { flex: 0 0 auto; opacity: 0.85; }
  /* Label sits on the same line as the number on desktop. */
  .footer-info-item--phone { display: inline-flex; align-items: center; gap: 8px; }
  .footer-info-label { color: inherit; }
  .footer-info-value { color: inherit; }
  .footer-info-link  { color: inherit; text-decoration: none; }
  .footer-info-link:hover { text-decoration: underline; }

  /* COPYRIGHT — centered, bold, smaller. © renders bigger than the text
     but pinned to the same line height (no row growth) and vertically
     centered on the x-height. */
  .site-footer__row--copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    padding: 18px 0 6px;
    color: #ffffff;
    letter-spacing: 0.3px;
    font-size: clamp(13px, 1.05vw, 15px);
    font-weight: 700;
    line-height: 1;
  }
  .copyright-symbol {
    font-size: 1.7em;       /* relative to row's font-size → bigger glyph */
    font-weight: inherit;
    line-height: 1;          /* don't add row height */
    vertical-align: middle;
    margin-right: 2px;
  }
  .copyright-text {
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;
  }

  /* --- Top row: brand */
  .site-footer__brand {
    flex: 0 0 auto;
  }
  .site-footer__logo {
    width: clamp(160px, 16vw, 240px);
    height: auto;
    display: block;
  }

  /* --- Top row: Google rating (centered in its column). */
  .site-footer__rating {
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .google-logo {
    font-family: 'Product Sans', 'Arial', sans-serif;
    font-weight: 500;
    font-size: clamp(28px, 3vw, 40px);
    letter-spacing: -0.5px;
    line-height: 1;
  }
  .rating-value {
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 500;
    color: #ffffff;
    line-height: 1;
  }
  .rating-stars {
    display: inline-flex;
    gap: 2px;
  }
  .rating-stars svg {
    width: clamp(20px, 2.2vw, 28px);
    height: clamp(20px, 2.2vw, 28px);
  }

  /* --- Top row: description (text wraps at the <br/> in main.html) */
  .site-footer__description {
    margin: 0;
    font-size: clamp(17px, 1.45vw, 20px);
    line-height: 1.5;
    color: #ffffff;
    text-align: left;
    max-width: none;
  }

  /* --- Middle row: SSN block (single official-logo image, no extra text) */
  .footer-info-item {
    font-size: 15px;
    line-height: 1.45;
  }
  .footer-ssn-logo {
    height: clamp(38px, 3.4vw, 50px);
    width: auto;
    display: block;
    justify-self: end;
  }
  /* ============================================================
     MOBILE FOOTER — dedicated stacked layout for ≤1200px viewports.
     Hidden by default on desktop; shown by the mobile media query
     below. The desktop .site-footer is hidden in the same query so
     only one footer renders per breakpoint.

     Markup namespace: `.mobile-footer` + `.mf-*`. Independent of
     `.site-footer` / `.site-footer__*` to prevent any rule bleed.
     ============================================================ */
  .mobile-footer { display: none; }

  @media (max-width: 1200px) {
    .mobile-footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;

      /* Theming — matches the desktop footer's deep-navy band. */
      background: #001a4d;
      color: #ffffff;
      font-family: 'Product Sans', system-ui, -apple-system, sans-serif;
      border-top: 1px solid rgba(78, 143, 255, 0.18);
      box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.16);

      /* Sits at the end of the document, in normal flow (NOT sticky). The
         negative side+bottom margins bleed across the body's 12px mobile
         padding so the dark band spans edge-to-edge. */
      position: static;
      margin: 24px -12px -12px;
      padding: 18px 14px calc(14px + env(safe-area-inset-bottom, 0px));
      width: auto;
      max-width: 100vw;
      box-sizing: border-box;
    }

    /* Brand logo. */
    .mf-logo {
      width: 140px;
      height: auto;
      display: block;
    }

    /* Google rating block — single row, never wraps. */
    .mf-rating {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      line-height: 1;
    }
    .mf-google {
      font-family: 'Product Sans', 'Arial', sans-serif;
      font-weight: 500;
      font-size: 22px;
      letter-spacing: -0.5px;
    }
    .mf-rating-value { font-size: 18px; font-weight: 500; }
    .mf-rating-stars { display: inline-flex; gap: 2px; align-items: center; }
    .mf-rating-stars svg { width: 16px; height: 16px; }

    /* Thin horizontal dividers between segments. */
    .mf-divider {
      width: 100%;
      height: 1px;
      border: 0;
      background: rgba(255, 255, 255, 0.18);
      margin: 4px 0;
    }

    /* Each info item is a label-on-top, value-below pair so long composite
       strings split into two short non-wrapping lines. */
    .mf-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      white-space: nowrap;
      text-align: center;
      line-height: 1.25;
    }
    .mf-label {
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.6px;
      text-transform: uppercase;
      opacity: 0.7;
    }
    .mf-value {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.2px;
      color: inherit;
    }
    .mf-link {
      text-decoration: none;
    }
    .mf-link:hover,
    .mf-link:focus-visible { text-decoration: underline; }

    /* "SSN logo | N° de inscripción" — side-by-side pair on one row. */
    .mf-pair {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: 18px;
    }
    .mf-ssn {
      height: 38px;
      width: auto;
      display: block;
      flex: 0 0 auto;
    }

    /* Tap-to-call pill — 44px min-height per Apple HIG. */
    .mf-tel {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 10px 16px;
      min-height: 44px;
      border: 1px solid rgba(255, 255, 255, 0.34);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.06);
      color: inherit;
      text-decoration: none;
      font-weight: 600;
      font-size: 14px;
      letter-spacing: 0.2px;
      white-space: nowrap;
      transition: background 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
    }
    .mf-tel:hover,
    .mf-tel:focus-visible {
      background: rgba(255, 255, 255, 0.14);
      border-color: rgba(255, 255, 255, 0.55);
      text-decoration: none;
    }
    .mf-tel:active { transform: translateY(1px); }
    .mf-tel svg { width: 16px; height: 16px; opacity: 0.95; flex: 0 0 auto; }

    /* Copyright — one line, scales down to fit 320px (iPhone SE 1st gen). */
    .mf-copyright {
      font-size: clamp(10px, 3vw, 12px);
      letter-spacing: 0;
      white-space: nowrap;
      font-weight: 700;
      text-align: center;
      line-height: 1;
      padding-top: 2px;
    }
  }