/* Hallmark · macrostructure: taller-orden-de-trabajo · pre-emit critique: P4 H4 E4 S5 R4 V4 · contrast: pass (40-41) · mobile: pass (34, 49, 50-57) · honest: pass (46) */
/* Juan's Cars Wash and Detailing - base.css (director de diseño, 2026-10-09)
   Colores muestreados de las fotos (ver DIRECCION.md). Los agentes de sección SOLO añaden
   CSS en su propio archivo assets/css/sec-<nombre>.css y usan estas variables y clases. */
:root{
  --ink:#14181b;        /* neutro oscuro de los autos (medio #232323) bajado de luz, tono frio del neutro frio #788086 */
  --ink-2:#1d2327;      /* superficie sobre ink: mismo tono, +luz */
  --ink-3:#2a3237;      /* borde / hover sobre ink */
  --paper:#eef0f1;      /* neutro claro de las fotos (medio #f1f1f1), tono frio */
  --paper-2:#dfe3e5;
  --mist:#788086;       /* neutro frio dominante de las fotos (28%) */
  --yellow:#f7d60b;     /* amarillo del auto del logo */
  --aqua:#23bdd4;       /* turquesa de la salpicadura del logo */
  --aqua-deep:#2e687a;  /* cian oscuro del logo: texto/enlaces sobre paper */
  --txt-d:#e6ebed;      /* texto sobre ink */
  --txt-l:#14181b;      /* texto sobre paper */
  --f-display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --f-body:'Albert Sans',system-ui,sans-serif;
  --hdr-h:64px; --bar-h:0px;           /* alto de la capa fija: cabecera arriba, barra de llamar abajo (movil) */
  --gap:clamp(16px,3vw,32px);
  --sec-y:clamp(72px,10vw,140px);
  --ease:cubic-bezier(.22,1,.36,1);
  --ink-0:#0d1012; --white:#fdfefe; --ok:#46d17a; --txt-mute:#a3abb0; --txt-mute-l:#5a6369; --yellow-ink:#14181b;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--txt-d);font:400 1.0625rem/1.62 var(--f-body);overflow-x:clip;padding-bottom:var(--bar-h);text-rendering:optimizeLegibility}
img,svg,picture{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;text-transform:uppercase;line-height:1.04;letter-spacing:.005em;margin:0 0 .4em;text-wrap:balance}
h1{font-size:clamp(2.7rem,8.4vw,7rem);font-weight:900}
h2,.h2{font-size:clamp(2.2rem,5.6vw,4.4rem)}
h3{font-size:clamp(1.4rem,2.6vw,2rem)}
p{margin:0 0 1em;text-wrap:pretty}
.label{font:700 .8rem/1 var(--f-display);letter-spacing:.16em;text-transform:uppercase;color:var(--yellow)}
.t-paper .label{color:var(--aqua-deep)}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 16px;z-index:200;font-weight:700}
.skip:focus{left:8px}

/* ---------- layout y REGLA DE CENTRADO/EQUILIBRIO (Web-Direction 2·quindecies) ----------
   .wrap = contenedor ancho centrado. .narrow = columna de lectura SIEMPRE centrada (margin-inline:auto)
   o acompanada de 2ª columna (.split). Nada estrecho y solo pegado a la izquierda. */
.sec{padding-block:var(--sec-y);position:relative}
.wrap{width:min(1240px,100% - 2*var(--gap));margin-inline:auto}
.narrow{width:min(760px,100% - 2*var(--gap));margin-inline:auto}
.split{display:grid;gap:var(--gap);grid-template-columns:1fr;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}.split.w-60{grid-template-columns:1.2fr .8fr}.split.w-40{grid-template-columns:.8fr 1.2fr}}
.center{text-align:center}
.t-ink{background:var(--ink);color:var(--txt-d)}
.t-ink-2{background:var(--ink-2);color:var(--txt-d)}
.t-paper{background:var(--paper);color:var(--txt-l)}
/* atmosfera: no color plano. grano muy suave sobre ink/paper */
.t-ink,.t-ink-2,.t-paper{background-image:radial-gradient(120% 80% at 80% 0%,rgba(35,189,212,.07),transparent 60%),var(--grain)}
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .6 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
.t-ink-2{background-color:var(--ink-2)}.t-ink{background-color:var(--ink)}.t-paper{background-color:var(--paper)}

