/* =================================================
   CONFIGURACIÓN GENERAL
   ================================================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', sans-serif;
}

/* =================================================
   BARRA SUPERIOR
   ================================================= */

.top-bar{
    background:#0b4fa3;
    color:#ffffff;
    display:flex;
    justify-content:flex-end;
    gap:30px;
    padding:8px 50px;
    font-size:14px;
}

/* Items individuales de la barra (teléfono, email, etc.) */
.top-bar-item {
  color: var(--blanco);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap; /* Evita que el texto se parta en medio de una palabra */
}

@media (max-width: 768px) {
    .top-bar {
        padding: 8px 15px;
        gap: 15px;
        font-size: 12px;
        justify-content: center;
    }
}

/* =================================================
   HEADER / ENCABEZADO
   ================================================= */

.header {
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 80px 15px 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    position: sticky;
    top: 0;
    z-index: 1000;
    overflow: visible;
    height: 80px;
}


.logo img{
    height:60px;
}

/* =================================================
   NAVEGACIÓN PRINCIPAL
   ================================================= */

.nav{
    display:flex;
    align-items:center;
    gap:18px;
    overflow: visible;
}

.nav a{
    text-decoration:none;
    color:#0b4fa3;
    font-weight:500;
    font-size:15px;
}

.nav a:hover{
    color:#4fc3f7;
}

/* =================================================
   SUBMENÚ SERVICIOS
   ================================================= */

.nav-item {
  position: relative;
}

/* SUBMENÚ */
.menu-vertical {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;               /* ALINEADO A LA IZQUIERDA */
  background: #ffff;   
  min-width: 220px;
  padding: 10px 0;
  list-style: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.25);
  z-index: 1000;
}

/* ÁREA INVISIBLE (ANTI-PARPADEO) */
.menu-vertical::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  width: 50%;
  height: 12px;
}

/* ITEMS */
.menu-vertical li a {
  display: block;
  padding: 12px 20px;
  color: #000000;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.3s, color 0.3s;
}

/* HOVER ITEM */
.menu-vertical li a:hover {
  background: #4fc3f7;
  color: #000000;
  font-weight: bold;
}

/* MOSTRAR SUBMENÚ */
.nav-item:hover .menu-vertical,
.menu-vertical:hover {
  display: block;
}


/* =================================================
   BOTÓN CONTÁCTANOS
   ================================================= */

.btn-contacto {
    position: relative;
    background: #0b4fa3;
    color: #ffffff !important;
    padding: 10px 30px 10px 22px;
    border-radius: 25px;
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
}

.btn-contacto::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 35px;
    height: 35px;
    border: 2px solid #0b4fa3;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.btn-contacto::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    background: #0b4fa3;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

.btn-contacto:hover {
    background: #4fc3f7;
    color: #003366 !important;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-contacto:hover::after {
    right: -65px;
    border-color: #4fc3f7;
}

.btn-contacto:hover::before {
    right: -48px;
    opacity: 1;
    background: #4fc3f7;
}

.btn-contacto span {
    position: absolute;
    top: 50%;
    right: -15px;
    width: 0;
    height: 3px;
    background: #4fc3f7;
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: 9999;
}

.btn-contacto:hover span {
    width: 50px;
    right: -45px;
}


/* =========================
   SLIDER HERO
   ========================= */

.hero-slider{
    position:relative;
    height:550px;
    background:#0b4fa3;
    overflow:hidden;
}

.hero-slider input{
    display:none;
}

/* CONTENEDOR SLIDES */
.slides{
    display:flex;
    width:300%;
    height:100%;
    transition:0.6s ease;
}

/* SLIDE BASE */
.slide{
    width:100%;
    height:100%;
    position:relative;
    background:#7fd3ff; /* Celeste bebé - fondo */
    display:flex;
    align-items:center;
    padding:0 80px;
}

/* FORMA TIPO CARPETA INVERTIDA (AQUI SE MANEJA LAS COORDENADAS)*/
.hero-slider::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:120px;
    background:#ffffff;
    clip-path:polygon(
        0 100%, 
        58% 100%, 
        62% 55%, 
        100% 55%, 
        100% 100%
    );
    z-index:10;
}

/* Figura interior - Azul (con forma similar a línea roja) */
.slide::after{
    content:"";
    position:absolute;
    top:70px;
    left:50px;
    right:50px;
    bottom:100px;
    background:#0b4fa3;
    clip-path:polygon(
        0 0,
        30% 0,
        35% 8%,
        100% 8%,
        100% 100%,
        0 100%
    );
    z-index:1;
}

/* CONTENEDOR DE LA FIGURA DEL TRIANGULO Y LINEA */
.indicator-line-slide{
    position:absolute;
    left:50px;
    bottom:60px;
    display:flex;
    align-items:center;
    gap:12px;

    z-index:2;
}

/* TRIÁNGULO */
.indicator-triangle-slide{
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:12px solid #0b4fa3;
}

/* LÍNEA */
.indicator-bar-slide{
    width:450px;
    height:2px;
    background:#ffffff;
    border-radius:3px;
}

/* CONTENEDOR DE CONTENIDO DEL SLIDE */
.slide-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1200px;
    margin:15px;
}

.slide-text{
    max-width:500px;
    color:#fff;
    position:relative;
    z-index:2;
    transform: translate(20px, -10px);
}

.slide-text p{
    font-size:15px;
    margin-bottom:15px;
    font-weight:300;
}

.slide-text h2{
    font-size:40px;
    margin-bottom:30px;
    font-weight:700;
    line-height:1.2;
}

/* Botón del slide */
.btn-slide{
    position: relative;
    background: #ffffff;
    color: #0b4fa3;
    padding: 14px 40px 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
}

/* Semicírculo lateral */
.btn-slide::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    border-left: 50%;
    border-radius: 50%;
    transition: all 0.5s ease;
}

/* Punto dentro del círculo */
.btn-slide::before{
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Hover */
.btn-slide:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Efecto hover - círculo sale con línea */
.btn-slide:hover::after{
    right: -70px;
}

.btn-slide:hover::before{
    right: -52px;
    opacity: 1;
}

/* LÍNEA HORIZONTAL VISIBLE */
.btn-slide span{
    position: absolute;
    top: 50%;
    right: -75px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-slide:hover span{
    width: 50px;
    right: -50px;
}

/* IMAGEN DE LOS SLIDER */
.slide-image{
    position:relative;
    z-index:2;
    width:800px;
    height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slide-image img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 10px 30px rgba(0,0,0,0.3));

}

/*IMAGEN FLOTANTE COORDENADAS*/
@keyframes float{
    0%, 100%{
        transform:translateX(100px);
    }
    50%{
        transform:translateY(-190px);
    }
}



/* =========================
   FLECHAS
   ========================= */

.arrows{
    position:absolute;
    top:50%;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0 30px;
    transform:translateY(-50%);
    z-index:20;
}

.arrow{
    background:rgba(255,255,255,0.3);
    color:#fff;
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    cursor:pointer;
    transition:0.3s;
    border:2px solid rgba(255,255,255,0.4);
}

.arrow:hover{
    background:rgba(255,255,255,0.5);
    border-color:rgba(255,255,255,0.7);
}

/* =========================
   PUNTOS
   ========================= */

.dots{
    position:absolute;
    bottom:50px;
    width:100%;
    display:flex;
    justify-content:center;
    gap:12px;
    z-index:20;
}

.dots label{
    width:12px;
    height:12px;
    background:rgba(255,255,255,0.4);
    border-radius:50%;
    cursor:pointer;
    transition:0.3s;
}

.dots label:hover{
    background:rgba(255,255,255,0.7);
}

/* =========================
   CONTROL SLIDES
   ========================= */

#slide1:checked ~ .slides{
    margin-left:0;
}

#slide2:checked ~ .slides{
    margin-left:-100%;
}

#slide3:checked ~ .slides{
    margin-left:-200%;
}

#slide1:checked ~ .dots label:nth-child(1),
#slide2:checked ~ .dots label:nth-child(2),
#slide3:checked ~ .dots label:nth-child(3){
    background:#ffffff;
    width:30px;
    border-radius:6px;
}

/* =========================
   SLIDER HERO
   ========================= */

.hero-slider{
    position:relative;
    height:550px;
    background:#0b4fa3;
    overflow:hidden;
}

.hero-slider input{
    display:none;
}

/* CONTENEDOR SLIDES */
.slides{
    display:flex;
    width:300%;
    height:100%;
    transition:0.6s ease;
}

/* SLIDE BASE */
.slide{
    width:100%;
    height:100%;
    position:relative;
    background:#7fd3ff;
    display:flex;
    align-items:center;
    padding:0 80px;
}

/* FORMA TIPO CARPETA INVERTIDA */
.hero-slider::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:0;
    width:100%;
    height:120px;
    background:#ffffff;
    clip-path:polygon(
        0 100%, 
        58% 100%, 
        62% 55%, 
        100% 55%, 
        100% 100%
    );
    z-index:10;
}

/* Figura interior - Azul */
.slide::after{
    content:"";
    position:absolute;
    top:70px;
    left:50px;
    right:50px;
    bottom:100px;
    background:#0b4fa3;
    clip-path:polygon(
        0 0,
        30% 0,
        35% 8%,
        100% 8%,
        100% 100%,
        0 100%
    );
    z-index:1;
}

/* CONTENEDOR DE LA FIGURA DEL TRIANGULO Y LINEA */
.indicator-line-slide{
    position:absolute;
    left:50px;
    bottom:60px;
    display:flex;
    align-items:center;
    gap:12px;
    z-index:2;
}

/* TRIÁNGULO */
.indicator-triangle-slide{
    width:0;
    height:0;
    border-top:7px solid transparent;
    border-bottom:7px solid transparent;
    border-left:12px solid #0b4fa3;
}

/* LÍNEA */
.indicator-bar-slide{
    width:450px;
    height:2px;
    background:#ffffff;
    border-radius:3px;
}

/* CONTENEDOR DE CONTENIDO DEL SLIDE */
.slide-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    max-width:1200px;
    margin:15px;
}

.slide-text{
    max-width:500px;
    color:#fff;
    position:relative;
    z-index:2;
    transform: translate(20px, -10px);
}

.slide-text p{
    font-size:15px;
    margin-bottom:15px;
    font-weight:300;
}

.slide-text h2{
    font-size:40px;
    margin-bottom:30px;
    font-weight:700;
    line-height:1.2;
}

/* Botón del slide */
.btn-slide{
    position: relative;
    background: #ffffff;
    color: #0b4fa3;
    padding: 14px 40px 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
}

/* Semicírculo lateral */
.btn-slide::after{
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff;
    border-left: 50%;
    border-radius: 50%;
    transition: all 0.5s ease;
}

/* Punto dentro del círculo */
.btn-slide::before{
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Hover */
.btn-slide:hover{
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-slide:hover::after{
    right: -70px;
}

.btn-slide:hover::before{
    right: -52px;
    opacity: 1;
}

/* LÍNEA HORIZONTAL VISIBLE */
.btn-slide span{
    position: absolute;
    top: 50%;
    right: -75px;
    width: 0;
    height: 2px;
    background: #ffffff;
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-slide:hover span{
    width: 50px;
    right: -50px;
}

/* IMAGEN DE LOS SLIDER */
.slide-image{
    position:relative;
    z-index:2;
    width:800px;
    height:600px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.slide-image img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    filter:drop-shadow(0 10px 30px rgba(0,0,0,0.3));
}

/* ANIMACIÓN FLOTANTE */
@keyframes float{
    0%, 100%{
        transform:translateX(100px);
    }
    50%{
        transform:translateY(-190px);
    }
}

/* =========================
   FLECHAS
   ========================= */

.arrows{
    position:absolute;
    top:50%;
    width:100%;
    display:flex;
    justify-content:space-between;
    padding:0 30px;
    transform:translateY(-50%);
    z-index:20;
}

.arrow{
    background:rgba(255,255,255,0.3);
    color:#fff;
    width:50px;
    height:50px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    cursor:pointer;
    transition:0.3s;
    border:2px solid rgba(255,255,255,0.4);
}

.arrow:hover{
    background:rgba(255,255,255,0.5);
    border-color:rgba(255,255,255,0.7);
}

/* =========================
   PUNTOS
   ========================= */

.dots{
    position:absolute;
    bottom:50px;
    width:100%;
    display:flex;
    justify-content:center;
    gap:12px;
    z-index:20;
}

.dots label{
    width:12px;
    height:12px;
    background:rgba(255,255,255,0.4);
    border-radius:50%;
    cursor:pointer;
    transition:0.3s;
}

.dots label:hover{
    background:rgba(255,255,255,0.7);
}

/* =========================
   CONTROL SLIDES
   ========================= */

#slide1:checked ~ .slides{
    margin-left:0;
}

#slide2:checked ~ .slides{
    margin-left:-100%;
}

#slide3:checked ~ .slides{
    margin-left:-200%;
}

#slide1:checked ~ .dots label:nth-child(1),
#slide2:checked ~ .dots label:nth-child(2),
#slide3:checked ~ .dots label:nth-child(3){
    background:#ffffff;
    width:30px;
    border-radius:6px;
}


/* =========================
   RESPONSIVE - MÓVIL
   max-width: 768px
   ========================= */

@media (max-width: 768px) {

    .hero-slider {
        height: 320px;
    }

    .slide {
        padding: 0 20px;
        overflow: hidden;
        height: 100%;
    }

    .slide::after {
        top: 30px;
        left: 18px;
        right: 18px;
        bottom: 65px;
        clip-path: polygon(
            0 0,
            38% 0,
            43% 7%,
            100% 7%,
            100% 100%,
            0 100%
        );
    }

    .slide-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        width: 100%;
        height: 100%;
        padding-bottom: 55px;
        gap: 10px;
    }

    .slide-text {
        max-width: 52%;
        transform: translate(8px, 10px);
        flex-shrink: 0;
    }

    .slide-text p {
        font-size: 9px;
        margin-bottom: 6px;
        word-break: keep-all;
        white-space: normal;
    }

    .slide-text h2 {
        font-size: 14px;
        margin-bottom: 12px;
        line-height: 1.25;
        word-break: keep-all;
        overflow-wrap: break-word;
        hyphens: none;
    }

    .btn-slide {
        padding: 10px 25px 10px 15px;
        font-size: 10px;
        border-radius: 28px;
        white-space: nowrap;
        margin-top: 12px; /* baja el botón */
    }

    .btn-slide::after {
        right: -22px;
        width: 32px;
        height: 32px;
    }

    .btn-slide:hover::after {
        right: -60px;
    }

    .btn-slide:hover::before {
        right: -45px;
        opacity: 1;
    }

    .indicator-line-slide {
        left: 20px;
        bottom: 22px;
    }

    .indicator-bar-slide {
        width: 150px;
    }

    .arrows {
        padding: 0 8px;
    }

    .arrow {
        width: 38px;
        height: 38px;
        font-size: 18px;
    }

    /* Dots encima de la línea */
    .dots {
        bottom: 48px;
    }

    .hero-slider::after {
        height: 75px;
        clip-path: polygon(
            0 100%,
            56% 100%,
            61% 50%,
            100% 50%,
            100% 100%
        );
    }

    .dots label {
    width: 7px;
    height: 7px;
    }

    #slide1:checked ~ .dots label:nth-child(1),
    #slide2:checked ~ .dots label:nth-child(2),
    #slide3:checked ~ .dots label:nth-child(3) {
        width: 20px;
        height: 7px;
    }

    .slide:nth-child(1) .slide-image {
    width: 250px;
    height: 250px;
    }

    .slide:nth-child(2) .slide-image,
    .slide:nth-child(3) .slide-image {
        width: 200px;
        height: 200px;
        flex-shrink: 0;
    }

    /* imágenes por separado */
    .slide:nth-child(1) .slide-image img,
    .slide:nth-child(2) .slide-image img,
    .slide:nth-child(3) .slide-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
}

