/* Hallmark · shape: custom, tablero prolijo · genre: editorial · theme: brand · brand: Juan Ortiz (hex measured from the logo, user-supplied 2026-11-11) · job: hire, write or call Juan
 * paper: oklch(97.6% 0.006 262) · accent: oklch(96.7% 0.182 108.7) · display: Antonio · body: Figtree · hero: navy field over a veiled bulb photograph, the headline switches on like a lamp, both actions and the Google score under it · nav: logo, the open-24-hours fact, the phone · footer: full logo beside contact links and photo credits · signature: the message builder, a live preview of exactly what reaches Juan on WhatsApp
 * idea: "a tidy electrical panel: one live cable runs through every section and the visitor leaves with the message already written" · vibe: "ordenado, seguro, de barrio, de oficio"
 * axes: dark/display-condensed/chromatic-yellow · posture: committed, the logo navy carries about half the page and the rayo yellow stays a signal · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4 · weakest: E, a marquee plus a cable plus a counter is a lot of motion; each runs once or pauses, the cable is scroll-bound only and all of it stops under reduced motion */
/* Hallmark · waive 59 · every seam between sections is a change of paper, navy to light and back, and each section pads itself 96 to 176px · the tablero prolijo alternates fields instead of gaps */
/* Hallmark · dismissed 77 · the page has seven sections; five sit inside the .wired wrapper that carries the cable, so the counter sees three */
/* Hallmark · dismissed 3 · the six service modules set their icon inline beside the head, two rows of three in one ruled panel, not icon-over-head tiles */
/* Hallmark · finish-review: subagent (fable) · fix · 8 findings · 4 resolved (panel widths, preview height, cable nodes on phones, wrapped module head) · 4 answered: 58 the review strip is the client's verbatim material; noindex is the client's demo instruction; the reduced-motion strip already scrolls by hand (overflow-x: auto); the headline stays the search line with Juan named in the lede · hero-review: not run separately, covered in the finish pass */
/* Hallmark · copy: verbatim · the 25 Google reviews are the client's material, quoted with only accents and capitals fixed, as the brief asks */
@import url("./tokens.css");
@import url("./base.css");

