/* Blue Star Pool and Spas Services · about.css
   Page "about" (/about/ and /es/nosotros/). Every class here is prefixed .ab- (plus the contract's .faq-q / .faq-a).
   The shared system lives in base.css and is never redefined here. */

/* ---------- air: content to content 96-140 @1440. Band edges use the full --pad ---------- */
.ab-story,.ab-creed,.ab-faq,.ab-stats,.ab-close{--ab-in:clamp(3rem,4.6vw,4.2rem);--ab-gap:clamp(2rem,5vw,4.5rem);--ab-hair:rgba(var(--navy-rgb),.18)}
.ab-story{padding-block:var(--pad) var(--ab-in)}
.ab-creed{padding-block:var(--ab-in) var(--pad)}
.ab-faq{padding-block:var(--pad) var(--ab-in)}
.ab-stats{padding-block:var(--ab-in)}
.ab-close{padding-block:var(--ab-in) clamp(6.2rem,9.2vw,8.4rem)}

/* ================= A1 · STORY ================= */
.ab-story-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--ab-gap);align-items:stretch}
.ab-story-fig{position:relative;margin:0;min-height:440px}
/* echo frame: a cyan ring that peeks out top and left only, so the bottoms stay flush */
.ab-story-fig::before{content:"";position:absolute;inset:-14px 14px 14px -14px;z-index:0;border:1.5px solid rgba(var(--cyan-rgb),.65);border-radius:calc(var(--r) + 8px);pointer-events:none}
.ab-story-media{position:absolute;inset:0;z-index:1;border-radius:var(--r);overflow:hidden;background:var(--aqua);box-shadow:var(--shadow)}
.ab-story-media img{width:100%;height:100%;object-fit:cover;object-position:30% 50%;will-change:transform}
.ab-sticker{position:absolute;z-index:2;right:-40px;bottom:46px;rotate:-13deg;will-change:transform}
.ab-sticker .strip{width:150px;padding:7px 7px 7px 27px;border-radius:8px;box-shadow:var(--shadow)}
.ab-story-copy{min-width:0}
.ab-story-copy h2{margin-top:1.05rem}
.ab-story-p{margin-top:1.1rem;max-width:58ch}
.ab-story-copy h2 + .ab-story-p{margin-top:1.5rem}
.ab-facts{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.7rem}
.ab-facts .chip{min-height:40px}
/* chips pop with a soft overshoot (P6: back.out only on chip pops) */
.js .ab-facts .rv-pop{transition:opacity .45s var(--ease),transform .6s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--i,0)*90ms)}
.js .ab-facts .rv-pop:not(.is-in){transform:scale(.8)}

/* ================= A2 · CREED ================= */
.ab-jetring{position:absolute;z-index:0;right:max(-11%,calc(50% - 860px));top:-34%;width:clamp(250px,34vw,500px);height:auto;aspect-ratio:1;fill:none;stroke:rgba(var(--blue-rgb),.15);stroke-width:.07;stroke-linecap:round;pointer-events:none;will-change:transform}
.ab-creed-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--ab-gap);align-items:end;margin-bottom:clamp(2rem,3.4vw,3.2rem)}
.ab-creed-title{min-width:0}
.ab-creed-title h2{margin-top:1.05rem}
.ab-mv{margin:0}
.ab-mv-row{display:grid;grid-template-columns:5.4rem minmax(0,1fr);gap:1.1rem;align-items:baseline;padding-block:.95rem;border-top:1.5px solid var(--ab-hair)}
.ab-mv-row:last-child{border-bottom:1.5px solid var(--ab-hair)}
.ab-mv dt{font-weight:700;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.ab-mv dd{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.06rem,1.42vw,1.3rem);line-height:1.25;letter-spacing:-.01em;color:var(--navy)}

