@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ============================================================
   Obiqo — Estilos personalizados
   SIN overrides de color — se respetan los estilos del template
   ============================================================ */

/* ---- Language switch ---- */
.lang-switch {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-left: 10px;
    margin-left: 6px;
}
.lang-switch .nav-link {
    padding: 0 4px !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.lang-switch .lang-active {
    opacity: 0.4;
    pointer-events: none;
    cursor: default;
}

/* ---- Login trigger ---- */
.login-trigger { margin-left: 8px; }

/* ---- Cuadrícula de soluciones en servicios.html ---- */
.soluciones-grid a {
    display: block;
    color: #555;
    text-decoration: none;
    padding: 18px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.25s;
    margin-bottom: 16px;
}
.soluciones-grid a:hover {
    color: #333;
    border-color: #aaa;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    text-decoration: none;
}
.soluciones-grid i {
    display: block;
    margin-bottom: 8px;
    font-size: 22px;
}

/* ---- Links de soluciones zona oscura (contacto) ---- */
.sol-links-bar {
    text-align: center;
    padding: 28px 0;
}
.sol-links-bar a {
    display: inline-block;
    margin: 6px 14px;
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #888;
    text-decoration: none;
    transition: color 0.3s;
}
.sol-links-bar a:hover {
    color: #fff;
    text-decoration: none;
}

/* ============================================================
   Tipografía global — Space Grotesk en todo el sitio
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Space Grotesk', sans-serif !important;
}
.lead {
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 400;
}
p {
    font-family: 'Space Grotesk', sans-serif !important;
}
.big-tagline h2 {
    font-weight: 700;
    letter-spacing: -0.01em;
}
h4 {
    font-weight: 600;
    letter-spacing: 0.06em;
}




/* ============================================================
   Zoom hover en imágenes de contenido (no slider)
   ============================================================ */
.post-media {
    overflow: hidden;
    border-radius: 4px;
}
.post-media img {
    transition: transform 0.6s ease;
    display: block;
    width: 100%;
}
.post-media:hover img,
.img-rotator:hover .rot-frame.rot-active img {
    transform: scale(1.05);
}

#obiqoloop-stage{position:relative;width:min(300px,80vw);aspect-ratio:317/138;display:inline-block}
#obiqoloop-stage svg{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible}
/* ============================================================
   4 puntos navbar — equidistantes, misma altura, pequeños
   ============================================================ */

/* Tamaño uniforme 5px — SIN tocar top (diferente sistema de coords) */
.top-navbar .navbar-light .navbar-nav .nav-item::after,
.top-navbar .navbar-light .navbar-nav .nav-item .nav-link::before,
.top-navbar .navbar-light .navbar-nav .nav-item .nav-link::after {
    width: 5px !important;
    height: 5px !important;
    border-radius: 50% !important;
}

/* 4to punto (nav-item::before) — mismo top:11px que nav-item::after */
.top-navbar .navbar-light .navbar-nav .nav-item::before {
    position: absolute;
    content: '';
    left: 50%;
    top: 11px;
    width: 5px;
    height: 5px;
    opacity: 0;
    margin-left: -3px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 900ms ease;
    -webkit-transition: all 900ms ease;
}

/* ACTIVE — 4 puntos equidistantes: 25% / 40% / 60% / 75%
   Los 2 del centro tienen la misma separación que los extremos */
.top-navbar .navbar-light .navbar-nav .nav-item.active .nav-link::before {
    left: 25% !important; opacity: 1 !important;
}
.top-navbar .navbar-light .navbar-nav .nav-item.active::before {
    left: 40% !important; opacity: 1 !important;
}
.top-navbar .navbar-light .navbar-nav .nav-item.active::after {
    left: 60% !important; margin-left: -2.5px !important; opacity: 1 !important;
}
.top-navbar .navbar-light .navbar-nav .nav-item.active .nav-link::after {
    right: 25% !important; opacity: 1 !important;
}

/* HOVER — idéntico al active */
.top-navbar .navbar-light .navbar-nav .nav-item .nav-link:hover::before {
    left: 25% !important; opacity: 1 !important;
}
.top-navbar .navbar-light .navbar-nav .nav-item:hover::before {
    left: 40% !important; opacity: 1 !important;
}
.top-navbar .navbar-light .navbar-nav .nav-item:hover::after {
    left: 60% !important; margin-left: -2.5px !important; opacity: 1 !important;
}
.top-navbar .navbar-light .navbar-nav .nav-item .nav-link:hover::after {
    right: 25% !important; opacity: 1 !important;
}

/* ============================================================
   Rotador de imágenes — fotos rotan detrás, logo encima
   ============================================================ */
.img-rotator {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    aspect-ratio: 4/3;
}
.rot-photo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.rot-photo img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.rot-photo.rot-active { opacity: 1; }

/* Logo overlay — siempre encima, fondo transparente */
.rot-logo-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
}
.rot-logo-overlay #obiqoloop-stage {
    width: min(70%, 220px);
}

