/**
 * Academia SSDN — Contacto (/contacto/, [ssdn_contacto])
 * =======================================================
 * Layout from ssdn-redesign/contacto-proposal.html (two-column version);
 * every colour and type size from academy-tokens.css ("Academy - Type &
 * Color Spec.md" → Contact page). Spacing matches the homepage hero:
 * 64px above, 104px below (34 / 64 on phones), gutters 44 / 34 / 22.
 *
 * Two parts:
 *   1. The page (ours).       `body .ssdn-contacto` resets beat the
 *      Elementor kit's `.elementor-kit-N p / a / h2` rules (0,1,1);
 *      classed rules (0,2,0) beat those resets.
 *   2. The Elementor form.    Elementor prints each Form widget's style
 *      settings (defaults included) as `.elementor-N .elementor-element
 *      .elementor-element-xxx .elementor-field-group …`, up to 7 classes.
 *      The rules that must win over those carry !important, scoped to
 *      .ssdn-contacto .ssdn-ct-form so no other form on the site is
 *      touched. Leave the Form widget's Style tab at its defaults.
 */

.ssdn-contacto {
  --ct-wrap: 1180px;
  --ct-gutter: var(--gutter-desktop);
  --ct-field-border: rgba(17, 34, 65, 0.50);   /* 3.3:1 on white — spec addition, see the doc */

  background: var(--ssdn-navy);
  color: var(--text-1-dark);
  font: var(--t-body);
  text-wrap: pretty;
  -webkit-text-size-adjust: 100%;
}

.ssdn-contacto *,
.ssdn-contacto *::before,
.ssdn-contacto *::after { box-sizing: border-box; }

body .ssdn-contacto :is(p, h1, h2, ul) { margin: 0; color: inherit; }
body .ssdn-contacto a { color: inherit; }
.ssdn-contacto .ssdn-ct-aside :focus-visible { outline: 2px solid var(--ssdn-orange); outline-offset: 3px; border-radius: 4px; }

.ssdn-contacto .ssdn-ct-wrap { max-width: var(--ct-wrap); margin: 0 auto; padding: 0 var(--ct-gutter); }

/* The Elementor container + Shortcode widget holding [ssdn_contacto] add
   nothing, whatever their settings: the page's spacing is all ours, as on
   the homepage (where the same zeros are set in Elementor by hand).
   Without this, Elementor's default container padding (10px) and the
   kit's widget spacing (20px) sit around the page. Specificity (0,4,1)
   beats Elementor's per-element rules (0,3,0), so no !important. */
body .e-con:has(> .elementor-widget-shortcode .ssdn-contacto) {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --margin-top: 0px;
  --margin-right: 0px;
  --margin-bottom: 0px;
  --margin-left: 0px;
}
body .elementor-widget-shortcode:has(> .elementor-shortcode > .ssdn-contacto) {
  margin: 0;
  padding: 0;
}

/* 1. The page ============================================================ */

.ssdn-contacto .ssdn-ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 580px);
  gap: 64px;
  align-items: start;
  padding-top: 64px;
  padding-bottom: 104px;
}

/* Intro */
.ssdn-contacto .ssdn-ct-eyebrow {
  font: var(--t-eyebrow); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ssdn-blue);
}
.ssdn-contacto .ssdn-ct-title {
  margin-top: 12px;
  font: var(--t-h1); letter-spacing: -.01em; color: var(--text-1-dark);
  text-wrap: balance;
}
.ssdn-contacto .ssdn-ct-lede {
  margin-top: 12px; max-width: 34em;
  font: var(--t-lede); color: var(--text-2-dark);
}

/* Podemos ayudarle con: — plain list, two columns */
.ssdn-contacto .ssdn-ct-temas { margin-top: 44px; }
.ssdn-contacto .ssdn-ct-temas__title {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 1px solid rgba(209, 221, 220, 0.12);
  font: var(--t-item); color: var(--text-1-dark);
}
body .ssdn-contacto .ssdn-ct-temas__list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px;
}
.ssdn-contacto .ssdn-ct-temas__list li {
  display: flex; align-items: flex-start; gap: 12px;
  font: var(--t-body); color: var(--text-2-dark);
}
.ssdn-contacto .ssdn-ct-temas__list svg { flex: none; margin-top: 3px; color: var(--ssdn-blue); }

