/* ============================================================
   PAGINAS - Estilos específicos por página
   ============================================================ */

/* ---------- SOBRE MÍ ---------- */
.acerca__rejilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
    margin-bottom: 5rem;
}

.acerca__bloque-marca {
    background: linear-gradient(135deg, var(--acento-fuerte), #047857);
    border-radius: var(--radio-grande);
    padding: 4px;
    box-shadow: var(--sombra-fuerte);
}

.acerca__bloque-marca-interior {
    background: var(--tono-fondo-1);
    border-radius: 14px;
    padding: 3rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.acerca__perfil {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.acerca__perfil-icono {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--acento-fuerte), #047857);
    border-radius: var(--radio-medio);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-principal);
    font-weight: 700;
    font-size: 1.5rem;
    box-shadow: var(--sombra-media);
}

.acerca__perfil-nombre {
    color: var(--texto-principal);
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
}

.acerca__perfil-rol {
    color: var(--acento-suave);
    font-size: 0.9375rem;
}

.acerca__bloque-marca-texto {
    border-top: 1px solid var(--tono-borde-claro);
    padding-top: 1.5rem;
}

.acerca__bloque-marca-texto p {
    color: var(--texto-secundario);
    margin-bottom: 1rem;
}

.acerca__bloque-marca-texto strong {
    color: var(--texto-principal);
}

.acerca__lista-areas {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem 1.25rem;
}

.acerca__lista-areas li {
    color: var(--texto-secundario);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

.acerca__lista-areas li i {
    color: var(--acento-suave);
    font-size: 0.75rem;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .acerca__lista-areas {
        grid-template-columns: 1fr;
    }
}

.acerca__lista-cualidades {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.cualidad {
    display: flex;
    gap: 1rem;
    background: var(--tono-superficie);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radio-grande);
    padding: 2rem;
    border: 1px solid var(--tono-borde);
    transition: all var(--transicion-base);
}

.cualidad:hover {
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-3px);
    box-shadow: var(--sombra-media);
}

.cualidad__icono {
    width: 48px;
    height: 48px;
    background: var(--acento-fuerte);
    border-radius: var(--radio-pequeno);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--texto-principal);
}

.cualidad__titulo {
    color: var(--texto-principal);
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
}

.cualidad__descripcion {
    color: var(--texto-secundario);
    line-height: 1.6;
}

.filosofia {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.3), rgba(6, 95, 70, 0.3));
    border-radius: var(--radio-grande);
    padding: 3rem;
    border: 1px solid rgba(6, 95, 70, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.filosofia__titulo {
    color: var(--texto-principal);
    margin-bottom: 1.5rem;
}

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

.filosofia__subtitulo {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.filosofia__subtitulo--acento {
    color: var(--acento-suave);
}

.filosofia__subtitulo--neutro {
    color: var(--texto-secundario);
}

.filosofia__lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--texto-secundario);
}

/* ---------- HABILIDADES ---------- */
.habilidades__rejilla {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-bottom: 4rem;
}

.habilidad-card {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: var(--radio-grande);
    padding: 1.5rem;
    border: 1px solid;
    transition: all var(--transicion-base);
}

.habilidad-card:hover {
    transform: translateY(-5px) scale(1.02);
}

.habilidad-card__icono {
    width: 48px;
    height: 48px;
    border-radius: var(--radio-pequeno);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--texto-principal);
    box-shadow: var(--sombra-suave);
}

