/* ==========================================
   PALETA Y VARIABLES
   ========================================== */
:root {
    --color-carpet: #cece01;   
    --color-accent: #112eeb;   
    --color-dark: #1A1A1A; 
    --color-white: #FAFAFA;    
    --font-main: 'Montserrat', sans-serif;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden; 
}

body {
    font-family: var(--font-main);
    color: var(--color-dark);
    line-height: 1.6;
    overflow-x: hidden; 
    background-image: url('papelarrugado.png'); 
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* Animaciones */
.animation-fade-in {
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.animation-fade-in.animated {
    opacity: 1;
    transform: translateY(0);
}

.main-carpet {
    max-width: 1100px; 
    margin: 0 auto;    
    background-color: rgba(250, 250, 250, 0.85); 
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
}

.section { padding: 80px 50px; }
.text-box-rounded { border-radius: 20px; }
img, iframe, video { border-radius: 0 !important; }

/* ==========================================
   TIPOGRAFÍA Y ALINEACIÓN DE TEXTOS
   ========================================== */

.description-container {
    width: 100%;
    max-width: 850px;
    margin: 0 auto 40px auto; 
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.project-description {
    font-size: 1.05rem;
    line-height: 1.8; 
    font-weight: 500;
    text-align: center;
    margin: 0; 
}

.section-title {
    font-size: 2.5rem;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: -1px;
}

.white-title { color: var(--color-white); }
.dark-title { color: var(--color-dark); }
.accent-title { color: var(--color-accent); }
.text-white { color: rgba(255,255,255,0.9); }
.text-center { text-align: center; }

/* MENÚ */
.navbar { padding: 25px 50px; background-color: transparent; }
.nav-links { list-style: none; display: flex; justify-content: center; gap: 40px; align-items: center; }
.nav-links a { text-decoration: none; color: var(--color-accent); font-weight: 900; font-size: 1rem; text-transform: uppercase; transition: all 0.3s ease; }
.nav-links a:hover { color: var(--color-carpet); transform: translateY(-3px); }

/* SOBRE MÍ - Ajustes optimizados */
.about-section { 
    position: relative; 
    overflow: hidden; 
    background-color: var(--color-carpet); 
    padding: 50px 40px; 
}
.massive-bg-text { 
    position: absolute; 
    top: 60%; 
    left: 60%; 
    transform: translate(-50%, -50%); 
    font-weight: 900; 
    font-size: 15rem; 
    line-height: 0.8; 
    color: var(--color-white); 
    opacity: 0.20; 
    z-index: 1; 
    text-transform: uppercase; 
    letter-spacing: -10px; 
    pointer-events: none;
    white-space: nowrap;
}
.about-container { display: flex; gap: 50px; align-items: center; position: relative; z-index: 2; }
.profile-craft-frame { flex: 1; padding: 15px 15px 40px 15px; background-color: white; box-shadow: 5px 15px 25px rgba(0,0,0,0.15); transform: rotate(-3deg); }
.profile-craft-frame img { width: 100%; height: 400px; object-fit: cover; }
.about-text { flex: 1.5; }

.career-title { font-size: 0.9rem; text-transform: uppercase; color: var(--color-dark); font-weight: 900; margin-bottom: 10px; letter-spacing: 1px;}
.dev-name { font-weight: 900; font-size: 3.5rem; color: var(--color-accent); line-height: 1; margin-bottom: 20px;}
.bio-paragraph { font-size: 1.05rem; line-height: 1.8; color: var(--color-dark); text-align: left; font-weight: 500; }

/* SEPARADOR */
.wavy-divider { 
    width: 100%; 
    padding: 20px 0; 
    background-color: transparent; 
    display: flex;
    justify-content: center;
    align-items: center; 
    min-height: 80px; 
}
.wavy-divider svg { width: 100%; height: 100px; }

/* PROYECTOS GLOBALES */
.accent-bg-block { background-color: var(--color-accent); padding: 50px; border: 2px solid var(--color-dark); }
.mustard-bg-block { background-color: var(--color-carpet); padding: 50px; border: 2px solid var(--color-dark); }
.transparent-block { background-color: transparent; padding: 50px 0; }
.carrusel-block { background-color: rgba(255,255,255,0.7); border: 2px solid var(--color-dark); padding: 50px 30px; }

/* GRILLAS FOTOS */
.grid-photo-2x2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.grid-photo-2x2 img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; cursor: pointer; transition: 0.3s; border: 2px solid var(--color-dark); }
.grid-photo-2x2 img:hover { transform: scale(1.05) rotate(2deg); box-shadow: 12px 12px 0px var(--color-carpet); z-index: 10; position: relative;}

/* ==========================================
   CARRUSEL (Corregido y Optimizado)
   ========================================== */
.carousel-container {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 30px;
    padding: 20px 10px 40px 10px;
    align-items: center; 
    width: 100%;
}
.carousel-container::-webkit-scrollbar { height: 12px; }
.carousel-container::-webkit-scrollbar-thumb { background: var(--color-accent); border-radius: 10px; }
.carousel-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); border-radius: 10px; }

