/* Aurora — tema FolksCMS. Todo el look sale de los design tokens (:root inyectado). */

/* Copias "ancla" de los 3 tokens de texto, fijadas una sola vez en :root con
   el valor real de la marca del cliente (nunca se vuelven a redefinir, así
   que cualquier descendiente las hereda tal cual). Las usan las tarjetas
   blancas (.card/.price-card/.team-card) para "deshacer" el cambio a texto
   blanco de .section-solid en su propio fondo — ver esa regla más abajo. */
:root {
  --c-ink-base: var(--c-ink);
  --c-body-base: var(--c-body);
  --c-muted-base: var(--c-muted);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }

/* Los controles de formulario NO heredan la tipografía del body por defecto
   (el navegador les pone su propia fuente de sistema) — sin esto, botones
   <button> (a diferencia de los <a class="btn">) se ven con otra letra. */
button, input, select, textarea { font-family: inherit; color: inherit }

html { scroll-behavior: smooth }

body {
  font-family: var(--font-body);
  color: var(--c-body);
  background: var(--c-surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block }
/* --c-primary-text: el primario cuando se usa como TEXTO, no como fondo.
   En Aurora el primario hace las dos cosas — fondo de botón y color de enlace —
   y eso solo funciona con un primario oscuro. Con el amarillo de marca de
   NG Builders (#fdc504) el botón se lee (tinta encima, 11.02) pero un enlace
   amarillo sobre blanco da 1.60. Este token permite separarlas: el sitio fija
   un dorado oscuro del mismo matiz para texto y conserva el amarillo vivo para
   fondos. Sin definir, cae a --c-primary y nada cambia en los sitios previos. */
a { color: var(--c-primary-text, var(--c-primary)); text-decoration: none }

h1, h2, h3 { font-family: var(--font-display); color: var(--c-ink); line-height: 1.12; letter-spacing: -0.025em }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.8rem); font-weight: 700 }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700 }
h3 { font-size: 1.2rem; font-weight: 700 }

.container { max-width: var(--container); margin: 0 auto; padding: 0 1.25rem }
.container-narrow { max-width: 760px }

.kicker {
  display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--c-accent-text, var(--c-accent)); margin-bottom: .8rem;
}
.lead { font-size: 1.15rem; color: var(--c-body); max-width: 60ch }

/* ── Botones ─────────────────────────────────────────────── */
/* El color del texto sobre el primario sale de un token, no en duro.
   `.btn` llevaba `color:#fff` fijo: con un primario claro —el amarillo de
   marca de NG Builders, #fdc504— eso da contraste 1.60 y el botón queda
   ilegible. `View::themeTokensCss()` deriva --c-primary-ink con
   Palette::inkOn(), que elige blanco o tinta según lo que se lea mejor.
   El fallback #fff conserva el comportamiento anterior en los sitios cuyo
   primario es oscuro, así que ninguno cambia de aspecto. */
