/* ══════════════════════════════════════════════
LOS REYES DEL SARAO — glass.css
Capa «cristal hinchable» (31 oct 2026).
Va DESPUÉS de styles.css (y de producto.css en la ficha): quitar su
deja la web exactamente como estaba.
Idea: cristal esmerilado con el brillo del PVC de un hinchable, flotando
sobre globos con los colores de la marca.
Rendimiento: desenfoque real (backdrop-filter) solo donde pasa contenido por
detrás (menú, hero, pestañas, pie). Las tarjetas son cristal translúcido sin
desenfoque: detrás solo hay globos ya difuminados, y así el scroll no se traba
en móviles modestos.
══════════════════════════════════════════════ */
/* ── TOKENS ─────────────────────────────────── */
:root {
--nav-h: 64px;
--ink-mute: #62627E; /* más contraste sobre cristal */
--g-fill: linear-gradient(150deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.48) 52%, rgba(255,255,255,.6) 100%);
--g-fill-strong: linear-gradient(150deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.68) 100%);
--g-line: rgba(255,255,255,.8);
--g-blur: blur(22px) saturate(180%);
--g-inset: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.3);
--g-shadow: 0 1px 2px rgba(26,26,46,.05), 0 16px 36px -14px rgba(26,26,46,.24);
--g-shadow-hi: 0 1px 2px rgba(26,26,46,.05), 0 28px 52px -18px rgba(255,107,26,.42);
--gloss: linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.08) 70%, rgba(255,255,255,0) 100%);
}
body, .detalle-page { background: #FFF7F0; }
/* ── FONDO: GLOBOS ──────────────────────────── */
.glass-bg {
position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
background: linear-gradient(180deg, #FFF8F1 0%, #FFF1E7 45%, #F8F2FF 100%);
}
.gb {
position: absolute; border-radius: 50%;
width: var(--s); height: var(--s);
background:
radial-gradient(circle at 34% 28%, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 20%),
radial-gradient(circle at 50% 50%, var(--c) 0%, var(--c2) 46%, transparent 70%);
animation: gbDrift var(--t, 30s) ease-in-out infinite alternate;
will-change: transform;
}
.gb-1 { --s: clamp(300px, 46vmax, 640px); --c: rgba(255,140,66,.62); --c2: rgba(255,107,26,.34); left: -14%; top: -12%; --t: 34s; }
.gb-2 { --s: clamp(260px, 38vmax, 520px); --c: rgba(255,94,128,.55); --c2: rgba(255,77,109,.3); right: -12%; top: 6%; --t: 28s; animation-delay: -6s; }
.gb-3 { --s: clamp(200px, 28vmax, 400px); --c: rgba(255,222,64,.62); --c2: rgba(255,214,10,.34); left: 4%; top: 44%; --t: 24s; animation-delay: -12s; }
.gb-4 { --s: clamp(260px, 40vmax, 560px); --c: rgba(32,224,170,.5); --c2: rgba(6,214,160,.28); right: -10%; bottom: -14%; --t: 36s; animation-delay: -3s; }
.gb-5 { --s: clamp(220px, 32vmax, 460px); --c: rgba(40,160,210,.48); --c2: rgba(17,138,178,.26); left: -10%; bottom: -10%; --t: 30s; animation-delay: -18s; }
.gb-6 { --s: clamp(150px, 20vmax, 280px); --c: rgba(170,120,240,.5); --c2: rgba(155,93,229,.28); right: 22%; top: 36%; --t: 26s; animation-delay: -9s; }
@keyframes gbDrift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(28px, -36px) scale(1.06); }
}
/* Todo el contenido por encima de los globos */
.breadcrumb, .detalle-main, .otros-productos { position: relative; z-index: 1; }
.catalogo, .contact, .otros-productos { background: transparent; }
/* ── BRILLO DE PVC (botones y chips de color) ─ */
.btn-primary, .nav-cta, .cat-tab.active, .btn-whatsapp-hero, .ig-btn, .btn-whatsapp,
.pillar-icon, .how-step-icon, .contact-card-icon {
position: relative; isolation: isolate; overflow: hidden;
}
.detalle-img-badge { isolation: isolate; overflow: hidden; } /* ya es absolute */
.btn-primary::before, .nav-cta::before, .cat-tab.active::before, .btn-whatsapp-hero::before,
.ig-btn::before, .btn-whatsapp::before, .pillar-icon::before, .how-step-icon::before,
.contact-card-icon::before, .detalle-img-badge::before {
content: ""; position: absolute; z-index: -1; pointer-events: none;
left: 8%; right: 8%; top: 2px; height: 50%;
border-radius: 999px; background: var(--gloss);
}
.btn-primary { box-shadow: inset 0 -2px 6px rgba(150,40,0,.16), 0 12px 26px -12px rgba(255,77,109,.7); }
.btn-primary:hover { box-shadow: inset 0 -2px 6px rgba(150,40,0,.16), 0 18px 34px -14px rgba(255,77,109,.8); }
/* ── NAV: PÍLDORA DE CRISTAL FLOTANTE ───────── */
/* El cristal va en ::before y no en .nav: un elemento con backdrop-filter
deja ciego el desenfoque de sus hijos (el menú móvil). */
.nav, .nav.is-solid {
top: 12px; inset-inline: 12px; margin-inline: auto; max-width: 1180px;
height: var(--nav-h); padding: 0 .55rem 0 1rem; border-radius: 999px;
background: transparent; box-shadow: none;
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav::before {
content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
background: var(--g-fill);
-webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
border: 1px solid var(--g-line);
box-shadow: var(--g-inset), var(--g-shadow);
transition: background .35s;
}
.nav.is-solid::before { background: var(--g-fill-strong); }
.nav-logo-img { height: 42px; }
.nav-links { gap: .2rem; }
.nav-links a { padding: .5rem .95rem; border-radius: 999px; transition: background .2s, color .2s; }
.nav-links a::after { display: none; }
.nav-links a:not(.nav-cta):hover { background: rgba(255,255,255,.75); color: var(--ink); }
.nav-cta {
padding: .62rem 1.3rem !important;
box-shadow: 0 8px 18px -8px rgba(255,77,109,.75);
}
.nav-burger { width: 44px; height: 44px; padding: 12px 10px; border-radius: 999px; justify-content: center; }
.nav-burger:hover { background: rgba(255,255,255,.7); }
/* ── HERO ───────────────────────────────────── */
.hero { background: #FFB98A; }
.hero-overlay {
background:
linear-gradient(90deg, rgba(255,107,26,.3) 0%, rgba(255,107,26,.08) 45%, rgba(255,107,26,0) 70%),
linear-gradient(180deg, rgba(20,13,6,.22) 0%, rgba(20,13,6,0) 28%, rgba(20,13,6,0) 70%, rgba(20,13,6,.3) 100%);
}
.hero-content {
max-width: 620px;
margin: calc(var(--nav-h) + 44px) clamp(12px, 5vw, 4rem) 4.5rem;
padding: clamp(1.4rem, 3.2vw, 2.6rem);
border-radius: 36px;
background: linear-gradient(150deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.52) 60%, rgba(255,255,255,.62) 100%);
-webkit-backdrop-filter: blur(28px) saturate(170%); backdrop-filter: blur(28px) saturate(170%);
border: 1px solid rgba(255,255,255,.8);
box-shadow: var(--g-inset), 0 40px 80px -36px rgba(90,30,0,.55);
}
.hero-badge {
background: rgba(255,255,255,.75); color: var(--orange);
border: 1px solid #fff;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(255,107,26,.6);
margin-bottom: 1rem;
}
.hero-title {
color: var(--ink); text-shadow: none;
font-size: clamp(2.3rem, 5.2vw, 3.9rem);
}
.hero-big {
font-size: clamp(2.9rem, 12.5vw, 5.8rem);
background: linear-gradient(135deg, var(--orange) 0%, var(--coral) 70%, #E8357A 100%);
-webkit-background-clip: text; background-clip: text;
filter: drop-shadow(0 6px 18px rgba(255,77,109,.28));
}
.hero-desc { color: var(--ink-soft); margin: 1rem 0 1.6rem; }
.hero-actions { margin-bottom: 1.6rem; }
.hero-actions .btn-ghost {
background: rgba(255,255,255,.62); color: var(--ink);
border: 1px solid #fff;
-webkit-backdrop-filter: none; backdrop-filter: none;
box-shadow: inset 0 1px 0 #fff, 0 10px 22px -12px rgba(26,26,46,.4);
}
.hero-actions .btn-ghost:hover { background: #fff; color: var(--orange); }
.hero-stats {
width: auto; gap: 1.25rem;
padding: 1.1rem 0 0; border-radius: 0;
background: none; border: 0; border-top: 1px solid rgba(26,26,46,.1);
-webkit-backdrop-filter: none; backdrop-filter: none;
}
.stat { align-items: flex-start; }
.stat-num {
color: var(--orange);
background: linear-gradient(135deg, var(--orange), var(--coral));
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--ink-soft); }
.stat-divider { background: rgba(26,26,46,.12); }
.hero-scroll-hint { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.hero-scroll-hint svg { color: #fff; }
/* ── MARQUEE: PÍLDORA OSCURA QUE PISA EL HERO ─ */
.marquee-wrap {
z-index: 3; margin: -30px 12px 0; padding: .8rem 0; border-radius: 999px;
background: linear-gradient(150deg, rgba(26,26,46,.88), rgba(46,32,66,.8));
-webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
border: 1px solid rgba(255,255,255,.14);
box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 18px 40px -18px rgba(26,26,46,.55);
}
/* Los puntos son y heredaban el padding de los textos: salían óvalos */
.marquee-track .marquee-dot { padding: 0; margin: 0 .2rem; }
/* ── TÍTULOS DE SECCIÓN ─────────────────────── */
.section-kicker {
padding: .38rem .95rem; border-radius: 999px;
background: rgba(255,255,255,.65); border: 1px solid #fff;
box-shadow: inset 0 1px 0 #fff, 0 6px 14px -8px rgba(255,107,26,.5);
}
/* ── TARJETAS DE CRISTAL ────────────────────── */
.pillar, .how-step, .contact-card, .ig-card, .prod-card, .how-note,
.otro-card, .medida-item, .detalle-reserva {
background: var(--g-fill);
border: 1px solid var(--g-line);
box-shadow: var(--g-inset), var(--g-shadow);
}
.pillar:hover, .how-step:hover, .contact-card:hover, .prod-card:hover, .otro-card:hover, .medida-item:hover {
border-color: #fff;
box-shadow: var(--g-inset), var(--g-shadow-hi);
}
@media (hover: none) {
.prod-card:active, .otro-card:active, .contact-card:active { transform: scale(.98); }
}
/* Chips de icono: caramelo de color, uno por idea */
.pillar-icon, .how-step-icon, .contact-card-icon {
color: #fff;
box-shadow: inset 0 -3px 6px rgba(0,0,0,.08), 0 10px 18px -10px var(--sombra, rgba(255,107,26,.8));
}
.pillar:nth-child(1) .pillar-icon { background: linear-gradient(145deg, #FF9A5C, var(--orange)); --sombra: rgba(255,107,26,.8); }
.pillar:nth-child(2) .pillar-icon { background: linear-gradient(145deg, #42B9E2, var(--blue)); --sombra: rgba(17,138,178,.8); }
.pillar:nth-child(3) .pillar-icon { background: linear-gradient(145deg, #BC90F2, var(--purple)); --sombra: rgba(155,93,229,.8); }
.pillar:nth-child(4) .pillar-icon { background: linear-gradient(145deg, #3FE6BC, #05B488); --sombra: rgba(6,180,136,.8); }
.how-step:nth-child(1) .how-step-icon { background: linear-gradient(145deg, #3FE6BC, #05B488); --sombra: rgba(6,180,136,.8); }
.how-step:nth-child(3) .how-step-icon { background: linear-gradient(145deg, #42B9E2, var(--blue)); --sombra: rgba(17,138,178,.8); }
.how-step:nth-child(5) .how-step-icon { background: linear-gradient(145deg, #BC90F2, var(--purple)); --sombra: rgba(155,93,229,.8); }
.how-step:nth-child(7) .how-step-icon { background: linear-gradient(145deg, #FF9A5C, var(--coral)); --sombra: rgba(255,77,109,.8); }
.contact-card--phone .contact-card-icon { color: #fff; background: linear-gradient(145deg, #4BE38A, #1DA851); --sombra: rgba(29,168,81,.8); }
.contact-card--instagram .contact-card-icon { color: #fff; background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); --sombra: rgba(221,42,123,.8); }
.contact-card--email .contact-card-icon { color: #fff; background: linear-gradient(145deg, #42B9E2, var(--blue)); --sombra: rgba(17,138,178,.8); }
/* ── NOSOTROS ───────────────────────────────── */
.pillar { border-radius: 24px; padding: 1.15rem 1.2rem; }
.pillar-icon { border-radius: 16px; }
.pillar p { color: var(--ink-soft); }
/* ── CATÁLOGO ───────────────────────────────── */
/* Pestañas: control segmentado de cristal, fijo bajo el menú mientras se baja
por la lista (en móvil se desliza en horizontal). */
.cat-tabs {
position: sticky; top: calc(var(--nav-h) + 22px); z-index: 20;
/* flex-start y no center: centrado + desbordamiento esconde la primera
pestaña por la izquierda sin poder llegar a ella */
flex-wrap: nowrap; justify-content: flex-start; gap: .3rem;
width: max-content; max-width: 100%; margin: 0 auto 2.25rem;
padding: .38rem; border-radius: 999px;
overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
background: var(--g-fill-strong);
-webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
border: 1px solid var(--g-line);
box-shadow: var(--g-inset), var(--g-shadow);
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab, .cat-tab:hover, .cat-tab.active {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem;
padding: .62rem 1.15rem; border: 0; transform: none;
transition: background .25s, color .25s, box-shadow .25s;
}
.cat-tab { background: transparent; color: var(--ink-soft); box-shadow: none; }
.cat-tab:hover { background: rgba(255,255,255,.8); color: var(--ink); }
.cat-tab.active, .cat-tab.active:hover {
color: #fff;
background: linear-gradient(135deg, var(--orange), var(--coral));
box-shadow: 0 8px 18px -8px rgba(255,77,109,.8);
}
.cat-tab.active[data-cat="acuaticos"] { background: linear-gradient(135deg, #34BCE6, var(--blue)); box-shadow: 0 8px 18px -8px rgba(17,138,178,.8); }
.cat-tab.active[data-cat="atracciones"] { background: linear-gradient(135deg, #FFB703, var(--orange)); box-shadow: 0 8px 18px -8px rgba(255,140,0,.8); }
.cat-tab.active[data-cat="espuma"] { background: linear-gradient(135deg, #2EE0B2, #03A87E); box-shadow: 0 8px 18px -8px rgba(6,180,136,.8); }
.cat-tab.active[data-cat="carpas"] { background: linear-gradient(135deg, #B88CF2, var(--purple)); box-shadow: 0 8px 18px -8px rgba(155,93,229,.8); }
.cat-grid { gap: 1.35rem; }
.prod-card { border-radius: 30px; position: relative; }
/* Reflejo del cristal sobre la tarjeta */
.prod-card::after, .otro-card::after {
content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
background: linear-gradient(165deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 24%);
}
/* Base de la foto: opaca y tintada por categoría. Las fotos son recortes sobre
blanco puro; con multiply el blanco desaparece y el hinchable queda apoyado
en la base, sin la caja blanca. */
.prod-card-img-real {
margin: 10px 10px 0; border-radius: 22px;
--base: #FFE6D3;
background: radial-gradient(130% 100% at 30% 15%, #FFFFFF 0%, #FFF6EE 50%, var(--base) 100%);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.9);
}
.prod-card-img-real img { mix-blend-mode: multiply; padding: .75rem; }
.cat-grid[data-panel="acuaticos"] .prod-card-img-real { --base: #D6EDF7; }
.cat-grid[data-panel="atracciones"] .prod-card-img-real { --base: #FFEFB5; }
.cat-grid[data-panel="espuma"] .prod-card-img-real { --base: #CFF4E8; }
.cat-grid[data-panel="carpas"] .prod-card-img-real { --base: #E9DDFC; }
.prod-card-body { padding: 1rem 1.2rem 1.25rem; }
.prod-name { font-size: 1.3rem; }
.prod-tag { box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.prod-dims span {
background: rgba(255,255,255,.75); color: var(--ink-soft);
border: 1px solid rgba(26,26,46,.07); border-radius: 999px; padding: .22rem .7rem;
}
.prod-ver-mas::after { content: " →"; }
/* ── CÓMO FUNCIONA ──────────────────────────── */
.how-step { border-radius: 30px; padding: 1.9rem 1.4rem 1.7rem; }
.how-step-arrow svg { color: rgba(26,26,46,.28); }
.how-note {
border-radius: 24px;
background: linear-gradient(135deg, rgba(255,236,150,.6), rgba(255,255,255,.58));
}
.how-note svg { color: #D98E00; }
/* ── CONTACTO ───────────────────────────────── */
.contact-card { border-radius: 26px; }
.ig-card { border-radius: 30px; }
.ig-grid span { box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -10px 20px -12px rgba(0,0,0,.18); }
.btn-whatsapp-hero { box-shadow: inset 0 -2px 6px rgba(0,60,30,.18), 0 14px 32px -12px rgba(37,211,102,.7); }
/* ── PIE: CRISTAL OSCURO FLOTANTE ───────────── */
.footer {
margin: 0 12px 12px; border-radius: 32px;
background: linear-gradient(150deg, rgba(26,26,46,.9), rgba(40,30,60,.86));
-webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%);
border: 1px solid rgba(255,255,255,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 20px 50px -24px rgba(26,26,46,.6);
}
/* ── FICHA DE PRODUCTO (producto.html) ──────── */
.breadcrumb { padding: calc(var(--nav-h) + 34px) 0 .25rem; background: transparent; border: 0; }
.detalle-media { top: calc(var(--nav-h) + 30px); }
.detalle-img-wrap {
border: 0; border-radius: 30px;
background: radial-gradient(130% 100% at 30% 15%, #FFFFFF 0%, #FFF6EE 50%, #FFE6D3 100%);
box-shadow: 0 0 0 1px #fff, 0 0 0 9px rgba(255,255,255,.45), 0 34px 64px -30px rgba(26,26,46,.45);
}
.detalle-img-wrap img { mix-blend-mode: multiply; }
.detalle-img-badge { box-shadow: 0 6px 14px -6px rgba(255,77,109,.7); }
.det-arrow {
background: rgba(255,255,255,.62);
-webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
border: 1px solid #fff;
box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(26,26,46,.4);
}
.det-thumb {
border: 1px solid #fff; border-radius: 16px;
background: radial-gradient(130% 100% at 30% 15%, #FFFFFF 0%, #FFF6EE 60%, #FFE6D3 100%);
box-shadow: 0 6px 14px -8px rgba(26,26,46,.35);
}
.det-thumb img { mix-blend-mode: multiply; }
.det-thumb.active { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(255,107,26,.3), 0 6px 14px -8px rgba(26,26,46,.35); }
.medida-item { border-radius: 20px; }
#det-features-list li {
border-radius: 14px;
background: linear-gradient(90deg, rgba(6,214,160,.18), rgba(255,255,255,.6));
box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}
.detalle-nota {
border-radius: 20px; border: 1px solid var(--g-line);
background: linear-gradient(135deg, rgba(255,236,150,.6), rgba(255,255,255,.58));
box-shadow: var(--g-inset), var(--g-shadow);
}
.detalle-reserva { border-radius: 30px; }
.form-row input {
border: 1px solid rgba(26,26,46,.1); border-radius: 14px;
background: rgba(255,255,255,.72);
box-shadow: inset 0 1px 2px rgba(26,26,46,.06);
}
.form-row input:focus { background: #fff; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255,107,26,.15); }
.btn-whatsapp { box-shadow: inset 0 -2px 6px rgba(0,60,30,.18), 0 12px 28px -12px rgba(37,211,102,.7); }
.otro-card { border-radius: 26px; position: relative; }
/* El JS pone un degradado translúcido en línea; se le da base opaca debajo para
que el multiply funcione. */
.otro-card-img { margin: 8px 8px 0; border-radius: 20px; background-color: #FFFAF6 !important; }
.otro-card-img img { mix-blend-mode: multiply; }
/* ── MÓVIL ──────────────────────────────────── */
@media (max-width: 700px) {
:root { --nav-h: 58px; }
.nav, .nav.is-solid { top: 10px; inset-inline: 10px; padding: 0 .4rem 0 .9rem; }
.nav-logo-img { height: 38px; }
/* Menú desplegable: lámina de cristal bajo la píldora, no pantalla completa */
.nav.menu-open .nav-links {
position: absolute; inset: calc(100% + 10px) 0 auto 0;
flex-direction: column; align-items: stretch; justify-content: flex-start; gap: .2rem;
padding: .6rem; border-radius: 28px;
background: var(--g-fill-strong);
-webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
border: 1px solid var(--g-line);
box-shadow: var(--g-inset), 0 24px 50px -20px rgba(26,26,46,.4);
}
.nav.menu-open .nav-links a { display: block; text-align: center; font-size: 1.1rem; padding: .85rem 1rem; border-radius: 20px; }
.nav.menu-open .nav-links .nav-cta { margin-top: .3rem; }
/* Ya venía roto: `.about-grid--noimg .about-pillars` (2 columnas) ganaba a la
regla de móvil por especificidad y las tarjetas empujaban el texto fuera */
.about-grid--noimg .about-pillars { grid-template-columns: 1fr; }
.hero { align-items: flex-end; }
.hero-content { margin: calc(var(--nav-h) + 30vh) 12px 46px; padding: 1.35rem 1.25rem 1.25rem; border-radius: 30px; }
.hero-actions { gap: .6rem; }
.hero-actions .btn { flex: 1 1 auto; justify-content: center; padding: .8rem 1.2rem; }
.hero-stats { flex-direction: row; justify-content: space-between; gap: .75rem; }
.stat-divider { width: 1px; height: 30px; }
.stat-num { font-size: 1.35rem; }
.stat-label { font-size: .64rem; }
.hero-scroll-hint { display: none; }
.marquee-wrap { margin: -24px 10px 0; padding: .7rem 0; }
.marquee-track span { padding: 0 1.6rem; font-size: .8rem; }
.cat-tabs { top: calc(var(--nav-h) + 18px); margin-bottom: 1.5rem; }
.cat-tab, .cat-tab:hover, .cat-tab.active { padding: .55rem .95rem; font-size: .85rem; }
.footer { margin: 0 10px 10px; border-radius: 28px; }
}
/* ── ACCESIBILIDAD Y NAVEGADORES SIN CRISTAL ── */
@media (prefers-reduced-motion: reduce) {
.gb { animation: none; }
}
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
.nav::before, .cat-tabs, .nav.menu-open .nav-links { background: rgba(255,255,255,.95); }
.hero-content { background: rgba(255,255,255,.9); }
}
@media (prefers-reduced-transparency: reduce) {
.nav::before, .cat-tabs, .nav.menu-open .nav-links, .hero-content,
.pillar, .how-step, .contact-card, .ig-card, .prod-card, .how-note,
.otro-card, .medida-item, .detalle-reserva { background: rgba(255,255,255,.96); }
.gb { opacity: .5; }
}
/* ── FORMULARIO DE SOLICITUD (31 oct 2026) ──── */
.res-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; }
.res-chip {
display: inline-flex; align-items: center; gap: .35rem;
padding: .4rem .8rem; border-radius: 999px;
background: linear-gradient(135deg, rgba(255,107,26,.16), rgba(255,77,109,.12));
border: 1px solid rgba(255,107,26,.3); color: #B44A0C; font-weight: 800; font-size: .9rem;
}
.res-chip button {
width: 22px; height: 22px; border-radius: 50%; border: 0; cursor: pointer;
background: rgba(180,74,12,.14); color: #B44A0C; font-size: .7rem; line-height: 1;
}
#res-mas {
width: 100%; padding: .75rem 1rem; border-radius: 14px;
border: 1px solid rgba(26,26,46,.1); background: rgba(255,255,255,.72);
font-family: 'Nunito', sans-serif; font-size: .95rem; font-weight: 700; color: var(--ink-soft);
}
/* Trampa anti-spam: fuera de la vista y del lector de pantalla */
.res-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.res-error {
margin: 0; padding: .7rem 1rem; border-radius: 14px;
background: rgba(255,77,109,.12); border: 1px solid rgba(255,77,109,.35);
color: #B3203E; font-weight: 800; font-size: .9rem;
}
.res-nota { font-size: .82rem; color: var(--ink-mute); text-align: center; margin: 0; }
.btn-whatsapp[disabled] { opacity: .75; cursor: default; transform: none; }
.form-row input, #res-mas { font-size: 16px; } /* 16 px: el iPhone no hace zoom al tocar */
.res-dispo { margin: 0; padding: .65rem .9rem; border-radius: 14px; font-weight: 800; font-size: .88rem; line-height: 1.4; }
.res-dispo.libre { background: rgba(6,214,160,.14); border: 1px solid rgba(6,180,136,.35); color: #067a5b; }
.res-dispo.ocupado { background: rgba(255,183,3,.16); border: 1px solid rgba(255,140,0,.4); color: #9a5200; }
/* ══ 2 nov 2026: catálogo compacto, «Cómo funciona» en filas, botón fijo ══ */
/* Catálogo: 4 columnas en escritorio, 2 en el móvil (antes 1: ~17.000 px de scroll) */
.cat-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.cat-grid .prod-tag { display: none; } /* ya lo dice la pestaña */
.prod-card-body { display: flex; flex-direction: column; gap: .45rem; }
.prod-name { margin: 0; line-height: 1.15; }
.prod-dims { margin: 0; }
.prod-ver-mas { margin-top: .15rem; }
@media (max-width: 600px) {
.cat-grid { grid-template-columns: 1fr 1fr; gap: .7rem; }
.cat-grid--single { grid-template-columns: 1fr; }
.prod-card { border-radius: 22px; }
.prod-card-img-real { margin: 6px 6px 0; border-radius: 17px; }
.prod-card-img-real img { padding: .4rem; }
.prod-card-body { padding: .65rem .75rem .8rem; gap: .35rem; }
.prod-name { font-size: 1rem; }
.prod-dims span { font-size: .68rem; padding: .15rem .5rem; }
.prod-ver-mas { font-size: .76rem; }
}
/* Cómo funciona: en el móvil, filas compactas (icono a la izquierda) */
@media (max-width: 700px) {
.how-steps { flex-direction: column; gap: .7rem; }
.how-step {
max-width: none; min-width: 0; width: 100%;
display: grid; grid-template-columns: 56px 1fr; column-gap: 1rem; row-gap: .2rem;
align-items: center; text-align: left; padding: 1.1rem 1.2rem; border-radius: 24px;
}
.how-step-icon { grid-row: 1 / span 3; width: 56px; height: 56px; margin: 0; }
.how-step-num { margin: 0; }
.how-step h3 { margin: 0; font-size: 1.1rem; }
.how-step p { grid-column: 2; }
}
/* Ficha en el móvil: botón fijo «Solicitar reserva» hasta que se ve el formulario */
.cta-fija { display: none; }
@media (max-width: 900px) {
.cta-fija {
position: fixed; left: 12px; right: 12px; bottom: 14px; z-index: 90;
display: flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 54px; border-radius: 999px; color: #fff; font-weight: 900; font-size: 1.05rem;
background: linear-gradient(135deg, var(--orange), var(--coral));
box-shadow: 0 14px 30px -10px rgba(255,77,109,.75); text-decoration: none;
isolation: isolate; overflow: hidden;
transition: transform .3s var(--ease-out), opacity .3s;
}
.cta-fija::before { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; top: 2px; height: 50%; border-radius: 999px; background: var(--gloss); }
.cta-fija.oculta { transform: translateY(140%); opacity: 0; pointer-events: none; }
.detalle-page .footer { margin-bottom: 84px; }
}
#reserva { scroll-margin-top: 90px; } /* que no quede bajo el menú flotante */