/* ==========================================================================
   PÁGINA DE CONTACTO (v2) - IESTP Carlos Salazar Romero
   [FIX-23] Autocontenido: incluye estilos base de secciones, formulario y
            botones para no depender de contabilidad.css.
   Convención: prefijo csr- | Metodología BEM
   ========================================================================== */

:root {
    --csr-radius-xl: 20px;
    --csr-radius-2xl: 24px;
}

/* ==========================================================================
   0. BASE: SECCIONES, ENCABEZADOS Y BOTONES
   ========================================================================== */
.csr-section { padding: 5rem 0; background-color: var(--csr-color-white); }
.csr-section--light { background-color: var(--csr-color-base); }

.csr-section__header { text-align: center; max-width: 800px; margin: 0 auto 2.8rem; }

.csr-section__tag {
    display: inline-block;
    background-color: var(--csr-color-primary-light);
    color: var(--csr-color-primary);
    padding: 0.4rem 1.2rem;
    border-radius: var(--csr-radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.csr-section__title {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    color: var(--csr-color-primary-dark);
    font-weight: 700;
    margin-bottom: 0.8rem;
}

.csr-section__intro { font-size: 1.05rem; color: var(--csr-color-gray); line-height: 1.7; }

/* Botones genéricos */
.csr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.6rem;
    font-family: var(--csr-font-heading);
    font-weight: 600;
    font-size: 0.92rem;
    border-radius: var(--csr-radius-xl);
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.csr-btn--primary {
    background: linear-gradient(135deg, var(--csr-color-primary), var(--csr-color-primary-dark));
    color: var(--csr-color-white);
    box-shadow: 0 6px 20px rgba(0, 88, 171, 0.3);
}
.csr-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(0, 88, 171, 0.4); color: var(--csr-color-white); }

.csr-btn--outline { background-color: transparent; color: var(--csr-color-gray); border-color: var(--csr-color-gray-light); }
.csr-btn--outline:hover { border-color: var(--csr-color-primary); color: var(--csr-color-primary); }

/* ==========================================================================
   1. HERO DE CONTACTO
   ========================================================================== */
.csr-contact-hero {
    padding: 4.5rem 0 4rem;
    text-align: center;
    background: linear-gradient(135deg, var(--csr-color-primary-dark) 0%, var(--csr-color-primary) 100%);
    color: var(--csr-color-white);
    position: relative;
    overflow: hidden;
}

.csr-contact-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
    background-size: 26px 26px;
}

.csr-contact-hero .csr-container { position: relative; }

.csr-contact-hero__tag {
    display: inline-block;
    background-color: var(--csr-color-tertiary);
    color: var(--csr-color-dark);
    padding: 0.4rem 1.2rem;
    border-radius: var(--csr-radius-full);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.csr-contact-hero__title {
    color: var(--csr-color-white);
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 0.8rem;
}

.csr-contact-hero__intro {
    max-width: 640px;
    margin: 0 auto;
    font-size: 1.05rem;
    opacity: 0.92;
    line-height: 1.7;
}

/* ==========================================================================
   2. TARJETAS DE INFORMACIÓN
   ========================================================================== */
.csr-contact-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.4rem;
    margin-top: -4.5rem;
    position: relative;
    z-index: 2;
}

.csr-contact-card {
    background-color: var(--csr-color-white);
    border-radius: var(--csr-radius-2xl);
    padding: 1.8rem 1.2rem;
    text-align: center;
    box-shadow: var(--csr-shadow-lg);
    border-bottom: 4px solid var(--csr-color-tertiary);
    transition: all 0.3s ease;
}

.csr-contact-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--csr-shadow-xl);
    border-bottom-color: var(--csr-color-secondary);
}

.csr-contact-card__icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 1rem;
    border-radius: var(--csr-radius-full);
    background: linear-gradient(135deg, var(--csr-color-primary), var(--csr-color-primary-dark));
    color: var(--csr-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: var(--csr-shadow-md);
}

.csr-contact-card h3 { font-size: 1rem; margin-bottom: 0.5rem; color: var(--csr-color-primary-dark); }
.csr-contact-card p { color: var(--csr-color-gray); font-size: 0.9rem; line-height: 1.6; }
.csr-contact-card a { color: var(--csr-color-gray); transition: color 0.25s ease; }
.csr-contact-card a:hover { color: var(--csr-color-primary); }

/* ==========================================================================
   3. LAYOUT FORMULARIO + LATERAL
   ========================================================================== */
.csr-contact-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 2rem;
    align-items: start;
}

/* ---------- FORMULARIO (estilos completos) ---------- */
.csr-conta-form {
    background-color: var(--csr-color-white);
    padding: 2.2rem;
    border-radius: var(--csr-radius-2xl);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.csr-conta-form__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 1.8rem 0 1.3rem;
    padding-left: 0.8rem;
    border-left: 5px solid var(--csr-color-secondary);
    color: var(--csr-color-primary-dark);
}
.csr-conta-form__title:first-of-type { margin-top: 0; }
.csr-conta-form__title i { color: var(--csr-color-secondary); }

.csr-conta-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.csr-conta-form__group { margin-bottom: 1.1rem; position: relative; }

.csr-conta-form__group label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: var(--csr-color-dark-soft);
    font-size: 0.9rem;
}