.carousel-container img {
    flex: 0 0 auto; 
    max-height: 450px; 
    width: auto; 
    display: block;
    object-fit: contain; 
    scroll-snap-align: center;
    border: 2px solid var(--color-dark);
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.carousel-container img:hover { 
    transform: scale(1.02); 
    box-shadow: 6px 6px 0px var(--color-accent); 
}

/* BRANDING */
.branding-section-pro { background-color: rgba(255,255,255,0.4); padding: 60px 40px; border: 2px solid var(--color-dark); }
.grid-logos-pro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin: 40px 0; }
.grid-branding-2-pro { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; }

.branding-sticker { 
    background-color: var(--color-white); 
    padding: 40px 30px; 
    border: 2px solid var(--color-dark); 
    box-shadow: 8px 8px 0px var(--color-accent); 
    transition: all 0.4s; 
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: 30px; 
    height: 100%;
}
.branding-sticker:hover { transform: scale(1.03) rotate(-1deg); box-shadow: 12px 12px 0px var(--color-carpet); z-index:10; }
.branding-sticker img { width: 100%; height: 200px; object-fit: contain; margin: 0 auto; }

.sticker-text { font-size: 0.95rem; font-weight: 600; line-height: 1.8; color: var(--color-dark); text-align: center; margin: 0 auto; width: 100%; }

/* ILUSTRACIÓN DIGITAL */
.single-image-wrapper { width: 100%; max-width: 900px; margin: 0 auto; text-align: center; }
.full-width-img { width: 100%; height: auto; border: 3px solid var(--color-dark); cursor: pointer; transition: transform 0.3s; box-shadow: 10px 10px 0px var(--color-accent); }
.full-width-img:hover { transform: scale(1.02); box-shadow: 12px 12px 0px var(--color-carpet); }

/* HERRAMIENTAS */
.tools-grid-pro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 50px; }
.tool-card { background-color: var(--color-white); display: flex; flex-direction: column; align-items: center; padding: 30px; border: 2px solid var(--color-dark); box-shadow: 6px 6px 0px var(--color-dark); transition: all 0.4s; }
.tool-card:hover { transform: scale(1.1) rotate(3deg); box-shadow: 10px 10px 0px var(--color-accent); z-index:10;}
.tool-card img { width: 80px; height: 80px; object-fit: contain; margin-bottom: 15px; }
.tool-card span { font-weight: 900; color: var(--color-accent); text-transform: uppercase; }

