/* --- VARIABLES DE MARCA --- */
:root {
    --orange-dark: #d14913;
    --orange-mid: #e05511;
    --orange-light: #e96c0f;
    --yellow: #f39c10;
    --white: #ffffff;
    --deep-brown: #5d2a0c;
}

/* --- BASE Y PATRÓN RETRO --- */
body {
    font-family: 'Inter', sans-serif;
    margin: 0; padding: 0;
    min-height: 100vh;
    background: linear-gradient(135deg, var(--orange-dark) 0%, var(--orange-mid) 20%, var(--orange-light) 40%, var(--yellow) 60%, var(--orange-mid) 80%, var(--orange-dark) 100%);
    background-size: 400% 400%;
    animation: gradientAnimation 15s ease infinite;
    background-attachment: fixed;
    color: var(--white);
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(circle at center, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.08) 20%, transparent 20.5%, transparent 35%, rgba(0,0,0,0.05) 35.5%, rgba(0,0,0,0.05) 50%, transparent 50.5%, transparent 65%, rgba(255,255,255,0.05) 65.5%, rgba(255,255,255,0.05) 80%, transparent 80.5%);
    background-size: 200px 200px;
    z-index: -1; pointer-events: none; opacity: 0.6;
}

/* --- ANIMACIONES --- */
@keyframes gradientAnimation { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes floating { 0% { transform: rotate(-2deg) translateY(0px); } 50% { transform: rotate(1deg) translateY(-15px); } 100% { transform: rotate(-2deg) translateY(0px); } }
@keyframes attention-wiggle { 0% { transform: rotate(-3deg) scale(1); } 5% { transform: rotate(-1deg) scale(1.05); } 10% { transform: rotate(-4deg) scale(1.05); } 15% { transform: rotate(-2deg) scale(1); } 100% { transform: rotate(-3deg) scale(1); } }
@keyframes google-pulse { 0% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } 50% { transform: scale(1.02); box-shadow: 0 10px 25px rgba(255, 255, 255, 0.4); } 100% { transform: scale(1); box-shadow: 0 5px 15px rgba(0,0,0,0.2); } }

.animate-float-logo { animation: floating 6s ease-in-out infinite; }
.animate-attention { animation: attention-wiggle 4s ease-in-out infinite; }
.animate-google-pulse { animation: google-pulse 2s infinite ease-in-out; }
.font-serif-retro { font-family: 'Dancing Script', cursive; }

/* --- BOTÓN DE IDIOMA --- */
.lang-btn {
    background: white;
    color: var(--orange-dark);
    font-weight: 900;
    padding: 0 14px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    border: 3px solid var(--yellow);
    transition: all 0.3s ease;
}

/* --- BOTONES DEL INDEX --- */
.interactive-btn { 
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    cursor: pointer;
    border: none;
    display: flex;
    align-items: center;
    width: 100%;
    border-radius: 2.5rem;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
}

