.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.glass-nav {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.hero-gradient {
    background: linear-gradient(135deg, #0058ba 0%, #6c9fff 100%);
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.text-gradient {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.text-gradient {
    background: linear-gradient(135deg, #0058ba, #6c9fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.bg-gradient-primary {
    background: linear-gradient(135deg, #0058ba, #6c9fff);
}
.ambient-shadow {
    box-shadow: 0px 10px 32px -4px rgba(35, 44, 81, 0.06);
}
.ambient-shadow-hover:hover {
    box-shadow: 0px 14px 48px -4px rgba(35, 44, 81, 0.1);
}
.focus-glow:focus {
    box-shadow: 0 0 0 2px rgba(80, 145, 255, 0.4);
    outline: none;
}
.editorial-gradient {
    background: linear-gradient(135deg, #0058ba 0%, #6c9fff 100%);
}
.glass-effect {
    background: rgba(247, 245, 255, 0.8);
    backdrop-filter: blur(20px);
}
.glass-panel {
    background: rgba(247, 245, 255, 0.8);
    backdrop-filter: blur(20px);
}
.primary-gradient {
    background: linear-gradient(135deg, #0058ba 0%, #6c9fff 100%);
}
body {
    font-family: var(--font-body);
    background-color: #f7f5ff; /* surface */
    color: #232c51; /* on-surface */
}
h1, h2, h3, h4, h5, h6, .font-headline, .font-display {
    font-family: var(--font-headline);

}
h1, h2, h3, h4, h5, h6, .font-headline {
    text-align: center;
}
.peer:checked ~ .accordion-content {
    max-height: 500px;
    opacity: 1;
}
.peer:checked ~ .accordion-header .icon-expand {
    transform: rotate(180deg);
}
.accordion-content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease-in-out;
}
.accordion-icon {
    transition: transform 0.3s ease;
}
.banner-azul span.text-primary {
    color: white;
}

/* AJUSTES CUSTOM */
html,
body {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    overflow-x: clip;
    scroll-behavior: smooth;
}
main > section {
    margin-bottom: 5rem;
}
.material-symbols-outlined {
    user-select: none;
}
#primary {
    margin-top: 50px;
}
/* MENU DESPLEGABLE */
#slide-out-menu-parent {
    opacity: 0;
    transition: opacity,pointer-events 0.5s  linear;
    pointer-events: none;
    z-index: 1000;
}
#slide-out-menu-parent.open {
    opacity: 1;
    transition: opacity,pointer-events 0.5s 0.5s linear;
    pointer-events: all;
}
#slide-out-menu {
    transform: translate(100%, 0%);
    transition: transform 0.5s 0.5s linear;
}
#slide-out-menu-parent.open #slide-out-menu {
    transform: translate(0%, 0%);
    transition: transform 0.5s linear;
}

#slide-out-menu-parent #slide-out-menu-electricista,
#slide-out-menu-parent #slide-out-menu-antenista,
#slide-out-menu-parent #slide-out-menu-fontaneria {
    opacity: 0;
    display: none;
}
#slide-out-menu-parent #slide-out-menu-electricista.open,
#slide-out-menu-parent #slide-out-menu-antenista.open,
#slide-out-menu-parent #slide-out-menu-fontaneria.open {
    opacity: 1;
    display: block;
}
#slide-out-menu-parent {
    display: none;
}

#mobile-slide-out-menu-parent,
#mobile-slide-out-menu-ciudades-parent {
    display: none;
}

@media (max-width: 1024px) {
    #mobile-slide-out-menu-parent,
    #mobile-slide-out-menu-ciudades-parent {
        display: block;
        opacity: 0;
        transition: opacity, pointer-events 0.5s linear;
        pointer-events: none;
        height: 100%;
        width: 100%;
        max-height: calc(100% - 72px);
        max-width: 100%;
        z-index: 100000000000;
    }
    #mobile-slide-out-menu-parent.open,
    #mobile-slide-out-menu-ciudades-parent.open {
        opacity: 1;
        transition: opacity, pointer-events 0.5s 0.5s linear;
        pointer-events: all;
    }
}

#sticky-nav-helper {
    height: auto;
    padding: 10px;
    z-index: 40;
    top: 102px;

    transition: transform 0.5s;
    transform: translate(0, -100%);
}

/* Shared indicator styles */
#sticky-nav-helper .indicator {
    cursor: pointer;
    align-items: center;
    gap: 8px;
}

/* Mobile icon wrapper */
#sticky-nav-helper .mobile-indicator {
    display: flex;
    align-items: center;
}

/* Icon styles */
#sticky-nav-helper .material-symbols-outlined {
    cursor: pointer;
}

#sticky-nav-helper .material-symbols-outlined.on {
    display: none;
}

/* Active state */
#sticky-nav-helper .indicator.active .material-symbols-outlined.on {
    display: block;
    opacity: 1;
}

#sticky-nav-helper .indicator.active .material-symbols-outlined.off {
    display: none;
    opacity: 0;
}

/* Desktop text label */
#sticky-nav-helper .desktop-label {
    display: none;
    transition: opacity 0.2s ease;
    white-space: nowrap;
}

