/*
Theme Name:   Hello Elementor Child
Template:     hello-elementor
Version:      2.0.0
Description:  COPROINT - Diseño dark corporativo inspirado en Stracon
*/

/* ─── Google Fonts: Barlow (equivalente a NeueHaasGrot de Stracon) ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;400;500;600;700;800;900&family=Barlow+Condensed:wght@400;500;600;700;800;900&display=swap');

/* ─── Variables de diseño COPROINT ──────────────────────────────────────────── */
:root {
    --cp-primary:    #0f2341;
    --cp-dark:       #0a1928;
    --cp-darker:     #060e1a;
    --cp-card:       #122040;
    --cp-alt:        #0c1e33;
    --cp-accent:     #c9a84c;
    --cp-accent-h:   #e0bb5a;
    --cp-white:      #ffffff;
    --cp-text:       rgba(255,255,255,0.70);
    --cp-border:     rgba(255,255,255,0.08);
    --cp-font:       'Barlow', 'Montserrat', -apple-system, sans-serif;
    --cp-font-disp:  'Barlow Condensed', 'Montserrat', sans-serif;
    --cp-ease:       cubic-bezier(.4,0,.2,1);
    --cp-trans:      all .35s var(--cp-ease);
}

/* ─── Base: fondo oscuro en todo el sitio ────────────────────────────────────── */
html, body {
    background-color: var(--cp-dark) !important;
    font-family: var(--cp-font);
    color: var(--cp-white);
    overflow-x: hidden;
}

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: var(--cp-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--cp-accent); }
::-webkit-scrollbar-track { background: var(--cp-dark); }
::selection { background: var(--cp-accent); color: var(--cp-darker); }

/* ─── Tipografía global ───────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--cp-font-disp);
    line-height: 1.12;
    letter-spacing: 0.03em;
}

/* ─── Sections full-width stretch ───────────────────────────────────────────── */
.elementor-section.elementor-section-stretched {
    left: 0 !important;
    width: 100vw !important;
    max-width: 100% !important;
}

/* ─── Heading title font ─────────────────────────────────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--cp-font-disp);
    line-height: 1.12;
}

/* ─── Navegación header ───────────────────────────────────────────────────────── */
.elementor-nav-menu--main .elementor-nav-menu > li > a {
    font-family: var(--cp-font) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.5px !important;
    padding: 6px 18px !important;
    color: rgba(255,255,255,0.88) !important;
    transition: color .2s !important;
    position: relative;
}
.elementor-nav-menu--main .elementor-nav-menu > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 18px;
    right: 18px;
    height: 2px;
    background: var(--cp-accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--cp-ease);
}
.elementor-nav-menu--main .elementor-nav-menu > li > a:hover,
.elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a {
    color: var(--cp-accent) !important;
}
.elementor-nav-menu--main .elementor-nav-menu > li > a:hover::after,
.elementor-nav-menu--main .elementor-nav-menu > li.current-menu-item > a::after {
    transform: scaleX(1);
}

/* Mobile menu */
.elementor-menu-toggle { color: var(--cp-white) !important; }
.elementor-nav-menu--dropdown { background: var(--cp-primary) !important; }
.elementor-nav-menu--dropdown a { color: var(--cp-white) !important; border-color: var(--cp-border) !important; }
.elementor-nav-menu--dropdown a:hover { color: var(--cp-accent) !important; background: rgba(255,255,255,0.04) !important; }

/* ─── Botones: estilo Stracon (borde con hover fill) ─────────────────────────── */
.elementor-button {
    font-family: var(--cp-font) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    transition: var(--cp-trans) !important;
    padding: 14px 34px !important;
}
.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
}

/* ─── Contador (stats) ───────────────────────────────────────────────────────── */
.elementor-widget-counter .elementor-counter-number-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 1px;
}
.elementor-widget-counter .elementor-counter-number {
    font-family: var(--cp-font-disp) !important;
    font-weight: 800 !important;
    line-height: 1;
}
.elementor-widget-counter .elementor-counter-title {
    margin-top: 8px;
    display: block;
    font-family: var(--cp-font) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    opacity: 0.7;
}

/* Separador entre stats */
.elementor-section .elementor-column:not(:last-child) .elementor-widget-counter {
    border-right: 1px solid var(--cp-border);
}

/* ─── Divisor ─────────────────────────────────────────────────────────────────── */
.elementor-divider-separator { border-radius: 2px; }

/* ─── Cards de servicio/valores (grid HTML) ──────────────────────────────────── */
.cp-card-dark {
    background: var(--cp-card);
    border-top: 3px solid var(--cp-accent);
    padding: 32px 24px;
    text-align: center;
    transition: transform .3s var(--cp-ease), box-shadow .3s var(--cp-ease);
}
.cp-card-dark:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.45);
}
.cp-card-dark i {
    font-size: 38px;
    color: var(--cp-accent);
    display: block;
    margin-bottom: 20px;
}
.cp-card-dark h3 {
    font-family: var(--cp-font);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--cp-white);
    margin: 0 0 10px;
}
.cp-card-dark p {
    font-family: var(--cp-font);
    font-size: 13.5px;
    color: var(--cp-text);
    line-height: 1.75;
    margin: 0;
}

