/* ========================= GOOGLE FONT ========================= */ /* IMPORTA ESTO EN TU HTML DENTRO DEL /* ========================= SECCIÓN PROYECTOS ========================= */ .proyectos{ width:100%; padding:110px 8%; background:#01001a; position:relative; overflow:hidden; } /* ========================= EFECTOS DE FONDO ========================= */ .proyectos::before{ content:""; position:absolute; width:700px; height:700px; background:radial-gradient( circle, rgba(255,255,255,0.04), transparent 70% ); top:-300px; right:-250px; pointer-events:none; } .proyectos::after{ content:""; position:absolute; width:600px; height:600px; background:radial-gradient( circle, rgba(255,255,255,0.03), transparent 70% ); bottom:-300px; left:-200px; pointer-events:none; } /* ========================= HEADER ========================= */ .proyectos-header{ text-align:center; margin-bottom:90px; position:relative; z-index:2; } /* ========================= TITULO CULTURAL ELEGANTE ========================= */ .proyectos-header h2{ font-family:"Cormorant Garamond", serif; font-size:5rem; font-weight:300; letter-spacing:7px; color:#f8fafc; margin-bottom:24px; text-transform:uppercase; line-height:1.1; text-shadow: 0 2px 15px rgba(0,0,0,0.3); } /* Línea decorativa */ .proyectos-header h2::after{ content:""; display:block; width:130px; height:1px; margin:28px auto 0; background:linear-gradient( to right, transparent, rgba(255,255,255,0.85), transparent ); } /* ========================= SUBTITULO ========================= */ .proyectos-header p{ max-width:850px; margin:auto; font-family:"Cormorant Garamond", serif; font-size:1.45rem; font-weight:300; line-height:2; letter-spacing:0.6px; color:#d6dde8; font-style:italic; text-shadow: 0 1px 10px rgba(0,0,0,0.25); } /* ========================= GRID ========================= */ .proyectos-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:45px; position:relative; z-index:2; } /* ========================= CARD ========================= */ .proyecto-card{ background:rgba(255,255,255,0.04); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.08); overflow:hidden; border-radius:30px; transition:0.5s ease; position:relative; box-shadow: 0 10px 35px rgba(0,0,0,0.35), inset 0 1px 1px rgba(255,255,255,0.05); } .proyecto-card:hover{ transform:translateY(-12px); box-shadow: 0 25px 60px rgba(0,0,0,0.55), 0 0 30px rgba(255,255,255,0.05); } /* Línea superior elegante */ .proyecto-card::before{ content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:linear-gradient( to right, transparent, rgba(255,255,255,0.5), transparent ); } /* ========================= IMAGEN ========================= */ .proyecto-img{ width:100%; height:270px; overflow:hidden; position:relative; } .proyecto-img::after{ content:""; position:absolute; inset:0; background:linear-gradient( to top, rgba(17,24,39,0.95), transparent 50% ); } .proyecto-img img{ width:100%; height:100%; object-fit:cover; transition:0.8s ease; } .proyecto-card:hover img{ transform:scale(1.08); } /* ========================= CONTENIDO ========================= */ .proyecto-content{ padding:40px; } /* ========================= CATEGORIA ========================= */ .categoria{ font-size:0.82rem; text-transform:uppercase; letter-spacing:5px; color:#94a3b8; margin-bottom:18px; font-weight:600; } /* ========================= TITULO CARD ========================= */ .proyecto-content h3{ font-size:2.2rem; margin-bottom:20px; color:#f8fafc; font-weight:400; line-height:1.2; } /* ========================= TEXTO CARD ========================= */ .proyecto-content p{ font-size:1.08rem; line-height:1.9; color:#d1d5db; margin-bottom:34px; font-weight:300; } /* ========================= LINK ========================= */ .leer-mas{ text-decoration:none; color:#f1f5f9; font-size:0.92rem; letter-spacing:3px; text-transform:uppercase; font-weight:600; position:relative; transition:0.4s ease; display:inline-block; } .leer-mas::after{ content:""; width:0%; height:1px; background:#ffffff; position:absolute; left:0; bottom:-8px; transition:0.4s ease; } .leer-mas:hover{ color:#ffffff; transform:translateX(6px); } .leer-mas:hover::after{ width:100%; } /* ========================= ANIMACIONES ========================= */ .hidden{ opacity:0; transform:translateY(60px); transition: opacity 1s ease, transform 1s ease; } .show{ opacity:1; transform:translateY(0); } /* ========================= RESPONSIVE ========================= */ @media(max-width:1100px){ .proyectos-header h2{ font-size:4.2rem; } } @media(max-width:992px){ .proyectos{ padding:90px 7%; } .proyectos-header h2{ font-size:3.6rem; } .proyectos-header p{ font-size:1.25rem; } } @media(max-width:768px){ .proyectos{ padding:80px 6%; } .proyectos-header{ margin-bottom:70px; } .proyectos-header h2{ font-size:2.9rem; letter-spacing:4px; } .proyectos-header p{ font-size:1.1rem; line-height:1.8; } .proyecto-content{ padding:32px; } .proyecto-content h3{ font-size:1.8rem; } } @media(max-width:480px){ .proyectos-grid{ grid-template-columns:1fr; } .proyecto-img{ height:230px; } .proyectos-header h2{ font-size:2.3rem; letter-spacing:3px; } .proyectos-header p{ font-size:1rem; } }