/* Zoom hover en post-media single images */
.post-media {
    overflow: hidden;
    border-radius: 4px;
}
.post-media img {
    transition: transform 0.6s ease;
    display: block; width: 100%;
}
.post-media:hover img { transform: scale(1.05); }
.img-rotator:hover .rot-photo.rot-active img { transform: scale(1.05); }
.rot-photo img { transition: transform 0.6s ease, opacity 0s; }

/* ============================================================
   all-title-box — sin capitalize, todo en oración normal
   ============================================================ */
.all-title-box h1 {
    text-transform: none !important;
}
span.m_1 {
    text-transform: none !important;
}

/* ============================================================
   TrueFocus — efecto de letras tech (global, todos los heroes)
   ============================================================ */
.tf-word {
    display: inline-block;
    transition: filter .4s ease, opacity .4s ease;
    white-space: nowrap;
}
.tf-word.tf-blur  { filter: blur(5px); opacity: .25; }
.tf-word.tf-focus { filter: blur(0); opacity: 1; position: relative; }
.tf-word.tf-done  { filter: blur(0); opacity: 1; }
.tf-word.tf-focus::after {
    content: '';
    position: absolute;
    inset: -3px -6px;
    border: 1.5px solid #10B981;
    border-radius: 3px;
    animation: tfpulse .9s ease forwards;
    pointer-events: none;
}
@keyframes tfpulse {
    0%   { opacity: 0; transform: scale(.88); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.04); }
}


/* ============================================================
   ReactBits backgrounds — contenedores
   ============================================================ */
.rb-shapegrid {
    position: relative;
    overflow: hidden;
}
.rb-shapegrid > *:not(canvas) {
    position: relative;
    z-index: 1;
}
/* Shape grid: fondo negro con tipografía blanca */
.rb-shapegrid {
    background: #000 !important;
    color: #fff;
}
.rb-shapegrid h1, .rb-shapegrid h2, .rb-shapegrid h3, .rb-shapegrid h4,
.rb-shapegrid h5, .rb-shapegrid p, .rb-shapegrid li, .rb-shapegrid a,
.rb-shapegrid span:not(.js-truefocus), .rb-shapegrid strong {
    color: #fff !important;
}
.rb-shapegrid .js-truefocus { color: #fff !important; }
.rb-shapegrid span.m_1 { color: rgba(255,255,255,0.75) !important; }
.rb-shapegrid a.hover-btn-new span { color: inherit; }

/* ============================================================
   Logo divider — antes del footer (movido desde index.html)
   ============================================================ */
.logo-divider{text-align:center;padding:60px 0;background:#fff;}
.logo-divider img{max-width:200px;width:50%;animation:logopulse 3s ease-in-out infinite;}
@keyframes logopulse{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.04);opacity:1;}}

/* ============================================================
   Submenú de Soluciones: se abre al pasar el mouse en escritorio,
   así el clic queda libre para entrar a la página
   ============================================================ */
@media (min-width: 992px){
    .top-navbar .navbar-nav .nav-item.dropdown:hover > .dropdown-menu{ display:block; margin-top:0; }
}
@media (max-width: 991px){
    .top-navbar .navbar-nav .dropdown-menu.show{ display:block; }
}