/* ---------- base ---------- */
body { font-size: 1.0625rem; }
h1, h2 { text-transform: uppercase; line-height: 1.02; }
h3 { font-family: var(--font-display); text-transform: uppercase; line-height: 1.05; letter-spacing: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 22px; height: 22px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.star { width: 20px; height: 20px; flex-shrink: 0; fill: var(--color-accent); }
.hero .star, .resenas .star { filter: var(--glow-icon); }
.dichos .star { stroke: var(--color-accent-ink); stroke-width: 1.4; stroke-linejoin: round; }
.stars { display: inline-flex; gap: var(--space-3xs); }
.stars--small .star { width: 16px; height: 16px; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
.skip:focus-visible { top: var(--space-md); outline: 2px solid var(--color-accent-ink); outline-offset: 2px; }
.lead { color: inherit; }

/* surfaces that carry the navy field swap their inks and their focus ring in the same rule */
.nav, .hero, .resenas, .contacto, .pie, .barra { background: var(--color-field); color: var(--color-on-field); --color-focus: var(--color-accent); }
.hero h1, .resenas h2, .contacto h2 { color: var(--color-warm); }
.resenas h2, .contacto h2 { text-shadow: var(--glow-text-soft); }

/* ---------- logo ---------- */
.logo { display: block; height: auto; }
.lj-cable, .lj-plug { fill: none; stroke: var(--color-on-field); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.lj-plug { fill: var(--color-on-field); }
.lj-bolt { fill: var(--color-accent); }
.lj-name { fill: var(--color-warm); }
.lj-tag { fill: var(--color-accent); }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-accent-ink); border-radius: var(--radius-input); font: 600 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--wa { background: var(--color-accent); color: var(--color-accent-ink); }
.btn--wa:hover { background: var(--color-accent-hover); }
.btn--line { background: transparent; color: var(--color-ink); border-color: var(--color-ink-2); }
.btn--line:hover { background: var(--color-paper-2); }
.nav .btn--line, .hero .btn--line, .resenas .btn--line, .contacto .btn--line, .barra .btn--line { color: var(--color-on-field); border-color: var(--color-on-field-2); }
.hero .btn--line:hover, .resenas .btn--line:hover, .contacto .btn--line:hover, .barra .btn--line:hover { background: var(--color-field-3); }
.btn--small { min-height: 44px; padding: 0 var(--space-md); font-size: var(--text-sm); }
.btn--wide { width: 100%; }
.btn--icon { padding: 0; width: 52px; }
.link { color: var(--color-warm); font-weight: 600; text-underline-offset: 0.22em; transition: color var(--dur-short) var(--ease-out); }
.link:hover { color: var(--color-accent); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 26rem) { .long { display: none; } }
@media (prefers-reduced-motion: reduce) { .btn, .link { transition: background-color var(--dur-short) linear, color var(--dur-short) linear; } .btn:active { transform: none; } }

/* ---------- nav ---------- */
.nav { position: relative; z-index: var(--z-raised); }
.nav__in { display: flex; align-items: center; gap: var(--space-lg); min-height: var(--nav-h); }
.nav__logo { display: block; margin-right: auto; border-radius: var(--radius-input); }
.nav__logo:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.logo--compact { width: 112px; }
.nav__open { display: inline-flex; align-items: center; gap: var(--space-xs); font-size: var(--text-sm); color: var(--color-on-field-2); }
/* the "on" light: a yellow dot that beats */
.luz { position: relative; display: inline-block; flex-shrink: 0; width: 8px; height: 8px; margin-right: var(--space-xs); border-radius: 50%; background: var(--color-accent); box-shadow: 0 0 6px 1px var(--color-glow); vertical-align: 0.1em; }
.nav__open .luz { margin-right: 0; }
.luz::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-accent); opacity: 0; animation: latir 2.4s var(--ease-out) infinite; }
@keyframes latir { 0% { transform: scale(1); opacity: 0.55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .luz::after { animation: none; } }
.nav__tel { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-input); color: var(--color-on-field); font: 700 var(--text-xl)/1 var(--font-display); text-decoration: none; transition: color var(--dur-short) var(--ease-out); }
.nav__tel:hover { color: var(--color-warm); }
.nav__tel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.nav__tel .ico { width: 20px; height: 20px; }
@media (max-width: 40rem) { .nav__open { display: none; } .logo--compact { width: 96px; } .nav__tel { font-size: var(--text-lg); } }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: min(calc(100svh - var(--nav-h)), 880px); padding-block: var(--space-xl) var(--space-3xl); }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 50%; transform: scaleX(-1); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--color-field) 22%, var(--color-veil) 46%, var(--color-veil-2) 72%); }
.hero__in { display: grid; justify-items: start; }
.hero__title { max-width: 12ch; font-size: var(--text-display); text-shadow: var(--glow-text); animation: encender 2.4s steps(1, end) 0.25s both; }
.hero__lead { margin-top: var(--space-lg); max-width: 36ch; color: var(--color-on-field); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.rating { display: inline-flex; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); color: var(--color-on-field); text-decoration: none; border-radius: 2px; }
.rating:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 6px; }
.rating__score { font: 700 clamp(3rem, 2vw + 2.25rem, 4rem)/0.9 var(--font-display); color: var(--color-warm); min-width: 2.1ch; text-shadow: var(--glow-text); }
.rating__side { display: grid; gap: var(--space-2xs); }
.rating__count { font-size: var(--text-md); color: var(--color-on-field-2); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.rating:hover .rating__count { text-decoration-color: currentColor; }
.nav .lj-bolt { filter: var(--glow-icon-strong); animation: encender 2.4s steps(1, end) 0.25s both; }
@keyframes encender-corto { 0% { opacity: 0.18; } 15% { opacity: 1; } 28% { opacity: 0.3; } 45%, 100% { opacity: 1; } }
@keyframes encender { 0% { opacity: 0.08; } 5% { opacity: 0.7; } 7% { opacity: 0.1; } 9% { opacity: 0.45; } 10% { opacity: 0.08; } 24% { opacity: 0.9; } 26% { opacity: 0.2; } 29% { opacity: 1; } 31% { opacity: 0.35; } 33% { opacity: 0.35; } 44% { opacity: 1; } 46% { opacity: 0.6; } 47%, 100% { opacity: 1; } }
@media (max-width: 60rem) { .hero::before { background: var(--color-veil); } .hero__bg img { object-position: 30% 50%; } }
@media (prefers-reduced-motion: reduce) { .hero .hero__title, .nav .lj-bolt { animation: none; } .rating__count { transition: none; } }



/* ---------- the cable that runs through the page ---------- */
.wired { position: relative; }
.cable { position: absolute; top: 0; left: 0; z-index: var(--z-raised); display: none; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
@media (min-width: 60rem) { .js .cable { display: block; } }
.cable path { fill: none; stroke-linecap: butt; stroke-linejoin: round; }
.cable__pista { stroke: var(--color-wire); stroke-width: 3; }
.cable__funda, .cable__cobre { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cable__funda { stroke: var(--color-accent-ink); stroke-width: 5; }
.cable__cobre { stroke: var(--color-accent); stroke-width: 3; }
.cable__mov { transform: translateX(-10px); opacity: 0.45; transition: transform var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.cable__mov rect { fill: var(--color-accent); stroke: var(--color-accent-ink); stroke-width: 1.5; }
.cable .cable__mov path { stroke: var(--color-on-field); stroke-width: 2.2; stroke-linecap: round; }
.cable.conectado .cable__mov { transform: none; opacity: 1; filter: var(--glow-icon-strong); }
@media (prefers-reduced-motion: reduce) { .cable__mov { transition: none; } }

/* the small bulb before each section title */
.foco { display: inline-block; width: 0.56em; height: 0.56em; margin-right: 0.14em; vertical-align: -0.02em; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: var(--color-muted); transition: color var(--dur-short) var(--ease-out); }
.foco.is-on { color: var(--color-ink); --foco-vidrio: var(--color-accent); --foco-rayo: var(--color-accent-ink); animation: encender-corto 0.8s steps(1, end) both; }
.resenas .foco, .contacto .foco { color: var(--color-on-field-2); }
.resenas .foco.is-on, .contacto .foco.is-on { color: var(--color-warm); --foco-vidrio: oklch(96.7% 0.182 108.7 / 0.18); --foco-rayo: var(--color-accent); filter: var(--glow-icon-strong); }
/* navy titles flicker once as they come in, then stay lit */
.js .titulo-luz { opacity: 0.2; }
.js .titulo-luz.is-lit { opacity: 1; animation: encender-corto 0.9s steps(1, end) both; }
@media (prefers-reduced-motion: reduce) { .foco, .foco.is-on, .js .titulo-luz.is-lit { animation: none; transition: none; } .js .titulo-luz { opacity: 1; } }

/* on phones the cable becomes a short plug-in separator at the top of each section */
.sep { display: none; }
@media (max-width: 59.9375rem) {
  .sep { display: block; margin-bottom: var(--space-xl); }
  .sep svg { width: 120px; height: 24px; overflow: visible; }
  .sep path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .sep .sep__funda { stroke: var(--color-accent-ink); stroke-width: 5; stroke-linecap: butt; }
  .sep .sep__cobre { stroke: var(--color-accent); stroke-width: 3; stroke-linecap: butt; }
  .sep rect { fill: var(--color-accent); stroke: var(--color-accent-ink); stroke-width: 1.5; }
  .sep .sep__patas { stroke: var(--color-ink); stroke-width: 2.2; }
  .sep .sep__toma { stroke: var(--color-muted); stroke-width: 2; transition: stroke var(--dur-short) var(--ease-out) 550ms; }
  .resenas .sep .sep__patas, .contacto .sep .sep__patas { stroke: var(--color-on-field); }
  .resenas .sep .sep__toma, .contacto .sep .sep__toma { stroke: var(--color-on-field-2); }
  .js .sep__enchufe { transform: translateX(-10px); transition: transform 700ms var(--ease-out); }
  .js .sep.is-on .sep__enchufe { transform: none; }
  .sep.is-on .sep__toma { stroke: var(--color-ink); }
  .resenas .sep.is-on .sep__toma, .contacto .sep.is-on .sep__toma { stroke: var(--color-accent); filter: var(--glow-icon-strong); }
}
@media (prefers-reduced-motion: reduce) { .js .sep__enchufe { transform: none; transition: none; } }

/* a faint wiring plan behind two navy sections */
.resenas, .contacto { background-image: url("img/esquema.svg"); background-size: 240px 240px; }

/* ---------- message builder ---------- */
.consulta { padding-block: var(--section-gap) var(--section-gap-s); }
.consulta__in { display: grid; gap: var(--space-2xl); }
.consulta__head .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.armador { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-2xl) var(--gap-columns); align-items: start; }
.armador__pick { display: grid; gap: var(--space-xl); }
.chips { margin: 0; padding: 0; border: 0; min-width: 0; }
.chips legend, .field label { display: block; margin-bottom: var(--space-sm); padding: 0; font-weight: 600; font-size: var(--text-lg); }
.chips__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-md); cursor: pointer; user-select: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.chip .ico { width: 20px; height: 20px; }
.chip:hover { background: var(--color-paper-2); }
.chips input:active + .chip { transform: translateY(1px); }
.chips input:checked + .chip { background: var(--color-field); border-color: var(--color-field); color: var(--color-on-field); }
.chips input:checked + .chip .ico { color: var(--color-accent); }
.chips input:focus-visible + .chip { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chips input:disabled + .chip { opacity: 0.55; cursor: not-allowed; }
.field input { display: block; width: 100%; max-width: 28rem; min-height: 52px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: var(--text-lg); outline: 2px solid transparent; outline-offset: -3px; }
.field input::placeholder { color: var(--color-muted); opacity: 1; }
.field input:focus-visible { outline-color: var(--color-focus); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
/* barrio: a suggestion list of our own instead of the browser's */
.combo__box { position: relative; max-width: 28rem; }
.combo input { max-width: none; padding-right: var(--space-2xl); }
.combo__flecha { position: absolute; top: 50%; right: var(--space-md); width: 20px; height: 20px; fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateY(-50%); pointer-events: none; transition: transform var(--dur-short) var(--ease-out); }
.combo input[aria-expanded="true"] + .combo__flecha { transform: translateY(-50%) rotate(180deg); }
.combo__lista { position: absolute; top: calc(100% + var(--space-2xs)); left: 0; right: 0; z-index: var(--z-dropdown); max-height: 16.5rem; margin: 0; padding: var(--space-2xs); overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); box-shadow: var(--shadow-pop); }
.combo__lista li { display: block; min-height: 48px; padding: var(--space-sm) var(--space-md); line-height: 1.5; border-radius: 4px; color: var(--color-ink); font-size: var(--text-md); cursor: pointer; user-select: none; }
.combo__lista li:hover { background: var(--color-paper-2); }
.combo__lista li[aria-selected="true"] { background: var(--color-field); color: var(--color-on-field); }
.combo__lista mark { background: none; color: inherit; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .combo__flecha { transition: none; } }
.armador__send { display: grid; gap: var(--space-md); }
.mensaje { margin: 0; padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-field); color: var(--color-on-field); }
.mensaje figcaption { font-size: var(--text-sm); color: var(--color-on-field-2); }
.mensaje__texto { margin: var(--space-sm) 0 0; min-height: 4.2em; font-size: var(--text-xl); line-height: 1.4; }
.armador__nota { font-size: var(--text-sm); color: var(--color-muted); }
@media (max-width: 60rem) { .armador { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .chip { padding: 0 var(--space-md); } .mensaje { padding: var(--space-lg); } .mensaje__texto { font-size: var(--text-lg); } }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } .chips input:active + .chip { transform: none; } }

/* ---------- reviews ---------- */
.resenas { padding-block: var(--section-gap-l) var(--space-3xl); }
.resenas__head .lead { margin-top: var(--space-md); color: var(--color-on-field); }
.palabras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.palabras li { display: grid; gap: var(--space-2xs); padding-inline: var(--space-lg); border-left: 1px solid var(--color-field-rule); }
.palabras li:first-child { padding-left: 0; border-left: 0; }
.palabras b { font: 700 clamp(1.625rem, 3vw + 0.75rem, 3.75rem)/1 var(--font-display); text-transform: uppercase; color: var(--color-warm); overflow-wrap: break-word; min-width: 0; }
.palabras span { font-size: var(--text-sm); color: var(--color-on-field-2); }
.destacadas { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); margin-top: var(--space-3xl); }
.cita { margin: 0; display: flex; flex-direction: column; grid-column: 8 / span 5; padding-top: var(--space-lg); border-top: 1px solid var(--color-field-rule); }
.cita--grande { grid-column: 1 / span 6; grid-row: 1 / span 2; padding-top: 0; border-top: 0; }
.cita blockquote { margin: 0; }
.cita .stars { margin-bottom: var(--space-md); }
.dichos .stars { margin-bottom: var(--space-2xs); }
.cita p { font-size: var(--text-lg); line-height: 1.4; text-indent: -0.42em; max-width: 46ch; }
.cita--grande p { font: 700 clamp(1.75rem, 1.8vw + 1.1rem, 3rem)/1.12 var(--font-display); text-transform: uppercase; max-width: 30ch; text-indent: -0.36em; color: var(--color-on-field); }
.cita figcaption { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--color-on-field-2); }
.cinta { position: relative; z-index: calc(var(--z-raised) + 1); margin-top: var(--space-3xl); }
.cinta__ventana { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x pan-y; }
.cinta__ventana::-webkit-scrollbar { display: none; }
.cinta__ventana:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.cinta__track { display: flex; width: max-content; }
.cinta__set { display: flex; align-items: flex-start; gap: var(--space-md); margin: 0; padding: 0 var(--space-md) 0 0; list-style: none; }
.resena { flex-shrink: 0; width: 21rem; }
.resena--larga { width: 30rem; }
.resena figure { display: flex; flex-direction: column; gap: var(--space-sm); margin: 0; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-field-3); }
.resena blockquote { margin: 0; }
.resena p { font-size: var(--text-md); line-height: 1.5; }
.resena figcaption { font-size: var(--text-sm); font-weight: 600; color: var(--color-on-field-2); }
.cinta__pie { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-lg); margin-top: var(--space-xl); }
@media (max-width: 60rem) { .palabras { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); } .palabras li:nth-child(3) { padding-left: 0; border-left: 0; } .cita, .cita--grande { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 40rem) { .resena, .resena--larga { width: min(19rem, 82vw); } .cita p, .cita--grande p { text-indent: 0; } }
@media (prefers-reduced-motion: reduce) { .cinta__set[aria-hidden] { display: none; } }

