/* ==========================================================================
GEEKU · HOJA DE ESTILOS PRINCIPAL
--------------------------------------------------------------------------
Un solo archivo para todo el sitio. Está ordenado por secciones y cada una
tiene un título en MAYÚSCULAS para buscarlo rápido (Ctrl+F):
01. VARIABLES (colores, tipografías, medidas) ← acá cambiás la marca
02. RESET Y BASE
03. TIPOGRAFÍA
04. UTILIDADES Y CONTENEDOR
05. BOTONES
06. HEADER FIJO Y MENÚ
07. HERO DEL INICIO
08. SECCIONES Y TÍTULOS (incluye la "sonrisa" de la marca)
09. TARJETAS DE SERVICIOS
10. CÓMO TRABAJAMOS (pasos)
11. BANDA ALOJAMIENTOS TURÍSTICOS
12. FORMULARIO DE PRESUPUESTO
13. EMPRESAS DE GEEKU
14. CABECERA DE PÁGINAS INTERNAS + MIGAS DE PAN
15. CONTENIDO DE LANDINGS (bloques, beneficios, FAQ)
16. FILTRO DE SERVICIOS PARA ALOJAMIENTOS
17. BANDA DE LLAMADO A LA ACCIÓN (CTA)
18. FOOTER
19. BOTÓN FLOTANTE DE WHATSAPP
20. ANIMACIONES (aparición al hacer scroll)
21. RESPONSIVE (tablet / celular)
22. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
========================================================================== */
/* ==========================================================================
01. VARIABLES
Cambiando estos valores cambia todo el sitio.
========================================================================== */
:root {
/* --- Colores de marca --- */
--cyan: #00b4e8; /* celeste del logo Geeku (fondos, íconos, detalles) */
--cyan-600: #0092c4; /* celeste más oscuro: textos celestes sobre blanco (mejor contraste) */
--cyan-700: #007aa6; /* hover de botones */
--cyan-50: #e8f7fd; /* celeste muy suave para fondos */
--ink: #0b1b2b; /* azul casi negro: títulos y fondos oscuros */
--ink-2: #13293d; /* variante para fondos oscuros en capas */
--text: #33475b; /* color del texto de párrafos */
--muted: #62778c; /* texto secundario */
--line: #dfe9ef; /* bordes y separadores */
--bg: #ffffff; /* fondo general */
--bg-soft: #f4f9fc; /* fondo de secciones alternadas */
--wa: #25d366; /* verde WhatsApp */
--wa-dark: #128c4a;
/* --- Tipografías (se cargan desde Google Fonts en el ) --- */
--font-title: "Outfit", system-ui, sans-serif; /* redonda y geométrica, como el logo */
--font-body: "DM Sans", system-ui, sans-serif;
/* --- Medidas --- */
--container: 1180px; /* ancho máximo del contenido */
--radius: 18px; /* redondeo de tarjetas */
--radius-sm: 12px;
--header-h: 76px; /* alto del header fijo */
--shadow-sm: 0 2px 8px rgba(11, 27, 43, .06);
--shadow: 0 14px 40px -12px rgba(11, 27, 43, .18);
--ease: cubic-bezier(.22, .8, .24, 1); /* curva de las animaciones */
}
/* ==========================================================================
02. RESET Y BASE
========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
/* Evita que el header fijo tape los títulos al ir a un ancla (#contacto) */
scroll-padding-top: calc(var(--header-h) + 16px);
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-body);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--text);
background: var(--bg);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
overflow-x: clip; /* evita scroll lateral por animaciones que entran de costado */
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--cyan-600); text-decoration: none; }
a:hover { color: var(--cyan-700); }
ul { padding: 0; margin: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
/* Foco visible para navegación con teclado */
:focus-visible {
outline: 3px solid var(--cyan);
outline-offset: 3px;
border-radius: 6px;
}
/* Enlace oculto "Saltar al contenido" (aparece al tabular) */
.skip-link {
position: absolute; left: 16px; top: -60px; z-index: 200;
background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
}
.skip-link:focus { top: 12px; color: #fff; }
/* ==========================================================================
03. TIPOGRAFÍA
========================================================================== */
h1, h2, h3, h4 {
font-family: var(--font-title);
color: var(--ink);
line-height: 1.12;
margin: 0 0 .5em;
letter-spacing: -.02em;
font-weight: 700;
}
h1 { font-size: clamp(2.3rem, 5.2vw, 4rem); }
h2 { font-size: clamp(1.8rem, 3.6vw, 2.75rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }
strong { color: var(--ink); }
/* Texto celeste destacado dentro de un título */
.hl { color: var(--cyan-600); }
/* Párrafo introductorio más grande */
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--text); }
/* ==========================================================================
04. UTILIDADES Y CONTENEDOR
========================================================================== */
.container {
width: min(100% - 32px, var(--container));
margin-inline: auto;
}
.center { text-align: center; }
.visually-hidden {
position: absolute !important; width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); white-space: nowrap;
}
/* ==========================================================================
05. BOTONES
Uso: / btn--ghost / btn--wa / btn--light
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .55em;
padding: .9em 1.5em;
border-radius: 999px;
border: 2px solid transparent;
font-family: var(--font-title);
font-weight: 600;
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: transform .25s var(--ease), background-color .25s, box-shadow .25s, color .25s;
white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
/* Botón principal celeste (texto oscuro para buen contraste) */
.btn--primary { background: var(--cyan); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(0, 180, 232, .8); }
.btn--primary:hover { background: #1cc2f2; color: var(--ink); }
/* Botón con borde */
.btn--ghost { border-color: var(--line); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--cyan); color: var(--ink); }
/* Botón blanco (para fondos oscuros) */
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { color: var(--ink); background: var(--cyan-50); }
/* Botón WhatsApp */
.btn--wa { background: var(--wa); color: #06341b; }
.btn--wa:hover { background: #3be07a; color: #06341b; }
.btn--block { width: 100%; }
/* Flecha que se desplaza en hover (se usa en "Ver más") */
.link-arrow {
display: inline-flex; align-items: center; gap: .4em;
font-family: var(--font-title); font-weight: 600; color: var(--cyan-600);
}
.link-arrow svg { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }
/* ==========================================================================
06. HEADER FIJO Y MENÚ
El header siempre está arriba. Al hacer scroll JS le agrega la clase
".is-scrolled" y se vuelve más compacto con sombra.
========================================================================== */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
height: var(--header-h);
background: rgba(255, 255, 255, .86);
backdrop-filter: saturate(160%) blur(12px);
-webkit-backdrop-filter: saturate(160%) blur(12px);
border-bottom: 1px solid transparent;
transition: height .3s var(--ease), box-shadow .3s, border-color .3s;
}
.site-header.is-scrolled {
height: 64px;
box-shadow: 0 6px 24px -14px rgba(11, 27, 43, .35);
border-color: var(--line);
}
.site-header .container {
height: 100%;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
/* Logo del header */
.brand img { height: 46px; width: auto; transition: height .3s var(--ease); }
.site-header.is-scrolled .brand img { height: 40px; }
/* Menú principal (escritorio) */
.nav { display: flex; align-items: center; gap: 8px; }
.nav__list { display: flex; gap: 4px; }
.nav__link {
position: relative; display: block;
padding: 10px 14px;
font-family: var(--font-title); font-weight: 500; font-size: 1.02rem;
color: var(--ink);
}
/* Rayita celeste animada debajo del link (en hover y en la página actual) */
.nav__link::after {
content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px;
border-radius: 3px; background: var(--cyan);
transform: scaleX(0); transform-origin: left;
transition: transform .3s var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after,
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
.nav .btn { margin-left: 10px; padding: .75em 1.2em; }
/* Botón hamburguesa (solo celular) */
.nav__toggle {
display: none;
width: 46px; height: 46px; border: 0; border-radius: 12px;
background: var(--cyan-50); cursor: pointer; position: relative;
}
.nav__toggle span {
position: absolute; left: 12px; right: 12px; height: 2px; border-radius: 2px;
background: var(--ink); transition: transform .3s var(--ease), opacity .2s;
}
.nav__toggle span:nth-child(1) { top: 16px; }
.nav__toggle span:nth-child(2) { top: 22px; }
.nav__toggle span:nth-child(3) { top: 28px; }
/* Hamburguesa → X cuando el menú está abierto */
.nav-open .nav__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav-open .nav__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
/* ==========================================================================
07. HERO DEL INICIO
========================================================================== */
.hero {
position: relative;
padding: calc(var(--header-h) + 64px) 0 96px;
overflow: hidden;
background:
radial-gradient(900px 500px at 88% 10%, rgba(0, 180, 232, .16), transparent 60%),
radial-gradient(700px 420px at -10% 90%, rgba(0, 180, 232, .10), transparent 60%),
var(--bg);
}
.hero__grid {
display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center;
}
.hero__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px 6px 8px; margin-bottom: 22px;
border-radius: 999px; background: #fff; border: 1px solid var(--line);
font-size: .92rem; font-weight: 500; color: var(--ink); box-shadow: var(--shadow-sm);
}
.hero__eyebrow .dot {
width: 10px; height: 10px; border-radius: 50%; background: var(--wa);
box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
animation: pulse 2.2s infinite;
}
.hero h1 { margin-bottom: 20px; }
.hero .lead { max-width: 560px; margin-bottom: 30px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 34px; }
/* Chips de beneficios del hero */
.hero__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.hero__chips li {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 999px;
background: var(--bg-soft); border: 1px solid var(--line);
font-size: .92rem; color: var(--ink);
}
.hero__chips svg { width: 18px; height: 18px; color: var(--cyan-600); }
/* --- Mockup ilustrado (navegador + celular) hecho 100% con CSS --- */
.mockup { position: relative; aspect-ratio: 1 / .86; }
.mockup__browser {
position: absolute; inset: 4% 8% 14% 0;
background: #fff; border-radius: 18px; border: 1px solid var(--line);
box-shadow: var(--shadow); overflow: hidden;
animation: float 7s ease-in-out infinite;
}
.mockup__bar { display: flex; gap: 6px; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.mockup__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d5e1e8; }
.mockup__bar b { margin-left: 12px; flex: 1; height: 18px; border-radius: 6px; background: #fff; border: 1px solid var(--line); font: 500 11px/16px var(--font-body); color: var(--muted); padding-left: 8px; }
.mockup__body { padding: 18px; display: grid; gap: 12px; }
.mk-hero { height: 110px; border-radius: 12px; background: linear-gradient(120deg, var(--cyan) 0%, #5fd3f5 100%); position: relative; overflow: hidden; }
.mk-hero::after { content: ""; position: absolute; left: 16px; top: 22px; width: 46%; height: 12px; border-radius: 6px; background: rgba(255,255,255,.9); box-shadow: 0 22px 0 -2px rgba(255,255,255,.6), 0 44px 0 -3px rgba(255,255,255,.5); }
.mk-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mk-row span { height: 64px; border-radius: 10px; background: var(--bg-soft); border: 1px solid var(--line); }
.mk-line { height: 10px; border-radius: 6px; background: var(--line); }
.mk-line.short { width: 60%; }
.mockup__phone {
position: absolute; right: 0; bottom: 0; width: 34%; aspect-ratio: 9 / 18;
background: var(--ink); border-radius: 26px; padding: 10px;
box-shadow: var(--shadow); animation: float 7s ease-in-out -3.5s infinite;
}
.mockup__phone .screen { height: 100%; border-radius: 18px; background: #fff; overflow: hidden; display: grid; grid-template-rows: 38% auto; }
.mockup__phone .screen div:first-child { background: linear-gradient(160deg, #5fd3f5, var(--cyan)); }
.mockup__phone .screen div:last-child { padding: 10px; display: grid; gap: 7px; align-content: start; }
.mockup__phone .screen i { display: block; height: 7px; border-radius: 4px; background: var(--line); }
.mockup__phone .screen i.wa { height: 22px; border-radius: 999px; background: var(--wa); margin-top: 6px; }
/* Tarjetita flotante "Google" */
.mockup__badge {
position: absolute; left: -4%; bottom: 6%;
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--line);
box-shadow: var(--shadow); font: 600 .9rem var(--font-title); color: var(--ink);
animation: float 6s ease-in-out -1.5s infinite;
}
.mockup__badge small { display: block; font: 400 .78rem var(--font-body); color: var(--muted); }
.mockup__badge .ico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--cyan-50); color: var(--cyan-600); }
.mockup__badge .ico svg { width: 20px; height: 20px; }
/* ==========================================================================
08. SECCIONES Y TÍTULOS
========================================================================== */
.section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.section--soft { background: var(--bg-soft); }
.section--dark { background: var(--ink); color: #c9d6e2; }
.section--dark h2, .section--dark h3, .section--dark strong { color: #fff; }
/* Encabezado de sección: etiqueta + título + bajada */
.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head--left { margin-left: 0; text-align: left; }
.section-head p { color: var(--muted); font-size: 1.1rem; }
.section--dark .section-head p { color: #9fb3c6; }
/* Etiqueta chica arriba del título */
.eyebrow {
display: inline-block; margin-bottom: 14px;
font: 600 .82rem var(--font-title); letter-spacing: .14em; text-transform: uppercase;
color: var(--cyan-600);
}
.section--dark .eyebrow { color: var(--cyan); }
/* LA SONRISA GEEKU: el arco del logo usado como subrayado.
Uso: palabra
Se "dibuja" sola cuando aparece en pantalla (ver sección 20). */
.smile { position: relative; display: inline-block; white-space: nowrap; }
.smile svg {
position: absolute; left: 4%; right: 4%; bottom: -.28em; width: 92%; height: .38em;
overflow: visible;
}
.smile path {
fill: none; stroke: var(--cyan); stroke-width: 7; stroke-linecap: round;
stroke-dasharray: 220; stroke-dashoffset: 220;
transition: stroke-dashoffset 1.1s var(--ease) .35s;
}
.is-visible .smile path, .smile.is-visible path { stroke-dashoffset: 0; }
/* ==========================================================================
09. TARJETAS DE SERVICIOS
========================================================================== */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card {
position: relative; display: flex; flex-direction: column;
padding: 30px; border-radius: var(--radius);
background: #fff; border: 1px solid var(--line);
transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
/* Toda la tarjeta es clickeable cuando tiene .card--link (el estira su área) */
.card--link:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: transparent; }
.card--link a.stretched::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: 1rem; flex: 1; }
.card .link-arrow { margin-top: 8px; }
/* Ícono de la tarjeta */
.card__icon {
width: 56px; height: 56px; margin-bottom: 20px;
display: grid; place-items: center; border-radius: 16px;
background: var(--cyan-50); color: var(--cyan-600);
transition: background-color .35s, color .35s, transform .35s var(--ease);
}
.card__icon svg { width: 28px; height: 28px; }
.card--link:hover .card__icon { background: var(--cyan); color: #fff; transform: rotate(-6deg) scale(1.05); }
/* ==========================================================================
10. CÓMO TRABAJAMOS (pasos)
========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; position: relative; counter-reset: step; }
/* Línea punteada que une los pasos (solo escritorio) */
.steps::before {
content: ""; position: absolute; top: 34px; left: 16%; right: 16%; height: 2px;
background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 16px);
opacity: .5;
}
.step { position: relative; text-align: center; padding: 0 12px; }
.step__num {
position: relative; z-index: 1;
width: 68px; height: 68px; margin: 0 auto 22px; border-radius: 50%;
display: grid; place-items: center;
background: #fff; border: 2px solid var(--cyan);
font: 700 1.6rem var(--font-title); color: var(--ink);
box-shadow: 0 0 0 8px var(--bg-soft);
}
.section--soft .step__num { box-shadow: 0 0 0 8px var(--bg-soft); }
.step p { color: var(--muted); }
/* ==========================================================================
11. BANDA ALOJAMIENTOS TURÍSTICOS (destacado del inicio)
========================================================================== */
.feature-band {
position: relative; overflow: hidden;
border-radius: 28px; padding: clamp(36px, 6vw, 72px);
background: linear-gradient(135deg, var(--ink) 0%, var(--ink-2) 100%);
color: #c9d6e2;
display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center;
}
.feature-band::before { /* círculo celeste decorativo */
content: ""; position: absolute; right: -120px; top: -120px; width: 380px; height: 380px;
border-radius: 50%; background: radial-gradient(circle, rgba(0,180,232,.45), transparent 70%);
}
.feature-band h2, .feature-band strong { color: #fff; }
.feature-band .eyebrow { color: var(--cyan); }
.feature-band__list { display: grid; gap: 12px; position: relative; }
.feature-band__list li {
display: flex; align-items: center; gap: 12px;
padding: 14px 18px; border-radius: 14px;
background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
color: #fff; font-weight: 500;
transition: transform .3s var(--ease), background-color .3s;
}
.feature-band__list li:hover { transform: translateX(6px); background: rgba(255,255,255,.1); }
.feature-band__list svg { width: 22px; height: 22px; color: var(--cyan); flex: none; }
/* Lista con tildes (reutilizable) */
.checks { display: grid; gap: 12px; margin: 0 0 24px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks li::before {
content: ""; flex: none; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%;
background: var(--cyan-50) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230092c4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.section--dark .checks li::before, .feature-band .checks li::before { background-color: rgba(0,180,232,.18); }
/* ==========================================================================
12. FORMULARIO DE PRESUPUESTO (va a WhatsApp)
========================================================================== */
.quote { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: start; }
.quote__info .checks { margin-top: 24px; }
.quote__contact { display: grid; gap: 10px; margin-top: 28px; }
.quote__contact a { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 500; }
.quote__contact svg { width: 20px; height: 20px; color: var(--cyan-600); }
.form {
padding: clamp(24px, 4vw, 40px); border-radius: 24px;
background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow);
}
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field { display: grid; gap: 6px; margin-bottom: 16px; }
.field label { font: 600 .92rem var(--font-title); color: var(--ink); }
.field label .opt { font-weight: 400; color: var(--muted); }
.field input, .field select, .field textarea {
width: 100%; padding: 13px 14px; border-radius: var(--radius-sm);
border: 1.5px solid var(--line); background: var(--bg-soft);
transition: border-color .2s, background-color .2s, box-shadow .2s;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
outline: none; border-color: var(--cyan); background: #fff; box-shadow: 0 0 0 4px rgba(0,180,232,.15);
}
/* Estado de error (lo pone JS) */
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #e5484d; }
.field__error { font-size: .85rem; color: #c62f34; display: none; }
.field.has-error .field__error { display: block; }
.form__note { margin: 12px 0 0; font-size: .88rem; color: var(--muted); text-align: center; }
/* ==========================================================================
13. EMPRESAS DE GEEKU
Por ahora las tarjetas NO son links. Cuando estén listos los sitios,
cambiá el por
.
========================================================================== */
.brands { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
.brand-card {
flex: 0 1 calc((100% - 48px) / 3); /* 3 por fila en escritorio (5 = 3 + 2 centradas) */
display: flex; flex-direction: column; align-items: flex-start;
padding: 28px; border-radius: var(--radius);
background: #fff; border: 1px solid var(--line); color: var(--text);
transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.brand-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); color: var(--text); }
.brand-card__logo { height: 72px; width: 100%; display: flex; align-items: center; margin-bottom: 18px; }
.brand-card__logo img { max-height: 64px; max-width: 220px; width: auto; object-fit: contain; object-position: left center; }
.brand-card h3 { font-size: 1.1rem; margin-bottom: 6px; }
.brand-card p { font-size: .98rem; color: var(--muted); margin: 0; } /* descripción: 2 renglones */
.brand-card .soon { margin-top: 14px; font: 600 .75rem var(--font-title); letter-spacing: .08em; text-transform: uppercase; color: var(--cyan-600); }
/* ==========================================================================
14. CABECERA DE PÁGINAS INTERNAS + MIGAS DE PAN
========================================================================== */
.page-hero {
padding: calc(var(--header-h) + 56px) 0 72px;
background:
radial-gradient(800px 400px at 90% 0%, rgba(0, 180, 232, .16), transparent 60%),
var(--bg-soft);
border-bottom: 1px solid var(--line);
}
.page-hero__grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 48px; align-items: center; }
.page-hero__grid > *, .hero__grid > * { min-width: 0; } /* evita que un texto largo ensanche la página */
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.page-hero .lead { max-width: 640px; }
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
/* Ícono grande decorativo de las landings */
.page-hero__art {
justify-self: center; width: min(300px, 70%); aspect-ratio: 1; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
display: grid; place-items: center;
background: linear-gradient(145deg, var(--cyan) 0%, #6fd9f7 100%);
color: #fff; box-shadow: 0 30px 60px -24px rgba(0,146,196,.7);
animation: blob 12s ease-in-out infinite;
}
.page-hero__art svg { width: 42%; height: 42%; }
.breadcrumbs { margin-bottom: 20px; font-size: .9rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li { color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: #b6c5d1; }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--cyan-600); }
/* ==========================================================================
15. CONTENIDO DE LANDINGS
========================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.prose p { font-size: 1.08rem; }
.prose h2 { margin-top: 0; }
/* Caja resaltada ("Ideal para...") */
.note-box {
padding: 28px; border-radius: var(--radius);
background: var(--cyan-50); border: 1px solid #c8ecf8;
}
.note-box h3 { margin-bottom: 14px; }
/* "Qué incluye": lista compacta con tilde, en 3 columnas */
.includes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.include {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px; border-radius: var(--radius-sm);
background: #fff; border: 1px solid var(--line);
font: 600 1.02rem/1.35 var(--font-title); color: var(--ink);
transition: border-color .3s, transform .3s var(--ease);
}
.include:hover { border-color: var(--cyan); transform: translateY(-3px); }
.include svg {
flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 10px;
background: var(--cyan-50); color: var(--cyan-600);
}
/* Beneficios con número grande */
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.benefit { padding: 28px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.benefit__n { font: 700 2.4rem/1 var(--font-title); color: var(--cyan); margin-bottom: 12px; }
.benefit p { color: var(--muted); margin: 0; }
/* Preguntas frecuentes (acordeón nativo con ) */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details {
border-radius: var(--radius-sm); background: #fff; border: 1px solid var(--line);
transition: box-shadow .3s;
}
.faq details[open] { box-shadow: var(--shadow-sm); border-color: #c8ecf8; }
.faq summary {
cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; position: relative;
font: 600 1.05rem var(--font-title); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { /* el "+" que gira a "×" */
content: "+"; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);
width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
background: var(--cyan-50); color: var(--cyan-600); font-size: 1.3rem; line-height: 1;
transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 22px 20px; margin: 0; color: var(--text); }
/* ==========================================================================
16. FILTRO DE SERVICIOS PARA ALOJAMIENTOS
Botones que filtran las tarjetas por categoría (lo maneja main.js).
========================================================================== */
.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 40px; }
.filters button {
padding: 10px 18px; border-radius: 999px; cursor: pointer;
border: 1.5px solid var(--line); background: #fff;
font: 500 .95rem var(--font-title); color: var(--ink);
transition: background-color .25s, border-color .25s, color .25s;
}
.filters button:hover { border-color: var(--cyan); }
.filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.card.is-hidden { display: none; }
.card__tag {
align-self: flex-start; margin-bottom: 14px; padding: 4px 10px; border-radius: 999px;
background: var(--bg-soft); font: 600 .72rem var(--font-title); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
}
/* ==========================================================================
17. BANDA DE LLAMADO A LA ACCIÓN (CTA)
========================================================================== */
.cta {
position: relative; overflow: hidden; text-align: center;
padding: clamp(48px, 7vw, 80px) clamp(24px, 5vw, 64px); border-radius: 28px;
background: linear-gradient(135deg, var(--cyan) 0%, #3fcaf3 100%);
color: var(--ink);
}
.cta::before, .cta::after { /* burbujas decorativas */
content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.18);
}
.cta::before { width: 260px; height: 260px; left: -80px; bottom: -120px; }
.cta::after { width: 180px; height: 180px; right: -40px; top: -60px; }
.cta h2 { color: var(--ink); position: relative; }
.cta p { position: relative; font-size: 1.15rem; max-width: 620px; margin: 0 auto 28px; color: #0d3347; }
.cta__actions { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cta .btn--primary { background: var(--ink); color: #fff; box-shadow: none; }
.cta .btn--primary:hover { background: #000; color: #fff; }
/* ==========================================================================
18. FOOTER
========================================================================== */
.site-footer { background: var(--ink); color: #9fb3c6; padding: 72px 0 28px; font-size: .98rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer__brand img { height: 52px; width: auto; margin-bottom: 18px; }
.footer__brand p { max-width: 320px; }
.site-footer h3 { font-size: 1rem; color: #fff; margin-bottom: 16px; letter-spacing: .02em; }
.footer__links { display: grid; gap: 10px; }
.footer__links a { color: #9fb3c6; transition: color .2s, padding-left .25s var(--ease); }
.footer__links a:hover { color: #fff; padding-left: 4px; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
background: rgba(255,255,255,.06); color: #fff; transition: background-color .25s, transform .25s var(--ease);
}
.footer__social a:hover { background: var(--cyan); color: var(--ink); transform: translateY(-3px); }
.footer__social svg { width: 20px; height: 20px; }
.footer__bottom {
margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.08);
display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: .88rem;
}
.footer__bottom a { color: #9fb3c6; }
/* ==========================================================================
19. BOTÓN FLOTANTE DE WHATSAPP
Aparece después de hacer un poco de scroll (JS agrega .is-visible).
========================================================================== */
.wa-float {
position: fixed; right: 20px; bottom: 20px; z-index: 90;
width: 60px; height: 60px; border-radius: 50%;
display: grid; place-items: center;
background: var(--wa); color: #fff;
box-shadow: 0 12px 28px -8px rgba(18, 140, 74, .7);
opacity: 0; transform: translateY(20px) scale(.9); pointer-events: none;
transition: opacity .35s, transform .35s var(--ease);
}
.wa-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.wa-float:hover { color: #fff; transform: scale(1.07); }
.wa-float svg { width: 30px; height: 30px; }
.wa-float::before { /* aro que "late" */
content: ""; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid var(--wa); animation: ring 2.6s ease-out infinite;
}
/* ==========================================================================
20. ANIMACIONES
Cualquier elemento con [data-reveal] aparece suave al entrar en pantalla.
Variantes: data-reveal="up" (por defecto), "left", "right", "zoom".
data-delay="1..5" retrasa la aparición (para efecto cascada).
========================================================================== */
[data-reveal] {
opacity: 0; transform: translateY(28px);
transition: opacity .8s var(--ease), transform .8s var(--ease);
}
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-delay="1"] { transition-delay: .08s; }
[data-delay="2"] { transition-delay: .16s; }
[data-delay="3"] { transition-delay: .24s; }
[data-delay="4"] { transition-delay: .32s; }
[data-delay="5"] { transition-delay: .40s; }
/* Si JS no carga, se muestra todo igual */
.no-js [data-reveal] { opacity: 1; transform: none; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 10px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes blob {
0%, 100% { border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; }
50% { border-radius: 55% 45% 40% 60% / 45% 58% 42% 55%; }
}
/* ==========================================================================
21. RESPONSIVE
========================================================================== */
/* --- Tablet grande --- */
@media (max-width: 1080px) {
.footer__grid { grid-template-columns: 1fr 1fr; }
}
/* --- Tablet --- */
@media (max-width: 900px) {
.hero__grid, .page-hero__grid, .feature-band, .quote, .split { grid-template-columns: 1fr; }
.hero { padding-bottom: 72px; }
.mockup { max-width: 520px; margin: 0 auto; width: 100%; }
.page-hero__art { display: none; }
.grid-3, .benefits, .includes { grid-template-columns: 1fr 1fr; }
.brand-card { flex-basis: calc((100% - 24px) / 2); }
.steps { grid-template-columns: 1fr; gap: 36px; }
.steps::before { display: none; }
/* Menú celular: panel que baja desde el header */
.nav__toggle { display: block; }
.nav {
position: fixed; top: var(--header-h); left: 0; right: 0;
flex-direction: column; align-items: stretch; gap: 0;
padding: 12px 16px 24px; background: #fff; border-bottom: 1px solid var(--line);
box-shadow: 0 24px 40px -24px rgba(11,27,43,.4);
transform: translateY(-12px); opacity: 0; visibility: hidden;
transition: transform .3s var(--ease), opacity .3s, visibility .3s;
}
.site-header.is-scrolled .nav { top: 64px; }
.nav-open .nav { transform: none; opacity: 1; visibility: visible; }
.nav__list { flex-direction: column; }
.nav__link { padding: 16px 4px; font-size: 1.15rem; border-bottom: 1px solid var(--line); }
.nav__link::after { display: none; }
.nav__link[aria-current="page"] { color: var(--cyan-600); }
.nav .btn { margin: 18px 0 0; }
}
/* --- Celular --- */
@media (max-width: 600px) {
:root { --header-h: 68px; }
body { font-size: 1rem; }
.brand img { height: 40px; }
.grid-3, .grid-2, .benefits, .includes, .form__row, .footer__grid { grid-template-columns: 1fr; }
.btn { white-space: normal; text-align: center; line-height: 1.2; }
.brands { gap: 14px; }
.brand-card { flex-basis: 100%; padding: 22px; }
.brand-card__logo { height: 56px; }
.brand-card__logo img { max-height: 50px; }
.hero__actions .btn, .page-hero__actions .btn { flex: 1 1 100%; }
.card { padding: 24px; }
.mockup__badge { left: 0; }
.feature-band { border-radius: 22px; }
.wa-float { right: 14px; bottom: 14px; width: 56px; height: 56px; }
}
/* ==========================================================================
22. ACCESIBILIDAD: MOVIMIENTO REDUCIDO
Si la persona configuró su sistema para "reducir movimiento",
se desactivan las animaciones.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
[data-reveal] { opacity: 1; transform: none; }
.smile path { stroke-dashoffset: 0; }
}