/* ¿Necesita una respuesta rápida? */
.ssdn-contacto .ssdn-ct-faq {
  margin-top: 34px; padding: 22px 26px;
  background: var(--surface-dark); border: 1px solid var(--border-dark); border-radius: var(--r-card);
}
.ssdn-contacto .ssdn-ct-faq__title { font: var(--t-card); color: var(--text-1-dark); }
.ssdn-contacto .ssdn-ct-faq__text { margin-top: 8px; max-width: 34em; font: var(--t-body); color: var(--text-2-dark); }
body .ssdn-contacto .ssdn-ct-faq__link {
  display: inline-block; margin-top: 12px;
  font: 600 14px/1.3 var(--font-ui); color: var(--ssdn-gold);
  text-decoration: underline; text-decoration-color: rgba(239, 173, 66, 0.45); text-underline-offset: 4px;
}
body .ssdn-contacto .ssdn-ct-faq__link:hover { text-decoration-color: var(--ssdn-gold); }

/* Form card */
.ssdn-contacto .ssdn-ct-card {
  background: #fff; color: var(--text-1-light);
  border-radius: var(--r-panel); padding: 34px;
}
.ssdn-contacto .ssdn-ct-card__title { margin-bottom: 26px; font: var(--t-h2); color: var(--text-1-light); }
.ssdn-contacto .ssdn-ct-card:has(.elementor-message-success) .ssdn-ct-card__title { display: none; }
.ssdn-contacto .ssdn-ct-note { font: var(--t-body); color: var(--text-2-light); }

/* 2. The Elementor form =================================================== */

/* The template's own container / section padding */
.ssdn-contacto .ssdn-ct-form {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --widgets-spacing: 0px;
  --widgets-spacing-row: 0px;
  --widgets-spacing-column: 0px;
}
.ssdn-contacto .ssdn-ct-form :is(.e-con, .e-con-inner, .elementor-widget-wrap, .elementor-element-populated) {
  padding: 0 !important;
  background: none !important;
}
.ssdn-contacto .ssdn-ct-form :is(.elementor-section, .elementor-container) { max-width: none !important; }

/* Grid: 16px between columns, 22px between rows */
.ssdn-contacto .ssdn-ct-form .elementor-form-fields-wrapper {
  display: flex !important; flex-wrap: wrap !important;
  margin: 0 -8px !important; row-gap: 22px;
}
.ssdn-contacto .ssdn-ct-form .elementor-field-group {
  padding: 0 8px !important; margin: 0 !important;
}

/* Labels */
.ssdn-contacto .ssdn-ct-form .elementor-field-label {
  display: block; margin: 0 0 8px !important; padding: 0 !important;
  font: 600 13px/1.3 var(--font-ui) !important; color: var(--text-1-light) !important;
}
.ssdn-contacto .ssdn-ct-form .elementor-mark-required .elementor-field-label::after { content: none !important; }

/* Inputs, select, textarea */
.ssdn-contacto .ssdn-ct-form .elementor-field-group .elementor-field-textual {
  width: 100%; min-height: 48px !important; padding: 12px 14px !important; margin: 0;
  font: var(--t-input) !important; color: var(--text-1-light) !important;
  background: #fff !important;
  border: 1px solid var(--ct-field-border) !important; border-radius: var(--r-btn) !important;
  box-shadow: none !important;
}
.ssdn-contacto .ssdn-ct-form .elementor-field-group textarea.elementor-field-textual { min-height: 150px !important; line-height: 1.55 !important; resize: vertical; }
.ssdn-contacto .ssdn-ct-form .elementor-field-textual::placeholder { color: var(--text-3-light) !important; opacity: 1; }
.ssdn-contacto .ssdn-ct-form .elementor-field-group .elementor-field-textual:hover { border-color: var(--text-1-light) !important; }
.ssdn-contacto .ssdn-ct-form .elementor-field-group .elementor-field-textual:focus {
  outline: 2px solid var(--text-1-light) !important; outline-offset: 1px;
  border-color: var(--text-1-light) !important;
}
.ssdn-contacto .ssdn-ct-form .elementor-select-wrapper select { padding-right: 40px !important; cursor: pointer; }
.ssdn-contacto .ssdn-ct-form .elementor-select-wrapper :is(.select-caret-down-wrapper, .select-caret-down-wrapper svg) {
  color: var(--text-1-light) !important; fill: currentColor !important; right: 14px;
}

