/* ── Layout principal ────────────────────────────────────────────────────── */
.contacto-pagina {
    max-width: var(--pcontacto-ancho, 720px);
    margin: 0 auto;
    padding: var(--pcontacto-padding-top, 3rem) 1.25rem;
    background-color: var(--pcontacto-pagina-fondo, transparent);
    color: var(--dark-color, #222);
}

/* Modo dos columnas: ancho ampliado y disposición flex */
.contacto-pagina--split {
    max-width: var(--pcontacto-ancho-split, 1080px);
}
.contacto-pagina--split .contacto-pagina__layout {
    display: flex;
    gap: 2.5rem;
    align-items: stretch;
}
.contacto-pagina__main  { flex: var(--pcontacto-split-main, 60); min-width: 0; }
.contacto-pagina__aside { flex: var(--pcontacto-split-aside, 40); min-width: 0; }

/* ── Columna lateral (imagen + textos) ───────────────────────────────────── */
.contacto-pagina__aside {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border-radius: .5rem;
    background-color: var(--pcontacto-aside-fondo, transparent);
    text-align: var(--pcontacto-aside-alineacion, left);
}
.contacto-pagina__aside-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--pcontacto-aside-imagen-radio, .5rem);
    object-fit: cover;
}
.contacto-pagina__aside-titulo {
    margin: 0;
    font-size: var(--pcontacto-aside-titulo-tam, 1.5rem);
    font-weight: 700;
    color: var(--pcontacto-aside-titulo-color, var(--dark-color, #222));
}
.contacto-pagina__aside-texto {
    margin: 0;
    font-size: var(--pcontacto-aside-texto-tam, 1rem);
    line-height: 1.6;
    color: var(--pcontacto-aside-texto-color, var(--text-muted, #6c757d));
}

/* ── Bloque de datos de contacto (dirección / teléfono / email) ──────────── */
.contacto-pagina__datos {
    margin-top: 1.75rem;
    text-align: left;
}
.contacto-pagina__datos-titulo {
    margin: 0 0 .75rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--pcontacto-datos-titulo-color, var(--dark-color, #222));
}
.contacto-pagina__datos-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.contacto-pagina__datos-item {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .95rem;
    line-height: 1.5;
    color: var(--pcontacto-datos-color, var(--dark-color, #222));
}
.contacto-pagina__datos-item svg {
    flex-shrink: 0;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: .1rem;
    color: var(--primary-color, #8CD50B);
}
.contacto-pagina__datos-item a {
    color: inherit;
    text-decoration: none;
}
.contacto-pagina__datos-item a:hover { text-decoration: underline; }

/* ── Cabecera ────────────────────────────────────────────────────────────── */
.contacto-pagina__titulo {
    font-size: var(--pcontacto-titulo-tam, 2.25rem);
    font-weight: var(--pcontacto-titulo-peso, 700);
    font-family: var(--pcontacto-titulo-fuente, inherit);
    margin: 0 0 .35rem;
    color: var(--pcontacto-titulo-color, var(--dark-color, #222));
}

.contacto-pagina__subtitulo {
    font-size: var(--pcontacto-subtitulo-tam, 1rem);
    color: var(--pcontacto-subtitulo-color, var(--text-muted, #6c757d));
    opacity: .9;
    margin: 0 0 2rem;
}

/* ── Avisos ──────────────────────────────────────────────────────────────── */
.contacto-pagina__alert {
    border-radius: .5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.contacto-pagina__alert--ok  { background: #eefbf0; border: 1px solid #b7e4c0; color: #1e7e34; }
.contacto-pagina__alert--err { background: #fff3f3; border: 1px solid #f5c6cb; color: #c0392b; }
.contacto-pagina__actions-ok { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }

/* ── Formulario ──────────────────────────────────────────────────────────── */
.contacto-pagina form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
.contacto-pagina__field { display: flex; flex-direction: column; }
.contacto-pagina__field--full { grid-column: 1 / -1; }

.contacto-pagina__label {
    font-size: var(--pcontacto-label-tam, .8125rem);
    font-weight: 500;
    margin-bottom: .3rem;
    color: var(--pcontacto-label-color, var(--dark-color, #222));
}

.contacto-pagina__input,
.contacto-pagina textarea {
    width: 100%;
    box-sizing: border-box;
    background: var(--pcontacto-input-fondo, var(--bg-white, #fff));
    color: var(--dark-color, #222);
    border: 1px solid var(--pcontacto-input-borde, var(--border-color, #c4c9cf));
    border-radius: var(--pcontacto-input-radio, .375rem);
    padding: .7rem .875rem;
    font-size: .95rem;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}

.contacto-pagina__input:focus,
.contacto-pagina textarea:focus {
    border-color: var(--pcontacto-input-foco, var(--primary-color, #8CD50B));
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pcontacto-input-foco, var(--primary-color, #8CD50B)) 25%, transparent);
}

/* ── Checkboxes legales ──────────────────────────────────────────────────── */
.contacto-pagina__check {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .9rem;
}
.contacto-pagina__check input {
    width: 1.05rem; height: 1.05rem; margin-top: .1rem;
    accent-color: var(--primary-color, #8CD50B);
    flex-shrink: 0;
}
.contacto-pagina__check a { color: var(--primary-color, #8CD50B); }

/* ── Botones ─────────────────────────────────────────────────────────────── */
.contacto-pagina__btn {
    grid-column: 1 / -1;
    justify-self: start;
    background: var(--pcontacto-btn-fondo, var(--primary-color, #8CD50B));
    color: var(--pcontacto-btn-color, var(--dark-color, #222));
    border: 0;
    border-radius: var(--pcontacto-btn-radio, .375rem);
    padding: .8rem 2rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s, color .15s, opacity .15s;
}
.contacto-pagina__btn:hover:not(:disabled) {
    opacity: .88;
}
.contacto-pagina__btn:disabled { opacity: .5; cursor: not-allowed; }

.contacto-pagina__btn-secundario {
    display: inline-block;
    border: 1px solid var(--dark-color, #222);
    border-radius: var(--pcontacto-btn-radio, .375rem);
    padding: .7rem 1.5rem;
    text-decoration: none;
    color: var(--dark-color, #222);
    font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
    .contacto-pagina--split .contacto-pagina__layout { flex-direction: column; }
    .contacto-pagina__aside { order: 2; }
}
@media (max-width: 560px) {
    .contacto-pagina form { grid-template-columns: 1fr; }
}

:root {
    --pcontacto-titulo-tam: 3rem;
    --pcontacto-titulo-peso: 700;
    --pcontacto-titulo-color: var(--terciario-color);
    --pcontacto-titulo-fuente: var(--font-1);
    --pcontacto-subtitulo-tam: 1rem;
    --pcontacto-subtitulo-color: var(--secondary-color);
    --pcontacto-label-tam: 0.75rem;
    --pcontacto-label-color: var(--secondary-color);
    --pcontacto-btn-fondo: var(--primary-color);
    --pcontacto-btn-color: var(--secondary-color);
    --pcontacto-btn-radio: 0.5rem;
    --pcontacto-ancho: 960px;
    --pcontacto-padding-top: 3rem;
    --pcontacto-input-radio: 0;
    --pcontacto-aside-imagen-radio: 0.5rem;
    --pcontacto-aside-titulo-tam: 2rem;
    --pcontacto-aside-titulo-color: var(--terciario-color);
    --pcontacto-aside-texto-tam: 1rem;
    --pcontacto-aside-texto-color: var(--secondary-color);
    --pcontacto-aside-alineacion: left;
}