/* ============================================================ CAFÉ LA JULIA · mobile-fixes.css Correcciones responsive para teléfonos (≤768px y ≤480px) Agregar como último en el del index.html ============================================================ */ /* ───────────────────────────────────────────── 1. NAV MÓVIL — Menú hamburguesa funcional ─────────────────────────────────────────────*/ @media (max-width: 1024px) { /* El nav ya tiene burger visible, ahora le damos el menú desplegable */ .n2-mobile-menu { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(10,10,10,.97); z-index: 99; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; transform: translateX(100%); transition: transform .4s cubic-bezier(.22,1,.36,1); } .n2-mobile-menu.open { transform: translateX(0); } .n2-mobile-menu a { font-family: var(--font-display); font-size: clamp(36px, 8vw, 54px); font-weight: 300; letter-spacing: -.02em; color: #fff; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); width: 80%; text-align: center; transition: color .2s; } .n2-mobile-menu a:last-child { border-bottom: none; } .n2-mobile-menu a:hover, .n2-mobile-menu a.active { color: var(--jy-yellow); } .n2-mobile-cart { margin-top: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: #fff; } /* Burger activo — X */ .n2-burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .n2-burger.open span:nth-child(2) { opacity: 0; } .n2-burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .n2-burger span { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform .3s, opacity .3s; } } /* ───────────────────────────────────────────── 2. GLOBAL — Padding de secciones reducido ─────────────────────────────────────────────*/ @media (max-width: 768px) { .sec { padding: 64px 20px; } .sec-tight { padding: 48px 20px; } /* Hero ajustado */ .hero2-inner { padding: 0 20px 56px; } .hero2-title { font-size: clamp(48px, 14vw, 80px); } .hero2-sub { font-size: 15px; max-width: 100%; } /* Sección head — stack vertical */ .sec-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 36px; } .sec-num { font-size: clamp(64px, 18vw, 120px); } /* ─── Parallax ─── */ .parallax { padding: 80px 20px; min-height: 50vh; } .parallax-title { font-size: clamp(40px, 12vw, 80px); } /* ─── Marquee ─── */ .marquee-track span { font-size: clamp(28px, 10vw, 48px); } /* ─── Story / Quiénes somos ─── */ .story-grid { grid-template-columns: 1fr; gap: 32px; } .story-body p { font-size: 15px; } .story-kicker { font-size: 22px; } /* ─── Testimonios ─── */ .testi { grid-template-columns: 1fr; gap: 16px; } .testi-mix { grid-template-columns: 1fr; gap: 16px; } .testi-card { padding: 28px 24px; } /* ─── Paquetes ─── */ .sec-paquetes { padding: 64px 20px; } .sec-paquetes-head { margin-bottom: 36px; } .sec-paquetes-h { font-size: clamp(36px, 10vw, 60px); } .paquetes-grid { grid-template-columns: 1fr; gap: 12px; } .paq-card { padding: 28px 24px; } .paq-price-num { font-size: 40px; } /* ─── Suscripción ─── */ .sec-suscripcion { padding: 64px 20px; } .susc-h { font-size: clamp(42px, 11vw, 72px); } .susc-lead { font-size: 15px; } .susc-plan-row { grid-template-columns: 1fr auto; gap: 12px; } .susc-plan-title { font-size: 22px; } .susc-plan-num { font-size: 26px; } .susc-points { grid-template-columns: 1fr; } .susc-plan-perks { padding-left: 0; } /* ─── B2B Form ─── */ .b2b { padding: 64px 20px; } .b2b-inner { grid-template-columns: 1fr; gap: 40px; } .b2b-h { font-size: clamp(36px, 10vw, 60px); } .b2b-form { padding: 24px 18px; gap: 14px; } .b2b-row { grid-template-columns: 1fr; gap: 12px; } /* ─── HScroll ─── */ .hscroll { padding: 64px 0; } .hscroll-head { padding: 0 20px; margin-bottom: 28px; } .hscroll-track { padding: 8px 20px 48px; gap: 16px; } .hscroll-card { flex-basis: 260px; } .hscroll-foot { padding: 20px 20px 0; flex-direction: column; align-items: flex-start; gap: 16px; } /* ─── Footer ─── */ .foot { padding: 64px 20px 32px; } .foot-top { grid-template-columns: 1fr; gap: 36px; margin-bottom: 48px; padding-bottom: 40px; } .foot-brand h3 { font-size: 32px; } .foot-bot { flex-direction: column; align-items: flex-start; gap: 16px; } /* ─── Julieta panel ─── */ .jl-panel { width: calc(100vw - 32px); bottom: 16px; left: 16px; } /* ─── Clipstrip ─── */ .clipstrip { padding: 48px 20px; gap: 48px; } /* ─── B2 buttons ─── */ .hero2-ctas { flex-direction: column; align-items: flex-start; } .hero2-ctas .b2 { width: 100%; justify-content: center; } } /* ───────────────────────────────────────────── 3. TIENDA — Grid de productos ─────────────────────────────────────────────*/ @media (max-width: 768px) { .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; } .prod-card { padding: 32px 18px 28px; } .prod-card-name { font-size: 18px; } .prod-card-price { font-size: 18px; } } @media (max-width: 480px) { /* En teléfonos muy chicos: 1 columna */ .prod-grid { grid-template-columns: 1fr; gap: 8px; } .prod-card { padding: 28px 20px 24px; } /* Filtros de tienda — scroll horizontal */ .tienda-filters { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tienda-filters::-webkit-scrollbar { display: none; } .tienda-filters button { flex-shrink: 0; } } /* ───────────────────────────────────────────── 4. TIPOGRAFÍA — Escalas en móvil chico ─────────────────────────────────────────────*/ @media (max-width: 480px) { .hero2-title { font-size: clamp(44px, 16vw, 72px); line-height: .9; } .sec-title { font-size: clamp(32px, 10vw, 52px); } .parallax-title { font-size: clamp(36px, 12vw, 60px); } .hscroll-num { font-size: clamp(54px, 14vw, 90px); } /* Ocultar número decorativo grande en móvil chico */ .sec-num { display: none; } .sec-head { margin-bottom: 28px; } } /* ───────────────────────────────────────────── 5. SECCIONES — Evitar pantallas en blanco ─────────────────────────────────────────────*/ @media (max-width: 768px) { /* Las secciones con grid vacío no dejan espacio muerto */ .sec > *:empty, .sec-tight > *:empty { display: none; } /* Reducir min-height del hero en móvil */ .hero2 { min-height: 100svh; } /* Fade-up inmediato en móvil (sin scroll delay extraño) */ .fade-up { opacity: 1 !important; transform: none !important; } } /* ───────────────────────────────────────────── 6. CHATBOT — Posición correcta en móvil ─────────────────────────────────────────────*/ @media (max-width: 768px) { .jl-fab { bottom: 16px; left: 16px; padding: 12px; border-radius: 50%; } .jl-fab-text { display: none; } .logo-badge { bottom: 16px; right: 16px; width: 48px; height: 48px; } }