/**
 * Shared CTA form — matches the home .home-final type.
 * Scope: internal landings only (body:not(.page-inicio)).
 * Does not restyle .home-nl / .atender-form--newsletter.
 */

body:not(.page-inicio) :is(
  .atender-cta,
  .ar-cta,
  .pas-cta,
  .contacto-main__aside,
  .atender-block:has(.atender-form--cta),
  .atender-dark:has(.atender-form--cta)
) {
  /* Flex, not grid: leftover grid-column:2 on the AR form creates an implicit column. */
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  gap: 1.15rem !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  min-height: 0 !important;
  padding: var(--dw-section-compact) var(--dw-gutter) !important;
  background: var(--dw-ink) !important;
  color: var(--dw-cream) !important;
  overflow: visible !important;
}

body:not(.page-inicio) .ar-cta > .ar-cta-map,
body:not(.page-inicio) svg.ar-cta-map,
body:not(.page-inicio) .pas-cta::before,
body:not(.page-inicio) .pas-cta::after {
  display: none !important;
}

/* Kill legacy 2-col placement (internal.css puts the form in column 2). */
html body:not(.page-inicio) :is(.ar-cta, .pas-cta, .atender-cta, .contacto-main__aside) > * {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  justify-self: stretch !important;
  align-self: stretch !important;
  width: min(100%, var(--dw-wrap)) !important;
  max-width: var(--dw-wrap) !important;
  margin-inline: auto !important;
}

body:not(.page-inicio) .pas-cta .pas-shell,
body:not(.page-inicio) .pas-cta-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1.15rem !important;
  width: 100% !important;
  max-width: var(--dw-wrap) !important;
  margin-inline: auto !important;
}

body:not(.page-inicio) .pas-cta-copy > p {
  display: none !important;
}

body:not(.page-inicio) .contacto-form-card > .contacto-index {
  display: none !important;
}

body.page-contacto .contacto-main {
  padding-bottom: 0 !important;
}

body.page-contacto .contacto-main__grid {
  display: flex !important;
  flex-direction: column !important;
  gap: clamp(2rem, 4vw, 3.5rem) !important;
}

body.page-contacto .contacto-main__aside {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}

body.page-contacto .contacto-form-card {
  width: min(100%, var(--dw-wrap));
  max-width: var(--dw-wrap);
  margin-inline: auto;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.page-contacto .contacto-form-shell {
  display: grid !important;
  gap: 1.15rem !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

body:not(.page-inicio) .pas-form-slot {
  display: grid !important;
  gap: 1.15rem !important;
  width: 100% !important;
}

/* Canonical form heading. All landing pages inherit these type tokens. */
@layer atender-mobile-layout {
body:not(.page-inicio) :is(
  .ar-cta > .ar-section-title,
  .pas26-cta h2,
  #nos-close-title,
  .pas-cta h2,
  .pas-cta-copy h2,
  .contacto-form-card__title,
  .atender-block:has(.atender-form--cta) > :is(h2, h2.wp-block-heading),
  .atender-dark:has(.atender-form--cta) > :is(h2, h2.wp-block-heading)
) {
  display: block !important;
  grid-column: 1 !important;
  grid-row: auto !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  color: var(--dw-ink, #272a34) !important;
  font-family: var(--font, inherit) !important;
  font-size: var(--dw-form-title-size, var(--dw-section-title-size)) !important;
  font-weight: var(--dw-form-title-weight, var(--dw-section-title-weight)) !important;
  letter-spacing: var(--dw-section-title-spacing) !important;
  line-height: var(--dw-form-title-line, var(--dw-section-title-line)) !important;
  text-align: center !important;
  text-transform: none !important;
}
body:not(.page-inicio) :is(
  .ar-cta > .ar-section-title,
  .pas26-cta h2,
  #nos-close-title,
  .pas-cta h2,
  .pas-cta-copy h2,
  .contacto-form-card__title,
  .atender-block:has(.atender-form--cta) > :is(h2, h2.wp-block-heading),
  .atender-dark:has(.atender-form--cta) > :is(h2, h2.wp-block-heading)
)::after {content:none!important;display:none!important;}
}

/* Form introductions share one readable level below the common heading. */
@layer atender-mobile-layout {
html body.atender-sep26 main#contenido :is(.dda-client-form-subtitle,.nos-close-lead,.tro-form-intro) {
  font-size: clamp(1rem, 1.25vw, 1.125rem) !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  text-align: center !important;
  max-width: 65ch !important;
  margin: 1rem auto !important;
}
}

body:not(.page-inicio) .atender-block:has(.atender-form--cta) > p,
body:not(.page-inicio) .atender-dark:has(.atender-form--cta) > p {
  max-width: 42rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  color: rgba(246, 240, 230, 0.78) !important;
  text-align: center !important;
}

body:not(.page-inicio) :is(
  .atender-cta,
  .ar-cta,
  .pas-cta,
  .atender-block:has(.atender-form--cta),
  .atender-dark:has(.atender-form--cta)
).is-layout-constrained > * {
  max-width: none !important;
  width: 100% !important;
}

body:not(.page-inicio) .atender-cta__action {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  grid-column: 1 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto 0.15rem !important;
  gap: 0.85rem 1.15rem !important;
  text-align: center !important;
  white-space: nowrap;
}

body:not(.page-inicio) .atender-cta__action p {
  max-width: none !important;
  width: auto !important;
  margin: 0 !important;
  color: rgba(246, 240, 230, 0.78) !important;
  font-size: 0.92rem !important;
  font-weight: 400 !important;
  text-align: center !important;
  white-space: nowrap;
}

body:not(.page-inicio) .atender-cta__action .atender-btn {
  min-height: 2.5rem !important;
  margin-top: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--dw-green) !important;
  background: transparent !important;
  color: var(--dw-cream) !important;
  font-size: 0.82rem !important;
  font-weight: 400 !important;
  width: auto !important;
  flex: 0 0 auto;
  white-space: nowrap;
  transform: none !important;
}

body:not(.page-inicio) .atender-cta__action .atender-btn:is(:hover, :focus-visible) {
  background: transparent !important;
  color: var(--dw-white) !important;
  transform: none !important;
}

body:not(.page-inicio) .atender-form--cta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:
    "name company phone"
    "email sector time"
    "message message message"
    "consent consent consent"
    "action action action"
    "legal legal legal"
    "status status status"
    "note note note" !important;
  gap: 0.85rem 1rem !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: clamp(1.5rem, 2.8vw, 2.15rem) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--dw-cream) !important;
  box-shadow: none !important;
}

