/* =========================================================================
   contacto.css — Estilos propios de la página "Contacto".

   Contacto es funcional, no narrativa: el formulario es el protagonista.
   Una sola columna editorial (sin layouts paralelos): Hero → "Después" →
   Formulario. Sin CTA Azul final (el propio formulario ya es la acción
   principal). Inputs limpios, sin sombras ni estilos SaaS genéricos;
   foco muy visible.

   Reutiliza de los archivos globales:
     · .container ..................... layout.css
     · .visually-hidden ............... layout.css (honeypot)
     · .eyebrow ....................... components.css
     · .btn / .btn--primary .......... components.css
     · tokens de color, tipografía y espaciado ... variables.css
   ========================================================================= */

/* ---------------------------------------------------------------
   HERO — editorial, con aire. Sin CTA: el formulario es la acción.
   --------------------------------------------------------------- */

.ctc-hero {
    padding-block: var(--space-section-sm);
    background-color: var(--bg-page);              /* Cal */
}

.ctc-hero__inner {
    /* Sin max-width propio: es el .container global sin modificar, para
       compartir exactamente el mismo eje izquierdo que el resto de
       secciones. En móvil/tablet, columna simple; desde 60rem pasa a
       una composición de dos zonas (ver media query): título a un
       lado, texto de apoyo como contrapeso al otro. */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.ctc-hero__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.ctc-hero__title {
    max-width: 22ch;
    font-size: var(--fs-500);
    line-height: var(--lh-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--text-strong);
    text-wrap: balance;
}

.ctc-hero__text {
    max-width: 42ch;
    font-size: var(--fs-300);
    line-height: var(--lh-base);
    color: var(--text-strong);
}

/* ---------------------------------------------------------------
   >= 60rem · composición editorial de dos zonas.
   --------------------------------------------------------------- */

@media (min-width: 60rem) {
    .ctc-hero__inner {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
        align-items: center;
        gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
    }
    .ctc-hero__title {
        max-width: none;
    }
    .ctc-hero__text {
        max-width: 34ch;
    }
}

/* ---------------------------------------------------------------
   "DESPUÉS" + FORMULARIO — una sola sección, una sola columna de
   lectura contenida (sin columnas paralelas). "Después" funciona
   como introducción editorial antes del formulario, no como
   tarjeta ni bloque aparte. Fondo Piedra compartido: marca el paso
   desde el Hero y da continuidad a los dos bloques.
   --------------------------------------------------------------- */

.ctc-form-section {
    padding-block: clamp(var(--space-xl), 6vw, var(--space-2xl));
    background-color: var(--bg-surface);            /* Piedra */
}

.ctc-form-section__inner {
    /* Sin max-width propio: es el .container global sin modificar,
       mismo eje izquierdo que el Hero y que el resto del sitio. */
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* "Después" y el formulario son responsabilidades distintas, aunque
   compartan wrapper (a su vez el `.container` global sin modificar,
   mismo eje que el resto de páginas). "Después" gana presencia editorial
   con su propia composición de dos zonas en desktop (título | texto,
   ver media query) en vez de vivir en una columna estrecha perdida en
   la superficie de la sección. El formulario, debajo, sigue siendo una
   sola columna, pero con un ancho claramente generoso (~65-70% del
   container): es una composición de campos, no un párrafo, así que
   puede ocupar bastante más retícula sin perder legibilidad. */
.ctc-form-section__main {
    max-width: 52rem;                                /* ~832px, ~69% del container (1200px) */
}

.ctc-form-section__eyebrow {
    display: block;
    margin-bottom: var(--space-md);
}

.ctc-form-section__intro-title {
    font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
    line-height: var(--lh-snug);
    letter-spacing: -0.01em;
    color: var(--text-strong);
}

.ctc-form-section__intro-text {
    max-width: 40ch;
    margin-top: var(--space-sm);
    color: var(--text-strong);
}

/* ---------------------------------------------------------------
   >= 60rem · "Después" en dos zonas: eyebrow+H2 a la izquierda,
   texto de apoyo a la derecha como contrapeso. El formulario NO entra
   en este grid: sigue siempre debajo, a ancho completo de su propia
   columna generosa (.ctc-form-section__main).
   --------------------------------------------------------------- */

@media (min-width: 60rem) {
    .ctc-form-section__intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
        align-items: start;
        max-width: none;
    }
    .ctc-form-section__intro-text {
        margin-top: 0;
    }
}

/* --- Alerta de errores (resumen) -------------------------------- */

.ctc-form__alert {
    margin-bottom: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background-color: var(--color-cal);
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    color: var(--text-strong);
    font-size: var(--fs-200);
}

/* --- Formulario: campos ------------------------------------------ */
/* Una sola columna: cada campo ocupa todo el ancho de la columna de
   lectura. Sin fila Nombre/Empresa en paralelo. */

.ctc-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.ctc-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: 0;
    padding: 0;
    border: 0;
}

.ctc-field__label {
    font-size: var(--fs-200);
    font-weight: var(--fw-medium);
    color: var(--text-strong);
}

.ctc-field__hint {
    font-weight: var(--fw-regular);
    color: var(--text-muted);
}

.ctc-field__input {
    padding-block: var(--space-xs);
    padding-inline: var(--space-sm);
    background-color: var(--color-cal);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font-primary);
    font-size: var(--fs-200);
    line-height: var(--lh-base);         /* con el padding, altura ~52-54px */
    color: var(--text-strong);
    transition:
        border-color var(--dur-fast) var(--ease-out),
        background-color var(--dur-fast) var(--ease-out);
}

.ctc-field__input:hover {
    border-color: var(--border-strong);
}

.ctc-field__input::placeholder {
    color: var(--text-muted);
}

.ctc-field__input:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--accent);
}

.ctc-field__input[aria-invalid="true"] {
    border-color: var(--border-strong);
    box-shadow: inset 3px 0 0 #C0392B;
}

.ctc-field__input--textarea {
    min-height: 12rem;                   /* ~192px: campo principal del formulario, proporción con el nuevo ancho */
    padding-block: var(--space-sm);
    resize: vertical;
}

.ctc-field__error {
    font-size: var(--fs-100);
    color: #C0392B;
}

/* --- Envío -------------------------------------------------------- */

.ctc-form__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    margin-top: var(--space-2xs);
}

.ctc-form__actions .btn {
    padding-inline: var(--space-xl);
    min-height: 3rem;
}

.ctc-form__microcopy {
    font-size: var(--fs-100);
    color: var(--text-muted);
}

.ctc-form__privacy {
    margin-top: var(--space-2xs);
    font-size: var(--fs-100);
    color: var(--text-muted);
}
.ctc-form__privacy a {
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.ctc-form__privacy a:hover,
.ctc-form__privacy a:focus-visible {
    color: var(--text-strong);
}

@media (max-width: 39.99rem) {
    .ctc-form__actions .btn {
        width: 100%;
    }
}