/* Hallmark · shape: Quote-led spine, the gate key review third after the slider, in the brief's order of resolved, trusted, write · genre: editorial · theme: Ink (deal 3/3, seed servicio-mantenimiento-recuperaci-piscinas-2b19·7b9258b2·2026-11-09·r0), recoloured to the brief · job: hire · draw: 90286a · redesign: restyle
 * hero: Poster on phones (the lagoon pool full bleed, the promise on a pane of glass, the seal a drop on its corner, a water line at the foot), Stage from 60rem (the photo bleeding off the right edge from column 6, the seal on its edge) · nav: on phones a plain bar with the isotype and its line in two rows, in the flow; none on desktop, where the isotype and its line sit above the headline; a floating glass WhatsApp on desktop · footer: mast under a water line · imagery: photographs, the client's own 12, natural, with a pointer glare · signature: the Neptunia before and after slider, glass handle, sparkles on the clean side · ink: water white to celeste, deep pool blue ink, turquesa light, glass surfaces, caustics on the two bands, Sora over Figtree, 24px radius
 * axes: light/geometric-sans/chromatic-turquoise · posture: restrained, light as the signal · contrast: pass · fold: pass · copy: verbatim from the previous build, placeholders the client fills ([FRECUENCIA], [PRECIO MENSUAL], [PRECIO RECUPERACIÓN], [CONFIRMAR ZONAS]) · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R3 V4 · weakest: R, the brief asks for glass, shine, glare, sparkles and caustics at once; each is held to the places the brief names, and every loop stops off screen and under reduced motion */
/* Hallmark · open 54, 63, 67 · the client asked for the isotype's line in tracked capitals joined by a middle dot, above the h1 and under the footer isotype */
/* Hallmark · open 58 · the hero card carries the isotype and its line above the headline, sentence and actions, by the client's request */
/* Hallmark · dropped the nav bar (logo link home, call link, nav WhatsApp) · the client removed it; the call lives in the hero and the builder, WhatsApp in the hero, the floating button and the footer */
/* Hallmark · dropped hero-900.jpg and g-laguna-deck-400.jpg · the client moved the lagoon pool into the hero and the palm at sunset into the gallery's lead */
/* Hallmark · open 18 · the user removed the nav's pause control; the shine, the Después sparkles, the caustics and the water in the headline loop with no in-page pause, stopping only off screen and under reduced motion */
/* Hallmark · waive 83 · the mosaic of nine client pools is the page's gallery of the client's own work · the brief asks for the pools at a good size */
/* Hallmark · dismissed 23 · the turquesa fill is a 40px drop beside each step, never a viewport-scale field */
/* Hallmark · waive 38iii · the one word cristalina in the hero is filled with moving pool light, once on the page · the client asked for the word itself to look like lit water */
/* Hallmark · waive 2b · caustic light clipped to the word cristalina over a single blue to teal water ramp · the client asked for the pool's moving light inside the text */
/* Hallmark · waive 29 · a white glare that follows the pointer over the client's pool photos · the brief asks for light on the water, not a chromatic halo */
@import url("./tokens.css");
@import url("./base.css");

/* Page ground: white leaning to pool water, never flat */
body { background: linear-gradient(180deg, var(--color-paper) 0, var(--color-water-1) 34%, var(--color-paper) 58%, var(--color-water-1) 100%); }

/* Chrome */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

.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); border-radius: var(--radius-input); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Glass: one component. A white pane, blurred and saturated behind, a lit edge from the top left, an inner highlight, a blue shadow */
.glass { --glass-a: 0.45; position: relative; background: color-mix(in oklch, var(--color-glass) calc(var(--glass-a) * 100%), transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 1px 0 var(--color-glass-hi), inset 0 -1px 0 var(--color-glass-edge-end), 0 12px 32px -14px var(--color-glass-shadow); }
.glass::before { content: ""; position: absolute; inset: 0; z-index: 0; padding: 1px; border-radius: inherit; background: linear-gradient(135deg, var(--color-glass-edge) 0%, var(--color-glass-edge-mid) 38%, var(--color-glass-edge-end) 100%); -webkit-mask: linear-gradient(var(--color-ink) 0 0) content-box, linear-gradient(var(--color-ink) 0 0); -webkit-mask-composite: xor; mask: linear-gradient(var(--color-ink) 0 0) content-box exclude, linear-gradient(var(--color-ink) 0 0); pointer-events: none; }
.glass--flat { -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .glass { --glass-a: 0.85; } }

html { scroll-padding-top: var(--space-lg); }

/* Controls */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 var(--space-lg); border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-pill); background: var(--color-ink); color: var(--color-paper); 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), transform var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-ink-2); }
.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--quiet { background: transparent; color: var(--color-ink); }
.btn--quiet:hover { background: var(--color-accent-soft); }
.btn--wide { width: 100%; }
.btn--round { width: 48px; min-height: 48px; padding: 0; }

