/* ===========================================================
   custom.css — Ajustes "Coming soon" (Dunamis)
   1) Contador limpio: solo Días y Horas
   2) Footer siempre visible/clickeable (sin que lo tapen los muñecos)
   3) Responsividad
   Se carga DESPUÉS de style.css para sobrescribir lo necesario.
   =========================================================== */

/* -----------------------------------------------------------
   1) CONTADOR (Días / Horas)
   ----------------------------------------------------------- */
.date .countdown{
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    align-items: flex-start;
}
.cd-box{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 122px;
}
.cd-num{
    display: block;
    width: 100%;
    padding: 22px 8px;
    background: #000000;
    color: #fff;
    font-family: 'Open Sans', sans-serif;
    font-weight: 900;
    font-size: 64px;
    line-height: 1;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(62, 41, 36, 0.7);
}
.cd-label{
    margin-top: 12px;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 1px;
    font-weight: 700;
    color: #6a544e;
}

/* -----------------------------------------------------------
   2) FOOTER — banda limpia por encima de las ilustraciones
   ----------------------------------------------------------- */
footer{
    z-index: 30;                 /* por encima del hombre y la excavadora */
    background: #F5B20A;         /* color EXACTO del fondo: sin separación visible */
    padding: 12px 0;
}
footer .container.margin-bottom-40{
    margin-bottom: 0;            /* el padding del footer ya da el aire */
}
footer .footer-linck a span{
    word-break: break-word;      /* el email nunca se corta raro */
}

/* Deja sitio para que la ilustración no invada la banda del footer */
.block.coming-soon-style1{
    padding-bottom: 96px !important;
}

/* -----------------------------------------------------------
   3) RESPONSIVIDAD
   Cada escena (trabajador+muro  /  excavadora+hoyo+conos) se trata
   como UNA imagen: se reescala completa y centrada, nunca por piezas.
   ----------------------------------------------------------- */

/* Si una escena no cabe a lo ancho, se recorta a los lados (sin scroll-x) */
#content-wrapper{ overflow-x: clip; }

