console.log( 'Code is Poetry' );<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ELEMENTS ECUADOR | Portal Pro</title>
<!-- Tailwind CSS -->
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:wght@300;400;500;600;700&family=Montserrat:wght@300;400;600;700&family=Pacifico&family=Roboto+Slab:wght@300;400&display=swap" rel="stylesheet">
<!-- Custom Config & Styles -->
<style>
/* --- 🎨 MASTER VARIABLES (TRI-MODE SYSTEM) --- */
:root {
/* Base Fixed Elements */
--fire: #FFD700; /* Gold */
--water: #00E5FF; /* Teal */
--earth: #00FF94; /* Green */
--air: #FFFFFF; /* White */
/* --- MODE: ELEMENTS (Default/Day) --- */
--color-bg: #0F0A13; /* Fondo Oscuro/Espacial */
--color-card: #1A1520; /* Fondo de Tarjeta */
--color-accent-main: var(--water); /* Teal */
--color-accent-secondary: var(--fire); /* Gold */
--color-border: rgba(255, 255, 255, 0.08);
--color-nav-bg: #0F0A13;
--color-red: #FF4D4D;
}
/* --- MODE: NEON (Night/Intense) --- */
body.mode-neon {
--color-bg: #000000;
--color-card: #0A0A0A;
--color-accent-main: #70E000; /* Intense Green */
--color-accent-secondary: #00E5FF; /* Intense Teal */
--color-border: rgba(112, 224, 0, 0.4);
--color-nav-bg: rgba(0, 0, 0, 0.95);
--color-red: #FF4D4D;
}
/* --- MODE: SEASON (Xmas/Warm) --- */
body.mode-season {
--color-bg: #3B0000; /* Deep Red Wine */
--color-card: #4D0000; /* Darker Red Card */
--color-accent-main: #FFD700; /* Gold/Yellow */
--color-accent-secondary: #FF4D4D; /* Volcano Red */
--color-border: rgba(255, 215, 0, 0.4);
--color-nav-bg: rgba(59, 0, 0, 0.95);
--color-red: #FF4D4D;
}
body {
background-color: var(--color-bg);
color: var(--air);
font-family: 'Jost', 'Montserrat', sans-serif;
-webkit-tap-highlight-color: transparent;
min-height: 100vh;
transition: all 0.5s ease-in-out;
}
/* Typography Mappings */
.font-heading { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
.font-brand { font-family: 'Pacifico', cursive; } /* Emotive/Cursive */
.font-body { font-family: 'Jost', sans-serif; } /* Modern Clean */
.font-slab { font-family: 'Roboto Slab', serif; } /* Blog/Written content */
/* Custom Utilities */
.glass-panel {
background: var(--color-card);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid var(--color-border);
transition: all 0.5s ease;
}
/* Text Shadows */
.text-shadow-neon { text-shadow: 0 0 10px var(--color-accent-main); }
.text-shadow-gold { text-shadow: 0 0 10px var(--color-accent-secondary); }
/* Scroll oculto */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
/* Animations */
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.animate-float { animation: float 3s ease-in-out infinite; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fadeIn { animation: fadeIn 0.4s ease-out forwards; }
@keyframes spin {
to { transform: rotate(360deg); }
}
.animate-spin { animation: spin 1s linear infinite; }
@keyframes pulse-brand {
0%, 100% { box-shadow: 0 0 0 0 var(--fire)33; }
50% { box-shadow: 0 0 0 10px var(--fire)00; }
}
.animate-pulse-brand { animation: pulse-brand 1.5s infinite; }
/* Button Utilities */
.btn-brand {
background: linear-gradient(135deg, var(--fire), #FFB900);
color: black;
font-weight: 700;
transition: all 0.3s ease;
}
.btn-brand-cta {
background: linear-gradient(135deg, var(--water), var(--water)33);
color: var(--water);
font-family: 'Bebas Neue', sans-serif;
letter-spacing: 0.1em;
transition: all 0.3s ease;
}
/* Form Elements */
.input-glass {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-border);
color: white;
transition: all 0.3s;
}
.input-glass:focus {
outline: none;
border-color: var(--color-accent-main);
background: rgba(255, 255, 255, 0.08);
}
</style>
</head>
<body>
</body>
</html>
<!--
================================================================
ELEMENTS ECUADOR PRO - SYSTEM V7.1 (FIXED CALCULATOR)
================================================================
STATUS: BLINDADO PARA WORDPRESS / ELEMENTOR
UPDATES:
- Corrección Suma Niños/Adultos en Cotizador
- Restauración de opciones de Camping Propio/Glamping
- Menú completo restaurado
INSTRUCCIONES:
1. Pegar en Widget HTML de Elementor.
2. Configurar API_KEY abajo.
-->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- LIBRERÍAS EXTERNAS (CDN) -->
<!-- MAPA DE IMPORTACIÓN PARA GEMINI -->
<!-- FUENTES -->
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:wght@300;400;500;600;700;800&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
<!-- ESTILOS CSS (SISTEMA VISUAL) -->
<style>
/* FORZAR PANTALLA COMPLETA SOBRE WORDPRESS */
#elements-app-wrapper {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
z-index: 99999; background-color: #050505;
overflow-y: auto; overflow-x: hidden; font-family: 'Jost', sans-serif;
}
/* Variables de Diseño */
:root {
--fire: #FFD700; --water: #00F0FF; --earth: #00FF94; --air: #FFFFFF;
--color-nav-bg: rgba(5, 5, 5, 0.95);
--color-border: rgba(255, 255, 255, 0.1);
}
/* Tipografía */
.font-heading { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.05em; }
.font-body { font-family: 'Jost', sans-serif; }
.font-brand { font-family: 'Dancing Script', cursive; }
/* Glassmorphism Pro */
.glass-panel {
background: linear-gradient(145deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.01) 100%);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
border: 1px solid var(--color-border);
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
}
/* Utilidades */
.text-shadow-neon { text-shadow: 0 0 10px var(--water); }
.text-shadow-gold { text-shadow: 0 0 10px var(--fire); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.animate-fadeIn { animation: fadeIn 0.6s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.animate-float { animation: float 3s ease-in-out infinite; }
/* Inputs Premium */
.input-premium {
background: rgba(0,0,0,0.4); border: 1px solid var(--color-border);
color: white; padding: 12px; border-radius: 12px; width: 100%;
outline: none; transition: 0.3s;
}
.input-premium:focus { border-color: var(--water); box-shadow: 0 0 15px var(--water); }
/* Loader */
.loader-container {
display: flex; flex-direction: column; align-items: center; justify-content: center;
height: 100vh; width: 100vw; color: white;
}
.loader-spin {
width: 50px; height: 50px; border: 4px solid rgba(255,255,255,0.1);
border-top: 4px solid var(--water); border-radius: 50%;
animation: spin 1s linear infinite; margin-bottom: 20px;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
/* Error Box */
#error-log {
display: none; position: fixed; bottom: 0; left: 0; width: 100%;
background: #990000; color: white; padding: 20px; z-index: 100000;
font-family: monospace; font-size: 12px; white-space: pre-wrap;
}
</style>
</head>
<body>
<!-- CONTENEDOR PRINCIPAL -->
<h2 style="font-family: 'Bebas Neue'; letter-spacing: 2px;">RESTAURANDO SISTEMA ELEMENTS...</h2>
<!-- LÓGICA DE REACT INTEGRADA -->
</body>
</html>
