/* =============================================================
   1. Tokens
   ============================================================= */
/* ─────────────────────────────────────────────────────────────────
   DIRECCIÓN DE ARTE — reescrita en la fase 2.

   Lo que había era el cliché exacto del sector: rosa palo, malla de
   degradado, cristal esmerilado, oro y radios de 28 px. Indistinguible de
   cualquier otra web de uñas, que es justo lo que no puede pasar en un
   portafolio. Justificación: I1.1.

   Lo que hay ahora: tinta casi negra sobre hueso cálido, y un rojo que es
   el de un esmalte de verdad, no un pastel decorativo. Bloques planos, sin
   degradados ni transparencias, esquinas casi rectas. El color fuerte se
   reserva para lo que se pulsa; la foto del trabajo es lo que manda.
   ───────────────────────────────────────────────────────────────── */
:root {
  --bg: #EFEDE4;
  --bg-2: #E4E1D5;
  --paper: #FBFAF6;
  --ink: #16150F;
  --ink-soft: #3B3930;
  --ink-mute: #5E5B4E;

  --accent: #C0301B;
  --accent-2: #1F4D3F;
  --gold: #8A7A3C;

  /* Ya no hay cristal esmerilado: son superficies opacas. Se conservan los
     nombres para no reescribir 30 usos. */
  --glass: #FBFAF6;
  --glass-2: #F4F2EA;
  --glass-border: rgba(22, 21, 15, 0.16);

  --line: rgba(22, 21, 15, 0.18);

  --mesh-1: #E4E1D5;
  --mesh-2: #EFEDE4;
  --mesh-3: #E4E1D5;

  --shadow-soft: 0 1px 0 var(--line);
  --shadow-lift: 0 2px 0 var(--ink);

  --serif: "Bricolage Grotesque", "Georgia", serif; /* ya no es serif: se conserva el nombre de la variable para no tocar 40 usos */
  --sans: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* Era un rebote elástico, cubic-bezier(0.34, 1.56, 0.64, 1). Con la
     dirección nueva —bloques planos y esquinas casi rectas— un botón que
     rebota al crecer desentona: nada más en esta web se comporta así.
     Deceleración exponencial, que es como frena un objeto real. */
  --ease-bounce: cubic-bezier(0.22, 1, 0.36, 1);

  --radius-lg: 4px;
  --radius-md: 3px;
  --radius-sm: 2px;
}

/* Dark theme — follows system preference by default, [data-theme] overrides it explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14140E;
    --bg-2: #1D1D15;
    --paper: #22221A;
    --ink: #F2F0E4;
    --ink-soft: #D6D3C4;
    --ink-mute: #A9A596;
    --accent: #E85138;
    --accent-2: #7FB39C;
    --gold: #C4B071;
    --glass: #22221A;
    --glass-2: #1D1D15;
    --glass-border: rgba(242, 240, 228, 0.18);
    --line: rgba(242, 240, 228, 0.18);
    --mesh-1: #1D1D15;
    --mesh-2: #14140E;
    --mesh-3: #1D1D15;
    --shadow-soft: 0 1px 0 var(--line);
    --shadow-lift: 0 2px 0 var(--ink);
  }
}
:root[data-theme="dark"] {
  --bg: #14140E;
  --bg-2: #1D1D15;
  --paper: #22221A;
  --ink: #F2F0E4;
  --ink-soft: #D6D3C4;
  --ink-mute: #A9A596;
  --accent: #E85138;
  --accent-2: #7FB39C;
  --gold: #C4B071;
  --glass: #22221A;
  --glass-2: #1D1D15;
  --glass-border: rgba(242, 240, 228, 0.18);
  --line: rgba(242, 240, 228, 0.18);
  --mesh-1: #1D1D15;
  --mesh-2: #14140E;
  --mesh-3: #1D1D15;
  --shadow-soft: 0 1px 0 var(--line);
  --shadow-lift: 0 2px 0 var(--ink);
}
html { transition: background-color .4s var(--ease-out); }
body { transition: background-color .4s var(--ease-out), color .4s var(--ease-out); }

/* =============================================================
   2. Reset & base
   ============================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: clip;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-y: none;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
a { color: inherit; text-decoration: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; line-height: 1.05; letter-spacing: -0.02em; font-family: var(--sans); color: var(--ink); }
ul { list-style: none; padding: 0; }
::selection { background: var(--accent); color: #fff; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed; top: -100px; left: 1rem;
  padding: .6rem 1rem; background: var(--ink); color: var(--paper);
  z-index: 9999; border-radius: 8px; font-weight: 600;
  transition: top .3s var(--ease-out);
}
.skip-link:focus { top: 1rem; }

/* =============================================================
   3. Utilities
   ============================================================= */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.section { position: relative; padding-block: clamp(4rem, 9vw, 8rem); }
