/* ==========================================================
   Immediate Solutions YJ · estilos
   Aquí viven los colores, las letras y las piezas de la página.
   ========================================================== */

/* ---------- Letras (guardadas en la carpeta fonts) ---------- */
@font-face{font-family:"Barlow";src:url("../fonts/barlow-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow";src:url("../fonts/barlow-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("../fonts/barlow-condensed-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Architects Daughter";src:url("../fonts/architects-daughter-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ---------- Colores y medidas ---------- */
:root{
  --paper:#ffffff;       /* fondo blanco */
  --ink:#2a2933;         /* oscuro del logo: líneas, letras y franjas */
  --ink-soft:#5d5c68;    /* texto secundario */
  --accent:#c5532a;      /* naranja ladrillo del logo: teléfono, botón de llamar y números */
  --accent-deep:#a84420; /* naranja más oscuro: letras pequeñas y al pasar el cursor */
  --tint:#fbe9e1;        /* naranja muy claro para resaltar */
  --wash:rgba(42,41,51,.06);
  --m:clamp(8px,1.3vw,18px);
  --pad:clamp(1rem,2.6vw,2rem);
  --gap:clamp(1rem,2.2vw,2rem);
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --text:"Barlow","Helvetica Neue",Arial,sans-serif;
  --hand:"Architects Daughter","Bradley Hand",cursive;
  --ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--ink) var(--paper);scroll-padding-top:1rem}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.6 var(--text);font-variant-numeric:tabular-nums;caret-color:var(--accent);-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
::selection{background:var(--tint);color:var(--ink)}
:focus-visible{outline:3px solid var(--accent-deep);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--paper)}
::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper)}

/* Idiomas: cada texto está escrito dos veces y aquí se esconde el que no toca */
html[lang="en"] [lang="es"],html[lang="es"] [lang="en"]{display:none!important}

.skip{position:absolute;left:-999rem;top:.5rem;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:50}
.skip:focus{left:.5rem}

/* ---------- La hoja ---------- */
.sheet{margin:var(--m);border:2px solid var(--ink);min-height:calc(100vh - 2*var(--m))}

/* ---------- Barra superior ---------- */
.bar{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem 1.4rem;padding:.7rem var(--pad);border-bottom:2px solid var(--ink)}
.brand{display:block;margin-right:auto}
.brand img{height:2.75rem;width:auto}
.nav{display:flex;flex-wrap:wrap;gap:.2rem .3rem;margin:0 auto 0 -.6rem}
.nav a{display:block;padding:.4rem .6rem;font:600 .82rem/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.nav a:hover{text-decoration:underline;text-decoration-thickness:2px}
.lang{display:inline-flex;border:2px solid var(--ink)}
.lang button{border:0;background:none;padding:.3rem .6rem;font:600 .82rem/1.2 var(--text);letter-spacing:.08em;cursor:pointer}
.lang button:hover{background:var(--wash)}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.7rem 1.15rem;border:2px solid currentColor;background:transparent;color:inherit;font:700 1.4rem/1 var(--display);letter-spacing:.01em;text-decoration:none;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn:active{transform:translateY(1px)}
.btn--call{background:var(--accent);border-color:var(--accent);color:#fff}
.btn--call:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff}
.btn--block{display:flex;width:100%}
.btn--ink{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--paper);border-color:var(--ink);color:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.3rem}
.btn-stack{display:grid;gap:.5rem}
.tb .btn{padding-inline:.6rem;font-size:1.25rem;white-space:nowrap}
.on-ink .btn:not(.btn--call):hover{background:var(--paper);border-color:var(--paper);color:var(--ink)}
.ico{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Primera pantalla: hoja de plano ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:min(calc(100svh - 2*var(--m) - 4px),66rem)}
.hero-main{display:flex;flex-direction:column;min-width:0;border-right:2px solid var(--ink);container-type:inline-size}