.btn-retro-white { background: #ffffff !important; color: var(--orange-dark) !important; border-bottom: 8px solid #cbd5e1 !important; }
.btn-retro-black { background: #000000 !important; color: var(--white) !important; border-bottom: 8px solid var(--yellow) !important; transform: rotate(-3deg); }
.btn-location-original { background-color: var(--deep-brown) !important; color: white !important; border-bottom: 8px solid #3d1b08 !important; }
.btn-website-premium { background: white !important; color: black !important; border: 4px solid var(--yellow) !important; border-bottom: 12px solid var(--orange-dark) !important; }

.btn-experience-stripes {
    background: linear-gradient(to bottom, #d14913 0%, #d14913 25%, #e05511 25%, #e05511 50%, #e96c0f 50%, #e96c0f 75%, #f39c10 75%, #f39c10 100%) !important;
    color: white !important; border-bottom: 8px solid rgba(0,0,0,0.3) !important;
}

/* --- NUEVO BOTÓN GOOGLE REVIEW (Fondo Gradiente Completo) --- */
.btn-google-custom {
    background: linear-gradient(45deg, #4285F4, #EA4335, #FBBC05, #34A853) !important;
    color: white !important;
    border: none !important;
    border-bottom: 6px solid rgba(0,0,0,0.2) !important; /* Sombra sutil integrada */
}

.interactive-btn:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
.interactive-btn:active { transform: translateY(2px); border-bottom-width: 2px !important; }
.btn-sub-option { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }

/* --- DICCIONARIO EMOCIONAL (ARREGLO TEXTO MULTILÍNEA) --- */
.dict-card {
    background-color: var(--deep-brown) !important; 
    border-bottom: 8px solid var(--yellow) !important;
    border-radius: 3.5rem;
    padding: 3.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6);
    margin-top: 2rem;
}

.slider-container { width: 100%; overflow: hidden; position: relative; }
.slider-track { display: flex !important; flex-direction: row !important; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1); width: 100%; }

.slider-item { 
    min-width: 100% !important; 
    flex-shrink: 0; 
    text-align: center; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 0 1.5rem; /* Margen lateral para que el texto no toque bordes */
    box-sizing: border-box;
}

.slider-item h4 { color: var(--yellow); font-size: 2rem; margin-bottom: 0.5rem; }
.slider-item p.phonetic { text-transform: uppercase; letter-spacing: 0.3em; font-size: 10px; font-weight: 900; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.5rem; }

/* Arreglo para texto multilínea */
.slider-item p.definition { 
    font-size: 1.25rem; 
    font-weight: 700; 
    font-style: italic; 
    line-height: 1.4; 
    color: white; 
    white-space: normal; /* Permite salto de línea */
    max-width: 300px; /* Ancho máximo para forzar salto si es necesario */
    margin: 0 auto;
}

.slider-dots { display: flex; justify-content: center; gap: 12px; margin-top: 2rem; }
.slider-dot { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); cursor: pointer; transition: 0.3s; }
.slider-dot.active { background-color: var(--yellow); transform: scale(1.4); box-shadow: 0 0 15px rgba(243, 156, 16, 0.6); }

/* --- REDES SOCIALES --- */
.social-icon-circle { transition: all 0.4s ease; color: white; background: rgba(0,0,0,0.4); width: 66px; height: 66px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 4px solid white; box-shadow: 0 10px 20px rgba(0,0,0,0.3); }
.social-icon-circle:hover { transform: scale(1.15) rotate(5deg); border-color: var(--yellow); }
.inst-bg:hover { background: radial-gradient(circle at 30% 30%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important; }
.fb-bg:hover { background: #1877F2 !important; }

/* --- OTROS --- */
.logo-container-retro { position: relative; z-index: 10; margin-bottom: 1.5rem; display: flex; justify-content: center; }
.logo-frame-gradient { background: repeating-linear-gradient(-45deg, var(--orange-dark), var(--orange-mid) 20px, var(--orange-light) 40px); padding: 10px; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.4); border: 3px solid var(--white); transform: rotate(-2deg); }
.logo-bg-inner { background: #ffffff; padding: 25px; border-radius: 16px; display: flex; justify-content: center; }
.designed-by-signature { padding: 3rem 0; text-align: center; }
.signature-link { display: inline-flex; align-items: center; font-weight: 900; font-size: 22px; text-decoration: none; }
.num-305 { color: #ff0000; }
.word-click { color: #000000; margin-left: 2px; }
.grecaptcha-badge { visibility: hidden; }

/* --- FORMULARIOS (GLASS) --- */
.form-container { background: rgba(0, 0, 0, 0.25); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2.5rem; padding: 2.5rem 1.8rem; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); }
.form-label { display: block; font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.6); margin-bottom: 6px; margin-left: 4px; }
.form-input, .form-select { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 1rem; padding: 0.85rem 1.2rem; width: 100%; color: white !important; font-size: 15px; font-weight: 500; }
.form-select option { background-color: #3d1b08; color: white; }
.btn-submit-premium { background: #ffffff; color: #000000; font-weight: 900; text-transform: uppercase; letter-spacing: 0.3em; padding: 1.25rem; border-radius: 1.2rem; width: 100%; border-bottom: 6px solid #cbd5e1; margin-top: 1rem; cursor: pointer; transition: all 0.3s ease; }
.btn-submit-premium:hover { background: var(--yellow); transform: translateY(-2px); border-bottom-color: #c9941c; }