/* ===== Herrería Don Hugo — styles.css =====
   Estética del logo: fondo blanco, tinta negra y pinceladas de verde.
   Bordes de trazo negro y sombras "de sello" (duras, sin difuminar).
   Los colores, tipografías, bordes y sombras llegan como variables desde
   la configuración (ver site/render.js → themeVars). Este archivo no tiene
   colores fijos de marca: todo se puede cambiar desde el panel. */
:root{
  /* Valores de respaldo (se reemplazan por los del panel) */
  --primary:#A8D060;--primary-600:#86A64D;--primary-300:#CDE4A3;--primary-100:#F5F9EC;--primary-grad:#769243;--primary-contrast:#111;--primary-ink:#647D39;
  --accent:#3F7A1C;--accent-ink:#3F7A1C;--accent-soft:#E4ECDF;--neon:#B9E36B;--bg:#fff;--surface:#fff;--surface-2:#F1F7E6;--fg:#111;--muted:#6B6B6B;--border:rgba(17,17,17,.14);
  --line:#111;--hard:4px;--hard-c:#111;--hl-band:var(--primary);
  --dark:#0E0F0C;--dark-2:#1F201D;--dark-fg:#FBFDF9;--dark-muted:#B5B6B2;--on-p-muted:rgba(17,17,17,.8);--on-p-line:rgba(17,17,17,.45);
  --glow-c:rgba(168,208,96,.45);--p-a10:rgba(168,208,96,.1);--p-a25:rgba(168,208,96,.25);--p-a35:rgba(168,208,96,.35);--p-a60:rgba(168,208,96,.6);--n-a28:rgba(185,227,107,.28);--a-a22:rgba(63,122,28,.22);
  --radius:8px;--radius-lg:14px;--radius-xl:20px;
  --shadow:0 2px 6px rgba(0,0,0,.05),0 14px 30px -16px rgba(0,0,0,.16);--shadow-lg:0 30px 60px -28px rgba(0,0,0,.28);--glow:0 0 0 3px rgba(168,208,96,.55);
  --font-display:"Bebas Neue",Impact,system-ui,sans-serif;--font-body:"Barlow",system-ui,sans-serif;--font-script:"Yellowtail",cursive;
  --display-weight:400;--display-track:.015em;--display-adj:1.38;--script-adj:1.05;--title-scale:1;--text-scale:1;--tt:uppercase;--grain:.06;
  --space-section:clamp(76px,10vw,140px);--container:1240px;--ease-out:cubic-bezier(.16,1,.3,1);--dur:.9s;--bw:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body);font-size:calc(clamp(16px,1.05vw,18px) * var(--text-scale));line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:var(--display-weight);line-height:1.02;margin:0;letter-spacing:var(--display-track);overflow-wrap:break-word}
p{margin:0}
.container{width:min(100% - 32px,var(--container));margin-inline:auto}
.ic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:200;background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:10px;text-decoration:none}
.skip:focus{top:16px}
.grain{display:none;position:fixed;inset:0;z-index:150;pointer-events:none;opacity:var(--grain);mix-blend-mode:multiply;background-image: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='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Palabras destacadas: pincelada de color detrás del texto, como el verde del logo */
.script{font-family:var(--font-script);font-weight:400;color:var(--accent-ink);letter-spacing:0;text-transform:none;font-size:calc(1em * var(--script-adj))}
.hl{color:inherit;background:linear-gradient(var(--hl-band),var(--hl-band)) 0 78%/100% .5em no-repeat;padding-inline:.07em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
strong{font-weight:700;color:inherit}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:700;font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--fg)}
/* tres "claveras" de herradura delante de cada título chico */
.eyebrow::before{content:"";flex:none;width:24px;height:11px;transform:skewX(-14deg);background:linear-gradient(90deg,var(--primary-ink) 0 5px,transparent 5px 9.5px,var(--primary-ink) 9.5px 14.5px,transparent 14.5px 19px,var(--primary-ink) 19px 24px)}
.hero__eyebrow::before{display:none}
.dot{width:12px;height:12px;background:var(--primary);border:var(--bw) solid var(--line);transform:rotate(45deg);flex:none}
.h2{font-size:calc(clamp(1.9rem,4.2vw,3.4rem) * var(--title-scale) * var(--display-adj));text-transform:var(--tt)}
.h2 .script{font-size:calc(.86em * var(--script-adj));line-height:.8}
.lead{color:var(--muted);font-size:clamp(1.02rem,1.3vw,1.18rem);max-width:58ch}
.lead strong{color:var(--fg)}
.link{text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;transition:background-size .5s var(--ease-out)}
.link:hover{background-size:100% 1.5px}
.note{display:flex;align-items:center;gap:8px;color:var(--muted);margin-top:24px;font-size:.95rem}

