/* Para activar las fuentes campiranas, asegúrate de incluir este enlace en el de tu HTML: */ :root { --negro-profundo: #111111; --negro-suave: #1a1a1a; --blanco-hueso: #ffffff; /* Letras completamente blancas */ --gris-suave: #e0e0e0; /* Para textos secundarios legibles */ /* Variaciones de Dorado Elegante y Vaquero */ --dorado-principal: #d4af37; --dorado-brillante: #ffd700; --dorado-sutil: rgba(212, 175, 55, 0.3); /* FUENTES ESTILO CAMPIRANO / WESTERN */ --fuente-titulo: 'Rye', serif; /* Estilo cartel del viejo oeste para nombres y títulos principales */ --fuente-subtitulo: 'Sancreek', serif; /* Estilo campirano alternativo */ --fuente-texto: 'Special Elite', monospace; /* Estilo máquina de escribir antigua, muy rústico y campirano */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--fuente-texto); background-color: var(--negro-profundo); color: var(--blanco-hueso); text-align: center; line-height: 1.6; overflow-x: hidden; font-size: 1.1rem; /* Aumento general del texto base */ } .section-padding { padding: 70px 20px; } /* 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); /* Detalle en dorado */ } .swiper-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } /* Personalización de colores para Swiper (Detalles en Dorado) */ .swiper-button-next, .swiper-button-prev { color: var(--dorado-principal) !important; } .swiper-pagination-bullet-active { background: var(--dorado-principal) !important; } /* PORTADA */ .hero { background: linear-gradient(rgba(17, 17, 17, 0.7), rgba(17, 17, 17, 0.85)), url('foto-portada.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); /* Detalle en dorado */ } .hero-content .pre-titulo { font-family: var(--fuente-subtitulo); font-size: 1.3rem; letter-spacing: 3px; text-transform: uppercase; color: var(--dorado-brillante); /* Detalle dorado */ } .hero-content .nombre { font-family: var(--fuente-titulo); font-size: 4rem; /* Más imponente */ font-weight: 700; text-transform: uppercase; margin: 15px 0 0 0; color: var(--blanco-hueso); /* Letras en blanco */ text-shadow: 2px 2px 4px var(--dorado-principal); /* Sombra dorada campirana */ } .hero-content .quinceanera { font-family: var(--fuente-subtitulo); font-size: 2.2rem; margin-bottom: 25px; color: var(--dorado-principal); /* Detalle en dorado */ } /* RECUADRO PADRES Y PADRINOS (TEXTO MÁS GRANDE) */ .cuadro-honor { background: rgba(26, 26, 26, 0.9); border: 2px dashed var(--dorado-principal); /* Detalle en dorado */ border-radius: 12px; padding: 30px 25px; /* Más espaciado interno */ margin: 30px auto; max-width: 500px; /* Un poco más ancho para albergar letra grande */ backdrop-filter: blur(5px); box-shadow: 0 0 15px var(--dorado-sutil); } .honor-seccion h4 { font-family: var(--fuente-subtitulo); color: var(--dorado-brillante); /* Título en dorado */ font-size: 1.3rem; /* Texto más grande */ margin-bottom: 8px; text-transform: uppercase; letter-spacing: 1px; } .honor-seccion p { font-size: 1.15rem; /* Texto más grande */ color: var(--blanco-hueso); /* Letras en blanco */ font-weight: bold; } .honor-divisor { height: 2px; background: var(--dorado-sutil); margin: 20px 0; } .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(--blanco-hueso); } /* --- SECCIÓN REPRODUCTOR DE MÚSICA (TEXTO MÁS GRANDE) --- */ .seccion-musica { background-color: var(--negro-profundo); padding: 10px 20px 40px 20px; display: flex; justify-content: center; } .reproductor-box { background: var(--negro-suave); max-width: 550px; width: 100%; padding: 20px 30px; /* Más grande */ border-radius: 50px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); border: 2px solid var(--dorado-principal); /* Borde dorado */ 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-brillante); } .reproductor-info h5 { font-family: var(--fuente-texto); font-weight: 700; font-size: 1.1rem; /* Texto más grande */ color: var(--blanco-hueso); /* Letras en blanco */ margin: 0; } .reproductor-info p { font-family: var(--fuente-texto); font-size: 0.95rem; /* Texto más grande */ color: var(--dorado-principal); /* Detalle en dorado */ margin: 4px 0 0 0; } .btn-audio { background: transparent; border: 2px solid var(--dorado-principal); color: var(--dorado-principal); 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(--dorado-principal); color: var(--negro-profundo); } /* CUENTA REGRESIVA */ .contador { background: url('foto-contador.jpg') no-repeat center center/cover; position: relative; padding: 0; } .contador-overlay { background: rgba(17, 17, 17, 0.82); 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: rgba(37, 37, 37, 0.9); padding: 18px 12px; border-radius: 10px; min-width: 80px; border: 2px solid var(--dorado-principal); /* Detalle dorado */ } .tiempo-box span { font-size: 2rem; font-weight: 600; color: var(--blanco-hueso); } .tiempo-box p { font-size: 0.85rem; color: var(--dorado-brillante); text-transform: uppercase; } /* TARJETAS CON IMÁGENES (UBICACIONES) */ .ubicaciones { display: flex; flex-direction: column; gap: 35px; align-items: center; } .card { background: var(--negro-suave); border-radius: 15px; width: 100%; max-width: 380px; overflow: hidden; border: 2px solid #333; box-shadow: 0 8px 20px rgba(0,0,0,0.6); } .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); /* Título en dorado */ margin-bottom: 12px; font-size: 1.6rem; } .card-body p { font-size: 1.05rem; color: var(--blanco-hueso); /* Letras en blanco */ margin-bottom: 5px; } /* CÓDIGO DE VESTIMENTA (TEXTO MÁS GRANDE) */ .dresscode-box { background: var(--negro-suave); border: 2px dashed var(--dorado-principal); /* Borde dorado */ border-radius: 20px; padding: 45px 25px; max-width: 500px; margin: 0 auto; box-shadow: 0 0 15px var(--dorado-sutil); } .icon-dresscode { margin-bottom: 15px; display: flex; justify-content: center; align-items: center; font-size: 3.5rem; color: var(--dorado-brillante); } .img-dresscode { width: 75px; /* Ligeramente más grande */ height: auto; object-fit: contain; filter: drop-shadow(0px 0px 5px var(--dorado-principal)); /* Le da un brillo dorado a tu imagen */ } .dresscode h2 { font-family: var(--fuente-titulo); color: var(--blanco-hueso); font-size: 2rem; } .estilo-tag { font-family: var(--fuente-subtitulo); color: var(--dorado-brillante); /* Tag dorado */ font-weight: 600; letter-spacing: 2px; font-size: 1.5rem; /* Texto bastante más grande e imponente */ margin: 15px 0; } .dresscode-box p { font-size: 1.2rem; /* Texto descriptivo más grande */ color: var(--blanco-hueso); } /* CONFIRMACIÓN Y BOTONES */ .confirmacion h2 { font-family: var(--fuente-titulo); color: var(--blanco-hueso); /* Título en blanco */ font-size: 2.4rem; margin-bottom: 15px; text-shadow: 1px 1px 3px var(--dorado-principal); } .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; } /* Ambos botones adaptados a la nueva paleta dorada */ .btn-amarillo { background-color: var(--dorado-brillante); color: var(--negro-profundo); font-weight: bold; } .btn-rosa { background-color: transparent; color: var(--blanco-hueso); border: 2px solid var(--dorado-principal); } .btn-rosa:hover { background-color: var(--dorado-principal); color: var(--negro-profundo); } /* AJUSTES RESPONSIVOS */ @media (max-width: 768px) { .swiper { height: 45vh; } .hero-content .nombre { font-size: 2.8rem; } }