.section-head { max-width: 640px; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-head.is-center { margin-inline: auto; text-align: center; }
.kicker {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: .9rem;
}
.kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
}
.section-title { font-size: clamp(2rem, 4vw, 2.8rem); }
.section-title em { font-family: var(--serif); font-weight: 800; letter-spacing: -.03em; color: var(--accent); }
.section-sub { margin-top: 1rem; color: var(--ink-mute); font-size: 1.05rem; }

/* Condicionado a que el JS arranque: sin la clase .js en <html> el contenido
   se ve entero. Antes el opacity:0 era incondicional y si el JS fallaba estos
   elementos no aparecían nunca. Justificación: I2.3. */
.js [data-reveal] {
  opacity: 0; transform: translateY(36px);
  transition: opacity .8s var(--ease-soft), transform .8s var(--ease-soft);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal[data-split] { opacity: 1; transform: none; }

/* =============================================================
   4. Typography
   ============================================================= */
.eyebrow-word { font-family: var(--serif); font-weight: 800; letter-spacing: -.03em; }

/* =============================================================
   5. Components
   ============================================================= */
.btn {
  border: 1.5px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .95rem 1.7rem; border-radius: 3px;
  font-weight: 600; font-size: .96rem; white-space: nowrap;
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft), background .3s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-primary {
  background: var(--accent);
  color: #fff;
  box-shadow: none;
}
.btn-primary:hover { background: #9C2616; transform: none; }
.btn-primary:active { transform: translateY(-1px); transition-duration: .12s; }
.btn-ghost {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.btn-ghost:hover { background: var(--bg-2); transform: none; }
.btn-sm { padding: .7rem 1.25rem; font-size: .88rem; }

.has-magnetic { display: inline-flex; position: relative; isolation: isolate; }
.magnetic-inner {
  display: inline-flex; align-items: center; justify-content: center; gap: inherit;
  will-change: transform;
  transition: transform .8s var(--ease-soft);
}

/* Era cristal esmerilado (blanco al 72 % con desenfoque de fondo). Ahora es
   una superficie opaca con filete: se lee igual en cualquier fondo, no cuesta
   una capa de composición y no es el efecto que usa todo el sector.
   Justificación: I1.1, I2.5. */
.glass-card {
  background: var(--paper);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* =============================================================
   6. Navigation
   ============================================================= */
.nav {
  position: fixed; top: 0; inset-inline: 0; z-index: 100;
  padding-block: 1.1rem;
  /* Antes transicionaba padding, que obliga a recalcular la disposición en
     cada fotograma mientras se hace scroll. El alto se anima ahora con la
     propia altura mínima y solo se transicionan color y sombra. I2.5. */
  transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.nav.is-scrolled {
  padding-block: .7rem;
  background: rgba(251, 243, 239, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 30px -18px rgba(93, 58, 47, 0.35);
}
.nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: flex; align-items: center; gap: .55rem; font-family: var(--sans); font-weight: 800; font-size: 1.15rem; color: var(--ink); }
.brand-mark {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, var(--mesh-1), var(--mesh-2) 55%, var(--mesh-3));
  display: grid; place-items: center; flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
}
.brand-mark svg { width: 19px; height: 19px; }

.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 960px) { .nav-links { display: flex; } }
.nav-link { position: relative; font-weight: 600; font-size: .92rem; padding-block: .25rem; color: var(--ink-soft); }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform .45s var(--ease-soft);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }

.nav-actions { display: flex; align-items: center; gap: .75rem; }
.nav-cta { display: none; }
@media (min-width: 640px) { .nav-cta { display: inline-flex; } }

.nav-burger {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 12px; background: var(--glass); border: 1px solid var(--glass-border);
}
@media (min-width: 960px) { .nav-burger { display: none; } }
.nav-burger span, .nav-burger::before, .nav-burger::after { content: ""; }
.nav-burger-icon { position: relative; width: 18px; height: 12px; }
.nav-burger-icon span, .nav-burger-icon i {
  position: absolute; left: 0; right: 0; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .35s var(--ease-out), opacity .25s;
}
.nav-burger-icon span:nth-child(1) { top: 0; }
.nav-burger-icon span:nth-child(2) { top: 5px; }
.nav-burger-icon span:nth-child(3) { top: 10px; }
.nav-burger.is-active .nav-burger-icon span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-burger.is-active .nav-burger-icon span:nth-child(2) { opacity: 0; }
.nav-burger.is-active .nav-burger-icon span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.nav-mobile {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(251, 243, 239, 0.98);
  backdrop-filter: none;
  display: grid; place-items: center;
  clip-path: circle(2% at calc(100% - 2.6rem) 2.6rem);
  transition: clip-path .65s var(--ease-soft);
}
.nav-mobile[aria-hidden="false"] { clip-path: circle(150% at calc(100% - 2.6rem) 2.6rem); }
.nav-mobile-list { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; }
.nav-mobile-list a { font-family: var(--sans); font-weight: 700; font-size: 1.6rem; color: var(--ink); }
.nav-mobile-close {
  position: absolute; top: 1.3rem; right: 1.3rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border);
  display: grid; place-items: center;
}

/* =============================================================
   7. Hero
   ============================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6.5rem;
  padding-bottom: 3rem;
  overflow: clip;
  isolation: isolate;
}
.hero-mesh {
  /* Era una malla de tres degradados desenfocada y en rotación infinita: el
     cliché del sector, desbordaba el ancho a 360 px y se comía dos de los
     cuatro tipos de animación del presupuesto. Ahora es un bloque plano con
     un filete de color abajo. Justificación: I1.1, I2.5. */
  position: absolute; inset: 0; z-index: -2;
  background: var(--bg-2);
  border-bottom: 3px solid var(--accent);
}
.hero-grid {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.05fr .95fr; gap: 2rem; } }

