/* ============================================================
   Puente de Unión — shared site styles
   Brand-aligned per official Brand Guide.
   Palette: Deep Navy #004b87 · Cuban Red #da291c · Sunset Orange #F58A1F
            Sunset Gold #F4C14D · Palm Green #1D6B4F · Ivory #F7F0E2
   Type: Cormorant Garamond (headlines) · Montserrat (body)
   One source of truth. Edit here, every page updates on rebuild.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
  /* Official brand palette (still available) */
  --navy: #004b87;
  --red: #da291c;
  --green: #1d6b4f;

  /* Warm golden-hour working palette */
  --coral: #da291c; /* deep warm accent (primary CTA, accents) */
  --coral-soft: #f58a1f;
  --gold: #f4c14d; /* warm gold */
  --gold-bright: #f4c14d;
  --warm-ink: #004b87; /* warm near-black — headings */
  --warm-body: #316c99; /* warm grey-brown — body text */
  --cream: #f7f0e2; /* airy base */
  --cream-2: #f0ebdf; /* deeper cream for alternating sections */

  /* Semantic mappings (keep existing class names working) */
  --ink: #004b87; /* primary text = warm ink */
  --ink-soft: #316c99; /* body text = warm body */
  --paper: #f7f0e2; /* airy cream background */
  --paper-deep: #f0ebdf;
  --seal: #da291c; /* small accent text = coral */
  --seal-bright: #f4c14d; /* bright gold on dark bg */
  --rule: #e9e5dc; /* warm hairline */
  --ocean: #da291c; /* links = coral */
  --white: #ffffff;
  --shadow: rgba(120, 80, 40, 0.22);
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  font-family:
    'Montserrat',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  font-weight: 400;
}
.wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
}
a {
  color: var(--ocean);
}
img {
  max-width: 100%;
  display: block;
}

/* Headlines use Cormorant Garamond per brand guide */
h1,
h2,
h3,
.brand .bname,
.fmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ---------------- HEADER + NAV (shared) ---------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(140%) blur(2px);
}
/* The header is allowed to be wider than the 1080px reading column.
   Measured: brand 235 + menu 826 + language/cart 144 + gaps = 1293px of content in a 1080px
   wrapper. Flex items do not shrink below their own content width, so the menu overflowed and
   shoved the language toggle and cart clean outside the wrapper — visibly clipped at the window
   edge. A header does not have to match the body's measure; the text column still does. */
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 14px;
  max-width: 1240px;
}
/* Without this the menu is min-width:auto and refuses to compress at all. */
.nav-menu {
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: inherit;
  flex: none;
}
.brand-badge {
  width: 44px;
  height: 44px;
  object-fit: contain;
  flex: none;
}
.brand .seal {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--seal);
  display: grid;
  place-items: center;
  color: var(--navy);
  font-size: 14px;
  font-weight: 700;
  position: relative;
  flex: none;
}
.brand .seal::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dotted var(--seal);
  opacity: 0.6;
}
.brand .bname {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  font-size: 23px;
  letter-spacing: 0.2px;
  line-height: 1;
  color: var(--warm-ink);
}
.brand .bname small {
  display: block;
  font-size: 9.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  margin-top: 3px;
}

/* nav menu */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Montserrat', sans-serif;
  list-style: none;
}
.nav-menu > li {
  position: relative;
}
.nav-menu > li > a {
  display: block;
  /* 14px horizontal here cost 48px across six items and was part of why the nav could not fit.
     10px keeps a comfortable tap target while buying that width back. */
  padding: 10px 10px;
  text-decoration: none;
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.2px;
  border-radius: 3px;
  transition: 0.18s;
  white-space: nowrap;
}
.nav-menu > li > a:hover {
  background: var(--paper-deep);
  color: var(--ink);
}
.nav-menu > li > a.has-caret::after {
  content: '▾';
  font-size: 10px;
  margin-left: 6px;
  color: var(--navy);
  vertical-align: middle;
}
.nav-menu > li > a[aria-current='page'] {
  color: var(--navy);
  border-bottom: 2px solid var(--seal);
  border-radius: 0;
}

