/* ============================================================ LA PLAYA · Landing Mundial · Delivery Diseño mobile-first (~390px). Tema claro, azul de marca tomado del logo (#005DA2), acento dorado festivo. Solo CSS, sin librerías; tipografía del sistema (velocidad ante todo). El FONDO DINÁMICO lo aplica el snippet del sobre ; aquí solo se garantiza que TODO se lea encima de cualquier foto (riesgo #1): capa de contraste en + tarjetas claras + sombras en logo y textos sueltos. ============================================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Marca */ --azul: #005da2; /* azul de marca: tomado del logo laplaya.svg */ --azul-noche: #0a1622; /* base oscura para velos/contraste */ --dorado: #f2b417; /* acento festivo (NO en botones de delivery) */ --hueso: #faf7f0; /* tarjetas claras */ --tinta: #16222e; /* texto sobre tarjetas claras */ --gris-texto: #5b6770; /* texto secundario sobre claro */ /* Colores de marca de cada plataforma (botones de delivery) */ --rappi: #ff441f; /* rojo/coral Rappi */ --ubereats: #142328; /* oscuro Uber Eats (el logo aporta el verde) */ --didi: #fa6400; /* naranja DiDi Food */ --radio: 16px; --sombra: 0 6px 18px rgba(0, 0, 0, 0.18); } html { min-height: 100%; /* Color base mientras carga el webp del fondo dinámico */ background-color: var(--azul-noche); } body { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: #fff; -webkit-font-smoothing: antialiased; /* CAPA DE CONTRASTE sobre el fondo dinámico: velo oscuro degradado, más denso arriba (logo) y abajo (footer). Garantiza legibilidad sobre fotos claras u oscuras. */ background: linear-gradient( 180deg, rgba(10, 22, 34, 0.62) 0%, rgba(10, 22, 34, 0.38) 28%, rgba(10, 22, 34, 0.38) 68%, rgba(10, 22, 34, 0.72) 100% ); } /* ---------- Layout: una columna centrada, ancho de celular ---------- */ .encabezado, .contenido, .pie { width: 100%; max-width: 430px; margin: 0 auto; padding-left: 18px; padding-right: 18px; } /* ---------- Header: logo principal ---------- */ .encabezado { padding-top: 56px; text-align: center; } .logo { width: min(82%, 320px); height: auto; display: inline-block; /* Halo suave: el recuadro azul se despega de cualquier foto */ filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.45)); } /* ---------- Selector de ciudad: pills deslizables ---------- */ .selector-ciudad { /* Aire entre el logo y el bloque del selector (título + pills) */ margin-top: 48px; } .titulo-selector { /* Como el eslogan del footer, pero sin cursiva */ font-size: 1.2rem; font-weight: 500; text-align: center; /* Texto suelto sobre foto: sombra para legibilidad */ text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } /* Contenedor del carrusel: [flecha] [lista deslizable] [flecha]. Hereda el sangrado a bordes de pantalla que antes tenía la lista. */ .carrusel-ciudades { display: flex; align-items: center; /* Aire extra abajo: separa el selector de la pila de botones */ margin: 14px -18px 44px; padding: 0 8px; } /* Flechas: tappables pero discretas; no tapan las pills (van a los lados, y el desvanecido de la lista hace la transición) */ .flecha-carrusel { flex: 0 0 auto; width: 34px; height: 34px; margin-bottom: 10px; /* compensa el padding inferior de la lista */ border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: rgba(10, 22, 34, 0.5); color: #fff; font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity 0.2s; } /* Sin más ciudades hacia ese lado: la flecha se atenúa y deja de responder (la pone/quita actualizarFlechas en script.js) */ .flecha-carrusel.atenuada { opacity: 0.25; pointer-events: none; } .lista-ciudades { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; /* Aire abajo para que respire y no lo tapen los botones */ padding: 4px 10px 14px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; /* Sin barra de scroll visible (sigue siendo deslizable) */ scrollbar-width: none; /* Desvanecido en los bordes: insinúa que hay más ciudades. El lado derecho desvanece más largo para que una pill cortada por el borde se funda a transparente (corte intencional, no palabra a la mitad) */ -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 12px, #000 calc(100% - 44px), transparent 100% ); mask-image: linear-gradient( 90deg, transparent 0, #000 12px, #000 calc(100% - 44px), transparent 100% ); } .lista-ciudades::-webkit-scrollbar { display: none; } .pill-ciudad { flex: 0 0 auto; scroll-snap-align: start; appearance: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; /* No seleccionada: oscuro translúcido sobre la foto */ background: rgba(10, 22, 34, 0.5); color: #fff; font: inherit; font-size: 0.9rem; font-weight: 600; padding: 10px 18px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .pill-ciudad.seleccionada { background: var(--azul); border-color: var(--azul); box-shadow: 0 4px 12px rgba(0, 93, 162, 0.45); } /* Check solo en la pill seleccionada (lo pinta CSS, no el JS) */ .pill-ciudad.seleccionada::before { content: "✓ "; color: var(--dorado); font-weight: 800; } /* ---------- Botones de canal (grandes, tappables, apilados) ---------- */ .zona-botones { display: flex; flex-direction: column; gap: 16px; } .zona-eshop { margin-top: 16px; /* mismo ritmo que el resto de la pila */ } .boton { display: flex; align-items: center; gap: 14px; min-height: 68px; /* objetivo grande para el dedo */ padding: 12px 16px; border-radius: var(--radio); text-decoration: none; color: #fff; box-shadow: var(--sombra); -webkit-tap-highlight-color: transparent; transition: transform 0.08s ease; } .boton:active { transform: scale(0.98); } /* Cuadrito izquierdo: logo oficial o ícono */ .boton-icono { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; } .boton-icono img { width: 100%; height: 100%; object-fit: cover; /* los logos ya vienen como cuadro con su fondo */ display: block; } .boton-icono svg { width: 26px; height: 26px; fill: currentColor; } .boton-textos { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .boton-titulo { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; /* "RAPPI", "UBER EATS", "ESHOP"... */ line-height: 1.15; } .boton-subtitulo { font-size: 0.8rem; opacity: 0.85; } /* Flecha "lleva a otro lado" */ .boton-flecha { margin-left: auto; font-size: 1.7rem; line-height: 1; opacity: 0.7; } /* --- Delivery: color e identidad de cada plataforma --- */ .boton-rappi { background: var(--rappi); } .boton-ubereats { background: var(--ubereats); } .boton-didi { background: var(--didi); } /* --- eShop: azul de marca con estrella dorada --- */ .boton-eshop { background: var(--azul); } .icono-eshop { background: #fff; color: var(--dorado); font-size: 1.5rem; } /* --- Encuentra tu sucursal: tarjeta clara con pin --- */ .boton-sucursal { background: var(--hueso); color: var(--tinta); } .boton-sucursal .boton-icono { background: rgba(0, 93, 162, 0.1); color: var(--azul); } .boton-sucursal .boton-subtitulo { color: var(--gris-texto); opacity: 1; } .boton-sucursal .boton-flecha { color: var(--azul); } /* ---------- Estado SIN delivery: tarjeta "MUY PRONTO" ---------- */ .tarjeta-proximamente { background: var(--hueso); color: var(--tinta); border-radius: var(--radio); box-shadow: var(--sombra); padding: 22px 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; } .etiqueta-pronto { background: var(--dorado); color: #4a3300; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.14em; padding: 5px 13px; border-radius: 999px; } .sin-delivery-titulo { color: var(--azul); font-size: 1.15rem; font-weight: 800; line-height: 1.25; } .sin-delivery-subtitulo { color: var(--gris-texto); font-size: 0.95rem; line-height: 1.45; } /* ---------- Footer: cierre de marca + redes ---------- */ .pie { margin-top: auto; /* empuja el footer al fondo en pantallas altas */ padding-top: 34px; padding-bottom: 28px; text-align: center; } .eslogan { font-style: italic; font-size: 1.15rem; font-weight: 500; /* Texto suelto sobre foto: sombra para legibilidad */ text-shadow: 0 1px 8px rgba(0, 0, 0, 0.55); } .logo-footer { width: 172px; height: auto; display: block; margin: 10px auto 16px; filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.45)); } .redes { display: flex; justify-content: center; gap: 14px; } .red-social { width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--azul); display: flex; align-items: center; justify-content: center; box-shadow: var(--sombra); -webkit-tap-highlight-color: transparent; transition: transform 0.08s ease; } .red-social:active { transform: scale(0.94); } .red-social svg { width: 22px; height: 22px; fill: currentColor; } /* ---------- Accesibilidad: foco visible con teclado ---------- */ .pill-ciudad:focus-visible, .boton:focus-visible, .red-social:focus-visible { outline: 3px solid var(--dorado); outline-offset: 2px; }