/* ---------- Tonos de sección (fondo) ---------- */
.tone-claro{background:var(--bg);color:var(--fg)}
.tone-suave{background:var(--surface-2);color:var(--fg)}
.tone-oscuro{--fg:var(--dark-fg);--muted:var(--dark-muted);--surface:var(--dark-2);--surface-2:rgba(255,255,255,.05);--border:rgba(255,255,255,.14);--line:rgba(255,255,255,.9);--hard-c:var(--primary);--primary-ink:var(--neon);--accent-ink:var(--neon);--primary-100:rgba(255,255,255,.08);background:var(--dark);color:var(--fg)}
.tone-oscuro .hl{background:none;color:var(--neon);padding:0;margin:0}
.tone-color{--fg:var(--primary-contrast);--muted:var(--on-p-muted);--primary-ink:var(--primary-contrast);--accent-ink:var(--primary-contrast);--surface:rgba(255,255,255,.3);--surface-2:rgba(255,255,255,.2);--border:var(--on-p-line);--line:var(--primary-contrast);--hard-c:var(--primary-contrast);--hl-band:rgba(255,255,255,.6);--primary-100:rgba(255,255,255,.3);background:var(--primary);color:var(--fg)}
.sec.tone-oscuro:not(.hero):not(.marquee),.sec.tone-color:not(.hero):not(.marquee){border-radius:var(--radius-xl)}
.sec.tone-oscuro:not(.hero):not(.marquee):has(+ .tone-oscuro),.sec.tone-color:not(.hero):not(.marquee):has(+ .tone-color){border-bottom-left-radius:0;border-bottom-right-radius:0}
.sec.tone-oscuro + .sec.tone-oscuro:not(.hero):not(.marquee),.sec.tone-color + .sec.tone-color:not(.hero):not(.marquee){border-top-left-radius:0;border-top-right-radius:0}
.sec.tone-oscuro + .sec.tone-oscuro.section,.sec.tone-oscuro + .sec.tone-oscuro.paint,.sec.tone-color + .sec.tone-color.section{padding-top:clamp(20px,4vw,48px)}

/* ---------- Botones (sello: borde negro + sombra dura) ---------- */
.btn{--h:50px;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--h);padding:0 22px;border-radius:var(--radius);font-weight:700;font-family:var(--font-body);font-size:.95rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;border:var(--bw) solid var(--line);cursor:pointer;transition:translate .25s var(--ease-out),box-shadow .25s var(--ease-out),background .25s,color .25s,transform .4s var(--ease-out);text-align:center}
.btn--sm{--h:44px;padding:0 16px;font-size:.86rem}
.btn--lg{--h:58px;padding:0 28px;font-size:1rem}
.btn--primary{background:var(--primary);color:var(--primary-contrast);box-shadow:var(--hard) var(--hard) 0 var(--hard-c)}
.btn--primary:hover{translate:calc(var(--hard) / 2) calc(var(--hard) / 2);box-shadow:calc(var(--hard) / 2) calc(var(--hard) / 2) 0 var(--hard-c);background:var(--primary-300)}
.btn--primary:active{translate:var(--hard) var(--hard);box-shadow:0 0 0 var(--hard-c)}
.btn--ghost{background:var(--surface);color:var(--fg)}
.btn--ghost:hover{background:var(--fg);color:var(--bg)}
.tone-oscuro .btn--primary{border-color:var(--primary);--hard-c:rgba(255,255,255,.92)}
.tone-oscuro .btn--ghost{background:transparent}
.tone-oscuro .btn--ghost:hover{background:var(--dark-fg);color:var(--dark)}
.tone-color .btn--primary{background:var(--primary-contrast);color:var(--primary);--hard-c:rgba(0,0,0,.28)}
.tone-color .btn--primary:hover{background:var(--primary-contrast)}
.tone-color .btn--ghost{background:transparent;color:var(--fg)}
.tone-color .btn--ghost:hover{background:var(--primary-contrast);color:var(--primary)}

