/* ===== FUENTES AUTO-ALOJADAS (subset latin, sin CDN de Google) ===== */ @font-face{font-family:'Fraunces';font-style:normal;font-weight:500 600;font-display:swap;src:url('fonts/fraunces-roman.woff2') format('woff2')} @font-face{font-family:'Fraunces';font-style:italic;font-weight:500;font-display:swap;src:url('fonts/fraunces-italica.woff2') format('woff2')} @font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/hanken.woff2') format('woff2')} :root{ --papel:#F6F1E8; --arena:#ECE3D2; --tinta:#101030; --cielo:#70B0D0; --gris:#507090; --oro:#C0954A; --blanco:#FFFFFF; --linea:rgba(16,16,48,.14); --serif:'Fraunces',Georgia,serif; --sans:'Hanken Grotesk',system-ui,-apple-system,sans-serif; --t:.4s cubic-bezier(.2,.8,.2,1); --sombra:0 30px 70px -40px rgba(16,16,48,.5); } *{margin:0;padding:0;box-sizing:border-box} html{color-scheme:only light;scroll-behavior:smooth;background:var(--papel);overflow-x:clip; scrollbar-width:thin;scrollbar-color:var(--cielo) var(--papel)} body{font-family:var(--sans);font-size:18px;font-weight:400;line-height:1.6;color:var(--tinta); background:var(--papel);-webkit-font-smoothing:antialiased;overflow-x:clip} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:1180px;margin:0 auto;padding:0 26px} .serif{font-family:var(--serif)} /* overline */ .eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gris); display:inline-flex;align-items:center;gap:10px} .eyebrow::before{content:"";width:26px;height:26px;flex:0 0 26px; background:radial-gradient(circle,var(--cielo) 32%,transparent 34%) 0 0/9px 9px} /* botones */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--sans); font-size:1rem;font-weight:600;padding:15px 26px;border-radius:100px;cursor:pointer;border:1.5px solid transparent; transition:var(--t);white-space:nowrap;min-height:52px;line-height:1.1} .btn--main{background:var(--tinta);color:var(--blanco)} .btn--main:hover{transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(16,16,48,.55)} .btn--ghost{background:transparent;color:var(--tinta);border-color:var(--tinta)} .btn--ghost:hover{background:var(--tinta);color:var(--blanco);transform:translateY(-2px)} .btn--wa{background:#1FA855;color:#fff;border-color:#1FA855} .btn--wa svg{fill:currentColor;stroke:none} .btn--wa:hover{background:#178a45;border-color:#178a45;color:#fff;transform:translateY(-2px);box-shadow:0 16px 30px -14px rgba(23,138,69,.55)} .btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} /* estrellas */ .stars{display:inline-flex;gap:3px} .stars svg{width:1.05em;height:1.05em;fill:var(--oro)} .rating{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:1rem;color:var(--tinta)} .rating b{font-weight:700} .rating small{color:var(--gris);font-weight:500} /* hilo de puntos (firma) */ .hilo{display:block;margin:0 auto;width:2px;height:70px} .hilo line{stroke:var(--cielo);stroke-width:2;stroke-dasharray:2 9;stroke-linecap:round; stroke-dashoffset:120;transition:stroke-dashoffset 1.1s ease} .hilo.in line{stroke-dashoffset:0} /* reveal + focus-pull */ .rev{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)} .rev.in{opacity:1;transform:none} .foco{opacity:0;animation:focoIn 1s cubic-bezier(.2,.8,.2,1) .35s forwards;will-change:transform,opacity} @keyframes focoIn{from{opacity:0;transform:scale(1.045)}to{opacity:1;transform:none}} /* marco de foto */ .marco{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--linea);box-shadow:var(--sombra)} .marco img{width:100%;height:100%;object-fit:cover} .wash{position:relative} .wash::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(192,149,74,.10),rgba(16,16,48,.22)); mix-blend-mode:multiply;pointer-events:none} /* ===== HEADER ===== */ header{position:fixed;top:0;left:0;right:0;z-index:900;transition:var(--t);padding:14px 0} header.scr{background:rgba(246,241,232,.97);border-bottom:1px solid var(--linea);padding:9px 0} header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px} .brand{display:flex;align-items:center;gap:12px} .brand img{height:44px;width:auto;transition:var(--t)} header.scr .brand img{height:38px} .nav{display:flex;align-items:center;gap:30px} .nav a{font-size:.95rem;font-weight:500;color:var(--tinta);position:relative;padding:4px 0} .nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-2px;height:5px; background:radial-gradient(circle,var(--cielo) 34%,transparent 36%) 0 50%/7px 7px;transition:right .3s ease} .nav a:hover::after{right:0} .nav a.btn--main{padding:11px 20px;min-height:44px;color:var(--blanco)} .nav a.btn--main:hover{color:var(--blanco)} .nav-toggle{display:none} /* ===== HERO ===== */ .hero{position:relative;padding:150px 0 70px} .hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.6rem,6vw,4.7rem);line-height:1.03; letter-spacing:-.015em;margin:20px 0 22px} .hero h1 .g{color:var(--tinta)} .hero__sub{font-size:1.14rem;color:var(--tinta);max-width:34ch;margin-bottom:26px} .hero__soc{display:flex;align-items:center;gap:14px;margin-bottom:30px;flex-wrap:wrap} .hero__cta{display:flex;gap:12px;flex-wrap:wrap} .hero__img{position:relative} .hero__img .marco{aspect-ratio:3/3.6} .hero__eye{position:absolute;right:-30px;top:-30px;width:120px;height:120px;opacity:.5;z-index:-1} /* animación de entrada del H1 por líneas */ .hero h1 span{display:block;opacity:0;transform:translateY(24px);animation:subeLinea .8s cubic-bezier(.2,.8,.2,1) forwards} .hero h1 span:nth-child(1){animation-delay:.15s} .hero h1 span:nth-child(2){animation-delay:.28s} .hero__sub,.hero__soc,.hero__cta{opacity:0;animation:surge .8s ease forwards} .hero__sub{animation-delay:.45s}.hero__soc{animation-delay:.58s}.hero__cta{animation-delay:.7s} @keyframes subeLinea{to{opacity:1;transform:none}} @keyframes surge{to{opacity:1}} /* ===== CIFRAS (banda navy) ===== */ .cifras{background:var(--tinta);color:var(--papel);position:relative;overflow:hidden;padding:64px 0} .cifras__eye{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:340px;height:340px;opacity:.09;pointer-events:none} .cifras__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;position:relative} .cifra{text-align:center} .cifra b{font-family:var(--serif);font-weight:600;font-size:clamp(2.6rem,5.5vw,4.2rem);line-height:1; display:block;font-variant-numeric:tabular-nums} .cifra.oro b{color:var(--oro)} .cifra span{display:block;font-size:.86rem;letter-spacing:.06em;color:rgba(246,241,232,.72);margin-top:8px;font-weight:500} /* ===== RESEÑAS ===== */ .band{padding:clamp(70px,10vh,120px) 0} .sec-head{max-width:640px;margin-bottom:52px} .sec-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.6vw,3.3rem);line-height:1.06; letter-spacing:-.01em;margin:14px 0 0} .pull{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(1.9rem,4.4vw,3.2rem); line-height:1.2;letter-spacing:-.01em;max-width:19ch;margin:0 auto 8px;text-align:center;position:relative} .pull .c{color:var(--cielo);font-size:1.4em;line-height:0;vertical-align:-.35em;margin-right:.06em} .pull-a{text-align:center;color:var(--gris);font-weight:600;font-size:.92rem;letter-spacing:.04em;margin-bottom:56px} .reseñas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .rc{background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:32px 28px; display:flex;flex-direction:column;transition:var(--t)} .rc:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:transparent} .rc .stars{margin-bottom:16px} .rc p{font-size:1.02rem;color:var(--tinta);line-height:1.62;flex:1} .rc .who{margin-top:22px;padding-top:16px;border-top:1px solid var(--linea);display:flex;align-items:center;gap:12px} .rc .ini{width:42px;height:42px;flex:0 0 42px;border-radius:50%;background:var(--tinta);color:var(--papel); display:grid;place-items:center;font-weight:700;font-size:1.05rem} .rc .who b{display:block;font-weight:600;font-size:.98rem;line-height:1.2} .rc .who small{color:var(--gris);font-size:.78rem} .res-cta{text-align:center;margin-top:48px} /* ===== SERVICIOS ===== */ .serv-intro{position:relative;border-radius:26px;overflow:hidden;margin-bottom:40px; min-height:280px;display:flex;align-items:flex-end;border:1px solid var(--linea)} .serv-intro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .serv-intro::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(90deg,rgba(16,16,48,.86),rgba(16,16,48,.45) 70%,rgba(192,149,74,.15));mix-blend-mode:normal} .serv-intro__txt{position:relative;z-index:2;padding:44px 40px;color:var(--papel);max-width:620px} .serv-intro__txt .eyebrow{color:var(--cielo)} .serv-intro__txt .eyebrow::before{background:radial-gradient(circle,var(--cielo) 32%,transparent 34%) 0 0/9px 9px} .serv-intro__txt h2{font-family:var(--serif);font-weight:500;color:var(--papel);font-size:clamp(1.7rem,3.6vw,2.7rem); line-height:1.1;margin-top:12px} .serv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .sv{position:relative;background:var(--blanco);border:1px solid var(--linea);border-radius:20px;padding:34px 30px 30px; overflow:hidden;transition:var(--t)} .sv::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--cielo); transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)} .sv:hover{transform:translateY(-5px);box-shadow:var(--sombra)} .sv:hover::before{transform:scaleX(1)} .sv__n{font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--gris);letter-spacing:.02em} .sv__ic{width:52px;height:52px;margin:14px 0 18px} .sv h3{font-family:var(--serif);font-weight:600;font-size:1.4rem;margin-bottom:10px;line-height:1.15} .sv p{font-size:1rem;color:var(--gris);line-height:1.6} /* ===== NOSOTROS ===== */ .nosotros{background:var(--arena);position:relative;overflow:hidden} .nosotros__eye{position:absolute;left:-90px;bottom:-90px;width:420px;height:420px;opacity:.06;pointer-events:none} .nos-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center;position:relative} .nos-img .marco{aspect-ratio:4/4.4;max-width:360px} .nos-img img{filter:sepia(.28) saturate(.8) brightness(1.02) contrast(.96)} .nos-txt h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.08; letter-spacing:-.01em;margin:14px 0 20px} .nos-txt p{font-size:1.08rem;color:var(--tinta);margin-bottom:16px;max-width:46ch} .nos-txt .firma{margin-top:24px;font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gris)} /* ===== VISTAZO ===== */ .vistazo{display:grid;grid-template-columns:1.4fr 1fr;gap:20px} .vistazo figure{position:relative;border-radius:20px;overflow:hidden;border:1px solid var(--linea)} .vistazo figure img{width:100%;height:100%;object-fit:cover;filter:sepia(.12) saturate(.95) brightness(1.01); transition:transform 1s ease} .vistazo figure:hover img{transform:scale(1.05)} .vistazo figcaption{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;color:var(--papel); font-family:var(--serif);font-style:italic;font-size:1.15rem;z-index:2; background:linear-gradient(0deg,rgba(16,16,48,.72),transparent)} /* ===== CONTACTO ===== */ .contacto-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:44px;align-items:stretch} .contacto-img .marco{aspect-ratio:3/3.6;height:100%} .tarjeta{background:var(--blanco);border:1px solid var(--linea);border-radius:24px;padding:44px 40px; box-shadow:var(--sombra);display:flex;flex-direction:column;justify-content:center} .tarjeta h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,4vw,2.9rem);line-height:1.08;margin:12px 0 26px} .dato{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px} .dato svg{width:24px;height:24px;flex:0 0 24px;margin-top:2px;fill:none;stroke:var(--cielo);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .dato b{display:block;font-weight:600;font-size:1.05rem;line-height:1.3} .dato span{color:var(--gris);font-size:.96rem} .dato a{color:var(--gris);border-bottom:1px solid var(--linea)} .dato a:hover{color:var(--tinta)} .tarjeta__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px} /* ===== FOOTER ===== */ footer{background:var(--tinta);color:rgba(246,241,232,.66);padding:64px 0 30px;position:relative;overflow:hidden} footer .f-eye{position:absolute;right:-40px;top:-40px;width:220px;height:220px;opacity:.08} .f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:40px;margin-bottom:44px;position:relative} footer .f-logo{height:66px;width:auto;margin-bottom:18px} footer p{font-size:.95rem;max-width:34ch;line-height:1.65} footer h4{color:var(--papel);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;font-weight:600} footer .fnav a{display:block;padding:6px 0;color:rgba(246,241,232,.7);font-size:.98rem} footer .fnav a:hover{color:var(--cielo)} footer .fdato{font-size:.96rem;line-height:1.8} footer .fdato a{color:var(--cielo)} .f-bottom{border-top:1px solid rgba(246,241,232,.14);padding-top:24px;display:flex;justify-content:space-between; gap:16px;flex-wrap:wrap;font-size:.82rem;position:relative} .f-bottom a{color:rgba(246,241,232,.7)}.f-bottom a:hover{color:var(--cielo)} /* ===== STICKY MÓVIL ===== */ .sticky{position:fixed;left:0;right:0;bottom:0;z-index:880;background:var(--papel); border-top:1px solid var(--linea);padding:11px 16px; display:none;gap:10px;box-shadow:0 -8px 30px -18px rgba(16,16,48,.5)} .sticky .btn{flex:1;padding:13px;min-height:50px;font-size:.95rem} /* ===== COOKIES ===== */ .ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:950;max-width:520px;margin:0 auto; background:var(--blanco);border:1px solid var(--linea);border-radius:18px;padding:22px 24px; box-shadow:0 30px 70px -30px rgba(16,16,48,.6);display:none} .ck.show{display:block} .ck p{font-size:.9rem;color:var(--gris);margin-bottom:8px;line-height:1.55} .ck p b{color:var(--tinta)} .ck label{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--gris);margin:12px 0} .ck__bts{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:14px} .ck__bts button{padding:11px 8px;border-radius:100px;font-family:var(--sans);font-size:.82rem;font-weight:600; cursor:pointer;border:1.5px solid var(--tinta);background:transparent;color:var(--tinta);transition:var(--t)} .ck__bts button:hover{background:var(--tinta);color:var(--blanco)} /* ===== RESPONSIVE ===== */ @media(max-width:960px){ .hero__grid{grid-template-columns:1fr;gap:36px} .hero__img{order:-1;max-width:460px} .cifras__grid{grid-template-columns:repeat(2,1fr);gap:36px 20px} .reseñas{grid-template-columns:1fr 1fr} .serv-grid{grid-template-columns:1fr} .nos-grid{grid-template-columns:1fr;gap:34px} .nos-img{max-width:340px} .contacto-grid{grid-template-columns:1fr} .contacto-img{max-width:420px} .f-grid{grid-template-columns:1fr 1fr} } @media(max-width:760px){ header .nav{position:fixed;inset:0 0 0 auto;width:min(84vw,340px);background:var(--papel); flex-direction:column;align-items:flex-start;justify-content:center;gap:22px;padding:40px; transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);box-shadow:var(--sombra)} header .nav.open{transform:none} .nav a{font-size:1.2rem} .nav .btn{width:100%} .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer; padding:10px;z-index:20} .nav-toggle span{width:26px;height:2px;background:var(--tinta);transition:var(--t);border-radius:2px} .nav-toggle.x span:nth-child(1){transform:translateY(7px) rotate(45deg)} .nav-toggle.x span:nth-child(2){opacity:0} .nav-toggle.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .hero{padding:120px 0 40px} .sticky{display:flex} .vistazo{grid-template-columns:1fr} .f-grid{grid-template-columns:1fr} .f-bottom{flex-direction:column} body{padding-bottom:72px} } @media(max-width:440px){ .cifras__grid{grid-template-columns:1fr;gap:26px} .reseñas{grid-template-columns:1fr} .ck__bts{grid-template-columns:1fr} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} .rev,.foco{opacity:1;transform:none;filter:none} .hero h1 span,.hero__sub,.hero__soc,.hero__cta{opacity:1;transform:none} } /* ═══════════════════════════════════════════════════════ MULTIPÁGINA · añadido 13 oct 2026 Reglas de la casa: lo nuevo va SIEMPRE al final de este archivo. ═══════════════════════════════════════════════════════ */ [id]{scroll-margin-top:96px} /* enlace de la página activa en el menú */ .nav a.act::after{right:0} .nav a.act{font-weight:600} /* ───── CABECERA DE PÁGINA INTERIOR ───── */ .cab-pag{padding:150px 0 10px;background:var(--papel)} .cab-pag h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.3rem,5.4vw,4rem); line-height:1.05;letter-spacing:-.015em;margin:16px 0 18px} .cab-pag p.entrada{font-size:1.14rem;color:var(--gris);max-width:52ch} .miga{font-size:.84rem;color:var(--gris);margin-bottom:6px} .miga a{border-bottom:1px solid var(--linea)} .miga a:hover{color:var(--tinta)} /* ───── TARJETAS DE ENLACE A OTRAS PÁGINAS ───── */ .puertas{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .puerta{background:var(--blanco);border:1px solid var(--linea);border-radius:20px; padding:34px 30px;display:flex;flex-direction:column;gap:10px;transition:var(--t)} .puerta:hover{transform:translateY(-5px);box-shadow:var(--sombra);border-color:transparent} .puerta h3{font-family:var(--serif);font-weight:600;font-size:1.35rem;line-height:1.18} .puerta p{font-size:1rem;color:var(--gris);line-height:1.6;flex:1} .puerta .mas{font-weight:600;font-size:.95rem;color:var(--tinta);display:inline-flex;align-items:center;gap:8px} .puerta .mas svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round;transition:var(--t)} .puerta:hover .mas svg{transform:translateX(4px)} /* ───── CIERRE DE PÁGINA (llamada final) ───── */ .cierre{background:var(--tinta);color:var(--papel);text-align:center;padding:clamp(64px,9vh,100px) 0} .cierre h2{font-family:var(--serif);font-weight:500;color:var(--papel); font-size:clamp(1.9rem,4.2vw,3rem);line-height:1.1;margin-bottom:16px} .cierre p{color:rgba(246,241,232,.76);max-width:46ch;margin:0 auto 30px} .cierre .btn--ghost{color:var(--papel);border-color:rgba(246,241,232,.5)} .cierre .btn--ghost:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)} .cierre__cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ───── HORARIO EN TABLA ───── */ .horario{width:100%;border-collapse:collapse;margin-top:10px} .horario th,.horario td{text-align:left;padding:13px 0;border-bottom:1px solid var(--linea);font-size:1rem} .horario th{font-weight:500;color:var(--gris);width:42%} .horario td{font-weight:600} .horario tr:last-child th,.horario tr:last-child td{border-bottom:0} @media(max-width:960px){ .puertas{grid-template-columns:1fr} } @media(max-width:760px){ .cab-pag{padding:116px 0 6px} /* en móvil la barra fija va casi opaca, nunca con desenfoque */ header.scr{background:rgba(246,241,232,.99);backdrop-filter:none} .sticky{backdrop-filter:none} } @media(prefers-reduced-motion:reduce){ } /* En móvil la foto del hero no se come la pantalla: el titular tiene que verse sin bajar */ @media(max-width:760px){ .hero{padding-top:104px} .hero__grid{gap:26px} .hero__img{max-width:none} .hero__img .marco{aspect-ratio:4/2.9;max-height:40vh} } /* ═══════════════════════════════════════════════════════ PASADA DE DISEÑO · 14 oct 2026 Objetivo: menos clínica, más óptica de confianza. El azul claro de antes (#70B0D0) tiraba a bata blanca; se cambia por un azul petróleo más hondo y se suma un segundo acento cálido. ═══════════════════════════════════════════════════════ */ :root{ --papel:#F7F2E9; /* papel un punto más cálido */ --arena:#EDE2CF; --tinta:#15182E; /* tinta con menos azul eléctrico */ --cielo:#2F6E8F; /* AZUL NUEVO: petróleo, serio y cálido */ --cielo-claro:#8FB9CE; /* el claro queda solo para detalles finos */ --gris:#5B6B7C; --oro:#B98A3F; /* oro algo más tostado */ --oro-claro:#E3CB9B; --blanco:#FFFCF7; /* el blanco puro era lo más de hospital */ --linea:rgba(21,24,46,.13); --sombra:0 34px 80px -46px rgba(21,24,46,.55); --sombra-suave:0 18px 46px -30px rgba(21,24,46,.42); } /* grano de papel: quita el plano digital y da tacto */ body::before{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23r)' opacity='.055'/%3E%3C/svg%3E")} /* OJO: solo main y footer. El menú, la barra del móvil y el aviso de cookies son fijos (position:fixed) y ya van por encima del grano con su propio z-index. Ponerles position:relative aquí los dejó sin flotar del 14 al 23 oct 2026. */ main,footer{position:relative;z-index:2} /* los puntitos de la firma, en el azul nuevo */ .eyebrow::before{background:radial-gradient(circle,var(--cielo) 32%,transparent 34%) 0 0/9px 9px} .nav a::after{background:radial-gradient(circle,var(--cielo) 34%,transparent 36%) 0 50%/7px 7px} /* tarjetas: crema en vez de blanco, filo dorado al pasar */ .sv,.rc,.puerta,.tarjeta{background:var(--blanco);box-shadow:var(--sombra-suave)} .sv::before{background:linear-gradient(90deg,var(--cielo),var(--oro))} .rc:hover,.puerta:hover,.sv:hover{border-color:rgba(185,138,63,.42)} .rc .ini{background:linear-gradient(140deg,var(--cielo),var(--tinta))} /* botón principal: menos bloque negro, más profundidad */ .btn--main{background:linear-gradient(140deg,var(--tinta),#242a4a)} .btn--ghost{border-color:var(--cielo);color:var(--cielo)} .btn--ghost:hover{background:var(--cielo);border-color:var(--cielo);color:var(--blanco)} /* filete dorado bajo los titulares de sección: detalle de confianza */ .sec-head h2::after,.cab-pag h1::after{content:"";display:block;width:58px;height:3px;margin-top:20px; background:linear-gradient(90deg,var(--oro),transparent);border-radius:3px} /* ───── SELLOS DE CONFIANZA ───── */ .sellos{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .sello{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:100px; background:rgba(47,110,143,.09);border:1px solid rgba(47,110,143,.22); font-size:.86rem;font-weight:600;color:var(--cielo)} .sello svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .sello.oro{background:rgba(185,138,63,.1);border-color:rgba(185,138,63,.3);color:#8E6A2C} /* cifras: el navy plano se rompe con un velo cálido */ .cifras{background:linear-gradient(150deg,var(--tinta),#1D2340 60%,#262A44)} .cifras::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(60% 90% at 85% 15%,rgba(185,138,63,.22),transparent 70%)} .cifra span{color:rgba(247,242,233,.68)} /* el cierre, con el mismo tratamiento */ .cierre{background:linear-gradient(150deg,var(--tinta),#1D2340);position:relative;overflow:hidden} .cierre::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(50% 80% at 15% 10%,rgba(47,110,143,.3),transparent 70%)} .cierre .wrap{position:relative;z-index:2} /* fotos: menos frías */ .marco img,.vistazo figure img{filter:saturate(1.02) contrast(1.01)} /* ═══════════════════════════════════════════════════════ GAFAS DEPORTIVAS · escaparate · 22 oct 2026 (v2) Sección oscura con un escenario: una pieza cada vez, recortada sobre fondo limpio y con su sombra en el suelo; miniaturas debajo para cambiar. Las fotos son recortes sin fondo (rembg + BiRefNet), en webp transparente. ═══════════════════════════════════════════════════════ */ .escaparate{position:relative;overflow:hidden;color:var(--papel); padding:clamp(80px,11vh,130px) 0; background:linear-gradient(160deg,#15182E 0%,#1B2040 55%,#23284B 100%)} .escaparate::before{content:"";position:absolute;right:-14%;top:-24%;width:72%;height:95%;pointer-events:none; background:radial-gradient(closest-side,rgba(47,110,143,.34),transparent 72%)} .esc-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(36px,5vw,76px);align-items:center} /* texto */ .esc-txt .eyebrow{color:var(--cielo-claro)} .esc-txt .eyebrow::before{background:radial-gradient(circle,var(--oro) 32%,transparent 34%) 0 0/9px 9px} .esc-txt h2{font-family:var(--serif);font-weight:500;color:var(--papel); font-size:clamp(2.1rem,4.3vw,3.35rem);line-height:1.04;letter-spacing:-.015em;margin:16px 0 20px} .esc-txt h2 em{font-style:italic;color:var(--oro-claro)} .esc-txt>p{color:rgba(247,242,233,.74);max-width:42ch;font-size:1.06rem} .esc-claves{list-style:none;margin:30px 0 34px;border-top:1px solid rgba(247,242,233,.14)} .esc-claves li{display:grid;grid-template-columns:42px 1fr;column-gap:12px;padding:15px 0; border-bottom:1px solid rgba(247,242,233,.14)} .esc-claves b{grid-row:span 2;font-family:var(--serif);font-weight:600;font-size:1rem;color:var(--oro);padding-top:1px} .esc-claves strong{font-weight:600;font-size:1.02rem;color:var(--papel)} .esc-claves span{grid-column:2;margin-top:3px;font-size:.94rem;line-height:1.55;color:rgba(247,242,233,.62)} /* escenario */ .esc-escena{position:relative;border-radius:28px;padding:clamp(20px,2.6vw,32px);outline:none; border:1px solid rgba(247,242,233,.11); background:radial-gradient(75% 62% at 50% 42%,rgba(247,242,233,.11),rgba(247,242,233,.02) 72%),rgba(255,255,255,.02)} .esc-escena:focus-visible{box-shadow:0 0 0 2px var(--oro)} .esc-foco{position:relative;aspect-ratio:16/10} .esc-foco::after{content:"";position:absolute;left:20%;right:20%;bottom:7%;height:11%;border-radius:50%; pointer-events:none;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(7px)} .esc-pieza{position:absolute;inset:0;margin:0;display:grid;place-items:center; opacity:0;transform:translateX(28px) scale(.98);pointer-events:none; transition:opacity .5s ease,transform .65s cubic-bezier(.2,.8,.2,1)} .esc-pieza.on{opacity:1;transform:none} .esc-pieza.sale{opacity:0;transform:translateX(-28px) scale(.98)} .esc-pieza img{position:relative;z-index:1;width:auto;height:auto;max-width:90%;max-height:84%; object-fit:contain;filter:drop-shadow(0 20px 26px rgba(0,0,0,.42))} .esc-pieza img.chica{max-width:64%} /* la de media montura viene de una foto pequeña */ .esc-pie{display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:8px;padding-top:18px;border-top:1px solid rgba(247,242,233,.12)} .esc-nombre{min-height:3.1em} .esc-nombre b{display:block;font-family:var(--serif);font-weight:500;font-size:1.32rem;color:var(--papel);line-height:1.2} .esc-nombre span{display:block;margin-top:3px;font-size:.92rem;color:rgba(247,242,233,.64)} .esc-mandos{display:flex;align-items:center;gap:10px;flex:0 0 auto} .esc-cuenta{font-family:var(--serif);font-size:.95rem;color:var(--oro-claro); font-variant-numeric:tabular-nums;margin-right:6px} .esc-fl{width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center; border:1.5px solid rgba(247,242,233,.34);background:transparent;color:var(--papel);transition:var(--t)} .esc-fl svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .esc-fl:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)} .esc-minis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px} .esc-mini{appearance:none;cursor:pointer;aspect-ratio:16/10;padding:10px;border-radius:14px; display:grid;place-items:center;border:1px solid rgba(247,242,233,.13); background:rgba(255,255,255,.035);transition:var(--t)} .esc-mini img{max-width:100%;max-height:100%;object-fit:contain;opacity:.62;transition:opacity .3s ease} .esc-mini:hover{border-color:rgba(247,242,233,.38)} .esc-mini:hover img,.esc-mini[aria-current="true"] img{opacity:1} .esc-mini[aria-current="true"]{border-color:var(--oro);background:rgba(185,138,63,.13)} .esc-mini:focus-visible{outline:2px solid var(--oro);outline-offset:2px} @media(max-width:960px){ .esc-grid{grid-template-columns:1fr} .esc-txt>p{max-width:none} } @media(max-width:560px){ .esc-pie{flex-wrap:wrap} .esc-mandos{width:100%;justify-content:flex-end} .esc-minis{gap:8px} .esc-mini{padding:6px;border-radius:11px} } @media(prefers-reduced-motion:reduce){ .esc-pieza,.esc-pieza.on,.esc-pieza.sale{transition:none;transform:none} } /* las miniaturas no pueden ensanchar su columna: sin esto, el ancho natural de cada imagen (360 px) rompía la rejilla de cuatro y se salían */ .esc-minis{grid-template-columns:repeat(4,minmax(0,1fr))} .esc-mini{min-width:0} .esc-mini img{width:100%;height:100%} /* ═══════════════════════════════════════════════════════ AVISO DE GAFAS DEPORTIVAS en Inicio · 23 oct 2026 Una sola foto y toda la tarjeta es un enlace al escaparate (servicios.html#deportivas). Mismo lenguaje oscuro que el escaparate. ═══════════════════════════════════════════════════════ */ .aviso-dep-sec{padding:0 0 clamp(54px,8vh,90px);background:var(--papel)} .aviso-dep{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); align-items:center;gap:clamp(20px,4vw,56px);padding:clamp(28px,4vw,52px) clamp(26px,4.5vw,60px); border-radius:28px;color:var(--papel); background:linear-gradient(150deg,#15182E 0%,#1B2040 60%,#23284B 100%); box-shadow:var(--sombra);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease} .aviso-dep::before{content:"";position:absolute;right:-10%;top:-40%;width:70%;height:150%;pointer-events:none; background:radial-gradient(closest-side,rgba(47,110,143,.38),transparent 72%)} .aviso-dep__txt{position:relative} .aviso-dep__txt .eyebrow{color:var(--cielo-claro)} .aviso-dep__txt .eyebrow::before{background:radial-gradient(circle,var(--oro) 32%,transparent 34%) 0 0/9px 9px} .aviso-dep h2{font-family:var(--serif);font-weight:500;color:var(--papel); font-size:clamp(1.7rem,3.3vw,2.6rem);line-height:1.06;letter-spacing:-.012em;margin:14px 0 14px} .aviso-dep h2 em{font-style:italic;color:var(--oro-claro)} .aviso-dep__txt>p{color:rgba(247,242,233,.72);max-width:40ch;margin-bottom:22px} .aviso-dep__mas{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem; padding:13px 22px;border-radius:100px;border:1.5px solid rgba(247,242,233,.4);transition:var(--t)} .aviso-dep__mas svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s ease} .aviso-dep__foto{position:relative;display:grid;place-items:center} .aviso-dep__foto::after{content:"";position:absolute;left:16%;right:16%;bottom:2%;height:12%;border-radius:50%; background:radial-gradient(closest-side,rgba(0,0,0,.5),transparent);filter:blur(7px);pointer-events:none} .aviso-dep__foto img{position:relative;z-index:1;width:100%;height:auto;max-width:560px; filter:drop-shadow(0 20px 26px rgba(0,0,0,.42));transition:transform .6s cubic-bezier(.2,.8,.2,1)} .aviso-dep:focus-visible{outline:2px solid var(--oro);outline-offset:4px} @media(hover:hover){ .aviso-dep:hover{transform:translateY(-4px);box-shadow:0 40px 90px -46px rgba(21,24,46,.7)} .aviso-dep:hover .aviso-dep__mas{background:var(--papel);color:var(--tinta);border-color:var(--papel)} .aviso-dep:hover .aviso-dep__mas svg{transform:translateX(4px)} .aviso-dep:hover .aviso-dep__foto img{transform:translateY(-6px) rotate(-1.5deg)} } @media(max-width:760px){ .aviso-dep{grid-template-columns:1fr;text-align:left} .aviso-dep__foto{order:-1;margin:-6px 0 4px} .aviso-dep__foto img{max-width:340px} } @media(prefers-reduced-motion:reduce){ .aviso-dep,.aviso-dep__foto img,.aviso-dep__mas svg{transition:none} } /* Etiqueta «En oferta» de las gafas deportivas (Inicio y Servicios) · 23 oct 2026. Solo dice que están en oferta: sin porcentajes, precios ni fechas. */ .oferta{display:inline-block;margin-left:4px;padding:5px 11px 4px;border-radius:100px; background:var(--oro);color:var(--tinta);font-size:.72rem;font-weight:700;letter-spacing:.1em; line-height:1;box-shadow:0 6px 16px -8px rgba(185,138,63,.8)} /* que ni «Gafas deportivas» ni «En oferta» se partan en dos líneas */ .eyebrow:has(.oferta){white-space:nowrap} .oferta{white-space:nowrap;flex:0 0 auto} @media(max-width:400px){.oferta{font-size:.64rem;padding:5px 8px 4px;margin-left:0;letter-spacing:.08em}} /* Tarjeta de deportivas simétrica · 23 oct 2026 Ordenador: texto y foto a partes iguales. Móvil: todo centrado bajo la foto. */ @media(min-width:761px){.aviso-dep{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}} @media(max-width:760px){ .aviso-dep{grid-template-columns:minmax(0,1fr);text-align:center;justify-items:center} .aviso-dep__txt{display:flex;flex-direction:column;align-items:center} .aviso-dep .eyebrow{justify-content:center} .aviso-dep__txt>p{margin-left:auto;margin-right:auto} } /* «El gabinete» en Servicios, justo después del escaparate oscuro: margen de arriba corto y foto y texto empezando a la misma altura */ .gabinete{padding-top:clamp(44px,6vh,60px)} .gabinete .nos-grid{align-items:start} /* «El gabinete» en Servicios · versión que cabe en una pantalla de ordenador. Dos columnas iguales, la foto ocupa su columna entera y mide lo mismo que el texto (sin pasillos vacíos), y el mismo margen arriba que abajo. */ .gabinete{padding:clamp(56px,8vh,88px) 0} @media(min-width:961px){ .gabinete .nos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,4.5vw,68px);align-items:stretch} .gabinete .nos-img{max-width:none;display:flex} .gabinete .nos-img .marco{aspect-ratio:auto;max-width:none;width:100%;height:100%;min-height:380px; max-height:calc(100vh - 2*clamp(56px,8vh,88px))} .gabinete .nos-img .marco img{height:100%;object-fit:cover;object-position:50% 45%} .gabinete .nos-txt{align-self:center} .gabinete .nos-txt p{max-width:none} } /* la foto no puede marcar la altura de la fila: la marca el texto y la foto la rellena */ @media(min-width:961px){ .gabinete .nos-img .marco{position:relative;min-height:400px;max-height:none} .gabinete .nos-img .marco img{position:absolute;inset:0;width:100%;height:100%} } /* ═══════════════════════════════════════════════════════ CADA SECCIÓN CABE EN LA PANTALLA DEL ORDENADOR · 23 oct 2026 Un solo ritmo vertical para toda la web: el mismo aire arriba y abajo en cada sección, que crece con el alto de la pantalla. Solo ordenador; en el móvil cada sección sigue su largo natural. ═══════════════════════════════════════════════════════ */ :root{--cab:72px;--ritmo:clamp(44px,6.5vh,92px)} @media(min-width:961px){ .band,.gabinete,.escaparate,.aviso-dep-sec{padding:var(--ritmo) 0} .cierre{padding:var(--ritmo) 0} /* cabecera de página: mismo aire bajo el menú fijo que debajo del texto */ .cab-pag{padding:calc(var(--cab) + var(--ritmo)) 0 var(--ritmo)} /* hero de Inicio: una pantalla justa, contenido centrado bajo el menú */ .hero{min-height:100vh;min-height:100svh;display:flex;align-items:center; padding:calc(var(--cab) + var(--ritmo)*.55) 0 calc(var(--ritmo)*.55)} .hero>.wrap{width:100%} .hero__img .marco{max-height:calc(100svh - var(--cab) - var(--ritmo)*1.1 - 4px)} .hero h1{font-size:clamp(2.5rem,min(5.4vw,8.6vh),4.5rem);margin:16px 0 18px} .hero__sub{margin-bottom:20px} .hero__soc{margin-bottom:22px} .sellos{margin-top:18px;gap:10px} /* escaparate de deportivas: más compacto para que entre entero */ .esc-txt h2{font-size:clamp(2rem,min(3.4vw,5.6vh),2.9rem);margin:12px 0 14px} .esc-claves{margin:18px 0 22px} .esc-claves li{padding:10px 0} .esc-escena{padding:clamp(16px,2vw,26px)} .esc-foco{aspect-ratio:16/9} .esc-pie{padding-top:14px} .esc-minis{margin-top:14px} /* primer bloque de Servicios */ .serv-intro{min-height:clamp(200px,26vh,280px);margin-bottom:26px} .serv-intro__txt{padding:30px 36px} .sv{padding:28px 26px 24px} /* opiniones */ .pull-a{margin-bottom:36px} .res-cta{margin-top:30px} /* bloques de foto + texto (Nosotros y El gabinete): dos columnas iguales, la foto ocupa su columna y mide lo mismo que el texto */ .nosotros .nos-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,4.5vw,68px);align-items:stretch} .nosotros .nos-img{max-width:none;display:flex} .nosotros .nos-img .marco{position:relative;aspect-ratio:auto;max-width:none;width:100%;height:100%;min-height:400px} .nosotros .nos-img .marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 45%} .nosotros .nos-txt{align-self:center} .nosotros .nos-txt p{max-width:none} } /* portátiles bajos (≤ 820 px de alto): las claves del escaparate más juntas para que entre entero */ @media(min-width:961px) and (max-height:820px){ .esc-claves{margin:14px 0 18px} .esc-claves li{padding:6px 0} } /* La cabecera de página y su primer bloque (mismo fondo) se leen como uno: el mismo aire bajo el menú que entre el texto y lo siguiente. */ @media(min-width:961px){ .cab-pag + .sigue{padding-top:0} } /* ═══════════════════════════════════════════════════════ VERSIÓN 3 · 30 oct 2026 Inicio: hero oscuro con optotipo (deletrea ALPEDRETE; la lente enfoca las dos últimas líneas) · ¿qué necesitas? · cómo funciona · reseñas · visítanos. Servicios: buscador de casos y un producto por sección con 3 casos de uso, cada uno con su WhatsApp ya escrito. ═══════════════════════════════════════════════════════ */ /* ───── dibujos de las lentes (de la versión anterior) ───── */ .vis-nota{margin-top:12px;font-size:.84rem;color:var(--gris);text-align:center} @property --r{syntax:"";inherits:true;initial-value:34%} .mono-vista{--r:34%;transition:--r 1.1s cubic-bezier(.2,.8,.2,1)} .mono-lente{position:relative;aspect-ratio:5/4;overflow:hidden;isolation:isolate; border-radius:50% 50% 46% 46%/54% 54% 46% 46%;border:10px solid var(--tinta);background:var(--tinta);box-shadow:var(--sombra)} .mono-lente img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:42% 36%;transform:scale(1.6)} .mono-lente .mono-fondo{filter:blur(9px) saturate(.8) brightness(.95);transform:scale(1.7)} .mono-nitida{-webkit-mask-image:radial-gradient(circle farthest-side at 50% 50%,#000 calc(var(--r) - 12%),transparent var(--r)); mask-image:radial-gradient(circle farthest-side at 50% 50%,#000 calc(var(--r) - 12%),transparent var(--r))} .mono-aro{position:absolute;left:50%;top:50%;z-index:2;width:calc(var(--r) - 6%);aspect-ratio:1;translate:-50% -50%; border-radius:50%;border:1.5px dashed rgba(255,252,247,.85);pointer-events:none} .mono-etq{position:absolute;left:50%;bottom:7%;z-index:3;translate:-50% 0;white-space:nowrap; font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--tinta); background:rgba(255,252,247,.94);padding:7px 14px;border-radius:100px;box-shadow:0 10px 24px -14px rgba(21,24,46,.6)} /* ───── Progresivas: la mirada recorre las zonas ───── */ .prog-vista{margin:0;background:var(--blanco);border:1px solid var(--linea);border-radius:26px; padding:clamp(18px,2.4vw,30px);box-shadow:var(--sombra-suave)} .prog-svg{display:block;width:100%;height:auto;max-height:42vh} .pz{fill:var(--cielo);opacity:.07} .pz-lejos{opacity:.3} .prog-etq text{font-family:var(--sans);font-size:15px;font-weight:700;letter-spacing:.14em;fill:var(--tinta);text-anchor:middle} .prog-etq path{fill:none;stroke:var(--tinta);stroke-width:1.5;stroke-dasharray:2 4} .prog-mirada circle{fill:var(--oro)} .prog-mirada .halo{fill:none;stroke:var(--oro);stroke-width:2;opacity:.5} .prog-dato{display:flex;align-items:center;gap:16px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linea)} .prog-dato b{font-family:var(--serif);font-weight:600;font-size:clamp(2rem,3.2vw,2.6rem);line-height:1;color:var(--oro);white-space:nowrap} .prog-dato span{font-size:.95rem;line-height:1.4;color:var(--tinta)} .prog-dato small{display:block;font-size:.8rem;color:var(--gris);margin-top:3px} @media(prefers-reduced-motion:no-preference){ .prog-mirada{animation:mirada 9s cubic-bezier(.6,0,.3,1) infinite} .pz-lejos{animation:zLejos 9s infinite} .pz-media{animation:zMedia 9s infinite} .pz-cerca{animation:zCerca 9s infinite} } @keyframes mirada{0%,28%{transform:translateY(0)}36%,61%{transform:translateY(87px)}69%,92%{transform:translateY(160px)}100%{transform:translateY(0)}} @keyframes zLejos{0%,30%{opacity:.3}36%,94%{opacity:.06}100%{opacity:.3}} @keyframes zMedia{0%,32%{opacity:.06}38%,62%{opacity:.42}68%,100%{opacity:.06}} @keyframes zCerca{0%,64%{opacity:.06}70%,93%{opacity:.3}99%,100%{opacity:.06}} .bs-vista{margin:0;border-radius:28px;padding:clamp(20px,2.6vw,32px);border:1px solid rgba(247,242,233,.11); background:radial-gradient(75% 62% at 50% 42%,rgba(247,242,233,.09),rgba(247,242,233,.02) 72%),rgba(255,255,255,.02)} .bs-svg{display:block;width:100%;height:auto} .bs-movil{fill:rgba(143,185,206,.12);stroke:rgba(247,242,233,.62);stroke-width:2} .bs-movil-l{stroke:rgba(247,242,233,.62);stroke-width:3;stroke-linecap:round} .bs-pie{font:700 12px var(--sans);letter-spacing:.16em;fill:var(--cielo-claro);text-anchor:middle} .rayo{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:10 7} .r-uv{stroke:#A88BFF} .r-az{stroke:#5F80FF} .r-tras{opacity:.38;stroke-width:2.2} .r-tu{stroke:#3CCACD} .bs-lente{fill:rgba(143,185,206,.18);stroke:var(--cielo-claro);stroke-width:2.5} .bs-ojo{fill:rgba(247,242,233,.08);stroke:rgba(247,242,233,.62);stroke-width:2} .bs-iris{fill:#3CCACD} @media(prefers-reduced-motion:no-preference){.rayo{animation:flujo 1.4s linear infinite}} @keyframes flujo{to{stroke-dashoffset:-34}} .bs-ley{display:grid;margin-top:18px;border-top:1px solid rgba(247,242,233,.12)} .bs-ley span{display:grid;grid-template-columns:22px auto 1fr;align-items:center;column-gap:12px; padding:10px 0;border-bottom:1px solid rgba(247,242,233,.12);font-size:.92rem;color:rgba(247,242,233,.66)} .bs-ley b{font-weight:600;color:var(--papel)} .bs-ley i{width:22px;height:4px;border-radius:4px} .l-uv{background:#A88BFF}.l-az{background:#5F80FF}.l-tu{background:#3CCACD} /* ───── Raíl de horas (ordenador ancho) ───── */ .riel{position:fixed;left:18px;top:50%;z-index:800;translate:0 -50%;display:none;flex-direction:column;gap:2px; padding:10px 8px;border-radius:100px;background:rgba(247,242,233,.94);border:1px solid var(--linea); box-shadow:0 18px 40px -28px rgba(21,24,46,.6);opacity:0;pointer-events:none;transition:opacity .4s} .riel.ver{opacity:1;pointer-events:auto} .riel a{position:relative;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 4px;border-radius:100px} .riel i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--gris);transition:var(--t)} .riel b{font-size:.66rem;font-weight:600;color:var(--gris);font-variant-numeric:tabular-nums;transition:color .3s} .riel a.act i{background:var(--oro);border-color:var(--oro);transform:scale(1.35)} .riel a.act b{color:var(--tinta);font-weight:700} .riel a:hover b{color:var(--tinta)} @media(min-width:1360px){.riel{display:flex}} /* mini dibujos de las lentes */ .mv-aro{fill:rgba(255,255,255,.55);stroke:var(--tinta);stroke-width:3} .mv-nit{fill:var(--cielo);opacity:.25} .mv-pun{fill:none;stroke:var(--cielo);stroke-width:1.5;stroke-dasharray:2 4} .mv-lin{fill:none;stroke:var(--cielo);stroke-width:2;stroke-linecap:round;opacity:.6} .mv-pto{fill:var(--oro)} .mv-r1,.mv-r2,.mv-r3{fill:none;stroke-width:2.4;stroke-linecap:round} .mv-r1{stroke:#A88BFF}.mv-r2{stroke:#5F80FF}.mv-r3{stroke:#3CCACD} .mv-len{fill:rgba(143,185,206,.2);stroke:var(--cielo-claro);stroke-width:2} /* botón claro, para fondos oscuros */ .btn--claro{background:transparent;color:var(--papel);border-color:rgba(247,242,233,.42)} .btn--claro:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel);transform:translateY(-2px)} /* ───── cabecera sobre el hero oscuro (solo arriba del todo, en Inicio) ───── */ body:has(.hero2) header:not(.scr) .brand img{filter:brightness(0) invert(1)} body:has(.hero2) header:not(.scr) .nav-toggle span{background:var(--papel)} @media(min-width:961px){ body:has(.hero2) header:not(.scr) .nav a:not(.btn){color:var(--papel)} body:has(.hero2) header:not(.scr) .nav a.btn--main{background:var(--papel);color:var(--tinta)} } /* ═════ HERO · el optotipo ═════ */ .hero2{position:relative;overflow:hidden;color:var(--papel);padding:calc(var(--cab) + 44px) 0 56px; background:radial-gradient(55% 65% at 76% 50%,rgba(255,240,205,.13),transparent 70%), linear-gradient(160deg,#111427 0%,#171B36 55%,#1F2449 100%)} .hero2::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:rgba(247,242,233,.08)} .hero2>.wrap{width:100%} .hero2__grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,84px);align-items:center} .hero2 .eyebrow{color:var(--cielo-claro)} .hero2 .eyebrow::before{background:radial-gradient(circle,var(--oro) 32%,transparent 34%) 0 0/9px 9px} .hero2 h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.7rem,6.2vw,5rem);line-height:1.02; letter-spacing:-.02em;margin:18px 0 0} .hero2 h1 span,.hero2 h1 em{display:block} .hero2 h1 em{font-style:italic;color:var(--oro-claro)} .hero2__sub{font-size:1.12rem;line-height:1.6;color:rgba(247,242,233,.78);max-width:44ch;margin:22px 0 28px} .hero2__cta{display:flex;flex-wrap:wrap;gap:12px} .hero2__prueba{list-style:none;display:flex;flex-wrap:wrap;gap:10px 0;margin-top:30px;font-size:.9rem;color:rgba(247,242,233,.7)} .hero2__prueba li{display:flex;align-items:center;gap:8px;padding:0 18px;border-left:1px solid rgba(247,242,233,.18)} .hero2__prueba li:first-child{padding-left:0;border-left:0} .hero2__prueba b{font-family:var(--serif);font-weight:600;font-size:1.08rem;color:var(--papel)} .hero2__prueba .stars{font-size:.82rem} /* entrada */ @media(prefers-reduced-motion:no-preference){ .hero2__txt>*{opacity:0;animation:surge .8s cubic-bezier(.2,.8,.2,1) forwards} .hero2__txt>:nth-child(2){animation-delay:.1s}.hero2__txt>:nth-child(3){animation-delay:.22s} .hero2__txt>:nth-child(4){animation-delay:.34s}.hero2__txt>:nth-child(5){animation-delay:.46s} .opto-base{animation:enfoca 1.6s cubic-bezier(.3,.6,.2,1) .2s both} } @keyframes enfoca{from{filter:blur(7px);opacity:.35}to{filter:blur(0);opacity:1}} /* el cartel: una caja de luz como la del gabinete */ @property --lx{syntax:"";inherits:true;initial-value:28%} @property --ly{syntax:"";inherits:true;initial-value:79%} .opto{margin:0;justify-self:center;width:min(100%,470px)} .opto-carta{--rl:clamp(50px,5.4vw,70px);--pad:clamp(18px,2.2vw,26px) clamp(18px,2.4vw,30px) clamp(16px,1.8vw,22px); position:relative;padding:var(--pad);border-radius:18px;background:#FCFBF7;color:#121528; box-shadow:0 0 0 1px rgba(255,255,255,.07),0 0 100px 8px rgba(255,238,200,.16),0 50px 90px -40px rgba(0,0,0,.85)} .opto-cab{display:flex;justify-content:space-between;gap:10px;margin:0 0 6px;padding-bottom:8px;border-bottom:1px solid rgba(18,21,40,.1); font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7A8090} .opto-filas{--u:clamp(8.6px,min(.8vw,1.32vh),13px)} .of{position:relative;margin:0;padding:0 2.6em;text-align:center;line-height:1} .of span{display:inline-block;font-family:var(--sans);font-weight:700;letter-spacing:.3em;margin-right:-.3em;white-space:nowrap} .of i{position:absolute;right:0;top:50%;translate:0 -50%;font-style:normal;font-size:9.5px;font-weight:600;color:#9AA0AE; font-variant-numeric:tabular-nums;letter-spacing:.04em} .f1{font-size:calc(var(--u)*9.4);margin-top:calc(var(--u)*1.2)} .f2{font-size:calc(var(--u)*6.6);margin-top:calc(var(--u)*1.5)} .f3{font-size:calc(var(--u)*4.7);margin-top:calc(var(--u)*1.5)} .f4{font-size:calc(var(--u)*3.3);margin-top:calc(var(--u)*1.5)} .f5,.f6{text-transform:uppercase} .f5{font-size:calc(var(--u)*1.42);margin-top:calc(var(--u)*2.1)} .f6{font-size:calc(var(--u)*1.12);margin-top:calc(var(--u)*1.5)} .f5 span{letter-spacing:.2em;margin-right:-.2em} .f6 span{letter-spacing:.08em;margin-right:-.08em} /* la línea roja de la visión «normal» y el test rojo-verde, como en un cartel de verdad */ .f6::after{content:"";display:block;width:58%;height:2px;margin:calc(var(--u)*1) auto 0;background:#C8473B;opacity:.75} .opto-duo{display:grid;grid-template-columns:1fr 1fr;height:14px;margin:calc(var(--u)*1.5) 0 0;border-radius:4px;overflow:hidden} .opto-duo span:first-child{background:#C8473B}.opto-duo span:last-child{background:#3C8C5A} /* sin gafas: lo pequeño se emborrona */ .opto-base .f4 span{filter:blur(.6px)} .opto-base .f5 span{filter:blur(2px)} .opto-base .f6 span{filter:blur(2.4px)} /* con la lente: nítido y un poco más grande */ .opto-nitida{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none; -webkit-mask-image:radial-gradient(circle var(--rl) at var(--lx) var(--ly),#000 calc(100% - 2px),transparent 100%); mask-image:radial-gradient(circle var(--rl) at var(--lx) var(--ly),#000 calc(100% - 2px),transparent 100%)} .opto-zoom{position:absolute;inset:0;padding:var(--pad);background:#FFFEFB;transform-origin:var(--lx) var(--ly);transform:scale(1.16)} .opto-lente{position:absolute;left:var(--lx);top:var(--ly);z-index:2;width:calc(var(--rl)*2 + 14px);aspect-ratio:1;translate:-50% -50%; border-radius:50%;border:7px solid #15182E;pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),inset 8px 8px 22px rgba(255,255,255,.35),0 16px 30px -12px rgba(0,0,0,.55)} .opto-lente::after{content:"";position:absolute;left:88%;top:88%;width:14px;height:clamp(40px,4.2vw,58px);border-radius:7px; background:linear-gradient(90deg,#15182E,#2A2F55);transform-origin:50% 0;rotate:-45deg} @media(prefers-reduced-motion:no-preference){.opto-carta{animation:lupa 13s ease-in-out infinite}} @keyframes lupa{ 0%,10%{--lx:26%;--ly:79%}34%,42%{--lx:74%;--ly:79%} 52%,60%{--lx:72%;--ly:85.5%}84%,92%{--lx:28%;--ly:85.5%}100%{--lx:26%;--ly:79%}} .opto.manual .opto-carta{animation:none;cursor:none;transition:--lx .1s linear,--ly .1s linear} .opto figcaption{margin-top:18px;text-align:center;font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--oro-claro)} /* ═════ ¿QUÉ NECESITAS? ═════ */ .nec-cab{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 60px;margin-bottom:26px} .nec-cab h2,.proc-txt h2,.visita-txt h2,.serv-cab h1{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.012em} .nec-cab h2{font-size:clamp(2rem,4.4vw,3.2rem);margin-top:14px;max-width:20ch} .nec-cab h2 em,.proc-txt h2 em,.visita-txt h2 em{font-style:italic;color:var(--cielo)} .nec-cab>p{max-width:36ch;color:var(--gris)} .nec-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px;height:clamp(420px,56vh,540px)} .nec{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr auto; gap:10px 14px;padding:20px 20px 18px 22px;border-radius:22px;color:var(--tinta);border:1px solid var(--linea); box-shadow:var(--sombra-suave);transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s} .nec:hover{transform:translateY(-6px);box-shadow:0 30px 60px -34px rgba(21,24,46,.55)} .nec:focus-visible{outline:2px solid var(--oro);outline-offset:3px} .nec-txt{grid-column:1;grid-row:1;align-self:start;display:flex;flex-direction:column;gap:8px} .nec-q{font-family:var(--serif);font-weight:500;font-size:clamp(1.25rem,1.9vw,1.6rem);line-height:1.12;letter-spacing:-.01em} .nec-t{font-size:.9rem;line-height:1.45;opacity:.78;max-width:30ch} .nec-vis{grid-column:2;grid-row:1;align-self:start;width:clamp(72px,7vw,104px)} .nec-vis svg,.nec-vis img{display:block;width:100%;height:auto} .nec-ir{grid-column:1 / -1;grid-row:2;display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px; border-top:1px solid rgba(21,24,46,.14);font-size:.74rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase} .nec-ir svg{flex:0 0 auto;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s} .nec:hover .nec-ir svg{transform:translateX(5px)} .nec .oferta{align-self:flex-start} /* deportivas: la grande, oscura, con las gafas */ .nec--deportivas{grid-row:1 / span 2;grid-template-columns:1fr;grid-template-rows:auto 1fr auto;color:var(--papel);border-color:transparent; background:radial-gradient(70% 60% at 60% 60%,rgba(47,110,143,.35),transparent 70%),linear-gradient(160deg,#15182E,#23284B)} .nec--deportivas .nec-txt{grid-row:1} .nec--deportivas .nec-vis{grid-column:1;grid-row:2;align-self:center;justify-self:center;width:min(100%,430px)} .nec--deportivas .nec-vis img{filter:drop-shadow(0 22px 24px rgba(0,0,0,.45));transition:transform .6s cubic-bezier(.2,.8,.2,1)} .nec--deportivas:hover .nec-vis img{transform:scale(1.05) rotate(-2deg)} .nec--deportivas .nec-q{font-size:clamp(1.6rem,2.6vw,2.2rem)} .nec--deportivas .nec-ir{grid-row:3;border-color:rgba(247,242,233,.2)} .nec--monofocales{background:linear-gradient(160deg,#E2EEF2,#F7F6F0)} .nec--progresivas{background:linear-gradient(160deg,#F4E4C8,#EBCB9D)} .nec--blue-safe{color:var(--papel);border-color:transparent; background:radial-gradient(1px 1px at 22% 30%,rgba(247,242,233,.7),transparent),radial-gradient(1.2px 1.2px at 72% 18%,rgba(247,242,233,.6),transparent), radial-gradient(1px 1px at 48% 64%,rgba(247,242,233,.4),transparent),linear-gradient(160deg,#0F1128,#23284B)} .nec--blue-safe .nec-ir{border-color:rgba(247,242,233,.2)} /* revisión: la foto del gabinete de fondo */ .nec--revision{color:var(--papel);border-color:transparent;background:#15182E} .nec--revision .nec-vis{position:absolute;inset:0;z-index:-1;width:auto} .nec--revision .nec-vis img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;transition:transform .8s cubic-bezier(.2,.8,.2,1)} .nec--revision::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(17,20,39,.82),rgba(17,20,39,.55) 55%,rgba(17,20,39,.9))} .nec--revision:hover .nec-vis img{transform:scale(1.05)} .nec--revision .nec-ir{border-color:rgba(247,242,233,.24)} /* ═════ CÓMO FUNCIONA ═════ */ .proc-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,76px);align-items:stretch} .proc-img{position:relative;display:flex} .proc-img .marco{position:relative;width:100%;min-height:400px} .proc-img .marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%} .proc-sello{position:absolute;left:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:100px; background:var(--blanco);font-size:.84rem;font-weight:600;box-shadow:var(--sombra-suave)} .proc-sello svg{width:18px;height:18px;fill:none;stroke:var(--cielo);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .proc-txt{align-self:center} .proc-txt h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:14px 0 6px} .pasos{list-style:none;margin:22px 0 28px;position:relative} .pasos li{position:relative;display:grid;grid-template-columns:48px 1fr;column-gap:16px;padding:0 0 22px} .pasos li:not(:last-child)::before{content:"";position:absolute;left:21px;top:46px;bottom:6px;border-left:2px dotted rgba(185,138,63,.5)} .pasos b{grid-row:span 2;display:grid;place-items:center;width:44px;height:44px;border-radius:50%; border:1.5px solid var(--oro);font-family:var(--serif);font-weight:600;font-size:1.15rem;color:var(--oro);background:var(--blanco)} .pasos strong{font-weight:600;font-size:1.06rem;padding-top:2px} .pasos span{font-size:.95rem;line-height:1.5;color:var(--gris);margin-top:3px} .proc-cta,.rev-cta,.visita-cta{display:flex;flex-wrap:wrap;gap:12px} /* ═════ RESEÑAS ═════ */ .prueba{position:relative;overflow:hidden;color:var(--papel);padding:clamp(70px,10vh,120px) 0; background:radial-gradient(60% 70% at 15% 30%,rgba(47,110,143,.3),transparent 70%),linear-gradient(160deg,#15182E,#1F2449)} .prueba-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,76px);align-items:center} .prueba .eyebrow{color:var(--cielo-claro)} .prueba-q{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;margin:18px 0 14px;color:var(--papel)} .prueba-a{font-size:.9rem;font-weight:600;letter-spacing:.04em;color:rgba(247,242,233,.62)} .prueba-nota{display:flex;align-items:center;gap:10px;margin:22px 0 26px;font-size:.95rem;color:rgba(247,242,233,.8)} .prueba-nota b{font-family:var(--serif);font-size:1.3rem;color:var(--papel)} .prueba-rc{display:grid;gap:14px} .prueba-rc .rc{padding:20px 22px;border-color:transparent} .prueba-rc .rc:nth-child(2){margin-left:clamp(0px,4vw,56px)} .prueba-rc .rc .stars{margin-bottom:10px} .prueba-rc .rc p{font-size:.96rem;line-height:1.55} .prueba-rc .rc .who{margin-top:12px;padding-top:12px} .prueba-rc .rc .ini{width:36px;height:36px;flex-basis:36px} /* ═════ VISÍTANOS ═════ */ .visita-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(36px,5vw,76px);align-items:stretch} .visita-img{margin:0;display:flex} .visita-img .marco{position:relative;width:100%;min-height:380px} .visita-img .marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%} .visita-txt{align-self:center} .visita-txt h2{font-size:clamp(2rem,4.2vw,3.1rem);margin:14px 0 22px} .visita-txt .horario{margin:0 0 14px} .visita-txt .horario th,.visita-txt .horario td{padding:12px 0;border-bottom:1px solid var(--linea);text-align:left;font-size:1rem} .visita-txt .horario th{font-weight:600;padding-right:20px} .visita-txt .horario td{color:var(--gris)} .visita-nota{font-size:.95rem;color:var(--gris);margin-bottom:24px} /* ═════ SERVICIOS · cabecera y buscador de casos ═════ */ .serv-cab__txt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:20px 56px;align-items:end} .serv-cab h1{margin-bottom:0;text-wrap:balance} .serv-cab .entrada{max-width:46ch;margin-bottom:6px} .buscador{margin-top:clamp(22px,3.4vh,40px)} .buscador-t{font-size:.78rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:12px} .chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px} .chip{position:relative;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr auto;gap:6px 10px;min-height:128px; padding:16px 16px 14px;border-radius:18px;background:var(--blanco);border:1px solid var(--linea);box-shadow:var(--sombra-suave); transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .4s} .chip:hover{transform:translateY(-4px);border-color:rgba(185,138,63,.5);box-shadow:0 24px 46px -30px rgba(21,24,46,.5)} .chip-n{font-family:var(--serif);font-weight:600;font-size:.95rem;color:var(--oro)} .chip-i{width:24px;height:24px;fill:none;stroke:var(--cielo);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .chip b{grid-column:1 / -1;align-self:end;font-weight:600;font-size:1.04rem;line-height:1.25} .chip small{grid-column:1;font-size:.78rem;color:var(--gris)} .chip>svg:last-child{grid-column:2;grid-row:3;width:18px;height:18px;fill:none;stroke:var(--tinta);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s} .chip:hover>svg:last-child{transform:translateY(3px) rotate(90deg)} /* ═════ SERVICIOS · cada producto ═════ */ .prod2{position:relative;overflow:hidden;padding:clamp(64px,9vh,110px) 0;background:var(--papel)} .prod2>.wrap{position:relative;z-index:1} .prod2--cielo{background:radial-gradient(70% 60% at 50% 0%,rgba(143,185,206,.28),transparent 70%),linear-gradient(180deg,#EEF3F2,#FBF8F1 70%)} .prod2--arena{background:radial-gradient(70% 80% at 92% 100%,rgba(217,137,91,.22),transparent 70%),linear-gradient(180deg,#F5E9D4,#EDD7B3)} .prod2--noche{background:linear-gradient(160deg,#15182E 0%,#1B2040 55%,#23284B 100%)} #blue-safe.prod2--noche{background: radial-gradient(1.2px 1.2px at 12% 18%,rgba(247,242,233,.7),transparent),radial-gradient(1px 1px at 28% 72%,rgba(247,242,233,.5),transparent), radial-gradient(1.4px 1.4px at 47% 12%,rgba(247,242,233,.6),transparent),radial-gradient(1px 1px at 63% 34%,rgba(247,242,233,.45),transparent), radial-gradient(1.3px 1.3px at 81% 16%,rgba(247,242,233,.65),transparent),radial-gradient(1px 1px at 91% 58%,rgba(247,242,233,.4),transparent), linear-gradient(170deg,#0F1128 0%,#171A38 55%,#20244A 100%)} #deportivas.prod2--noche::before{content:"";position:absolute;right:-14%;top:-24%;width:72%;height:95%;pointer-events:none; background:radial-gradient(closest-side,rgba(47,110,143,.34),transparent 72%)} .p2-num{position:absolute;z-index:0;right:-.04em;bottom:-.24em;font-family:var(--serif);font-weight:600;line-height:1; font-size:clamp(9rem,22vw,19rem);letter-spacing:-.04em;color:var(--tinta);opacity:.045;pointer-events:none;user-select:none} .prod2--izq .p2-num{right:auto;left:-.04em} .p2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:center} .prod2--izq .p2-vis{order:-1} .p2-eti{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;font-size:.76rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--gris)} .p2-eti b{font-family:var(--serif);font-weight:600;font-size:1.6rem;letter-spacing:0;color:var(--oro);line-height:1} .p2-txt h2{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4.2vw,3.1rem);line-height:1.05;letter-spacing:-.015em;margin:14px 0 14px} .p2-txt h2 em{font-style:italic;color:var(--cielo)} .p2-entrada{color:var(--gris);font-size:1.04rem;max-width:48ch} .p2-mas{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding-bottom:3px;border-bottom:1.5px solid rgba(21,24,46,.3); font-weight:600;font-size:.94rem;color:var(--tinta);transition:var(--t)} .p2-mas svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s} .p2-mas:hover{border-color:var(--oro)}.p2-mas:hover svg{transform:translateX(4px)} .p2-vis{min-width:0} /* los casos de uso: tres tarjetas en fila, cada una con su WhatsApp */ .casos-t{display:flex;align-items:center;gap:14px;margin:clamp(22px,3.4vh,40px) 0 14px;font-size:.78rem;font-weight:700; letter-spacing:.14em;text-transform:uppercase;color:var(--oro)} .casos-t::after{content:"";flex:1;height:1px;background:currentColor;opacity:.35} .casos{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px} .caso{position:relative;display:flex;flex-direction:column;gap:5px;padding:16px 18px 14px;border-radius:18px; background:rgba(255,252,247,.84);border:1px solid var(--linea);transition:transform .4s cubic-bezier(.2,.8,.2,1),border-color .3s,background .3s,box-shadow .4s} .caso:hover{transform:translateY(-3px);border-color:rgba(185,138,63,.45);box-shadow:0 22px 40px -30px rgba(21,24,46,.5)} .caso-n{font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cielo)} .caso strong{font-weight:600;font-size:1.04rem;line-height:1.3;color:var(--tinta)} .caso p{flex:1;font-size:.9rem;line-height:1.48;color:var(--gris)} .caso-wa{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;margin-top:6px;padding:6px 13px 6px 7px;border-radius:100px; background:rgba(31,168,85,.1);color:#137A3D;font-size:.82rem;font-weight:700;transition:var(--t)} .caso-wa svg{width:22px;height:22px;padding:4px;border-radius:50%;background:#1FA855;fill:#fff} .caso-wa:hover{background:#1FA855;color:#fff} /* monofocales: cada caso es también la pestaña que cambia la lente */ .niveles .caso{cursor:pointer} .niveles .caso::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px; background:var(--cielo);transform:scaleX(0);transition:transform .45s cubic-bezier(.2,.8,.2,1)} .niveles .caso[aria-selected="true"]{background:#fff;border-color:rgba(47,110,143,.45);box-shadow:0 22px 40px -30px rgba(21,24,46,.5)} .niveles .caso[aria-selected="true"]::before{transform:none} .niveles .caso:focus-visible{outline:2px solid var(--cielo);outline-offset:3px} /* progresivas: el caso de la zona que mira la lente se enciende */ @media(prefers-reduced-motion:no-preference){ .zonas .caso:nth-child(1){animation:cz1 9s infinite} .zonas .caso:nth-child(2){animation:cz2 9s infinite} .zonas .caso:nth-child(3){animation:cz3 9s infinite} } @keyframes cz1{0%,30%{background:#fff;border-color:rgba(47,110,143,.5)}36%,94%{background:rgba(255,252,247,.84);border-color:var(--linea)}100%{background:#fff;border-color:rgba(47,110,143,.5)}} @keyframes cz2{0%,32%{background:rgba(255,252,247,.84);border-color:var(--linea)}38%,62%{background:#fff;border-color:rgba(47,110,143,.5)}68%,100%{background:rgba(255,252,247,.84);border-color:var(--linea)}} @keyframes cz3{0%,64%{background:rgba(255,252,247,.84);border-color:var(--linea)}70%,93%{background:#fff;border-color:rgba(47,110,143,.5)}99%,100%{background:rgba(255,252,247,.84);border-color:var(--linea)}} .prod2--arena .p2-txt h2 em{color:#9A4F2C} .prod2--arena .p2-entrada{color:#4F4A52} .prod2--arena .p2-eti{color:#5E4B45} /* oscuros: deportivas y Blue Safe */ .prod2--oscura{color:var(--papel)} .prod2--oscura .p2-num{color:var(--papel);opacity:.05} .prod2--oscura .p2-eti{color:rgba(247,242,233,.66)} .prod2--oscura .p2-txt h2{color:var(--papel)} .prod2--oscura .p2-txt h2 em{color:var(--oro-claro)} .prod2--oscura .p2-entrada{color:rgba(247,242,233,.74)} .prod2--oscura .p2-mas{color:var(--papel);border-color:rgba(247,242,233,.35)} .prod2--oscura .caso{background:rgba(255,255,255,.05);border-color:rgba(247,242,233,.12)} .prod2--oscura .caso:hover{border-color:rgba(227,203,155,.5)} .prod2--oscura .caso-n{color:var(--cielo-claro)} .prod2--oscura .caso strong{color:var(--papel)} .prod2--oscura .caso p{color:rgba(247,242,233,.66)} .prod2--oscura .caso-wa{background:rgba(31,168,85,.18);color:#7FE0A6} .prod2--oscura .caso-wa:hover{background:#1FA855;color:#fff} .prod2--oscura .casos-t{color:var(--oro-claro)} /* el dibujo de cada producto, a una altura que deje sitio a los casos */ .prod2{--vis-h:clamp(260px,42vh,430px)} .prod2 .mono-vista{width:min(100%,calc(var(--vis-h) * 1.25));margin-inline:auto} .prod2 .prog-vista{width:min(100%,calc(var(--vis-h) * 1.18));margin-inline:auto} .prod2 .prog-svg{max-height:calc(var(--vis-h) - 110px)} .prod2 .bs-vista{width:min(100%,calc(var(--vis-h) * 1.32));margin-inline:auto} .prod2 .esc-escena{width:min(100%,calc(var(--vis-h) * 1.32));margin-inline:auto} /* revisión (05) */ .rev-sec .p2-grid{align-items:stretch} .rev-sec .p2-txt{align-self:center} .rev-sec .pasos{margin:22px 0 26px} .rev-img{display:flex} .rev-img .marco{position:relative;width:100%;min-height:420px} .rev-img .marco img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%} /* raíl: etiquetas de producto en vez de horas */ .riel b{font-size:.64rem;max-width:62px;text-align:center;line-height:1.15} /* ───── ordenador: cada sección cabe en una pantalla ───── */ @media(min-width:961px){ .hero2{min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--cab) + 20px) 0 36px} .hero2 h1{font-size:clamp(2.8rem,min(5.4vw,9.4vh),5.2rem)} .prod2{padding:var(--ritmo) 0} .p2-txt h2,.proc-txt h2,.visita-txt h2{font-size:clamp(2rem,min(3.6vw,5.8vh),3rem)} .nec-cab{margin-bottom:clamp(14px,2.4vh,26px)} .nec-cab h2{font-size:clamp(2rem,min(3.8vw,6vh),3.1rem)} .serv-cab h1{font-size:clamp(2.4rem,min(4.6vw,7.4vh),3.7rem)} .prueba{padding:var(--ritmo) 0} } @media(min-width:961px) and (max-height:820px){ .hero2__sub{margin:16px 0 22px;font-size:1.04rem} .hero2__prueba{margin-top:22px} .pasos li{padding-bottom:14px} .pasos{margin:16px 0 20px} .caso{padding:13px 16px 12px} .caso p{font-size:.86rem} .chip{min-height:112px} .prueba-rc .rc{padding:16px 20px} .prueba-rc .rc p{font-size:.92rem} } /* ───── tablet y móvil ───── */ @media(max-width:960px){ .hero2__grid{grid-template-columns:minmax(0,1fr);gap:40px} .opto{width:min(100%,400px)} .nec-cab,.serv-cab__txt{display:flex;flex-direction:column;align-items:flex-start} .nec-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:none;height:auto} .nec--deportivas{grid-column:1 / -1;grid-row:auto;min-height:420px} .nec{min-height:210px} .nec--revision{grid-column:1 / -1} .proc-grid,.prueba-grid,.visita-grid,.p2-grid{grid-template-columns:minmax(0,1fr);gap:30px} .proc-img .marco,.visita-img .marco,.rev-img .marco{min-height:0;aspect-ratio:4/3.2} .p2-vis,.prod2--izq .p2-vis{order:-1} .rev-sec .p2-vis{order:0} .prueba-rc .rc:nth-child(2){margin-left:0} .chips{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -26px;padding:4px 26px 14px;scrollbar-width:none} .chips::-webkit-scrollbar{display:none} .chip{flex:0 0 44%;scroll-snap-align:start;min-height:118px} .casos{grid-template-columns:minmax(0,1fr);gap:10px} .prod2{--vis-h:clamp(240px,64vw,380px)} .p2-num{font-size:clamp(7rem,34vw,11rem);bottom:auto;top:-.14em} } @media(max-width:560px){ .hero2 h1{font-size:clamp(2.5rem,11vw,3.3rem)} .hero2__cta .btn{flex:1 1 100%} .hero2__prueba{flex-direction:column;gap:8px} .hero2__prueba li{padding:0;border:0} .nec-grid{grid-template-columns:minmax(0,1fr)} .nec--deportivas{min-height:380px} .nec{min-height:0} .chip{flex-basis:62%} .proc-cta .btn,.rev-cta .btn,.visita-cta .btn{flex:1 1 100%} .prog-etq text{font-size:21px} .bs-ley span{grid-template-columns:22px 1fr;row-gap:2px;align-items:start;font-size:.88rem} .bs-ley b{grid-column:2} .bs-ley i{grid-row:span 2;margin-top:9px} .visita-txt .horario th,.visita-txt .horario td{display:block;padding:4px 0;border:0} .visita-txt .horario tr{display:block;padding:10px 0;border-bottom:1px solid var(--linea)} } @media(prefers-reduced-motion:reduce){ .mono-vista,.nec,.chip,.caso{transition:none} } /* ───── ajustes tras la primera revisión (30 oct) ───── */ /* el margen de cada fila en px: en em, la fila grande se salía del cartel */ .of{padding:0 calc(var(--u)*3.2)} /* el logo no es transparente: sobre el hero oscuro va en su cartela clara */ body:has(.hero2) header:not(.scr) .brand img{filter:none;background:var(--papel);border-radius:10px;padding:3px 4px} /* las reseñas son tarjetas claras dentro de una sección oscura */ .prueba-rc .rc{color:var(--tinta)} /* la foto del gabinete ocupa toda la tarjeta de revisión */ .nec--revision .nec-vis{grid-column:auto;grid-row:auto} /* deportivas y progresivas: dibujo algo más bajo para que entren con sus casos */ #deportivas{--vis-h:clamp(240px,37vh,400px)} #progresivas{--vis-h:clamp(240px,37vh,400px)} @media(min-width:961px) and (max-height:820px){ .casos-t{margin:16px 0 10px} #deportivas,#progresivas{--vis-h:clamp(240px,35vh,400px)} } @media(min-width:961px) and (max-height:780px){ #deportivas,#progresivas{--vis-h:clamp(230px,33vh,400px)} } @media(min-width:961px) and (max-height:780px){ .prod2{padding-block:34px} } /* ───── 30 oct, tarde: titulares en dos líneas limpias y tarjetas de «¿Qué necesitas?» sin cortes ───── */ .nec-cab h2 em,.proc-txt h2 em,.visita-txt h2 em,.p2-txt h2 em{display:block} .nec:not(.nec--deportivas){grid-template-rows:auto 1fr auto} .nec:not(.nec--deportivas) .nec-txt{display:contents} .nec:not(.nec--deportivas) .nec-q{grid-column:1;grid-row:1;align-self:center;font-size:clamp(1.15rem,1.65vw,1.45rem)} .nec:not(.nec--deportivas) .nec-t{grid-column:1 / -1;grid-row:2;align-self:start;max-width:none} .nec:not(.nec--deportivas) .nec-vis{width:clamp(56px,5.4vw,84px);align-self:center} .nec--revision .nec-vis{align-self:stretch} .nec:not(.nec--deportivas) .nec-ir{grid-row:3} .nec:not(.nec--deportivas).nec--revision .nec-vis{width:auto;align-self:auto} .nec--deportivas .nec-vis{min-height:0;height:100%;display:flex;align-items:center;justify-content:center} .nec--deportivas .nec-vis img{width:auto;max-width:100%;max-height:100%;object-fit:contain} .nec--revision::after{background:linear-gradient(180deg,rgba(17,20,39,.88),rgba(17,20,39,.7) 55%,rgba(17,20,39,.92))} /* ═════ 30 oct, noche · productos nuevos: lentes de trabajo, antirreflejantes QUARZ y clip-on ═════ */ .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .prod2--oficina{background:radial-gradient(60% 70% at 8% 100%,rgba(47,110,143,.12),transparent 70%),linear-gradient(180deg,#EEF0F2,#F8F6F1 75%)} .prod2--sol{background:radial-gradient(55% 70% at 88% 18%,rgba(240,176,72,.34),transparent 70%),linear-gradient(180deg,#FBF1DC,#F6E2BD)} .prod2--sol .p2-txt h2 em{color:#A4581F} .prod2--sol .p2-eti{color:#6A5446} .prod2--sol .p2-entrada{color:#54493F} /* progresivas · los tres diseños VIMAX */ .prog-niv{display:grid;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--linea)} .prog-niv-t{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)} .prog-niv-b{display:flex;gap:8px} .pn{flex:1;display:flex;justify-content:center;padding:8px 6px;border-radius:12px;border:1px solid var(--linea);background:transparent;cursor:pointer; transition:border-color .3s,background .3s} .pn:hover{border-color:rgba(185,138,63,.5)} .pn[aria-pressed="true"]{background:#FFF4E2;border-color:var(--oro)} .pn:focus-visible{outline:2px solid var(--cielo);outline-offset:2px} .est{display:flex;gap:2px} .est i{width:12px;height:12px;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);background:#D9CDB8} .est i.e1{background:var(--oro)} .est i.e5{background:linear-gradient(90deg,var(--oro) 50%,#D9CDB8 50%)} .prog-niv-d{min-height:2.8em;font-size:.86rem;line-height:1.4;color:var(--tinta)} .prog-vista .raya{transition:transform .7s cubic-bezier(.2,.8,.2,1)} .prog-vista[data-c="0"] .raya-i{transform:translateX(-34px)} .prog-vista[data-c="0"] .raya-d{transform:translateX(34px)} .prog-vista[data-c="1"] .raya-i{transform:translateX(-17px)} .prog-vista[data-c="1"] .raya-d{transform:translateX(17px)} /* lentes de trabajo · regla de distancias */ .trab-vista{position:relative;margin:0 auto;width:min(100%,calc(var(--vis-h) * 1.45));padding:clamp(16px,2vw,26px) clamp(14px,2vw,24px) 14px; background:var(--blanco);border:1px solid var(--linea);border-radius:26px;box-shadow:var(--sombra-suave)} .trab-svg{display:block;width:100%;height:auto} .t-obj{fill:none;stroke:var(--tinta);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s,filter .6s} .t-obj .fino{stroke-width:1.6;opacity:.55} .t-obj .lapiz{stroke:var(--oro)} .to2 rect{fill:rgba(47,110,143,.08)} .to4 path:first-child{fill:rgba(47,110,143,.14)} .t-ojo{fill:none;stroke:var(--cielo);stroke-width:2.4} .t-ojo circle{fill:var(--cielo);stroke:none} .t-regla{stroke:var(--tinta);stroke-width:1.6;opacity:.35} .t-marcas path{stroke:var(--tinta);stroke-width:1.6;opacity:.45} .t-marcas text,.t-lejos{font-family:var(--sans);font-size:13px;font-weight:600;fill:var(--gris);text-anchor:middle} .t-lejos{font-size:12px;font-style:italic} .tb{opacity:0;transition:opacity .5s} .tb rect{fill:var(--oro);opacity:.55} .tb2 rect{fill:url(#trabMed)} .tb text{font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.04em;fill:#8A6526;text-anchor:middle} .trab-vista[data-m="0"] .tb0,.trab-vista[data-m="1"] .tb1,.trab-vista[data-m="2"] .tb2{opacity:1} .trab-vista .to4{opacity:.4;filter:url(#trabDes)} .trab-vista[data-m="0"] .to3{opacity:.4;filter:url(#trabDes)} .trab-vista[data-m="2"] .to1{opacity:.55} .trab-etq{position:absolute;top:14px;left:16px;padding:6px 12px;border-radius:100px;background:var(--tinta);color:var(--papel); font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase} .modos .caso{cursor:pointer} /* antirreflejantes · foto del muestrario */ .qz-vista{margin:0 auto;width:min(100%,calc(var(--vis-h) * 1.5))} .qz-vista .marco{border-radius:24px;overflow:hidden;box-shadow:var(--sombra-suave);background:#1A1A1F} .qz-vista img{display:block;width:100%;height:auto} .qz-vista figcaption{margin-top:12px;font-size:.88rem;line-height:1.4;color:var(--gris);text-align:center} .qz-vista figcaption b{color:var(--tinta)} .mv-bri{fill:none;stroke:var(--oro);stroke-width:4;stroke-linecap:round;opacity:.8} /* clip-on · dos piezas recortadas al sol */ .clip-vista{position:relative;margin:0 auto;width:min(100%,calc(var(--vis-h) * 1.3));aspect-ratio:1.3;display:grid;place-items:center} .clip-sol{position:absolute;right:2%;top:0;width:34%;color:#E39A3B;opacity:.55;animation:giraSol 40s linear infinite} @keyframes giraSol{to{transform:rotate(360deg)}} .clip-p{position:absolute;width:74%;height:auto;filter:drop-shadow(0 22px 22px rgba(80,50,20,.28))} .clip-p1{left:2%;top:10%;rotate:-6deg;animation:flota 7s ease-in-out infinite} .clip-p2{right:0;bottom:16%;width:70%;rotate:5deg;animation:flota 7s ease-in-out -3.5s infinite} @keyframes flota{50%{translate:0 -8px}} .clip-chips{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px} .clip-chips span{padding:5px 11px;border-radius:100px;background:rgba(255,252,247,.85);border:1px solid rgba(164,88,31,.25);font-size:.76rem;font-weight:600;color:#6A4A2E} /* Inicio · «¿Qué necesitas?» con siete tarjetas: una alta y seis en dos filas */ @media(min-width:961px){ .nec-grid{grid-template-columns:minmax(0,1.25fr) repeat(3,minmax(0,1fr))} } .nec:not(.nec--deportivas){display:block;padding:18px 18px 62px 20px} .nec:not(.nec--deportivas) .nec-txt{display:block} .nec:not(.nec--deportivas) .nec-vis{float:right;width:clamp(46px,3.8vw,62px);margin:0 0 6px 10px} .nec:not(.nec--deportivas) .nec-q{display:block;font-size:clamp(1.08rem,1.35vw,1.3rem)} .nec:not(.nec--deportivas) .nec-t{display:block;margin-top:7px;font-size:.84rem} .nec:not(.nec--deportivas) .nec-ir{position:absolute;left:20px;right:18px;bottom:14px} .nec--clip-on{background:linear-gradient(160deg,#FBEFD6,#F3D7A6)} .nec--clip-on .nec-vis{width:clamp(70px,6vw,96px)} .nec--trabajo{background:linear-gradient(160deg,#EEF0F2,#FBF8F1)} .nec--antirreflejante{background:var(--blanco)} /* Servicios · ocho accesos en dos filas */ @media(min-width:961px){ .chips{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .chip{min-height:0;padding:12px 14px 11px;gap:4px 10px} .chip b{font-size:.98rem} } @media(max-width:960px){ .clip-vista{aspect-ratio:1.45} .trab-etq{top:10px;left:12px} } @media(prefers-reduced-motion:reduce){ .clip-sol,.clip-p1,.clip-p2{animation:none} } #progresivas .prog-svg{max-height:max(120px,calc(var(--vis-h) - 150px))} #progresivas .prog-vista{width:min(100%,calc(var(--vis-h) * 1.42))} .pn{min-width:0;padding:7px 4px} .est i{width:11px;height:11px} .nec--clip-on .nec-vis{float:none;position:absolute;right:14px;bottom:50px;width:clamp(96px,8.4vw,128px);margin:0} .nec--clip-on .nec-q,.nec--clip-on .nec-t{max-width:none} /* 30 oct · clip-on de Inicio a su tamaño (el :not() lo pisaba) y textos del esquema de trabajo legibles en móvil */ @media(min-width:961px){.nec.nec--clip-on .nec-vis{float:none;position:absolute;right:14px;bottom:50px;width:clamp(96px,8.4vw,128px);margin:0}} @media(max-width:600px){ .t-marcas text,.tb text{font-size:18px} .t-lejos{font-size:16px} } /* ═════ 30 oct, noche · antirreflejante y clip-on animados (sustituyen a las fotos de la tienda) ═════ */ .ar-vista,.cl-vista{position:relative;margin:0 auto;width:min(100%,calc(var(--vis-h) * 1.5));padding:clamp(16px,2vw,24px) clamp(12px,1.8vw,22px) 12px; background:var(--blanco);border:1px solid var(--linea);border-radius:26px;box-shadow:var(--sombra-suave)} .ar-svg,.cl-svg{display:block;width:100%;height:auto;overflow:hidden} .ar-m{display:none} .ar-vista[data-m="0"] .ar-m0,.ar-vista[data-m="1"] .ar-m1,.ar-vista[data-m="2"] .ar-m2,.cl-vista[data-m="2"] .cl-m2{display:inline;animation:arEntra .5s ease-out} @keyframes arEntra{from{opacity:0}} /* ojos y montura */ .ar-ceja{fill:none;stroke:var(--tinta);stroke-width:3;stroke-linecap:round;opacity:.4} .ar-ojo path{fill:#fff;stroke:var(--tinta);stroke-width:2.4} .ar-iris{fill:var(--cielo)} .ar-pupila{fill:var(--tinta)} .ar-luz{fill:#fff} .ar-ojo{transform-box:fill-box;transform-origin:center;animation:arParpadeo 5.5s infinite} @keyframes arParpadeo{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}} .ar-montura rect{fill:rgba(47,110,143,.05);stroke:var(--tinta);stroke-width:5} .ar-montura path{fill:none;stroke:var(--tinta);stroke-width:5;stroke-linecap:round} .ar-lbl{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.03em;fill:var(--gris);text-anchor:middle} .ar-lbl-q{fill:var(--cielo)} /* 0 · reflejos en la foto */ .ar-velo{opacity:.75;animation:arVelo 3.6s ease-in-out infinite} @keyframes arVelo{0%,100%{opacity:.75}9%{opacity:1}30%{opacity:.75}} .ar-ventana path:first-child{fill:#fff;opacity:.85} .ar-marco{fill:none;stroke:rgba(21,24,46,.16);stroke-width:3} .ar-raya{fill:#fff;opacity:.75;animation:arRaya 3.6s ease-in-out infinite} .ar-raya-q{opacity:.1} @keyframes arRaya{0%{transform:translateX(-150px)}45%,100%{transform:translateX(230px)}} .ar-resto{fill:#8FD0A8;opacity:.2} .ar-cam rect,.ar-cam path,.ar-cam circle{fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round} .ar-cam .ar-flash{stroke:var(--oro);stroke-width:3.2;opacity:0;animation:arFlash 3.6s ease-out infinite} @keyframes arFlash{0%,100%{opacity:0}5%{opacity:1}18%{opacity:0}} /* 1 · resistencia y limpieza */ .ar-mancha{fill:#fff;opacity:.3} .ar-gota-fija,.ar-gota{fill:rgba(255,255,255,.75);stroke:rgba(21,24,46,.25);stroke-width:1.4} .ar-rasgu{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round} .ar-gota{animation:arGota 3.2s ease-in infinite} .ar-gota:nth-child(2){animation-delay:-.5s}.ar-gota:nth-child(3){animation-delay:-1.1s}.ar-gota:nth-child(4){animation-delay:-1.6s} .ar-gota:nth-child(5){animation-delay:-2.2s}.ar-gota:nth-child(6){animation-delay:-2.7s} @keyframes arGota{0%{transform:translateY(0);opacity:0}10%,30%{transform:translateY(0);opacity:1}75%,100%{transform:translateY(80px);opacity:0}} /* 2 · la luz azul rebota en la superficie */ .ar-pantalla rect,.ar-pantalla path{fill:none;stroke:var(--tinta);stroke-width:2.6;stroke-linecap:round} .ar-pantalla rect{fill:rgba(79,107,232,.12)} .ar-azul{fill:none;stroke:#4F6BE8;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:8 10;animation:arAzul 1.1s linear infinite} @keyframes arAzul{to{stroke-dashoffset:-36}} .ar-choque{fill:#4F6BE8;opacity:.25;transform-box:fill-box;transform-origin:center;animation:arChoque 1.1s ease-in-out infinite} @keyframes arChoque{50%{transform:scale(1.7);opacity:.08}} /* clip-on: carretera de la sierra con el sol de cara */ .cl-vista{background:linear-gradient(180deg,#FFFBF3,#FBEAD0)} .cl-sierra{fill:rgba(47,110,143,.14)} .cl-halo{fill:#F2B54A;opacity:.22;transform-box:fill-box;transform-origin:center;animation:clHalo 4s ease-in-out infinite} @keyframes clHalo{50%{transform:scale(1.18);opacity:.32}} .cl-solc{fill:#F2B54A} .cl-carretera{fill:rgba(21,24,46,.1)} .cl-linea{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round} .cl-gafas rect{fill:rgba(255,255,255,.2);stroke:var(--tinta);stroke-width:5} .cl-gafas path{fill:none;stroke:var(--tinta);stroke-width:5;stroke-linecap:round} .cl-lente{fill:url(#clVerde);opacity:.86} .cl-reflejo{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:.26} .cl-metal{fill:none;stroke:#8E969E;stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .cl-clic{fill:none;stroke:var(--oro);stroke-width:2.5;opacity:0;transform-box:fill-box;transform-origin:center} .cl-clip{transform-box:view-box;transform-origin:260px 99px} .cl-vista[data-m="0"] .cl-clip{animation:clCae 4.6s cubic-bezier(.3,.7,.3,1) infinite} .cl-vista[data-m="0"] .cl-clic{animation:clClic 4.6s ease-out infinite} .cl-vista[data-m="1"] .cl-clip{animation:clAbre 4.6s ease-in-out infinite} @keyframes clCae{0%{transform:translateY(-210px);opacity:0}8%{opacity:1}28%{transform:translateY(0)}32%{transform:translateY(-7px)}36%,78%{transform:translateY(0);opacity:1}92%,100%{transform:translateY(-210px);opacity:0}} @keyframes clClic{0%,33%{opacity:0;transform:scale(.4)}37%{opacity:1}54%,100%{opacity:0;transform:scale(1.9)}} @keyframes clAbre{0%,28%{transform:scaleY(1)}42%,76%{transform:scaleY(-.2)}90%,100%{transform:scaleY(1)}} .cl-brillos path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;animation:clBrillo 1.4s ease-in-out infinite alternate} .cl-brillos path:nth-child(odd){animation-delay:-.7s} .cl-brillos circle{fill:#FFE6A3;opacity:.5} @keyframes clBrillo{from{opacity:.3}to{opacity:1}} .cl-vista .clip-chips{position:static;margin-top:10px} @media(max-width:600px){ .ar-lbl{font-size:19px} } @media(prefers-reduced-motion:reduce){ .ar-vista *,.cl-vista *{animation:none!important} } /* Inicio · la foto del clip-on va debajo del texto, sin taparlo */ @media(min-width:961px){ .nec.nec--clip-on .nec-vis{position:static;float:none;display:block;width:clamp(92px,7.6vw,124px);margin:10px 0 0 auto} } /* ajustes tras verlo: reflejos que se noten y brillos de carretera con contraste */ .ar-velo{fill:#fff;opacity:.62} @keyframes arVelo{0%,100%{opacity:.62}9%{opacity:.95}30%{opacity:.62}} .ar-ventana path:first-child{fill:#E3EEF4;opacity:.95} .ar-marco{stroke:rgba(21,24,46,.22);stroke-width:4} .ar-lampara{fill:#fff;opacity:.9} .ar-mancha{opacity:.22} .ar-huella{fill:#fff;opacity:.7} .ar-gota-fija,.ar-gota{fill:rgba(255,255,255,.9);stroke:rgba(21,24,46,.4);stroke-width:1.6} .ar-rasgu{stroke:rgba(21,24,46,.32);stroke-width:1.6} .cl-carretera{fill:rgba(21,24,46,.24)} .cl-brillos{filter:drop-shadow(0 0 5px #fff)} .cl-brillos path{stroke-width:6} /* ═════ 30 oct, noche · fotos mejores ═════ antirreflejante: retrato real con los reflejos simulados encima; clip-on: piezas reales de Centrostyle bajo la escena */ .arf-vista{padding:0;background:none;border:0;box-shadow:none;width:min(100%,calc(var(--vis-h) * 1.55))} .arf-foto{position:relative;border-radius:24px;overflow:hidden;box-shadow:var(--sombra-suave);aspect-ratio:1680/1050;background:#CDB6A3} .arf-foto img{display:block;width:100%;height:100%;object-fit:cover} .arf-svg{position:absolute;inset:0;width:100%;height:100%} .arf-vista .vis-etq{top:14px;left:14px} .arf-velo{opacity:.6;mix-blend-mode:screen;animation:arfVelo 3.6s ease-in-out infinite} @keyframes arfVelo{0%,100%{opacity:.6}6%{opacity:.95}30%{opacity:.6}} .arf-ventana{mix-blend-mode:screen} .arf-ventana path:first-child{fill:#EEF6FB;opacity:.72} .arf-marco{fill:none;stroke:rgba(30,40,55,.2);stroke-width:10} .arf-raya{fill:#fff;opacity:.38;mix-blend-mode:screen;animation:arfRaya 3.6s ease-in-out infinite} @keyframes arfRaya{0%{transform:translateX(-320px)}45%,100%{transform:translateX(440px)}} .arf-bloom{fill:#fff;opacity:0;animation:arfBloom 3.6s ease-out infinite} @keyframes arfBloom{0%,100%{opacity:0}5%{opacity:.95}32%{opacity:0}} .arf-flash{fill:#fff;opacity:0;animation:arfFlash 3.6s ease-out infinite} @keyframes arfFlash{0%,100%{opacity:0}4%{opacity:.5}13%{opacity:0}} .arf-huella{fill:#fff;opacity:.42} .arf-gota-fija,.arf-gota{fill:rgba(255,255,255,.26);stroke:rgba(255,255,255,.9);stroke-width:3} .arf-rasgu{fill:none;stroke:rgba(255,255,255,.8);stroke-width:3.5;stroke-linecap:round} .arf-gota{animation:arfGota 3.2s ease-in infinite} .arf-gota:nth-child(2){animation-delay:-.5s}.arf-gota:nth-child(3){animation-delay:-1.1s}.arf-gota:nth-child(4){animation-delay:-1.6s} .arf-gota:nth-child(5){animation-delay:-2.2s}.arf-gota:nth-child(6){animation-delay:-2.7s} @keyframes arfGota{0%{transform:translateY(0);opacity:0}10%,30%{transform:translateY(0);opacity:1}75%,100%{transform:translateY(190px);opacity:0}} .arf-azul{mix-blend-mode:screen;opacity:.85} .arf-rayo{fill:none;stroke:#8AA2FF;stroke-width:8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22 24;animation:arfRayo 1.1s linear infinite;filter:drop-shadow(0 0 6px rgba(111,140,255,.9))} @keyframes arfRayo{to{stroke-dashoffset:-92}} .arf-choque{fill:#8AA2FF;opacity:.55;transform-box:fill-box;transform-origin:center;animation:arChoque 1.1s ease-in-out infinite} .arf-lbl{position:absolute;bottom:12px;padding:5px 12px;border-radius:100px;background:rgba(255,252,247,.92);font-size:.76rem;font-weight:700;letter-spacing:.02em;color:var(--gris);box-shadow:0 6px 16px -10px rgba(21,24,46,.5)} .arf-lbl-sin{left:12px} .arf-lbl-con{right:12px;color:var(--cielo)} /* clip-on: las dos piezas reales, resaltadas según el caso */ .cl-tira{display:flex;justify-content:center;gap:clamp(14px,3vw,34px);margin-top:10px} .cl-pieza{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.5;transition:opacity .4s,transform .4s} .cl-pieza img{display:block;width:clamp(96px,10vw,150px);height:auto;filter:drop-shadow(0 10px 10px rgba(80,50,20,.22))} .cl-pieza b{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6A4A2E} .cl-vista[data-m="0"] .cl-pieza[data-p="0"],.cl-vista[data-m="1"] .cl-pieza[data-p="1"],.cl-vista[data-m="2"] .cl-pieza{opacity:1} .cl-vista[data-m="0"] .cl-pieza[data-p="0"],.cl-vista[data-m="1"] .cl-pieza[data-p="1"]{transform:translateY(-3px)} @media(max-width:600px){ .arf-lbl{font-size:.68rem;padding:4px 9px;bottom:8px} .arf-lbl-sin{left:8px}.arf-lbl-con{right:8px} } @media(prefers-reduced-motion:reduce){ .arf-vista *{animation:none!important} } /* Blue UV sobre la foto: el azul baña el ojo sin tratamiento y se queda en la superficie de la lente con QUARZ */ .arf-azul{animation:arfAzul 2.4s ease-in-out infinite} @keyframes arfAzul{50%{opacity:.55}} .arf-brillo-azul{fill:none;stroke:#7D97FF;stroke-width:34;opacity:.75;animation:arfBrilloAzul 2.4s ease-in-out infinite} @keyframes arfBrilloAzul{50%{opacity:1}} /* ───── marcas · cinta infinita al pie del hero · 30 oct 2026 ───── */ .cinta{position:relative;z-index:1;display:flex;align-items:center;margin-top:clamp(30px,4.6vh,50px); border-top:1px solid rgba(247,242,233,.12);background:rgba(247,242,233,.035)} .cinta-tit{flex:none;align-self:stretch;display:flex;align-items:center;padding:0 clamp(18px,2vw,30px) 0 max(26px,calc((100% - 1128px) / 2)); font-size:.72rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-claro);border-right:1px solid rgba(247,242,233,.12)} .cinta-ventana{flex:1;min-width:0;overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)} .cinta-pista{display:flex;width:max-content} .cinta-fila{--hueco:clamp(42px,4.8vw,76px);list-style:none;display:flex;align-items:center;gap:var(--hueco);margin:0;padding:18px var(--hueco) 18px 0} .cinta-fila li{flex:none;display:flex} .cinta-fila img{display:block;height:var(--h);width:auto;opacity:.74;transition:opacity .3s,transform .3s} .cinta-fila li:hover img{opacity:1;transform:translateY(-2px)} @media(prefers-reduced-motion:no-preference){ .cinta-pista{animation:cinta 48s linear infinite} .cinta:hover .cinta-pista{animation-play-state:paused} } @keyframes cinta{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.cinta-ventana{overflow-x:auto}.cinta-fila[aria-hidden]{display:none}} .hero2{padding-bottom:0} @media(min-width:961px){ .hero2{flex-direction:column;align-items:stretch;padding-bottom:0} .hero2>.wrap{margin-block:auto} } @media(max-width:960px){ .cinta{margin-top:40px} .cinta-tit{padding:0 14px 0 16px;font-size:.64rem;letter-spacing:.12em;max-width:6.4em;line-height:1.3} .cinta-fila{--hueco:36px;padding-block:14px} .cinta-fila img{height:calc(var(--h) * .8)} } /* ───── MARCAS DE LA TIENDA · índice de estilos + vitrina · 31 oct 2026 ───── A la izquierda, cuatro filas (estilo, marca y para qué); a la derecha, la foto grande de la marca con otra pequeña encima. La fila elegida enseña su foto; sola pasa a la siguiente con una barra de tiempo. */ .marcas-sec{position:relative;overflow:hidden;background:var(--arena)} .marcas-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"txt vit" "lista vit"; grid-template-rows:auto auto;align-content:center;column-gap:clamp(48px,7vw,120px)} .marcas-txt{grid-area:txt;align-self:end} .marcas-txt h2{font-family:var(--serif);font-weight:500;line-height:1.06;letter-spacing:-.012em;margin-top:14px; font-size:clamp(1.9rem,min(3.3vw,5.4vh),2.8rem)} .marcas-txt h2 em{display:block} .marcas-txt h2 em{font-style:italic;color:var(--cielo)} .marcas-txt>p:last-child{max-width:40ch;margin-top:14px;color:var(--gris)} .mr-lista{grid-area:lista;align-self:start;display:flex;flex-direction:column;margin-top:clamp(18px,3.2vh,32px);border-top:1px solid var(--linea)} .mr{position:relative;display:grid;grid-template-columns:2.4em minmax(0,1fr) auto;column-gap:12px;align-items:baseline;width:100%;text-align:left; padding:clamp(10px,1.7vh,16px) 8px clamp(10px,1.7vh,16px) 0;border:0;border-bottom:1px solid var(--linea); background:none;font:inherit;color:var(--tinta);cursor:pointer;-webkit-tap-highlight-color:transparent} .mr-n{grid-column:1;grid-row:1 / 3;font-family:var(--serif);font-size:.95rem;color:var(--oro);font-variant-numeric:tabular-nums} .mr-cat{grid-column:3;grid-row:1;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)} .mr-marca{grid-column:2;grid-row:1;font-family:var(--serif);font-weight:500;font-size:clamp(1.3rem,min(2vw,3.5vh),1.8rem);line-height:1.15; color:rgba(21,24,46,.4);transition:color .3s ease} .mr-tit{grid-column:2 / 4;grid-row:2;margin-top:2px;font-size:.9rem;color:var(--gris);opacity:.7;transition:opacity .3s} .mr:hover .mr-marca{color:rgba(21,24,46,.75)} .mr[aria-selected="true"] .mr-marca{color:var(--tinta)} .mr[aria-selected="true"] .mr-tit{opacity:1} .mr:focus-visible{outline:2px solid var(--oro);outline-offset:3px;border-radius:4px} .mr-barra{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--oro);transform:scaleX(0);transform-origin:left; transition:transform .4s ease} .mr[aria-selected="true"] .mr-barra{transform:scaleX(1)} .marcas-grid.auto .mr[aria-selected="true"] .mr-barra{transition:none;animation:mrBarra var(--paso,5200ms) linear both} @keyframes mrBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* vitrina: la altura manda, para que la sección entera quepa en la pantalla */ .vitrina{grid-area:vit;align-self:center;position:relative;--vt-h:clamp(400px,calc(100svh - var(--cab) - var(--ritmo) * 2 - 24px),620px); height:var(--vt-h);aspect-ratio:.82;max-width:100%} .vt{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s} .vt.on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s} .vt-marco{position:absolute;inset:0;overflow:hidden;border-radius:22px;background:var(--blanco);box-shadow:var(--sombra)} .vt-foto{display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.07);transition:transform 6s cubic-bezier(.2,.6,.3,1)} .vt.on .vt-foto{transform:scale(1)} .vt-mini{position:absolute;z-index:2;left:-12%;bottom:8%;width:42%;padding:6px;border-radius:12px;background:var(--blanco); box-shadow:0 26px 44px -24px rgba(21,24,46,.6),0 2px 8px rgba(21,24,46,.1); opacity:0;transform:translateY(22px) rotate(-5deg);transition:opacity .5s ease .2s,transform .8s cubic-bezier(.2,.9,.3,1.1) .2s} .vt-mini img{display:block;width:100%;height:auto;border-radius:7px} .vt.on .vt-mini{opacity:1;transform:rotate(-5deg)} #vt-1 .vt-mini{bottom:auto;top:9%;transform:translateY(-22px) rotate(4deg)} /* abajo está el logo de Visibilia */ #vt-1.on .vt-mini{transform:rotate(4deg)} /* deporte: las gafas limpias sobre azul noche, con su enlace a la oferta */ .vt--noche .vt-marco{background:radial-gradient(70% 55% at 50% 40%,#2B3466,#15182E 78%)} .vt--noche .vt-foto{object-fit:contain;padding:8% 5% 27%;filter:drop-shadow(0 22px 24px rgba(0,0,0,.45))} .vt--noche .vt-mini{background:#1E2448;padding:10px} .vt-enlace{position:absolute;z-index:3;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:8px; padding:10px 16px;border-radius:100px;background:var(--papel);color:var(--tinta);font-size:.86rem;font-weight:600;transition:var(--t)} .vt-enlace svg{width:16px;height:16px} .vt-enlace:hover{background:var(--oro-claro)} @media(max-width:960px){ .marcas-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"txt" "vit" "lista";row-gap:0} .vitrina{height:auto;width:100%;aspect-ratio:4/4.5;margin-top:28px;justify-self:center;max-width:460px} .vt-mini{left:-3%;width:40%} .mr-lista{margin-top:30px} .mr-marca{font-size:1.35rem} } @media(max-width:560px){ .vt-mini{left:3%;width:42%;padding:4px} .vt-enlace{right:12px;bottom:12px;padding:9px 14px;font-size:.8rem} } @media(prefers-reduced-motion:reduce){ .vt,.vt-foto,.vt-mini,.mr-marca,.mr-barra{transition:none} .vt-foto,.vt.on .vt-foto{transform:none} } /* ───── ajustes tras revisar la web entera · 31 oct 2026 ───── */ /* carrusel de deportivas: en tarjeta estrecha (pantallas bajas) la flecha se salía de la tarjeta; ahí el contador se quita (ya lo dicen las miniaturas) y las flechas son algo más pequeñas */ .prod2 .esc-escena{container-type:inline-size} @container (max-width:400px){ .esc-cuenta{display:none} .esc-pie{gap:12px} .esc-mandos{gap:8px} .esc-fl{width:40px;height:40px} } /* cierre: el botón de llamar era azul noche sobre azul noche */ .cierre .btn--main{background:var(--papel);color:var(--tinta)} .cierre .btn--main:hover{background:var(--blanco);box-shadow:0 16px 30px -14px rgba(0,0,0,.5)} @media(max-width:560px){.cierre__cta .btn{flex:1 1 100%}} /* pie: el logo en su cartela clara y los datos de contacto legibles */ footer .f-logo{background:var(--papel);border-radius:12px;padding:6px 8px;box-sizing:content-box} footer .fdato a{color:var(--cielo-claro)} footer .fdato a:hover{color:var(--papel)} /* cabecera al bajar: opaca, sin que se trasluzca lo de debajo */ header.scr{background:var(--papel)} /* tarjetas de casos en las secciones oscuras: opacas, para que el número de fondo no se vea a través */ .prod2--oscura .caso{background:#1E2344} /* móvil: el número grande de fondo se cortaba arriba y se pisaba con el título */ @media(max-width:960px){ .p2-num{display:none} .cinta-tit{max-width:none;width:min-content} } /* Inicio a 1024: el texto del clip-on se cortaba por abajo */ @media(min-width:961px) and (max-width:1180px){ .nec.nec--clip-on .nec-vis{width:78px;margin-top:4px} } /* SEO local · 3 nov 2026: «Óptica y optometría en Alpedrete» entra en el h1 sin cambiar el aspecto del hero */ .hero2 h1{margin-top:0} .hero2 h1 .eyebrow{display:flex;width:max-content;max-width:100%;font-family:var(--sans);font-size:.78rem;font-weight:600; line-height:1.6;letter-spacing:.14em;margin:0 0 27px} @media(prefers-reduced-motion:no-preference){ .hero2__txt>:nth-child(2){animation-delay:.22s}.hero2__txt>:nth-child(3){animation-delay:.34s} .hero2__txt>:nth-child(4){animation-delay:.46s} } .res-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px} /* ───── móvil · Servicios: botones de acción más claros (4 nov 2026) ───── «Me pasa esto» pasa de pastilla pequeña a botón de WhatsApp alargado, a todo el ancho de la tarjeta. «¿Tu caso es otro?» deja de ser un enlace subrayado y va como botón al final de cada producto. En ordenador no cambia nada. */ @media(max-width:960px){ .prod2 .caso-wa{align-self:stretch;justify-content:center;gap:10px;min-height:50px;margin-top:10px;padding:0 18px; border-radius:100px;background:#1FA855;color:#fff;font-size:1rem;font-weight:700;letter-spacing:.01em; box-shadow:0 10px 22px -14px rgba(19,122,61,.9)} .prod2 .caso-wa svg{width:24px;height:24px;padding:4px;background:#fff;fill:#1FA855} .prod2 .caso-wa::after{content:"";width:8px;height:8px;margin-left:2px;border:solid currentColor;border-width:2px 2px 0 0;transform:rotate(45deg)} .prod2 .caso-wa:hover,.prod2 .caso-wa:active{background:#178A45;color:#fff} /* «¿Tu caso es otro?» al final de cada producto, como botón */ .prod2:has(.casos) .wrap{display:flex;flex-direction:column} .prod2:has(.casos) :is(.p2-grid,.p2-txt){display:contents} .prod2:has(.casos):not(:has(.casos.niveles)) .p2-vis{order:1} .prod2:has(.casos):not(:has(.casos.niveles)) .p2-eti{order:2;margin-top:30px} .prod2:has(.casos):not(:has(.casos.niveles)) .p2-txt h2{order:3} .prod2:has(.casos):not(:has(.casos.niveles)) .p2-entrada{order:4} .prod2:has(.casos):not(:has(.casos.niveles)) .casos-t{order:5} .prod2:has(.casos):not(:has(.casos.niveles)) .casos{order:6} .prod2:has(.casos) .p2-mas{order:9;align-self:stretch;justify-content:center;min-height:50px;margin-top:14px;padding:0 18px; border:1.5px solid rgba(21,24,46,.28);border-radius:100px;font-size:.94rem;text-align:center} .prod2--oscura:has(.casos) .p2-mas{border-color:rgba(247,242,233,.4)} .prod2:has(.casos) .p2-mas:active{border-color:var(--oro)} /* progresivas: los tres botones de estrellas, con dedo y no con lápiz */ .pn{min-height:40px;align-items:center} } /* «¿Tu caso es otro?»: en móvil, texto corto para que quepa en una línea */ .p2-mas-m{display:none} @media(max-width:960px){.p2-mas-d{display:none}.p2-mas-m{display:inline}} /* ───── móvil · Servicios directo: todo a la vista sin tocar nada (4 nov 2026) ───── Los ocho casos de arriba en rejilla (sin deslizar), las tres opciones de cada producto enteras justo debajo del dibujo (sin pestañas) y los tres diseños VIMAX con su frase. En ordenador no cambia. */ .pn-d{display:none} @media(max-width:960px){ /* ¿Cuál es tu caso?: los ocho a la vez */ .chips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible;margin:0;padding:0} .chip{min-height:0;padding:12px 12px 11px;gap:5px 8px} .chip-n{display:none} .chip-i{width:22px;height:22px} .chip b{font-size:.95rem;line-height:1.22} .chip small{font-size:.74rem} .chip>svg:last-child{width:16px;height:16px} /* monofocales, trabajo, antirreflejantes y clip-on: título → dibujo → las tres opciones enteras */ .prod2:has(.casos.niveles) .p2-eti{order:1} .prod2:has(.casos.niveles) .p2-txt h2{order:2;margin-bottom:10px} .prod2:has(.casos.niveles) .p2-entrada{order:3} .prod2:has(.casos.niveles) .p2-vis{order:4;margin-top:24px} .prod2:has(.casos.niveles) .casos-t{display:none} .prod2:has(.casos.niveles) .casos{order:5;margin-top:14px} .prod2 .casos{gap:8px} .prod2 .caso{padding:15px 16px 14px} .niveles .caso:hover{transform:none} /* progresivas: los tres diseños, cada uno con sus estrellas y su frase */ .prog-niv-b{flex-direction:column;gap:6px} .pn{flex:none;font:inherit;justify-content:flex-start;align-items:flex-start;gap:12px;padding:10px 12px;text-align:left} .pn .est{flex:none;margin-top:3px} .pn-d{display:block;font-family:var(--sans);font-size:.84rem;line-height:1.38;color:var(--tinta)} .prog-niv-d{display:none} }