.habilidad-card__titulo {
    color: var(--texto-principal);
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.habilidad-card__lista {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.habilidad-card__elemento {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    color: var(--texto-secundario);
}

.habilidad-card__punto {
    font-weight: 700;
    margin-top: 2px;
}

/* Variantes de color para habilidades */
.habilidad-card--violeta { background: rgba(76, 29, 149, 0.3); border-color: rgba(91, 33, 182, 0.5); }
.habilidad-card--violeta .habilidad-card__icono { background: var(--violeta); }
.habilidad-card--violeta .habilidad-card__punto { color: #a78bfa; }
.habilidad-card--violeta:hover { box-shadow: 0 20px 40px rgba(124, 58, 237, 0.2); }

.habilidad-card--fucsia { background: rgba(112, 26, 117, 0.3); border-color: rgba(134, 25, 143, 0.5); }
.habilidad-card--fucsia .habilidad-card__icono { background: var(--fucsia); }
.habilidad-card--fucsia .habilidad-card__punto { color: #e879f9; }
.habilidad-card--fucsia:hover { box-shadow: 0 20px 40px rgba(192, 38, 211, 0.2); }

.habilidad-card--esmeralda { background: rgba(6, 78, 59, 0.3); border-color: rgba(6, 95, 70, 0.5); }
.habilidad-card--esmeralda .habilidad-card__icono { background: var(--acento-fuerte); }
.habilidad-card--esmeralda .habilidad-card__punto { color: var(--acento-suave); }
.habilidad-card--esmeralda:hover { box-shadow: var(--sombra-acento); }

.habilidad-card--ambar { background: rgba(120, 53, 15, 0.3); border-color: rgba(146, 64, 14, 0.5); }
.habilidad-card--ambar .habilidad-card__icono { background: var(--ambar); }
.habilidad-card--ambar .habilidad-card__punto { color: #fbbf24; }
.habilidad-card--ambar:hover { box-shadow: 0 20px 40px rgba(217, 119, 6, 0.2); }

.habilidad-card--rosa { background: rgba(136, 19, 55, 0.3); border-color: rgba(159, 18, 57, 0.5); }
.habilidad-card--rosa .habilidad-card__icono { background: var(--rosa); }
.habilidad-card--rosa .habilidad-card__punto { color: #fb7185; }
.habilidad-card--rosa:hover { box-shadow: 0 20px 40px rgba(225, 29, 72, 0.2); }

.habilidad-card--indigo { background: rgba(49, 46, 129, 0.3); border-color: rgba(67, 56, 202, 0.5); }
.habilidad-card--indigo .habilidad-card__icono { background: var(--indigo); }
.habilidad-card--indigo .habilidad-card__punto { color: #818cf8; }
.habilidad-card--indigo:hover { box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2); }

.habilidad-card--cian { background: rgba(22, 78, 99, 0.3); border-color: rgba(14, 116, 144, 0.5); }
.habilidad-card--cian .habilidad-card__icono { background: var(--cian); }
.habilidad-card--cian .habilidad-card__punto { color: #22d3ee; }
.habilidad-card--cian:hover { box-shadow: 0 20px 40px rgba(8, 145, 178, 0.2); }

.habilidad-card--teal { background: rgba(19, 78, 74, 0.3); border-color: rgba(15, 118, 110, 0.5); }
.habilidad-card--teal .habilidad-card__icono { background: var(--teal); }
.habilidad-card--teal .habilidad-card__punto { color: #2dd4bf; }
.habilidad-card--teal:hover { box-shadow: 0 20px 40px rgba(13, 148, 136, 0.2); }

.fortalezas {
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.3), rgba(6, 95, 70, 0.3));
    border-radius: var(--radio-grande);
    padding: 4px;
    border: 1px solid rgba(6, 95, 70, 0.5);
}

.fortalezas__interior {
    background: var(--tono-fondo-1);
    border-radius: 14px;
    padding: 2rem;
}

.fortalezas__titulo {
    text-align: center;
    color: var(--texto-principal);
    margin-bottom: 2rem;
}

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

.fortalezas__item {
    text-align: center;
}

.fortalezas__emoji {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
}

.fortalezas__nombre {
    color: var(--texto-principal);
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.fortalezas__texto {
    color: var(--texto-secundario);
}

.experiencia-destacada {
    margin-top: 3rem;
    text-align: center;
}

.experiencia-destacada__caja {
    display: inline-block;
    background: var(--tono-superficie);
    backdrop-filter: blur(12px);
    border-radius: var(--radio-grande);
    padding: 3rem;
    border-left: 4px solid var(--acento-fuerte);
    transition: all var(--transicion-base);
}

.experiencia-destacada__caja:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-acento);
}

.experiencia-destacada__numero {
    font-size: clamp(3rem, 8vw, 5rem);
    font-weight: 700;
    background: linear-gradient(90deg, var(--acento-suave), var(--acento-fuerte));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    margin-bottom: 1rem;
    line-height: 1;
}

.experiencia-destacada__texto {
    color: var(--texto-principal);
    font-size: 1.25rem;
}

.experiencia-destacada__nota {
    color: var(--texto-terciario);
    margin-top: 0.5rem;
}

/* ---------- PORTAFOLIO ---------- */
.portafolio-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    max-width: 980px;
    margin: 0 auto 3rem;
    padding: 1.15rem 1.4rem;
    border-radius: var(--radio-medio);
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(148, 163, 184, 0.22);
    border-left: 3px solid var(--acento);
    color: var(--texto-secundario);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.portafolio-disclaimer__icono {
    flex-shrink: 0;
    color: var(--acento);
    display: inline-flex;
    margin-top: 0.2rem;
}

.portafolio-disclaimer__contenido {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.portafolio-disclaimer__titulo {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--acento-suave);
}

.portafolio-disclaimer__texto {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    text-align: justify;
}

.portafolio-disclaimer__texto strong {
    color: var(--texto-principal);
    font-weight: 600;
}

.portafolio-lista {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

@media (max-width: 1024px) {
    .portafolio-lista {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
}

.proyecto {
    border-radius: var(--radio-extra);
    overflow: hidden;
    background: linear-gradient(135deg, var(--tono-fondo-1), var(--tono-fondo-2));
    border: 1px solid var(--tono-borde);
    box-shadow: var(--sombra-fuerte);
    transition: all var(--transicion-base);
    position: relative;
}

.proyecto:hover {
    box-shadow: 0 25px 60px rgba(16, 185, 129, 0.15);
}

.proyecto__visual {
    position: relative;
    height: 520px;
    background: linear-gradient(135deg, var(--tono-fondo-1), var(--tono-fondo-2), var(--tono-fondo-1));
    overflow: hidden;
}

.proyecto__visual-fondo {
    position: absolute;
    inset: 0;
    opacity: 0.25;
}

.proyecto__visual-degradado {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--tono-fondo-1) 0%, transparent 60%);
    pointer-events: none;
    z-index: 2;
}

.proyecto__dispositivos {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 3rem;
    z-index: 1;
}

.proyecto__cta-flotante {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radio-medio);
    background: linear-gradient(90deg, var(--acento-fuerte), #047857);
    color: var(--texto-principal);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.4);
    transition: all var(--transicion-base);
}

.proyecto__cta-flotante:hover {
    transform: translateY(-2px) scale(1.04);
    box-shadow: 0 15px 40px rgba(16, 185, 129, 0.5);
}

/* ---------- DISPOSITIVOS / DEVICE MOCKUPS ---------- */
.dispositivo {
    position: relative;
    background: #020617;
    border: 4px solid #1e293b;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.dispositivo--escritorio {
    width: 65%;
    max-width: 720px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radio-grande);
}

.dispositivo--escritorio::after {
    content: '';
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 130px;
    height: 8px;
    background: #1e293b;
    border-radius: 0 0 var(--radio-pequeno) var(--radio-pequeno);
}

.dispositivo--movil {
    position: absolute;
    bottom: 3rem;
    right: 4rem;
    width: 130px;
    aspect-ratio: 9 / 19;
    border-radius: 22px;
    border-width: 6px;
}

.dispositivo--movil::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 4px;
    background: #1e293b;
    border-radius: 4px;
    z-index: 5;
}

.dispositivo--tableta {
    width: 50%;
    max-width: 480px;
    aspect-ratio: 4 / 3;
    border-radius: var(--radio-grande);
}

/* ---------- Imagen única (Totem: Google + Italika) ---------- */
.proyecto__imagen-fusion {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.proyecto__imagen-fusion img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform var(--transicion-base);
}

.proyecto:hover .proyecto__imagen-fusion img {
    transform: scale(1.04);
}

.dispositivo__pantalla {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1e293b, #334155, #1e293b);
    overflow: hidden;
}

.dispositivo__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    z-index: 2;
}

.dispositivo__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem;
    gap: 0.5rem;
    z-index: 1;
}