/* ============================================================
   Precios — mismo tratamiento tipográfico que el grid de Soluciones
   (el template dejaba las líneas muy separadas y el texto muy claro)
   ============================================================ */
.pricing-table-features,
.pricing-table-features p,
.pricing-table-text,
.pricing-table-text p{
    font-family:'Quicksand', sans-serif !important;
    font-size:15px;
    line-height:1.8;
    letter-spacing:0;
    color:#555;
    margin-bottom:2px;
}
.pricing-table-features i{ color:#00953A; }

/* ============================================================
   Heroes con paneo lateral y fade entre dos imágenes
   La imagen recorre hacia la izquierda; al terminar su recorrido
   se funde con la siguiente y el ciclo se repite (nunca regresa,
   el salto ocurre mientras la capa está oculta).
   ============================================================ */
.all-title-box.hero-pan{ position:relative; overflow:hidden; background:#0b0f0b; }
.all-title-box.hero-pan > *{ position:relative; z-index:3; }

.all-title-box.hero-pan::before,
.all-title-box.hero-pan::after{
    content:''; position:absolute; inset:0; z-index:1;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:0% center;
    filter:brightness(.45);
    animation:heroPan 16s linear infinite, heroFadeA 16s ease-in-out infinite;
}
.all-title-box.hero-pan::after{
    animation:heroPan 16s linear infinite, heroFadeB 16s ease-in-out infinite;
}

@keyframes heroPan{
    from{ background-position:0% center; }
    to  { background-position:100% center; }
}
@media (prefers-reduced-motion: reduce){
    .all-title-box.hero-pan::before,
    .all-title-box.hero-pan::after{ animation:none; }
    .all-title-box.hero-pan::after{ opacity:0; }
}

/* Imágenes por página */
.hero-empresa::before   { background-image:url(../images/obiqo-hero-empresa-1.jpg); }
.hero-empresa::after    { background-image:url(../images/obiqo-hero-empresa-2.jpg); }
.hero-servicios::before { background-image:url(../images/obiqo-hero-servicios-1.jpg); }
.hero-servicios::after  { background-image:url(../images/obiqo-hero-servicios-2.jpg); }
.hero-precios::before   { background-image:url(../images/obiqo-hero-precios-1.jpg); }
.hero-precios::after    { background-image:url(../images/obiqo-hero-precios-2.jpg); }
.hero-soluciones::before{ background-image:url(../images/obiqo-hero-soluciones-1.jpg); }
.hero-soluciones::after { background-image:url(../images/obiqo-hero-soluciones-2.jpg); }
.hero-contacto::before  { background-image:url(../images/obiqo-hero-contacto-1.jpg); }
.hero-contacto::after   { background-image:url(../images/obiqo-hero-contacto-2.jpg); }

/* Hero de Soluciones: los círculos van encima de la foto y debajo del texto */
.all-title-box.rb-shapegrid canvas{ z-index:2 !important; }
.all-title-box.rb-shapegrid{ background:transparent !important; }
.all-title-box.hero-pan.rb-shapegrid::before,
.all-title-box.hero-pan.rb-shapegrid::after{ filter:brightness(.35); }

/* El template anula los eventos del toggle al presionarlo
   (.dropdown>.dropdown-toggle:active{pointer-events:none}),
   lo que impedía entrar a Soluciones con el primer clic. */
.top-navbar .navbar-nav .dropdown > .dropdown-toggle:active{ pointer-events:auto !important; }

/* Puntitos en los heroes: encima de la foto, debajo del texto */
.all-title-box.hero-dots{ position:relative; overflow:hidden; }
.all-title-box.hero-dots > *{ position:relative; z-index:3; }
.all-title-box canvas.df-canvas{ z-index:2; }

/* ============================================================
   Botones de Soluciones sobre la sección oscura (Inicio,
   Servicios y Contacto): color sólido, no transparentes
   ============================================================ */
.rb-shapegrid .soluciones-grid a{
    background:#ffffff;
    border:1px solid #ffffff;
    color:#1f2a24 !important;
    box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.rb-shapegrid .soluciones-grid a i{ color:#00953A !important; }
.rb-shapegrid .soluciones-grid a strong{ color:#1f2a24 !important; }
.rb-shapegrid .soluciones-grid a:hover{
    background:#00953A;
    border-color:#00953A;
    color:#fff !important;
    box-shadow:0 6px 18px rgba(0,149,58,.35);
}
.rb-shapegrid .soluciones-grid a:hover i,
.rb-shapegrid .soluciones-grid a:hover strong{ color:#fff !important; }

/* ============================================================
   Logo animado en el footer, arriba de "Sobre Obiqo"
   ============================================================ */
.footer .footer-logo{
    position:static !important;
    display:block;
    width:100%;
    text-align:center;
    margin:0 0 26px 0;
    pointer-events:none;
}
.footer .footer-logo #obiqoloop-stage{
    display:inline-block;
    width:min(210px, 60%);
}
/* Créditos en dos renglones */
.copyrights .footer-company-name{ line-height:1.7; }
.copyrights .footer-company-name a[href*="vectorycall"]{ display:inline-block; margin-top:4px; }

/* ============================================================
   Créditos: redes arriba y separadas, copyright en medio y la
   firma de Vectory Call hasta abajo, en su propio renglón
   ============================================================ */
.copyrights .footer-distributed{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; }
.copyrights .footer-distributed .footer-right{ order:1; margin:0 0 18px 0; float:none; }
.copyrights .footer-distributed .footer-left{ order:2; float:none; width:100%; }
.copyrights .footer-company-name{ margin:0; }
.copyrights .vc-sign{ display:block; margin-top:14px; font-size:10px; opacity:.45; }
.copyrights .vc-sign:hover{ opacity:.8; }

/* ============================================================
   AJUSTES MÓVIL — botones, slider y respiración
   ============================================================ */
@media (max-width: 767px){

    /* Botones: más chicos y con aire; nunca pegados al borde */
    .hover-btn-new,
    .first-section .big-tagline a{
        font-size:14px !important;
        padding:11px 20px !important;
        margin:6px 4px 0 0 !important;
    }
    .big-tagline a{ display:inline-block; }

    /* Slider: contenido arriba, texto contenido y legible */
    .box-slider .carousel-item .dtab{ vertical-align:top; padding-top:26px; }
    .first-section .big-tagline{ padding:0 6px; }
    .big-tagline h2{ font-size:26px !important; line-height:1.2 !important; margin-bottom:10px; }
    .big-tagline .lead{
        font-size:15px !important; line-height:1.5 !important;
        margin-bottom:16px; max-height:none;
    }
    /* El texto del slider siempre centrado en celular */
    .box-slider .col-md-12{ text-align:center !important; }

    /* Las flechas no deben cruzarse con el texto */
    .box-slider .carousel-control-prev,
    .box-slider .carousel-control-next{ width:44px; opacity:.55; }
    .box-slider .carousel-control-prev{ left:0; }
    .box-slider .carousel-control-next{ right:0; }

    /* Respiración lateral en todas las secciones */
    .section .container,
    .all-title-box .container,
    .copyrights .container{ padding-left:22px; padding-right:22px; }
    .section{ padding:52px 0; }

    /* Botones apilados y del mismo ancho cuando van en fila */
    .customwidget .hover-btn-new,
    .soluciones-grid + .text-center .hover-btn-new{ display:inline-block; }

    /* Heroes: sin paneo lateral en celular, solo el fade suave */
    .all-title-box.hero-pan::before,
    .all-title-box.hero-pan::after{
        animation:heroFadeA 16s ease-in-out infinite;
        background-position:center center !important;
    }
    .all-title-box.hero-pan::after{ animation-name:heroFadeB; }
}

/* Fade de los heroes: cruce largo y suave, sin golpe */
@keyframes heroFadeA{
    0%{opacity:1} 38%{opacity:1} 50%{opacity:0} 88%{opacity:0} 100%{opacity:1}
}
@keyframes heroFadeB{
    0%{opacity:0} 38%{opacity:0} 50%{opacity:1} 88%{opacity:1} 100%{opacity:0}
}
html{ scroll-behavior:smooth; }

/* Botón del modal de acceso con el gris del template, nunca el azul de Bootstrap */
#loginModal .btn-primary{
    background:#2d3032 !important; border-color:#2d3032 !important; color:#fff !important;
}
#loginModal .btn-primary:hover{ background:#1f2224 !important; border-color:#1f2224 !important; }

/* ============================================================
   SLIDER: botones separados de las flechas
   ============================================================ */
.box-slider .big-tagline a.hover-btn-new{ margin-top:18px; }

@media (max-width: 991px){
    /* el contenido del slider no invade la zona de las flechas */
    .box-slider .big-tagline{ padding:0 56px; }
    /* los botones bajan y quedan por debajo del eje de las flechas */
    .box-slider .big-tagline a.hover-btn-new{ margin-top:34px; }
    /* flechas más discretas y pegadas a la orilla */
    .box-slider .carousel-control-prev,
    .box-slider .carousel-control-next{ width:40px; opacity:.5; }
}
@media (max-width: 575px){
    .box-slider .big-tagline{ padding:0 46px; }
    .box-slider .big-tagline a.hover-btn-new{
        display:block; width:100%; max-width:260px; margin:12px auto 0 !important;
    }
    .box-slider .big-tagline a.hover-btn-new:first-of-type{ margin-top:30px !important; }
}

/* Redes sociales en la columna de Contacto del footer */
.footer-links li.footer-social{ margin-top:12px; }
.footer-links li.footer-social a{
    display:inline-block; width:34px; height:34px; line-height:34px; text-align:center;
    margin-right:8px; border:1px solid rgba(255,255,255,.18); border-radius:50%;
}
.footer-links li.footer-social a:hover{ background:#00953A; border-color:#00953A; color:#fff; }
/* Redes en la página de Contacto */
.cont_social a{
    display:inline-block; width:36px; height:36px; line-height:36px; text-align:center;
    margin-right:8px; border:1px solid #ddd; border-radius:50%; color:#555;
}
.cont_social a:hover{ background:#00953A; border-color:#00953A; color:#fff; }

/* ============================================================
   PANEO EN EL SLIDER — solo se mueve el fondo, el texto queda fijo
   ============================================================ */
.box-slider .carousel-item .first-section{
    position:relative;
    overflow:hidden;
    background-size:cover;
    background-position:center center;
}
/* capa que hereda la misma imagen y es la única que se anima */
.box-slider .carousel-item .first-section::before{
    content:'';
    position:absolute; inset:0; z-index:0;
    background-image:inherit;
    background-size:cover;
    background-position:center center;
}
.box-slider .carousel-item.active .first-section::before{
    animation:sliderPan 10s linear both;
}
/* el contenido siempre por encima y sin moverse */
.box-slider .carousel-item .first-section .dtab{ position:relative; z-index:1; }

@keyframes sliderPan{
    from{ background-position:30% center; transform:scale(1.04); }
    to  { background-position:70% center; transform:scale(1.10); }
}
@media (max-width: 767px){
    @keyframes sliderPan{
        from{ background-position:16% center; transform:scale(1.06); }
        to  { background-position:84% center; transform:scale(1.14); }
    }
}
@media (prefers-reduced-motion: reduce){
    .box-slider .carousel-item.active .first-section::before{ animation:none; }
}



/* Logo animado hasta arriba del modal de acceso */
#loginModal .modal-logo{
    position:static !important;
    display:block; width:100%; text-align:center;
    padding:22px 20px 4px; pointer-events:none;
}
#loginModal .modal-logo #obiqoloop-stage{ display:inline-block; width:min(180px, 55%); }
#loginModal .modal-header{ border-bottom:0; padding-top:6px; }
#loginModal .modal-title{ font-size:18px; }

/* Datos de contacto: debajo del formulario, a todo lo ancho */
.contact-info-bottom{ margin-top:46px; }
.contact-info-bottom .contact_detail ul{ display:flex; flex-wrap:wrap; gap:26px 40px; padding:0; margin:0; list-style:none; }
.contact-info-bottom .contact_detail ul li{ flex:1 1 200px; min-width:200px; }
@media (max-width: 767px){
    .contact-info-bottom .contact_detail ul{ display:block; }
    .contact-info-bottom .contact_detail ul li{ margin-bottom:18px; }
}