/* ============================================ PROYECTOS - Página de Portfolio ============================================ *//* Contenedor de proyecto */.proyecto-item{padding-bottom:4rem;border-bottom:1px solid rgba(0,0,0,0.1)}.proyecto-item:last-child{border-bottom:none}/* ============================================ PROYECTO DESTACADO ============================================ *//* Contenedor del proyecto destacado */.proyecto-item--featured{background-image:radial-gradient(ellipse at 90% 30%,#3258b1 20%,rgb(26 33 53 / 20%) 50%),radial-gradient(ellipse at 70% 0%,#153d8c 0%,rgb(45 56 107) 50%),radial-gradient(ellipse at 20% 10%,#3258b1 10%,rgb(51 89 178) 70%),radial-gradient(ellipse at 50% 100%,#5b72a3 0%,rgb(50 89 178) 50%);border:2px solid hsl(250,84%,46%);border-radius:20px;padding:3rem;box-shadow:0 10px 40px rgba(0,0,0,0.3);position:relative;overflow:hidden}.proyecto-item--featured::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,hsl(250,84%,54%) 0%,hsl(250,84%,46%) 100%)}/* Header del proyecto destacado con imagen de fondo */.proyecto-header{position:relative;width:calc(100% + 6rem);margin-left:-3rem;margin-right:-3rem;margin-bottom:2.5rem;height:320px;border-radius:16px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,0.12)}.proyecto-header__background{position:absolute;top:0;left:0;width:100%;height:100%;background-size:cover;background-position:center;background-repeat:no-repeat;transform:scale(1.05);transition:transform 0.8s cubic-bezier(0.4,0,0.2,1)}.proyecto-item--featured:hover .proyecto-header__background{transform:scale(1.1)}.proyecto-header__overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.proyecto-header__content{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:2rem;color:white}.proyecto-header__title{font-size:2.5rem;font-weight:800;margin-bottom:0.8rem;text-shadow:0 4px 12px rgba(0,0,0,0.3);line-height:1.2}.proyecto-header__subtitle{font-size:1.2rem;font-weight:400;opacity:0.95;max-width:600px;text-shadow:0 2px 8px rgba(0,0,0,0.2)}/* Info del proyecto destacado */.proyecto-info--featured{padding:0 1rem}.proyecto-info--featured p,.proyecto-info--featured ul,.proyecto-info--featured li{color:rgba(255,255,255,0.9) !important}.proyecto-info--featured strong{color:rgba(255,255,255,1)}/* Galería especial para proyecto destacado - Grid 2x2 */.proyecto-galeria--featured{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem;width:100%}.proyecto-item--featured .proyecto-galeria__item{box-shadow:0 8px 24px rgba(0,0,0,0.12);border:2px solid transparent;transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}.proyecto-item--featured .proyecto-galeria__item:hover{transform:translateY(-12px);box-shadow:0 16px 40px rgba(73,92,235,0.4);border-color:hsl(250,84%,54%)}/* Información del proyecto */.proyecto-info h2{color:var(--color-primary,#1a1a1a);font-weight:700;line-height:1.2}.proyecto-info p{max-width:900px;/* line-height:1.8;*/}/* Galería de imágenes - Base */.proyecto-galeria{display:grid;gap:2rem;width:100%}/* Galería de 2 columnas */.proyecto-galeria--2{grid-template-columns:repeat(2,1fr)}/* Galería de 3 columnas */.proyecto-galeria--3{grid-template-columns:repeat(3,1fr)}/* Item de galería */.proyecto-galeria__item{position:relative;overflow:hidden;border-radius:12px;background-color:#f5f5f5;box-shadow:0 4px 12px rgba(0,0,0,0.08);transition:all 0.4s cubic-bezier(0.4,0,0.2,1)}.proyecto-galeria__item:hover{transform:translateY(-8px);box-shadow:0 12px 24px rgba(0,0,0,0.15)}/* Imagen contenedor */.proyecto-galeria__imagen{position:relative;width:100%;padding-bottom:75%;/* Aspect ratio 4:3 */ overflow:hidden;background:#f8f9fa;/* Fondo neutro claro */}.proyecto-galeria__imagen img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;/* Mantiene proporción original sin recortar */ transition:transform 0.6s cubic-bezier(0.4,0,0.2,1)}.proyecto-galeria__item:hover .proyecto-galeria__imagen img{transform:scale(1.02);/* Zoom más sutil para no distorsionar */}/* Overlay sutil para hover */.proyecto-galeria__imagen::after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.03);/* Overlay muy sutil */ opacity:0;transition:opacity 0.3s ease;pointer-events:none}.proyecto-galeria__item:hover .proyecto-galeria__imagen::after{opacity:1}/* ============================================ RESPONSIVE - Tablet ============================================ */@media (max-width:768px){/* Galería de 3 columnas pasa a 2 en tablet */ .proyecto-galeria--3{grid-template-columns:repeat(2,1fr)}.proyecto-galeria{gap:1.5rem}.proyecto-item{padding-bottom:3rem}/* Proyecto destacado en tablet */ .proyecto-item--featured{padding:2rem}.proyecto-header{width:calc(100% + 4rem);margin-left:-2rem;margin-right:-2rem;height:260px}.proyecto-header__title{font-size:2rem}.proyecto-header__subtitle{font-size:1rem}/* Galería destacada mantiene 2 columnas en tablet */ .proyecto-galeria--featured{grid-template-columns:repeat(2,1fr);gap:1.5rem}}/* ============================================ RESPONSIVE - Mobile ============================================ */@media (max-width:480px){/* Todas las galerías pasan a 1 columna en móvil */ .proyecto-galeria--2,.proyecto-galeria--3{grid-template-columns:1fr}.proyecto-galeria{gap:1rem}.proyecto-info h2{font-size:1.75rem}.proyecto-info p{font-size:1rem;line-height:1.6}.proyecto-item{padding-bottom:2.5rem}/* Aspecto ratio más cuadrado en móvil */ .proyecto-galeria__imagen{padding-bottom:85%;/* Más cuadrado */}/* Proyecto destacado en móvil */ .proyecto-item--featured{padding:1.5rem;border-radius:16px}.proyecto-header{width:calc(100% + 3rem);margin-left:-1.5rem;margin-right:-1.5rem;height:200px;border-radius:12px}.proyecto-header__title{font-size:1.5rem}.proyecto-header__subtitle{font-size:0.9rem}.proyecto-header__content{padding:1rem}/* Galería destacada pasa a 1 columna en móvil */ .proyecto-galeria--featured{grid-template-columns:1fr;gap:1rem}.proyecto-info--featured{padding:0}}/* ============================================ MEJORAS VISUALES ============================================ *//* Placeholder cuando no hay imagen */.proyecto-galeria__imagen:empty::before{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60px;height:60px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");background-size:contain;background-repeat:no-repeat;opacity:0.5}/* Estado de carga para imágenes */.proyecto-galeria__imagen img[src*="placeholder"]{filter:grayscale(100%) brightness(1.2)}/* Focus para accesibilidad */.proyecto-galeria__item:focus-within{outline:3px solid rgba(102,126,234,0.5);outline-offset:4px}/* Cursor pointer para imágenes clickeables */.proyecto-galeria__imagen{cursor:pointer}.proyecto-galeria__imagen img{cursor:zoom-in}/* ============================================ ANIMACIONES ADICIONALES ============================================ *//* Animación de entrada secuencial para items */.proyecto-galeria__item{animation:fadeInScale 0.6s ease-out backwards}.proyecto-galeria__item:nth-child(1){animation-delay:0.1s}.proyecto-galeria__item:nth-child(2){animation-delay:0.2s}.proyecto-galeria__item:nth-child(3){animation-delay:0.3s}@keyframes fadeInScale{from{opacity:0;transform:scale(0.95)}to{opacity:1;transform:scale(1)}}/* ============================================ MODAL DE ZOOM DE IMÁGENES ============================================ *//* Modal container - oculto por defecto */.image-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;opacity:0;transition:opacity 0.3s ease}/* Modal activo */.image-modal.active{display:flex;align-items:center;justify-content:center;opacity:1}/* Overlay oscuro */.image-modal__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);cursor:zoom-out}/* Contenedor de la imagen */.image-modal__content{position:relative;max-width:90vw;max-height:90vh;z-index:10000;animation:zoomIn 0.3s cubic-bezier(0.4,0,0.2,1)}/* Imagen del modal */.image-modal__img{max-width:100%;max-height:90vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,0.5)}/* Botón de cerrar */.image-modal__close{position:fixed;top:20px;right:20px;width:44px;height:44px;background:rgba(255,255,255,0.95);border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10001;transition:all 0.3s ease;box-shadow:0 4px 12px rgba(0,0,0,0.3)}.image-modal__close:hover{background:#fff;transform:rotate(90deg) scale(1.1)}.image-modal__close svg{color:#333}/* Animación de entrada */@keyframes zoomIn{from{opacity:0;transform:scale(0.9)}to{opacity:1;transform:scale(1)}}/* ============================================ RESPONSIVE - Modal ============================================ */@media (max-width:768px){.image-modal__content{max-width:95vw;max-height:85vh}.image-modal__img{max-height:85vh;border-radius:4px}.image-modal__close{top:10px;right:10px;width:40px;height:40px}}/* ============================================ PRINT STYLES ============================================ */@media print{.proyecto-galeria__item{break-inside:avoid;page-break-inside:avoid}.proyecto-galeria__item:hover{transform:none;box-shadow:0 4px 12px rgba(0,0,0,0.08)}/* Ocultar modal al imprimir */ .image-modal{display:none !important}}