/* ============================================================
   ClickBox — Global  |  v1
   Ancho 1380px · Texto body 17px · Responsive mobile-first
   Cargado en TODAS las páginas del tema hijo
   ============================================================ */

/* ============================================================
   FIX  —  Espacio blanco fantasma entre header y hero
   Causa: margin-block-start del h1 del parent theme escapando
   vía margin collapsing en móvil
   ============================================================ */
.cb-hero,
.cb-home,
.cb-atl, .cb-web, .cb-foto, .cb-btl, .cb-mktd, .cb-ctc, .cb-srv {
    margin-top: 0 !important;
}

/* Reset márgenes en primer hijo de los heros */
.cb-hero__content > *:first-child,
.cb-hero__title,
.cb-hero__title > *:first-child {
    margin-top: 0 !important;
    margin-block-start: 0 !important;
}

/* Body SIN padding-top — el hero va debajo del header transparente */
body { padding-top: 0 !important; }

/* ============================================================
   FIX  —  Puente invisible entre "SERVICIOS" y su submenú
   Evita que el submenú se cierre al cruzar el gap con el mouse
   ============================================================ */

/* Bridge transparente arriba del submenú — cubre el gap de 10px */
.cb-header__submenu::after {
    content: '' !important;
    position: absolute !important;
    top: -16px !important;
    left: -24px !important;
    right: -24px !important;
    height: 18px !important;
    background: transparent !important;
    z-index: -1 !important;
    pointer-events: auto !important;
}

/* Asegurar que el hover persista cuando el cursor está sobre el item completo */
.cb-header__item--has-sub {
    position: relative !important;
}

/* Pequeño extra: mantener el submenú visible mientras hay hover en cualquier descendiente */
.cb-header__item--has-sub:hover > .cb-header__submenu,
.cb-header__item--has-sub > .cb-header__submenu:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* ============================================================
   HERO OVERLAY  —  ligero + acentos de color tipo agencia
   Deja ver la imagen original; oscurece solo donde va el texto
   ============================================================ */
.cb-hero__overlay {
    background:
        /* Acento radial morado — esquina superior derecha */
        radial-gradient(
            circle at 88% 18%,
            rgba(91, 74, 255, .22) 0%,
            transparent 42%
        ),
        /* Acento radial verde — esquina inferior derecha */
        radial-gradient(
            circle at 82% 85%,
            rgba(81, 215, 40, .20) 0%,
            transparent 42%
        ),
        /* Sweep horizontal — oscuro solo en izquierda para legibilidad */
        linear-gradient(
            95deg,
            rgba(6, 9, 39, .82) 0%,
            rgba(6, 9, 39, .55) 28%,
            rgba(6, 9, 39, .22) 55%,
            rgba(6, 9, 39, .05) 85%,
            transparent 100%
        )
    !important;
}

/* Brillo sutil en el borde inferior del hero — línea de neón estilo agencia */
.cb-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(81, 215, 40, .5) 25%,
        rgba(91, 74, 255, .7) 50%,
        rgba(81, 215, 40, .5) 75%,
        transparent 100%
    );
    box-shadow: 0 0 24px rgba(91, 74, 255, .35);
    z-index: 4;
    pointer-events: none;
    animation: cb-hero-pulse 4s ease-in-out infinite;
}

@keyframes cb-hero-pulse {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1;  }
}

/* ============================================================
   SECCIONES SERVICIO  —  menos espacio en blanco + texto mayor
   ¿Qué hacemos? y Proceso en todas las páginas de servicio
   ============================================================ */

/* Padding vertical reducido */
.atl-section, .web-section, .foto-section, .btl-section, .mktd-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
}
.atl-intro, .web-intro, .foto-intro, .btl-intro, .mktd-intro {
    padding-top: 60px !important;
    padding-bottom: 40px !important;
}

/* Grid 42% texto | 58% imagen — menos desbalance */
.atl-split, .web-split, .foto-split, .btl-split, .mktd-split {
    grid-template-columns: 42% 1fr !important;
    gap: 40px !important;
}
.atl-split--img-first, .web-split--img-first, .foto-split--img-first,
.btl-split--img-first, .mktd-split--img-first {
    grid-template-columns: 1fr 42% !important;
}

