.contact-container {
    width: 90%;
    max-width: 1200px;
    margin: 55px auto 90px auto;
    padding: 0 15px;
}

/* Sin badge de disponibilidad: el visitante ya esta en la pagina de contacto,
   que es justo donde ya no hace falta anunciarle que esta disponible. El badge
   se queda solo en el hero de la home. */

/* La linea decorativa de .titulo_seccion cuelga 10px por debajo del titulo
   (bottom: -10px). Sin margen superior aqui, el subtitulo se le monta encima. */
.contact-subtitle {
    margin: 24px 0 40px 110px !important;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 750px;
    opacity: 0.9;
}

/* Mismo margen lateral que el titulo y que el resto de grids del sitio
   (services.css usa 110px). Sin esto el formulario se sale 110px mas a la
   izquierda que el encabezado y la pagina se ve descentrada. */
.contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
    margin: 0 110px;
}

.contact-glass-form {
    position: relative;
    background: var(--nav-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 24px !important;
    padding: 35px !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06) !important;
}

.contact-glass-form .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.contact-glass-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.contact-glass-form label {
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.9;
    word-break: keep-all;
}

.contact-glass-form input,
.contact-glass-form select,
.contact-glass-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--lang-btn-border, rgba(0, 0, 0, 0.14));
    border-radius: 12px;
    background: var(--lang-btn-bg, rgba(255, 255, 255, 0.65));
    color: var(--card-text);
    font-family: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.contact-glass-form textarea {
    resize: vertical;
    min-height: 130px;
}

.contact-glass-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff0073' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 17px;
    padding-right: 42px;
    cursor: pointer;
}

.dark-mode .contact-glass-form select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a29bfe' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* El fondo translucido de la regla compartida no vale aqui: Windows y macOS
   dibujan la lista desplegable con su propio motor y un color con alfa deja
   los <option> en blanco. Solo el color se sobreescribe para no perder la
   flecha, que viene en background-image. */
.contact-glass-form select {
    background-color: var(--select-bg);
    color: var(--select-fg);
}

.contact-glass-form select option {
    background-color: var(--select-bg);
    color: var(--select-fg);
}

.contact-glass-form input:focus,
.contact-glass-form select:focus,
.contact-glass-form textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(255, 0, 115, 0.18);
}

.dark-mode .contact-glass-form input:focus,
.dark-mode .contact-glass-form select:focus,
.dark-mode .contact-glass-form textarea:focus {
    border-color: var(--logo-color);
    box-shadow: 0 0 0 3px rgba(162, 155, 254, 0.22);
}

.contact-details {
    margin: 0 0 18px;
    border: 1px solid var(--lang-btn-border, rgba(0, 0, 0, 0.14));
    border-radius: 12px;
    background: var(--lang-btn-bg, rgba(255, 255, 255, 0.65));
    overflow: hidden;
}

.contact-details-summary {
    padding: 13px 15px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--card-text);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.25s ease;
}

.contact-details-summary::-webkit-details-marker { display: none; }
.contact-details-summary::marker { content: ''; }

/* Flecha propia para no depender de la que dibuja el navegador. */
.contact-details-summary::before {
    content: '';
    flex: 0 0 auto;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--accent-color);
    border-bottom: 2px solid var(--accent-color);
    transform: rotate(45deg);
    transition: transform 0.25s ease, border-color 0.25s ease;
}

/* En dark mode el acento pasa a lila, igual que el resto de la pagina. */
.dark-mode .contact-details-summary::before {
    border-color: var(--logo-color);
}

.contact-details[open] .contact-details-summary::before {
    transform: rotate(-135deg);
}

.contact-details-summary:hover { color: var(--accent-color); }

.contact-details-summary:hover::before {
    border-color: var(--accent-color);
    transform: rotate(45deg) scale(1.15);
}

.dark-mode .contact-details-summary:hover { color: var(--logo-color); }

.dark-mode .contact-details-summary:hover::before {
    border-color: var(--logo-color);
}

.contact-details[open] .contact-details-summary:hover::before {
    transform: rotate(-135deg) scale(1.15);
}

.contact-details[open] .contact-details-summary {
    border-bottom: 1px solid var(--lang-btn-border, rgba(0, 0, 0, 0.14));
}

.contact-details-hint {
    margin: 12px 15px 0;
    font-size: 0.82rem;
    opacity: 0.75;
    line-height: 1.5;
}

/* .form-group trae width: 100% de la regla global. Con margenes laterales
   aqui eso suma 100% + 30px y el <details> lo recorta por la derecha, dejando
   la flecha del select pegada al borde. width: auto hace que el ancho sea el
   que sobra entre los margenes. */
.contact-details .form-group {
    margin: 14px 15px 0;
    width: auto;
}

.contact-details .form-group:last-child {
    margin-bottom: 16px;
}

.contact-details .form-group label {
    font-size: 0.85rem;
}

.contact-submit {
    width: 100%;
    margin-top: 4px;
    cursor: pointer;
}

.contact-glass-form button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
}

.contact-form-note {
    margin: 0;
    font-size: 0.78rem;
    opacity: 0.65;
    text-align: center;
}

.contact-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact-side-card {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 24px !important;
    padding: 28px !important;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.06) !important;
}

.contact-side-title {
    font-size: 1.12rem;
    font-weight: 700;
    margin: 0 0 18px !important;
    color: var(--logo-color);
}

.contact-steps {
    margin: 0;
    padding-left: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.contact-steps li {
    line-height: 1.6;
    font-size: 0.94rem;
    opacity: 0.92;
}

.contact-steps li::marker {
    color: var(--accent-color);
    font-weight: 700;
}

.dark-mode .contact-steps li::marker {
    color: var(--logo-color);
}

.contact-other-text {
    margin: 0 0 14px;
    line-height: 1.6;
    font-size: 0.94rem;
    opacity: 0.9;
}

.contact-mail-link {
    display: inline-block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--logo-color);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.25s ease;
}

.contact-mail-link:hover,
.contact-mail-link:focus-visible {
    color: var(--accent-color);
}

.dark-mode .contact-mail-link:hover,
.dark-mode .contact-mail-link:focus-visible {
    color: var(--logo-color);
    text-decoration: underline;
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
    .contact-subtitle { margin-left: 40px !important; }
    .contact-layout { margin: 0 40px; }
}

@media (max-width: 900px) {
    .contact-layout {
        grid-template-columns: 1fr;
    }
    .contact-subtitle { margin-left: 40px !important; }
}

@media (max-width: 768px) {
    .contact-container {
        width: 92%;
        margin: 40px auto 70px;
    }
    /* El titulo tambien pasa a margen 0 aqui, asi que el grid lo sigue. */
    .contact-layout {
        margin: 0;
    }
    .contact-subtitle {
        margin-left: 0 !important;
        font-size: 1rem;
        text-align: center;
    }
    .contact-glass-form {
        padding: 24px 18px !important;
        border-radius: 18px !important;
    }
    .contact-glass-form .form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }
    .contact-side-card {
        padding: 24px 20px !important;
        border-radius: 18px !important;
    }
}