/* ==========================================================
   Immediate Solutions YJ · piezas extra
   Estilos que usan las versiones Mediana y Profesional
   además de los de base.css: menú de varias páginas, galería,
   formularios, calendario de visitas y blog.
   ========================================================== */

/* ---------- Menú de varias páginas ---------- */
.nav a[aria-current="page"]{background:var(--ink);color:var(--paper)}
.nav a[aria-current="page"]:hover{text-decoration:none}
.bar .btn{min-height:2.6rem;padding:.4rem .9rem;font-size:1.2rem;white-space:nowrap}
.bar-call{display:none}
.menu-btn{display:none}
@media (min-width:1081px){
  .bar--page .bar-call{display:inline-flex}
}

/* ---------- Encabezado de cada página interior ---------- */
.page-head{padding:clamp(2.2rem,5vw,4rem) var(--pad) clamp(1.4rem,3vw,2.2rem)}
.page-head h1{position:relative;padding-bottom:.3em;border-bottom:2px solid currentColor;font:700 clamp(2.6rem,6vw,4.6rem)/.95 var(--display);letter-spacing:-.01em;text-wrap:balance}
.page-head h1::after{content:"";position:absolute;left:0;top:100%;width:min(9rem,30%);height:8px;background:currentColor}
.page-head p{margin-top:1.2rem;max-width:62ch;font-size:1.15rem;line-height:1.5}
.sec--first{border-top:0;padding-top:clamp(.6rem,1.5vw,1rem)}