body:not(.page-inicio) .atender-form--cta > input[type="hidden"],
body:not(.page-inicio) .atender-form--cta > .hp {
  display: none !important;
}

body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="nombre"]) { grid-area: name !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="empresa"]) { grid-area: company !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="telefono"]) { grid-area: phone !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="email"]) { grid-area: email !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="rubro"]) { grid-area: sector !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="horario"]) { grid-area: time !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has([name="mensaje"]) { grid-area: message !important; }
body:not(.page-inicio) .atender-form--cta > .atender-field:has(input[type="checkbox"]) { grid-area: consent !important; }
body:not(.page-inicio) .atender-form--cta > p:has(button) {
  grid-area: action !important;
  margin: 0.2rem 0 0 !important;
}
body:not(.page-inicio) .atender-form--cta > .atender-form-legal { grid-area: legal !important; }
body:not(.page-inicio) .atender-form--cta > .atender-form-status { grid-area: status !important; }
body:not(.page-inicio) .atender-form--cta > .atender-form-note { grid-area: note !important; }

body:not(.page-inicio) .atender-form--cta .atender-field > label {
  margin: 0 !important;
  color: rgba(246, 240, 230, 0.82) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
}

body:not(.page-inicio) .atender-form--cta .atender-field > label:has(input[type="checkbox"]) {
  font-weight: 400 !important;
  color: var(--dw-cream) !important;
}

body:not(.page-inicio) .atender-form--cta input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
body:not(.page-inicio) .atender-form--cta textarea,
body:not(.page-inicio) .atender-form--cta select {
  border: 1px solid var(--dw-input-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--dw-ink) !important;
  caret-color: var(--dw-ink) !important;
}

body:not(.page-inicio) .atender-form--cta button.atender-btn,
body:not(.page-inicio) .atender-form--cta button[type="submit"] {
  width: 100% !important;
  min-height: 2.9rem !important;
  border-color: #14612c !important;
  background: #14612c !important;
  color: #fff !important;
}

body:not(.page-inicio) .atender-form--cta button.atender-btn:is(:hover, :focus-visible),
body:not(.page-inicio) .atender-form--cta button[type="submit"]:is(:hover, :focus-visible) {
  border-color: var(--dw-green-dark) !important;
  background: var(--dw-green-dark) !important;
  color: #fff !important;
}

body:not(.page-inicio) .atender-form--cta > .atender-form-legal,
body:not(.page-inicio) .atender-form--cta > .atender-form-status {
  margin: 0 !important;
  color: rgba(246, 240, 230, 0.82) !important;
}

body:not(.page-inicio) .atender-form--cta > .atender-form-note {
  margin: 0 !important;
  color: var(--dw-cream) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
}

body:not(.page-inicio) .atender-form--cta .atender-field-error,
body:not(.page-inicio) .atender-form--cta [role="alert"] {
  color: #fff !important;
}

body:not(.page-inicio) .atender-form--cta [aria-invalid="true"] {
  border-color: #fff !important;
}

@media (max-width: 960px) {
  body:not(.page-inicio) .atender-form--cta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "name company"
      "phone email"
      "sector time"
      "message message"
      "consent consent"
      "action action"
      "legal legal"
      "status status"
      "note note" !important;
  }

  body:not(.page-inicio) .atender-cta__action {
    flex-wrap: wrap !important;
    white-space: normal;
  }

  body:not(.page-inicio) .atender-cta__action p {
    white-space: normal;
  }
}