.ab-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(1rem,1.7vw,1.5rem);align-items:stretch}
.ab-card-slot{display:flex;min-width:0}
.ab-card-slot:nth-child(odd){margin-bottom:1.75rem}
.ab-card-slot:nth-child(even){margin-top:1.75rem}
.ab-card{position:relative;flex:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:1.55rem 1.45rem 1.5rem;border-radius:var(--r);background:var(--white);box-shadow:var(--shadow-sm);overflow:clip;will-change:transform}
.ab-card > *{position:relative;z-index:1}
.ab-card .ab-card-idx{position:absolute;z-index:0;top:1.15rem;right:1.05rem;font-size:4.3rem;-webkit-text-stroke:1.5px rgba(var(--blue-rgb),.22)}
.ab-card-ico{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--cyan);color:var(--navy);transition:background-color .3s,color .3s}
.ab-card-ico .ico{width:26px;height:26px}
.ab-term{margin-top:1.35rem;font-family:var(--display);font-weight:700;font-size:clamp(1.45rem,1.95vw,1.8rem);line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
.ab-hair{width:64px;height:8px;margin-block:.9rem .85rem;fill:none;stroke:var(--cyan);stroke-width:2.4;stroke-linecap:round}
.ab-mean{margin-bottom:1.5rem;font-size:.98rem;line-height:1.55}
.ab-card-tag{margin-top:auto}
.ab-card .strip.ab-card-tag{width:128px}
/* the water level: it climbs from card 01 to card 04 and rises a little more on hover (GSAP) */
.ab-card .ab-card-water{position:absolute;z-index:0;left:0;right:0;bottom:-34px;height:calc(var(--lvl,40px) + 34px);pointer-events:none;background:linear-gradient(180deg,rgba(var(--cyan-rgb),.24),rgba(var(--cyan-rgb),.09)) 0 11px/100% calc(100% - 11px) no-repeat;will-change:transform}
.ab-card-water svg{position:absolute;left:0;top:0;width:100%;height:12px;fill:rgba(var(--cyan-rgb),.24)}
@media (hover:hover){.ab-card:hover .ab-card-ico{background:var(--navy);color:var(--cyan)}}

/* ================= A3 · BAND ================= */
.ab-band{padding-block:clamp(4.2rem,7vw,6.8rem);text-align:center}
.ab-band-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.ab-band-caustic{position:absolute;inset:-16% 0;background:url("/assets/img/scene/caustics.webp") center/cover;opacity:.58;will-change:transform}
.ab-band-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 76% at 50% 50%,rgba(var(--navy-rgb),.66) 0%,rgba(var(--navy-rgb),0) 100%)}
.ab-band .ab-band-ghost{left:0;right:0;top:50%;margin-top:-.4em;text-align:center;font-size:clamp(5.2rem,20vw,19rem);-webkit-text-stroke-color:rgba(var(--cyan-rgb),.15);will-change:transform}
.ab-band-in{display:flex;flex-direction:column;align-items:center}
.ab-phrase{width:100%;margin-top:1.25rem;font-size:clamp(2.3rem,5.2vw,5.2rem);line-height:1;color:var(--white);text-shadow:0 2px 4px rgba(var(--navy-rgb),.45),0 8px 24px rgba(var(--navy-rgb),.3)}
.ab-phrase .hl-in{margin-inline:auto}
.ab-band-sat{position:absolute;z-index:1;top:50%;pointer-events:none;color:rgba(var(--cyan-rgb),.62);will-change:transform}
.ab-band-sat svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-band-sat--thermo{left:calc(50% - min(44vw,610px));width:50px;margin-top:-96px;rotate:-12deg}
.ab-band-sat--jet{left:calc(50% + min(44vw,610px) - 92px);width:92px;margin-top:4px}
.ab-band-sat--jet svg{stroke-width:.42}