/* ---------- services, wired like a tidy panel ---------- */
.servicios { padding-block: var(--section-gap) var(--section-gap); }
.servicios__head .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.tablero { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 1px; margin: var(--space-2xl) 0 0; padding: 0; list-style: none; background: var(--color-rule); border: 1px solid var(--color-rule); border-radius: var(--radius-card); overflow: hidden; }
.modulo { position: relative; display: flex; flex-direction: column; gap: var(--space-md); min-height: 17rem; padding: var(--space-xl); background: var(--color-paper); }
.modulo--ancho { grid-column: span 2; }
.modulo--ancho p { max-width: 44ch; }
.modulo__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-md); }
.modulo { --modulo-h3: clamp(1.75rem, 1vw + 1.25rem, 2.25rem); }
.modulo h3 { font-size: var(--modulo-h3); color: var(--color-ink); }
@media (min-width: 75.0625rem) { .modulo__top { min-height: calc(2.1 * var(--modulo-h3)); } }
.modulo__ico { display: grid; place-items: center; flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-input); background: var(--color-field); color: var(--color-on-field); transition: color var(--dur-short) var(--ease-out); }
.modulo__ico .ico { width: 28px; height: 28px; }
.modulo p { color: var(--color-ink-2); max-width: 34ch; }
.modulo__go { margin-top: auto; font-weight: 600; color: var(--color-ink); text-underline-offset: 0.22em; }
.modulo__go::after { content: ""; position: absolute; inset: 0; }
.modulo__go:focus-visible { outline: none; }
.modulo__go:focus-visible::after { outline: 2px solid var(--color-focus); outline-offset: -4px; }
.modulo { --encendido: calc(var(--i, 0) * 180ms + 250ms); }
.modulo.is-in .modulo__ico, html:not(.js) .modulo__ico { color: var(--color-accent); transition-delay: var(--encendido); }
.modulo.is-in .modulo__ico .ico { filter: var(--glow-icon); animation: encender-corto 0.8s steps(1, end) var(--encendido) both; }
.modulo:hover .modulo__ico .ico, .modulo:focus-within .modulo__ico .ico { filter: var(--glow-icon-strong); }
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
@media (max-width: 75rem) { .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .tablero { grid-template-columns: minmax(0, 1fr); } .modulo--ancho { grid-column: auto; } .modulo { min-height: 0; padding: var(--space-lg); } }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } .modulo__ico { transition: none; color: var(--color-accent); } .modulo__ico .ico, .modulo.is-in .modulo__ico .ico { animation: none; filter: var(--glow-icon); } }