@media (max-width: 479px) {
  body:not(.page-inicio) .atender-form--cta {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "name"
      "company"
      "phone"
      "email"
      "sector"
      "time"
      "message"
      "consent"
      "action"
      "legal"
      "status"
      "note" !important;
  }
}

html body.page-analisis-de-riesgos div.wp-block-group.ar-page.ar-cta,
html body.page-analisis-de-riesgos div.ar-cta.atender-cta,
html body.page-analisis-de-riesgos .ar-cta.ar-page {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  align-items: stretch !important;
}

/* Análisis: beat internal.css cream card + 2-col placement. */
html body.page-analisis-de-riesgos .ar-cta > .atender-form,
html body.page-analisis-de-riesgos .ar-cta > .atender-form--cta {
  display: grid !important;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-template-areas:
    "name company phone"
    "email sector time"
    "message message message"
    "consent consent consent"
    "action action action"
    "legal legal legal"
    "status status status"
    "note note note" !important;
  width: min(100%, var(--dw-wrap)) !important;
  max-width: var(--dw-wrap) !important;
  margin: 0 auto !important;
  padding: clamp(1.5rem, 2.8vw, 2.15rem) !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--dw-cream) !important;
  box-shadow: none !important;
}

html body.page-analisis-de-riesgos .ar-cta .atender-form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
html body.page-analisis-de-riesgos .ar-cta .atender-form textarea,
html body.page-analisis-de-riesgos .ar-cta .atender-form select {
  border: 1px solid var(--dw-input-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: var(--dw-ink) !important;
  caret-color: var(--dw-ink) !important;
}

html body.page-analisis-de-riesgos .ar-cta .atender-form .atender-field > label {
  color: rgba(246, 240, 230, 0.82) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
}

html body.page-analisis-de-riesgos .ar-cta .atender-form button.atender-btn,
html body.page-analisis-de-riesgos .ar-cta .atender-form button[type="submit"] {
  width: 100% !important;
  min-height: 2.9rem !important;
  border-color: #14612c !important;
  background: #14612c !important;
  color: #fff !important;
}

@media (max-width: 960px) {
  html body.page-analisis-de-riesgos .ar-cta > .atender-form,
  html body.page-analisis-de-riesgos .ar-cta > .atender-form--cta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "name company"
      "phone email"
      "sector time"
      "message message"
      "consent consent"
      "action action"
      "legal legal"
      "status status"
      "note note" !important;
  }
}

@media (max-width: 479px) {
  html body.page-analisis-de-riesgos .ar-cta > .atender-form,
  html body.page-analisis-de-riesgos .ar-cta > .atender-form--cta {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "name"
      "company"
      "phone"
      "email"
      "sector"
      "time"
      "message"
      "consent"
      "action"
      "legal"
      "status"
      "note" !important;
  }
}

/* Contacto: one ink surface — no nested gray/cream card around the fields. */
html body.page-contacto .contacto-main__aside {
  background: var(--dw-ink) !important;
  color: var(--dw-cream) !important;
}

html body.page-contacto :is(
  .contacto-form-card,
  .contacto-form-shell,
  .contacto-form-shell .atender-form,
  .atender-form--cta
) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body.page-contacto .contacto-form-shell .atender-field > label,
html body.page-contacto .atender-form--cta .atender-field > label {
  color: rgba(246, 240, 230, 0.82) !important;
}