/* ---------- Navegación ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:100;transition:padding .5s var(--ease-out);padding:14px 0}
.nav__inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:8px 10px 8px 12px;border-radius:calc(var(--radius) + 6px);border:var(--bw) solid transparent;transition:background .4s,border-color .4s,box-shadow .4s}
.nav.is-scrolled{padding:8px 0}
.nav.is-scrolled .nav__inner{background:var(--bg);border-color:var(--line);box-shadow:var(--hard) var(--hard) 0 var(--hard-c)}
.nav__brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(1.12rem * var(--display-adj));letter-spacing:.03em;line-height:1;text-transform:var(--tt);color:var(--fg);min-width:0}
.nav__brand img{height:52px;width:auto;max-width:150px;object-fit:contain}
.nav__brand img.is-round{width:52px;border-radius:50%;object-fit:cover;border:var(--bw) solid var(--line);background:#fff}
.nav__brand span{display:flex;align-items:baseline;gap:.3em;white-space:nowrap}
.nav__brand em{font-family:var(--font-script);font-style:normal;text-transform:none;color:var(--accent-ink);font-weight:400;font-size:1em;letter-spacing:0}
.nav__brand--light{color:var(--dark-fg)}
.nav__brand--light img{background:#fff;border-radius:var(--radius);padding:5px;height:64px}
.nav__brand--light em{color:var(--neon)}
.nav--on-dark:not(.is-scrolled){--fg:var(--dark-fg);--surface:var(--dark-2);--border:rgba(255,255,255,.14);--line:rgba(255,255,255,.9);--primary-ink:var(--neon);--accent-ink:var(--neon);color:var(--fg)}
.nav--on-dark:not(.is-scrolled) .nav__brand img{background:#fff;border-radius:var(--radius);padding:3px}
.nav--on-color:not(.is-scrolled){--fg:var(--primary-contrast);--surface:rgba(255,255,255,.3);--border:var(--on-p-line);--line:var(--primary-contrast);--primary-ink:var(--primary-contrast);--accent-ink:var(--primary-contrast);color:var(--fg)}
.nav--on-color:not(.is-scrolled) .btn--primary{background:var(--primary-contrast);color:var(--primary)}
.nav__links{display:none;gap:28px}
.nav__links a{text-decoration:none;font-weight:700;font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;position:relative;padding:4px 0;isolation:isolate}
.nav__links a::after{content:"";position:absolute;left:-3px;right:-3px;bottom:2px;height:8px;background:var(--hl-band);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out);z-index:-1}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}
.nav__cta{display:flex;align-items:center;gap:10px}
.nav__cta .btn{white-space:nowrap}
.nav__brand{flex-shrink:1;overflow:hidden}
.nav__burger{width:46px;height:46px;border-radius:var(--radius);border:var(--bw) solid var(--line);background:var(--surface);display:grid;place-content:center;gap:5px;cursor:pointer}
.nav__burger span{width:18px;height:2px;background:var(--fg);border-radius:2px;transition:transform .4s var(--ease-out)}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:90;background:var(--dark);color:var(--dark-fg);display:flex;flex-direction:column;justify-content:center;gap:40px;padding:100px 24px 40px}
.mmenu[hidden]{display:none}
.mmenu nav{display:flex;flex-direction:column;gap:4px}
.mmenu nav a{font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(clamp(1.7rem,7.5vw,2.4rem) * var(--display-adj));letter-spacing:var(--display-track);text-transform:var(--tt);line-height:1.1;text-decoration:none;padding:4px 0}
.mmenu nav a:hover{color:var(--neon)}
.mmenu .btn{align-self:flex-start;border-color:var(--primary)}

/* ---------- Portada ---------- */
.hero{position:relative;padding:130px 0 70px;overflow:clip}
.hero__deco{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.hero__shoe{position:absolute;width:min(92vw,760px);right:-22%;top:-6%;fill:none;stroke:var(--fg);stroke-width:46;stroke-linecap:round;stroke-linejoin:round;opacity:.045;transform:rotate(14deg)}
.hero__brush{position:absolute;left:-9%;bottom:3%;width:min(46vw,400px);aspect-ratio:1;border-radius:46% 54% 58% 42%/52% 44% 56% 48%;background:var(--primary);opacity:.16}
.hero.tone-color .hero__brush{display:none}
.hero.tone-oscuro .hero__shoe,.hero.tone-color .hero__shoe{opacity:.08}
.hero__grid{position:relative;display:grid;gap:48px}
.hero__grid>*{min-width:0}
.hero__title{font-size:calc(clamp(2.2rem,8.2vw,5.1rem) * var(--title-scale) * var(--display-adj));line-height:.92;text-transform:var(--tt);margin:18px 0 22px;letter-spacing:var(--display-track)}
.hero__title .line{display:block;overflow:hidden;padding:.04em 0 .08em}
.hero__title .line__in{display:inline-block}
.hero__title .script{font-size:calc(.82em * var(--script-adj));text-transform:none;line-height:.9;display:inline-block;transform:rotate(-3deg);padding:0 .08em}
.hero__sub{font-size:clamp(1.05rem,1.4vw,1.22rem);color:var(--muted);max-width:48ch}
.hero__sub strong{color:var(--fg)}
.hero__ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px}
.hero__ctas--center{justify-content:center}
.hero__chips{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.hero__chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:var(--radius);background:var(--surface);border:1.5px solid var(--line);font-weight:600;font-size:.9rem}
.hero__chips .ic{color:var(--primary-ink)}
.hero__media{position:relative;min-height:440px}
.hero__img{position:absolute;margin:0;overflow:hidden;border-radius:var(--radius-lg);border:var(--bw) solid var(--line);background:var(--surface-2);box-shadow:calc(var(--hard) * 3) calc(var(--hard) * 3) 0 var(--primary)}
.hero__img img{width:100%;height:100%;object-fit:cover}
.hero__img--main{inset:0 22% 0 0}
.hero__img--main img{object-position:50% 38%}
.hero__img--main.is-solo{inset:0 12px 12px 0}
.hero__img--side{width:42%;aspect-ratio:3/4;right:0;bottom:-24px;box-shadow:calc(var(--hard) * 2) calc(var(--hard) * 2) 0 var(--hard-c)}
.badge-spin{position:absolute;right:-2%;top:-26px;width:124px;height:124px;border-radius:50%;background:var(--surface);border:var(--bw) solid var(--line);box-shadow:var(--hard) var(--hard) 0 var(--hard-c);display:grid;place-items:center;z-index:2}
.badge-spin svg{position:absolute;inset:0;animation:spin 18s linear infinite}
.badge-spin text{font-family:var(--font-body);font-weight:700;font-size:10.5px;letter-spacing:.16em;fill:var(--fg)}
.badge-spin__core{width:56px;height:56px;border-radius:50%;background:var(--primary);color:var(--primary-contrast);border:var(--bw) solid var(--line);display:grid;place-items:center;font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(1rem * var(--display-adj));line-height:1;letter-spacing:.02em}
@keyframes spin{to{transform:rotate(360deg)}}
.float-card{position:absolute;left:-10px;bottom:34px;display:flex;align-items:center;gap:12px;padding:12px 18px 12px 12px;border-radius:var(--radius);background:var(--surface);color:var(--fg);border:var(--bw) solid var(--line);box-shadow:var(--hard) var(--hard) 0 var(--hard-c);z-index:2}
.float-card__ic{width:42px;height:42px;border-radius:calc(var(--radius) * .75);background:var(--primary);color:var(--primary-contrast);border:1.5px solid var(--line);display:grid;place-items:center}
.float-card strong{display:block;font-size:.98rem;line-height:1.2}
.float-card small{color:var(--muted)}
.hero--centrado .hero__grid{grid-template-columns:1fr!important;text-align:center;justify-items:center}
.hero--centrado .hero__sub{margin-inline:auto}
.hero--centrado .hero__ctas,.hero--centrado .hero__chips{justify-content:center}
.hero--centrado{min-height:88svh;display:flex;align-items:center}
.hero.tone-oscuro .hero__img,.hero.tone-oscuro .badge-spin,.hero.tone-oscuro .float-card{--line:var(--primary)}

