:root{
  /* raw palette */
  --ink-900:#12160F;
  --ink-800:#1B221A;
  --ink-700:#2B342A;
  --bone-50:#FBFAF3;
  --bone-100:#F5F3EC;
  --bone-200:#EAE6D6;
  --green-500:#76BB40;
  --green-400:#96D35F;
  --green-700:#436F22;
  --paper:#ECE9DC;
  --ink-text:#1B2117;

  /* semantic tokens — dark mode is the default identity */
  --surface-inverse: var(--ink-900);
  --surface-inverse-alt: var(--ink-800);
  --surface-base: var(--surface-inverse-alt);
  --surface-base-alt: var(--ink-700);
  --text-on-inverse: var(--paper);
  --text-on-inverse-dim: rgba(236,233,220,.68);
  --text-on-base: var(--text-on-inverse);
  --accent: var(--green-500);
  --accent-on-inverse: var(--green-400);
  --accent-on-base: var(--accent-on-inverse);
  --line-on-inverse: rgba(236,233,220,.16);
  --line-on-base: var(--line-on-inverse);
  --shadow: 0 24px 48px -28px rgba(18,22,15,.45);
}
:root[data-mode="light"]{
  --surface-inverse: var(--bone-50);
  --surface-inverse-alt: var(--bone-100);
  --surface-base-alt: var(--bone-200);
  --text-on-inverse: var(--ink-text);
  --text-on-inverse-dim: rgba(27,33,23,.68);
  --accent-on-inverse: var(--green-700);
  --line-on-inverse: rgba(27,33,23,.14);
  --shadow: 0 18px 36px -24px rgba(27,33,23,.16);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--nav-h,98px)}
body{
  margin:0;
  background:var(--surface-inverse);
  color:var(--text-on-inverse);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{text-wrap:balance; margin:0}
p{margin:0}
section[id],footer[id]{scroll-margin-top:var(--nav-h,98px)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid var(--green-500); outline-offset:3px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important}
}

