:root{ --navy:#061a34; --navy2:#0b3974; --blue:#0f61c2; --yellow:#ffb400; --green:#20b966; --ink:#10233c; --muted:#6a7d93; --soft:#f5f8fc; --line:#e1e9f2; --white:#fff; --shadow:0 18px 45px rgba(13,42,76,.12); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:#fff;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden} a{text-decoration:none;color:inherit} img{display:block;max-width:100%} button,input{font:inherit} .container{width:min(1180px,calc(100% - 32px));margin:auto} /* Superior */ .topbar{background:var(--navy);color:#dceafd;font-size:12px} .topbar .container{height:28px;display:flex;align-items:center;justify-content:space-between;gap:20px} .topbar strong{color:#fff}.top-social{display:flex;gap:15px;font-weight:850} /* Header */ header{background:#fff;position:sticky;top:0;z-index:70;border-bottom:1px solid var(--line)} .head{min-height:82px;display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:23px} .logo{width:178px;height:61px;object-fit:contain} .search{height:50px;border:1px solid #ccd9e8;border-radius:15px;overflow:hidden;display:flex;background:#fff} .search:focus-within{border-color:var(--blue);box-shadow:0 0 0 4px rgba(15,97,194,.08)} .search input{flex:1;border:0;outline:0;padding:0 17px;min-width:0;color:var(--ink)} .search button{width:54px;border:0;background:var(--blue);color:#fff;font-size:20px;cursor:pointer} .head-actions{display:flex;gap:10px;align-items:center} .location-chip{padding:9px 13px;background:var(--soft);border-radius:13px;font-size:12px;line-height:1.18} .location-chip span{display:block;color:var(--muted);font-size:10px}.location-chip b{display:block} .btn{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:13px;padding:13px 17px;font-weight:900;cursor:pointer;transition:.2s} .btn:hover{transform:translateY(-1px)} .wa{background:var(--green);color:#fff}.white{background:#fff;color:var(--navy)} .nav{border-top:1px solid #f1f4f8} .nav .container{height:46px;display:flex;align-items:center;gap:28px;overflow:auto;white-space:nowrap;font-size:13px;font-weight:850} .nav a:first-child{color:var(--blue)} .staff-link{margin-left:auto;background:#eef4fb;color:var(--navy)!important;border:1px solid #d5e1ee;border-radius:999px;padding:7px 12px;display:inline-flex;align-items:center;gap:6px;font-weight:900} .staff-link:hover{background:#e3eefb} .staff-link .staff-icon{font-size:14px;line-height:1} /* Hero — v2.0, pensado primero para celular: foto real, precio en insignia, producto en spotlight */ .hero-wrap{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--navy),var(--navy2))} .hero-video-panel{position:absolute;inset:0} .hero-bg{display:block;width:100%;height:100%;object-fit:cover;object-position:center 30%} .hero-video-tag{display:none} .hero-shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(6,16,32,.94) 0%,rgba(7,26,50,.86) 32%,rgba(8,32,60,.52) 58%,rgba(8,32,60,.16) 82%,transparent 100%)} .hero-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:150px;pointer-events:none;background:linear-gradient(to bottom, transparent, var(--ambient) 94%)} .hero-shell{position:relative;z-index:2;height:460px} .hero-slide{position:absolute;inset:0;display:block;opacity:0;transform:translateX(18px);pointer-events:none;transition:opacity .5s ease,transform .5s ease} .hero-slide.active{opacity:1;transform:none;pointer-events:auto} .hero-copy{position:absolute;left:0;top:0;bottom:0;width:56%;max-width:640px;padding:0 46px;color:#fff;display:flex;flex-direction:column;justify-content:center;gap:16px} .eyebrow{display:inline-block;width:max-content;font-size:11px;letter-spacing:.09em;font-weight:800;text-transform:uppercase;color:#FFD262;border:1px solid rgba(255,180,0,.5);background:rgba(255,180,0,.16);border-radius:999px;padding:8px 14px} .hero-copy h2{margin:0;font-size:60px;line-height:.98;text-shadow:0 4px 24px rgba(0,0,0,.3)} .hero-copy p{margin:0;font-size:16px;line-height:1.55;color:#DCE8F7;max-width:480px} .hero-price{display:inline-flex;flex-direction:column;align-items:flex-start;width:max-content;font-size:32px;color:#FFCB6B;line-height:1;background:rgba(255,255,255,.1);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:12px 22px;box-shadow:0 14px 32px rgba(0,0,0,.28)} .hero-price::before{content:attr(data-label);display:block;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.62);margin-bottom:3px} .hero-actions{display:flex;gap:12px;flex-wrap:wrap} .hero-actions .btn{border-radius:999px;padding:16px 26px;font-size:14px;box-shadow:0 12px 26px rgba(0,0,0,.2)} .hero-actions .btn.white{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .hero-actions .btn.white:hover{background:rgba(255,255,255,.22)} .hero-actions .btn.wa:hover{box-shadow:0 16px 32px rgba(32,185,102,.4)} .hero-product{position:absolute;right:0;top:0;bottom:0;width:42%;display:flex;align-items:center;justify-content:center;padding:0 60px 0 10px} .hero-product::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,0,.22),transparent 70%);filter:blur(6px)} .hero-product img{ position:relative; height:360px; width:auto; max-width:100%; object-fit:contain; border-radius:20px; box-shadow:0 30px 60px rgba(0,0,0,.4); background:linear-gradient(160deg,#12335c,#0a2242); } /* V8.15 — el logo (fondo YA transparente) no es una foto de producto: nada de tarjeta/sombra/fondo sólido detrás, que se note como "un cuadrado pegado". Solo el resplandor ambiental de .hero-product::before de arriba queda detrás, igual que el resto del Hero. */ .hero-product img.hero-logo-img{ height:230px; border-radius:0; box-shadow:none; background:none; filter:drop-shadow(0 18px 30px rgba(0,0,0,.35)); } .arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:15;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:22px;cursor:pointer;box-shadow:0 10px 26px rgba(0,0,0,.22);transition:.2s} .arrow:hover{background:rgba(255,255,255,.24);transform:translateY(-50%) scale(1.06)} .prev{left:20px}.next{right:20px} .dots{position:absolute;left:50%;bottom:70px;transform:translateX(-50%);display:flex;gap:8px;z-index:16} .dot{width:26px;height:4px;border:0;border-radius:99px;padding:0;background:rgba(255,255,255,.32);cursor:pointer;position:relative;overflow:hidden} .dot.active::after{content:"";position:absolute;inset:0;background:var(--yellow);border-radius:99px;transform-origin:left;animation:dotfill 4.6s linear} @keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* ========================================================= HERO — composición desktop/tablet horizontal (prueba) Deja de usar el video como fondo full-width: pasa a ser un panel vertical propio a la izquierda, con el carrusel de combos ocupando el resto, todo sobre el mismo fondo navy. Mobile (≤820px) no se toca: sigue con el video de fondo. ========================================================= */ @media(min-width:821px){ .hero-shell{height:520px} .hero-wrap{ --hero-video-w:clamp(150px,19vw,260px); --hero-product-w:clamp(160px,20vw,260px); --hero-gap-l:clamp(20px,3vw,40px); --hero-gap-r:clamp(16px,2vw,24px); } .hero-shade{display:none} .hero-video-panel{ position:absolute; inset:auto; left:max(16px, calc(50% - 590px)); top:50%; transform:translateY(-50%); width:var(--hero-video-w); aspect-ratio:9/16; max-height:calc(100% - 56px); } .hero-video-panel::before{ content:""; position:absolute; inset:-26px; z-index:-1; pointer-events:none; background:radial-gradient(circle, rgba(120,170,255,.16), transparent 70%); } .hero-bg{ border-radius:22px; overflow:hidden; box-shadow:0 25px 55px rgba(2,10,24,.4), 0 0 0 1px rgba(255,255,255,.08); } .hero-video-tag{ display:inline-block; position:absolute; left:14px; bottom:14px; z-index:2; background:rgba(6,20,40,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); color:#fff; font-size:11px; font-weight:800; letter-spacing:.02em; padding:7px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.16); } .hero-copy{ left:calc(var(--hero-video-w) + var(--hero-gap-l)); right:calc(var(--hero-product-w) + var(--hero-gap-r)); width:auto; max-width:560px; } .hero-copy h2{font-size:clamp(30px, 4.3vw, 60px)} .hero-copy p{font-size:clamp(13px, 1.1vw, 16px)} .hero-price{font-size:clamp(24px, 2.2vw, 32px)} .hero-product{ width:var(--hero-product-w); padding:0 20px; } .hero-product::before{width:260px;height:260px} .hero-product img{height:320px} } /* Quickbar */ .quickbar{position:relative;z-index:4;margin-top:-24px;border:1px solid var(--line);border-radius:18px;background:#fff;display:grid;grid-template-columns:repeat(4,1fr);box-shadow:0 5px 18px rgba(14,45,79,.04)} .quick{padding:17px 19px;display:flex;align-items:center;gap:11px;border-right:1px solid var(--line)} .quick:last-child{border-right:0} .qicon{width:38px;height:38px;border-radius:12px;background:#edf4fc;color:var(--navy);display:grid;place-items:center;flex:0 0 auto;font-weight:900} .quick b{display:block;font-size:12px}.quick span{display:block;color:var(--muted);font-size:10px;margin-top:3px;line-height:1.35} /* Sections */ section{padding:46px 0} .gray{background:var(--soft)} .section-head{display:flex;justify-content:space-between;align-items:end;gap:26px;margin-bottom:20px} .kicker{font-size:11px;letter-spacing:.1em;color:var(--blue);font-weight:950;margin-bottom:7px} .section-head h2{margin:0;font-size:39px;letter-spacing:-.035em} .section-head p{margin:8px 0 0;color:var(--muted);line-height:1.55;max-width:620px} /* Rubros */ .cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px} .cat{min-height:160px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:18px;padding:19px;cursor:pointer;transition:.2s} .cat:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .cat-accent{display:block;width:35px;height:4px;background:var(--yellow);border-radius:99px;margin-bottom:18px} .cat strong{display:block;font-size:17px}.cat small{display:block;color:var(--muted);line-height:1.45;margin:8px 0 17px}.cat b{font-size:12px;color:var(--blue)} /* Combos: corregidos, sin cortar posters */ .combo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} .combo-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:0 5px 17px rgba(11,41,74,.05);display:flex;flex-direction:column;min-width:0} .combo-poster{height:305px;background:linear-gradient(145deg,#061a34,#0b3a74);display:flex;align-items:center;justify-content:center;padding:10px} .combo-poster img{height:100%;width:100%;object-fit:contain;object-position:center} .combo-copy{padding:17px;display:flex;flex-direction:column;flex:1} .combo-copy small{font-size:10px;letter-spacing:.08em;font-weight:950;color:var(--blue)} .combo-copy h3{font-size:19px;line-height:1.15;margin:6px 0 8px} .combo-copy p{font-size:12px;line-height:1.48;color:var(--muted);margin:0;flex:1} .combo-bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px} .combo-bottom strong{font-size:24px}.combo-bottom a{font-size:12px;color:var(--blue);font-weight:950} /* Local: abajo como pidió */ .local-banner{display:grid;grid-template-columns:42% 58%;min-height:360px;border-radius:18px;overflow:hidden;background:linear-gradient(115deg,#06182f,#0b3b75);box-shadow:0 8px 24px rgba(13,42,76,.1)} .local-copy{color:#fff;padding:38px;display:flex;flex-direction:column;justify-content:center} .local-copy h2{font-size:38px;line-height:1.04;margin:7px 0 10px}.local-copy p{color:#dce9f8;line-height:1.55;margin:0 0 18px} .local-image{overflow:hidden}.local-image img{width:100%;height:100%;object-fit:cover;object-position:center 59%} .local-pics{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:16px;scrollbar-width:none} .local-pics::-webkit-scrollbar{display:none} .local-pic{position:relative;height:200px;border-radius:16px;overflow:hidden;background:#ddd} .local-pic img{width:100%;height:100%;object-fit:cover} .local-pic span{position:absolute;left:0;right:0;bottom:0;padding:20px 14px 10px;background:linear-gradient(0deg,rgba(6,20,38,.82),rgba(6,20,38,0));color:#fff;font-weight:800;font-size:13.5px;letter-spacing:-.005em} /* Professionals */ .pro{background:linear-gradient(115deg,#06182f,#0b3b75 67%,#1262c1);border-radius:25px;padding:38px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:28px;color:#fff} .pro h2{font-size:42px;margin:0 0 10px}.pro p{color:#d9e8fa;line-height:1.6;max-width:720px} .tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{font-size:11px;font-weight:850;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.07);border-radius:999px;padding:8px 10px} /* V8.14.1 — "Encontrá un profesional": mismo componente que .pro, con acento cálido (naranja/amarillo) para diferenciarlo del bloque navy de "Para profesionales" que viene justo después. */ .find-pro{background:linear-gradient(115deg,#7a4c06,#b5780f 55%,var(--yellow));color:var(--navy)} .find-pro p{color:rgba(11,26,52,.78)} .find-pro .kicker{color:var(--navy)} .bp-chip{ font:inherit;font-size:12.5px;font-weight:850;color:var(--navy);cursor:pointer; border:1px solid rgba(11,26,52,.22);background:rgba(255,255,255,.55);border-radius:999px; padding:9px 14px;transition:.2s; } .bp-chip:hover{background:#fff;transform:translateY(-1px)} .bp-chip:focus-visible{outline:3px solid rgba(11,26,52,.35);outline-offset:2px} /* Social + info */ .social-grid,.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px} .social{border-radius:21px;padding:27px;color:#fff;min-height:180px;display:flex;flex-direction:column;justify-content:space-between} .social h3{font-size:28px;margin:4px 0 6px}.social p{margin:0;color:rgba(255,255,255,.84)}.social b{text-decoration:underline;text-underline-offset:4px}.ig{background:linear-gradient(135deg,#572bd3,#d33386 58%,#ffad32)}.tt{background:linear-gradient(135deg,#05070d,#172238)} .info-card{border:1px solid var(--line);border-radius:21px;padding:25px;background:#fff}.info-card h3{font-size:23px;margin:0 0 15px}.row{display:flex;justify-content:space-between;gap:20px;padding:12px 0;border-bottom:1px solid var(--line)}.row:last-of-type{border-bottom:0}.row span{color:var(--muted);text-align:right} .info-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}.blue{background:var(--blue);color:#fff} /* Search note */ .search-note{display:none;margin:16px auto 0;padding:15px;border:1px solid #ffe09b;background:#fff8e7;border-radius:14px} .search-note.show{display:block} /* Footer */ footer{background:#06172e;color:#fff;padding:40px 0 78px} .footer-grid{display:grid;grid-template-columns:1.3fr .8fr .8fr;gap:28px}.footer-logo{width:205px;margin-bottom:10px}.footer-grid p,.footer-grid a{color:#b9cce5;font-size:12px;line-height:1.6}.fh{font-weight:950;margin-bottom:9px}.fl{display:grid;gap:7px} .float-wa{position:fixed;right:17px;bottom:17px;width:58px;height:58px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:950;z-index:65;box-shadow:0 13px 30px rgba(0,0,0,.24)} /* Tablet */ @media(max-width:960px){ .head{grid-template-columns:150px 1fr}.head-actions{display:none}.logo{width:145px} .quickbar{grid-template-columns:1fr 1fr}.quick:nth-child(2){border-right:0}.quick:nth-child(-n+2){border-bottom:1px solid var(--line)} .cat-grid,.combo-grid{grid-template-columns:1fr 1fr}.combo-poster{height:340px} .local-banner{grid-template-columns:1fr}.local-image{height:320px}.pro{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr} } /* Celular */ @media(max-width:620px){ .container{width:calc(100% - 22px)} .topbar .container{height:31px;font-size:10px}.top-social{display:none} .head{grid-template-columns:118px 1fr;min-height:70px;gap:10px}.logo{width:115px;height:48px}.search{height:44px;border-radius:12px}.search button{height:44px;width:45px}.search input{font-size:12px;padding:0 10px} .nav .container{height:43px;gap:20px;font-size:12px} .quickbar{margin-top:12px}.quick{padding:13px 10px;gap:8px}.qicon{width:32px;height:32px;border-radius:10px}.quick b{font-size:10px}.quick span{font-size:9px} section{padding:52px 0}.section-head{display:block;margin-bottom:21px}.section-head h2{font-size:31px} .cat-grid{gap:9px}.cat{min-height:151px;padding:15px}.cat strong{font-size:15px}.cat small{font-size:10px}.cat b{font-size:11px} .combo-grid{grid-template-columns:1fr}.combo-card{display:grid;grid-template-columns:43% 57%;min-height:270px}.combo-poster{height:100%;min-height:270px;padding:8px}.combo-copy{padding:14px;justify-content:center}.combo-copy h3{font-size:16px}.combo-copy p{font-size:10px;flex:0}.combo-bottom strong{font-size:21px} .local-banner{min-height:0}.local-copy{padding:28px 22px}.local-copy h2{font-size:32px}.local-image{height:280px}.local-pics{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:180px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:4px}.local-pic{height:220px;scroll-snap-align:start} .pro{padding:28px 21px}.pro h2{font-size:32px} .social-grid,.info-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr} } /* ========================================================= HERO — v2.0, mobile-first El diseño se piensa primero para celular: tarjeta de promo sobre foto real, precio como insignia y botones grandes. El desktop (arriba) hereda el mismo lenguaje visual. ========================================================= */ .mobile-offer{display:none} @media(max-width:820px){ html,body{overflow-x:hidden} .container{width:calc(100% - 20px)} .topbar .container{ height:26px; justify-content:center; text-align:center; font-size:10px; white-space:nowrap; overflow:hidden; } .top-social{display:none} .head{ min-height:70px; display:grid; grid-template-columns:100px minmax(0,1fr); gap:10px; align-items:center; } .logo{width:96px;height:48px} .head-actions{display:none} .search{height:43px;border-radius:12px} .search input{ min-width:0; font-size:12px; padding:0 10px; } .search button{ width:43px; height:43px; flex:0 0 43px; } .nav{overflow:hidden} .nav .container{ width:100%; height:45px; padding:0 14px; gap:23px; display:flex; align-items:center; overflow-x:auto; overflow-y:hidden; white-space:nowrap; scrollbar-width:none; -webkit-overflow-scrolling:touch; } .nav .container::-webkit-scrollbar{display:none} .nav a{ flex:0 0 auto; font-size:12px; } /* Hero móvil */ .hero-wrap{ height:480px !important; min-height:480px !important; } .hero-shell{ height:480px !important; position:relative !important; } .hero-wrap::after{ height:110px !important; } .hero-bg{ object-position:center 20% !important; } .hero-shade{ background:linear-gradient( 165deg, rgba(6,15,30,.95) 8%, rgba(6,20,40,.82) 45%, rgba(6,22,44,.45) 75%, rgba(6,22,44,.14) 100% ) !important; } .hero-slide{ position:absolute !important; inset:0 !important; display:block !important; padding:0 !important; } /* Apagamos COMPLETAMENTE la estructura desktop */ .hero-copy, .hero-product{ display:none !important; } /* V8.16 — composición mobile rediseñada de raíz: de dos columnas (texto ancho + foto chica al costado) a una pila VERTICAL con la FOTO como elemento protagonista: categoría -> FOTO -> nombre -> precio -> acciones. El HTML no cambia (assets/home-carousel.js sigue armando exactamente el mismo marcado); ".mobile-offer-copy" pasa a "display:contents" para "desenvolver" sus hijos y poder intercalar la foto entre la categoría y el título con "order", sin tocar ni una línea de JS. Desktop (.hero-copy/.hero-product, ≥821px) no se toca. */ .mobile-offer{ position:absolute; inset:0; display:flex !important; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:6px; padding:10px 24px 54px; } .mobile-offer-copy{ display:contents; } .mobile-tag{ order:1; flex-shrink:0; display:inline-block; width:max-content; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,180,0,.5); background:rgba(255,180,0,.16); color:#FFD262; text-transform:uppercase; letter-spacing:.07em; font-size:11px; font-weight:800; } .mobile-offer-copy h2{ order:3; flex-shrink:0; margin:0; color:#fff; font-size:21px; line-height:1.18; letter-spacing:-.02em; max-width:290px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } /* La descripción no entra en esta composición -la jerarquía es FOTO -> NOMBRE -> PRECIO -> CTA, sin texto secundario en el medio-. */ .mobile-offer-copy p{ display:none; } .mobile-offer-copy strong{ order:4; flex-shrink:0; display:inline-flex; flex-direction:column; align-items:center; margin-top:0; background:rgba(255,255,255,.1); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.18); border-radius:14px; padding:6px 16px; box-shadow:0 12px 26px rgba(0,0,0,.26); color:#FFCB6B; font-size:23px; line-height:1; } .mobile-offer-copy strong::before{ content:attr(data-label); display:block; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.62); margin-bottom:3px; } .mobile-offer-actions{ order:5; flex-shrink:0; display:grid; grid-template-columns:1fr; gap:7px; width:100%; max-width:225px; margin-top:2px; } .mobile-offer-actions a{ min-height:44px; display:flex; align-items:center; justify-content:center; border-radius:999px; padding:8px 12px; text-align:center; font-size:12px; font-weight:800; } .mobile-wa{ background:var(--green); color:#fff; box-shadow:0 10px 22px rgba(32,185,102,.32); } .mobile-all{ background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* La zona de foto ahora se define por ALTO (no por ancho): así una imagen cuadrada, vertical u horizontal siempre entra completa con object-fit:contain, sin deformarse ni recortarse, dentro de la misma "área visual" de ~190px de alto pedida. */ .mobile-offer-art{ order:2; flex-shrink:0; width:100%; max-width:220px; height:172px; display:flex; align-items:center; justify-content:center; position:relative; } .mobile-offer-art::before{ content:""; position:absolute; top:50%; left:50%; width:182px; height:182px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(circle,rgba(255,180,0,.24),transparent 70%); } .mobile-offer-art img{ position:relative; width:auto; height:100%; max-width:100%; max-height:172px; object-fit:contain; border-radius:16px; box-shadow:0 20px 40px rgba(0,0,0,.4); background:linear-gradient(160deg,#12335c,#0a2242); } /* V8.15 — mismo criterio que en desktop: el logo no lleva tarjeta/fondo sólido detrás, solo el resplandor de .mobile-offer-art::before. */ .mobile-offer-art img.hero-logo-img{ height:162px; width:auto; border-radius:0; box-shadow:none; background:none; filter:drop-shadow(0 14px 24px rgba(0,0,0,.35)); } /* Institucional: mismo esqueleto vertical de arriba -el "order" ya definido en las reglas genéricas hace categoría -> búho -> título -> texto -> acciones-, acá solo se agranda el búho todavía más (tiene que sentirse igual o más protagonista que una foto de producto) y el título institucional queda un toque más chico para no competirle espacio. ".hero-logo-img" únicamente lo usa esta slide, así que nada de esto afecta a las administrables de productos/combos/recomendados. */ .hero-slide-institutional .mobile-offer-art{ height:192px; } .hero-slide-institutional .mobile-offer-art::before{ width:204px; height:204px; } .hero-slide-institutional .mobile-offer-art img.hero-logo-img{ height:182px; } .hero-slide-institutional .mobile-offer-copy h2{ font-size:20px; } .arrow{ width:44px !important; height:44px !important; font-size:20px !important; top:50% !important; z-index:30 !important; } .prev{left:10px !important} .next{right:10px !important} .dots{bottom:44px !important;z-index:30 !important} /* Quick bar */ .quickbar{ grid-template-columns:1fr 1fr !important; margin-top:-32px !important; border-radius:15px; overflow:hidden; } .quick{ min-height:72px !important; padding:12px 10px !important; gap:8px !important; } .quick:nth-child(2){border-right:0 !important} .quick:nth-child(-n+2){border-bottom:1px solid var(--line) !important} .qicon{ width:31px !important; height:31px !important; font-size:9px !important; } .quick b{font-size:10px !important;line-height:1.2} .quick span{font-size:8px !important;line-height:1.3} section{padding:36px 0 !important} .section-head{display:block !important;margin-bottom:16px !important} .section-head h2{font-size:29px !important} .cat-grid{ grid-template-columns:1fr 1fr !important; gap:9px !important; } .cat{ min-height:118px !important; padding:10px !important; } .combo-grid{grid-template-columns:1fr !important} .combo-card{ display:grid !important; grid-template-columns:130px minmax(0,1fr) !important; min-height:232px !important; } .combo-poster{ height:100% !important; min-height:232px !important; padding:7px !important; } .combo-poster img{ height:100% !important; width:100% !important; object-fit:contain !important; } .combo-copy{ padding:13px !important; justify-content:center !important; } .combo-copy h3{font-size:16px !important} .combo-copy p{font-size:10px !important;flex:0 !important} .combo-bottom strong{font-size:20px !important} .local-banner{grid-template-columns:1fr !important} .local-copy{padding:26px 20px !important} .local-copy h2{font-size:31px !important} .local-image{height:255px !important} .local-pics{grid-template-columns:none !important;grid-auto-flow:column !important;grid-auto-columns:150px !important;overflow-x:auto !important;scroll-snap-type:x mandatory !important;-webkit-overflow-scrolling:touch;padding-bottom:4px} .local-pic{height:190px !important} .local-pic span{font-size:12px !important;padding:16px 10px 8px !important} .pro{ grid-template-columns:1fr !important; padding:26px 20px !important; } .pro h2{font-size:31px !important} .social-grid, .info-grid, .footer-grid{ grid-template-columns:1fr !important; } .float-wa{ width:51px !important; height:51px !important; right:13px !important; bottom:13px !important; font-size:13px !important; } } @media(max-width:390px){ .head{grid-template-columns:88px minmax(0,1fr)} .logo{width:84px} .hero-wrap, .hero-shell{ height:420px !important; min-height:420px !important; } .mobile-offer{ gap:4px; padding:5px 22px 48px; } .mobile-tag{ padding:5px 11px; } .mobile-offer-art{ max-width:190px; height:136px; } .mobile-offer-art::before{ width:146px; height:146px; } .mobile-offer-art img{ max-height:136px; } .mobile-offer-art img.hero-logo-img{ height:126px; } .mobile-offer-copy h2{ font-size:19px; line-height:1.16; max-width:260px; } .mobile-offer-copy strong{ font-size:19px; padding:5px 13px; } .mobile-offer-actions{ max-width:200px; gap:5px; } .mobile-offer-actions a{ font-size:11px; min-height:39px; } /* Mismo rebalance que arriba, para pantallas muy chicas: el búho sigue por delante de una foto de producto cualquiera. */ .hero-slide-institutional .mobile-offer-art{ height:150px; } .hero-slide-institutional .mobile-offer-art::before{ width:162px; height:162px; } .hero-slide-institutional .mobile-offer-art img.hero-logo-img{ height:140px; } .hero-slide-institutional .mobile-offer-copy h2{ font-size:18px; } .combo-card{ grid-template-columns:115px minmax(0,1fr) !important; } } /* V4.9 - barra rápida completamente clickeable */ .quick-link{ color:inherit; text-decoration:none; cursor:pointer; transition:background .18s ease, transform .18s ease, box-shadow .18s ease; } .quick-link:hover{ background:#f7fbff; transform:translateY(-2px); box-shadow:0 8px 22px rgba(12,45,82,.08); } .quick-link:focus-visible{ outline:3px solid rgba(15,97,194,.22); outline-offset:-3px; } .quick-link:hover .qicon{ background:#dfeeff; } @media(max-width:820px){ .quick-link{ -webkit-tap-highlight-color:rgba(15,97,194,.08); } .quick-link:active{ transform:scale(.99); background:#f1f7ff; } } @media(max-width:820px){ .nav .staff-link{margin-left:0;padding:6px 10px;background:#eef4fb} } /* V6 · catálogo administrable */ .dynamic-catalog-section[hidden]{display:none!important}.dyn-filters{display:flex;gap:8px;overflow:auto;padding:2px 0 14px;scrollbar-width:none}.dyn-filters[hidden]{display:none}.dyn-filters::-webkit-scrollbar{display:none}.dyn-filter{white-space:nowrap;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:9px 13px;font-weight:800;cursor:pointer}.dyn-filter.active{background:var(--navy);color:#fff;border-color:var(--navy)}.dyn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.dyn-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 9px 26px rgba(13,42,76,.07);display:flex;flex-direction:column}.dyn-photo{height:220px;background:#f4f7fa;display:grid;place-items:center;position:relative;overflow:hidden;cursor:pointer}.dyn-photo img{width:100%;height:100%;object-fit:contain;background:#fff}.dyn-no-photo{font-weight:1000;color:var(--navy);font-size:22px}.dyn-badge{position:absolute;left:10px;top:10px;background:var(--yellow);color:var(--navy);font-size:10px;font-weight:1000;padding:6px 8px;border-radius:999px}.dyn-body{padding:15px;display:flex;flex-direction:column;flex:1}.dyn-body small{font-weight:900;color:var(--blue);letter-spacing:.04em}.dyn-body h3{margin:5px 0 7px;font-size:18px}.dyn-body p{color:var(--muted);font-size:14px;margin:0 0 8px}.dyn-body ul{padding-left:18px;margin:0 0 10px;color:var(--muted);font-size:13px}.dyn-bottom{margin-top:auto;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.dyn-bottom strong{font-size:20px}.dyn-bottom a{font-weight:900;color:var(--blue);text-decoration:none}.dyn-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.dyn-share{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:10px;width:32px;height:32px;cursor:pointer;font-size:14px;color:var(--ink);flex:0 0 auto}.dyn-share:hover{border-color:var(--blue);color:var(--blue)}.dyn-share:focus-visible{outline:3px solid rgba(15,97,194,.28);outline-offset:2px}.catalog-empty{padding:24px;text-align:center;color:var(--muted)}.dyn-see-all{text-align:center;margin-top:22px}@media(max-width:980px){.dyn-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.dyn-grid{grid-template-columns:repeat(2,1fr);gap:10px}#catalogo-grid>*:nth-child(n+5),#recomendados-home-grid>*:nth-child(n+5){display:none}.dyn-photo{height:160px}.dyn-body{padding:12px}.dyn-body h3{font-size:15px}.dyn-body p{font-size:12px}.dyn-bottom{display:block}.dyn-bottom strong{font-size:17px;display:block;margin-bottom:7px}}@media(max-width:410px){.dyn-grid{grid-template-columns:1fr 1fr}.dyn-photo{height:140px}} /* ========================================================= V7.0 — ETAPA 1: Encabezado moderno mobile-first (No toca hero, quickbar inferior, rubros, combos ni nada debajo del
. Solo agrega/reordena la parte superior.) ========================================================= */ .head-top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0 10px} .logo-link{display:flex;align-items:center;flex:0 0 auto} .quick-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end} .qa-btn{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-radius:12px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:850;font-size:13px;cursor:pointer;white-space:nowrap;transition:.2s} .qa-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(12,45,82,.08)} .qa-btn:focus-visible{outline:3px solid rgba(15,97,194,.28);outline-offset:2px} .qa-emoji{font-size:15px;line-height:1} .qa-wa{background:var(--green);border-color:var(--green);color:#fff} .qa-maps{background:var(--soft)} .search-row{padding:2px 0 16px} .search-big{height:50px;border-radius:15px;box-shadow:0 8px 22px rgba(12,45,82,.06);align-items:center} .search-big .search-icon{display:flex;align-items:center;padding-left:18px;color:var(--muted);font-size:17px} .search-big input{font-size:15px;padding:0 12px} .search-big button{width:60px;font-size:21px} .quick-categories{display:flex;gap:8px;overflow-x:auto;padding:0 0 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch} .quick-categories::-webkit-scrollbar{display:none} .qcat-pill{flex:0 0 auto;white-space:nowrap;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:850;font-size:12.5px;cursor:pointer;transition:.2s} .qcat-pill:hover{background:var(--soft);transform:translateY(-1px)} .qcat-pill:focus-visible{outline:3px solid rgba(15,97,194,.28);outline-offset:1px} /* Pill de "Llamar" dentro del nav — solo aparece en celular */ .qa-llamar-pill{display:none;align-items:center;gap:5px;background:#eef4fb;color:var(--navy);border:1px solid #d5e1ee;border-radius:999px;padding:7px 12px;font-weight:900;font-size:12px} /* Modal de horarios */ .horarios-modal{position:fixed;inset:0;z-index:130;display:none;align-items:center;justify-content:center;padding:20px} .horarios-modal.open{display:flex} .horarios-backdrop{position:absolute;inset:0;background:rgba(6,23,46,.55)} .horarios-card{position:relative;z-index:2;background:#fff;border-radius:20px;padding:28px 24px 22px;max-width:320px;width:100%;box-shadow:0 24px 60px rgba(0,0,0,.28)} .horarios-card h3{margin:0 0 14px;font-size:19px} .horarios-card .row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)} .horarios-card .row:last-of-type{border-bottom:0} .horarios-card .row b{font-weight:850} .horarios-card .row span{color:var(--muted)} .horarios-close{position:absolute;top:12px;right:12px;width:30px;height:30px;border-radius:50%;border:0;background:var(--soft);cursor:pointer;font-size:15px;line-height:1} /* Barra fija móvil (Maps + WhatsApp) al hacer scroll */ .mobile-fixed-bar{display:none} @media(max-width:820px){ .head-top{padding:10px 0 6px;flex-direction:column;align-items:stretch;gap:8px} .logo-link{align-self:center} .logo-link .logo{width:auto;height:56px} .quick-actions{justify-content:stretch;gap:7px} .quick-actions .qa-btn{flex:1 1 0;justify-content:center;padding:0 6px;font-size:11px;height:42px} .qa-llamar{display:none} .qa-llamar-pill{display:inline-flex} .search-row{padding:0 0 10px} .search-big{height:44px;border-radius:13px} .search-big .search-icon{padding-left:14px;font-size:15px} .search-big input{font-size:13px} .search-big button{width:48px;font-size:18px} .mobile-fixed-bar{ display:flex; position:fixed; left:12px;right:12px;bottom:-70px; z-index:60; gap:8px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:8px; box-shadow:0 14px 34px rgba(9,30,58,.18); transition:bottom .25s ease; } .mobile-fixed-bar.show{bottom:12px} .mfb-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border-radius:11px;background:var(--soft);color:var(--ink);font-weight:850;font-size:12.5px} .mfb-wa{background:var(--green);color:#fff} .float-wa{bottom:88px !important} /* Cuando hay barra fija móvil (Maps + WhatsApp) visible, la burbuja redonda de WhatsApp queda redundante (WhatsApp ya está en la barra): se oculta en vez de mostrar las dos a la vez. */ body:has(.mobile-fixed-bar.show) .float-wa{display:none!important} /* La barra fija es "position:fixed" y puede tapar el footer al llegar al final de la página: le damos lugar de sobra al footer. */ body:has(.mobile-fixed-bar.show) footer{padding-bottom:92px} } @media(max-width:390px){ .quick-actions .qa-btn{font-size:10px;padding:0 4px} } /* ========================================================= V8.0 — REDISEÑO VISUAL Redefine paleta, tipografía y jerarquía de tarjetas/botones. No cambia estructura, textos, ids ni funcionalidad: solo redefine estilos (aprovecha la cascada, igual que V7.0). ========================================================= */ :root{ --navy:#0B1E36; --navy2:#0C3766; --blue:#1B5FA6; --yellow:#F2A81D; --ink:#12202F; --muted:#63758A; --soft:#F3EFE6; --line:#E6E0D3; --shadow-soft:0 10px 28px rgba(20,32,20,.06); --ambient:#F1F4F9; } /* ========================================================= V14.0 — LIENZO CONTINUO Un único fondo ambiental para toda la home: base clara con toque azulado + resplandores muy sutiles por zona, en vez de secciones blancas/beige apiladas. Las cards no cambian. ========================================================= */ body{background:var(--ambient)} #rubros{background-image:radial-gradient(1200px 620px at 16% 0%, rgba(11,57,116,.045), transparent 62%)} #combos{background-image:radial-gradient(1200px 640px at 84% 10%, rgba(242,168,29,.05), transparent 60%)} #catalogo-dinamico{background-image:radial-gradient(1100px 600px at 50% 0%, rgba(11,57,116,.025), transparent 65%)} h1,h2,h3,.section-head h2,.hero-copy h2,.mobile-offer-copy h2,.local-copy h2,.pro h2, .combo-copy h3,.social h3,.info-card h3,.cat strong,.hero-price,.mobile-offer-copy strong, .combo-bottom strong,.dyn-bottom strong{ font-family:'Barlow Condensed',Inter,system-ui,sans-serif; letter-spacing:-.01em; } .section-head h2{font-weight:800;letter-spacing:-.025em} .hero-copy h2,.mobile-offer-copy h2,.local-copy h2,.pro h2{font-weight:800} .cat strong{font-size:20px;font-weight:800;letter-spacing:0} .combo-copy h3{font-weight:800;font-size:22px} /* Kicker: de "eyebrow" genérico a etiqueta con marca de color, no tracked-caps flotante */ .kicker{display:inline-flex;align-items:center;gap:7px;letter-spacing:.02em;font-weight:800;margin-bottom:9px} .kicker::before{content:"";width:16px;height:3px;background:var(--yellow);border-radius:2px;flex:0 0 auto} /* Botones: radio propio, más chico que el de las tarjetas, para marcar jerarquía */ .btn{border-radius:11px;font-weight:800;letter-spacing:-.005em} .wa:hover{box-shadow:0 10px 22px rgba(32,185,102,.30)} /* Categorías: de "card con lift genérico" a etiqueta de estante que resalta por color, no por elevación */ .cat{border-radius:12px;transition:border-color .2s ease,background .2s ease} .cat:hover{transform:none;box-shadow:none;border-color:var(--blue);background:#fbfdff} .cat-accent{width:22px;transition:width .2s ease} .cat:hover .cat-accent{width:40px;background:var(--blue)} /* Combos: radio más chico, zoom sutil de la foto en vez de levantar la tarjeta */ .combo-card{border-radius:16px;overflow:hidden} .combo-poster img{transition:transform .35s ease} .combo-card:hover .combo-poster img{transform:scale(1.045)} /* Catálogo dinámico (productos cargados por el equipo): mismo criterio que combos */ .dyn-card{border-radius:14px;box-shadow:none;transition:border-color .2s ease} .dyn-card:hover{border-color:var(--blue)} .dyn-photo img{transition:transform .35s ease} .dyn-card:hover .dyn-photo img{transform:scale(1.04)} /* Superficies grandes (banners) conservan un radio mayor a propósito, como contraste intencional */ .local-banner,.pro{border-radius:22px} .info-card,.social{border-radius:16px} .quickbar{border-radius:14px;box-shadow:var(--shadow-soft)} .quick-link:hover{transform:none;background:var(--soft);box-shadow:none} /* Pills de categorías y buscador: acompañan la nueva paleta, sin el mismo lift que todo lo demás */ .qcat-pill:hover{transform:none;border-color:var(--blue);color:var(--blue)} .search-big{border-radius:14px} .search-big:focus-within{box-shadow:0 0 0 4px rgba(27,95,166,.12)} /* ========================================================= V9.0 — IDENTIDAD MÁS FUERTE Un solo motivo, usado a fondo: la etiqueta de precio de cartulina que ya se ve pegada en tus estantes (foto real). Tipografía mucho más grande. Botones del header con más peso. ========================================================= */ /* Escala tipográfica: mucho más grande y con más peso */ .section-head h2{font-size:48px !important;font-weight:900 !important;letter-spacing:-.03em !important} .local-copy h2,.pro h2{font-size:44px !important;font-weight:900 !important} .cat strong{font-size:21px !important} .combo-copy h3{font-size:23px !important} /* Kicker: etiqueta de precio con corte diagonal, como las que ya usás en el local */ .kicker{ display:inline-flex;align-items:center;gap:7px; background:var(--yellow);color:var(--navy) !important; font-weight:900;font-size:12.5px;letter-spacing:.01em; padding:7px 16px 7px 22px;margin-bottom:16px; clip-path:polygon(13px 0,100% 0,100% 100%,13px 100%,0 50%); transform:rotate(-1.5deg); box-shadow:0 6px 14px rgba(18,32,47,.14); } .kicker::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--navy);flex:0 0 auto} .pro .kicker,.local-copy .kicker{background:var(--yellow);color:var(--navy) !important} /* ========================================================= V10.0 — Tarjetas de rubro: chapa clara con remaches ========================================================= */ .cat{ position:relative; background: radial-gradient(circle 4px at 15px 15px, #c3ccd4 60%, transparent 62%), radial-gradient(circle 4px at calc(100% - 15px) 15px, #c3ccd4 60%, transparent 62%), radial-gradient(circle 4px at 15px calc(100% - 15px), #c3ccd4 60%, transparent 62%), radial-gradient(circle 4px at calc(100% - 15px) calc(100% - 15px), #c3ccd4 60%, transparent 62%), repeating-linear-gradient(115deg, rgba(11,30,54,.035) 0px, rgba(11,30,54,.035) 2px, transparent 2px, transparent 9px), #fff; border:2px solid #D8E0E8; border-radius:10px; padding:26px 22px 22px; } .cat-accent{display:none} .cat strong{ font-family:'Barlow Condensed';font-style:italic;font-weight:800 !important; color:var(--blue);letter-spacing:0;margin-bottom:4px; } .cat b{ display:inline-block;background:var(--yellow);color:var(--navy); font-weight:900;font-size:12px;text-decoration:none; padding:8px 13px;border-radius:6px;margin-top:2px; } .cat:hover{border-color:#B9C6D2;background-color:#fbfcfd} /* Botones de accesos rápidos del header: relleno sólido, mucho más contraste */ .qa-btn{background:var(--navy);color:#fff;border-color:var(--navy)} .qa-btn:hover{background:var(--navy2);border-color:var(--navy2)} .qa-maps{background:#fff;color:var(--navy);border-color:var(--line)} .qa-maps:hover{background:var(--soft)} .qa-wa{background:var(--green);border-color:var(--green)} .qa-horarios{background:#fff;color:var(--navy);border-color:var(--line)} .qa-horarios:hover{background:var(--soft)} @media(max-width:820px){ .hero-copy h2{font-size:40px !important} .section-head h2{font-size:32px !important} .local-copy h2,.pro h2{font-size:30px !important} .hero-price{font-size:34px !important;padding:8px 20px 8px 24px} } /* ========================================================= V11.0 — HEADER COMPACTO Logo — Buscador grande — Cómo llegar — WhatsApp, en una sola fila. Debajo, una sola línea de categorías que termina en "Más" (ahí vive Horarios, Llamar y el resto de la navegación, sin perder nada, solo ordenado). ========================================================= */ header{position:sticky;top:0;z-index:80;background:#fff;box-shadow:0 1px 0 var(--line)} .head-row{display:flex;align-items:center;gap:16px;padding:10px 0} .head-row .logo-link{flex:0 0 auto} .head-row .search{flex:1 1 auto;min-width:0} .head-row .search-wrap{flex:1 1 auto;min-width:0} .head-actions-min{display:flex;gap:9px;flex:0 0 auto} /* V8.15 — panel de sugerencias del buscador (assets/site-search.js) */ .search-wrap{position:relative} .search-suggest{position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:95;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(9,30,58,.16);overflow:hidden;max-height:70vh;overflow-y:auto} .search-suggest[hidden]{display:none} .search-suggest-item{display:flex;align-items:center;gap:10px;padding:9px 12px;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)} .search-suggest-item:last-of-type{border-bottom:0} .search-suggest-item:hover,.search-suggest-item.active{background:var(--soft)} .search-suggest-item:focus-visible,.search-suggest-all:focus-visible{outline:3px solid rgba(15,97,194,.28);outline-offset:-2px;background:var(--soft)} .ssi-photo{width:36px;height:36px;border-radius:8px;background:#f4f7fa;display:flex;align-items:center;justify-content:center;overflow:hidden;flex:0 0 auto} .ssi-photo img{width:100%;height:100%;object-fit:contain} .ssi-body{min-width:0;display:flex;flex-direction:column;gap:2px} .ssi-body b{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ssi-body span{font-size:12.5px;color:var(--blue);font-weight:800} .search-suggest-all{display:block;padding:11px 12px;text-align:center;font-weight:850;font-size:13px;color:var(--blue);text-decoration:none;background:var(--soft)} .search-suggest-all:hover{background:#eaf1fa} @media(max-width:820px){ .head-row .search-wrap{flex:1 1 100%;order:3} .search-suggest{max-height:60vh} } .quick-categories{padding-bottom:8px} .mas-pill{border-style:dashed;color:var(--blue);font-weight:900} .more-menu{ display:none;position:absolute;left:0;right:0;top:100%;z-index:90; background:#fff;border-top:1px solid var(--line); box-shadow:0 18px 40px rgba(9,30,58,.14); } .more-menu.open{display:block} .more-inner{display:flex;gap:0} .more-col{flex:1;padding:22px 26px;border-right:1px solid var(--line)} .more-col:last-child{border-right:0} .more-h{display:block;font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:12px} .more-col .qcat-pill{display:block;width:max-content;margin-bottom:8px} .more-link{display:block;background:none;border:0;text-align:left;color:var(--ink);font-weight:700;font-size:14px;padding:8px 0;cursor:pointer;text-decoration:none;font-family:inherit} .more-link:hover{color:var(--blue)} @media(max-width:820px){ .head-row{flex-wrap:wrap;align-items:center;padding:8px 0;gap:8px} .head-row .logo-link{flex:0 0 auto;margin:0} .head-row .logo-link .logo{width:auto;height:30px} .head-row .search{flex:1 1 100%;order:3} .head-actions-min{flex:0 0 auto;order:2;margin-left:auto;display:flex;gap:8px} .head-actions-min .qa-btn{justify-content:center;padding:0;width:38px;height:38px;border-radius:50%} .head-actions-min .qa-btn span:last-child{display:none} .more-menu.open{position:fixed;inset:0;top:auto;bottom:0;display:block;max-height:75vh;overflow-y:auto;border-radius:16px 16px 0 0} .more-inner{flex-direction:column;width:100%} .more-col{border-right:0;border-bottom:1px solid var(--line);padding:18px 22px} .more-col:last-child{border-bottom:0} } /* ========================================================= V12.0 — MOVIMIENTO E INTEGRACIÓN Scroll suave, aparición progresiva de secciones al bajar, y el hero integrado con la foto (zoom lento tipo ken-burns + degradé más suave) en vez de sentirse un flyer pegado. ========================================================= */ html{scroll-behavior:smooth} @keyframes heroIn{to{opacity:1;transform:translateY(0)}} .hero-copy>*,.mobile-offer-copy>*{opacity:0;transform:translateY(14px);animation:heroIn .7s cubic-bezier(.2,.7,.2,1) forwards} .hero-copy .eyebrow,.mobile-offer-copy .mobile-tag{animation-delay:.05s} .hero-copy h2,.mobile-offer-copy h2{animation-delay:.14s} .hero-copy p,.mobile-offer-copy p{animation-delay:.22s} .hero-copy .hero-price,.mobile-offer-copy strong{animation-delay:.3s} .hero-copy .hero-actions,.mobile-offer-actions{animation-delay:.38s} .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)} .reveal.in{opacity:1;transform:translateY(0)} .reveal-stagger>*{opacity:0;transform:translateY(18px);transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)} .reveal-stagger.in>*{opacity:1;transform:translateY(0)} .reveal-stagger.in>*:nth-child(1){transition-delay:.03s} .reveal-stagger.in>*:nth-child(2){transition-delay:.08s} .reveal-stagger.in>*:nth-child(3){transition-delay:.13s} .reveal-stagger.in>*:nth-child(4){transition-delay:.18s} .reveal-stagger.in>*:nth-child(5){transition-delay:.23s} .reveal-stagger.in>*:nth-child(6){transition-delay:.28s} .reveal-stagger.in>*:nth-child(7){transition-delay:.33s} .reveal-stagger.in>*:nth-child(8){transition-delay:.38s} .cat,.combo-card,.dyn-card,.btn,.qa-btn,.qcat-pill,.qa-mini-card{transition:all .28s cubic-bezier(.2,.7,.2,1)} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .hero-copy>*,.mobile-offer-copy>*{animation:none;opacity:1;transform:none} .reveal,.reveal-stagger>*{opacity:1;transform:none;transition:none} .cat,.combo-card,.dyn-card,.btn,.qa-btn,.qcat-pill,.oficio-card,.qa-mini-card,.bp-chip,.rednet-card{transition:none!important} .oficio-card:hover,.qcat-pill:hover,.qa-mini-card:hover,.bp-chip:hover,.rednet-card:hover{transform:none} } /* Fase F — foco visible en controles que todavía no lo tenían explícito (.dyn-share ya lo tenía desde V8.5; mismo estilo que .qa-btn/.qcat-pill, sin cambiar el look normal de estos botones). */ .dyn-filter:focus-visible,.oficio-card:focus-visible, .mfb-btn:focus-visible,.prod-share:focus-visible{ outline:3px solid rgba(15,97,194,.28);outline-offset:2px; } /* ========================================================= V13.0 — REDISEÑO INTEGRAL Mismo motor (buscador, WhatsApp, Maps, categorías, combos, productos, admin, Supabase), carrocería nueva: tipografía, hero, categorías y jerarquía visual reconstruidos. ========================================================= */ /* --- Tipografía: de condensada/industrial a moderna y limpia --- */ h1,h2,h3,.section-head h2,.hero-copy h2,.mobile-offer-copy h2,.local-copy h2,.pro h2, .combo-copy h3,.social h3,.info-card h3,.cat strong,.hero-price,.mobile-offer-copy strong, .combo-bottom strong,.dyn-bottom strong{ font-family:'Manrope',Inter,system-ui,sans-serif !important; font-style:normal !important; font-weight:800 !important; letter-spacing:-.02em !important; } .section-head h2{font-size:42px !important} .local-copy h2,.pro h2{font-size:38px !important} .cat strong{font-size:22px !important;color:#fff !important} .combo-copy h3{font-size:20px !important} /* --- Categorías: tarjetas grandes con foto real, no texto plano --- */ .cat{ position:relative;overflow:hidden;min-height:190px; background:linear-gradient(180deg,rgba(8,20,38,.05) 0%,rgba(6,16,32,.82) 100%),#0d2038; background-size:cover;background-position:center; border:0 !important;border-radius:16px;padding:0; display:flex;align-items:stretch; box-shadow:0 6px 18px rgba(10,25,48,.1); } /* V17 - Categorías/Rubros: las 8 reglas por nombre exacto se eliminaron. El background-image ahora lo pone assets/home-rubros.js inline (style=), leído de categories.image_url -así una categoría nueva puede aparecer acá sin tocar CSS-. Mismo degradado que antes, ahora repetido en JS. */ .cat-accent{display:none} .cat>strong,.cat>small,.cat>b{position:relative;z-index:2;padding:0 20px} .cat{flex-direction:column;justify-content:flex-end;padding-bottom:20px} .cat strong{margin-bottom:4px} .cat small{color:#DCE6F2 !important;display:block;margin-bottom:12px} .cat b{ display:inline-block;background:rgba(255,255,255,.14) !important;color:#fff !important; backdrop-filter:blur(6px);font-weight:700 !important;font-size:12.5px; padding:8px 14px;border-radius:999px;margin-top:0;width:max-content; } .cat:hover{transform:translateY(-4px);box-shadow:0 22px 44px rgba(10,25,48,.24)} .cat:hover b{background:var(--yellow) !important;color:var(--navy) !important} @media(max-width:820px){ .section-head h2{font-size:30px !important} .cat{min-height:118px !important} .cat strong{font-size:14px !important} .cat small{font-size:10.5px !important;margin-bottom:5px !important;line-height:1.3 !important} .cat>strong,.cat>small,.cat>b{padding:0 11px !important} .cat{padding-bottom:10px !important} .cat b{font-size:10.5px !important;padding:5px 9px !important} } /* --- Combos y productos: menos caja, más foto y precio --- */ .combo-card,.dyn-card{border:0 !important;border-radius:20px !important;box-shadow:0 10px 28px rgba(15,30,55,.08) !important} .combo-card:hover,.dyn-card:hover{box-shadow:0 18px 40px rgba(15,30,55,.14) !important;transform:translateY(-3px)} .combo-copy small,.dyn-body small{ text-transform:none !important;letter-spacing:0 !important;font-weight:700 !important; color:var(--blue) !important;font-size:12px !important; } .combo-bottom strong,.dyn-bottom strong{font-size:26px !important;color:var(--ink)} .combo-bottom a,.dyn-bottom a{ background:var(--yellow);color:var(--navy) !important;font-weight:800 !important; padding:9px 14px;border-radius:10px;text-decoration:none !important; } /* --- Menos "tabla": sacamos divisores internos, dejamos espacio y sombra --- */ .quickbar{border:0 !important;gap:4px;box-shadow:0 10px 28px rgba(15,30,55,.06) !important} .quick{border-right:0 !important} .info-card{border:0 !important;box-shadow:0 10px 28px rgba(15,30,55,.06)} .row{border-bottom:0 !important} #recomendados-home[hidden]{display:none!important} /* V16.0 — Etapa 2B: el carrusel horizontal de 1 sola fila (78% de ancho, scroll-snap) quedó viejo frente a la grilla de 2 columnas que ya usan "Productos destacados"/"/productos/" -por eso Recomendados se sentía de otra calidad-. #recomendados-home-grid ya tiene class="dyn-grid", así que alcanza con NO pisarle grid-template-columns: hereda el mismo 2 columnas/4 columnas que el resto (ver bloque .dyn-grid más abajo). */ /* ========================================================= V8.14 — Accesos rápidos (Productos del local / Recomendados online), "Nuestro local" como bloque de confianza (sin repetir los 8 rubros) y etiqueta de precio dinámica del Hero. ========================================================= */ .qa-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px} .qa-panel{ border-radius:22px;padding:26px 24px;color:#fff; display:flex;flex-direction:column;gap:14px; box-shadow:0 14px 32px rgba(10,25,48,.14); } .qa-panel-kicker{font-size:11px;font-weight:900;letter-spacing:.08em;color:rgba(255,255,255,.78)} .qa-panel-head h3{margin:2px 0 2px;font-size:24px} .qa-panel-head p{margin:0;color:rgba(255,255,255,.82);font-size:13.5px;line-height:1.45;max-width:360px} .qa-panel-link{align-self:flex-start;text-decoration:underline;text-underline-offset:4px;font-size:13px;font-weight:900;color:inherit} .qa-panel-local{background:linear-gradient(135deg,var(--navy),var(--navy2))} .qa-panel-online{background:linear-gradient(135deg,#b5780f,var(--yellow));color:var(--navy)} .qa-panel-online .qa-panel-head p,.qa-panel-online .qa-panel-kicker{color:rgba(11,26,52,.72)} /* V8.15 — mini-vitrina integrada: la foto es la protagonista, sin tarjeta blanca pesada alrededor. Nombre y precio quedan directo sobre el fondo del panel (heredan su color), el único "marco" es un tile suave detrás de la foto para que no quede flotando sin límites. */ .qa-mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .qa-mini-card{text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:8px} .qa-mini-photo{ position:relative;aspect-ratio:1/1;border-radius:16px;overflow:hidden; background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center; transition:background .2s ease; } .qa-panel-online .qa-mini-photo{background:rgba(11,26,52,.08)} .qa-mini-card:hover .qa-mini-photo{background:rgba(255,255,255,.2)} .qa-panel-online .qa-mini-card:hover .qa-mini-photo{background:rgba(11,26,52,.14)} .qa-mini-photo img{width:82%;height:82%;object-fit:contain} .qa-mini-no-photo{font-weight:1000;font-size:10px;opacity:.75} .qa-mini-badge{position:absolute;left:7px;top:7px;background:rgba(6,26,52,.82);color:#fff;font-size:8.5px;font-weight:900;letter-spacing:.03em;padding:4px 7px;border-radius:999px;backdrop-filter:blur(4px)} .qa-mini-body b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.3;font-weight:750;margin:0 0 3px} .qa-mini-body span{display:block;font-size:14px;font-weight:900} .qa-mini-card:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:3px;border-radius:16px} .qa-panel-online .qa-mini-card:focus-visible{outline-color:rgba(11,26,52,.5)} .qa-mini-empty{font-size:13px;color:rgba(255,255,255,.85)} .qa-panel-online .qa-mini-empty{color:rgba(11,26,52,.75)} .local-facts{display:flex;gap:22px;flex-wrap:wrap;margin:4px 0 18px} .local-facts div{display:flex;flex-direction:column;gap:3px} .local-facts b{font-size:13px} .local-facts span{font-size:12.5px;color:#dce9f8} .local-actions{display:flex;gap:10px;flex-wrap:wrap} .local-trust-pics{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:16px} .local-trust-pics .local-pic{height:220px} @media(max-width:820px){ .qa-grid{grid-template-columns:1fr;gap:12px} .qa-panel{padding:22px 20px} .qa-panel-head h3{font-size:21px} .qa-mini-grid{grid-auto-flow:column;grid-auto-columns:42%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:2px;margin:0 -4px} .qa-mini-grid::-webkit-scrollbar{display:none} .qa-mini-card{scroll-snap-align:start;min-width:0} .local-facts{gap:16px;margin-bottom:14px} /* V16.0 — Etapa 2B: con auto-fit/minmax(200px,1fr) las 2 fotos de apoyo no entraban una al lado de la otra en mobile y terminaban apiladas (2 bloques altos, uno debajo del otro). Fuerzo 2 columnas para que queden lado a lado, más compactas -"foto principal" sigue siendo la del banner de arriba, estas son solo apoyo-. */ .local-trust-pics{grid-template-columns:1fr 1fr;gap:8px} .local-trust-pics .local-pic{height:120px} } /* ========================================================= V8.16 — Red de Profesionales El Búho: tarjetas de perfil (home, /encontra-profesional/) con foto de trabajo protagonista. Mismo lenguaje visual que el resto del sitio (navy/blue/yellow, esquinas redondeadas moderadas, sombra suave) para que se sienta parte de El Búho y no un directorio de clasificados pegado aparte. ========================================================= */ .rednet-hero{background:linear-gradient(160deg,var(--navy),var(--navy2));color:#fff;padding:34px 0} .rednet-hero .kicker{color:#FFD262} .rednet-hero h1{margin:6px 0 8px;font-size:32px;letter-spacing:-.03em;max-width:640px} .rednet-hero p{margin:0;color:#DCE8F7;max-width:620px;line-height:1.55} .rednet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .rednet-grid-home{margin-top:22px} .rednet-grid-home[hidden]{display:none} .rednet-card{ background:#fff;border-radius:20px;overflow:hidden;text-decoration:none;color:inherit; display:flex;flex-direction:column;box-shadow:0 10px 28px rgba(15,30,55,.08); transition:transform .2s ease,box-shadow .2s ease; } .rednet-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(15,30,55,.14)} .rednet-card:focus-visible{outline:3px solid rgba(15,97,194,.28);outline-offset:2px} .rednet-photo{height:190px;background:#f4f7fa;position:relative;overflow:hidden} .rednet-photo img{width:100%;height:100%;object-fit:cover} .rednet-no-photo{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:1000;color:var(--navy);font-size:15px} .rednet-body{padding:18px;display:flex;flex-direction:column;gap:4px} .rednet-body h3{margin:0;font-size:19px;letter-spacing:-.01em} .rednet-trade{color:var(--blue);font-weight:850;font-size:13px} .rednet-zones{color:var(--muted);font-size:12.5px} .rednet-cta{margin-top:10px;display:inline-flex;align-items:center;gap:6px;background:var(--navy);color:#fff;font-weight:850;font-size:13px;padding:10px 16px;border-radius:10px;width:max-content} .rednet-card:hover .rednet-cta{background:var(--navy2)} .rednet-state{padding:40px 20px;text-align:center;color:var(--muted)} @media(max-width:960px){ .rednet-grid{grid-template-columns:1fr 1fr} } @media(max-width:640px){ .rednet-grid{grid-template-columns:1fr} .rednet-hero{padding:26px 0} .rednet-hero h1{font-size:26px} } @media(max-width:480px){ .qa-mini-grid{grid-auto-columns:48%} } /* ========================================================= V14.0 — REDISEÑO HOME MOBILE (DRAFT, Etapa 1) Header + buscador + Hero + beneficios. Todo esto vive SOLO dentro de @media(max-width:820px)/(max-width:390px): desktop (≥821px) no se toca ni un pixel. No se toca assets/home-carousel.js (autoplay/swipe/dots/flechas siguen igual), ni admin, ni Supabase, ni el buscador (#searchForm/#searchInput/assets/site-search.js), ni la navegación real (#btnMas/#masMenu: el nuevo #hdrBurger del header solo re-dispara el click() de siempre, ver