/* Enlace con flecha */
.more{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{position:relative}
.more::after{content:"";position:absolute;inset:-.7rem -.4rem}
.more:hover{gap:.75rem}
.sec-foot{margin-top:1.4rem}

/* El lápiz naranja que recorre el dibujo */
.house .cloud{transition:opacity .2s var(--ease)}

/* ---------- Servicios con enlace para pedir presupuesto ---------- */
.svc--links .svc-row{grid-template-columns:2.4rem 4.6rem minmax(10rem,22rem) minmax(0,1fr) auto}
.svc-ask{font:600 .82rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;text-underline-offset:.3em;white-space:nowrap}
.svc-ask:hover{color:var(--accent-deep)}

/* ---------- Antes y después: fila corta y galería ---------- */
.jobs--row{grid-template-columns:repeat(3,minmax(0,1fr))}
.jobs--grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.chip{min-height:2.75rem;padding:.4rem .9rem;border:2px solid var(--ink);background:none;font:600 1.15rem/1.1 var(--display);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.chip:hover{background:var(--wash)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.slot.has-photo{cursor:zoom-in}
.lightbox{max-width:min(94vw,70rem);max-height:92vh;padding:0;border:2px solid var(--ink);background:var(--paper);color:var(--ink)}
.lightbox::backdrop{background:rgba(42,41,51,.82)}
.lightbox img{display:block;max-width:100%;max-height:calc(92vh - 4rem);margin:0 auto}
.lightbox-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem .5rem .4rem .9rem;border-top:2px solid var(--ink);font:600 .82rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase}
.lightbox-bar button{min-height:2.75rem;padding:0 .9rem;border:2px solid var(--ink);background:none;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer}
.lightbox-bar button:hover{background:var(--ink);color:var(--paper)}

/* ---------- Formularios ---------- */
.with-side{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(15rem,1fr);gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.form{display:grid;gap:1.3rem;max-width:44rem}
.field{display:grid;gap:.4rem}
.field label,.field legend{font:600 .82rem/1.3 var(--text);letter-spacing:.1em;text-transform:uppercase}
.field input[type="text"],.field input[type="tel"],.field input[type="date"],.field textarea{width:100%;padding:.75rem .85rem;border:2px solid var(--ink);border-radius:0;background:var(--paper);font:400 1.05rem/1.4 var(--text);-webkit-appearance:none;appearance:none}
.field textarea{min-height:8rem;resize:vertical}
/* campo del día: opcional, con su nota debajo */
.field input[type="date"]{max-width:16rem;min-height:3.1rem}
.field .opt{font-weight:400;letter-spacing:.04em;text-transform:none;color:var(--ink-soft)}
.field .hint{font-size:.98rem;line-height:1.4;color:var(--ink-soft)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--accent-deep);outline-offset:2px}
.field ::placeholder{color:var(--ink-soft);opacity:1}
.field .err{display:none;font:600 .92rem/1.3 var(--text);color:var(--accent-deep)}
.field.is-bad input,.field.is-bad textarea{border-color:var(--accent-deep)}
.field.is-bad .err{display:block}
fieldset.field{min-width:0;margin:0;padding:0;border:0}
fieldset.field legend{padding:0;margin-bottom:.45rem}
.checks{display:flex;flex-wrap:wrap;gap:.5rem}
.check{position:relative;display:block}
.field label.check{font:inherit;letter-spacing:normal;text-transform:none}
.check input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.check > span{display:flex;align-items:center;min-height:2.75rem;padding:.4rem .85rem;border:2px solid var(--ink);font:600 1.1rem/1.15 var(--display);transition:background-color .2s var(--ease),color .2s var(--ease)}
.check input:hover + span{background:var(--wash)}
.check input:checked + span{background:var(--ink);color:var(--paper)}
.check input:focus-visible + span{outline:3px solid var(--accent-deep);outline-offset:2px}
.form-actions{display:flex;flex-wrap:wrap;gap:.7rem}
.form-note{max-width:60ch;font-size:.98rem;line-height:1.5;color:var(--ink-soft)}
.form-status{padding:1rem 1.1rem;border:2px solid var(--ink);background:var(--tint);font-size:1.05rem;line-height:1.5}
.side{border:2px solid var(--ink)}
.side > div{padding:1.1rem 1.2rem}
.side > div + div{border-top:2px solid var(--ink)}
.side h2{font:700 1.7rem/1.1 var(--display)}
.side .tel-side{display:block;margin-top:.5rem;font:700 2.6rem/1 var(--display);color:var(--accent);text-decoration:none;white-space:nowrap}
.side .tel-side:hover{color:var(--accent-deep)}
.side p{margin-top:.5rem}

/* ---------- Agendar visita ---------- */
.steps{display:grid;gap:clamp(1.6rem,3.5vw,2.6rem);max-width:44rem}
.step-h{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem;font:700 1.8rem/1.1 var(--display)}
.step-h .no{width:2rem;height:2rem;border-radius:0;background:var(--ink);font-size:1.1rem}
.cal{max-width:28rem;border:2px solid var(--ink)}
.cal-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.35rem;background:var(--ink);color:var(--paper)}
.cal-head b{font:700 1.4rem/1 var(--display)}
.cal-head button{display:grid;place-items:center;width:2.75rem;height:2.75rem;border:2px solid var(--paper);background:none;color:inherit;cursor:pointer}
.cal-head button:hover:not([disabled]){background:var(--paper);color:var(--ink)}
.cal-head button[disabled]{opacity:.35;cursor:default}
.cal-head :focus-visible{outline-color:#fff}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-dow{padding:.45rem 0;border-bottom:1px solid var(--ink);font:600 .78rem/1.2 var(--text);letter-spacing:.08em;text-align:center;text-transform:uppercase}
.cal-day{aspect-ratio:1;min-height:2.75rem;border:0;border-top:1px solid var(--ink);border-left:1px solid var(--ink);background:none;font:600 1.1rem/1 var(--text);cursor:pointer;transition:background-color .15s var(--ease)}
.cal-day:nth-child(7n+1){border-left:0}
.cal-day:hover:not([disabled]){background:var(--tint)}
.cal-day[disabled]{color:var(--ink-soft);color:color-mix(in srgb,var(--ink-soft) 50%,var(--paper));font-weight:400;cursor:default}
.cal-day[aria-pressed="true"]{background:var(--accent);color:#fff}
.cal-blank{border-top:1px solid var(--ink)}
.cal-day + .cal-blank,.cal-blank--end + .cal-blank--end{border-left:1px solid var(--ink)}
.ticket{margin-top:1rem;padding:.9rem 1.1rem;border:2px solid var(--ink);background:var(--tint);font-size:1.1rem;line-height:1.45}
.ticket b{font:700 1.35rem/1.2 var(--display)}

/* ---------- Blog ---------- */
.posts{border:2px solid var(--ink)}
.post-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.6rem 2rem;align-items:center;padding:1.3rem 1.2rem;text-decoration:none;transition:background-color .2s var(--ease)}
.post-row + .post-row{border-top:1px solid var(--ink)}
.post-row:hover{background:var(--wash)}
.post-row h2{font:700 2rem/1.08 var(--display)}
.post-row p{margin-top:.4rem;max-width:60ch}
.post-row .ico{width:1.6rem;height:1.6rem;color:var(--accent)}
.article{max-width:42rem;font-size:1.15rem;line-height:1.65}
.article > * + *{margin-top:1.1rem}
.article h2{margin-top:2.2rem;font:700 1.9rem/1.12 var(--display)}
.article ul{display:grid;gap:.55rem}
.article li{display:grid;grid-template-columns:1.1rem 1fr}
.article li::before{content:"";width:.5rem;height:.5rem;margin-top:.6em;background:var(--accent)}
.back{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;font:600 .82rem/1.3 var(--text);letter-spacing:.08em;text-transform:uppercase;text-underline-offset:.3em}

/* Ajustes de piezas compartidas */
.svc-row h2{font:700 1.7rem/1.05 var(--display)}
.post-row h3{font:700 1.6rem/1.1 var(--display)}
.contact--solo{grid-template-columns:minmax(0,1fr)}
.sec--band .contact{align-items:start}
.steps section{display:grid;gap:1.1rem}

/* Ventanas de computador angostas: menú y botón del teléfono más compactos para caber en una fila */
@media (min-width:1081px) and (max-width:1179px){
  .bar--page .nav a{padding-inline:.4rem;font-size:.76rem;letter-spacing:.04em}
  .bar--page .bar-call{padding-inline:.6rem;font-size:1.05rem}
}

/* ---------- Pantallas medianas ---------- */
@media (max-width:1080px){
  .menu-btn{display:inline-grid;place-items:center;order:2;width:2.75rem;height:2.75rem;padding:0;border:2px solid var(--ink);background:none;cursor:pointer}
  .menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}
  .bar .lang{order:1}
  .bar .lang button{min-height:2.75rem;padding-inline:.8rem}
  .bar--page .bar-call{display:inline-flex}
  .js .bar .nav{display:none}
  .js .bar .nav.is-open{display:grid;order:4;width:100%;margin:0;gap:0;grid-template-columns:minmax(0,1fr)}
  .bar .nav a{padding:.95rem .2rem;border-top:1px solid var(--ink);font-size:.9rem;letter-spacing:.06em}
  .bar .nav a[aria-current="page"]{padding-inline:.6rem}
  .form,.steps{max-width:none}
  .with-side{grid-template-columns:minmax(0,1fr)}
  .svc--links .svc-row{grid-template-columns:2.4rem 4.6rem minmax(0,1fr) auto}
  .svc--links .svc-row p{grid-column:3/-1}
  .svc--links .svc-ask{grid-column:3/-1;justify-self:start;padding-block:.85rem}
}

/* ---------- Celular ---------- */
@media (max-width:720px){
  .bar .brand img{height:2.4rem}
  .bar--page .bar-call{display:none}
  .jobs--row,.jobs--grid{grid-template-columns:minmax(0,1fr)}
  .contact-actions .btn,.form-actions .btn,.btn-row .btn{flex:1 1 100%}
  .svc--links .svc-row{grid-template-columns:2.2rem 3.8rem minmax(0,1fr)}
  .svc--links .svc-row p,.svc--links .svc-ask{grid-column:1/-1}
  .svc-ask{padding-block:.85rem}
  .svc-row h2{font-size:1.4rem;overflow-wrap:anywhere}
  .side .tel-side{font-size:2.3rem}
  .post-row{grid-template-columns:minmax(0,1fr);padding:1.1rem .9rem}
  .post-row h2{font-size:1.6rem}
  .post-row .ico{display:none}
  .article{font-size:1.08rem}
  .step-h{font-size:1.6rem}
}
@media (max-width:360px){
  .bar{gap:.5rem}
  .svc-row h2{font-size:1.3rem}
  .bar .lang button{padding-inline:.5rem}
  .bar .brand img{height:1.9rem}
}