/* Shine: a diagonal light across the WhatsApp buttons every 6s, and at once on hover or focus */
.btn--wa { overflow: hidden; isolation: isolate; }
.btn--wa > * { position: relative; z-index: 1; }
.btn--wa::after { content: ""; position: absolute; inset-block: -30%; left: -50%; width: 38%; background: linear-gradient(100deg, transparent 0%, var(--color-shine) 50%, transparent 100%); transform: translateX(0) skewX(-20deg); opacity: 0; pointer-events: none; animation: shine 6s var(--ease-in-out) 1.4s infinite; }
.btn--wa:hover::after, .btn--wa:focus-visible::after { animation: shine-once 0.9s var(--ease-out) 1; }
@keyframes shine { 0% { transform: translateX(0) skewX(-20deg); opacity: 0; } 2% { opacity: 1; } 15% { transform: translateX(520%) skewX(-20deg); opacity: 1; } 16%, 100% { transform: translateX(520%) skewX(-20deg); opacity: 0; } }
@keyframes shine-once { 0% { transform: translateX(0) skewX(-20deg); opacity: 1; } 100% { transform: translateX(520%) skewX(-20deg); opacity: 1; } }

.link { color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--space-2xs); }

.stars { display: inline-flex; gap: var(--space-3xs); color: var(--color-ink); }
.stars svg { width: 16px; height: 16px; fill: currentColor; }

/* A missing fact: a glass chip with a dashed edge, on purpose */
.fill { display: inline-block; padding: 0 0.45em; border: var(--rule-hair) dashed var(--color-muted); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-glass) 50%, transparent); box-shadow: inset 0 1px 0 var(--color-glass-hi), 0 6px 16px -10px var(--color-glass-shadow); color: var(--color-muted); font-weight: 600; line-height: 1.6; white-space: nowrap; }

/* Sparkles: four-point stars that twinkle */
.sparkle { position: absolute; display: block; width: 14px; height: 14px; color: var(--color-spark); }
.sparkle svg { width: 100%; height: 100%; fill: currentColor; }
[data-loop].is-running .sparkle { animation: twinkle 2.8s var(--ease-in-out) infinite; }
[data-loop] .sparkle:nth-child(2) { animation-delay: 0.7s; } [data-loop] .sparkle:nth-child(3) { animation-delay: 1.4s; } [data-loop] .sparkle:nth-child(4) { animation-delay: 2.1s; }
@keyframes twinkle { 0%, 100% { transform: scale(0.35) rotate(0deg); opacity: 0.2; } 45% { transform: scale(1) rotate(45deg); opacity: 1; } 70% { transform: scale(0.6) rotate(60deg); opacity: 0.55; } }

