/* avglanding.com — estilos de la página.
   Viene del lienzo de Claude Design «avglanding.com» (artboard Main), pasado de estilos en línea a clases porque la
   política de seguridad (CSP) no permite atributos style ni <style> en el HTML.
   Compatibilidad: iOS 14.5+ / Safari 14.1+ y navegadores de 2021 en adelante. Por eso:
   - el dorado y sus mezclas van como colores fijos (color-mix solo existe desde Safari 16.2);
   - las tarjetas del carrusel usan --u (1 % de su ancho) en lugar de unidades cqw (Safari 16);
   - la altura de las tarjetas va calculada en lugar de aspect-ratio (Safari 15). */

/* ── Fuentes (SIL Open Font License, ver /fonts/LICENCIAS.txt) ───────────────── */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/manrope.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap; src: url(/fonts/bricolage-grotesque.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italica.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/bebas-neue.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-garamond-500.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/fonts/cormorant-garamond-500-italica.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond-600.woff2?v=b2da28513e62) format('woff2'); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/space-grotesk.woff2?v=b2da28513e62) format('woff2'); }

/* ── Base ─────────────────────────────────────────────────────────────────────── */
:root {
  color-scheme: dark;
  --fondo: #06070C;
  --texto: #F4F1EA;
  --oro: #FFC857;
  --oro-claro: #FFD47C;       /* = color-mix(#FFC857 78 %, blanco) */
  --oro-sombra: #85682D;      /* = color-mix(#FFC857 52 %, negro) */
  --tinta: #0A0B0D;
  --gris-1: #E4E0D8;
  --gris-2: #D2CEC6;
  --gris-3: #C2BDB4;
  --gris-4: #B9B4AB;
  --gris-5: #A6A29A;
  --f-titulo: 'Bricolage Grotesque', Manrope, system-ui, sans-serif;
  --f-serif: 'Instrument Serif', Georgia, serif;
  --f-texto: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fondo); }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--f-texto); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }  /* también para <svg>, que no siempre lo respeta */
a { color: var(--texto); text-decoration: none; }
a:hover { color: var(--oro); }
button { font: inherit; cursor: pointer; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--oro); outline-offset: 3px; }

.lista-sin { margin: 0; padding: 0; list-style: none; }
.oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--oro); color: var(--tinta); font-weight: 800; }
.saltar:focus { top: 16px; color: var(--tinta); }

.pagina { position: relative; min-height: 100vh; background: var(--fondo); overflow-x: clip; }
.contenedor { max-width: 1240px; margin: 0 auto; }
.seccion { position: relative; padding: clamp(80px, 10vw, 140px) clamp(20px, 4vw, 40px) 0; scroll-margin-top: 60px; }
.seccion-corta { padding-top: clamp(72px, 9vw, 120px); }

/* Tipografía de títulos */
.t { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -.045em; }
.s { font-family: var(--f-serif); font-weight: 400; font-style: italic; letter-spacing: -.01em; }
.oro { color: var(--oro); }
.apagado { color: var(--gris-4); }
.sobretitulo { font-size: 12px; font-weight: 800; letter-spacing: .22em; text-transform: uppercase; color: var(--oro); }
.titulo-seccion { margin: 0; font-size: clamp(40px, 5.8vw, 78px); line-height: .95; color: #fff; }
.encabezado { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.encabezado-720 { max-width: 720px; }

/* ── Vidrio ───────────────────────────────────────────────────────────────────── */
.vidrio {
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.025));
  border: 1px solid rgba(255,255,255,.13);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 34px 70px -34px rgba(0,0,0,.85);
}
.vidrio-oro {
  background: linear-gradient(180deg, rgba(255,200,87,.16), rgba(255,255,255,.03));
  border: 1px solid rgba(255,200,87,.55);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 40px 80px -34px rgba(255,200,87,.4);
}

