/* Contacto v3 — página completa.
   Consume tokens.css + base.css + components.css.
   Fuente visual: Contacto.dc.html:186-343 (comportamiento en su dc-script, 435-795).

   Notas de traducción del template a CSS:

   1. El único valor de esta página que depende del ancho es el padding del bloque: el dc-script
      lo resuelve con `mob = w < 760` (línea 621, `pagePad` en 684). Aquí la base es el caso móvil
      y una sola media query abre a partir de 760 px. Los demás ternarios del dc-script (planCols,
      tCols, compMinW…) son de otras páginas del export y no tocan nada de esta.
   2. `dcRise` del template (helmet, línea 45) es idéntico a `dcFadeUp` de base.css, así que se
      reutiliza ese; no hace falta ningún keyframe propio de página.
   3. Los estados que el template calcula en JS —chip de tema activo (711), variante del panel
      "Qué pasa después" (712-713), pregunta corta abierta (744-746) y fila de prefijo elegida
      (707)— son aquí clases y atributos: .is-active, [hidden], [aria-expanded="true"] y
      .dropdown__row--selected, que mueven modules/contactform.js y modules/accordion.js.
   4. El selector de prefijo hereda el componente .dropdown de components.css; aquí solo van las
      medidas propias del template, que no son las del selector de país del topbar (panel de
      280 px a 6 px del borde, lista de 220 px, filas con nombre y prefijo). */

/* ---------- fondo y caja de la página (Contacto.dc.html:187-188) ---------- */
.ct{background:#f7faf8;background-image:radial-gradient(700px 420px at 12% -60px,rgba(127,214,163,.35),rgba(127,214,163,0) 65%),radial-gradient(760px 460px at 88% -80px,rgba(46,139,87,.22),rgba(46,139,87,0) 65%),radial-gradient(1100px 520px at 50% -120px,#e7f0e9,rgba(231,240,233,0) 60%);background-repeat:no-repeat}
/* .container ya pone el padding lateral; aquí se le añade el vertical del template */
.ct__inner{padding:36px clamp(18px,4vw,28px) 40px;display:flex;flex-direction:column;gap:34px}

/* ---------- 1 · hero (Contacto.dc.html:190-195) ---------- */
.ct-hero{display:flex;flex-direction:column;gap:16px;align-items:center;text-align:center;animation:dcFadeUp .5s ease .06s backwards}
.ct-hero__eyebrow{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--c-brand)}
.ct-hero__title{margin:0;font-size:clamp(30px,4.8vw,46px);font-weight:700;line-height:1.12;letter-spacing:-.02em;max-width:720px;text-wrap:balance}
.ct-hero__grad{background:linear-gradient(92deg,#1e5c3a,#2e8b57 55%,#7fd6a3);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;margin-right:-.06em}
.ct-hero__lead{margin:0;font-size:clamp(15px,1.6vw,18px);line-height:1.55;color:var(--c-secondary);max-width:520px;text-wrap:pretty}

/* ---------- 2 · rejilla de dos columnas (Contacto.dc.html:197) ---------- */
.ct-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:18px;max-width:1020px;margin:0 auto;width:100%;align-items:start;animation:dcFadeUp .5s ease .14s backwards}

/* ---------- 3 · formulario (Contacto.dc.html:199-284) ---------- */
.ct-form{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);box-shadow:0 2px 10px rgba(23,36,28,.06);padding:28px 26px;display:flex;flex-direction:column;gap:16px}

.ct-field{display:flex;flex-direction:column;gap:6px}
.ct-field__label{font-size:12.5px;font-weight:600;color:var(--c-secondary)}
.ct-field__opt{font-weight:500;color:var(--c-disabled)}
/* las dos filas de dos campos del template (líneas 206 y 216) */
.ct-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:12px}

.ct-input{width:100%;box-sizing:border-box;background:var(--c-white);border:1px solid var(--c-border-input);border-radius:var(--r-btn);padding:12px 14px;font-size:14px;font-family:inherit;color:var(--c-ink);outline:none;transition:border-color .15s,box-shadow .15s}
.ct-input:focus{border-color:var(--c-brand);box-shadow:var(--sh-focus)}
/* validación: mismo rojo que la caja de error del template; contactform.js pone la clase al
   enviar y la quita en cuanto se cambia algo dentro del campo */
