/* =========================================
   RESET BÁSICO (Para que se vea igual en todos los navegadores)
   ========================================= */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
table { border-collapse: collapse; border-spacing: 0; }

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', system-ui, sans-serif; color: #ffffff; overflow-x: hidden; background-color: #1F1F1F; }

.contenedor { position: relative; z-index: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 40px 20px; }
.rejilla-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; align-items: center; }
.col-12 { grid-column: span 12; }
.col-8 { grid-column: span 8; }
.col-6 { grid-column: span 6; }
.col-4 { grid-column: span 4; }

header {
    width: 100%; height: 70px; background-color: #1F1F1F; padding: 0 max(20px, calc((100% - 1128px) / 2)); 
    box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;
    position: sticky; top: 0; z-index: 999; 
}    
.titulo-header { text-decoration: none; color: #0088FF; font-size: 28px; font-weight: 900; letter-spacing: -0.11em; z-index: 100; }
.hamburger { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; cursor: pointer; z-index: 100; }
.hamburger span { display: block; height: 3px; width: 100%; background-color: #0088FF; border-radius: 3px; transition: all 0.3s ease-in-out; }
.lista-menu { display: flex; list-style: none; margin: 0; padding: 0; align-items: center; }
.lista-menu li a { text-decoration: none; color: #ffffff; font-size: 24px; font-weight: 300; letter-spacing: -0.11em; margin-left: 24px; transition: color 0.3s ease, font-weight 0.3s ease; }
.lista-menu li a:hover { color: #0088FF; font-weight: 900; }

@media (max-width: 768px) {
    header { height: auto; flex-wrap: wrap; padding: 20px; transition: all 0.4s ease; }
    .hamburger { display: flex; }
    .lista-menu { position: static; width: 100%; height: auto; max-height: 0; overflow: hidden; padding: 0; flex-direction: column; justify-content: center; align-items: center; gap: 20px; background-color: transparent; transition: max-height 0.4s ease, padding 0.4s ease; }
    .lista-menu li a { margin: 0; font-size: 22px; }
    .lista-menu.activo { max-height: 300px; padding: 20px 0 10px 0; }
    .hamburger.activo span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.activo span:nth-child(2) { opacity: 0; }
    .hamburger.activo span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}

.hero-section { min-height: 80vh; align-items: center; margin-top: 20px; }
.texto-hero-container { position: relative; z-index: 10; white-space: nowrap; }
.imagen-hero-container { position: relative; z-index: 1; margin-left: -250px; }
h1 { font-weight: 900; text-transform: uppercase; line-height: 0.75; margin: 0; letter-spacing: -0.02em; filter: blur(1.5px); }
.texto-portfolio { color: #ffffff; font-size: clamp(5rem, 10vw, 11rem); display: inline-block; border-bottom: 18px solid #0088FF; padding-bottom: -10px; }
.texto-bigpampo { color: #0088FF; font-size: clamp(5rem, 10vw, 11rem); display: block; margin-top: -2px; margin-left: 20%; }
.marco-foto { width: 100%; max-width: 700px; margin-left: auto; }
.marco-foto img { width: 100%; height: 700px; object-fit: cover; display: block; }

.panel-about { position: fixed; top: 0; right: 0; width: 450px; height: 100vh; background-color: #1F1F1F; z-index: 9999; padding: 40px; box-sizing: border-box; overflow-y: auto; transform: translateX(100%); transition: transform 0.4s ease-in-out; }
.panel-about.activo { transform: translateX(0); }
.cabecera-panel { display: flex; justify-content: space-between; align-items: center; font-size: 24px; margin-bottom: 50px; color: #ffffff; }
.btn-cerrar { background: none; border: none; color: #ffffff; font-size: 24px; font-weight: 300; letter-spacing: -0.11em; cursor: pointer; font-family: inherit; transition: color 0.3s ease, font-weight 0.3s ease; }
.btn-cerrar:hover { color: #0088FF; font-weight: 900; }
.titulo-jordi { font-size: 3rem; font-weight: 900; color: #ffffff; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 20px; filter: blur(2px); border-bottom: 6px solid #0088FF; padding-bottom: -30px; }
.texto-about { font-size: 1rem; color: #cccccc; line-height: 1.5; margin-bottom: 40px; }
.foto-about img { width: 100%; border-radius: 8px; display: block; filter: grayscale(100%); }
@media (max-width: 768px) { .panel-about { width: 100%; padding: 20px; } .titulo-jordi { font-size: 2.5rem; } }

.seccion-proyecto { margin-top: 30px; align-items: flex-start; }
.titulo-proyecto-work { font-size: clamp(2rem, 5vw, 6rem); font-weight: 900; line-height: 0.8; margin-bottom: 40px; filter: blur(2px); position: relative; display: inline-block; }
.titulo-proyecto-work::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 105%; height: 12px; background-color: #0088FF; z-index: -1; }
.nombre-subtitulo { font-size: 2rem; font-weight: 700; margin-bottom: 20px; }
.descripcion-work p { font-size: 1rem; line-height: 1.4; color: #ffffff; margin-bottom: 20px; max-width: 90%; text-align: justify; }

.proyecto-card { margin-bottom: 60px; width: 100%; }
.galeria-extendida { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; margin-top: 0; }
.galeria-extendida.activo { max-height: 2000px; opacity: 1; margin-top: 50px; padding-bottom: 100px; }
.galeria-extendida img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 8px; filter: brightness(0.8); transition: filter 0.3s; }
.galeria-extendida img:hover { filter: brightness(1); }

.contenedor-btn-mas { width: 100%; display: flex; justify-content: center; margin-top: 40px; }
.btn-ver-mas { background: none; border: none; cursor: pointer; color: #ffffff; text-decoration: none; font-size: 32px; font-weight: 300; letter-spacing: -0.11em; transition: all 0.3s ease; font-family: inherit; float: none; margin: auto; }
.btn-ver-mas:hover { color: #0088FF; font-weight: 900; }
.caja-imagen-work img { max-width: 90%; height: auto; object-fit: contain; margin-left: 2rem; }

.modal-contacto { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10000; display: flex; justify-content: center; align-items: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-contacto.activo { opacity: 1; pointer-events: all; }
.overlay-contacto { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(31, 31, 31, 0.85); }
.ventana-contacto { position: relative; width: 100%; max-width: 800px; background-color: #262626; padding: 40px 60px; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.5); transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.modal-contacto.activo .ventana-contacto { transform: scale(1); }
.cabecera-contacto { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.titulo-contacto { font-size: clamp(4rem, 8vw, 7rem); font-weight: 900; color: #ffffff; text-transform: uppercase; letter-spacing: -0.05em; margin-bottom: 40px; filter: blur(1.5px); position: relative; display: inline-block; }
.titulo-contacto::after { content: ""; position: absolute; left: 0; bottom: 15px; width: 105%; height: 10px; background-color: #0088FF; z-index: -1; }
.formulario-contacto { display: flex; flex-direction: column; gap: 20px; }
.formulario-contacto input, .formulario-contacto textarea { width: 100%; padding: 15px 20px; font-size: 1.1rem; font-family: 'Inter', sans-serif; border: none; border-radius: 6px; background-color: #ffffff; color: #1f1f1f; outline: none; resize: none; }
.formulario-contacto input:focus, .formulario-contacto textarea:focus { box-shadow: 0 0 0 4px rgba(0, 136, 255, 0.5); }
.btn-send { background-color: #4A90E2; color: #ffffff; border: none; padding: 16px 60px; font-size: 1.5rem; font-weight: 900; font-family: inherit; letter-spacing: -0.05em; cursor: pointer; border-radius: 8px; align-self: center; margin-top: 10px; transition: transform 0.2s, background-color 0.2s; }
.btn-send:hover { background-color: #0088FF; transform: scale(1.05); }

.redes-sociales { position: absolute; bottom: 130px; left: 20px; display: flex; gap: 25px; z-index: 50; }
.icono-red { display: inline-block; transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease; }
.icono-red img { width: 35px; height: auto; display: block; }
.icono-red:hover { transform: translateY(-8px) scale(1.15); filter: drop-shadow(0px 8px 15px rgba(0, 136, 255, 0.8)); }

/* =========================================
   AÑADIDOS: RESPONSIVE Y SWIPER CARRUSEL
   ========================================= */
/* Index Móvil (Foto entera y texto arriba) */
@media (max-width: 768px) {
    .hero-section { display: flex; flex-direction: column; align-items: center; padding-bottom: 80px; }
    .texto-hero-container { order: 1; margin-left: 0; text-align: center; width: 100%; z-index: 20; }
    .imagen-hero-container { order: 2; margin-left: 0; width: 100%; margin-top: -30px; }
    .marco-foto img { height: auto; max-height: 450px; object-fit: contain; }
    .redes-sociales { position: relative; bottom: auto; left: auto; justify-content: center; margin-top: -180px; padding-bottom: 40px; }
}

/* Work Móvil (Apilado correcto) */
@media (max-width: 768px) {
    .seccion-proyecto { display: flex; flex-direction: column; gap: 30px; }
    .info-proyecto { order: 1; width: 100%; }
    .visual-proyecto { order: 2; width: 100%; }
    .descripcion-work p { max-width: 100%; }
}

/* Swiper Estilos */
.galeria-extendida.swiper {
    width: 100%; max-height: 0; opacity: 0; transition: all 0.8s ease; padding-bottom: 40px; overflow: hidden;
}
.galeria-extendida.swiper.activo {
    max-height: 80vh; opacity: 1; margin-top: 40px;
}
.swiper-slide img {
    width: 100%; height: 60vh; object-fit: cover; border-radius: 8px; cursor: grab;
}
.swiper-slide img:active { cursor: grabbing; }
.swiper-button-next, .swiper-button-prev { color: #ffffff !important; }

@media (max-width: 768px) {
    .swiper-slide img { height: 40vh; }
    .swiper-button-next, .swiper-button-prev { display: none !important; }
}

/* =========================================
   ARREGLOS FINALES (Pegar al final del todo)
   ========================================= */

/* 1. INDEX MÓVIL: Texto adaptado que no se corta y pisa la foto */
@media (max-width: 768px) {
    .texto-portfolio {
        font-size: 14vw !important; /* Se ajusta dinámicamente al ancho del móvil */
        border-bottom-width: 8px !important;
    }
    .texto-bigpampo {
        font-size: 14vw !important;
        margin-left: 0 !important; /* Centra el texto "BIG PAMPO" */
    }
    .texto-hero-container {
        margin-bottom: -50px !important; /* Hace que el texto baje y pise la foto */
        z-index: 20 !important; /* Asegura que el texto quede por encima de la imagen */
    }
    h1 {
        line-height: 0.8 !important; /* Junta un poco las dos palabras */
    }
}

/* 2. WORK MÓVIL: Centrar la foto del proyecto */
@media (max-width: 768px) {
    .caja-imagen-work img {
        margin-left: 0 !important; /* Quita el margen que lo empujaba a la derecha */
        margin: 0 auto !important; /* Lo centra perfectamente */
        display: block;
    }
}

/* 3. CARRUSEL ESCRITORIO: Fotos completas (sin recortar/zoom gigante) */
.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
}
.swiper-slide img {
    width: auto !important; 
    max-width: 100% !important;
    height: auto !important;
    max-height: 65vh !important; /* Límite de altura para que no ocupe toda la pantalla */
    
    /* LA CLAVE MAGICA: 'contain' evita el zoom y muestra la foto entera */
    object-fit: contain !important; 
    border-radius: 8px;
}

/* =========================================
   ARREGLO DEFINITIVO CARRUSEL Y FLECHAS
   ========================================= */
.swiper-slide {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important; /* Obliga a la diapositiva a ocupar el 100% para centrar */
}

.swiper-slide img {
    width: auto !important; 
    max-width: 100% !important;
    height: auto !important;
    max-height: 65vh !important; 
    object-fit: contain !important; 
    border-radius: 8px;
    margin: 0 auto !important; /* Fuerza el centrado absoluto de la foto */
}

/* Transición suave para las flechas base */
.swiper-button-next, .swiper-button-prev { 
    color: #ffffff !important; 
    transition: all 0.3s ease !important;
}

/* Hover de las flechas: Azul BIG PAMPO y un poco más grandes */
.swiper-button-next:hover, .swiper-button-prev:hover {
    color: #0088FF !important;
    transform: scale(1.3) !important; /* Crecen un poquito al pasar el ratón */
}