/* ===== ≤1199px — apilar, centrar y llenar la pantalla ===== */
@media (max-width: 1199px){

    /* -- a) cada escena conserva su composición original (no se rompe) -- */
    .wall_wrap{
        transform: none !important; -webkit-transform: none !important;
        float: left !important; left: 0 !important;
        width: 501px !important; height: 399px !important; margin: 0 !important;
    }
    .excavator{
        transform: none !important; -webkit-transform: none !important;
        float: right !important;
        width: 696px !important; height: 465px !important; margin: 0 !important;
        /* se conserva la animación del template: la excavadora avanza y retrocede */
    }
    .pit{  left: 0 !important; bottom: -12px !important; }
    .land{ left: 0 !important; bottom: 50px  !important; }
    /* conos (chip.png): a su posición original; viajan DENTRO de cada escena al escalar */
    .chip{        display: block !important; left: auto !important; right: -125px !important; bottom: 20px  !important; transform: none        !important; -webkit-transform: none        !important; }
    .chip.second{ display: block !important; left: auto !important; right: 50px   !important; bottom: 190px !important; transform: scale(0.71) !important; -webkit-transform: scale(0.71) !important; }
    .chip.third{  display: block !important; left: auto !important; right: -125px !important; bottom: 110px !important; transform: scale(0.52) !important; -webkit-transform: scale(0.52) !important; }
    .mob-block-left,
    .mob-block-right{ left: 0 !important; right: auto !important; }

    /* -- b) layout vertical: llena pantallas altas y hace scroll si no entra -- */
    html, body{ height: auto !important; }
    #content-wrapper{ height: auto !important; min-height: 100vh; overflow-y: visible; }
    .block.coming-soon-style1{
        height: auto !important;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        padding-bottom: 0 !important;
    }
    /* full-width: si no, el margin:0 auto de bootstrap encoge el contenedor y el texto se va a la derecha */
    .block.coming-soon-style1 > .container{ width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
    .block.coming-soon-style1 > .container:nth-of-type(1){ flex: 0 0 auto; } /* título + contador */
    .block.coming-soon-style1 > .container:nth-of-type(2){                   /* ilustraciones */
        flex: 0 0 auto;
        margin-top: auto;        /* reparte el espacio sobrante arriba/abajo = centrado */
        margin-bottom: auto;
    }
    footer{ position: static !important; flex: 0 0 auto; } /* footer al fondo, en el flujo */

    /* -- c) las dos escenas, una sobre otra, centradas -- */
    .block.coming-soon-style1 > .container:nth-of-type(2) > .row{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;            /* separa el trabajador (arriba) de la excavadora (abajo) */
        margin: 0;
    }
    .mob-block-left,
    .mob-block-right{
        float: none !important;
        display: flow-root;            /* mantiene la escena unida (no se descoloca) */
        padding: 0 !important;
        margin: 0 !important;
    }
    .mob-block-left{  width: 501px !important; zoom: 0.8; }    /* trabajador + muro */
    .mob-block-right{ width: 696px !important; zoom: 0.64; }   /* excavadora + hoyo + conos (iPad 992–1199px) */
}

/* ===== ≤991px — escalar las escenas y ajustar contador ===== */
@media (max-width: 991px){
    .cd-num{ font-size: 54px; padding: 18px 8px; }
    .cd-box{ min-width: 104px; }
    .mob-block-left{  zoom: 0.7; }
    .mob-block-right{ zoom: 0.56; }
}

/* ===== MÓVIL (≤767px) — título que SIEMPRE entra + escenas más chicas + footer apilado ===== */
@media (max-width: 767px){
    /* el título no se debe cortar: tamaño fijo que entra + puede partirse en 2 líneas.
       Alineado a la IZQUIERDA (el template lo centra en <=413px y no queremos eso). */
    .h1{ font-size: 44px !important; line-height: 1.05 !important; white-space: normal !important; text-align: left !important; width: 100% !important; margin-bottom: 6px !important; }
    .h2{ font-size: 17px !important; white-space: normal !important; text-align: left !important; width: 100% !important; }

    .date .countdown{ gap: 14px; }
    .cd-num{ font-size: 46px; padding: 16px 8px; }
    .cd-box{ min-width: 94px; }

    .margin-top-50{ margin-top: 22px !important; }
    .margin-top-30{ margin-top: 14px !important; }
    .margin-top-100{ margin-top: 6px !important; }

    .mob-block-left{  zoom: 0.74; }
    .mob-block-right{ zoom: 0.58; }

    /* footer apilado y centrado */
    footer .footer-linck,
    footer .follow-us{ float: none; width: 100%; margin-right: 0; text-align: center; }
    footer .follow-us{ margin-top: 8px; }
    footer .follow-us .titel,
    footer .follow-us .thumbs{ float: none; display: inline-block; }
    footer .footer-linck{ height: auto; line-height: 1.7; }
}

/* ===== MÓVIL (≤480px) ===== */
@media (max-width: 480px){
    .h1{ font-size: 38px !important; }
    .h2{ font-size: 15px !important; }
    .date .countdown{ gap: 10px; }
    .cd-num{ font-size: 38px; padding: 14px 6px; }
    .cd-box{ min-width: 76px; }
    .cd-label{ font-size: 12px; }
    .mob-block-left{  zoom: 0.64; }
    .mob-block-right{ zoom: 0.5; }
}

/* ===== MÓVIL chico (≤375px) — iPhone SE, Pixel 4 ===== */
@media (max-width: 375px){
    .h1{ font-size: 31px !important; }
    .h2{ font-size: 13px !important; }
    .mob-block-left{  zoom: 0.56; }
    .mob-block-right{ zoom: 0.44; }
}