/* ================= A5 · FAQ ================= */
.ab-faq-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:var(--ab-gap);align-items:stretch}
.ab-faq-copy{position:relative;align-self:start;min-width:0}
.ab-faq-copy > *{position:relative;z-index:1}
.ab-faq-copy .ab-faq-ghost{position:absolute;z-index:0;right:-.4rem;top:-5rem;font-size:clamp(11rem,22vw,22rem)}
.ab-faq-copy h2{margin-top:1.05rem}
.ab-faq-list{margin-top:clamp(1.5rem,2.3vw,2.1rem);border-top:1.5px solid var(--ab-hair)}
.ab-q{position:relative;border-bottom:1.5px solid var(--ab-hair)}
.ab-q::before{content:"";position:absolute;inset:-1.5px 0;z-index:0;background:linear-gradient(90deg,rgba(var(--aqua-rgb),.95),rgba(var(--aqua-rgb),0));opacity:0;transition:opacity .35s;pointer-events:none}
.ab-q::after{content:"";position:absolute;z-index:1;left:0;top:-1.5px;bottom:-1.5px;width:3px;border-radius:2px;background:var(--cyan);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease);pointer-events:none}
.ab-q.is-open::before{opacity:1}
.ab-q.is-open::after{transform:scaleY(1)}
.ab-q-h{position:relative;z-index:1;margin:0}
.ab-q-btn{display:grid;grid-template-columns:2.1rem minmax(0,1fr) 44px;align-items:center;gap:.8rem;width:100%;min-height:74px;padding:.85rem .1rem .85rem 1rem;text-align:left;color:var(--navy)}
.ab-q-n{font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.02em;color:var(--blue)}
.faq-q{font-family:var(--display);font-weight:600;font-size:clamp(1.06rem,1.4vw,1.28rem);line-height:1.22;letter-spacing:-.01em;transition:color .2s}
.ab-q-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid rgba(var(--navy-rgb),.3);transition:background-color .3s,border-color .3s}
.ab-q-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .45s var(--ease)}
.ab-q.is-open .ab-q-ico{background:var(--cyan);border-color:var(--cyan)}
.ab-q.is-open .ab-q-ico svg{transform:rotate(45deg)}
@media (hover:hover){
  .ab-q:not(.is-open):hover::before{opacity:.5}
  .ab-q-btn:hover .ab-q-ico{border-color:var(--navy)}
  .ab-q-btn:hover .faq-q{color:var(--blue)}
}
.ab-q .acc-panel{position:relative;z-index:1}
/* closed answers leave the layout (display:none) once the row has finished closing; the row itself animates 0fr to 1fr */
.ab-q-clip{display:none;transition:display .45s allow-discrete}
.ab-q.is-open .ab-q-clip{display:block}
.faq-a{padding:0 3.6rem 1.35rem 3.9rem}
.faq-a p{max-width:60ch}
/* inline links of the answers: 44 px tap area without moving the underline */
.faq-a .link{position:relative}
.faq-a .link::after{content:"";position:absolute;inset:-11px -4px}
html:not(.js) .ab-q .acc-panel{grid-template-rows:1fr}
html:not(.js) .ab-q-clip{display:block}
html.reduced .ab-q .acc-panel,html.reduced .ab-q-clip,html.reduced .ab-q::after,html.reduced .ab-q::before,html.reduced .ab-q-ico svg{transition:none}

.ab-faq-fig{position:relative;margin:0;min-height:420px}
.ab-faq-fig.is-locked{align-self:start;position:sticky;top:104px;min-height:0}
.ab-faq-media{position:absolute;inset:0;border-radius:var(--r);overflow:hidden;background:var(--navy);box-shadow:var(--shadow)}
.ab-faq-media img{width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.ab-faq-cap{position:absolute;z-index:2;left:18px;top:18px;box-shadow:var(--shadow-sm)}

/* ================= A4 · STATS (AIRMAX on a light surface) ================= */
.ab-stats .ab-stats-ghost{right:max(-3%,calc(50% - 760px));top:50%;margin-top:-.4em;font-size:clamp(10rem,25vw,25rem);-webkit-text-stroke-color:rgba(var(--blue-rgb),.12);will-change:transform}
.ab-stats-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:var(--ab-gap)}
.ab-stats-copy{grid-column:2;min-width:0}
.ab-stats-copy h2{margin-top:1.05rem}
.ab-stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(1.5rem,2.4vw,2.2rem);border-top:1.5px solid var(--ab-hair)}
.ab-stat{min-width:0;padding:1.45rem 1rem 1.4rem 0;border-bottom:1.5px solid var(--ab-hair)}
.ab-stat:nth-child(odd){border-right:1.5px solid var(--ab-hair)}
.ab-stat:nth-child(even){padding-left:clamp(1.1rem,2vw,1.8rem)}
.ab-stat-val{display:flex;align-items:flex-start;font-family:var(--display);font-weight:700;font-size:clamp(3.4rem,5.6vw,5.6rem);line-height:.92;letter-spacing:-.03em;color:var(--navy)}
.ab-stat-n{display:inline-block;min-width:1ch;font-variant-numeric:tabular-nums;white-space:nowrap}
.ab-stat-mask{overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.ab-stat-mask-in{display:inline-block;will-change:transform}
.ab-stat-slash{color:var(--blue)}
.ab-stat-sup{font-size:.52em;line-height:1;margin:.1em 0 0 .05em;color:var(--blue)}
.ab-stat-label{margin-top:.85rem;font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}
.ab-stat-desc{margin-top:.3rem;max-width:27ch;font-size:.96rem;line-height:1.45}

/* the one big element bleeding the left edge: real photo in a rounded white frame */
.ab-stats-fig{position:absolute;z-index:1;margin:0;top:var(--ab-in);bottom:var(--ab-in);left:-28px;right:calc(50% + var(--ab-gap)/2)}
.js .ab-stats-fig.rv:not(.is-in){transform:translate3d(-56px,0,0)}
.ab-stats-frame{position:absolute;inset:0;border-radius:calc(var(--r) + 6px);overflow:hidden;border:10px solid var(--white);background:var(--white);box-shadow:var(--shadow)}
.ab-stats-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;border-radius:calc(var(--r) - 4px)}
.ab-photo-link{position:absolute;z-index:2;right:26px;bottom:26px;min-height:44px;padding:.55rem 1rem .55rem 1.15rem;gap:.55rem;box-shadow:var(--shadow-sm);transition:background-color .25s,border-color .25s}
.ab-photo-link svg{transition:transform .3s var(--ease)}
@media (hover:hover){
  .ab-photo-link:hover{background:var(--white);border-color:var(--white)}
  .ab-photo-link:hover svg{transform:translateX(3px)}
}
@media (min-width:2240px){.ab-stats-fig{left:calc(50% - 960px)}}

/* ================= CLOSE · five moments on one water line ================= */
.ab-close-head{display:flex;flex-direction:column;align-items:center;text-align:center}
.ab-close-head h2{width:100%;margin-top:1.05rem}
.ab-close-head .hl-in{margin-inline:auto}
.ab-close-head .lead{margin-top:1.2rem;max-width:50ch}
.ab-line{position:relative;margin-top:clamp(2.2rem,3.6vw,3.4rem)}
.ab-line-h,.ab-line-v{position:absolute;fill:none;overflow:visible;pointer-events:none}
.ab-line-h{left:0;top:8px;width:100%;height:120px}
.ab-line-v{display:none}
.ab-line-bed{stroke:rgba(var(--cyan-rgb),.3);stroke-width:12;stroke-linecap:round}
.ab-line-draw{stroke-width:3.5;stroke-dasharray:1000;stroke-dashoffset:0}
.ab-nodes{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0}
.ab-node{display:flex;justify-content:center;min-width:0}
.js .ab-node.rv-pop{transition-delay:calc(var(--i,0)*300ms + 150ms)}
.ab-node-a{display:flex;flex-direction:column;align-items:center;width:100%;padding-inline:.5rem;text-align:center;border-radius:var(--r-sm)}
.ab-node-disc{flex:none;display:grid;place-items:center;width:76px;height:76px;border-radius:50%;background:var(--white);border:2px solid var(--blue);color:var(--navy);box-shadow:0 0 0 9px rgba(var(--aqua-rgb),.9),var(--shadow-sm);transition:background-color .3s,border-color .3s;will-change:transform}
.ab-node-disc .ico{width:30px;height:30px}
.ab-node:nth-child(odd) .ab-node-disc{margin-bottom:60px}
.ab-node:nth-child(even) .ab-node-disc{margin-top:60px}
.ab-node-txt{display:flex;flex-direction:column;align-items:center;margin-top:1.15rem}
.ab-node-n{font-family:var(--display);font-weight:700;font-size:.86rem;letter-spacing:.06em;color:var(--blue)}
.ab-node-t{margin-top:.2rem;font-family:var(--display);font-weight:700;font-size:clamp(1.2rem,1.6vw,1.45rem);line-height:1.1;letter-spacing:-.012em;transition:color .2s}
.ab-node-d{margin-top:.4rem;max-width:25ch;font-size:.96rem;line-height:1.45;text-wrap:balance;color:rgba(var(--navy-rgb),.84)}
@media (hover:hover){
  .ab-node-a:hover .ab-node-disc{background:var(--cyan);border-color:var(--cyan)}
  .ab-node-a:hover .ab-node-t{color:var(--blue)}
}
.ab-node-a:focus-visible .ab-node-disc{background:var(--cyan);border-color:var(--cyan)}
.ab-close-pool{position:relative;display:flex;align-items:center;gap:.7rem;width:fit-content;max-width:100%;margin:clamp(2rem,3vw,2.8rem) auto 0;padding:.7rem 1.35rem .7rem 1.1rem;border-radius:999px;background:var(--aqua);font-weight:600;color:var(--navy)}
.ab-close-pool .ico{flex:none;width:26px;height:26px;color:var(--blue)}
.ab-close-pool .link::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* ================= RESPONSIVE ================= */
@media (max-width:1180px){
  .ab-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .ab-story-grid{grid-template-columns:minmax(0,1fr)}
  .ab-story-fig{min-height:0;aspect-ratio:4/3}
  .ab-sticker{right:16px;bottom:auto;top:-22px}
  .ab-creed-head{grid-template-columns:minmax(0,1fr);align-items:start}
  .ab-band-sat{display:none}
  .ab-faq-grid{grid-template-columns:minmax(0,1fr)}
  .ab-faq-fig,.ab-faq-fig.is-locked{position:relative;top:auto;min-height:0;aspect-ratio:16/11}
  .ab-stats-wrap{grid-template-columns:minmax(0,1fr)}
  .ab-stats-copy{grid-column:1}
  .ab-stats-fig{position:relative;top:auto;bottom:auto;left:auto;right:auto;margin:clamp(1.8rem,5vw,2.4rem) var(--gut) 0 0;aspect-ratio:4/3}
  .ab-stats-frame{border-left-width:0;border-radius:0 calc(var(--r) + 6px) calc(var(--r) + 6px) 0}
  .ab-stats-frame img{border-radius:0 calc(var(--r) - 4px) calc(var(--r) - 4px) 0}
  .ab-stats .ab-stats-ghost{top:30%}
  .ab-faq-copy .ab-faq-ghost{top:-3rem}
  .ab-node-a{padding-inline:.25rem}
  .ab-node-d{font-size:.9rem}
}
@media (max-width:700px){
  /* the water line turns vertical and the moments stack */
  .ab-line-h{display:none}
  .ab-line-v{display:block;left:0;top:0;width:56px;height:100%}
  .ab-nodes{grid-template-columns:minmax(0,1fr);gap:.35rem}
  .ab-node{justify-content:flex-start}
  .js .ab-node.rv-pop{transition-delay:0ms}
  .ab-node-a{flex-direction:row;align-items:center;gap:1.15rem;min-height:84px;padding:.75rem 0;text-align:left}
  .ab-nodes .ab-node .ab-node-disc{width:56px;height:56px;margin:0;box-shadow:0 0 0 7px var(--white),var(--shadow-sm)}
  .ab-node-disc .ico{width:25px;height:25px}
  .ab-node-txt{align-items:flex-start;margin-top:0}
  .ab-node-d{max-width:none;margin-top:.2rem;font-size:.96rem}
}
@media (max-width:760px){
  .ab-chip-addr{font-size:.82rem;padding-inline:.8rem}
  .ab-mv-row{grid-template-columns:minmax(0,1fr);gap:.3rem}
  .ab-q-btn{grid-template-columns:1.8rem minmax(0,1fr) 44px;gap:.65rem;padding-left:.75rem}
  .faq-a{padding:0 1rem 1.25rem 3.2rem}
  .ab-stat{padding-right:.7rem}
  .ab-stat-desc{font-size:.92rem}
  .ab-photo-link{right:16px;bottom:16px}
  .ab-close-pool{align-items:flex-start;border-radius:var(--r-sm)}
}
@media (max-width:600px){
  .ab-cards{grid-template-columns:minmax(0,1fr)}
  .ab-card-slot:nth-child(odd),.ab-card-slot:nth-child(even){margin-block:0}
}