/* Hero: Poster. The pool fills the screen; the promise sits on a pane of glass over the water; a water line at the foot */
.hero { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; min-height: max(560px, 100svh); padding-block: var(--space-3xl) calc(var(--space-lg) + var(--wave-h)); -webkit-mask: linear-gradient(var(--color-ink) 0 0) 0 0 / 100% calc(100% - var(--wave-h) + 1px) no-repeat, url("img/wave-down.svg") 0 100% / 1440px var(--wave-h) repeat-x; mask: linear-gradient(var(--color-ink) 0 0) 0 0 / 100% calc(100% - var(--wave-h) + 1px) no-repeat, url("img/wave-down.svg") 0 100% / 1440px var(--wave-h) repeat-x; }
.hero__photo { position: absolute; inset: 0; z-index: -1; margin: 0; background: var(--color-paper-3); }
.hero__photo picture, .hero__photo img { display: block; width: 100%; height: 100%; }
.hero__photo img { object-fit: cover; object-position: 50% 40%; }
.hero__inner { width: 100%; }
.hero__stack { position: relative; max-width: 42rem; }
.hero__text { --glass-a: 0.8; display: grid; gap: var(--space-md); padding: var(--space-lg) var(--space-md); border-radius: calc(var(--radius-card) + var(--space-xs)); }
.hero__text > * { position: relative; z-index: 1; }
.hero__brand { display: flex; align-items: center; gap: var(--space-sm); }
.hero__brand img { width: 52px; height: 52px; flex-shrink: 0; }
.tagline { min-width: 0; font-size: var(--text-xs); font-weight: 600; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-ink-2); }
.tagline--on-ink { color: var(--color-on-ink-2); }
.hero h1 { color: var(--color-ink); line-height: 1.04; }
.hero .lead { color: var(--color-ink-2); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
/* Water in the word: deep pool blue, two nets of caustic light drifting across each other, and a glow that breathes like sun on the water */
.water-word { color: var(--color-ink); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .water-word { background-image: url("img/caustics-text.svg"), url("img/caustics-text.svg"), linear-gradient(170deg, var(--color-water-deep) 0%, var(--color-water-mid) 55%, var(--color-water-deep) 100%); background-size: 320px 320px, 460px 460px, 100% 100%; background-repeat: repeat, repeat, no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 0.05em var(--color-water-glow)); }
  .water-word.is-running { animation: water-drift 18s linear infinite, water-glow 3.2s var(--ease-in-out) infinite alternate; }
}
@keyframes water-drift { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 320px 320px, -460px 460px, 0 0; } }
@keyframes water-glow { from { filter: drop-shadow(0 0 0.04em var(--color-water-glow)); } to { filter: drop-shadow(0 0 0.14em var(--color-water-glow-strong)); } }

/* Glare: a soft light that follows the pointer (or the scroll on phones) over a photo */
:where([data-glare]) { position: relative; overflow: hidden; }
.glare { position: absolute; z-index: 2; top: 0; left: 0; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--color-glare) 0%, transparent 68%); pointer-events: none; opacity: 0.6; transform: translate(calc(var(--gx, 50%) - 50%), calc(var(--gy, 30%) - 50%)); transition: opacity var(--dur-long) var(--ease-out); }
.js .glare { opacity: 0; }
.js [data-glare].is-lit .glare { opacity: 1; }
@media (hover: none) { .js [data-glare].is-lit .glare { opacity: 0.45; } }

.seal { --glass-a: 0.6; position: absolute; z-index: var(--z-raised); top: 0; right: var(--space-md); display: grid; place-content: center; justify-items: center; gap: var(--space-2xs); width: 112px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; color: var(--color-ink); text-align: center; text-decoration: none; transform: translateY(-72%); transition: background-color var(--dur-short) var(--ease-out); }
.seal > * { position: relative; z-index: 1; }
.seal::after { content: ""; position: absolute; inset-block: -20%; left: -60%; z-index: 2; width: 42%; background: linear-gradient(100deg, transparent 0%, var(--color-shine) 50%, transparent 100%); transform: translateX(0) skewX(-18deg); opacity: 0; pointer-events: none; animation: shine-once 1.3s var(--ease-out) 0.7s 1 both; }
.seal { outline: 1px solid var(--color-ring-soft); outline-offset: -7px; }
.seal:hover { --glass-a: 0.72; }
.seal:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
.seal__score { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 700; line-height: 0.95; letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; }
.seal .stars svg { width: 12px; height: 12px; }
.seal__count { max-width: 9ch; font-size: var(--text-xs); font-weight: 600; line-height: 1.2; }

