/* ============================================================
   CO override sobre aigocy
   Objetivo: IGUAL al demo principal (colores + efectos #0072e5).
   Solo se conservan ajustes NO visuales del demo:
   - wordmark de texto (sustituye el logo Aigocy)
   - menú sticky (petición de Carlos)
   - ocultar el selector de color del demo
   El color/acento/efectos los pone styles.css original (pristine).
   ============================================================ */

/* ===== Wordmark de texto (sustituye logos Aigocy) =====
   Acento de marca = el del demo (#0072e5). */
.co-logo{
  font-family:'Urbanist','Space Grotesk',sans-serif;
  font-weight:800;font-size:22px;letter-spacing:-.01em;
  color:#09090B;white-space:nowrap;line-height:1;display:inline-block;
}
/* En secciones oscuras el texto va claro (el footer es CLARO → wordmark oscuro por defecto) */
.box-black .co-logo,.bg-dark .co-logo,.bg-dark-2 .co-logo,.s-black .co-logo{color:#ffffff;}

/* ===== Menú siempre visible (sticky) — petición de Carlos ===== */
.tf-header{position:sticky !important;top:0;z-index:1000;}
/* Subir el menú un poco (el demo lo separa 48px del borde) */
.tf-header{padding-top:18px !important;}

/* ===== HERO con foto de Carlos de fondo (petición de Carlos) =====
   Velo oscuro para legibilidad + título en blanco. Acento naranja del demo intacto. */
.section-hero .hero-image{background-position:center top !important;}
.section-hero .hero-image::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(6,12,22,.55) 0%,rgba(6,12,22,.42) 45%,rgba(6,12,22,.60) 100%);
}
.section-hero .title1,
.section-hero .title2 span:not(.box){
  color:#ffffff !important;-webkit-text-fill-color:#ffffff !important;background:none !important;
}
.section-hero .text{color:#e7eefc !important;-webkit-text-fill-color:#e7eefc !important;}
/* ===== HERO above-the-fold: exactamente 1 pantalla, terminando en Desliza =====
   El padding-top fijo de 420px hacia que en portatiles (viewport mas bajo) los
   botones quedaran por debajo del corte. Ahora el hero mide 100svh y el contenido
   se centra verticalmente, despejando cabecera (86px) y barra Desliza (56px). */
@media (min-width:992px){
  .section-hero{
    min-height:calc(100vh + 30px) !important;
    min-height:calc(100svh + 30px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }
  .section-hero > .container{ width:100% !important; }
  .section-hero .content-wrap{
    padding-top:104px !important;
    padding-bottom:104px !important;
    transform:translateY(130px) !important;
  }
}

/* ===== Ocultar el selector de color del demo ===== */
.btn-setting-color,#settingColorMenu{display:none !important;}

/* ===== Watermark del footer GRANDE como el demo =====
   El nombre es largo: se agranda y los extremos sangran fuera (estilo marca de agua). */
footer{overflow:hidden;}
footer .footer-image{width:100% !important;max-width:none !important;}

body{overflow-x:hidden;}

/* Titular del hero 4px mas pequeno (peticion de Carlos): 96 -> 92 */
@media (min-width:992px){
  .section-hero .title1,
  .section-hero .title2 span{font-size:82px !important;}
}

/* ===== HERO movil: ocupar toda la pantalla, imagen al borde inferior, contenido adaptado ===== */
@media (max-width:991px){
  .section-hero{
    min-height:calc(100vh + 30px) !important;
    min-height:calc(100svh + 30px) !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
  }
  .section-hero > .container{ width:100% !important; }
  .section-hero .content-wrap{
    padding-top:96px !important;
    padding-bottom:96px !important;
    transform:translateY(150px) !important;
  }
  /* pill adaptado al ancho del movil (no desbordar) */
  .section-hero .content-wrap .sub{
    max-width:calc(100% - 24px) !important;
    white-space:normal !important;
    flex-wrap:nowrap !important;
    text-align:left !important;
    line-height:1.25 !important;
  }
}

/* Pill del hero en 2 lineas: linea1 (junto al icono) + de Negocios justo debajo */
.section-hero .content-wrap .sub{align-items:center !important;}
.section-hero .content-wrap .sub .co-pill-txt{
  white-space:nowrap;text-align:left !important;line-height:1.25;
}
.section-hero .content-wrap .sub .co-pill-txt .pl1,
.section-hero .content-wrap .sub .co-pill-txt .pl2{white-space:nowrap;}

/* Pill: 1 linea en desktop, 2 lineas SOLO en movil */
@media (max-width:991px){
  .section-hero .content-wrap .sub .co-pill-txt{display:flex;flex-direction:column;align-items:flex-start;white-space:normal;}
  .section-hero .content-wrap .sub .co-pill-txt .pl1,
  .section-hero .content-wrap .sub .co-pill-txt .pl2{display:block;}
}

/* Tablet (992-1199px): bajar el bloque 100px (igual que movil) */
@media (min-width:768px) and (max-width:1199px) and (min-height:1000px){
  .section-hero .content-wrap{transform:translateY(250px) !important;}
}

/* ===== FIX responsive alturas cortas (29/06): evitar que los CTA invadan la pestana Desliza =====
   En viewports de poca altura el translateY del bloque empujaba los botones sobre
   la barra Desliza. El titular nuevo (mas largo) ocupa mas alto y lo agravaba.
   Se reduce el translateY cuando el viewport es bajo. */

/* Movil de poca altura (<=740px alto): iPhone SE 667, Android 640, etc. */
@media (max-width:991px) and (max-height:740px){
  .section-hero .content-wrap{ transform:translateY(70px) !important; }
}

/* Tablet apaisado / portatil de poca altura (>=992px ancho y <=820px alto): 1024x768, 1280x800, 1366x768 */
@media (min-width:992px) and (max-height:820px){
  .section-hero .content-wrap{ transform:translateY(80px) !important; }
}

/* Escritorio MUY bajo (<=760px alto, ej 1280x720): no aplicar la bajada de 50px completa para no invadir Desliza */
@media (min-width:992px) and (max-height:760px){
  .section-hero .content-wrap{ transform:translateY(35px) !important; }
}

/* Separacion hero -> Quien soy (caja negra) */
#quien-soy{margin-top:48px !important;}

/* Tarjeta grande "Quien soy" (Ava): ancho completo de la tarjeta con margen del marco (padding propio de .team-item) + recorte panoramico para que no sea excesiva en alto */
.team-lead .image{
    aspect-ratio:21/9;
}

/* Margenes generosos entre tarjetas de equipo (Quien soy) */
.team-lead-row{
    margin-bottom:32px;
}
.section-team .team-grid-row{
    --bs-gutter-x:2rem;
}
.section-team .team-item.style-1{
    margin-bottom:32px !important;
}

/* Rejilla de logos (Quien soy): sin iconos github/linkedin, logo centrado horizontalmente */
.team-grid-row .team-item.style-1 .top{
    justify-content:center;
}

/* Las 9 tarjetas de logos: mismo alto/ancho y nombre del centro centrado */
.team-grid-row .team-item.style-1{
    min-height:310px;
    display:flex;
    flex-direction:column;
}
.team-grid-row .team-item.style-1 .name{
    justify-content:center;
    text-align:center;
}
.team-grid-row .team-item.style-1 .sub{
    text-align:center;
}

/* Reducir el hueco excesivo entre la rejilla de logos y "Reconocimientos" */
.section-team.flat-spacing{
    padding-bottom:24px;
}
.section-awards.flat-spacing{
    padding-top:24px;
}

/* Tamaño H2 estandar (jerarquia SEO/UX: mas pequeño que el H1 del hero y que los heading-title de 72px usados como titulares de seccion) */
.heading-title.h2-standard{
    font-size:28px;
    line-height:36px;
}
@media (min-width:768px){
    .heading-title.h2-standard{
        font-size:40px;
        line-height:48px;
    }
}

/* Acordeon de FAQ duplicado en "Quien soy" (home): adaptar colores claros -> oscuros */
#accordion-asked-quien-soy .accordion-asked-item{
    background-color:#18181B;
    box-shadow:0px 7.77px 2.21px 0px rgba(0,0,0,.0588235294),0px 3px 3px 0px rgba(0,0,0,.1019607843),0px -8px 0px 0px #111111 inset,0px 4px 0px 0px rgba(255,255,255,.1019607843) inset;
}
#accordion-asked-quien-soy .accordion-button{
    color:#ffffff;
}
#accordion-asked-quien-soy .accordion-body{
    color:var(--neutral-400);
}