.display{font-family:"IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; font-weight:900; letter-spacing:-.01em}
.mono{font-family:"IBM Plex Mono", ui-monospace, monospace; font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:"IBM Plex Mono", monospace;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.wrap{max-width:1180px; margin:0 auto; padding-inline:clamp(20px,5vw,48px)}

/* ---------- Nav ---------- */
header.site-header{
  position:sticky; top:0; z-index:50;
  background:var(--surface-inverse);
  border-bottom:1px solid var(--line-on-inverse);
  transition:background .25s ease, border-color .25s ease, box-shadow .2s ease;
}
header.site-header.is-scrolled{box-shadow:0 12px 28px -20px rgba(18,22,15,.5)}
.nav{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding-block:16px;
  gap:12px 28px;
  position:relative;
}
.logo{display:flex; align-items:center; text-decoration:none}
.logo-img{display:none; height:32px; width:auto}
@media (min-width:560px){ .logo-img{height:40px} }
:root:not([data-mode="light"]) .logo-img-dark{display:block}
:root[data-mode="light"] .logo-img-light{display:block}

.navtoggle{
  width:38px; height:38px; flex:none;
  border-radius:50%; border:1px solid var(--line-on-inverse);
  background:transparent; color:var(--text-on-inverse);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.navtoggle:hover{border-color:var(--accent-on-inverse); color:var(--accent-on-inverse)}
.navtoggle svg{width:18px;height:18px}
.navtoggle svg[hidden]{display:none}
@media (min-width:1160px){ .navtoggle{display:none} }

/* mobile: slide-in drawer (~80% width) starting below the sticky header,
   with a dimmed/blurred scrim behind it over the rest of the page;
   desktop: becomes invisible (display:contents) so the panel's children
   act as direct flex items of .nav, exactly as before */
.nav-panel{ display:none }
@media (max-width:1159.98px){
  .nav-panel{
    display:flex; /* stays in the render tree on mobile so the slide can animate;
                     visibility (not display) is what hides it when closed */
    position:fixed; top:var(--nav-h); right:0; bottom:0;
    width:80%; max-width:380px;
    flex-direction:column;
    background:var(--surface-inverse);
    box-shadow:-24px 0 48px -28px rgba(18,22,15,.45);
    padding:24px clamp(20px,5vw,48px) calc(24px + env(safe-area-inset-bottom,0px));
    overflow-y:auto; overscroll-behavior:contain;
    z-index:45;
    visibility:hidden;
    transform:translateX(100%);
    transition:transform .32s ease, visibility 0s linear .32s;
  }
  .nav-panel.is-open{
    visibility:visible;
    transform:translateX(0);
    transition:transform .32s ease, visibility 0s linear 0s;
  }
}
@media (min-width:1160px){ .nav-panel{display:contents} }

/* scrim behind the drawer: dims + blurs the rest of the page, and doubles
   as the tap-to-close target */
.nav-scrim{
  position:fixed; top:var(--nav-h); left:0; right:0; bottom:0;
  z-index:40;
  background:rgba(18,22,15,.5);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  opacity:0; pointer-events:none;
  transition:opacity .32s ease;
}
.nav-scrim.is-open{ opacity:1; pointer-events:auto }
@media (min-width:1160px){ .nav-scrim{display:none} }

/* single column on mobile, one row per link with a hairline divider —
   full viewport height means no need to save space like the old grid did */
.nav-links{list-style:none; margin:0; padding:0}
.nav-links li{border-bottom:1px solid var(--line-on-inverse)}
.nav-links a{display:block; padding-block:18px; font-size:1.05rem; text-decoration:none; color:var(--text-on-inverse); opacity:.82}
.nav-links a:hover{opacity:1; color:var(--accent-on-inverse)}
@media (min-width:1160px){
  .nav-links{display:flex; align-items:center; gap:clamp(14px,2.2vw,28px)}
  .nav-links li{border-bottom:none}
  .nav-links a{display:inline; padding-block:0; font-size:.9rem}
}

/* language switch on one side, theme+WhatsApp+phone as a tighter cluster on
   the other — centered as a whole, with more air between the two groups than
   within the action cluster itself */
.nav-controls{display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px}
.nav-utility{display:flex; align-items:center; gap:10px}
.nav-actions{display:flex; align-items:center; gap:10px}
.nav-controls .btn .label{display:none}
.nav-actions .btn{padding:.72em}
@media (max-width:1159.98px){
  .navtoggle{width:44px; height:44px}
  .navtoggle svg{width:20px; height:20px}
  .iconbtn{width:44px; height:44px}
  .iconbtn svg{width:19px; height:19px}
  .langswitch button{padding:.68em .95em; font-size:.72rem}
  .nav-actions .btn{padding:.85em 1em}

  /* .nav-controls disappears so .nav-utility (lang+theme) and .nav-actions
     (phone+WhatsApp) become independent flex items of .nav-panel, stacked
     into a one-handed layout: utility row up top, links in the middle
     (ordered via .nav-panel > nav below), contact actions pinned to the
     bottom via margin-top:auto */
  .nav-controls{display:contents}
  .nav-utility{order:1; width:100%; justify-content:space-between; margin-bottom:24px}
  .nav-panel > nav{order:2; flex:1 1 auto}
  .nav-actions{order:3; flex-direction:column; align-items:stretch; gap:14px; margin-top:auto}

  /* phone as plain text above a full-width WhatsApp CTA — anchored to
     #navPanel so this wins over the unscoped/480px label-hiding rules above */
  #navPanel .nav-actions .btn .label{display:inline}
  #navPanel .nav-actions .btn-primary{order:2; width:100%; justify-content:center; padding-block:16px}
  #navPanel .nav-actions .btn-ghost{order:1; border:none; background:none; padding-block:10px; justify-content:center; color:var(--text-on-inverse-dim)}
}

.langswitch{display:flex; border:1px solid var(--line-on-inverse); border-radius:999px; overflow:hidden; flex:none}
.langswitch button{
  padding:.5em .68em; font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.04em;
  background:transparent; color:var(--text-on-inverse); opacity:.65; border:none; cursor:pointer;
}
.langswitch button + button{border-left:1px solid var(--line-on-inverse)}
.langswitch button[aria-pressed="true"]{background:var(--accent); color:#0E1309; opacity:1; font-weight:600}

.iconbtn{
  width:38px; height:38px; flex:none;
  border-radius:50%; border:1px solid var(--line-on-inverse);
  background:transparent; color:var(--text-on-inverse);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.iconbtn:hover{border-color:var(--accent-on-inverse); color:var(--accent-on-inverse)}
.iconbtn svg{width:17px;height:17px}
.iconbtn svg[hidden]{display:none}

.btn{
  display:inline-flex; align-items:center; gap:.55em;
  padding:.72em 1.25em;
  border-radius:3px;
  font-size:.88rem; font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
}
.btn svg{width:16px;height:16px;flex:none}
.btn-primary{background:var(--accent); color:#0E1309}
.btn-primary:hover{background:var(--green-400)}
.btn-ghost{border-color:var(--line-on-inverse); color:var(--text-on-inverse)}
.btn-ghost:hover{border-color:var(--accent-on-inverse); color:var(--accent-on-inverse)}
@media (max-width:480px){
  .nav-actions .btn .label{display:none}
  .nav-actions .btn{padding:1em}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-block:clamp(40px,7vw,84px) clamp(64px,9vw,120px);
  background:
    radial-gradient(1100px 520px at 82% -10%, rgba(118,187,64,.16), transparent 60%),
    var(--surface-inverse);
  border-bottom:1px solid var(--line-on-inverse);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(28px,5vw,64px);
  align-items:center;
}
@media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .hero-ctas{justify-content:center} }
.hero h1{
  font-size:clamp(2.2rem,4.8vw,3.7rem);
  line-height:.98;
  color:var(--text-on-inverse);
}
.hero h1 em{font-style:normal; color:var(--accent-on-inverse)}
.hero .lede{
  margin-top:20px;
  max-width:46ch;
  font-size:1.08rem;
  line-height:1.55;
  color:var(--text-on-inverse-dim);
}
.hero-eyebrow{color:var(--accent-on-inverse); margin-bottom:16px; display:block}
.hero-ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
@media (max-width:430px){
  .hero{padding-block:32px 48px}
  .hero-ctas{flex-direction:column; margin-top:24px}
  .hero-ctas .btn{width:100%; justify-content:center}
}

/* diagnostic ticket — signature element */
.ticket{
  position:relative;
  background:var(--surface-inverse-alt);
  border:1px solid var(--line-on-inverse);
  border-radius:8px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.ticket-head{
  display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between;
  padding:22px 26px;
  gap:12px;
}
.ticket-split{display:flex; align-items:stretch}
.ticket-photo-col{
  position:relative;
  flex:0 0 38%;
  min-width:110px;
}
.ticket-photo-col img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.1) brightness(.85);
}
.ticket-photo-col::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(165deg, var(--surface-inverse) 0%, var(--accent-on-inverse) 140%);
  mix-blend-mode:color;
}
.ticket-content{flex:1 1 auto; min-width:0}
@media (max-width:560px){
  .ticket-split{flex-direction:column}
  .ticket-photo-col{flex:0 0 160px; min-width:0}
}
.ticket-id{font-size:.8rem; color:var(--text-on-inverse-dim); white-space:nowrap}
.ticket-stamp{
  position:relative;
  display:inline-block;
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accent-on-inverse);
  white-space:nowrap;
  padding-bottom:.55em;
}
.ticket-stamp::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--accent-on-inverse);
  opacity:.3;
}
.ticket-stamp::before{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background-image:linear-gradient(to right, transparent, var(--accent-on-inverse), transparent);
  background-size:200% 100%;
  background-repeat:no-repeat;
  background-position:-100% 0;
  animation:ticket-stamp-sweep 3s ease-in-out infinite;
}
@keyframes ticket-stamp-sweep{
  to{ background-position:200% 0; }
}
.ticket-tear{
  height:0;
  border-top:1.5px dashed var(--line-on-inverse);
  margin:0 26px;
}
.ticket-body{padding:24px 26px; display:grid; gap:15px}
.ticket-row{display:grid; grid-template-columns:auto 1fr; align-items:baseline; gap:4px 16px; font-size:1.02rem}
.ticket-row .k{color:var(--text-on-inverse-dim); font-size:.86rem}
.ticket-row .v{font-weight:600; text-align:right}
.ticket-caption{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-on-inverse-dim);
  text-align:center;
  padding:15px 26px 22px;
}
@media (max-width:430px){
  .ticket-head{padding:18px 20px}
  .ticket-tear{margin:0 20px}
  .ticket-body{padding:20px 20px}
  .ticket-caption{padding:14px 20px 18px}
}

