/* =============================================================================
   contacto.css — page-only styles for contacto.html
   Unlayered: wins over @layer f1.* in f1.css. Reuses f1 tokens only.
   ============================================================================= */

/* ---------- 1. hero ---------- */
.contact-hero .container { width: 100%; }
.contact-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  column-gap: var(--sp-2xl);
  align-items: end;
}
.contact-hero .page-hero__content .h1 { line-height: .92; }
.contact-hero__aside { display: grid; gap: .75rem; width: 100%; max-width: 25rem; justify-self: end; }
/* aside cards use .glass.hero-card (f1.css); the address card lays its pin icon beside the text */
.contact-hero__pin { grid-template-columns: auto minmax(0, 1fr); column-gap: 1rem; align-items: center; }
.contact-hero__pin > .icon { color: var(--red-400); }
.contact-hero__pin .micro { display: block; margin-bottom: .375rem; text-wrap: balance; }
.contact-hero__addr { font-size: 1.125rem; line-height: 1.25; }
@media (max-width: 991px) {
  .contact-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .contact-hero__aside { display: none; }
}

/* ---------- 2. consulta: form (calculator style) + direct contact card ---------- */
.consulta-grid { --split: minmax(0, 1.6fr) minmax(0, 1fr); --split-gap: var(--sp-l); }
/* "especialista ahora" is bound with   (no lone "AHORA"); below ~400px that pair is wider than the
   column at 3rem, so the title steps down with the viewport there (no effect from 400px up) */
.consulta-section .section-head .h2 { font-size: min(var(--fs-h2), 12vw); }

.consulta {
  position: relative;
  display: grid;
  background: var(--bg);
  border: 1px solid var(--line);
}