.areas-domino-pro { background-color: var(--color-dark); padding: 50px; color: var(--color-white); text-align: center; position: relative; border: 4px solid var(--color-carpet); box-shadow: 15px 15px 0px var(--color-accent); min-height: 250px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.trayectoria-header h3 { background-color: var(--color-carpet); color: var(--color-dark); display: inline-block; padding: 5px 25px; font-weight: 900; font-size: 1.5rem; margin-bottom: 25px; transform: rotate(-2deg); text-align: center;}
.areas-domino-pro p { font-weight: 700; font-size: 1.2rem; letter-spacing: 1px; line-height: 1.8; color: var(--color-white); text-align: center; margin: 0 auto;}

/* CONTACTO */
.contact-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } 

.copy-btn { background-color: var(--color-white); border: 2px solid var(--color-dark); padding: 20px; display: flex; align-items: center; justify-content: center; gap: 15px; transition: 0.3s; box-shadow: 6px 6px 0px var(--color-dark); text-decoration: none; color: var(--color-dark); border-radius: 20px; cursor: pointer; }
.copy-btn:hover { transform: translateY(-5px); box-shadow: 10px 10px 0px var(--color-carpet); }
.btn-info-text { display: flex; flex-direction: column; align-items: flex-start; }
.btn-info-text .label { font-size: 0.75rem; text-transform: uppercase; color: #666; font-weight: 700; }
.btn-info-text .value { font-size: 1rem; font-weight: 900; }

/* MODAL Y EXTRAS */
.floating-back-btn { position: fixed; bottom: 20px; right: 20px; background-color: var(--color-carpet); padding: 10px 15px; font-weight: 900; z-index: 1500; box-shadow: 4px 4px 0px var(--color-dark); border-radius: 10px; text-decoration: none; color: var(--color-dark); }
.modal { display: none; position: fixed; z-index: 3000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(26,26,26,0.95); cursor: zoom-out; }
.modal-content { margin: auto; display: block; max-width: 85%; max-height: 85vh; margin-top: 3%; box-shadow: 15px 15px 0px var(--color-carpet); object-fit: contain; }
.close-modal { position: absolute; top: 20px; right: 40px; color: white; font-size: 40px; font-weight: bold; cursor: pointer; }

#toast { visibility: hidden; min-width: 280px; background-color: var(--color-dark); color: #ffffff; text-align: center; padding: 16px; position: fixed; z-index: 4000; left: 50%; bottom: 30px; transform: translateX(-50%); font-weight: 900; opacity: 0; transition: 0.4s; border-radius: 10px; }
#toast.show { visibility: visible; opacity: 1; bottom: 40px; }

/* RESPONSIVO */
@media (max-width: 900px) {
    * { overflow-x: hidden; }
    .main-carpet { border: none; }
    .section { padding: 40px 20px; }
    .about-container { flex-direction: column; text-align: center; gap: 30px; }
    .profile-craft-frame { transform: rotate(0deg); width: 80%; }
    .dev-name { font-size: 2.2rem; }
    .massive-bg-text { font-size: 5rem; top: 0; right: 0; opacity: 0.1; }
    
    .bio-paragraph { text-align: center; } 
    
    .navbar { padding: 15px 20px; }
    .nav-links { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .nav-links a { font-size: 0.8rem; }
    .grid-photo-2x2, .grid-logos-pro, .grid-branding-2-pro, .contact-grid-3, .contact-grid-2, .tools-grid-pro { grid-template-columns: 1fr; gap: 20px; }
    .project-block, .carrusel-block { padding: 25px; height: auto; min-height: auto; }
    
    .carousel-container img { height: 350px !important; } 
    
    .section-title { font-size: 1.6rem; }
    .mobile-friendly-text { font-size: 0.9rem; line-height: 1.8; word-wrap: break-word; overflow: visible !important; }
    .branding-sticker { padding: 30px 20px; gap: 20px;}
    .tools-grid-pro { gap: 15px; }
    .areas-domino-pro { padding: 30px 15px; }
    .trayectoria-header h3 { font-size: 1rem; }
    .copy-btn { padding: 15px; gap: 10px; }
    .btn-info-text .value { font-size: 0.8rem; }
}