/* diagnostic ticket carousel — same slot/size as a single .ticket-split,
   just several fichas you can drag/swipe through instead of one fixed one */
.hero-ticket-carousel{position:relative; overflow:hidden; min-width:0}
.hero-ticket-track{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  cursor:grab;
  border-radius:8px;
}
.hero-ticket-track.is-dragging{cursor:grabbing; scroll-snap-type:none}
.hero-ticket-track::-webkit-scrollbar{display:none}
.hero-ticket-track > .ticket{
  flex:0 0 100%;
  min-width:0;
  scroll-snap-align:start;
}
.hero-ticket-nav{display:flex; justify-content:center; align-items:center; gap:10px; margin-top:8px}
/* la ficha del carrusel es más compacta que la original: así queda más baja
   que el bloque de texto del Hero y el centrado vertical (align-items:center
   en .hero-grid) le deja el mismo hueco arriba y abajo */
.hero-ticket-track .ticket-head{padding:12px 26px}
.hero-ticket-track .ticket-body{padding:12px 26px; gap:6px}
.hero-ticket-track .ticket-caption{padding:6px 26px 10px}
.hero-ticket-dots{display:flex; justify-content:center; align-items:center; gap:8px}
.hero-ticket-dots .dot{background-color:var(--line-on-inverse)}
.hero-ticket-dots .dot:hover{background-color:var(--accent-on-inverse); opacity:.7}
.hero-ticket-dots .dot.is-active{background-color:var(--accent-on-inverse)}
.hero-ticket-arrow{
  width:32px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-on-inverse); border-radius:50%;
  background:none; color:var(--text-on-inverse); cursor:pointer;
}
.hero-ticket-arrow svg{width:16px; height:16px}
.hero-ticket-arrow--prev svg{transform:rotate(180deg)}
.hero-ticket-arrow:hover{border-color:var(--accent-on-inverse); color:var(--accent-on-inverse)}
.hero-ticket-arrow:disabled{opacity:.35; cursor:default}
.hero-ticket-arrow:disabled:hover{border-color:var(--line-on-inverse); color:var(--text-on-inverse)}