.hero-copy { position: relative; z-index: 2; text-align: center; }
@media (min-width: 960px) { .hero-copy { text-align: left; } }

.hero-title {
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  text-wrap: balance;
  max-width: 15ch;
  margin-inline: auto;
}
@media (min-width: 960px) { .hero-title { margin-inline: 0; } }
.hero-title em { font-family: var(--serif); font-weight: 800; letter-spacing: -.03em; color: var(--accent); }

.hero-sub {
  margin-top: 1.4rem; font-size: 1.08rem; color: var(--ink-soft);
  max-width: 46ch; margin-inline: auto;
}
@media (min-width: 960px) { .hero-sub { margin-inline: 0; } }

.hero-actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }
@media (min-width: 960px) { .hero-actions { justify-content: flex-start; } }

.hero-visual { position: relative; z-index: 1; }

/* ── LA TARIFA EN PORTADA ──────────────────────────────────
   Aqui habia una foto de manicura en primer plano con marco redondeado y
   zoom lento: exactamente la portada que tiene el resto del sector. En su
   lugar va lo unico que ninguno publica, que es la tarifa. Es tambien una
   decision de peso: una imagen de 2000 px menos que descargar.
   Nada de esquinas muy redondeadas ni de rosa: cuadro recto, filete fino y
   la cifra en la tipografia de titular, como una carta de precios. */
.tarifa {
  max-width: 420px; margin-inline: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent);
  padding: 1.6rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-lift);
  text-align: left;
}
.tarifa-eti {
  margin: 0 0 1.1rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--accent);
}
.tarifa-lista { list-style: none; margin: 0; padding: 0; display: grid; }
.tarifa-fila {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .62rem 0; min-width: 0;
  border-bottom: 1px solid var(--line);
}
.tarifa-nombre { color: var(--ink); font-weight: 600; min-width: 0; }
.tarifa-cifras { display: flex; align-items: baseline; gap: .7rem; flex: none; }
.tarifa-precio { font-weight: 700; color: var(--ink); white-space: nowrap; }
.tarifa-dura {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .85rem; color: var(--ink-mute); white-space: nowrap;
}
.tarifa-dura svg { width: 14px; height: 14px; flex: none; }
.tarifa-pie { margin: 1.1rem 0 0; font-size: .92rem; color: var(--ink-mute); }
.tarifa-pie strong { color: var(--ink); }
.tarifa-pie a { color: var(--accent); font-weight: 600; }
.tarifa-vacia { margin: 0; font-size: .95rem; color: var(--ink-mute); }
.tarifa-vacia a { color: var(--accent); font-weight: 600; }

@media (max-width: 420px) {
  .tarifa { padding: 1.3rem 1.1rem 1.1rem; }
  .tarifa-fila { flex-wrap: wrap; gap: .15rem .7rem; }
}

/* El usuario de Instagram, ya sin enlace. */
.footer-social-txt { font-weight: 600; color: var(--ink-mute); align-self: center; }

.floaty { position: absolute; pointer-events: none; filter: drop-shadow(0 18px 22px rgba(93,58,47,.22)); z-index: 3; }
.floaty svg { display: block; }
.floaty--polish { width: 58px; top: 6%; left: 2%; animation: floatA 9s ease-in-out infinite; }
.floaty--ribbon { width: 84px; top: 62%; left: -3%; animation: floatB 11s ease-in-out infinite; }
.floaty--lash { width: 56px; top: 4%; right: 4%; animation: floatC 10s ease-in-out infinite; }
.floaty--spark { width: 30px; top: 42%; right: -2%; animation: floatA 7.5s ease-in-out infinite; }
.floaty--drop { width: 40px; bottom: 4%; right: 18%; animation: floatB 8.5s ease-in-out infinite; }
@media (max-width: 959px) {
  .floaty--ribbon { left: 1%; }
  .floaty--spark, .floaty--drop { display: none; }
}
@keyframes floatA {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-16px,0) rotate(-6deg); }
}
@keyframes floatB {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,14px,0) rotate(5deg); }
}
@keyframes floatC {
  0%, 100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(0,-12px,0) rotate(7deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-mesh { animation-duration: 40s; }
}

.scroll-cue {
  position: absolute; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  color: var(--ink-mute); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  z-index: 2;
}
.scroll-cue svg { width: 16px; height: 16px; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } }
@media (max-width: 640px) { .scroll-cue { display: none; } }