/* ── Inclinación 3D con el cursor (sitio.js pone --rx, --ry, --mx, --my) ─────── */
.inclinar { position: relative; transform: perspective(1100px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; transform-style: preserve-3d; }
.brillo { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(440px circle at var(--mx, 50%) var(--my, -30%), rgba(255,255,255,.16), transparent 60%); }
.salta { transform: translateZ(34px); }

/* ── Botones 3D ───────────────────────────────────────────────────────────────── */
.btn, .btn-vidrio {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; border-radius: 16px; font-size: 15px; text-align: center;
  transition: transform .14s ease, box-shadow .14s ease, border-color .2s ease;
}
.btn {
  padding: 0 28px; border: 0; font-weight: 800; color: var(--tinta); overflow: hidden;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 6px 0 var(--oro-sombra), 0 22px 34px -10px rgba(255,200,87,.55);
}
.btn:hover { color: var(--tinta); }
.btn::after { content: ""; position: absolute; top: 0; left: -70%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent); transform: skewX(-20deg); animation: brillo-boton 3.8s ease-in-out infinite; pointer-events: none; }
.btn:active { transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 0 var(--oro-sombra), 0 8px 14px -8px rgba(255,200,87,.55); }
.btn-vidrio {
  padding: 0 26px; font-weight: 700; color: var(--texto);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.04));
  border: 1px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 0 rgba(255,255,255,.09), 0 20px 30px -14px rgba(0,0,0,.8);
}
.btn-vidrio:hover { color: #fff; border-color: rgba(255,200,87,.7); }
.btn-vidrio:active { transform: translateY(5px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 1px 0 rgba(255,255,255,.09), 0 8px 14px -10px rgba(0,0,0,.8); }
.btn svg, .btn-vidrio svg { flex: none; transition: transform .2s ease; }
@media (hover: hover) {
  .btn:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 9px 0 var(--oro-sombra), 0 30px 40px -10px rgba(255,200,87,.6); }
  .btn-vidrio:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 9px 0 rgba(255,255,255,.09), 0 26px 34px -14px rgba(0,0,0,.8); }
  .btn:hover .flecha, .btn-vidrio:hover .flecha { transform: translateX(5px); }
  .btn-vidrio:hover .flecha-atras { transform: translateX(-5px); }
}
.btn-chico { min-height: 46px; padding: 0 20px; border-radius: 14px; font-size: 14px; }
.btn-ancho { display: flex; width: 100%; }