/* El teléfono, bien grande, es el botón principal */
.tel-band{display:grid;grid-template-columns:auto minmax(0,auto);grid-template-areas:"tel note" "tel2 tel2";justify-content:start;align-items:end;gap:.35rem 1.6rem;padding:1.15rem var(--pad) .8rem;border-bottom:2px solid var(--ink)}
.tel{grid-area:tel;display:block;font:700 clamp(3.4rem,11vw,10rem)/.82 var(--display);letter-spacing:-.01em;color:var(--accent);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
@supports (font-size:1cqi){.tel{font-size:min(10rem,14.2cqi)}}
.tel:hover{color:var(--accent-deep)}
/* La segunda línea va justo debajo, a un tercio del tamaño. Al tocarla, llama. */
/* Debajo del número principal: a la izquierda la segunda línea, a la derecha el horario */
.tel-sub{grid-area:tel2;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 2rem;font:500 clamp(1rem,1.9vw,1.35rem)/1.2 var(--text)}
.tel2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4em}
.tel2 a{font:700 clamp(1.3rem,3.6vw,3.33rem)/1 var(--display);letter-spacing:-.005em;color:var(--accent);text-decoration:none;white-space:nowrap;transition:color .2s var(--ease)}
@supports (font-size:1cqi){.tel-sub{font-size:clamp(1rem,1.9cqi,1.35rem)}.tel2 a{font-size:min(3.33rem,4.73cqi)}}
.tel2 a:hover{color:var(--accent-deep)}

/* Nota a mano con lápiz rojo */
.hand{font:400 1.3rem/1.32 var(--hand);color:var(--accent-deep);transform:rotate(-1.6deg);transform-origin:0 50%;max-width:34ch}
.hand--arrow{display:flex;align-items:flex-start;gap:.6rem}
.hand--arrow svg{flex:none;width:2.6rem;height:2rem;margin-top:.15rem;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.tel-note{grid-area:note;min-width:0;max-width:22ch;padding-bottom:.9rem}

.hero-body{flex:1;display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"head sched" "draw draw";gap:1.2rem var(--gap);padding:clamp(1.1rem,2.2vw,1.6rem) var(--pad) .9rem}
.hero-head{grid-area:head;min-width:0}
.h1{max-width:9.6em;font:700 clamp(2.3rem,4.4vw,3.7rem)/.92 var(--display);letter-spacing:-.01em;text-wrap:balance}
@supports (font-size:1cqi){.h1{font-size:clamp(2.3rem,5.6cqi,3.7rem)}html[lang="es"] .h1{font-size:clamp(2.1rem,4.8cqi,3.2rem)}}
.h1 > span,.h1 > span > span{display:block}
.h1 .acc{color:var(--accent)}
.promise{display:flex;flex-wrap:wrap;gap:.45rem;width:0;min-width:100%;margin-top:1rem;font:600 1.4rem/1.1 var(--display)}
.hl{background:var(--tint);color:var(--ink);padding:.2em .5em}

/* Lista de servicios numerada */
.sched{grid-area:sched;align-self:start;border:2px solid var(--ink);background:var(--paper)}
.sched-h{background:var(--ink);color:var(--paper);padding:.5rem .85rem;font:600 .82rem/1.2 var(--text);letter-spacing:.14em;text-transform:uppercase}
.sched ol{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto);grid-auto-flow:column}
.sched ol::before{content:"";position:absolute;left:50%;top:0;bottom:0;border-left:1px solid var(--ink)}
.sched li{border-top:1px solid var(--ink)}
.sched li:nth-child(5n+1){border-top:0}
.sched a{display:flex;align-items:center;gap:.8rem;width:100%;min-height:2.2rem;padding:.25rem .85rem;text-decoration:none;font:600 1.3rem/1.2 var(--display);transition:background-color .2s var(--ease)}
.sched a:hover,.sched .is-on{background:var(--wash)}
.no{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--accent);color:#fff;font:600 1rem/1 var(--text)}

/* El dibujo de la casa (hay uno para pantalla grande y otro para celular) */
.drawing{grid-area:draw;align-self:end;min-width:0}
/* Reglas del dibujo: dos grosores de línea (grueso .ln y fino .lt) que no cambian aunque el dibujo se achique,
   remates redondos en todas partes y tres colores (tinta, naranja y el blanco del papel).
   El dibujo lo escribe herramientas/dibujo.py. */