/* dropdown */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 248px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  box-shadow: 0 18px 40px -20px var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: 0.18s;
  list-style: none;
}
.nav-menu > li:hover .dropdown,
.nav-menu > li:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown li a {
  display: block;
  padding: 10px 12px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 14px;
  border-radius: 3px;
  transition: 0.15s;
  line-height: 1.3;
}
.dropdown li a:hover {
  background: var(--paper);
  color: var(--ink);
}
.dropdown li a small {
  display: block;
  font-size: 11.5px;
  color: var(--navy);
  margin-top: 2px;
}

/* lang toggle + mobile */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
}
.langtoggle {
  display: flex;
  gap: 2px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
}
.langtoggle button,
.langtoggle a {
  background: transparent;
  border: 0;
  padding: 7px 12px;
  cursor: pointer;
  color: var(--ink-soft);
  font-weight: 600;
  letter-spacing: 0.5px;
  transition: 0.2s;
  text-decoration: none;
  display: inline-block;
}
.langtoggle button.active,
.langtoggle a.active {
  background: var(--ink);
  color: var(--paper);
}
/* Application status tracker */
.track-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
  margin: 8px 0 20px;
}
.track-form .btn {
  align-self: flex-start;
}
.track-result {
  margin: 6px 0 8px;
  padding: 0;
}
.track-result.ok {
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--cream-2);
}
.track-result.err,
.track-result.warn {
  padding: 12px 14px;
  border-radius: 6px;
}
.track-result.err {
  color: #8a1f12;
  background: #fbe9e7;
}
.track-result.warn {
  color: #6b4e00;
  background: #fdf4d7;
}
.track-result .track-status {
  font-size: 1.05rem;
}
.track-result .track-order {
  color: var(--ink-soft);
  font-size: 0.85rem;
}
.track-help {
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.menu-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 3px;
  width: 42px;
  height: 38px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.menu-btn span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--ink);
}

/* The desktop nav needs roughly 1220px of room once brand, six items, language toggle and cart are
   counted. Below that it cannot fit at any padding worth having, so the hamburger takes over —
   raised from 860px, where the nav had been overflowing its wrapper silently for every viewport
   between there and ~1290px. Shortening two labels would let the desktop nav survive lower. */
@media (max-width: 1220px) {
  .menu-btn {
    display: flex;
  }
  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px 16px 16px;
    gap: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    box-shadow: 0 18px 30px -20px var(--shadow);
  }
  .nav-menu.open {
    max-height: 80vh;
    overflow: auto;
  }
  .nav-menu > li > a {
    padding: 13px 8px;
    border-bottom: 1px solid var(--rule);
  }
  .dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px 14px;
    min-width: 0;
    background: transparent;
  }
  .dropdown li a {
    padding: 9px 8px;
  }
}

/* ---------------- shared section scaffold ---------------- */
.eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: '';
  width: 40px;
  height: 2px;
  background: var(--gold);
}
.sec {
  padding: 72px 0;
  position: relative;
  overflow: hidden;
}
.sec > .wrap {
  position: relative;
  z-index: 2;
}
/* full-logo watermark — present but soft, behind content */
.sec .wm {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.07;
  width: min(560px, 66vw);
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
}
.sec .wm.left {
  right: auto;
  left: -10%;
}
.sec-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 18px;
  display: inline-block;
  position: relative;
  padding-bottom: 14px;
}
.sec-label::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--gold);
}
h1 {
  font-size: clamp(40px, 6.2vw, 72px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.8px;
  margin-bottom: 22px;
  color: var(--warm-ink);
}
h1 .accent {
  color: var(--coral);
  font-style: italic;
}
h2 {
  font-size: clamp(30px, 4.2vw, 46px);
  line-height: 1.08;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--warm-ink);
}
h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  line-height: 1.15;
  color: var(--warm-ink);
}
.lede {
  font-size: clamp(16px, 2.2vw, 19px);
  max-width: 60ch;
  color: var(--warm-body);
  margin-bottom: 30px;
  font-weight: 400;
  line-height: 1.65;
}
.prose p {
  font-size: 16px;
  color: var(--warm-body);
  max-width: 64ch;
  margin-bottom: 16px;
  font-weight: 400;
  line-height: 1.7;
}
.prose strong {
  color: var(--warm-ink);
  font-weight: 600;
}