/* ---------- work photos ---------- */
.trabajos { padding-block: var(--section-gap-l) var(--section-gap); background: var(--color-paper-2); }
.trabajos__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2xl) var(--gap-columns); }
.trabajos__head { grid-column: 1 / span 5; grid-row: 1; display: grid; gap: var(--space-md); align-content: start; }
.trabajos__head p { color: var(--color-ink-2); max-width: 40ch; }
.foto { margin: 0; min-width: 0; }
.foto img { width: 100%; height: auto; border-radius: min(1vw, var(--radius-card)); background: var(--color-paper-3); outline: 1px solid var(--color-rule); outline-offset: -1px; }
.foto figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }
.foto--tablero { grid-column: 6 / span 7; grid-row: 1 / span 2; }
.foto--cocina { grid-column: 1 / span 5; grid-row: 2; align-self: end; }
.dichos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin: 0; padding: 0; list-style: none; }
.dichos li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-ink); }
.dichos q { font: 700 var(--text-2xl)/1.1 var(--font-display); text-transform: uppercase; color: var(--color-ink); quotes: "“" "”"; }
.dichos span { font-size: var(--text-sm); color: var(--color-muted); }
.fill { font-size: var(--text-md); padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 3px; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.contacto .fill { color: var(--color-on-field-2); border-color: var(--color-on-field-2); }
@media (max-width: 60rem) {
  .trabajos__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .trabajos__head, .foto--tablero, .foto--cocina, .dichos { grid-column: 1; grid-row: auto; }
  .dichos { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

/* ---------- contact and map ---------- */
.contacto { padding-block: var(--section-gap) var(--section-gap); }
.contacto__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--space-2xl) var(--space-3xl); align-items: stretch; }
.datos { display: grid; gap: var(--space-md); margin: var(--space-xl) 0 0; }
.datos div { padding-top: var(--space-sm); border-top: 1px solid var(--color-field-rule); }
.datos dt { font-size: var(--text-sm); color: var(--color-on-field-2); }
.datos dd { margin: var(--space-2xs) 0 0; font-size: var(--text-lg); font-weight: 600; }
.datos a { color: var(--color-on-field); text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out); }
.datos a:hover { color: var(--color-warm); }
.datos a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.contacto__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xl); }
.mapa { position: relative; min-height: 420px; border-radius: var(--radius-card); overflow: hidden; background: var(--color-field-2); outline: 1px solid var(--color-field-rule); outline-offset: -1px; }
.mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 60rem) { .contacto__grid { grid-template-columns: minmax(0, 1fr); } .mapa { min-height: 0; aspect-ratio: 4 / 3; } }

/* ---------- footer ---------- */
.pie { padding-block: var(--space-2xl); background: var(--color-field-2); color: var(--color-on-field-2); }
.pie__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-xl); }
.logo--full { width: 240px; }
.pie__datos { display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.pie__datos p:nth-child(2) { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.pie a { color: var(--color-on-field); text-underline-offset: 0.2em; transition: color var(--dur-short) var(--ease-out); }
.pie a:hover { color: var(--color-warm); }
.pie a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ---------- WhatsApp bar on phones ---------- */
.barra { display: none; }
@media (max-width: 60rem) {
  .barra { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky); display: flex; gap: var(--space-xs); padding: var(--space-sm) var(--space-md) calc(var(--space-sm) + env(safe-area-inset-bottom)); border-top: 1px solid var(--color-field-rule); transition: transform var(--dur-short) var(--ease-out); }
  .barra .btn--wa { flex: 1; }
  .js .barra.is-hidden { transform: translateY(110%); }
  .pie { padding-bottom: var(--space-4xl); }
}
@media (prefers-reduced-motion: reduce) { .barra { transition: none; } }