/* Mini-acordeon "Mas sobre mi" fusionado en la tarjeta grande de Quien soy (sin fondo/tarjeta propia) */
.quien-soy-bio{
    width:100%;
    margin:24px 0;
}
.quien-soy-bio .quien-soy-bio-item{
    background:transparent;
    box-shadow:none;
    padding:20px 0;
    border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);
    border-radius:0;
}
.quien-soy-bio .quien-soy-bio-title{
    text-align:center;
    color:#ffffff;
    width:100%;
}
.quien-soy-bio .quien-soy-bio-body{
    color:var(--neutral-400);
    text-align:center;
    padding-top:20px;
}
.qsbio-more-wrap{
    margin-top:16px;
}
/* La sombra del boton del footer (pensada para fondo claro) casi no se ve sobre el fondo oscuro de "Quien soy": se refuerza aqui para que se perciba igual de elevado */
.qsbio-more-wrap a{
    box-shadow: 0px 10px 28px 0px rgba(0,0,0,.5), 0px 3px 6px 0px rgba(0,0,0,.35), 0px -8px 0px 0px rgba(0,0,0,.15) inset, 0px 4px 0px 0px rgba(255,255,255,.6) inset;
    padding:12px 24px !important;
    gap:12px !important;
    position:relative;
    overflow:hidden;
}
.qsbio-more-wrap a .social-item{
    width:24px !important;
    height:24px !important;
    font-size:12px !important;
}
.qsbio-more-wrap a::before{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    width:50%;
    height:100%;
    background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    transition:left .6s ease;
    pointer-events:none;
}
.qsbio-more-wrap a:hover::before{
    left:125%;
}