/* ---------- botones (mejor uno primario por zona) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;min-height:50px;padding:0 26px;border-radius:999px;font:800 1.05rem/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;border:2px solid transparent;cursor:pointer;overflow:hidden;transition:transform .25s var(--ease),background .25s,color .25s,border-color .25s}
.btn svg{width:1.2em;height:1.2em;flex:none}
.btn-y{background:var(--yellow);color:var(--ink)}
.btn-y:hover{transform:translateY(-2px)}
.btn-y::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);transition:transform .7s var(--ease)}
.btn-y:hover::after{transform:translateX(120%)}  /* brillo de cera que cruza el boton */
.btn-line{border-color:var(--txt-d);color:var(--txt-d)}
.btn-line:hover{background:var(--txt-d);color:var(--ink)}
.t-paper .btn-line{border-color:var(--ink);color:var(--ink)}.t-paper .btn-line:hover{background:var(--ink);color:var(--paper)}
.btn-ink{background:var(--ink);color:var(--yellow)}.btn-ink:hover{transform:translateY(-2px);background:var(--ink-0)}

/* ---------- las dos franjas del capó (Camaro SS) = divisor y firma de la cabecera ---------- */
.stripes{display:block;height:11px;background:linear-gradient(var(--yellow) 0 4px,transparent 4px 7px,var(--aqua) 7px 11px)}

/* ---------- cabecera fija (alto = --hdr-h) ---------- */
.hdr{position:fixed;inset:0 0 auto 0;height:var(--hdr-h);z-index:100;background:rgba(20,24,27,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr::after{content:"";position:absolute;left:0;right:0;bottom:-8px;height:8px;background:linear-gradient(var(--yellow) 0 3px,transparent 3px 5px,var(--aqua) 5px 8px);pointer-events:none}
.hdr-in{height:100%;display:flex;align-items:center;gap:14px;width:min(1360px,100% - 2*var(--gap));margin-inline:auto}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand img{height:46px;width:auto}
.brand span{font:900 1.15rem/.95 var(--f-display);text-transform:uppercase;letter-spacing:.04em;display:none}
@media(min-width:420px){.brand span{display:block}}
.nav{display:none;margin-left:auto;gap:2px}
.nav a{font:800 .95rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:12px 10px;min-height:44px;display:inline-flex;align-items:center;color:var(--txt-d);position:relative}
.nav a::after{content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;background:var(--yellow);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.hdr-cta{display:none;gap:8px}
.hdr-cta .btn{min-height:44px;padding:0 18px;font-size:.95rem}
.menu-btn{margin-left:auto;min-width:44px;min-height:44px;border:2px solid var(--txt-d);background:none;color:var(--txt-d);border-radius:999px;padding:0 14px;font:800 .9rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
@media(min-width:1060px){.nav{display:flex}.hdr-cta{display:flex}.menu-btn{display:none}.lang{margin-left:6px}}
@media(max-width:1059px){.lang{margin-left:auto}.menu-btn{margin-left:0}}
/* panel movil */
.menu-panel{position:fixed;inset:var(--hdr-h) 0 0 0;background:var(--ink);z-index:99;padding:28px var(--gap) calc(var(--bar-h) + 28px);display:flex;flex-direction:column;gap:2px;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .3s,transform .3s var(--ease),visibility .3s;overflow:auto}
.menu-panel a{font:900 2.4rem/1 var(--f-display);text-transform:uppercase;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--ink-3);min-height:56px}
body.menu-open .menu-panel{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
@media(min-width:1060px){.menu-panel{display:none}}

/* ---------- toggle EN/ES: pastilla con thumb. thumb amarillo, label activo ink (contraste >10:1) ---------- */
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;border:2px solid var(--mist);border-radius:999px;padding:2px;flex:none}
.lang a{display:flex;align-items:center;justify-content:center;text-decoration:none;position:relative;z-index:1;min-width:44px;min-height:36px;background:none;border:0;font:800 .9rem/1 var(--f-display);letter-spacing:.1em;color:var(--txt-d);opacity:.7;cursor:pointer;transition:color .25s,opacity .25s}
.lang a[aria-current="page"]{color:var(--ink);opacity:1}
.lang .thumb{position:absolute;z-index:0;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);background:var(--yellow);border-radius:999px;transition:transform .35s var(--ease)}
.lang[data-active="es"] .thumb{transform:translateX(100%)}
.t-paper .lang{border-color:var(--ink)}

/* ---------- barra de llamar abajo (SOLO movil): es el suelo; no hay circulos flotantes ---------- */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:100;display:grid;grid-template-columns:1.4fr 1fr;gap:8px;padding:8px var(--gap) calc(8px + env(safe-area-inset-bottom));background:rgba(20,24,27,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--ink-3)}
.bar .btn{min-height:50px;padding:0 10px;font-size:1rem}
@media(max-width:1059px){:root{--bar-h:calc(66px + env(safe-area-inset-bottom))}}
@media(min-width:1060px){.bar{display:none}}

/* ---------- HERO ---------- */
.hero{position:relative;min-height:max(640px,100svh);display:flex;align-items:flex-end;background:var(--ink);overflow:hidden;isolation:isolate;padding-top:var(--hdr-h)}
.hero-ph{position:absolute;inset:0;z-index:-2}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 78%}
.hero-veil{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(20,24,27,.7) 0%,rgba(20,24,27,.18) 32%,rgba(20,24,27,0) 55%,rgba(20,24,27,.45) 100%),
  linear-gradient(90deg,rgba(20,24,27,.62),rgba(20,24,27,0) 62%)}