/* Imagen acotada y centrada — elimina el exceso de blanco */
.atl-section-img, .web-section-img, .foto-section-img,
.btl-section-img, .mktd-section-img {
    max-width: 540px !important;
    max-height: 460px !important;
    object-fit: contain !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Apilar columnas en tablet/móvil (≤900px) */
@media (max-width: 900px) {
    .atl-split, .web-split, .foto-split, .btl-split, .mktd-split,
    .atl-split--img-first, .web-split--img-first, .foto-split--img-first,
    .btl-split--img-first, .mktd-split--img-first {
        grid-template-columns: 1fr !important;
        gap: 28px !important;
    }
    .atl-section-img, .web-section-img, .foto-section-img,
    .btl-section-img, .mktd-section-img {
        max-height: 380px !important;
    }
}

/* Texto body más grande — clamp para escalar solo en móvil */
.atl-body, .web-body, .foto-body, .btl-body, .mktd-body {
    font-size: clamp(16px, 1.5vw, 19px) !important;
    line-height: 1.75 !important;
}

/* Label ¿QUÉ HACEMOS? un poco más grande */
.atl-label, .web-label, .foto-label, .btl-label, .mktd-label {
    font-size: clamp(20px, 2.4vw, 28px) !important;
}

/* ============================================================
   SECCIÓN ¿QUÉ INCLUYE?  —  iconos grandes + textos prominentes
   Aplica a TODAS las páginas de servicio
   ============================================================ */

/* Título "¿QUÉ INCLUYE?" — ~35px */
.atl-section-title,
.web-section-title,
.foto-section-title,
.btl-section-title,
.mktd-section-title {
    font-size: clamp(26px, 3.5vw, 35px) !important;
    margin-bottom: 60px !important;
}

/* Wrap del icono — un poco mayor para que respire */
.atl-icon-wrap,
.web-icon-wrap,
.foto-icon-wrap,
.btl-icon-wrap,
.mktd-icon-wrap {
    width: 120px !important;
    height: 110px !important;
}

/* Iconos — 110×100 */
.atl-icon-img,
.web-icon-img,
.foto-icon-img,
.btl-icon-img,
.mktd-icon-img {
    width: 110px !important;
    height: 100px !important;
    object-fit: contain !important;
}

/* Labels — 25px regular */
.atl-icon-label,
.web-icon-label,
.foto-icon-label,
.btl-icon-label,
.mktd-icon-label {
    font-size: 25px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    max-width: 250px !important;
    color: var(--mktd-text, #1a1a3e) !important;
}

/* Card spacing — más generoso */
.atl-icon-card,
.web-icon-card,
.foto-icon-card,
.btl-icon-card,
.mktd-icon-card {
    gap: 22px !important;
}

/* Marketing Digital — "¿QUÉ HACEMOS?" en morado (no verde) */
.mktd-label {
    color: var(--mktd-morado) !important;
}

/* ============================================================
   RESPONSIVE — iconos
   ============================================================ */

/* Tablet 900-1199 — 5 iconos pasan a 3 columnas para que respiren */
@media (max-width: 1199px) {
    .atl-icon-label,
    .web-icon-label,
    .foto-icon-label,
    .btl-icon-label,
    .mktd-icon-label {
        font-size: 21px !important;
        max-width: 220px !important;
    }
}

@media (max-width: 960px) {
    .btl-icons,
    .mktd-icons {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 36px 28px !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .atl-icons,
    .web-icons,
    .foto-icons,
    .btl-icons,
    .mktd-icons {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 32px 20px !important;
    }

    .atl-icon-wrap,
    .web-icon-wrap,
    .foto-icon-wrap,
    .btl-icon-wrap,
    .mktd-icon-wrap {
        width: 95px !important;
        height: 90px !important;
    }

    .atl-icon-img,
    .web-icon-img,
    .foto-icon-img,
    .btl-icon-img,
    .mktd-icon-img {
        width: 88px !important;
        height: 82px !important;
    }

    .atl-icon-label,
    .web-icon-label,
    .foto-icon-label,
    .btl-icon-label,
    .mktd-icon-label {
        font-size: 17px !important;
        max-width: 170px !important;
    }

    .atl-section-title,
    .web-section-title,
    .foto-section-title,
    .btl-section-title,
    .mktd-section-title {
        font-size: 26px !important;
        margin-bottom: 40px !important;
    }
}

@media (max-width: 480px) {
    .atl-icon-label,
    .web-icon-label,
    .foto-icon-label,
    .btl-icon-label,
    .mktd-icon-label {
        font-size: 15px !important;
        max-width: 140px !important;
    }
}

/* ============================================================
   IMÁGENES DE SECCIÓN  —  sin fondo ni glow + flotación suave
   ============================================================ */
.atl-section-img,
.web-section-img,
.foto-section-img,
.btl-section-img,
.mktd-section-img {
    width: 100% !important;
    display: block !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: cb-img-float 6s ease-in-out infinite !important;
    transition: transform .5s ease !important;
}

@keyframes cb-img-float {
    0%, 100% { transform: translateY(0)    rotate(0deg);   }
    25%      { transform: translateY(-8px) rotate(-.5deg); }
    50%      { transform: translateY(-14px) rotate(0deg);  }
    75%      { transform: translateY(-8px)  rotate(.5deg); }
}

/* Hover: pausa el flote y leve zoom — sin shadow */
.atl-section-img:hover,
.web-section-img:hover,
.foto-section-img:hover,
.btl-section-img:hover,
.mktd-section-img:hover {
    animation-play-state: paused !important;
    transform: scale(1.04) !important;
    box-shadow: none !important;
}

/* Reduce flotación en móvil para no marear */
@media (max-width: 767px) {
    @keyframes cb-img-float {
        0%, 100% { transform: translateY(0);    }
        50%      { transform: translateY(-6px); }
    }
}

/* ============================================================
   TIPOGRAFÍA QANDARU  —  instalada en assets/fonts/
   Usada en títulos cursivos via .cb-font-qandaru
   ============================================================ */
@font-face {
    font-family: 'Qandaru';
    src: url('/wp-content/themes/hello-biz-child/assets/fonts/Qandaru.otf') format('opentype'),
         url('/wp-content/themes/hello-biz-child/assets/fonts/Qandaru.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Clase global que aplica Qandaru — con Pacifico como respaldo */
.cb-font-qandaru {
    font-family: 'Qandaru', 'Pacifico', cursive !important;
}

/* ============================================================
   1. MAX-WIDTH GLOBAL 1380px
   Sobrescribe todas las variables de contenedor
   ============================================================ */

/* Header */
.cb-header__inner {
    max-width: 1380px !important;
    padding-left:  48px !important;
    padding-right: 48px !important;
}

/* Footer */
.cb-footer__container {
    max-width: 1380px !important;
    padding-left:  48px !important;
    padding-right: 48px !important;
}

/* Home */
.cb-container {
    max-width: 1380px !important;
    padding-left:  48px !important;
    padding-right: 48px !important;
}

/* Hero inner (home y páginas de servicio) */
.cb-hero__inner {
    max-width: 1380px !important;
    padding-left:  56px !important;
    padding-right: 56px !important;
}

/* Páginas de servicio — contenedores individuales */
.atl-container,
.web-container,
.foto-container,
.btl-container,
.mktd-container,
.ctc-container,
.srv-container {
    max-width: 1380px !important;
    padding-left:  48px !important;
    padding-right: 48px !important;
}

/* Heros centrados (contacto y servicios) */
.ctc-hero__inner,
.srv-hero__inner {
    max-width: 1380px !important;
    padding-left:  56px !important;
    padding-right: 56px !important;
}

/* Intro home */
.cb-intro__inner {
    max-width: 1380px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 48px !important;
    padding-right: 48px !important;
}

/* ============================================================
   2. TIPOGRAFÍA — 17px para todo texto no-título
   ============================================================ */

/* Hero subtítulo — grande y responsive */
.cb-hero__sub {
    font-size: clamp(20px, 2.5vw, 33px) !important;
    line-height: 1.5 !important;
}

/* Texto body en páginas de servicio */
.atl-body,
.web-body,
.foto-body,
.btl-body,
.mktd-body {
    font-size: 17px !important;
    line-height: 1.8 !important;
}

/* Subtítulos itálicos intro */
.atl-intro__sub,
.web-intro__sub,
.foto-intro__sub,
.btl-intro__sub,
.mktd-intro__sub {
    font-size: 17px !important;
    line-height: 1.75 !important;
}

/* Pasos de proceso */
.atl-step,
.web-step,
.foto-step,
.btl-step,
.mktd-step {
    font-size: 17px !important;
}

/* Labels de servicios (¿QUÉ HACEMOS?) — mantener clamp, solo body */
/* (no sobreescribir los labels de sección — son títulos) */

/* Sección iconos labels — definidos arriba en sección ¿QUÉ INCLUYE? */

/* Resultado texto */
.atl-resultado__text,
.web-resultado__text,
.foto-resultado__text,
.btl-resultado__text,
.mktd-resultado__text {
    font-size: 17px !important;
}

/* Servicios — cards y intro */
.srv-card__desc { font-size: 17px !important; line-height: 1.7 !important; }
.srv-intro__text { font-size: 17px !important; }
.srv-cta-box__sub { font-size: 17px !important; }

/* Contacto */
.ctc-info__text span,
.ctc-info__text a { font-size: 17px !important; }
.ctc-intro__sub,
.ctc-body p { font-size: 17px !important; }

/* Home */
/* .cb-hero__sub ya tiene su regla arriba con clamp 33px */
.cb-intro__text    { font-size: clamp(20px, 2.6vw, 35px) !important; line-height: 1.55 !important; }
.cb-about__content p { font-size: 17px !important; }
.cb-process p      { font-size: 17px !important; }
.cb-service-card p { font-size: 17px !important; }
.cb-footer__info-list li { font-size: 16px !important; }  /* footer un poco menor */

/* Nav (header) */
#cb-header .cb-header__nav .cb-header__link,
#cb-header .cb-header__nav a.cb-header__link {
    font-size: 15px !important;
}

/* ============================================================
   3. RESPONSIVE GLOBAL
   ============================================================ */

/* ── Tablet grande 1200-1380 ── */
@media (max-width: 1380px) {
    .cb-header__inner,
    .cb-footer__container,
    .cb-container,
    .cb-hero__inner,
    .atl-container, .web-container, .foto-container,
    .btl-container, .mktd-container, .ctc-container,
    .srv-container, .ctc-hero__inner, .srv-hero__inner,
    .cb-intro__inner {
        padding-left:  36px !important;
        padding-right: 36px !important;
    }
}

/* ── Tablet 768-1199 ── */
@media (max-width: 1199px) {
    .cb-header__inner,
    .cb-footer__container,
    .cb-container,
    .cb-hero__inner,
    .atl-container, .web-container, .foto-container,
    .btl-container, .mktd-container, .ctc-container,
    .srv-container, .ctc-hero__inner, .srv-hero__inner,
    .cb-intro__inner {
        padding-left:  28px !important;
        padding-right: 28px !important;
    }

    /* Hero sub e intro home — mantienen tamaño grande en tablet */
    .cb-hero__sub   { font-size: clamp(20px, 2.2vw, 26px) !important; }
    .cb-intro__text { font-size: clamp(20px, 2.4vw, 28px) !important; }

    /* Ajustar texto cuerpo en tablet */
    .atl-body, .web-body, .foto-body, .btl-body, .mktd-body,
    .atl-intro__sub, .web-intro__sub, .foto-intro__sub,
    .btl-intro__sub, .mktd-intro__sub,
    .srv-card__desc, .srv-intro__text { font-size: 16px !important; }
}

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

    /* Padding reducido en móvil */
    .cb-header__inner { padding-left: 18px !important; padding-right: 18px !important; }

    .cb-footer__container,
    .cb-container,
    .atl-container, .web-container, .foto-container,
    .btl-container, .mktd-container, .ctc-container,
    .srv-container, .cb-intro__inner {
        padding-left:  18px !important;
        padding-right: 18px !important;
    }

    .cb-hero__inner,
    .ctc-hero__inner,
    .srv-hero__inner {
        padding-left:  20px !important;
        padding-right: 20px !important;
        padding-top:   104px !important;  /* header (64px) + aire para no quedar tapado */
        padding-bottom: 56px !important;
    }

    /* Hero sub e intro home — prominentes en móvil */
    .cb-hero__sub   { font-size: 19px !important; }
    .cb-intro__text { font-size: 20px !important; line-height: 1.5 !important; }

    /* Texto body en móvil — 15px para mayor densidad */
    .atl-body, .web-body, .foto-body, .btl-body, .mktd-body,
    .atl-intro__sub, .web-intro__sub, .foto-intro__sub,
    .btl-intro__sub, .mktd-intro__sub,
    .atl-step, .web-step, .foto-step, .btl-step, .mktd-step,
    .srv-card__desc, .srv-intro__text, .srv-cta-box__sub,
    .ctc-info__text span, .ctc-info__text a,
    .cb-about__content p, .cb-process p { font-size: 15px !important; }

    /* Labels de sección reducidos en móvil */
    .atl-label, .web-label, .foto-label, .btl-label, .mktd-label {
        font-size: 18px !important;
    }

    /* Resultado texto */
    .atl-resultado__text, .web-resultado__text,
    .foto-resultado__text, .btl-resultado__text,
    .mktd-resultado__text { font-size: 16px !important; }

    /* Proceso títulos */
    .atl-proceso-title, .web-proceso-title, .foto-proceso-title,
    .btl-proceso-title, .mktd-proceso-title { font-size: 28px !important; }

    /* Cards servicios en móvil: 1 columna (ya lo hacen los CSS individuales) */
    /* CTA box en móvil */
    .srv-cta-box { padding: 36px 20px !important; }

    /* Hero titles — menos enormes en móvil */
    .cb-hero__line1 { font-size: clamp(2.6rem, 10vw, 4.5rem) !important; }
    .cb-hero__line2 { font-size: clamp(2.6rem, 10vw, 4.5rem) !important; }
    .cb-hero__line3 { font-size: clamp(2rem, 8vw, 3.5rem) !important; }

    /* Intro headings en móvil */
    .atl-intro__heading, .web-intro__heading, .foto-intro__heading,
    .btl-intro__heading, .mktd-intro__heading {
        font-size: clamp(22px, 5.5vw, 32px) !important;
    }

    /* Ocultar sidebar nav en móvil (ya manejado por header.css) */
}

/* ── Móvil pequeño ≤ 480 ── */
@media (max-width: 480px) {

    .cb-header__inner { padding-left: 14px !important; padding-right: 14px !important; }

    .cb-container,
    .atl-container, .web-container, .foto-container,
    .btl-container, .mktd-container, .ctc-container,
    .srv-container {
        padding-left:  14px !important;
        padding-right: 14px !important;
    }

    /* CTAs — texto más corto en móvil */
    .atl-cta, .web-cta, .foto-cta, .btl-cta, .mktd-cta,
    .ctc-form-card .wpforms-submit, .srv-cta-btn {
        font-size: 0.875rem !important;
        padding: 16px 28px !important;
    }

    /* Grid iconos: siempre 2 col en móvil pequeño */
    .atl-icons, .web-icons, .foto-icons,
    .btl-icons, .mktd-icons {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Split sections: 1 col */
    .atl-split, .web-split, .foto-split, .btl-split, .mktd-split,
    .atl-split--img-first, .web-split--img-first, .foto-split--img-first,
    .btl-split--img-first, .mktd-split--img-first {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}