/* =============================================================
   9. Services accordion
   ============================================================= */
.accordion-list { display: flex; flex-direction: column; gap: 1rem; }
.acc-item { overflow: clip; transition: box-shadow .4s var(--ease-soft); }
.acc-item[data-open="true"] { box-shadow: var(--shadow-lift); }

.acc-head {
  width: 100%; display: flex; align-items: center; gap: 1rem;
  padding: 1.1rem 1.4rem; text-align: left;
}
.acc-head-media {
  width: 60px; height: 60px; border-radius: var(--radius-sm); flex: none; overflow: clip;
  box-shadow: 0 8px 18px -8px rgba(43,35,32,.4);
}
.acc-head-media img { width: 100%; height: 100%; object-fit: cover; }
.acc-head-text { flex: 1; display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.acc-head-text strong { font-family: var(--sans); font-size: 1.1rem; color: var(--ink); }
.acc-head-text span { font-size: .84rem; color: var(--ink-mute); }
.acc-head-count {
  flex: none; font-size: .76rem; font-weight: 700; color: var(--accent);
  background: rgba(192, 48, 27, .10); padding: .3rem .65rem; border-radius: 999px;
  display: none;
}
@media (min-width: 540px) { .acc-head-count { display: inline-block; } }
.acc-head-icon {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  display: grid; place-items: center; color: var(--ink);
  transition: transform .45s var(--ease-soft), background .3s, color .3s;
}
.acc-head-icon svg { width: 15px; height: 15px; }
.acc-item[data-open="true"] .acc-head-icon { background: var(--accent); color: #fff; transform: rotate(180deg); }

.acc-body-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease-soft); }
.acc-item[data-open="true"] .acc-body-wrap { grid-template-rows: 1fr; }
.acc-body-inner { overflow: hidden; }
.acc-items { padding: .3rem 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .7rem; }

.acc-item-row {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .8rem; border-radius: var(--radius-sm);
  background: var(--glass-2); border: 1px solid var(--glass-border);
  transition: background .3s, transform .3s var(--ease-soft);
}
.acc-item-row:hover { background: rgba(192, 48, 27, .07); transform: translateX(3px); }
.acc-item-photo {
  width: 52px; height: 52px; border-radius: var(--radius-sm); flex: none; overflow: clip;
  box-shadow: 0 6px 14px -6px rgba(43,35,32,.35);
}
.acc-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.acc-item-text { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.acc-item-text strong { font-size: .96rem; color: var(--ink); }
.acc-item-text span { font-size: .82rem; color: var(--ink-mute); }
.acc-item-price { flex: none; font-weight: 800; font-size: .88rem; color: var(--accent); white-space: nowrap; }
.acc-item-cta {
  flex: none; display: inline-flex; align-items: center; gap: .3rem;
  font-size: .8rem; font-weight: 700; color: var(--ink);
  padding: .45rem .8rem; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--glass-border);
  transition: background .3s, color .3s, transform .3s;
}
.acc-item-cta:hover { background: var(--accent); color: #fff; transform: translateY(-2px); }
.acc-item-cta svg { width: 13px; height: 13px; }

@media (max-width: 539px) {
  .acc-head { padding: .95rem 1.1rem; gap: .8rem; }
  .acc-head-media { width: 48px; height: 48px; }
  .acc-items { padding: .3rem 1rem 1.2rem; }
  .acc-item-row { padding: .7rem; }
}

/* =============================================================
   10. About
   ============================================================= */
.about-grid {
  display: grid; gap: 3rem; align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) { .about-grid { grid-template-columns: .9fr 1.1fr; } }
.about-photo {
  position: relative; border-radius: var(--radius-lg); overflow: clip;
  aspect-ratio: 4/5; box-shadow: var(--shadow-soft);
}
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.2rem; }
.stat { padding: 1.1rem .6rem; text-align: center; }
.stat-value { font-family: var(--sans); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2.1rem); color: var(--ink); }
.stat-value .stat-suffix { color: var(--accent); }
.stat-label { margin-top: .3rem; font-size: .78rem; color: var(--ink-mute); font-weight: 600; }

/* =============================================================
   11. Gallery
   ============================================================= */
.gallery-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 190px;
}
@media (min-width: 720px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; } }
.gallery-item { position: relative; border-radius: var(--radius-md); overflow: clip; }
.gallery-item.is-tall { grid-row: span 2; }
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%;
  transition: transform .8s var(--ease-soft), filter .55s;
}
.gallery-item:hover img { transform: scale(1.08); filter: saturate(1.15); }
.gallery-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(43,35,32,.35));
  opacity: 0; transition: opacity .4s;
}
.gallery-item:hover::after { opacity: 1; }

/* =============================================================
   12. Testimonials
   ============================================================= */
