/* =====================================================
   ELEMENTOS.CSS
   TUWEBENUNDIA.CL
   Clases numeradas del constructor
===================================================== */


/* =====================================================
   1. WIDGETS GENERALES
===================================================== */

[class^="titulo"],
[class^="texto"],
[class^="boton"],
[class^="imagen"],
[class^="carrusel_imagenes"],
[class^="slider_clasico"],
[class^="acordeon"],
[class^="formulario"] {
    box-sizing: border-box;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Títulos */

[class^="titulo"] h2 {
    margin: 0;
}

/* Textos */

[class^="texto"] p {
    line-height: 1.6;
}

/* Imágenes */

[class^="imagen"] img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =====================================================
   2. ESTRUCTURAS GENERALES
===================================================== */

[class^="seccion"],
[class^="contenedor"],
[class^="dos-columnas"],
[class^="tres-columnas"],
[class^="cuatro-columnas"],
[class^="columna"],
[class^="contenido"] {
    box-sizing: border-box;
    min-width: 0;
}

/* Secciones */

[class^="seccion"] {
    width: 100%;
    max-width: 100%;
    min-height: 180px;
    margin: 0;
    padding: 0;
}

/* Contenedores */

[class^="contenedor"] {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}


/* =====================================================
   3. ESTRUCTURAS DE COLUMNAS
===================================================== */

/* Estructura exterior */

[class^="dos-columnas"],
[class^="tres-columnas"],
[class^="cuatro-columnas"] {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    gap: 0;
}

/* Dos columnas */

[class^="dos-columnas"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Tres columnas */

[class^="tres-columnas"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Cuatro columnas */

[class^="cuatro-columnas"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Zonas de inserción de las columnas */

[class^="columna"] {
    display: flow-root;
    width: 100%;
    min-width: 0;
    min-height:0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* Zonas de contenido antiguas, si siguen utilizándose */

[class^="contenido"] {
    display: flow-root;
    width: 100%;
    min-width: 0;
    min-height: 40px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background: transparent;
    border: 0;
    box-shadow: none;
}









/* =====================================================
   7. TABLET
===================================================== */

/* TABLET: adaptación automática solo en páginas públicas */
@media (min-width: 768px) and (max-width: 1023px) {

    body:not(.constructor-activo) [class^="tres-columnas"],
    body:not(.constructor-activo) [class^="cuatro-columnas"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
/* =====================================================
   8. MÓVIL
===================================================== */

/* =====================================================
   8. MÓVIL — SOLO PÁGINAS PUBLICADAS
===================================================== */

/* En páginas publicadas, las columnas se apilan en móvil */
@media screen and (max-width: 767px) {
    body:not(.constructor-activo) [class^="dos-columnas"],
    body:not(.constructor-activo) [class^="tres-columnas"],
    body:not(.constructor-activo) [class^="cuatro-columnas"] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Etiqueta de las estructuras */
[class^="dos-columnas"] > [data-etiqueta-estructura],
[class^="tres-columnas"] > [data-etiqueta-estructura],
[class^="cuatro-columnas"] > [data-etiqueta-estructura] {
    position: absolute;
    top: 2px;
    left: 10px;
    font-size: 11px;
    line-height: 1.2;
    color: #64748b;
    white-space: nowrap;
    pointer-events: none;
}



/* =========================================
   ÁREA DE CONTENIDO DE LAS COLUMNAS
========================================= */

[class^="dos-columnas"] > [class^="columna"],
[class^="tres-columnas"] > [class^="columna"],
[class^="cuatro-columnas"] > [class^="columna"] {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 0;
    align-self: stretch;
}

/* Área punteada al pasar el cursor */
[class^="dos-columnas"] > [class^="columna"]:hover,
[class^="tres-columnas"] > [class^="columna"]:hover,
[class^="cuatro-columnas"] > [class^="columna"]:hover {
    outline: 1px dashed #94a3b8;
    outline-offset: -1px;
}
/* =====================================================
   CONTORNOS DE TODAS LAS COLUMNAS
===================================================== */

/* Contornos interiores del mismo color que las cajas */
[class^="dos-columnas"]:hover > [class^="columna"],
[class^="tres-columnas"]:hover > [class^="columna"],
[class^="cuatro-columnas"]:hover > [class^="columna"],
[class^="dos-columnas"] > [class^="columna"]:hover,
[class^="tres-columnas"] > [class^="columna"]:hover,
[class^="cuatro-columnas"] > [class^="columna"]:hover {
    outline: 1px dashed #93c5fd;
    outline-offset: -1px;
}




/* =====================================================
   MENÚ DE CABECERA RESPONSIVE
===================================================== */

/* Escritorio: enlaces horizontales */
.menu [data-lista-enlaces] {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 24px;
    width: auto;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Botón hamburguesa en escritorio */
.menu [data-boton-menu] {
    display: none;
}

/* Enlaces del menú */
.menu .enlace-menu {
    position: relative;
    box-sizing: border-box;
}

/* Móvil */
@media screen and (max-width: 767px) {

    .menu {
        position: relative !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: 0;
    }

    /* Botón hamburguesa */
    .menu [data-boton-menu] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 42px;
        width: 42px;
        height: 42px;
        cursor: pointer;
    }

    /* Menú cerrado */
    .menu [data-lista-enlaces][data-abierto="0"] {
        display: none !important;
    }

    /* Desplegable debajo del botón */
    .menu [data-lista-enlaces][data-abierto="1"] {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;

        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        justify-content: flex-start !important;

        width: 220px !important;
        max-width: 100vw !important;
        min-width: 0;
        gap: 0 !important;

        padding: 8px 0 !important;
        margin: 0 !important;

        background: #ffffff !important;
        border: 1px solid #e5e7eb;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);

        z-index: 99999;
        box-sizing: border-box;
    }

    /* Enlaces verticales */
    .menu [data-lista-enlaces][data-abierto="1"]
    .enlace-menu {
        display: block !important;
        flex: 0 0 auto !important;
        width: 100% !important;
        padding: 12px 16px !important;
        margin: 0 !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
}




/* =====================================================
   TUWEBENUNDÍA — FORMULARIO MODERNO
===================================================== */

form[data-formulario-contenido="1"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.05);
    color: #1f2937;
    font-family: inherit;
}

/* Título */

form[data-formulario-contenido="1"] > h3 {
    margin: 0 0 24px;
    color: #111827;
    font-size: 23px;
    font-weight: 650;
    line-height: 1.35;
}

/* Grupo de cada campo */

form[data-formulario-contenido="1"] [data-campo-formulario="1"] {
    min-width: 0;
    margin-bottom: 19px;
}

/* Etiquetas principales */

form[data-formulario-contenido="1"]
[data-campo-formulario="1"] > label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* Campos de texto, selector y área de texto */

form[data-formulario-contenido="1"]
[data-campo-formulario="1"] > input:not([type="checkbox"]):not([type="radio"]),
form[data-formulario-contenido="1"]
[data-campo-formulario="1"] > textarea,
form[data-formulario-contenido="1"]
[data-campo-formulario="1"] > select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 11px 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #ffffff;
    color: #111827;
    font: inherit;
    font-size: 14px;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

/* Área de texto */

form[data-formulario-contenido="1"]
[data-campo-formulario="1"] > textarea {
    min-height: 110px;
    resize: vertical;
}

/* Texto de ayuda */

form[data-formulario-contenido="1"] input::placeholder,
form[data-formulario-contenido="1"] textarea::placeholder {
    color: #9ca3af;
    opacity: 1;
}

/* Campo seleccionado */

form[data-formulario-contenido="1"] input:focus,
form[data-formulario-contenido="1"] textarea:focus,
form[data-formulario-contenido="1"] select:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.13);
}

/* Opciones de selección */

form[data-formulario-contenido="1"]
[data-campo-formulario="1"] input[type="checkbox"],
form[data-formulario-contenido="1"]
[data-campo-formulario="1"] input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 7px 0 0;
    accent-color: #4f46e5;
    vertical-align: middle;
    cursor: pointer;
}

/* Etiquetas de las opciones */

form[data-formulario-contenido="1"]
[data-campo-formulario="1"] label:has(input[type="checkbox"]),
form[data-formulario-contenido="1"]
[data-campo-formulario="1"] label:has(input[type="radio"]) {
    display: block;
    margin: 9px 0;
    color: #4b5563;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
}

/* Botón de envío */

form[data-formulario-contenido="1"] > button[type="submit"],
form[data-formulario-contenido="1"] > input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 45px;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    background: #4f46e5;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

/* Efecto al pasar el cursor */

form[data-formulario-contenido="1"] > button[type="submit"]:hover,
form[data-formulario-contenido="1"] > input[type="submit"]:hover {
    background: #4338ca;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2);
}

/* Adaptación a móviles */

@media (max-width: 600px) {
    form[data-formulario-contenido="1"] {
        padding: 19px;
        border-radius: 11px;
    }

    form[data-formulario-contenido="1"] > h3 {
        font-size: 21px;
        margin-bottom: 20px;
    }

    form[data-formulario-contenido="1"] > button[type="submit"],
    form[data-formulario-contenido="1"] > input[type="submit"] {
        width: 100%;
    }
}

/* =====================================================
   COLUMNAS SEGÚN LA VISTA SELECCIONADA
===================================================== */

/* ESCRITORIO: distribución original */
#lienzo.vista-escritorio [class^="dos-columnas"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#lienzo.vista-escritorio [class^="tres-columnas"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#lienzo.vista-escritorio [class^="cuatro-columnas"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* TABLET: también conserva todas las columnas en fila */
#lienzo.vista-tablet [class^="dos-columnas"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

#lienzo.vista-tablet [class^="tres-columnas"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

#lienzo.vista-tablet [class^="cuatro-columnas"] {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* MÓVIL: todas las columnas en vertical */
#lienzo.vista-movil [class^="dos-columnas"],
#lienzo.vista-movil [class^="tres-columnas"],
#lienzo.vista-movil [class^="cuatro-columnas"] {
    grid-template-columns: minmax(0, 1fr) !important;
}