/* =================================================
   CARPETA QUIÉNES SOMOS
   ================================================= */

.qs-carpeta {
    position: relative;
    background: #0b4fa3;
    height: 260px;
    display: flex;
    align-items: center;
    padding-left: 80px;
    overflow: hidden;
}

/* CARPETA INVERTIDA */
.qs-carpeta::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #ffffff;
    clip-path: polygon(
        0 100%,
        58% 100%,
        62% 55%,
        100% 55%,
        100% 100%
    );
    z-index: 1;
}

/* TEXTO */
.qs-carpeta h1 {
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
}

/* LÍNEA Y TRIÁNGULO - apunta a la derecha */
.qs-indicator-line {
    position: absolute;
    left: 520px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 3;
}

.qs-indicator-bar {
    width: 760px;
    height: 0.5px;
    background: #7fd3ff;
    border-radius: 3px;
}

.qs-indicator-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid #69c6f8;
}

/* El triángulo ya NO está dentro del flex, tiene posición fija */
.qs-indicator-triangle {
    position: absolute;
    left: 770px; /* ← siempre en el mismo lugar */
    top: 50%;
    transform: translateY(-50%);
}

/* =================================================
   CONTENIDO 1- NUESTRA HISTORIA
   ================================================= */

.qs-contenido1{
    margin-top: -50px;
    padding: 140px 0;
    background:#ffffff;
}

.qs-wrapper{
    max-width:1200px;
    margin:auto;
    padding: 0 20px;
    display:flex;
    align-items:center;
    gap:80px;
}

/* TEXTO */
.qs-texto{
    flex:1;
    color:#666;
}

.qs-texto p{
    font-size:16px;
    line-height:1.8;
    margin-bottom:20px;
    text-align: justify;
}

/* IMAGEN */
.qs-imagen{
    flex:1;
    display:flex;
    justify-content:center;
}

.qs-imagen img{
    max-width:100%;
    max-height:360px;
}

/* ENCABEZADO - Nuestra Historia */
.qs-contenido1 .about-indicator {
    display: flex;
    align-items: center;
    width: 110%;
}

.qs-contenido1 .about-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #0b4fa3;
    flex-shrink: 0;
}

.qs-contenido1 .about-line {
    flex: 1;
    height: 1px;
    background: #cccccc;
}

.qs-contenido1 .about-title {
    font-size: 30px;
    font-weight: 700;
    color: #0b4fa3;
    margin: 0;
}

.qs-contenido1 .about-header {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 👈 más espacio entre título y línea */
    margin-bottom: 25px;
}

@media (max-width: 768px) {

    /* ── CARPETA QUIÉNES SOMOS ── */
    .qs-carpeta {
        height: 160px;
        padding-left: 20px;
    }

    .qs-carpeta h1 {
        font-size: 22px;
    }

    .qs-carpeta::before {
        height: 50px; /* ← reduce la altura del corte */
    }

    /* ── LÍNEA Y TRIÁNGULO EN MÓVIL ── */
    .qs-indicator-line {
        display: flex;
        align-items: center;
        left: 210px;
        top: 50%;
        transform: translateY(-50%);
        gap: 5px;
    }

    .qs-indicator-bar {
        width: 150px;
    }

    .qs-indicator-triangle {
        position: relative !important;  /* ← fuerza relative */
        left: 0 !important;             /* ← cancela el left: 770px */
        top: 0 !important;
        transform: none !important;
    }

    .qs-indicator-triangle {
        left: auto;
        position: relative; /* ← al final de la línea */
    }

    /* ── CONTENIDO 1 ── */
    .qs-contenido1 {
        margin-top: -20px;
        padding: 80px 20px 80px 20px;
    }

    .qs-wrapper {
        flex-direction: row;
        align-items: center;  /* ← cambia flex-start a center */
        gap: 15px;
        padding: 0;
    }

    .qs-texto {
        flex: 1;
    }

    .qs-texto p {
        font-size: 11px;
        line-height: 1.6;
        margin-bottom: 12px;
    }

    .qs-contenido1 .about-title {
        font-size: 18px;
    }

    .qs-contenido1 .about-header {
        gap: 8px;
        margin-bottom: 15px;
    }

    /* ── IMAGEN AL MEDIO ── */
    .qs-imagen {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .qs-imagen img {
        max-height: 200px;
        width: 100%;
        object-fit: contain;
    }

}


/* =================================================
   CONTENIDO 2 - QUIENES SOMOS
   ================================================= */

.qs-contenido2 {
    position: relative;
    background: #ffffff;
    padding: 120px 30px;
    min-height: 300px;
    text-align: center;
    overflow: hidden;
    margin-top: -110px; /* 👈 sube la sección */
    margin-bottom: 20px; /* 👈 sube la siguiente sección */
    align-items: center;    /* 👈 centra verticalmente */
    justify-content: center; /* 👈 centra horizontalmente */
}

.qs-contenido2::after {
    content: "";
    position: absolute;
    top: 48px;    /* 👈 aumenta para reducir por arriba */
    left: 80px;
    right: 80px;
    bottom: 48px; /* 👈 aumenta para reducir por abajo */
    background: #0b4fa3;
    border-radius: 12px;
    clip-path: polygon(
    0 0,
    36% 0,
    40% 20%,
    100% 20%,
    100% 100%,
    0 100%
);
    z-index: 1;
}

/* LÍNEA Y TRIÁNGULO */
.qs-contenido2 .qs-indicator-line {
    position: absolute;
    left: 555px;
    top: 20%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 3;
}

.qs-contenido2 .qs-indicator-bar {
    width: 683px;
    height: 0.5px;
    background: #7fd3ff;
    border-radius: 3px;
}

.qs-contenido2 .qs-indicator-triangle {
    position: absolute;
    left: 690px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid #69c6f8;
    z-index: 3;
}

.qs-contenido2 p {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding-top: 0; /* 👈 quita el padding */
    font-size: 22px;
    color: #ffffff;
    font-weight: 500;
    text-align: center;
}

.qs-contenido2 p strong {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
}

.qs-contenido2-texto {
    position: relative;
    z-index: 2;
    text-align: center;
    padding-top: 30px;
}

.qs-contenido2 .qs-subtitulo {
    font-size: 18px;
    font-weight: 400;
    color: #e6e6e6;
    margin: 0 0 8px 0; /* 👈 poco espacio entre subtitulo y titulo */
}

.qs-contenido2 .qs-titulo {
    font-size: 32px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}

@media (max-width: 768px) {

    .qs-contenido2 {
        padding: 70px 15px 40px 15px; /* ← reduce el padding arriba y abajo */
        margin-top: -110px;
        margin-bottom: -70px;
    }

    .qs-contenido2::after {
        top: 50px;
        left: 15px;
        right: 15px;
        bottom: 20px;
        clip-path: polygon(
            0 0,
            36% 0,
            42% 8%,   /* ← corte más pequeño en móvil */
            100% 8%,
            100% 60%,
            0 60%
        );
    }

    /* ── LÍNEA Y TRIÁNGULO ── */
    .qs-contenido2 .qs-indicator-line {
        left: 170px;        /* ← ajusta según ancho del texto */
        top: 18%;
        gap: 5px; 
    }

    .qs-contenido2 .qs-indicator-bar {
        width: 185px;       /* ← más corta en móvil */
    }

    .qs-contenido2 .qs-indicator-triangle {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    /* ── TEXTO ── */
    .qs-contenido2 p {
        font-size: 13px;
    }

    .qs-contenido2 p strong {
        font-size: 14px;
    }

    .qs-contenido2-texto {
        padding-top: 15px;
    }

    .qs-contenido2 .qs-subtitulo {
        font-size: 12px;
        margin-bottom: 5px;
    }

    .qs-contenido2 .qs-titulo {
        font-size: 18px;
    }

}

/* =================================================
   MISIÓN Y VISIÓN
   ================================================= */

.qs-mv {
    position: relative;
    padding: 120px 0;
    background: #f0f4f8;
    overflow: hidden;
}

/* CORTE SUPERIOR */
.qs-mv::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #ffffff;
    clip-path: polygon(
        0 0,
        58% 0,
        62% 40%,
        100% 40%,
        100% 0
    );
    z-index: 1;
}

.qs-mv-header {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0;
    margin-bottom: 0;
    margin-top: -60px;
    display: flex;          /* 👈 agrega */
    flex-direction: column; /* 👈 agrega */
    gap: 15px;              /* 👈 separa título de línea */
}

/* ENCABEZADO - Misión y Visión */

.qs-mv .about-title {
    font-size: 30px;
    font-weight: 700;
    color: #0b4fa3;
    margin: 0;
}

.qs-mv .about-indicator {
    display: flex;
    align-items: center;
    width: 100%;
}

.qs-mv .about-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #7fd3ff;
    flex-shrink: 0;
}

.qs-mv .about-line {
    width: 300px; /* 👈 cambia este valor */
    height: 1px;
    background: #cccccc;
}

/* CORTE INFERIOR */
.qs-mv::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #ffffff;
    clip-path: polygon(
        0 100%,
        0 60%,
        38% 60%,
        42% 100%,
        100% 100%
    );
    z-index: 1;
}

.qs-mv-wrapper {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: auto;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr; /* 👈 columna central más ancha */
    gap: 40px;
    align-items: center;
    margin-top: 10px;
}

/* MISIÓN - izquierda */
.mv-box.mision {
    text-align: left;
}

.mv-box.mision h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0b4fa3;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.mv-box.mision h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2a81b1; /* azul */
    margin-bottom: 8px;
}

.mv-box.mision p {
    font-size: 14px;
    color: #666 ; /* gris */
    line-height: 1.8;
}

/* VISIÓN - derecha */
.mv-box.vision {
    text-align: right;
}

.mv-box.vision h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0b4fa3;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.mv-box.vision h4 {
    font-size: 20px;
    font-weight: 700;
    color: #2a81b1;
    margin-bottom: 8px;
}

.mv-box.vision p {
    font-size: 14px;
    color: #666;
    line-height: 1.8;
}

/* SUBRAYADO MISIÓN */
.mv-box.mision .mv-indicator {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.mv-box.mision .mv-indicator .mv-triangle {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #7fd3ff;
    flex-shrink: 0;
}

.mv-box.mision .mv-indicator .mv-line {
    flex: 1;
    height: 1px;
    background: #cccccc;
}

/* SUBRAYADO VISIÓN */
.mv-box.vision .mv-indicator {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.mv-box.vision .mv-indicator .mv-line {
    flex: 1;
    height: 1px;
    background: #cccccc;
}

.mv-box.vision .mv-indicator .mv-triangle {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 10px solid #7fd3ff; /* 👈 cambia border-left por border-right */
    flex-shrink: 0;
}

/* IMAGEN CENTRAL */
.mv-imagen {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 40px; /* ← empuja la imagen hacia la izquierda */
}

.mv-imagen img {
    width: 450px;
    height: 400px;        /* más alto que ancho para que quepan */
    max-width: 95%;  
    border-radius: 20px;  /* esquinas redondeadas suaves, o ponlo en 0 para rectangular puro */
    object-fit: cover;
    object-position: center top;
}

.misionvision-triangles-top {
    position: absolute;
    top: 180px; /* 👈 desde arriba */
    left: -80px;
    width: 80%;
    height: 600px;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
    mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
}

.misionvision-triangles-top .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.08) !important;
    transform: scale(2);
}

.misionvision-triangles {
    position: absolute;
    bottom: 30px;
    top: 360px;
    left: -80px;
    width: 80%;
    height: 1000px;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
    mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
}

.misionvision-triangles .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.08) !important; /* 👈 más suave */
    transform: scale(2);
}


@media (max-width: 768px) {

    /* ── MISIÓN Y VISIÓN ── */
    .qs-mv {
        padding: 120px 15px 80px 25px;
        overflow: visible;
    }

    .qs-mv::before {
        height: 60px;
    }

    .qs-mv::after {
        height: 60px;
    }

    .qs-mv-header {
        margin-bottom: 0px;
        margin-top: -60px;
        padding: 0 15px;
        gap: 10px;
    }

    .qs-mv .about-title {
        font-size: 20px;
    }

    /* ── OCULTAR IMAGEN ── */
    .mv-imagen {
        display: none !important;
    }

    /* ── GRID 2 COLUMNAS ── */
    .qs-mv-wrapper {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
        padding: 0;
        margin-top: 0px !important;
    }

    /* ── MISIÓN ── */
    .mv-box.mision h3 {
        font-size: 12px;
        letter-spacing: 1px;
        margin-bottom: 3px;
    }

    .mv-box.mision h4 {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mv-box.mision p {
        font-size: 9px;
        line-height: 1.6;
    }

    /* ── VISIÓN ── */
    .mv-box.vision h3 {
        font-size: 12px;
        letter-spacing: 1px;
        margin-bottom: 3px;
    }

    .mv-box.vision h4 {
        font-size: 11px;
        margin-bottom: 5px;
    }

    .mv-box.vision p {
        font-size: 9px;
        line-height: 1.6;
    }

    .mv-box.mision .mv-indicator,
    .mv-box.vision .mv-indicator {
        margin-bottom: 8px;
    }

    .mv-box.mision,
    .mv-box.vision {
        width: 100% !important;
    }

    .mv-box.mision {
        padding-left: 8px;  /* ← mueve misión hacia la derecha */
    }

    .mv-box.vision {
        padding-right: 8px; /* ← mueve visión hacia la izquierda */
    }

    .mv-box.mision img,
    .mv-box.vision img {
        width: 60px;  /* ← reduce este valor */
        height: 60px;
        margin-top: 20px;
    }

    .misionvision-triangles-top,
    .misionvision-triangles {
        display: block;
        opacity: 1;
        top: 60px;
        height: 300px;
    }

    .misionvision-triangles-top .banner-stl,
    .misionvision-triangles .banner-stl {
        transform: scale(2);
        border-bottom-color: rgba(11, 79, 163, 0.20) !important;
    }

    .misionvision-triangles {
        top: 300px;    /* ← ajusta desde donde empieza */
        height: 150px; /* ← reduce altura para que no se salga */
        bottom: auto;
    }
}


/* =================================================
   POR QUÉ ELEGIRNOS
   ================================================= */

.qs-elegirnos {
    position: relative;
    background: #ffffff;
    padding: 80px 60px 30px 60px; /* 👈 reduce de 80px a 30px abajo */
    max-width: 1200px;
    margin: 0 auto;
}

.qs-elegirnos-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* TÍTULO IZQUIERDA */
.qs-elegirnos-header {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.qs-elegirnos-header h2 {
    font-size: 36px;
    font-weight: 700;
    color: #0b4fa3;
    margin: 0;
}

.qs-elegirnos-header .about-indicator {
    display: flex;
    align-items: center;
    width: 100%;
}

.qs-elegirnos-header .about-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #7fd3ff;
    flex-shrink: 0;
}

.qs-elegirnos-header .about-line {
    width: 350px;
    height: 1px;
    background: #cccccc;
}

/* LISTA DERECHA */
.qs-elegirnos-lista {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.qs-elegirnos-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qs-elegirnos-item .numero {
    font-size: 22px;
    font-weight: 700;
    color: #7fd3ff;
}

.qs-elegirnos-item p {
    font-size: 15px;
    color: #555;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 768px) {

    .qs-elegirnos {
        padding: 40px 20px 30px 20px;
    }

    .qs-elegirnos-wrapper {
        grid-template-columns: 1fr 1fr; /* ← mantiene 2 columnas */
        gap: 20px;
        align-items: center;
    }

    .qs-elegirnos-header h2 {
        font-size: 18px;
    }

    .qs-elegirnos-header .about-line {
        width: 120px;
    }

    .qs-elegirnos-lista {
        gap: 12px;
    }

    .qs-elegirnos-item .numero {
        font-size: 16px;
    }

    .qs-elegirnos-item p {
        font-size: 11px;
        line-height: 1.4;
    }

}

/* =================================================
   VALORES
   ================================================= */

.qs-valores {
    position: relative;
    background: #ffffff;
    padding: 80px 30px 100px 120px;
    min-height: 300px;
    text-align: left;
    overflow: hidden;
    margin-top: 20px;
}

.qs-valores::after {
    content: "";
    position: absolute;
    top: 48px;
    left: 80px;
    right: 80px;
    bottom: 48px;
    background: #0b4fa3;
    border-radius: 12px;
    clip-path: polygon(
        0 0,
        36% 0,
        40% 15%,
        100% 15%,
        100% 100%,
        0 100%
    );
    z-index: 1;
}

/* LÍNEA Y TRIÁNGULO */
.qs-valores .qs-indicator-line {
    position: absolute;
    left: 555px;
    top: 16%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 3;
}

.qs-valores .qs-indicator-bar {
    width: 683px;
    height: 0.5px;
    background: #7fd3ff;
    border-radius: 3px;
}

.qs-valores .qs-indicator-triangle {
    position: absolute;
    left: 690px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid #69c6f8;
    z-index: 3;
}

.qs-valores h3 {
    position: relative;
    z-index: 2;
    font-size: 32px;
    color: #ffffff;
    margin-bottom: 40px;
    text-align: left; /* 👈 a la izquierda */
}

.qs-valores .valores-header {
    position: relative;
    z-index: 2;
    text-align: left;
    margin-bottom: 30px;
}

.valores-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.valor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    background: none;      /* 👈 sin fondo */
    box-shadow: none;      /* 👈 sin sombra */
    border-radius: 0;      /* 👈 sin bordes */
    width: auto;
    height: auto;
    padding: 10px;
}

.valor img {
    width: 70px;
    height: 70px;
    object-fit: contain;
    filter: brightness(0) invert(1) opacity(0.6); /* 👈 opacity baja para plomo */
}

.valor p {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;        /* 👈 texto blanco */
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0;
}

.valores-indicator {
    display: flex;
    align-items: center;
    width: 390px;
    margin-top: -33px;
}

.valores-triangle {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #7fd3ff;
    flex-shrink: 0;
}

.valores-line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,0.4);
}


