/*
Theme Name: Luxa Child
Template: luxa
Description: Child theme for Luxa — Punctum Studio
Version: 1.0.0
*/

/* ── Submenu dropdown font override ── */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600&display=swap');

.navigation .sub-menu li a,
.navigation .children li a {
    font-family: "Raleway", sans-serif !important;
}

/* ── Fix mobile — header sticky sin compensación en template-landing ──
   El tema compensa el header fixed con .header-space (60px) + padding-top:35px
   en .main-container. Pero en template-landing se zeroa el padding (main.css).
   header-space-false (homepage): header real = 119px (flex-wrap: logo 95px + nav 24px).
   header-space-true (laboratorios): solo 60px → 35px gap sin cubrir.
   En desktop el hero full-bleed tapa el gap. En mobile el layout cambia
   y el primer elemento queda tapado por el header fijo.
── */
@media (max-width: 767.98px) {
    .page-template-template-landing.header-space-false .main-container {
        padding-top: 119px !important;
    }
    .page-template-template-landing.header-space-true .main-container {
        padding-top: 35px !important;
    }
}

/* ── Contacto — botón CF7 con estructura button-style1 del tema Luxa ──
   El filtro wpcf7_form_elements convierte <input> en <button> con <span>s.
   Aquí solo aseguramos herencia de estilos para compatibilidad.
── */
.page-id-866 button.wpcf7-submit.button-style1 {
    display: inline-block;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    outline: none;
}

/* ── Contacto — mapa full-bleed CSS puro (sin depender de JS WPBakery) ──
   El JS de WPBakery no aplica left/width porque .main-container tiene overflow:hidden.
   Solución: técnica full-bleed con left:50% + margin-left:-50vw.
   overflow:visible solo en esta página para no romper otros layouts.
── */

/* Suprimir <br> de WPBakery — selector correcto: .content-area (no .entry-content) */
.page-id-866 .content-area br { display: none; }

/* FIX mapa full-width: el tema padre recorta con overflow:hidden en .main-container */
.page-id-866 .main-container { overflow: visible !important; }

/* Eliminar clearfix residual */
.page-id-866 .vc_row-full-width.vc_clearfix { display: none; }

/* Full-bleed: romper el contenedor sin depender de JS */
.page-id-866 .map-row {
    position: relative !important;
    left: 50% !important;
    right: auto !important;
    margin-left: -50vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-top: 35px !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    line-height: 0 !important;
}

.page-id-866 .map-row .wpb_column,
.page-id-866 .map-row .vc_column_container,
.page-id-866 .map-row .vc_column-inner,
.page-id-866 .map-row .wpb_wrapper,
.page-id-866 .map-row .wpb_content_element,
.page-id-866 .map-row .wpb_raw_code {
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
}

.page-id-866 .map-row iframe {
    display: block !important;
    width: 100% !important;
    height: 450px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    line-height: 0 !important;
}

/* ── Contacto — eliminar gap mapa-footer ──
   El tema padre define .type-page.hentry { padding-bottom: 40px } (main.css:5810).
   El article#post-866 tiene ambas clases, por eso aparece el gap.
   Solo se neutraliza para page-id-866, el resto de páginas no se ven afectadas.
── */
.page-id-866.page.hentry,
.page-id-866 .hentry {
    padding-bottom: 0 !important;
}

/* ── Contacto — iconos RRSS en NAP ── */
.page-id-866 .contact-social-icons {
    display: flex;
    gap: 16px;
    margin-top: 20px;
}
.page-id-866 .contact-social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f0c040;
    color: #1a1a1a;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.3s, color 0.3s;
}
.page-id-866 .contact-social-icons a:hover {
    background: #1a1a1a;
    color: #f0c040;
}

/* FIX 4: centrar iconos RRSS dentro de la columna NAP */
.page-id-866 .contact-social-icons {
    justify-content: center;
    padding-left: 0;
    width: 100%;
}

/* FIX: suprimir línea amarilla (.input-row:after con background: #feb406) en el acceptance row */
.page-id-866 .acceptance-row:after {
    display: none !important;
}
/* Suprimir border-bottom heredado de input.style1 que podría aparecer en label */
.page-id-866 .wpcf7-acceptance label {
    border-bottom: none !important;
    text-decoration: none !important;
}
.page-id-866 .wpcf7-acceptance a {
    text-decoration: underline;
    border-bottom: none !important;
}

