/* ===================================================================== LOCACION.CSS — plantilla de página de locación (Cancún, y las 14 demás) ===================================================================== Usa los tokens y los organismos de base.css. Aquí sólo lo propio de esta plantilla. Reglas del sistema aplicadas desde el primer render: · ⛔ nunca negro — el oscuro es var(--azul) #043768 · sección con foto a sangre = CORTE LIMPIO (padding:0) + fondo de marca · móvil: 24px de aire (lo pone UN solo contenedor), copy 15/1.55, todo lo tocable 44px · el bloque móvil va AL FINAL para ganar por cascada ===================================================================== */ /* ═════════════════ HERO ═════════════════ Foto a sangre, SIN texto encima (ley D): el titular vive en la banda roja de abajo. Zoom lento atado al scroll, medido en vivo. */ .lhero{position:relative;height:100svh;min-height:520px;overflow:hidden; background:var(--azul);margin:0;padding:0} .lhero-img,.lhero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; will-change:transform;transform-origin:50% 55%} /* el vídeo no es un control: no debe capturar el ratón ni el dedo */ .lhero-video{pointer-events:none;background:var(--azul)} /* velo inferior: la foto entrega el ojo a la banda roja sin corte duro */ .lhero::after{content:'';position:absolute;inset:0;pointer-events:none; background:linear-gradient(to bottom,rgba(var(--sombra-navy-rgb),.28) 0%,transparent 34%,transparent 62%,rgba(var(--sombra-navy-rgb),.46) 100%)} .lhero-hint{position:absolute;z-index:3;left:50%;bottom:clamp(18px,3.6vh,36px); transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:7px; font-family:"Oswald",sans-serif;font-weight:500;text-transform:uppercase; letter-spacing:2.4px;font-size:12px;color:rgba(255,255,255,.9); text-shadow:0 2px 10px rgba(var(--sombra-navy-rgb),.6);transition:opacity .4s} .lhero-hint svg{width:17px;height:17px;animation:lheroBaja 1.9s ease-in-out infinite} @keyframes lheroBaja{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(6px);opacity:1}} /* la banda roja va pegada a la foto: corte limpio, sin franja del body */ .lwelcome{margin-top:0} /* ⛔ 2026-07-28 · el eyebrow amarillo se retiró de la maqueta (Carlos). La regla queda por si se remonta la línea de _vistas/locacion.php. */ .lwelcome .welcome-eyebrow{font-family:"Oswald",sans-serif;font-weight:600; text-transform:uppercase;letter-spacing:3px;font-size:clamp(12px,1.1vw,14px); color:var(--amarillo);margin:0 0 10px;text-align:center} /* 2026-07-28 · Carlos: más aire ENTRE las dos líneas del cartel. El global es 1.03 (base.css) y las dos líneas casi se tocaban. Sólo en la página de locación. ⚠️ El clip-path de .line necesita el -0.22em de arriba o corta la tilde de la Ñ — por eso el aire se da con line-height, no con margin, que se saldría de la máscara de la animación. */ .lwelcome .welcome-title{line-height:1.2} /* ═════════════════ GALERÍA · CARD-FLOW 3D ═════════════════ MISMO motor que "New on the Menu" de la home: carril alto + escenario pegado con position:sticky. ⛔ NO usa pin de GSAP ni ScrollTrigger: el progreso se mide con getBoundingClientRect() en cada scroll, porque cualquier sección anclada por encima desplaza el cálculo (ley D-8). */ /* 250svh: la intro consume 110vh, quedan ~200px de juego con el slider y el resto lo ocupa LA DESPEDIDA (ver .gal-salida). ⚠️ No acortar el carril para quitar la zona muerta: el recorrido útil es (alto − 100svh) y si baja de 110vh la intro NO CABE — se probó con 180svh y la foto no llegaba a encogerse del todo (los controles se quedaban al 43%). */ .gal-track{position:relative;z-index:2;height:250svh;background:var(--azul)} .gal-stage{position:sticky;top:0;height:100svh;overflow:hidden; background:radial-gradient(120% 100% at 50% 0%,#0a4d86 0%,var(--azul) 58%,#022a52 100%)} .gal-stage::after{content:'';position:absolute;inset:0;pointer-events:none; background:radial-gradient(75% 60% at 50% 50%,transparent 40%,rgba(var(--sombra-navy-rgb),.42) 100%)} /* ── LA COSTURA con el brindis ── ⛔ Aquí NO va ninguna cortina ni fundido de salida. Se probaron tres cosas (banner encima, crossfade, velo opaco) y todas se veían mal o tapaban la galería. Carlos: "esta cortina no debe ir". ✅ Lo que resuelve la costura es CONTENIDO: entre los dos efectos va la sección de experiencias (.lexp) — un bloque de lectura entre dos bloques de espectáculo, que es justo la ley de ritmo del sistema (§4.1). Así el escenario de la galería sale contra una sección clara y no contra otro espectáculo, y no hay nada que disimular. */ .gal-cf{position:absolute;inset:0;perspective:1600px;z-index:4; touch-action:manipulation; /* ⚠️ pan-y NO mata el doble-toque-zoom */ -webkit-tap-highlight-color:transparent;user-select:none} .gal-cf-in{position:absolute;inset:0;transform-style:preserve-3d} .gal-card{position:absolute;left:50%;top:50%;overflow:hidden;background:#02244a; box-shadow:0 30px 70px rgba(var(--sombra-navy-rgb),.55);cursor:grab; backface-visibility:hidden;will-change:transform,width,height} .gal-card:active{cursor:grabbing} .gal-card img{width:100%;height:100%;object-fit:cover} .gal-shade{position:absolute;inset:0;pointer-events:none; background:linear-gradient(to top,rgba(var(--sombra-navy-rgb),.72) 0%,transparent 46%)} /* la primera tarjeta es la PORTADA: el título vive DENTRO de la foto */ .gal-card.is-cover img{filter:blur(6px) brightness(.82);transform:scale(1.06)} .gal-cover-hd{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column; align-items:center;justify-content:center;text-align:center;padding:0 6%} .gal-cover-hd::before{content:'';position:absolute;inset:0;z-index:-1; background:radial-gradient(60% 50% at 50% 50%,rgba(var(--sombra-navy-rgb),.42),transparent 75%)} .gal-cover-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:3px;color:var(--amarillo);margin:0 0 .5em} /* 2026-08-01 · Carlos: el título de experiencias va en UNA línea también en escritorio. El salto se prohíbe aquí; el cuerpo lo ajusta el JS midiendo el título real de cada ciudad. */ #galeria .gal-cover-title{white-space:nowrap} /* 2026-08-04 · Carlos: la portada del slider lleva el welcome de la unidad a DOS líneas («Welcome to / Señor Frog's Cancun»), así que sus .line pasan a bloque. El nowrap de arriba sigue valiendo dentro de cada línea, y el ajustador de locacion.js ya sabe medir títulos partidos en .line. */ .gal-cover-title .line{display:block} /* 2026-08-04 · Carlos: «dale más interlineado». El .95 de abajo aplasta las dos líneas; aquí se abre SÓLO en la portada de la galería, para no tocar el mismo título en la sección de platillos. */ #galeria .gal-cover-title{line-height:1.14} /* 2026-08-04 · Carlos: el lema bajo el título de la portada — amarillo, en mayúsculas y del MISMO ancho que el título. El ancho no se fija aquí: lo iguala el motor de locacion.js, que mide la línea más ancha del título y despeja el cuerpo que hace coincidir a este. */ .gal-cover-lema{margin:.5em 0 0;font-family:"Boris Black","Oswald",sans-serif; font-weight:400;text-transform:uppercase;color:var(--amarillo); line-height:1.12;letter-spacing:.5px;white-space:nowrap; text-shadow:0 3px 0 rgba(var(--sombra-navy-rgb),.38)} .gal-cover-lema .line{display:block} .gal-cover-title{font-family:"Boris Black","Oswald",sans-serif;font-weight:400; line-height:.95;margin:0;text-transform:uppercase;color:#fff; text-shadow:0 6px 0 rgba(var(--sombra-navy-rgb),.45); /* la máscara por palabra recorta los remates de la Boris si no lleva aire */ padding:.12em 0} .gal-cover-sub{font-family:"Museo Sans Rounded","Segoe UI",sans-serif; color:rgba(255,255,255,.92);margin:.7em 0 0;max-width:30ch} /* título de la sección en móvil (fuera de la foto) */ .gal-head{display:none} /* controles */ .gal-ui{position:absolute;z-index:8;left:0;right:0;bottom:clamp(16px,3.4vh,34px); display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px); transition:opacity .35s} .gal-nav{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer; transition:background .2s,border-color .2s,transform .2s} .gal-nav svg{width:18px;height:18px;pointer-events:none} .gal-nav:hover{background:var(--rojo);border-color:var(--rojo);transform:scale(1.06)} .gal-nav:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .gal-nav:disabled{opacity:.3;cursor:default;transform:none;background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2)} .gal-dots{display:flex;gap:8px} .gal-dot{width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer; position:relative;background:rgba(255,255,255,.34);transition:background .25s,width .25s} .gal-dot::after{content:'';position:absolute;inset:-17.5px} /* 9 + 17.5×2 = 44px exactos (con -16px se quedaba en 41) */ .gal-dot.activo{background:var(--amarillo);width:24px;border-radius:999px} .gal-dot:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px} .gal-hint{position:absolute;z-index:7;left:50%;transform:translateX(-50%); bottom:clamp(16px,3.4vh,34px);font-family:"Oswald",sans-serif;font-weight:500; text-transform:uppercase;letter-spacing:2.4px;font-size:12px;color:rgba(255,255,255,.85); transition:opacity .35s;pointer-events:none} /* ═════════════════ NACHOS · "MEXICO DONE RIGHT" ═════════════════ El banner del home, copiado tal cual. Dos columnas: la lata que vierte (56 fotogramas en canvas) | el claim que cae letra por letra. ⛔ Sin drop-shadow sobre el canvas: el plato llega al borde del bitmap y la sombra CSS proyectaría el RECTÁNGULO, no la silueta (ya viene horneada). ⚠️ 2026-07-27 · Carlos: "esa imagen o efecto de nacho bájalo 70px, sólo la lata con los nachos, o sea el efecto". Se hace con --nachos-bajar, que desplaza el escenario (foto Y canvas juntos) SIN mover el texto. ⚠️ Va DENTRO del translate que ya usa --lata-sale, no en un transform aparte: dos transforms en el mismo elemento se pisan. */ /* 2026-07-27 · Carlos: "¿el fondo en Cancún de Mexico Done Right puede ser rojo?". Sí, y de hecho mejora el ritmo: queda ROJO entre la galería (azul) y el brindis (#0a0620) — dos fondos distintos a cada lado, alternando claro de marca y oscuro. Se construye como la banda Welcome: rojo plano + dos radiales (luz arriba-derecha, sombra navy abajo-izquierda), que le dan cuerpo; un rojo plano se ve barato. ⚠️ El fondo azul original queda comentado abajo por si se quiere volver. */ .nachos{position:relative;z-index:1;overflow:visible;min-height:100svh; display:flex;align-items:stretch; padding:0 clamp(20px,4vw,56px) clamp(46px,7vh,86px); background: radial-gradient(900px 620px at 78% -10%, rgba(255,255,255,.10), transparent 62%), radial-gradient(820px 560px at 10% 112%, rgba(var(--sombra-navy-rgb),.28), transparent 62%), var(--rojo); /* AZUL ORIGINAL (del home) — descomentar para volver: background:radial-gradient(120% 100% at 32% 24%, #06305d 0%, #04264a 46%, #031a33 78%, #02101f 100%); */ --lata-sale:96px; --nachos-bajar:70px} /* textura de doodles de marca, como en la banda roja */ .nachos::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:url("../img/welcome-pattern.png") center 0/880px auto repeat; opacity:.13;mix-blend-mode:multiply} .nachos-inner{max-width:1280px;width:100%;margin:0 auto;position:relative;z-index:2; flex:1 1 auto;min-height:0;display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,1fr); gap:clamp(20px,3.5vw,60px);align-items:stretch} /* 2026-08-01 · SIN PIN, con la anatomía en tres piezas (Carlos: "necesita saber qué debe hacer cada uno"): .nachos el RIEL — alto (270svh), transparente: sólo mide el recorrido del efecto. En él NO vive nada visible. .nachos__pega la PANTALLA — pegada con sticky, 100svh, y carga el fondo rojo, los degradados y los doodles. Antes el fondo vivía en el riel y se desplazaba por detrás del contenido pegado: el "parallax raro" que vio Carlos. .nachos-inner el CONTENIDO — la rejilla lata + texto, sin más papeles. En MÓVIL nunca hubo pin: __pega se disuelve (display:contents) y todo queda exactamente como estaba. */ .nachos__pega{display:contents} @media (min-width:901px){ .nachos{min-height:0;height:270svh;padding:0;align-items:flex-start; background:none} .nachos::before{content:none} /* los doodles se mudan a la pantalla */ .nachos__pega{display:flex;align-items:stretch;position:sticky;top:0; height:100svh;width:100%;box-sizing:border-box; padding:0 clamp(20px,4vw,56px) clamp(46px,7vh,86px); background: radial-gradient(900px 620px at 78% -10%, rgba(255,255,255,.10), transparent 62%), radial-gradient(820px 560px at 10% 112%, rgba(var(--sombra-navy-rgb),.28), transparent 62%), var(--rojo)} .nachos__pega::before{content:'';position:absolute;inset:0;z-index:0;pointer-events:none; background:url("../img/welcome-pattern.png") center 0/880px auto repeat; opacity:.13;mix-blend-mode:multiply} .nachos.sin-motor{height:auto;min-height:100svh} .nachos.sin-motor .nachos__pega{position:static;height:auto;min-height:100svh} } @media (min-width:901px) and (prefers-reduced-motion:reduce){ .nachos{height:auto;min-height:100svh} .nachos__pega{position:static;height:auto;min-height:100svh} } .nachos-stage{position:relative;min-height:0;align-self:stretch} .nachos-shot,.nachos-canvas{position:absolute;inset:0;width:100%;height:100%; object-fit:contain;object-position:center top;display:block; transform:translateY(calc(var(--nachos-bajar) - var(--lata-sale)))} .nachos-shot{will-change:transform} .nachos-canvas{opacity:0;transition:opacity .25s;pointer-events:none} .nachos-stage.listo .nachos-canvas{opacity:1} .nachos-stage.listo .nachos-shot{opacity:0} .nachos-text{display:flex;flex-direction:column;justify-content:center;text-align:left; padding:40px 0;margin-left:-35px} /* claim de marca en amarillo sólido, Boris, dos líneas del MISMO ancho */ .nachos-title{margin:0 0 16px;font-family:"Boris Black","Oswald",sans-serif;font-weight:400; text-transform:uppercase;color:var(--amarillo); font-size:clamp(40px,5.6vw,80px);line-height:1.16;letter-spacing:1px; /* ⛔ 2026-07-28 · Carlos: FUERA la sombra oscura del claim. Llevaba el relieve duro navy (0 4px 0) + un halo negro difuso, heredados del home, donde el fondo era AZUL. Sobre el rojo de la locación ensuciaban el amarillo. El claim va plano. Lo que llevaba: text-shadow:0 4px 0 rgba(var(--sombra-navy-rgb),.55),0 10px 30px rgba(0,0,0,.45) */ text-shadow:none} .nachos-title .nt-line{display:block;white-space:nowrap;transform-origin:left top} /* la máscara por palabra necesita padding + margen negativo: sin ellos recorta la sombra amarilla y los remates de la Boris */ .nt-w{display:inline-block;overflow:hidden;vertical-align:top; padding:.12em .07em .2em;margin:-.12em -.01em -.2em} .nt-l{display:inline-block;will-change:transform,opacity} /* ⚠️ sobre ROJO el copy va BLANCO. En el home era #dbe8f5 (azul claro) porque el fondo era azul; sobre rojo ese azulado se ensucia y pierde contraste. */ .nachos-sub{margin:0;font-family:"Museo Sans Rounded","Segoe UI",sans-serif; color:rgba(255,255,255,.94); font-size:clamp(15px,1.25vw,18px);line-height:1.65;max-width:100%;text-align:justify} .nachos-cierre{display:block;margin-top:14px;font-weight:700;color:var(--amarillo);font-style:normal} /* ═════════════════ EXPERIENCIAS · widget por unidad ═════════════════ ⚠️ SECCIÓN RETIRADA de la maqueta (la sustituyó el banner de Nachos), pero su CSS se queda: la sección está en componentes/ lista para remontar. El widget "Order before you arrive" de frogs-shop, adaptado al sistema: · ⛔ fuera el @import de Google Fonts — las 7 tipografías ya son locales · Montserrat → Museo Sans Rounded (Montserrat era un parche, no la norma) · colores desde los tokens de marca, no repetidos a mano Se conserva el scoping en .fsw: ni una regla suelta que afecte a la página. Sección clara entre dos oscuros (galería azul y brindis #0a0620): es el respiro que pide la ley de ritmo. */ /* ⛔ 2026-07-28 · NO crema: Carlos lo descartó para la página de locación ("este crema no se usa"). Va en TURQUESA de marca, oscuro: la galería de encima es azul y el banner de Nachos de abajo, rojo — y el turquesa no se usa en ninguna otra sección, así que rompe la monotonía sin salirse de la paleta. La tarjeta blanca del widget destaca igual de bien. */ .lexp{background:linear-gradient(180deg,#07333c 0%,#052730 100%); padding:clamp(56px,8vh,96px) 0;color:#fff} .fsw{background:#fff;border-radius:20px;overflow:hidden; box-shadow:0 10px 40px rgba(4,40,80,.12);border:1px solid #e7eaee; max-width:1100px;margin:0 auto; font-family:"Museo Sans Rounded","Segoe UI",sans-serif;color:#062b4e} .fsw *{box-sizing:border-box} .fsw img{display:block;max-width:100%} .fsw a{text-decoration:none;color:inherit} /* cabecera azul con el brillo turquesa del original */ .fsw__head{position:relative;background:linear-gradient(120deg,var(--azul),#022b50); color:#fff;padding:18px 22px;overflow:hidden; display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap} .fsw__head::after{content:"";position:absolute;width:60%;height:160%;top:-30%;right:-10%; background:radial-gradient(circle,rgba(31,171,186,.25),transparent 70%);pointer-events:none} .fsw__title{position:relative;z-index:2;margin:0;font-family:"Oswald",sans-serif;font-weight:700; text-transform:uppercase;font-size:clamp(18px,3.2vw,26px);line-height:1.05;letter-spacing:.5px;color:#fff} .fsw__sub{position:relative;z-index:2;margin:5px 0 0;font-size:13.5px;line-height:1.45; color:rgba(255,255,255,.82)} .fsw__all{position:relative;z-index:2;display:inline-flex;align-items:center;flex:0 0 auto; min-height:44px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);color:#fff; font-family:"Oswald",sans-serif;font-weight:600;font-size:12px;letter-spacing:1px; text-transform:uppercase;padding:8px 16px;border-radius:999px;transition:background .2s} .fsw__all:hover{background:rgba(255,255,255,.26)} .fsw__all:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} /* carrusel con scroll-snap nativo */ .fsw__slider{position:relative;padding:18px} .fsw__track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px} .fsw__track::-webkit-scrollbar{display:none} .fsw__track>*{scroll-snap-align:start;flex:0 0 250px} /* card: aspect-ratio fijo, pie con margin-top:auto → CTA alineados (ley de cards) */ .fsw-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e7eaee; border-radius:16px;overflow:hidden;box-shadow:0 4px 16px rgba(21,24,27,.07); transition:transform .25s cubic-bezier(.2,.8,.3,1),box-shadow .25s} .fsw-card:hover{transform:translateY(-5px);box-shadow:0 14px 34px rgba(21,24,27,.14)} .fsw-card:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .fsw-card__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:#e7eaee} .fsw-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .fsw-card:hover .fsw-card__media img{transform:scale(1.07)} .fsw-card__tag{position:absolute;top:10px;left:10px;background:rgba(2,28,55,.8);color:#fff; -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px); font-family:"Oswald",sans-serif;font-weight:600;font-size:10.5px;letter-spacing:1px; text-transform:uppercase;padding:5px 11px;border-radius:999px} .fsw-card__tag--hot{background:var(--rojo)} .fsw-card__body{padding:13px 14px 14px;display:flex;flex-direction:column;flex:1} .fsw-card__name{margin:0;font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; font-size:15px;letter-spacing:.3px;color:#062b4e;line-height:1.15} .fsw-card__foot{margin-top:auto;padding-top:12px;display:flex;align-items:center; justify-content:space-between;gap:10px} .fsw-card__price{margin:0;font-family:"Oswald",sans-serif;font-weight:700;color:var(--rojo);font-size:19px} .fsw-card__price small{font-size:11px;color:#5a636b;font-weight:600; text-decoration:line-through;margin-right:4px} .fsw-card__btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px; background:var(--verde);color:#fff;font-family:"Oswald",sans-serif;font-weight:600;font-size:12px; letter-spacing:1px;text-transform:uppercase;padding:9px 14px;border-radius:999px; transition:background .2s} .fsw-card:hover .fsw-card__btn{background:#3c8a49} /* flechas: se deshabilitan en los extremos, no hacen bucle */ .fsw__arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4; width:44px;height:44px;padding:0;border-radius:999px;cursor:pointer; background:#fff;border:1px solid #e7eaee;color:var(--rojo); display:grid;place-items:center;box-shadow:0 8px 22px rgba(21,24,27,.16); transition:transform .15s,background .2s,opacity .2s} .fsw__arrow svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round;pointer-events:none} .fsw__arrow:hover{background:var(--rojo);color:#fff} .fsw__arrow:active{transform:translateY(-50%) scale(.9)} .fsw__arrow:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .fsw__arrow--prev{left:6px} .fsw__arrow--next{right:6px} .fsw__arrow[disabled]{opacity:0;pointer-events:none} /* ═════════════════ EL BRINDIS · LAS YARDAS ═════════════════ El MISMO banner del home, copiado tal cual (misma escena, mismas medidas, mismo giro): la escena ocupa la pantalla entera, el choque avanza con el scroll y el texto flota encima. Lo único propio de la locación es el CTA a la carta — toda sección de espectáculo lleva botón (ley D). */ /* ⛔ SIN solape ni z-index de stacking. Se probó montar el banner sobre la galería (`margin-top:-100svh`) y se comía la mitad inferior del escenario mientras la galería aún estaba viva: la tarjeta salía cortada en diagonal. Ahora entre los dos efectos va la sección de experiencias, que hace de separador natural — el problema desaparece en vez de disimularse. */ /* 2026-08-01 · SIN PIN (ley D-8). La sección ES el recorrido: mide lo que dura el efecto, y dentro va un contenedor pegado con `position:sticky`. Antes lo anclaba ScrollTrigger con pin:true, que fija el elemento y crea un hueco calculado; si esas cuentas se quedaban viejas —una foto que carga tarde, una sección de más— la escena se quedaba FIJA fuera de su sitio y tapaba lo que viniera debajo. Con sticky lo resuelve el navegador y no hay cuentas que envejezcan. El alto = 100svh visibles + el recorrido del scrub (150% en móvil, 170% en escritorio), los mismos valores que tenía el `end` del ScrollTrigger. */ .yardas{position:relative;z-index:1;height:250svh;background:#0a0620} .yardas__pega{position:sticky;top:0;height:100svh;overflow:hidden; display:flex;align-items:center;justify-content:center; /* 2026-08-01 · capa propia: en iOS un sticky sin capa puede retrasarse un cuadro en el momentum y "temblar" 1px toda la pantalla */ transform:translateZ(0);backface-visibility:hidden} @media (min-width:901px){ .yardas{height:270svh} } /* sin GSAP o con reduced-motion la escena no se mueve: entonces la sección larga sobra y se queda en una pantalla, como estaba. */ @media (prefers-reduced-motion:reduce){ .yardas{height:auto;min-height:100svh} .yardas__pega{position:static;height:auto;min-height:100svh} } .yardas.sin-motor{height:auto;min-height:100svh} .yardas.sin-motor .yardas__pega{position:static;height:auto;min-height:100svh} .yardas-stage{position:absolute;inset:0;will-change:filter} .yardas-shot,.yardas-canvas{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block} /* la foto fija manda hasta que el canvas tiene su primer fotograma dibujado: así nunca hay hueco vacío ni parpadeo */ .yardas-canvas{opacity:0;transition:opacity .3s} .yardas-stage.listo .yardas-canvas{opacity:1} .yardas-stage.listo .yardas-shot{opacity:0} /* velo para que el texto se lea sobre las luces del fondo */ .yardas-velo{position:absolute;inset:0;pointer-events:none;opacity:.35; background:linear-gradient(180deg,rgba(4,10,40,.62) 0%,rgba(4,10,40,.18) 34%,rgba(4,10,40,.22) 62%,rgba(4,10,40,.78) 100%)} .yardas-txt{position:relative;z-index:2;text-align:center;max-width:min(1000px,92%); padding:20px;color:#fff;margin:auto} .yardas-title{margin:0;display:block;font-family:"Oswald",sans-serif;text-transform:uppercase; font-weight:700;font-style:italic;line-height:.86;letter-spacing:-.5px} .yardas-title span{display:block;will-change:transform,opacity} .yt-1{font-size:clamp(34px,6.6vw,92px);white-space:nowrap;color:#fff; text-shadow:0 5px 0 rgba(2,6,32,.55),0 16px 38px rgba(0,0,0,.6)} .yt-1 b{color:var(--amarillo);font-weight:700} .yt-2{font-size:clamp(22px,4.4vw,62px);white-space:nowrap;color:#fff;margin-top:.02em; text-shadow:0 4px 0 rgba(2,6,32,.5),0 12px 30px rgba(0,0,0,.55)} /* en ESCRITORIO las dos líneas van más separadas: con line-height:.86 las cajas se solapaban 32px. Móvil tiene su ritmo y NO se toca. */ @media (min-width:901px){ .yt-2{margin-top:calc(.02em + 15px)} } /* la raya rosa del diseño, se traza sola */ .yardas-linea{display:block;height:clamp(5px,.7vw,9px);width:min(52%,470px);margin:20px auto 0; background:#F0246E;border-radius:6px; transform-origin:left center; /* sin rotación propia: hereda la del bloque y queda PARALELA */ box-shadow:0 4px 14px rgba(240,36,110,.5)} .yardas-sub{font-family:"Oswald",sans-serif;font-weight:600;font-style:italic; text-transform:uppercase;font-size:clamp(13px,1.6vw,23px);line-height:1.24; letter-spacing:.4px;color:#fff;margin:20px auto 0;text-shadow:0 3px 12px rgba(0,0,0,.75)} .yardas-sub span{display:block;will-change:transform,opacity} .yardas-sub b{color:var(--amarillo);font-weight:600} /* el CTA propio de la locación: entra el último, ya con el texto puesto */ .yardas-cta{margin-top:clamp(22px,3.2vh,34px);will-change:transform,opacity} /* el conjunto va ligeramente girado, como la pieza original */ .yardas-txt{transform:rotate(-3.2deg)} @media (max-width:900px){ .yardas-txt{transform:rotate(-2.4deg)} } /* ═════════════════ STACK · RESEÑAS ← MAPA ═════════════════ ⭐ 2026-07-27 · Carlos: "este crema no se usa, y que sea así como blog, que se monte encima del otro card para conservar el efecto". Es el stacking del sistema (Reviews ← Blog, §4 de EFECTOS): las reseñas se quedan PEGADAS (sticky) y el mapa SE MONTA encima; mientras se tapa, la de atrás se encoge y a partir del 50% se desenfoca. ⚠️ Así el "azul azul" deja de ser un choque plano: hay profundidad, radios de 34px y sombras — las dos tarjetas FLOTAN sobre el fondo de marca. ⚠️ El envoltorio lleva el fondo (detrás de las tarjetas flotantes se veía el blanco del body) y padding:1px para que los márgenes de los hijos no se colapsen fuera de él. */ .lstack{position:relative;background:var(--azul);padding:1px 0} /* LA DE ATRÁS · se queda fija, se encoge y se desenfoca (lo mueve el JS) */ .testimonios{position:sticky;top:40px;z-index:1;overflow:hidden;color:#fff; margin:40px 40px 40px;border-radius:34px; padding:clamp(56px,8vh,96px) 0; box-shadow:0 24px 55px rgba(0,0,0,.35); will-change:transform,filter; background:linear-gradient(rgba(7,20,52,.9),rgba(5,16,44,.94)), url("../img/secciones/our-friends-stories.jpg") center/cover} .rv-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(26px,4vw,56px); align-items:center;margin-top:6px} /* el logotipo compuesto "Our Friend's Stories" */ .rv-logo{display:flex;align-items:center;gap:16px;margin:0 0 14px; font-family:"Oswald",sans-serif;font-style:italic;font-weight:800; text-transform:uppercase;line-height:.9} .rv-logo .rv-our{font-size:clamp(40px,5.5vw,68px);color:#fff; -webkit-text-stroke:2px var(--azul);text-shadow:3px 3px 0 rgba(0,0,0,.25)} .rv-logo .rv-fs{font-size:clamp(20px,2.5vw,30px);color:var(--rojo); text-shadow:2px 2px 0 rgba(0,0,0,.28)} .rv-logo .rv-fs b{display:block;color:#fff} .rv-desc{margin:0 0 26px;font-size:16px;color:rgba(255,255,255,.82); line-height:1.65;max-width:430px} /* puntitos: barra que se colorea en el activo */ .rv-dots{display:flex;gap:12px} .rv-dots .d{width:34px;height:5px;padding:0;border:none;border-radius:4px;cursor:pointer; background:rgba(255,255,255,.3);transition:.4s;position:relative} .rv-dots .d::after{content:'';position:absolute;left:50%;top:50%; width:44px;height:44px;transform:translate(-50%,-50%)} /* área tocable 44px */ .rv-dots .d.on{background:linear-gradient(90deg,var(--amarillo),var(--naranja)); box-shadow:0 0 10px rgba(247,190,57,.55)} .rv-dots .d:focus-visible{outline:3px solid var(--amarillo);outline-offset:6px} /* la pila: tres tarjetas absolutas, el JS las coloca por distancia a la activa */ .rv-stack{position:relative;height:330px;perspective:1400px} /* mancha orgánica animada detrás */ .rv-stack::before{content:"";position:absolute;width:76%;height:76%;left:12%;top:12%; border-radius:50% 50% 48% 52%/55% 50% 50% 45%; background:radial-gradient(closest-side,rgba(247,190,57,.45),transparent 72%); filter:blur(10px);opacity:.7;z-index:0;animation:rvBlob 11s ease-in-out infinite} @keyframes rvBlob{0%,100%{transform:translate(0,0) rotate(0) scale(1)} 50%{transform:translate(4%,-3%) rotate(8deg) scale(1.06)}} .review{position:absolute;inset:0;background:#fff;border-radius:26px;padding:40px; border:1px solid rgba(var(--sombra-navy-rgb),.07);display:flex;flex-direction:column; box-shadow:0 26px 60px -30px rgba(var(--sombra-navy-rgb),.30); transition:transform .7s cubic-bezier(.22,1,.36,1),opacity .6s,filter .6s; will-change:transform,opacity} .rv-q{height:30px;font-family:"Oswald",sans-serif;font-size:60px;line-height:.5; color:var(--amarillo)} .rv-stars{margin:6px 0 14px;font-size:18px;letter-spacing:3px;color:var(--amarillo)} .review p{margin:0;flex:1;font-size:16.5px;line-height:1.6;color:#4a5b6d;font-style:italic} /* 2026-07-29 · #444 → gris azulado de paleta */ .rv-by{display:flex;align-items:center;gap:12px;margin-top:20px} .rv-av{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--rojo),var(--naranja));color:#fff; font-family:"Oswald",sans-serif;font-weight:700} .rv-by b{font-family:"Oswald",sans-serif;color:var(--rojo);font-size:15px;letter-spacing:.5px} .rv-by span{display:block;color:#767676;font-size:12px} /* ═════════════════ CÓMO LLEGAR ═════════════════ Ficha de contacto + mapa enmarcado, a dos columnas. Antes el mapa iba a sangre y el CTA suelto debajo: el bloque no decía NADA (ni dirección ni horario) y el rojo del botón sobre el azul no contrasta (ley B). */ /* LA DE ENCIMA · el mapa se monta sobre las reseñas. ⛔ Sin crema (lo descartó Carlos). Lleva un azul con radial propio, un tono más claro que la tarjeta de reseñas: dentro del stacking la diferencia se lee como profundidad, no como repetición. La sombra va HACIA ARRIBA: proyecta sobre la tarjeta que está tapando. */ .lmapa{position:relative;z-index:2; margin:0 40px 40px;border-radius:34px;overflow:hidden; padding:clamp(60px,9vh,110px) 0;color:#fff; background-color:var(--azul); background-image:radial-gradient(120% 100% at 50% 0%,#0a4d86 0%,var(--azul) 58%,#022a52 100%); box-shadow:0 -18px 55px rgba(0,0,0,.4)} .lmapa-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(26px,3.6vw,56px);align-items:center} /* sobre fondo OSCURO el texto va claro (el color del body ES este azul) */ .lmapa-info{color:rgba(255,255,255,.92);min-width:0} .lmapa-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:3px;font-size:clamp(11px,1vw,13px);color:var(--amarillo);margin:0 0 10px} .lmapa .sec-titulo{color:#fff;margin:0} /* línea de sección del sistema (§2.2): da peso a la columna cuando la ficha todavía no tiene horario ni teléfono */ .lmapa-linea{display:block;width:56px;height:4px;border-radius:4px; background:var(--amarillo);margin:clamp(14px,2vh,20px) 0 clamp(20px,2.8vh,28px)} .lmapa-datos{list-style:none;margin:0 0 clamp(24px,3.4vh,34px);padding:0; display:flex;flex-direction:column;gap:14px} .lmapa-datos li{display:flex;align-items:flex-start;gap:12px; font-size:clamp(14px,1.05vw,16px);line-height:1.5} .lmapa-datos a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3)} .lmapa-datos a:hover{color:var(--amarillo);border-color:var(--amarillo)} /* icono de línea (⛔ nunca emoji), en amarillo sobre el fondo oscuro */ .lmapa-datos .ic{width:21px;height:21px;flex:0 0 auto;margin-top:1px; fill:none;stroke:var(--amarillo);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round; pointer-events:none} .lmapa-btns{display:flex;flex-wrap:wrap;gap:12px} /* sobre OSCURO el principal es AMARILLO (texto rojo) y el secundario fantasma en blanco — ley de botones */ .btn-fantasma{background:transparent;color:#fff;box-shadow:none; border:2px solid rgba(255,255,255,.45)} .btn-fantasma:hover{background:rgba(255,255,255,.1);border-color:var(--amarillo); color:var(--amarillo)} /* el marco del mapa: radio 22px, borde y sombra del sistema (§3.9) */ .lmapa-marco{position:relative;aspect-ratio:16/10;min-height:300px; border-radius:22px;overflow:hidden;background:#02244a; border:1.5px solid rgba(255,255,255,.18); box-shadow:0 16px 34px rgba(4,55,104,.42)} .lmapa-marco iframe{width:100%;height:100%;border:0;display:block; filter:saturate(.9) contrast(1.02)} /* ═════════════════ CIERRE · LET'S PARTY ═════════════════ ⚠️ Ni rojo ni azul: MORADO NOCTURNO (#0a0620, el de las yardas). · en ROJO quedaba "rojo sobre rojo" con el footer (#DA1931) · en AZUL choca con el mapa, que ahora vuelve a ser azul · en CREMA no, lo descartó Carlos El morado ya se usa en el brindis, pero NO es contiguo: la ley prohíbe repetir en secciones pegadas, no en la página. Y el claim amarillo sobre este nocturno es el mejor contraste de los tres. */ .lcta{background-color:#0a0620; /* color base bajo el gradiente: si el gradiente no pinta, la sección sigue siendo de marca y no asoma el body */ background-image:radial-gradient(120% 100% at 50% 8%,#1b1040 0%,#0a0620 58%,#050311 100%); color:#fff;text-align:center;padding:clamp(64px,9vh,110px) 0; position:relative;overflow:hidden} /* la textura de doodles: sobre oscuro va en SCREEN y suave (en multiply desaparecería, porque multiply sobre azul oscuro no aclara nada) */ .lcta::before{content:'';position:absolute;inset:0;pointer-events:none; background:url("../img/welcome-pattern.png") repeat;background-size:880px auto; opacity:.07;mix-blend-mode:screen} .lcta-in{position:relative} .lcta h2{font-family:"Boris Black","Oswald",sans-serif;font-weight:400; font-size:clamp(38px,7vw,86px);line-height:.95;margin:0 0 18px;text-transform:uppercase; color:var(--amarillo);text-shadow:0 6px 0 rgba(var(--sombra-navy-rgb),.35);padding:.1em 0} .lcta p{margin:0 auto clamp(24px,3.6vh,36px);max-width:56ch; font-size:clamp(15px,1.15vw,17px);line-height:1.6} /* ═════════════════ 📱 MÓVIL — BLOQUE EXCLUSIVO ═════════════════ Va al final para ganar por cascada (ley C). */ @media (max-width:900px){ .lhero{height:88svh;min-height:440px} /* la portada deja de llevar el título dentro: en móvil vive arriba */ .gal-track{height:230svh} .gal-card.is-cover img{filter:none;transform:none} /* 2026-08-02 · Carlos (2ª ronda, capturas): "vuelve que los títulos estén arriba" — revierte el "devuélvelos adentro" de la mañana, en las DOS secciones (galería y platillos). Además el título adentro dejaba ~80px de aire muerto sobre y bajo la tarjeta: sin head que reservar, el motor centraba la tarjeta (tope 56svh) en una banda más alta que ella. Con el head afuera la banda se reparte otra vez título→tarjeta→controles a 16px. Regla recuperada literal del ZIP V2 (locacion.css del 29-jul). */ .gal-cover-hd{display:none} .gal-head{display:block;position:absolute;z-index:6;left:0;right:0;top:clamp(74px,11vh,104px); padding:0 var(--m-aire);text-align:center} /* en pantalla chica la bajada respira menos ancho y el eyebrow no compite */ .gal-cover-sub{max-width:26ch} /* 2026-08-01 · Carlos (2ª tanda): fuera el eyebrow "Food, music and the best party…" del contenedor de experiencias. El título de la sección se queda; lo que desaparece es la línea de arriba. Sólo en móvil. */ .gal-eyebrow{display:none} .gal-title{font-family:"Boris Black","Oswald",sans-serif;font-weight:400; font-size:clamp(30px,9.6vw,46px);line-height:.94;margin:0;text-transform:uppercase;color:#fff; padding:.12em 0} /* 2026-08-01 · Carlos (3ª tanda): "el banner new on the menu debe ir en una sola línea". A 9.6vw, "Nuevo en el Menú" (16 caracteres en Boris, que es ancha) no cabía y partía. Se le baja el cuerpo sólo a este banner —la galería de experiencias tiene títulos cortos y se queda como está— y se prohíbe el salto para que no vuelva a romperse con otra ciudad. */ .pl .gal-title{font-size:clamp(22px,6.6vw,38px);white-space:nowrap} /* 2026-08-01 · Carlos: "Experiencia Cancún va en una sola línea". Vale para las 16: el título cambia por ciudad ("The Panama City Beach Experience" es el más largo), así que aquí sólo se prohíbe el salto y el CUERPO lo ajusta el JS midiendo el título real — patrón del cartel de nachos. */ #galeria .gal-title{white-space:nowrap} .gal-nav{width:44px;height:44px} /* mínimo táctil del sistema */ /* la nav flotante de la app ocupa el pie: los controles suben */ .gal-ui{bottom:calc(94px + env(safe-area-inset-bottom))} .gal-hint{bottom:calc(94px + env(safe-area-inset-bottom))} /* ── EL BRINDIS en móvil ── El texto va rotado ~2.4°: su caja sobresale unos px al aplicar el aire de 24px, y eso solo daría scroll horizontal. Se recorta la sección sin tocar el efecto. El aire lo ponen el título y la bajada (UN solo sitio, ley del aire único: .yardas-txt va a 0). */ /* anclada también en móvil: llena la pantalla, si no asoma la sección siguiente por debajo mientras el brindis está fijo */ .yardas{min-height:100svh} /* ⛔ 2026-08-01 · FUERA el overflow-x:clip que vivía aquí. En Safari iOS, un ancestro con overflow recortado hace que el sticky de dentro se pegue AL ANCESTRO y no a la pantalla: la escena del brindis nunca se enganchaba en el iPhone (en Chrome sí — por eso todas las pruebas locales pasaban). El desborde del texto rotado lo contiene ahora .yardas__pega{overflow:hidden}. */ .yardas-txt{margin-inline:0;padding-inline:0;max-width:100%} .yardas-title,.yardas-sub{box-sizing:border-box;padding-inline:var(--m-aire)} /* 2026-08-01 · Carlos (3ª tanda): "yard especial y la línea de sip big deben ir más separadas". El `line-height:.86` del título hace que las dos cajas se monten; en escritorio ya se compensaba con +15px y móvil se había dejado como estaba. Ahora también respira aquí. */ .yt-2{margin-top:calc(.02em + 12px)} .yardas-sub{font-size:var(--m-fs);line-height:var(--m-lh)} /* STACK en móvil: los 40px de flotación dejaban las tarjetas angostísimas (40+24 de aire = 64 por lado). Bajan a 12px, como en el home. */ .testimonios{margin:12px;padding:28px 0 24px} .lmapa{margin:0 12px 12px;border-radius:24px} /* ⚠️ LEY DEL AIRE ÚNICO: la tarjeta ya flota a 12px, así que su .wrap sólo pone los otros 12 (12+12 = los 24px de la norma). Con los 24 del .wrap salían 36px de aire real — el error clásico del doble padding. Mismo apaño que el blog del home (#blog margin 12 + inner padding 12). */ .lmapa .wrap{padding-inline:12px} .testimonios .wrap{padding-inline:12px} /* 12+12 = los 24px de la norma */ .rv-grid{grid-template-columns:1fr;gap:18px} /* 2026-08-01 · Carlos (2ª tanda), sólo móvil: · el título "Our Friend's Stories" va CENTRADO. · fuera la bajada "Real guests, real nights…": en móvil no aporta y empujaba la tarjeta hacia abajo. En escritorio sigue saliendo. · la tarjeta era de 370px fijos y sobraba aire arriba y abajo. La reseña más larga del sitio son 202 caracteres, que a 15px/1.55 ocupan ~6 líneas: con 300px entra con holgura y ya no baila. */ .rv-logo{justify-content:center;text-align:center} .rv-desc{display:none} .rv-stack{height:300px} /* 2026-08-01 · Carlos: "hay mucho espacio entre el final del review y el nombre del cliente". La causa era `.review p{flex:1}`: el párrafo se estiraba hasta llenar la tarjeta —que es de alto fijo— y empujaba la firma al fondo. En móvil el texto ya no se estira y el bloque se centra: la firma queda pegada a su reseña. */ .review{padding:24px 20px;justify-content:center} .rv-q{display:none} /* fuera la comilla en móvil */ .review p{font-size:var(--m-fs);line-height:var(--m-lh);flex:0 1 auto} .rv-by{margin-top:14px} .rv-desc{font-size:var(--m-fs);line-height:var(--m-lh);max-width:100%} .rv-dots{justify-content:center} /* NACHOS en móvil: una columna, el EFECTO ARRIBA y el texto debajo (si el texto va primero se cuela sobre el plato), y la lata NO sobresale — si sube, tapa el copy. El bajado de 70px también se anula: en pantalla estrecha no hay sitio y dejaría un hueco arriba. */ .nachos{min-height:auto;padding:clamp(70px,8vh,88px) 16px 48px; --lata-sale:0px;--nachos-bajar:0px} .nachos-inner{grid-template-columns:1fr;gap:0} .nachos-stage{width:min(420px,86vw);aspect-ratio:620/594;margin:0 auto; align-self:center;order:1} /* 2026-08-01 · Carlos: "la descripción llega al borde, no respeta el margen como en la landing". El culpable era este `padding:18px 0 0`: al ser atajo, ponía a 0 el padding lateral y anulaba el `padding-inline: var(--m-aire)` que la landing aplica en base.css. Ahora el aire de 24px se declara aquí mismo, igual que en la home. */ .nachos-text{order:2;text-align:center;align-items:center; padding:18px var(--m-aire,24px) 0;margin-left:0; box-sizing:border-box;width:100%;max-width:100%} .nachos-title{font-size:clamp(34px,10vw,46px)} .nachos-sub{font-size:var(--m-fs);line-height:var(--m-lh);text-align:justify; text-align-last:center} /* EXPERIENCIAS (retirada; el CSS se queda para poder remontarla) */ .lexp{padding:clamp(44px,6vh,64px) 0} .fsw__track>*{flex:0 0 78%} .fsw__arrow{display:none} /* en móvil se desliza con el dedo */ .fsw__head{padding:16px 18px} .fsw__slider{padding:14px} .fsw__sub{font-size:13px} .fsw-card__btn{font-size:13px;min-height:44px} /* botones a 13px y táctil 44 */ /* CÓMO LLEGAR: una columna, la ficha primero y el mapa debajo. El aire lateral lo pone el .wrap — aquí NADA de padding propio. */ .lmapa-in{grid-template-columns:1fr;gap:24px} .lmapa-marco{aspect-ratio:4/3;min-height:260px;border-radius:18px} .lmapa-datos li{font-size:var(--m-fs);line-height:var(--m-lh)} .lmapa-btns .btn{font-size:13px;flex:1 1 100%;text-align:center} } @media (prefers-reduced-motion:reduce){ .lhero-img,.lhero-video{transform:none!important} .lhero-hint svg{animation:none} /* estado FINAL del brindis (no el inicial): escena ya difuminada y el texto legible encima. El JS deja dibujado el último fotograma. */ .yardas-stage{filter:blur(11px) brightness(.55)} .yardas-velo{opacity:1} } /* ═════════════════ 🍤 NUEVOS PLATILLOS EN LA LOCACIÓN ═════════════════ Carlos 2026-07-28: "ese slider de nuevos platillos debemos meterlo pero en las locaciones, quizás hasta después del mapa". ⭐ Reutiliza el motor y las clases .gal-* de la galería de arriba (en locacion.js se monta con [data-cardflow], no hay código duplicado). Aquí SOLO se cambia lo que distingue a esta sección: 🎨 fondo ROJO — encima va el mapa (azul) y debajo el cierre (morado): ningún color se repite en secciones contiguas. */ #platillos .gal-track{background:var(--rojo)} /* ⚠️ el color del escenario NO vive en el carril sino en .gal-stage (un radial azul): sin sobrescribirlo aquí, la sección seguía saliendo azul. */ #platillos .gal-stage{ background:radial-gradient(120% 100% at 50% 0%,#d81b3d 0%,var(--rojo) 55%,#8d0620 100%)} #platillos .gal-stage::after{ background:radial-gradient(75% 60% at 50% 50%,transparent 40%,rgba(80,4,18,.5) 100%)} #platillos .gal-card{background:#5c0714} /* el hueco de la tarjeta, en rojo oscuro */ /* la ficha del platillo (la galería de fotos no lleva ficha; esta sí) */ .gal-txt{position:absolute;left:0;right:0;bottom:0;z-index:3; padding:clamp(16px,2.2vw,28px);text-align:left;pointer-events:none} .gal-badge{display:inline-block;font-family:"Oswald",sans-serif;font-weight:700; text-transform:uppercase;letter-spacing:2px;font-size:11px; background:var(--rojo);color:#fff;padding:5px 11px;border-radius:999px;margin-bottom:8px} .gal-name{margin:0;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase; color:#fff;font-size:clamp(18px,2.3vw,31px);line-height:1.05;letter-spacing:1px; text-shadow:0 3px 12px rgba(3,35,71,.55)} /* sobre el rojo, el badge rojo no se vería: en esta sección va amarillo */ #platillos .gal-badge{background:var(--amarillo);color:var(--azul)} @media (max-width:900px){ #platillos .gal-track{height:230svh} .gal-name{font-size:clamp(17px,4.6vw,22px)} .gal-txt{padding:14px 16px 16px} } /* ═════ 📱 auditoría móvil 2026-07-28 ═════ Ningún texto por debajo de 12px (norma móvil). El eyebrow del bloque de contacto y el badge del platillo estaban a 11px. ⚠️ Los .lang-btn del header se quedan a 10.5px: es decisión expresa de Carlos ("botones de idioma −20%"), diseño aprobado, no un defecto. */ @media (max-width:900px){ /* 2026-08-01 · Carlos (2ª tanda): en la tarjeta de ubicación, "Señor Frog's " iba pegado a la izquierda. Va CENTRADO, y la línea amarilla de debajo con él: era `margin:… 0 …`, que la dejaba anclada al borde. */ .lmapa-eyebrow{font-size:12px;text-align:center} .lmapa .sec-titulo{text-align:center} .lmapa-linea{margin-inline:auto} /* 2026-08-01 · Carlos: ciudad de 2+ palabras → "ENCUÉNTRANOS EN" arriba y la ciudad debajo. Sólo móvil: en escritorio los spans fluyen en una línea. */ .lmapa-titulo--dos .lm-l1, .lmapa-titulo--dos .lm-l2{display:block} .gal-badge{font-size:12px} } /* ═════════════════ 🎉 EVENTOS Y PROMOCIONES (unidades de USA) ═════════════════ Carrusel scroll-snap de banners cuadrados. ⛔ A propósito NO es otro card-flow: la página ya tiene dos y repetir el mismo truco por tercera vez se nota. Patrón nativo, sin JS de arrastre (organismo §3.7). 🎨 MORADO nocturno: el mapa de encima es azul y los platillos de abajo, rojos — ningún color se repite en secciones contiguas. */ .lev{position:relative;z-index:1;background:#0a0620; padding:clamp(56px,8vh,96px) 0 clamp(40px,6vh,64px);overflow:hidden} .lev-head{text-align:center;max-width:760px;margin:0 auto} .lev-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:3px;font-size:13px;color:var(--amarillo);margin:0 0 8px} .lev .sec-titulo{color:#fff;margin:0} .lev-sub{font-family:"Museo Sans Rounded",sans-serif;font-weight:300; color:rgba(255,255,255,.86);font-size:clamp(15px,1.5vw,18px);line-height:1.55; margin:12px auto 0;max-width:56ch} /* ⚠️⚠️ 2026-07-28 · EL CARRUSEL NO PUEDE ROBAR EL SCROLL DE LA PÁGINA. Llevaba `scroll-snap-type:x mandatory` + `touch-action:pan-x`, y con el ratón encima la página dejaba de fluir: el track se desplazaba solo en horizontal y, como el JS le cambia la escala a las tarjetas al entrar, el navegador re-ajustaba el snap sin parar = el "juego raro" de subir y bajar. · sin `scroll-snap`: nada que reajustar mientras la entrada está viva; · `touch-action:auto`: el navegador decide por la DIRECCIÓN del gesto — vertical scrollea la página, horizontal mueve el carril; · `overscroll-behavior-x:contain`: al llegar al final del carril el gesto no se encadena a la página. */ .lev-track{display:flex;gap:18px; -webkit-overflow-scrolling:touch;scrollbar-width:none; margin-top:clamp(26px,3.4vh,40px);padding:4px clamp(20px,6vw,80px) 10px; /* ⚠️⚠️ ESCRITORIO: overflow HIDDEN a propósito. Medido el 2026-07-28: con `overflow-x:auto`, al poner el ratón encima la página bajaba 480px en vez de 960 — el carril se quedaba con la mitad de la rueda. Con `hidden` no captura nada y **el scroll de la página fluye entero**; el carril se recorre con las flechas, que para eso están. (Antes lo intenté con scroll-snap y con touch-action y NINGUNO lo arregló: el que roba el scroll es el propio contenedor scrollable.) */ /* ⚠️⚠️ LOS DOS EJES. Poniendo sólo `overflow-x:hidden` el navegador computa `overflow-y:AUTO` y el carril se vuelve scrollable en vertical: seguía comiéndose la rueda (medido: la página bajaba 480 de 960px). */ overflow:hidden;scroll-behavior:smooth} .lev-track::-webkit-scrollbar{display:none} .lev-card{flex:0 0 clamp(240px,26vw,330px);margin:0;background:none; box-shadow:none;border-radius:0} /* la capa que SÍ se anima: la tarjeta de fuera nunca cambia de tamaño */ .lev-in{display:block;border-radius:20px;overflow:hidden;background:#140a30; box-shadow:0 18px 42px rgba(0,0,0,.45);transform-origin:50% 60%} /* ⚠️ SIN transition en .lev-card: el zoom de entrada lo escribe el JS en cada frame del scroll; una transición encima lo dejaría "persiguiendo" al dedo. El hover vive en la foto, que sí puede transicionar sin estorbar. */ .lev-card img{transition:transform .35s cubic-bezier(.22,.9,.3,1)} .lev-card:hover img{transform:scale(1.06)} /* sólo cuando el JS toma el mando arrancan escondidas: sin JS se ven siempre */ .lev-anima .lev-in{opacity:0;will-change:transform,opacity;backface-visibility:hidden} .lev-listo .lev-in{opacity:1;transform:none} .lev-card img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover} .lev-pie{text-align:center;margin-top:clamp(22px,3vh,34px)} /* flechas del carril (sustituyen al scroll-snap que robaba el scroll) */ .lev{--lev-nav-y:52%} .lev-nav{position:absolute;top:var(--lev-nav-y);transform:translateY(-50%);z-index:5; width:52px;height:52px;border-radius:50%;cursor:pointer; border:1px solid rgba(255,255,255,.34);background:rgba(255,255,255,.12);color:#fff; display:grid;place-items:center;backdrop-filter:blur(6px); transition:background .2s,border-color .2s,opacity .25s} .lev-nav svg{width:20px;height:20px;pointer-events:none} .lev-nav:hover{background:var(--rojo);border-color:var(--rojo)} .lev-nav:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .lev-nav[disabled]{opacity:0;pointer-events:none} /* en los extremos, fuera */ .lev-nav--prev{left:clamp(10px,2vw,26px)} .lev-nav--next{right:clamp(10px,2vw,26px)} @media (max-width:900px){ .lev-nav{display:none} /* en móvil manda el dedo */ /* ⚠️ En móvil SÍ se puede arrastrar: aquí no hay rueda que robar, y el navegador decide por la dirección del gesto (vertical = página). */ .lev-track{overflow-x:auto;overflow-y:hidden;touch-action:auto;overscroll-behavior-x:contain} } @media (max-width:900px){ /* la primera tarjeta arranca alineada con el título (norma de 24px) */ /* 2026-08-01 · auditoría de scroll: este carrusel era el ÚNICO sin scroll-snap de los cinco del sitio. Al soltar el dedo se quedaba a mitad de tarjeta. Se le pone el mismo comportamiento que al resto. */ .lev-track{gap:14px;padding-inline:var(--m-aire,24px); scroll-snap-type:x mandatory;scroll-padding-inline:var(--m-aire,24px); -webkit-overflow-scrolling:touch;min-width:0} .lev-card{flex:0 0 78%;scroll-snap-align:start} /* asoma la siguiente: se ve que hay más */ .lev-sub{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)} .lev-pie .btn{font-size:13px} } /* ═════ 🎟️ EXPERIENCIAS · rejilla de 3 (2026-07-28) ═════ La tienda real (experiences.senorfrogs.com) tiene TRES combos por unidad. Con tres no hace falta carrusel: caben los tres y se ven enteros. Si algún día hay más, `auto-fit` los envuelve sin tocar nada. */ .fsw__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px;padding:18px} .fsw__grid .fsw-card{flex:none;width:auto} .fsw-card__desc{font-family:"Museo Sans Rounded",sans-serif;font-weight:300; font-size:13px;line-height:1.45;color:#5b6b7d;margin:6px 0 0} .fsw__nota{font-family:"Museo Sans Rounded",sans-serif;font-size:12px; color:#7b8794;text-align:center;margin:0;padding:0 18px 18px} /* los manejadores del widget son sólo de móvil: en escritorio la rejilla enseña los tres productos a la vez y no hay nada que deslizar. */ .fsw__nav{display:none} @media (max-width:900px){ /* 2026-08-01 · Carlos (2ª vuelta del widget): · "see all products" baja DEBAJO de los manejadores. · el título en BORIS y en UNA sola línea, en los dos idiomas. · fuera la bajada "Reserve your experience now and pay when you get here". Para bajar el botón hay que reordenar, y el reorden necesita que los hijos del encabezado sean hijos del .fsw (display:contents). Eso deja al head sin caja —y sin su franja azul—, así que la franja se le pasa al
que lleva el título: se ve igual y el botón puede viajar al final. */ .fsw{display:flex;flex-direction:column} .fsw__head{display:contents} /* ⚠️ el brillo original del head queda huérfano con display:contents: su ::after (right:-10%) pierde el ancla, se posiciona contra la página y desbordaba el documento 39px (medido: 429 en vez de 390). El brillo ya vive en .fsw__head > div::after; el viejo se apaga. */ .fsw__head::after{content:none} /* 2026-08-01 · Carlos: el título va CENTRADO en la franja */ .fsw__head > div{order:1;position:relative;overflow:hidden; background:linear-gradient(120deg,var(--azul),#022b50);color:#fff; padding:16px 18px;text-align:center} .fsw__head > div::after{content:"";position:absolute;width:60%;height:160%; top:-30%;right:-10%;pointer-events:none; background:radial-gradient(circle,rgba(31,171,186,.25),transparent 70%)} .fsw__grid{order:2} .fsw__nav{order:3} .fsw__all{order:4;margin:0 auto 18px} .fsw__nota{order:5} /* Boris —la display de la marca— y de una sola línea. El cuerpo se ata al ancho de pantalla: "Reserva tu experiencia" son 22 caracteres, los que más ocupan de los dos idiomas, y con 5.2vw entran de sobra hasta en 320px. */ /* 5.2vw se salía por la derecha: Boris es MUY ancha en mayúsculas y "RESERVA TU EXPERIENCIA" son 22 caracteres. Medido en pantalla, con 4.2vw entra entera en los dos idiomas hasta en 320px de ancho. */ .fsw__title{font-family:"Boris Black","Oswald",sans-serif;font-weight:400; font-size:clamp(13px,4.2vw,24px);letter-spacing:.3px;line-height:1.15; white-space:nowrap} .fsw__sub{display:none} /* El botón, ya fuera de la franja azul, se viste para fondo blanco. ⚠️ Va con `.fsw a.fsw__all`: la regla general `.fsw a{color:inherit}` tiene más especificidad que `.fsw__all` y le colaba el blanco heredado del encabezado — el texto quedaba blanco sobre blanco, invisible. */ .fsw a.fsw__all{background:transparent;border-color:#c9d3dc;color:var(--azul)} .fsw a.fsw__all:hover{background:var(--azul);border-color:var(--azul);color:#fff} /* Apiladas, las tres tarjetas medían 1.243px de alto: había que bajar media pantalla para pasar de largo la sección. Mismo patrón que el blog: scroll-snap nativo (sin librerías), una tarjeta entera por pantalla, y flechas + puntos DEBAJO. */ .fsw__grid{display:flex;grid-template-columns:none; overflow-x:auto;overscroll-behavior-x:contain;min-width:0; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; gap:14px;padding:14px;scroll-padding-inline:14px; scrollbar-width:none} .fsw__grid::-webkit-scrollbar{display:none} /* el 100% se mide contra el content box, que ya descontó el padding: la tarjeta ocupa justo el ancho útil y no asoma la siguiente */ .fsw__grid .fsw-card{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:center} .fsw-card:hover{transform:none;box-shadow:0 4px 16px rgba(21,24,27,.07)} .fsw__nav{display:flex;align-items:center;justify-content:center;gap:16px; padding:0 14px 16px} .fsw__btn{width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer; border:1.5px solid #d7dde4;background:#fff;color:var(--azul); display:flex;align-items:center;justify-content:center;transition:.25s} .fsw__btn svg{width:20px;height:20px} .fsw__btn:disabled{opacity:.35;cursor:default} .fsw__btn:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .fsw__dots{display:flex;align-items:center;gap:8px} .fsw__dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%; background:#cbd3db;cursor:pointer;transition:background .2s,width .2s} .fsw__dots button[aria-current="true"]{background:var(--rojo);width:26px;border-radius:5px} .fsw__dots button:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px} /* 2026-08-01 · Carlos: el nombre del platillo y su descripción, centrados. El pie (precio + botón) se queda como está: va en su propia fila. */ .fsw-card__name, .fsw-card__desc{text-align:center} .fsw-card__desc{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55)} } /* ═════════════════ 📰 BLOG DE LA LOCACIÓN ═════════════════ Carlos (2026-07-28): "¿por qué las locaciones no tienen blogs?". Las páginas del sitio publicado llevan "our BLOGs" con 3 notas y a la plantilla se le había quedado fuera. 🎨 AZUL: encima quedan los platillos (rojo) y debajo el cierre (morado). ⛔ Sin efecto de scroll a propósito: la página ya tiene tres carruseles y dos pines — aquí toca un bloque de lectura (ley de ritmo §4.1). */ .lblog{background:var(--azul);padding:clamp(52px,8vh,92px) 0;position:relative;z-index:1} .lblog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px; margin-bottom:clamp(24px,3.4vh,38px)} .lblog-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:3px;font-size:13px;color:var(--amarillo);margin:0 0 6px} .lblog .sec-titulo{color:#fff;margin:0} .lblog-todos{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px; padding:0 20px;border-radius:999px;text-decoration:none; font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase; letter-spacing:1px;font-size:13px;color:#fff; border:1.5px solid rgba(255,255,255,.4);transition:background .2s,border-color .2s,color .2s} .lblog-todos:hover{background:var(--amarillo);border-color:var(--amarillo);color:var(--azul)} .lblog-todos:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .lblog-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:clamp(18px,2.4vw,30px)} .lblog-card{display:flex;flex-direction:column;background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);border-radius:20px;overflow:hidden; transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s} .lblog-card:hover{transform:translateY(-5px);box-shadow:0 22px 46px rgba(0,0,0,.34)} .lblog-foto{display:block;aspect-ratio:16/10;overflow:hidden;background:#02244a} .lblog-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .lblog-card:hover .lblog-foto img{transform:scale(1.06)} .lblog-body{padding:16px;display:flex;flex-direction:column;flex:1} .lblog-fecha{font-family:"Oswald",sans-serif;text-transform:uppercase;letter-spacing:1.6px; font-size:12px;color:var(--amarillo);margin:0 0 8px} .lblog-titulo{margin:0;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase; letter-spacing:.4px;font-size:clamp(17px,1.6vw,21px);line-height:1.2} .lblog-titulo a{color:#fff;text-decoration:none} .lblog-titulo a:hover{color:var(--amarillo)} .lblog-extracto{font-family:"Museo Sans Rounded",sans-serif;font-weight:300; color:rgba(255,255,255,.82);font-size:14.5px;line-height:1.5;margin:9px 0 0; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} /* margin-top:auto → los "leer más" quedan alineados entre tarjetas (ley E) */ .lblog-leer{margin-top:auto;padding-top:14px;font-family:"Oswald",sans-serif;font-weight:700; text-transform:uppercase;letter-spacing:1.2px;font-size:12.5px;color:var(--amarillo)} /* los manejadores del carrusel son SÓLO de móvil: en escritorio la rejilla enseña los tres artículos a la vez y no hay nada que deslizar. */ .lblog-nav{display:none} @media (max-width:900px){ .lblog-head{flex-direction:column;align-items:flex-start;gap:14px} /* 2026-08-01 · Carlos: "la sección de nuestro blog en la locación está mala en móvil, debería ser un slider". Apilada dejaba una columna larguísima de tarjetas. Ahora es un carrusel que se arrastra con el dedo, con el mismo ancho de tarjeta que el slider del blog en la home (80%). Scroll nativo con scroll-snap: sin JS, sin librerías, y accesible con teclado. El margen negativo lo saca del aire del .wrap para que las tarjetas sangren hasta el borde, como manda un carrusel. */ /* 2026-08-01 · Carlos (3ª tanda): "our blog sigue teniendo un margen blanco a los lados, el azul no ocupa todo el ancho". La culpa era mía: el `margin-inline` negativo que puse para sangrar el carrusel SACABA la pista fuera del documento, y eso abría scroll horizontal en la página entera. El fondo azul mide lo que el viewport, así que en la zona desplazada asomaba el blanco del body. Ahora el aire se lo quita el .wrap y lo pone la pista: mismo resultado visual, sin desbordar ni un pixel. Además el .wrap pasa a columna flexible para poder REORDENAR: el botón "ver todas las notas" baja del encabezado a debajo de los manejadores. */ .lblog{overflow-x:clip} .lblog > .wrap{padding-inline:0;display:flex;flex-direction:column} .lblog-head{display:contents} /* sus hijos pasan a ser del .wrap */ .lblog-head > div{order:1;padding-inline:var(--m-aire,24px);text-align:center} .lblog-grid{order:2} .lblog-nav{order:3} .lblog-todos{order:4;margin:18px auto 0} .lblog-grid{display:flex;grid-template-columns:none; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; gap:var(--m-aire,24px); padding-inline:var(--m-aire,24px); scroll-padding-inline:var(--m-aire,24px); scrollbar-width:none} .lblog-grid::-webkit-scrollbar{display:none} /* 2026-08-01 · Carlos (2ª tanda): antes iba al 80% y asomaba media tarjeta siguiente, con un margen desigual a los lados. Ahora entra UNA entera: 100% del ancho útil menos los dos aires, así el hueco de la izquierda y el de la derecha miden exactamente lo mismo. */ /* medido el 2026-08-01: la tarjeta salía a 270px en vez de 342 y por eso seguía asomando la siguiente. El `100%` de un hijo se resuelve contra el CONTENT box de la pista, que ya tiene descontado el aire por su padding-inline: al restarlo otra vez en el calc, se descontaba dos veces. Con 100% pelado la tarjeta ocupa justo el ancho útil. */ .lblog-card{flex:0 0 100%;width:100%;min-width:0;scroll-snap-align:center} /* un flex item con scroll horizontal necesita min-width:0 o se niega a encogerse por debajo de su contenido y vuelve a desbordar */ .lblog-grid{min-width:0} /* el hover que levanta la tarjeta no pinta en táctil y descuadra el arrastre */ .lblog-card:hover{transform:none;box-shadow:none} /* manejadores DEBAJO del carrusel: flechas a los lados y dots en medio */ .lblog-nav{display:flex;align-items:center;justify-content:center;gap:16px; margin-top:20px} .lblog-btn{width:44px;height:44px;flex:none;border-radius:50%;cursor:pointer; border:1.5px solid rgba(255,255,255,.45);background:#fff;color:var(--azul); display:flex;align-items:center;justify-content:center;transition:.25s} .lblog-btn svg{width:20px;height:20px} .lblog-btn:disabled{opacity:.35;cursor:default} .lblog-btn:focus-visible{outline:3px solid var(--amarillo);outline-offset:3px} .lblog-dots{display:flex;align-items:center;gap:8px} .lblog-dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%; background:rgba(255,255,255,.35);cursor:pointer;transition:background .2s,width .2s} .lblog-dots button[aria-current="true"]{background:var(--amarillo);width:26px; border-radius:5px} .lblog-dots button:focus-visible{outline:3px solid var(--amarillo);outline-offset:4px} .lblog-extracto{font-size:var(--m-fs,15px);line-height:var(--m-lh,1.55);-webkit-line-clamp:4} .lblog-todos{font-size:13px} /* 2026-08-01 · Carlos (3ª tanda): el eyebrow al centro y el título en Boris, que es la display de la marca — hasta ahora salía en Oswald. */ .lblog-eyebrow{text-align:center} .lblog .sec-titulo{font-family:"Boris Black","Oswald",sans-serif;font-weight:400; letter-spacing:.5px;line-height:1} /* 2026-08-01 · Carlos (4ª tanda), SÓLO en la locación — la home no se toca: · fuera el extracto: en una tarjeta que ya se desliza, sobra texto. · el título del artículo, centrado como el resto del bloque. · aire entre el encabezado "Nuestros blogs" y la tarjeta: al pasar el head a `display:contents` para reordenarlo, su margin-bottom dejó de aplicarse (un elemento sin caja no tiene margen) y quedaron pegados. */ .lblog-extracto{display:none} .lblog-titulo{text-align:center} .lblog-fecha{text-align:center} .lblog-leer{text-align:center} .lblog-head > div{margin-bottom:clamp(20px,3vh,30px)} } /* ═════════════════ 🍔 COMBOS USA · la pieza del home en las locaciones ═════════════════ 2026-08-02 · Carlos: "en escritorio se ve EL EFECTO (staging 3D); en móvil, el slider". Todo copiado VERBATIM del home (_fuente/plantilla.html): · staging 3D (líneas 587-688 de origen) — global, como en el home · carrusel móvil (848-907) + botón Qué incluye (1183-1191) — sólo ≤900 · hoja inferior (1194-1221) — global (sólo la abre el móvil) Reparto por formato al final del bloque. El motor JS: combos-staging.js. */ .lcombos{background:#2a0f0a;position:relative;z-index:1} /* ── STAGING 3D (escritorio; el propio motor no monta en ≤900) ── */ /* ================= COMBO INMERSIVO (staging 3D estilo Rally Maya) ================= */ .combo-imm{position:relative;z-index:1;margin-top:-96px;width:100vw;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;background:#1c0705} .combo-track{position:relative;height:calc(100vh + var(--ci-n,3) * 125vh)} /* Red de seguridad (auditoría 2026-07-23): si el staging 3D no llegó a montarse, el track no reserva sus ~475vh. Sin esto quedaba un hueco café vacío de casi 5 pantallas. */ .combo-track:not(.combo-montado){height:0;overflow:hidden} /* PORTADA del carrusel: primera diapositiva, con el mismo efecto de entrada que los combos */ .cmb-portada{display:grid;place-items:center;text-align:center} .cmb-portada-in{max-width:min(860px,88%);padding:20px} .cmb-portada h2{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;text-transform:uppercase; color:var(--amarillo);font-size:clamp(26px,5.2vw,76px);line-height:1.04;letter-spacing:normal;margin:0; text-shadow:0 6px 0 rgba(2,10,40,.75),0 14px 34px rgba(0,0,0,.5)} .cmb-portada h2 .pl{display:block;white-space:nowrap} .cmb-portada p{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;color:rgba(255,255,255,.88); font-size:clamp(14px,1.4vw,19px);line-height:1.6;max-width:620px;margin:24px auto 0; text-align:justify;text-align-last:center;text-wrap:pretty} @media (max-width:900px){ .cmb-portada p{font-size:14px} } /* aviso legal al pie de los combos, centrado y discreto */ .combo-legal{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;z-index:4;margin:0; text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .35s ease; font-family:"Museo Sans Rounded",sans-serif;font-weight:500;font-size:clamp(14px,1.25vw,18px);letter-spacing:.3px; color:var(--amarillo);text-shadow:0 2px 10px rgba(0,0,0,.5)} .combo-stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1500px;perspective-origin:50% 50%} .combo-slides{position:absolute;inset:0;transform-style:preserve-3d} .combo-slide{position:absolute;inset:0;opacity:0;will-change:transform,opacity;pointer-events:none;z-index:2} /* fondo compartido (estático) — la comida flota encima, como las portadas de Rally */ .combo-backdrop{position:absolute;inset:0;z-index:0;background:#0c0301} .combo-bd{position:absolute;inset:0;opacity:0;will-change:opacity} .combo-backdrop::after{content:"";position:absolute;inset:0;pointer-events:none;background: linear-gradient(90deg, rgba(9,3,2,.72) 0%, rgba(9,3,2,.3) 34%, rgba(9,3,2,0) 60%)} /* comida recortada = objeto héroe que entra en 3D */ .combo-hero-wrap{position:absolute;right:calc(4% + 70px);top:53%;transform:translateY(-50%);width:min(36%,630px);z-index:2;pointer-events:none} .combo-hero{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;object-position:center;filter:drop-shadow(0 26px 38px rgba(0,0,0,.6));will-change:transform,filter} .combo-content{position:absolute;inset:0;z-index:3;display:flex;align-items:center} .combo-content-in{width:100%;max-width:1240px;margin:0 auto;padding:0 clamp(20px,5vw,64px)} .combo-text{max-width:560px} .combo-eyebrow{font-family:"Oswald",sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:4px;font-size:13px;color:var(--amarillo);margin:0 0 8px} .combo-name{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;line-height:.88;font-size:clamp(46px,6.6vw,92px);color:#fff;margin:0;letter-spacing:1px;text-shadow:0 3px 0 var(--amarillo),0 5px 24px rgba(0,0,0,.6)} .combo-logo-img{display:block;width:auto;height:auto;max-width:min(96%,460px);max-height:26vh;margin:0 0 6px;filter:drop-shadow(0 6px 16px rgba(0,0,0,.45))} /* 2026-08-02 · Carlos (sólo desktop, los logos móviles están bien): MVP −15% · Happy Belly +15% · y los tres a la misma ubicación (mismo margen; fuera el corrimiento de 40/50px del Belly). */ .cmb-mvp .combo-logo-img{max-width:min(81.6%,391px);max-height:22.1vh} .cmb-power .combo-logo-img{max-width:min(77%,368px);max-height:21vh} .cmb-happy-belly .combo-logo-img{max-width:min(61%,322px);max-height:18.4vh} .cmb-happy-belly .combo-hero-wrap{width:min(39%,610px)} .cmb-power .combo-hero-wrap{width:min(39.6%,693px)} /* 10% más grande que el default (36%/630px) */ /* Happy Belly: el sticker de precio va ENCIMA de los nachos (centro-arriba de la foto) */ /* posición del sticker de precio por combo (2026-07-22, sobre el elemento que pidió Carlos) */ .cmb-power .combo-price-anchor{--pr-top:calc(2% - 30px);--pr-left:52%} /* encima de la hamburguesa (derecha) */ .cmb-mvp .combo-price-anchor{--pr-top:calc(6% - 35px);--pr-left:calc(4% - 20px)} /* 40px izq y 20px arriba del default */ .cmb-happy-belly .combo-price-anchor{--pr-top:calc(6% - 40px);--pr-left:2%} /* encima del molcajete (izquierda) */ /* Power: Main Course ocupa la columna derecha completa → Starter y Soft Drink pegados a la izquierda */ .cmb-power .combo-includes{grid-template-rows:auto auto} .cmb-power .combo-includes .ci-item:nth-child(2){grid-column:2;grid-row:1 / span 2;align-self:start} .combo-tag{display:inline-block;background:var(--amarillo);color:var(--rojo);font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;font-size:clamp(12px,1.4vw,16px);letter-spacing:.6px;padding:7px 20px;border-radius:30px;margin:16px 0 22px;box-shadow:0 4px 14px rgba(0,0,0,.4)} .combo-inc-lbl{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;color:var(--amarillo);font-size:17px;letter-spacing:2px;margin:0 0 12px} .cmb-mvp .combo-inc-lbl{margin-top:40px} .cmb-power .combo-inc-lbl{margin-top:45px} .combo-includes{display:grid;grid-template-columns:1fr 1fr;gap:13px 28px;margin:0 0 24px;max-width:520px} .ci-item{display:flex;gap:10px;align-items:flex-start} .ci-dot{width:11px;height:11px;border-radius:50%;background:var(--amarillo);margin-top:4px;flex:0 0 auto;box-shadow:0 0 0 3px rgba(247,190,57,.16)} .ci-lbl{display:block;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;color:#fff;font-size:15px;letter-spacing:.5px;line-height:1.12} .ci-txt{display:block;color:#ead9c6;font-family:"Museo Sans Rounded",sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.3px;line-height:1.3;margin-top:3px} .ci-hl{color:var(--amarillo);font-weight:600} .combo-cta{display:inline-flex;align-items:center;gap:9px;background:var(--amarillo);color:var(--rojo);font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1px;font-size:15px;padding:12px 26px;border-radius:var(--radio-btn);text-decoration:none;box-shadow:0 5px 0 var(--amarillo-osc);transition:transform .14s ease,box-shadow .14s ease} .combo-cta:hover{transform:translateY(-2px);box-shadow:0 7px 0 #d69a1c} /* aviso de impuestos dentro de cada combo, debajo del botón */ .combo-nota{margin:12px 0 0;font-family:"Museo Sans Rounded",sans-serif;font-weight:300;font-size:12px; letter-spacing:.2px;color:rgba(255,255,255,.6)} /* etiqueta de precio FLOTANTE a 15px sobre el borde de la foto (gap movible con --pr-gap) */ .combo-price-anchor{position:absolute;top:var(--pr-top,calc(6% - 15px));left:var(--pr-left,calc(4% + 20px));z-index:5;pointer-events:none} .combo-price{display:flex;flex-direction:column;align-items:center;line-height:1; background:linear-gradient(180deg,var(--rojo),var(--rojo-osc));border:2px solid var(--amarillo); border-radius:20px;padding:12px 24px 13px;box-shadow:0 16px 34px rgba(0,0,0,.55); transform:rotate(-5deg); animation:pricePop .55s cubic-bezier(.34,1.56,.64,1) both} .combo-price .pp-top{font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;font-size:13px;color:var(--amarillo);margin-bottom:2px} .pp-num{display:flex;align-items:flex-start;color:#fff;font-family:"Oswald",sans-serif;font-weight:700;line-height:.85} .pp-cur{font-size:24px;margin-top:4px;margin-right:1px} .pp-int{font-size:clamp(44px,5.3vw,58px)} .pp-dec{font-size:24px;margin-top:4px} @keyframes pricePop{0%{opacity:0;transform:rotate(-5deg) scale(.4)}100%{opacity:1;transform:rotate(-5deg) scale(1)}} @keyframes priceFloat{0%,100%{transform:rotate(-5deg) translateY(0)}50%{transform:rotate(-5deg) translateY(-7px)}} /* guía de scroll + progreso */ .combo-guide{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:6;display:flex;flex-direction:column;align-items:center;gap:9px;pointer-events:none;transition:opacity .4s} .combo-guide span{font-family:"Oswald",sans-serif;font-size:10px;font-weight:600;letter-spacing:.4em;text-transform:uppercase;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.6)} .combo-guide .arw{width:1px;height:34px;background:linear-gradient(to bottom,#fff,transparent);animation:comboDrop 1.8s ease-in-out infinite} @keyframes comboDrop{0%{transform:scaleY(0);transform-origin:top;opacity:1}50%{transform:scaleY(1);transform-origin:top;opacity:1}100%{transform:scaleY(1);transform-origin:top;opacity:0}} .combo-dots{position:absolute;z-index:6;top:50%;right:30px;transform:translateY(-50%);display:flex;flex-direction:column;gap:10px} .combo-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);transition:.3s} .combo-dot.on{background:var(--amarillo);height:26px;border-radius:6px} .combo-single .combo-dots{display:none} @media(max-width:820px){ .combo-track{height:calc(100vh + var(--ci-n,3) * 108vh)} .combo-content{align-items:flex-end} .combo-content-in{padding-bottom:104px} .combo-includes{grid-template-columns:1fr;gap:10px} .combo-price{padding:10px 18px 11px} .pp-int{font-size:40px}.pp-cur{font-size:19px}.pp-dec{font-size:19px} .combo-dots{right:14px} } /* ── HOJA "QUÉ INCLUYE" ── */ .cmb-inc-sheet{position:fixed; inset:0; z-index:3000; display:none} .cmb-inc-sheet.abierta{display:block} .cmb-inc-fondo{position:absolute; inset:0; background:rgba(2,10,26,.62); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; animation:cmbIncFade .25s ease forwards} .cmb-inc-panel{ position:absolute; left:0; right:0; bottom:0; background:#2a0f0a; border-radius:24px 24px 0 0; padding:26px 24px calc(30px + env(safe-area-inset-bottom)); box-shadow:0 -14px 40px rgba(0,0,0,.4); transform:translateY(100%); animation:cmbIncUp .32s cubic-bezier(.16,1,.3,1) forwards; max-height:82vh; overflow-y:auto; } @keyframes cmbIncFade{to{opacity:1}} @keyframes cmbIncUp{to{transform:translateY(0)}} .cmb-inc-x{position:absolute; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.10); border:none; color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer} .cmb-inc-x svg{width:20px; height:20px; pointer-events:none} .cmb-inc-eyebrow{font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:4px; font-size:12px; font-weight:700; color:var(--amarillo); margin:0 0 4px} .cmb-inc-title{font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; color:#fff; font-size:24px; line-height:1.05; margin:0 0 18px; padding-right:40px} .cmb-inc-list{display:flex; flex-direction:column; gap:14px; margin-bottom:22px} .cmb-inc-item{display:flex; gap:12px; align-items:flex-start; text-align:left} .cmb-inc-item>i{flex:0 0 9px; width:9px; height:9px; margin-top:6px; border-radius:50%; background:var(--amarillo)} .cmb-inc-item b{display:block; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; color:#fff; font-size:14px; letter-spacing:.03em} .cmb-inc-item span{display:block; font-family:"Museo Sans Rounded",sans-serif; font-weight:300; color:rgba(255,255,255,.82); font-size:13.5px; line-height:1.4} .cmb-inc-item span .ci-hl{color:var(--amarillo); font-weight:600} .cmb-inc-cta{display:block; text-align:center; background:var(--amarillo); color:var(--azul); font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.04em; font-size:13px; border-radius:14px; padding:12px 18px; text-decoration:none; box-shadow:0 4px 0 var(--amarillo-osc)} .cmb-inc-cta:active{transform:translateY(1px); box-shadow:0 2px 0 var(--amarillo-osc)} /* ── CARRUSEL MÓVIL (sólo ≤900) ── */ @media (max-width:900px){ /* 2026-08-02 · Carlos: "el card se corta arriba, mal encuadre". El staging trae margin-top:-96px del home (allí el solape con el mapa es diseño); aquí metía la primera tarjeta 62px bajo la sección anterior. En móvil el slider arranca limpio, sin solape. Escritorio conserva el del home. */ .lcombos{margin-top:0} .lcombos .combo-track{display:none} .cmb-m{display:block;padding:34px 0 40px} .cmb-m-desc{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;color:rgba(255,255,255,.82); font-size:13.5px;line-height:1.55;text-align:center;margin:8px auto 0;max-width:33ch;padding:0 18px} /* Slide de intro del carrusel de combos (2026-07-23) — el primero que se ve */ .cmb-m-intro{align-items:stretch} .cmb-m-intro-in{display:flex;flex-direction:column;justify-content:center;height:100%;padding:38px 26px;text-align:center;gap:14px} .cmb-m-intro-title .pl{display:block;white-space:nowrap} /* 2026-07-23 · Carlos: 2 líneas fijas, como en escritorio */ .cmb-m-intro-title{font-family:"Boris Black","Oswald",sans-serif;font-weight:400;text-transform:uppercase; color:var(--amarillo);font-size:28px;line-height:1.12;letter-spacing:.5px;margin:0;text-shadow:0 3px 0 var(--rojo)} .cmb-m-intro-copy{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;color:rgba(255,255,255,.9); font-size:var(--m-fs);line-height:var(--m-lh);margin:0;text-align:center} /* 2026-07-23 · Carlos: centrado, el justificado estiraba las palabras a las esquinas */ .cmb-m-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:0 16px 6px} .cmb-m-track::-webkit-scrollbar{display:none} /* 2026-07-23 · Carlos: TODAS las tarjetas miden lo mismo; logo arriba y botones abajo en posición fija; lo único que varía es el centrado vertical de la foto del producto. */ .cmb-m-card{flex:0 0 86vw;scroll-snap-align:center;border-radius:24px;overflow:hidden; border:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;height:472px; box-shadow:0 18px 40px rgba(0,0,0,.35)} .cmb-m-shot{position:relative;padding:14px 14px 0;text-align:center; flex:1;min-height:0;display:flex;flex-direction:column;align-items:center} /* la foto se centra en el hueco entre el logo (fijo arriba) y el cuerpo (fijo abajo): margin:auto 0 absorbe el espacio libre → SÓLO su centrado vertical cambia entre combos */ .cmb-m-shot>img:not(.cmb-m-logo){width:100%;max-height:230px;object-fit:contain;display:block; margin:auto 0;min-height:0;filter:drop-shadow(0 16px 26px rgba(0,0,0,.45))} /* 2026-07-23 · Carlos: comida por combo — belly −15%, power −10%, mvp −15% (base 230px) */ [data-combo="happy-belly"] .cmb-m-shot>img:not(.cmb-m-logo){max-height:195px} [data-combo="power"] .cmb-m-shot>img:not(.cmb-m-logo){max-height:207px} [data-combo="mvp"] .cmb-m-shot>img:not(.cmb-m-logo){max-height:195px} /* 2026-07-23 · Carlos: logos −15% (74%/78px → 63%/66px) + 15px de aire arriba y abajo */ .cmb-m-logo{display:block;flex:0 0 auto;max-width:63%;max-height:66px;object-fit:contain;margin:15px auto 15px} .cmb-m-price{position:absolute;bottom:2px;right:8px;background:var(--rojo);color:#fff; border:2.5px solid var(--amarillo);border-radius:16px;padding:7px 13px;text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.4);transform:rotate(-4deg)} .cmb-m-price i{display:block;font-family:"Oswald",sans-serif;font-style:normal;font-weight:700; text-transform:uppercase;font-size:9px;letter-spacing:1px;color:var(--amarillo);line-height:1.1} .cmb-m-price b{font-family:"Oswald",sans-serif;font-weight:700;font-size:27px;line-height:1;display:block} .cmb-m-price b sup{font-size:14px;vertical-align:top;margin-right:1px} .cmb-m-price b sub{font-size:14px;vertical-align:baseline;bottom:0} .cmb-m-body{padding:14px 18px 20px;display:flex;flex-direction:column;gap:10px;flex:0 0 auto} /* 2026-07-23 · Carlos: la nota de impuestos sale del modal y vive aquí, encima del botón */ .cmb-m-legal{font-family:"Museo Sans Rounded",sans-serif;font-weight:300;font-size:11px; color:rgba(255,255,255,.58);text-align:center;margin:0;line-height:1.35} .cmb-m-item{display:grid;grid-template-columns:9px 1fr;gap:10px;align-items:start} .cmb-m-item i{width:9px;height:9px;border-radius:50%;background:var(--amarillo);margin-top:6px;display:block} .cmb-m-item b{display:block;font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase; color:#fff;font-size:14px;letter-spacing:.4px;line-height:1.2} .cmb-m-item span{display:block;font-family:"Museo Sans Rounded","Oswald",sans-serif;color:#e6d9cf; font-size:13px;line-height:1.35;text-transform:uppercase} .cmb-m-item .ci-hl{color:var(--amarillo);font-weight:700} .cmb-m-cta{margin-top:0;display:flex;align-items:center;justify-content:center;text-align:center; min-height:52px;padding:0 18px;border-radius:999px;background:var(--amarillo);color:var(--rojo); font-family:"Oswald",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.6px; font-size:15px;text-decoration:none;box-shadow:0 5px 0 var(--amarillo-osc)} .cmb-m-cta:active{transform:translateY(3px);box-shadow:0 2px 0 var(--amarillo-osc)} .cmb-m-dots{display:flex;gap:8px;justify-content:center;margin-top:16px} .cmb-m-dots button{width:9px;height:9px;padding:0;border:none;border-radius:50%; background:rgba(255,255,255,.3);transition:background .2s,width .2s} .cmb-m-dots button[aria-current="true"]{background:var(--amarillo);width:26px;border-radius:5px} .cmb-m-incbtn{ display:block; width:100%; margin:0; font-family:"Oswald",sans-serif; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:#fff; background:rgba(255,255,255,.10); border:1.5px solid rgba(255,255,255,.28); border-radius:14px; padding:11px 16px; min-height:44px; cursor:pointer; -webkit-tap-highlight-color:transparent; /* 44px: lo pedía la auditoría forense */ transition:background .18s, transform .12s; } .cmb-m-incbtn:active{transform:scale(.97); background:rgba(255,255,255,.18)} } /* ── ESCRITORIO: el carrusel móvil no existe ── */ @media (min-width:901px){ .lcombos .cmb-m{display:none} }