html body.page-contacto .contacto-form-shell .atender-field > label:has(input[type="checkbox"]),
html body.page-contacto .atender-form--cta .atender-field > label:has(input[type="checkbox"]) {
  color: var(--dw-cream) !important;
}

html body.page-contacto .contacto-form-shell .atender-field-error,
html body.page-contacto .atender-form--cta .atender-field-error,
html body.page-contacto .atender-form--cta [role="alert"] {
  color: #fff !important;
}

html body.page-contacto .contacto-form-shell .atender-form [aria-invalid="true"],
html body.page-contacto .atender-form--cta [aria-invalid="true"] {
  border-color: #fff !important;
  box-shadow: none !important;
}

.atender-form-legal a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

/* --------------------------------------------------------------------------
   Adaptive field distribution

   The form variants do not all share the same first rows. Reset the legacy
   named areas here and let each real field combination consume the full row.
   -------------------------------------------------------------------------- */

html body:not(.page-inicio) form.atender-form.atender-form--cta {
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-areas: none !important;
}

html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field {
  grid-area: auto !important;
  grid-column: span 2 !important;
  min-width: 0;
}

html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field:has(textarea),
html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field:has(input[type="checkbox"]),
html body:not(.page-inicio) form.atender-form.atender-form--cta > p:has(button),
html body:not(.page-inicio) form.atender-form.atender-form--cta > :is(
  .atender-form-legal,
  .atender-form-status,
  .atender-form-note,
  [role="alert"]
) {
  grid-area: auto !important;
  grid-column: 1 / -1 !important;
  min-width: 0;
}

/* TRO: three fields above, then phone + email share a complete second row. */
html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="actividad"])
  > .atender-field:has(:is([name="telefono"], [name="email"])) {
  grid-column: span 3 !important;
}

/* DDA, PAS and Contacto: Nombre + Contacto are an even 50/50 pair. */
html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="contacto"])
  > .atender-field:has(:is([name="nombre"], [name="contacto"])) {
  grid-column: span 3 !important;
}

/* Vida / Salud: the audience choice gets its own complete row. */
html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="para_quien"])
  > .atender-field:has([name="para_quien"]) {
  grid-column: 1 / -1 !important;
}

@media (max-width: 960px) {
  html body:not(.page-inicio) form.atender-form.atender-form--cta {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas: none !important;
  }

  html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field {
    grid-area: auto !important;
    grid-column: span 1 !important;
  }

  /* Match the desktop exception specificity so no implicit columns survive. */
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="actividad"])
    > .atender-field:has(:is([name="telefono"], [name="email"])),
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="contacto"])
    > .atender-field:has(:is([name="nombre"], [name="contacto"])),
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="para_quien"])
    > .atender-field:has([name="para_quien"]) {
    grid-area: auto !important;
    grid-column: span 1 !important;
  }

  html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field:has(textarea),
  html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field:has(input[type="checkbox"]),
  html body:not(.page-inicio) form.atender-form.atender-form--cta > p:has(button),
  html body:not(.page-inicio) form.atender-form.atender-form--cta > :is(
    .atender-form-legal,
    .atender-form-status,
    .atender-form-note,
    [role="alert"]
  ),
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="actividad"])
    > .atender-field:has([name="email"]),
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="urgencia"])
    > .atender-field:has([name="urgencia"]) {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  html body:not(.page-inicio) form.atender-form.atender-form--cta {
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas: none !important;
  }

  html body:not(.page-inicio) form.atender-form.atender-form--cta > .atender-field,
  html body:not(.page-inicio) form.atender-form.atender-form--cta > p:has(button),
  html body:not(.page-inicio) form.atender-form.atender-form--cta > :is(
    .atender-form-legal,
    .atender-form-status,
    .atender-form-note,
    [role="alert"]
  ) {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
  }

  /* Match every desktop exception at mobile specificity as well. */
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="actividad"])
    > .atender-field:has(:is([name="telefono"], [name="email"])),
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="contacto"])
    > .atender-field:has(:is([name="nombre"], [name="contacto"])),
  html body:not(.page-inicio) form.atender-form.atender-form--cta:has([name="para_quien"])
    > .atender-field:has([name="para_quien"]) {
    grid-area: auto !important;
    grid-column: 1 / -1 !important;
  }
}