@media(min-width:900px){
  .hero-ph.pasada{left:34%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%);mask-image:linear-gradient(90deg,transparent,#000 34%)}
  .hero-ph img{object-position:22% 70%}
  .hero-veil{background:linear-gradient(180deg,rgba(20,24,27,.55) 0%,rgba(20,24,27,0) 30%,rgba(20,24,27,0) 70%,rgba(20,24,27,.45) 100%)}
}
/* EFECTO FONDO (propio+biblioteca 02-14): reflejo de pintura que sigue al puntero / al scroll */
.glare{position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle 340px at var(--mx,30%) var(--my,60%),rgba(255,255,255,.55),transparent 70%)}
.hero-in{width:min(1240px,100% - 2*var(--gap));margin-inline:auto;padding-block:clamp(28px,5vw,64px) clamp(70px,9vw,120px);position:relative}
.hero-eyebrow{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center;margin-bottom:18px}
.open-chip{display:inline-flex;align-items:center;gap:8px;border:1.5px solid rgba(230,235,237,.4);border-radius:999px;padding:6px 14px 6px 10px;font:700 .8rem/1 var(--f-display);letter-spacing:.12em;text-transform:uppercase}
.open-chip i{width:9px;height:9px;border-radius:50%;background:var(--mist)}
.open-chip[data-state="open"] i{background:var(--ok);box-shadow:0 0 0 0 rgba(70,209,122,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px rgba(70,209,122,0)}100%{box-shadow:0 0 0 0 rgba(70,209,122,0)}}
.hero h1{max-width:12ch;margin-bottom:.18em;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.h1-pre,.h1-post{display:block}
.rot{display:block;color:var(--yellow);min-height:1.02em;white-space:nowrap}
.hero .sub{max-width:34ch;font-size:clamp(1.1rem,2vw,1.35rem);color:var(--txt-d);margin-bottom:26px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:30px;font:700 .95rem/1.2 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:rgba(230,235,237,.85)}
.hero-facts b{color:var(--yellow);font-weight:800}
@media(min-width:900px){.hero h1{font-size:clamp(4rem,7vw,6.4rem);max-width:11ch}.hero .sub{max-width:34ch}.hero-in{padding-bottom:clamp(90px,10vw,130px)}}

/* ---------- ola del logo: divisor de agua (EFECTO PROPIO) ---------- */
.ola{position:absolute;left:0;right:0;bottom:-1px;height:clamp(40px,6vw,84px);overflow:hidden;pointer-events:none;z-index:1}
.ola i{position:absolute;inset:0 auto 0 0;width:200%;background:var(--c);-webkit-mask:var(--wave) repeat-x 0 100%/50% 100%;mask:var(--wave) repeat-x 0 100%/50% 100%;animation:ola var(--t,14s) linear infinite}
.ola i:nth-child(1){--c:var(--aqua);--t:18s;opacity:.9;transform:translateY(-14%)}
.ola i:nth-child(2){--c:var(--next,var(--paper));--t:11s;animation-direction:reverse}
@keyframes ola{to{transform:translateX(-50%)}}
.ola i:nth-child(1){animation-name:ola1}
@keyframes ola1{from{transform:translate(-50%,-14%)}to{transform:translate(0,-14%)}}
:root{--wave:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 80' preserveAspectRatio='none'%3E%3Cpath d='M0 40C150 0 450 0 600 40S1050 80 1200 40V80H0z'/%3E%3C/svg%3E")}

/* ---------- pasada de escurridor + brillo de cera (EFECTO PROPIO para fotos) ----------
   <div class="pasada rv"><img ...></div> : la foto se revela con un barrido y un brillo la cruza una vez */
.pasada{position:relative;overflow:hidden;border-radius:var(--r,6px)}
.hero-ph.pasada{position:absolute;--r:0}
.pasada img{width:100%;height:100%;object-fit:cover}
.js .pasada img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s var(--ease)}
.js .pasada.in img{clip-path:inset(0 0 0 0)}
.pasada::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%) no-repeat;background-size:300% 100%;background-position:100% 0;pointer-events:none}
.pasada.in::after{background-position:0 0;transition:background-position 1.3s .25s var(--ease)}

