/* Importar la fuente (Poppins) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700;800;900&display=swap');
body {
font-family: 'Poppins', sans-serif;
background-color: #111827; /* bg-gray-900 */
scroll-behavior: smooth;
}
/* --- ESTILO DEL HERO (COMO PAGINA4) --- */
.hero-section {
position: relative;
overflow: hidden;
background: linear-gradient(to bottom right, #0e1624, #071d35);
border-bottom: 4px solid #facc15; /* Borde de acento amarillo */
}
/* --- INICIO: CORRECCIÓN DE CLIC (Z-INDEX) --- */
/* PORQUÉ: Esto pone el contenido (títulos, botón)
por encima de la animación de nodos (que tiene z-index: 1). */
.hero-content {
position: relative;
z-index: 2;
}
/* --- FIN: CORRECCIÓN DE CLIC (Z-INDEX) --- */
/* --- BOTÓN DE ACCIÓN PRINCIPAL --- */
/* --- BOTÓN DE ACCIÓN PRINCIPAL (Estilo pagina5 con Animación) --- */
/* ¡CORREGIDO! Ahora aplica a AMBOS botones */
.cta-principal, .cta-button {
/* Color gradiente (como en pagina5) */
background-image: linear-gradient(to right, #fbbf24, #f97316); /* amber-400 a orange-600 */
color: #111827;
transition: all 0.2s ease-in-out;
/* Animación de pulso (de pagina5) */
animation: pulse-orange 2s infinite;
/* --- Añadido para centrar (de pagina5) --- */
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
-webkit-user-select: none; /* Evita selección naranja */
user-select: none;
}
.cta-principal:hover, .cta-button:hover {
/* Gradiente más claro en hover */
background-image: linear-gradient(to right, #facc15, #f59e0b); /* amber-300 a amber-500 */
transform: translateY(-3px) scale(1.03);
}
.cta-principal:active, .cta-button:active {
transform: translateY(1px);
}
/* --- Animación de pulso (de pagina5/lanzamiento.css) --- */
@keyframes pulse-orange {
0% {
transform: scale(0.98);
box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.7);
}
70% {
transform: scale(1);
box-shadow: 0 0 0 15px rgba(249, 115, 22, 0);
}
100% {
transform: scale(0.98);
box-shadow: 0 0 0 0 rgba(249, 115, 22, 0);
}
}
/* --- SECCIÓN 2: AGITAR EL DOLOR --- */
.dolor-card {
background-color: #1f2937; /* bg-gray-800 */
padding: 2rem;
border-radius: 0.5rem;
border-bottom: 4px solid #ef4444; /* Borde de dolor (Rojo) */
transition: transform 0.3s ease;
}
.dolor-card:hover {
transform: translateY(-5px);
}
.dolor-icon {
font-size: 2.5rem;
color: #ef4444; /* Rojo */
margin-bottom: 1.5rem;
}
/* Resaltador de texto (como en image_3be818.png) */
.highlight-yellow {
display: inline;
background-color: #facc15;
color: #111827;
padding: 0 0.5rem;
line-height: 1.5;
}
/* --- SECCIÓN 4: DEMOLICIÓN DE OBJECIONES (LO NUEVO) --- */
.demo-card, .demo-card-dark {
display: grid;
/* NOTA: Esta cuadrícula ya se controla con clases de Tailwind
en el HTML (grid grid-cols-1 md:grid-cols-2),
así que estas clases de CSS personalizadas no son necesarias
para el layout, pero las mantendré por si las usas para algo más.
*/
/* grid-template-columns: 1fr 1fr; */ /* Comentado: Dejar que Tailwind controle esto */
gap: 2.5rem;
align-items: center;
max-w-6xl mx-auto mb-16;
}
.demo-card-dark {
background-color: #1f2937; /* bg-gray-800 */
padding: 3rem;
border-radius: 0.75rem;
}
.demo-texto {
text-align: left;
position: relative;
/* Cambiado en HTML con:
Móvil: text-center p-0
Desktop: md:text-left md:pl-12
*/
padding-left: 3rem; /* Esta regla ahora se controla mejor en el HTML */
}
.demo-num {
position: absolute;
left: 0;
top: 0;
font-size: 3rem;
font-weight: 900;
color: #facc15;
opacity: 0.3;
}
.demo-video {
width: 100%;
border-radius: 0.5rem;
overflow: hidden;
}
.video-placeholder, .video-placeholder-principal {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 1rem;
color: #4b5563; /* text-gray-600 */
font-weight: bold;
font-size: 1.25rem;
border: 2px dashed #374151; /* border-gray-700 */
}
.video-placeholder-principal {
border: 3px dashed #facc15; /* Borde amarillo para destacarlo */
color: #facc15;
animation: pulse-glow-demo 3s infinite alternate;
}
/* Animación para la demo principal */
@keyframes pulse-glow-demo {
from {
box-shadow: 0 0 10px rgba(250, 204, 21, 0.1);
}
to {
box-shadow: 0 0 25px rgba(250, 204, 21, 0.4);
}
}
/* BLOQUE ELIMINADO:
Este media query ya no es necesario, porque
las clases de Tailwind (md:grid-cols-2, md:order-1, etc.)
ya hacen este trabajo de forma más limpia.
*/
/*
@media (max-width: 768px) {
.demo-card, .demo-card-dark {
grid-template-columns: 1fr;
}
.demo-card-dark .demo-video {
order: -1;
}
.demo-texto {
padding-left: 0;
text-align: center;
}
.demo-num {
position: static;
font-size: 2.5rem;
margin-bottom: 1rem;
}
}
*/
/* --- SECCIÓN DE PRECIO (CTA FINAL) --- */
.price-box {
border-color: #facc15; /* Borde amarillo (como pagina5) */
}
.guarantee-box-dark {
background-color: #1f2937; /* gray-800 */
border: 2px dashed #f59e0b; /* amber-500 */
}
.underline {
color:#ef4444;
}
.fade-in-section {
background: ghostwhite;
}
.negro {
color:#000;
}
.blanco {
color:#ffffff;
}
.amarillo {
color:rgb(250 204 21);
}
.bg-white1 {
background-color:#1f2937;
}
.plomo{
color: #939598;
}
/* --- ESTILO PARA EL BONO (DE image_9001b8.png) --- */
.bonus-box {
background-color: #fffbeb; /* amber-50 (Fondo amarillo pálido) */
border: 2px dashed #f59e0b; /* amber-500 (Borde punteado naranja/amarillo) */
/* El 'text-gray-800' que está en tu HTML ya pone el texto oscuro */
}
/* Estilo para las tarjetas de comparación */
.comparison-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.comparison-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}
.fondo {
background-color: rgb(156 163 175);
}
.talla {
font-size: 0.8rem;
}
.talla1 {
font-size: 0.9rem;
}
.texto_blanco {
color:rgb(156 163 175);
}
.highlight-yellow {
background-color: #facc15; /* Amarillo de Tailwind */
}
.invaluable {
background-color: #fb4322; /* Amarillo de Tailwind */
}
.highlight {
background-color: rgb(40, 133, 74); /* Amarillo de Tailwind */
}
/* --- NUEVO: Estilos para cuando el reproductor está en pantalla completa --- */
#player-container:fullscreen #youtube-player {
/* Hacemos el video AÚN MÁS ALTO para asegurarnos de ocultar todo */
height: 140%;
}
/* Opcional: Ocultar el cursor cuando no se mueve en pantalla completa */
#player-container:fullscreen {
cursor: none;
}
#player-container {
width: 100%; max-width: 900px; margin: 0 auto;
aspect-ratio: 16/9; position: relative; background-color: #000;
overflow: hidden; border-radius: 8px; box-shadow: 6px 6px 0px #212c3e;
}
#youtube-player {
position: absolute; top: 50%; left: 50%;
width: 100%; height: 165%;
transform: translate(-50%, -50%); z-index: 0;
}
#preview-overlay {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 3; display: flex; justify-content: center; align-items: center;
cursor: pointer; background-color: transparent;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
#big-play-btn.hidden { opacity: 0; visibility: hidden; }
.custom-controls-bar {
position: absolute; bottom: 0; left: 0; width: 100%; z-index: 4;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
padding: 10px 15px; display: flex; align-items: center; gap: 15px;
opacity: 0; transition: opacity 0.3s ease;
}
#player-container:hover .custom-controls-bar { opacity: 1; }
.control-btn { background: none; border: none; cursor: pointer; padding: 0; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5)); }
/* Estilo para el nuevo botón de Play grande (círculo azul) */
#big-play-btn {
width: 80px; height: 80px;
/* background-color: #007bff; */ /* Comentado: Se controla con estilo en línea */
border-radius: 50%;
display: flex; justify-content: center; align-items: center;
box-shadow: 0 0 20px rgba(0, 123, 255, 0.5);
}
#big-play-btn::after {
content: '';
display: block;
width: 0;
height: 0;
border-style: solid;
border-width: 15px 0 15px 25px; /* Triángulo */
border-color: transparent transparent transparent white;
margin-left: 5px;
}
/* --- CSS CORREGIDO PARA LOS BOTONES --- */
#play-pause-btn, #mute-btn, #fullscreen-btn {
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-position: center;
background-size: contain; /* Asegura que el icono encaje */
}
.play-small { background-image: url('data:image/svg+xml;utf8,'); }
.pause-small { background-image: url('data:image/svg+xml;utf8,'); }
.volume { background-image: url('data:image/svg+xml;utf8,'); }
.volume-muted { background-image: url('data:image/svg+xml;utf8,'); }
.fullscreen { background-image: url('data:image/svg+xml;utf8,'); }
.progress-bar-container { flex-grow: 1; cursor: pointer; padding: 10px 0; }
.progress-bar { background-color: rgba(255,255,255,0.3); height: 5px; border-radius: 3px; }
.progress-bar-fill { background-color: #f39c12; height: 100%; width: 0%; border-radius: 3px; }
.time-display { color: white; font-size: 0.9em; font-family: monospace; }
/* Estilos para el contenedor y la barra de volumen */
.volume-container { position: relative; display: flex; align-items: center; }
.volume-slider {
width: 80px; margin-left: 10px;
opacity: 0; visibility: hidden; transition: all 0.2s ease;
}
.volume-container:hover .volume-slider {
opacity: 1; visibility: visible;
}
/* =======================================================
== ESTILOS PARA LA ANIMACIÓN DE NODOS (DE PAGINA 4)
======================================================= */
#node-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* Detrás del hero-content */
overflow: hidden;
}
.node {
position: absolute;
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 15px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
opacity: 0;
transform: scale(0.5);
z-index: 1;
}
.node.show {
opacity: 1;
transform: scale(1);
}
.node:hover {
transform: scale(1.1);
background-color: rgba(255, 255, 255, 0.2);
box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.connection-line {
position: absolute;
height: 2px;
background-color: rgba(255, 255, 255, 0.2);
transform-origin: center center;
z-index: 5;
pointer-events: none;
transition: opacity 0.3s ease-out;
}
/* Media queries para los nodos en móvil */
@media (max-width: 768px) {
.node {
width: 25px;
height: 25px;
font-size: 10px;
}
.connection-line {
height: 1px;
}
}
@media (max-width: 480px) {
.node {
width: 20px;
height: 20px;
font-size: 9px;
}
}