@media (min-width: 60rem) {
  .hero { --content-w: calc(min(100%, var(--container)) - 2 * var(--gutter)); --photo-x: calc((100% - var(--content-w)) / 2 + (var(--content-w) + var(--gap-columns)) * 5 / 12); align-items: center; min-height: clamp(560px, 100svh, 1040px); padding-block: var(--space-2xl); background: linear-gradient(165deg, var(--color-paper) 25%, var(--color-water-2) 100%); -webkit-mask: none; mask: none; }
  .hero__photo { inset-inline-start: var(--photo-x); z-index: 0; overflow: hidden; border-bottom-left-radius: calc(var(--radius-card) * 2); }
  .hero__photo img { object-position: 50% 50%; }
  .hero__inner { position: static; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .hero__stack { position: static; grid-column: 1 / span 5; max-width: none; }
  .hero__text { gap: var(--space-lg); padding: 0; border-radius: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .hero__text::before { display: none; }
  .hero h1 { max-width: none; }
  .hero__brand { gap: var(--space-md); }
  .hero__brand img { width: 64px; height: 64px; }
  .seal { top: auto; right: auto; bottom: var(--space-2xl); inset-inline-start: var(--photo-x); width: 172px; transform: translateX(-38%); }
  .seal__score { font-size: var(--text-section); }
  .seal .stars svg { width: 14px; height: 14px; }
  .seal__count { font-size: var(--text-sm); }
}

/* Phones: a plain bar carries the isotype and its line, so the hero card holds only the promise */
.mnav { display: none; }
@media (max-width: 59.99rem) {
  .mnav { display: block; background: var(--color-paper); border-bottom: var(--rule-hair) solid var(--color-rule); }
  .mnav__row { display: flex; align-items: center; gap: var(--space-sm); min-height: var(--mnav-h); }
  .mnav img { width: 44px; height: 44px; flex-shrink: 0; }
  .hero__brand { display: none; }
  .hero { min-height: max(520px, calc(100svh - var(--mnav-h))); }
  .tagline--stack { display: grid; gap: var(--space-3xs); font-size: var(--text-sm); line-height: 1.25; }
  .tagline__place { font-size: var(--text-2xs); }
  .seal__score { font-size: var(--text-2xl); }
  .seal__count { font-size: var(--text-2xs); }
}

/* Water line: the edge of a band is a soft wave, not a cut */
.band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--color-water-2) 0%, var(--color-water-1) 55%, var(--color-water-2) 100%); }
.wave-top { padding-top: calc(var(--section-gap-s) + var(--wave-h)); -webkit-mask: url("img/wave.svg") 0 0 / 1440px var(--wave-h) repeat-x, linear-gradient(var(--color-ink) 0 0) 0 calc(var(--wave-h) - 1px) / 100% 100% no-repeat; mask: url("img/wave.svg") 0 0 / 1440px var(--wave-h) repeat-x, linear-gradient(var(--color-ink) 0 0) 0 calc(var(--wave-h) - 1px) / 100% 100% no-repeat; }
.wave-both { padding-block: calc(var(--section-gap-s) + var(--wave-h)); -webkit-mask: url("img/wave.svg") 0 0 / 1440px var(--wave-h) repeat-x, url("img/wave-down.svg") 0 100% / 1440px var(--wave-h) repeat-x, linear-gradient(var(--color-ink) 0 0) 0 calc(var(--wave-h) - 1px) / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat; mask: url("img/wave.svg") 0 0 / 1440px var(--wave-h) repeat-x, url("img/wave-down.svg") 0 100% / 1440px var(--wave-h) repeat-x, linear-gradient(var(--color-ink) 0 0) 0 calc(var(--wave-h) - 1px) / 100% calc(100% - 2 * var(--wave-h) + 2px) no-repeat; }

/* Caustics: the net of light on a pool floor, drifting very slowly on the two bands */
.caustics { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.caustics span { position: absolute; inset: -30%; opacity: 0.5; background-size: 560px 560px; }
.caustics span + span { opacity: 0.32; background-size: 820px 820px; transform: rotate(9deg); }
.caustics.is-near span, html:not(.js) .caustics span { background-image: url("img/caustics.svg"); }
.caustics.is-running span { animation: drift-a 48s linear infinite alternate; }
.caustics.is-running span + span { animation: drift-b 64s linear infinite alternate; }
@keyframes drift-a { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-180px, 90px, 0); } }
@keyframes drift-b { from { transform: translate3d(0, 0, 0) rotate(9deg); } to { transform: translate3d(140px, -120px, 0) rotate(9deg); } }