/* buttons */
.btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 15px 32px;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  background: var(--coral);
  color: #fff;
  transition: 0.25s;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 10px 26px -10px rgba(218, 41, 28, 0.5);
}
.btn:hover {
  background: #aa2016;
  transform: translateY(-2px);
}
.btn.ghost {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid #e3cfae;
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--white);
  border-color: var(--coral);
  color: var(--navy);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* card grid — soft floating cards (no more hard 1px-gap boxes) */
.cardgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 22px;
  background: transparent;
  border: 0;
  margin-top: 8px;
  position: relative;
  z-index: 2;
}
.cardgrid .card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(3px);
  padding: 34px 30px;
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 22px;
  box-shadow: 0 14px 44px -28px rgba(120, 80, 40, 0.35);
  border: 1px solid rgba(234, 223, 204, 0.7);
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s;
  position: relative;
  overflow: hidden;
}
.cardgrid a.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px -28px rgba(120, 80, 40, 0.45);
}
.cardgrid a.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0;
  transition: opacity 0.35s;
}
.cardgrid a.card:hover::after {
  opacity: 1;
}
.cardgrid .card .tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--navy);
  font-weight: 600;
  margin-bottom: 14px;
  display: block;
}
.cardgrid .card h3 {
  font-size: 23px;
  margin-bottom: 10px;
}
.cardgrid .card p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14.5px;
  color: var(--warm-body);
  line-height: 1.62;
}
.cardgrid .card .arrow {
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  font-weight: 600;
  font-size: 13px;
  margin-top: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.25s;
}
.cardgrid a.card:hover .arrow {
  gap: 11px;
}

/* breadcrumb */
.crumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--ink-soft);
  padding: 16px 0 0;
  letter-spacing: 0.3px;
}
.crumb a {
  color: var(--ink-soft);
  text-decoration: none;
}
.crumb a:hover {
  color: var(--ocean);
}
.crumb span {
  color: var(--navy);
}

/* local stat band (reused on area pages) — warm golden gradient */
.localband {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 48px 0;
  font-family: 'Montserrat', sans-serif;
  background: linear-gradient(135deg, #da291c 0%, #f58a1f 55%, #f4c14d 120%);
}
.localband::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 320px at 50% -20%, rgba(255, 247, 230, 0.35), transparent 60%);
}
.localband .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}
.stat {
  flex: 1;
  min-width: 160px;
}
.stat .big {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 38px;
  color: #fff;
  font-weight: 700;
  line-height: 1;
}
.stat .lbl {
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 8px;
  line-height: 1.45;
}

/* ---------------- FOOTER (shared) ---------------- */
.site-footer {
  background: var(--navy);
  color: var(--cream);
  padding: 54px 0 32px;
  font-family: 'Montserrat', sans-serif;
}
.site-footer .ftop {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}
.site-footer .fmark {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
  margin-bottom: 10px;
}
.site-footer .fabout {
  font-size: 13px;
  line-height: 1.7;
  color: #adbec7;
  max-width: 38ch;
}
.site-footer .cols {
  display: flex;
  gap: 48px;
  flex-wrap: wrap;
}
.site-footer .col h4 {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 12px;
}
.site-footer .col a {
  display: block;
  color: #adbec7;
  font-size: 13.5px;
  margin-bottom: 8px;
  text-decoration: none;
  transition: 0.15s;
}
.site-footer .col a:hover {
  color: var(--gold-bright);
}
/* Service-area line where the address used to be. Matches the sibling links' rhythm but is NOT a
   link: there is no address to navigate to, and styling it as one would invite a click that goes
   nowhere. */
.site-footer .col .sab-area {
  display: block;
  color: #adbec7;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.site-footer .legal {
  font-size: 11.5px;
  color: #8a795f;
  margin-top: 26px;
  border-top: 1px solid #4a3826;
  padding-top: 20px;
  line-height: 1.6;
  max-width: 80ch;
}