.testi-grid { display: grid; gap: 1.3rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .testi-grid { grid-template-columns: repeat(3, 1fr); } }
.testi-card { padding: 1.8rem; display: flex; flex-direction: column; gap: 1.1rem; }
.testi-stars { display: flex; gap: .2rem; color: var(--gold); }
.testi-stars svg { width: 16px; height: 16px; }
.testi-quote { font-size: 1rem; color: var(--ink-soft); flex: 1; }
.testi-quote::before { content: "\201C"; }
.testi-quote::after { content: "\201D"; }
.testi-foot { display: flex; align-items: center; gap: .7rem; }
.testi-avatar {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  background: var(--ink);
  display: grid; place-items: center; font-family: var(--sans); font-weight: 800; color: var(--bg); font-size: .85rem;
}
.testi-name { font-weight: 700; font-size: .92rem; color: var(--ink); }
.testi-service { font-size: .78rem; color: var(--ink-mute); }

/* =============================================================
   13. FAQ
   ============================================================= */
.faq-list { display: flex; flex-direction: column; gap: .9rem; max-width: 760px; }
.faq-item { padding: 0; overflow: clip; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.3rem 1.6rem; text-align: left; font-weight: 700; font-size: 1rem; color: var(--ink);
}
.faq-q-icon {
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  display: grid; place-items: center;
  transition: transform .4s var(--ease-soft), background .3s;
}
.faq-q-icon svg { width: 13px; height: 13px; transition: transform .4s var(--ease-soft); }
.faq-item[data-open="true"] .faq-q-icon { background: var(--accent); color: #fff; transform: rotate(45deg); }
.faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease-soft); }
.faq-item[data-open="true"] .faq-a-wrap { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a { padding: 0 1.6rem 1.4rem; color: var(--ink-mute); font-size: .95rem; }

/* =============================================================
   14. Location / contact
   ============================================================= */
.location-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .location-grid { grid-template-columns: 1.1fr .9fr; } }
.location-card { padding: 2rem; }
.location-row { display: flex; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.location-row:first-of-type { border-top: none; padding-top: 0; }
.location-row svg { width: 21px; height: 21px; color: var(--accent); flex: none; margin-top: .1rem; }
.location-row strong { display: block; color: var(--ink); font-size: .95rem; }
.location-row span, .location-row a { color: var(--ink-mute); font-size: .92rem; }
.hours-table { width: 100%; border-collapse: collapse; }
.hours-table td { padding: .55rem 0; font-size: .92rem; border-top: 1px solid var(--line); }
.hours-table tr:first-child td { border-top: none; }
.hours-table td:first-child { color: var(--ink); font-weight: 600; }
.hours-table td:last-child { text-align: right; color: var(--ink-mute); }

.map-card {
  position: relative; border-radius: var(--radius-lg); overflow: clip;
  min-height: 320px;
  background:
    radial-gradient(60% 55% at 30% 30%, var(--mesh-1), transparent 65%),
    radial-gradient(55% 50% at 75% 70%, var(--mesh-3), transparent 65%),
    var(--bg-2);
  display: grid; place-items: center;
}
.map-frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  filter: saturate(0.85) contrast(1.02);
}
[data-theme="dark"] .map-frame { filter: saturate(0.7) contrast(1.05) invert(0.92) hue-rotate(180deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-frame { filter: saturate(0.7) contrast(1.05) invert(0.92) hue-rotate(180deg); }
}
.map-label {
  position: absolute; bottom: 1.4rem; left: 1.4rem; right: 1.4rem;
  padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  font-size: .85rem; font-weight: 600; color: var(--ink);
  pointer-events: none;
}
.location-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }

/* =============================================================
   15. Final CTA
   ============================================================= */
.cta-section { position: relative; overflow: clip; isolation: isolate; }
.cta-mesh {
  position: absolute; inset: 0; z-index: -1;
  background: var(--ink);
}
.cta-card { padding: clamp(2.4rem, 6vw, 4.4rem) clamp(1.4rem, 6vw, 3rem); text-align: center; }
.cta-title { font-size: clamp(2rem, 4.4vw, 3.1rem); max-width: 18ch; margin-inline: auto; }
.cta-title em { font-family: var(--serif); font-weight: 800; color: var(--accent); }
.cta-sub { margin-top: 1rem; color: var(--ink-mute); font-size: 1.05rem; }
.cta-actions { margin-top: 2.2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; }

/* =============================================================
   16. Footer
   ============================================================= */