/* ── Animaciones ──────────────────────────────────────────────────────────────── */
@keyframes desliza { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes brillo-boton { 0%, 55% { left: -70%; } 100% { left: 130%; } }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes deriva { from { transform: translate(-4%, -3%) scale(1); } to { transform: translate(5%, 4%) scale(1.12); } }
@keyframes onda { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
@keyframes aparece { from { opacity: 0; transform: translateY(46px) scale(.97); } to { opacity: 1; transform: none; } }
.flota { animation: flota 6s ease-in-out infinite; }
.flota-2 { animation: flota 7.5s ease-in-out -2s infinite; }
.onda { animation: onda 2.4s ease-out infinite; }
@supports (animation-timeline: view()) {
  .revela { animation: aparece linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
}

/* ── Luces de fondo ───────────────────────────────────────────────────────────── */
.luces { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; pointer-events: none; }
.orbe { position: absolute; border-radius: 999px; animation: deriva 16s ease-in-out infinite alternate; }
.orbe-azul { background: radial-gradient(closest-side, rgba(104,118,255,.34), rgba(104,118,255,0)); }
.orbe-oro { background: radial-gradient(closest-side, rgba(255,200,87,.30), rgba(255,200,87,0)); }
.orbe-1 { left: -12%; top: -6%; width: 760px; height: 760px; }
.orbe-2 { right: -14%; top: 420px; width: 820px; height: 820px; animation-delay: -6s; }
.orbe-3 { left: 8%; top: 2300px; width: 900px; height: 900px; animation-delay: -3s; background: radial-gradient(closest-side, rgba(104,118,255,.26), rgba(104,118,255,0)); }
.orbe-4 { right: -8%; top: 3900px; width: 860px; height: 860px; animation-delay: -9s; background: radial-gradient(closest-side, rgba(255,200,87,.24), rgba(255,200,87,0)); }

/* ── Menú ─────────────────────────────────────────────────────────────────────── */
.cabecera { position: -webkit-sticky; position: sticky; top: 0; z-index: 60; padding: 12px clamp(12px, 3vw, 32px) 0; }
.barra { max-width: 1240px; margin: 0 auto; padding: 10px 12px 10px 24px; border-radius: 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: rgba(10,12,20,.62); }
.marca { display: flex; align-items: baseline; font-size: 23px; color: var(--texto); }
.marca-pie { font-size: 22px; }
.menu { display: flex; gap: 30px; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.enlace { position: relative; display: inline-block; padding: 10px 2px; color: var(--gris-2); transition: color .2s ease, transform .2s ease; }
.enlace::after { content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--oro); box-shadow: 0 0 12px var(--oro); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
.enlace:hover { color: #fff; transform: translateY(-2px); }
.enlace:hover::after { transform: scaleX(1); }

/* ── Portada (hero) ───────────────────────────────────────────────────────────── */
.hero { position: relative; padding: clamp(48px, 7vw, 92px) clamp(20px, 4vw, 40px) 0; }
.hero-centro { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 26px; }
.pastilla { margin: 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-1); }
.punto-vivo { position: relative; width: 8px; height: 8px; border-radius: 999px; background: var(--oro); }
.punto-vivo .onda { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--oro); }
.hero-titulo { margin: 0; max-width: 1080px; font-size: clamp(46px, 8.6vw, 124px); line-height: .9; color: #fff; }
.hero-titulo .s { color: var(--oro); text-shadow: 0 0 60px rgba(255,200,87,.55); }
.hero-texto { margin: 0; max-width: 640px; font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6; color: var(--gris-3); }
.acciones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding-top: 8px; }
.confianza { margin: 0; padding: 6px 0 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; font-size: 14px; font-weight: 600; color: var(--gris-2); }
.confianza li { display: flex; align-items: center; gap: 8px; }

/* ── Carrusel de muestras ─────────────────────────────────────────────────────── */
.carrusel { position: relative; max-width: 1400px; margin: clamp(48px, 7vw, 80px) auto 0; scroll-margin-top: 110px; }
.carrusel-encabezado { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 0 20px 26px; }
.carrusel-titulo { margin: 0; font-size: clamp(30px, 4vw, 52px); line-height: 1; color: #fff; }
.carrusel-sub { margin: 0; font-size: 15px; color: var(--gris-4); }
.giros-tabs { position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0 8px 38px; }
.giro-tab {
  min-height: 42px; padding: 0 17px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06);
  color: var(--gris-1); font-size: 13px; font-weight: 700; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: all .3s ease;
}
.giro-tab[aria-selected="true"] { background: var(--oro); border-color: var(--oro); color: var(--tinta); box-shadow: 0 4px 0 rgba(0,0,0,.45), 0 14px 24px -10px var(--oro); }

/* Ancho de cada tarjeta y su unidad: --u es el 1 % de ese ancho (lo que en el diseño era 1cqw). */
.escenario { --ancho: min(660px, 82vw); --u: calc(var(--ancho) / 100); position: relative; height: calc(var(--ancho) * .64 + 30px); perspective: 1700px; perspective-origin: 50% 38%; }
.escenario-giro { position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; }
.muestra {
  position: absolute; left: 50%; top: 0; width: var(--ancho); height: calc(var(--ancho) * .625); padding: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: #0F1117; color: var(--texto); cursor: pointer;
  box-shadow: 0 50px 90px -30px rgba(0,0,0,.95), 0 0 110px -30px transparent;
  transform: translateX(-50%) translateX(186%) translateZ(-570px) rotateY(-90deg) scale(.79); opacity: 0; filter: brightness(.35); z-index: 17; pointer-events: none;
  transition: transform .9s cubic-bezier(.2,.75,.15,1), opacity .9s ease, filter .9s ease, box-shadow .9s ease;
}
/* Posición según la distancia a la tarjeta activa (sitio.js cambia data-pos). Todas las transformaciones usan la misma
   lista de funciones: si cambiara, la transición giraría las tarjetas por el camino equivocado. */
.muestra[data-pos="0"] { transform: translateX(-50%) translateX(0%) translateZ(60px) rotateY(0deg) scale(1); opacity: 1; filter: brightness(1); z-index: 20; pointer-events: auto; box-shadow: 0 50px 90px -30px rgba(0,0,0,.95), 0 0 110px -30px var(--acento); }
.muestra[data-pos="1"] { transform: translateX(-50%) translateX(62%) translateZ(-190px) rotateY(-30deg) scale(.93); opacity: .95; filter: brightness(.55); z-index: 19; pointer-events: auto; }
.muestra[data-pos="-1"] { transform: translateX(-50%) translateX(-62%) translateZ(-190px) rotateY(30deg) scale(.93); opacity: .95; filter: brightness(.55); z-index: 19; pointer-events: auto; }
.muestra[data-pos="2"] { transform: translateX(-50%) translateX(124%) translateZ(-380px) rotateY(-60deg) scale(.86); opacity: .6; filter: brightness(.35); z-index: 18; pointer-events: auto; }
.muestra[data-pos="-2"] { transform: translateX(-50%) translateX(-124%) translateZ(-380px) rotateY(60deg) scale(.86); opacity: .6; filter: brightness(.35); z-index: 18; pointer-events: auto; }
.muestra[data-pos="-3"] { transform: translateX(-50%) translateX(-186%) translateZ(-570px) rotateY(90deg) scale(.79); }

/* Cada muestra con su marca: fuente, espaciado, color y forma de botón. */
.m-restaurante { --acento: #E9B872; --fuente: var(--f-serif); --espaciado: 0; --tam: 7.6; --espaciado-titulo: -.01em; --estilo: italic; --radio: 999px; --foco: center; }
.m-taller { --acento: #FF8A4C; --fuente: 'Bebas Neue', Impact, sans-serif; --espaciado: .06em; --tam: 8.4; --espaciado-titulo: .01em; --estilo: normal; --radio: 4px; --foco: center 62%; }
.m-hotel { --acento: #F3D9A4; --fuente: 'Cormorant Garamond', Georgia, serif; --espaciado: .04em; --tam: 7.8; --espaciado-titulo: 0; --estilo: italic; --radio: 2px; --foco: center; }
.m-tienda { --acento: #FFB3D1; --fuente: 'Space Grotesk', system-ui, sans-serif; --espaciado: .12em; --tam: 7.2; --espaciado-titulo: -.03em; --estilo: normal; --radio: 999px; --foco: 70% center; }
.m-abogados { --acento: #D8C3A0; --fuente: 'Cormorant Garamond', Georgia, serif; --espaciado: .02em; --tam: 7; --espaciado-titulo: 0; --estilo: normal; --radio: 2px; --foco: center 30%; }
.m-contables { --acento: #9FE3C8; --fuente: var(--f-texto); --espaciado: -.03em; --tam: 6.4; --espaciado-titulo: -.03em; --estilo: normal; --radio: 10px; --foco: center; }
.m-portal { --acento: #FFC857; --fuente: var(--f-texto); --espaciado: -.03em; --tam: 6; --espaciado-titulo: -.03em; --estilo: normal; --radio: 10px; --foco: center; }

.navegador { position: relative; height: calc(var(--u) * 7.5); min-height: 22px; display: flex; align-items: center; gap: calc(var(--u) * 1.1); padding: 0 calc(var(--u) * 2.4); background: rgba(22,25,34,.96); border-bottom: 1px solid rgba(255,255,255,.07); }
.semaforo { width: calc(var(--u) * 1.5); height: calc(var(--u) * 1.5); border-radius: 999px; background: #FF6B5E; }
.semaforo-2 { background: #FFC24A; }
.semaforo-3 { background: #4BD37B; }
.direccion { margin: 0 auto; padding: calc(var(--u) * .7) calc(var(--u) * 3); border-radius: 999px; background: #0A0C12; font-size: calc(var(--u) * 1.9); color: #9A968E; letter-spacing: .02em; }
.muestra-cuerpo { position: absolute; top: max(22px, calc(var(--u) * 7.5)); right: 0; bottom: 0; left: 0; }
.lleno { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; }
.muestra-foto { object-fit: cover; object-position: var(--foco); }
.muestra-velo { background: linear-gradient(90deg, rgba(6,7,12,.9) 0%, rgba(6,7,12,.55) 48%, rgba(6,7,12,.06) 100%); }
.muestra-reflejo { background: linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 28%); pointer-events: none; }
.muestra-contenido { display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--u) * 3.4) calc(var(--u) * 4.4) calc(var(--u) * 4.4); }
.muestra-arriba { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 2); }
.muestra-marca { font-family: var(--fuente); font-size: calc(var(--u) * 3.4); font-weight: 700; letter-spacing: var(--espaciado); color: #fff; }
.muestra-menu { display: flex; gap: calc(var(--u) * 3); font-size: calc(var(--u) * 1.7); color: rgba(255,255,255,.8); letter-spacing: .08em; text-transform: uppercase; }
.muestra-texto { max-width: 62%; display: flex; flex-direction: column; gap: calc(var(--u) * 1.8); }
.muestra-gancho { font-size: calc(var(--u) * 1.7); font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--acento); }
.muestra-titulo { font-family: var(--fuente); font-size: calc(var(--u) * var(--tam)); line-height: 1; letter-spacing: var(--espaciado-titulo); font-style: var(--estilo); color: #fff; }
.muestra-sub { max-width: 90%; font-size: calc(var(--u) * 1.95); line-height: 1.5; color: rgba(255,255,255,.8); }
.muestra-botones { display: flex; gap: calc(var(--u) * 1.4); padding-top: calc(var(--u) * .8); }
.muestra-boton { padding: calc(var(--u) * 1.3) calc(var(--u) * 2.8); border-radius: var(--radio); font-size: calc(var(--u) * 1.8); }
.muestra-boton-1 { background: var(--acento); color: var(--tinta); font-weight: 700; box-shadow: 0 calc(var(--u) * .6) 0 rgba(0,0,0,.35); }
.muestra-boton-2 { border: 1px solid rgba(255,255,255,.4); background: rgba(255,255,255,.08); color: #fff; font-weight: 600; }
.portal { position: absolute; right: calc(var(--u) * 4); top: calc(var(--u) * 9); width: calc(var(--u) * 33); padding: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 2.4); background: rgba(16,18,26,.78); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); display: flex; flex-direction: column; gap: calc(var(--u) * 1.6); box-shadow: 0 20px 40px -10px rgba(0,0,0,.7); }
.portal-cabeza { display: flex; align-items: center; justify-content: space-between; font-size: calc(var(--u) * 1.7); color: var(--gris-5); letter-spacing: .14em; text-transform: uppercase; }
.portal-sello { padding: calc(var(--u) * .4) calc(var(--u) * 1.2); border-radius: 999px; background: rgba(159,227,200,.18); color: #9FE3C8; letter-spacing: .04em; text-transform: none; }
.portal-saludo { font-size: calc(var(--u) * 2.6); font-weight: 700; color: #fff; }
.portal-lista { display: flex; flex-direction: column; gap: calc(var(--u) * 1); }
.portal-fila { display: flex; justify-content: space-between; padding: calc(var(--u) * 1.3) calc(var(--u) * 1.6); border-radius: calc(var(--u) * 1.4); background: rgba(255,255,255,.07); font-size: calc(var(--u) * 1.75); color: #E8E3DA; }
.portal-nuevo { color: #9FE3C8; }
.portal-dato { color: var(--gris-3); }

.ficha { position: absolute; z-index: 40; padding: 14px 18px; border-radius: 18px; display: flex; align-items: center; gap: 12px; pointer-events: none; }
.ficha-1 { left: 5%; top: 12%; }
.ficha-2 { right: 5%; bottom: 14%; }
.ficha-icono { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--oro); color: var(--tinta); }
.ficha-icono-verde { background: #3DDC84; color: #06210F; }
.ficha-textos { display: flex; flex-direction: column; text-align: left; }
.ficha-etiqueta { font-size: 12px; color: var(--gris-3); }
.ficha-valor { font-size: 19px; letter-spacing: -.02em; color: #fff; }
.sombra-piso { width: min(620px, 74vw); height: 46px; margin: -4px auto 0; background: radial-gradient(closest-side, rgba(0,0,0,.85), rgba(0,0,0,0)); filter: blur(8px); }

.controles { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 14px 20px 0; }
.controles-fila { display: flex; align-items: center; gap: 16px; }
.puntos { display: flex; gap: 8px; }
.punto { height: 6px; width: 6px; border-radius: 999px; background: rgba(242,237,228,.25); transition: all .4s ease; }
.punto-activo { width: 28px; background: var(--oro); }
.btn-redondo { width: 46px; padding: 0; }
.detalle { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; width: min(600px, 100%); padding: 22px 26px; border-radius: 22px; }
.detalle-contador { font-size: 12px; font-weight: 800; letter-spacing: .22em; color: var(--oro); }
.detalle-titulo { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.05; color: #fff; }
.detalle-texto { margin: 0; font-size: 15px; line-height: 1.6; color: var(--gris-3); }

/* ── Promesas ─────────────────────────────────────────────────────────────────── */
.promesas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.promesa { padding: 30px 28px; border-radius: 22px; display: flex; flex-direction: column; gap: 10px; }
.promesa-grande { font-size: 50px; line-height: 1; color: var(--oro); }
.promesa-titulo { font-size: 15px; font-weight: 800; color: #fff; }
.promesa-texto { font-size: 14px; line-height: 1.6; color: var(--gris-4); }

/* ── Comparativa ──────────────────────────────────────────────────────────────── */
.pila-44 { display: flex; flex-direction: column; gap: 44px; }
.pila-48 { display: flex; flex-direction: column; gap: 48px; }
.pila-52 { display: flex; flex-direction: column; gap: 52px; }
.comparativa { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.lado { padding: clamp(26px, 3.4vw, 38px); border-radius: 28px; display: flex; flex-direction: column; gap: 22px; }
.lado-titulo { margin: 0; font-size: 30px; line-height: 1; color: var(--gris-2); }
.lado-titulo-oro { color: #fff; }
.lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.lista li { display: flex; gap: 12px; align-items: flex-start; }
.lista svg { flex: none; margin-top: 2px; }
.lista-15 { gap: 15px; font-size: 16px; color: var(--gris-3); }
.lista-blanca { color: #fff; }
.lista-13 { gap: 13px; font-size: 15px; }
.al-inicio { align-self: flex-start; margin-top: 4px; }

/* ── Marquesina ───────────────────────────────────────────────────────────────── */
.marquesina-marco { position: relative; margin-top: clamp(72px, 9vw, 110px); }
.marquesina { position: relative; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); overflow: hidden; padding: 24px 0; transform: rotate(-1.2deg) scale(1.02); }
.marquesina-pista { display: flex; width: -webkit-max-content; width: max-content; font-size: clamp(30px, 4.2vw, 56px); white-space: nowrap; color: rgba(255,255,255,.86); text-transform: uppercase; animation: desliza 38s linear infinite; }
/* Cada palabra lleva su espacio a la derecha (no gap): así la mitad de la pista mide exactamente un juego y el giro no salta. */
.marquesina-palabra { display: inline-flex; align-items: center; gap: 44px; padding-right: 44px; }
.rombo { width: 14px; height: 14px; border-radius: 4px; background: var(--oro); transform: rotate(45deg); }

/* ── Precios ──────────────────────────────────────────────────────────────────── */
.precios-encabezado { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; }
.precios-nota { margin: 0; max-width: 380px; font-size: 15px; line-height: 1.7; color: var(--gris-4); }
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: 18px; align-items: stretch; }
.plan { padding: clamp(26px, 3.4vw, 38px); border-radius: 28px; display: flex; flex-direction: column; gap: 24px; }
.plan-cabeza { display: flex; flex-direction: column; gap: 8px; }
.plan-numero { font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-4); }
.plan-numero-oro { align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: var(--oro); color: var(--tinta); font-size: 11px; letter-spacing: .16em; }
.plan-nombre { margin: 0; font-size: 34px; line-height: 1; color: #fff; }
.plan-precio { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.plan-desde { font-size: 13px; color: var(--gris-4); }
.plan-cantidad { font-size: 62px; line-height: .95; color: #fff; }
.plan-mensual { font-size: 14px; font-weight: 700; color: var(--oro); }
.plan-destacado .plan-desde { color: var(--gris-2); }
.plan-destacado .plan-cantidad { color: var(--oro); }
.plan-destacado .plan-mensual { color: #fff; }
.plan-texto { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--gris-3); }
.plan-destacado .plan-texto { color: var(--gris-2); }
.plan-ideal { margin: -10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--gris-1); }
.plan-ideal strong { font-weight: 800; color: var(--oro); }
.plan-boton { margin-top: auto; }
.precios-pie { margin: -24px 0 0; font-size: 13px; color: var(--gris-5); text-align: center; }

/* ── Giros ────────────────────────────────────────────────────────────────────── */
.giros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 18px; }
.giro { min-height: 400px; border-radius: 26px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); background: #0F1117; box-shadow: 0 34px 70px -34px rgba(0,0,0,.9); }
.giro-foto { object-fit: cover; }
.giro-foto-taller { object-position: center 65%; }
.giro-foto-tienda { object-position: 35% center; }
.giro-velo { background: linear-gradient(180deg, rgba(6,7,12,0) 30%, rgba(6,7,12,.55) 100%); }
.giro-panel { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 20px; border-radius: 18px; background: rgba(10,12,20,.58); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.16); display: flex; flex-direction: column; gap: 10px; }
.giro-nombre { margin: 0; font-size: 28px; line-height: 1; color: #fff; }
.giro-texto { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--gris-1); }
.etiquetas { margin: 0; padding: 2px 0 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.etiqueta { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 12px; font-weight: 700; color: #fff; }

/* ── Proceso ──────────────────────────────────────────────────────────────────── */
.pasos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.paso { padding: 28px 26px 30px; border-radius: 24px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.paso-numero { font-size: 96px; line-height: .85; color: transparent; -webkit-text-stroke: 1.5px var(--oro); }
.paso-titulo { margin: 0; font-size: 24px; letter-spacing: -.03em; color: #fff; }
.paso-texto { margin: 0; font-size: 15px; line-height: 1.65; color: var(--gris-4); }

/* ── Preguntas ────────────────────────────────────────────────────────────────── */
.preguntas { display: flex; flex-wrap: wrap; gap: 48px; }
.preguntas-encabezado { flex: 1 1 320px; display: flex; flex-direction: column; gap: 16px; }
.preguntas-titulo { margin: 0; font-size: clamp(38px, 5vw, 64px); line-height: .96; color: #fff; }
.preguntas-lista { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.pregunta { border-radius: 20px; padding: 0 24px; }
/* El flex va en un span: Safari viejo no deja que <summary> sea contenedor flex. */
.pregunta summary { display: block; list-style: none; cursor: pointer; border-radius: 12px; }
.pregunta-fila { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; color: #fff; font-size: 17.5px; font-weight: 700; }
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta-icono { flex: none; width: 34px; height: 34px; border-radius: 12px; background: rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center; transition: transform .3s ease, background .3s ease; }
.pregunta[open] .pregunta-icono { transform: rotate(45deg); background: var(--oro); color: var(--tinta); }
.pregunta-respuesta { margin: 0; padding: 0 48px 24px 0; font-size: 15.5px; line-height: 1.7; color: var(--gris-3); }

/* ── Llamado final ────────────────────────────────────────────────────────────── */
.final { padding-bottom: clamp(80px, 10vw, 140px); }
.final-caja { position: relative; border-radius: 32px; overflow: hidden; border: 1px solid rgba(255,255,255,.14); min-height: 480px; display: flex; align-items: center; padding: clamp(16px, 3vw, 36px); box-shadow: 0 50px 100px -40px rgba(0,0,0,.95); }
.final-foto { object-fit: cover; }
.final-velo { background: linear-gradient(90deg, rgba(6,7,12,.7) 0%, rgba(6,7,12,.25) 100%); }
.final-panel { position: relative; padding: clamp(26px, 4.4vw, 52px); border-radius: 26px; background: rgba(10,12,20,.6); border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255,255,255,.2); display: flex; flex-direction: column; gap: 22px; max-width: 700px; }
.final-titulo { margin: 0; font-size: clamp(38px, 5.2vw, 70px); line-height: .95; color: #fff; }
.final-texto { margin: 0; font-size: 17px; line-height: 1.6; color: var(--gris-1); }
.final-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding-bottom: 6px; }
.final-numero { font-size: 22px; letter-spacing: -.01em; color: #fff; }

/* ── Pie ──────────────────────────────────────────────────────────────────────── */
.pie { position: relative; border-top: 1px solid rgba(255,255,255,.1); padding: 40px clamp(20px, 4vw, 40px) 110px; }
.pie-fila { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.pie-texto { margin: 0; font-size: 13px; color: var(--gris-5); }
.pie-enlaces { display: flex; gap: 22px; font-size: 13px; }

/* ── WhatsApp flotante ────────────────────────────────────────────────────────── */
.whatsapp {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 70;
  width: 62px; height: 62px; border-radius: 999px; display: flex; align-items: center; justify-content: center; color: #06210F;
  background: linear-gradient(180deg, #6BF0A4, #2FCB73); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 5px 0 #17803F, 0 18px 30px -8px rgba(47,203,115,.7);
}
.whatsapp:hover { color: #06210F; }
.whatsapp .onda { position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 999px; border: 2px solid #3DDC84; }

/* ── Página no encontrada ─────────────────────────────────────────────────────── */
.error { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 40px 20px; text-align: center; }
.error-titulo { margin: 0; font-size: clamp(40px, 7vw, 80px); line-height: .95; color: #fff; }
.error-texto { margin: 0; font-size: 17px; line-height: 1.6; color: var(--gris-3); }

/* ── Safari < 16 ─────────────────────────────────────────────────────────────── */
/* Lo único que se sale de lado son las tarjetas del carrusel y la marquesina inclinada; .pagina las recorta con
   overflow-x: clip. Safari < 16 no lo conoce, y recortar html o body ahí rompería el menú fijo (body se vuelve lo que se
   desplaza y el menú se va con él): en ese caso se recortan las dos secciones que las contienen. La portada ocupa todo el
   ancho, así que el corte cae en el borde de la pantalla; recortar solo el escenario cortaba el borde de arriba de la tarjeta
   activa. El relleno de abajo (y de la marquesina, arriba y abajo) deja sitio a las sombras y a la inclinación, y el margen
   negativo lo compensa: nada se mueve de lugar. */
@supports not (overflow-x: clip) {
  .hero { overflow: hidden; padding-bottom: 48px; margin-bottom: -48px; }
  .marquesina-marco { overflow: hidden; padding: 40px 0; margin-top: calc(clamp(72px, 9vw, 110px) - 40px); margin-bottom: -40px; }
}
/* ── Pantallas chicas ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .menu, .ficha { display: none; }
  .inclinar { transform: none; }
}
/* En celular los botones del carrusel quedan solo con su flecha: con texto no caben junto a los puntos. */
@media (max-width: 560px) {
  .controles-fila { gap: 12px; }
  .btn-control { width: 46px; padding: 0; }
  .btn-control .texto-control { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pregunta { padding: 0 18px; }
  .pregunta-respuesta { padding-right: 0; }
}

/* ── Movimiento reducido ──────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .orbe, .flota, .flota-2, .onda, .revela, .marquesina-pista, .btn::after { animation: none; }
  .muestra, .escenario-giro, .inclinar { transition-duration: .01ms; }
  .inclinar { transform: none; }
}