/* language visibility (toggle) */
[data-en] {
  display: none;
}
html[lang='en'] [data-es] {
  display: none;
}
html[lang='en'] [data-en] {
  display: revert;
}

:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
   HOMEPAGE-SPECIFIC (hero, warm band, welcome overlay)
   ============================================================ */
.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.home-hero .glow {
  position: absolute;
  z-index: -1;
  inset: 0;
  background:
    radial-gradient(
      620px 520px at 78% 36%,
      #ffeac4 0%,
      rgba(255, 234, 196, 0.5) 38%,
      rgba(255, 234, 196, 0) 70%
    ),
    radial-gradient(900px 600px at 50% -10%, #fff6e8 0%, rgba(255, 246, 232, 0) 60%), var(--cream);
}
.home-hero .hero-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px 24px 92px;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.home-hero .eyebrow {
  color: var(--navy);
}
.home-hero h1 {
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.home-hero .lede {
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
.home-hero .cta-row {
  animation: rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}
.home-hero .hero-logo {
  animation: fade 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}
.home-hero .hero-logo img {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: block;
  filter: drop-shadow(0 24px 50px rgba(154, 90, 40, 0.28));
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(26px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes fade {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (max-width: 900px) {
  .home-hero .hero-wrap {
    grid-template-columns: 1fr;
    gap: 28px;
    text-align: center;
    padding: 48px 24px 64px;
  }
  .home-hero .eyebrow {
    justify-content: center;
  }
  .home-hero .lede {
    margin-left: auto;
    margin-right: auto;
  }
  .home-hero .cta-row {
    justify-content: center;
  }
}

/* section head (centered) used on homepage */
.sec-head {
  max-width: 680px;
  margin: 0 auto 50px;
  text-align: center;
  position: relative;
  z-index: 2;
}
.sec-head .sec-label {
  display: inline-block;
}
.sec-head .sec-label::after {
  left: 50%;
  transform: translateX(-50%);
}

/* warm band */
.home-band {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 96px 24px;
  background: linear-gradient(135deg, #da291c 0%, #f58a1f 55%, #f4c14d 120%);
}
.home-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 320px at 50% -10%, rgba(255, 247, 230, 0.4), transparent 60%);
}
.home-band .wm-band {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  opacity: 0.16;
  width: min(600px, 68vw);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  filter: brightness(0) invert(1);
}
.home-band .wrap {
  position: relative;
  z-index: 2;
  max-width: 680px;
}
.home-band h2 {
  color: #fff;
  max-width: 18ch;
  margin: 0 auto 16px;
}
.home-band p {
  font-family: 'Montserrat', sans-serif;
  color: rgba(255, 255, 255, 0.92);
  font-size: 17px;
  line-height: 1.6;
  max-width: 46ch;
  margin: 0 auto 30px;
}
.home-band .btn-white {
  background: #fff;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  padding: 15px 34px;
  border-radius: 100px;
  text-decoration: none;
  display: inline-block;
  box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.3);
  transition: 0.25s;
}
.home-band .btn-white:hover {
  transform: translateY(-2px);
}

/* scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
.reveal.d1 {
  transition-delay: 0.07s;
}
.reveal.d2 {
  transition-delay: 0.14s;
}
.reveal.d3 {
  transition-delay: 0.21s;
}
.reveal.d4 {
  transition-delay: 0.28s;
}

/* welcome overlay */
.welcome {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(900px 600px at 50% 18%, #ffefd2 0%, rgba(255, 239, 210, 0) 60%),
    linear-gradient(160deg, #fcf6ec 0%, #fbead2 55%, #f8ddba 100%);
  opacity: 0;
  animation: wFadeIn 0.7s ease forwards;
  overflow-y: auto;
}
.welcome.closing {
  animation: wFadeOut 0.6s ease forwards;
}
@keyframes wFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes wFadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    visibility: hidden;
  }
}
.welcome-inner {
  max-width: 620px;
  margin: auto;
  padding: 20px 0;
}
.welcome-logo {
  width: min(280px, 62vw);
  margin: 0 auto 30px;
  display: block;
  filter: drop-shadow(0 22px 46px rgba(154, 90, 40, 0.3));
  opacity: 0;
  transform: translateY(16px) scale(0.95);
  animation: wLogo 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}
@keyframes wLogo {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wRise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.welcome h2 {
  color: var(--navy);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 42px);
  line-height: 1.12;
  margin-bottom: 20px;
  opacity: 0;
  animation: wRise 0.9s ease 0.55s forwards;
}
.welcome p {
  font-family: 'Montserrat', sans-serif;
  color: var(--ink-soft);
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.7;
  max-width: 50ch;
  margin: 0 auto 32px;
  opacity: 0;
  animation: wRise 0.9s ease 0.75s forwards;
}
.welcome .enter-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 17px 44px;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  color: #fff;
  background: linear-gradient(135deg, #da291c, #f58a1f);
  box-shadow: 0 14px 34px -10px rgba(218, 41, 28, 0.55);
  transition:
    transform 0.25s,
    box-shadow 0.25s;
  opacity: 0;
  animation: wRise 0.9s ease 1.05s forwards;
}
.welcome .enter-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px -12px rgba(218, 41, 28, 0.65);
}
body.welcome-open {
  overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
  .welcome,
  .welcome-logo,
  .welcome h2,
  .welcome p,
  .welcome .enter-btn {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }
}

/* welcome overlay — language picker stage */
.lang-prompt {
  font-family: 'Montserrat', sans-serif;
  color: #8a7558;
  font-size: 14px;
  letter-spacing: 1px;
  margin: 0 auto 26px;
  opacity: 0;
  animation: wRise 0.9s ease 0.55s forwards;
}
.lang-choices {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: wRise 0.9s ease 0.75s forwards;
}
.lang-btn {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.75);
  border: 1.5px solid #e3cfae;
  border-radius: 100px;
  padding: 16px 46px;
  cursor: pointer;
  transition: 0.25s;
  min-width: 200px;
}
.lang-btn:hover {
  border-color: #da291c;
  color: #da291c;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -12px rgba(218, 41, 28, 0.35);
}
.lang-btn:focus-visible {
  outline: 3px solid #da291c;
  outline-offset: 3px;
}
/* stage 2 entrance — content visible immediately, gentle rise as enhancement */
#wStage2.stage-in {
  animation: wRise 0.7s ease both;
}
#wStage2.stage-in .welcome-logo.st2 {
  opacity: 1;
  transform: none;
  animation: none;
  width: min(200px, 48vw);
  margin-bottom: 24px;
}
#wStage2.stage-in h2,
#wStage2.stage-in p,
#wStage2.stage-in .enter-btn {
  opacity: 1;
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .lang-prompt,
  .lang-choices {
    animation: none !important;
    opacity: 1 !important;
  }
}