/* ---------- Cinta ---------- */
.marquee{overflow:hidden;margin:36px 0;padding:16px 0;border-block:var(--bw) solid var(--line)}
.marquee.is-tilted{transform:rotate(-2deg);margin:44px -20px}
.marquee.tone-oscuro{border-color:var(--dark)}
.marquee__track{display:flex;gap:26px;width:max-content;animation:marq 32s linear infinite;align-items:center}
.marquee span{font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(clamp(1.2rem,2.6vw,1.8rem) * var(--display-adj));text-transform:var(--tt);letter-spacing:var(--display-track);white-space:nowrap;line-height:1}
.marquee i{font-style:normal;display:inline-flex;color:var(--primary-ink);font-size:1.3rem}
.marquee i .ic{width:1.3em;height:1.3em;stroke-width:2.2}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Secciones ---------- */
.section{padding:var(--space-section) 0}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(36px,5vw,64px);max-width:860px}
.sec-head__t{display:grid;gap:14px;justify-items:start}
.sec-head--row{max-width:none}

/* Tarjetas */
.bento{display:grid;gap:22px;grid-template-columns:1fr}
.card{position:relative;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:calc(var(--hard) * 1.5) calc(var(--hard) * 1.5) 0 var(--primary);transition:translate .35s var(--ease-out),box-shadow .35s var(--ease-out);display:flex;flex-direction:column}
.card:hover{translate:-3px -3px;box-shadow:calc(var(--hard) * 1.5 + 3px) calc(var(--hard) * 1.5 + 3px) 0 var(--hard-c)}
.card__body{padding:26px;position:relative;z-index:1}
.card h3{font-size:calc(1.3rem * var(--display-adj));font-weight:var(--display-weight);margin:18px 0 8px;text-transform:var(--tt);line-height:1.05}
.card p{color:var(--muted)}
.card__ic{width:54px;height:54px;border-radius:var(--radius);display:grid;place-items:center;background:var(--primary);color:var(--primary-contrast);border:var(--bw) solid var(--line)}
.card__ic .ic{width:26px;height:26px}
.card--color{--fg:var(--primary-contrast);--muted:var(--on-p-muted);background:var(--primary);color:var(--fg);box-shadow:calc(var(--hard) * 1.5) calc(var(--hard) * 1.5) 0 var(--hard-c)}
.card--color .card__ic{background:var(--primary-contrast);color:var(--primary)}
.card__big{position:absolute;right:16px;top:8px;font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(4.2rem * var(--display-adj));letter-spacing:.02em;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--fg);opacity:.2;pointer-events:none}
.card--oscura{--fg:var(--dark-fg);--muted:var(--dark-muted);background:var(--dark);color:var(--fg)}
.card--oscura .card__ic{border-color:var(--primary)}
.tone-oscuro .card--oscura{background:var(--dark-2)}
.tone-color .card{box-shadow:calc(var(--hard) * 1.5) calc(var(--hard) * 1.5) 0 var(--hard-c)}
.card--photo img{width:100%;aspect-ratio:16/9;object-fit:cover;border-bottom:var(--bw) solid var(--line);background:var(--surface-2)}

/* Frase grande */
.paint{position:relative;padding:var(--space-section) 0;overflow:clip}
.paint__glow{position:absolute;right:-8%;top:-14%;width:min(60vw,520px);aspect-ratio:1;border-radius:50%;border:44px solid var(--fg);opacity:.05;pointer-events:none;clip-path:polygon(0 24%,100% 24%,100% 100%,0 100%)}
.paint__text{position:relative;font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(clamp(1.5rem,4vw,3.2rem) * var(--title-scale) * var(--display-adj));line-height:1.06;letter-spacing:var(--display-track);text-transform:var(--tt);max-width:24ch}
.paint__text .w{opacity:.22;transition:opacity .25s}
.paint__text .w.on{opacity:1}
.paint__text .script{font-size:calc(.9em * var(--script-adj))}
.stats{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 16px;margin-top:clamp(56px,8vw,100px);padding-top:40px;border-top:var(--bw) solid var(--border)}
.stat strong{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(clamp(2.4rem,5.5vw,4.2rem) * var(--display-adj));line-height:.95;color:var(--fg)}
.stat strong small{font-size:.3em;color:var(--primary-ink);text-transform:uppercase;letter-spacing:.08em}
.stat>span{color:var(--muted);display:block;margin-top:8px}

