/* MULTICOP — estilos. Orden: base · componentes · secciones · utilidades responsive */

/* ===== 1. Base ===== */
:root{
  --k:#0b0b0c;--k2:#141416;--k3:#1d1d20;--line:#2c2c30;
  --w:#fff;--g1:#f2f2f0;--g2:#b9b9b6;--g3:#8a8a88;
  --c:#44b3d6;--m:#c9168a;--y:#fcee3a;
  --shadow:6px 6px 0 #000;
  --font:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --pad:clamp(16px,4vw,48px);
  --hh:66px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hh) + 8px)}
body{background:var(--k);color:var(--w);font:400 16px/1.55 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--pad)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--y);outline-offset:3px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--y);color:#000;font:800 14px var(--font);padding:12px 16px;text-decoration:none;border:2px solid #000}
.skip:focus{top:12px}
h1,h2,h3{font-weight:900;text-transform:uppercase;line-height:.95;letter-spacing:-.01em}
h2{font-size:clamp(34px,6vw,72px)}
h3{font-size:clamp(20px,2.4vw,28px);line-height:1.05}
section{padding:clamp(56px,9vw,120px) 0;position:relative}
.lead{color:var(--g2);font-size:clamp(16px,1.6vw,19px);max-width:56ch}
.eyebrow{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--g2);margin-bottom:18px}
.eyebrow i{display:inline-flex;gap:3px}
.eyebrow i b{width:10px;height:10px;display:block}
.eyebrow i b:nth-child(1){background:var(--c)}.eyebrow i b:nth-child(2){background:var(--m)}.eyebrow i b:nth-child(3){background:var(--y)}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 32px;flex-wrap:wrap;margin-bottom:clamp(28px,5vw,56px)}