/* "Available now" badge */
.now-badge {
  display: inline-block;
  background: var(--green);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 100px;
  margin-right: 8px;
  vertical-align: middle;
}

/* ============================================================
   Store: cart drawer, menu (/precios/), checkout (/carrito/)
   ============================================================ */
.crumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--warm-body);
  padding: 14px 0;
}
.crumb a {
  color: var(--navy);
  text-decoration: none;
}
.radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--warm-ink);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin-bottom: 4px;
}

/* Nav cart button + badge */
.cart-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 100px;
  width: 42px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--warm-ink);
  transition: 0.2s;
}
.cart-btn:hover {
  border-color: var(--coral);
  color: var(--navy);
}
.cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--coral);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Cart drawer */
.cart-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 75, 135, 0.4);
  z-index: 200;
}
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: min(400px, 92vw);
  background: var(--paper);
  z-index: 201;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -20px 0 50px -20px var(--shadow);
}
.cart-drawer.open {
  transform: translateX(0);
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 22px;
  border-bottom: 1px solid var(--rule);
}
.cart-head h3 {
  font-size: 22px;
  margin: 0;
}
.cart-close {
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--warm-body);
}
.cart-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 22px;
}
.cart-empty {
  color: var(--warm-body);
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  padding: 20px 0;
}
.cart-line {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: start;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-family: 'Montserrat', sans-serif;
}
.cart-line-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-ink);
  line-height: 1.3;
}
.cart-qty {
  font-weight: 400;
  color: var(--warm-body);
  font-size: 12.5px;
}
.cart-note {
  font-size: 12px;
  color: var(--warm-body);
  margin-top: 3px;
}
.cart-line-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--warm-ink);
  white-space: nowrap;
}
.cart-rm {
  background: transparent;
  border: 0;
  color: var(--warm-body);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.cart-rm:hover {
  color: var(--navy);
}
.cart-foot {
  border-top: 1px solid var(--rule);
  padding: 16px 22px;
  font-family: 'Montserrat', sans-serif;
}
.cart-sum {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--warm-body);
  padding: 3px 0;
}
.cart-grand {
  font-size: 17px;
  font-weight: 700;
  color: var(--warm-ink);
  border-top: 1px solid var(--rule);
  margin-top: 6px;
  padding-top: 8px;
}
.cart-pt-note {
  font-size: 11px;
  color: var(--warm-body);
  line-height: 1.5;
  margin: 8px 0 12px;
}
.cart-checkout {
  width: 100%;
  text-align: center;
}

