/* 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 }
a { color: 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); margin-bottom: .8rem;
}
.lead { font-size: 1.15rem; color: var(--c-body); max-width: 60ch }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: .65rem 1.4rem; border-radius: 999px;
  background: var(--c-primary); color: #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-primary); box-shadow: inset 0 0 0 2px var(--c-primary) }
.btn-ghost:hover { background: var(--c-primary-soft); box-shadow: inset 0 0 0 2px var(--c-primary) }
.btn-invert { background: #fff; color: 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-accent); color: color-mix(in srgb, var(--c-accent-ink, #fff) 88%, transparent);
  font-size: .82rem;
}
.topbar a { color: var(--c-accent-ink, #fff) }
.topbar a:hover { opacity: .78 }
.topbar svg { color: color-mix(in srgb, 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-accent-ink, #fff); opacity: .78 }
.tb-item svg { opacity: .8; flex-shrink: 0 }
.tb-since { color: color-mix(in srgb, 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: color-mix(in srgb, var(--c-surface) 88%, transparent);
  backdrop-filter: blur(14px); border-bottom: 1px solid 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) }
.hdr-utility .site-nav > a:not(.btn):not(.btn-dark).active { background: var(--c-primary); color: #fff }
.hdr-utility .site-nav .btn { color: #fff; margin-left: .3rem }
.hdr-utility .site-nav .btn:hover { background: var(--c-primary); color: #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) }
.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: #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) }
.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); 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) { background: #fff; color: var(--c-ink) }
.hero-ov-dark .hero-inner-bold .btn:not(.btn-ghost):hover { background: var(--c-primary); color: #fff }
.hero-ov-dark .hero-inner-bold .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 { 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);
  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) }
.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 ── */
.steps { display: flex; align-items: flex-start; justify-content: center; gap: 1.4rem; flex-wrap: wrap }
.step { text-align: center; max-width: 220px }
.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);
}
.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);
}
.step-num {
  position: absolute; bottom: -4px; right: -4px; width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--c-primary); color: #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) }
@media (max-width: 720px) {
  .steps { flex-direction: column; align-items: center }
  .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) }
.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); color: var(--c-primary); opacity: 1 }
.blog-cats a.on { background: var(--c-primary); color: #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); 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); 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); 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); 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) }
.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);
}
.consent a { color: 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); 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 }
  .text-split-imgleft .text-split-media { order: 0 }
  .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) }
.banner-ov-light .banner-text { color: var(--c-body); opacity: 1 }
.banner-ov-light .btn { background: var(--c-primary); color: #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) }
.banner-blobs .banner-text { color: var(--c-body); opacity: 1 }
.banner-blobs .btn { background: var(--c-primary); color: #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); 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); background: var(--c-primary-soft); color: var(--c-primary) }
.bk-slot span:hover { border-color: 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); font-family: var(--font-display); font-size: 1.8rem; font-weight: 700 }
.team-role { color: 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 }
.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) }
.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) }
.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: color-mix(in srgb, var(--c-primary) 78%, #0a0e1a);
  color: color-mix(in srgb, #fff 72%, transparent);
  padding-top: 4.2rem; /* aire para la franja, que va DENTRO del footer */
}
.ftr-rich a { color: color-mix(in srgb, #fff 72%, transparent) }
.ftr-rich a:hover { color: #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: #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) !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, #fff 68%, 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) }
.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) }
.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) !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); color: #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) }
.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) }

/* ── 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 }
.float-call { background: 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) }
.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-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 }

/* 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-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 {
    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); transform: translateY(-1px) }
.bk-day.is-on {
  background: var(--c-primary); border-color: var(--c-primary); color: #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); color: 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: #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: #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: #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: #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-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) }
.legal-contact-list dd { color: var(--c-body) }
.legal-contact-list dd a { color: 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) }
.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 }


/* ── 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;
  }
}