@media (max-width: 768px) {

    .qs-valores {
        padding: 60px 15px 80px 15px;
        margin-top: 10px;
        margin-bottom: -40px;
    }

    .qs-valores::after {
        top: 30px;
        left: 15px;
        right: 15px;
        bottom: 30px;
        clip-path: polygon(
            0 0,
            36% 0,
            42% 8%,
            100% 8%,
            100% 85%,
            0 85%
        );
    }

    /* ── LÍNEA Y TRIÁNGULO ── */
    .qs-valores .qs-indicator-line {
        left: 180px !important;
        top: 12%;
        gap: 8px;
    }

    .qs-valores .qs-indicator-bar {
        width: 175px;
    }

    .qs-valores .qs-indicator-triangle {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    /* ── TÍTULO ── */
    .qs-valores h3 {
        font-size: 20px;
        margin-bottom: 20px;
        padding-left: 20px;
    }

    .qs-valores .valores-header {
        margin-bottom: 15px;
    }

    .valores-indicator {
        width: 200px;
        margin-top: -20px;
        margin-left: 20px;
    }

    /* ── VALORES GRID ── */
    .valores-wrapper {
        display: flex !important;
        flex-direction: row !important;  /* ← todos en una fila */
        flex-wrap: nowrap !important;    /* ← no saltar a siguiente línea */
        gap: 10px;
        justify-content: center;
    }

    .valor {
        width: auto !important;
        flex: 1;                         /* ← reparte el espacio igual */
        padding: 5px;
    }

    .valor img {
        width: 40px;                     /* ← más pequeños para caber */
        height: 40px;
    }

    .valor p {
        font-size: 9px;
        letter-spacing: 0.3px;
    }

}

/* =================================================
   FOOTER GRUPO FRAVA
   ================================================= */

.footer-frava{
    position:relative;
    background:linear-gradient(180deg, #0b4fa3 0%, #083b78 100%);
    color:#ffffff;
    overflow:hidden;
}

.footer-frava::before{
    content:"";
    position:absolute;
    top:0px;
    left:0;
    right:0;
    height:50px;
    background:#f4f6f8;
    clip-path:polygon(
        0 0,
        100% 0,
        100% 100%,
        45% 100%,
        40% 0
    );
    z-index:1;
}

.footer-frava::after{
    content:"";
    position:absolute;
    top:0;
    left:45%;
    right:0;
    height:50px;
    background:#f4f6f8;
    z-index:1;
}

/* CONTENIDO */
.footer-content{
    position:relative;
    z-index:2;
    max-width:1200px;
    margin:auto;
    padding:120px 60px 80px;
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:60px;
}

/* COLUMNAS */
.footer-col h4{
    font-size:20px;
    margin-bottom:20px;
    color:#7fd3ff;
}

.footer-col ul{
    list-style:none;
}

.footer-col ul li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.footer-col ul li svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.footer-col ul li span {
    flex: 1;  /* ← el texto ocupa el espacio restante y hace salto respetando el margen */
}

/* MARCA */
.footer-brand img {
    max-width: 180px;
    height: auto;
    margin-bottom: 0px;
    margin-top: -20px;  /* ← valor negativo para subir el logo */
}

.footer-brand {
    margin-top: -50px;  /* ← sube toda la columna incluyendo logo y texto */
}

.footer-brand p{
    font-size:15px;
    line-height:1.7;
    opacity:0.9;
}

/* BARRA INFERIOR */
.footer-bottom{
    background:#062d5c;
    padding:20px 40px;
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    font-size:14px;
    opacity:0.85;
}

@media (max-width: 768px) {

    .footer-content {
        grid-template-columns: 1fr 1fr;  /* ← dos columnas */
        gap: 20px;
        padding: 80px 20px 50px;
    }

    /* LOGO + TEXTO + REDES ocupa las 2 columnas */
    .footer-brand {
        grid-column: 1 / -1;  /* ← ocupa todo el ancho */
        display: flex;
        align-items: center;
        gap: 25px;
        margin-top: -10px;
        flex-wrap: wrap;
    }

    .footer-brand img {
        max-width: 80px;  /* ← imagen pequeña */
        margin-top: 0;
    }

    .footer-brand p {
        font-size: 12px;
        flex: 1;
        min-width: 150px;
    }

    .footer-social {
        width: 100%;
        display: flex;
        gap: 12px;
        margin-top: 10px;
    }

    /* OFICINA y CONTACTO lado a lado */
    .footer-col {
        width: 100%;
    }

    .footer-col h4 {
        font-size: 14px;
        margin-bottom: 10px;
    }

    .footer-col ul li {
        font-size: 12px;
        margin-bottom: 8px;
    }

    /* BARRA INFERIOR */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 15px 20px;
        font-size: 11px;
    }

    .footer-frava::before {
        height: 30px;
    }

    .footer-frava::after {
        height: 30px;
    }

}


/* =================================================
   CONTACTO FRAVA
   ================================================= */
.contacto-frava {
    background: #ffffff;
    padding: 40px 60px;
    position: relative;
    margin-top: 40px; /* 👈 agrega separación arriba */
}

.contacto-frava::after {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f6f8;
    clip-path: polygon(
        0 0,
        45% 0,
        50% 5%,
        100% 5%,
        100% 100%,
        0 100%
    );
    z-index: 1;
}

.contacto-header {
    max-width: 1200px;
    margin: auto;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}

.contacto-tag {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

.contacto-header h2 {
    font-size: 42px;
    color: #0b4fa3;
    margin: 10px 0 0;
    line-height: 1.2;
}

.contacto-linea {
    display: none;
}

/* CONTENEDOR DE LA FIGURA DEL TRIÁNGULO Y LÍNEA */
.indicator-line {
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 2;
}

/* TRIÁNGULO */
.contacto-indicator-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #6aadff;
}

/* LÍNEA */
.contacto-indicator-bar {
    width: 450px;
    height: 2px;
    background: #6aadff;
    border-radius: 3px;
}

/* GRID */
.contacto-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    position: relative;
    z-index: 2;
}

/* FORMULARIO */
.contacto-form {
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.campo {
    margin-bottom: 30px;
}

.fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.campo small {
    color: #e74c3c;
    font-size: 12px;
}

/* FLOATING LABEL */
.campo.floating {
    position: relative;
    margin-bottom: 30px;
}

.campo.floating input,
.campo.floating textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid #0b4fa3;
    padding: 18px 5px 5px 5px;
    outline: none;
    font-size: 14px;
    background: transparent;
    font-family: 'Poppins', sans-serif;
}

.campo.floating textarea {
    border: 2px solid #0b4fa3;
    border-radius: 10px;
    padding: 20px 15px 10px 15px;
    height: 100px;
    resize: none;
}

.campo.floating label {
    position: absolute;
    left: 5px;
    top: 14px;
    font-size: 14px;
    color: #888;
    transition: all 0.3s ease;
    pointer-events: none;
}

.campo.floating textarea ~ label {
    left: 15px;
    top: 14px;
}

/* LABEL SUBE cuando hay foco o contenido */
.campo.floating input:focus ~ label,
.campo.floating input:not(:placeholder-shown) ~ label,
.campo.floating textarea:focus ~ label,
.campo.floating textarea:not(:placeholder-shown) ~ label {
    top: 0px;
    font-size: 11px;
    color: #0b4fa3;
    font-weight: 600;
}

/* TELÉFONO CON BANDERA */
.telefono-campo {
    margin-bottom: 30px;
}

.telefono-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border-bottom: 2px solid #0b4fa3;
    padding-bottom: 5px;
}

.bandera-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    padding-bottom: 5px;
}

.paises-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 999;
    width: 220px;
    padding: 10px;
}

.paises-dropdown.open {
    display: block;
}

.paises-dropdown input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.paises-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
}

.paises-dropdown ul li {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 5px;
}

.paises-dropdown ul li:hover {
    background: #f0f9ff;
    color: #0b4fa3;
}

.tel-input {
    flex: 1;
    position: relative;
}

.tel-input input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    padding: 18px 5px 5px 5px;
    font-family: 'Poppins', sans-serif;
}

.tel-input label {
    position: absolute;
    left: 5px;
    top: 14px;
    font-size: 14px;
    color: #888;
    transition: all 0.3s ease;
    pointer-events: none;
}

.tel-input input:focus ~ label,
.tel-input input:not(:placeholder-shown) ~ label {
    top: 0px;
    font-size: 11px;
    color: #0b4fa3;
    font-weight: 600;
}

/* BOTÓN ENVIAR */
.btn-contacto-enviar {
    position: relative;
    background: #0b4fa3;
    color: #ffffff;
    padding: 14px 40px 14px 32px;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
    cursor: pointer;
}

.btn-contacto-enviar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid #0b4fa3;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.btn-contacto-enviar::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #0b4fa3;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

.btn-contacto-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-contacto-enviar:hover::after {
    right: -70px;
}

.btn-contacto-enviar:hover::before {
    right: -52px;
    opacity: 1;
}

.btn-contacto-enviar span {
    position: absolute;
    top: 50%;
    right: -75px;
    width: 0;
    height: 2px;
    background: #0b4fa3;
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-contacto-enviar:hover span {
    width: 50px;
    right: -50px;
}

/* INFO DERECHA */
.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* HORARIO */
.horario-card {
    background: #0b4fa3;
    color: #fff;
    padding: 35px;
    border-radius: 20px;
}

.horario-card h4 {
    margin-bottom: 20px;
}

.horario-grid {
    display: flex;
    justify-content: space-between;
}

.horario-grid span {
    display: block;
    opacity: 0.9;
}

/* MAPA */
.mapa iframe {
    width: 100%;
    height: 400px;
    border-radius: 20px;
    border: none;
}

.error-msg {
    display: none;
    color: #e74c3c;
    font-size: 12px;
    margin-top: 4px;
}

.horario-card .indicator-line {
    position: relative;
    bottom: auto;
    left: auto;
    margin-top: -10px;   /* sube el indicador */
    margin-bottom: 15px;
}

.horario-card .contacto-indicator-triangle {
    border-left-color: #6aadff;
    border-top-width: 8px;    /* triángulo más pequeño */
    border-bottom-width: 8px;
    border-left-width: 10px;
}

.horario-card .contacto-indicator-bar {
    background: #6aadff;
    width: 480px;   /* barra más corta */
    height: 1px;   /* más delgada */
}

.horario-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.horario-icon {
    width: 60px;
    height: 60px;
    opacity: 0.9;
    filter: brightness(0) invert(1); /* la pone blanca para que se vea sobre el fondo azul */
}

@media (max-width: 768px) {

    .contacto-form .campo.floating input,
    .contacto-form .campo.floating textarea,
    .contacto-form .campo.floating label,
    .contacto-form .tel-input input,
    .contacto-form .tel-input label {
        font-size: 13px !important;
    }

    /* ── SECCIÓN CONTACTO ── */
    .contacto-frava {
        padding: 40px 20px 60px 20px;
        margin-top: 20px;
    }

    .contacto-frava::after {
        top: 0px;  /* ← sin desfase */
        clip-path: polygon(
            0 0,
            35% 0,
            42% 3%,    /* ← baja este % para reducir la altura del corte */
            100% 3%,
            100% 100%,
            0 100%
        );
    }

    .contacto-header {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .contacto-tag {
        font-size: 11px;
    }

    .contacto-header h2 {
        font-size: 24px;
        line-height: 1.3;
    }

    .indicator-line {
        position: relative;
        bottom: auto;
        left: auto;
        margin-top: 15px;
    }

    .contacto-indicator-bar {
        width: 200px;
    }

    .contacto-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .contacto-form {
        padding: 20px 20px;
        border-radius: 15px;
        margin: 0 10px;
    }

    .fila {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .campo.floating input,
    .campo.floating textarea {
        font-size: 13px;
    }

    .campo.floating label {
        font-size: 13px;
    }

    .btn-contacto-enviar {
        padding: 10px 30px 10px 20px;
        font-size: 13px;
        width: auto;
        display: inline-block;
        overflow: visible;
    }

    .btn-contacto-enviar::after,
    .btn-contacto-enviar::before,
    .btn-contacto-enviar span {
        display: block;
    }

    .horario-card {
        padding: 20px 20px;
        border-radius: 15px;
        margin: 0 10px;
    }

    .horario-card h4 {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .horario-grid {
        flex-direction: column;
        gap: 15px;
    }

    .horario-item {
        gap: 10px;
    }

    .horario-icon {
        width: 40px;
        height: 40px;
    }

    .horario-card .contacto-indicator-bar {
        width: 180px;
    }

    .mapa iframe {
        height: 300px;
        border-radius: 15px;
        width: 100%;
    }

    .mapa {
        margin: 0 10px; /* ← al contenedor, no al iframe */
    }

}

/* =================================================
   WHATSAPP FLOTANTE
   ================================================= */

.whatsapp-float{
    position:fixed;
    bottom:25px;
    right:25px;
    width:60px;
    height:60px;
    background:#25D366;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
    z-index:9999;
    transition:transform .3s ease, box-shadow .3s ease;
}

.whatsapp-float img{
    width:34px;
    height:34px;
}

.whatsapp-float:hover{
    transform:scale(1.08);
    box-shadow:0 15px 35px rgba(0,0,0,0.35);
}


/* =================================================
   SECCIÓN ASESORÍA CONTABLE Y OTROS SERVICIOS
   ================================================= */

.asesoria-section{
    position: relative;
    overflow: hidden;  
    background:#ffffff;
    padding:80px 60px;
}

.asesoria-container {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    padding: 0 40px;
    box-sizing: border-box;
    z-index: 1;
}

/* =================================================
   CARPETA SERVICIOS
   ================================================= */

.servicios-carpeta {
    position: relative;
    background: #0b4fa3;
    height: 260px;
    display: flex;
    align-items: center;
    padding-left: 80px;
    overflow: hidden;
}

/* CARPETA INVERTIDA */
.servicios-carpeta::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #ffffff; /* 👈 color de tu sección */
    clip-path: polygon(
        0 100%,
        58% 100%,
        62% 55%,
        100% 55%,
        100% 100%
    );
    z-index: 1;
}

/* TEXTO */
.servicios-carpeta h1 {
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
}

/* LÍNEA Y TRIÁNGULO */
.servicios-indicator-line {
    position: absolute;
    left: 520px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 3;
}

.servicios-indicator-bar {
    width: 760px;
    height: 0.5px;
    background: #7fd3ff;
    border-radius: 3px;
}

.servicios-indicator-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid #69c6f8;
    position: absolute;
    left: 770px;
    top: 50%;
    transform: translateY(-50%);
}

@media (max-width: 768px) {

    /* ── CARPETA SERVICIOS ── */
    .servicios-carpeta {
        height: 160px;
        padding-left: 20px;
    }

    .servicios-carpeta h1 {
        font-size: 22px;
    }

    .servicios-carpeta::before {
        height: 50px;
    }

    /* ── LÍNEA Y TRIÁNGULO ── */
    .servicios-indicator-line {
        display: flex;
        align-items: center;
        left: 210px;
        top: 50%;
        transform: translateY(-50%);
        gap: 5px;
    }

    .servicios-indicator-bar {
        width: 150px;
    }

    .servicios-indicator-triangle {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

}

/* =================================================
   COLUMNA IZQUIERDA - SERVICIO CARD
   ================================================= */

.asesoria-servicios {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.servicio-card {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    text-align: left;
}


.servicio-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}

.servicio-header h2 {
    color: #0b4fa3;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
}

.servicio-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 20px;
}

.servicio-triangle {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #0b4fa3;
    flex-shrink: 0;
}

.servicio-bar {
    flex: 1;
    height: 2px;
    background: #cccccc;
    border-radius: 3px;
}

.contable-contenido p {
    color: #555;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 20px;
    text-align: justify;
}

.contable-contenido p:last-child {
    margin-bottom: 0;
}

.contable-contenido strong {
    color: #0b4fa3;
    font-weight: 600;
}

.servicio-img-wrapper {
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
    margin-top: 20px;
}

.servicio-img-wrapper img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.servicio-lista {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.servicio-lista li {
    position: relative;
    padding: 10px 15px 10px 30px;
    margin-bottom: 8px;
    background: transparent; /* 👈 quita el fondo azul */
    color: #555; /* 👈 color de texto normal */
    font-size: 15px;
    border-radius: 4px;
}

.servicio-lista li::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 8px solid #7fd3ff;
}

/* =================================================
   COTIZACIÓN FRAVA
   ================================================= */
.cotizacion-frava {
    background: #ffffff;
    padding: 40px 60px;
    position: relative;
    margin-top: 40px;
}

.cotizacion-frava::after {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f6f8;
    clip-path: polygon(
        0 0,
        45% 0,
        50% 5%,
        100% 5%,
        100% 100%,
        0 100%
    );
    z-index: 1;
}

.cotizacion-header {
    max-width: 1200px;
    margin: auto;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    padding-bottom: 40px;
}

.cotizacion-tag {
    font-size: 14px;
    color: #666;
    font-weight: 600;
}

.cotizacion-header h2 {
    font-size: 42px;
    color: #0b4fa3;
    margin: 10px 0 0;
    line-height: 1.2;
}

.cot-titulo {
    font-size: 20px;
    font-weight: 700;
    color: #00bcd4;
    margin-bottom: 30px;
}

/* GRID */
.cotizacion-grid {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    position: relative;
    z-index: 2;
}

/* FORMULARIO */
.cotizacion-form {
    width: 100%;                  /* 👈 agrega */
    box-sizing: border-box;       /* 👈 agrega */
    background: #ffffff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}

.campo {
    margin-bottom: 30px;
}

.fila {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.campo small {
    color: #e74c3c;
    font-size: 12px;
}

/* FLOATING LABEL */
.campo.floating {
    position: relative;
    margin-bottom: 30px;
}

.campo.floating input,
.campo.floating textarea {
    width: 100%;
    border: none;
    border-bottom: 2px solid #0b4fa3;
    padding: 18px 5px 5px 5px;
    outline: none;
    font-size: 14px;
    background: transparent;
    font-family: 'Poppins', sans-serif;
}

.campo.floating textarea {
    border: 2px solid #0b4fa3;
    border-radius: 10px;
    padding: 20px 15px 10px 15px;
    height: 100px;
    resize: none;
}

.campo.floating label {
    position: absolute;
    left: 5px;
    top: 14px;
    font-size: 14px;
    color: #888;
    transition: all 0.3s ease;
    pointer-events: none;
}

.campo.floating textarea ~ label {
    left: 15px;
    top: 14px;
}

.campo.floating input:focus ~ label,
.campo.floating input:not(:placeholder-shown) ~ label,
.campo.floating textarea:focus ~ label,
.campo.floating textarea:not(:placeholder-shown) ~ label {
    top: 0px;
    font-size: 11px;
    color: #0b4fa3;
    font-weight: 600;
}

/* TELÉFONO CON BANDERA */
.telefono-campo {
    margin-bottom: 30px;
}

.telefono-wrapper {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    border-bottom: 2px solid #0b4fa3;
    padding-bottom: 5px;
}

.bandera-selector {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap;
    padding-bottom: 5px;
}

.paises-dropdown {
    display: none;
    position: absolute;
    top: 110%;
    left: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    z-index: 999;
    width: 220px;
    padding: 10px;
}

.paises-dropdown.open {
    display: block;
}

.paises-dropdown input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    margin-bottom: 8px;
    box-sizing: border-box;
}

.paises-dropdown ul {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 180px;
    overflow-y: auto;
}

.paises-dropdown ul li {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 13px;
    border-radius: 5px;
}

.paises-dropdown ul li:hover {
    background: #f0f9ff;
    color: #0b4fa3;
}

.tel-input {
    flex: 1;
    position: relative;
}

.tel-input input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    background: transparent;
    padding: 18px 5px 5px 5px;
    font-family: 'Poppins', sans-serif;
}

.tel-input label {
    position: absolute;
    left: 5px;
    top: 14px;
    font-size: 14px;
    color: #888;
    transition: all 0.3s ease;
    pointer-events: none;
}

.tel-input input:focus ~ label,
.tel-input input:not(:placeholder-shown) ~ label {
    top: 0px;
    font-size: 11px;
    color: #0b4fa3;
    font-weight: 600;
}

/* BOTÓN ENVIAR */
.btn-cotizacion-enviar {
    position: relative;
    background: #0b4fa3;
    color: #ffffff;
    padding: 14px 40px 14px 32px;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
    cursor: pointer;
}

.btn-cotizacion-enviar::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid #0b4fa3;
    border-radius: 50%;
    transition: all 0.5s ease;
}

.btn-cotizacion-enviar::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #0b4fa3;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

.btn-cotizacion-enviar:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.btn-cotizacion-enviar:hover::after {
    right: -70px;
}

.btn-cotizacion-enviar:hover::before {
    right: -52px;
    opacity: 1;
}

.btn-cotizacion-enviar span {
    position: absolute;
    top: 50%;
    right: -75px;
    width: 0;
    height: 2px;
    background: #0b4fa3;
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-cotizacion-enviar:hover span {
    width: 50px;
    right: -50px;
}

.asesoria-formulario {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    top: 0;
    padding-left: 80px;
}

@media (max-width: 768px) {

    /* ── CONTENEDOR PRINCIPAL ── */
    .asesoria-section {
        padding: 5px 5px !important;
        margin-top: 25px;
    }

    .asesoria-container {
        display: flex !important;
        flex-direction: column !important; /* ← cambia row a column */
        gap: 20px !important;
        align-items: stretch;
        padding: 0 15px !important;
        margin: 0 !important;
    }

    .cotizacion-form {
        flex: 1;
        padding: 15px 15px;
        border-radius: 12px;
        margin: 0 10px !important; /* ← el 10px es el margen lateral, ajústalo */
        box-sizing: border-box;
        width: calc(100% - 20px); /* ← resta el doble del margen lateral */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* ← más suave */
    }

    /* ── LETRA UNIFORME EN TODO EL FORMULARIO ── */
    .cotizacion-form input,
    .cotizacion-form textarea,
    .cotizacion-form label,
    .cotizacion-form .campo.floating label,
    .cotizacion-form .tel-input label,
    .cotizacion-form small {
        font-size: 13px !important; /* ← cambia este valor para todos */
    }

    .asesoria-servicios {
        margin: 0 10px !important; /* ← mismo margen que el formulario */
        box-sizing: border-box;
        width: calc(100% - 20px); /* ← mismo ancho que el formulario */
    }

    /* ── TEXTO ── */
    .servicio-header h2 {
        font-size: 25px !important;
    }

    .contable-contenido p {
        font-size: 11.5px !important;
        line-height: 1.5;
    }

    .servicio-header {
        margin-bottom: 10px; /* ← reduce espacio entre título y línea */
    }

    .servicio-indicator {
        margin-bottom: 5px; /* ← reduce espacio entre línea y descripción */
    }

    .contable-contenido p {
        margin-bottom: 5px; /* ← reduce espacio entre párrafos */
    }

    .servicio-img-wrapper img {
        height: 150px;
    }

    .servicio-lista li {
        font-size: 11.5px;
        padding: 5px 8px 5px 20px;
        padding-left: 15px;
    }
    .servicio-lista li::before {
        left: 0px;
    }

    /* ── FORMULARIO ── */
    .cot-titulo {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .campo.floating {
        margin-bottom: 15px;
    }

    .campo.floating input,
    .campo.floating textarea {
        font-size: 10px;
    }

    .campo.floating label {
        font-size: 10px;
    }

    .fila {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .btn-cotizacion-enviar {
        width: 100%;
        font-size: 11px;
        padding: 8px 10px;
    }

    .btn-cotizacion-enviar::after,
    .btn-cotizacion-enviar::before,
    .btn-cotizacion-enviar span {
        display: none;
    }

}

/* =================================================
   TRIANGULOS PARA FORMULARIO
   ================================================= */
.otroservicios-triangles-form {
    position: absolute;
    top: 600px;
    right: -160px;
    left: auto;
    width: 30%;
    height: 450%;
    pointer-events: none;
    z-index: 0;  /* detrás de todo */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
    mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
}

.otroservicios-triangles-form .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.12) !important;
    transform: scale(1.7);
}


.otroservicios-triangles-form-2 {
    position: absolute;
    top: 390px;
    right: -160px;
    left: auto;
    width: 30%;
    height: 450%;
    pointer-events: none;
    z-index: 0;  /* detrás de todo */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
    mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
}

.otroservicios-triangles-form-2 .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.12) !important;
    transform: scale(2);
}

/* =================================================
   TRIANGULOS PARA OTROS SERVICIOS
   ================================================= */
.otroservicios-triangles-top {
    position: absolute;
    top: 350px;
    left: 0px;
    width: 80%;
    height: 600px;
    pointer-events: none;
    z-index: 2; 
    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
    mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
}

.otroservicios-triangles-top .banner-stl { /* 👈 faltaba este */
    border-bottom-color: rgba(11, 79, 163, 0.08) !important;
    transform: scale(2);
}

.otroservicios-triangles {
    position: absolute;
    top: 150px;
    left: 0px;
    width: 80%;
    height: 600px;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
    mask-image: linear-gradient(to right, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);
}

.otroservicios-triangles .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.08) !important;
    transform: scale(2);
}


/* =================================================
   SLIDER DE OTROS SERVICIOS - 3 POR VISTA
   ================================================= */
.otros-servicios-wrapper {
    max-width: 100%;
    margin: 60px auto 0;
    background: #ffffff;
    padding: 40px 60px 80px 60px;
    border-radius: 20px;
    box-shadow: none;
    position: relative;
}

.otros-servicios-wrapper::after {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f4f6f8; /* 👈 mismo color de fondo */
    clip-path: polygon(
        0 0,
        55% 0,
        60% 10%,
        100% 10%,
        100% 100%,
        0 100%
    );
    z-index: 1;
}

/* Todo el contenido debe estar por encima del ::after */
.sub-servicios,
.servicios-slider {
    position: relative;
    z-index: 2;
}

.sub-servicios {
    color: #0b4fa3;
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
}

.otros-tag {
    font-size: 13px;
    color: #666;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: block; /* 👈 para que aparezca en su propia línea */
    margin-bottom: 5px;
}

.otros-titulo-header {
    position: relative;
    z-index: 2;
    margin-bottom: 30px;
    margin-top: -20px;
}

.otroservicios-indicator-line {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
}

.otroservicios-indicator-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #6aadff;
}

.otroservicios-indicator-bar {
    width: 400px;
    height: 2px;
    background: #6aadff;
    border-radius: 3px;
}


.servicios-slider {
    position: relative;
    padding: 0 20px;
}

.servicios-slider input[type="radio"] {
    display: none;
}

.slider-wrapper {
    overflow: hidden;
    width: 100%;
}

.servicios-slides {
    display: flex;
    width: 300%;
    transition: margin-left 0.6s ease;
}

.servicio-slide {
    width: calc(100% / 9);
    padding: 0 10px;
    box-sizing: border-box;
    flex-shrink: 0;
}

#serv1:checked ~ .slider-wrapper .servicios-slides { margin-left: 0; }
#serv2:checked ~ .slider-wrapper .servicios-slides { margin-left: -100%; }
#serv3:checked ~ .slider-wrapper .servicios-slides { margin-left: -200%; }

.btn-ver-servicio {
    position: relative;
    background: #0b4fa3;
    color: #ffffff;
    padding: 14px 40px 14px 32px;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 15px;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
    cursor: pointer;
    text-decoration: none;
}

.btn-ver-servicio::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid #ffffff; /* 👈 blanco para que se vea en la card */
    border-radius: 50%;
    transition: all 0.5s ease;
    z-index: -1; /* 👈 manda el círculo hacia atrás */
}

.btn-ver-servicio::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #7fd3ff; /* 👈 blanco */
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
    z-index: -1; /* 👈 también atrás */
}

.btn-ver-servicio:hover::after {
    border: 2px solid #7fd3ff;
    right: -70px;
}

.btn-ver-servicio:hover::before {
    right: -52px;
    opacity: 1;
}

.btn-ver-servicio span {
    position: absolute;
    top: 50%;
    right: -75px;
    width: 0;
    height: 2px;
    background: #7fd3ff; /* 👈 cambia de #0b4fa3 a blanco */
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-ver-servicio:hover span {
    width: 50px;
    right: -50px;
}

/* =================================================
   FLECHAS DE NAVEGACIÓN
   ================================================= */

.slider-nav-prev,
.slider-nav-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background: #0b4fa3;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 22px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.slider-nav-prev {
    left: -20px;
}

.slider-nav-next {
    right: -20px;
}

.slider-nav-prev:hover,
.slider-nav-next:hover {
    background: #7fd3ff;
    transform: translateY(-50%) scale(1.1);
}


/* =================================================
   CARDS DE SERVICIOS
   ================================================= */

.servicios-card .btn-ver-servicio {
    opacity: 0;
    transform: translateY(0);
    transition: all 0.4s ease;
    margin-top: 10px;
}

.servicios-card:hover .btn-ver-servicio {
    opacity: 1;
    background: #ffffff;
    color: #0b4fa3;
}

.servicios-card:hover .btn-ver-servicio:hover {
    background: #7fd3ff;
    color: #003366;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.servicios-card {
    width: 100%;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 400px;
}

.servicios-card:hover {
    transform: none;
    box-shadow: none;
}

.servicios-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.servicios-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.servicios-card:hover .servicios-card-image img {
    transform: scale(1.1);
}

.servicios-card-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 70%);
    z-index: 1;
}

.servicios-card-content {
    padding: 30px 25px 25px 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.60);
    color: #ffffff;
    clip-path: polygon(
        0 0,
        40% 0,
        50% 40px,
        100% 40px,
        100% 100%,
        0 100%
    );
    z-index: 2;
    height: 180px;
    box-sizing: border-box;
    transition: top 0.4s ease, height 0.4s ease; /* 👈 anima top */
    top: calc(100% - 180px); /* 👈 posición inicial equivalente a bottom:0 */
}

.servicios-card:hover .servicios-card-content {
    top: calc(100% - 220px); /* 👈 sube moviendo top, height se mantiene */
    height: 220px;
}

.servicios-card-tag {
    display: inline-block;
    font-size: 10px;
    color: #cecdcd;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.servicios-card-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 15px;
    line-height: 1.3;
}

.servicios-card-content h3::before {
    content: "";
    position: absolute;
    bottom: -1.5px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #4fc3f7;
}

.servicios-card-content h3::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 15px;
    width: 300px;
    height: 2px;
    background: #4fc3f7;
}

/* =================================================
   MOVIL
   ================================================= */

@media (max-width: 768px) {

    .cotizacion-form {
        margin-top: 30px !important; /* ← sube para bajar el formulario */
    }

    .otros-servicios-wrapper {
        padding: 30px 15px;
    }

    .otros-servicios-wrapper::after {
        top: -20px;
        clip-path: polygon(
            0 0,
            55% 0,
            62% 5%,
            100% 5%,
            100% 100%,
            0 100%
        );
    }

    .sub-servicios {
        font-size: 20px;
    }

    .otroservicios-indicator-bar {
        width: 150px;
    }

    .servicios-card {
        height: 350px;
    }

    .servicios-card-content {
        height: 160px;
        top: calc(100% - 160px);
    }

    .servicios-card-content h3 {
        font-size: 15px;
    }

    /* ── FLECHAS ── */
    .slider-nav-prev {
        left: -10px;
    }

    .slider-nav-next {
        right: -10px;
    }

    .servicios-slides {
        width: 800% !important;
        transition: margin-left 0.6s ease !important; /* ← animación suave */
    }

    .servicio-slide {
        width: calc(100% / 8) !important;
        padding: 0 5px;
    }
    .otros-titulo-header {
        padding-left: 30px; /* ← sube para mover más a la derecha */
    }

    /* ── BOTÓN ENVIAR ── */
    .btn-cotizacion-enviar {
        padding: 10px 30px 10px 20px; /* ← reduce estos valores */
        font-size: 13px; /* ← reduce el tamaño de letra */
        width: auto;
        display: inline-block;
        overflow: visible;
    }

    .btn-cotizacion-enviar::after,
    .btn-cotizacion-enviar::before,
    .btn-cotizacion-enviar span {
        display: block;
    }

    .asesoria-section {
        margin-top: 40px; /* ← sube este valor para más separación */
    }

}

/* =================================================
   SECCIÓN EMPRESAS EN QUE CONFIAMOS
   ================================================= */
.empresas-confiamos {
   max-width:1200px;
    margin:auto;
    padding:0 60px;
    display:flex;
    align-items:center;
    gap:80px;
}

/* BANNER TÍTULO */
.banner-titulo {
    width: 100%;
    background-color: transparent;
    padding: 65px 100px 20px;
    margin-bottom: 10px;
    box-sizing: border-box;
    position: relative;
}

.banner-titulo h2 {
    color: #003366;
    font-size: 27px;
    font-weight: 700;
    margin: 0 0 10px 0;
}

/* CONTENEDOR TRIÁNGULO + LÍNEA */
.clientes-indicator-line-slide {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;          /* ocupa todo el ancho del padding del padre */
    margin-top: 8px;
}

/* TRIÁNGULO */
.clientes-indicator-triangle-slide {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #7fd3ff;
    flex-shrink: 0;       /* no se encoge */
}

/* LÍNEA */
.clientes-indicator-bar-slide {
    flex: 1;              /* ← ocupa todo el espacio restante hasta el margen derecho */
    height: 1.5px;
    background: #cccccc;
    border-radius: 3px;
}

.galeria-empresas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    justify-items: center;
    align-items: center;
    padding: 0 100px;    /* igual que .banner-titulo */
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 130px;
}

.galeria-empresas img {
    width: 100%;
    max-width: 190px;
    height: 160px;
    object-fit: contain;
    transition: transform 0.3s ease;
}


/* =================================================
   MOVIL
   ================================================= */

@media (max-width: 768px) {

     .banner-titulo h2 {
        font-size: 17px; /* ← reduce este valor */
    }

    .empresas-confiamos {
        flex-direction: column;
        gap: 20px;
        padding: 0 15px;
    }

    .banner-titulo {
        padding: 30px 15px 10px 15px;
        padding-left: 30px;
    }

    .galeria-empresas {
        grid-template-columns: repeat(3, 1fr); /* ← 3 columnas */
        gap: 10px;
        padding: 0 15px;
        margin-bottom: 40px;
    }

    .galeria-empresas img {
        max-width: 100%;
        height: 80px;
    }

}

/* =================================================
   ENTREVISTAS
   ================================================= */

   .entrevistas {
    width: 100%;
    max-width: 100%;
    margin: 60px 0;
    padding: 0 20px;
    text-align: center;
}

.banner-entrevistas h2 {
    color: #003366;
    font-size: 36px;
    margin: 0 0 10px;
}

.banner-entrevistas p {
    color: #003366;
    font-size: 18px;
    margin: 0;
}

/* GRID 3X2 - EXTREMO A EXTREMO */
.grid-entrevistas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
    max-width: 100%;
    padding: 0 100px;    /* ← igual que .banner-titulo */
    box-sizing: border-box;
    margin-bottom: 80px; /* ← espacio abajo */
}

/* CARD DE CADA ENTREVISTA */
.entrevista-card {
    background: #ffffff;
    border-radius: 25px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.entrevista-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0,0,0,0.25);
}

/* VIDEO RESPONSIVE */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* CONTENEDOR DE TEXTO (TÍTULO + DESCRIPCIÓN) */
.entrevista-texto {
    padding: 15px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* TITULO */
.entrevista-texto h3 {
    margin: 0;
    color: #0b4fa3;
    font-size: 20px;
    font-weight: 700;
    text-align: left;
}

/* DESCRIPCIÓN */
.entrevista-texto p {
    margin: 0;
    font-size: 14px;
    color: #555;
    text-align: left;
}

/* Redes sociales en círculo con iconos lineales */
.footer-social {
    margin-top: 25px;
    display: flex;
    gap: 15px;
    justify-content: flex-start;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #0b4fa3;
    color: #ffffff;
    transition: all 0.3s ease;
}

.footer-social a:hover {
    background-color: #7fd3ff;
    transform: scale(1.1);
}

.footer-social svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
}

/* =================================================
   FOOTER ENTREVISTAS
   ================================================= */

.entrevistas-footer {
    position: relative;
    background: linear-gradient(180deg, #0b4fa3 0%, #083b78 100%);
    color: #ffffff;
    overflow: hidden;
}

.entrevistas-footer::before {
    content: "";
    position: absolute;
    top: 0px;
    left: 0;
    right: 0;
    height: 50px;
    background: #ffffff;   /* ← blanco porque la sección anterior es blanca */
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        45% 100%,
        40% 0
    );
    z-index: 1;
}

.entrevistas-footer::after {
    content: "";
    position: absolute;
    top: 0;
    left: 45%;
    right: 0;
    height: 50px;
    background: #ffffff;   /* ← blanco también */
    z-index: 1;
}

/* CONTENIDO */
.entrevistas-footer-content {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: auto;
    padding: 120px 60px 80px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
}

@media (max-width: 768px) {

    .entrevistas-footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        padding: 80px 20px 50px;
    }

    .entrevistas-footer::before {
        height: 30px;
    }

    .entrevistas-footer::after {
        height: 30px;
    }

    .entrevistas-footer .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 15px 20px;
        font-size: 11px;
    }

}

@media (max-width: 768px) {

    .servicios-indicator-bar {
        width: 100px; /* ← reduce este valor */
    }
    .servicios-indicator-line {
        padding-left: 55px; /* ← sube este valor para mover más a la derecha */
    }

    .grid-entrevistas {
        grid-template-columns: repeat(2, 1fr); /* ← 2 columnas x 3 filas */
        gap: 12px;
        padding: 0 5px !important;
        margin-bottom: 25px;
    }

    .banner-entrevistas h2 {
        font-size: 16px !important;
    }

    .banner-entrevistas p {
        font-size: 12px;
    }

    .entrevista-texto h3 {
        font-size: 14px;
    }

    .entrevista-texto p {
        font-size: 11px;
    }

    .entrevista-card {
        min-height: 250px; /* ← sube este valor para más altura */
    }

    .video-wrapper {
        padding-bottom: 85%; /* ← sube para más alto */
    }

    .entrevistas {
        padding: 0 12px !important;
    }

    .grid-entrevistas {
        margin-top: -30px;
        padding: 0 2px !important;
        gap: 8px;
    }

}


/* =================================================
   SECCIÓN SOBRE NOSOTROS
   ================================================= */

.about-section {
    background: #ffffff;
    padding: 150px 50px;
    position: relative;
    overflow: hidden;
}

/* CONTENEDOR DE TRIÁNGULOS */
.triangles-decoration {
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ESTILOS BASE PARA TRIÁNGULOS */
.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #e8f8ff;
}

/* ===== FILA 1 - SUPERIOR ===== */

/* TRIÁNGULO 1 - CHIQUITO */
.triangle.t1 {
    top: 30px;
    right: 180px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 20px solid #e8f8ff;
}

/* TRIÁNGULO 2 - MEDIANO */
.triangle.t2 {
    top: 20px;
    right: 120px;
    border-left: 28px solid transparent;
    border-right: 28px solid transparent;
    border-bottom: 48px solid #e8f8ff;
}

/* TRIÁNGULO 3 - PEQUEÑO */
.triangle.t3 {
    top: 40px;
    right: 60px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid #e8f8ff;
}

/* TRIÁNGULO 4 - CHIQUITO */
.triangle.t4 {
    top: 50px;
    right: 20px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #e8f8ff;
}

/* ===== FILA 2 ===== */

/* TRIÁNGULO 5 - PEQUEÑO */
.triangle.t5 {
    top: 110px;
    right: 200px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid #e8f8ff;
}

/* TRIÁNGULO 6 - CHIQUITO */
.triangle.t6 {
    top: 100px;
    right: 150px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 19px solid #e8f8ff;
}

/* TRIÁNGULO 7 - GRANDE */
.triangle.t7 {
    top: 115px;
    right: 85px;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid #e8f8ff;
}

/* TRIÁNGULO 8 - PEQUEÑO */
.triangle.t8 {
    top: 125px;
    right: 25px;
    border-left: 17px solid transparent;
    border-right: 17px solid transparent;
    border-bottom: 30px solid #e8f8ff;
}

/* ===== FILA 3 - MEDIO ===== */

/* TRIÁNGULO 9 - CHIQUITO */
.triangle.t9 {
    top: 200px;
    right: 190px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #e8f8ff;
}

/* TRIÁNGULO 10 - PEQUEÑO */
.triangle.t10 {
    top: 195px;
    right: 135px;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-bottom: 35px solid #e8f8ff;
}

/* TRIÁNGULO 11 - MEDIANO */
.triangle.t11 {
    top: 210px;
    right: 75px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 52px solid #e8f8ff;
}

/* TRIÁNGULO 12 - CHIQUITO */
.triangle.t12 {
    top: 220px;
    right: 20px;
    border-left: 13px solid transparent;
    border-right: 13px solid transparent;
    border-bottom: 22px solid #e8f8ff;
}

/* ===== FILA 4 ===== */

/* TRIÁNGULO 13 - PEQUEÑO */
.triangle.t13 {
    bottom: 180px;
    right: 170px;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-bottom: 32px solid #e8f8ff;
}

/* TRIÁNGULO 14 - CHIQUITO */
.triangle.t14 {
    bottom: 190px;
    right: 110px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 21px solid #e8f8ff;
}

/* TRIÁNGULO 15 - PEQUEÑO */
.triangle.t15 {
    bottom: 185px;
    right: 50px;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    border-bottom: 33px solid #e8f8ff;
}

/* ===== FILA 5 - INFERIOR ===== */

/* TRIÁNGULO 16 - CHIQUITO */
.triangle.t16 {
    bottom: 100px;
    right: 195px;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 20px solid #e8f8ff;
}

/* TRIÁNGULO 17 - MEDIANO */
.triangle.t17 {
    bottom: 110px;
    right: 130px;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-bottom: 45px solid #e8f8ff;
}

/* TRIÁNGULO 18 - CHIQUITO */
.triangle.t18 {
    bottom: 120px;
    right: 70px;
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-bottom: 24px solid #e8f8ff;
}

/* TRIÁNGULO 19 - PEQUEÑO */
.triangle.t19 {
    bottom: 115px;
    right: 25px;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid #e8f8ff;
}

/* ===== FILA 6 - MÁS INFERIOR ===== */

/* TRIÁNGULO 20 - CHIQUITO */
.triangle.t20 {
    bottom: 40px;
    right: 160px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 18px solid #e8f8ff;
}

/* TRIÁNGULO 21 - PEQUEÑO */
.triangle.t21 {
    bottom: 35px;
    right: 100px;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 26px solid #e8f8ff;
}

/* TRIÁNGULO 22 - CHIQUITO */
.triangle.t22 {
    bottom: 45px;
    right: 45px;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-bottom: 21px solid #e8f8ff;
}

/* CONTENEDOR CON Z-INDEX PARA ESTAR AL FRENTE */
.about-container {
    position: relative;
    z-index: 1;
}

.about-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 60px;
}

/* IMAGEN */
.about-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img {
    max-width: 85%;
    height: auto;
}

/* CONTENIDO */
.about-content {
    flex: 1;
}

.about-label {
    color: #000000;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.about-title {
    font-size: 42px;
    color: #0b4fa3;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

/* INDICADOR CON TRIÁNGULO Y LÍNEA */
.about-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
}

.about-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #0b4fa3;
}

.about-line {
    width: 300px;
    height: 0.5px;
    background: #000000;
    border-radius: 0.5px;
}

/* TEXTO */
.about-text {
    font-size: 16px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 30px;
    text-align: justify;
}

/* BOTÓN */
.btn-about {
    position: relative;
    background: #0b4fa3;
    color: #ffffff;
    padding: 14px 40px 14px 32px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
    transition: 0.3s;
    overflow: visible;
}

/* Semicírculo lateral */
.btn-about::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -25px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border: 2px solid #0b4fa3;
    border-radius: 50%;
    transition: all 0.5s ease;
}

/* Punto dentro del círculo */
.btn-about::before {
    content: "";
    position: absolute;
    top: 50%;
    right: -7px;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #0b4fa3;
    border-radius: 50%;
    opacity: 0;
    transition: all 0.5s ease;
}

/* Hover */
.btn-about:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px #f0faff(153, 61, 61, 0.3);
    background: #0b4fa3;
}

/* Efecto hover - círculo sale con línea */
.btn-about:hover::after {
    right: -70px;
    border-color: #0b4fa3;
}

.btn-about:hover::before {
    right: -52px;
    opacity: 1;
}

/* LÍNEA HORIZONTAL VISIBLE */
.btn-about span {
    position: absolute;
    top: 50%;
    right: -75px;
    width: 0;
    height: 2px;
    background: #0b4fa3;
    transform: translateY(-50%);
    transition: all 0.5s ease;
    z-index: -1;
}

.btn-about:hover span {
    width: 50px;
    right: -50px;
}

@media (max-width: 768px) {

    /* SECCIÓN */
    .about-section {
        padding: 70px 20px;
    }

    /* DOS COLUMNAS igual que laptop */
    .about-container {
        flex-direction: row;
        gap: 20px;
    }

    /* IMAGEN */
    .about-image img {
        border-radius: 5px;
        width: 80px;        /* ← cambia solo este sin afectar el alto */
        height: 160px;       /* ← cambia solo este sin afectar el ancho */
        min-width: 100%;    /* ← asegura que no se reduzca más del ancho deseado */
        min-height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    /* CONTENIDO */
    .about-label {
        font-size: 9px;
        margin-bottom: 6px;
    }

    .about-title {
        font-size: 18px;
        margin-bottom: 12px;
    }

    .about-indicator {
        gap: 8px;
        margin-bottom: 15px;
    }

    .about-line {
        width: 130px;
    }

    .about-text {
        font-size: 10px;
        line-height: 1.6;
        margin-bottom: 18px;
    }

    /* BOTÓN */
    .btn-about {
        padding: 10px 25px 10px 15px;
        font-size: 10px;
        border-radius: 28px;
        white-space: nowrap;
    }

    .btn-about::after {
        right: -20px;
        width: 32px;
        height: 32px;
    }

    .btn-about:hover::after {
        right: -55px;
    }

    .btn-about:hover::before {
        right: -40px;
        opacity: 1;
    }

    .btn-about:hover span {
    width: 35px; /* era 50px, reduce a tu gusto */
    right: -32px;
    }

    /* TRIÁNGULOS - ocultar para no estorbar */
    .triangles-decoration {
        width: 120px;
        opacity: 0.5;
    }
}

/* =================================================
   SECCIÓN SERVICIOS
   ================================================= */

.services-section {
    position: relative;
    background: #0b4fa3;
    padding: 60px 50px 150px 50px;
    overflow: hidden;
}

/* CORTE DIAGONAL SUPERIOR - LADO IZQUIERDO */
.services-section::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #ffffff;
    clip-path: polygon(
        0 0,
        45% 0,
        50% 45%,
        100% 45%,
        100% 0
    );
    z-index: 0;
}

/* CORTE DIAGONAL INFERIOR - LADO DERECHO */
.services-section::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #ffffff;
    clip-path: polygon(
        0 100%,
        0 55%,
        50% 55%,
        55% 100%,
        100% 100%
    );
    z-index: 10;
}

/* HEADER DE SERVICIOS - ALINEADO A LA IZQUIERDA */
.services-header {
    text-align: left;
    margin-bottom: 60px;
    margin-left: 50px;
    position: relative;
    z-index: 1;
}

.services-label {
    color: #cecdcd;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.services-title {
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.1; /* Agrega esta línea - reduce el interlineado */
}

/* INDICADOR CON TRIÁNGULO Y LÍNEA - ALINEADO A LA IZQUIERDA */
.services-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.services-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #4fc3f7;
}

.services-bar {
    width: 450px;
    height: 2px;
    background: #4fc3f7;
    border-radius: 3px;
}

/* CONTENEDOR DE CARDS */
.services-cards {
    display: flex;
    justify-content: center;
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* CARD INDIVIDUAL */
.service-card {
    flex: 1;
    max-width: 350px;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 500px;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* IMAGEN DE CARD - FONDO COMPLETO */
.card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.service-card:hover .card-image img {
    transform: scale(1.1);
}

/* OVERLAY OSCURO SOBRE LA IMAGEN */
.card-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 70%);
    z-index: 1;
}

/* CONTENIDO DE CARD CON CORTE DIAGONAL */
.card-content {
    padding: 40px 30px 30px 30px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.50);
    color: #ffffff;
    clip-path: polygon(
        0 0,
        40% 0,
        50% 40px,
        100% 40px,
        100% 100%,
        0 100%
    );
    z-index: 2;
    min-height: 250px;
}

.card-tag {
    display: inline-block;
    font-size: 11px;
    color: #cecdcd;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

/* TÍTULO CON TRIÁNGULO Y LÍNEA COMO SUBRAYADO */
.card-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

/* TRIÁNGULO DEBAJO DEL TÍTULO */
.card-content h3::before {
    content: "";
    position: absolute;
    bottom: -1.5px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #4fc3f7;
}

/* LÍNEA DEBAJO DEL TÍTULO */
.card-content h3::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 15px;
    width: 300px;
    height: 2px;
    background: #4fc3f7;
}

/* LISTA DE SERVICIOS */
.card-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-content ul li {
    font-size: 15px;
    color: #ffffff;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.card-content ul li:last-child {
    border-bottom: none;
}

/* MOVIL */
@media (max-width: 768px) {

    .services-section {
        padding: 40px 15px 100px 15px;
    }

    .services-section::before { height: 80px; }
    .services-section::after { height: 80px; }

    .services-header {
        margin-left: 10px;
        margin-bottom: 30px;
    }

    .services-label { font-size: 11px; }

    .services-title {
        font-size: 22px;
        margin-bottom: 15px;
    }

    .services-bar { width: 200px; }

    .services-cards {
        overflow: hidden;
        position: relative;
        width: 100%;
        display: block;
        padding: 0 20px;        /* ← margen lateral visible */
        box-sizing: border-box;
    }

    .services-track {
        display: block;         /* ← NO flex, no translateX */
        width: 100%;
    }

    .services-track .service-card {
        display: none;
        width: 100%;
        height: 400px;
        box-sizing: border-box;
    }

    .card-content {
        padding: 25px 15px 20px 15px;
        min-height: 210px;
    }

    .card-tag { font-size: 9px; }

    .card-content h3 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .card-content h3::after { width: 150px; }

    .card-content ul li {
        font-size: 12px;
        padding: 6px 0;
    }

    .services-track .service-card.active {
        display: block;
    }
}

/* Ocultar flechas en todos lados */
.services-arrows {
    display: none !important;
}


/* =================================================
   SECCIÓN ÁREAS DE ESPECIALIZACIÓN
   ================================================= */

.specialization-section {
    background: #ffffff;
    padding: 80px 50px 150px 50px;
    position: relative;
    overflow: hidden; /* importante para que no se salgan */
}

/* CONTENEDOR PRINCIPAL */
.specialization-container {
    position: relative;
    z-index: 1;  /* encima de los triángulos */
    max-width: 1200px;
    margin: 0 auto;
}

/* HEADER */
.specialization-header {
    text-align: left;
    margin-bottom: 60px;
}

.specialization-label {
    color: #cecdcd;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.specialization-title {
    font-size: 42px;
    color: #0b4fa3;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
    position: relative;
    padding-bottom: 20px;
}

/* TRIÁNGULO Y LÍNEA DEBAJO DEL TÍTULO */
.specialization-title::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid #65cdfd;
}

.specialization-title::after {
    content: "";
    position: absolute;
    bottom: 6px;
    left: 18px;
    width: 520px;
    height: 1.5px;
    background: #4fc3f7;
}

/* GRID 4 COLUMNAS */
.specialization-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    margin-top: 40px;
    background: transparent;
}

.spec-card {
    background: #f4fbff;
    border-radius: 0;
    padding: 35px 25px;
    text-align: center;
    box-shadow: none;
    border: none;
    outline: none;
}

/* CÍRCULO CON ICONO */
.spec-circle {
    width: 120px;
    height: 120px;
    margin: 0 auto 25px;
    border-radius: 50%;
    background: #f0f9ff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #0b4fa3;
}

.spec-circle svg {
    width: 80px;
    height: 80px;
    stroke: #0b4fa3;
    fill: none;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.svg-carrito {
    width: 85px !important;
    height: 85px !important;
}

/* TÍTULO DE ESPECIALIZACIÓN */
.spec-card h3 {
    font-size: 18px;
    color: #0b4fa3;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

/* DESCRIPCIÓN */
.spec-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {

    .specialization-section {
        padding: 50px 20px 100px 20px;
        box-sizing: border-box;  /* ← esto es clave */
        width: 100%;
        overflow: hidden; 
    }

    .specialization-header {
        margin-bottom: 30px;
    }

    .specialization-label {
        font-size: 11px;
    }

    .specialization-title {
        font-size: 24px;
        padding-bottom: 15px;
    }

    .specialization-title::after {
        width: 200px;
    }

    .specialization-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
        margin-top: 25px;
        width: 100%;             /* ← no se sale del contenedor */
        box-sizing: border-box;
        justify-content: center;  /* ← esto centra las columnas */
        justify-items: center;
    }

    .spec-card {
        padding: 15px 10px !important;
        width: 100% !important;
        box-sizing: border-box;  /* ← el padding no suma al ancho */
    }

    .spec-circle {
        width: 80px;
        height: 80px;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ← Todos los iconos al mismo tamaño */
    .spec-circle svg,
    .spec-circle img {
        width: 55px !important;
        height: 55px !important;
        object-fit: contain;
    }

    .spec-card h3 {
    font-size: 13px !important;
    margin-bottom: 8px !important;
    }

    .spec-card p {
        font-size: 9px !important;
        line-height: 1.5;
    }
}


/* =================================================
   TRIÁNGULOS DECORATIVOS - ÁREA ESPECIALIZACIÓN (DERECHA)
   ================================================= */
.specialization-triangles-right {
    position: absolute;
    top: 30px;
    right: -30px;
    width: 200px;
    height: calc(100% + 60px);
    pointer-events: none;
    z-index: 0;
    transform: scaleY(1.5) scaleX(1.5);
    transform-origin: top right;
}

/* FILA 1 */
.specialization-triangles-right .stl.t1  { top: 5px;   left: 10px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(106,173,255,0.15); }
.specialization-triangles-right .stl.t2  { top: 3px;   left: 35px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.13); }
.specialization-triangles-right .stl.t3  { top: 6px;   left: 62px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(106,173,255,0.15); }
.specialization-triangles-right .stl.t4  { top: 4px;   left: 88px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.13); }
.specialization-triangles-right .stl.t5  { top: 6px;   left: 115px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(106,173,255,0.15); }
.specialization-triangles-right .stl.t6  { top: 3px;   left: 142px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(106,173,255,0.13); }

/* FILA 2 */
.specialization-triangles-right .stl.t7  { top: 33px;  left: 5px;   border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.18); }
.specialization-triangles-right .stl.t8  { top: 31px;  left: 28px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(106,173,255,0.16); }
.specialization-triangles-right .stl.t9  { top: 34px;  left: 55px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.18); }
.specialization-triangles-right .stl.t10 { top: 31px;  left: 80px;  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.14); }
.specialization-triangles-right .stl.t11 { top: 34px;  left: 108px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.18); }
.specialization-triangles-right .stl.t12 { top: 31px;  left: 135px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.16); }

/* FILA 3 */
.specialization-triangles-right .stl.t13 { top: 68px;  left: 8px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t14 { top: 65px;  left: 30px;  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(106,173,255,0.18); }
.specialization-triangles-right .stl.t15 { top: 69px;  left: 58px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.20); }
.specialization-triangles-right .stl.t16 { top: 66px;  left: 82px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(106,173,255,0.16); }
.specialization-triangles-right .stl.t17 { top: 69px;  left: 110px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t18 { top: 65px;  left: 138px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.18); }

/* FILA 4 */
.specialization-triangles-right .stl.t19 { top: 107px; left: 5px;   border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t20 { top: 104px; left: 26px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t21 { top: 108px; left: 54px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t22 { top: 105px; left: 78px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t23 { top: 108px; left: 108px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t24 { top: 104px; left: 134px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(106,173,255,0.19); }

/* FILA 5 */
.specialization-triangles-right .stl.t25 { top: 147px; left: 8px;   border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t26 { top: 144px; left: 30px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.23); }
.specialization-triangles-right .stl.t27 { top: 148px; left: 52px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t28 { top: 145px; left: 82px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.22); }
.specialization-triangles-right .stl.t29 { top: 148px; left: 104px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t30 { top: 144px; left: 132px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.22); }

/* FILA 6 */
.specialization-triangles-right .stl.t31 { top: 187px; left: 5px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.22); }
.specialization-triangles-right .stl.t32 { top: 184px; left: 24px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t33 { top: 188px; left: 52px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.22); }
.specialization-triangles-right .stl.t34 { top: 185px; left: 76px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t35 { top: 188px; left: 106px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.22); }
.specialization-triangles-right .stl.t36 { top: 184px; left: 130px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(106,173,255,0.19); }

/* FILA 7 */
.specialization-triangles-right .stl.t37 { top: 228px; left: 8px;   border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t38 { top: 225px; left: 28px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.23); }
.specialization-triangles-right .stl.t39 { top: 229px; left: 50px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t40 { top: 226px; left: 80px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.22); }
.specialization-triangles-right .stl.t41 { top: 229px; left: 102px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t42 { top: 225px; left: 130px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t43 { top: 228px; left: 150px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.19); }

/* FILA 8 */
.specialization-triangles-right .stl.t44 { top: 269px; left: 5px;   border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(106,173,255,0.20); }
.specialization-triangles-right .stl.t45 { top: 266px; left: 28px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.23); }
.specialization-triangles-right .stl.t46 { top: 270px; left: 50px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(106,173,255,0.16); }
.specialization-triangles-right .stl.t47 { top: 267px; left: 80px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.22); }
.specialization-triangles-right .stl.t48 { top: 270px; left: 102px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t49 { top: 266px; left: 130px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t50 { top: 269px; left: 150px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.19); }

/* FILA 9 */
.specialization-triangles-right .stl.t51 { top: 310px; left: 8px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t52 { top: 307px; left: 26px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(106,173,255,0.18); }
.specialization-triangles-right .stl.t53 { top: 311px; left: 54px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t54 { top: 308px; left: 78px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(106,173,255,0.16); }
.specialization-triangles-right .stl.t55 { top: 311px; left: 108px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.21); }
.specialization-triangles-right .stl.t56 { top: 307px; left: 130px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(106,173,255,0.18); }
.specialization-triangles-right .stl.t57 { top: 310px; left: 155px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.19); }

/* FILA 10 */
.specialization-triangles-right .stl.t58 { top: 351px; left: 5px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t59 { top: 348px; left: 24px;  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(106,173,255,0.16); }
.specialization-triangles-right .stl.t60 { top: 352px; left: 52px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t61 { top: 349px; left: 76px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(106,173,255,0.16); }
.specialization-triangles-right .stl.t62 { top: 352px; left: 106px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(106,173,255,0.19); }
.specialization-triangles-right .stl.t63 { top: 348px; left: 130px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.17); }

/* FILA 11 */
.specialization-triangles-right .stl.t64 { top: 390px; left: 8px;   border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t65 { top: 387px; left: 28px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(106,173,255,0.15); }
.specialization-triangles-right .stl.t66 { top: 391px; left: 54px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t67 { top: 388px; left: 78px;  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(106,173,255,0.15); }
.specialization-triangles-right .stl.t68 { top: 391px; left: 106px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.17); }
.specialization-triangles-right .stl.t69 { top: 387px; left: 130px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(106,173,255,0.15); }

/* FILA 12 */
.specialization-triangles-right .stl.t70 { top: 428px; left: 10px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(106,173,255,0.13); }
.specialization-triangles-right .stl.t71 { top: 426px; left: 35px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(106,173,255,0.12); }
.specialization-triangles-right .stl.t72 { top: 429px; left: 62px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(106,173,255,0.13); }
.specialization-triangles-right .stl.t73 { top: 427px; left: 88px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(106,173,255,0.12); }
.specialization-triangles-right .stl.t74 { top: 429px; left: 115px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(106,173,255,0.13); }
.specialization-triangles-right .stl.t75 { top: 426px; left: 140px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(106,173,255,0.12); }

/* =================================================
   RESPONSIVE - ÁREAS DE ESPECIALIZACIÓN
   ================================================= */

@media (max-width: 1024px) {
    .specialization-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }

    .specialization-title::after {
        width: 300px;
    }

    .spec-circle {
        width: 90px;
        height: 90px;
    }

    .spec-circle svg {
        width: 45px;
        height: 45px;
    }

    .spec-card h3 {
        font-size: 17px;
    }

    .spec-card p {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .specialization-section {
        padding: 60px 30px;
    }

    .specialization-title {
        font-size: 32px;
    }

    .specialization-title::after {
        width: 200px;
    }

    .specialization-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .spec-card {
        padding: 30px 20px;
    }

    .spec-circle {
        width: 80px;
        height: 80px;
    }

    .spec-circle svg {
        width: 40px;
        height: 40px;
    }

    .spec-card h3 {
        font-size: 16px;
    }

    .spec-card p {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .specialization-title {
        font-size: 28px;
    }

    .specialization-title::after {
        width: 150px;
    }

    .specialization-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .spec-circle {
        width: 90px;
        height: 90px;
    }

    .spec-circle svg {
        width: 45px;
        height: 45px;
    }

    .spec-card h3 {
        font-size: 17px;
    }

    .spec-card p {
        font-size: 13px;
    }
}

/* =================================================
   CONTENEDOR DE TRIÁNGULOS DECORATIVOS - AREA ESPECIALIZACIÓN
   ================================================= */
.services-triangles-left {
    position: absolute;
    top: 220px;
    left: 0;
    width: 160px;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.stl { position: absolute; width: 0; height: 0; }

/* FILA 1 - MUY CHIQUITOS */
.stl.t1  { top: 5px;   left: 10px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.06); }
.stl.t2  { top: 3px;   left: 35px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.05); }
.stl.t3  { top: 6px;   left: 62px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.06); }
.stl.t4  { top: 4px;   left: 88px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.05); }
.stl.t5  { top: 6px;   left: 115px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.06); }
.stl.t6  { top: 3px;   left: 142px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.05); }

/* FILA 2 */
.stl.t7  { top: 33px;  left: 5px;   border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.stl.t8  { top: 31px;  left: 28px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.07); }
.stl.t9  { top: 34px;  left: 55px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.stl.t10 { top: 31px;  left: 80px;  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.06); }
.stl.t11 { top: 34px;  left: 108px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.stl.t12 { top: 31px;  left: 135px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.07); }

/* FILA 3 */
.stl.t13 { top: 68px;  left: 8px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.09); }
.stl.t14 { top: 65px;  left: 30px;  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.08); }
.stl.t15 { top: 69px;  left: 58px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.10); }
.stl.t16 { top: 66px;  left: 82px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.07); }
.stl.t17 { top: 69px;  left: 110px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.09); }
.stl.t18 { top: 65px;  left: 138px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.08); }

/* FILA 4 */
.stl.t19 { top: 107px; left: 5px;   border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.stl.t20 { top: 104px; left: 26px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid rgba(255,255,255,0.09); }
.stl.t21 { top: 108px; left: 54px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.stl.t22 { top: 105px; left: 78px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.stl.t23 { top: 108px; left: 108px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.stl.t24 { top: 104px; left: 134px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.09); }

/* FILA 5 */
.stl.t25 { top: 147px; left: 8px;   border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.11); }
.stl.t26 { top: 144px; left: 30px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.13); }
.stl.t27 { top: 148px; left: 52px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.stl.t28 { top: 145px; left: 82px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.12); }
.stl.t29 { top: 148px; left: 104px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.09); }
.stl.t30 { top: 144px; left: 132px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }

/* FILA 6 */
.stl.t31 { top: 187px; left: 5px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.12); }
.stl.t32 { top: 184px; left: 24px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.09); }
.stl.t33 { top: 188px; left: 52px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }
.stl.t34 { top: 185px; left: 76px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.stl.t35 { top: 188px; left: 106px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }
.stl.t36 { top: 184px; left: 130px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(255,255,255,0.09); }

/* FILA 7 */
.stl.t37 { top: 228px; left: 8px;   border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.stl.t38 { top: 225px; left: 28px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.13); }
.stl.t39 { top: 229px; left: 50px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.stl.t40 { top: 226px; left: 80px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }
.stl.t41 { top: 229px; left: 102px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.09); }
.stl.t42 { top: 225px; left: 130px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.11); }
.stl.t43 { top: 228px; left: 150px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.09); }

/* FILA 8 */
.stl.t44 { top: 269px; left: 5px;   border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.10); }
.stl.t45 { top: 266px; left: 28px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.13); }
.stl.t46 { top: 270px; left: 50px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.07); }
.stl.t47 { top: 267px; left: 80px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.12); }
.stl.t48 { top: 270px; left: 102px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.09); }
.stl.t49 { top: 266px; left: 130px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.11); }
.stl.t50 { top: 269px; left: 150px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.09); }

/* FILA 9 */
.stl.t51 { top: 310px; left: 8px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.11); }
.stl.t52 { top: 307px; left: 26px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.08); }
.stl.t53 { top: 311px; left: 54px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.11); }
.stl.t54 { top: 308px; left: 78px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.07); }
.stl.t55 { top: 311px; left: 108px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.11); }
.stl.t56 { top: 307px; left: 130px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.08); }
.stl.t57 { top: 310px; left: 155px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.10); }

/* FILA 10 - DECRECIENDO */
.stl.t58 { top: 351px; left: 5px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.09); }
.stl.t59 { top: 348px; left: 24px;  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(255,255,255,0.07); }
.stl.t60 { top: 352px; left: 52px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.09); }
.stl.t61 { top: 349px; left: 76px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.07); }
.stl.t62 { top: 352px; left: 106px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.09); }
.stl.t63 { top: 348px; left: 130px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.08); }

/* FILA 11 */
.stl.t64 { top: 390px; left: 8px;   border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.stl.t65 { top: 387px; left: 28px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.06); }
.stl.t66 { top: 391px; left: 54px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.stl.t67 { top: 388px; left: 78px;  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.06); }
.stl.t68 { top: 391px; left: 106px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.stl.t69 { top: 387px; left: 130px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.06); }

/* FILA 12 - MUY CHIQUITOS FINAL */
.stl.t70 { top: 428px; left: 10px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.05); }
.stl.t71 { top: 426px; left: 35px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.04); }
.stl.t72 { top: 429px; left: 62px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.05); }
.stl.t73 { top: 427px; left: 88px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.04); }
.stl.t74 { top: 429px; left: 115px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.05); }
.stl.t75 { top: 426px; left: 140px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.04); }



/* =================================================
   BANNER - TRIÁNGULOS DECORATIVOS
   ================================================= */
.banner-triangles {
    position: absolute;
    top: 30px;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 90%);
    mask-image: linear-gradient(to right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 90%);
}

.banner-stl { position: absolute; width: 0; height: 0; transform: scale(1.5);}

/* FILA 1 */
.banner-stl.t1   { top: 5px;   left: 10px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.06); }
.banner-stl.t2   { top: 3px;   left: 35px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.05); }
.banner-stl.t3   { top: 6px;   left: 62px;  border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.06); }
.banner-stl.t4   { top: 4px;   left: 88px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.05); }
.banner-stl.t5   { top: 6px;   left: 115px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.06); }
.banner-stl.t6   { top: 3px;   left: 142px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.05); }
.banner-stl.t7   { top: 5px;   left: 170px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.05); }
.banner-stl.t8   { top: 3px;   left: 200px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.05); }
.banner-stl.t9   { top: 6px;   left: 230px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.04); }
.banner-stl.t10  { top: 4px;   left: 260px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.04); }
.banner-stl.t11  { top: 5px;   left: 300px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.04); }
.banner-stl.t12  { top: 3px;   left: 340px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.03); }
.banner-stl.t13  { top: 5px;   left: 380px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.03); }
.banner-stl.t14  { top: 3px;   left: 420px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.03); }
.banner-stl.t15  { top: 6px;   left: 460px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.02); }
.banner-stl.t16  { top: 4px;   left: 505px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.02); }
.banner-stl.t17  { top: 5px;   left: 550px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.02); }
.banner-stl.t18  { top: 3px;   left: 600px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid rgba(255,255,255,0.01); }
.banner-stl.t19  { top: 5px;   left: 650px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid rgba(255,255,255,0.01); }
.banner-stl.t20  { top: 3px;   left: 700px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 4px solid rgba(255,255,255,0.01); }

/* FILA 2 */
.banner-stl.t21  { top: 33px;  left: 5px;   border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.banner-stl.t22  { top: 31px;  left: 28px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.07); }
.banner-stl.t23  { top: 34px;  left: 55px;  border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.banner-stl.t24  { top: 31px;  left: 80px;  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.06); }
.banner-stl.t25  { top: 34px;  left: 108px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.08); }
.banner-stl.t26  { top: 31px;  left: 135px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.07); }
.banner-stl.t27  { top: 33px;  left: 165px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.06); }
.banner-stl.t28  { top: 31px;  left: 195px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.06); }
.banner-stl.t29  { top: 34px;  left: 225px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.05); }
.banner-stl.t30  { top: 31px;  left: 258px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.05); }
.banner-stl.t31  { top: 33px;  left: 295px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.04); }
.banner-stl.t32  { top: 31px;  left: 335px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.04); }
.banner-stl.t33  { top: 33px;  left: 375px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.03); }
.banner-stl.t34  { top: 31px;  left: 415px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.03); }
.banner-stl.t35  { top: 34px;  left: 455px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.03); }
.banner-stl.t36  { top: 31px;  left: 498px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.02); }
.banner-stl.t37  { top: 33px;  left: 542px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.02); }
.banner-stl.t38  { top: 31px;  left: 590px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.02); }
.banner-stl.t39  { top: 33px;  left: 640px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }
.banner-stl.t40  { top: 31px;  left: 690px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }

/* FILA 3 */
.banner-stl.t41  { top: 68px;  left: 8px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.09); }
.banner-stl.t42  { top: 65px;  left: 30px;  border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.08); }
.banner-stl.t43  { top: 69px;  left: 58px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.10); }
.banner-stl.t44  { top: 66px;  left: 82px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.07); }
.banner-stl.t45  { top: 69px;  left: 110px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.09); }
.banner-stl.t46  { top: 65px;  left: 138px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.08); }
.banner-stl.t47  { top: 68px;  left: 168px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.07); }
.banner-stl.t48  { top: 65px;  left: 198px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.06); }
.banner-stl.t49  { top: 69px;  left: 228px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.06); }
.banner-stl.t50  { top: 66px;  left: 260px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.05); }
.banner-stl.t51  { top: 68px;  left: 298px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.04); }
.banner-stl.t52  { top: 65px;  left: 338px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.04); }
.banner-stl.t53  { top: 68px;  left: 378px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.03); }
.banner-stl.t54  { top: 65px;  left: 418px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.03); }
.banner-stl.t55  { top: 69px;  left: 458px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.03); }
.banner-stl.t56  { top: 66px;  left: 500px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.02); }
.banner-stl.t57  { top: 68px;  left: 544px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.02); }
.banner-stl.t58  { top: 65px;  left: 590px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.02); }
.banner-stl.t59  { top: 68px;  left: 638px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }
.banner-stl.t60  { top: 65px;  left: 688px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }

/* FILA 4 */
.banner-stl.t61  { top: 107px; left: 5px;   border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.banner-stl.t62  { top: 104px; left: 26px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 15px solid rgba(255,255,255,0.09); }
.banner-stl.t63  { top: 108px; left: 54px;  border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.banner-stl.t64  { top: 105px; left: 78px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.banner-stl.t65  { top: 108px; left: 108px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.11); }
.banner-stl.t66  { top: 104px; left: 134px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.09); }
.banner-stl.t67  { top: 107px; left: 164px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.08); }
.banner-stl.t68  { top: 104px; left: 194px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.07); }
.banner-stl.t69  { top: 108px; left: 224px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.06); }
.banner-stl.t70  { top: 105px; left: 256px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.05); }
.banner-stl.t71  { top: 107px; left: 294px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.04); }
.banner-stl.t72  { top: 104px; left: 334px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.04); }
.banner-stl.t73  { top: 107px; left: 374px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.03); }
.banner-stl.t74  { top: 104px; left: 414px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.03); }
.banner-stl.t75  { top: 108px; left: 454px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.03); }
.banner-stl.t76  { top: 105px; left: 496px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.02); }
.banner-stl.t77  { top: 107px; left: 540px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.02); }
.banner-stl.t78  { top: 104px; left: 586px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.02); }
.banner-stl.t79  { top: 107px; left: 634px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }
.banner-stl.t80  { top: 104px; left: 684px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }

/* FILA 5 */
.banner-stl.t81  { top: 147px; left: 8px;   border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.11); }
.banner-stl.t82  { top: 144px; left: 30px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.13); }
.banner-stl.t83  { top: 148px; left: 52px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.banner-stl.t84  { top: 145px; left: 82px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.12); }
.banner-stl.t85  { top: 148px; left: 104px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.09); }
.banner-stl.t86  { top: 144px; left: 132px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }
.banner-stl.t87  { top: 147px; left: 162px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.09); }
.banner-stl.t88  { top: 144px; left: 192px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.08); }
.banner-stl.t89  { top: 148px; left: 222px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 13px solid rgba(255,255,255,0.07); }
.banner-stl.t90  { top: 145px; left: 254px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.06); }
.banner-stl.t91  { top: 147px; left: 292px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.05); }
.banner-stl.t92  { top: 144px; left: 332px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.04); }
.banner-stl.t93  { top: 147px; left: 372px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.04); }
.banner-stl.t94  { top: 144px; left: 412px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.03); }
.banner-stl.t95  { top: 148px; left: 452px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.03); }
.banner-stl.t96  { top: 145px; left: 494px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.02); }
.banner-stl.t97  { top: 147px; left: 538px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.02); }
.banner-stl.t98  { top: 144px; left: 584px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.02); }
.banner-stl.t99  { top: 147px; left: 632px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }
.banner-stl.t100 { top: 144px; left: 682px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }

/* FILA 6 */
.banner-stl.t101 { top: 187px; left: 5px;   border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.12); }
.banner-stl.t102 { top: 184px; left: 24px;  border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 14px solid rgba(255,255,255,0.09); }
.banner-stl.t103 { top: 188px; left: 52px;  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }
.banner-stl.t104 { top: 185px; left: 76px;  border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 16px solid rgba(255,255,255,0.08); }
.banner-stl.t105 { top: 188px; left: 106px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.12); }
.banner-stl.t106 { top: 184px; left: 130px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(255,255,255,0.09); }
.banner-stl.t107 { top: 187px; left: 160px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid rgba(255,255,255,0.08); }
.banner-stl.t108 { top: 184px; left: 190px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(255,255,255,0.07); }
.banner-stl.t109 { top: 188px; left: 220px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.06); }
.banner-stl.t110 { top: 185px; left: 252px; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 11px solid rgba(255,255,255,0.05); }
.banner-stl.t111 { top: 187px; left: 290px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.04); }
.banner-stl.t112 { top: 184px; left: 330px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.04); }
.banner-stl.t113 { top: 187px; left: 370px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.03); }
.banner-stl.t114 { top: 184px; left: 410px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 10px solid rgba(255,255,255,0.03); }
.banner-stl.t115 { top: 188px; left: 450px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.03); }
.banner-stl.t116 { top: 185px; left: 492px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid rgba(255,255,255,0.02); }
.banner-stl.t117 { top: 187px; left: 536px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid rgba(255,255,255,0.02); }
.banner-stl.t118 { top: 184px; left: 582px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 6px solid rgba(255,255,255,0.02); }
.banner-stl.t119 { top: 187px; left: 630px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }
.banner-stl.t120 { top: 184px; left: 680px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-bottom: 5px solid rgba(255,255,255,0.01); }

/* =================================================
   ENCABEZADO BOTÓN CONTACTO
   ================================================= */

.btn-contacto-encabezado-header {
    max-width: 1200px;
    margin: 0;
    margin-bottom: 60px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50%;
    padding: 20px 0 0 0;  /* ← quita el padding-left, ya lo tiene el padre */
}

.btn-contacto-encabezado-tag {
    font-size: 14px;
    color: #666;
    font-weight: 400;
    margin-top: 5px;
}

.btn-contacto-encabezado-header h2 {
    font-size: 32px;
    color: #003366;
    margin: 0;
    line-height: 1.2;
}

.btn-contacto-encabezado-linea {
    display: none;
}

/* CONTENEDOR DE LA FIGURA DEL TRIÁNGULO Y LÍNEA */
.btn-contacto-encabezado-indicator-line {
    display: flex;
    align-items: center;
    gap: 8px;
    position: static;   /* ← ya no es absolute */
    width: 100%;
}

/* TRIÁNGULO */
.btn-contacto-encabezado-triangle {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #7fd3ff; 
    flex-shrink: 0;
}

/* LÍNEA */
.btn-contacto-encabezado-bar {
    width: 500px;        /* ← cambia este valor para reducir el largo */
    height: 1.5px;
    background: #cccccc;
    border-radius: 3px;
}

/* =================================================
   BOTÓN CONTACTO ENCABEZADO - CONTENEDOR
   ================================================= */
.btn-contacto-encabezado-frava {
    background: #ffffff;
    padding: 40px 100px 100px;  /* ← este padding ya maneja el margen izquierdo */
    position: relative;
    margin-top: 20px;
    overflow: hidden;
}

/* =================================================
   TRIANGULOS PARA FORMULARIO
   ================================================= */
.otroservicios-triangles-form {
    position: absolute;
    top: 600px;
    right: -160px;
    left: auto;
    width: 30%;
    height: 450%;
    pointer-events: none;
    z-index: 0;  /* detrás de todo */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
    mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
}

.otroservicios-triangles-form .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.12) !important;
    transform: scale(1.7);
}


.otroservicios-triangles-form-2 {
    position: absolute;
    top: 390px;
    right: -160px;
    left: auto;
    width: 30%;
    height: 450%;
    pointer-events: none;
    z-index: 0;  /* detrás de todo */
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
    mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 70%);
}

.otroservicios-triangles-form-2 .banner-stl {
    border-bottom-color: rgba(11, 79, 163, 0.12) !important;
    transform: scale(2);
}

/* ============================================
   MÓVIL - COMPLETO
   ============================================ */

.nav-mobile-header {
    display: none;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
    z-index: 600;
}

.hamburger span {
    display: block;
    width: 25px;
    height: 3px;
    background: #0b4fa3;
    border-radius: 3px;
    transition: all 0.3s;
}

.nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 550;
}

.nav-overlay.active {
    display: block;
}

@media (max-width: 768px) {

    /* ── BARRA SUPERIOR ── */
    .top-bar {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        padding: 0.6rem 1rem !important;
        gap: 0.4rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 0.7rem !important;
        background: #0b4fa3 !important;
    }

    .top-bar-item {
        font-size: 0.7rem !important;
        white-space: nowrap !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        color: #ffffff !important;
    }

    .top-bar-item svg {
        width: 12px !important;
        height: 12px !important;
        flex-shrink: 0 !important;
    }

    .top-bar-item span {
        margin-left: 3px !important;
    }

    /* ── HEADER ── */
    .header {
        position: relative !important;
        top: auto !important;
        padding: 10px 15px !important;
        height: auto !important;
    }

    /* ── HAMBURGUESA ── */
    .hamburger {
        display: flex !important;
    }

    /* ── MENÚ DESPLEGABLE ── */
    .nav {
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0 !important;
        gap: 0 !important;
        display: none !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
        z-index: 9999 !important;
    }

    .nav.active {
        display: flex !important;
    }

    /* ── CABECERA MÓVIL ── */

    .hidden-mobile {
        display: none !important;
    }

    .header.menu-open {
        padding: 0 !important;
        height: 0 !important;
        overflow: visible !important;
    }
    
    .nav-mobile-header {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
        width: 100% !important;
    }

    .nav-mobile-header img {
        height: 40px !important;
        width: auto !important;
    }

    .nav-mobile-header button {
        background: none !important;
        border: none !important;
        font-size: 1.8rem !important;
        color: #0b4fa3 !important;
        cursor: pointer !important;
        padding: 0 !important;
    }

    .nav > a,
    .nav-item,
    .nav-item > a {
        width: 100% !important;
        padding: 1rem 1.5rem !important;
        border-bottom: 1px solid #f0f0f0 !important;
        font-size: 1rem !important;
        font-weight: 500 !important;
        color: #0b4fa3 !important;
        box-sizing: border-box !important;
        display: block !important;
        text-align: left !important;
    }

    .nav-item {
        padding: 0 !important;
        border-bottom: none !important;
    }

    .nav-item > a {
        border-bottom: 1px solid #f0f0f0 !important;
    }

    /* ── BOTÓN CONTÁCTANOS ── */

    .nav a.btn-contacto:hover,
    .nav a.btn-contacto:focus,
    .nav a.btn-contacto:active {
        background: #4fc3f7 !important;
        color: #003366 !important;
        box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
        transform: translateY(-2px) !important;
    }

    .nav a.btn-contacto:hover::after,
    .nav a.btn-contacto:focus::after,
    .nav a.btn-contacto:active::after {
        right: -65px !important;
        border-color: #4fc3f7 !important;
    }

    .nav a.btn-contacto:hover::before,
    .nav a.btn-contacto:focus::before,
    .nav a.btn-contacto:active::before {
        right: -48px !important;
        opacity: 1 !important;
        background: #4fc3f7 !important;
    }

    .nav a.btn-contacto:hover span,
    .nav a.btn-contacto:focus span,
    .nav a.btn-contacto:active span {
        width: 50px !important;
        right: -45px !important;
    }

    .nav a.btn-contacto,
    a.btn-contacto {
        color: #ffffff !important;
        background: #0b4fa3 !important;
        border-radius: 25px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        margin: 1rem 1.5rem !important;
        width: calc(100% - 6rem) !important;
        padding: 10px 30px 10px 22px !important;
        font-size: 14px !important;
        display: block !important;
        overflow: visible !important;
        position: relative !important;
        transition: 0.3s !important;
    }

    .btn-contacto::after {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: -25px !important;
        transform: translateY(-50%) !important;
        width: 35px !important;
        height: 35px !important;
        border: 2px solid #0b4fa3 !important;
        border-radius: 50% !important;
        display: block !important;
        transition: all 0.5s ease !important;
    }

    .btn-contacto::before {
        content: "" !important;
        position: absolute !important;
        top: 50% !important;
        right: -7px !important;
        transform: translateY(-50%) !important;
        width: 7px !important;
        height: 7px !important;
        background: #0b4fa3 !important;
        border-radius: 50% !important;
        opacity: 0 !important;
        display: block !important;
        transition: all 0.5s ease !important;
    }

    .btn-contacto span {
        display: block !important;
        position: absolute !important;
        top: 50% !important;
        right: -15px !important;
        width: 0 !important;
        height: 3px !important;
        background: #4fc3f7 !important;
        transform: translateY(-50%) !important;
        transition: all 0.5s ease !important;
        z-index: 9999 !important;
    }

    /* ── SUBMENÚ ── */
    .menu-vertical {
        position: static !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        min-width: 100% !important;
        padding: 0 !important;
        background: #f0f6ff !important;
        display: none !important;
    }

    .menu-vertical.active {
        display: block !important;
    }

    .nav-item:hover .menu-vertical {
        display: none !important;
    }

    .nav-item.active .menu-vertical {
        display: block !important;
    }

    .menu-vertical li a {
        padding: 0.8rem 2.5rem !important;
        font-size: 0.9rem !important;
        color: #0b4fa3 !important;
        border-bottom: 1px solid #e8e8e8 !important;
        white-space: normal !important;
    }

    /* ── HAMBURGUESA → X ── */
    .hamburger.active span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }
    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }
}

body.no-scroll {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
}


html, body {
    overflow-x: hidden;
    max-width: 100%;
}


/* ============================================
   MÓVIL - BOTON CONTACTO ENCABEZADO
   ============================================ */
@media (max-width: 768px) {
    
    .btn-contacto-encabezado-header {
        padding-left: 20px;  /* ← margen izquierdo del título */
        padding-right: 20px; /* ← margen derecho del título */
    }

    .btn-contacto-encabezado-bar {
        width: 450px; /* ← sube este valor para más largo */
    }

    .btn-contacto-encabezado-frava {
        padding: 30px 20px 60px 20px;
        margin-top: 10px;
    }

    .btn-contacto-encabezado-header {
        width: 100%;
        margin-bottom: 20px;
        margin-top: -20px;
    }

    .btn-contacto-encabezado-header h2 {
        font-size: 20px;
        line-height: 1.3;
    }

    .btn-contacto-encabezado-tag {
        font-size: 11px;
    }

}

/* =================================================
   CONTENEDOR NUESTROS SERVICIOS
   ================================================= */

.nuestros-servicios {
    background-color: #f4f6f8;
    padding: 0;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px; 
}

/* =================================================
   CARDS DE SERVICIOS - PARA SECCION NUESTROSERVICIOS
   ================================================= */

.nuestros-servicios .servicios-card .btn-ver-servicio {
    opacity: 0;
    transform: translateY(0);
    transition: all 0.4s ease;
    margin-top: 10px;
}

.nuestros-servicios .servicios-card:hover .btn-ver-servicio {
    opacity: 1;
    background: #ffffff;
    color: #0b4fa3;
}

.nuestros-servicios .servicios-card:hover .btn-ver-servicio:hover {
    background: #7fd3ff;
    color: #003366;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.nuestros-servicios .servicios-card {
    width: 100%;
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    height: 400px;
}

.nuestros-servicios .servicios-card:hover {
    transform: none;
    box-shadow: none;
}

.nuestros-servicios .servicios-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}

.nuestros-servicios .servicios-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    display: block;
}

.nuestros-servicios .servicios-card:hover .servicios-card-image img {
    transform: scale(1.1);
}

.nuestros-servicios .servicios-card-image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.35) 70%);
    z-index: 1;
}

.nuestros-servicios .servicios-card-content {
    padding: 30px 25px 25px 25px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.60);
    color: #ffffff;
    clip-path: polygon(
        0 0,
        40% 0,
        50% 40px,
        100% 40px,
        100% 100%,
        0 100%
    );
    z-index: 2;
    height: 180px;
    box-sizing: border-box;
    transition: top 0.4s ease, height 0.4s ease;
    top: calc(100% - 180px);
}

.nuestros-servicios .servicios-card:hover .servicios-card-content {
    top: calc(100% - 220px);
    height: 220px;
}

.nuestros-servicios .servicios-card-tag {
    display: inline-block;
    font-size: 10px;
    color: #cecdcd;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.nuestros-servicios .servicios-card-content h3 {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    position: relative;
    padding-bottom: 15px;
    line-height: 1.3;
}

.nuestros-servicios .servicios-card-content h3::before {
    content: "";
    position: absolute;
    bottom: -1.5px;
    left: 0;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid #4fc3f7;
}

.nuestros-servicios .servicios-card-content h3::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 15px;
    width: 300px;
    height: 2px;
    background: #4fc3f7;
}

/* =================================================
   CARPETA NUESTROS SERVICIOS
   ================================================= */

/* BANNER */
.nuestros-servicios-banner {
    position: relative;
    background: #0b4fa3;
    height: 260px;
    display: flex;
    align-items: center;
    padding-left: 80px;
    overflow: hidden;
}

.nuestros-servicios-banner::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #f4f6f8;
    clip-path: polygon(
        0 100%,
        58% 100%,
        62% 55%,
        100% 55%,
        100% 100%
    );
    z-index: 1;
}

.nuestros-servicios-banner h1 {
    position: relative;
    z-index: 3;
    color: #ffffff;
    font-size: 35px;
    font-weight: 700;
}

.nuestros-servicios-banner .servicios-indicator-line {
    position: absolute;
    left: 520px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0;
    z-index: 3;
}

.nuestros-servicios-banner .servicios-indicator-bar {
    width: 760px;
    height: 0.5px;
    background: #7fd3ff;
    border-radius: 3px;
}

.nuestros-servicios-banner .servicios-indicator-triangle {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid #69c6f8;
    position: absolute;
    left: 770px;
    top: 50%;
    transform: translateY(-50%);
}

/* GRID */
.nuestros-servicios {
    background-color: #f4f6f8;
    padding: 60px 40px;
}

.servicios-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1200px;
    margin: -60px auto 0 auto;
    padding-bottom: 20px;
}

/* RESPONSIVE */
@media (max-width: 768px) {

    /* ── BANNER NUESTROS SERVICIOS ── */
    .nuestros-servicios-banner {
        height: 160px;
        padding-left: 20px;
    }

    .nuestros-servicios-banner h1 {
        font-size: 22px;
    }

    .nuestros-servicios-banner::before {
        height: 50px;
    }

    /* ── LÍNEA Y TRIÁNGULO ── */
    .nuestros-servicios-banner .servicios-indicator-line {
        display: flex;
        align-items: center;
        left: 160px;
        top: 50%;
        transform: translateY(-50%);
        gap: 5px;
    }

    .nuestros-servicios-banner .servicios-indicator-bar {
        width: 150px;
    }

    .nuestros-servicios-banner .servicios-indicator-triangle {
        position: relative !important;
        left: 0 !important;
        top: 0 !important;
        transform: none !important;
    }

    .nuestros-servicios {
        padding: 0 !important;
    }

    .servicios-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 25px 15px 30px 15px; /* 👈 20px arriba, 5px costados */
        margin: 0 auto;
    }

    .nuestros-servicios .servicios-card {
        height: 400px;
    }

    .nuestros-servicios .servicios-card-tag {
        font-size: 8px; /* 👈 tamaño SERVICIOS */
    }

    .nuestros-servicios .servicios-card-content h3 {
        font-size: 13px; /* 👈 tamaño título */
    }

    .nuestros-servicios .servicios-card .btn-ver-servicio {
        font-size: 11px;
        text-align: center;
        padding: 8px 15px 8px 15px; /* 👈 igual arriba y abajo */
    }

    .nuestros-servicios .servicios-card-content {
        clip-path: polygon(
            0 0,
            40% 0,
            50% 20px, /* 👈 reduce este valor, era 40px */
            100% 20px, /* 👈 y este también */
            100% 100%,
            0 100%
        );
    }

}