/* Menu page */
.precios-explainer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 26px;
}
.pe-item {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px 24px;
}
.pe-item h3 {
  font-size: 19px;
  margin-bottom: 6px;
}
.pe-item p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--warm-body);
  line-height: 1.6;
}
.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.step3 {
  text-align: center;
}
.step3-n {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--coral);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 10px;
}
.step3 h4 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--warm-ink);
  margin-bottom: 4px;
}
.step3 p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13.5px;
  color: var(--warm-body);
}
.cat {
  margin-bottom: 42px;
}
.cat-title {
  font-size: 28px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold);
}
.menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.menu-item {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 22px 22px 18px;
  display: flex;
  flex-direction: column;
}
.mi-name {
  font-size: 19px;
  margin-bottom: 6px;
  line-height: 1.2;
}
.mi-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--warm-body);
  line-height: 1.5;
  margin-bottom: 10px;
}
.mi-price {
  font-family: 'Cormorant Garamond', serif;
  margin-top: auto;
}
.mi-total {
  font-size: 30px;
  font-weight: 700;
  color: var(--warm-ink);
}
.mi-from,
.mi-unit {
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  color: var(--warm-body);
  font-weight: 500;
}
.mi-quote {
  font-size: 22px;
  color: var(--navy);
}
.mi-break {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--warm-body);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.mi-opts {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--warm-body);
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mi-opts label {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mi-qty {
  width: 70px;
  padding: 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
}
.mi-check {
  font-size: 12.5px;
}
.mi-foot {
  margin-top: 14px;
}
.mi-add {
  width: 100%;
  text-align: center;
}
.precios-trust {
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--warm-body);
  margin-top: 30px;
}

/* Checkout page */
.checkout-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: start;
}
.checkout-left h1 {
  font-size: clamp(30px, 4vw, 40px);
  margin-bottom: 18px;
}
.os-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
}
.os-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  color: var(--warm-ink);
  vertical-align: top;
}
.os-price {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
}
.os-qty {
  color: var(--warm-body);
  font-weight: 400;
  font-size: 12.5px;
}
.os-note {
  font-size: 12px;
  color: var(--warm-body);
  margin-top: 3px;
}
.os-sub td {
  color: var(--warm-body);
  border-bottom: 0;
  padding: 4px 0;
}
.os-grand td {
  font-size: 18px;
  font-weight: 700;
  color: var(--warm-ink);
  border-top: 2px solid var(--rule);
  border-bottom: 0;
  padding-top: 10px;
}
.checkout-success {
  display: none;
}
.checkout-success.show {
  display: block;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 36px 30px;
  box-shadow: 0 18px 40px -24px var(--shadow);
}
.cs-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  font-size: 30px;
}
.checkout-success h2 {
  font-size: 26px;
  margin-bottom: 8px;
}
.cs-order {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  color: var(--warm-body);
  margin-bottom: 8px;
}
.checkout-success p {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  color: var(--warm-body);
  line-height: 1.6;
}
.cs-zelle {
  text-align: left;
  background: var(--cream-2);
  border-radius: 12px;
  padding: 18px 20px;
  margin-top: 20px;
  font-family: 'Montserrat', sans-serif;
}
.cs-zelle h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--warm-ink);
  margin-bottom: 6px;
}
.cs-zelle ul {
  list-style: none;
  margin: 8px 0;
  padding: 0;
}
.cs-zelle li {
  font-size: 14px;
  padding: 2px 0;
  color: var(--warm-ink);
}