/* Help text: an Elementor "HTML" field right after Mensaje, 6px below it */
.ssdn-contacto .ssdn-ct-form .elementor-field-type-html {
  margin-top: -16px !important;
  font: var(--t-meta) !important; color: var(--text-3-light) !important;
}
.ssdn-contacto .ssdn-ct-form .elementor-field-type-html :is(p, span) { margin: 0; font: inherit; color: inherit; }

/* Enviar mensaje — the page's one orange button */
.ssdn-contacto .ssdn-ct-form .e-form__buttons { margin-top: 4px !important; }
.ssdn-contacto .ssdn-ct-form .elementor-button {
  width: 100%; min-height: 48px !important; padding: 0 22px !important;
  border: 0 !important; border-radius: var(--r-btn) !important;
  background: var(--ssdn-orange) !important; color: var(--ssdn-navy) !important;
  font: var(--t-button) !important;
  text-transform: none !important;   /* the kit uppercases every .elementor-button */
  letter-spacing: 0 !important;
  transition: background-color .15s;
}
.ssdn-contacto .ssdn-ct-form .elementor-button:hover { background: #F47A55 !important; }
.ssdn-contacto .ssdn-ct-form .elementor-button:focus-visible { outline: 2px solid var(--ssdn-navy) !important; outline-offset: 2px; }
.ssdn-contacto .ssdn-ct-form .elementor-button :is(.elementor-button-text, .elementor-button-content-wrapper) { color: inherit !important; font: inherit !important; }

/* Messages after sending */
.ssdn-contacto .ssdn-ct-form .elementor-message {
  margin: 16px 0 0 !important; font: var(--t-body) !important;
}
.ssdn-contacto .ssdn-ct-form .elementor-message::before { content: none !important; }
.ssdn-contacto .ssdn-ct-form .elementor-message-danger,
.ssdn-contacto .ssdn-ct-form .elementor-error .elementor-message { color: #B3261E !important; }

/* Sent: the fields go, the success message becomes the confirmation.
   Its heading ("Mensaje enviado") comes from library/contacto.php via
   --ssdn-ct-enviado on the card. */
.ssdn-contacto .ssdn-ct-form .elementor-form:has(.elementor-message-success) .elementor-form-fields-wrapper { display: none !important; }
.ssdn-contacto .ssdn-ct-form .elementor-message-success {
  margin: 0 !important; color: var(--text-2-light) !important;
}
.ssdn-contacto .ssdn-ct-form .elementor-message-success::before {
  content: var(--ssdn-ct-enviado) !important;
  display: block; margin-bottom: 8px;
  font: var(--t-h2); color: var(--text-1-light);
}

/* Responsive ============================================================== */

/* Tablet: one column, everything full width so the list, FAQ box and form
   card share one right edge. Paragraphs keep their 34em line length. */
@media (max-width: 1080px) {
  .ssdn-contacto { --ct-gutter: 34px; }
  .ssdn-contacto .ssdn-ct-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

@media (max-width: 720px) {
  .ssdn-contacto { --ct-gutter: var(--gutter-mobile); }
  .ssdn-contacto .ssdn-ct-grid { padding-top: 34px; padding-bottom: 64px; }
  .ssdn-contacto .ssdn-ct-title { font: var(--t-h1-m); letter-spacing: 0; }
  .ssdn-contacto .ssdn-ct-lede { font: var(--t-lede-m); }
  .ssdn-contacto .ssdn-ct-temas { margin-top: 34px; }
  body .ssdn-contacto .ssdn-ct-temas__list { grid-template-columns: 1fr; }
  .ssdn-contacto .ssdn-ct-card { padding: 22px; border-radius: 18px; }
  .ssdn-contacto .ssdn-ct-card__title { margin-bottom: 22px; font: var(--t-h2-m); }

  /* Every field full width on phones, whatever the widget's column widths */
  .ssdn-contacto .ssdn-ct-form .elementor-field-group { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; }
}