/* black top bar, like the device frame edge of the reference calculator */
.consulta__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 1rem 2.5rem;
  background: #000;
  color: #fff;
  border-top: 3px solid var(--red-500);
}
.consulta__bar-title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  font-family: var(--font-body);
  font-stretch: normal;
  font-variation-settings: normal;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .01em;
  text-transform: none;
}
.consulta__bar-title .icon { --icon-size: 1.25rem; color: var(--red-400); }
.consulta__bar-meta { color: #a3a3a3; }

.consulta__top { display: grid; gap: 2.75rem; padding: 2.5rem; }
.consulta__group { gap: .75rem; }

.consulta__legend {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  margin: 0 0 .5rem;
  padding: 0;
  font-family: var(--font-body);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-transform: none;
  color: var(--fg);
}
.consulta__legend label { cursor: pointer; }
.consulta__legend .field__req { margin-left: -.5rem; font-family: var(--font-mono); font-size: .875rem; }
.consulta__legend .field__opt {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.consulta__num {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  font-family: var(--font-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand);
  border: 1px solid var(--brand);
  transition: background-color .35s var(--ease-btn), color .35s var(--ease-btn), border-color .35s var(--ease-btn);
}
/* a step is "done" when it has a value (set by contacto.js) */
.consulta__group.is-done .consulta__num { background: var(--brand-fill); border-color: var(--brand-fill); color: var(--on-brand); }

/* type-of-query tiles: 3 + 2 layout with icon on top */
.consulta__tipos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.consulta__tipos > .seg { grid-column: span 2; }
.consulta__tipos > .seg:nth-child(n + 4) { grid-column: span 3; }
.consulta__tipos .seg__label {
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 6.75rem;
  padding: 1rem 1.125rem;
  text-align: left;
  text-wrap: balance;
}
.consulta__tipos .seg__label .icon { --icon-size: 1.5rem; color: var(--brand); transition: color .25s ease; }
.consulta__tipos .seg__input:checked + .seg__label .icon { color: var(--on-brand); }

.consulta .chip-checks { gap: .5rem; }

.consulta__hint-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; min-height: 1.25rem; }
.consulta__count { margin: 0 0 0 auto; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.consulta__count.is-near { color: var(--brand); }

/* bottom panel: live ticket + submit */
.consulta__bottom {
  display: grid;
  gap: 1.25rem;
  padding: 2rem 2.5rem 2.5rem;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
}
.consulta__ticket { background: var(--bg); border-top-color: var(--brand-fill); }
.consulta__meta .data-row { padding: .5rem 0; font-size: .75rem; }
.consulta__meta .data-row:first-child { padding-top: 0; }
.consulta__meta { padding-bottom: .75rem; border-bottom: 1px dashed var(--line); }
.consulta__ticket .ticket__body { min-height: 7.5rem; }
.consulta__ticket .t-k { color: var(--fg-muted); }
.consulta__ticket .t-empty { color: var(--grey-400, #a3a3a3); }
.consulta__retry { color: var(--brand); text-decoration: underline; text-underline-offset: .2em; }
.consulta__note {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--fg-muted);
}
.consulta__note .icon { margin-top: .15em; color: var(--ok-ink); }

/* direct contact card */
.contact-card-wrap { align-self: start; }
.contact-card {
  display: grid;
  gap: 1.75rem;
  padding: 2rem;
  background: #000;
  color: var(--fg);
}
.contact-card.bg-dots::before {
  -webkit-mask-image: radial-gradient(90% 60% at 100% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%);
          mask-image: radial-gradient(90% 60% at 100% 0%, #000 0%, rgba(0,0,0,.45) 45%, transparent 80%);
}
.contact-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.contact-card__head h3 { margin: 0; font-family: var(--font-mono); font-stretch: normal; font-variation-settings: normal; }
.contact-card__icon { color: var(--brand); }
.contact-card__btns { display: grid; gap: .5rem; }
.contact-card__list { gap: 1.5rem; }
.contact-card__list .info-list__value { color: #fff; }
.contact-card__maps { justify-self: start; }

/* ---------- 3. mapa ---------- */
.mapa__head { align-items: end; }
.mapa__head .h2 { max-width: 20ch; }
.mapa__info { display: grid; gap: 1.5rem; justify-items: start; width: 100%; padding-bottom: .35rem; }
@media (max-width: 991px) { .mapa__info { max-width: 34rem; } }
.mapa__info .data-rows { width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mapa__info .data-row:first-child { border-top: 0; }
.mapa__info .data-row__value { text-wrap: balance; }

.mapa__frame { margin: .75rem; }
.mapa__frame .map-frame { --ratio: 21 / 9; --map-min-h: 22rem; }
.mapa__badge {
  left: 1.5rem;
  bottom: 1.5rem;
  gap: .5rem;
  padding: 1.25rem 1.5rem;
  background: #fff;
  color: #000;
}
.mapa__badge .micro { color: var(--red-600); }
.mapa__badge .h5 { font-size: var(--fs-h5); line-height: 1.15; }
.mapa__badge .link--brand { color: var(--red-600); }
@media (max-width: 991px) {
  .mapa__frame .map-frame { --ratio: 4 / 3; }
}
@media (max-width: 767px) {
  .mapa__frame { margin: .5rem; }
  .mapa__frame .map-frame { --ratio: 4 / 5; --map-min-h: 20rem; }
  .mapa__badge { left: .75rem; right: .75rem; bottom: .75rem; padding: 1rem 1.125rem; }
}

/* ---------- 4. faq ---------- */
.faq .accordion { align-self: start; }
/* aside contact row: same pattern as the home FAQ (secondary WhatsApp button + mono phone link) */
.faq__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.faq__contact .link { display: inline-flex; align-items: center; gap: .5rem; }
.faq__contact .link .icon { --icon-size: 1rem; color: var(--brand); }

/* ---------- responsive: consulta ---------- */
@media (max-width: 1280px) {
  .consulta__top { padding: 2rem; }
  .consulta__bar { padding-inline: 2rem; }
  .consulta__bottom { padding: 1.75rem 2rem 2rem; }
}
/* no JS: the form stays [hidden] (contacto.js reveals it), so the direct contact card takes the whole row */
.consulta-grid:has(> .consulta[hidden]) { --split: minmax(0, 1fr); }
.consulta-grid:has(> .consulta[hidden]) .contact-card-wrap { position: static; }
@media (min-width: 640px) and (max-width: 991px) {
  /* tablet: card spans the column, buttons left / data right */
  .contact-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: 2.5rem; row-gap: 1.5rem; align-items: start; }
  .contact-card__head { grid-column: 1 / -1; }
  .contact-card__btns { grid-column: 1; grid-row: 2; }
  .contact-card__list { grid-column: 2; grid-row: 2 / span 2; }
  .contact-card__maps { grid-column: 1; grid-row: 3; }
}
@media (min-width: 992px) {
  /* no JS on desktop: same buttons-left / data-right layout as tablet, inside the full-width row */
  .consulta-grid:has(> .consulta[hidden]) .contact-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: var(--sp-xl); row-gap: 1.5rem; align-items: start; }
  .consulta-grid:has(> .consulta[hidden]) .contact-card__head { grid-column: 1 / -1; }
  .consulta-grid:has(> .consulta[hidden]) .contact-card__btns { grid-column: 1; grid-row: 2; }
  .consulta-grid:has(> .consulta[hidden]) .contact-card__list { grid-column: 2; grid-row: 2 / span 2; }
  .consulta-grid:has(> .consulta[hidden]) .contact-card__maps { grid-column: 1; grid-row: 3; }
}
@media (max-width: 767px) {
  .consulta__bar { padding: .875rem 1.25rem; }
  .consulta__bar-meta { display: none; }
  .consulta__top { gap: 2.25rem; padding: 1.5rem 1.25rem; }
  .consulta__bottom { padding: 1.5rem 1.25rem; }
  .consulta__legend { font-size: 1.125rem; }
  .consulta__tipos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .consulta__tipos > .seg,
  .consulta__tipos > .seg:nth-child(n + 4) { grid-column: span 1; }
  .consulta__tipos > .seg:last-child { grid-column: 1 / -1; }
  .consulta__tipos .seg__label { min-height: 6rem; padding: .875rem; gap: .875rem; }
  .consulta__ticket { padding: 1.25rem; }
  .contact-card { padding: 1.5rem 1.25rem; }
}