/* ─── Proyectos: hover en columnas con bg-image ──────────────────────────────── */
.elementor-column[style*="background-image"] {
    overflow: hidden;
    cursor: pointer;
}
.elementor-column[style*="background-image"] .elementor-column-wrap {
    transition: transform .55s var(--cp-ease);
}
.elementor-column[style*="background-image"]:hover .elementor-column-wrap {
    transform: scale(1.05);
}
.elementor-column[style*="background-image"] .elementor-widget-heading .elementor-heading-title {
    text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}

/* ─── Formulario de contacto: tema oscuro ────────────────────────────────────── */
.cp-form-group label {
    color: rgba(255,255,255,0.55) !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
}
.cp-form-group input,
.cp-form-group select,
.cp-form-group textarea {
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: var(--cp-white) !important;
    border-radius: 0 !important;
}
.cp-form-group input::placeholder,
.cp-form-group textarea::placeholder {
    color: rgba(255,255,255,0.3) !important;
}
.cp-form-group input:focus,
.cp-form-group select:focus,
.cp-form-group textarea:focus {
    border-color: var(--cp-accent) !important;
    box-shadow: 0 0 0 3px rgba(201,168,76,0.15) !important;
    outline: none;
    background: rgba(255,255,255,0.09) !important;
}
.cp-form-group select option { background: var(--cp-card); color: var(--cp-white); }
.cp-btn {
    background: var(--cp-accent) !important;
    color: var(--cp-darker) !important;
    border: none !important;
    font-family: var(--cp-font) !important;
    font-weight: 800 !important;
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    padding: 14px 34px !important;
    border-radius: 0 !important;
    cursor: pointer;
    transition: var(--cp-trans);
    align-self: flex-start;
}
.cp-btn:hover {
    background: var(--cp-accent-h) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,168,76,0.35) !important;
}

/* ─── Header sticky ───────────────────────────────────────────────────────────── */
.elementor-location-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: box-shadow .3s;
}
.elementor-location-header.scrolled,
.elementor-location-header:not([style*="position"]) {
    box-shadow: 0 2px 24px rgba(0,0,0,0.5);
}

/* ─── Footer links ────────────────────────────────────────────────────────────── */
.elementor-location-footer a {
    transition: color .2s;
}
.elementor-location-footer a:hover {
    color: var(--cp-accent) !important;
}

/* ─── Animaciones entrada hero ───────────────────────────────────────────────── */
@keyframes cp-fade-up {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cp-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.elementor-section-height-100vh .elementor-widget {
    animation: cp-fade-up .9s var(--cp-ease) both;
}
.elementor-section-height-100vh .elementor-widget:nth-child(1) { animation-delay: .1s; }
.elementor-section-height-100vh .elementor-widget:nth-child(2) { animation-delay: .25s; }
.elementor-section-height-100vh .elementor-widget:nth-child(3) { animation-delay: .4s; }
.elementor-section-height-100vh .elementor-widget:nth-child(4) { animation-delay: .55s; }
.elementor-section-height-100vh .elementor-widget:nth-child(5) { animation-delay: .7s; }
.elementor-section-height-100vh .elementor-widget:nth-child(6) { animation-delay: .85s; }

/* ─── WhatsApp flotante ───────────────────────────────────────────────────────── */
.cp-whatsapp-float {
    position: fixed; bottom: 28px; right: 28px;
    width: 58px; height: 58px;
    background: #25d366;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; z-index: 9999;
    box-shadow: 0 4px 16px rgba(37,211,102,.4);
    transition: transform .25s, box-shadow .25s;
}
.cp-whatsapp-float:hover {
    transform: scale(1.1) translateY(-3px);
    box-shadow: 0 10px 28px rgba(37,211,102,.5);
}
.cp-whatsapp-float svg { width: 30px; height: 30px; fill: #fff; }

/* ─── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .elementor-column[data-settings*='"_column_size":25'] { width: 50% !important; }
}
@media (max-width: 768px) {
    .elementor-column { width: 100% !important; }
    .elementor-section-height-100vh { min-height: 100svh; }
    .elementor-section-height-100vh .elementor-heading-title {
        font-size: clamp(34px, 11vw, 72px) !important;
    }
    .cp-cards-grid { grid-template-columns: 1fr !important; }
    .cp-cards-grid-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 480px) {
    .cp-form-row { grid-template-columns: 1fr !important; }
}

/* ─── Smooth scroll ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }