/*Ubicacion: styles/branding.css*/
:root{
    --rosa: #dcafef;
    --rosa-claro: #e9cffc;
    --azul: #20214c;
    --blanco: #fff;
}

.sub-menu-mobile a {
    color: var(--rosa-claro);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}

@font-face {
  font-family: 'Rosmatika';
  src: url('../recursos/fonts/Rosmatika.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HarmoniaSansPro';
  src: url('../recursos/fonts/HarmoniaSansProCyr-Regular.woff2') format('woff2'),
       url('../recursos/fonts/HarmoniaSansProCyr-Regular.woff') format('woff'),
       url('../recursos/fonts/HarmoniaSansProCyr-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'HarmoniaSansProBlack';
  src: url('../recursos/fonts/HarmoniaSansProCyr-Black.woff2') format('woff2'),
       url('../recursos/fonts/HarmoniaSansProCyr-Black.woff') format('woff'),
       url('../recursos/fonts/HarmoniaSansProCyr-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    font-family: 'HarmoniaSansPro', sans-serif;
    background-color: #fff;
}

img{
    width: 2rem;
}

.main{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: 
    "parte1"
    "parte2"
    "parte3"
    "parte4"
    "parte5";
    position: relative;
    overflow: hidden;
}

.grupo1{
    grid-area: parte1;
    background-image: url(../recursos/Desktop/img/BANNERServicios.png);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 46vh;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
}

.header-desktop{
    display: none;
}

/*Header Mobile*/


.header-mobile {
    position: relative;
    z-index: 10;
}

.h-m{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.logo-img{
    width: 6.5rem;
}

.menu-icon{
    width: 2.5rem;
    cursor: pointer;
}

.grupo1-parrafo{
    color: var(--blanco);
    text-align: center;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -5.5rem;
}

.titulo{
    font-size: 2rem;
    font-weight: 800;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 1.2;
}

.texto{
    font-size: 0.9rem;
    width: 76%;
    margin: 1.5rem auto 1rem ;
    font-weight: 600;
}

/* =====================
   MENÚ MÓVIL PRINCIPAL
   ===================== */
.navegacion-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
    background: linear-gradient(135deg, #0f1035 0%, #20214c 40%, #3a2c66 70%, #5c2d91 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transform: translateX(100%);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s linear 0.4s;
    overflow: hidden;
}

.navegacion-mobile::before {
    content: '';
    position: absolute;
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(220,175,239,0.15) 0%, transparent 70%);
    top: -80px; right: -80px;
    border-radius: 50%;
    pointer-events: none;
}

.navegacion-mobile::after {
    content: '';
    position: absolute;
    width: 250px; height: 250px;
    background: radial-gradient(circle, rgba(220,175,239,0.10) 0%, transparent 70%);
    bottom: -60px; left: -60px;
    border-radius: 50%;
    pointer-events: none;
}

.navegacion-mobile.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.equis {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    cursor: pointer;
    width: 2.5rem;
    opacity: 0.85;
    transition: opacity 0.2s, transform 0.3s ease;
    z-index: 10;
}

.equis:hover { opacity: 1; transform: rotate(90deg); }

/* Logo dentro del menú */
.menu-mobile-logo {
    width: 7rem;
    opacity: 0.9;
    margin-bottom: 2rem;
    z-index: 2;
}

ul.menu-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0;
    text-align: center;
    list-style: none;
    width: 100%;
    z-index: 2;
}

ul.menu-mobile li {
    list-style: none;
    text-align: center;
    position: relative;
    color: var(--blanco);
    font-weight: 700;
    font-size: 1.6rem;
    font-family: 'Rosmatika', sans-serif;
    letter-spacing: 1px;
    width: 100%;
    padding: 0.65rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

ul.menu-mobile li:first-child { border-top: 1px solid rgba(255,255,255,0.08); }

.navegacion-mobile.active .menu-mobile li:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.navegacion-mobile.active .menu-mobile li:nth-child(2) { opacity:1; transform:none; transition-delay:0.10s; }
.navegacion-mobile.active .menu-mobile li:nth-child(3) { opacity:1; transform:none; transition-delay:0.15s; }
.navegacion-mobile.active .menu-mobile li:nth-child(4) { opacity:1; transform:none; transition-delay:0.20s; }
.navegacion-mobile.active .menu-mobile li:nth-child(5) { opacity:1; transform:none; transition-delay:0.25s; }
.navegacion-mobile.active .menu-mobile li:nth-child(6) { opacity:1; transform:none; transition-delay:0.30s; }

ul.menu-mobile li a {
    text-decoration: none;
    color: var(--blanco);
    transition: color 0.3s ease;
    display: block;
    padding: 0.2rem 0;
}

ul.menu-mobile > li:hover { color: var(--rosa); cursor: pointer; }

.navegacion-mobile ul.menu-mobile li a:hover:not(.empezemos),
.navegacion-mobile ul.menu-mobile li:hover { color: var(--rosa); }

.navegacion-desktop .menu-desktop a { text-decoration: none; }

.empezemos {
    background: linear-gradient(135deg, var(--rosa) 0%, #c48de0 100%);
    color: var(--azul);
    padding: 0.8rem 2rem;
    border-radius: 2rem;
    font-weight: 900;
    font-size: 0.85rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 20px rgba(220,175,239,0.35);
    display: inline-block;
    margin-top: 0.5rem;
}

.empezemos:hover {
    background: linear-gradient(135deg, #fff 0%, var(--rosa) 100%);
    color: var(--azul);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(220,175,239,0.5);
}

.flecha {
    width: 1.2rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    transition: transform 0.3s ease;
    filter: brightness(0) invert(1);
}

.flecha.active { transform: rotate(180deg); }

.sub-menu-mobile {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    list-style: none;
    background: rgba(255,255,255,0.05);
    border-radius: 0.8rem;
    width: 100%;
}

.sub-menu-mobile.active { max-height: 500px; opacity: 1; margin-top: 0.5rem; padding: 0.5rem 0; }

.sub-menu-mobile li { margin: 0.3rem 0; border-bottom: none !important; padding: 0 !important; opacity: 1 !important; transform: none !important; }

.sub-menu-mobile a {
    color: rgba(233, 207, 252, 0.9);
    font-size: 1rem;
    font-weight: 600;
    font-family: 'HarmoniaSansPro', sans-serif;
    text-align: center;
    text-decoration: none;
    transition: color 0.3s;
    padding: 0.4rem 1rem;
    display: block;
}.sub-menu-mobile a:hover { color: var(--blanco); }

.grupo2 {
    grid-area: parte2;
    padding: 60px 0 0px;
    background: linear-gradient(135deg, #ffffff 0%, #fcf8ff 100%);
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

.grupo2-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 1.5rem;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.badge-innovacion {
    display: inline-block;
    background: rgba(220, 175, 239, 0.15);
    color: var(--rosa);
    padding: 0.5rem 1.5rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(220, 175, 239, 0.4);
    animation: pulseBadge 3s infinite alternate;
}

@keyframes pulseBadge {
    0% { box-shadow: 0 0 0 0 rgba(220, 175, 239, 0.3); }
    100% { box-shadow: 0 0 0 10px rgba(220, 175, 239, 0); }
}

.titulo-grupo2 {
    font-size: 1.4rem;
    line-height: 1.25;
    text-align: center;
    color: var(--azul);
    margin-bottom: 15px;
    font-weight: 900;
}

.subtitulo-grupo2 {
    font-size: 1.05rem;
    color: #666;
    line-height: 1.5;
    max-width: 600px;
}

.mockup-container {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.mockup-glow {
    position: absolute;
    width: 100%;
    height: 80%;
    top: 10%;
    background: radial-gradient(circle, rgba(220, 175, 239, 0.4) 0%, rgba(255, 255, 255, 0) 70%);
    filter: blur(40px);
    z-index: 0;
    animation: pulseGlow 4s infinite alternate;
}

@keyframes pulseGlow {
    0% { opacity: 0.5; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1.1); }
}

@keyframes floatingMockup {
    0% { transform: translateY(0px) rotateZ(0deg); }
    50% { transform: translateY(-15px) rotateZ(1deg); }
    100% { transform: translateY(0px) rotateZ(0deg); }
}

.parrafo-grupo3{
    font-size: 1.25rem;
    margin-bottom: 2rem;
}

.mockup {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    filter: drop-shadow(0px 25px 35px rgba(32, 33, 76, 0.25));
    margin: 0 auto;
    animation: floatingMockup 6s ease-in-out infinite;
    border-radius: 0;
}


.grupo3{
    width: 90%;
    margin: 0 auto;
    grid-area: parte3;
    display: flex;
    flex-direction: column;
}

/* SPLIT LAYOUT PARA SERVICIOS */
.grupo3-contenedor-split {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 2rem auto;
    gap: 3rem;
}

.grupo3-texto-split {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.titulo-split {
    font-size: 2.2rem;
    color: var(--azul);
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.2rem;
}

.marca-resaltada {
    color: var(--rosa);
    position: relative;
    display: inline-block;
}

.marca-resaltada::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 6px;
    background-color: var(--rosa-claro);
    z-index: -1;
    border-radius: 4px;
}

.parrafo-split {
    font-size: 1.05rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 2.5rem;
}

.btn-cotizar-animado {
    display: inline-flex;
    align-items: center;
    background-color: var(--rosa);
    color: var(--blanco);
    text-decoration: none;
    border-radius: 50px;
    padding: 0.5rem 0.5rem 0.5rem 1.8rem;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all 0.4s ease;
    box-shadow: 0 10px 20px rgba(220, 175, 239, 0.3);
}

.btn-cotizar-animado:hover {
    background-color: var(--azul);
    transform: translateY(-5px);
    box-shadow: 0 15px 25px rgba(32, 33, 76, 0.2);
}

.bola-blanca {
    background-color: var(--blanco);
    color: var(--rosa);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    transition: all 0.4s ease;
}

.btn-cotizar-animado:hover .bola-blanca {
    color: var(--azul);
    transform: scale(1.1);
}

.grupo3-acordeon-split {
    width: 100%;
}

/* ══ ACORDEÓN — 100% GPU, cero lag ══════════════════════ */
.acordeon-branding {
    display: flex;
    flex-direction: column;
    width: 90%;
    max-width: 1200px;
    margin: 3rem auto 6rem;
    gap: 1rem;
}

.acordeon-item {
    position: relative;
    height: 180px;          /* altura fija — nunca cambia */
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    /* SIN transition de size — solo el overlay cambia */
}

.acordeon-bg-img {
    position: absolute;
    top: 0; left: 50%;
    width: 600px;
    max-width: none;
    height: 100%;
    transform: translateX(-50%);
    object-fit: cover;
    z-index: 0;
    /* Leve zoom al hacer hover — solo transform, sin layout */
    transition: transform 0.35s ease;
}

.acordeon-item:hover .acordeon-bg-img {
    transform: translateX(-50%) scale(1.05);
}

/* Overlay oscuro */
.acordeon-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(32,33,76,0.97) 0%,
        rgba(32,33,76,0.4) 100%
    );
    opacity: 0.55;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.acordeon-item:hover::before { opacity: 0.92; }

.acordeon-content {
    position: absolute;
    inset: 0;
    padding: 1.4rem 1.5rem;
    color: var(--blanco);
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* Estado base: solo icono + título visibles */
.acordeon-icon {
    font-size: 1.6rem;
    color: var(--rosa);
    margin-bottom: 0.5rem;
    /* Sube al hacer hover */
    transform: translateY(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.acordeon-title {
    font-size: 1.2rem;
    font-weight: 800;
    line-height: 1.2;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

/* Contenido oculto por defecto */
.acordeon-hover-content {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s ease 0.1s,
                transform 0.25s ease 0.1s,
                visibility 0.25s ease 0.1s;
    visibility: hidden;
    margin-top: 0.8rem;
}

/* Al hacer hover: icono y título suben, contenido aparece */
.acordeon-item:hover .acordeon-icon {
    transform: translateY(-8px);
}

.acordeon-item:hover .acordeon-title {
    transform: translateY(-4px);
}

.acordeon-item:hover .acordeon-hover-content {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.acordeon-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    color: rgba(255,255,255,0.85);
}

.btn-acordeon {
    display: inline-block;
    padding: 0.5rem 1.2rem;
    background: var(--rosa);
    color: var(--blanco);
    text-decoration: none;
    border-radius: 30px;
    font-weight: 700;
    font-size: 0.85rem;
    width: fit-content;
    transition: background-color 0.2s ease;
}

.btn-acordeon:hover { background: var(--azul); }

/* ── Desktop ≥768px ──────────────────────────────────── */
@media (min-width: 768px) {
    .acordeon-branding {
        flex-direction: row;
        height: 420px;
        margin: 0;
        width: 100%;
    }

    .acordeon-item {
        flex: 1;
        height: 100%;
        /* SIN flex-grow animation — tamaño siempre igual */
    }

    .acordeon-bg-img { width: 800px; }

    .acordeon-icon    { font-size: 2rem; }
    .acordeon-title   { font-size: 1.3rem; }
    .acordeon-desc    { font-size: 0.92rem; }
}

.grupo4{
    grid-area: parte4;
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 0 auto;
}

.texto-grupo4{
    width: 95%;
    display: flex;
    flex-direction: column;
    margin: 0.5rem auto 3rem;
}

.titulo-grupo4{
    font-size: 1.55rem;
    line-height: 1;
    color: var(--rosa);
    margin-bottom: 0.35rem;
    margin-top: 1rem;
    font-weight: 900;
    text-align: center;
}

.parrafo-grupo4{
    font-size: 1rem;
    color: var(--azul);
    font-weight: 600;
    letter-spacing: -1px;
    text-align: center;
    margin-top: 0.9rem;
}

.caja-grupo4{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    text-align: center;
    margin: 6rem 0 3rem;
}

.trabajemos{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--rosa);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 1.5rem;
}

.btn-contacto-suave {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background-color: var(--rosa);
    color: var(--blanco);
    border-radius: 3rem;
    padding: 0.8rem 2.5rem;
    text-decoration: none;
    font-size: 1.2rem;
    font-weight: 800;
    transition: all 0.4s ease;
}

.btn-contacto-suave:hover {
    background-color: var(--azul);
    color: var(--blanco);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(32, 33, 76, 0.15);
}

.footer{
    grid-area: parte5;
    background-image: url(../recursos/Mobile/img/bannerFooterMobile.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 95vh;
    padding: 2.7rem 1.5rem .8rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    text-align: center;
}

.footer-bloque{
    margin: 4rem auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 0.5rem;
    text-align: center;
}

.parte-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.2rem;
    text-align: center;
}

.logo-footer{
    width: 12rem;
}

.redes{
    margin: -1.8rem auto 0;
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 1rem;
}

.redes a{
    text-decoration: none;
}

.icono-redes{
    width: 1.8rem;
}

.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.3rem;
    transition: background 0.3s ease;
}

.redes a:hover .icono-redes {
    transform: scale(1.2);
    filter: brightness(0) saturate(100%) invert(73%) sepia(24%) saturate(635%) hue-rotate(249deg) brightness(103%);
}









.flechaabajo-contactanos:hover{
    content: url(../recursos/icons/flechaAbajoSinLetra.png);
}

.estrella{
    width: 2rem;
}

.titulo-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--blanco);
    font-weight: 700;
    font-size: 1.5rem;
}

.whatssap-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    margin-top: 1rem;
}

.numero-contacto{
    color: var(--blanco);
    text-decoration: none;
    font-weight: 700;
}

.numero-contacto:hover{
    color: var(--rosa);
}


.barra{
    display: inline-block;
    color: var(--blanco);
    font-weight: 800;
}

.correo-footer{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    margin-top: 1rem;
}

.correo-contacto{
    color: var(--blanco);
    text-decoration: none;
    font-weight: 700;
}

.correo-contacto:hover{
    color: var(--rosa);
}

.legal-footer{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.legal1{
    display: flex;
    justify-content: center;
    align-items: center;
    column-gap: 0.5rem;
    margin-top: 0.5rem;
}

.enlace-legal{
    color: var(--blanco);
    text-decoration: none;
    font-weight: 700;
    margin-top: 0.5rem;
}

.enlace-legal:hover{
    color: var(--rosa);
}

.copy{
    font-size: 0.6rem;
    color: var(--blanco);
    text-align: center;
    font-weight: 600;
}

@media (min-width: 412px){
    .footer{
        height: 83vh;
    }

    .copy{
        padding-bottom: .5rem;
    }
}

/* =========================
   MEDIA QUERIES
   ========================= */
@media (min-width: 768px) {

    .grupo1{
        height: 60vh;
        background-position: center bottom;
        padding: 0 1.8rem;
    }

    .grupo1-parrafo{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 50%;
    }

    .titulo{
        font-size: 3.3rem;
    }

    .equis{
        width: 3.2rem;
    }

    .menu-mobile-logo {
        width: 14rem;
        opacity: 0.9;
        margin-bottom: 2rem;
        z-index: 2;
    }

    .menu-mobile li a{ 
        font-size: 1.7rem;
    }

    .menu-mobile li{
        font-size: 1.75rem;
        margin-top: 1rem;
    }

    .empezemos{
        padding: 0.6rem 1.6rem;
    }

    .logo-img{
        width: 9rem;
    }

    .menu-icon{
        width: 4rem;
    }

    .grupo2 {
        padding: 90px 0 60px;
    }
    
    .titulo-grupo2 {
        font-size: 3rem;
        margin-bottom: 20px;
    }

    .mockup-container {
        width: 100%;
        margin-top: 1rem;
        display: flex;
        justify-content: center;
    }

    .mockup-glow {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 20%;
        filter: blur(80px);
    }

    .mockup {
        width: 100%;
        max-width: 600px;
        height: 380px;
        filter: drop-shadow(0px 30px 50px rgba(32, 33, 76, 0.3));
    }

    .grupo3-contenedor-split {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        max-width: 1400px;
        width: 95%;
        margin: 5rem auto;
        gap: 5rem;
    }

    .grupo3-texto-split {
        flex: 0 0 35%;
    }

    .grupo3-acordeon-split {
        flex: 0 0 60%;
    }

    .titulo-split {
        font-size: 3rem;
        margin-bottom: 1.2rem;
    }

    .parrafo-split {
        font-size: 1.1rem;
        margin-bottom: 2.5rem;
        line-height: 1.5;
    }

    .btn-cotizar-animado {
        font-size: 1rem;
        padding: 0.5rem 0.5rem 0.5rem 1.8rem;
    }

    .bola-blanca {
        width: 38px;
        height: 38px;
        font-size: 1rem;
        margin-left: 1.2rem;
    }

    .acordeon-branding {
        flex-direction: row;
        height: 550px;
        margin: 0; /* Reset global margin to fit split layout */
        width: 100%;
    }

    .acordeon-bg-img {
        width: 800px;
    }

    .acordeon-item {
        height: 100%;
        flex-grow: 1;
    }

    .acordeon-item:hover,
    .acordeon-item.active {
        flex-grow: 4;
        height: 100%;
    }
    
    .texto-grupo4{
        width: 85%;
        margin: 0.5rem auto 3rem;
    }

    .titulo-grupo4{
        font-size: 2.2rem;
        text-align: center;
    }

    .parrafo-grupo4{
        font-size: 1.35rem;
        text-align: center;
        padding: 1.4rem 0 3rem;
    }

    .bloque{
        margin-bottom: 2rem;
    }

    .titulo-bloque{
        font-size: 1.65rem;
    }

    .parrafo-bloque{
        font-size: 1.3rem;
        font-weight: 500;
    }

    .caja-grupo4{
        width: 70%;
        margin: 2.5rem auto 4rem;
    }

    .trabajemos{
        font-size: 2.5rem;
    }

    .bloque-contacto{
        align-items: center;
        margin-top: 1rem;
    }

    .contactanos{
        font-size: 3.5rem;
    }

    .flechaabajo-contactanos{
        width: 3.8rem;
    }

    .footer{
        background-position: top;
        height: 100vh;
        padding: 4.5rem 1.5rem 1.5rem;
    }

    .footer-bloque{
        row-gap: 1.8rem;
        margin: 1rem auto;
    }

    .logo-footer{
        width: 15rem;
    }

    .titulo-footer{
        font-size: 2.5rem;
    }

    .icono-redes{
        width: 2.8rem;
    }

.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.3rem;
    transition: background 0.3s ease;
}

.redes a:hover .icono-redes {
    transform: scale(1.2);
    filter: brightness(0) saturate(100%) invert(73%) sepia(24%) saturate(635%) hue-rotate(249deg) brightness(103%);
}

    .numero-contacto{
        font-size: 1.5rem;
    }

    .barra{
        font-size: 1.5rem;
    }

    .correo-contacto{
        font-size: 1.5rem;
    }

    .enlace-legal{
        font-size: 1.5rem;
    }

    .copy{
        font-size: 0.8rem;
    }
}

@media(min-width: 800px){

    .grupo1{
        height: 60vh;
    }

    .grupo1-parrafo{
        height: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .titulo{
        font-size: 3.6rem;
    }

    .titulo-grupo2 {
        font-size: 3.2em;
        margin-bottom: 70px;
    }

    .carrusel-branding-parte img {
        width: 520px;
        height: 400px;
    }

    .card-image-container {
        width: 22rem; 
        height: 26rem;
    }

    .parrafo-grupo3{
        font-size: 2.3rem;
    }
    
    .titulo-card-overlay {
        font-size: 1.8rem;
    }

    .descripcion-card {
        font-size: 1.2rem;
    }    

    .caja-grupo4{
        width: 75%;
        margin: 3.5rem auto 6rem;
    }

    .trabajemos{
        font-size: 2rem;
    }

    .bloque-contacto{
        align-items: center;
        margin-top: -1rem;
    }

    .contactanos{
        font-size: 3.8rem;
    }

    .flechaabajo-contactanos{
        width: 4.5rem;
    }

    .footer{
        background-position: top;
        height: 90vh;
        padding: 6rem 1.5rem 2.5rem;
    }

}


@media (min-width: 1024px) {

    .grupo1{
        background-image: url(../recursos/Desktop/img/BANNERServicios.png);
        height: 60vh;
    }

    .grupo1-parrafo{
        margin-top: -7.5rem;
    }

    .logo-img{
        width: 11rem;
    }

    .titulo{
        font-size: 3rem;
    }

    .header-mobile {
        display: none;
    }

    .header-desktop {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        width: 100%;
        margin-top: -2.6rem;
    }

    .navegacion-desktop .menu-desktop {
        display: flex;
        list-style: none;
        gap: 2rem;
        align-items: center;
    }

    .navegacion-desktop .menu-desktop li {
        position: relative;
        display: flex;
        align-items: center;
    }

    .navegacion-desktop .men {
        text-decoration: none;
        color: var(--blanco);
        font-weight: 700;
        font-size: 1.1rem;
        cursor: pointer;
        transition: color 0.3s ease;
    }

    .navegacion-desktop .men:hover {
        color: var(--rosa);
        border-bottom: 3px solid var(--rosa);
    }

    .flecha {
        width: 1.6rem;
        cursor: pointer;
        margin-top: -0.3rem;
        margin-left: 0.3rem;
    }

    .flecha.active { transform: rotate(180deg); }

    .navegacion-desktop .sub-menu-desktop {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        background: rgba(32,33,76,0.92);
        backdrop-filter: blur(20px);
        list-style: none;
        padding: 0.6rem;
        border-radius: 0.8rem;
        width: max-content;
        margin-top: 0.5rem;
        border: 1px solid rgba(220,175,239,0.2);
    }

    .navegacion-desktop .sub-menu-desktop.active { display: block; }

    .navegacion-desktop .sub-menu-desktop a {
        color: var(--blanco);
        text-decoration: none;
        font-weight: 600;
        display: block;
        padding: 0.5rem 1rem;
        border-radius: 0.4rem;
        transition: background 0.3s ease;
        font-size: 0.9rem;
        font-family: 'HarmoniaSansPro', sans-serif;
    }

    .navegacion-desktop .sub-menu-desktop a:hover {
        background-color: rgba(220,175,239,0.2);
    }

    .carrusel-branding-parte img {
        width: 400px;
        height: 250px;
    }

    .carrusel-branding-parte:nth-child(2) {
        margin-left: 225px;
    }

    .grupo2 {
        padding: 90px 0 60px;
    }

    .titulo-grupo2 {
        width: 800px;
        font-size: 3.6rem;
        margin: 1.5rem auto 1rem;
        line-height: 1.1;
    }

    .subtitulo-grupo2 {
        font-size: 1.2rem;
    }

    .mockup {
        height: 380px;
        max-width: 650px;
    }

    .texto-grupo3{
        margin: 2rem auto 5.5rem;
    }

    .parrafo-grupo3{
        font-size: 2.6rem;
        padding-bottom: 0.1rem;
    }

    .cotizar{
        font-size: 1.4rem;
        padding: 0.4rem 3.4rem;
    }

    .caja-cards{
        gap: 2rem 8rem;
        margin: 0rem auto 2.5rem;
        padding: 0 3rem;
    }

    .card-image-container {
        width: 25rem; 
        height: 29rem;
    }
    
    .titulo-card-overlay {
        font-size: 1.8rem;
    }

    .descripcion-card {
        font-size: 1.1rem;
    }
     .titulo-card { 
        font-size: 1.5rem; 
    }

    .texto-grupo4{
        width: 65%;
        margin: 2.5rem auto 6rem;
    }
    
    .titulo-grupo4{
        font-size: 2.8rem;
    }
    
    .parrafo-grupo4{
        font-size: 1.9rem;
        margin-top: -.4rem;
    }

    .caja-grupo4{
        width: 100%;
        margin: 10rem auto 8rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .trabajemos{
        font-size: 1.5rem;
        margin: 3rem auto 1.5rem;
    }

    .btn-contacto-suave {
        padding: 1rem 3.5rem;
        gap: 1.5rem;
    }

    .footer{
        background-image: url(../recursos/Desktop/img/bannerFooterDesktop.png);
        background-position: center;
        height: 55vh;
        justify-content: space-between;
        align-items: center;
        row-gap: 6rem;
    }

    .footer-bloque{
        width: 100%;
        height: 50%;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }

    .parte-footer{
        justify-content: flex-start;
        align-items: flex-start;
    }

    .legal-footer{
        align-items: flex-start;
    }

    .titulo-footer{
        text-align: center;
    }

    .icono-redes{
        width: 1.9rem;
    }

.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.3rem;
    transition: background 0.3s ease;
}

.redes a:hover .icono-redes {
    transform: scale(1.2);
    filter: brightness(0) saturate(100%) invert(73%) sepia(24%) saturate(635%) hue-rotate(249deg) brightness(103%);
}

    .estrella{
        width: 2rem;
    }

    .logo-footer{
        width: 18rem;
        margin-top: -5rem;
        margin-left: -5rem;
    }

    .titulo-footer{
        font-size: 1.8rem;
    }

    .icono-redes{
        width: 1.9rem;
    }

.redes a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 0.3rem;
    transition: background 0.3s ease;
}

.redes a:hover .icono-redes {
    transform: scale(1.2);
    filter: brightness(0) saturate(100%) invert(73%) sepia(24%) saturate(635%) hue-rotate(249deg) brightness(103%);
}

    .numero-contacto{
        font-size: 1rem;
    }

    .barra{
        font-size: 1rem;
    }

    .correo-contacto{
        font-size: 1rem;
    }

    .enlace-legal{
        font-size: 1rem;
    }

    .redes{
        margin-top: -4rem;
        margin-left: 1.5rem;
    }

}

/* Pausar animaciones cuando el elemento no está visible */
@media (prefers-reduced-motion: no-preference) {
    .mockup,
    .mockup-glow,
    .badge-innovacion {
        animation-play-state: running;
    }
}

/* Forzar pausa cuando la sección no es visible (lo maneja el JS) */
.grupo2.is-offscreen .mockup,
.grupo2.is-offscreen .mockup-glow {
    animation-play-state: paused;
}

/* =========================================
   NUEVO GRID DE SERVICIOS (12 ITEMS)
========================================= */
.grupo-servicios-grid {
    width: 90%;
    max-width: 1200px;
    margin: 4rem auto;
    font-family: 'Poppins', sans-serif;
}

.gsg-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.gsg-intro {
    font-size: 1.25rem;
    color: #4a4a68;
    max-width: 800px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.6;
}

.gsg-pill {
    display: inline-block;
    background-color: #eaddff;
    color: #20214c;
    padding: 0.5rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
}

.gsg-pill i {
    margin-right: 0.5rem;
}

.gsg-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

.gsg-card {
    background-color: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 16px;
    padding: 1.8rem 1.5rem;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gsg-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 15px 40px rgba(0, 0, 0, 0.08);
}

.gsg-card i {
    color: #20214c;
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
    display: block;
}

.gsg-card h4 {
    color: #20214c;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    line-height: 1.2;
}

.gsg-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* RESPONSIVE */
@media (min-width: 600px) {
    .gsg-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .gsg-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .gsg-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 1400px) {
    .gsg-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}
/* ══════════════════════════════════════════════
   GRUPO2 — CARRUSEL INFINITO (Branding)
══════════════════════════════════════════════ */
.grupo2 {
    grid-area: parte2;
    padding: 3.5rem 0 2.5rem;
    background: linear-gradient(135deg, #ffffff 0%, #fcf8ff 100%);
    overflow: hidden;
    text-align: center;
}

.g2-branding-header {
    padding: 0 1.5rem;
    margin-bottom: 2.5rem;
}

.g2-highlight {
    color: var(--rosa-dark, #c48de0);
    font-family: 'Rosmatika', sans-serif;
}

.g2-subtitulo {
    font-size: 1rem;
    color: #666;
    margin-top: 0.8rem;
    font-family: 'HarmoniaSansPro', sans-serif;
    line-height: 1.6;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Wrapper con fade en los bordes */
.carrusel-infinito-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carrusel-infinito-wrap::before,
.carrusel-infinito-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.carrusel-infinito-wrap::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.carrusel-infinito-wrap::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

/* Track con animación */
.carrusel-infinito-track {
    display: flex;
    gap: 1rem;
    width: max-content;
    animation: carruselScroll 22s linear infinite;
    padding: 0.5rem 0 1rem;
}

.carrusel-infinito-track:hover {
    animation-play-state: paused;
}

/* Imágenes del carrusel */
.carrusel-infinito-track img {
    width: 240px;
    height: 170px;
    object-fit: cover;
    border-radius: 14px;
    flex-shrink: 0;
    box-shadow: 0 8px 24px rgba(32, 33, 76, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carrusel-infinito-track img:hover {
    transform: scale(1.04) translateY(-4px);
    box-shadow: 0 16px 36px rgba(32, 33, 76, 0.18);
}

@keyframes carruselScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Responsive */
@media (min-width: 768px) {
    .g2-subtitulo { font-size: 1.1rem; max-width: 600px; }
    .carrusel-infinito-track img {
        width: 300px;
        height: 210px;
    }
}

@media (min-width: 1024px) {
    .grupo2 { padding: 5rem 0 3rem; }
    .g2-branding-header { margin-bottom: 3rem; }
    .g2-subtitulo { font-size: 1.2rem; }
    .carrusel-infinito-track img {
        width: 360px;
        height: 240px;
    }
    .carrusel-infinito-wrap::before,
    .carrusel-infinito-wrap::after { width: 140px; }
}
/* ── Respeta preferencia de movimiento reducido ─────────── */
@media (prefers-reduced-motion: reduce) {
    .mockup,
    .mockup-glow,
    .badge-innovacion,
    .carrusel-infinito-track,
    .acordeon-bg-img {
        animation: none !important;
        transition: none !important;
    }
}