/* ===== CORRECCIÓN CRÍTICA ===== Bricks fija html{font-size:62.5%} (1rem = 10px). El sistema de diseño está calculado sobre 16px, así que sin esto TODO se renderiza al 62.5%. */ html{font-size:100%!important;} /* Masterpiece Lenses — sistema de diseño Generado del prototipo aprobado. Editar aquí, no en estilos sueltos. */ /* =========================================================== MASTERPIECE LENSES — HOME v3 · fotográfica Fotografía real con gradación de marca unificada. Scrim de legibilidad = función, no adorno (verificado por medición). =========================================================== */ :root{ --brand:#288CDC; --action:#1B65A4; --on-action:#FFFFFF; --navy:#002864; --deep:#04122B; --slate:#283C46; --ink:#141C24; --tint:#EDF3FA; --hair:#E2E8EE; --paper:#FFFFFF; --ok:#1F7A4D; --f:var(--mp-texto,'Outfit'),-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; --w-body:450; --w-mid:600; --w-dis:700; --w-max:var(--mp-w-max,800); --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:112px;--s10:150px; --r:6px; --tap:50px; --max:1280px; } /* El sitio es CLARO siempre. El tema oscuro NO sigue al sistema operativo: solo se aplica si alguien pone data-theme="dark" en a propósito. */ :root[data-theme="light"]{--paper:#FFFFFF;--ink:#16202B;--slate:#303C48;--tint:#EDF3FA;--hair:#E2E8EE; --navy:#002864;--action:#1B65A4;--brand:#288CDC;--on-action:#FFFFFF;} :root[data-theme="dark"]{--paper:#0B1119;--ink:#E8EEF5;--slate:#A5B1BF;--tint:#101A25;--hair:#1C2833; --navy:#9CC2EF;--action:#68A8E8;--brand:#4E96DE;--on-action:#0B1119;} *{box-sizing:border-box;} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f); font-size:17px;line-height:1.65;font-weight:var(--w-body);} img{max-width:100%;display:block;} .w{max-width:var(--max);margin:0 auto;padding:0 var(--s5);} @media(min-width:900px){.w{padding:0 var(--s7);}} section{padding:var(--s8) 0;} @media(min-width:900px){section{padding:var(--s9) 0;}} .tint{background:var(--tint);} h1,h2,h3,h4{margin:0;font-weight:var(--w-dis);letter-spacing:-.032em;line-height:1.02;text-wrap:balance;} h1{font-size:clamp(2.75rem,7vw,5.25rem);font-weight:var(--w-max);} h2{font-size:clamp(2rem,4.4vw,3.25rem);letter-spacing:-.03em;line-height:1.05;} h3{font-size:1.375rem;font-weight:var(--w-mid);letter-spacing:-.02em;line-height:1.25;} p{margin:0;} .lede{font-size:clamp(1.0625rem,1.6vw,1.3125rem);color:var(--slate);line-height:1.55;max-width:54ch;} .eyebrow{font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.17em;text-transform:uppercase;color:var(--action);} .sm{font-size:1rem;color:var(--slate);} .xs{font-size:0.875rem;color:var(--slate);} .tnum{font-variant-numeric:tabular-nums;} a{color:var(--action);text-underline-offset:3px;} strong,b{font-weight:var(--w-mid);} .btn{font:inherit;font-size:1rem;font-weight:var(--w-mid);min-height:var(--tap);padding:0 var(--s5); border:1px solid transparent;border-radius:var(--r);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;gap:var(--s2);text-decoration:none;} .btn:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .b-pri{background:var(--action);color:var(--on-action);} .b-pri:hover{background:var(--navy);} .b-sec{background:transparent;color:var(--action);border-color:var(--hair);} .b-sec:hover{border-color:var(--action);} .b-wa{background:var(--ok);color:#fff;} .b-full{width:100%;} /* Cintillo superior. Registro medido en Ben & Frank: 32px de alto, 12px, peso 400, tracking .025em, SIN versalitas, fondo casi negro. La versión anterior (13px/600/uppercase/.09em sobre azul saturado) gritaba. */ .topbar{background:var(--ink);color:#fff; height:32px;display:flex;align-items:center;justify-content:center;padding:0 var(--s5); font-size:0.8125rem;line-height:1rem;letter-spacing:.025em;font-weight:var(--w-body);} /* Cada mensaje lleva su propio icono en vez de puntos separadores: el icono dice de qué habla la frase antes de leerla. Todos al mismo tono — nada de un mensaje más tenue que otro. */ .topbar .tb-i{display:inline-flex;align-items:center;gap:7px;margin:0 var(--s5); white-space:nowrap;color:#fff;} .topbar .tb-i svg{width:15px;height:15px;flex:none;} @media(max-width:820px){.topbar{font-size:0.75rem;padding:0 var(--s4);} .topbar .tb-i{margin:0 var(--s4);} .topbar .tb-extra{display:none;}} /* nav de UNA sola línea: logotipo · menú · utilidades */ .nav{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--hair);} .nav-top{display:flex;align-items:center;gap:var(--s5);min-height:76px;} .logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;margin:0;} .nl{display:none;gap:var(--s6);margin:0 auto;} @media(min-width:1080px){.nl{display:flex;}} .nl a{color:var(--ink);text-decoration:none;font-size:1rem;font-weight:var(--w-mid);white-space:nowrap;} .nl a:hover{color:var(--action);} .nl a.on{color:var(--action);font-weight:var(--w-dis);} .nav-row2{display:none;} .ntel{display:none;} /* ---------- HERO 3:1 · campo plano a la izquierda, primer plano a la derecha ---------- */ .hero{position:relative;background:var(--paper);border-bottom:1px solid var(--hair);} .hero-pic{display:block;} .hero-pic img{width:100%;height:auto;display:block;} .hero-veil{display:none;} @media(min-width:1000px){ /* la imagen 3:1 define la altura; el texto se superpone sobre el campo plano */ .hero{position:relative;} .hero-pic img{width:100%;height:auto;} .hero .w{position:absolute;inset:0;z-index:2;display:grid;grid-template-columns:1fr 1fr; align-items:center;} .hero-copy{grid-column:1;padding-block:0;padding-right:var(--s7);} .hero-copy>*{max-width:640px;} .hero-copy .hcta{max-width:none;} .hero h1{font-size:clamp(2.5rem,4.6vw,4.25rem);max-width:min(9ch,470px);letter-spacing:-.035em;} .hero .lede{max-width:38ch;font-size:clamp(1rem,1.2vw,1.1875rem);color:#C9D9EC !important;} .hpts{margin-top:var(--s5);gap:var(--s2);} .hpts li{font-size:0.9375rem;} .hcta{margin-top:var(--s5);} } .hero-copy{padding-block:var(--s8);} .hero h1{margin:var(--s4) 0 var(--s5);color:#fff;} .hero h1 em{font-style:normal;color:#7FB6EE;} .hero .eyebrow{color:#8FC0F0;} .hero .lede{max-width:38ch;font-size:clamp(1rem,1.2vw,1.1875rem);color:#C9D9EC !important;} .hpts{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s3);max-width:40ch;} .hpts li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start; font-size:1rem;color:#C9D9EC;} .hpts b{color:#fff;font-weight:var(--w-mid);} .hpts svg{margin-top:4px;} .hcta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);} .hero .b-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);} .hero .b-sec:hover{border-color:#fff;} .hero{background:#0C1628;} /* utilidades de la barra */ .nav-tools{display:flex;align-items:center;gap:0;} /* Proporción medida en Ben & Frank: icono 21px sobre menú de 16px (1.31) y 20px de aire entre iconos. Aquí el menú es de 15px -> icono de 20px, caja de 40px y gap 0, que deja los mismos 20px de aire. */ .tool{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; color:var(--slate);text-decoration:none;border-radius:var(--r);background:none;border:0;cursor:pointer;position:relative;} .tool svg{width:24px;height:24px;} @media(min-width:900px){.tool{width:44px;height:44px;}} @media(max-width:760px){.tool[data-opt]{display:none;}} .tool:hover{color:var(--navy);} .tool:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .tool .dot{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px; background:var(--action);color:#fff;font-size:0.6875rem;font-weight:var(--w-mid); border-radius:999px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;} /* sección de agenda: editorial + formulario */ .agenda{background:var(--navy);color:#fff;padding-block:var(--s9);} .agenda-grid{display:grid;gap:var(--s7);align-items:center;} @media(min-width:980px){.agenda-grid{grid-template-columns:1fr 448px;gap:var(--s9);}} .agenda-grid>*{min-width:0;} .agenda .eyebrow{color:#8FC0F0;} .agenda h2{color:#fff;margin:var(--s4) 0 var(--s5);} .agenda .lede{color:#C9D9EC;max-width:44ch;} .agenda-pts{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s3);max-width:46ch;} .agenda-pts li{position:relative;padding-left:var(--s5);font-size:1rem;color:#C9D9EC;} .agenda-pts li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:1px;background:#8FC0F0;} .agenda-pts b{color:#fff;font-weight:var(--w-mid);} .agenda-sig{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s7); padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.18);} .sig-av{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center; border:1px solid rgba(255,255,255,.3);border-radius:999px;color:#8FC0F0;} .agenda-sig b{display:block;color:#fff;font-size:1rem;font-weight:var(--w-mid);} .agenda-sig span span{display:block;font-size:0.875rem;color:#A9C1DC;} .agenda .book{color:var(--ink);} .agenda .book h3{color:var(--ink);} /* tarjeta de agenda */ .book{background:var(--paper);border:1px solid var(--hair);} .book .bh{padding:var(--s5) var(--s5) var(--s4);border-bottom:1px solid var(--hair);} .book .bb{padding:var(--s5);display:grid;gap:var(--s4);} .f{display:grid;gap:var(--s2);} .f label{font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);} .f input,.f select{font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--paper);min-height:var(--tap); padding:0 var(--s3);border:1px solid var(--hair);border-radius:var(--r);width:100%;} .f input:focus,.f select:focus{outline:2px solid var(--action);outline-offset:-1px;border-color:var(--action);} .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);} .slot{font:inherit;font-size:0.9375rem;min-height:42px;background:var(--paper);border:1px solid var(--hair); border-radius:var(--r);color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;} .slot:hover{border-color:var(--action);} .slot[aria-pressed="true"]{border-color:var(--action);border-width:2px;color:var(--action);font-weight:var(--w-mid);} .cons{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);font-size:0.875rem;color:var(--slate);line-height:1.45;} .cons input{width:17px;height:17px;margin:2px 0 0;accent-color:var(--action);} .alt{display:flex;align-items:center;gap:var(--s3);} .alt::before,.alt::after{content:"";flex:1;height:1px;background:var(--hair);} .alt span{font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);} /* franja de marcas */ .brands{padding-block:var(--s8);border-bottom:1px solid var(--hair);} .brands .lab{text-align:center;font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.16em; text-transform:uppercase;color:var(--slate);margin-bottom:var(--s6);} .brandrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:var(--s6) var(--s8);} .brandrow img{height:auto;width:auto;max-height:26px;max-width:120px;object-fit:contain;opacity:.55;} @media(min-width:900px){.brandrow img{max-height:30px;max-width:148px;}.brandrow{gap:var(--s6) var(--s8);}} .brandrow img:hover{opacity:1;} /* franja de cifras */ .stats{border-bottom:1px solid var(--hair);padding:var(--s6) 0;} .stats .w{display:grid;gap:var(--s5);} @media(min-width:760px){.stats .w{grid-template-columns:repeat(4,1fr);gap:var(--s6);}} .stat .k{font-size:clamp(1.75rem,3vw,2.375rem);font-weight:var(--w-max);letter-spacing:-.035em; font-variant-numeric:tabular-nums;line-height:1;color:var(--navy);} .stat .l{font-size:0.9375rem;color:var(--slate);margin-top:var(--s2);} /* bloque editorial imagen+texto */ .ed{display:grid;gap:var(--s7);align-items:center;} @media(min-width:960px){.ed{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s9);} .ed.rev>.edi{order:2;}} .ed>*{min-width:0;} .edi img{width:100%;height:auto;} figure{margin:0;} figcaption{font-size:0.875rem;color:var(--slate);margin-top:var(--s3);} /* proceso */ .steps{display:grid;gap:var(--s7);margin-top:var(--s8);} @media(min-width:880px){.steps{grid-template-columns:repeat(3,1fr);}} .st{border-top:1px solid var(--ink);padding-top:var(--s4);} .st .n{display:block;font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.14em;color:var(--action); font-variant-numeric:tabular-nums;margin-bottom:var(--s4);} .st h3{margin-bottom:var(--s3);} .st p{font-size:1rem;color:var(--slate);} /* comparativa */ .cmp{margin-top:var(--s7);border:1px solid var(--hair);overflow-x:auto;background:var(--paper);} table.c{border-collapse:collapse;width:100%;min-width:620px;font-size:1rem;} table.c th,table.c td{padding:var(--s4) var(--s5);text-align:left;border-bottom:1px solid var(--hair);} table.c tbody th,table.c thead th:first-child{position:sticky;left:0;background:var(--paper);z-index:1;font-weight:var(--w-body);color:var(--ink);} table.c thead th{font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate); font-weight:var(--w-mid);background:var(--tint);} table.c thead th:first-child{background:var(--tint);} table.c thead th.me{color:var(--action);} table.c td{color:var(--slate);} table.c td.me{color:var(--ink);font-weight:var(--w-mid);background:color-mix(in srgb,var(--brand) 6%,transparent);} table.c tbody tr:last-child th,table.c tbody tr:last-child td{border-bottom:0;} .yes{display:inline-flex;align-items:center;gap:var(--s2);} /* receta */ .rxcard{border:1px solid var(--hair);background:var(--paper);} .rxcard .rh{padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair);display:flex; justify-content:space-between;align-items:center;gap:var(--s4);} .rxwrap{overflow-x:auto;} .rxt{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;} .rxt th,.rxt td{padding:var(--s3) var(--s4);text-align:center;border-bottom:1px solid var(--hair);font-size:1rem;} .rxt thead th{font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:var(--w-mid);} .rxt tbody th{text-align:left;font-weight:var(--w-mid);} .rxt tbody tr:last-child th,.rxt tbody tr:last-child td{border-bottom:0;} .tagp{display:inline-flex;align-items:center;gap:6px;font-size:0.8125rem;font-weight:var(--w-mid); padding:3px 10px;border:1px solid;border-radius:999px;color:var(--ok); border-color:color-mix(in srgb,var(--ok) 40%,transparent);} .tagp::before{content:"";width:6px;height:6px;border-radius:999px;background:currentColor;} /* colecciones */ .cols{display:grid;gap:var(--s4);margin-top:var(--s7);grid-template-columns:repeat(2,1fr);} @media(min-width:720px){.cols{grid-template-columns:repeat(3,1fr);}} @media(min-width:1040px){.cols{grid-template-columns:repeat(5,1fr);}} .col{border:1px solid var(--hair);text-decoration:none;color:inherit;background:var(--paper);} .col:hover{border-color:var(--action);} .col .ph{aspect-ratio:5/4;background:var(--tint);display:flex;align-items:center;justify-content:center; border-bottom:1px solid var(--hair);} .col .cp{padding:var(--s4);} .col .nm{font-size:1rem;font-weight:var(--w-mid);} .col .mt{font-size:0.875rem;color:var(--slate);margin-top:2px;} /* precios */ .tiers{display:grid;gap:var(--s5);margin-top:var(--s7);} @media(min-width:860px){.tiers{grid-template-columns:repeat(3,1fr);}} .tier{border:1px solid var(--hair);padding:var(--s6) var(--s5);display:flex;flex-direction:column; gap:var(--s3);background:var(--paper);} .tier.on{border-color:var(--action);border-width:2px;} .tier .tg{font-size:0.8125rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:var(--w-mid);} .tier .pr{font-size:2.1875rem;font-weight:var(--w-max);letter-spacing:-.035em;font-variant-numeric:tabular-nums;line-height:1;} .tier .pr small{font-size:0.9375rem;font-weight:var(--w-body);color:var(--slate);letter-spacing:0;} .tier p{font-size:1rem;color:var(--slate);} .tier ul{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:var(--s2);} .tier li{display:grid;grid-template-columns:auto 1fr;gap:var(--s2);font-size:0.9375rem;color:var(--slate);} .bdg{align-self:flex-start;font-size:0.75rem;font-weight:var(--w-mid);letter-spacing:.1em;text-transform:uppercase; color:var(--action);border:1px solid var(--action);border-radius:999px;padding:3px 10px;} /* testimonios con retrato */ .qs{display:grid;gap:var(--s6);margin-top:var(--s7);} @media(min-width:860px){.qs{grid-template-columns:repeat(3,1fr);gap:var(--s7);}} .q figure{display:grid;gap:var(--s4);} .q .por{aspect-ratio:1/1;overflow:hidden;background:var(--tint);} .q .por img{width:100%;height:100%;object-fit:cover;} .q blockquote{margin:0;font-size:1.125rem;line-height:1.5;letter-spacing:-.012em;} .q .who{font-size:0.875rem;color:var(--slate);} .q .who b{display:block;color:var(--ink);font-size:1rem;font-weight:var(--w-mid);} /* cobertura */ .zones{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6);} .zone{font-size:0.9375rem;border:1px solid var(--hair);padding:7px 13px;color:var(--slate);background:var(--paper);} .zone:hover{border-color:var(--brand);color:var(--ink);} /* especialista */ .pro dl{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7);margin:var(--s5) 0 0;} .pro dt{font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:var(--w-mid);} .pro dd{margin:2px 0 0;font-weight:var(--w-mid);font-variant-numeric:tabular-nums;} /* El bloque .faq anterior se retiró: dibujaba una flecha con bordes que se sumaba al icono nuevo y producía el doble trazo. */ /* cierre fotográfico */ .cta{position:relative;background:var(--deep);overflow:hidden;} .cta img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;} .cta .scrim2{position:absolute;inset:0;background:rgba(6,17,38,.88);} .cta .w{position:relative;z-index:2;} .cta h2{color:#fff;} .cta .lede{color:#CBD9EA;} .cta .row{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);} .cta .b-pri{background:#fff;color:var(--deep);} .cta .b-pri:hover{background:#CBD9EA;} .cta .b-sec{color:#fff;border-color:rgba(255,255,255,.4);} /* pie */ footer{padding:var(--s8) 0 var(--s7);border-top:1px solid var(--hair);} .fg{display:grid;gap:var(--s7);} @media(min-width:820px){.fg{grid-template-columns:2.2fr 1fr 1fr 1fr;}} .fg h4{font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate); margin-bottom:var(--s4);font-weight:var(--w-mid);} .fg ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);} .fg a{color:var(--slate);text-decoration:none;font-size:1rem;} .fg a:hover{color:var(--ink);} .legal{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--hair);display:flex; flex-wrap:wrap;gap:var(--s3) var(--s6);justify-content:space-between;color:var(--slate);font-size:0.875rem;} .dock{position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--paper);border-top:1px solid var(--hair); padding:var(--s3) var(--s4);display:flex;gap:var(--s3);} .dock .btn{flex:1;} @media(min-width:1080px){.dock{display:none;}} body{padding-bottom:80px;} @media(min-width:1080px){body{padding-bottom:0;}} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}} /* ===== Páginas interiores ===== */ .page[hidden]{display:none;} .phead{padding:var(--s8) 0 var(--s7);border-bottom:1px solid var(--hair);} @media(min-width:900px){.phead{padding:var(--s9) 0 var(--s8);}} .phead h1{font-size:clamp(2.5rem,6vw,4.5rem);} .nl a.on{color:var(--ink);font-weight:var(--w-mid);} /* línea de tiempo */ .tl{list-style:none;margin:0;padding:0;display:grid;gap:var(--s8);} .tl>li{display:grid;gap:var(--s4);border-top:1px solid var(--ink);padding-top:var(--s5);} @media(min-width:860px){.tl>li{grid-template-columns:210px minmax(0,1fr);gap:var(--s7);}} .tlm{display:flex;flex-direction:column;gap:var(--s2);} .tlk{font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.14em;text-transform:uppercase;color:var(--action);} .tlt{font-size:1.625rem;font-weight:var(--w-max);letter-spacing:-.03em;color:var(--navy);line-height:1;} .tlb h3{margin-bottom:var(--s3);} .tlb>p{color:var(--slate);font-size:1rem;} /* listas con palomita */ ul.chk{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:var(--s2);} ul.chk li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);font-size:1rem;color:var(--slate);align-items:start;} ul.chk li::before{content:"";width:15px;height:9px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok); transform:rotate(-45deg);margin-top:6px;} /* tarjetas neutras */ .cardx{border:1px solid var(--hair);background:var(--paper);padding:var(--s6) var(--s5);} .cardx h3{margin-bottom:var(--s2);} .tw2{display:grid;gap:var(--s5);margin-top:var(--s7);} @media(min-width:800px){.tw2{grid-template-columns:repeat(2,1fr);gap:var(--s6);}} .tw3{display:grid;gap:var(--s5);} @media(min-width:820px){.tw3{grid-template-columns:repeat(3,1fr);}} /* filtros de catálogo */ .filters{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;padding-top:var(--s7);} .chip{font:inherit;font-size:0.9375rem;padding:9px 16px;border:1px solid var(--hair);background:var(--paper); font-weight:var(--w-mid); color:var(--slate);border-radius:var(--r);cursor:pointer;min-height:40px;} .chip:hover{border-color:var(--action);color:var(--ink);} /* El activo NO puede cambiar de tamaño: subir el borde a 2px y engordar el texto ensanchaba el botón y empujaba a los demás. El grosor se simula con box-shadow (no ocupa caja) y el peso se reserva de antemano. */ .chip.is-on{border-color:var(--action);color:var(--action); box-shadow:inset 0 0 0 1px var(--action);} .chip:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .fsep{width:1px;height:26px;background:var(--hair);margin:0 var(--s2);} /* rejilla de producto */ .grid{display:grid;gap:var(--s4);margin-top:var(--s6);grid-template-columns:repeat(2,1fr);} @media(min-width:760px){.grid{grid-template-columns:repeat(3,1fr);gap:var(--s5);}} .pc{border:1px solid var(--hair);text-decoration:none;color:inherit;background:var(--paper);display:flex;flex-direction:column;} .pc:hover{border-color:var(--action);} .pc:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .pci{aspect-ratio:5/4;overflow:hidden;background:var(--tint);border-bottom:1px solid var(--hair);} .pci img{width:100%;height:100%;object-fit:cover;} .pcb{padding:var(--s4);display:grid;gap:2px;} .pcm{font-size:0.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);font-weight:var(--w-mid);} .pcn{font-size:1rem;font-weight:var(--w-mid);} .pcp{font-size:1.125rem;font-weight:var(--w-max);letter-spacing:-.02em;margin-top:var(--s2);} .pcp small{font-size:0.8125rem;font-weight:var(--w-body);color:var(--slate);letter-spacing:0;} .note{border:1px solid var(--hair);background:var(--tint);padding:var(--s6) var(--s5);display:grid;gap:var(--s5);align-items:center;} @media(min-width:760px){.note{grid-template-columns:1fr auto;gap:var(--s7);}} .note p{font-size:1rem;color:var(--slate);} /* ficha */ .bc{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:0.875rem;color:var(--slate);margin-bottom:var(--s6);} .bc a{color:var(--slate);text-decoration:none;} .bc a:hover{color:var(--action);} .pdp{display:grid;gap:var(--s7);} @media(min-width:960px){.pdp{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--s9);align-items:start;}} .pdp>*{min-width:0;} .pdpmain{border:1px solid var(--hair);background:var(--tint);aspect-ratio:5/4;overflow:hidden;} .pdpmain img{width:100%;height:100%;object-fit:cover;} .thumbs{display:flex;gap:var(--s3);margin-top:var(--s3);} .th{width:84px;height:68px;padding:0;border:1px solid var(--hair);background:var(--tint);cursor:pointer;overflow:hidden;} .th img{width:100%;height:100%;object-fit:cover;} .th.is-on{border-color:var(--action);border-width:2px;} .th:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .pdpt{font-size:clamp(2rem,4vw,2.75rem);margin:var(--s2) 0 var(--s3);} .pdpp{font-size:2.1875rem;font-weight:var(--w-max);letter-spacing:-.035em;margin:var(--s5) 0 var(--s1);} .pdpp small{font-size:0.9375rem;font-weight:var(--w-body);color:var(--slate);letter-spacing:0;} .opt{margin-top:var(--s6);} .optl{display:block;font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.1em;text-transform:uppercase; color:var(--slate);margin-bottom:var(--s3);} .swr{display:flex;gap:var(--s3);} .sw{width:38px;height:38px;border-radius:999px;border:1px solid var(--hair);background:var(--c);cursor:pointer;padding:0;} .sw.is-on{outline:2px solid var(--action);outline-offset:2px;} .sw:focus-visible{outline:2px solid var(--action);outline-offset:3px;} .micas{display:grid;gap:var(--s2);} .mica{font:inherit;display:flex;justify-content:space-between;align-items:center;gap:var(--s4); padding:var(--s3) var(--s4);border:1px solid var(--hair);background:var(--paper);color:var(--ink); cursor:pointer;min-height:52px;text-align:left;} .mica:hover{border-color:var(--action);} .mica.is-on{border-color:var(--action);border-width:2px;} .mica:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .mn{font-size:1rem;font-weight:var(--w-mid);} .mp{font-size:0.9375rem;color:var(--slate);} .specs{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s5);margin:var(--s7) 0 0; border-top:1px solid var(--hair);padding-top:var(--s5);} @media(min-width:560px){.specs{grid-template-columns:repeat(3,1fr);}} .specs dt{font-size:0.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--slate);font-weight:var(--w-mid);} .specs dd{margin:3px 0 0;font-size:1rem;font-weight:var(--w-mid);} /* cobertura */ .zsearch{display:grid;gap:var(--s3);padding-top:var(--s7);align-items:end;} @media(min-width:640px){.zsearch{grid-template-columns:1fr auto;}} .zsearch .f span{font-size:0.8125rem;font-weight:var(--w-mid);letter-spacing:.1em;text-transform:uppercase;color:var(--slate);} .zcols{display:grid;gap:var(--s7);margin-top:var(--s8);} @media(min-width:820px){.zcols{grid-template-columns:1.4fr 1fr;gap:var(--s9);}} .zlist{list-style:none;margin:var(--s5) 0 0;padding:0;display:grid;gap:0; grid-template-columns:repeat(auto-fill,minmax(180px,1fr));} .zlist li{font-size:1rem;color:var(--slate);padding:var(--s3) 0;border-bottom:1px solid var(--hair);} .tablewrap{overflow-x:auto;border:1px solid var(--hair);background:var(--paper);} table.hrs{border-collapse:collapse;width:100%;min-width:460px;font-size:1rem;} table.hrs th,table.hrs td{text-align:left;padding:var(--s4) var(--s5);border-bottom:1px solid var(--hair);} table.hrs thead th{font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--slate); font-weight:var(--w-mid);background:var(--tint);} table.hrs tbody th{font-weight:var(--w-mid);} table.hrs tbody tr:last-child th,table.hrs tbody tr:last-child td{border-bottom:0;} .tagp.tw{color:var(--warn,#8A6D1A);border-color:color-mix(in srgb,#8A6D1A 40%,transparent);} .tagp.tn{color:var(--slate);border-color:var(--hair);} /* contacto */ .cgrid{display:grid;gap:var(--s7);padding-top:var(--s7);} @media(min-width:960px){.cgrid{grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--s8);align-items:start;}} .cinfo{display:grid;gap:var(--s5);align-content:start;} .clist{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:0;} .clist li{display:flex;justify-content:space-between;gap:var(--s4);align-items:baseline; padding:var(--s3) 0;border-bottom:1px solid var(--hair);font-size:1rem;} .clist li:last-child{border-bottom:0;} .cl{font-size:0.875rem;color:var(--slate);} .clist a{text-decoration:none;font-weight:var(--w-mid);} /* logotipo real de marca */ .lockup{height:38px;width:auto;display:block;} @media(min-width:900px){.lockup{height:46px;}} .logo{gap:0;} footer .lockup{height:46px;} .nav .w{min-height:78px;} /* franja de confianza del pie */ .trustrow{border-top:1px solid var(--hair);margin-top:var(--s7);padding-top:var(--s6); display:grid;gap:var(--s5);align-items:center;} @media(min-width:820px){.trustrow{grid-template-columns:auto 1fr auto;gap:var(--s7);}} .pays{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);} .pay{height:30px;display:inline-flex;align-items:center;justify-content:center;padding:0 10px; border:1px solid var(--hair);border-radius:4px;background:var(--paper); font-size:0.75rem;font-weight:var(--w-max);letter-spacing:.02em;color:var(--slate);} .pay svg{display:block;} .seal{display:inline-flex;align-items:center;gap:var(--s3);border:1px solid var(--hair); border-radius:var(--r);padding:9px var(--s4);background:var(--paper);text-decoration:none;} .seal svg{flex:none;color:var(--ok);} .seal b{display:block;font-size:0.8125rem;font-weight:var(--w-mid);color:var(--ink);letter-spacing:.01em;} .seal span{display:block;font-size:0.75rem;color:var(--slate);} .trustnote{font-size:0.875rem;color:var(--slate);} /* ===== Puente con Bricks ===== Los contenedores de Bricks apilan en columna por defecto; aquí se restituye el comportamiento del sistema de diseño sin tocar el builder. */ .brxe-container.nav-top, .brxe-block.nav-top{display:flex;flex-direction:row;align-items:center;gap:var(--s5); max-width:var(--max);margin:0 auto;padding:0 var(--s5);} @media(min-width:900px){.brxe-container.nav-top,.brxe-block.nav-top{padding:0 var(--s7);}} .brxe-section.nav{padding:0;} .nav-top .lockup{margin:0;} .nav-top .nl{display:none;} @media(min-width:1080px){.nav-top .nl{display:flex;margin:0 auto;}} .nav-top .nav-tools{margin-left:auto;} @media(min-width:1080px){.nav-top .nav-tools{margin-left:0;}} .brxe-section > .brxe-container.w{max-width:var(--max);margin:0 auto;padding:0 var(--s5);} @media(min-width:900px){.brxe-section > .brxe-container.w{padding:0 var(--s7);}} footer.brxe-section{padding:var(--s8) 0 var(--s7);border-top:1px solid var(--hair);} .topbar{display:flex;} /* el div que Bricks interpone debe transmitir el centrado, no romperlo */ .topbar .brxe-text-basic{color:inherit;width:100%;display:flex;align-items:center; justify-content:center;flex-wrap:nowrap;} /* secciones de la home: el wrapper de Bricks no debe constreñir */ .brxe-section.mp-sec{display:block!important;width:100%!important;padding:0!important; align-items:initial!important;} .brxe-section.mp-sec > .brxe-text-basic{width:100%!important;max-width:none!important;} #brx-content{padding:0!important;} /* utilidades siempre visibles en móvil */ .brxe-container.nav-top .nav-tools{display:flex!important;flex:0 0 auto!important;margin-left:auto!important;} @media(min-width:1080px){.brxe-container.nav-top .nav-tools{margin-left:0!important;}} .brxe-container.nav-top .lockup{flex:0 0 auto;} /* la clase queda en el de Bricks; hay que acotar la interna */ .nav-top .brxe-image{flex:0 0 auto!important;width:auto!important;line-height:0;} .nav-top .brxe-image img{height:38px!important;width:auto!important;max-width:none!important;display:block;} @media(min-width:900px){.nav-top .brxe-image img{height:46px!important;}} footer .brxe-text-basic img.lockup{height:46px;width:auto;} /* =========================================================================== MASTERPIECE LENSES — SISTEMA CANÓNICO Derivado por medición del sistema de Ben & Frank (Tailwind: escala de 4px, quiebres 640/768/1024/1280/1536) y mejorado con escala FLUIDA: en vez de saltos por quiebre, cada nivel interpola con clamp() entre 390 y 1440px. Esto elimina los tamaños "miniatura" en anchos intermedios. Esta capa va al final: define la escala y gana por orden de cascada. =========================================================================== */ :root{ /* --- QUIEBRES (referencia; los @media los usan literales) --- */ --bp-sm:640px; --bp-md:768px; --bp-lg:1024px; --bp-xl:1280px; --bp-2xl:1536px; /* --- ESPACIADO: base 4px, igual que su sistema --- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px; --s9:112px; --s10:150px; /* --- TIPOGRAFÍA FLUIDA --- min = valor a 390px · max = valor a 1440px. La pendiente en vw se calcula para que crezca de forma continua, sin escalones. */ --t-xs:clamp(0.8125rem, 0.78rem + 0.14vw, 0.875rem); /* 12 → 13 */ --t-sm:clamp(0.9375rem, 0.91rem + 0.14vw, 1rem); /* 14 → 15 */ --t-base:clamp(1.0625rem, 1.02rem + 0.20vw, 1.125rem); /* 16 → 17 */ --t-md:clamp(1.125rem, 1.05rem + 0.31vw, 1.25rem); /* 17 → 19 */ --t-lg:clamp(1.1875rem, 1.08rem + 0.46vw, 1.375rem); /* 18 → 21 */ --t-xl: clamp(1.375rem, 1.20rem + 0.71vw, 1.75rem); /* 22 → 28 */ --t-2xl: clamp(1.75rem, 1.44rem + 1.28vw, 2.375rem); /* 28 → 38 */ --t-3xl: clamp(2.125rem, 1.62rem + 2.07vw, 3.25rem); /* 34 → 52 */ --t-4xl: clamp(2.5rem, 1.74rem + 3.12vw, 4.25rem); /* 40 → 68 */ /* --- PESOS: 4 niveles, como ellos --- */ --w-body:450; --w-mid:600; --w-dis:700; --w-max:var(--mp-w-max,800); /* --- INTERLINEADO por función --- */ --lh-tight:1.05; /* display */ --lh-snug:1.25; /* subtítulos */ --lh-normal:1.55; /* entrada */ --lh-loose:1.65; /* cuerpo */ /* --- TRACKING: negativo en display, positivo en versalitas --- */ --tr-display:-0.035em; --tr-head:-0.025em; --tr-body:0; --tr-label:0.14em; --max:1280px; --r:6px; --tap:48px; } /* --- APLICACIÓN DE LA ESCALA --- */ body{font-size:var(--t-base);line-height:var(--lh-loose);font-weight:var(--w-body);} h1{font-size:var(--t-4xl);font-weight:var(--w-max);letter-spacing:var(--tr-display);line-height:var(--lh-tight);} h2{font-size:var(--t-3xl);font-weight:var(--w-dis);letter-spacing:var(--tr-display);line-height:1.08;} h3{font-size:var(--t-lg);font-weight:var(--w-mid);letter-spacing:var(--tr-head);line-height:var(--lh-snug);} h4{font-size:var(--t-base);font-weight:var(--w-mid);letter-spacing:var(--tr-head);} .lede{font-size:var(--t-lg);line-height:var(--lh-normal);letter-spacing:-0.005em;} .sm{font-size:var(--t-sm);} .xs{font-size:var(--t-xs);} .eyebrow{font-size:var(--t-xs);font-weight:var(--w-mid);letter-spacing:var(--tr-label);text-transform:uppercase;} /* el hero es el único nivel por encima de h2 */ .hero h1{font-size:var(--t-4xl);} .phead h1{font-size:var(--t-4xl);} /* cifras y precios: mismo nivel display, con cifras tabulares */ .stat .k{font-size:var(--t-2xl);font-weight:var(--w-max);letter-spacing:var(--tr-display);line-height:1;} .tier .pr,.pdpp{font-size:var(--t-xl);font-weight:var(--w-max);letter-spacing:var(--tr-display);} .tlt{font-size:var(--t-xl);font-weight:var(--w-max);letter-spacing:var(--tr-display);} /* --- RITMO VERTICAL por quiebre (su sistema usa 4/8/12rem) --- */ section,.mp-sec > .brxe-text-basic > section{padding-block:var(--s8);} @media(min-width:1024px){section{padding-block:var(--s9);}} /* --- CONTENEDOR --- */ .w{max-width:var(--max);margin-inline:auto;padding-inline:var(--s5);} @media(min-width:768px){.w{padding-inline:var(--s6);}} @media(min-width:1024px){.w{padding-inline:var(--s7);}} /* --- BOTONES: altura de toque constante, radio contenido --- */ .btn{font-size:var(--t-sm);font-weight:var(--w-mid);min-height:var(--tap);border-radius:var(--r);} @media(max-width:640px){.btn{width:100%;}.hcta,.cta .row{flex-direction:column;align-items:stretch;}} /* ===== WooCommerce alineado al sistema ===== */ .woocommerce .site-main,.woocommerce-page .site-main{max-width:var(--max);margin-inline:auto;padding-inline:var(--s5)} @media(min-width:1024px){.woocommerce .site-main,.woocommerce-page .site-main{padding-inline:var(--s7)}} .woocommerce .page-title,.woocommerce-products-header__title{font-size:var(--t-3xl);font-weight:var(--w-dis); letter-spacing:var(--tr-display);color:var(--navy);text-align:left;margin-bottom:var(--s6)} .woocommerce-result-count,.woocommerce-ordering{font-size:var(--t-sm);color:var(--slate)} .woocommerce ul.products{display:grid;gap:var(--s5);grid-template-columns:repeat(2,1fr);margin:var(--s6) 0 0} @media(min-width:760px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)}} @media(min-width:1200px){.woocommerce ul.products{grid-template-columns:repeat(4,1fr)}} .woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important; border:1px solid var(--hair);background:var(--paper);display:flex;flex-direction:column;padding:0} .woocommerce ul.products li.product:hover{border-color:var(--action)} .woocommerce ul.products li.product a img{margin:0;border-bottom:1px solid var(--hair);aspect-ratio:5/4;object-fit:cover} .woocommerce ul.products li.product .woocommerce-loop-product__title{ font-size:var(--t-sm)!important;font-weight:var(--w-mid)!important;color:var(--ink)!important; letter-spacing:-.01em;padding:var(--s4) var(--s4) 0;line-height:1.3} .woocommerce ul.products li.product .price{font-size:var(--t-base);font-weight:var(--w-max);color:var(--ink); letter-spacing:-.02em;padding:var(--s2) var(--s4) 0;font-variant-numeric:tabular-nums} .woocommerce ul.products li.product .button{margin:var(--s4);background:var(--action);color:var(--on-action); font-size:var(--t-sm);font-weight:var(--w-mid);border-radius:var(--r);min-height:var(--tap); display:inline-flex;align-items:center;justify-content:center;padding:0 var(--s5)} .woocommerce ul.products li.product .button:hover{background:var(--navy);color:var(--on-action)} .woocommerce div.product .product_title{font-size:var(--t-3xl);font-weight:var(--w-dis);letter-spacing:var(--tr-display);color:var(--navy)} .woocommerce div.product p.price{font-size:var(--t-xl);font-weight:var(--w-max);color:var(--ink);font-variant-numeric:tabular-nums} .woocommerce div.product .woocommerce-tabs ul.tabs li{border-radius:0} .woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button{ background:var(--action);color:var(--on-action);border-radius:var(--r);font-weight:var(--w-mid)} .woocommerce #respond input#submit:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{background:var(--navy);color:var(--on-action)} .woocommerce .woocommerce-message,.woocommerce .woocommerce-info{border-top-color:var(--action)} /* ===== Cabecera y pie al MISMO ancho que el contenido ===== .brxe-container de Bricks trae width:1100px fijo y le gana a nuestro max-width; hay que forzar ambos. */ .brxe-container.nav-top, .brxe-section > .brxe-container.w, footer .brxe-container.w{ width:100%!important; max-width:var(--max)!important; margin-inline:auto!important; padding-inline:var(--s5)!important; box-sizing:border-box!important; } @media(min-width:768px){ .brxe-container.nav-top, .brxe-section > .brxe-container.w, footer .brxe-container.w{padding-inline:var(--s6)!important;} } @media(min-width:1024px){ .brxe-container.nav-top, .brxe-section > .brxe-container.w, footer .brxe-container.w{padding-inline:var(--s7)!important;} } /* ===== Hero rotativo ===== */ /* ---------- HERO rotativo · el texto se ubica frente al sujeto ---------- */ .hero{position:relative;background:#0C1628;cursor:grab;user-select:none;overflow:hidden;} .hero:active{cursor:grabbing;} .hero img{-webkit-user-drag:none;pointer-events:none;} /* Pista real: las cinco láminas viven una junto a otra y el cambio es un desplazamiento. Así el arrastre enseña la siguiente entrando en vez de mover una lámina que se queda pegada. */ .htrack{display:flex;align-items:stretch; transition:transform .38s cubic-bezier(.22,.61,.36,1);will-change:transform;} .htrack.arrastrando{transition:none;} /* durante el gesto sigue al dedo 1:1 */ .hslide{position:relative;flex:0 0 100%;min-width:100%;} .hero-pic{display:block;} .hero-pic img{width:100%;height:auto;display:block;} .hero-copy{padding-block:var(--s8);} @media(min-width:1000px){ /* la imagen SE QUEDA EN FLUJO: ella define la altura del slide. El texto se superpone en la mitad libre. */ .hslide .w{position:absolute;inset:0;z-index:2;display:grid; grid-template-columns:1fr 1fr;align-items:center;} .hslide[data-side="right"] .hero-copy{grid-column:1;padding-right:var(--s7);} .hslide[data-side="left"] .hero-copy{grid-column:2;padding-left:var(--s7);} .hero-copy{padding-block:0;} .hero-copy>*{max-width:640px;} .hero-copy .hcta{max-width:none;} } .hero h1{margin:var(--s4) 0 var(--s5);color:#fff;max-width:100%;text-wrap:balance;} .hero h1 em{font-style:normal;color:#7FB6EE;} .hero .eyebrow{color:#8FC0F0;} .hero .lede{max-width:38ch;color:#C9D9EC!important;} .hpts{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s3);max-width:44ch;} .hpts li{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start;font-size:1rem;color:#C9D9EC;} .hpts b{color:#fff;font-weight:var(--w-mid);} .hpts svg{margin-top:4px;} .hcta{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6);} .hero .b-sec{background:transparent;color:#fff;border-color:rgba(255,255,255,.42);} .hero .b-sec:hover{border-color:#fff;} /* selector de mensaje */ .hdots{position:absolute;left:0;right:0;bottom:var(--s5);z-index:3;display:flex;gap:var(--s2); justify-content:center;} @media(min-width:1000px){.hdots{justify-content:flex-start; padding-inline:max(var(--s7),calc((100vw - var(--max))/2 + var(--s7)));}} /* El tirador activo se RELLENA durante la vida de la diapositiva: el visitante ve cuánto le queda antes de que cambie, en vez de un salto seco. La duración vive aquí y el script la lee, para que barra y temporizador no puedan desincronizarse. */ .hdots{--hero-dur:8s;} .hdot{width:26px;height:3px;padding:0;border:0;cursor:pointer;overflow:hidden; background:rgba(255,255,255,.32);} .hdot i{display:block;width:100%;height:100%;background:#7FB6EE; transform:scaleX(0);transform-origin:left center;} .hdot.is-on i{animation:hdot-fill var(--hero-dur) linear forwards;} @keyframes hdot-fill{from{transform:scaleX(0);}to{transform:scaleX(1);}} /* sin rotación automática, el activo se muestra lleno y quieto */ @media(prefers-reduced-motion:reduce){ .hdot.is-on i{animation:none;transform:scaleX(1);}} .hdot:focus-visible{outline:2px solid #7FB6EE;outline-offset:3px;} /* utilidades de la barra */ .nav-tools{display:flex;align-items:center;gap:0;} /* Proporción medida en Ben & Frank: icono 21px sobre menú de 16px (1.31) y 20px de aire entre iconos. Aquí el menú es de 15px -> icono de 20px, caja de 40px y gap 0, que deja los mismos 20px de aire. */ .tool{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center; color:var(--slate);text-decoration:none;border-radius:var(--r);background:none;border:0;cursor:pointer;position:relative;} .tool svg{width:24px;height:24px;} @media(min-width:900px){.tool{width:44px;height:44px;}} @media(max-width:760px){.tool[data-opt]{display:none;}} .tool:hover{color:var(--navy);} .tool:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .tool .dot{position:absolute;top:5px;right:5px;min-width:16px;height:16px;padding:0 4px; background:var(--action);color:#fff;font-size:0.6875rem;font-weight:var(--w-mid); border-radius:999px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums;} /* =========================================================================== SLIDER DE ARMAZONES + CINTILLO DE BENEFICIOS Anatomía medida en Ben & Frank: tarjetas de 308px, imagen con object-fit contain, encabezado centrado, flechas circulares oscuras a los costados. Aquí el arrastre es scroll nativo con scroll-snap — sin librería, con gesto táctil y rueda horizontal gratis. =========================================================================== */ .fslider{padding-block:var(--s8);} @media(min-width:1024px){.fslider{padding-block:var(--s9);}} .fslider .w{text-align:center;} .fslider h2{margin:var(--s3) 0 var(--s4);} .fslider .sub{max-width:52ch;margin-inline:auto;color:var(--slate);} .ftrack-wrap{position:relative;margin-top:var(--s7);} .ftrack{display:flex;gap:var(--s5);overflow-x:auto;scroll-snap-type:x mandatory; cursor:grab;user-select:none; scroll-behavior:smooth;scrollbar-width:none; padding-block:var(--s2); /* el margen lateral se declara por quiebre: max()+calc() con variables no resolvía dentro del contenedor de Bricks y cortaba la primera tarjeta */ padding-inline:var(--s5);} @media(min-width:768px){.ftrack{padding-inline:var(--s6);}} @media(min-width:1024px){.ftrack{padding-inline:var(--s7);}} @media(min-width:1376px){.ftrack{padding-inline:calc((100vw - 1280px)/2 + 48px);}} .ftrack::-webkit-scrollbar{display:none;} .ftrack:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .ftrack.arrastrando{cursor:grabbing;} .ftrack img{-webkit-user-drag:none;pointer-events:none;} .fcard{flex:0 0 264px;scroll-snap-align:start;display:grid;gap:var(--s2); text-decoration:none;color:inherit;} @media(min-width:768px){.fcard{flex-basis:308px;}} .fimg{display:block;background:var(--tint);aspect-ratio:5/4;} .fimg img{width:100%;height:100%;object-fit:contain;display:block;} /* Nombre y precio centrados bajo la foto, como en su rejilla de armazones. Se centra desde el GRID de la tarjeta (justify-items) y no con text-align: el span ocupa todo el ancho de la celda, asi que alinear el texto dentro dependia de herencia que Bricks pisa. Con justify-items la caja se encoge al contenido y queda centrada sin depender de nadie. */ .fname{font-size:1rem;font-weight:var(--w-mid);margin-top:var(--s3); justify-self:center;text-align:center;} .fprice{font-size:1rem;color:var(--slate);font-variant-numeric:tabular-nums; justify-self:center;text-align:center;} .fprice em{font-style:normal;font-size:0.875rem;opacity:.7;} .fall{margin-top:var(--s7);display:inline-flex;} .farrow{position:absolute;top:38%;z-index:2;width:44px;height:44px;border:0;border-radius:999px; background:var(--ink);color:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;} .farrow svg{width:20px;height:20px;} .farrow.prev{left:var(--s4);transform:scaleX(-1);} .farrow.next{right:var(--s4);} .farrow:focus-visible{outline:2px solid var(--action);outline-offset:3px;} /* Como en Ben & Frank: la flecha no se atenúa, DESAPARECE. La izquierda no existe hasta que el usuario avanza; la derecha se va al llegar al final. Así nada invita a pulsar un control que no hace nada. */ .farrow[hidden]{display:none;} @media(min-width:900px){.farrow{display:flex;}} /* Cintillo: la franja muestra más beneficios de los que caben, por eso corre. Se detiene con prefers-reduced-motion y al pasar el cursor. */ .mq{background:var(--tint);border-block:1px solid var(--hair);overflow:hidden; padding-block:11px;} .mq-run{display:flex;align-items:center;width:max-content; animation:mq-slide 46s linear infinite;} .mq:hover .mq-run{animation-play-state:paused;} .mq b{font-size:0.9375rem;font-weight:var(--w-dis);white-space:nowrap;padding-inline:var(--s4);} .mq .mi{font-size:0.9375rem;color:var(--slate);white-space:nowrap;padding-inline:var(--s4); position:relative;} .mq .mi::before{content:"·";position:absolute;left:-3px;opacity:.45;} @keyframes mq-slide{from{transform:translateX(0);}to{transform:translateX(-50%);}} @media(prefers-reduced-motion:reduce){.mq-run{animation:none;} .mq{overflow-x:auto;}} /* =========================================================================== PIE — medido en el de Ben & Frank, no aproximado: · logotipos de pago: gap .75rem (12px), alineados a la derecha, sin caja · copyright: 12px / peso 400 / blanco / a la izquierda · dirección: 12px / peso 400 / gris tenue / max-width 48rem / a la izquierda · redes: Font Awesome Brands a 1.5em, glifo sólido, sin recuadro Los logotipos son de la misma familia (FA Brands cc-*), que es lo que hace que la fila se lea como un sistema y no como un collage. =========================================================================== */ .ft{background:var(--ink);color:#C3CEDA;padding-block:var(--s9) var(--s7);} .ft a{color:#C3CEDA;text-decoration:none;} .ft a:hover{color:#fff;} .ft-top{display:grid;gap:var(--s8);} @media(min-width:900px){.ft-top{grid-template-columns:1.6fr .8fr .8fr .9fr 1.1fr;gap:var(--s6);}} .fbrand p{max-width:32ch;font-size:0.9375rem;line-height:var(--lh-loose);margin:var(--s5) 0 0;} .flogo{height:42px;width:auto;display:block;} .fcol h4{color:#fff;font-size:0.75rem;font-weight:var(--w-mid);letter-spacing:var(--tr-label); text-transform:uppercase;margin:0 0 var(--s4);} .fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3);} .fcol a{font-size:0.9375rem;} .fsig{margin-top:var(--s6)!important;} .fcontact .fwa{display:inline-flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);} .fcontact .fwa svg{width:19px;height:19px;color:#25D366;flex:none;} .fcontact .fwa b{color:#fff;font-size:1rem;font-weight:var(--w-mid);font-variant-numeric:tabular-nums;} .fcontact .fmail{display:block;font-size:0.9375rem;} .fsoc{display:flex!important;gap:var(--s4);list-style:none;margin:0;padding:0;} .fsoc a{display:inline-flex;color:#C3CEDA;} .fsoc svg{height:17px;width:auto;} /* menores que los de pago, como en su pie */ .fsoc a:hover{color:#fff;} .fsoc a:focus-visible{outline:2px solid var(--brand);outline-offset:3px;} /* --- bloque inferior: dirección · línea · copyright + medios de pago --- */ .ft-bottom{padding-top:var(--s8);} .ft-addr{font-size:0.8125rem;line-height:1.55;color:#8493A6;max-width:48rem;margin:0;text-align:left;} .ft-hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:var(--s5) 0;} .ft-row{display:grid;gap:var(--s4);align-items:center;} @media(min-width:768px){.ft-row{grid-template-columns:repeat(2,minmax(0,1fr));}} .ft-copy{font-size:0.8125rem;font-weight:var(--w-body);color:#fff;margin:0;text-align:left;} .ft-pays{display:flex;flex-direction:row;align-items:center;gap:.75rem; list-style:none;margin:0;padding:0;justify-content:flex-start;} @media(min-width:768px){.ft-pays{justify-content:flex-end;}} /* A cada glifo se le recortó el viewBox a su forma real, así que basta con fijar la ALTURA y el ancho sale proporcionado solo — nada de cajas fijas que dejaban aire de sobra alrededor. La altura es óptica, no uniforme: VISA a 14px reproduce el 43x14 medido en su pie; un símbolo compacto como Mastercard o Amex necesita más alto para pesar lo mismo. */ .ft-pays li{display:inline-flex;align-items:center;color:#fff; background:none;border:0;padding:0;} .ft-pays svg{height:var(--h,18px);width:auto;fill:currentColor;display:block;} /* el contenedor que Bricks interpone no debe estrechar el pie */ .brxe-section.mp-ft, .brxe-container.mp-ftc{display:block!important;width:100%!important; max-width:none!important;padding:0!important;align-items:initial!important;} /* Bricks envuelve el pie en #brx-footer con padding 72px/48px propio: eso duplicaba el relleno y dejaba una franja blanca bajo el sitio. */ #brx-footer{padding:0!important;margin:0!important;background:var(--ink);} /* =========================================================================== MASTHEAD DE SECCIÓN Anatomía medida en los de Ben & Frank (/shop/category/*): banda 2.98:1, retrato sangrado a la izquierda que se funde en un degradado de color, y el texto a la derecha con una barra vertical fina delante. Aquí el degradado va en azul de marca y el texto vive en HTML —no quemado en la imagen— para que sea seleccionable, traducible e indexable. =========================================================================== */ .mh{position:relative;background:var(--navy);} .mh-pic{display:block;} .mh-pic img{width:100%;height:auto;display:block;} .mh-in{padding-block:var(--s7);} .mh-copy{max-width:52ch;} .mh .eyebrow{color:#8FC0F0;} .mh h1{color:#fff;margin:var(--s3) 0 var(--s4);} .mh-sub{color:#C9D9EC;font-size:var(--t-md);line-height:var(--lh-normal);margin:0;max-width:46ch;} @media(min-width:900px){ .mh-pic{position:absolute;inset:0;} .mh-pic img{height:100%;object-fit:cover;} .mh{aspect-ratio:2400/806;} .mh-in{position:absolute;inset:0;display:grid;align-items:center;padding-block:0;} /* la mitad derecha, que es donde el degradado deja sitio */ .mh-copy{grid-column:1;margin-left:52%;max-width:none; border-left:1px solid rgba(255,255,255,.42);padding-left:var(--s5);} .mh h1{max-width:14ch;} .mh-sub{max-width:40ch;} } @media(min-width:1280px){.mh-copy{margin-left:50%;}} /* Migas de pan sobre el masthead. Ben & Frank las muestra pero NO las marca como datos estructurados; aquí van con
    semántico + BreadcrumbList en JSON-LD, que es lo que hace que Google enseñe la ruta en los resultados en lugar de la URL cruda. */ .crumbs{padding-block:var(--s5) var(--s4);} .crumbs ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap; align-items:center;gap:var(--s2);font-size:0.8125rem;color:var(--slate);} .crumbs li+li::before{content:"/";margin-right:var(--s2);opacity:.5;} .crumbs a{color:var(--slate);text-decoration:none;} .crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;} .crumbs [aria-current]{color:var(--ink);font-weight:var(--w-mid);} /* =========================================================================== HOME OFICIAL — secciones alineadas al contenido de masterpiecelenses.com, con el sistema visual nuevo. Su versión usa Title Case en español («Agenda Ahora Tu Examen»), que es un anglicismo tipográfico; aquí va en sentence case, que es lo correcto en castellano y además se lee más rápido. =========================================================================== */ /* --- A · la oferta bajo el hero. Su bloque era solo titular y botón; se le añaden los cuatro datos que ellos mismos publican en sus FAQ, que es lo que de verdad responde la duda antes de agendar. --- */ .ofr{padding-block:var(--s9);text-align:center;} .ofr h2{margin:var(--s3) auto var(--s5);max-width:22ch;} .ofr .lede{max-width:56ch;margin:0 auto;color:var(--slate);} .ofr-cta{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap;margin-top:var(--s6);} .ofr-datos{list-style:none;margin:var(--s8) 0 0;padding:0;display:grid;gap:var(--s5); grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--hair); padding-top:var(--s6);} @media(min-width:768px){.ofr-datos{grid-template-columns:repeat(4,minmax(0,1fr));}} .ofr-datos li{display:grid;gap:2px;} .ofr-datos b{font-size:var(--t-xl);font-weight:var(--w-max);letter-spacing:var(--tr-display); color:var(--navy);font-variant-numeric:tabular-nums;} .ofr-datos span{font-size:0.875rem;color:var(--slate);} /* --- B · los tres pasos. Su versión son tres columnas sueltas; aquí van NUMERADAS y con el tiempo real de cada etapa, que convierte una lista en una expectativa concreta. --- */ .pasos{padding-block:var(--s9);background:var(--tint);} .pasos h2{margin:var(--s3) 0 var(--s8);max-width:20ch;} .pasos-l{list-style:none;margin:0;padding:0;display:grid;gap:var(--s7);} @media(min-width:900px){.pasos-l{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);}} .pasos-l li{position:relative;padding-top:var(--s6);border-top:2px solid var(--brand);} .p-n{position:absolute;top:calc(-1 * var(--s5));left:0;font-size:0.8125rem;font-weight:var(--w-max); letter-spacing:var(--tr-label);color:var(--brand);font-variant-numeric:tabular-nums;} .p-i{display:block;color:var(--navy);margin-bottom:var(--s4);} .p-i svg{width:34px;height:34px;} .pasos-l h3{margin:0 0 var(--s2);} .p-t{margin:0 0 var(--s3);font-size:0.8125rem;font-weight:var(--w-mid); letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--brand);} .p-d{margin:0;font-size:1rem;line-height:var(--lh-loose);color:var(--slate);} /* --- C · el split. Su versión es negro puro + foto sin tratar; aquí el navy de marca y la foto con la misma gradación fría y el mismo grano que el hero, para que no parezca traída de otro sitio. --- */ .facil{display:grid;background:var(--navy);} @media(min-width:900px){.facil{grid-template-columns:1fr 1fr;align-items:stretch;}} .facil-txt{display:flex;align-items:center;padding:var(--s8) var(--s5);} @media(min-width:900px){.facil-txt{padding:var(--s9) var(--s7);justify-content:flex-end;}} .facil-in{max-width:44ch;} .facil .eyebrow{color:#8FC0F0;} .facil h2{color:#fff;margin:var(--s3) 0 var(--s5);} .facil-in p{color:#C9D9EC;font-size:var(--t-md);line-height:var(--lh-normal);margin:0 0 var(--s6);} .facil-pic{display:block;} .facil-pic img{width:100%;height:100%;object-fit:cover;object-position:center 18%;display:block;} @media(max-width:899px){.facil-pic img{aspect-ratio:4/3;}} /* --- D · «Tecnología para tus ojos». Su versión es texto centrado sin foto; aquí la foto del equipo real a un lado, con la misma gradación del hero, y los tres respaldos concretos en vez de una declaración genérica. --- */ .tec{padding-block:var(--s9);} .tec-g{display:grid;gap:var(--s7);align-items:center;} @media(min-width:900px){.tec-g{grid-template-columns:1fr 1fr;gap:var(--s8);}} .tec-pic img{width:100%;height:auto;display:block;} .tec h2{margin:var(--s3) 0 var(--s5);} .tec .lede{color:var(--slate);max-width:46ch;} .tec-l{list-style:none;margin:var(--s6) 0;padding:0;display:grid;gap:var(--s3);} .tec-l li{position:relative;padding-left:var(--s5);font-size:1rem;color:var(--slate);} .tec-l li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:2px; background:var(--brand);} /* --- G · el formulario de cita. Su versión pide nombre, correo, teléfono, referencia y una casilla de términos. Se conserva y se añade una SEGUNDA casilla, separada, para el consentimiento de datos de salud: la graduación es dato de salud y la LFPDPPP exige consentimiento expreso propio. --- */ .cita{padding-block:var(--s9);background:var(--tint);} .cita-g{display:grid;gap:var(--s7);align-items:start;} @media(min-width:900px){.cita-g{grid-template-columns:1fr 1.1fr;gap:var(--s8);}} .cita h2{margin:var(--s3) 0 var(--s5);} .cita-txt p{color:var(--slate);max-width:44ch;} .cita-d{list-style:none;margin:var(--s6) 0 0;padding:0;display:grid;gap:var(--s4);} .cita-d li{display:grid;gap:1px;border-left:2px solid var(--brand);padding-left:var(--s4);} .cita-d b{font-size:1rem;font-weight:var(--w-mid);} .cita-d span{font-size:0.875rem;color:var(--slate);} .cita-f{background:var(--paper);border:1px solid var(--hair);padding:var(--s6);display:grid;gap:var(--s4);} .f-r{margin:0;display:grid;gap:var(--s2);} .f-r label{font-size:0.75rem;font-weight:var(--w-mid);letter-spacing:var(--tr-label); text-transform:uppercase;color:var(--slate);} .f-r i{font-style:normal;color:var(--brand);} .cita-f input[type=text],.cita-f input[type=tel],.cita-f input[type=email],.cita-f select{ font:inherit;font-size:1.0625rem;color:var(--ink);background:var(--paper); border:1px solid var(--hair);border-radius:var(--r);min-height:var(--tap);padding:0 var(--s4);} .cita-f input:focus-visible,.cita-f select:focus-visible{outline:2px solid var(--action);outline-offset:1px;} .f-c{margin:0;} .f-c label{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:start; font-size:0.875rem;line-height:1.5;color:var(--slate);cursor:pointer;} .f-c input{width:19px;height:19px;margin-top:2px;accent-color:var(--action);} .f-c a{color:var(--action);} .cita-f button{justify-self:start;} .f-n{margin:0;font-size:0.875rem;color:var(--slate);} .f-n a{color:var(--action);} /* --- H · las preguntas.
    nativo: funciona sin JavaScript, es accesible por teclado y Google lo indexa. Su acordeón depende de script. --- */ .faq{padding-block:var(--s9);} .faq h2{margin:var(--s3) 0 var(--s7);max-width:24ch;} .faq-l{display:grid;} .faq details{border-bottom:1px solid var(--hair);} .faq summary{cursor:pointer;list-style:none;padding:var(--s5) var(--s6) var(--s5) 0; font-size:var(--t-md);font-weight:var(--w-mid);position:relative;} .faq summary::-webkit-details-marker{display:none;} /* Signo + que gira a − : dos barras IDÉNTICAS, una rotada. Antes eran dos pseudoelementos con posiciones distintas y no casaban: se leía como una flecha rota. Así comparten origen y no pueden desalinearse. */ .faq summary::before,.faq summary::after{content:"";position:absolute; right:4px;top:50%;width:16px;height:2px;margin-top:-1px; background:var(--navy);border-radius:1px;} .faq summary::after{transform:rotate(90deg); transition:transform .26s cubic-bezier(.4,0,.2,1);} .faq details[open] summary::after{transform:rotate(90deg) scaleX(0);} @media(prefers-reduced-motion:reduce){.faq summary::after{transition:none;}} .faq summary:focus-visible{outline:2px solid var(--action);outline-offset:2px;} .faq details > div{padding:0 var(--s8) var(--s5) 0;font-size:1rem; line-height:var(--lh-loose);color:var(--slate);max-width:74ch;} .faq-n{margin:var(--s7) 0 0;font-size:1rem;color:var(--slate);} .faq-n a{color:var(--action);} /* =========================================================================== REDDIT SANS EN TODO — variable 200-900, un solo archivo para texto y titular. Al volver a una sola familia la jerarquía la hace el PESO, así que los titulares suben a 800 y el tracking vuelve a negativo: una geométrica de caja ancha se lee blanda en cuerpos grandes si no se aprieta. =========================================================================== */ h1,h2,h3,h4,.tlt{font-family:var(--mp-titulo,'Outfit'),sans-serif;} h1{font-weight:var(--mp-w-max,800);letter-spacing:-0.028em;line-height:1.04;} h2{font-weight:var(--mp-w-max,800);letter-spacing:-0.026em;line-height:1.08;} h3{font-weight:700;letter-spacing:-0.018em;line-height:1.2;} h4{font-weight:600;letter-spacing:-0.01em;} .hero h1,.mh h1,.phead h1{font-weight:var(--mp-w-max,800);letter-spacing:-0.03em;} .stat .k,.tier .pr,.pdpp,.ofr-datos b,.fprice,.cita-d b{ font-family:var(--mp-texto,'Outfit'),sans-serif;font-weight:700;letter-spacing:-0.015em; font-variant-numeric:tabular-nums;} .hero h1{max-width:none;} /* =========================================================================== REFINAMIENTOS DE RENDERIZADO Nota deliberada: NO se usa -webkit-font-smoothing:antialiased. En macOS adelgaza el trazo, y este es un sitio de óptica: restar grosor al texto va en contra del producto. Tampoco text-rendering:optimizeLegibility, que en textos largos dispara el coste de maquetado sin ganancia visible. =========================================================================== */ html{ -webkit-text-size-adjust:100%; /* iOS agranda el texto al girar sin esto */ text-size-adjust:100%; color-scheme:light; /* los controles nativos no se pintan oscuros */ scroll-behavior:smooth; } @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ font-synthesis:none; /* nada de negritas ni cursivas sintéticas */ font-kerning:normal; font-variant-ligatures:common-ligatures contextual; -webkit-tap-highlight-color:transparent; /* fuera el flash gris al tocar */ } /* Párrafos sin líneas huérfanas de una palabra */ p,li,dd,figcaption,.lede,.mh-sub{text-wrap:pretty;} /* Correos y URLs largas no rompen la caja */ a,p,td,dd{overflow-wrap:break-word;} /* El encabezado es fijo: sin esto, un ancla deja el título debajo de la barra */ :target,[id]{scroll-margin-top:calc(76px + var(--s5));} /* Selección con el azul de marca, no el azul del sistema */ ::selection{background:var(--brand);color:#fff;} /* Los campos heredan la tipografía del sitio, no la del sistema operativo */ input,select,textarea,button{font-family:inherit;font-size:inherit; font-feature-settings:inherit;} /* Modo de alto contraste de Windows: los bordes deben seguir existiendo */ @media(forced-colors:active){ .btn,.tool,.soc,.cita-f input,.cita-f select{border:1px solid currentColor;} .farrow{border:1px solid currentColor;} } /* Impresión: la receta y la cobertura se imprimen; el resto estorba */ @media print{ .topbar,.nav,.hdots,.farrow,.mq,.fslider,.ft-pay,.dock{display:none!important;} body{background:#fff;color:#000;font-size:11pt;} a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555;} .hero,.mh,.facil,.cita{background:#fff!important;color:#000!important;} .hero h1,.mh h1,.facil h2,.cita h2{color:#000!important;} section,.mh{break-inside:avoid;padding-block:12pt!important;} } /* --- Apertura fluida del acordeón ---
    nativo abre de golpe. Con interpolate-size + ::details-content el navegador puede interpolar hasta 'auto', que es lo que da el despliegue continuo sin recurrir a JavaScript ni a alturas fijas. */ :root{interpolate-size:allow-keywords;} .faq details::details-content{ block-size:0;overflow:hidden; transition:block-size .3s cubic-bezier(.4,0,.2,1), content-visibility .3s allow-discrete; } .faq details[open]::details-content{block-size:auto;} @media(prefers-reduced-motion:reduce){ .faq details::details-content{transition:none;} } /* --- Ritmo vertical ÚNICO --- Estaban mezclados --s8 y --s9 entre secciones. Ahora una sola regla manda sobre todas y el ritmo no depende de recordar el token en cada bloque. */ .ofr,.pasos,.tec,.cita,.faq,.fslider{padding-block:var(--s8);} @media(min-width:1024px){ .ofr,.pasos,.tec,.cita,.faq,.fslider{padding-block:var(--s9);} } .facil-txt{padding-block:var(--s8);} @media(min-width:1024px){.facil-txt{padding-block:var(--s9);}} /* El cintillo va entre «Evaluación gratis a domicilio» y el catálogo de armazones: ambas secciones son blancas, así que el tinte lo separa sin necesidad de un color extra. */ .mq{padding-block:13px;} /* --- Verificador de cobertura --- El bloque era una foto a toda altura para tres líneas de texto. Ahora resuelve la objeción que frena a cualquiera antes de agendar —«¿de verdad llegan a mi colonia?»— y con eso el tamaño se gana su sitio. */ .cp-f{margin:var(--s6) 0 0;display:grid;gap:var(--s2);max-width:26rem;} .cp-f label{font-size:.6875rem;font-weight:var(--w-mid);letter-spacing:var(--tr-label); text-transform:uppercase;color:#8FC0F0;} .cp-row{display:flex;gap:var(--s3);flex-wrap:wrap;} .cp-f input{flex:1 1 9rem;font:inherit;font-size:1.0625rem;min-height:var(--tap); padding:0 var(--s4);border:1px solid rgba(255,255,255,.28);border-radius:var(--r); background:rgba(255,255,255,.06);color:#fff;font-variant-numeric:tabular-nums; letter-spacing:.06em;} .cp-f input::placeholder{color:rgba(255,255,255,.42);letter-spacing:.06em;} .cp-f input:focus-visible{outline:2px solid #7FB6EE;outline-offset:1px; background:rgba(255,255,255,.1);} .cp-r{margin:var(--s3) 0 0;font-size:.9375rem;line-height:1.5;min-height:1.4em;} .cp-r[data-r="si"]{color:#8FE0B8;} .cp-r[data-r="no"]{color:#FFD08A;} .cp-r[data-r="err"]{color:#FFB3A7;} .cp-r a{color:#fff;text-decoration:underline;text-underline-offset:3px;} .cp-d{list-style:none;margin:var(--s7) 0 0;padding:0;display:flex;gap:var(--s7);flex-wrap:wrap;} .cp-d li{display:grid;gap:1px;} .cp-d b{font-size:var(--t-xl);font-weight:var(--w-max);color:#fff; letter-spacing:var(--tr-display);font-variant-numeric:tabular-nums;} .cp-d span{font-size:.8125rem;color:#C9D9EC;} /* .pc declara display:flex, que gana sobre el display:none implícito del atributo [hidden]: sin esto el filtro contaba bien pero no ocultaba nada. */ .pc[hidden]{display:none!important;} .pcount{margin:0;font-size:.9375rem;color:var(--slate);white-space:nowrap;} .cat-n{margin:var(--s6) 0 0;font-size:.875rem;color:var(--slate);max-width:70ch;} /* Corazón de favoritos sobre la tarjeta. Va FUERA del para que se pueda pulsar sin abrir la ficha, y la tarjeta conserva su enlace completo. */ .pw{position:relative;display:flex;} .pw[hidden]{display:none!important;} .pw > .pc{flex:1;} .fav{position:absolute;top:var(--s3);right:var(--s3);z-index:2; width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center; border:0;background:none;padding:0;cursor:pointer;color:var(--slate);} .fav svg{width:22px;height:22px;} .fav .vacio{fill:currentColor;stroke:currentColor;stroke-width:15;} .fav .lleno{fill:currentColor;stroke:none;display:none;} .fav.is-on .vacio{display:none;} .fav.is-on .lleno{display:block;} .fav:hover{color:var(--ink);} /* Activo = corazón SÓLIDO NEGRO, del mismo tamaño que sin marcar. Quitar el stroke lo adelgazaba (el trazo aportaba grosor); manteniéndolo del mismo color que el relleno queda macizo y conserva la silueta exacta. */ .fav.is-on{color:var(--ink);} .fav:focus-visible{outline:2px solid var(--action);outline-offset:2px;} /* --- Catálogo: mega menú de filtros --- Botones en una fila fija; los paneles viven en un bloque APARTE debajo de toda la fila. Con
    por grupo el panel queda atado a su botón y acaba a su lado o desbordándose; separados, el panel abierto ocupa el ancho completo, se recorta al contenedor y empuja el catálogo hacia abajo. */ .fpanel{padding-top:var(--s7);} /* Una sola barra: filtros a la izquierda, conteo y orden a la derecha. Con cuatro grupos la fila se desbordaba y el bloque derecho saltaba abajo: se reduce el aire entre controles y se deja que el izquierdo ceda antes. */ .fbtns{display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center; justify-content:space-between;} .fbl{display:flex;flex-wrap:wrap;gap:10px;align-items:center;flex:1 1 auto;min-width:0;} .fbr{display:flex;flex-wrap:nowrap;gap:var(--s4);align-items:center;flex:0 0 auto;} @media(max-width:900px){.fbr{width:100%;justify-content:space-between;gap:var(--s4);} .fbl{flex-basis:100%;}} /* El contador pertenece al título («Marca 1»), no al chevron: con un gap uniforme quedaba equidistante y se leía como parte del control de abrir. */ .fbtn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;white-space:nowrap; border:1px solid var(--hair);border-radius:var(--r);background:var(--paper); padding:10px 13px;font:inherit;font-size:.9375rem;font-weight:var(--w-mid);color:var(--ink); min-height:44px; transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1);} .fbtn:hover{border-color:var(--action);} .fbtn.is-on{border-color:var(--action);color:var(--action);} .fbtn:focus-visible{outline:2px solid var(--action);outline-offset:2px;} /* Tiempos medidos en Ben & Frank: .3s con cubic-bezier(.4,0,.2,1) para el acordeón, .15s para las casillas, y el icono gira 180°. */ .fchev{width:8px;height:8px;border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px; margin-left:7px;transition:transform .3s cubic-bezier(.4,0,.2,1);} .fbtn.is-on .fchev{transform:rotate(225deg);margin-top:2px;} .fgn{font-variant-numeric:tabular-nums;background:var(--action);color:#fff; border-radius:999px;min-width:21px;height:21px;display:inline-flex; align-items:center;justify-content:center;font-size:.8125rem;padding:0 6px;} .fgn[hidden]{display:none;} .fclear{border:0;background:none;padding:9px 2px;cursor:pointer;font:inherit;white-space:nowrap; font-size:.9375rem;color:var(--action);text-decoration:underline;text-underline-offset:3px; min-height:44px;} .fclear[hidden]{display:none;} /* El panel crece de 0fr a 1fr: interpola la altura real sin fijarla a mano, así el catálogo baja de forma continua en lugar de saltar. */ /* La secuencia se invierte al cerrar: el hueco espera .12s a que el contenido se haya ido. Al abrir arranca sin retardo y es el contenido el que espera. */ .fdrops{width:100%;display:grid;grid-template-rows:0fr; transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1) .12s;} .fdrops[data-abierto]{grid-template-rows:1fr;transition-delay:0s;} .fdrops > div{min-height:0;overflow:hidden;} .fdrop{display:flex;flex-wrap:wrap;gap:8px;width:100%; padding:var(--s5) 0 var(--s2); /* SECUENCIA, no simultáneo: primero se abre el hueco —la línea inferior baja— y sólo cuando hay sitio aparecen los filtros. El retardo de .18s equivale al tramo en que la altura ya creció lo suficiente. Al cerrar no hay retardo: el contenido se va antes de que el hueco se cierre. */ opacity:0;transform:translateY(-8px); transition:opacity .22s cubic-bezier(.4,0,.2,1), transform .22s cubic-bezier(.4,0,.2,1);} .fdrops[data-abierto] .fdrop{opacity:1;transform:none; transition-delay:.18s;} .fdrop[hidden]{display:none;} @media(prefers-reduced-motion:reduce){ .fdrops,.fchev,.fbtn,.fq,.fdrop{transition:none;} .fdrop{opacity:1;transform:none;}} .fq{display:inline-flex;align-items:center;gap:8px;cursor:pointer;white-space:nowrap; border:1px solid var(--hair);border-radius:var(--r);padding:9px 13px; font-size:.9375rem;color:var(--slate);background:var(--paper);line-height:1.2; min-height:42px; transition:border-color .15s cubic-bezier(.4,0,.2,1),color .15s cubic-bezier(.4,0,.2,1), box-shadow .15s cubic-bezier(.4,0,.2,1);} .fq input{width:17px;height:17px;margin:0;accent-color:var(--action);flex:none;} .fq .sw{width:15px;height:15px;border-radius:50%;flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);} .fq:hover{border-color:var(--action);color:var(--ink);} .fq:has(input:checked){border-color:var(--action);color:var(--action); box-shadow:inset 0 0 0 1px var(--action);} .fq em{font-style:normal;opacity:.55;font-variant-numeric:tabular-nums;} /* Ordenar por: desplegable propio. El