/* FAQ duplicado en Quien soy: mismo ancho que la tarjeta grande + 100px de margen respecto a ella */
.faqs-quien-soy{
    padding-top:0;
    padding-bottom:60px;
    margin-top:-6px;
}

.cert-desc{
    font-size:13px;
    line-height:1.4;
    font-weight:400;
    margin-top:4px;
}
.quien-soy-bio-body p{
    margin:0 0 12px;
}
.quien-soy-bio-body p:last-of-type{
    margin-bottom:0;
}

/* Biografia larga de Carlos en /sobre-mi/: legible en columna centrada, alineada a la izquierda */
.carlos-bio{
    max-width:760px;
    margin:0 auto;
    text-align:left;
    padding:0 20px;
}
.carlos-bio p{
    color:var(--neutral-400);
    margin:0 0 16px;
    line-height:1.7;
}
.carlos-bio .carlos-bio-lead{
    color:#ffffff;
    font-size:20px;
    font-weight:600;
    line-height:1.5;
}
.carlos-bio .carlos-bio-pillars-intro{
    color:#ffffff;
    font-weight:600;
    margin-bottom:12px;
}
.carlos-bio-list{
    list-style:none;
    padding:0;
    margin:0 0 20px;
    display:grid;
    gap:12px;
}
.carlos-bio-list li{
    display:flex;
    align-items:flex-start;
    gap:12px;
    color:#ffffff;
    line-height:1.5;
}
.carlos-bio-list li i{
    color:var(--brand);
    font-size:14px;
    margin-top:4px;
    flex-shrink:0;
}
@media (max-width:767px){
    .carlos-bio .carlos-bio-lead{
        font-size:18px;
    }
}

