*,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ --bg:#FCFAF6; /* crema de fondo */ --pure:#FFFFFF; /* blanco puro */ --ink:#033220; /* verde profundo (texto) */ --green:#033220; --green-2:#0B473B; --green-soft:#F1F5F2; --gold:#B88A4C; --gold-l:#D4AC58; --gold-d:#8A6C3A; --border:#E4DED1; --muted:#5F6F66; /* alias heredados */ --black:#033220;--dark:#F1F5F2;--card:#FFFFFF; --em:#033220;--em-d:#0B473B;--em-glow:rgba(3,50,32,.06); --white:#033220; --gold-light:#D4AC58;--gold-dark:#8A6C3A; --silver:#9AA8A2;--rose:#B8845E; --hdr-h:94px; --util-h:34px; --hdr-gap:16px; --serif:'Fraunces',serif;--sans:'Inter',sans-serif; /* ── Glassmorphism — receta tomada de verifik.co, adaptada a la marca ── Original: bg rgba(255,255,255,.12) blur(18px) saturate(1.4) border rgba(255,255,255,.26) shadow 0 16px 40px rgba(0,0,0,.14) */ --glass-blur: blur(20px) saturate(1.5); --glass-bg: rgba(252,250,246,.62); /* crema translúcido, sobre foto/color */ --glass-bg-strong: rgba(252,250,246,.8); /* misma receta, más opaco para texto largo */ --glass-border: rgba(255,255,255,.55); --glass-shadow: 0 16px 40px rgba(3,50,32,.16); --glass-bg-dark: rgba(3,50,32,.46); /* variante oscura, sobre foto clara */ --glass-border-dark: rgba(255,255,255,.22); --glass-shadow-dark: 0 18px 45px rgba(0,0,0,.28); } html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;touch-action:manipulation} .glass{ background:var(--glass-bg); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border); box-shadow:var(--glass-shadow); } .glass-dark{ background:var(--glass-bg-dark); -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border-dark); box-shadow:var(--glass-shadow-dark); } body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;overflow-x:hidden;cursor:default} body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");opacity:.5} /* ── PAGES ── */ .page{display:none;position:relative;z-index:1;min-height:100vh} .page.active{display:block;animation:pageIn .45s ease both} /* Fase 3B: transición sutil entre páginas — cambio de página se sentía como un corte instantáneo. Duración corta a propósito, para no llamar la atención. */ @keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @media(prefers-reduced-motion:reduce){.page.active{animation:none}} /* ── HEADER ── */ .hdr{ position:fixed;left:0;right:0;z-index:500; top:calc(var(--util-h) + var(--hdr-gap)); height:var(--hdr-h);padding:0 20px;background:none;border:none; pointer-events:none; -webkit-backdrop-filter:none;backdrop-filter:none; } /* Cápsula flotante sobre el banner — con fondo, sin resplandor exterior */ .hdr-in{ pointer-events:auto; position:relative; max-width:1360px;margin:0 auto;padding:0 14px 0 24px; height:var(--hdr-h);display:flex;align-items:center;gap:6px; } /* El fondo vive en su propia capa recortada, así no se escapa por fuera de la cápsula, y el submenú (fuera de esta capa) no queda oculto */ /* Sin caja propia: el header se mezcla directo con lo que tenga detrás (la foto del hero, o el fondo crema en las demás páginas) */ .hdr-in::before{ content:'';position:absolute;inset:0;z-index:-1; background:transparent;border:none;box-shadow:none; } /* Logo flush LEFT — before nav */ .logo-wrap{ display:flex;align-items:center;cursor:pointer; flex-shrink:0; position:relative; } .logo-wrap{color:var(--bg)} .logo-wrap svg{ height:80px !important;width:auto !important; display:block; filter:drop-shadow(0 1px 7px rgba(184,138,76,.32)); transition:filter .45s,transform .35s; } .logo-wrap:hover svg{ filter:drop-shadow(0 1px 10px rgba(184,138,76,.55)) drop-shadow(0 0 22px rgba(184,138,76,.28)); transform:scale(1.03); } .logo-wrap:active svg{transform:scale(.98)} .footer-logo svg{filter:drop-shadow(0 1px 7px rgba(184,138,76,.28))} .nav{display:flex;gap:0px;margin-left:10px;margin-right:auto} .nav-a{ font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--muted); cursor:pointer;padding:12px 11px;border-radius:9px;white-space:nowrap; transition:background .28s,color .28s; } .nav-a:hover{background:rgba(3,50,32,.055);color:var(--em)} .nav-a.active{background:rgba(3,50,32,.075);color:var(--em)} /* Botón de acción, al extremo derecho de la cápsula */ .nav-cta[hidden]{display:none} .nav-cta{ display:inline-flex;align-items:center;gap:8px;white-space:nowrap; font-family:var(--sans);font-size:9.5px;letter-spacing:1.8px;text-transform:uppercase; color:var(--pure);cursor:pointer;border:none;border-radius:9px; padding:14px 20px; background:linear-gradient(135deg,var(--gold-l),var(--gold)); transition:transform .28s,box-shadow .28s; } .nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(184,138,76,.34)} .nav-cta svg{transition:transform .28s} .nav-cta:hover svg{transform:translateX(3px)} .nav-a:hover::after,.nav-a.active::after{transform:scaleX(1)} .icon-btn{background:none;border:1px solid rgba(3,50,32,.12);color:var(--muted); cursor:pointer;width:44px;height:44px;border-radius:11px; display:flex;align-items:center;justify-content:center;position:relative; transition:color .3s,border-color .3s,background .3s} .icon-btn:hover{color:var(--gold);border-color:rgba(184,138,76,.45);background:rgba(184,138,76,.06)} .badge{position:absolute;top:-4px;right:-4px;background:var(--gold);color:var(--black); border-radius:50%;width:16px;height:16px;font-size:9px;font-weight:700; display:flex;align-items:center;justify-content:center;transition:transform .3s} /* ── BUTTONS ── */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:2.5px; text-transform:uppercase;border:none;cursor:pointer;border-radius:3px;transition:all .3s} .btn-gold{background:linear-gradient(135deg,var(--gold-l),var(--gold));color:var(--pure);padding:14px 32px;font-weight:500} .btn-gold:hover{background:linear-gradient(135deg,var(--gold-l),var(--gold));transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,138,76,.22)} .btn-em{background:linear-gradient(135deg,var(--em),var(--em-d));color:#fff;padding:14px 32px} .btn-em:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(184,138,76,.2)} .btn-outline{background:transparent;color:var(--em);border:1px solid rgba(3,50,32,.28);padding:14px 32px} .btn-outline:hover{border-color:var(--gold);color:var(--gold)} .btn-sm{padding:10px 22px;font-size:9px} .btn-full{width:100%} /* ── HERO ── */ #page-home{padding-top:var(--util-h)} .hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden} .hero-bg{position:absolute;inset:0; background:radial-gradient(ellipse at 72% 42%,rgba(3,50,32,.05) 0%,transparent 55%), radial-gradient(ellipse at 22% 68%,rgba(184,138,76,.06) 0%,transparent 48%), var(--bg)} .hero-img{position:absolute;right:0;top:0;bottom:0;width:50%;overflow:hidden} .hero-img img{width:100%;height:100%;object-fit:cover;object-position:58% 42%; filter:saturate(1.04)} /* El vídeo se superpone a la foto; si falla o no hay, la foto queda visible */ .hero-video{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:58% 42%; filter:saturate(1.04); opacity:0;transition:opacity .9s ease; } .hero-video.on{opacity:1} .hero-img::before{content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(3,50,32,.4) 0,transparent 150px), linear-gradient(to right,var(--bg) 0%,rgba(252,250,246,.82) 9%,rgba(252,250,246,.30) 23%,transparent 42%)} .dots{position:absolute;inset:0;overflow:hidden;pointer-events:none} .dot{position:absolute;border-radius:50%;background:rgba(184,138,76,.35);animation:floatD linear infinite;opacity:0} @media(prefers-reduced-motion:reduce){.dot{animation:none;display:none}} @keyframes floatD{0%{transform:translateY(108vh) scale(0);opacity:0}8%{opacity:.75}92%{opacity:.1}100%{transform:translateY(-8vh) scale(1.4);opacity:0}} .hero-c{position:relative;z-index:2;padding:150px 40px 80px;max-width:660px} .eyebrow{font-size:9px;letter-spacing:7px;text-transform:uppercase;color:var(--gold-d); display:flex;align-items:center;gap:18px;margin-bottom:28px;animation:up .9s .1s both} .eyebrow::before{content:'';width:36px;height:1px;background:var(--gold)} .hero-title{color:#033220;font-family:var(--serif);font-size:clamp(3rem,6.5vw,5.5rem);font-weight:300; line-height:1.02;margin-bottom:28px;animation:up .9s .3s both} .hero-title em{color:var(--em);font-style:italic} .hero-title b{color:var(--gold-d);font-weight:400} .hero-sub{color:var(--muted);font-size:13px;line-height:1.95;max-width:420px; margin-bottom:48px;animation:up .9s .5s both} .hero-btns{display:flex;gap:12px;flex-wrap:wrap;animation:up .9s .7s both} .scroll-hint{position:absolute;bottom:135px;left:25%;transform:translateX(-50%);z-index:2; display:flex;flex-direction:column;align-items:center;gap:14px; font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--muted); animation:up 1s 1.1s both} .scroll-bar{width:1px;height:50px;background:linear-gradient(var(--gold),transparent); animation:blink 2.5s infinite} @keyframes blink{0%,100%{opacity:.3}50%{opacity:1}} @keyframes up{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}} /* ── FRANJA DE CONFIANZA (patrón: garantías antes del primer scroll) ── */ .hero-trust{ display:flex;flex-wrap:wrap;gap:26px;margin-top:38px; padding:18px 26px;border-radius:14px;max-width:fit-content; background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); border:1px solid var(--glass-border);box-shadow:var(--glass-shadow); animation:up .9s .9s both; } .ht-item{display:flex;align-items:center;gap:9px;color:var(--muted)} .ht-item svg{width:19px;height:19px;color:var(--gold);flex-shrink:0} .ht-item span{ font-size:8.5px;letter-spacing:1.4px;text-transform:uppercase;line-height:1.5; } @media(max-width:860px){ .hero-trust{gap:16px 20px;margin-top:28px;padding-top:20px;max-width:none} .ht-item svg{width:16px;height:16px} .ht-item span{font-size:7.5px;letter-spacing:1px} } @media(max-width:380px){ .hero-trust{gap:14px} .ht-item span{font-size:7px} } @media(max-width:1200px) and (min-width:861px){ .hdr-in{padding:0 10px 0 16px} .nav{gap:0;margin-left:8px} .nav-a{padding:12px 10px;letter-spacing:1.5px;font-size:9px} .nav-cta{padding:13px 15px;letter-spacing:1.5px;font-size:9px} .logo-wrap svg{height:66px !important} } /* Los enlaces heredan el color del texto; nada de azul subrayado por defecto */ a{color:inherit;text-decoration:none} /* Fase 3A: foco visible para navegación por teclado, con el dorado de marca (:focus-visible no se activa con clic de mouse, así que no cambia nada visualmente para quien navega con mouse/touch) */ a:focus-visible,button:focus-visible,[tabindex]:focus-visible, input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--gold);outline-offset:2px;border-radius:2px; } /* Saltar al contenido — invisible hasta que se navega con teclado */ .skip-link{ position:fixed;top:-60px;left:12px;z-index:2000; background:var(--em);color:#fff;padding:12px 22px;border-radius:8px; font-family:var(--sans);font-size:11px;letter-spacing:1.5px;text-transform:uppercase; transition:top .2s; } .skip-link:focus{top:12px} /* FASE 3 (SEO): texto real en el HTML, accesible para lectores de pantalla y rastreable por buscadores, pero invisible en pantalla — no cambia el diseño. Se usa para el H1 real del home (el título visible del hero es un H2, generado por JS por diapositiva; ver heroRender en main.js). */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } /* ── MENÚ DESPLEGABLE ── */ .nav-drop{position:relative} .nav-drop > .nav-a{display:inline-flex;align-items:center;gap:6px} .nav-drop > .nav-a svg{transition:transform .3s} .nav-drop.open > .nav-a{background:rgba(3,50,32,.075);color:var(--em)} .nav-drop.open > .nav-a svg{transform:rotate(180deg)} .nav-menu{ position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-6px); min-width:262px;padding:10px; background:rgba(252,250,246,.97); -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5); border:1px solid rgba(3,50,32,.10);border-radius:14px; box-shadow:0 16px 44px rgba(3,50,32,.14),0 2px 8px rgba(3,50,32,.06); opacity:0;visibility:hidden;transition:opacity .26s,transform .26s,visibility .26s; } .nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nav-menu-item{ display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer; font-family:var(--sans);font-size:10px;letter-spacing:1.8px;text-transform:uppercase; color:var(--muted);padding:12px 14px;border-radius:9px; transition:background .25s,color .25s; } .nav-menu-item:hover{background:rgba(3,50,32,.055);color:var(--em)} .nav-menu-item small{ display:block;margin-top:4px;font-size:9px;letter-spacing:.4px; text-transform:none;color:var(--muted);opacity:.75; } /* ── ESTADO VACÍO ── */ .empty{grid-column:1/-1;text-align:center;padding:64px 20px} .empty svg{color:var(--gold);opacity:.6;margin-bottom:18px} .empty h3{font-family:var(--serif);font-size:1.6rem;font-weight:400;margin-bottom:10px} .empty p{color:var(--muted);font-size:12.5px;line-height:1.9;max-width:380px;margin:0 auto 22px} @media(max-width:860px){ .nav-drop{display:none} } /* ── PÁGINA TALLER ── */ .taller-hero{padding:72px 0 52px;background:var(--green);color:var(--pure);text-align:center} .taller-hero .sec-eye{color:var(--gold-l)} .taller-hero h1{font-family:var(--serif);font-size:clamp(2.2rem,4.5vw,3.4rem);font-weight:300;line-height:1.15;margin-bottom:16px} .taller-hero h1 em{color:var(--gold-l);font-style:italic} .taller-hero p{color:rgba(255,255,255,.78);font-size:13px;line-height:1.95;max-width:520px;margin:0 auto} .taller-sec{padding:78px 0;border-bottom:1px solid var(--border);scroll-margin-top:150px} .taller-sec:nth-child(even){background:var(--green-soft)} .taller-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:52px;align-items:start} .taller-num{font-family:var(--serif);font-size:3.4rem;color:var(--gold);opacity:.35;line-height:1;margin-bottom:12px} .taller-h{font-family:var(--serif);font-size:2rem;font-weight:400;line-height:1.2;margin-bottom:14px} .taller-lead{color:var(--muted);font-size:12.5px;line-height:2} .taller-body p{font-size:13.5px;line-height:2.05;margin-bottom:16px} .taller-list{list-style:none;margin:22px 0 0;display:grid;gap:14px} .taller-list li{display:flex;gap:12px;font-size:12.5px;line-height:1.85;color:var(--muted)} .taller-list b{color:var(--ink);font-weight:500} .taller-list svg{color:var(--gold);flex-shrink:0;margin-top:3px} .taller-note{margin-top:26px;padding:18px 20px;border-left:2px solid var(--gold);background:rgba(184,138,76,.06);font-size:12px;line-height:1.9;color:var(--muted)} @media(max-width:860px){ .taller-grid{grid-template-columns:1fr;gap:22px} .taller-sec{padding:52px 0;scroll-margin-top:120px} .taller-h{font-size:1.6rem} } .mobile-group{ font-size:8.5px;letter-spacing:3px;text-transform:uppercase;color:var(--gold-d); margin:26px 0 4px;padding-top:20px;border-top:1px solid rgba(3,50,32,.12); } .mobile-menu-sub{ display:block;font-family:var(--sans);font-size:13px;color:var(--muted); cursor:pointer;padding:9px 0 9px 14px;border-left:1px solid rgba(3,50,32,.12); transition:color .3s,border-color .3s; } .mobile-menu-sub:hover{color:var(--em);border-color:var(--gold)} /* ── BOTÓN FLOTANTE DE WHATSAPP ── */ .wa-float{ position:fixed;right:24px;bottom:24px;z-index:560; width:66px;height:66px;border-radius:50%; display:flex;align-items:center;justify-content:center; overflow:hidden; background:linear-gradient(135deg,var(--green-2),var(--green)); color:#fff; border:1.5px solid rgba(212,172,88,.8); transition:transform .3s,box-shadow .3s,border-color .3s; } .wa-float svg{ position:relative;z-index:1;width:34px;height:34px; filter:drop-shadow(0 0 6px rgba(246,232,192,.6)); } /* Destello que cruza el botón, como luz sobre metal pulido */ .wa-float::before{ content:'';position:absolute;top:0;bottom:0;left:-55%;width:52%; background:linear-gradient(100deg,transparent 0%,rgba(246,232,192,.55) 50%,transparent 100%); transform:skewX(-20deg);pointer-events:none; animation:waBrillo 4.6s ease-in-out infinite; } @keyframes waBrillo{ 0% {left:-55%} 28%,100% {left:125%} } /* Halo dorado que late solo, para que se vea siempre */ @keyframes waHalo{ 0%,100%{box-shadow:0 10px 30px rgba(3,50,32,.32), 0 0 22px rgba(184,138,76,.45), 0 0 0 0 rgba(184,138,76,.5)} 50% {box-shadow:0 10px 30px rgba(3,50,32,.32), 0 0 40px rgba(184,138,76,.7), 0 0 0 15px rgba(184,138,76,0)} } .wa-float{animation:waHalo 3.4s ease-out infinite} .wa-float:hover{ transform:translateY(-4px) scale(1.07); border-color:rgba(246,232,192,1); box-shadow:0 18px 44px rgba(3,50,32,.38), 0 0 48px rgba(184,138,76,.85); animation:none; } .wa-float:active{transform:translateY(-1px) scale(.97)} /* Etiqueta al acercar el cursor */ .wa-float-tip{ position:fixed;right:100px;bottom:44px;z-index:559; background:var(--glass-bg-dark);color:#fff; -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur); font-family:var(--sans);font-size:9px;letter-spacing:1.8px;text-transform:uppercase; white-space:nowrap;padding:9px 14px;border-radius:10px; border:1px solid rgba(212,172,88,.4); opacity:0;transform:translateX(8px);pointer-events:none; transition:opacity .3s,transform .3s; } .wa-float:hover ~ .wa-float-tip{opacity:1;transform:translateX(0)} @media(prefers-reduced-motion:reduce){ .wa-float{animation:none;box-shadow:0 10px 30px rgba(3,50,32,.32),0 0 26px rgba(184,138,76,.5)} .wa-float::before{display:none} } @media(max-width:860px){ .wa-float{ right:16px;width:58px;height:58px; bottom:calc(70px + 14px + env(safe-area-inset-bottom,0px)); } .wa-float svg{width:30px;height:30px} .wa-float-tip{display:none} /* Fase 3A: en producto/configurador hay una barra de compra fija más alta; el flotante sube para no superponerse a sus botones. */ body.has-sticky-cta .wa-float{bottom:calc(190px + env(safe-area-inset-bottom,0px))} } /* ── CARRUSEL DEL BANNER ── */ .hero{position:relative;overflow:hidden} .hero-slides{position:absolute;inset:0;z-index:1} .hero-slide{ position:absolute;inset:0;display:flex;align-items:center; opacity:0;visibility:hidden;transition:opacity .85s ease,visibility .85s; } .hero-slide.on{opacity:1;visibility:visible} .slide-media{position:absolute;right:0;top:0;bottom:0;width:50%;overflow:hidden} .slide-media picture{display:contents} .slide-media img,.slide-media video{ width:100%;height:100%;object-fit:cover;object-position:58% 42%; filter:saturate(1.04);display:block; } /* Diapositivas sin fotografía todavía — mismo verde/dorado que ya usan Taller, Tiendas y Checkout, con el ícono de gema del catálogo. */ .slide-solid{ width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--green),var(--green-2)); } .slide-solid svg{ width:34%;max-width:220px;fill:none;stroke:rgba(212,172,88,.55);stroke-width:1.4;stroke-linejoin:round; } /* Velo crema que funde la imagen con el texto */ .slide-media::before{ content:'';position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom,rgba(3,50,32,.4) 0,transparent 150px), linear-gradient(to right,var(--bg) 0%,rgba(252,250,246,.82) 9%,rgba(252,250,246,.30) 23%,transparent 42%); } /* Cada diapositiva entra con un desplazamiento suave */ .hero-slide.on .hero-c > *{animation:slideIn .85s both} @keyframes slideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* ── CONTROLES ── */ .hero-ctrl{ position:absolute;left:0;right:0;bottom:165px;z-index:6; pointer-events:none; } .hero-ctrl-in{ padding:0 40px; display:flex;align-items:center;justify-content:center;gap:16px; } .hero-dots{display:flex;align-items:center;gap:9px;pointer-events:auto} .hero-dot{ position:relative;width:34px;height:3px;border-radius:2px; background:rgba(3,50,32,.16);border:none;padding:0;cursor:pointer;overflow:hidden; transition:background .3s; } .hero-dot:hover{background:rgba(3,50,32,.3)} .hero-dot span{ position:absolute;left:0;top:0;bottom:0;width:0; background:var(--gold);border-radius:2px; } .hero-dot.on span{width:100%;transition:width linear} .hero-arrows{display:flex;gap:6px;pointer-events:auto} .hero-arrow{ width:32px;height:32px;border-radius:9px; background:rgba(252,250,246,.7);border:1px solid rgba(3,50,32,.12); color:var(--em);cursor:pointer;display:flex;align-items:center;justify-content:center; transition:background .3s,border-color .3s,transform .3s; } .hero-arrow:hover{background:var(--pure);border-color:var(--gold);transform:translateY(-1px)} .hero-arrow:active{transform:scale(.94)} /* Etiqueta opcional para promociones */ .slide-badge{ display:inline-flex;align-items:center;gap:7px; background:var(--green);color:var(--gold-l); font-size:8.5px;letter-spacing:2.6px;text-transform:uppercase; padding:8px 14px;border-radius:8px;margin-bottom:20px; border:1px solid rgba(212,172,88,.4); } @media(max-width:860px){ .hero{display:block;min-height:auto;--hero-media-h:clamp(420px,72vh,640px)} /* El texto vive ENCIMA de la foto/video (no debajo) — igual que en desktop */ .hero-slide{position:relative;height:var(--hero-media-h);display:flex; flex-direction:column;justify-content:flex-end;align-items:stretch;inset:auto;overflow:hidden} .hero-slide:not(.on){display:none} .hero-slides{position:relative;inset:auto} .slide-media{position:absolute;inset:0;width:100%;height:100%} .slide-media::before{ background:linear-gradient(to bottom,rgba(3,50,32,.45) 0,transparent 150px), linear-gradient(to top,rgba(3,50,32,.8) 0,rgba(3,50,32,.25) 40%,transparent 62%); } .hero-c{position:relative;z-index:3;padding:0 20px 84px;max-width:none} .eyebrow,.hero-sub{color:var(--pure)} .hero-title{color:var(--pure)} .hero-title em{color:var(--gold-l)} .hero-title b{color:var(--gold-l)} .eyebrow{color:var(--gold-l)} .eyebrow::before{background:var(--gold-l)} .hero-ctrl{bottom:auto;right:0;top:calc(var(--hero-media-h) - 56px)} .hero-ctrl-in{padding:0 16px} .hero-dot{width:26px} .hero-arrows{display:none} } .hero-trust{position:absolute;left:40px;bottom:52px;z-index:5} @media(max-width:860px){ .hero-trust{position:relative;bottom:auto;left:auto;margin-top:8px} } /* ── LAYOUT ── */ .sec{padding:100px 0} .container{max-width:1280px;margin:0 auto;padding:0 40px} .sec-eye{font-size:9px;letter-spacing:5px;text-transform:uppercase;color:var(--gold-d); display:flex;align-items:center;gap:14px;margin-bottom:12px} .sec-eye::before{content:'';width:24px;height:1px;background:var(--gold)} .sec-title{font-family:var(--serif);font-size:clamp(2rem,3.5vw,3rem);font-weight:300;margin-bottom:10px} .sec-sub{color:var(--muted);font-size:12px;line-height:1.9;margin-bottom:52px;max-width:480px} /* ── PRODUCT GRID ── */ .pgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} .pcard{cursor:pointer;transition:transform .4s} .pcard:hover{transform:translateY(-7px)} /* FASE 3.1: .pcard-link envuelve imagen y texto por separado (dos reales) para que el