/* ================= AJUSTES r2 2026-11-13 · «Hot tub people…» lleva el retrato del dueño (camisa negra) ================= */
.ab-story-fig--owner{min-height:560px}
.ab-story-fig--owner .ab-story-media img{object-position:38% 24%}
.ab-owner-cap{position:absolute;z-index:3;left:24px;bottom:24px;display:inline-flex;align-items:center;gap:.7rem;padding:.6rem 1.15rem .6rem .6rem;border-radius:999px;background:var(--white);color:var(--navy);box-shadow:var(--shadow)}
.ab-owner-cap b{display:block;font-family:var(--display);font-weight:700;font-size:1.02rem;line-height:1.15}
.ab-owner-cap small{display:block;font-size:.8rem;font-weight:600;color:rgba(var(--navy-rgb),.72)}
.ab-owner-star{flex:none;width:36px;height:36px;border-radius:50%;background:var(--cyan)}
.ab-owner-star::before{content:"";display:block;width:100%;height:100%;background:var(--navy);clip-path:polygon(50% 22%,57% 41%,77% 41%,61% 53%,67% 73%,50% 61%,33% 73%,39% 53%,23% 41%,43% 41%)}
@media (max-width:900px){
  .ab-story-fig--owner{min-height:0;aspect-ratio:4/5;max-width:560px}
  .ab-owner-cap{left:14px;bottom:14px;padding:.5rem .95rem .5rem .5rem}
  .ab-owner-cap b{font-size:.94rem}.ab-owner-cap small{font-size:.74rem}
  .ab-owner-star{width:30px;height:30px}
}

/* ================= AJUSTES r6 2026-11-13 · título de la banda en 2 líneas sin puntos + párrafo corto ================= */
.ab-band-p{max-width:34rem;margin:1.2rem auto 0;font-size:clamp(1.02rem,1.2vw,1.18rem);line-height:1.55;color:rgba(var(--white-rgb),.9);text-align:center;text-wrap:pretty}

/* ================= AJUSTES r7 2026-11-13 · «Up here on the mountain»: no ghost «Big Bear», no paragraph ================= */
.ab-band .ab-band-ghost,.ab-band-p{display:none}