/* ---------- Trust strip ---------- */
.trust{
  background:var(--surface-inverse-alt);
  border-bottom:1px solid var(--line-on-inverse);
}
.trust .wrap{
  display:flex; flex-wrap:wrap; gap:10px 0;
  padding-block:16px;
}
.trust-item{
  font-family:"IBM Plex Mono",monospace;
  font-size:.78rem;
  letter-spacing:.03em;
  color:var(--text-on-inverse-dim);
  display:flex; align-items:center;
  padding-inline:20px;
  border-right:1px solid var(--line-on-inverse);
}
.trust-item:first-child{padding-left:0}
.trust-item:last-child{border-right:none}
.trust-item strong{color:var(--accent-on-inverse); font-weight:600; margin-right:.5ch}
@media (max-width:600px){
  .trust .wrap{display:grid; grid-template-columns:1fr 1fr; gap:14px 0; padding-block:18px}
  .trust-item{border-right:none; padding-inline:0; padding-block:2px}
  .trust-item:nth-child(odd){border-right:1px solid var(--line-on-inverse); padding-right:14px}
  .trust-item:nth-child(even){padding-left:14px}
}

/* ---------- Section shell ---------- */
section{padding-block:clamp(56px,8vw,104px)}
.on-bone{background:var(--surface-base); color:var(--text-on-base)}
.section-head{
  display:flex; justify-content:space-between; align-items:end; gap:24px;
  margin-bottom:clamp(32px,5vw,56px);
  flex-wrap:wrap;
}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.6rem)}
.on-bone .eyebrow{color:var(--accent-on-base)}
.hero .eyebrow{color:var(--accent-on-inverse)}
.section-head p{max-width:42ch; color:inherit; opacity:.72; font-size:.98rem; line-height:1.5}

