/*
Theme Name: Zylyf Child
Theme URI: https://max-themes.net/zylyf
Description: Zylyf Child Theme. Use this child theme to make safe, update-proof modifications to the Zylyf theme.
Author: Max Themes
Author URI: https://max-themes.net
Template: zylyf
Version: 1.0.0
Text Domain: zylyf-child
*/

/* ==========================================================
   MANADA — CSS PERSONALIZADO
   ========================================================== */


/* ==========================================================
   01. FUENTE TIMUN BOLD
   Fuente utilizada en MANADA gigante del footer
   ========================================================== */

@font-face {
    font-family: "Timun Manada";
    src: url("fonts/Timun-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* ==========================================================
   02. FOOTER — MANADA GIGANTE
   Tipografía del texto MANADA
   ========================================================== */

.tft-ftr-brutalist__giant-text {
    font-family: "Timun Manada", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    letter-spacing: 0 !important;
}


/* ==========================================================
   03. HERO — MARQUESINA / TICKER
   ========================================================== */

.ticker-inner .msg {
    font-size: 18px !important;
}


/* ==========================================================
   04. HERO — TÍTULO / SVG DINÁMICO
   El PHP decide:
   - Sin Hero SVG = textos de Elementor
   - Con Hero SVG = SVG seleccionado
   ========================================================== */

/* Contenedor del título */
.tft-master-screen__title {
    display: block !important;

    width: 760px !important;
    max-width: 60vw !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    box-sizing: border-box !important;
}

/* SVG seleccionado desde Elementor */
.manada-hero-svg {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================
   05. HERO — MOBILE
   Ajuste independiente del SVG
   ========================================================== */

@media (max-width: 767px) {

    .tft-master-screen__title {
        display: block !important;

        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: translateX(4px) !important;

        box-sizing: border-box !important;
    }

    .tft-master-screen__title::before {
        width: 100% !important;
        max-width: 520px !important;

        aspect-ratio: 1600 / 520;

        background-position: left center !important;
        background-size: contain !important;
    }
}


/* ==========================================================
   06. PORTFOLIO — BOTÓN TODOS
   Cambia visualmente "ALL" por "TODOS"
   ========================================================== */

.tft-filter-btn[data-filter="all"] {
    font-size: 0 !important;
}

.tft-filter-btn[data-filter="all"]::after {
    content: "TODOS";
    font-size: 14px !important;
}


/* ==========================================================
   07. FICHA DEL PROYECTO — ETIQUETAS
   01 CLIENTE / 02 SERVICIOS / 03 RUBRO / 04 AÑO
   ========================================================== */

.tft-pd-spec-item__label {
    font-size: 0.95rem !important;
}


/* ==========================================================
   08. FOOTER — ESPACIADO Y ALINEACIÓN
   Desktop + protección específica para mobile
   ========================================================== */

/* Espacio entre títulos y contenido */
.tft-ftr-brutalist__block-header {
    margin-bottom: calc(2rem + 20px) !important;
}

.tft-ftr-brutalist__links-wrap {
    margin-top: 0 !important;
}

/* Reduce la altura excesiva del footer SOLO en desktop */
@media (min-width: 768px) {

    .tft-ftr-brutalist__grid {
        min-height: 280px !important;
    }

    /* 01 — PROYECTOS */
    .tft-ftr-brutalist__block:nth-child(1) {
        align-items: flex-start !important;
    }

    /* 02 — CONTACTO */
    .tft-ftr-brutalist__block:nth-child(2) {
        align-items: center !important;
    }

    /* 03 — REDES */
    .tft-ftr-brutalist__block:nth-child(3) {
        align-items: flex-end !important;
    }

    .tft-ftr-brutalist__block:nth-child(1)
    .tft-ftr-brutalist__block-header,
    .tft-ftr-brutalist__block:nth-child(1)
    .tft-ftr-brutalist__links-wrap {
        width: 100% !important;
    }

    .tft-ftr-brutalist__block:nth-child(2)
    .tft-ftr-brutalist__block-header,
    .tft-ftr-brutalist__block:nth-child(2)
    .tft-ftr-brutalist__links-wrap {
        width: auto !important;
        align-self: center !important;
    }

    .tft-ftr-brutalist__block:nth-child(3)
    .tft-ftr-brutalist__block-header,
    .tft-ftr-brutalist__block:nth-child(3)
    .tft-ftr-brutalist__links-wrap {
        width: auto !important;
        align-self: flex-end !important;
    }
}


/* ==========================================================
   FOOTER — MOBILE
   No hereda las alineaciones forzadas de desktop
   ========================================================== */

@media (max-width: 767px) {

    .tft-ftr-brutalist__grid {
        min-height: 0 !important;
    }

    .tft-ftr-brutalist__block {
        align-items: flex-start !important;
    }

    .tft-ftr-brutalist__block-header,
    .tft-ftr-brutalist__links-wrap {
        width: 100% !important;
        align-self: flex-start !important;
    }

    .tft-ftr-brutalist__links-wrap {
        margin-top: 0 !important;
    }
}

/* ==========================================================
   09. ARCHIVE — NUESTROS TRABAJOS
   Ajusta información y preview del listado de proyectos
   ========================================================== */

.tft-archives__item .info {
    min-width: 0 !important;
    width: auto !important;

    margin-left: 0 !important;
    margin-right: 20px !important;

    align-items: flex-start !important;
    text-align: left !important;
}

.tft-archives__item .info .name {
    font-size: 16px !important;
    line-height: 1.05 !important;

    white-space: normal !important;
    max-width: 260px !important;
}

.tft-archives__item.is-active .preview,
.tft-archives__item:hover .preview {
    margin-right: 20px !important;
}


/* ==========================================================
   10. PRELOADER — LOGO MANADA SVG
   Proporción original SVG: 82.56 × 45.02
   ========================================================== */

.d3-flash__logo {
    font-size: 0 !important;
    color: transparent !important;

    width: 110px !important;
    aspect-ratio: 82.56 / 45.02 !important;
    height: auto !important;

    background-image: url("https://manadagroup.cl/wp-content/uploads/2026/09/preload2.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

.d3-flash__logo::before,
.d3-flash__logo::after {
    content: none !important;
    display: none !important;
}



/* ==========================================================
   11. FOOTER — TAMAÑO MANADA GIGANTE
   ========================================================== */

.tft-ftr-brutalist__giant-text {
    font-size: 11vw !important;
}





/* ==========================================================
   12. QUIÉNES SOMOS — BOTÓN CONVERSEMOS
   ========================================================== */

.manada-conversemos-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: #F8D62D !important;
    color: #000000 !important;

    padding: 13px 30px !important;
    border-radius: 999px !important;
    border: 0 !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;

    margin-top: 8px !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.manada-conversemos-btn:hover {
    color: #000000 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(248, 214, 45, .30);
}

.manada-conversemos-btn:hover {
    color: #000 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(248, 214, 45, .30);
}



/* ==========================================================
   13. CONTACTO — TÍTULOS DE CAMPOS
   ========================================================== */

.tft-contact-v2__field label {
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}


/* ==========================================================
   14. CONTACTO — INDICADOR SELECT FECHA
   ========================================================== */

.tft-contact-v2__field select {
    cursor: pointer !important;
    padding-right: 35px !important;

    background-image:
        linear-gradient(45deg, transparent 50%, #F8D62D 50%),
        linear-gradient(135deg, #F8D62D 50%, transparent 50%) !important;

    background-position:
        calc(100% - 15px) 50%,
        calc(100% - 10px) 50% !important;

    background-size:
        6px 6px,
        6px 6px !important;

    background-repeat: no-repeat !important;

    appearance: none !important;
    -webkit-appearance: none !important;
}


/* ==========================================================
   15. QUIÉNES SOMOS — OCULTAR OVERLAY DE IMAGEN
   ========================================================== */

.cpf-foundation__overlay {
    display: none !important;
}


/* ==========================================================
   16. FIESTAS — FORMULARIO
   ========================================================== */

/* ----- SECCIÓN GENERAL ----- */

.manada-fiestas-form {
    background: #ffffff !important;
    color: #111111 !important;
    padding: 55px 4vw 45px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.manada-fiestas-form__container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;

    display: grid !important;
    grid-template-columns: 30% 70% !important;
    gap: 55px !important;
    align-items: start !important;
}


/* ----- COLUMNA IZQUIERDA ----- */

.manada-fiestas-form__intro {
    padding-right: 30px !important;
}

.manada-fiestas-form__tag {
    display: block !important;
    color: #444444 !important;

    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: .28em !important;

    margin-bottom: 12px !important;
}

.manada-fiestas-form__title {
    color: #111111 !important;

    font-size: clamp(38px, 3.2vw, 58px) !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -.04em !important;

    margin: 0 0 14px !important;
}

.manada-fiestas-form__meta,
.manada-fiestas-form__meta p {
    color: #666666 !important;

    font-size: 16px !important;
    line-height: 1.45 !important;

    margin: 0 !important;
    max-width: 330px !important;
}


/* ----- FORMULARIO ----- */

.manada-fiestas-form__form {
    width: 100% !important;
    color: #111111 !important;
}

.manada-fiestas-form__fields {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 30px !important;
    row-gap: 30px !important;
}


/* ----- CAMPOS ----- */

.manada-fiestas-form__field {
    display: flex !important;
    flex-direction: column !important;
}

.manada-fiestas-form__field label {
    color: #555555 !important;

    font-size: 13px !important;
    font-weight: 400 !important;

    margin-bottom: 7px !important;
}

.manada-fiestas-form__field input,
.manada-fiestas-form__field select,
.manada-fiestas-form__field textarea {
    width: 100% !important;

    background: transparent !important;
    color: #111111 !important;

    border: 0 !important;
    border-bottom: 1px solid #999999 !important;
    border-radius: 0 !important;

    padding: 4px 0 10px !important;

    font-size: 15px !important;
    font-family: inherit !important;

    outline: none !important;
    box-shadow: none !important;
}

.manada-fiestas-form__field input::placeholder,
.manada-fiestas-form__field textarea::placeholder {
    color: #777777 !important;
    opacity: 1 !important;
}


/* ----- MENSAJE ----- */

.manada-fiestas-form__field--full {
    grid-column: 1 / 4 !important;
}

.manada-fiestas-form__field textarea {
    resize: none !important;
    min-height: 55px !important;
}


/* ----- SELECT ----- */

.manada-fiestas-form__field select {
    cursor: pointer !important;
}


/* ----- PIE DEL FORMULARIO ----- */

.manada-fiestas-form__footer {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;

    gap: 30px !important;
    margin-top: 25px !important;
}


/* ----- CONSENTIMIENTO ----- */

.manada-fiestas-form__consent {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    color: #666666 !important;
    font-size: 11px !important;

    margin-right: auto !important;
}

.manada-fiestas-form__consent input {
    accent-color: #F8D62D !important;
}


/* ----- BOTÓN ----- */

.manada-fiestas-form__submit {
    min-width: 190px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 20px !important;

    background: #111111 !important;
    color: #ffffff !important;

    border: 0 !important;
    border-radius: 999px !important;

    padding: 17px 30px !important;

    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .20em !important;

    cursor: pointer !important;

    transition:
        transform .25s ease,
        background .25s ease !important;
}

.manada-fiestas-form__submit:hover {
    background: #F8D62D !important;
    color: #111111 !important;
    transform: translateY(-2px);
}

.manada-fiestas-form__arrow {
    font-size: 18px !important;
    line-height: 1 !important;
}


/* ----- TABLET ----- */

@media (max-width: 1024px) {

    .manada-fiestas-form__container {
        grid-template-columns: 1fr !important;
        gap: 40px !important;
    }

    .manada-fiestas-form__fields {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .manada-fiestas-form__field--full {
        grid-column: 1 / -1 !important;
    }
}


/* ----- MOBILE ----- */

@media (max-width: 767px) {

    .manada-fiestas-form {
        padding: 45px 25px !important;
    }

    .manada-fiestas-form__fields {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
    }

    .manada-fiestas-form__field--full {
        grid-column: auto !important;
    }

    .manada-fiestas-form__footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .manada-fiestas-form__submit {
        width: 100% !important;
    }
}



/* ==========================================================
   17. FIESTAS — FOOTER SIN MARGEN NI REDONDEADO
   ========================================================== */

/* Solo página Fiestas — page ID 16 */
body.page-id-16 .tft-ftr-brutalist {
    border-radius: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}


/* ==========================================================
   18. FIESTAS — ALTURA HERO
   ========================================================== */

/* Solo Landing Fiestas — page ID 16 */
body.page-id-16 .tft-master-screen {
    min-height: 76vh !important;
    height: 76vh !important;
}



/* ==========================================================
   19. FIESTAS — OCULTAR NAVEGACIÓN LATERAL DEL HERO
   ========================================================== */

/* Solo Landing Fiestas — page ID 16 */
body.page-id-16 .tft-archives {
    display: none !important;
}


/* ==========================================================
   20. CONFIRMACIÓN — OCULTAR NAVEGACIÓN LATERAL DEL HERO
   ========================================================== */

/* Solo página Confirmación — page ID 687 */
body.page-id-687 .tft-archives {
    display: none !important;
}


/* ==========================================================
   21. PARTNERS — TAMAÑO LOGOS + OPACIDAD / HOVER
   ========================================================== */

/* LOGOS — tamaño permanente */
.tft-about-partners__logo-img {
    display: block !important;

    /* Tamaño visual */
    height: 65px !important;
    width: auto !important;
    max-width: 190px !important;
    max-height: 65px !important;

    object-fit: contain !important;

    /* Estado normal: 70% */
    opacity: 0.70 !important;

    /* Eliminar efectos del tema */
    filter: none !important;
    mix-blend-mode: normal !important;

    /* SOLO animamos opacidad */
    transition: opacity .30s ease !important;
}


/* HOVER — MISMO TAMAÑO, SOLO SUBE A 100% */
.tft-about-partners__logo-img:hover {
    opacity: 1 !important;
}


/* MOBILE */
@media (max-width: 767px) {

    .tft-about-partners__logo-img {
        height: 48px !important;
        max-height: 48px !important;
        max-width: 150px !important;
    }
}

/* ==========================================================
   22. PARTNERS — VELOCIDAD MARQUESINA
   ========================================================== */

/* DESKTOP */
.tft-about-partners__marquee-track {
    animation-duration: 35s !important;
}

/* MOBILE */
@media (max-width: 767px) {
    .tft-about-partners__marquee-track {
        animation-duration: 18s !important;
    }
}


/* ==========================================================
   23. PARTNERS — TÍTULO
   ========================================================== */

.tft-about-partners__heading {
    font-size: 18px !important;
}

/* ==========================================================
   24. MOBILE — ENCABEZADO SERVICIOS 25PX A LA DERECHA
   ========================================================== */

@media (max-width: 767px) {

    .cpf-services__header {
        transform: translateX(45px) !important;
    }

}

/* ==========================================================
   25. MOBILE — ALINEAR "LO QUE HACEMOS" CON "SERVICIOS"
   ========================================================== */

@media (max-width: 767px) {

    .cpf-services__badge {
        transform: translateX(-8px) !important;
    }

}


/* ==========================================================
   26. MOBILE — AJUSTES TÍTULOS Y SERVICIOS
   ========================================================== */

@media (max-width: 767px) {

    /* QUIÉNES SOMOS */
    .cpf-foundation__title {
        font-size: 32px !important;
        line-height: 1.05 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* SERVICIOS */
    .cpf-services__title {
        font-size: 32px !important;
        line-height: 1.05 !important;
        margin-left: 0 !important;
        padding-left: 0 !important;
    }

    /* SERVICIOS — números 01 / 02 / 03 */
    .cpf-services__item-num {
        transform: translateX(45px) !important;
    }

    /* SERVICIOS — Taller / Eventos / Marketing */
    .cpf-services__item-title-closed {
        margin-left: 25px !important;
    }

}

/* ==========================================================
   27. MOBILE — SERVICIOS / PANEL ABIERTO ALINEADO CON NÚMERO
   ========================================================== */

@media (max-width: 767px) {

    .cpf-services__item.is-active .cpf-services__item-panel {
        transform: translateX(-22px) !important;
    }

}