.btn {
  display: inline-block; padding: .65rem 1.4rem; border-radius: 999px;
  background: var(--c-primary); color: var(--c-primary-ink, #fff); font-weight: 650; font-size: .95rem;
  transition: transform .18s ease, box-shadow .18s ease;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px color-mix(in srgb, var(--c-primary) 45%, transparent) }
.btn-icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: .1rem }
.h3-icon { width: 18px; height: 18px; vertical-align: -3px; margin-right: .2rem }
.btn-lg { padding: .9rem 2rem; font-size: 1.02rem }
.btn-sm { padding: .45rem 1.1rem; font-size: .85rem }
.btn-ghost { background: transparent; color: var(--c-btn-ghost-ink, var(--c-primary-text, var(--c-primary))); box-shadow: inset 0 0 0 2px var(--c-btn-ghost-border, var(--c-primary)) }
.btn-ghost:hover { background: var(--c-primary-soft); box-shadow: inset 0 0 0 2px var(--c-btn-ghost-border, var(--c-primary)) }
.btn-invert { background: #fff; color: var(--c-primary-text, var(--c-primary)); box-shadow: 0 6px 20px rgb(0 0 0 / .2) }

/* ── Header ──────────────────────────────────────────────── */
.site-header { position: relative; z-index: 50 }
/* Solo el header principal queda fijo; la barra superior se va con el scroll */
.header-main { position: sticky; top: 0; z-index: 50 }

/* Barra superior de utilidad (dirección · email · redes) */
.topbar {
  background: var(--c-topbar-bg, var(--c-accent));
  color: color-mix(in srgb, var(--c-topbar-ink, var(--c-accent-ink, #fff)) 88%, transparent);
  font-size: .82rem;
}
.topbar a { color: var(--c-topbar-ink, var(--c-accent-ink, #fff)) }
.topbar a:hover { opacity: .78 }
.topbar svg { color: color-mix(in srgb, var(--c-topbar-ink, var(--c-accent-ink, #fff)) 72%, transparent) }
.topbar-in { display: flex; align-items: center; justify-content: space-between; min-height: 42px; gap: 1rem }
.topbar-left { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap }
.topbar-right { display: flex; align-items: center; gap: .3rem }
.tb-item { display: inline-flex; align-items: center; gap: .45rem; color: inherit }
a.tb-item:hover { color: var(--c-topbar-ink, var(--c-accent-ink, #fff)); opacity: .78 }
.tb-item svg { opacity: .8; flex-shrink: 0 }
.tb-since { color: color-mix(in srgb, var(--c-topbar-ink, var(--c-accent-ink, #fff)) 72%, transparent); margin-right: .8rem }
.tb-social {
  display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  color: color-mix(in srgb, var(--c-accent-ink, #fff) 82%, transparent); transition: background .15s, color .15s;
}
.tb-social:hover { background: color-mix(in srgb, var(--c-accent-ink, #fff) 16%, transparent); color: var(--c-accent-ink, #fff) }

/* Header principal */
.header-main {
  background: var(--c-header-bg, color-mix(in srgb, var(--c-surface) 88%, transparent));
  backdrop-filter: blur(14px); border-bottom: 1px solid var(--c-header-border, var(--c-border));
  transition: box-shadow .25s ease;
}
.nav-wrap { display: flex; align-items: center; gap: 1.5rem; height: 78px }
.brand { flex-shrink: 0 }
.brand img { height: 54px; width: auto }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--c-ink) }
.site-nav { display: flex; align-items: center; gap: .55rem; margin-left: auto }
/* Nav estilo "utility": píldoras */
.hdr-utility .site-nav > a:not(.btn):not(.btn-dark), .hdr-utility .nav-drop-btn {
  color: var(--c-ink); font-weight: 600; font-size: .95rem; padding: .5rem 1.05rem; border-radius: 999px;
  transition: background .15s, color .15s;
}
.hdr-utility .site-nav > a:not(.btn):not(.btn-dark):hover, .hdr-utility .nav-drop-btn:hover { background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)) }
.hdr-utility .site-nav > a:not(.btn):not(.btn-dark).active { background: var(--c-primary); color: var(--c-primary-ink, #fff) }
.hdr-utility .site-nav .btn { color: #fff; margin-left: .3rem }
.hdr-utility .site-nav .btn:hover { background: var(--c-primary); color: var(--c-primary-ink, #fff) }
/* Nav estilo "classic": enlaces minimalistas con subrayado que crece */
.hdr-classic .site-nav { gap: 2.1rem }
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark), .hdr-classic .nav-drop-btn {
  color: var(--c-ink); font-weight: 550; font-size: .95rem; opacity: .82; position: relative; padding-bottom: 3px;
  transition: opacity .15s, color .15s;
}
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark):hover, .hdr-classic .site-nav > a:not(.btn):not(.btn-dark).active, .hdr-classic .nav-drop-btn:hover { opacity: 1; color: var(--c-primary-text, var(--c-primary)) }
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c-primary);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark):hover::after, .hdr-classic .site-nav > a:not(.btn):not(.btn-dark).active::after { transform: scaleX(1) }
.hdr-classic .site-nav .btn { opacity: 1 } .hdr-classic .site-nav .btn::after { display: none }
/* CTA de teléfono a la derecha (estilo Cleanco, con color de marca) */
.header-cta {
  display: inline-flex; align-items: center; gap: .7rem; flex-shrink: 0;
  padding: .55rem 1.3rem .55rem .6rem; border-radius: 999px;
  background: var(--c-primary-soft); transition: transform .18s, box-shadow .18s;
}
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 22px color-mix(in srgb, var(--c-primary) 30%, transparent) }
.header-cta .cta-ic {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-primary-ink, #fff); flex-shrink: 0;
}
.header-cta .cta-tx { display: flex; flex-direction: column; line-height: 1.15 }
.header-cta .cta-tx small { font-size: .7rem; color: var(--c-muted); font-weight: 600 }
.header-cta .cta-tx strong { font-family: var(--font-display); font-size: 1.02rem; color: var(--c-ink) }
/* Hamburguesa animada */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .4rem; margin-left: auto }
.nav-toggle span { width: 24px; height: 2px; background: var(--c-ink); border-radius: 2px; transition: .25s }

/* Nav estilo "floating": tarjeta redondeada flotante, separada del borde */
.hdr-floating .header-main { background: transparent; backdrop-filter: none; border: 0; padding: 1rem 0 }
.hdr-floating .floating-card {
  background: var(--c-surface); border-radius: 999px; height: auto; padding: .55rem .6rem .55rem 1.6rem;
  box-shadow: 0 16px 40px rgb(17 24 39 / .10), 0 2px 10px rgb(17 24 39 / .06);
  border: 1px solid color-mix(in srgb, var(--c-border) 60%, transparent);
  transition: box-shadow .25s ease, transform .25s ease;
}
.hdr-floating .header-main.scrolled .floating-card { box-shadow: 0 20px 48px rgb(17 24 39 / .14), 0 3px 12px rgb(17 24 39 / .08) }
.hdr-floating .site-nav > a:not(.btn):not(.btn-dark), .hdr-floating .nav-drop-btn {
  color: var(--c-ink); font-weight: 600; font-size: .93rem; padding: .5rem 1.1rem; border-radius: 999px;
  transition: background .15s, color .15s;
}
.hdr-floating .site-nav > a:not(.btn):not(.btn-dark):hover, .hdr-floating .nav-drop-btn:hover { background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)) }
.hdr-floating .site-nav > a:not(.btn):not(.btn-dark).active { background: var(--c-ink); color: #fff }
/* El CTA "Agendar cita" es un <a class="btn"> dentro de .site-nav: sin este
   override hereda color:var(--c-ink) de la regla de arriba y el texto queda
   ilegible sobre su propio fondo azul. El :hover necesita ADEMÁS su propio
   fondo — si no, hereda el fondo casi blanco de ".site-nav > a:hover" de
   arriba (pensado para los links de texto, no para un botón ya coloreado),
   y el texto forzado a blanco queda invisible sobre ese fondo pálido. */
.hdr-floating .site-nav > a:not(.btn):not(.btn-dark).btn, .hdr-floating .site-nav > a:not(.btn):not(.btn-dark).btn:hover { color: #fff }
.hdr-floating .site-nav > a:not(.btn):not(.btn-dark).btn:hover { background: var(--c-primary) }
@media (max-width: 860px) {
  .hdr-floating .floating-card { border-radius: 26px; padding: .6rem .8rem .6rem 1.1rem }
}
/* Cuando el primer bloque es un hero "bold" (foto a sangre completa), el
   header flota ENCIMA de la foto en vez de empujarla hacia abajo dejando un
   hueco en blanco arriba — igual que en las referencias. Se ancla justo
   debajo de la barra superior (o del borde de la página si no hay barra)
   usando top:100% del propio .site-header, así no depende de un alto fijo
   en píxeles que se rompería si la barra superior cambia de tamaño. */
.hdr-floating:has(~ main > .hero-bold:first-child) .header-main {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
}
/* Mismo truco para el hero "vitrina" (showcase): NO tiene foto a sangre
   completa, solo un fondo suave (grilla + degradado) que hoy se corta en
   seco donde empieza el header, dejando el header con su blanco propio
   encima. Se generaliza a los 4 estilos de header (antes el truco de arriba
   solo aplicaba al flotante) y se fuerza el header a transparente — la
   franja de foto/cilindro del hero (.hero-media) sigue intacta más abajo,
   solo el fondo AMBIENTE del hero pasa a verse detrás del header. */
.site-header:has(~ main > .hero-v-showcase:first-child) .header-main {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
  background: transparent; backdrop-filter: none; border-bottom: 0;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:
    radial-gradient(1000px 500px at 85% -10%, color-mix(in srgb, var(--c-primary) 14%, transparent), transparent 60%),
    radial-gradient(700px 400px at -10% 110%, color-mix(in srgb, var(--c-accent) 10%, transparent), transparent 60%),
    var(--c-surface-alt);
  padding: clamp(4rem, 9vw, 7.5rem) 0;
  overflow: hidden;
}
.hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center }
.hero-inner:has(.hero-media:empty), .hero-inner:not(:has(.hero-media)) { grid-template-columns: 1fr; text-align: center }
.hero-inner:not(:has(.hero-media)) .lead { margin-inline: auto }
/* Titulares grandes y apretados — el mayor peso visual de toda la página */
.hero h1 { margin: 0 0 1.2rem; font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.07; letter-spacing: -.03em }
.hero .lead { margin-bottom: 2.1rem; font-size: 1.22rem }
/* El titular y el texto de apoyo ahora aceptan negrita en línea (mismo campo
   enriquecido que los párrafos de texto.php) — la parte en negrita se pinta
   con el color de acento, para poder resaltar una frase clave sin tocar CSS
   cada vez (ej. "hogar y oficina" en un titular, "Sin contratos" en el lead). */
.hero h1 strong, .hero h1 b, .hero .lead strong, .hero .lead b { color: var(--c-accent-text, var(--c-accent)); font-weight: inherit }
.hero-actions { display: flex; gap: .9rem; flex-wrap: wrap }
.hero-inner:not(:has(.hero-media)) .hero-actions { justify-content: center }
/* Recorte por sección: la imagen se adapta a la proporción del layout
   (cuadrada en el hero de 2 columnas), no al ratio original del archivo */
.hero-media img {
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
}
/* En móvil la foto del hero se queda CUADRADA, como en escritorio. Con
   16/10 y una sola columna salía una franja apaisada y estrecha que recortaba
   medio encuadre: en una casa pintada se perdían el tejado y el jardín, que
   es justo lo que hay que enseñar. El cuadrado conserva mucho más. */
@media (max-width: 860px) { .hero-media img { aspect-ratio: 1 / 1 } }

/* Plantilla "blobs": manchas de color grandes y vívidas, sin depender de foto */
.hero-v-blobs {
  background:
    radial-gradient(52vw 44vw at 14% 22%, color-mix(in srgb, var(--c-primary) 32%, transparent), transparent 62%),
    radial-gradient(46vw 42vw at 86% 78%, color-mix(in srgb, var(--c-accent) 28%, transparent), transparent 62%),
    var(--c-surface);
}
/* El titular de "Vívido" usaba un tamaño mayor que el resto de variantes
   —clamp(2.5rem, 5.8vw, 4.3rem)— y se notaba al cambiar de Suave a Vívido:
   el mismo texto crecía sin motivo. Sin foto que compita, el fondo de manchas
   ya da presencia de sobra. Ahora hereda el tamaño base de `.hero h1`, igual
   que las demás. */

/* Plantilla "bold": foto a sangre completa + degradado configurable claro/oscuro */
.hero-bold {
  background-size: cover; background-position: center; position: relative;
  min-height: min(82vh, 760px); display: flex; align-items: center;
  padding: clamp(3rem, 8vw, 6rem) 0; overflow: hidden;
}
.hero-scrim { position: absolute; inset: 0; z-index: 0 }
.hero-ov-dark .hero-scrim { background: linear-gradient(180deg, rgba(8,10,18,.28), rgba(8,10,18,.7) 72%) }
.hero-ov-light .hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.88) 74%) }
.hero-inner-bold { position: relative; z-index: 1; grid-template-columns: 1fr; max-width: min(88%, 58rem) }
.hero-ov-dark .hero-inner-bold h1, .hero-ov-dark .hero-inner-bold .lead { color: #fff }
.hero-ov-dark .hero-inner-bold .kicker { color: #fff; opacity: .9 }
.hero-ov-dark .hero-inner-bold .ts-label { color: #fff }
.hero-ov-light .hero-inner-bold h1, .hero-ov-light .hero-inner-bold .lead { color: var(--c-ink) }
/* Botones legibles sobre foto: en overlay oscuro el primario pasa a blanco
   sólido y el ghost a contorno blanco (el color de marca puede ser oscuro
   y quedaría invisible sobre la foto sin esto) */
.hero-ov-dark .hero-inner-bold .btn:not(.btn-ghost),
.hero-ov-dark .hs-inner .btn:not(.btn-ghost) { background: #fff; color: var(--c-ink) }
.hero-ov-dark .hero-inner-bold .btn:not(.btn-ghost):hover,
.hero-ov-dark .hs-inner .btn:not(.btn-ghost):hover { background: var(--c-primary); color: var(--c-primary-ink, #fff) }
/* El botón fantasma toma su color del primario, que sobre una foto oscura
   desaparece. El hero a sangre ya lo resolvía; el carrusel reutiliza la misma
   regla en vez de inventar otra. */
.hero-ov-dark .hero-inner-bold .btn-ghost,
.hero-ov-dark .hs-inner .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .85) }
.hero-ov-dark .hero-inner-bold .btn-ghost:hover,
.hero-ov-dark .hs-inner .btn-ghost:hover { background: rgb(255 255 255 / .14) }
@media (max-width: 860px) { .hero-bold { min-height: min(88vh, 640px) } }

/* Plantilla "vitrina" (showcase): foto grande en tarjeta con una insignia de
   estado flotando en una esquina y la reseña real (Trust Hub) en la otra —
   fondo con degradado suave + grilla punteada muy sutil en vez de blobs. */
.hero-v-showcase { position: relative; background: var(--c-surface) }
/* La grilla + degradado viven en un ::before detrás del contenido — si se
   pintaran como fondo del propio .hero, el mask-image de abajo (para que la
   grilla se desvanezca en vez de cortar en seco) atenuaría también el texto
   y la foto, que son contenido normal del mismo elemento. */
.hero-v-showcase::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-border) 55%, transparent) 1px, transparent 1px) 0 0/40px 40px,
    linear-gradient(180deg, color-mix(in srgb, var(--c-border) 55%, transparent) 1px, transparent 1px) 0 0/40px 40px,
    radial-gradient(60vw 50vw at 12% 8%, color-mix(in srgb, var(--c-primary) 12%, transparent), transparent 65%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 55%, transparent 96%);
}
.hero-v-showcase .hero-inner { position: relative; z-index: 1 }
/* La "vitrina" es la única plantilla con badge tipo píldora sobre el kicker
   (punto + texto + borde), en vez del texto simple en mayúsculas. */
.hero-v-showcase .kicker {
  display: inline-flex; align-items: center; gap: .5rem; text-transform: none;
  letter-spacing: normal; font-size: .85rem; font-weight: 600; color: var(--c-primary-text, var(--c-primary));
  background: color-mix(in srgb, var(--c-primary) 10%, var(--c-surface));
  border: 1px solid color-mix(in srgb, var(--c-primary) 22%, transparent);
  border-radius: 999px; padding: .45rem 1rem .45rem .8rem;
}
.hero-v-showcase .kicker::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-primary); flex-shrink: 0;
}
.hero-v-showcase .hero-media img { aspect-ratio: 4 / 5; border-radius: 28px }
@media (max-width: 860px) { .hero-v-showcase .hero-media img { aspect-ratio: 4 / 3 } }
/* El header flota ENCIMA de este hero (ver regla .site-header:has(...) más
   arriba), pero en mobile el propio header es más alto (el logo se envuelve
   a 2 líneas / el menú hamburguesa ocupa más alto que el nav de escritorio)
   y el padding-top normal del hero (mínimo 4rem) no alcanza a dejarlo
   despejado — la píldora del kicker queda tapada. Se le da más aire solo
   en mobile; en desktop el padding normal ya sobra de espacio. */
@media (max-width: 640px) { .hero-v-showcase { padding-top: 9rem } }
/* Insignia de estado (arriba a la izquierda de la foto) — claim corto tipo
   "Servicio verificado", opcional (campos badge_title/badge_sub del bloque) */
.hero-status-chip {
  position: absolute; top: 6%; left: -6%; display: flex; align-items: center; gap: .6rem;
  background: color-mix(in srgb, var(--c-ink) 88%, transparent); color: #fff;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); padding: .7rem 1rem .7rem .8rem;
  max-width: 74%; animation: ts-float 4s ease-in-out infinite;
}
.hsc-icon { width: 26px; height: 26px; flex-shrink: 0; color: var(--c-primary-text, var(--c-primary)) }
.hero-status-chip strong { display: block; font-size: .86rem; line-height: 1.2 }
.hero-status-chip small { display: block; font-size: .74rem; opacity: .75; line-height: 1.2 }
/* Reseña real (Trust Hub) — abajo a la derecha de la foto */
.hero-review-chip {
  position: absolute; bottom: 6%; right: -6%; display: flex; align-items: center; gap: .55rem;
  background: var(--c-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: .65rem .9rem; max-width: 68%; animation: ts-float 4s ease-in-out infinite; animation-delay: .8s;
}
.hrc-tx { display: flex; flex-direction: column; line-height: 1.25 }
@media (max-width: 640px) {
  .hero-status-chip, .hero-review-chip { position: static; margin: .6rem 0 0; max-width: 100%; animation: none }
}

/* ── Trust Hub (señales de confianza) ───────────────────────── */
.ts-stars { display: inline-flex; gap: 1px }
.ts-star-icon { width: 14px; height: 14px; color: var(--c-border); fill: var(--c-border) }
.ts-star.on .ts-star-icon { color: #f5b400; fill: #f5b400 }
.ts-label { font-size: .95rem; color: var(--c-ink) }
.ts-platform { font-size: .85rem; color: var(--c-muted); font-weight: 600 }

.trust-inline { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: 1.3rem; font-size: .9rem }
.hero-inner:not(:has(.hero-media)) .trust-inline { justify-content: center }

.hero-media { position: relative }
.trust-cards { position: absolute; inset: 0; pointer-events: none }
.trust-card {
  position: absolute; display: flex; align-items: center; gap: .5rem;
  background: var(--c-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  padding: .6rem .9rem; max-width: 78%; animation: ts-float 4s ease-in-out infinite;
}
.trust-card:nth-child(1) { top: 8%; left: -6%; animation-delay: 0s }
.trust-card:nth-child(2) { top: 42%; right: -8%; animation-delay: .6s }
.trust-card:nth-child(3) { bottom: 6%; left: -4%; animation-delay: 1.2s }
@keyframes ts-float { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-6px) } }
@media (max-width: 640px) {
  .trust-card { position: static; margin-top: .6rem; max-width: 100%; animation: none }
  .trust-cards { position: static; display: flex; flex-direction: column; gap: .5rem; pointer-events: auto }
}

/* ── Secciones ───────────────────────────────────────────── */
.section { padding: clamp(4rem, 8vw, 6.5rem) 0 }
.section-alt { background: var(--c-surface-alt) }
/* Estilo de bloque elegible desde el editor (botón "paleta" junto a ▲/▼):
   además del blanco de siempre, un recuadro con tinte de acento muy claro,
   o el acento sólido con texto blanco. Los <div class="card">/tarjetas de
   adentro (features/services/pricing/team) mantienen su propio fondo blanco
   (var(--c-surface) no se toca), así que en "solid" quedan como tarjetas
   claras flotando sobre la franja de color — igual que en las referencias.
   Redefinir las variables de texto (no el color de fondo de las tarjetas)
   es lo que hace que TODO el contenido de adentro cambie a blanco sin tener
   que tocar cada plantilla de bloque una por una. */
.section-tint { background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)) }
.section-solid {
  background: var(--c-accent);
  --c-ink: var(--c-accent-ink, #fff);
  --c-body: color-mix(in srgb, var(--c-accent-ink, #fff) 92%, transparent);
  --c-muted: color-mix(in srgb, var(--c-accent-ink, #fff) 72%, transparent);
}
.section-solid .kicker { color: var(--c-accent-ink, #fff); opacity: .9 }
.section-solid .step-arrow-icon { color: color-mix(in srgb, var(--c-accent-ink, #fff) 50%, transparent) }
/* Tarjetas blancas anidadas (servicios/precios/equipo/testimonios/FAQ):
   tienen su propio fondo blanco, así que su texto necesita quedarse oscuro
   aunque el resto de la sección haya pasado a blanco — se "deshace" el
   cambio de arriba con las copias ancla de :root (ver comentario junto a
   --c-ink-base al inicio del archivo). */
.section-solid .card, .section-solid .price-card, .section-solid .team-card, .section-solid .faq-item {
  --c-ink: var(--c-ink-base); --c-body: var(--c-body-base); --c-muted: var(--c-muted-base);
}
.section-head { text-align: center; max-width: 660px; margin: 0 auto 3.5rem }
.section-head .lead { margin: .9rem auto 0 }

/* ── Pasos (steps) — "Paso 1 → Paso 2 → Paso 3" con flechas de conexión ── */
/* NO convertir .steps en rejilla: entre paso y paso la plantilla emite un
   `.step-arrow`, así que el contenedor tiene 2n-1 hijos y una rejilla de N
   columnas mezclaría flechas con pasos. Sigue siendo flex; el reparto se
   controla acotando el ANCHO del contenedor a --cols pasos, que sale de
   gridCols(). Sin eso, cinco pasos caben cuatro en la primera fila y el
   quinto se queda solo. ~265px = paso (220) + hueco + flecha. */
/* El tope tiene que contar las FLECHAS, no solo los pasos: entre paso y paso
   van gap + flecha (22px) + gap ≈ 67px. Con `--cols * 265px` cuatro pasos
   pedían 1081px y solo cabían 1060, así que el cuarto caía a una segunda fila
   (el 3+1 que se veía). Con tres pasos el resultado es el mismo de antes
   (~796px), así que ningún sitio ya publicado cambia. */
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 1.4rem; flex-wrap: wrap;
  max-width: min(100%, calc(var(--cols, 4) * 220px + (var(--cols, 4) - 1) * 68px)); margin-inline: auto }
.step { text-align: center; max-width: 220px }
/* Cuatro pasos con sus flechas piden ~1081px. Entre 861 y 1150px el contenedor
   no da para tanto y el cuarto caía solo a una segunda fila (3+1, que se lee
   como un fallo). En ese tramo se reparten de dos en dos. Solo afecta a las
   rejillas de cuatro: una de tres sigue cabiendo entera. */
@media (min-width: 861px) and (max-width: 1150px) {
  .steps-cols-4 { max-width: calc(2 * 220px + 2.8rem) }
  /* Las flechas se esconden aquí a propósito: dejarlas hacía que la que sigue
     al segundo paso se fuera sola a la fila siguiente y el reparto salía
     2+1+1 con flechas sueltas. Entre dos columnas la flecha horizontal
     tampoco significa nada. */
  .steps-cols-4 .step-arrow { display: none }
}
.step-icon-wrap { position: relative; width: 76px; height: 76px; margin: 0 auto 1.1rem }
.step-icon {
  width: 76px; height: 76px; display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface)); color: var(--c-primary-text, var(--c-primary));
}
.step-icon svg { width: 30px; height: 30px }
/* Si no hay ícono elegido, el número queda centrado y más grande en el círculo */
.step-icon-wrap:not(:has(.step-icon)) .step-num {
  position: static; width: 76px; height: 76px; border-radius: 50%; font-size: 1.4rem;
  background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface)); color: var(--c-primary-text, var(--c-primary));
}
.step-num {
  position: absolute; bottom: -4px; right: -4px; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-primary-ink, #fff); border-radius: 50%; font-size: .78rem; font-weight: 700;
  border: 2px solid var(--c-surface);
}
.step h3 { margin-bottom: .35rem; font-size: 1.1rem }
.step p { color: var(--c-muted); font-size: .92rem }
.step-arrow { flex-shrink: 0; align-self: center; margin-top: 38px; color: var(--c-border) }
/* 900 y no 720: entre esos dos anchos solo entran dos pasos por fila, así que
   un número impar dejaba el último solo. Apilado se lee mejor una secuencia. */
@media (max-width: 900px) {
  .steps { flex-direction: column; align-items: center; max-width: none }
  .step-arrow { transform: rotate(90deg); margin: -.2rem 0 }

}

/* ── Tarjetas (servicios / blog) ─────────────────────────── */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem }
.card {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.8rem; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg) }
.card h3 { margin-bottom: .5rem }
.card h3 a { color: inherit }
.card-icon { font-size: 2rem; margin-bottom: 1rem }
.card-price { margin-top: 1rem; font-weight: 700; color: var(--c-primary-text, var(--c-primary)) }
.card-service { padding: 0; overflow: hidden; display: flex; flex-direction: column }
.card-service .card-photo { display: block; width: 100%; overflow: hidden }
/* El recorte va en la imagen: aspect-ratio + object-fit ignoran la
   proporción del archivo original (vertical u horizontal, da igual) */
.card-service .card-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0;
  transition: transform .3s ease }
.card-service:hover .card-photo img { transform: scale(1.04) }
.card-service .card-body { padding: 1.5rem 1.8rem 1.8rem; display: flex; flex-direction: column; flex: 1 }
.card-more { margin-top: auto; padding-top: 1rem; font-weight: 650 }
.card-more a::after { content: " →"; transition: margin .15s }
.card-more a:hover::after { margin-left: 4px }
.card-cover { border-radius: var(--radius-sm); margin-bottom: 1.2rem; aspect-ratio: 16/9; object-fit: cover }
.card time { display: block; margin-top: .9rem; font-size: .8rem; color: var(--c-muted) }
/* Blog: filtro de categorías + chip */
.blog-cats { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem }
.blog-cats a { padding: .4rem 1rem; border-radius: 999px; border: 1px solid var(--c-border); font-size: .9rem; color: var(--c-ink); opacity: .82 }
.blog-cats a:hover { border-color: var(--c-primary-text, var(--c-primary)); color: var(--c-primary-text, var(--c-primary)); opacity: 1 }
.blog-cats a.on { background: var(--c-primary); color: var(--c-primary-ink, #fff); border-color: transparent; opacity: 1 }
.blog-chip { display: inline-block; font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
  color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface)); padding: .2rem .7rem; border-radius: 999px; margin-bottom: .6rem }
.article-head .blog-chip { margin-bottom: 1rem }

/* ── Features ────────────────────────────────────────────── */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2.2rem }
.feature { text-align: center }
.feature-icon {
  width: 64px; height: 64px; margin: 0 auto 1.1rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface));
  color: var(--c-primary-text, var(--c-primary)); border-radius: 20px;
}
.feature-icon svg { width: 28px; height: 28px }
.feature h3 { margin-bottom: .4rem }
.feature-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem }

/* ── Bloque de precios (pricing) ── */
.pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; align-items: stretch }
.price-card { position: relative; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 2.2rem 1.5rem;
  text-align: center; background: var(--c-surface); display: flex; flex-direction: column; gap: .7rem }
.price-card.featured { border-color: var(--c-primary-text, var(--c-primary)); border-width: 2px; box-shadow: var(--shadow-lg) }
.price-badge { position: absolute; top: -.7rem; left: 50%; transform: translateX(-50%); background: var(--c-primary);
  color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .8rem; border-radius: 999px }
.price-card h3 { font-size: 1.15rem; margin: 0 }
.price-amt { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; color: var(--c-primary-text, var(--c-primary)); line-height: 1 }
.price-card p { color: var(--c-muted); font-size: .92rem; line-height: 1.5; flex: 1; margin: 0 }
.price-card .btn { justify-content: center; margin-top: .4rem }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq-list { display: grid; gap: .8rem }
.faq-item {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm); padding: 1.1rem 1.4rem;
}
.faq-item summary {
  cursor: pointer; font-weight: 650; color: var(--c-ink); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none }
.faq-item summary::after { content: '+'; font-size: 1.4rem; color: var(--c-primary-text, var(--c-primary)); transition: transform .2s }
.faq-item[open] summary::after { transform: rotate(45deg) }
.faq-item p { margin-top: .8rem; padding-right: 2rem }

/* ── CTA banner ──────────────────────────────────────────── */
/* Antes era un degradado de marca fuerte de esquina a esquina con un H2
   casi a tamaño de hero (hasta 3.6rem) — se ve "gigante" y grita más de lo
   que un CTA de cierre de página necesita. Ahora es un fondo mucho más
   tenue (superficie clara + grilla punteada + un par de manchas de color
   muy suaves, mismo lenguaje que el fondo del hero "vitrina") y el título
   baja a un tamaño de H3 con algo de aire responsive, no de titular. */
.cta-banner {
  background: var(--c-surface-alt);
  color: var(--c-ink); text-align: center; border-radius: var(--radius);
  padding: clamp(3rem, 7vw, 5rem) 2rem; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-border) 60%, transparent) 1px, transparent 1px) 0 0/42px 42px,
    linear-gradient(180deg, color-mix(in srgb, var(--c-border) 60%, transparent) 1px, transparent 1px) 0 0/42px 42px,
    radial-gradient(48vw 34vw at 12% 15%, color-mix(in srgb, var(--c-primary) 13%, transparent), transparent 62%),
    radial-gradient(42vw 34vw at 88% 85%, color-mix(in srgb, var(--c-accent) 13%, transparent), transparent 62%);
  -webkit-mask-image: radial-gradient(120% 130% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 130% at 50% 50%, #000 55%, transparent 100%);
}
.cta-banner > * { position: relative }
.cta-banner h2 { color: var(--c-ink); max-width: 42ch; margin: 0 auto .7rem; font-size: clamp(1.4rem, 2.6vw, 1.9rem); line-height: 1.2; letter-spacing: -.01em }
.cta-banner p { color: var(--c-body); font-size: 1.05rem; max-width: 52ch; margin: 0 auto 1.8rem }
.cta-banner .btn { font-size: 1.05rem; padding: 1rem 2.4rem }

/* ── Contacto ────────────────────────────────────────────── */
.contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 3rem; align-items: center }
.contact-logo { max-width: 160px; max-height: 64px; object-fit: contain; margin-bottom: 1rem }
.contact-side .lead { margin-top: .8rem }
.contact-info { list-style: none; margin-top: 1.5rem; display: grid; gap: .7rem }
.contact-info li { display: flex; align-items: center; gap: .55rem }
.ci-icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--c-primary-text, var(--c-primary)) }
.contact-form { display: grid; gap: .4rem; background: var(--c-surface); padding: 2rem;
  border-radius: var(--radius); border: 1px solid var(--c-border); box-shadow: var(--shadow) }
.contact-form label:not(.consent) { font-size: .85rem; font-weight: 600; color: var(--c-ink); margin-top: .6rem }
.contact-form input, .contact-form textarea {
  padding: .7rem .9rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font: inherit; background: var(--c-surface-alt);
}
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--c-primary); border-color: transparent }
.contact-form .btn { margin-top: 1.2rem; justify-self: start }
.form-notice { background: #ecfdf5; color: #047857; padding: 1rem 1.3rem; border-radius: var(--radius-sm); font-weight: 550; display: flex; align-items: center; gap: .5rem }
.fn-icon { width: 19px; height: 19px; flex-shrink: 0 }
/* Casilla de consentimiento (tratamiento de datos) */
.consent { display: flex !important; align-items: flex-start; gap: .6rem; margin-top: 1rem !important;
  font-size: .85rem; font-weight: 400 !important; color: var(--c-muted); line-height: 1.45; cursor: pointer }
.consent input[type=checkbox] {
  width: 16px !important; height: 16px !important; padding: 0 !important;
  margin: .18rem 0 0 !important; flex-shrink: 0; accent-color: var(--c-primary-text, var(--c-primary));
}
.consent a { color: var(--c-primary-text, var(--c-primary)); text-decoration: underline }
.form-error { background: #fef2f2; color: #b91c1c; margin-bottom: 1rem }

/* ── Bloques de texto ────────────────────────────────────── */
.text-block h2 { margin-bottom: 1.2rem; text-align: center }  /* aire entre el título y el primer párrafo */
/* Ícono opcional sobre el título — evita que secciones solo-texto (ej. "Cómo
   trabajamos") se vean planas cuando el bloque no lleva imagen */
.text-icon {
  width: 68px; height: 68px; margin: 0 auto 1.3rem; display: grid; place-items: center;
  background: color-mix(in srgb, var(--c-accent) 16%, var(--c-surface));
  color: var(--c-primary-text, var(--c-primary)); border-radius: 22px;
}
.text-icon svg { width: 30px; height: 30px }
/* Separación entre párrafos consecutivos del bloque: mayor que la interlínea
   (1.65em) para que al terminar un párrafo se note el salto */
.text-block .prose + .prose { margin-top: 1.75em }
/* Variante con imagen: columna texto (40%) + columna foto (60%), en vez de
   solo texto centrado — evita que las secciones "about"/"cómo trabajamos"
   se vean vacías/genéricas. La columna de texto se ESTIRA (align-items:
   stretch, no center) para quedar exactamente del mismo alto que la foto —
   antes quedaba centrada dentro de esa altura, con aire de sobra arriba y
   abajo si el texto era corto; ahora .text-split-copy es un flex column que
   centra su contenido DENTRO de esa altura ya igualada, así se ve más viva
   y no como un bloque flotando en medio de un hueco. */
.text-split-grid { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(2.5rem, 6vw, 4.5rem); align-items: stretch }
.text-split-imgleft { grid-template-columns: 3fr 2fr }
.text-split-imgleft .text-split-media { order: -1 }
.text-block-split h2 { text-align: left; margin-bottom: 1.1rem }
.text-split-copy { display: flex; flex-direction: column; justify-content: center }
.text-split-media { height: 100%; position: relative }
.text-split-media img {
  width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--radius) + 6px); box-shadow: var(--shadow-lg);
}
@media (max-width: 860px) {
  .text-split-grid, .text-split-imgleft { grid-template-columns: 1fr }
  /* Apilado SIEMPRE texto y luego foto, sea cual sea image_position.
     La plantilla emite la foto antes del texto cuando va a la izquierda, así
     que al apilar una sección terminaba en foto y la siguiente empezaba en
     foto: dos imágenes seguidas sin nada entre medias. Con el orden fijo se
     alterna texto-foto-texto-foto en toda la página. */
  .text-split-imgleft .text-split-copy { order: 1 }
  .text-split-imgleft .text-split-media { order: 2 }
  .text-split-copy { justify-content: flex-start }
  .text-split-media { height: auto }
}