/* ===== 2. Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;font:800 14px/1.1 var(--font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border:2px solid var(--w);background:transparent;color:var(--w);cursor:pointer;transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--c)}
.btn:active{transform:none;box-shadow:none}
.btn.pri{background:var(--y);border-color:var(--y);color:#000}
.btn.pri:hover{box-shadow:5px 5px 0 var(--m)}
.btn.dark{background:#000;border-color:#000;color:#fff}
.btn.dark:hover{box-shadow:5px 5px 0 var(--m)}
.btn.sm{min-height:44px;padding:0 16px;font-size:12px}
.arrow::after{content:"→"}
.wa-ico{width:1.25em;height:1.25em;flex:none}
.seg .go .wa-ico{display:inline-block;vertical-align:-.2em;margin-right:6px}
.cta{display:flex;flex-wrap:wrap;gap:14px}

/* ===== 3. Header ===== */
header{position:sticky;top:0;z-index:50;background:rgba(11,11,12,.97);border-bottom:2px solid var(--line)}
header::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:linear-gradient(90deg,var(--c) 33.3%,var(--m) 33.3% 66.6%,var(--y) 66.6%)}
.hd{display:flex;align-items:center;justify-content:space-between;height:var(--hh);gap:16px}
.logo img{height:38px;width:auto}
nav.main{display:flex;gap:28px}
nav.main a{font:700 13px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:var(--g2);padding:10px 0;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
nav.main a:hover{color:#fff;border-color:var(--m)}
.menu-btn{display:none;min-width:84px;height:46px;border:2px solid var(--w);background:none;color:#fff;cursor:pointer;font:800 12px var(--font);letter-spacing:.1em;text-transform:uppercase}
@media(max-width:980px){
  nav.main{display:none;position:absolute;top:var(--hh);left:0;right:0;flex-direction:column;gap:0;background:var(--k);border-bottom:2px solid var(--line);max-height:calc(100vh - var(--hh));overflow:auto}
  nav.main.open{display:flex}
  nav.main a{padding:20px var(--pad);border-top:1px solid var(--line);border-bottom:0;font-size:15px}
  .menu-btn{display:block}
  .hd .btn{display:none}
}

/* ===== 4. Hero ===== */
.hero{padding:clamp(28px,5vw,64px) 0 0;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(24px,4vw,64px);align-items:center}
.hero h1{font-size:clamp(36px,11vw,72px);margin-bottom:24px}
@media(min-width:861px){.hero h1{font-size:clamp(48px,5.6vw,96px)}}
.hero h1 em{font-style:normal;color:#000;padding:0 .12em;background:linear-gradient(var(--y),var(--y)) 0 52%/100% .86em no-repeat;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.hero .lead{margin-bottom:30px}
.hero .tag{margin-top:26px;font:700 12px/1.4 var(--font);letter-spacing:.16em;text-transform:uppercase;color:var(--g2);display:flex;gap:10px;align-items:center}
.hero .tag::before{content:"";width:28px;height:4px;background:linear-gradient(90deg,var(--c) 33%,var(--m) 33% 66%,var(--y) 66%)}
.collage{position:relative;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(12,1fr);gap:10px;aspect-ratio:1/1.08}
.collage figure{overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow);background:var(--k3);min-height:0}
.collage img{width:100%;height:100%;object-fit:cover}
.collage .a{grid-area:1/1/9/8}
.collage .b{grid-area:1/8/5/13;border-color:var(--c)}
.collage .c{grid-area:5/8/9/13;border-color:var(--y)}
.collage .d{grid-area:9/1/13/6;border-color:var(--m)}
.collage .e{grid-area:9/6/13/13}
.reg{position:absolute;right:10px;top:10px;width:30px;height:30px;border:2px solid #fff;border-radius:50%;z-index:3;background:rgba(0,0,0,.5)}
.reg::before,.reg::after{content:"";position:absolute;background:#fff}
.reg::before{left:50%;top:-7px;bottom:-7px;width:2px}.reg::after{top:50%;left:-7px;right:-7px;height:2px}
.cmyk-bar{display:flex;height:14px;margin-top:clamp(32px,5vw,64px)}
.cmyk-bar i{flex:1}.cmyk-bar i:nth-child(1){background:var(--c)}.cmyk-bar i:nth-child(2){background:var(--m)}.cmyk-bar i:nth-child(3){background:var(--y)}.cmyk-bar i:nth-child(4){background:#fff}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}.collage{aspect-ratio:1/1}}

/* ===== 5. Franja de confianza ===== */
.trust{background:var(--w);color:#000;padding:0;border-bottom:2px solid #000}
/* Celdas separadas por el "gap" sobre fondo negro: no sobran bordes aunque falte una celda */
.trust .row{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:#000;border-inline:2px solid #000}
.trust .cell{background:var(--w);padding:22px 20px}
.trust small{display:block;font:800 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;margin-bottom:8px;color:#555}
.trust strong{font:900 clamp(16px,1.7vw,21px)/1.15 var(--font);text-transform:uppercase}
.trust span{font-size:14px;display:block;margin-top:4px;color:#333}
.trust a{font-size:13px;font-weight:700}
/* Horarios: una fila por tramo, etiqueta a la izquierda y horas a la derecha */
.trust .hrs{display:grid;gap:7px}
.trust .hrs p{display:grid;grid-template-columns:74px 1fr;align-items:baseline;gap:8px;margin:0}
.trust .hrs b{font:800 11px/1.3 var(--font);letter-spacing:.12em;text-transform:uppercase;color:#555}
.trust .hrs span{display:block;margin:0;font:700 15px/1.3 var(--font);color:#000;font-variant-numeric:tabular-nums}
.trust .hrs i{font-style:normal;white-space:nowrap}
.trust .hrs i:not(:last-child)::after{content:" /";color:#777;font-weight:400}
@media(max-width:900px){.trust .row{grid-template-columns:1fr 1fr}}

/* ===== 6. Servicios ===== */
.svc{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.card{background:var(--k2);border:2px solid var(--line);display:flex;flex-direction:column;transition:border-color .15s,transform .15s,box-shadow .15s}
.card:hover{border-color:#fff;transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--accent,var(--c))}
.card .ph{flex:1;min-height:240px;overflow:hidden;border-bottom:2px solid var(--line);position:relative}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.card .num{position:absolute;left:0;top:0;z-index:1;background:var(--accent,var(--c));color:#000;font:900 18px/1 var(--font);padding:10px 12px}
.card .bd{padding:22px;display:flex;flex-direction:column;gap:12px}
.card p{color:var(--g2);font-size:15px}
.card ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.card li{font:700 11px/1 var(--font);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--g3);padding:6px 8px;color:var(--g1)}
.card .btn{align-self:flex-start;margin-top:4px}
.s1{grid-column:span 7;--accent:var(--c)}.s2{grid-column:span 7;--accent:var(--m)}
.s3{grid-column:span 5;--accent:var(--y)}.s4{grid-column:span 5;--accent:#fff}
.s5{grid-column:span 12;flex-direction:row;--accent:var(--g2)}
.s5 .ph{flex:none;width:30%;min-height:220px;border-bottom:0;border-right:2px solid var(--line)}
.s5{position:relative}.card.s5 .bd{position:static}.s5 .bd{justify-content:center;align-items:flex-start;padding:28px 36px}
.sec-note{font:700 11px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
@media(max-width:860px){.svc{grid-template-columns:1fr}.svc>*{grid-column:auto!important}.card .ph{flex:none;aspect-ratio:16/10;min-height:0}.s5{flex-direction:column}.s5 .ph{width:100%;border-right:0;border-bottom:2px solid var(--line)}.s5 .bd{padding:22px}}

/* ===== 7. Galería ===== */
.works{background:var(--w);color:#000}
.works .eyebrow{color:#555}.works .lead{color:#444}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.filters button{min-height:44px;padding:0 14px;font:800 12px var(--font);letter-spacing:.08em;text-transform:uppercase;background:#fff;border:2px solid #000;cursor:pointer;color:#000}
.filters button:hover{background:var(--y)}
.filters button[aria-pressed=true]{background:#000;color:#fff}
.masonry{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.tile{display:block;width:100%;padding:0;position:relative;border:2px solid #000;box-shadow:5px 5px 0 #000;background:#eee;overflow:hidden;cursor:zoom-in;aspect-ratio:4/5}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.tile:hover img{transform:scale(1.03)}
.tile .cap{position:absolute;left:0;bottom:0;background:#000;color:#fff;font:800 10px/1 var(--font);letter-spacing:.12em;text-transform:uppercase;padding:7px 9px;border-top:3px solid var(--c);text-align:left}
/* Color de la etiqueta según la categoría */
.tile[data-c=stk] .cap,.tile[data-c=esp] .cap{border-color:var(--m)}.tile[data-c=pub] .cap,.tile[data-c=tec] .cap{border-color:var(--y)}
.credit{margin-top:22px;font-size:13px;color:#444;max-width:70ch}
@media(max-width:999px){.masonry{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.masonry{gap:10px}.tile{box-shadow:3px 3px 0 #000}.tile .cap{font-size:9px;padding:6px 7px}}

/* ===== 8. Campaña ===== */
.camp{padding:clamp(40px,6vw,80px) 0}
.camp .box{border:3px solid #fff;box-shadow:10px 10px 0 var(--m);display:grid;grid-template-columns:1.15fr .85fr;background:var(--k2)}
.camp .txt{padding:clamp(24px,4vw,56px)}
.badge{display:inline-block;background:var(--m);color:#fff;font:900 12px/1 var(--font);letter-spacing:.16em;text-transform:uppercase;padding:8px 12px;margin-bottom:20px}
.camp h2{font-size:clamp(30px,4.6vw,58px);margin-bottom:18px}
.camp ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 28px}
.camp li{border:2px solid #fff;padding:8px 12px;font:800 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase}
.camp-art{border-left:3px solid #fff;background:#000;position:relative;overflow:hidden;min-height:320px;display:flex;flex-direction:column;justify-content:center;padding:clamp(20px,3vw,40px);gap:6px}
.camp-art .w{font:900 clamp(24px,2.6vw,40px)/.95 var(--font);text-transform:uppercase;letter-spacing:-.02em;overflow-wrap:anywhere}
.camp-art .w:nth-child(1){color:#fff}
.camp-art .w:nth-child(2){color:transparent;-webkit-text-stroke:2px var(--y)}
.camp-art .w:nth-child(3){color:var(--c)}
.camp-art .bars{display:flex;height:12px;margin-top:18px}
.camp-art .bars i{flex:1}.camp-art .bars i:nth-child(1){background:var(--c)}.camp-art .bars i:nth-child(2){background:var(--m)}.camp-art .bars i:nth-child(3){background:var(--y)}
.camp-art .reg{right:14px;top:14px;background:none}
.camp-art.has-photo{padding:0;display:block}
.camp-art.has-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.camp .papeles+.papeles{margin-top:10px}
.camp .papeles{margin:18px 0 0;padding-left:12px;border-left:3px solid var(--y);font-size:14px;color:var(--g1)}
.camp .papeles .nb{white-space:nowrap}
.camp .papeles b{display:block;margin-bottom:2px;font:800 10px/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--g2)}
@media(max-width:860px){.camp .box{grid-template-columns:1fr}.camp-art{border-left:0;border-top:3px solid #fff;min-height:240px}.camp-art .w{font-size:clamp(24px,7.4vw,56px)}}

/* ===== 9. Segmentos ===== */
.seg{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:2px solid var(--line)}
.seg article{padding:26px 22px;border-right:2px solid var(--line);display:flex;flex-direction:column;gap:12px;position:relative;transition:background .15s}
.seg article:last-child{border-right:0}
.seg article:hover{background:var(--k2)}
.seg article::before{content:"";position:absolute;left:0;top:0;right:0;height:6px;background:var(--bar)}
.seg h3{font-size:inherit;line-height:1}
.seg-t{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;padding:0;background:none;border:0;color:#fff;font:inherit;text-align:left;cursor:default}
.seg-t:disabled{color:#fff;opacity:1}
.seg .n{font:900 40px/1 var(--font);color:var(--bar)}
.seg .t{font:900 clamp(17px,1.55vw,22px)/1.05 var(--font);text-transform:uppercase;overflow-wrap:anywhere}
.seg .pl{display:none}
.seg-p{display:flex;flex-direction:column;gap:12px;flex:1}
.seg p{color:var(--g2);font-size:14px}
.seg p b{display:block;font:800 10px/1 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--g1);margin-bottom:4px}
.seg .go{margin-top:auto;font:800 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--bar);padding:12px 0 4px;align-self:flex-start;min-height:44px}
.seg .go:hover{color:var(--bar)}
.seg article:nth-child(1){--bar:var(--c)}.seg article:nth-child(2){--bar:var(--m)}.seg article:nth-child(3){--bar:var(--y)}.seg article:nth-child(4){--bar:#fff}.seg article:nth-child(5){--bar:var(--c)}
@media(max-width:1100px){.seg{grid-template-columns:1fr 1fr}.seg article{border-bottom:2px solid var(--line)}}

/* ===== 10. Proceso ===== */
.proc{background:var(--k2);border-block:2px solid var(--line)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);counter-reset:s;padding:0;gap:0}
.steps li{list-style:none;padding:28px 24px 28px 0;position:relative;border-top:4px solid var(--bar)}
.steps li:nth-child(1){--bar:var(--c)}.steps li:nth-child(2){--bar:var(--m)}.steps li:nth-child(3){--bar:var(--y)}.steps li:nth-child(4){--bar:#fff}
.steps li::before{counter-increment:s;content:"0" counter(s);display:block;font:900 clamp(48px,6vw,84px)/1 var(--font);color:var(--bar);margin-bottom:12px}
.steps h3{font-size:clamp(17px,1.8vw,22px)}
@media(max-width:800px){.steps{grid-template-columns:1fr}.steps li{padding:18px 0;display:grid;grid-template-columns:76px 1fr;align-items:center}.steps li::before{font-size:44px;margin:0}}

/* ===== 11. Opiniones ===== */
.rev{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,56px);align-items:start}
.score,.trustmsg{border:3px solid #fff;box-shadow:var(--shadow);padding:28px;background:var(--k2)}
.score .big{font:900 clamp(64px,9vw,112px)/1 var(--font);display:flex;align-items:baseline;gap:8px}
.score .big small{font-size:24px;color:var(--g2)}
.stars{color:var(--y);letter-spacing:4px;font-size:22px;margin:6px 0 12px}
.trustmsg p{margin-bottom:20px;color:var(--g1);font-size:18px}
.themes{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.themes div{border:2px solid var(--line);padding:20px;background:var(--k2)}
.themes b{display:block;font:900 18px/1.1 var(--font);text-transform:uppercase;margin-bottom:6px}
.themes p{color:var(--g2);font-size:14px}
@media(max-width:860px){.rev{grid-template-columns:1fr}.themes{grid-template-columns:1fr}}

/* ===== 12. Nosotros ===== */
.about-sec{background:var(--k2);border-block:2px solid var(--line)}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);align-items:center}
.about .imgs{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;align-items:end}
.about .imgs figure{margin:0;overflow:hidden;border:3px solid #fff;box-shadow:var(--shadow)}
.about .imgs img{width:100%;height:100%;object-fit:cover}
.about .imgs .c1{aspect-ratio:1/1;border-color:var(--c)}
.about .imgs .c2{aspect-ratio:2/3;border-color:var(--y)}
.about .imgs .px img{transform:scale(1.12)}
.about ul{list-style:none;padding:0;margin-top:22px;display:grid;gap:10px}
.about li{padding-left:28px;position:relative;color:var(--g1)}
.about li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;background:var(--m)}
@media(max-width:860px){.about{grid-template-columns:1fr}}

/* ===== 13. FAQ ===== */
.faq{max-width:900px}
.faq details{border-top:2px solid var(--line)}
.faq details:last-child{border-bottom:2px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:20px 0;font:800 clamp(16px,1.8vw,21px)/1.25 var(--font);text-transform:uppercase;min-height:60px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:40px;height:40px;display:grid;place-items:center;border:2px solid #fff;font-size:22px}
.faq summary:hover::after{background:var(--y);color:#000;border-color:var(--y)}
.faq details[open] summary::after{content:"–";background:#fff;color:#000}
.faq details .a{padding:0 56px 24px 0;color:var(--g2);max-width:70ch}
.faq details .a a{color:var(--y)}

/* ===== 14. Contacto ===== */
.contact{background:var(--y);color:#000;border-top:2px solid #000}
.contact h2{font-size:clamp(38px,8vw,104px);margin-bottom:36px}
.cgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(20px,4vw,48px)}
.info{display:grid;gap:18px;align-content:start}
.blk{background:#000;color:#fff;padding:22px;border:2px solid #000;box-shadow:6px 6px 0 var(--m)}
.blk small{display:block;font:800 11px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--c);margin-bottom:8px}
.blk strong{font:900 22px/1.15 var(--font);text-transform:uppercase}
.blk .tel{font:900 clamp(28px,4vw,40px)/1 var(--font);display:block;padding:4px 0;margin:0}
.hours{width:100%;border-collapse:collapse;font-size:15px}
.hours td{padding:6px 0;border-bottom:1px solid #333}.hours td:last-child{text-align:right;font-weight:700}
.btns{display:flex;flex-wrap:wrap;gap:12px}
.map{border:3px solid #000;box-shadow:6px 6px 0 #000;margin-top:24px;background:#ddd;line-height:0}
.map iframe{width:100%;height:340px;border:0}
form{background:#fff;border:3px solid #000;box-shadow:6px 6px 0 #000;padding:clamp(20px,3vw,32px);display:grid;gap:16px;align-content:start}
form h3{font-size:24px}
label{display:grid;gap:6px;font:800 12px/1.2 var(--font);letter-spacing:.1em;text-transform:uppercase}
input,select,textarea{font:500 16px var(--font);padding:12px;border:2px solid #000;background:#fff;color:#000;border-radius:0;width:100%;min-height:48px}
textarea{min-height:110px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--m);outline-offset:0}
[aria-invalid=true]{border-color:#b00020;background:#fff4f5}
.err{font:700 13px/1.3 var(--font);color:#b00020;text-transform:none;letter-spacing:0;min-height:0}
.form-note{font-size:13px;color:#444}
.estado{font-weight:700;font-size:14px}
.estado:empty{display:none}
.salida{border:2px solid #000;padding:14px;background:var(--g1);display:grid;gap:10px}
.salida textarea{min-height:130px;font-size:14px}
.cta-main{display:none}
.form-acc>summary{display:none}
@media(max-width:860px){.cgrid{grid-template-columns:1fr}}

/* ===== 15. Footer ===== */
footer{background:#000;padding:56px 0 96px;border-top:2px solid var(--line)}
.fg{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:32px}
footer img{height:40px;width:auto;margin-bottom:16px}
.ft-h{font:800 12px/1 var(--font);letter-spacing:.18em;text-transform:uppercase;color:var(--g3);margin-bottom:14px}
footer ul{list-style:none;padding:0;display:grid;gap:4px}
footer li a,footer li{font-size:15px}
footer a{text-decoration:none;color:var(--g1);display:inline-block;padding:6px 0}footer a:hover{color:var(--y)}
footer p{color:var(--g2);font-size:15px;max-width:36ch}
.copy{margin-top:40px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--g3);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media(max-width:860px){.fg{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fg{grid-template-columns:1fr}}

/* ===== 16. Botón flotante ===== */
.float{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 20px;background:var(--y);color:#000;border:3px solid #000;box-shadow:5px 5px 0 #000;font:900 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;transition:transform .12s,box-shadow .12s}
.float:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--m)}
.float svg{width:22px;height:22px;flex:none}
@media(max-width:520px){.float{right:12px;bottom:12px;padding:0 16px}}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}


/* ===== 17. Sistema de movimiento (js/motion.js) ===== */
/* Capas decorativas: nunca interceptan clics y quedan debajo del contenido */
[data-fx-scope]{position:relative}
/* contorno claro sobre secciones oscuras */
.hero,#servicios,.camp-art,.card{--ol:#f2f2f0}
.fx-layer{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.hero>.wrap,#servicios>.wrap,.works>.wrap,.contact>.wrap{position:relative;z-index:1}
.fx{position:absolute;left:var(--lx);top:var(--ly);width:var(--w,60px);height:var(--w,60px);opacity:var(--o,1);will-change:transform;pointer-events:none}
.fx-in{display:block;width:100%;height:100%;transform:rotate(var(--r,0deg))}
.fx svg{display:block;width:100%;height:100%;overflow:visible}
.fx[style*="--wm"]{}
/* Flotación ambiental: cada objeto con duración, amplitud y retraso propios */
.fy{animation:fy var(--t,8s) ease-in-out var(--dl,0s) infinite alternate}
.fh{animation:fh var(--t,8s) ease-in-out var(--dl,0s) infinite alternate}
.fr{animation:fr var(--t,8s) ease-in-out var(--dl,0s) infinite alternate}
@keyframes fy{from{transform:translateY(calc(var(--a,10px)*-1*var(--mi,1))) rotate(var(--r,0deg))}to{transform:translateY(calc(var(--a,10px)*var(--mi,1))) rotate(var(--r,0deg))}}
@keyframes fh{from{transform:translateX(calc(var(--a,10px)*-1*var(--mi,1))) rotate(var(--r,0deg))}to{transform:translateX(calc(var(--a,10px)*var(--mi,1))) rotate(var(--r,0deg))}}
@keyframes fr{from{transform:rotate(calc(var(--r,0deg) - 5deg*var(--mi,1)))}to{transform:rotate(calc(var(--r,0deg) + 5deg*var(--mi,1)))}}
/* Solo se anima lo que está en pantalla */
[data-fx-scope]:not(.on) .fx-in,.mo-paused .fx-in,.mo-paused /* Estado inicial de entrada (solo si hay JS y movimiento) */
.mo-on .fx{opacity:0;transition:opacity .9s ease calc(var(--dl,0s)*-0.12 + .15s)}
.mo-on [data-fx-scope].in .fx{opacity:var(--o,1)}
.mo-on .fx-layer.calm .fx-in{animation:none}
.mo-nofloat .fx-in,.mo-nofloat .mo-off .fx-in,.mo-off .mo-mobile .fx.d,.mo-mobile .mo-mobile .fx{left:var(--xm,var(--lx));top:var(--ym,var(--ly));width:var(--wm,var(--w,60px));height:var(--wm,var(--w,60px))}

/* Aparición progresiva */
.mo-on:not(.mo-noreveal) [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s ease var(--d,0s),transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.mo-on:not(.mo-noreveal) [data-reveal].in{opacity:1;transform:none}

/* Detalles ilustrados en las tarjetas de servicios */
.card .bd{position:relative}
.card:hover @media(max-width:600px){.card h3{max-width:none}}

/* Separadores gráficos */

/* Galería: profundidad, marcas de corte y entrada de filtros */
.tile{transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease}
.tile::after{content:"";position:absolute;inset:8px;border:2px solid transparent;pointer-events:none;transition:border-color .25s,inset .25s;clip-path:polygon(0 0,18px 0,18px 2px,2px 2px,2px 18px,0 18px,0 0,calc(100% - 18px) 0,100% 0,100% 18px,calc(100% - 2px) 18px,calc(100% - 2px) 2px,calc(100% - 18px) 2px)}
.tile:hover::after,.tile:focus-visible::after{border-color:#fff;inset:12px}
.mo-on .tile:not([hidden]){animation:tileIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes tileIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1}}

/* Lightbox con entrada y salida */

/* Proceso: la línea se dibuja y los pasos se iluminan en secuencia */
.mo-on .steps[data-draw] li{border-top-color:transparent;opacity:.28;transition:opacity .5s ease calc(var(--n)*.4s)}
.mo-on .steps[data-draw] li::after{content:"";position:absolute;left:0;right:0;top:-4px;height:4px;background:var(--bar);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.3,.7,.2,1) calc(var(--n)*.4s)}
.mo-on .steps[data-draw].in li{opacity:1}
.mo-on .steps[data-draw].in li::after{transform:scaleX(1)}
.steps li:nth-child(1){--n:0}.steps li:nth-child(2){--n:1}.steps li:nth-child(3){--n:2}.steps li:nth-child(4){--n:3}
.mo-off .steps li,.mo-off .steps li::after{transition:none}

/* Campaña: composición abstracta de hojas */
.camp-art .fx-layer{z-index:0}
.camp-art .w,.camp-art .bars{position:relative;z-index:1}

/* Contacto: lo importante siempre por encima de la decoración */
.contact .blk,.contact form,.contact .btns,.contact .map{position:relative;z-index:2}

/* Preferencia del sistema: sin movimiento */
@media(prefers-reduced-motion:reduce){
  .fx-in,  .fx{opacity:var(--o,1)!important;transform:none!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}


/* ===== 18. Vista ampliada de la galería (js/main.js) =====
   La foto flota centrada sobre la página desenfocada: sin caja, marco ni barras.
   El tamaño lo da la propia foto; los controles se superponen a ella. */
.pv{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;pointer-events:none;visibility:hidden;transition:visibility 0s .34s}
.pv.open{visibility:visible;transition-delay:0s}
/* El desenfoque vive solo en el overlay; la foto es hermana, nunca hija. */
.pv-ov{position:absolute;inset:0;background:rgba(5,5,6,.6);opacity:0;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:opacity .32s ease,backdrop-filter .4s ease,-webkit-backdrop-filter .4s ease}
.pv.open .pv-ov{opacity:1;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.pv.open .pv-ov{pointer-events:auto;cursor:zoom-out}
.pv-win{position:relative;display:block;line-height:0;opacity:0;transform:scale(.97);transition:opacity .3s ease,transform .34s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.pv.open .pv-win{opacity:1;transform:none;pointer-events:auto}
.pv-win:focus{outline:none}
.pv-img{display:block;width:auto;height:auto;max-width:92vw;max-height:88vh;max-height:88svh;object-fit:contain;transition:opacity .16s ease}
.pv-img.swap{opacity:0}
.pv-count,.pv-close,.pv-nav{position:absolute;z-index:1;background:rgba(0,0,0,.5);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.pv-count{left:10px;top:10px;padding:7px 10px;font:700 12px/1 var(--font);letter-spacing:.12em;border-radius:2px}
.pv-close,.pv-nav{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.3);font:700 18px/1 var(--font);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.pv-close{right:10px;top:10px}
.pv-nav{top:50%;margin-top:-26px;height:52px}
.pv-prev{left:10px}.pv-next{right:10px}
.pv-close:hover,.pv-nav:hover,.pv-close:focus-visible,.pv-nav:focus-visible{background:rgba(252,238,58,.92);color:#000;border-color:var(--y)}
.pv-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 16px 12px;font:400 13px/1.35 var(--font);color:rgba(255,255,255,.9);background:linear-gradient(to top,rgba(0,0,0,.6),rgba(0,0,0,0));pointer-events:none}
.pv-cap strong{display:block;margin-bottom:2px;font:800 11px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase;color:#fff}
body.pv-lock{overflow:hidden}
@media(max-width:600px){.pv-img{max-width:98vw;max-height:90vh;max-height:90svh}.pv-nav{height:56px}.pv-cap{padding:36px 12px 10px;font-size:12px}}
.mo-off .pv-ov,.mo-off .pv-win,.mo-off .pv-img{transition:none}
@media(prefers-reduced-motion:reduce){.pv,.pv-ov,.pv-win,.pv-img{transition:none!important}}

/* ===== 19. Cinta informativa (marquee) ===== */
.marquee{overflow:hidden;background:#000;border-block:2px solid var(--line);position:relative;--mq-t:65s}
.mq-track{display:flex;width:max-content;animation:mq var(--mq-t) linear infinite;will-change:transform}
.mq-group{display:flex;align-items:center;flex:none;list-style:none;padding:0;margin:0}
.mq-group li{display:flex;align-items:center;flex:none;gap:28px;padding-right:28px;font:800 clamp(14px,1.4vw,18px)/1 var(--font);letter-spacing:.16em;color:#fff;white-space:nowrap;height:64px}
.mq-blk{display:inline-flex;gap:4px;flex:none}
.mq-blk b{display:block;width:10px;height:10px}
.mq-blk b:nth-child(1){background:var(--c)}.mq-blk b:nth-child(2){background:var(--m)}.mq-blk b:nth-child(3){background:var(--y)}
.mq-reg{width:22px;height:22px;flex:none;opacity:.85}
@keyframes mq{to{transform:translateX(-50%)}}
/* La cinta superior (.rev) corre hacia la derecha; la inferior, hacia la izquierda */
.marquee.rev .mq-track{animation-direction:reverse}
@media(hover:hover){.marquee:hover .mq-track{animation-play-state:paused}}
.marquee:focus-within .mq-track{animation-play-state:paused}
@media(max-width:600px){.marquee{--mq-t:42s}.mq-group li{height:54px;gap:20px;padding-right:20px}}
/* Sin movimiento: distribución estática y legible */
@media(prefers-reduced-motion:reduce){
  .mq-track{animation:none;width:auto;flex-direction:column}
  .mq-group{flex-wrap:wrap;justify-content:center;row-gap:0;padding:8px var(--pad)}
  .mq-group+.mq-group{display:none}
  .mq-group li{height:44px}
}
.mo-off .mq-track{animation:none;width:auto;flex-direction:column}
.mo-off .mq-group{flex-wrap:wrap;justify-content:center;padding:8px var(--pad)}
.mo-off .mq-group+.mq-group{display:none}
.mo-off .mq-group li{height:44px}

/* ===== 20. Hero: fotografías estáticas con zoom interno al pasar el cursor ===== */
.collage figure{overflow:hidden}
.collage img{transform:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover) and (pointer:fine){.collage figure:hover img{transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){.collage img{transition:none}}

/* ===== 21. Móvil (≤600 px): composición propia, no una versión reducida del escritorio =====
   Ritmo: márgenes 20 px · secciones 48 px · tarjetas 16 px · botones ≥48 px.
   Decoración flotante, parallax e inclinaciones 3D fuera; queda la cinta y los fundidos suaves. */
@media(max-width:600px){
  :root{--pad:20px;--hh:60px}
  body{font-size:15px}
  section{padding:48px 0}
  h2{font-size:clamp(28px,8.4vw,34px)}
  .lead{font-size:15px}
  .sec-head{margin-bottom:24px;gap:12px}
  .eyebrow{font-size:11px;letter-spacing:.14em;margin-bottom:12px}
  .btn{min-height:48px}
  .fx-layer,
  /* Encabezado */
  .logo img{height:30px;width:auto}
  .menu-btn{height:44px;min-width:84px}
  nav.main a{min-height:52px;display:flex;align-items:center;padding:0 var(--pad)}

  /* Hero: identidad → titular → texto → CTA → fotos */
  .hero{padding:22px 0 0}
  .hero .grid{gap:22px}
  .hero .eyebrow{font-size:10.5px;letter-spacing:.1em}
  .hero h1{font-size:clamp(26px,8.8vw,36px);line-height:1.1;margin-bottom:18px}
  .hero .lead{font-size:15px;margin-bottom:22px}
  .hero .cta{flex-direction:column;gap:10px}
  .hero .cta .btn{width:100%}
  .hero .tag{margin-top:18px;font-size:11px;letter-spacing:.12em}
  .collage{grid-template-columns:repeat(3,1fr);grid-template-rows:auto;gap:10px;aspect-ratio:auto}
  .collage figure{border-width:2px;box-shadow:3px 3px 0 #000}
  .collage .a{grid-area:1/1/2/4;aspect-ratio:4/3}
  .collage .b{grid-area:2/1/3/2;aspect-ratio:1/1}
  .collage .c{grid-area:2/2/3/3;aspect-ratio:1/1}
  .collage .d{grid-area:2/3/3/4;aspect-ratio:1/1}
  .collage .e{display:none}
  .cmyk-bar{margin-top:28px;height:10px}

  /* Información comercial: cuadrícula compacta de 2 columnas */
  .trust .row{grid-template-columns:1fr 1fr;gap:2px}
  .trust .cell{padding:14px 16px}
  .trust .cell:nth-child(n+3){grid-column:1/-1}
  .trust small{font-size:10px;margin-bottom:6px}
  .trust strong{font-size:15px}
  .trust span{font-size:13px;margin-top:2px}
  .trust .hrs{gap:5px}
  .trust .hrs p{grid-template-columns:78px 1fr}
  .trust .hrs span{font-size:14px}

  /* Cinta informativa */
  .marquee{--mq-t:40s}
  .mq-group li{height:44px;font-size:13px;gap:16px;padding-right:16px;letter-spacing:.12em}
  .mq-reg{display:none}
  .mq-blk b{width:7px;height:7px}

  /* Servicios: tarjetas compactas, fotos 16:9, servicios en texto corrido */
  .svc{gap:16px}
  .card .ph{flex:none;aspect-ratio:16/9;min-height:0}
  .card .num{font-size:15px;padding:8px 10px}
  .card .bd{padding:16px 18px 18px;gap:8px}
  .card h3{font-size:20px;max-width:none}
  .card p{font-size:14px}
  .card ul{display:block;line-height:1.5}
  .card li{display:inline;border:0;padding:0;font:600 12px/1.5 var(--font);letter-spacing:.02em;color:var(--g2);text-transform:none}
  .card li:not(:last-child)::after{content:" · "}
  .card .btn{align-self:stretch;width:100%;margin-top:6px}
  .s5{flex-direction:row;align-items:stretch}
  .s5 .ph{flex:none;width:104px;aspect-ratio:auto;border-right:2px solid var(--line);border-bottom:0}
  .s5 .bd{padding:14px 16px}
  .s5 .btn{width:auto;align-self:flex-start;min-height:44px}

  /* Galería: filtros en una sola fila deslizable, fotos en 2 columnas */
  .works .sec-head{margin-bottom:16px}
  .filters{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 calc(-1*var(--pad)) 16px;padding:2px var(--pad) 8px;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .filters::-webkit-scrollbar{display:none}
  .filters button{flex:none;min-height:42px;padding:0 14px;font-size:12px;white-space:nowrap;scroll-snap-align:center}
  .masonry{gap:12px}
  .tile{transform:none;transition:none;box-shadow:3px 3px 0 #000}
  .tile::after{display:none}
  .tile .cap{font-size:9px;padding:6px 7px}
  .credit{font-size:12px;margin-top:16px}

  /* Campaña: mensaje → público → botón → composición decorativa */
  .camp{padding:32px 0}
  .camp .box{border-width:2px;box-shadow:5px 5px 0 var(--m)}
  .camp .txt{padding:20px 18px}
  .badge{margin-bottom:14px}
  .camp h2{font-size:clamp(24px,7vw,30px);margin-bottom:12px}
  .camp .lead{font-size:14.5px}
  .camp ul{display:block;margin:14px 0 18px;line-height:1.7}
  .camp li{display:inline;border:0;padding:0;font:600 13px/1.7 var(--font);letter-spacing:0;text-transform:none;color:var(--g1)}
  .camp li:not(:last-child)::after{content:" · ";color:var(--g3)}
  .camp .btn{width:100%;font-size:13px;letter-spacing:.05em}
  .camp-art{min-height:0;padding:16px 18px;gap:2px;border-top:2px solid #fff}
  .camp-art .w{font-size:clamp(20px,6.2vw,26px)}
  .camp-art .bars{margin-top:10px;height:8px}
  .camp-art.has-photo{aspect-ratio:1/1;min-height:0;padding:0}
  .camp .papeles{margin:14px 0 0;font-size:13.5px}

  /* Segmentos: acordeón (un perfil abierto a la vez) */
  .seg{display:block;border:0}
  .seg article{display:block;padding:0;min-height:0;margin-bottom:10px;border:2px solid var(--line)}
  .seg article::before{height:4px}
  .seg-t{flex-direction:row;align-items:center;gap:12px;padding:16px 16px 14px;min-height:56px;cursor:pointer}
  .seg .n{font-size:22px;min-width:30px}
  .seg .t{flex:1;font-size:15px;line-height:1.2}
  .seg .pl{display:block;flex:none;position:relative;width:30px;height:30px;border:2px solid #fff}
  .seg .pl::before,.seg .pl::after{content:"";position:absolute;left:50%;top:50%;background:#fff;transform:translate(-50%,-50%)}
  .seg .pl::before{width:12px;height:2px}
  .seg .pl::after{width:2px;height:12px;transition:transform .2s}
  .seg-t[aria-expanded=true] .pl::after{transform:translate(-50%,-50%) scaleY(0)}
  .seg-p{padding:0 16px 16px;gap:10px}
  .seg .go{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:6px;min-height:48px;padding:0 14px;border:2px solid var(--bar);text-align:center}

  /* Proceso: línea de tiempo vertical */
  .proc .sec-head{margin-bottom:20px}
  .steps{display:block}
  .steps li{display:block;margin-left:17px;padding:0 0 22px 28px;border-top:0;border-left:3px solid var(--bar)}
  .steps li:last-child{padding-bottom:0}
  .steps li::before{position:absolute;left:-17px;top:-2px;display:grid;place-items:center;width:30px;height:30px;margin:0;background:var(--bar);color:#000;font:900 13px/1 var(--font)}
  .steps h3{font-size:16px;line-height:1.25;padding-top:3px}
  .mo-on .steps[data-draw] li{border-left-color:transparent}
  .mo-on .steps[data-draw] li::after{left:-3px;right:auto;top:0;bottom:0;width:3px;height:auto;transform:scaleY(0);transform-origin:top}
  .mo-on .steps[data-draw].in li::after{transform:scaleY(1)}
  .proc .cta{margin-top:24px!important}
  .proc .cta .btn{width:100%}

  /* Opiniones */
  .rev{gap:14px}
  .trustmsg,.score{padding:18px;border-width:2px;box-shadow:4px 4px 0 #000}
  .trustmsg{display:grid;gap:10px}
  .trustmsg p{font-size:15px;margin-bottom:4px}
  .trustmsg .btn{width:100%}
  .score .big{font-size:56px}
  .themes{grid-template-columns:1fr 1fr;gap:10px}
  .themes div{padding:12px}
  .themes b{font-size:13px;margin-bottom:4px}
  .themes p{font-size:12px;line-height:1.35}

  /* Nosotros: dos fotos a todo el ancho, sin parallax */
  .about{gap:22px}
  .about .imgs{grid-template-columns:1fr;gap:14px}
  .about .imgs .c1{aspect-ratio:658/636}
  .about .imgs .c2{aspect-ratio:1/1}
  .about .imgs .c2 img{object-position:center 58%}
  .about .px img{transform:none!important}
  .about li{font-size:14.5px}

  /* Preguntas frecuentes */
  .faq summary{padding:14px 0;min-height:52px;gap:14px;font-size:14.5px;line-height:1.3}
  .faq summary::after{width:32px;height:32px;font-size:20px}
  .faq details .a{padding:0 4px 18px 0;font-size:14.5px}

  /* Contacto: WhatsApp primero, formulario secundario, mapa compacto */
  .contact{padding:44px 0 36px}
  .contact h2{font-size:clamp(30px,9vw,38px);margin-bottom:18px}
  .cta-main{display:flex;width:100%;min-height:56px;margin-bottom:18px;font-size:15px;background:#000;border-color:#000;color:#fff;box-shadow:4px 4px 0 var(--m)}
  .cta-main .wa-ico{color:var(--y)}
  .cgrid{gap:16px}
  .info{gap:12px}
  .blk{padding:14px 16px;box-shadow:4px 4px 0 var(--m)}
  .blk small{margin-bottom:6px}
  .blk strong{font-size:16px}
  .blk .tel{font-size:26px}
  .hours{font-size:13.5px}
  .btns{display:grid;grid-template-columns:1fr;gap:10px}
  .btns [data-cfg=wa]{display:none}
  .form-acc{background:#fff;border:3px solid #000;box-shadow:4px 4px 0 #000}
  .form-acc>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:12px 16px;cursor:pointer;list-style:none;font:800 14px/1.25 var(--font);text-transform:uppercase;color:#000}
  .form-acc>summary::-webkit-details-marker{display:none}
  .form-acc>summary::after{content:"+";flex:none;width:32px;height:32px;display:grid;place-items:center;border:2px solid #000;font-size:20px}
  .form-acc[open]>summary::after{content:"–";background:#000;color:#fff}
  .form-acc form{border:0;box-shadow:none;padding:4px 16px 18px;gap:14px}
  .form-acc form h3{display:none}
  .map{margin-top:16px;box-shadow:4px 4px 0 #000}
  .map iframe{height:230px}

  /* Pie: una columna con separaciones claras */
  footer{padding:36px 0 84px}
  .fg{grid-template-columns:1fr;gap:0}
  .fg>div{padding:18px 0;border-top:1px solid var(--line)}
  .fg>div:first-child{border-top:0;padding-top:0}
  footer img{height:34px;margin-bottom:10px}
  .ft-h{margin-bottom:8px}
  footer ul{display:flex;flex-wrap:wrap;gap:0 20px}
  footer li{font-size:14px}
  footer li a{padding:9px 0}
  .fg>div:nth-child(4) ul{display:grid}
  .copy{margin-top:20px;padding-top:16px;font-size:12px}

  /* Botón flotante compacto, con zona segura y oculto mientras se escribe */
  .float{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));width:52px;min-height:52px;padding:0;justify-content:center;border-width:2px;box-shadow:3px 3px 0 #000}
  .float span{display:none}
  .float svg{width:26px;height:26px}
}
.hours .ch{white-space:nowrap}
@media(max-width:860px){.contact .fx-layer{display:none}}
@media(max-width:600px){.btn.arrow::after{display:none}}
/* Pantallas muy angostas: bloques a ancho completo, botones de texto más ajustado */
@media(max-width:380px){
  .hours td{display:block}
  .hours td:last-child{text-align:left}
  .hours tr{display:block;padding:5px 0;border-bottom:1px solid #333}
  .hours td{border:0;padding:1px 0}
}
@media(max-width:359px){
  .collage{grid-template-columns:1fr 1fr}
  .collage .a{grid-area:1/1/2/3}
  .collage .b{grid-area:2/1/3/2}
  .collage .c{grid-area:2/2/3/3}
  .collage .d{display:none}
  .trust .cell{grid-column:1/-1}
  .btn{letter-spacing:.04em;font-size:13px}
  .btns{grid-template-columns:1fr}
}
.float{transition:transform .12s,box-shadow .12s,opacity .2s}
.float.oculto{opacity:0;pointer-events:none;transform:translateY(24px)}
/* Táctil: sin inclinación 3D ni zoom por hover */
.mo-touch .tile{transform:none;transition:none}
@media(hover:none){.tile:hover img{transform:none}.tile:hover::after{border-color:transparent}}

/* Títulos de sección más descriptivos (SEO): más largos, tamaño algo menor */
.h2-l{font-size:clamp(28px,4.4vw,56px);line-height:1;max-width:18ch}
@media(max-width:600px){.h2-l{font-size:clamp(26px,7.6vw,32px);max-width:none}}

/* Lema sobre el H1 del hero */
.hero .slogan{margin:0 0 10px;font:800 14px/1.3 var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--g1)}
@media(max-width:600px){.hero .slogan{font-size:12px;letter-spacing:.1em;margin-bottom:8px}}

/* Reseñas de Google: bloque de confianza (sin cifras ni testimonios) */
.g-brand{display:flex;align-items:center;gap:12px;margin:0 0 14px!important;font:800 13px/1 var(--font)!important;letter-spacing:.16em;text-transform:uppercase;color:#fff!important}
.g-mark{display:grid;place-items:center;width:34px;height:34px;background:#fff;color:#000;font:900 20px/1 var(--font);letter-spacing:0;border:2px solid #000;box-shadow:3px 3px 0 var(--m)}
.trustmsg .g-sub{color:var(--g2)!important;font-size:15px!important}
.rev-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
@media(max-width:600px){.rev-btns{flex-direction:column;gap:10px}.rev-btns .btn{width:100%}.g-brand{font-size:12px!important}}
/* Título de opiniones: más ancho en escritorio para no apilarse en 5 líneas */
@media(min-width:601px){.h2-op{font-size:clamp(30px,3.7vw,52px);max-width:46ch;line-height:1.02}}