/* Horarios */
.sched{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;margin-inline:-16px;padding-inline:16px;scrollbar-width:none}
.sched::-webkit-scrollbar{display:none}
.day{scroll-snap-align:start;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius-lg);padding:22px;display:flex;flex-direction:column;gap:10px}
.day__name{font-size:calc(1.15rem * var(--display-adj));margin-bottom:6px;text-transform:var(--tt)}
.slot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:54px;padding:0 16px;border-radius:var(--radius);background:var(--surface-2);border:1.5px solid var(--border);text-decoration:none;transition:background .3s,border-color .3s,transform .4s var(--ease-out)}
.slot span{font-family:var(--font-display);font-weight:var(--display-weight);font-size:calc(1.05rem * var(--display-adj));line-height:1}
.slot em{font-style:normal;font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.slot:hover{background:var(--primary);border-color:var(--line);color:var(--primary-contrast);transform:translateX(4px)}
.slot:hover em{color:var(--primary-contrast)}
.tone-color .slot:hover{background:var(--primary-contrast);color:var(--primary)}
.tone-color .slot:hover em{color:var(--primary)}

/* Galería */
.gallery{padding:clamp(24px,4vw,48px) 0}
.gallery .sec-head{margin-bottom:28px}
.gallery__track{display:flex;gap:20px;padding:4px 16px 18px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.gallery__track::-webkit-scrollbar{display:none}
.g{margin:0;flex:none;width:72vw;height:380px;border-radius:var(--radius-lg);overflow:hidden;scroll-snap-align:center;border:var(--bw) solid var(--line);background:var(--surface-2);box-shadow:calc(var(--hard) * 1.5) calc(var(--hard) * 1.5) 0 var(--primary)}
.g img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.g:hover img{transform:scale(1.05)}

/* Texto con foto */
.online{display:grid;gap:44px;align-items:center}
.online__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;border:var(--bw) solid var(--line);background:var(--surface-2);box-shadow:calc(var(--hard) * 3) calc(var(--hard) * 3) 0 var(--primary);aspect-ratio:4/3.4}
.online__media img{width:100%;height:100%;object-fit:cover}
.online__live{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:8px;background:var(--dark);color:var(--dark-fg);font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-radius:calc(var(--radius) * .75)}
.online__live i{width:8px;height:8px;background:var(--neon);transform:rotate(45deg)}
.online__copy{display:grid;gap:18px;justify-items:start}

/* Preguntas */
.faq__list{display:grid;gap:14px;max-width:900px}
.qa{background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius-lg);transition:box-shadow .3s var(--ease-out),translate .3s var(--ease-out)}
.qa[open]{box-shadow:calc(var(--hard) * 1.5) calc(var(--hard) * 1.5) 0 var(--primary);translate:-2px -2px}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;font-weight:700;font-size:1.05rem;min-height:44px}
.qa summary::-webkit-details-marker{display:none}
.qa__plus{position:relative;width:34px;height:34px;border-radius:calc(var(--radius) * .75);background:var(--primary);border:1.5px solid var(--line);flex:none}
.qa__plus::before,.qa__plus::after{content:"";position:absolute;left:50%;top:50%;width:13px;height:2px;background:var(--primary-contrast);translate:-50% -50%;transition:transform .4s var(--ease-out)}
.qa__plus::after{transform:rotate(90deg)}
.qa[open] .qa__plus::after{transform:rotate(0)}
.qa p{padding:0 20px 22px;color:var(--muted);max-width:70ch}

/* Contacto */
.ct-grid{display:grid;gap:26px;align-items:stretch}
.ct-list{display:grid;gap:14px;align-content:start}
.ct{display:flex;align-items:center;gap:16px;padding:14px 16px;background:var(--surface);border:var(--bw) solid var(--line);border-radius:var(--radius-lg);text-decoration:none;color:var(--fg);transition:translate .3s var(--ease-out),box-shadow .3s var(--ease-out)}
a.ct:hover{translate:-3px -3px;box-shadow:calc(var(--hard) * 1.5) calc(var(--hard) * 1.5) 0 var(--primary)}
.ct__ic{width:50px;height:50px;border-radius:var(--radius);display:grid;place-items:center;background:var(--primary);color:var(--primary-contrast);border:var(--bw) solid var(--line);flex:none}
.ct__ic .ic{width:24px;height:24px}
.ct__tx{display:grid;min-width:0;flex:1}
.ct__tx small{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.ct__tx strong{font-size:1.12rem;line-height:1.3;overflow-wrap:anywhere}
.ct__go{color:var(--muted);transition:transform .3s var(--ease-out)}
a.ct:hover .ct__go{transform:translateX(4px);color:var(--fg)}
.ct-map{position:relative;min-height:340px;border:var(--bw) solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);box-shadow:calc(var(--hard) * 3) calc(var(--hard) * 3) 0 var(--primary)}
.ct-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(1) contrast(1.08);transition:filter .5s}
.ct-map:hover iframe{filter:none}
.dh-preview .ct-map iframe{pointer-events:none}

/* Llamado final */
.cta{padding:clamp(40px,6vw,80px) 0 var(--space-section)}
.cta__box{position:relative;overflow:hidden;text-align:center;border-radius:var(--radius-xl);border:var(--bw) solid var(--line);padding:clamp(56px,9vw,110px) 24px;display:grid;justify-items:center;gap:16px;box-shadow:calc(var(--hard) * 3) calc(var(--hard) * 3) 0 var(--hard-c)}
.cta__box.tone-claro,.cta__box.tone-suave{background:var(--surface);box-shadow:calc(var(--hard) * 3) calc(var(--hard) * 3) 0 var(--primary)}
.cta__box.tone-oscuro{--line:var(--dark);box-shadow:calc(var(--hard) * 3) calc(var(--hard) * 3) 0 var(--primary)}
.cta__box>*{max-width:100%;min-width:0;position:relative}
.cta__title{font-size:calc(clamp(2.2rem,7vw,5.4rem) * var(--title-scale) * var(--display-adj));text-transform:var(--tt);line-height:.94}
.cta__title .script{text-transform:none;font-size:calc(.85em * var(--script-adj))}
.cta__text{color:var(--muted);font-size:1.1rem}
/* herraduras concéntricas de fondo */
.cta__rings{position:absolute!important;inset:0;pointer-events:none}
.cta__rings span{position:absolute;left:50%;top:100%;border:var(--bw) solid var(--border);border-radius:50%;translate:-50% -50%}
.cta__rings span:nth-child(1){width:480px;height:480px;border-width:26px;opacity:.3}
.cta__rings span:nth-child(2){width:800px;height:800px}
.cta__rings span:nth-child(3){width:1100px;height:1100px}