.ct-input.is-invalid{border-color:#b3452c}
.ct-input.is-invalid:focus{border-color:#b3452c;box-shadow:0 0 0 3px rgba(179,69,44,.12)}
.ct-textarea{resize:vertical;min-height:110px}

/* teléfono: prefijo + número (Contacto.dc.html:219-248) */
/* teléfono: intl-tel-input v29 vendorizado (cambios ronda 2, «1 solo input») con la piel del
   sistema. La estructura, el sprite de banderas y el hueco del chip los pone el css del vendor
   (cargado ANTES que esta hoja); aquí solo el aspecto v3. El desplegable en móvil se monta como
   popup en el body (.iti--fullscreen-popup): por eso estas reglas no van scoped a .ct-phone. */
.ct-phone{display:flex}
.ct-phone .iti{width:100%;--iti-border-color:var(--c-border-input);--iti-hover-color:#f4f8f5;--iti-country-selector-bg:var(--c-white)}
/* chip bandera+prefijo dentro del campo, con la letra del disparador antiguo; el radio
   izquierdo copia el del input para que el fondo del hover no tape sus esquinas redondas */
.iti__selected-country{color:var(--c-ink);border-radius:calc(var(--r-btn) - 2px) 0 0 calc(var(--r-btn) - 2px);overflow:hidden}
.iti__selected-dial-code{font-size:14px;font-weight:600;color:var(--c-ink);margin-left:2px}
/* menos aire entre el chevron y el prefijo (el vendor deja 7px + 4px) */
.iti__selected-country-primary{padding-right:3px}
.iti__arrow{border-top-color:var(--c-muted)}
.iti__flag{border-radius:2px}
/* la caja del desplegable, como los paneles .dropdown del sistema */
.iti--inline-country-selector .iti__country-selector{border:1px solid var(--c-border-card);border-radius:var(--r-sub);box-shadow:0 12px 32px rgba(23,36,28,.14)}
.iti__search-input{font-family:inherit;font-size:13px;padding-top:10px;padding-bottom:10px;outline:none;color:var(--c-ink)}
.iti__country{font-size:13px;color:var(--c-ink);padding-top:9px;padding-bottom:9px}
.iti__country .iti__dial-code{font-size:12.5px;color:var(--c-muted)}
/* el popup móvil hereda la letra del body; solo se le pone el radio v3 */
.iti--fullscreen-popup .iti__country-selector{border-radius:var(--r-sub)}

/* chips de tema (Contacto.dc.html:255-261) */
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{padding:8px 15px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;background:var(--c-white);color:var(--c-body);border:1px solid var(--c-border-input);transition:all .15s}
.ct-chip:hover{border-color:var(--c-brand)}
.ct-chip.is-active{background:var(--c-green-ink);color:var(--c-white);border-color:var(--c-green-ink)}

/* el widget de reCAPTCHA no está en el template: se centra y se le deja respirar como al resto
   de bloques de la tarjeta, y se encoge en pantallas por debajo de su ancho fijo (304 px) */
.ct-captcha{display:flex;justify-content:center}
.ct-captcha .g-recaptcha{transform-origin:center top}
@media (max-width:400px){
  .ct-captcha .g-recaptcha{transform:scale(.85)}
}

.ct-form__error{margin:0;font-size:12.5px;color:#b3452c;background:#fdf1ee;border:1px solid #f3d2c8;border-radius:var(--r-btn);padding:10px 13px}
.ct-form__error[hidden]{display:none}

/* botón propio, no .btn-cta: el del template no se levanta al pasar por encima — cambia el
   degradado por un verde plano y solo se hunde al pulsar (línea 270) */
.ct-form__submit{background:var(--g-cta);color:var(--c-white);text-align:center;border:0;border-radius:var(--r-sub);padding:15px;font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:var(--sh-cta);transition:background .15s,transform .12s}
.ct-form__submit:hover{background:var(--c-brand-hover)}
.ct-form__submit:active{transform:scale(.98)}
.ct-form__submit i{font-size:12px;line-height:1;margin-left:7px;display:inline-block;vertical-align:-1px}
.ct-form__submit[disabled]{opacity:.6;cursor:default}
.ct-form__note{font-size:11.5px;color:var(--c-muted);text-align:center}
.ct-form__note a{color:var(--c-secondary);text-decoration:underline}

/* ---------- 4 · columna derecha (Contacto.dc.html:286-343) ---------- */
.ct-side{display:flex;flex-direction:column;gap:16px}

.ct-next{background:var(--c-green-ink);background-image:radial-gradient(420px 220px at 85% -30px,rgba(127,214,163,.2),transparent 65%);border-radius:var(--r-card);padding:28px 26px;display:flex;flex-direction:column;gap:18px;color:var(--c-white)}
.ct-next[hidden]{display:none}
.ct-next__title{margin:0;font-size:16.5px;font-weight:700}
.ct-next__step{display:flex;gap:13px;align-items:flex-start}
.ct-next__num{width:26px;height:26px;border-radius:50%;background:rgba(127,214,163,.18);color:var(--c-dark-check);font-size:12.5px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.ct-next__text{font-size:13.5px;line-height:1.6;color:#d9e5dc}
.ct-next__text b{color:var(--c-white)}

.ct-quick{background:var(--c-white);border:1px solid var(--c-border-card);border-radius:var(--r-card);padding:20px 24px;display:flex;align-items:center;gap:14px;transition:transform .2s ease,box-shadow .2s ease}
.ct-quick:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,36,28,.09)}
.ct-quick__icon{width:40px;height:40px;border-radius:50%;background:var(--c-tint-badge);display:flex;align-items:center;justify-content:center;flex:none}
.ct-quick__icon i{font-size:17px;color:var(--c-green-text);line-height:1}
.ct-quick__copy{display:flex;flex-direction:column;gap:2px;flex:1}
.ct-quick__title{margin:0;font-size:14px;font-weight:700;color:var(--c-ink)}
.ct-quick__text{font-size:12.5px;color:var(--c-muted)}
.ct-quick > i{font-size:15px;color:var(--c-brand);line-height:1}

/* preguntas cortas plegables (Contacto.dc.html:331-341) */
.ct-faqs{display:flex;flex-direction:column;gap:3px;padding:0 4px}
.ct-faqs__title{font-size:12.5px;font-weight:600;color:var(--c-muted);margin-bottom:5px}
.ct-faqs__item{display:flex;flex-direction:column}
.ct-faqs__q{background:none;border:0;padding:5px 0;font-family:inherit;font-size:13px;color:var(--c-secondary);line-height:1.5;cursor:pointer;text-align:left;text-decoration:underline;text-decoration-color:#c3cfc7;text-underline-offset:3px;align-self:flex-start;transition:color .15s}
.ct-faqs__q:hover{color:var(--c-green-text);text-decoration-color:var(--c-brand)}
.ct-faqs__q[aria-expanded="true"]{color:var(--c-ink)}
.ct-faqs__a{margin:0;padding:2px 0 9px;font-size:12.5px;color:var(--c-muted);line-height:1.6;text-wrap:pretty}
.ct-faqs__a[hidden]{display:none}
/* el contenido llega de BD como <p>…</p>; sin esto heredaría los márgenes por defecto */
.ct-faqs__a p{margin:0}
.ct-faqs__a p+p{margin-top:6px}
.ct-faqs__all{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--c-brand);margin-top:7px;align-self:flex-start;border-bottom:1px solid var(--c-border-success);padding-bottom:2px;transition:all .15s}
.ct-faqs__all:hover{color:var(--c-green-text);border-color:var(--c-brand)}
.ct-faqs__all i{font-size:12px;line-height:1}

/* ---------- ancho >= 760 px: el bloque recupera su padding grande (Contacto.dc.html:684) ---------- */
@media (min-width:760px){
  .ct__inner{padding:clamp(54px,8vw,90px) clamp(18px,4vw,28px) clamp(40px,6vw,64px)}
}