.footer { padding-block: 3.4rem 2rem; border-top: 1px solid var(--line); }
.footer-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-brand-line { display: flex; align-items: center; gap: .55rem; margin-bottom: .9rem; }
.footer-desc { max-width: 36ch; color: var(--ink-mute); font-size: .92rem; }
.footer-social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer-social a {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  transition: transform .35s var(--ease-out), background .3s;
}
.footer-social a:hover { transform: translateY(-3px); background: var(--accent); color: #fff; }
.footer-social svg { width: 16px; height: 16px; }
.footer-heading { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.footer-links { display: flex; flex-direction: column; gap: .65rem; }
.footer-links a { color: var(--ink-mute); font-size: .92rem; transition: color .3s; }
.footer-links a:hover { color: var(--accent); }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between;
  font-size: .82rem; color: var(--ink-mute);
}
.footer-bottom a { font-weight: 600; color: var(--ink-mute); }
.footer-bottom a:hover { color: var(--accent); }

/* WhatsApp floating button */
.wa-float {
  position: fixed; right: 1.3rem; bottom: 1.3rem; z-index: 90;
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--accent);
  display: grid; place-items: center;
  box-shadow: 0 18px 36px -12px rgba(22, 21, 15, .18);
  transition: transform .4s var(--ease-bounce);
}
.wa-float:hover { transform: scale(1.08); }
.wa-float svg { width: 27px; height: 27px; color: #fff; }
.wa-float-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--accent); opacity: .55;
  animation: waPulse 2.6s ease-out infinite;
}
@keyframes waPulse {
  0% { transform: scale(1); opacity: .5; }
  100% { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wa-float-pulse { animation-duration: 4s; } }

/* =============================================================
   17. Credits page
   ============================================================= */
.page-credits main { padding-block: 7rem 4rem; }
.credits-list { display: flex; flex-direction: column; gap: .8rem; margin-top: 2rem; }
.credits-list li { padding: 1rem 1.2rem; border-radius: var(--radius-sm); font-size: .92rem; color: var(--ink-mute); }
.credits-list a { color: var(--accent); font-weight: 600; }
.back-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); }

/* =============================================================
   18. Responsive helpers
   ============================================================= */
@media (min-width: 1280px) {
  .container { padding-inline: 2rem; }
}

/* =============================================================
   19. Scroll progress + theme toggle
   ============================================================= */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 200; background: transparent; pointer-events: none;
}
.scroll-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transform-origin: 0 0; transform: scaleX(0); transition: transform .08s linear;
}

.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--glass-2); border: 1px solid var(--glass-border);
  color: var(--ink); position: relative;
}
.theme-toggle svg { position: absolute; width: 18px; height: 18px; transition: opacity .35s var(--ease-out), transform .5s var(--ease-bounce); }
.theme-icon-moon { opacity: 0; transform: rotate(-40deg) scale(.6); }
.theme-icon-sun { opacity: 1; transform: rotate(0) scale(1); }
[data-theme="dark"] .theme-icon-sun { opacity: 0; transform: rotate(40deg) scale(.6); }
[data-theme="dark"] .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-icon-sun { opacity: 0; transform: rotate(40deg) scale(.6); }
  :root:not([data-theme="light"]) .theme-icon-moon { opacity: 1; transform: rotate(0) scale(1); }
}

/* =============================================================
   20. Availability chip
   ============================================================= */
.availability-chip {
  display: inline-flex; align-items: center; gap: .55rem;
  margin-top: 1.4rem; padding: .55rem 1rem;
  border-radius: 999px; background: var(--glass-2); border: 1px solid var(--glass-border);
  font-size: .84rem; font-weight: 600; color: var(--ink-soft);
}
.availability-dot { width: 8px; height: 8px; border-radius: 50%; background: #5fb87a; flex: none; animation: dotPulse 2.4s ease-in-out infinite; }
@keyframes dotPulse { 0%,100%{opacity:1;} 50%{opacity:.35;} }
@media (prefers-reduced-motion: reduce) { .availability-dot { animation: none; } }

/* =============================================================
   21. Booking widget
   ============================================================= */
.booking-card { max-width: 720px; margin-inline: auto; padding: clamp(1.6rem, 4vw, 2.6rem); }
.booking-steps { display: flex; align-items: center; gap: .5rem; margin-bottom: 2rem; }
.booking-step {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: .3rem;
  font-family: var(--sans); font-weight: 800; font-size: 1rem; color: var(--ink-mute);
  position: relative; padding-bottom: .8rem;
}
.booking-step::after {
  content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; border-radius: 3px;
  background: var(--line);
}
.booking-step.is-active { color: var(--accent); }
.booking-step.is-active::after, .booking-step.is-done::after { background: var(--accent); }
.booking-step em { font-style: normal; font-family: var(--body); font-weight: 600; font-size: .74rem; letter-spacing: .02em; }

.booking-label { font-weight: 700; color: var(--ink); margin-bottom: 1rem; }
.booking-panel[hidden] { display: none; }
.booking-service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (min-width: 640px) { .booking-service-grid { grid-template-columns: repeat(4, 1fr); } }
.booking-service-opt {
  padding: .9rem .8rem; border-radius: var(--radius-sm);
  background: var(--glass-2); border: 1.5px solid var(--glass-border);
  font-weight: 600; font-size: .88rem; text-align: center;
  transition: border-color .3s, transform .3s var(--ease-soft), background .3s;
}
.booking-service-opt:hover { transform: translateY(-3px); }
.booking-service-opt.is-selected { border-color: var(--accent); background: rgba(192, 48, 27, .10); color: var(--accent); }

.booking-row { margin-bottom: 1.3rem; }
.field-label { display: block; font-size: .82rem; font-weight: 700; color: var(--ink); margin-bottom: .45rem; }
.field-input {
  width: 100%; padding: .85rem 1rem; border-radius: var(--radius-sm);
  border: 1.5px solid var(--glass-border); background: var(--glass-2); color: var(--ink);
  font: inherit; font-size: .95rem;
}
/* Quitaba el contorno y dejaba solo un cambio de color de borde: para quien
   navega con teclado eso es una pista muy débil y en algunos temas casi
   invisible. Ahora hay anillo de foco de verdad. */
.field-input:focus { border-color: var(--accent); }
.field-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }

.booking-slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.booking-slot-opt {
  padding: .9rem .6rem; border-radius: var(--radius-sm);
  background: var(--glass-2); border: 1.5px solid var(--glass-border);
  text-align: center; font-weight: 700; font-size: .86rem;
  transition: border-color .3s, transform .3s var(--ease-soft);
}
.booking-slot-opt span { display: block; font-weight: 500; font-size: .72rem; color: var(--ink-mute); margin-top: .2rem; }
.booking-slot-opt:hover { transform: translateY(-3px); }
.booking-slot-opt.is-selected { border-color: var(--accent); background: rgba(192, 48, 27, .10); color: var(--accent); }

.booking-summary {
  margin-top: 1.5rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-sm);
  background: var(--glass-2); border: 1px solid var(--glass-border);
  font-size: .88rem; color: var(--ink-soft); line-height: 1.7;
}
.booking-summary strong { color: var(--ink); }

.booking-nav { display: flex; align-items: center; margin-top: 1.8rem; gap: .8rem; }
.booking-nav-spacer { flex: 1; }

.booking-done { text-align: center; padding-block: 1.5rem; }
.booking-done svg {
  width: 56px; height: 56px; margin-inline: auto 0; margin-bottom: 1rem;
  color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-radius: 50%; padding: 14px;
}
.booking-done h3 { font-size: 1.4rem; margin-bottom: .6rem; }
.booking-done p { color: var(--ink-mute); max-width: 40ch; margin-inline: auto; }
.booking-done .btn { margin-top: 1.4rem; }
.booking-restart { display: block; margin: 1rem auto 0; font-size: .84rem; font-weight: 700; color: var(--ink-mute); text-decoration: underline; text-underline-offset: 3px; }

/* =============================================================
   23. Team
   ============================================================= */
.team-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 720px) { .team-grid { grid-template-columns: repeat(3, 1fr); } }
.team-card { overflow: clip; text-align: center; transition: transform .5s var(--ease-soft), box-shadow .5s var(--ease-soft); }
.team-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lift); }
.team-photo { aspect-ratio: 4/5; overflow: clip; }
.team-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .8s var(--ease-soft); }
.team-card:hover .team-photo img { transform: scale(1.06); }
.team-body { padding: 1.3rem 1.2rem 1.5rem; }
.team-name { font-size: 1.1rem; }
.team-role { color: var(--accent); font-size: .82rem; font-weight: 700; margin-top: .2rem; }
.team-bio { margin-top: .7rem; font-size: .88rem; color: var(--ink-mute); }

/* =============================================================
   24. Pricing
   ============================================================= */
.pricing-grid { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 780px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }
.pricing-card { padding: 1.7rem 1.6rem; }
.pricing-cat { font-size: 1.15rem; margin-bottom: 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.pricing-row { display: flex; justify-content: space-between; gap: 1rem; padding-block: .6rem; font-size: .92rem; }
.pricing-row + .pricing-row { border-top: 1px dashed var(--line); }
.pricing-row span:first-child { color: var(--ink-soft); }
.pricing-row strong { color: var(--accent); font-weight: 800; white-space: nowrap; }

/* =============================================================
   25. Gallery lightbox
   ============================================================= */
.gallery-item { cursor: zoom-in; }
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(10, 7, 6, 0.92);
  display: grid; place-items: center;
  opacity: 0; pointer-events: none;
  transition: opacity .35s var(--ease-out);
}
.lightbox[aria-hidden="false"] { opacity: 1; pointer-events: auto; }
.lightbox img {
  max-width: min(90vw, 900px); max-height: 82vh; border-radius: var(--radius-md);
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.7);
}
.lightbox-close, .lightbox-nav {
  position: fixed; width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.25);
  transition: background .3s, transform .3s;
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 1.4rem; right: 1.4rem; }
.lightbox-nav svg, .lightbox-close svg { width: 20px; height: 20px; }
.lightbox-prev { left: 1.4rem; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 1.4rem; top: 50%; transform: translateY(-50%); }
@media (max-width: 640px) {
  .lightbox-prev { left: .5rem; }
  .lightbox-next { right: .5rem; }
}

/* =============================================================
   26. FAQ search
   ============================================================= */