/* ---------- Services grid ---------- */
.services-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  grid-template-rows:repeat(2, minmax(220px,1fr));
  gap:18px;
}
.service-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  border:1px solid var(--line-on-base);
  min-height:220px;
  isolation:isolate;
}
.service-card__img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  /* subtle brand wash — same recipe as the hero diagnostic-ticket photo,
     toned down so the photo's own color still reads through */
  filter:grayscale(.4) contrast(1.05) brightness(.94);
  transition:transform .5s ease;
}
.service-card:hover .service-card__img{transform:scale(1.06)}
.service-card::before{
  content:"";
  position:absolute; inset:0;
  z-index:1;
  background:linear-gradient(165deg, var(--surface-inverse) 0%, var(--accent-on-inverse) 140%);
  mix-blend-mode:color;
  opacity:.45;
}
.service-card::after{
  content:"";
  position:absolute; inset:0;
  z-index:2;
  background:linear-gradient(180deg, transparent 35%, rgba(18,22,15,.85) 100%);
}
.service-card__content{
  position:absolute; left:0; right:0; bottom:0;
  padding:22px;
  display:flex; flex-direction:column; gap:8px;
  z-index:3;
}
.service-card__label{
  align-self:flex-start;
  font-family:"IBM Plex Mono",monospace;
  font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  background:var(--bone-50); color:var(--ink-900);
  padding:.42em .85em;
  border-radius:999px;
}
.service-card__content h3{
  font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:1.05rem;
  color:var(--bone-50);
}
.service-card__desc{
  font-size:.82rem; line-height:1.45;
  color:var(--bone-50); opacity:.85;
  max-width:34ch;
}
.service-card--featured{grid-column:1; grid-row:1 / 3}
.service-card--featured .service-card__content{padding:28px}
.service-card--featured .service-card__label{font-size:.72rem}
.service-card--featured .service-card__content h3{font-size:clamp(1.4rem,2.2vw,1.9rem); font-weight:900}
.service-card--featured .service-card__desc{font-size:.92rem; max-width:38ch}
.service-card--wide{grid-column:1 / -1}
.service-card--wide .service-card__desc{max-width:52ch}

/* On mouse/trackpad devices the description stays tucked away until hover,
   to keep the grid calm; touch devices have no hover, so it's shown plainly
   below (see the non-hover-capable rules further down). */