/* Carrusel de tecnologías (sobre-mi, entre Certificaciones y Resultados) */
.tech-carousel{
    padding:0;
}
.tech-carousel .partner-wrap{
    padding:24px 0;
}
.tech-carousel .partner-wrap .infiniteslide_wrap::after{
    background:linear-gradient(90deg,#09090B 0%,rgba(9,9,11,0) 25%,rgba(9,9,11,0) 75%,#09090B 100%);
}
.tech-carousel .partner-wrap::before{
    background:linear-gradient(90deg,rgba(255,255,255,0) 0%,rgba(255,255,255,0.14) 50%,rgba(255,255,255,0) 100%);
}
.tech-carousel-track{
    gap:56px;
}
.tech-carousel-track img{
    height:40px;
    width:auto;
    object-fit:contain;
}
@media (max-width:767px){
    .tech-carousel .partner-wrap{
        padding:16px 0;
    }
    .tech-carousel-track{
        gap:36px;
    }
    .tech-carousel-track img{
        height:28px;
    }
}

/* Categorías de Formación/Certificaciones en /sobre-mi/ */
.cert-category-heading{
    margin-top:48px;
}
.cert-category-heading-main{
    margin-top:64px;
    margin-bottom:32px;
}
.cert-category-heading-main .heading-sub{
    font-size:18px;
    padding:10px 22px 10px 34px;
}
.cert-subcategory-heading{
    margin-top:32px;
}
@media (max-width:767px){
    .cert-category-heading{
        margin-top:32px;
    }
    .cert-category-heading-main{
        margin-top:40px;
    }
    .cert-subcategory-heading{
        margin-top:24px;
    }
}

/* Tarjetas de certificaciones profesionales a mitad de tamaño (mismo diseño) */
.cert-tile-half{
    zoom:0.5;
}
.col-cert-half{
    width:50%;
    padding-left:12px;
    padding-right:12px;
}
@media (min-width:768px){
    .col-cert-half{
        width:25%;
    }
}
@media (min-width:1200px){
    .col-cert-half{
        width:12.5%;
    }
}


/* Certificaciones: tarjetas horizontales (logo a la derecha) en grid de 2 columnas, sustituyen a las tarjetas pequeñas cuadradas */
.cert-h-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}
@media (max-width:767px){
    .cert-h-grid{
        grid-template-columns:1fr;
    }
}
.cert-h-item{
    display:flex;
    align-items:center;
    gap:20px;
    border-radius:24px;
    border:1px solid var(--neutral-800);
    padding:16px 24px;
    transition:all .3s ease;
}
.cert-h-item .entity{
    flex:0 0 140px;
    display:flex;
    align-items:center;
}
.cert-h-item .cert-name{
    flex:1;
    display:flex;
    align-items:center;
}
.cert-h-item:hover{
    background:linear-gradient(0deg, var(--neutral-900,#18181B), var(--neutral-900,#18181B)), radial-gradient(62.56% 62.56% at 28.14% -10.42%, rgba(255,255,255,.1) 0%, rgba(255,255,255,0) 100%);
    box-shadow:0px -4px 0px 0px #111111 inset, 0px 2px 0px 0px rgba(255,255,255,.1019607843) inset, 0px 7.77px 2.21px 0px rgba(0,0,0,.0588235294), 0px 3px 3px 0px rgba(0,0,0,.1019607843);
}
.cert-h-item .entity{
    color:#fff;
    font-weight:600;
    font-size:16px;
}
.cert-h-item .cert-name{
    color:var(--neutral-400);
    font-size:14px;
    line-height:1.4;
}
.cert-h-item .image{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}
.cert-h-item .image img{
    max-height:52px;
    width:auto;
    max-width:110px;
    object-fit:contain;
    display:block;
}
@media (max-width:480px){
    .cert-h-item .image img{
        max-height:40px;
        max-width:80px;
    }
}

/* Iconos de las 4 tarjetas de Valores (Innovacion/Creatividad/Colaboracion/Excelencia) centrados */
.features-item.style-2 .icon{
    margin-left:auto;
    margin-right:auto;
}

/* Iconos sociales quitados de la tarjeta principal: se conserva el margen inferior que había */
.valores-row{
    margin-bottom:52px;
}

/* Frase "La tecnologia siempre..." como overlay centrado en la parte inferior de la foto de Carlos */
.team-lead .image{
    position:relative;
    overflow:hidden;
}
.team-lead .image::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:45%;
    background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
    pointer-events:none;
    z-index:1;
}
.team-lead .image .carlos-bio-lead{
    position:absolute;
    left:50%;
    bottom:36px;
    transform:translateX(-50%);
    width:90%;
    max-width:760px;
    text-align:center;
    color:#fff;
    font-family:"Urbanist", sans-serif;
    font-size:38px;
    font-weight:700;
    letter-spacing:-0.01em;
    line-height:1.25;
    margin:0;
    z-index:2;
    text-shadow:0 4px 24px rgba(0,0,0,.55), 0 1px 4px rgba(0,0,0,.4);
}
.team-lead .image .carlos-bio-lead::before{
    content:"";
    display:block;
    width:56px;
    height:3px;
    border-radius:99px;
    background:var(--brand);
    margin:0 auto 16px;
}
@media (max-width:991px){
    .team-lead .image .carlos-bio-lead{
        font-size:26px;
        bottom:24px;
    }
    .team-lead .image .carlos-bio-lead::before{
        margin-bottom:12px;
    }
}
@media (max-width:767px){
    .team-lead .image .carlos-bio-lead{
        font-size:19px;
        bottom:16px;
        width:92%;
    }
    .team-lead .image .carlos-bio-lead::before{
        width:40px;
        margin-bottom:10px;
    }
}

/* Margen inferior del ultimo carrusel de tecnologia: sin esto queda pegado al borde de la caja negra (overflow:hidden) y no se ve completo */
#quien-soy > .section-partner.tech-carousel:last-child{
    margin-bottom:64px;
}
@media (max-width:767px){
    #quien-soy > .section-partner.tech-carousel:last-child{
        margin-bottom:40px;
    }
}

/* Botones de redes sociales del footer a la mitad de su tamaño original */
.tf-social-1 a{
    padding:10px 20px;
    gap:12px;
    border-radius:12px;
    font-size:9px;
    line-height:14px;
}
.tf-social-1 a .social-item{
    width:16px;
    height:16px;
    font-size:8px;
}
.tf-social-1{
    gap:5px 12px;
}
@media (max-width:767px){
    .tf-social-1 a{
        padding:6px 14px;
    }
}

.section-hero .scroll-more{background-color:#fafafa !important;}