/* De verde a cristalina */
.recovery { padding-block: var(--section-gap) var(--section-gap); }
.recovery__grid { display: grid; gap: var(--space-2xl); }
.compare { margin: 0; }
.compare__frame { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-card); background: var(--color-paper-3); outline: var(--rule-hair) solid var(--color-hairline-photo); outline-offset: -1px; box-shadow: 0 24px 48px -28px var(--color-glass-shadow); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.js .compare__frame { cursor: ew-resize; }
.compare__frame picture { position: absolute; inset: 0; display: block; }
.compare__img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.compare__before { clip-path: inset(0 calc(100% - var(--pos) * 1%) 0 0); }
.compare__tag { --glass-a: 0.62; position: absolute; z-index: 4; top: var(--space-md); padding: var(--space-2xs) var(--space-md); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; }
.compare__tag--before { left: var(--space-md); }
.compare__tag--after { right: var(--space-md); }
.compare__sparkles { position: absolute; z-index: 3; inset: 0; pointer-events: none; clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }
.compare__sparkles .sparkle { color: var(--color-spark-white); }
.compare__sparkles .sparkle:nth-child(1) { top: 30%; right: 18%; width: 22px; height: 22px; }
.compare__sparkles .sparkle:nth-child(2) { top: 46%; right: 34%; width: 12px; height: 12px; }
.compare__sparkles .sparkle:nth-child(3) { top: 60%; right: 12%; width: 16px; height: 16px; }
.compare__sparkles .sparkle:nth-child(4) { top: 22%; right: 40%; width: 10px; height: 10px; }
.compare__burst { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.compare__burst .sparkle { top: 50%; left: calc(var(--pos) * 1%); color: var(--color-spark-white); animation: burst 0.9s var(--ease-out) forwards; }
@keyframes burst { 0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; } 100% { transform: translate(calc(-50% + var(--bx)), calc(-50% + var(--by))) scale(1) rotate(90deg); opacity: 0; } }
.compare__handle { position: absolute; inset: 0; z-index: 4; pointer-events: none; transform: translateX(calc((var(--pos) - 50) * 1%)); }
.compare__handle::before { content: ""; position: absolute; inset-block: 0; left: 50%; width: 3px; background: var(--color-glass); box-shadow: 0 0 0 1px var(--color-glass-edge-mid); transform: translateX(-50%); }
.compare__knob { --glass-a: 0.5; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: var(--color-ink); transform: translate(-50%, -50%); }
.compare__knob .icon { position: relative; z-index: 1; width: 24px; height: 24px; }
.compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.compare__range:focus-visible { outline: 2px solid transparent; }
.compare__frame:has(.compare__range:focus-visible) .compare__knob { outline: 3px solid var(--color-focus); outline-offset: 3px; }
html:not(.js) .compare__range { display: none; }
.compare figcaption { margin-top: var(--space-sm); font-size: var(--text-sm); color: var(--color-ink-2); }