@media (hover:hover) and (pointer:fine){
  .service-card__desc{
    max-height:0; opacity:0; margin-top:-8px;
    overflow:hidden;
    transition:max-height .35s ease, opacity .3s ease, margin-top .35s ease;
  }
  .service-card:hover .service-card__desc{max-height:140px; opacity:.85; margin-top:0}
}
@media (max-width:900px){
  .services-grid{grid-template-columns:1fr 1fr; grid-template-rows:none}
  .service-card--featured{grid-column:1 / -1; grid-row:auto; min-height:300px}
  .service-card{min-height:260px}
}
/* ---------- Services dots (mobile carousel only) ---------- */
.services-dots{display:none; justify-content:center; align-items:center; gap:8px; margin-top:16px}

/* Below 560px the grid becomes a swipeable, snap-scrolling carousel —
   native touch scrolling handles the drag, so no JS gesture code is needed;
   the dots (synced in script.js) just reflect which card is centered. */
@media (max-width:560px){
  .services-grid{
    display:flex;
    grid-template-columns:none;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    gap:14px;
    padding:6px 20px 18px;
    margin:-6px -20px -18px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  }
  .services-grid::-webkit-scrollbar{display:none}
  .service-card, .service-card--featured, .service-card--wide{
    grid-column:auto; grid-row:auto;
    flex:0 0 78vw;
    max-width:340px;
    min-height:260px;
    scroll-snap-align:center;
  }
  .service-card--featured .service-card__content{padding:22px}
  .service-card--featured .service-card__label{font-size:.68rem}
  .service-card--featured .service-card__content h3{font-size:1.05rem; font-weight:700}
  .service-card--featured .service-card__desc{font-size:.82rem; max-width:none}
  .service-card--wide .service-card__desc{max-width:none}
  .services-dots{display:flex}
}

/* ---------- Process (ticket sequence) ---------- */
.process-list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
@media (max-width:980px){ .process-list{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .process-list{grid-template-columns:1fr} }
@media (max-width:430px){ .process-list{gap:14px} }
.process .ticket-num{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; color:var(--accent-on-inverse); opacity:.9;
}

/* ---------- Workshop / photo placeholder ---------- */
.workshop{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px,5vw,56px);
  align-items:center;
}
@media (max-width:900px){ .workshop{grid-template-columns:1fr} }
.photo-slot{
  aspect-ratio:4/3;
  border:1.5px dashed var(--line-on-base);
  border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  color:var(--text-on-base);
  opacity:.68;
  text-align:center;
  padding:24px;
}
.photo-slot svg{width:34px;height:34px}
.photo-slot .cap{font-family:"IBM Plex Mono",monospace; font-size:.72rem; letter-spacing:.04em; max-width:26ch}
@media (max-width:430px){ .photo-slot{padding:18px} }
.workshop-copy p{line-height:1.6; font-size:1rem; margin-bottom:14px}
.coverage{margin-top:22px; display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-family:"IBM Plex Mono",monospace;
  font-size:.74rem;
  border:1px solid var(--line-on-base);
  border-radius:999px;
  padding:.4em .9em;
  color:var(--text-on-base); opacity:.75;
}

/* ---------- Testimonials / Google Reviews ---------- */
.testimonial-section .section-head{align-items:center}
.reviews-summary{
  display:inline-flex; align-items:center; gap:8px;
  font-family:"IBM Plex Mono",monospace; font-size:.85rem;
  color:var(--text-on-inverse); opacity:.85; white-space:nowrap;
}
.reviews-summary .star-icon{width:16px;height:16px; color:var(--accent-on-inverse); flex:none}
.reviews-summary strong{color:var(--accent-on-inverse); font-weight:600}
@media (max-width:430px){
  .reviews-summary{white-space:normal; font-size:.8rem}
}

.reviews-track-wrap{
  position:relative;
  overflow:hidden;
  margin-top:8px;
  -webkit-mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
}
.reviews-track{
  display:flex; gap:20px;
  overflow-x:auto;
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
  padding:6px 40px 18px;
  margin:-6px -40px -18px;
  -webkit-user-select:none; user-select:none;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.reviews-track::-webkit-scrollbar{display:none}
.reviews-track.is-dragging{cursor:grabbing; scroll-snap-type:none}
.reviews-track.is-settling{scroll-behavior:smooth}
@media (max-width:600px){
  .reviews-track{padding:6px 20px 18px; margin:-6px -20px -18px}
  .reviews-track-wrap{
    -webkit-mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0, black 20px, black calc(100% - 20px), transparent 100%);
  }
}

