/* Para activar las fuentes campiranas, asegúrate de incluir este enlace en el de tu HTML: */ :root { /* Nueva Paleta: Fondo Perla y Detalles Oscuros/Dorados */ --fondo-perla: #f8f6f0; /* Color perla base */ --perla-sombra: #ece8df; /* Tono secundario para la textura */ --tarjeta-perla: #ffffff; /* Blanco puro para contraste de tarjetas */ /* Colores de Letra */ --texto-negro: #121212; /* Negro profundo para texto principal */ --texto-gris-oscuro: #333333; /* Gris oscuro para detalles secundarios */ --blanco-hueso: #ffffff; /* Blanco para elementos dentro de fondos oscuros */ /* Variaciones de Dorado y Vaquero */ --dorado-principal: #b8860b; /* Dorado más oscuro para contraste en fondo claro */ --dorado-brillante: #d4af37; /* Dorado cálido */ --dorado-sutil: rgba(184, 134, 11, 0.2); /* FUENTES ESTILO CAMPIRANO / WESTERN */ --fuente-titulo: 'Rye', serif; --fuente-subtitulo: 'Sancreek', serif; --fuente-texto: 'Special Elite', monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } /* FONDO BEIGE CLARO LISO (SIN TEXTURA) */ html, body { background-color: #f5f5f5; /* Color base de respaldo */ background-image: url('img/fondo.jpg'); /* Tu imagen */ background-repeat: repeat; /* Se repite suavemente para cubrir todo */ background-size: auto; /* O usa 'cover' si la imagen es en HD */ background-attachment: fixed; /* El fondo se queda fijo al hacer scroll */ color: var(--texto-negro); font-family: var(--fuente-texto); text-align: center; line-height: 1.6; overflow-x: hidden; font-size: 1.1rem; } .section-padding { padding: 70px 20px; } /* ========================================================== EFECTO FLOTANTE DE ENTRADA (AOS ENHANCEMENT) ========================================================== */ [data-aos] { transition-property: transform, opacity !important; transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important; } [data-aos="fade-up"], [data-aos="zoom-in"] { transform: translateY(40px); opacity: 0; } [data-aos="fade-up"].aos-animate, [data-aos="zoom-in"].aos-animate { transform: translateY(0); opacity: 1; } /* CARRUSEL A ANCHO COMPLETO */ .galeria-hero { width: 100%; position: relative; } .swiper { width: 100%; height: 100vh; max-width: 100%; border-radius: 0; border: none; border-bottom: 4px solid var(--dorado-principal); } .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } .swiper-button-next, .swiper-button-prev { color: var(--dorado-brillante) !important; } .swiper-pagination-bullet-active { background: var(--dorado-brillante) !important; } /* PORTADA */ .hero { /* Capa oscura sobre la foto de portada para mantener legibilidad del texto en blanco */ background: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.8)), url('img/img1.jpg') no-repeat center center/cover; min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 40px 20px; border-bottom: 4px solid var(--dorado-principal); } .hero-content .pre-titulo { font-family: var(--fuente-subtitulo); font-size: 1.3rem; letter-spacing: 3px; text-transform: uppercase; color: var(--dorado-brillante); } .hero-content .nombre { font-family: var(--fuente-titulo); font-size: 4rem; font-weight: 700; text-transform: uppercase; margin: 15px 0 0 0; color: var(--blanco-hueso); /* Texto en blanco sobre la foto de portada */ text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.9); } .hero-content .quinceanera { font-family: var(--fuente-subtitulo); font-size: 2.2rem; margin-bottom: 25px; color: var(--dorado-brillante); } /* RECUADRO PADRES Y PADRINOS */ .cuadro-honor { background: rgba(255, 255, 255, 0.92); border: 2px dashed var(--dorado-principal); border-radius: 12px; padding: 30px 25px; margin: 30px auto; max-width: 500px; backdrop-filter: blur(5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .honor-seccion h4 { font-family: var(--fuente-subtitulo); color: var(--dorado-principal); font-size: 1.3rem; margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .honor-seccion p { font-size: 1.15rem; color: var(--texto-negro); /* Letras en negro en recuadro claro */ font-weight: bold; } .honor-divisor { height: 2px; background: var(--dorado-sutil); margin: 20px 0; } /* Fecha en texto negro con recuadro sutil para máxima legibilidad */ .hero-content .fecha { font-size: 1.4rem; letter-spacing: 3px; border-top: 2px solid var(--dorado-principal); border-bottom: 2px solid var(--dorado-principal); display: inline-block; padding: 8px 20px; margin-top: 15px; color: var(--texto-negro) !important; background-color: rgba(255, 255, 255, 0.85); border-radius: 4px; font-weight: bold; } /* --- SECCIÓN REPRODUCTOR DE MÚSICA --- */ .seccion-musica { padding: 10px 20px 40px 20px; display: flex; justify-content: center; } .reproductor-box { background: var(--tarjeta-perla); max-width: 550px; width: 100%; padding: 20px 30px; border-radius: 50px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); border: 2px solid var(--dorado-principal); display: flex; align-items: center; justify-content: space-between; gap: 15px; } .reproductor-info { display: flex; align-items: center; gap: 15px; text-align: left; } .nota-icono { font-size: 1.8rem; color: var(--dorado-principal); } .reproductor-info h5 { font-family: var(--fuente-texto); font-weight: 700; font-size: 1.1rem; color: var(--texto-negro); margin: 0; } .reproductor-info p { font-family: var(--fuente-texto); font-size: 0.95rem; color: var(--dorado-principal); margin: 4px 0 0 0; } .btn-audio { background: var(--dorado-principal); border: 2px solid var(--dorado-principal); color: var(--blanco-hueso); padding: 10px 22px; cursor: pointer; border-radius: 25px; font-weight: 600; font-size: 0.95rem; font-family: var(--fuente-texto); transition: all 0.3s ease; } .btn-audio:hover { background: var(--texto-negro); border-color: var(--texto-negro); color: var(--blanco-hueso); } /* CUENTA REGRESIVA */ .contador { background: url('foto-contador.jpg') no-repeat center center/cover; position: relative; padding: 0; } .contador-overlay { background: rgba(20, 20, 20, 0.85); /* Fondo oscuro en overlay para asegurar visibilidad del reloj */ padding: 70px 20px; width: 100%; height: 100%; } .contador h2 { font-family: var(--fuente-titulo); font-size: 2.2rem; color: var(--dorado-brillante); margin-bottom: 25px; } .reloj { display: flex; justify-content: center; gap: 12px; } .tiempo-box { background: var(--tarjeta-perla); padding: 18px 12px; border-radius: 10px; min-width: 80px; border: 2px solid var(--dorado-principal); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); } .tiempo-box span { font-size: 2rem; font-weight: 600; color: var(--texto-negro); /* Números en negro */ } .tiempo-box p { font-size: 0.85rem; color: var(--dorado-principal); text-transform: uppercase; font-weight: bold; } /* TARJETAS CON IMÁGENES (UBICACIONES) */ .ubicaciones { display: flex; flex-direction: column; gap: 35px; align-items: center; } .card { background: var(--tarjeta-perla); border-radius: 15px; width: 100%; max-width: 380px; overflow: hidden; border: 2px solid var(--dorado-sutil); box-shadow: 0 8px 20px rgba(0,0,0,0.06); } .card-img-container { width: 100%; height: 200px; } .card-img { width: 100%; height: 100%; object-fit: cover; } .card-body { padding: 25px 20px; } .card-body h3 { font-family: var(--fuente-titulo); color: var(--dorado-principal); margin-bottom: 12px; font-size: 1.6rem; } .card-body p { font-size: 1.05rem; color: var(--texto-negro); /* Texto descriptivo en negro */ margin-bottom: 5px; } /* CÓDIGO DE VESTIMENTA */ .dresscode-box { background: var(--tarjeta-perla); border: 2px dashed var(--dorado-principal); border-radius: 20px; padding: 45px 25px; max-width: 500px; margin: 0 auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); } .icon-dresscode { margin-bottom: 15px; display: flex; justify-content: center; align-items: center; font-size: 3.5rem; color: var(--dorado-principal); } .img-dresscode { width: 75px; height: auto; object-fit: contain; filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.2)); } .dresscode h2 { font-family: var(--fuente-titulo); color: var(--texto-negro); font-size: 2rem; } .estilo-tag { font-family: var(--fuente-subtitulo); color: var(--dorado-principal); font-weight: 600; letter-spacing: 2px; font-size: 1.5rem; margin: 15px 0; } .dresscode-box p { font-size: 1.2rem; color: var(--texto-gris-oscuro); } /* SECCIÓN LLUVIA DE SOBRES */ .lluvia-sobres { background-color: transparent; } .sobres-box { background: var(--tarjeta-perla); border: 2px dashed var(--dorado-principal); border-radius: 20px; padding: 45px 25px; max-width: 500px; margin: 0 auto; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); } .icon-sobre { margin-bottom: 15px; font-size: 3.5rem; color: var(--dorado-principal); } .sobres-box h2 { font-family: var(--fuente-titulo); color: var(--texto-negro); font-size: 2rem; margin-bottom: 15px; } .sobres-box p { font-size: 1.15rem; color: var(--texto-gris-oscuro); line-height: 1.7; } /* CONFIRMACIÓN Y BOTONES */ .confirmacion h2 { font-family: var(--fuente-titulo); color: var(--texto-negro); font-size: 2.4rem; margin-bottom: 15px; } .btn { display: inline-block; padding: 14px 35px; text-decoration: none; border-radius: 30px; font-weight: 600; text-transform: uppercase; font-size: 0.9rem; font-family: var(--fuente-texto); letter-spacing: 1px; transition: all 0.3s ease; margin-top: 15px; } .btn-amarillo { background-color: var(--dorado-principal); color: var(--blanco-hueso); font-weight: bold; box-shadow: 0 4px 12px rgba(184, 134, 11, 0.3); } .btn-amarillo:hover { background-color: var(--texto-negro); color: var(--blanco-hueso); } .btn-rosa { background-color: transparent; color: var(--texto-negro); border: 2px solid var(--dorado-principal); } .btn-rosa:hover { background-color: var(--dorado-principal); color: var(--blanco-hueso); } /* GALERÍA EXTRA */ .galeria-extra { text-align: center; max-width: 1200px; margin: 0 auto; padding: 40px 20px; } .galeria-grid { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 25px; } .galeria-item { flex: 1 1 300px; max-width: 360px; display: flex; justify-content: center; } .img-completa { width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--dorado-sutil); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease; } .img-completa:hover { transform: scale(1.03); } /* PIE DE PÁGINA */ .footer-creditos { background-color: var(--texto-negro); /* Mantener footer en negro para cierre de página */ color: var(--blanco-hueso); text-align: center; padding: 20px; font-size: 0.85rem; display: flex; flex-direction: column; align-items: center; gap: 8px; } .footer-creditos p { margin: 0; } .link-autor { color: var(--dorado-brillante); font-size: 1.2rem; transition: color 0.3s ease, transform 0.3s ease; } .link-autor:hover { color: var(--blanco-hueso); transform: scale(1.2); } /* AJUSTES RESPONSIVOS */ @media (max-width: 768px) { .swiper { height: 45vh; } .hero-content .nombre { font-size: 2.8rem; } }