.recovery__text { display: grid; align-content: center; gap: var(--space-lg); }
.steps { margin: var(--space-xs) 0 0; padding: 0; list-style: none; counter-reset: step; border-top: var(--rule-hair) solid var(--color-ink); }
.steps li { counter-increment: step; border-bottom: var(--rule-hair) solid var(--color-rule); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms); }
.step summary { display: flex; align-items: center; gap: var(--space-md); min-height: 60px; padding-block: var(--space-sm); list-style: none; cursor: pointer; font-size: var(--text-title); font-weight: 600; line-height: 1.2; color: var(--color-ink); }
.step summary::-webkit-details-marker { display: none; }
.step summary::marker { content: ""; }
.step summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--space-xs); }
.step summary:active .step__icon { transform: scale(0.94); }
.step__title { flex: 1; min-width: 0; }
.step__icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--color-rule); transition: transform var(--dur-long) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.step__icon::before, .step__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 1px; background: var(--color-ink); transform: translate(-50%, -50%); }
.step__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.step summary:hover .step__icon { background: var(--color-accent-soft); }
.step[open] .step__icon { transform: rotate(45deg); }
.js .step[open]:not(.is-open) .step__icon { transform: none; }
.step__body { display: grid; grid-template-rows: 1fr; opacity: 1; }
.step__body > div { min-height: 0; overflow: hidden; }
.step__body p { max-width: 56ch; padding: 0 var(--space-xl) var(--space-lg) calc(var(--space-xl) + var(--space-md)); font-size: var(--text-md); line-height: 1.6; color: var(--color-ink-2); }
.js .step__body { grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows var(--dur-long) var(--ease-out), opacity var(--dur-short) var(--ease-out); }
.js .step.is-open .step__body { grid-template-rows: 1fr; opacity: 1; }
.step-n { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; }
.step-n::after { content: counter(step); position: relative; z-index: 1; margin-top: var(--space-xs); color: var(--color-light-ink); font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; font-variant-numeric: tabular-nums; }
.drop { position: absolute; inset: 0; overflow: hidden; background: var(--color-accent-soft); -webkit-mask: url("img/drop.svg") center / contain no-repeat; mask: url("img/drop.svg") center / contain no-repeat; }
.drop::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--color-light) 0%, var(--color-accent) 100%); transform: scaleY(0.5); transform-origin: 50% 100%; transition: transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 110ms + 240ms); }
.js .steps:not(.is-in) li { opacity: 0; transform: translateY(12px); }
.js .steps:not(.is-in) .drop::after { transform: scaleY(0); }
.step[open] .drop::after { transform: scaleY(1); transition-delay: 0ms; }
.js .step[open]:not(.is-open) .drop::after { transform: scaleY(0.5); }
.aside-quote { margin: var(--space-xs) 0 0; }
.aside-quote p { font-size: var(--text-lg); font-weight: 600; line-height: 1.4; color: var(--color-ink); max-width: 46ch; }
.aside-quote footer { margin-top: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }

@media (min-width: 60rem) {
  .recovery__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: center; }
  .compare { grid-column: 1 / span 5; }
  .recovery__text { grid-column: 7 / span 6; }
}

/* La llave del portón */
.trust__lead { display: grid; gap: var(--space-xl); }
.pull { margin: 0; }
.pull blockquote { margin: 0; }
.pull blockquote p { max-width: 46ch; font-size: clamp(1.375rem, 1.1vw + 1rem, 2rem); font-weight: 600; line-height: 1.32; color: var(--color-ink); text-wrap: pretty; }
.pull figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-top: var(--space-lg); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.reviews { display: grid; gap: var(--space-md) var(--gap-columns); margin: var(--space-2xl) 0 0; padding: 0; list-style: none; }
.reviews li { --glass-a: 0.4; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg) var(--space-lg) var(--space-md); border-radius: var(--radius-card); }
.reviews li > * { position: relative; z-index: 1; }
.reviews p { font-size: var(--text-lg); line-height: 1.45; color: var(--color-ink); }
.reviews__name { font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.trust__more { margin-top: var(--space-xl); }

@media (min-width: 60rem) {
  .trust__lead { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: start; }
  .trust__lead h2 { grid-column: 1 / span 4; }
  .pull { grid-column: 6 / span 7; }
  .pull blockquote p { text-indent: -0.42em; }
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Así quedan cuando las cuidamos: a rail on phones, a mosaic from 60rem */
.pools { padding-block: var(--section-gap) var(--section-gap-s); }
.pools__head { display: grid; gap: var(--space-md); margin-bottom: var(--space-xl); }
.pools__side { display: grid; gap: var(--space-md); }
.pools__head .lead { color: var(--color-ink-2); }
.rail-nav { display: none; gap: var(--space-xs); }
.rail { --rail-pad: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter))); display: grid; grid-auto-flow: column; grid-auto-columns: 74%; gap: var(--gap-columns); margin: 0; padding: 0 var(--rail-pad) var(--space-md); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rail-pad); scrollbar-width: thin; }
.rail > li { scroll-snap-align: start; min-width: 0; }
.rail:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.rail figure { height: 100%; margin: 0; border-radius: var(--radius-card); background: var(--color-paper-3); box-shadow: 0 20px 40px -28px var(--color-glass-shadow); }
.rail picture { display: block; height: 100%; }
.rail img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; outline: var(--rule-hair) solid var(--color-hairline-photo); outline-offset: -1px; }
.rail figcaption { --glass-a: 0.55; position: absolute; z-index: 3; left: var(--space-sm); bottom: var(--space-sm); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-pill); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; max-width: calc(100% - var(--space-lg)); }