/* Active desktop label */
#sticky-nav-helper .indicator.active .desktop-label {
    opacity: 1;
    font-weight: 600;
}
.sticky-nav-marker {
    opacity: 0;
    pointer-events: none;
    height: 1px;
    margin-top: -1px;
}

/* Desktop version */
@media (min-width: 1024px) {
    /* Hide mobile icons */
    #sticky-nav-helper .mobile-indicator {
        display: none;
    }

    /* Show desktop text */
    #sticky-nav-helper .desktop-label {
        display: inline-block;
    }

    /* Optional vertical nav styling */
    #sticky-nav-helper .indicator {
        padding: 6px 0;
    }
}




/* Inputs and tel */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"] {
    width: 100%;
    background-color: var(--color-surface);
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 0.75rem;
    border: none;
    color: var(--color-on-surface);
    font-family: var(--font-body);
    transition: all 0.15s ease;
    background: rgba(247, 245, 255, 0.8);
    backdrop-filter: blur(20px);
    position: relative;
    bottom: -10px;
}

.wpcf7-form input[type="text"]::placeholder,
.wpcf7-form input[type="email"]::placeholder,
.wpcf7-form input[type="tel"]::placeholder {
    color: var(--color-outline);
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Textarea */
.wpcf7-form textarea {
    width: 100%;
    background-color: var(--color-surface);
    padding: 1rem;
    border-radius: 0.75rem;
    border: none;
    color: var(--color-on-surface);
    font-family: var(--font-body);
    resize: none;
    transition: all 0.15s ease;
    background: rgba(247, 245, 255, 0.8);
    backdrop-filter: blur(20px);
    bottom: -10px;
    position: relative;
}

.wpcf7-form textarea::placeholder {
    color: var(--color-outline);
}

.wpcf7-form textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary);
}
#label-nombre::before,
#label-telefono::before,
#label-email::before,
#label-mensaje::before {
    font-family: 'Material Symbols Outlined';
    font-size: 20px;
    bottom: -5px;
    position: relative;
    margin-right: 5px;
    color: rgb(0 88 186 / var(--tw-text-opacity, 1));
}
#label-nombre::before {
    content: '\f4fa';
}
#label-telefono::before {
    content: '\e61d';
}
#label-email::before {
    content: '\e6c7';
}
#label-mensaje::before {
    content: '\e6d3';
}

/* Submit */
.wpcf7-form input[type="submit"] {
    width: 100%;
    display: block;
    background: linear-gradient(to bottom right, var(--color-primary), var(--color-primary-container));
    color: var(--color-on-primary);
    padding: 1.25rem 0;
    border-radius: 9999px;
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 1.125rem;
    margin-top: 0.5rem;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    --tw-text-opacity: 1;
    color: rgb(240 242 255 / var(--tw-text-opacity, 1));

    font-weight: 700;
    font-size: 1.125rem;
    line-height: 1.75rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    border-radius: 9999px;
    gap: 0.5rem;
    align-items: center;
    display: inline-flex;
    background: linear-gradient(135deg, #0058ba 0%, #6c9fff 100%);
}

/* Base response output */
 .wpcf7-response-output {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: none;
    font-family: var(--font-body);
    font-size: 0.875rem;
    text-align: center;
    background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

/* Success */
.sent .wpcf7-response-output {
    background-color: var(--color-tertiary-container);
    color: var(--color-on-tertiary-container);
    background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

/* Error / invalid fields */
.invalid .wpcf7-response-output,
.unacceptable .wpcf7-response-output {
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

/* Spam */
.spam .wpcf7-response-output {
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

/* Failed (server error) */
.failed .wpcf7-response-output {
    background-color: var(--color-error-container);
    color: var(--color-on-error-container);
    background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

/* Individual field validation errors */
 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-family: var(--font-body);
    color: var(--color-error);
    background-color: rgb(221 225 255 / var(--tw-bg-opacity, 1));
    opacity: 0.8;
    padding: 5px;
    padding-top: 10px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* Invalid field highlight */
 input.wpcf7-not-valid,
 textarea.wpcf7-not-valid {
    box-shadow: 0 0 0 2px var(--color-error);
    background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

/* Spinner */
 .wpcf7-spinner {
    display: none;
}

.submitting .wpcf7-spinner {
    display: inline-block;
    margin-left: 0.5rem;
        background-color: rgb(239 239 255 / var(--tw-bg-opacity, 1));
}

main section:not(.banner-azul, .bloque-trust) a[href^="tel:"]:not(:first-child),
main section:not(.banner-azul, .bloque-trust) a[href^="whatsapp:"] {
    display: none;
}

main p {
    text-align: center;
}

/* Inner panel of the nested submenu (Ubicaciones → cities) */
.nav-submenu > div {
  max-height: calc(100vh - 160px); /* fallback before JS measures */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;    /* page doesn't scroll when you reach the end of the list */
}

/* Optional: slim scrollbar */
.nav-submenu > div {
  scrollbar-width: thin;
  scrollbar-color: rgba(162, 171, 215, 0.6) transparent;
}
.nav-submenu > div::-webkit-scrollbar { width: 6px; }
.nav-submenu > div::-webkit-scrollbar-thumb {
  background: rgba(162, 171, 215, 0.6);
  border-radius: 9999px;
}

main#primary p {
    font-size: 16px;
}