/* Pie */
.footer{background:var(--dark);color:var(--dark-fg);padding:72px 0 28px;border-top:6px solid var(--primary)}
.footer__grid{display:grid;gap:36px}
.footer h3{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;color:var(--neon);margin-bottom:14px;font-family:var(--font-body);font-weight:700}
.footer p{color:var(--dark-muted);margin-bottom:10px}
.footer__claim{margin-top:16px;max-width:30ch}
.footer__list{list-style:none;padding:0;margin:0;display:grid;gap:10px;color:var(--dark-muted)}
.footer__list>li>a,.footer__list>li>span{display:inline-flex;align-items:center;gap:8px;min-height:32px}
.footer__bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:var(--dark-muted);font-size:.9rem}

/* WhatsApp flotante */
.wa-float{position:fixed;right:16px;bottom:16px;z-index:80;width:60px;height:60px;border-radius:50%;background:#1FAF5A;color:#fff;border:var(--bw) solid #111;display:grid;place-items:center;box-shadow:var(--hard) var(--hard) 0 #111;transition:transform .4s var(--ease-out)}
.wa-float .ic{width:30px;height:30px}
.wa-float:hover{transform:scale(1.08)}
.wa-float--left{right:auto;left:16px}

/* Cursor */
.cursor{display:none}
@media (pointer:fine){
  .anim-completas .cursor{display:block;position:fixed;left:0;top:0;width:14px;height:14px;border-radius:50%;background:var(--primary);pointer-events:none;z-index:300;translate:-50% -50%;mix-blend-mode:multiply;transition:width .35s var(--ease-out),height .35s var(--ease-out),opacity .3s;opacity:0}
  .cursor.is-on{opacity:.95}
  .cursor.is-hover{width:54px;height:54px;opacity:.45}
}
.anim-apagadas *,.anim-apagadas *::before,.anim-apagadas *::after{animation:none!important}

/* ---------- Responsive ---------- */
@media (min-width:640px){
  .sched{grid-auto-columns:46%}
  .stats{grid-template-columns:repeat(4,1fr)}
  .g{width:44vw;height:440px}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (min-width:900px){
  .hero{padding:150px 0 90px;min-height:100svh;display:flex;align-items:center}
  .hero__grid{grid-template-columns:1.12fr .88fr;align-items:center;gap:64px}
  .hero--foto-izquierda .hero__grid{grid-template-columns:.88fr 1.12fr}
  .hero--foto-izquierda .hero__media{order:-1}
  .hero__title{font-size:calc(clamp(2.2rem,4.9vw,5.1rem) * var(--title-scale) * var(--display-adj))}
  .hero--centrado .hero__title{font-size:calc(clamp(2.2rem,6.4vw,6.4rem) * var(--title-scale) * var(--display-adj))}
  .hero__media{min-height:560px}
  .bento{grid-template-columns:repeat(6,1fr);grid-auto-flow:dense}
  .s-chica{grid-column:span 2}.s-media{grid-column:span 3}.s-grande{grid-column:span 4}.s-completa{grid-column:1/-1}
  .is-tall{grid-row:span 2}
  .is-tall.card--photo img{aspect-ratio:auto;flex:1;min-height:260px}
  .sec-head--row{grid-template-columns:1fr 1fr;align-items:end;gap:40px}
  .sched{grid-auto-flow:initial;grid-template-columns:repeat(min(var(--days),5),1fr);overflow:visible;margin:0;padding:0}
  .online{grid-template-columns:1fr 1fr;gap:80px}
  .online--rev .online__media{order:2}
  .g{width:30vw;height:500px}
  .g--2{width:38vw}
  .ct-grid{grid-template-columns:1fr 1.15fr;gap:36px}
  .ct-grid--solo{grid-template-columns:1fr}
  .ct-grid--solo .ct-list{grid-template-columns:1fr 1fr}
  .ct-grid--solo .note{grid-column:1/-1}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr}
}
@media (min-width:1100px){
  .nav__links{display:flex}
  .nav__burger{display:none}
}
@media (max-width:899px){
  .hero__media{min-height:0;aspect-ratio:1/1.05;max-width:520px}
  .hero__img--main{inset:0 14% 30px 0}
  .hero__img--main.is-solo{inset:0 12px 12px 0}
  .badge-spin{width:96px;height:96px;right:-2px;top:-34px}
  .badge-spin text{font-size:10px}
  .badge-spin__core{width:46px;height:46px;font-size:1.2rem}
  .float-card{left:-6px;bottom:28px}
  .hero--centrado .hero__ctas .btn{width:auto}
  .hero__shoe{right:-46%;top:auto;bottom:6%}
}
@media (max-width:640px){
  .nav .nav__brand span{display:none}
}
@media (max-width:520px){
  .nav__brand img{height:46px}
  .nav__brand span{font-size:.92em}
}
@media (max-width:420px){
  .nav .nav__brand span{display:none}
  .hero__title{font-size:calc(8.8vw * var(--title-scale) * var(--display-adj))}
  .btn--lg{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .paint__text .w{opacity:1}
}

/* ---------- Vista previa del panel ---------- */
.dh-preview [data-edit]{position:relative;cursor:pointer}
.dh-preview [data-edit]:hover{outline:3px dashed var(--accent);outline-offset:-3px}
.dh-preview [data-edit]:hover::after{content:"Tocá para editar · " attr(data-label);position:absolute;left:12px;top:12px;z-index:60;background:var(--accent);color:#fff;font:700 12px/1 var(--font-body);padding:8px 12px;border-radius:999px;pointer-events:none;letter-spacing:0;text-transform:none;transform:none;rotate:0deg}
.dh-preview .nav[data-edit]:hover::after{top:auto;bottom:-34px}
.dh-preview .marquee[data-edit]:hover::after{top:50%;translate:0 -50%}
.dh-preview .dh-flash{animation:dhFlash 1.2s ease-out}
@keyframes dhFlash{0%{box-shadow:inset 0 0 0 4px var(--accent)}100%{box-shadow:inset 0 0 0 4px transparent}}

/* ---------- Rendimiento ---------- */
@media (min-width:900px) and (hover:hover){.grain{display:block}}
.marquee__track,.badge-spin svg{will-change:transform}
.cursor{will-change:transform}

/* =====================================================================
   El herrero (dibujo vectorial inspirado en el logo). Se usa en la
   animación de entrada. Las piezas se mueven con CSS.
   ===================================================================== */
.dha{display:block;width:100%;height:auto;overflow:visible}
.dha-blob{fill:var(--primary)}
.dha-shoe-o{fill:none;stroke:#111;stroke-width:46;stroke-linecap:round;stroke-linejoin:round}
.dha-shoe-i{fill:none;stroke:#fff;stroke-width:35;stroke-linecap:round;stroke-linejoin:round}
.dha-name{font-family:var(--font-display);font-weight:var(--display-weight);font-size:27px;letter-spacing:.07em;fill:#111}
.dha-ground{fill:none;stroke:#111;stroke-width:3;stroke-linecap:round}
.dha-anvil,.dha-body{fill:#111}
.dha-limb{fill:none;stroke:#111;stroke-width:20;stroke-linecap:round;stroke-linejoin:round}
.dha-limb--arm{stroke-width:13}
.dha-cut{fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round}
.dha-tong{fill:none;stroke:#111;stroke-width:4;stroke-linecap:round}
.dha-hot{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round}
.dha-handle{fill:none;stroke:#111;stroke-width:5;stroke-linecap:round}
.dha-sparks{opacity:0}
.dha-sparks path{fill:none;stroke:#111;stroke-width:3;stroke-linecap:round}
.dha-sparks .dha-star{fill:#fff;stroke:#111;stroke-width:1.5}
.dha-arm{transform-origin:166px 154px}
.dha-fore{transform-origin:196px 176px}
.dha-body{transform-origin:150px 287px}
.dha-anvil{transform-origin:238px 287px}
.dha-sparks{transform-origin:250px 210px}

/* ---------- Animación de entrada: tres martillazos y la pantalla se parte ---------- */
#dh-intro{--t:2.05s;--s:min(84vw,66svh,480px);--sx:calc(50% + var(--s) * .135);--sy:calc(50% + var(--s) * .03);position:fixed;inset:0;z-index:600;overflow:hidden;animation:dhiGone .01s linear 2.9s forwards}
#dh-intro::before{content:"";position:absolute;inset:0;background:var(--bg);animation:dhiGone .01s linear var(--t) forwards}
.dh-no-intro #dh-intro,.dh-preview #dh-intro{display:none}
.dh-preview #dh-intro.dhi-play{display:block}
/* las dos mitades de la "chapa" blanca, con el borde quebrado */
.dhi-half{position:absolute;inset:0;will-change:transform}
.dhi-half i{position:absolute;inset:0;background:var(--bg)}
.dhi-half--l{animation:dhiL .75s cubic-bezier(.7,0,.2,1) var(--t) forwards,dhiEdgeL .01s linear 1.78s forwards}
.dhi-half--r{animation:dhiR .75s cubic-bezier(.7,0,.2,1) var(--t) forwards,dhiEdgeR .01s linear 1.78s forwards}
@keyframes dhiEdgeL{to{filter:drop-shadow(3px 0 0 #111) drop-shadow(7px 0 0 var(--primary))}}
@keyframes dhiEdgeR{to{filter:drop-shadow(-3px 0 0 #111) drop-shadow(-7px 0 0 var(--primary))}}
.dhi-half--l i{clip-path:polygon(0 0,calc(var(--sx) + 2%) 0,calc(var(--sx) - 3%) 13%,calc(var(--sx) + 3.5%) 27%,calc(var(--sx) - 2%) 41%,var(--sx) var(--sy),calc(var(--sx) + 4%) 61%,calc(var(--sx) - 2.5%) 76%,calc(var(--sx) + 2%) 88%,calc(var(--sx) - 1%) 100%,0 100%)}
.dhi-half--r i{clip-path:polygon(100% 0,calc(var(--sx) + 2%) 0,calc(var(--sx) - 3%) 13%,calc(var(--sx) + 3.5%) 27%,calc(var(--sx) - 2%) 41%,var(--sx) var(--sy),calc(var(--sx) + 4%) 61%,calc(var(--sx) - 2.5%) 76%,calc(var(--sx) + 2%) 88%,calc(var(--sx) - 1%) 100%,100% 100%)}
@keyframes dhiL{to{transform:translate3d(-104%,0,0) rotate(-3deg)}}
@keyframes dhiR{to{transform:translate3d(104%,0,0) rotate(3deg)}}
@keyframes dhiGone{to{opacity:0;visibility:hidden}}
/* destello y ondas del último golpe */
.dhi-flash{position:absolute;inset:0;background:radial-gradient(circle at var(--sx) var(--sy),#fff 0,var(--primary) 18%,transparent 55%);transform-origin:var(--sx) var(--sy);opacity:0;animation:dhiFlash .5s ease-out 1.78s forwards}
@keyframes dhiFlash{0%{opacity:0;transform:scale(.2)}18%{opacity:.95}100%{opacity:0;transform:scale(2.2)}}
.dhi-rings{position:absolute;left:var(--sx);top:var(--sy);width:0;height:0}
.dhi-rings span{position:absolute;left:0;top:0;width:min(84vw,460px);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:10px solid #111;opacity:0;animation:dhiRing .9s cubic-bezier(.2,.7,.2,1) 1.78s forwards}
.dhi-rings span:nth-child(2){border-color:var(--primary);border-width:16px;animation-delay:1.86s}
.dhi-rings span:nth-child(3){border-width:3px;animation-delay:1.94s}
@keyframes dhiRing{0%{opacity:.9;transform:scale(.15)}100%{opacity:0;transform:scale(3.4)}}
/* escenario centrado; el golpe cae en (--sx, --sy) y desde ahí se parte la pantalla */
.dhi-stage{position:absolute;left:50%;top:50%;width:var(--s);translate:-50% -50%;animation:dhiIn .5s var(--ease-out) both,dhiShake 1.95s linear both,dhiOut .5s cubic-bezier(.6,0,.3,1) 1.95s forwards}
@keyframes dhiIn{from{opacity:0;scale:.86}to{opacity:1;scale:1}}
@keyframes dhiShake{0%,29%{transform:none}30%{transform:translate(0,5px)}33%{transform:translate(0,-2px)}36%,55.5%{transform:none}56.5%{transform:translate(0,6px)}59.5%{transform:translate(0,-2px)}62.5%,91%{transform:none}92%{transform:translate(-7px,12px) rotate(-1.2deg)}94.5%{transform:translate(8px,-6px) rotate(1deg)}97%{transform:translate(-5px,4px)}100%{transform:none}}
@keyframes dhiOut{to{opacity:0;scale:1.25}}
.dha--intro .dha-shoe{transform-origin:200px 196px;animation:dhiShoe .7s var(--ease-out) both}
@keyframes dhiShoe{from{transform:rotate(-70deg) scale(.7);opacity:0}to{transform:none;opacity:1}}
.dha--intro .dha-blob{transform-origin:200px 196px;animation:dhiBlob .6s var(--ease-out) .05s both}
@keyframes dhiBlob{from{transform:scale(0)}to{transform:none}}
/* brazo: levanta, pega (0.58s), pega (1.08s), toma impulso y pega fuerte (1.78s) */
.dha--intro .dha-arm{animation:dhiArm 2s linear both}
.dha--intro .dha-fore{animation:dhiFore 2s linear both}
@keyframes dhiArm{
  0%,16%{transform:rotate(-96deg);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  29%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.1,.7,.3,1)}
  43%{transform:rotate(-98deg);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  54%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.1,.7,.3,1)}
  76%,81%{transform:rotate(-124deg);animation-timing-function:cubic-bezier(.7,0,1,.5)}
  89%,100%{transform:rotate(3deg)}}
@keyframes dhiFore{
  0%,16%{transform:rotate(-36deg);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  29%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.1,.7,.3,1)}
  43%{transform:rotate(-38deg);animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  54%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.1,.7,.3,1)}
  76%,81%{transform:rotate(-52deg);animation-timing-function:cubic-bezier(.7,0,1,.5)}
  89%,100%{transform:rotate(0deg)}}
.dha--intro .dha-body{animation:dhiBody 2s linear both}
@keyframes dhiBody{0%,16%{transform:rotate(-2deg)}29%{transform:rotate(2.5deg)}43%{transform:rotate(-2deg)}54%{transform:rotate(2.5deg)}76%,81%{transform:rotate(-6deg)}89%,100%{transform:rotate(5deg)}}
.dha--intro .dha-anvil{animation:dhiAnvil 2s linear both}
@keyframes dhiAnvil{0%,28.5%{transform:none}30%{transform:scale(1.03,.95)}34%,53.5%{transform:none}55%{transform:scale(1.03,.95)}59%,88.5%{transform:none}90%{transform:scale(1.08,.86)}95%,100%{transform:none}}
.dha--intro .dha-sparks--1{animation:dhiSpark .42s ease-out .58s both}
.dha--intro .dha-sparks--2{animation:dhiSpark .42s ease-out 1.08s both}
.dha--intro .dha-sparks--3{animation:dhiSparkBig .6s ease-out 1.78s both}
@keyframes dhiSpark{0%{opacity:0;transform:scale(.2)}20%{opacity:1}100%{opacity:0;transform:scale(1.35)}}
@keyframes dhiSparkBig{0%{opacity:0;transform:scale(.2)}15%{opacity:1}100%{opacity:0;transform:scale(2.8)}}
@media (prefers-reduced-motion:reduce){#dh-intro{display:none}}