.house{width:100%;height:auto;color:var(--ink);font-family:var(--text);fill:none;--ln:2.4px;--lt:1.2px}
.house--d{max-height:max(12rem,calc(100svh - 38.5rem))}
.house--m{display:none;--ln:2px;--lt:1px}
.house .ln,.house .lt{stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.house .ln{stroke-width:var(--ln)}
.house .lt{stroke-width:var(--lt)}
.house .if{fill:currentColor;stroke:none}
.house .pf{fill:var(--paper)}
.house .dim{fill:currentColor;stroke:none;font-weight:600;font-size:16px}
.house--m .dim{font-size:15px}
.house .acc{stroke:var(--accent);stroke-width:var(--ln);stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.house .acc.lt{stroke:var(--accent);stroke-width:var(--lt)}
.house .co{cursor:pointer}
.house .co circle{fill:var(--accent);stroke:var(--paper);stroke-width:var(--ln);vector-effect:non-scaling-stroke;transition:r .25s var(--ease)}
.house .co .hit{fill:transparent;stroke:none}
.house .co text{fill:#fff;font-weight:600;font-size:17px;text-anchor:middle;pointer-events:none}
.house--d .co:hover circle:not(.hit),.house--d .co.is-on circle:not(.hit){r:17px}
.house--m .co text{font-size:19px}
.house a:focus-visible{outline:none}
.house a:focus-visible circle:not(.hit),.house a:focus-visible rect{stroke:var(--ink);stroke-width:4}

/* Cajetín (la columna de la derecha del plano) */
.tb{display:flex;flex-direction:column;min-width:0}
.tb-cell{padding:1.1rem 1.25rem;border-bottom:2px solid var(--ink)}
.tb-cell:last-child{border-bottom:0}
.tb-logo{padding:1.4rem 1.6rem 1.1rem}
.logo{width:100%;height:auto}
.tagline{margin-top:.5rem;font:600 1.3rem/1.3 var(--display)}
.about{display:grid;gap:.4rem;margin-top:.75rem;font-size:1rem;line-height:1.35}
.about li{display:grid;grid-template-columns:1rem 1fr}
.about li::before{content:"";width:.45rem;height:.45rem;margin-top:.45em;background:var(--accent)}
.label{font:600 .8rem/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase}
.line2{display:block;margin-top:1rem;text-decoration:none}
.line2 b{display:block;font:600 1.02rem/1.3 var(--text);overflow-wrap:anywhere}
.line2:hover b{text-decoration:underline;text-decoration-thickness:2px}
.line2--tel b{font:700 1.6rem/1.1 var(--display)}
/* Horario debajo de los botones del bloque oscuro */
.hours-line{margin-top:1.1rem;font:600 1.02rem/1.3 var(--text)}

/* ---------- Secciones ---------- */
.sec{padding:clamp(3.2rem,7vw,6rem) var(--pad) clamp(2.6rem,5.5vw,4.6rem);border-top:2px solid var(--ink)}
.sec--ink{background:var(--ink);color:var(--paper)}
.sec--tint{background:var(--tint)}
.on-ink :focus-visible,.dock a:focus-visible{outline-color:#fff}
.dock a:nth-child(2):focus-visible{outline-color:var(--accent-deep)}
.dock a:focus-visible{outline-offset:-6px}
.dt{display:grid;gap:.9rem;margin-bottom:clamp(1.6rem,3.2vw,2.6rem)}
.dt h2{font:700 clamp(2.5rem,5.4vw,4.4rem)/.95 var(--display);letter-spacing:-.005em;text-wrap:balance;padding-bottom:.3em;border-bottom:2px solid currentColor;position:relative}
.dt h2::after{content:"";position:absolute;left:0;top:100%;width:min(9rem,30%);height:8px;background:currentColor}
.dt p{max-width:62ch;font-size:1.15rem;line-height:1.5}
.sec-note{margin-top:1.6rem}

/* Tabla de servicios */
.svc{border:2px solid var(--ink)}
.svc-row{display:grid;grid-template-columns:2.4rem 4.6rem minmax(10rem,24rem) minmax(0,1fr);gap:.4rem 1.3rem;align-items:center;padding:1rem 1.1rem;scroll-margin-top:1rem}
.svc-row + .svc-row{border-top:1px solid var(--ink)}
.svc-row h3{font:700 1.7rem/1.05 var(--display)}
.svc-row p{max-width:58ch;text-wrap:balance}
.svc-row:target{background:var(--wash)}
.hatch{width:4.6rem;height:3.1rem;border:2px solid var(--ink);background-color:var(--paper);background-repeat:repeat}
.hatch--paint{background:linear-gradient(100deg,var(--ink) 64%,transparent 64.5%)}
.hatch--frame{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10'%3E%3Cpath d='M4 0v10M9 0v10' stroke='%232a2933' stroke-width='1.4'/%3E%3C/svg%3E");box-shadow:inset 0 5px 0 var(--paper),inset 0 7px 0 var(--ink),inset 0 -5px 0 var(--paper),inset 0 -7px 0 var(--ink)}
.hatch--floor{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='18'%3E%3Cpath d='M0 .6h40M0 9.6h40M10 0v9M30 9v9' stroke='%232a2933' stroke-width='1.2' fill='none'/%3E%3C/svg%3E")}
.hatch--tile{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M13 .6H.6V13' stroke='%232a2933' stroke-width='1.2' fill='none'/%3E%3C/svg%3E")}
.hatch--cab{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36'%3E%3Crect x='7' y='5' width='46' height='26' fill='none' stroke='%232a2933' stroke-width='2'/%3E%3Cpath d='M30 5v26' stroke='%232a2933' stroke-width='1.5'/%3E%3Ccircle cx='26' cy='18' r='1.7' fill='%232a2933'/%3E%3Ccircle cx='34' cy='18' r='1.7' fill='%232a2933'/%3E%3C/svg%3E") center/contain no-repeat}
.hatch--window{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36'%3E%3Crect x='17' y='5' width='26' height='26' fill='none' stroke='%232a2933' stroke-width='2'/%3E%3Cpath d='M30 5v26M17 18h26' stroke='%232a2933' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat}
.hatch--pergola{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36'%3E%3Cpath d='M7 13h46M14 13v19M46 13v19M11 13V8M19 13V8M27 13V8M35 13V8M43 13V8M51 13V8' fill='none' stroke='%232a2933' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat}
.hatch--insul{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='36'%3E%3Cpath d='M4 18q3.25-18 6.5 0t6.5 0t6.5 0t6.5 0t6.5 0t6.5 0t6.5 0t6.5 0' fill='none' stroke='%232a2933' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.hatch--conc{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%232a2933'%3E%3Ccircle cx='3' cy='4' r='1.1'/%3E%3Ccircle cx='12' cy='11' r='1.1'/%3E%3Ccircle cx='15' cy='3' r='.8'/%3E%3C/g%3E%3Cpath d='M5 15l1.8-3 1.8 3z' fill='none' stroke='%232a2933' stroke-width='.9'/%3E%3C/svg%3E")}

/* (Sin uso por ahora: la sección de fotos se quitó hasta tener fotos reales.)
   Antes y después: espacios para las fotos reales.
   Cuando exista la foto (por ejemplo img/trabajo-1-antes.jpg) tapa el espacio de muestra. */
.jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.job{border:2px solid var(--ink);min-width:0}
.job--lead{grid-column:1/-1}
.ba{display:grid;grid-template-columns:1fr 1fr}
.slot{position:relative;aspect-ratio:4/3;overflow:hidden;background:
  linear-gradient(to top right,transparent calc(50% - .8px),var(--ink) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px)),
  linear-gradient(to bottom right,transparent calc(50% - .8px),var(--ink) calc(50% - .8px) calc(50% + .8px),transparent calc(50% + .8px)),
  var(--paper)}
.slot + .slot{border-left:2px solid var(--ink)}
.job--lead .slot{aspect-ratio:16/9}
.slot img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover}
.slot-tag{position:absolute;left:0;top:0;z-index:2;background:var(--ink);color:var(--paper);padding:.3rem .7rem;font:600 .8rem/1.3 var(--text);letter-spacing:.12em;text-transform:uppercase}
.slot-note{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper);padding:.3rem .7rem;font:600 .8rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.job figcaption{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.3rem 1rem;padding:.5rem .7rem;border-top:2px solid var(--ink);font:600 .8rem/1.35 var(--text);letter-spacing:.1em;text-transform:uppercase}

/* Reseñas reales de Google (el texto de cada reseña no se cambia ni se traduce) */
.revs{border:2px solid var(--ink)}
.rev{display:grid;grid-template-columns:minmax(9rem,14rem) minmax(0,1fr);gap:.7rem 2rem;align-items:start;padding:1.4rem 1.3rem}
.rev + .rev{border-top:1px solid var(--ink)}
.rev-who{display:grid;gap:.5rem;justify-items:start}
.rev-who b{font:700 1.7rem/1.05 var(--display)}
.rev blockquote{max-width:62ch;font-size:1.25rem;line-height:1.5}
.rev blockquote::before{content:"\201C"}
.rev blockquote::after{content:"\201D"}
.stars{display:inline-flex;gap:.12rem;color:var(--accent)}
.stars svg{width:1.15rem;height:1.15rem;fill:currentColor}
.rev-foot{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 2.2rem;margin-top:1.5rem}
.rating{display:flex;align-items:center;gap:.7rem;font:700 1.9rem/1.1 var(--display)}
.rating .stars svg{width:1.5rem;height:1.5rem}
.rev-note{flex-basis:100%;max-width:62ch;color:var(--ink-soft)}
.more{position:relative;display:inline-flex;align-items:center;gap:.45rem;padding-bottom:.1rem;border-bottom:2px solid var(--accent);font:700 1.3rem/1.15 var(--display);text-decoration:none;transition:gap .2s var(--ease)}
.more::after{content:"";position:absolute;inset:-.7rem -.4rem}
.more:hover{gap:.75rem}

/* Contacto */
.contact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1.6rem,5vw,4.5rem);align-items:end}
.bignum{display:inline-block;font:700 clamp(2.6rem,15.5vw,6rem)/.9 var(--display);letter-spacing:-.01em;text-decoration:none;white-space:nowrap}
.bignum:hover{text-decoration:underline;text-decoration-thickness:4px;text-underline-offset:.12em}
/* Segunda línea en el bloque oscuro: mismo estilo que el número grande, a un tercio del tamaño */
.bignum2{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 .4em;margin-top:.55rem;font:500 clamp(1rem,2.2vw,1.2rem)/1.2 var(--text)}
.bignum2 a{font:700 clamp(1.45rem,5.2vw,2rem)/1 var(--display);letter-spacing:-.005em;text-decoration:none;white-space:nowrap}
.bignum2 a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em}
.contact-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.5rem}
.facts{border:2px solid currentColor}
.facts div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:1rem;padding:.7rem .9rem}
.facts div + div{border-top:1px solid currentColor}
.facts dt{font:600 .8rem/1.5 var(--text);letter-spacing:.12em;text-transform:uppercase;padding-top:.15rem}
.facts dd{overflow-wrap:anywhere}
.facts dd a{text-decoration-thickness:1.5px}

/* Ciudades por zona */
.zones{border:2px solid var(--ink)}
.zones div{display:grid;grid-template-columns:11rem minmax(0,1fr);gap:1rem;align-items:baseline;padding:.85rem 1.1rem}
.zones div + div{border-top:1px solid var(--ink)}
.zones dt{font:600 .8rem/1.5 var(--text);letter-spacing:.12em;text-transform:uppercase}
.zones dd{font-size:1.15rem;line-height:1.5}
.zones .zones-more{grid-template-columns:minmax(0,1fr)}
.zones-far{max-width:62ch;margin-top:1.3rem;font-size:1.15rem;line-height:1.5}
.zones-far a{font-weight:600;text-decoration-thickness:2px;text-decoration-color:var(--accent)}

/* Pie de página: cajetín final */
.foot{display:grid;grid-template-columns:1.3fr 1fr 1fr;border-top:2px solid var(--ink)}
.foot > div{padding:1.1rem var(--pad);border-right:2px solid var(--ink);display:grid;gap:.3rem;align-content:start}
.foot > div:nth-child(3){border-right:0}
.foot-logo{width:9.5rem;height:auto;margin-bottom:.5rem}
.foot-mail{overflow-wrap:anywhere}
.foot-hours{padding-top:.35rem}
.legal{grid-column:1/-1;padding:.75rem var(--pad);border-top:2px solid var(--ink);font-size:.82rem;line-height:1.4}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}

/* Barra fija del celular: llamar siempre a la mano */
.dock{display:none}

/* ---------- Pantallas medianas ---------- */
@media (min-width:1081px){.hero .brand{display:none}}
/* Computadoras con pantalla bajita (laptops): todo un poco más compacto para que quepa */
@media (min-width:1081px) and (max-height:800px){
  .tel-band{padding-top:.9rem;padding-bottom:.6rem}
  .tel{font-size:min(8rem,12cqi)}
  .tel2 a{font-size:min(2.67rem,4cqi)}
  .h1{font-size:clamp(2.3rem,4.6cqi,3.1rem)}
  html[lang="es"] .h1{font-size:clamp(2.1rem,4.1cqi,2.8rem)}
  .promise{margin-top:.8rem;font-size:1.3rem}
  .house--d{max-height:max(13rem,calc(100svh - 35rem))}
}
/* En pantallas no muy altas, el logo de la columna derecha va más chico para que esa columna no empuje la primera pantalla */
@media (min-width:1081px) and (max-height:880px){
  .tb-logo{padding:.8rem 3.4rem .6rem}
  .tb-cell:not(.tb-logo){padding-block:.85rem}
  .line2{margin-top:.75rem}
}
@media (max-width:1080px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-main{border-right:0}
  .house--d{max-height:none}
  .tb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;background:var(--ink);border-top:2px solid var(--ink)}
  .tb .tb-cell{background:var(--paper);border:0;margin-top:0}
  .tb .tb-cell:nth-child(1){display:none}
  .svc-row{grid-template-columns:2.4rem 4.6rem minmax(0,1fr)}
  .svc-row p{grid-column:3}
  .contact{grid-template-columns:minmax(0,1fr);align-items:start}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:nth-child(2){border-right:0}
  .foot > div:nth-child(3){grid-column:1/-1;border-top:2px solid var(--ink)}
}
/* Cuando la columna principal es angosta, la lista baja debajo del dibujo */
@media (max-width:900px){
  .hero-body{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "draw" "sched"}
}
@container (max-width:900px){
  .hero-body{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"head" "draw" "sched"}
  .h1{font-size:clamp(2.3rem,11cqi,3.7rem)}
  html[lang="es"] .h1{font-size:clamp(2.1rem,9.6cqi,3.2rem)}
}

/* ---------- Celular ---------- */
@media (max-width:720px){
  body{font-size:1rem}
  .bar{gap:.5rem .8rem}
  .nav{order:3;width:calc(100% + 1rem);margin:0 -.5rem;justify-content:space-between;gap:0}
  .nav a{padding:.9rem .5rem;font-size:.78rem;letter-spacing:.05em}
  .tel-band{grid-template-columns:minmax(0,1fr);grid-template-areas:"tel" "tel2" "note";padding:.9rem var(--pad) .55rem}
  .tel{font-size:17.5cqi}
  .tel-sub{font-size:max(.875rem,4.4cqi)}
  .tel2 a{font-size:max(1.3rem,7cqi)}
  .tel-note{max-width:none;padding:.35rem 0 0;font-size:1.15rem}
  .hero-body{gap:1rem}
  .house--d{display:none}
  .house--m{display:block}
  .sched ol{grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-auto-flow:row}
  .sched ol::before{display:none}
  .sched li:nth-child(5n+1){border-top:1px solid var(--ink)}
  .sched li:first-child{border-top:0}
  .tb{grid-template-columns:minmax(0,1fr)}
  .svc-row{grid-template-columns:2.2rem 3.8rem minmax(0,1fr);gap:.4rem .8rem;padding:.9rem .8rem}
  .svc-row h3{font-size:1.4rem;overflow-wrap:anywhere}
  .svc-row p{grid-column:1/-1}
  .hatch{width:3.8rem;height:2.6rem}
  .jobs{grid-template-columns:minmax(0,1fr)}
  .rev{grid-template-columns:minmax(0,1fr);gap:.7rem;padding:1.1rem .9rem}
  .rev-who{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.8rem}
  .rev-who .label{grid-column:1/-1}
  .rev blockquote{font-size:1.1rem}
  .rating{font-size:1.6rem}
  .job--lead .slot{aspect-ratio:4/3}
  .slot-note{font-size:.7rem;padding:.25rem .45rem;letter-spacing:.05em}
  .facts div{grid-template-columns:minmax(0,1fr);gap:.1rem}
  .zones div{grid-template-columns:minmax(0,1fr);gap:.1rem;padding:.8rem .9rem}
  .zones dd{font-size:1.05rem}
  .foot{grid-template-columns:minmax(0,1fr)}
  .foot > div{border-right:0;border-top:2px solid var(--ink)}
  .foot > div:first-child{border-top:0}
}

/* La barra de llamar aparece en celulares y en cualquier pantalla táctil */
@media (max-width:720px),(hover:none) and (pointer:coarse){
  body{padding-bottom:4.2rem}
  .lang button{min-height:2.75rem;padding-inline:.8rem}
  .nav a{padding-block:.9rem}
  .sched a{min-height:2.75rem}
  .foot a{padding-block:.55rem}
  .facts dd a{display:inline-block;margin-block:-.5rem;padding-block:.75rem}
  .zones-far a{display:inline-block;margin-block:-.4rem;padding-block:.6rem}
  .tel2 a,.bignum2 a{display:inline-block;margin-block:-.35rem;padding-block:.6rem}
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.1fr);border-top:2px solid var(--ink);background:var(--paper)}
  .dock a{display:flex;align-items:center;justify-content:center;gap:.4rem;min-height:3.7rem;padding:0 .3rem env(safe-area-inset-bottom);font:700 1.2rem/1 var(--display);text-decoration:none;white-space:nowrap}
  .dock a:first-child{background:var(--accent);color:#fff}
  .dock a:nth-child(2){border-inline:2px solid var(--ink)}
  .dock a:last-child{background:var(--ink);color:var(--paper)}
}

/* Celulares muy angostos */
@media (max-width:360px){
  .brand img{height:2.4rem}
  .nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .nav a{padding:.9rem .35rem;font-size:.72rem;letter-spacing:.02em;white-space:nowrap}
  .lang button{padding-inline:.6rem}
  .svc-row{grid-template-columns:1.9rem 3.2rem minmax(0,1fr);gap:.35rem .6rem}
  .svc-row h3{font-size:1.3rem}
  .hatch{width:3.2rem;height:2.3rem}
  .dock a{gap:.3rem;padding-inline:.15rem;font-size:1.02rem}
}

/* En español los nombres de la lista son más largos: letra un poco más chica y el dibujo cede algo de alto, para que la primera pantalla quepa */
html[lang="es"] .sched a{font-size:1.2rem}
@media (min-width:1081px){
  html[lang="es"] .hero:not(.hero--one) .house--d{max-height:max(12rem,calc(100svh - 40rem))}
}
@media (min-width:1081px) and (max-height:800px){
  html[lang="es"] .hero:not(.hero--one) .house--d{max-height:max(13rem,calc(100svh - 36.5rem))}
}

/* ---------- Versión Sencilla: una sola lista de servicios, justo debajo del dibujo ----------
   (En la Mediana y la Profesional la lista con descripciones vive en la página Services.) */
.hero--one .hero-body{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "draw"}
.svc-band{padding:.4rem var(--pad) 1.6rem}
.svc-note{max-width:62ch;margin-top:1rem;font-size:1.1rem;line-height:1.5}
.svc-row.is-on{background:var(--wash)}
@media (min-width:1081px){
  /* En computador la lista ocupa todo el ancho, debajo de la primera pantalla */
  .hero--one{grid-template-rows:auto auto auto;min-height:0}
  .hero--one .hero-main{grid-area:1/1}
  .hero--one .tb{grid-area:1/2}
  .hero--one .svc-band{grid-area:2/1/3/-1;padding:var(--pad) var(--pad) clamp(1.8rem,3vw,2.6rem);border-top:2px solid var(--ink)}
  .hero--one .idea{grid-area:3/1/4/-1}
  /* Sin la lista al lado del título, el dibujo crece */
  .hero--one .house--d{max-height:max(14rem,calc(100svh - 30rem))}
  @container (max-width:900px){.hero--one .house--d{max-height:max(13rem,calc(100svh - 34.5rem))}}
}
@media (min-width:1081px) and (max-height:800px){
  .hero--one .house--d{max-height:max(14rem,calc(100svh - 25.5rem))}
  @container (max-width:900px){.hero--one .house--d{max-height:max(13rem,calc(100svh - 30rem))}}
}
/* Las tres frases resaltadas pasan a la derecha del título cuando hay ancho */
@container (min-width:901px){
  .hero--one .hero-head{display:flex;align-items:flex-end;justify-content:space-between;gap:.8rem 2rem}
  .hero--one .h1{flex:none}
  .hero--one .promise{flex:1 1 0;width:auto;min-width:0;margin-top:0;justify-content:flex-end}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  .dock,.lang,.skip{display:none!important}
  .sheet{margin:0}
}