/* Contacto — page-only styles. Tokens and components come from main.css. */

:root { --contact-overlap: clamp(4rem, 1.5rem + 7vw, 8rem); }

/* Hero: extra room at the bottom so the contact card overlaps the photo, like the original. */
.contact-hero { padding-bottom: calc(clamp(4rem, 2rem + 8vw, 8.5rem) + var(--contact-overlap)); }
.contact-hero .page-hero__bg { object-position: center 70%; }
.contact { position: relative; z-index: 1; margin-top: calc(var(--contact-overlap) * -1); }

/* Card: navy contact info (40%) + white form (60%).
   overflow: clip (not hidden) keeps the rounded corners without breaking position: sticky below. */
.contact-card {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  overflow: hidden; overflow: clip; border-radius: var(--radius-lg); background: var(--white); box-shadow: var(--shadow-lg);
}
.contact-card__info { position: relative; isolation: isolate; overflow: hidden; overflow: clip; padding: clamp(2rem, 1rem + 3.2vw, 4rem); }
.contact-card__info::after {
  content: ""; position: absolute; z-index: -1; right: -120px; bottom: -140px; width: 320px; height: 320px;
  border: 36px solid rgba(166, 206, 57, .14); border-radius: 50%;
}
.contact-card__form { padding: clamp(1.75rem, 1rem + 3.2vw, 4rem); }
.contact-card__title { margin-bottom: 1.25rem; font-size: var(--fs-h4); }
.contact-card__title--social { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); margin-bottom: .75rem; }
.contact-card__info .contact-list a { overflow-wrap: anywhere; }
.contact-card__info .social { margin-left: -12px; }

/* Desktop: the form is much taller than the details, so keep them in view while scrolling it. */
@media (min-width: 1025px) {
  .contact-card__info-inner { position: sticky; top: calc(var(--header-h) + 2rem); }
}
/* Tablet: the card stacks; put the details and the social links side by side. */
@media (min-width: 768px) and (max-width: 1024px) {
  .contact-card__info-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2rem 3rem; }
  .contact-card__title--social { margin-top: 0; }
}

/* Form details */
.contact-form .req { color: var(--danger); }
.contact-form legend { margin-bottom: .55rem; }
.contact-form .choice-group { gap: .6rem; }
.contact-form .choice {
  padding: .6rem 1rem; border: 1px solid #C9CED8; border-radius: var(--radius); background: var(--white);
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.contact-form .choice:hover { border-color: var(--navy); }
.contact-form .choice:has(input:checked) { border-color: var(--navy); background: var(--mint); box-shadow: inset 0 0 0 1px var(--navy); }
/* Keyboard focus: one navy ring around the whole pill instead of a small one around the radio. */
@supports selector(:has(*)) {
  .contact-form .choice:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 2px; }
  .contact-form .choice input:focus-visible { outline: none; }
}
.contact-form fieldset:has([aria-invalid="true"]) .choice { border-color: var(--danger); }

/* Product-type questions: main.js shows the one for the chosen product (and toggles required/disabled).
   This CSS version gives visitors without JavaScript the same single question, and shows the right one
   straight away when the browser restores a chosen product before main.js has run. */
@supports selector(:has(*)) {
  .contact-form [data-show-if] { display: none; }
  .contact-form:has(#cf-producto option[value="combustibles"]:checked) [data-show-if="producto:combustibles"],
  .contact-form:has(#cf-producto option[value="lubricantes"]:checked) [data-show-if="producto:lubricantes"],
  .contact-form:has(#cf-producto option[value="soluciones"]:checked) [data-show-if="producto:soluciones"] { display: grid; }
}

.contact-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.contact-form__actions .form__note { flex: 1 1 220px; margin: 0; }

@media (max-width: 1024px) {
  .contact-card { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  :root { --contact-overlap: 3rem; }
  .contact-form__actions .btn { width: 100%; }
}