/* ── Testimonios ─────────────────────────────────────────── */
.testimonial { margin: 0 }
.testimonial .stars { color: #f59e0b; font-size: 1.05rem; letter-spacing: 2px; margin-bottom: .8rem }
.testimonial blockquote { margin: 0 0 1rem; font-size: .98rem; color: var(--c-body) }
.testimonial figcaption strong { color: var(--c-ink) }
.testimonial .t-source { display: block; font-size: .78rem; color: var(--c-muted); margin-top: .15rem }
.t-cta { text-align: center; margin-top: 2rem }

/* ── Banner con imagen de fondo (full-bleed) ─────────────── */
.banner {
  position: relative; background-size: cover; background-position: center;
  background-color: var(--c-ink);
  padding: clamp(4rem, 10vw, 7rem) 0; color: #fff; overflow: hidden;
}
.banner-overlay { position: absolute; inset: 0 }
.banner-ov-dark .banner-overlay {
  background: linear-gradient(120deg,
    color-mix(in srgb, var(--c-ink) 82%, transparent),
    color-mix(in srgb, var(--c-primary) 55%, transparent));
}
.banner-ov-light .banner-overlay {
  background: linear-gradient(120deg, rgb(255 255 255 / .84), rgb(255 255 255 / .55));
}
.banner-ov-light { color: var(--c-ink) }
.banner-ov-light h2 { color: var(--c-ink) }
.banner-ov-light .banner-kicker { color: var(--c-accent-text, var(--c-accent)) }
.banner-ov-light .banner-text { color: var(--c-body); opacity: 1 }
.banner-ov-light .btn { background: var(--c-primary); color: var(--c-primary-ink, #fff); box-shadow: 0 10px 30px color-mix(in srgb, var(--c-primary) 35%, transparent) }
.banner-ov-light .btn:hover { background: var(--c-accent); color: var(--c-accent-ink, #fff) }
/* Sin foto de fondo: manchas de color de marca en vez de un bloque plano */
.banner-blobs {
  background-color: var(--c-surface);
  background-image:
    radial-gradient(50vw 42vw at 12% 20%, color-mix(in srgb, var(--c-primary) 30%, transparent), transparent 62%),
    radial-gradient(44vw 40vw at 88% 82%, color-mix(in srgb, var(--c-accent) 26%, transparent), transparent 62%);
  color: var(--c-ink);
}
.banner-blobs h2 { color: var(--c-ink) }
.banner-blobs .banner-kicker { color: var(--c-accent-text, var(--c-accent)) }
.banner-blobs .banner-text { color: var(--c-body); opacity: 1 }
.banner-blobs .btn { background: var(--c-primary); color: var(--c-primary-ink, #fff); box-shadow: 0 10px 30px color-mix(in srgb, var(--c-primary) 35%, transparent) }
.banner-blobs .btn:hover { background: var(--c-accent); color: var(--c-accent-ink, #fff) }
.banner-inner { position: relative; text-align: center; max-width: 720px; margin: 0 auto }
.banner.banner-left .banner-inner { text-align: left; margin: 0 }
.banner h2 { color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; margin-bottom: 1rem }
.banner-kicker { color: color-mix(in srgb, #fff 85%, var(--c-accent)) }
.banner-text { font-size: 1.15rem; opacity: .92; margin-bottom: 2.1rem; max-width: 60ch }
.banner.banner-left .banner-text { margin-left: 0 }
.banner .btn { background: #fff; color: var(--c-primary-text, var(--c-primary)); box-shadow: 0 10px 30px rgb(0 0 0 / .3) }
.banner .btn:hover { background: var(--c-accent); color: var(--c-accent-ink, #fff) }

/* ── Reservas (formulario de booking, en /reservar y en el hero embebido) ── */
.bk-wrap { max-width: 620px; margin: 0 auto }
.bk-head { text-align: center; margin-bottom: 1.6rem }
.bk-head h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: .5rem }
.bk-head p { color: var(--c-muted); font-size: .95rem }
.bk-form { display: block !important; padding: 1.8rem !important }
.bk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem }
@media (max-width: 540px) { .bk-grid { grid-template-columns: 1fr } }
.bk-grid .fld { display: flex; flex-direction: column; min-width: 0 }
.bk-grid .fld.span2 { grid-column: 1 / -1 }
.bk-form label:not(.consent) { font-size: .82rem; font-weight: 650; color: var(--c-ink); margin: 0 0 .35rem !important }
.bk-form input, .bk-form select {
  width: 100%; padding: .7rem .9rem; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font: inherit; font-size: .95rem; background: var(--c-surface-alt); color: var(--c-ink); height: 46px }
.bk-form select {
  -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center }
.bk-form input:focus, .bk-form select:focus { outline: 2px solid var(--c-primary); border-color: transparent }
.bk-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; margin-top: .1rem }
.bk-slot { position: relative }
.bk-slot input { position: absolute; opacity: 0; pointer-events: none }
.bk-slot span { display: block; text-align: center; padding: .6rem .3rem; border: 1.5px solid var(--c-border); border-radius: 10px;
  cursor: pointer; font-weight: 600; font-size: .92rem; background: var(--c-surface); transition: border-color .12s, background .12s }
.bk-slot input:checked + span { border-color: var(--c-primary-text, var(--c-primary)); background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)) }
.bk-slot span:hover { border-color: var(--c-primary-text, var(--c-primary)) }
.bk-note { color: var(--c-muted); font-size: .88rem; margin: .5rem 0 0 }
.bk-hidden { display: none !important }
.bk-form .btn { width: 100%; margin-top: 1.5rem !important; justify-self: stretch !important }
.bk-form .btn:disabled { opacity: .5; cursor: not-allowed }
/* Variante embebida en el hero: sin el encabezado bk-head, tarjeta como hero-formcol */
.hero-bookingcol .bk-form {
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.7rem !important;
}
.hero-bookingcol .bk-form h3 { font-size: 1.2rem; margin: 0 0 .3rem }
.hero-bookingcol .bk-form .sub { color: var(--c-muted); font-size: .88rem; margin: 0 0 1rem }

/* ── Mapa (SEO local) ────────────────────────────────────── */
.map-embed { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--c-border) }
.map-embed iframe { display: block; width: 100%; height: 420px; border: 0 }
@media (max-width: 860px) { .map-embed iframe { height: 300px } }

/* ── Equipo ──────────────────────────────────────────────── */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem }
.team-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 2rem 1.5rem; text-align: center; box-shadow: var(--shadow) }
.team-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 1rem }
.team-avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto 1rem; display: grid; place-items: center;
  background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)); font-family: var(--font-display); font-size: 1.8rem; font-weight: 700 }
.team-role { color: var(--c-primary-text, var(--c-primary)); font-size: .85rem; font-weight: 650; margin-top: .2rem }
.team-bio { font-size: .88rem; margin-top: .6rem }

/* ── Prose (blog) ────────────────────────────────────────── */
.prose { font-size: 1.05rem }
/* Salto tras párrafo (1.75em) > interlínea (1.65em): fin de párrafo visible */
.prose p, .prose ul, .prose ol { margin-bottom: 1.75em }
.prose h2, .prose h3 { margin: 2rem 0 .8rem }
.prose ul, .prose ol { padding-left: 1.4rem }
.article-head { text-align: center; margin-bottom: 2.5rem }
.article-meta { color: var(--c-muted); font-size: .9rem; margin-top: .8rem }
.article-cover { border-radius: var(--radius); margin-bottom: 2.5rem; box-shadow: var(--shadow-lg);
  width: 100%; aspect-ratio: 2 / 1; object-fit: cover }

/* ── Footer — común ──────────────────────────────────────── */
.site-footer { margin-top: 3rem; position: relative }
/* Ese respiro de 3rem es para cuando la última sección va sobre el fondo del
   cuerpo. Si la última trae fondo propio —contacto, banner, una sección
   teñida— la franja en blanco entre ese fondo y el pie se lee como un hueco
   olvidado, no como aire. Pasó en la landing de luces, que cierra con el
   formulario sobre `section-alt`. El `:has()` mira tanto la sección suelta
   como la envuelta en su ancla (`div.fk-anchor`). */
main:has(> :is(.section-alt, .section-tint, .section-solid, .banner):last-child) + .site-footer,
main:has(> :last-child > :is(.section-alt, .section-tint, .section-solid, .banner):last-child) + .site-footer {
  margin-top: 0;
}
.site-footer a { transition: color .15s }
.footer-title { font-family: var(--font-display); font-weight: 700; color: #fff; margin-bottom: 1rem; font-size: .95rem }
.footer-bottom { padding: 1.3rem 1.25rem; font-size: .8rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center }
.footer-bottom .fb-left p { margin: 0 } .footer-bottom .fb-credit { margin-top: .2rem !important }
.footer-bottom .fb-credit a { font-weight: 700; text-decoration: underline }
.footer-legal a { margin-left: 1.2rem } .footer-legal a:first-child { margin-left: 0 }
.footer-legal a { text-decoration: underline }
.footer-review { font-weight: 650; display: inline-flex; align-items: center; gap: .35rem }
.fr-star { width: 15px; height: 15px; flex-shrink: 0; fill: currentColor }

/* ── Footer "centered": dirección centrada sobre blanco + franja de acento ── */
.ftr-centered { background: var(--c-surface); color: var(--c-ink) }
.ftr-centered .ftr-c-top { text-align: center; padding: 3rem 1.25rem 2.4rem; display: flex; flex-direction: column; align-items: center; gap: .8rem }
.ftr-centered .ftr-c-logo { height: 46px; width: auto }
.ftr-centered .ftr-c-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem }
.ftr-centered .ftr-c-addr { font-size: 1.05rem; color: var(--c-ink) }
.ftr-centered .footer-review { color: var(--c-primary-text, var(--c-primary)) }
.ftr-centered .ftr-c-links { display: flex; gap: 1.4rem; flex-wrap: wrap; justify-content: center }
.ftr-centered .ftr-c-links a { color: var(--c-ink); opacity: .8; font-weight: 550 } .ftr-centered .ftr-c-links a:hover { opacity: 1; color: var(--c-primary-text, var(--c-primary)) }
.ftr-centered .footer-social a { color: var(--c-ink) }
.ftr-centered .footer-bottom-wrap { background: var(--c-accent) }
.ftr-centered .footer-bottom { color: color-mix(in srgb, var(--c-accent-ink, #fff) 82%, transparent) }
.ftr-centered .footer-bottom a { color: var(--c-accent-ink, #fff) }

/* ── Footer "rich": color de marca, franja de contacto, 4 columnas ── */
.ftr-rich {
  background: var(--c-footer-bg, color-mix(in srgb, var(--c-primary) 78%, #0a0e1a));
  color: color-mix(in srgb, var(--c-primary-ink, #fff) 82%, transparent);
  padding-top: 4.2rem; /* aire para la franja, que va DENTRO del footer */
}
.ftr-rich a { color: color-mix(in srgb, var(--c-primary-ink, #fff) 82%, transparent) }
.ftr-rich a:hover { color: var(--c-primary-ink, #fff) }
/* Franja de contacto: dentro del footer oscuro (sin solaparse con la sección clara) */
.footer-contact {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem 2rem;
  background: color-mix(in srgb, #fff 9%, transparent);
  border: 1px solid color-mix(in srgb, #fff 14%, transparent);
  border-radius: calc(var(--radius) + 6px); padding: 1.8rem 2.2rem; margin-bottom: 3.2rem;
}
.fc-item { display: flex; align-items: center; gap: 1rem; color: color-mix(in srgb, #fff 72%, transparent) }
.fc-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center;
  background: color-mix(in srgb, #fff 15%, transparent); color: #fff; flex-shrink: 0 }
.fc-tx { display: flex; flex-direction: column; line-height: 1.3; min-width: 0 }
.fc-tx small { font-size: .75rem; color: color-mix(in srgb, #fff 68%, transparent); margin-bottom: .1rem }
.fc-tx strong { color: #fff; font-size: .95rem; font-weight: 650; overflow-wrap: anywhere }
.ftr-rich .footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1.3fr; gap: 2.5rem; padding: 0 1.25rem 3.5rem }
.footer-logo { height: 52px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); opacity: .95 }
.ftr-rich .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--c-primary-ink, #fff); margin-bottom: 1rem }
.footer-blurb { font-size: .9rem; line-height: 1.6; margin-bottom: 1.2rem; max-width: 34ch }
.footer-social { display: flex; gap: .55rem }
.footer-social a { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, #fff 10%, transparent); color: #fff }
.footer-social a svg, .footer-social a img { width: 22px; height: 22px }
.footer-social a:hover { background: color-mix(in srgb, var(--c-accent) 85%, #000); color: #fff }
.footer-col { display: flex; flex-direction: column; gap: .5rem; font-size: .9rem }
.footer-col .fcol-line { color: color-mix(in srgb, #fff 65%, transparent); margin-bottom: .2rem }
.ftr-rich .footer-review { color: var(--c-accent-text, var(--c-accent)) !important; margin-top: .3rem }
.footer-bottom-wrap { border-top: 1px solid color-mix(in srgb, #fff 12%, transparent) }
.ftr-rich .footer-bottom p { color: color-mix(in srgb, var(--c-primary-ink, #fff) 80%, transparent) }

/* ── Footer "classic": oscuro neutro, 3 columnas ── */
.ftr-classic { background: var(--c-ink); color: #cbd2e0 }
.ftr-classic a { color: #cbd2e0 } .ftr-classic a:hover { color: #fff }
.ftr-classic .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem }
.ftr-classic .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: #fff }
.ftr-classic .footer-tagline { opacity: .7; margin-top: .4rem; font-size: .9rem }
.ftr-classic .footer-title { text-transform: uppercase; letter-spacing: .08em; font-size: .85rem }
.ftr-classic p { font-size: .92rem; margin-bottom: .3rem }
.ftr-classic .footer-bottom { border-top: 1px solid rgb(255 255 255 / .1); opacity: .7 }
.ftr-classic .footer-review { color: #cbd2e0 }

/* ── Header "variety": logo + nav centrado + botón oscuro ── */
.nav-wrap--variety { display: flex; align-items: center }
.nav-wrap--variety .brand { flex: 1 }
.site-nav--center { flex: 0 0 auto; margin: 0 auto; gap: 2.2rem }
.hdr-variety .variety-actions { flex: 1; display: flex; justify-content: flex-end }
.hdr-variety .site-nav > a:not(.btn):not(.btn-dark), .hdr-variety .nav-drop-btn {
  color: var(--c-ink); font-weight: 550; font-size: .95rem; opacity: .85; position: relative; padding-bottom: 3px;
  transition: opacity .15s, color .15s;
}
.hdr-variety .site-nav > a:not(.btn):not(.btn-dark):hover, .hdr-variety .site-nav > a:not(.btn):not(.btn-dark).active, .hdr-variety .nav-drop-btn:hover { opacity: 1; color: var(--c-primary-text, var(--c-primary)) }
.hdr-variety .site-nav > a:not(.btn):not(.btn-dark)::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--c-ink);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.hdr-variety .site-nav > a:not(.btn):not(.btn-dark):hover::after, .hdr-variety .site-nav > a:not(.btn):not(.btn-dark).active::after { transform: scaleX(1) }
.btn-dark {
  display: inline-block; background: var(--c-ink); color: #fff; border-radius: 999px;
  padding: .7rem 1.6rem; font-weight: 650; font-size: .92rem; transition: transform .18s, background .18s;
}
.btn-dark:hover { transform: translateY(-2px); background: var(--c-primary) }
/* Duplicado de .variety-actions solo para el menú móvil (ver header-variety.php) */
.nav-mobile-only { display: none }

/* ── Footer "bold": encabezado grande + columnas (fondo claro) ── */
.ftr-bold { background: var(--c-surface-alt); color: var(--c-body); border-top: 1px solid var(--c-border); padding-top: 4rem }
.ftr-bold a { color: var(--c-ink) } .ftr-bold a:hover { color: var(--c-primary-text, var(--c-primary)) }
.footer-bold-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2.5rem; padding: 0 1.25rem 3rem }
.fb-heading h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  color: var(--c-ink); line-height: 1.1; max-width: 12ch }
.ftr-bold .footer-title { color: var(--c-ink); text-transform: none; letter-spacing: 0 }
.fb-col { display: flex; flex-direction: column; gap: .35rem }
.fb-line { color: var(--c-body); font-size: .95rem }
.fb-email { text-decoration: underline; text-underline-offset: 3px; font-size: .95rem; margin-bottom: .3rem }
.fb-phone { font-size: 1.05rem; font-weight: 650; color: var(--c-ink) !important }
.ftr-bold .footer-review { color: var(--c-primary-text, var(--c-primary)) !important; margin-top: .3rem }
.fb-social { display: flex; gap: .6rem; margin-top: 1.2rem }
.fb-social a { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--c-border);
  display: grid; place-items: center; color: var(--c-ink); transition: background .15s, border-color .15s }
.fb-social a:hover { background: var(--c-primary); border-color: var(--c-primary-text, var(--c-primary)); color: var(--c-primary-ink, #fff) }
.footer-bold-bottom { border-top: 1px solid var(--c-border); padding: 1.5rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap }
.fb-nav { display: flex; gap: 1.6rem; flex-wrap: wrap }
.fb-nav a { font-size: .9rem; font-weight: 550 }
.fb-copy { color: var(--c-muted); font-size: .82rem }

/* ── Banner de borrador (solo agencia) ───────────────────── */
.draft-banner {
  background: #f59e0b; color: #451a03; text-align: center; font-weight: 650;
  font-size: .85rem; padding: .5rem 1rem; position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.draft-banner ~ .site-header { top: 34px }
.db-icon { width: 16px; height: 16px; flex-shrink: 0 }

/* ── Dropdown de servicios ───────────────────────────────── */
/* El contenedor y el botón deben formar CAJA como los demás enlaces del menú:
   el botón calculaba display:inline y su padding vertical no levantaba la
   línea, así que "Servicios" quedaba desalineado respecto a sus hermanos. */
.nav-dropdown { position: relative; display: flex; align-items: center }
.nav-drop-btn {
  background: none; border: 0; cursor: pointer; font: inherit; font-weight: 550;
  font-size: .95rem; color: var(--c-ink); opacity: .8; padding: 0;
  display: inline-flex; align-items: center; gap: .25rem; text-decoration: none;
}
.nav-drop-btn:hover { opacity: 1; color: var(--c-primary-text, var(--c-primary)) }
.nav-drop-menu {
  display: none; position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%);
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .5rem; min-width: 230px; z-index: 40;
}
/* Puente invisible sobre el gap de 12px: sin él, el hover se pierde al
   mover el cursor del botón hacia el submenú y este se cierra. */
.nav-drop-menu::before {
  content: ""; position: absolute; top: -14px; left: -12px; right: -12px; height: 16px;
}
.nav-dropdown:hover .nav-drop-menu, .nav-dropdown:focus-within .nav-drop-menu, .nav-dropdown.open .nav-drop-menu { display: block }
.nav-drop-menu a {
  display: block; padding: .55rem .9rem; border-radius: 8px; color: var(--c-ink);
  font-size: .92rem; font-weight: 500;
}
.nav-drop-menu a:hover { background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)) }

/* ── Botones flotantes WhatsApp / llamada (config. por cliente) ── */
.float-btns {
  position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 70;
  display: flex; flex-direction: column; gap: .8rem;
}
.float-btn {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; box-shadow: 0 8px 24px rgb(0 0 0 / .25);
  transition: transform .18s ease;
}
.float-btn:hover { transform: scale(1.08) }
/* Burbuja de texto junto al botón de llamada flotante — para que se
   entienda qué hace el botón sin depender solo del ícono de teléfono. */
.has-tip { position: relative }
.float-tip {
  position: absolute; right: calc(100% + .7rem); top: 50%; translate: 0 -50%;
  background: var(--c-ink); color: #fff; font-size: .82rem; font-weight: 600;
  white-space: nowrap; padding: .5rem .9rem; border-radius: 999px;
  box-shadow: 0 6px 18px rgb(0 0 0 / .18); pointer-events: none;
}
.float-tip::after {
  content: ""; position: absolute; left: 100%; top: 50%; translate: 0 -50%;
  border: 6px solid transparent; border-left-color: var(--c-ink);
}
@media (max-width: 640px) { .float-tip { display: none } }
.float-wa { background: #25d366 }
/* El color del botón de llamar es tokenizable: en algunos sitios el primario
   se confunde con la cabecera y el botón deja de resaltar. Sin el token, el
   primario de siempre. */
.float-call { background: var(--c-floatcall-bg, var(--c-primary)) }
@media (max-width: 860px) { .float-btns { right: .9rem; bottom: .9rem } }

/* ── Badge de imagen placeholder (solo agencia) ──────────── */
.hero-media { position: relative }
.ph-badge {
  position: absolute; top: .8rem; left: .8rem; background: rgb(0 0 0 / .65); color: #fff;
  font-size: .72rem; font-weight: 600; padding: .3rem .7rem; border-radius: 999px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.ph-icon { width: 14px; height: 14px; flex-shrink: 0 }

/* ── Editor inline ───────────────────────────────────────── */
.edit-toolbar {
  position: sticky; top: 0; z-index: 80; display: flex; align-items: center; gap: 1rem;
  background: #14161d; color: #e8eaf0; padding: .55rem 1.2rem; font-size: .85rem;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.et-brand { font-weight: 700; display: inline-flex; align-items: center; gap: .4rem }
.et-icon { width: 15px; height: 15px; flex-shrink: 0 }
.et-status { flex: 1; color: #8b91a3 }
.et-status.ok { color: #4ade80 } .et-status.err { color: #ff6b6b } .et-status.busy { color: #fbbf24 }
.et-actions { display: flex; gap: .8rem; align-items: center }
.et-actions button, .et-actions a {
  background: #2a2f3d; color: #e8eaf0; border: 0; border-radius: 8px; padding: .4rem .9rem;
  font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: none;
}
.et-actions button:hover, .et-actions a:hover { background: #3a4054 }
.fe { cursor: text; border-radius: 4px; transition: box-shadow .15s; min-width: 1ch; display: inline-block }
.fe:hover { box-shadow: 0 0 0 2px color-mix(in srgb, var(--c-primary) 45%, transparent) }
.fe:focus { outline: none; box-shadow: 0 0 0 2px var(--c-primary); background: color-mix(in srgb, var(--c-primary) 6%, transparent) }
.et-img-btn {
  position: absolute; bottom: .8rem; right: .8rem; z-index: 5;
  background: rgb(0 0 0 / .7); color: #fff; border: 0; border-radius: 999px;
  padding: .45rem 1rem; font-size: .8rem; font-weight: 600; cursor: pointer;
}
.et-img-btn:hover { background: rgb(0 0 0 / .85) }

/* La tarjeta de servicio en edición: contenedor del botón "Cambiar foto".
   Su foto vive en la tabla `services`, no en los bloques de la página. */
.fe-service-photo { position: relative; display: block }

/* Anclaje de "Cambiar foto" en el hero a sangre: su foto es el background del
   <section>, no una columna, así que este cuadro va suelto y no ocupa sitio. */
.fe-bold-photo { position: absolute; top: 1rem; left: 1rem; z-index: 8; width: auto; height: auto }
.fe-bold-photo .et-img-btn { position: static; bottom: auto; right: auto }



/* ── Editor: texto enriquecido (negrita/cursiva/enlace) ──── */
.et-rich-toolbar {
  position: absolute; z-index: 90; display: none; gap: .25rem;
  background: #14161d; border-radius: 8px; padding: .3rem; box-shadow: 0 6px 18px rgb(0 0 0 / .3);
}
.et-rich-toolbar button {
  background: #2a2f3d; color: #e8eaf0; border: 0; border-radius: 5px; width: 28px; height: 28px;
  font-size: .8rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.et-rich-toolbar button:hover { background: #3a4054 }

/* ── Editor: reordenar bloques ────────────────────────────── */
.fe-block-wrap { position: relative }
.fe-block-controls {
  position: absolute; top: .7rem; right: .7rem; z-index: 20;
  display: flex; flex-direction: column; gap: .3rem;
}
.fe-move {
  background: rgb(0 0 0 / .7); color: #fff; border: 0; border-radius: 999px;
  width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.fe-move:hover { background: rgb(0 0 0 / .85) }
.fe-move:disabled { opacity: .3; cursor: default }
.fe-move-icon { width: 16px; height: 16px }

/* ── Editor: estilo de bloque (blanco/tinte/sólido) ──────── */
.fe-style-wrap { position: relative }
.fe-style-menu {
  display: none; position: absolute; top: 0; right: 36px; z-index: 25;
  background: #14161d; border-radius: 10px; padding: .4rem; box-shadow: 0 6px 18px rgb(0 0 0 / .3);
  gap: .35rem; align-items: center;
}
.fe-style-menu.open { display: flex }

/* ── Fondo de imagen/vídeo por bloque ────────────────────────
   El medio va detrás y la <section> de dentro se vuelve transparente:
   si conservara su color de fondo, taparía el vídeo o la foto. */
.fk-bg { position: relative; isolation: isolate }
.fk-bg > .fk-bg-media {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.fk-bg > .fk-bg-veil { position: absolute; inset: 0; background: #0b1220; z-index: 1 }
.fk-bg > .fk-bg-content { position: relative; z-index: 2 }
/* El bloque de dentro no debe pintar su propio fondo encima del medio, y su
   texto pasa a leerse sobre oscuro (mismas variables ancla que section-solid). */
.fk-bg .section, .fk-bg .section-tint, .fk-bg .section-solid { background: transparent }
.fk-bg .fk-bg-content {
  --c-ink: #fff;
  --c-body: rgba(255,255,255,.88);
  --c-muted: rgba(255,255,255,.7);
  color: var(--c-body);
}
/* Las tarjetas anidadas conservan su fondo claro y su texto oscuro. */
.fk-bg .card, .fk-bg .price-card, .fk-bg .team-card, .fk-bg .faq-item {
  --c-ink: var(--c-ink-base); --c-body: var(--c-body-base); --c-muted: var(--c-muted-base);
  color: var(--c-body-base);
}
/* Accesibilidad: quien pide menos movimiento no ve el vídeo reproducirse. */
@media (prefers-reduced-motion: reduce) {
  .fk-bg > video.fk-bg-media { display: none }
  .fk-bg[data-fk-bg="video"] { background: #0b1220 }
}

/* Controles del fondo en el modo edición */
.fe-bg-wrap { position: relative }
.fe-bg-btn.has-bg { color: var(--c-primary-text, var(--c-primary)) }
.fe-bg-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  background: #fff; border: 1px solid var(--c-border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15,23,42,.16); padding: .8rem; width: 232px; text-align: left;
}
.fe-bg-menu.open { display: block }
.fe-bg-title { margin: 0 0 .5rem; font-size: .82rem; font-weight: 700; color: #0f172a }
.fe-bg-file {
  display: block; font-size: .8rem; color: #0f172a; background: #f1f5f9;
  border-radius: 8px; padding: .45rem .6rem; margin-bottom: .4rem; cursor: pointer;
}
.fe-bg-file:hover { background: #e2e8f0 }
.fe-bg-file input { display: none }
.fe-bg-dim { display: block; font-size: .78rem; color: #475569; margin: .5rem 0 .2rem }
.fe-bg-dim input { width: 100%; margin-top: .25rem }
.fe-bg-clear {
  width: 100%; margin-top: .5rem; padding: .4rem; font-size: .78rem; cursor: pointer;
  background: none; border: 1px solid var(--c-border); border-radius: 8px; color: #b91c1c;
}
.fe-bg-hint { margin: .5rem 0 0; font-size: .7rem; color: #94a3b8; line-height: 1.35 }

.fe-style-opt {
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer;
  border: 2px solid rgb(255 255 255 / .25); box-shadow: inset 0 0 0 2px rgb(0 0 0 / .15);
}
.fe-style-opt.active { border-color: #fff }
.fe-style-opt-default { background: #fff }
.fe-style-opt-tint { background: color-mix(in srgb, var(--c-accent) 22%, #fff) }
.fe-style-opt-solid { background: var(--c-accent) }

/* ── Reveal on scroll (con stagger en grillas) ───────────── */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.reveal.in { opacity: 1; transform: none }
.cards .reveal:nth-child(2), .features .reveal:nth-child(2), .team-grid .reveal:nth-child(2) { transition-delay: .1s }
.cards .reveal:nth-child(3), .features .reveal:nth-child(3), .team-grid .reveal:nth-child(3) { transition-delay: .2s }
.cards .reveal:nth-child(4) { transition-delay: .3s }
.cards .reveal:nth-child(5) { transition-delay: .4s }

/* ── Microinteracciones ──────────────────────────────────── */
/* Header: sombra al hacer scroll (la página "responde") */
.header-main.scrolled { box-shadow: 0 6px 24px rgb(17 24 39 / .08) }

/* Hero: flotación suave de la imagen */
@keyframes floaty { 0%, 100% { translate: 0 0 } 50% { translate: 0 -9px } }
.hero-media img { animation: floaty 7s ease-in-out infinite }

/* Botón flotante: anillo de pulso que invita al contacto */
.float-btn { position: relative }
@keyframes pulse-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 45%, transparent) }
  70%, 100% { box-shadow: 0 0 0 16px transparent }
}
.float-wa { color: #25d366 }
.float-call { color: var(--c-floatcall-bg, var(--c-primary-text, var(--c-primary))) }
.float-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: pulse-ring 3.5s ease-out infinite;
}
.float-btn svg { color: #fff }
/* El botón de llamar se pinta con el primario, así que su icono toma la
   tinta que se lea encima; el de WhatsApp tiene verde propio y sigue igual. */
.float-call svg { color: var(--c-floatcall-ink, var(--c-primary-ink, #fff)) }

/* FAQ: la respuesta entra con suavidad */
@keyframes fade-slide { from { opacity: 0; translate: 0 -6px } to { opacity: 1; translate: 0 0 } }
.faq-item[open] p { animation: fade-slide .3s ease }

/* Botones: sensación táctil al presionar */
.btn:active, button:active { transform: translateY(0) scale(.97) }

/* Nota: las animaciones corren siempre, sin depender de la preferencia
   "reducir movimiento" del sistema (decisión de la agencia). */

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 980px) {
  .header-cta .cta-tx { display: none }
  .header-cta { padding: .4rem }
}
@media (max-width: 860px) {
  .hero-inner, .contact-grid { grid-template-columns: 1fr }
  .ftr-rich .footer-grid { grid-template-columns: 1fr 1fr; gap: 1.8rem }
  .ftr-classic .footer-grid { grid-template-columns: 1fr; gap: 1.8rem }
  .footer-bold-grid { grid-template-columns: 1fr; gap: 1.8rem }
  .footer-about { grid-column: 1 / -1 }
  /* .variety-actions ya NO se oculta en móvil: antes se ocultaba y el parcial
     duplicaba su botón dentro del menú, con lo que el CTA existía dos veces en
     el DOM. Ahora el único botón se queda visible junto a la hamburguesa, que
     además es donde conviene que esté en un móvil. */
  .site-nav--center { margin: 0 }
  /* En el marcado la hamburguesa va antes que el CTA (orden lógico para
     lectores de pantalla). Visualmente conviene al revés: logo · CTA · menú. */
  .variety-actions { flex: 0 0 auto; margin-left: auto; order: 2 }
  .variety-actions .btn { padding: .45rem .95rem; font-size: .88rem }
  .nav-wrap--variety .nav-toggle { order: 3; margin-left: .7rem }
  .nav-wrap { height: 66px }
  .nav-toggle { display: flex }
  .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg) }
  .nav-toggle.open span:nth-child(2) { opacity: 0 }
  .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) }
  /* La píldora de llamar es ahora el CTA principal: en móvil se queda,
     encogida al icono (regla de 980px), en vez de desaparecer. */
  .site-nav {
    display: none; position: absolute; top: 66px; left: 0; right: 0; margin: 0;
    flex-direction: column; align-items: stretch; background: var(--c-surface);
    padding: .75rem .85rem 1rem;
    border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-lg);
    gap: .15rem;   /* el aire lo pone el padding del enlace, no el hueco */
    max-height: calc(100vh - 66px); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-nav.open { display: flex }
  /* Los enlaces del menú móvil son objetivos táctiles: 44px de alto mínimo
     (guía de accesibilidad) y padding propio. Antes heredaban el padding de
     escritorio y quedaban en 3px de separación, apretados y difíciles de
     acertar con el dedo. */
  .site-nav > a:not(.btn):not(.btn-dark), .nav-drop-btn {
    text-align: left; display: flex; align-items: center;
    min-height: 44px; padding: .6rem .8rem; border-radius: 10px;
    font-size: .98rem; opacity: 1;
  }
  .site-nav > a:not(.btn):not(.btn-dark):hover, .nav-drop-btn:hover {
    background: color-mix(in srgb, var(--c-primary) 8%, transparent);
  }
  .site-nav > a.active:not(.btn):not(.btn-dark) {
    background: var(--c-primary-soft); color: var(--c-nav-active, var(--c-primary-text, var(--c-primary))); font-weight: 650;
  }
  /* El desplegable de Servicios entra EN EL FLUJO: en absolute se quedaba
     flotando encima del resto del menú vertical, tapándolo. */
  .nav-dropdown { display: block; position: static }
  .nav-drop-btn { width: 100%; justify-content: space-between }
  .nav-drop-menu {
    /* `display: block` es imprescindible: la regla base lo deja en `none` y
       solo lo abre :hover, que en táctil no existe. Sin esto el segundo nivel
       entero —categorías y servicios— queda invisible en el móvil aunque los
       enlaces estén en el DOM. Aquí se pinta siempre, indentado y en flujo. */
    display: block;
    position: static; transform: none; left: auto; top: auto;
    border: 0; box-shadow: none; background: none;
    min-width: 0; padding: .1rem 0 .35rem .5rem;
  }
  .nav-drop-menu::before { display: none }
  .nav-drop-menu a, .nav-drop-menu .nav-drop-cat {
    min-height: 42px; display: flex; align-items: center; padding: .5rem .8rem;
  }
  /* Dirección y teléfono centrados y en su propia línea cada uno en mobile
     (en vez de apretados a la izquierda). */
  .topbar-in { flex-wrap: wrap; justify-content: center; align-content: center; min-height: 0; padding-top: .55rem; padding-bottom: .55rem; row-gap: .3rem }
  .topbar-left { width: 100%; justify-content: center; gap: .5rem 1rem; row-gap: .3rem }
  .topbar-right { width: 100%; justify-content: center }
  .tb-since { display: none }
  .nav-mobile-only { display: inline-block; margin-top: .3rem }
}
@media (max-width: 560px) {
  .ftr-rich .footer-grid { grid-template-columns: 1fr }
}

/* Rejillas equilibradas.
   `auto-fit` reparte por ancho, no por cantidad: con 6 tarjetas dejaba 4 arriba
   y 2 abajo con medio hueco vacío. El bloque calcula --cols con gridCols() para
   que la última fila quede llena; por debajo de 1000px manda el ancho mínimo. */
.features { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) }
.cards    { grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)) }
@media (max-width: 1000px) {
  .features, .cards { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
}
@media (max-width: 560px) {
  .features, .cards { grid-template-columns: 1fr }
}

/* ── Hero a sangre con formulario de agenda encima ───────────────────
   El modo "bold" pone la foto de fondo; el formulario ya no la elimina, se
   apoya sobre ella. Necesita fondo propio y sombra para leerse. */
.hero-bold .hero-inner-bold { grid-template-columns: 1fr; max-width: min(88%, 58rem) }
.hero-bold .hero-inner-bold:has(.hero-bookingcol) {
  grid-template-columns: 1.05fr .95fr;
  max-width: min(94%, 72rem);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
@media (max-width: 900px) {
  .hero-bold .hero-inner-bold:has(.hero-bookingcol) { grid-template-columns: 1fr }
}
.hero-bookingcol.on-bold .bk-form {
  background: color-mix(in srgb, var(--c-surface) 96%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 24px 70px rgb(0 0 0 / .34);
}
/* El texto del formulario NO hereda el blanco del hero: va sobre tarjeta clara. */
.hero-bookingcol.on-bold .bk-form,
.hero-bookingcol.on-bold .bk-form label,
.hero-bookingcol.on-bold .bk-form h3 { color: var(--c-ink) }

/* Tarjetas del Trust Hub cuando no hay columna de foto: bajo el texto. */
.trust-cards-copy {
  position: static; display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: 1.4rem; pointer-events: auto;
}
.trust-cards-copy .trust-card {
  background: color-mix(in srgb, var(--c-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid color-mix(in srgb, var(--c-border) 70%, transparent);
  border-radius: var(--radius-sm); padding: .6rem .9rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  box-shadow: 0 8px 24px rgb(0 0 0 / .14);
}
.trust-cards-copy .ts-label, .trust-cards-copy .ts-platform { color: var(--c-ink) }
.trust-cards-copy .ts-platform { opacity: .7; font-size: .82rem }

/* ── Cabecera sin costuras ────────────────────────────────────────────
   La línea de 1px bajo el header cortaba el diseño en seco, y encima de un
   hero con foto a sangre se veía como un error. Se quita: la separación ya la
   da la sombra que aparece al hacer scroll (.header-main.scrolled). */
.header-main { border-bottom: 0 }

/* SOLO el header flotante se superpone a la foto del hero: trae su propia
   tarjeta blanca, así que sobre la imagen sigue leyéndose sin ayuda. Los
   otros tres se quedan ARRIBA de la foto con su fondo propio — es lo que
   estaba diseñado y es lo correcto: un header transparente sobre una foto
   cualquiera no garantiza contraste, y taparlo con un velo oscuro afea la
   portada. Si algún día hace falta superponer otro estilo, la solución NO
   es un velo. */
.hdr-floating:has(~ main > .hero-bold:first-child) ~ main > .hero-bold:first-child {
  padding-top: clamp(7rem, 12vw, 9.5rem);
}

/* ── Logo de la cabecera: siempre el de color ─────────────────────────
   Ninguna cabecera deja el logo sobre la foto. Las tres primeras se quedan
   ARRIBA del hero con su fondo propio, y la flotante trae una tarjeta blanca
   donde el logo vive dentro. Así que en el header manda el logo normal, sin
   sombras ni filtros: un drop-shadow sobre un logo le ensucia el trazo.
   (La versión clara sigue emitiéndose y la usa el PIE, que sí es oscuro.) */
.site-header .logo-on-photo { display: none }
.site-header .logo-on-white { display: block }

/* ── Botones de acción de la cabecera ─────────────────────────────────
   Eran `display:block`, así que el icono y el texto no se centraban entre sí
   y el botón con icono se veía descolgado. Además iban casi pegados. Esto
   aplica a los cuatro estilos de cabecera, no solo al activo. */
.site-header .btn,
.site-header .btn-dark,
.site-header .nav-drop-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  line-height: 1;
  white-space: nowrap;
}
.site-header .btn,
.site-header .btn-dark {
  padding-block: .72rem;          /* mismo alto en todos, con o sin icono */
  min-height: 44px;               /* objetivo táctil cómodo */
}
.site-header .btn-icon,
.site-header .btn svg,
.site-header .btn-dark svg { flex: none; width: 1.05em; height: 1.05em }

/* Separación entre las acciones: antes .3rem las dejaba pegadas. */
.site-header .site-nav .btn,
.site-header .site-nav .btn-dark { margin-left: .6rem }
.site-header .header-actions { display: flex; align-items: center; gap: .6rem }
@media (max-width: 900px) {
  .site-header .site-nav .btn,
  .site-header .site-nav .btn-dark { margin-left: 0 }
}

/* Los botones que solo existen en el menú móvil deben seguir ocultos en
   escritorio: la regla de arriba les devolvía `display` y salían duplicados. */
.site-header .nav-mobile-only { display: none }
@media (max-width: 900px) {
  .site-header .nav-mobile-only { display: inline-flex; margin-top: .3rem }
}



/* El botón de enviar heredaba el borde de los campos del formulario: es un
   botón, no un campo, y ese borde lo hacía parecer un input deshabilitado. */
.contact-form .btn, .contact-form button[type=submit] { border: 0 }

/* ── Selector de día de la reserva ────────────────────────────────────
   Sustituye al <input type="date">: los días posibles se ven y se eligen de
   un clic, igual que las franjas horarias de debajo. */
.bk-days { display: flex; align-items: stretch; gap: .4rem }
.bk-days-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: .35rem; flex: 1; min-width: 0;
}
.bk-day {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem;
  padding: .5rem .2rem; min-height: 62px; cursor: pointer;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink); font: inherit; line-height: 1.1;
  transition: border-color .15s, background-color .15s, transform .12s;
}
.bk-day:hover:not(:disabled) { border-color: var(--c-primary-text, var(--c-primary)); transform: translateY(-1px) }
.bk-day.is-on {
  background: var(--c-primary); border-color: var(--c-primary-text, var(--c-primary)); color: var(--c-primary-ink, #fff);
}
.bk-day:disabled { opacity: .32; cursor: default }
.bk-day-dow { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; opacity: .72 }
.bk-day-num { font-size: 1.15rem; font-weight: 700 }
.bk-day-mon { font-size: .66rem; opacity: .72 }
.bk-days-nav {
  flex: none; width: 34px; border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); color: var(--c-ink); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.bk-days-nav:hover:not(:disabled) { border-color: var(--c-primary-text, var(--c-primary)); color: var(--c-primary-text, var(--c-primary)) }
.bk-days-nav:disabled { opacity: .3; cursor: default }
@media (max-width: 560px) {
  .bk-days-strip { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr }
  .bk-day { min-height: 56px }
}

/* ── Ajustes de revisión ──────────────────────────────────────────────── */

/* Aquí vivía un intento anterior de separar los botones que ponía
   `.site-header .site-nav { gap: .55rem }`. Con (0,2,0) ganaba a
   `.hdr-classic .site-nav { gap: 2.1rem }` (empate, y esto iba después) y a
   `.site-nav--center { gap: 1.7rem }`, así que APLANABA las cuatro cabeceras
   al valor más pequeño y dejaba el menú apretado en todas. La separación de
   los botones está ahora al final del fichero, en el botón y no en el
   contenedor; la del menú, en cada estilo de cabecera. No volver a poner un
   `gap` genérico sobre `.site-header .site-nav`.
   Lo único que se conserva es el ancho extra de los CTAs. */
.site-header .site-nav .btn,
.site-header .site-nav .btn-dark { padding-inline: 1.4rem }

/* 6a · El botón de confirmar reserva salía blanco sobre tarjeta blanca. Toma
   el color de acento para que se vea que es la acción principal. */
.bk-form .btn[type=submit],
.bk-form #bk-submit {
  background: var(--c-primary); color: var(--c-primary-ink, #fff); border: 0;
}
.bk-form #bk-submit:hover:not(:disabled) {
  background: color-mix(in srgb, var(--c-primary) 86%, #000);
}
.bk-form #bk-submit:disabled { opacity: .45; cursor: default }

/* 6b · Nada de halos ni sombras sobre el logo: ensucian más que ayudan. La
   legibilidad la da el velo del header (.header-main::before), no un filtro
   sobre la imagen. */

/* ── Trust Hub · estilo "Prueba social" ───────────────────────────────
   Caras a la izquierda, calificación a la derecha y la frase debajo. Las
   caras solo aparecen si el negocio aportó fotos reales; sin ellas el bloque
   se sostiene igual con la calificación y la frase. */
.trust-proof { display: flex; align-items: center; gap: 1rem; margin-top: 1.6rem; flex-wrap: wrap }
.tp-faces { display: flex; flex: none }
.tp-faces img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--c-surface); margin-left: -14px; box-shadow: 0 2px 8px rgb(0 0 0 / .18);
}
.tp-faces img:first-child { margin-left: 0 }
.tp-body { min-width: 0 }
.tp-rating { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap }
.tp-rating .ts-label { font-size: 1.05rem; font-weight: 800 }
.tp-rating .ts-platform { opacity: .75; font-size: .86rem }
.tp-note { margin: .25rem 0 0; font-size: .92rem; line-height: 1.4; max-width: 46ch; opacity: .88 }
/* Sobre la foto del hero el texto va en blanco. */
.hero-inner-bold .trust-proof .ts-label,
.hero-inner-bold .trust-proof .tp-note,
.hero-inner-bold .trust-proof .ts-platform { color: #fff }
.hero-inner-bold .tp-faces img { border-color: rgb(255 255 255 / .85) }

/* ── Hero "Panel oscuro" ──────────────────────────────────────────────
   Bloque redondeado sobre el fondo de la página: texto a la izquierda sobre
   oscuro, foto ocupando la mitad derecha a bordes redondeados. */
.hero-v-panel { padding: clamp(1rem, 2.5vw, 2rem) 0 clamp(2rem, 5vw, 4rem); background: var(--c-surface) }
.hero-v-panel .hero-inner {
  background: #14161d;
  border-radius: clamp(14px, 2vw, 24px);
  overflow: hidden;
  gap: 0;
  align-items: stretch;
  grid-template-columns: 1.02fr .98fr;
}
.hero-v-panel .hero-copy {
  padding: clamp(2rem, 5vw, 4.2rem);
  display: flex; flex-direction: column; justify-content: center;
}
.hero-v-panel .hero-copy h1,
.hero-v-panel .hero-copy .kicker { color: #fff }
.hero-v-panel .hero-copy .kicker { opacity: .78; letter-spacing: .12em }
.hero-v-panel .hero-copy .lead { color: rgb(255 255 255 / .78) }
.hero-v-panel .hero-media { margin: 0; border-radius: 0; box-shadow: none }
.hero-v-panel .hero-media img,
.hero-v-panel .hero-media .fk-slot {
  width: 100%; height: 100%; min-height: 320px; object-fit: cover; border-radius: 0; display: block;
}
.hero-v-panel .btn:not(.btn-ghost) { background: var(--c-accent); color: var(--c-accent-ink, #fff); border: 0 }
.hero-v-panel .btn-ghost { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .5) }
.hero-v-panel .trust-proof .ts-label,
.hero-v-panel .trust-proof .tp-note,
.hero-v-panel .trust-proof .ts-platform,
.hero-v-panel .trust-inline { color: rgb(255 255 255 / .85) }
.hero-v-panel .tp-faces img { border-color: #14161d }
/* El formulario de agenda, si está activo, va sobre tarjeta clara. */
.hero-v-panel .hero-bookingcol { padding: clamp(1.2rem, 3vw, 2rem) }
@media (max-width: 900px) {
  .hero-v-panel .hero-inner { grid-template-columns: 1fr }
  .hero-v-panel .hero-media img,
  .hero-v-panel .hero-media .fk-slot { min-height: 240px }
}


/* ── Contraste garantizado en botones de cabecera y pie ───────────────
   El color de texto no puede darse por sentado: el acento de un cliente puede
   ser amarillo y el de otro azul marino. `color-contrast()` no tiene soporte
   suficiente todavía, así que se fija el par color/fondo de forma explícita
   por variante en vez de heredar el del contexto. */
.site-header .btn:not(.btn-ghost):not(.btn-dark),
.site-footer .btn:not(.btn-ghost):not(.btn-dark) {
  background: var(--c-primary); color: var(--c-primary-ink, #fff);
}
.site-header .btn:not(.btn-ghost):not(.btn-dark):hover,
.site-footer .btn:not(.btn-ghost):not(.btn-dark):hover {
  background: color-mix(in srgb, var(--c-primary) 84%, #000); color: var(--c-primary-ink, #fff);
}
.site-header .btn-dark, .site-footer .btn-dark { background: var(--c-ink); color: #fff }
.site-header .btn-dark:hover, .site-footer .btn-dark:hover {
  background: color-mix(in srgb, var(--c-ink) 82%, #fff);
}
/* El estado activo del menú manda sobre cualquier color heredado. OJO: solo
   "utility" y "floating" pintan una píldora de fondo sólido bajo el enlace
   activo, así que solo ellas pueden llevar texto blanco. En "classic" y
   "variety" el activo es un subrayado sin fondo: forzar #fff ahí lo dejaba
   blanco sobre cabecera blanca (contraste 1). */
.hdr-utility .site-nav > a:not(.btn):not(.btn-dark).active,
.hdr-floating .site-nav > a:not(.btn):not(.btn-dark).active { color: var(--c-primary-ink, #fff) }
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark).active,
.hdr-variety .site-nav > a:not(.btn):not(.btn-dark).active { color: var(--c-nav-active, var(--c-primary-text, var(--c-primary))); opacity: 1 }


/* ── Bloque de contacto de las páginas legales ─────────────────────────
   Cierra privacidad y términos. Sus datos salen del perfil de negocio en
   cada render (ver themes/*/blocks/legal-contact.php), no de la prosa. */
.legal-contact { padding-top: 0 }
.legal-contact-card {
  max-width: 760px; margin: 0 auto; padding: 2rem 2.2rem 2.2rem;
  background: var(--c-primary-soft); border-radius: var(--radius, 16px);
  border: 1px solid color-mix(in srgb, var(--c-primary) 14%, transparent);
}
.legal-contact-card h2 { font-size: 1.35rem; margin-bottom: .6rem }
.legal-contact-intro { color: var(--c-body); margin-bottom: 1.3rem }
.legal-contact-list { display: grid; gap: .75rem }
.legal-contact-list .lc-row {
  display: grid; grid-template-columns: minmax(9.5rem, auto) 1fr; gap: .4rem 1.2rem; align-items: baseline;
}
.legal-contact-list dt {
  display: flex; align-items: center; gap: .5rem;
  font-weight: 600; color: var(--c-ink); font-size: .93rem;
}
.legal-contact-list dt .lc-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: var(--c-primary-text, var(--c-primary)) }
.legal-contact-list dd { color: var(--c-body) }
.legal-contact-list dd a { color: var(--c-primary-text, var(--c-primary)); font-weight: 550 }
.legal-contact-list dd a:hover { text-decoration: underline }
.legal-contact-updated { margin-top: 1.3rem; font-size: .82rem; color: var(--c-muted) }
@media (max-width: 640px) {
  .legal-contact-card { padding: 1.5rem 1.25rem 1.6rem }
  .legal-contact-list .lc-row { grid-template-columns: 1fr; gap: .15rem }
}


/* ── Menú anclado al hacer scroll (Apariencia → "Anclar menú") ─────────
   Opt-in por sitio: sin la clase .hdr-sticky nada de esto aplica, así que
   los sitios existentes no cambian de comportamiento.

   El efecto es el de una lámina de cristal: al despegarse del inicio la
   cabecera se vuelve translúcida y desenfoca lo que pasa por debajo, en vez
   de aparecer de golpe con un fondo sólido. Tres detalles que lo hacen
   sutil en vez de brusco:
     · arranca a los 24px de scroll (lo marca main.js), no en el píxel 1;
     · entra con una transición larga y suave, no con un salto de color;
     · bajando deprisa se retira hacia arriba y al subir vuelve, que es lo
       que deja leer sin la barra encima y la recupera cuando se busca.
   `backdrop-filter` no está en todos los navegadores: el fallback es un
   fondo casi opaco, que se ve bien igual — nunca se queda transparente. */
.site-header.hdr-sticky {
  position: sticky; top: 0; z-index: 90;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.site-header.hdr-sticky .header-main {
  transition:
    background-color .38s cubic-bezier(.22, .61, .36, 1),
    box-shadow .38s cubic-bezier(.22, .61, .36, 1),
    padding .38s cubic-bezier(.22, .61, .36, 1),
    -webkit-backdrop-filter .38s ease,
    backdrop-filter .38s ease;
}
/* Despegada: cristal. */
.site-header.hdr-sticky.is-stuck .header-main {
  background: color-mix(in srgb, var(--c-surface, #fff) 72%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--c-ink) 8%, transparent),
              0 8px 30px color-mix(in srgb, var(--c-ink) 8%, transparent);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.hdr-sticky.is-stuck .header-main {
    background: color-mix(in srgb, var(--c-surface, #fff) 96%, transparent);
  }
}
/* La barra superior es información secundaria: al anclarse se pliega y deja
   una cabecera más baja, que es lo que se espera de un menú fijo. */
.site-header.hdr-sticky .topbar {
  transition: max-height .38s cubic-bezier(.22, .61, .36, 1), opacity .24s ease;
  max-height: 5rem; overflow: hidden;
}
.site-header.hdr-sticky.is-stuck .topbar { max-height: 0; opacity: 0 }
/* Bajando deprisa se retira; al subir vuelve. */
.site-header.hdr-sticky.is-hidden { transform: translateY(-100%) }

/* El flotante coloca su tarjeta en absolute sobre la foto del hero. Anclado
   deja de tener sentido esa posición: al despegarse vuelve al flujo y se
   comporta como las demás. */
.hdr-floating.hdr-sticky.is-stuck:has(~ main > .hero-bold:first-child) .header-main {
  position: static;
}

/* Quien haya pedido menos movimiento no ve ni el deslizamiento ni el pliegue;
   el cristal se queda, porque es color, no animación. */
@media (prefers-reduced-motion: reduce) {
  .site-header.hdr-sticky,
  .site-header.hdr-sticky .header-main,
  .site-header.hdr-sticky .topbar { transition: none }
  .site-header.hdr-sticky.is-hidden { transform: none }
}


/* ── Separación entre botones de la cabecera ──────────────────────────
   Esto se ha roto tres veces, y siempre por lo mismo: cada estilo de header
   mete sus CTAs en un contenedor distinto — `.site-nav` en utility, classic
   y floating; `.variety-actions` en variety — y basta con que UNO se quede
   sin `gap` para que los dos botones salgan pegados. `.variety-actions` no
   tenía ninguno.

   Por eso la separación no se fija en el contenedor sino ENTRE los botones:
   así da igual dónde vivan y da igual que mañana aparezca un contenedor
   nuevo, que es exactamente lo que fallaba. Se suma al `gap` del contenedor
   cuando lo hay, y el resultado es coherente: un par de botones siempre
   respira más que dos enlaces de texto. */
.site-header :is(.btn, .btn-dark, .btn-ghost, .btn-sm):not(:first-child) {
  margin-left: .55rem;
}
/* El `margin-left: .3rem` que llevaba utility más arriba pierde por ir antes
   en el fichero con la misma especificidad (0,3,0), así que no hace falta
   anularlo — y anularlo aquí, DESPUÉS, ganaba el empate y dejaba los botones
   pegados otra vez. Cuidado con "arreglar" esto con otra regla más abajo. */


/* ── Selector de medio del editor (subir / galería) ───────────────────
   Lo abre "Cambiar foto" y el botón de fondo de bloque. Vive fuera del
   flujo de la página (se inyecta en <body>), así que no hereda nada del
   tema del cliente: colores propios y fijos, como el resto del andamiaje
   de edición. */
.fe-pick-backdrop {
  position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center;
  background: rgb(12 15 24 / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 1.5rem;
}
.fe-pick {
  background: #fff; color: #111827; border-radius: 16px; padding: 1.4rem;
  width: min(680px, 100%); max-height: min(78vh, 640px); overflow: auto;
  box-shadow: 0 24px 70px rgb(0 0 0 / .35);
  font-family: system-ui, -apple-system, sans-serif;
}
.fe-pick h3 { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700 }
.fe-pick-opts { display: flex; gap: .6rem; flex-wrap: wrap }
.fe-pick-opts button {
  flex: 1 1 10rem; padding: .8rem 1rem; border-radius: 10px; cursor: pointer;
  border: 1px solid #d7dbe4; background: #f7f8fb; color: #111827;
  font: inherit; font-weight: 600; font-size: .9rem;
  transition: background .15s, border-color .15s;
}
.fe-pick-opts button:hover { background: #eef1f7; border-color: #9aa3b5 }
.fe-pick-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: .55rem; margin-top: 1rem; color: #6b7280; font-size: .88rem;
}
.fe-pick-thumb {
  padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden;
  cursor: pointer; background: #eef1f7; aspect-ratio: 1; line-height: 0;
  transition: border-color .15s, transform .12s;
}
.fe-pick-thumb img { width: 100%; height: 100%; object-fit: cover; display: block }
.fe-pick-thumb:hover { border-color: #4f46e5; transform: translateY(-2px) }
.fe-pick-cancel {
  margin-top: 1.1rem; padding: .55rem 1.1rem; border-radius: 8px; cursor: pointer;
  border: 1px solid #d7dbe4; background: #fff; color: #6b7280; font: inherit; font-size: .88rem;
}
.fe-pick-cancel:hover { color: #111827; border-color: #9aa3b5 }

/* Encabezado de cada grupo de servicios (categorías del brief). Separa
   visualmente Interior / Exterior / Drywall sin que parezcan secciones
   distintas: por eso el título es h3 y no repite el fondo de la sección. */
.svc-group-head { margin: 2.6rem 0 1.1rem; text-align: center }
.svc-group-head:first-of-type { margin-top: 0 }
.svc-group-head h3 {
  font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--c-ink);
  display: inline-flex; align-items: center; gap: .7rem;
}
.svc-group-head h3::before, .svc-group-head h3::after {
  content: ""; height: 2px; width: 2.2rem; border-radius: 2px;
  background: color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.svc-group-head p { color: var(--c-muted); font-size: .95rem; margin: .35rem auto 0; max-width: 46rem }
.svc-group-head + .cards { margin-bottom: .4rem }
@media (max-width: 640px) {
  .svc-group-head { margin: 2rem 0 .9rem }
  .svc-group-head h3 { font-size: 1.25rem }
  .svc-group-head h3::before, .svc-group-head h3::after { width: 1.1rem }
}

/* Cabecera de categoría dentro del desplegable de Servicios. No es un enlace:
   solo separa Interior / Exterior / Drywall para que la lista se lea. */
.nav-drop-cat {
  display: block; padding: .6rem .95rem .25rem; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
  pointer-events: none;
}
.nav-drop-cat:not(:first-child) {
  margin-top: .3rem; border-top: 1px solid color-mix(in srgb, var(--c-ink) 8%, transparent);
}

/* Contenedor del único botón destacado, fuera de .site-nav para que no se
   colapse con el menú móvil (ver los parciales de cabecera). En escritorio
   se apoya a la derecha del menú; en móvil queda entre el logo y la
   hamburguesa, que es el sitio esperado para un botón de llamar. */
.hdr-actions { display: flex; align-items: center; flex: 0 0 auto }
@media (max-width: 860px) {
  .hdr-actions { margin-left: auto; order: 2; min-width: 0 }
  .hdr-actions .btn { padding: .45rem .95rem; font-size: .88rem; white-space: nowrap }
  .hdr-actions .header-cta { padding: .3rem }
  .hdr-actions .header-cta .cta-ic { width: 38px; height: 38px }
  .site-header .nav-toggle { order: 3; margin-left: .7rem; flex: 0 0 auto }
  /* El logo a 54px mide ~164px de ancho: con el botón y la hamburguesa no
     cabía en 375px y la fila se salía del viewport (scrollWidth 385). */
  .site-header .brand img { height: 42px }
  .site-header .brand { min-width: 0; flex: 0 1 auto }
  .site-header .brand-name { font-size: 1.1rem }
}

/* ── Submenú de Servicios: dos niveles ────────────────────────────────
   Servicios → categoría → sus servicios. La categoría es un enlace al ancla
   de su grupo en el home (no tiene página propia), y el segundo nivel se abre
   al lado en escritorio. */
.nav-drop-group { position: relative }
.nav-drop-menu .nav-drop-cat {
  display: flex; align-items: center; justify-content: space-between; gap: .6rem;
  padding: .55rem .9rem; border-radius: 8px; color: var(--c-ink);
  font-size: .92rem; font-weight: 650; text-transform: none; letter-spacing: 0;
  pointer-events: auto;   /* anula el pointer-events:none de la versión plana */
  border-top: 0; margin-top: 0;
}
.nav-drop-menu .nav-drop-cat:hover,
.nav-drop-group:hover > .nav-drop-cat { background: var(--c-primary-soft); color: var(--c-primary-text, var(--c-primary)) }
.ndc-arrow { font-size: 1.05rem; line-height: 1; opacity: .55 }
.nav-drop-sub {
  display: none; position: absolute; top: -.5rem; left: 100%;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .5rem; min-width: 250px; z-index: 41;
}
.nav-drop-group:hover > .nav-drop-sub,
.nav-drop-group:focus-within > .nav-drop-sub { display: block }
/* Si no cabe a la derecha, se abre hacia la izquierda. */
@media (max-width: 1200px) {
  .nav-drop-sub { left: auto; right: 100% }
}

/* En móvil el menú es una lista vertical: el segundo nivel se muestra
   siempre, indentado. Un submenú que necesita hover no existe en táctil. */
@media (max-width: 860px) {
  .nav-drop-sub {
    display: block; position: static; border: 0; box-shadow: none;
    padding: 0 0 .3rem .8rem; min-width: 0; background: none;
  }
  .ndc-arrow { display: none }
  .nav-drop-menu .nav-drop-cat { font-weight: 700 }
  .nav-drop-sub a { font-size: .88rem; opacity: .85 }
}

/* La cabecera anclada no debe tapar el grupo al saltar desde el menú. */
.svc-group-head { scroll-margin-top: 6.5rem }
/* Ancla de sección (data.anchor). Mismo respiro que los grupos de servicios:
   sin él, la cabecera anclada tapa el titular al saltar desde el menú. */
.fk-anchor { scroll-margin-top: 6.5rem }


/* ── Menú móvil y tablet: espaciado ───────────────────────────────────
   Va AL FINAL del fichero a propósito. Las reglas de nav por estilo de
   cabecera (.hdr-utility .site-nav > a …) valen (0,4,0) y viven arriba: unas
   reglas móviles más genéricas o colocadas antes pierden el empate y el menú
   se queda con el padding de escritorio — apretado y con objetivos táctiles
   de 41px. Aquí ganan por especificidad y por orden. */
@media (max-width: 860px) {
  /* El hueco del menú lo fija el bloque móvil, no el estilo de cabecera:
     `.hdr-classic .site-nav { gap: 2.1rem }` está pensado para una fila
     horizontal y en la columna móvil deja 34px entre enlaces —el triple que
     las otras tres, que quedan en 2px— con el menú desproporcionadamente
     alto. Aquí el aire lo pone el padding del enlace, así que el gap es fijo. */
  .site-header .site-nav { gap: .15rem }
  .site-header .site-nav > a:not(.btn):not(.btn-dark),
  .site-header .nav-drop-btn {
    display: flex; align-items: center; text-align: left;
    /* `.site-header .nav-drop-btn` comparte regla con los botones y lleva
       justify-content:center: en una columna eso deja "Servicios" centrado
       mientras el resto del menu va a la izquierda. */
    justify-content: flex-start; width: 100%;
    min-height: 46px; padding: .65rem .85rem; border-radius: 10px;
    font-size: .98rem; opacity: 1; padding-bottom: .65rem;
  }
  .site-header .nav-drop-btn { justify-content: space-between }
  .site-header .site-nav > a:not(.btn):not(.btn-dark)::after { display: none }
  .site-header .nav-drop-menu .nav-drop-cat {
    min-height: 44px; padding: .6rem .85rem; margin: .1rem 0 0;
    font-size: .95rem; border-top: 0;
  }
  .site-header .nav-drop-sub a {
    min-height: 42px; display: flex; align-items: center;
    padding: .5rem .85rem; border-radius: 8px; font-size: .9rem;
  }
  .site-header .nav-drop-sub { padding: .1rem 0 .5rem .75rem }
  /* Línea guía del segundo nivel: deja claro qué cuelga de qué sin recuadros. */
  .site-header .nav-drop-group { position: relative }
  .site-header .nav-drop-sub {
    border-left: 2px solid color-mix(in srgb, var(--c-primary) 18%, transparent);
    margin-left: .85rem;
  }
}

/* Tablet en horizontal: el menú sigue siendo el de escritorio pero con menos
   ancho disponible. Sin esto, `classic` y `variety` (2.1/2.2rem de hueco) no
   caben y el nav se come el logo o el CTA. */
@media (min-width: 861px) and (max-width: 1100px) {
  .hdr-classic .site-nav { gap: 1.4rem }
  .site-nav--center { gap: 1.5rem }
  .site-header .site-nav > a:not(.btn):not(.btn-dark) { font-size: .9rem }
  .hdr-utility .site-nav > a:not(.btn):not(.btn-dark),
  .hdr-floating .site-nav > a:not(.btn):not(.btn-dark) { padding: .45rem .7rem }
  .site-header .brand img { height: 46px }
  .header-cta { padding: .45rem 1rem .45rem .5rem }
  .header-cta .cta-ic { width: 36px; height: 36px }
  .header-cta .cta-tx strong { font-size: .92rem }
}

/* Zona para soltar el archivo, encima del botón de subir. Alto ~2× el del
   botón (el botón queda en ~45px con su padding). Acepta el archivo de
   verdad — ver editor.js: un recuadro decorativo que no hace nada sería
   peor que no ponerlo. */
.fe-pick-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem;
  min-height: 102px; margin-bottom: .7rem; padding: .9rem 1rem;   /* ~2x el alto del botón (51px) */
  border: 2px dashed #c9cfdc; border-radius: 12px; background: #fbfcfe;
  color: #6b7280; font-size: .9rem; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.fe-pick-drop:hover, .fe-pick-drop:focus-visible { border-color: #9aa3b5; color: #111827; outline: none }
.fe-pick-drop.over { border-color: #4f46e5; background: #eef0ff; color: #4f46e5 }
.fe-pick-drop.bad  { border-color: #dc2626; background: #fef2f2; color: #b91c1c }
.fe-pick-drop-ic { font-size: 1.35rem; line-height: 1; opacity: .65 }
.fe-pick-drop.over .fe-pick-drop-ic { opacity: 1 }

/* ── Barra del editor: señal de "espera" ──────────────────────────────
   Mientras hay una petición en curso la barra recorre un degradado muy
   contenido sobre su propio negro. Se nota el movimiento sin gritar: es
   una señal de progreso, no un adorno, y compite con nada de la página.
   El brillo no baja de #14161d, así que el texto blanco nunca pierde
   contraste. */
@keyframes et-flow {
  from { background-position: 200% 0 }
  to   { background-position: -100% 0 }
}
.edit-toolbar.et-busy {
  background-image: linear-gradient(100deg,
    #14161d 0%, #14161d 18%,
    #1d2440 34%, #27315c 46%, #1d2440 58%,
    #14161d 76%, #14161d 100%);
  background-size: 300% 100%;
  animation: et-flow 2.4s linear infinite;
}

/* El texto no se sustituye en seco: sale hacia arriba encogiéndose y entra
   el siguiente. Sin esto, pasar de "Subiendo" a "Optimizando" parece un
   parpadeo y no se lee que ha avanzado un paso. */
.et-status {
  transition: opacity .17s ease, transform .17s ease;
  transform-origin: left center;
}
.et-status.fading { opacity: 0; transform: translateY(-5px) scaleY(.86) }

@media (prefers-reduced-motion: reduce) {
  .edit-toolbar.et-busy { animation: none; background-image: none; background-color: #1d2440 }
  .et-status { transition: none }
  .et-status.fading { opacity: 1; transform: none }
}


/* ── Hero en móvil: primero la foto, luego el texto ───────────────────
   En una columna, el titular + párrafo + botones ocupan casi toda la
   pantalla y la foto quedaba enterrada bajo ~570px de texto: el visitante
   llegaba al trabajo del negocio haciendo scroll a ciegas. Con la foto
   arriba se ve de qué va el sitio antes de leer nada.

   Solo se invierte cuando esa columna ES una foto. Si lleva el formulario
   de reserva (.hero-bookingcol) o el de contacto (.hero-formcol), el orden
   se respeta: primero se explica qué ofreces y luego se pide rellenar algo,
   no al revés. Y el hero "bold" no entra: ahí la foto es el fondo de la
   sección, no una columna. */
@media (max-width: 860px) {
  .hero-inner:not(.hero-inner-bold) .hero-media:not(.hero-formcol):not(.hero-bookingcol):not(.fe-bold-photo) {
    order: -1;
    margin-bottom: 1.6rem;
  }
}

/* ── Hero de varias diapositivas (bloque `heroslider`) ─────────────────
   Con una sola diapositiva se comporta como el hero a sangre: sin flechas
   ni puntos. El velo es el mismo mecanismo configurable de `hero-ov-*`,
   pero elegido POR DIAPOSITIVA, y `hero-ov-none` no pinta ninguno. */
/* Sin padding: el bloque hereda `.hero`, que mete ~115px arriba y abajo, y
   como el carrusel ya fija su altura en .hs-track esos 230px salían como
   una franja oscura encima y debajo de la foto. */
.heroslider { position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-ink); padding: 0; min-height: 0 }
/* Antes clamp(540px,88vh,780px): en pantallas altas el titular quedaba
   flotando con mucho aire arriba y abajo. */
.hs-track { position: relative; height: clamp(460px, 68vh, 620px) }
.hs-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden;
  transition: opacity .8s cubic-bezier(.25,.46,.45,.94) }
.hs-slide.is-active { opacity: 1; visibility: visible; z-index: 2 }
.hs-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }
.hs-scrim { position: absolute; inset: 0; z-index: 1 }
.hero-ov-dark .hs-scrim  { background: linear-gradient(180deg, rgba(8,10,18,.28), rgba(8,10,18,.7) 72%) }
.hero-ov-light .hs-scrim { background: linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.88) 74%) }
.hs-body { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; padding-bottom: 2.6rem }
.hs-inner { max-width: min(92%, 58rem) }
.hs-inner h1 { margin: 0 0 1.2rem; font-size: clamp(2.3rem, 5.2vw, 3.9rem); line-height: 1.07; letter-spacing: -.03em }
.hs-inner .lead { max-width: 46rem }
.hero-ov-dark .hs-inner h1, .hero-ov-dark .hs-inner .lead { color: #fff }
.hero-ov-dark .hs-inner .kicker { color: #fff; opacity: .9 }

.hs-nav { position: absolute; left: 50%; bottom: 1.6rem; transform: translateX(-50%); z-index: 5;
  display: flex; align-items: center; gap: .85rem }
.hs-arrow { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.28); color: #fff; display: grid; place-items: center; cursor: pointer;
  transition: background .15s, transform .15s }
.hs-arrow:hover { background: rgba(0,0,0,.5); transform: scale(1.06) }
.hs-dots { display: flex; gap: .45rem }
.hs-dot { width: 9px; height: 9px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45); transition: background .15s, width .15s }
.hs-dot.is-active { background: var(--c-accent); width: 22px; border-radius: 99px }

/* ── En EDICIÓN el carrusel se desmonta ───────────────────────────────
   Apiladas en `position:absolute`, las diapositivas no activas son inertes
   al puntero: solo se podía editar la primera, y el temporizador la cambiaba
   mientras escribías. Aquí van una debajo de otra, en flujo. main.js no
   inicializa el carrusel cuando el <body> lleva .fk-editing, así que nadie
   vuelve a marcar `is-active`. Hay que soltar las DOS alturas: la fija vive
   en .hs-track y quien recorta es .heroslider con su `overflow`. */
.fk-editing .heroslider { overflow: visible }
.fk-editing .hs-track { height: auto }
.fk-editing .hs-slide { position: relative; inset: auto; opacity: 1; visibility: visible;
  min-height: 340px; transition: none }
.fk-editing .hs-slide + .hs-slide { margin-top: 1.5rem }
.fk-editing .hs-nav { display: none }
.fk-editing .hs-num { position: absolute; top: .75rem; left: .75rem; z-index: 6;
  display: inline-block; padding: .3rem .8rem; background: var(--c-ink); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-radius: 999px; pointer-events: none }

@media (max-width: 860px) {
  .hs-track { height: auto }
  .hs-slide { position: relative; inset: auto; opacity: 1; visibility: visible; display: none }
  .hs-slide.is-active { display: block }
  .hs-body { min-height: 0; padding: 2.6rem 0 4.2rem }
  .fk-editing .hs-slide { display: block }
}
@media (prefers-reduced-motion: reduce) { .hs-slide { transition: none } }

/* ── Cabecera y pie con el color de marca ─────────────────────────────
   Aurora asume cabecera clara. Estos tokens permiten una oscura sin tocar
   los sitios que ya existen: sin definirlos, todo queda igual. El logo que
   se pinta es `business_profile.logo`, así que en una cabecera oscura hay
   que guardar ahí la versión clara del logotipo. */
.site-header .brand img { max-height: 46px; width: auto }
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark)::after { background: var(--c-header-rule, var(--c-primary)) }
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark):hover,
.hdr-classic .site-nav > a:not(.btn):not(.btn-dark).active,
.hdr-classic .nav-drop-btn:hover { color: var(--c-header-active, var(--c-nav-active, var(--c-primary-text, var(--c-primary)))) }
.site-header .nav-toggle span { background: var(--c-header-ink, var(--c-ink)) }

/* ── Footer "moments": réplica del pie de su web estática ──────────────
   Cuatro columnas 2fr 1fr 1fr 1.5fr sobre el verde de marca, como el
   original. El texto sale del token de tinta del pie para que un color de
   fondo claro no lo deje ilegible. */
.ftr-moments { background: var(--c-footer-bg, var(--c-ink)); color: color-mix(in srgb, var(--c-footer-ink, #fff) 72%, transparent);
  padding: 4.5rem 0 0 }
.ftr-m-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; padding-bottom: 3.2rem }
.ftr-m-brand img { max-width: 260px; width: 100%; height: auto; margin-bottom: 1.1rem }
.ftr-m-brand p { font-size: .93rem; line-height: 1.6; color: color-mix(in srgb, var(--c-footer-ink, #fff) 60%, transparent) }
.ftr-m-col { display: flex; flex-direction: column; gap: .55rem }
.ftr-m-col h4 { font-family: var(--font-display); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--c-accent); margin-bottom: .5rem }
.ftr-m-col a, .ftr-m-col span { color: color-mix(in srgb, var(--c-footer-ink, #fff) 72%, transparent); font-size: .94rem }
.ftr-m-col a:hover { color: var(--c-footer-ink, #fff) }
.ftr-m-all { margin-top: .35rem; font-weight: 650; color: var(--c-accent) !important }
.ftr-moments .footer-social { display: flex; gap: .6rem; margin-top: 1.2rem }
.ftr-moments .footer-social a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid color-mix(in srgb, var(--c-footer-ink, #fff) 28%, transparent) }
.ftr-moments .footer-bottom-wrap { border-top: 1px solid color-mix(in srgb, var(--c-footer-ink, #fff) 14%, transparent) }
.ftr-moments .footer-bottom p, .ftr-moments .footer-bottom a { color: color-mix(in srgb, var(--c-footer-ink, #fff) 66%, transparent) }
@media (max-width: 900px) { .ftr-m-grid { grid-template-columns: 1fr 1fr; gap: 2.2rem } }
@media (max-width: 560px) { .ftr-m-grid { grid-template-columns: 1fr } }

/* El texto del carrusel usa el ancho del contenido, no una caja estrecha:
   con `max-width: min(92%, 58rem)` cada diapositiva se ajustaba a SU texto y
   las dos quedaban de anchos distintos. */
.hs-inner { max-width: var(--container, 1140px); width: 100%; margin-inline: auto }
.hs-inner h1, .hs-inner .lead { max-width: 34rem }

/* ── Rejilla de fotos (bloque `photogrid`) ─────────────────────────────────
   Dos disposiciones con el mismo marcado: `overlay` pone el rótulo dentro de
   la foto (listas visuales: zonas, barrios) y `caption` lo pone debajo sobre
   superficie (cuando hay un párrafo que leer). La relación de aspecto se fija
   en el contenedor de la foto, no en el <img>, para que una imagen que aún no
   ha cargado no haga saltar la página. */
.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 1.6rem }
.pgrid-card { min-width: 0 }
.pgrid-inner {
  display: block; height: 100%; position: relative; overflow: hidden;
  border-radius: var(--radius-lg, 16px); background: var(--c-surface);
  text-decoration: none; color: inherit;
  transition: transform .35s ease, box-shadow .35s ease;
}
a.pgrid-inner:hover, a.pgrid-inner:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 38px rgb(0 0 0 / .14) }
.pgrid-photo { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface-alt) }
.pgrid-photo img, .pgrid-photo .fk-slot { width: 100%; height: 100%; object-fit: cover; display: block }
a.pgrid-inner .pgrid-photo img { transition: transform .6s cubic-bezier(.25,.46,.45,.94) }
a.pgrid-inner:hover .pgrid-photo img { transform: scale(1.05) }
.pgrid-body h3 { margin: 0; font-size: 1.15rem; line-height: 1.25 }
.pgrid-kicker {
  margin: 0 0 .2rem; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
}
.pgrid-body p:not(.pgrid-kicker) { margin: .5rem 0 0; font-size: .95rem; line-height: 1.6 }

/* overlay: el rótulo se lee sobre la foto, así que lleva su propio degradado
   —no un velo sobre toda la imagen, que apagaría la foto entera. */
.pgrid-overlay .pgrid-body {
  position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1.5rem 1.35rem 1.25rem; color: #fff;
  background: linear-gradient(to top, rgb(0 0 0 / .85) 0%, rgb(0 0 0 / .58) 48%, rgb(0 0 0 / 0) 100%);
}
/* El acento de marca es un ocre claro: sobre una foto soleada se queda corto
   de contraste, así que en `overlay` se aclara hacia el blanco. El acento
   puro se sigue usando en `caption`, que va sobre superficie. */
.pgrid-overlay .pgrid-kicker { color: color-mix(in srgb, var(--c-accent, #fff) 55%, #fff) }
.pgrid-overlay .pgrid-body h3 { color: #fff }
.pgrid-overlay .pgrid-photo { aspect-ratio: 3 / 4 }

/* caption: tarjeta clásica, foto arriba y texto debajo con borde de superficie */
.pgrid-caption .pgrid-inner { box-shadow: 0 1px 0 var(--c-border), 0 10px 26px rgb(0 0 0 / .05) }
.pgrid-caption .pgrid-body { padding: 1.3rem 1.35rem 1.5rem }
.pgrid-caption .pgrid-kicker { color: var(--c-accent-text, var(--c-primary)) }

@media (max-width: 900px) { .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem } }
@media (max-width: 560px) {
  .pgrid { grid-template-columns: 1fr }
  .pgrid-overlay .pgrid-photo { aspect-ratio: 4 / 3 }
}

/* En edición, "Cambiar foto" sube a la esquina superior de la tarjeta: en la
   disposición `overlay` el rótulo ocupa justo la esquina inferior derecha y
   los dos se pisaban. */
.fk-editing .pgrid-overlay .et-img-btn { bottom: auto; top: .8rem }

/* Un grupo de servicios con una sola tarjeta ocupaba los 1140px de la rejilla
   y su foto se estiraba a lo ancho de la pantalla: dejaba de parecer una
   tarjeta y parecía un banner. Con una sola pasa a horizontal —foto a un lado,
   texto al otro—, que además es el trato que le corresponde al servicio que
   encabeza el negocio. Solo se aplica con la clase, así que ninguna rejilla
   existente cambia de aspecto. */
.cards-solo { grid-template-columns: 1fr }
.cards-solo .card-service { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; padding: 0 }
.cards-solo .card-service .card-photo { height: 100% }
.cards-solo .card-service .card-photo img { height: 100%; min-height: 300px; aspect-ratio: auto }
.cards-solo .card-service .card-body { justify-content: center; padding: 2.4rem 2.6rem }
.cards-solo .card-service .card-body h3 { font-size: 1.55rem; line-height: 1.2 }
.cards-solo .card-service .card-body p { font-size: 1.02rem }
/* `margin-top:auto` empuja el enlace al fondo de la tarjeta; con el cuerpo
   centrado eso lo dejaba flotando lejos del párrafo. */
.cards-solo .card-service .card-more { margin-top: 1.2rem }
@media (max-width: 720px) {
  .cards-solo .card-service { grid-template-columns: 1fr }
  .cards-solo .card-service .card-photo img { height: auto; min-height: 0; aspect-ratio: 16 / 10 }
  .cards-solo .card-service .card-body { padding: 1.5rem 1.8rem 1.8rem }
}

/* ── Intensidad del velo del hero (Apariencia → «Velo sobre la foto») ──────
   `medium` no emite clase: es el degradado de siempre, así que un sitio ya
   publicado no cambia mientras nadie toque el ajuste. Depende de la FOTO, no
   del diseño — una toma nocturna necesita mucho menos velo que una a pleno
   sol —, por eso es un ajuste aparte del estilo visual del hero. */
.scrim-soft .hero-ov-dark .hero-scrim,
.scrim-soft .hero-ov-dark .hs-scrim {
  background: linear-gradient(180deg, rgba(8,10,18,.14), rgba(8,10,18,.46) 72%);
}
.scrim-strong .hero-ov-dark .hero-scrim,
.scrim-strong .hero-ov-dark .hs-scrim {
  background: linear-gradient(180deg, rgba(8,10,18,.40), rgba(8,10,18,.82) 72%);
}

/* Aviso de la barra superior (Apariencia → «Aviso de la barra superior»).
   Va primero en el flujo y en negrita: es lo único de la barra que el
   visitante no espera encontrar, así que tiene que ganarle a la dirección y
   al teléfono. Su color sale del mismo token que el resto de la barra, no de
   un valor fijo, para que siga cumpliendo contraste sobre cualquier acento. */
.tb-promo {
  margin: 0; font-weight: 700; letter-spacing: .01em;
  color: var(--c-topbar-ink, var(--c-accent-ink, #fff));
}
@media (max-width: 720px) {
  /* En móvil el aviso se queda solo: la dirección y el teléfono ya están en la
     cabecera y repetirlos aquí parte la barra en tres líneas. */
  .topbar-in:has(.tb-promo) .topbar-left,
  .topbar-in:has(.tb-promo) .topbar-right { display: none }
  .tb-promo { text-align: center; width: 100%; font-size: .78rem }
}

/* ── Antes / después con pestañas (bloque `beforeafter`) ───────────────────
   El recorte va con `clip-path` sobre la foto de ARRIBA, no con un contenedor
   de ancho variable: así las dos fotos ocupan siempre el 100% del marco y
   ninguna se deforma al mover el control. `--pos` la escribe main.js. */
.ba { max-width: 980px; margin-inline: auto }
.ba-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-bottom: 1.4rem }
.ba-tab {
  border: 0; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 650;
  padding: .6rem 1.15rem; border-radius: 999px; background: transparent;
  color: var(--c-body); transition: background .18s, color .18s;
}
.ba-tab:hover { background: var(--c-primary-soft) }
.ba-tab.is-active { background: var(--c-primary); color: var(--c-primary-ink, #fff) }
.ba-tab:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px }

.ba-pair {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--radius-lg, 16px); background: var(--c-surface-alt);
  touch-action: pan-y;             /* el dedo sigue pudiendo desplazar la página */
}
.ba-shot { position: absolute; inset: 0; display: block }
.ba-shot img, .ba-shot .fk-slot { width: 100%; height: 100%; object-fit: cover; display: block }
.ba-before { clip-path: inset(0 calc(100% - var(--pos, 50%)) 0 0) }

.ba-line {
  position: absolute; top: 0; bottom: 0; left: var(--pos, 50%);
  width: 3px; margin-left: -1.5px; background: #fff; z-index: 3; pointer-events: none;
  box-shadow: 0 0 12px rgb(0 0 0 / .35);
}
.ba-grip {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 46px; height: 46px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 16px rgb(0 0 0 / .3);
}
/* Las dos flechitas del tirador, dibujadas con bordes: sin SVG ni fuente. */
.ba-grip::before, .ba-grip::after {
  content: ""; position: absolute; top: 50%; translate: 0 -50%;
  border: 5px solid transparent;
}
/* Las dos puntas tienen que dejar hueco en medio: pegadas se leen como un
   rombo, no como «arrastra a un lado o al otro». Con 46px de tirador y 9px de
   margen quedan 8px de aire; en el de 40px del móvil, otros 8. */
.ba-grip::before { left: 9px; border-right-color: var(--c-ink) }
.ba-grip::after  { right: 9px; border-left-color: var(--c-ink) }

/* El control real: un range a pantalla completa y transparente. Resuelve de
   una vez ratón, dedo y teclado, que es donde fallan los deslizadores hechos
   a mano con pointerdown. */
.ba-range {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; padding: 0; background: transparent; appearance: none;
  cursor: ew-resize; opacity: 0;
}
.ba-range::-webkit-slider-thumb { appearance: none; width: 46px; height: 100%; cursor: ew-resize }
.ba-range::-moz-range-thumb { width: 46px; height: 100%; border: 0; background: transparent; cursor: ew-resize }
.ba-range:focus-visible + .ba-line,
.ba-pair:has(.ba-range:focus-visible) .ba-grip { outline: 3px solid var(--c-primary); outline-offset: 2px }

.ba-panel[hidden] { display: none }
@media (max-width: 560px) {
  .ba-pair { aspect-ratio: 4 / 3 }
  .ba-tabs { gap: .3rem }
  .ba-tab { padding: .5rem .85rem; font-size: .82rem }
  .ba-grip { width: 40px; height: 40px }
  .ba-grip::before, .ba-grip::after { border-width: 4px }
  .ba-grip::before { left: 8px } .ba-grip::after { right: 8px }
}

/* En edición las dos fotos se despliegan lado a lado: apiladas, la de abajo no
   recibe el puntero y solo se podría cambiar la de arriba. Misma lección que
   dejó el carrusel del hero. */
.fk-editing .ba-panel { display: block !important }
.fk-editing .ba-panel[hidden] { display: block !important }
.fk-editing .ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; aspect-ratio: auto; overflow: visible }
.fk-editing .ba-shot { position: relative; inset: auto; aspect-ratio: 16 / 10 }
.fk-editing .ba-before { clip-path: none; order: -1 }
.fk-editing .ba-line, .fk-editing .ba-range, .fk-editing .ba-tabs { display: none }
.fk-editing .ba-num { font-size: .8rem; font-weight: 700; color: var(--c-muted); margin: 1.2rem 0 .4rem }
.ba-tag {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: rgb(0 0 0 / .7); color: #fff; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px;
}

/* ── Formulario de captación (variante `lead` del bloque contacto) ─────────
   Los campos van en parejas para que no salga una columna de ocho cajas: en
   un móvil eso es scroll puro y se abandona a mitad. */
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem }
.cf-row-2-1 { grid-template-columns: 2fr 1fr }
.cf-row > div { min-width: 0 }
/* Un <input> tiene ancho mínimo intrínseco (el viejo atributo `size`), así que
   dentro de una columna estrecha se desborda por mucho `min-width:0` que lleve
   el contenedor: el ZIP se salía de la tarjeta y sacaba 23px de scroll
   horizontal a TODA la página. El mínimo hay que anularlo en el campo. */
.cf-row input, .cf-row select, .cf-row textarea { width: 100%; min-width: 0; box-sizing: border-box }
.cf-lead .cf-opt {
  margin-left: .4rem; font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .06em; color: var(--c-muted);
}
.cf-hint { margin: .35rem 0 1rem; font-size: .8rem; color: var(--c-muted) }
.cf-lead input[type="file"] {
  width: 100%; font: inherit; font-size: .88rem; padding: .7rem;
  border: 1px dashed var(--c-border); border-radius: var(--radius-sm, 10px);
  background: var(--c-surface); cursor: pointer;
}
.cf-prefer { border: 0; padding: 0; margin: 0 0 1.1rem }
.cf-prefer legend { padding: 0; font-size: .85rem; font-weight: 650; margin-bottom: .5rem }
.cf-chip { display: inline-flex; align-items: center; gap: .4rem; margin: 0 .5rem .4rem 0; cursor: pointer }
.cf-chip input { width: auto; margin: 0 }
.cf-chip span { font-size: .9rem }
.cf-legal { margin: .2rem 0 1rem; font-size: .76rem; line-height: 1.5; color: var(--c-muted) }
@media (max-width: 560px) {
  .cf-row, .cf-row-2-1 { grid-template-columns: 1fr }
}

/* ── Antes / después, tono oscuro (`tone: dark`) ───────────────────────────
   Pestañas de carpeta apoyadas sobre un panel oscuro, con el rótulo en el
   acento de marca. Va todo por tokens con respaldo: sin definirlos, el bloque
   sigue siendo el claro de siempre y ningún otro sitio cambia. */
.ba-dark { background: var(--c-ba-bg, var(--c-ink)) }
.ba-dark .section-head h2 { color: var(--c-ba-title, #fff) }
.ba-dark .section-head .lead,
.ba-dark .section-head .kicker { color: color-mix(in srgb, var(--c-ba-title, #fff) 72%, transparent) }
.ba-dark .ba { max-width: 1100px }

.ba-dark .ba-tabs { gap: .35rem; margin-bottom: 0; justify-content: stretch; flex-wrap: wrap }
.ba-dark .ba-tab {
  flex: 1 1 0; min-width: 0; border-radius: 14px 14px 0 0; padding: 1.05rem .8rem;
  background: var(--c-ba-tab, rgb(255 255 255 / .05));
  color: var(--c-ba-label, var(--c-accent, #fff));
  font-size: 1rem; font-weight: 600;
}
.ba-dark .ba-tab:hover { background: var(--c-ba-panel, rgb(255 255 255 / .09)) }
.ba-dark .ba-tab.is-active {
  background: var(--c-ba-panel, rgb(255 255 255 / .09));
  color: var(--c-ba-label, var(--c-accent, #fff));
}
.ba-dark .ba-body {
  background: var(--c-ba-panel, rgb(255 255 255 / .09));
  border-radius: 0 0 20px 20px; padding: clamp(.8rem, 2.2vw, 1.6rem);
}
.ba-dark .ba-pair { border-radius: 12px }

@media (max-width: 720px) {
  /* Cuatro pestañas en una fila dejan 80px por rótulo: ilegible. En dos filas
     se leen enteras, y entonces el panel necesita las cuatro esquinas. */
  .ba-dark .ba-tab { flex: 1 1 calc(50% - .35rem); font-size: .9rem; padding: .85rem .6rem }
  .ba-dark .ba-tab:nth-child(-n+2) { border-radius: 14px 14px 0 0 }
  .ba-dark .ba-tab:nth-child(n+3)  { border-radius: 0 }
  /* En dos filas la pestaña activa ya no se «conecta» con el panel de abajo,
     que es lo que la distinguía en escritorio: aquí necesita marca propia. */
  .ba-dark .ba-tab.is-active {
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--c-ba-label, var(--c-accent, #fff));
  }
  .ba-dark .ba-body { border-radius: 0 0 16px 16px }
}

/* ── Dos columnas: foto + lista de puntos (bloque `splitlist`) ─────────────
   El orden en el DOM es foto y luego texto. En escritorio `order` decide el
   lado; en móvil no se toca, así que la foto queda arriba SIEMPRE — una foto
   detrás de diez puntos de texto, en una columna de teléfono, no la ve nadie. */
.sl-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(1.8rem, 4vw, 3.4rem); align-items: center }
/* `stretch` hace que la foto acompañe a la columna de texto, que es lo que se
   quiere con listas cortas. Con diez puntos en una sola columna esa altura se
   dispara y la foto sale como una tira de 1800px, así que lleva tope. */
.sl-media { position: relative; border-radius: var(--radius-lg, 16px); overflow: hidden; align-self: stretch; min-height: 280px; max-height: 760px }
.sl-media img, .sl-media .fk-slot { width: 100%; height: 100%; object-fit: cover; display: block }
.sl-grid:not(.sl-imgleft) .sl-media { order: 2 }
.sl-copy h2 { margin-top: 0 }
.sl-copy .lead { margin-bottom: 1.4rem }
.sl-list { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 1.1rem }
.sl-list-2 { grid-template-columns: 1fr 1fr; gap: 1.1rem 1.8rem }
.sl-list li { min-width: 0 }
.sl-list h3 { margin: 0 0 .2rem; font-size: 1.02rem; line-height: 1.3 }
.sl-list p { margin: 0; font-size: .93rem; line-height: 1.55; color: var(--c-body) }
.sl-cta { margin-top: 1.8rem }

@media (max-width: 900px) {
  .sl-grid { grid-template-columns: 1fr }
  .sl-grid:not(.sl-imgleft) .sl-media { order: 0 }   /* la foto vuelve arriba */
  .sl-media { min-height: 0; aspect-ratio: 16 / 10 }
  .sl-list-2 { grid-template-columns: 1fr }
}

/* ── Pasos en una sola fila (`data.columns`) ───────────────────────────────
   Cinco pasos con sus flechas piden ~1370px y no caben: para una fila de
   cinco se estrechan las tarjetas y se quitan las flechas. La opción es
   explícita (`columns`), así que ninguna sección existente se reparte sola. */
.steps-cols-5 { max-width: min(100%, calc(5 * 200px + 4 * 1.4rem)) }
.steps-cols-5 .step { max-width: 200px }
.steps-cols-5 .step-arrow { display: none }
@media (max-width: 1150px) and (min-width: 861px) {
  /* Aquí la fila de cinco no cabe a 200px por tarjeta. Se estrechan en vez de
     repartirse en dos filas: lo que se pidió es UNA fila, y un 3+2 a media
     pantalla se lee como un fallo de maquetación. */
  .steps-cols-5 { max-width: 100%; gap: .9rem }
  .steps-cols-5 .step { max-width: 158px }
  .steps-cols-5 .step h3 { font-size: .95rem }
  .steps-cols-5 .step p { font-size: .82rem; line-height: 1.45 }
}

/* ── Vídeo en huecos de medio ──────────────────────────────────────────────
   Dos comportamientos, y la diferencia importa: de FONDO el vídeo tiene que
   tapar el hueco entero aunque le sobre por los lados (`cover`), y en COLUMNA
   tiene que verse entero a su tamaño — recortar ahí se come justo lo que el
   vídeo quería enseñar. */
.fk-vid-cover {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover; display: block;
  pointer-events: none;                 /* el vídeo no roba el clic a los CTAs */
}
.fk-vid-inline { width: 100%; height: auto; display: block; border-radius: inherit }

/* Portada "bold": el vídeo va detrás del velo y del contenido. El <section>
   conserva su background-image, que actúa de cartel mientras carga. */
.hero-bold { position: relative }
.hero-bold .hero-video { z-index: 0 }
.hero-bold .hero-scrim { z-index: 1 }
.hero-bold .hero-inner { position: relative; z-index: 2 }

/* En columna el hueco deja de imponer altura: manda la proporción del vídeo. */
.sl-media:has(.sl-video) { max-height: none; align-self: center; min-height: 0 }
.sl-media .sl-video { height: auto; object-fit: initial }
.text-split-media .text-split-video { border-radius: var(--radius, 14px) }

/* ── Vídeo en edición ──────────────────────────────────────────────────────
   Se pinta parado y con controles: ocultarlo hacía creer que la subida había
   fallado. Los controles necesitan recibir el puntero, así que aquí se anula
   el `pointer-events:none` que en el sitio publicado impide que un vídeo de
   fondo le robe el clic a los botones del hero. */
/* SOLO el vídeo en columna recibe el puntero. El de FONDO no puede: se pinta
   sobre toda la sección y, si acepta clics, se come los del titular y los
   botones que van encima — con un vídeo de portada no se podía editar ni una
   palabra del hero. Por eso tampoco se le suben las capas: queda detrás del
   contenido, como en el sitio publicado. */
.fk-editing .fk-vid-inline { pointer-events: auto }
.fk-editing .fk-vid-cover { pointer-events: none }
.fk-vid-tag {
  position: absolute; top: .6rem; left: .6rem; z-index: 6;
  background: var(--c-ink); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px;
  pointer-events: none;
}
/* El hueco tiene que ser el ancla del rótulo, o se iría a la esquina de la
   página. OJO: aquí NO puede entrar `.hs-slide`. Sus diapositivas son
   `position:absolute` (es lo que las superpone) y esta regla, por ir después
   en el fichero y valer lo mismo, las devolvía al flujo y desmontaba el
   carrusel entero. En edición ya son `relative` por su propia regla, y en el
   sitio publicado el rótulo ni se emite. */
.sl-media, .text-split-media { position: relative }

/* Miniatura de vídeo en la galería del editor: el primer fotograma con un
   triángulo encima, para distinguirla de una foto de un vistazo. */
.fe-pick-thumb.is-video { position: relative }
.fe-pick-thumb.is-video video { width: 100%; height: 100%; object-fit: cover; display: block; background: #111 }
.fe-pick-play {
  position: absolute; inset: 50% auto auto 50%; translate: -50% -50%;
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgb(0 0 0 / .62); color: #fff; line-height: 0; pointer-events: none;
}
.fe-pick-play svg { display: block }

/* Botón opcional al final de un bloque de texto. */
.text-cta { margin-top: 1.8rem }