.faq-search {
  position: relative; max-width: 460px; margin-bottom: 1.6rem;
  display: flex; align-items: center;
}
.faq-search svg { position: absolute; left: 1rem; width: 18px; height: 18px; color: var(--ink-mute); pointer-events: none; }
.faq-search input {
  width: 100%; padding: .85rem 1rem .85rem 2.7rem; border-radius: 999px;
  border: 1.5px solid var(--glass-border); background: var(--glass-2); color: var(--ink);
  font: inherit; font-size: .92rem;
}
.faq-search input:focus { border-color: var(--accent); }
.faq-search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.faq-empty { margin-top: 1rem; color: var(--ink-mute); font-size: .92rem; }
.faq-empty a { color: var(--accent); font-weight: 700; }
.faq-item.is-filtered-out { display: none; }

/* =============================================================
   27. Elemento flotante único: WhatsApp, volver arriba y aviso
   ============================================================= */

.back-to-top {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--glass); border: 1px solid var(--glass-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  color: var(--ink); display: grid; place-items: center;
  box-shadow: var(--shadow-soft);
  transition: transform .4s var(--ease-bounce), opacity .3s;
}
.back-to-top[hidden] { display: none; }
.back-to-top:hover { transform: translateY(-3px); }
.back-to-top svg { width: 19px; height: 19px; }



.toast {
  position: fixed; left: 50%; bottom: 6.5rem; z-index: 300;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--ink); color: var(--bg); font-size: .86rem; font-weight: 600;
  padding: .8rem 1.3rem; border-radius: 999px; box-shadow: var(--shadow-lift);
  transition: transform .4s var(--ease-soft), opacity .4s var(--ease-soft);
}
.toast.is-visible { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 539px) {
}

/* ── Mapa bajo demanda ────────────────────────────────────────────
   Sustituye al iframe que antes se cargaba de entrada. I2.6. */
.map-cargar {
  display: grid; place-content: center; gap: .5rem;
  width: 100%; min-height: 260px; padding: 2rem 1.5rem;
  background: var(--bg-2);
  border: 1px dashed var(--glass-border);
  border-radius: var(--radius-lg);
  color: var(--ink-soft); text-align: center;
  transition: background .2s var(--ease-soft);
}
.map-cargar:hover { background: var(--paper); }
.map-cargar-icono svg { width: 34px; height: 34px; margin-inline: auto; color: var(--accent); }
.map-cargar-texto { font-family: var(--sans); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.map-cargar-nota { font-size: .82rem; color: var(--ink-mute); }

/* ═══ CORRECCIONES DE FASE 2 ══════════════════════════════════════════
   Medidas tomadas a 360 px con la caja real de cada elemento.          */

/* El botón «Enviar por WhatsApp» del último paso de la reserva mide 242 px
   y vivía en una fila sin envolver: se salía 151 px de la pantalla. I1.5. */
@media (max-width: 560px) {
  .booking-nav { flex-wrap: wrap; gap: .6rem; }
  .booking-nav .btn { width: 100%; white-space: normal; }
}

/* Objetivos táctiles de 44 px. Los enlaces del pie medían 31 px de alto y
   el conmutador de tema 40×40. Se gana altura con relleno, sin mover el
   ritmo visual: el texto sigue donde estaba. I1.7. */
.footer-links a,
.footer-social a,
.location-row a,
.acc-item-cta,
.nav-mobile-list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer-social a { min-width: 44px; justify-content: center; }
.theme-toggle { width: 44px; height: 44px; }

/* En pantallas de dedo, la zona pulsable de los enlaces sueltos del pie se
   extiende sin que el subrayado crezca. */
@media (pointer: coarse) {
  .footer-bottom a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Estado en vivo abierto/cerrado ────────────────────────────────
   Traído de las otras cinco demos, que sí lo tenían. El punto cambia de
   color; el texto dice lo mismo por si el color no se percibe. I1.3. */
.estado-vivo {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .6rem; font-size: .9rem; font-weight: 600;
  color: var(--ink-soft);
}
.estado-vivo [data-estado-vivo]::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%;
  display: inline-block; margin-right: .5rem; vertical-align: middle;
  background: var(--ink-mute);
}
.estado-vivo [data-abierto="si"]::before { background: var(--accent-2); }
.estado-vivo [data-abierto="no"]::before { background: var(--accent); }
.estado-vivo--linea { margin-top: .35rem; font-size: .86rem; }

/* ── Duración de cada servicio ─────────────────────────────────────
   Cuánto dura es la mitad de la pregunta, y casi ningún estudio del sector
   la publica. Va pegada al precio. I1.4. */
.acc-item-dura {
  display: flex; align-items: center; gap: .35rem;
  margin-top: .25rem;
  font-size: .8rem; font-weight: 500; color: var(--ink-mute);
  white-space: nowrap;
}
.acc-item-dura svg { width: 13px; height: 13px; flex: none; }
.acc-item-dura em { font-style: normal; font-size: .76rem; }