.review-card{
  flex:0 0 clamp(300px,86vw,620px);
  scroll-snap-align:center;
  border:1px solid var(--line-on-inverse);
  border-radius:10px;
  padding:24px 22px;
  display:flex; flex-direction:column; gap:14px;
}
.review-card__head{display:flex; align-items:center; gap:14px}
.monogram{
  width:52px;height:52px;border-radius:50%;
  background:var(--surface-inverse-alt);
  color:var(--accent-on-inverse);
  display:flex; align-items:center; justify-content:center;
  font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:1.2rem;
  flex:none;
}
.review-card__who cite{
  display:block; font-style:normal; font-weight:700;
  font-family:"IBM Plex Sans Condensed",sans-serif; font-size:.98rem;
}
.review-card__loc{display:block; font-size:.78rem; opacity:.65; margin-top:2px}

.star-row{display:flex; gap:3px}
.star-icon{width:14px;height:14px; color:var(--accent-on-inverse); flex:none}

.review-card blockquote{
  margin:0; font-size:1rem; line-height:1.55;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4; line-clamp:4; overflow:hidden;
}
.review-card blockquote.is-expanded{-webkit-line-clamp:unset; line-clamp:unset; overflow:visible}

.review-card__more{
  align-self:flex-start; margin-top:-8px;
  background:none; border:none; padding:0; cursor:pointer;
  font-family:"IBM Plex Mono",monospace; font-size:.74rem; letter-spacing:.02em;
  color:var(--accent-on-inverse); text-decoration:underline; text-underline-offset:3px;
}

.review-card__source{
  display:flex; align-items:center; gap:6px;
  font-size:.72rem; opacity:.65; margin-top:auto;
}
.review-card__source svg{width:14px;height:14px} /* colores de marca fijos: nunca se atenúa */
@media (max-width:430px){ .review-card{padding:20px 18px} }

.reviews-nav{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:14px;
}
.reviews-dots{display:flex; justify-content:center; align-items:center; gap:8px}
.reviews-arrow{
  width:32px; height:32px; flex:none;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line-on-inverse); border-radius:50%;
  background:none; color:var(--text-on-inverse); cursor:pointer;
}
.reviews-arrow svg{width:16px;height:16px}
.reviews-arrow--prev svg{transform:rotate(180deg)}
.reviews-arrow:hover{border-color:var(--accent-on-inverse); color:var(--accent-on-inverse)}

.reviews-footer{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; margin-top:28px;
}
.reviews-disclosure{font-size:.78rem; opacity:.6; max-width:46ch; margin:0}
@media (max-width:430px){
  .reviews-footer{flex-direction:column; align-items:stretch}
  .reviews-footer .btn{justify-content:center; width:100%}
}