@media (min-width: 40rem) and (max-width: 59.99rem) {
  .rail { grid-auto-columns: minmax(15rem, 42%); }
  .js .rail-nav:not([hidden]) { display: flex; }
  .pools__side { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
@media (min-width: 60rem) {
  .pools__head { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); align-items: end; }
  .pools__head h2 { grid-column: 1 / span 6; }
  .pools__side { grid-column: 7 / -1; justify-self: end; }
  .rail.mosaic { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-columns: auto; gap: var(--space-lg); width: 100%; max-width: var(--container); margin-inline: auto; padding: 0 var(--gutter); overflow: visible; scroll-snap-type: none; }
  .mosaic > li:first-child { grid-column: span 2; grid-row: span 2; }
  .mosaic > li:first-child img { aspect-ratio: auto; }
}

/* Mantenerla o recuperarla: two glass cards */
.services { padding-block: var(--section-gap-s) var(--section-gap-s); }
.services h2 { margin-bottom: var(--space-xl); }
.cards { display: grid; gap: var(--space-lg); margin: 0; padding: 0; list-style: none; }
.card { --glass-a: 0.5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-md); padding: var(--space-lg); border-radius: var(--radius-card); }
.card > * { position: relative; z-index: 1; }
.card h3 { font-size: var(--text-2xl); color: var(--color-ink); }
.card p { color: var(--color-ink-2); max-width: 46ch; }
.card .card__price { font-weight: 600; color: var(--color-ink); }
.card__go { margin-top: auto; }
@media (min-width: 40rem) { .card { padding: var(--space-xl); } }
@media (min-width: 60rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-columns); } }

/* Dónde trabajamos: a strip of its own */
.zone { padding-block: var(--space-lg) 0; }
.zone__row { display: grid; gap: var(--space-sm); padding-block: var(--space-lg) var(--space-xl); border-top: var(--rule-hair) solid var(--color-rule); }
.zone__title { font-size: var(--text-title); line-height: 1.2; }
.zone__item { display: flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); }
.zone__item .icon { color: var(--color-accent-soft-ink); }
.zone__go { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
@media (min-width: 60rem) {
  .zone__row { grid-template-columns: auto auto auto 1fr; align-items: center; column-gap: var(--space-xl); }
  .zone__go { justify-self: end; }
}

/* Armá tu mensaje */
.ask { padding-bottom: calc(var(--section-gap-s) + var(--wave-h)); }
.ask__grid { display: grid; gap: var(--space-2xl); }
.ask__intro { display: grid; align-content: start; gap: var(--space-md); }
.ask__intro .lead { color: var(--color-ink-2); }
.ask__call { margin-top: var(--space-sm); color: var(--color-ink-2); }
.builder { display: grid; gap: var(--space-xl); min-width: 0; }
.chips { min-width: 0; margin: 0; padding: 0; border: 0; }
.chips legend, .field label { display: block; margin-bottom: var(--space-sm); padding: 0; font-weight: 600; color: var(--color-ink); }
.chips__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.chips input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.chips label { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border-radius: var(--radius-pill); background: color-mix(in oklch, var(--color-glass) 55%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); box-shadow: inset 0 0 0 1px var(--color-ink), inset 0 2px 0 var(--color-glass-hi), 0 10px 24px -14px var(--color-glass-shadow); color: var(--color-ink); font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.chips label:hover { background: color-mix(in oklch, var(--color-glass) 85%, transparent); }
.chips input:checked + label { background: var(--color-light); color: var(--color-light-ink); }
.chips input:focus-visible + label { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.chips input:active + label { transform: translateY(1px); }
.chips input:disabled + label { opacity: 0.55; cursor: not-allowed; }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .chips label { background: color-mix(in oklch, var(--color-glass) 85%, transparent); } }
.field input { width: 100%; min-height: 52px; padding: 0 var(--space-md); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-paper); color: var(--color-ink); font-size: max(16px, var(--text-md)); outline: 2px solid transparent; outline-offset: -3px; }
.field input::placeholder { color: var(--color-muted); }
.field input:focus-visible { outline-color: var(--color-focus); }
.field input:disabled { opacity: 0.55; cursor: not-allowed; }
.bubble__label { margin-bottom: var(--space-xs); font-size: var(--text-sm); color: var(--color-ink-2); }
.bubble { --glass-a: 0.6; display: block; padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card) var(--radius-card) var(--radius-card) var(--space-2xs); color: var(--color-ink); font-size: var(--text-lg); line-height: 1.45; }