/* Form (shared) — mirrors the contact-page capture styles for /carrito/ */
.capture {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 30px;
  box-shadow: 0 18px 40px -24px var(--shadow);
  position: relative;
}
.capture::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--seal), var(--seal-bright), var(--ocean));
  border-radius: 4px 4px 0 0;
}
.capture h2 {
  font-size: 21px;
  margin-bottom: 6px;
}
.capture p.sub {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 15px;
}
.field label {
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.field input,
.field select {
  font-family: Arial, sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  transition: 0.18s;
}
.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--seal);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(176, 137, 74, 0.15);
}
.capture .btn {
  width: 100%;
  margin-top: 4px;
}
.formnote {
  font-family: Arial, sans-serif;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 13px;
  line-height: 1.5;
}

@media (max-width: 820px) {
  .checkout-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}
@media (max-width: 720px) {
  .precios-explainer {
    grid-template-columns: 1fr;
  }
  .steps3 {
    grid-template-columns: 1fr;
  }
}

/* Click-to-WhatsApp floating button (lead capture) */
/* Floating contact channels. Stacked rather than hidden behind a toggle: with two or three
   options a menu costs a tap and hides the choice, and the point is that people can pick the app
   they already use. Colours are each platform's own so the icon is recognised at a glance. */
.pdu-fabs {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
}
.pdu-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  transition:
    transform 0.18s,
    box-shadow 0.18s;
}
.pdu-fab:hover,
.pdu-fab:focus-visible {
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.34);
}
.pdu-fab:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .pdu-fab {
    transition: none;
  }
  .pdu-fab:hover,
  .pdu-fab:focus-visible {
    transform: none;
  }
}
@media (max-width: 640px) {
  .pdu-fabs {
    right: 12px;
    bottom: 12px;
    gap: 10px;
  }
  .pdu-fab {
    width: 48px;
    height: 48px;
  }
}

@media print {
  .pdu-fabs {
    display: none;
  }
}

/* ---- English-language offer (assets/site.js) -------------------------------------------------
   A dismissible strip shown to visitors whose PRIMARY browser language is English, on Spanish
   pages only. In normal document flow rather than fixed: it appears once, above everything, and
   pushes the page down instead of covering content the visitor came to read. */
.pdu-langoffer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px 44px 10px 16px;
  position: relative;
  background: #1d3f5e;
  color: #fff;
  font-size: 0.94rem;
  line-height: 1.35;
  text-align: center;
}
.pdu-langoffer-msg {
  opacity: 0.92;
}
.pdu-langoffer-go {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}
.pdu-langoffer-go:hover,
.pdu-langoffer-go:focus-visible {
  text-decoration-thickness: 2px;
}
.pdu-langoffer-x {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}
.pdu-langoffer-x:hover,
.pdu-langoffer-x:focus-visible {
  opacity: 1;
  background: rgba(255, 255, 255, 0.14);
}
.pdu-langoffer-go:focus-visible,
.pdu-langoffer-x:focus-visible {
  outline: 3px solid #ffd97a;
  outline-offset: 2px;
}

@media print {
  .pdu-langoffer {
    display: none;
  }
}

/* ---- /servicios/ service finder (assets/services-hub.js) -----------------------------------
   Three dependent selects — country, authority, package — under a short walkthrough. Replaced a
   card grid and search box, which replaced a horizontally scrolling tab strip whose later tabs sat
   off-screen with no scrollbar.

   The controls are NOT sticky. They were when the page was a filter over a long result list and
   you needed the search box while scrolling; now the list ends at the Start button, so pinning
   them would only steal height on a phone. */