/* ---------- Footer / contact ---------- */
footer{
  background:var(--surface-inverse);
  border-top:1px solid var(--line-on-inverse);
  padding-block:clamp(48px,7vw,80px) 28px;
}
.foot-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1.15fr .95fr;
  gap:clamp(24px,4vw,44px);
  align-items:start;
}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr; row-gap:36px} }
@media (max-width:560px){ .foot-grid{grid-template-columns:1fr; row-gap:32px} }
@media (max-width:430px){ .foot-grid{gap:28px} }
.foot-col{ min-width:0 }
.foot-brand{ display:flex; flex-direction:column; gap:14px }
.foot-logo{display:flex; align-items:center}
.foot-logo .logo-chip{padding:7px 12px}
.foot-logo .logo-img{height:24px}
.foot-brand p{font-size:.92rem; line-height:1.6; color:var(--text-on-inverse-dim); max-width:26ch}
.foot-col h4{
  font-family:"IBM Plex Mono",monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-on-inverse); margin-bottom:16px;
}
.foot-col p, .foot-col a{font-size:1.05rem; line-height:1.85; text-decoration:none; color:var(--text-on-inverse); opacity:.9}
.foot-col a{display:flex; align-items:center; gap:.5em}
.foot-col a:hover{opacity:1; color:var(--accent-on-inverse)}
.foot-col svg{width:17px;height:17px; flex:none}
.addr-row{display:flex; align-items:flex-start; gap:.5em}
.addr-row svg{margin-top:.5em}
.addr-row p{display:flex; flex-direction:column; gap:2px}
.hours-row{display:flex; justify-content:space-between; align-items:baseline; gap:8px 16px; font-size:1rem; padding-block:8px; border-bottom:1px solid var(--line-on-inverse)}
.hours-row:last-child{border-bottom:none}
.hours-row .d{opacity:.7; flex:1 1 auto; min-width:0}
.hours-row .t{font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; white-space:nowrap; flex:none}
.hours-status{
  display:flex; align-items:center; gap:.6em;
  margin-top:14px; font-size:.85rem; opacity:.85;
}
.hours-status .status-dot{width:8px;height:8px;border-radius:50%;flex:none; background:var(--text-on-inverse-dim)}
.hours-status.is-open .status-dot{background:var(--accent)}
.social-row{display:flex; gap:14px; margin-top:18px}
.social-row a{
  width:46px;height:46px; border-radius:50%;
  border:1px solid var(--line-on-inverse);
  background:var(--surface-inverse);
  display:flex; align-items:center; justify-content:center;
}
.social-row a:hover{background:var(--accent); border-color:var(--accent); color:#0E1309}
.social-row svg{width:20px;height:20px}
.foot-bottom{
  margin-top:32px; padding-top:22px;
  border-top:1px solid var(--line-on-inverse);
  font-size:.78rem; opacity:.68;
}

.note{
  max-width:1180px; margin:0 auto; padding:14px clamp(20px,5vw,48px);
  background:var(--ink-800); color:var(--bone-200);
  font-family:"IBM Plex Mono",monospace; font-size:.72rem; line-height:1.6;
  border-bottom:1px solid rgba(236,233,220,.16);
}
.note strong{color:var(--green-400)}

/* ---------- Mobile floating WhatsApp button ---------- */
.mobile-whatsapp-fab{
  display:none;
  position:fixed; right:22px; bottom:calc(22px + env(safe-area-inset-bottom,0px));
  z-index:60;
  width:56px; height:56px;
  align-items:center; justify-content:center;
  border-radius:50%;
  background:var(--accent); color:#0E1309;
  box-shadow:0 12px 28px -12px rgba(18,22,15,.55);
  transition:opacity .2s ease, transform .2s ease;
}
@media (max-width:1159.98px){ .mobile-whatsapp-fab{display:flex} }
.mobile-whatsapp-fab svg{width:28px; height:28px; flex:none}
.mobile-whatsapp-fab:active{background:var(--green-400)}
.mobile-whatsapp-fab.is-hidden{opacity:0; transform:scale(.85); pointer-events:none}

/* mobile menu open: lock background scroll, hide the WhatsApp fab so it
   doesn't float over the fullscreen nav panel */
body.nav-open{overflow:hidden}
body.nav-open .mobile-whatsapp-fab{display:none}

/* ---------- Carousel dots (shared with reviews carousel) ---------- */
.dot{
  width:8px; height:8px; padding:18px; flex:none;
  background-clip:content-box; -webkit-background-clip:content-box;
  border:none; border-radius:50%; background:var(--line-on-base); cursor:pointer;
}
.dot:hover{background:var(--accent-on-base); opacity:.7}
.dot.is-active{background:var(--accent-on-base)}