@media (min-width: 60rem) {
  .ask__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
  .ask__intro { grid-column: 1 / span 5; }
  .builder { grid-column: 7 / span 6; }
}

/* Footer: the mast under a water line */
.foot { position: relative; margin-top: calc(-1 * var(--wave-h)); padding-block: calc(var(--space-3xl) + var(--wave-h)) var(--space-2xl); background: var(--color-ink); color: var(--color-on-ink); }
.foot__grid { display: grid; gap: var(--space-xl); }
.foot__mast { display: grid; justify-items: start; gap: var(--space-md); min-width: 0; }
.foot__mast img { width: 120px; height: 120px; }
.foot__line { color: var(--color-on-ink); font-size: var(--text-lg); max-width: 40ch; }
.foot__links { display: grid; gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.foot__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-ink); font-size: var(--text-lg); text-decoration: underline; text-decoration-color: var(--color-rule-on-ink); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-micro) var(--ease-out); }
.foot__links a:hover { text-decoration-color: var(--color-light); }
.foot a:focus-visible { outline: 2px solid var(--color-focus-on-ink); outline-offset: 2px; }
.foot__small { padding-top: var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule-on-ink); font-size: var(--text-sm); color: var(--color-on-ink-2); }

@media (min-width: 60rem) {
  .foot__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-2xl); align-items: end; }
  .foot__mast { grid-column: 1 / span 8; }
  .foot__mast img { width: 168px; height: 168px; }
  .foot__links { grid-column: 10 / span 3; }
  .foot__line { grid-column: 1 / span 8; }
  .foot__small { grid-column: 1 / -1; }
}

/* Reveal: sections settle in once, 12px up */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* WhatsApp at hand: a glass bar on phones, a floating glass button on desktop; out of the way while the hero's buttons or the builder are on screen */
.dock { --glass-a: 0.55; position: fixed; z-index: var(--z-sticky); transition: transform var(--dur-short) var(--ease-out); }
.dock .btn { z-index: 1; }
.dock.is-hidden { transform: translateY(calc(100% + var(--space-2xl))); }
@media (max-width: 59.99rem) {
  .dock { inset-inline: 0; bottom: 0; padding: var(--space-sm) var(--gutter) calc(var(--space-sm) + env(safe-area-inset-bottom)); border-radius: var(--radius-card) var(--radius-card) 0 0; }
  .foot { padding-bottom: calc(var(--space-2xl) + var(--space-3xl) + env(safe-area-inset-bottom)); }
}
@media (min-width: 60rem) {
  .dock { right: var(--space-xl); bottom: var(--space-xl); padding: var(--space-xs); border-radius: var(--radius-pill); }
  .dock .btn--wide { width: auto; }
}
@media (max-width: 40rem) {
  .btn { padding: 0 var(--space-md); }
  .actions { flex-wrap: nowrap; }
  .actions .btn:first-child { flex: 1 1 auto; }
  .btn--call { width: 52px; padding: 0; flex-shrink: 0; }
  .btn--call .btn__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 22.5rem) {
  .actions { flex-wrap: wrap; }
  .actions .btn:first-child { flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .chips label, .dock, .seal, .link, .foot__links a, .glare, .step__body, .step__icon, .steps li, .drop::after, .js [data-reveal] { transition: none; }
  .btn--wa::after, .seal::after, .caustics span, [data-loop] .sparkle, .compare__burst .sparkle, .water-word, .water-word.is-running { animation: none; }
  .btn--wa::after, .seal::after, .compare__burst { display: none; }
  .sparkle { opacity: 0.85; }
  .js [data-reveal], .js .steps:not(.is-in) li { opacity: 1; transform: none; }
  .js .steps:not(.is-in) .drop::after { transform: scaleY(0.5); }
}