.sh-how {
  padding: 4px 0 18px;
}
.sh-how-title {
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.25;
}
.sh-how-lede {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 62ch;
}
.sh-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.sh-step {
  padding: 16px 18px;
  border: 1px solid var(--rule);
  border-left: 4px solid var(--seal);
  border-radius: 10px;
  background: var(--white);
}
.sh-step h3 {
  margin: 0 0 6px;
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--navy);
}
.sh-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* The worked example is the part that actually removes confusion, so it reads as a quote rather
   than as another card competing with the three steps. */
.sh-example {
  padding: 16px 20px;
  border-radius: 10px;
  background: var(--paper-deep, #f3efe6);
  border: 1px solid var(--rule);
}
.sh-example h3 {
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sh-example p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  max-width: 74ch;
}

.sh-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 18px;
  align-items: end;
  padding: 18px 0 6px;
  border-top: 1px solid var(--rule);
}
.sh-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  flex: 1 1 220px;
}
.sh-field-go {
  flex: 0 0 auto;
}
.sh-field label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sh-field select {
  font: inherit;
  font-size: 15px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--white);
  color: inherit;
  width: 100%;
  /* 16px on iOS or Safari zooms the page when a field is focused. 15px sits below that threshold,
     so the select is bumped up on small screens instead — see the media query below. */
}
.sh-field select:disabled {
  background: var(--paper-deep, #f3efe6);
  color: var(--ink-soft);
  cursor: not-allowed;
}
.sh-field select:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 1px;
  border-color: var(--navy);
}
/* Disabled by attribute would drop it out of the tab order and give a screen reader nothing to
   announce. aria-disabled keeps it reachable and explains itself; the click handler stops it. */
.sh-start.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.sh-hint {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  min-height: 1.4em;
  max-width: 74ch;
}
.sh-alt {
  margin: 18px 0 8px;
  font-size: 14px;
}

@media (max-width: 640px) {
  .sh-field select {
    font-size: 16px;
  }
  .sh-field,
  .sh-field-go,
  .sh-field-go .btn {
    flex: 1 1 100%;
    width: 100%;
  }
  .sh-example p {
    font-size: 14.5px;
  }
}

/* ---- /empezar/ Intake (assets/guide-page.js) -----------------------------------------------
   One question per screen, large tap targets. The options are buttons rather than a list because
   on a phone this is the whole interaction and a mis-tap costs the client the thread. */
.guide {
  max-width: 720px;
  margin: 0 auto;
  padding: 8px 0 56px;
}
.g-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.g-back {
  align-self: flex-start;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 4px 0;
}
.g-back:hover {
  color: var(--navy);
}
.g-q {
  margin: 0;
  font-size: clamp(22px, 3.4vw, 30px);
  line-height: 1.2;
  text-wrap: balance;
}
.g-help {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
  max-width: 60ch;
}
.g-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.g-opt {
  text-align: left;
  cursor: pointer;
  font: inherit;
  font-size: 16px;
  line-height: 1.4;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  background: var(--white);
  color: inherit;
  transition:
    border-color 0.15s,
    box-shadow 0.15s,
    transform 0.15s;
}
.g-opt:hover,
.g-opt:focus-visible {
  border-color: var(--seal);
  box-shadow: 0 6px 18px var(--shadow);
  transform: translateY(-1px);
}
.g-all {
  align-self: flex-start;
  margin-top: 10px;
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 6px 0;
}
.g-results {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.g-card {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 18px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--white);
}
.g-cat {
  font-size: 11px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--navy);
}
.g-name {
  margin: 0;
  font-size: 17px;
  line-height: 1.25;
}
.g-desc {
  margin: 0;
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.g-pick {
  margin-top: auto;
  align-self: flex-start;
}
.g-legal {
  margin: 22px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  border-left: 3px solid var(--rule);
  padding-left: 14px;
  max-width: 66ch;
}
@media (prefers-reduced-motion: reduce) {
  .g-opt {
    transition: none;
  }
  .g-opt:hover,
  .g-opt:focus-visible {
    transform: none;
  }
}