/* FIX 1+2: checkbox .style1 — restaurar nativo + color acento Luxa + alineación */
.page-id-866 .wpcf7-acceptance input[type="checkbox"] {
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    appearance: checkbox !important;
    accent-color: #feb406;
    width: 16px !important;
    height: 16px !important;
    opacity: 1 !important;
    position: relative !important;
    pointer-events: auto !important;
    border: none !important;
    background: none !important;
    display: inline-block !important;
    flex-shrink: 0;
    cursor: pointer;
}
.page-id-866 .wpcf7-acceptance label {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
}
/* FIX 2: alinear acceptance-row con el resto de campos (input-row tiene padding:0) */
.page-id-866 .acceptance-row {
    padding-left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}
/* FIX 5: .wpcf7-list-item tiene margin-left:16px por defecto en CF7 — lo eliminamos
   para que el checkbox quede al mismo borde izquierdo que los inputs/textarea */
.page-id-866 .acceptance-row .wpcf7-list-item {
    margin-left: 0 !important;
}
/* FIX 3: mensaje de validación del acceptance */
.page-id-866 .wpcf7-acceptance .wpcf7-not-valid-tip {
    display: block !important;
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

/* FIX: botón submit — asegurar que no solapa el acceptance row */
.page-id-866 .wpcf7 button.wpcf7-submit {
    position: relative !important;
    margin-top: 12px !important;
    z-index: 1;
}
.page-id-866 .wpcf7-acceptance {
    position: relative !important;
    z-index: 2;
}

/* ── Fix scroll horizontal global ──
   El nav móvil (position:fixed, offset-right) y el map-row (100vw) generan
   scrollbar horizontal en viewports estrechos.
   Luxa theme: .js_active body.loaded { overflow: auto } (main.css) sobrescribe
   el body selector — se usa !important para ganar la cascada.
   position:fixed (header, nav móvil) no se recortan por overflow del body.
── */
html, body { overflow-x: hidden !important; }

/* ── Contacto — background-image columna side-img ──
   luxa/css/custom.css aplica background-image: none !important (especificidad 0,3,0)
   y pt-addons.css aplica background-image: initial en .side-img > .vc_column-inner.
   Este selector con 4 clases (0,4,0) + !important gana la cascada.
   La URL viene del css= de WPBakery en el shortcode [vc_column el_class="side-img"].
── */
.page-id-866 .vc_row .vc_col-has-fill.side-img > .vc_column-inner {
    background-image: url("https://punctumstudio.senshicode.com/wp-content/uploads/2026/05/estudio-fotografia-industrial-punctum-studio-barcelona.webp") !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    min-height: 400px;
}

/* ── Contacto — enlace "Ver en el mapa ↓" debajo de la dirección postal ── */
.page-id-866 a.ver-mapa-link {
    display: inline-block;
    margin-top: 6px;
    color: #feb406;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.03em;
    transition: color 0.2s;
}
.page-id-866 a.ver-mapa-link:hover {
    color: #1a1a1a;
}

/* ── Mobile — /contacto/ side-img: contener overflow + margen inferior ──
   overflow:hidden en el row específico (no en .main-container que necesita el mapa).
   margin-bottom en .side-img (column wrapper) para crear gap antes del bloque NAP.
   Fix asimetría derecha: .vc_row tiene margin-right:-15px (Bootstrap grid offset).
   En mobile la columna es 100% del row y el background-image del vc_column-inner
   llega al borde derecho de pantalla porque el padding-right del vc_column_container
   queda fuera del área visible del contenedor padre. Se fuerza padding-right simétrico
   en el .side-img (vc_column_container) para igualar el margen visible a ambos lados.
── */
@media (max-width: 767px) {
    .page-id-866 .vc_row-5ca2f9c637616 {
        overflow: hidden;
        margin-right: 0 !important;
    }
    .page-id-866 .side-img {
        margin-bottom: 32px !important;
        padding-right: 0 !important;
    }
    .page-id-866 .side-img > .vc_column-inner {
        margin-right: 0 !important;
        width: auto !important;
    }
}