.dispositivo__placeholder-icono {
    width: 64px;
    height: 64px;
    border-radius: var(--radio-grande);
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acento-suave);
    margin-bottom: 0.5rem;
}

.dispositivo__placeholder-titulo {
    color: var(--texto-secundario);
    font-weight: 500;
    font-size: 0.9375rem;
}

.dispositivo__placeholder-tipo {
    color: var(--texto-suave);
    font-size: 0.6875rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.dispositivo__brillo {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
    pointer-events: none;
}


.proyecto__info {
    padding: 2rem;
}

.proyecto__encabezado {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.proyecto__icono {
    width: 56px;
    height: 56px;
    border-radius: var(--radio-medio);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-principal);
    box-shadow: var(--sombra-media);
}

.proyecto__categoria {
    color: var(--acento-suave);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.proyecto__titulo {
    color: var(--texto-principal);
    font-size: 1.75rem;
}

.proyecto__subtitulo {
    color: var(--texto-secundario);
    font-size: 1.125rem;
    margin-bottom: 1rem;
}

.proyecto__etiquetas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.proyecto__estadisticas {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.proyecto__estadistica {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    padding: 0.75rem 1rem;
    border-radius: var(--radio-medio);
    border: 1px solid var(--tono-borde);
    transition: all var(--transicion-base);
}

.proyecto__estadistica:hover {
    border-color: rgba(16, 185, 129, 0.5);
    transform: translateY(-3px);
}

.proyecto__estadistica-emoji {
    font-size: 1.75rem;
}

.proyecto__estadistica-valor {
    color: var(--texto-principal);
    font-size: 1.25rem;
    font-weight: 700;
}

.proyecto__estadistica-nombre {
    color: var(--texto-terciario);
    font-size: 0.8125rem;
}

/* Gradientes proyectos */
.gradiente-azul-violeta { background: linear-gradient(135deg, #2563eb, var(--violeta)); }
.gradiente-esmeralda-teal { background: linear-gradient(135deg, var(--acento-fuerte), var(--teal)); }
.gradiente-naranja-rojo { background: linear-gradient(135deg, #ea580c, #dc2626); }
.gradiente-rosa-fucsia { background: linear-gradient(135deg, var(--rosa), #db2777); }
.gradiente-indigo-azul { background: linear-gradient(135deg, var(--indigo), #2563eb); }
.gradiente-violeta-purpura { background: linear-gradient(135deg, var(--violeta), #9333ea); }
.gradiente-cian-azul { background: linear-gradient(135deg, var(--cian), #2563eb); }
.gradiente-ambar-naranja { background: linear-gradient(135deg, var(--ambar), #ea580c); }

/* ---------- CLIENTES POR SECTOR ---------- */
.sectores {
    padding: 5rem 0;
}

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

.sector {
    border-radius: var(--radio-grande);
    padding: 1.5rem;
    border: 1px solid;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all var(--transicion-base);
    box-shadow: var(--sombra-suave);
    overflow: hidden;
}

.sector:hover {
    transform: scale(1.04);
    box-shadow: var(--sombra-media);
}

.sector__encabezado {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.sector__icono {
    width: 60px;
    height: 60px;
    border-radius: var(--radio-pequeno);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-principal);
    box-shadow: var(--sombra-suave);
}

.sector__titulo {
    color: var(--texto-principal);
    font-size: 1.125rem;
}

/* Desktop: rejilla original de 2 columnas */
.sector__clientes {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
}

/* Mobile/tableta: carrusel swipeable por sector */
@media (max-width: 1024px) {
    .sector__clientes {
        display: flex;
        grid-template-columns: none;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        scroll-padding: 0.25rem;
        padding: 0.25rem 0.25rem 0.75rem;
        margin: 0 -0.25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        cursor: grab;
        /* Captura sólo el gesto horizontal — el vertical sigue scrolleando la página */
        touch-action: pan-x;
        overscroll-behavior-x: contain;
    }

    .sector__clientes::-webkit-scrollbar { display: none; }

    .sector__clientes.arrastrando {
        cursor: grabbing;
        scroll-behavior: auto;
    }

    .sector__clientes.arrastrando .sector__cliente { pointer-events: none; }

    .sector__clientes > .sector__cliente {
        flex: 0 0 calc(50% - 0.375rem);
        scroll-snap-align: start;
        min-width: 0;
        max-width: 125px;
    }
}

/* Móvil: tarjetas más compactas y 3-4 visibles */
@media (max-width: 640px) {
    .sector__clientes > .sector__cliente {
        flex: 0 0 125px;
        max-width: 125px;
    }

    .sector__cliente { padding: 0.5rem; gap: 6px; }

    .sector__cliente > .sector__cliente,
    .sector__cliente img {
        width: 72px;
        height: 72px;
    }

    .sector__cliente-nombre { font-size: 0.6875rem; }
}

.sector__cliente {
    padding: 1rem;
    border-radius: var(--radio-medio);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: all var(--transicion-base);
}

.sector__cliente:hover {
    background: rgba(255, 255, 255, 0.1);
}

.sector__cliente-emoji {
    font-size: 1.75rem;
    transition: transform var(--transicion-base);
}

.sector__cliente:hover .sector__cliente-emoji {
    transform: scale(1.15);
}

.sector__cliente-nombre {
    font-size: 0.75rem;
    color: var(--texto-secundario);
    text-align: center;
    font-weight: 500;
}

/* Variantes de sector */
.sector--violeta { background: linear-gradient(135deg, rgba(76, 29, 149, 0.4), rgba(91, 33, 182, 0.4)); border-color: rgba(91, 33, 182, 0.5); }
.sector--violeta .sector__icono { background: var(--violeta); }
.sector--violeta .sector__cliente { background: rgba(46, 16, 101, 0.5); }

.sector--teal { background: linear-gradient(135deg, rgba(19, 78, 74, 0.4), rgba(15, 118, 110, 0.4)); border-color: rgba(15, 118, 110, 0.5); }
.sector--teal .sector__icono { background: var(--teal); }
.sector--teal .sector__cliente { background: rgba(4, 47, 46, 0.5); }

.sector--ambar { background: linear-gradient(135deg, rgba(120, 53, 15, 0.4), rgba(146, 64, 14, 0.4)); border-color: rgba(146, 64, 14, 0.5); }
.sector--ambar .sector__icono { background: var(--ambar); }
.sector--ambar .sector__cliente { background: rgba(69, 26, 3, 0.5); }

.sector--rosa { background: linear-gradient(135deg, rgba(136, 19, 55, 0.4), rgba(159, 18, 57, 0.4)); border-color: rgba(159, 18, 57, 0.5); }
.sector--rosa .sector__icono { background: var(--rosa); }
.sector--rosa .sector__cliente { background: rgba(76, 5, 25, 0.5); }

.sector--fucsia { background: linear-gradient(135deg, rgba(112, 26, 117, 0.4), rgba(134, 25, 143, 0.4)); border-color: rgba(134, 25, 143, 0.5); }
.sector--fucsia .sector__icono { background: var(--fucsia); }
.sector--fucsia .sector__cliente { background: rgba(74, 4, 78, 0.5); }

.sector--indigo { background: linear-gradient(135deg, rgba(49, 46, 129, 0.4), rgba(67, 56, 202, 0.4)); border-color: rgba(67, 56, 202, 0.5); }
.sector--indigo .sector__icono { background: var(--indigo); }
.sector--indigo .sector__cliente { background: rgba(30, 27, 75, 0.5); }

.sector--cian { background: linear-gradient(135deg, rgba(22, 78, 99, 0.4), rgba(14, 116, 144, 0.4)); border-color: rgba(14, 116, 144, 0.5); }
.sector--cian .sector__icono { background: var(--cian); }
.sector--cian .sector__cliente { background: rgba(8, 51, 68, 0.5); }

.sector--esmeralda { background: linear-gradient(135deg, rgba(6, 78, 59, 0.4), rgba(6, 95, 70, 0.4)); border-color: rgba(6, 95, 70, 0.5); }
.sector--esmeralda .sector__icono { background: var(--acento-fuerte); }
.sector--esmeralda .sector__cliente { background: rgba(2, 44, 34, 0.5); }

/* ---------- CV ---------- */
.cv {
    padding: 6rem 1.5rem 5rem;
    max-width: 1024px;
    margin: 0 auto;
}

.cv__encabezado {
    background: linear-gradient(135deg, var(--acento-fuerte), #047857);
    border-radius: var(--radio-grande);
    padding: 4px;
    margin-bottom: 2rem;
    box-shadow: var(--sombra-fuerte);
}

.cv__encabezado-interior {
    background: var(--tono-fondo-1);
    border-radius: 14px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.cv__avatar {
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, var(--acento-fuerte), #047857);
    border-radius: var(--radio-medio);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-principal);
    font-weight: 700;
    font-size: 2.5rem;
    flex-shrink: 0;
    box-shadow: var(--sombra-media);
}

.cv__perfil {
    flex: 1;
    min-width: 240px;
}

.cv__nombre {
    color: var(--texto-principal);
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.cv__rol {
    color: var(--texto-secundario);
    margin-bottom: 1rem;
}

.cv__contactos {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cv__contacto {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--texto-secundario);
    transition: color var(--transicion-base);
}

.cv__contacto:hover {
    color: var(--acento);
}

.cv__bloque {
    background: var(--tono-superficie);
    border-radius: var(--radio-grande);
    padding: 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--tono-borde);
    box-shadow: var(--sombra-suave);
}

.cv__bloque-titulo {
    color: var(--texto-principal);
    font-size: 1.375rem;
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cv__bloque-icono {
    color: var(--acento);
}

.cv__experiencia {
    border-left: 4px solid var(--acento);
    padding-left: 1.25rem;
    margin-bottom: 1.5rem;
}

.cv__experiencia--alterna {
    border-left-color: var(--violeta);
}

.cv__experiencia-cabecera {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cv__experiencia-puesto {
    color: var(--texto-principal);
    font-size: 1.125rem;
}

.cv__experiencia-empresa {
    color: var(--acento-suave);
    font-weight: 500;
    margin-top: 0.25rem;
}

.cv__experiencia--alterna .cv__experiencia-empresa {
    color: #a78bfa;
}

.cv__experiencia-fecha {
    color: var(--texto-terciario);
    font-size: 0.875rem;
}

.cv__experiencia-lista {
    margin-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--texto-secundario);
}

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

.cv__habilidad-grupo-titulo {
    color: var(--texto-principal);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.cv__habilidad-grupo-lista {
    color: var(--texto-secundario);
    font-size: 0.9375rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.cv__sectores-rejilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.cv__sector-item {
    border-left: 4px solid var(--acento);
    padding-left: 1rem;
}

.cv__sector-titulo {
    color: var(--texto-principal);
    font-weight: 700;
}

.cv__sector-clientes {
    color: var(--texto-terciario);
    font-size: 0.875rem;
}

.cv__fortalezas {
    background: linear-gradient(135deg, var(--tono-fondo-1), var(--tono-fondo-2));
    border-radius: var(--radio-grande);
    padding: 2rem;
    color: var(--texto-principal);
}

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

.cv__fortaleza-titulo {
    color: var(--acento-suave);
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.cv__fortaleza-texto {
    color: var(--texto-secundario);
    font-size: 0.875rem;
}

/* Saltos de página para el PDF y la impresión */
.cv__bloque,
.cv__encabezado,
.cv__experiencia,
.cv__fortalezas,
.cv__sector-item {
    page-break-inside: avoid;
    break-inside: avoid;
}

@media print {
    .cabecera,
    .pie,
    [data-descargar-cv] {
        display: none !important;
    }

    body {
        background: #ffffff !important;
        color: #0f172a !important;
    }

    .cv {
        padding: 1rem !important;
    }

    .cv__bloque,
    .cv__encabezado,
    .cv__fortalezas {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        color: #0f172a !important;
        box-shadow: none !important;
        page-break-inside: avoid;
        break-inside: avoid;
    }

    .cv__nombre,
    .cv__bloque-titulo,
    .cv__experiencia-puesto,
    .cv__habilidad-grupo-titulo,
    .cv__sector-titulo {
        color: #0f172a !important;
    }

    .cv__rol,
    .cv__experiencia-lista,
    .cv__habilidad-grupo-lista,
    .cv__sector-clientes,
    .cv__fortaleza-texto {
        color: #475569 !important;
    }

    .cv__experiencia-empresa,
    .cv__bloque-icono,
    .cv__fortaleza-titulo,
    .cv__contacto:hover,
    .texto-degradado {
        color: #059669 !important;
        -webkit-text-fill-color: #059669 !important;
        background: none !important;
    }

    .cv__experiencia {
        border-left-color: #059669 !important;
    }

    .cv__experiencia--alterna {
        border-left-color: #7c3aed !important;
    }
}

/* ---------- CONTACTO ---------- */
.contacto-rejilla {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3rem;
}

.contacto-info {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.contacto-card {
    background: var(--tono-superficie);
    backdrop-filter: blur(12px);
    border-radius: var(--radio-grande);
    padding: 2rem;
    border: 1px solid var(--tono-borde);
    box-shadow: var(--sombra-suave);
}

.contacto-card__titulo {
    color: var(--texto-principal);
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.contacto-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.contacto-item:last-child {
    margin-bottom: 0;
}

.contacto-item__icono {
    width: 48px;
    height: 48px;
    background: var(--acento-fuerte);
    border-radius: var(--radio-pequeno);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--texto-principal);
}

.contacto-item__titulo {
    color: var(--texto-principal);
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.contacto-item__valor {
    color: var(--acento-suave);
    transition: color var(--transicion-base);
}

.contacto-item__valor:hover {
    text-decoration: underline;
}

.redes-sociales {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.red-social {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    border-radius: var(--radio-pequeno);
    color: var(--texto-secundario);
    transition: all var(--transicion-base);
}

.red-social:hover {
    background: rgba(15, 23, 42, 0.5);
    color: var(--acento-suave);
}

.red-social__icono {
    width: 40px;
    height: 40px;
    background: var(--acento-fuerte);
    border-radius: var(--radio-pequeno);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-principal);
}

.disponibilidad {
    background: linear-gradient(135deg, var(--tono-fondo-1), var(--tono-fondo-2), var(--tono-fondo-3));
    border-radius: var(--radio-grande);
    padding: 2rem;
    color: var(--texto-principal);
    box-shadow: var(--sombra-fuerte);
}

.disponibilidad__titulo {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.disponibilidad__texto {
    color: var(--texto-secundario);
    margin-bottom: 1rem;
}

.disponibilidad__estado {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--texto-principal);
}

.disponibilidad__punto {
    width: 12px;
    height: 12px;
    background: var(--acento-suave);
    border-radius: 50%;
    animation: latido 2s ease-in-out infinite;
}

.beneficios-lista {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.beneficios-lista__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--texto-secundario);
    font-size: 0.9375rem;
}

.beneficios-lista__check {
    color: var(--acento-suave);
    font-weight: 700;
}

/* ============================================================
   DETALLE DE PROYECTO - Hoja modal que sube desde abajo
   ============================================================ */
.detalle {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--tono-fondo-3);
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
    pointer-events: none;
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.6);
}

.detalle.abierta {
    transform: translateY(0);
    pointer-events: auto;
}

.detalle__hero {
    position: relative;
    min-height: 52vh;
    overflow: hidden;
    padding: 4.5rem 2rem 4rem;
}

.detalle__hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.4), rgba(0,0,0,0.8));
    pointer-events: none;
}

.detalle__hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    opacity: 0.5;
}

.detalle__hero-blob--uno {
    top: -100px;
    right: -100px;
    width: 380px;
    height: 380px;
    background: rgba(255, 255, 255, 0.08);
}

.detalle__hero-blob--dos {
    bottom: 0;
    left: 30%;
    width: 280px;
    height: 280px;
    background: rgba(0, 0, 0, 0.3);
}

.detalle__top {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

/* Hijos directos sí reciben clics */
.detalle__top > * {
    pointer-events: auto;
}

/* Cluster de acciones (compartir + cerrar): siempre visible arriba a la derecha */
.detalle__acciones {
    position: fixed;
    top: 1rem;
    right: 1.5rem;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.detalle__atras {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transicion-base);
    font-size: 0.9375rem;
}

.detalle__atras:hover {
    color: var(--texto-principal);
    transform: translateX(-4px);
}

.detalle__accion {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(2, 6, 23, 0.55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.92);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    transition: all var(--transicion-base);
}

.detalle__accion:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--texto-principal);
    transform: scale(1.08);
}

.detalle__cerrar:hover {
    transform: rotate(90deg) scale(1.08);
}

.detalle__contenido-hero {
    position: relative;
    z-index: 10;
    max-width: 1024px;
}

.detalle__migas {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
}

.detalle__migas-actual {
    color: rgba(255, 255, 255, 0.8);
}

.detalle__titulo {
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    font-weight: 800;
    color: var(--texto-principal);
    margin-bottom: 1rem;
    line-height: 1;
    letter-spacing: -0.02em;
}

.detalle__subtitulo {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.75);
    max-width: 640px;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.detalle__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.detalle__chip {
    padding: 0.4rem 1rem;
    border-radius: var(--radio-circular);
    backdrop-filter: blur(8px);
    font-size: 0.875rem;
    border: 1px solid;
}

.detalle__chip--solido {
    background: rgba(255, 255, 255, 0.15);
    color: var(--texto-principal);
    border-color: rgba(255, 255, 255, 0.2);
}

.detalle__chip--tenue {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.detalle__chip--acento {
    background: rgba(16, 185, 129, 0.25);
    color: var(--acento-suave);
    border-color: rgba(16, 185, 129, 0.3);
}

/* Tabs sticky */
.detalle__tabs {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--tono-borde);
    box-shadow: var(--sombra-fuerte);
}

.detalle__tabs-lista {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0.25rem 2rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.detalle__tabs-lista::-webkit-scrollbar {
    display: none;
}

.detalle__tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--texto-terciario);
    white-space: nowrap;
    transition: color var(--transicion-rapida);
    border: none;
    background: none;
    cursor: pointer;
}

.detalle__tab:hover {
    color: var(--texto-secundario);
}

.detalle__tab--activa {
    color: var(--acento-suave);
}

.detalle__tab--activa::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0.75rem;
    right: 0.75rem;
    height: 2px;
    background: var(--acento-suave);
    border-radius: 2px;
}

.detalle__paneles {
    max-width: 1280px;
    margin: 0 auto;
    padding: 3rem 2rem 6rem;
}

.detalle__panel {
    display: none;
    animation: aparecerSuave 0.3s ease;
}

.detalle__panel--activo {
    display: block;
}

.detalle__panel-titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tono-borde);
}

.detalle__panel-titulo-icono {
    width: 40px;
    height: 40px;
    border-radius: var(--radio-medio);
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--acento-suave);
}

.detalle__panel-titulo-texto {
    font-size: 1.5rem;
    color: var(--texto-principal);
    font-weight: 700;
}

/* Bloques de contenido (Meta, Rol, Solución, Resultado) */
.contenido-seccion {
    margin-top: 2rem;
    border-radius: 24px;
    padding: 3rem 3rem 3.25rem;
    border: 1px solid;
    max-width: 1024px;
}

.contenido-seccion--esmeralda {
    background: rgba(2, 44, 34, 0.4);
    border-color: rgba(4, 120, 87, 0.3);
}

.contenido-seccion--esmeralda .contenido-seccion__icono-marco { background: rgba(5, 150, 105, 0.2); color: #6ee7b7; border-color: rgba(4, 120, 87, 0.4); }
.contenido-seccion--esmeralda .contenido-seccion__titulo { color: #6ee7b7; }

.contenido-seccion--violeta {
    background: rgba(46, 16, 101, 0.4);
    border-color: rgba(109, 40, 217, 0.3);
}

.contenido-seccion--violeta .contenido-seccion__icono-marco { background: rgba(124, 58, 237, 0.2); color: #c4b5fd; border-color: rgba(109, 40, 217, 0.4); }
.contenido-seccion--violeta .contenido-seccion__titulo { color: #c4b5fd; }

.contenido-seccion--ambar {
    background: rgba(69, 26, 3, 0.4);
    border-color: rgba(180, 83, 9, 0.3);
}

.contenido-seccion--ambar .contenido-seccion__icono-marco { background: rgba(217, 119, 6, 0.2); color: #fcd34d; border-color: rgba(180, 83, 9, 0.4); }
.contenido-seccion--ambar .contenido-seccion__titulo { color: #fcd34d; }

.contenido-seccion--cian {
    background: rgba(8, 51, 68, 0.4);
    border-color: rgba(14, 116, 144, 0.3);
}

.contenido-seccion--cian .contenido-seccion__icono-marco { background: rgba(8, 145, 178, 0.2); color: #67e8f9; border-color: rgba(14, 116, 144, 0.4); }
.contenido-seccion--cian .contenido-seccion__titulo { color: #67e8f9; }

.contenido-seccion__encabezado {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contenido-seccion__icono-marco {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    border: 1px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contenido-seccion__titulo {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.contenido-seccion__cuerpo {
    color: #e2e8f0;
    font-size: 1.0625rem;
    line-height: 1.8;
}

/* ---------- DIVISIONES (proyectos con sub-clientes) ---------- */
.divisiones-contenedor {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 2rem;
}

.divisiones-contenedor .contenido-seccion {
    margin-top: 0;
}

.contenido-seccion__division-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.1rem 1rem;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    text-transform: uppercase;
    min-height: 2.1rem;
}

.contenido-seccion__division-logo {
    display: block;
    height: 2.43rem;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

.contenido-seccion__division-marca {
    display: inline-flex;
    align-items: center;
    color: var(--texto-principal);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.contenido-seccion__division-marca::after {
    content: "/";
    margin-left: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    font-weight: 400;
}

.contenido-seccion--division .contenido-seccion__encabezado {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.contenido-seccion--division .contenido-seccion__titulo {
    font-size: 1.5rem;
}

/* Galería con divisiones (selector doble por especificidad) */
.galeria-proyecto.galeria-proyecto--dividida {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    margin-top: 2rem;
}

.galeria-division__titulo {
    color: var(--texto-principal);
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.galeria-division__titulo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 12px var(--acento-glow);
}

.galeria-division__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Estadísticas con divisiones (selector doble por especificidad) */
.detalle-stats.detalle-stats--dividida {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 2rem;
}

.detalle-stats-grupo__titulo {
    color: var(--texto-principal);
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detalle-stats-grupo__titulo::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--acento);
    box-shadow: 0 0 12px var(--acento-glow);
}

.detalle-stats-grupo__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 768px) {
    .galeria-division__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .detalle-stats-grupo__grid {
        grid-template-columns: 1fr;
    }
    .contenido-seccion--division {
        padding: 1.75rem 1.5rem;
    }
}

/* Galería del proyecto */
.galeria-proyecto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.galeria-proyecto__tarjeta {
    position: relative;
    border-radius: var(--radio-medio);
    overflow: hidden;
    border: 1px solid rgba(16, 185, 129, 0.6);
    box-shadow: 0 10px 30px rgba(16, 185, 129, 0.15);
    cursor: zoom-in;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--tono-fondo-2), var(--tono-fondo-1));
    transition: all var(--transicion-base);
}

.galeria-proyecto__tarjeta:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 20px 40px rgba(16, 185, 129, 0.25);
}

.galeria-proyecto__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
}

.galeria-proyecto__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-suave);
    font-size: 0.9375rem;
    z-index: 1;
}

.galeria-proyecto__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.2), transparent);
    opacity: 0;
    transition: opacity var(--transicion-base);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem;
    z-index: 3;
}

.galeria-proyecto__tarjeta:hover .galeria-proyecto__overlay {
    opacity: 1;
}

.galeria-proyecto__icono-lupa {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-principal);
}

/* Play grande centrado en la miniatura de video */
.galeria-proyecto__play-grande {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding-left: 4px;
    z-index: 3;
    transition: transform var(--transicion-base), background var(--transicion-base);
    pointer-events: none;
}

.galeria-proyecto__tarjeta--video:hover .galeria-proyecto__play-grande {
    background: var(--acento);
    transform: translate(-50%, -50%) scale(1.08);
}

.galeria-proyecto__tarjeta--video {
    cursor: pointer;
    border-color: rgba(16, 185, 129, 0.8);
}

/* Tarjeta vertical (Shorts): conserva el aspect 16/10 del grid, pero el
   thumbnail YouTube (siempre horizontal 4:3 con barras negras) se ve
   centrado y se le agrega un marco interno tipo móvil para que se note
   que es contenido vertical. */
.galeria-proyecto__tarjeta--vertical {
    background: linear-gradient(135deg, #0f172a, #020617);
}

.galeria-proyecto__tarjeta--vertical.galeria-proyecto__tarjeta--video {
    border-color: rgba(225, 29, 72, 0.8);
}

.galeria-proyecto__tarjeta--vertical .galeria-proyecto__imagen {
    object-fit: contain;
    background: #000;
}

.galeria-proyecto__badge-short {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.2rem 0.55rem;
    background: linear-gradient(135deg, #e11d48, #db2777);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-radius: 999px;
    z-index: 4;
    box-shadow: 0 4px 10px rgba(225, 29, 72, 0.4);
}

.galeria-proyecto__alt {
    color: var(--texto-principal);
    font-size: 0.75rem;
    font-weight: 500;
    text-align: center;
    padding: 0 0.75rem;
}

.galeria-proyecto__indice {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radio-circular);
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    opacity: 0;
    transition: opacity var(--transicion-base);
    z-index: 4;
}

.galeria-proyecto__tarjeta:hover .galeria-proyecto__indice {
    opacity: 1;
}

/* Estadísticas en detalle */
.detalle-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.detalle-stat {
    background: rgba(30, 41, 59, 0.6);
    border-radius: var(--radio-grande);
    padding: 2rem;
    border: 1px solid var(--tono-borde);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
    transition: all var(--transicion-base);
}

.detalle-stat:hover {
    border-color: rgba(16, 185, 129, 0.4);
    transform: translateY(-4px);
}

.detalle-stat__emoji {
    font-size: 3rem;
}

.detalle-stat__valor {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--texto-principal);
}

.detalle-stat__etiqueta {
    color: var(--texto-terciario);
    font-size: 0.875rem;
}

/* ============================================================
   LIGHTBOX - Visor de imágenes
   ============================================================ */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(12px);
    display: none;
    align-items: center;
    justify-content: center;
}

.lightbox.abierto {
    display: flex;
    animation: aparecerModal 0.25s ease;
}

.lightbox__top {
    position: absolute;
    top: 1rem;
    left: 1.5rem;
    right: 1.5rem;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
}

.lightbox__contador {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.lightbox__controles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lightbox__boton {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transicion-base);
    cursor: pointer;
}

.lightbox__boton:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox__boton:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lightbox__nivel {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.75rem;
    width: 40px;
    text-align: center;
}

.lightbox__cerrar {
    margin-left: 0.5rem;
}

.lightbox__cerrar:hover {
    transform: rotate(90deg);
}

.lightbox__area {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__contenido {
    position: relative;
    max-width: 1024px;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, #1e293b, var(--tono-fondo-1));
    border-radius: var(--radio-grande);
    border: 1px solid rgba(16, 185, 129, 0.6);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    transition: transform 0.3s ease;
}

.lightbox__imagen {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--tono-fondo-1);
    z-index: 2;
}

.lightbox__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    z-index: 3;
}

.lightbox__video iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* Lightbox vertical (YouTube Shorts): el alto manda y el ancho deriva
   del aspect-ratio 9/16. Así el iframe siempre tiene dimensiones reales. */
.lightbox__contenido.lightbox__contenido--vertical {
    aspect-ratio: 9 / 16;
    width: auto;
    height: 82vh;
    max-width: 92vw;
    max-height: 82vh;
    margin: 0 auto;
}

.lightbox__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--texto-terciario);
    font-size: 1rem;
    text-align: center;
    padding: 2rem;
    z-index: 1;
}

.lightbox__flecha {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    color: var(--texto-principal);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transicion-base);
    cursor: pointer;
    z-index: 11;
}

.lightbox__flecha:hover {
    background: rgba(255, 255, 255, 0.2);
}

.lightbox__flecha--prev { left: 1rem; }
.lightbox__flecha--siguiente { right: 1rem; }

.lightbox__indicadores {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 10;
}

.lightbox__punto {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transition: all var(--transicion-base);
    cursor: pointer;
    border: none;
    padding: 0;
}

.lightbox__punto:hover {
    background: rgba(255, 255, 255, 0.6);
}

.lightbox__punto--activo {
    width: 20px;
    border-radius: 4px;
    background: var(--acento);
}

.lightbox__leyenda {
    position: absolute;
    bottom: 3.5rem;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    padding: 0 2rem;
}

/* ============================================================
   AVISO FLOTANTE / TOAST - Notificación inferior centrada
   ============================================================ */
.aviso-flotante {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(180%);
    background: linear-gradient(135deg, var(--tono-fondo-2), var(--tono-fondo-1));
    border: 1px solid rgba(16, 185, 129, 0.5);
    color: var(--texto-principal);
    padding: 0.875rem 1.25rem 0.875rem 1rem;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(16, 185, 129, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 400;
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s ease;
    pointer-events: none;
    max-width: calc(100vw - 2rem);
}

.aviso-flotante.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.aviso-flotante__icono {
    color: var(--acento-suave);
    flex-shrink: 0;
}

.aviso-flotante__mensaje {
    font-size: 0.9375rem;
    font-weight: 500;
}

.aviso-flotante[data-estado="error"] {
    border-color: rgba(225, 29, 72, 0.5);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(225, 29, 72, 0.15);
}

.aviso-flotante[data-estado="error"] .aviso-flotante__icono {
    color: #fb7185;
}

/* ============================================================
   AJUSTES PARA EFECTOS PARALLAX / SCROLL-DRIVEN (index)
   ============================================================ */

/* La foto del hero respira con el scroll */
.hero__foto {
    transition: transform .5s cubic-bezier(.2,.7,.2,1),
                box-shadow .5s ease;
}

/* Título sticky con fondo translúcido para que las tarjetas no se
   vean al pasar por detrás */
.sticky-titulo {
    padding: 1.5rem 1rem;
    margin-bottom: 2rem;
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.88) 0%,
        rgba(15, 23, 42, 0.6) 70%,
        rgba(15, 23, 42, 0) 100%);
    border-radius: var(--radio-grande);
}

/* La cabecera sticky pierde su margen inferior (lo aporta el wrapper) */
.sticky-titulo .seccion__cabecera {
    margin-bottom: 0;
}

/* La rejilla se centra explícitamente y aporta su propio espacio horizontal */
.sectores__rejilla {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Glow exterior sobre las tarjetas vía pseudo-elemento (más barato que
   recalcular box-shadow con cada scroll) */
.sector {
    position: relative;
    isolation: isolate;
}

.sector::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 0 30px 2px rgba(16, 185, 129, 0.35);
    opacity: var(--p, 0);
    pointer-events: none;
    z-index: -1;
    transition: opacity .35s ease;
}

/* El icono del sector rota suavemente al hacer scroll dentro del sector */
.sector .sector__icono {
    transition: transform .35s ease;
    transform: rotate(calc(var(--p, 0) * 8deg));
}

/* En hover, el icono se anima */
.sector:hover .sector__icono {
    transform: rotate(6deg) scale(1.1);
}

/* En hover ya no se hace escala global (la rotación 3D del tilt manda) */
.sector:hover {
    transform: none;
    border-color: rgba(16, 185, 129, 0.45);
}