/* ---------- reveals ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i,0) * 90ms)}
.js .rv.in{opacity:1;transform:none}
.js .pasada.rv{opacity:1;transform:none}   /* la foto se anima con el barrido, no con fundido */

/* ---------- bento con pieza ancla (layout elegido; lo usa la galeria) ---------- */
.bento{display:grid;gap:12px;grid-template-columns:repeat(2,1fr);grid-auto-flow:dense}
.bento>*{min-height:0;aspect-ratio:1/1}
.bento>.anchor{grid-column:span 2;aspect-ratio:16/10}
@media(min-width:900px){.bento{grid-template-columns:repeat(4,1fr);gap:16px}.bento>.anchor{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}.bento>.wide{grid-column:span 2;aspect-ratio:2/1}}

/* ---------- pie ---------- */
.ftr{background:var(--ink-0);color:var(--txt-d);padding:0 0 calc(var(--sec-y)/2)}
.ftr .stripes{margin-bottom:clamp(40px,6vw,72px)}
.ftr-grid{display:grid;gap:36px var(--gap);grid-template-columns:1fr}
@media(min-width:760px){.ftr-grid{grid-template-columns:1.2fr 1fr 1fr}}
.ftr h4{font-size:1.05rem;letter-spacing:.14em;color:var(--yellow);margin-bottom:.9em}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.ftr a{text-decoration:none}.ftr a:hover{color:var(--yellow)}
.ftr li a,.ftr-line a{display:inline-flex;align-items:center;min-height:40px}
.ftr-logo img{height:84px;width:auto;margin-bottom:14px}
.hours{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;font-variant-numeric:tabular-nums;margin:0}
.hours dt{font-weight:700}.hours dd{margin:0}
.hours .today{color:var(--yellow)}
.social{display:flex;gap:10px;margin-top:6px}
.social a{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink-3);display:grid;place-items:center;transition:background .25s,border-color .25s,color .25s}
.social a:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}
.social svg{width:22px;height:22px;fill:currentColor}
.legal{margin-top:44px;padding-top:20px;border-top:1px solid var(--ink-3);font-size:.9rem;color:var(--mist);display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv,.js .pasada img{opacity:1!important;transform:none!important;clip-path:none!important}
  .pasada::after{display:none}
}
/* pantallas muy anchas: la foto del hero no llega al borde, para que el conjunto quede equilibrado */
@media(min-width:1500px){.hero-ph.pasada{right:calc((100% - 1440px)*.3);-webkit-mask-image:linear-gradient(90deg,transparent,#000 34%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 34%,#000 88%,transparent)}}

.btn:active{transform:translateY(1px)}.btn:disabled,.btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}
@media(prefers-reduced-motion:reduce){.open-chip i{animation:none}}