.csr-conta-form__group input,
.csr-conta-form__group select,
.csr-conta-form__group textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 2px solid var(--csr-color-lighter);
    border-radius: var(--csr-radius-xl);
    font-family: var(--csr-font-body);
    font-size: 0.92rem;
    background-color: var(--csr-color-white);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.csr-conta-form__group textarea { resize: vertical; min-height: 110px; }

.csr-conta-form__group input:focus,
.csr-conta-form__group select:focus,
.csr-conta-form__group textarea:focus {
    outline: none;
    border-color: var(--csr-color-primary);
    box-shadow: 0 0 0 4px rgba(0, 88, 171, 0.1);
}

/* Mensaje de error: OCULTO por defecto */
.csr-conta-form__error {
    display: none;
    color: var(--csr-color-secondary);
    font-size: 0.75rem;
    margin-top: 0.3rem;
    font-weight: 500;
}

.csr-conta-form__group--invalid input,
.csr-conta-form__group--invalid select,
.csr-conta-form__group--invalid textarea {
    border-color: var(--csr-color-secondary);
    background-color: #fff5f5;
}

.csr-conta-form__group--invalid .csr-conta-form__error { display: block; }

/* Checkbox de términos */
.csr-conta-form__check { display: flex; align-items: flex-start; gap: 0.6rem; margin: 1.3rem 0; }
.csr-conta-form__check input { width: 18px; height: 18px; margin-top: 0.2rem; flex-shrink: 0; cursor: pointer; }
.csr-conta-form__check label { font-weight: 400; font-size: 0.85rem; color: var(--csr-color-gray); line-height: 1.5; cursor: pointer; }
.csr-conta-form__check .csr-conta-form__error { width: 100%; }

/* Acciones */
.csr-conta-form__actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.8rem;
    flex-wrap: wrap;
    padding-top: 1.3rem;
    border-top: 2px solid var(--csr-color-lighter);
}

/* Mensaje de éxito */
.csr-conta-form__success {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: linear-gradient(135deg, #e8f7f0, #d1fae5);
    border-left: 6px solid var(--csr-color-success, #2a9d8f);
    padding: 1.4rem;
    border-radius: var(--csr-radius-xl);
    margin-bottom: 1.6rem;
}
.csr-conta-form__success[hidden] { display: none; }
.csr-conta-form__success i { font-size: 1.8rem; color: var(--csr-color-success, #2a9d8f); flex-shrink: 0; }
.csr-conta-form__success h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.csr-conta-form__success p { font-size: 0.9rem; color: var(--csr-color-dark-soft); }

/* ---------- COLUMNA LATERAL ---------- */
.csr-contact-aside { display: flex; flex-direction: column; gap: 1.5rem; }

.csr-contact-map {
    border-radius: var(--csr-radius-2xl);
    overflow: hidden;
    box-shadow: var(--csr-shadow-lg);
    border: 2px solid var(--csr-color-lighter);
    height: 320px;
}

.csr-contact-map iframe { display: block; width: 100%; height: 100%; border: 0; }

.csr-contact-social {
    background: linear-gradient(135deg, var(--csr-color-secondary), var(--csr-color-secondary-dark));
    border-radius: var(--csr-radius-2xl);
    padding: 1.8rem;
    color: var(--csr-color-white);
    box-shadow: var(--csr-shadow-lg);
}

.csr-contact-social h3 { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; margin-bottom: 0.6rem; }
.csr-contact-social h3 i { color: var(--csr-color-tertiary); }
.csr-contact-social p { font-size: 0.9rem; opacity: 0.95; line-height: 1.6; margin-bottom: 1.1rem; }

.csr-contact-social__row { display: flex; gap: 0.7rem; }

.csr-contact-social__btn {
    width: 46px;
    height: 46px;
    border-radius: var(--csr-radius-full);
    background-color: rgba(255, 255, 255, 0.15);
    color: var(--csr-color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.csr-contact-social__btn:hover {
    transform: translateY(-4px) scale(1.05);
    background-color: var(--csr-color-white);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.csr-contact-social__btn--fb:hover { color: #1877f2; }
.csr-contact-social__btn--ig:hover { color: #e4405f; }
.csr-contact-social__btn--yt:hover { color: #ff0000; }
.csr-contact-social__btn--wa:hover { color: #25d366; }

/* ==========================================================================
   4. RESPONSIVE (incluido aquí para que nunca falte)
   ========================================================================== */
@media (max-width: 1100px) {
    .csr-contact-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 992px) {
    .csr-contact-cards { margin-top: -3rem; }
    .csr-contact-layout { grid-template-columns: 1fr; }
    .csr-contact-map { height: 300px; }
}

@media (max-width: 640px) {
    .csr-section { padding: 3rem 0; }
    .csr-section__header { margin-bottom: 2rem; }
    .csr-section__title { font-size: 1.6rem; }

    .csr-contact-hero { padding: 3.5rem 0 3rem; }
    .csr-contact-cards { grid-template-columns: 1fr; margin-top: -2.5rem; }

    .csr-conta-form { padding: 1.5rem; }
    .csr-conta-form__row { grid-template-columns: 1fr; gap: 0; }
    .csr-conta-form__actions { flex-direction: column; }
    .csr-conta-form__actions .csr-btn { width: 100%; }

    .csr-contact-map { height: 260px; }
    .csr-contact-social { padding: 1.4rem; }
}