/* ═══════════════════════════════════════════════════════════
   BASE STRUCTURAL CSS
   ═══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   BASE STRUCTURAL CSS — shared layout, swapped by themes
   ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  /* La usan el scroll-padding de las anclas y el desplazamiento del menú.
     Vive en html porque los tokens del tema cuelgan de body. */
  --altura-cabecera: 104px;

  /* ── Tiempos del movimiento ──
     Todos juntos aquí para poder ajustar el ritmo sin ir buscándolos por
     la hoja y por el script: movimiento.js lee --paso-revelado y
     --paso-intercambio de aquí mismo. Si la entrada se siente
     precipitada, lo que hay que subir es el paso, no la duración: lo que
     da sensación de prisa es que los bloques salgan casi a la vez, no
     que cada uno tarde poco. */
  --dur-revelado: 1.4s;
  --paso-revelado: 300ms;
  --dur-subrayado: 1.6s;
  --retardo-subrayado: .7s;
  --dur-intercambio: .9s;
  --paso-intercambio: 190ms;
  --curva-movimiento: cubic-bezier(.22, 1, .36, 1);
  scroll-behavior: smooth;
  /* La cabecera es pegajosa: sin este margen, cada enlace del menú deja su
     destino escondido justo debajo de ella. */
  scroll-padding-top: var(--altura-cabecera, 104px);
}
body {
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; cursor: pointer; }

/* ── Container ── */
.container {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 2;
}

/* ── Header layout ── */
header {
  position: sticky;
  top: 0;
  z-index: 200;
  width: 100%;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}
.brand-block {
  display: flex;
  align-items: center;
  gap: 18px;
}
.brand-mark {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}
.brand-name { font-weight: 700; }
.brand-tagline {
  font-size: 9px;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-top: 4px;
}
nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
nav a {
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: color .2s;
}
.nav-cta {
  padding: 11px 22px;
  text-decoration: none;
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all .25s ease;
}

/* ── Hero: la foto ocupa el marco entero y el texto va encima ── */
/* Antes eran dos columnas, texto y foto. La foto a media pantalla no
   dejaba ver de qué va el trabajo; a sangre sí, y el velo se encarga de
   que el texto siga teniendo contraste encima. */
.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  /* La regla genérica de section da 96px arriba y abajo; aquí sobran. */
  padding: 0;
  max-width: 1320px;
  margin: 20px auto 0;
  min-height: 600px;
  background: var(--ink-1, #15130f);
}
.hero-foto {
  position: absolute;
  inset: 0;
  overflow: hidden;
  will-change: transform;
}
.hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* La guardia queda en el tercio bajo y la cabeza del señor demonio
     arriba; 42% centra el encuadre en la figura, no en el fondo. */
  object-position: 50% 42%;
  filter: saturate(1.14) contrast(1.06);
  /* El sobreescalado deja margen para el paralaje y el ken-burns sin que
     asome el fondo por ningún borde. */
  transform: scale(1.04);
}
/* Sin movimiento.js solo se ve la primera; las otras dos esperan debajo. */
.hero-foto img + img { opacity: 0; }
.hero-velo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  /* Dos capas: la radial hunde las esquinas y la lineal carga el lado
     izquierdo, que es donde va el texto. El centro-derecha se queda
     limpio para que se vea la miniatura. */
  background:
    radial-gradient(120% 90% at 78% 45%, rgba(21,19,15,0) 30%, rgba(21,19,15,.72) 100%),
    linear-gradient(90deg, rgba(21,19,15,.66) 0%, rgba(21,19,15,.12) 58%);
}
.hero-texto {
  position: relative;
  /* El subrayado de «vitrina» es un ::after en z-index:-1. Sin contexto
     propio se iba detrás de la foto en lugar de quedarse detrás del
     texto. */
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 620px;
  min-height: 600px;
  padding: 64px 48px;
}
.hero-pie {
  position: absolute;
  right: 20px;
  bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: calc(100% - 40px);
}
.hero-llamada {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}
.hero-foto-etiqueta {
  padding: 9px 13px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  font-family: inherit;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s, color .25s;
}
.hero-eyebrow {
  font-size: 10.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(48px, 8vw, 104px);
  line-height: .96;
  margin-bottom: 26px;
  letter-spacing: -.02em;
}
.hero-sub {
  font-size: 19px;
  max-width: 640px;
  line-height: 1.55;
  margin-bottom: 48px;
}
.hero-stats {
  display: grid;
  /* Una columna por cifra, sean las que sean. Con repeat(4) fijo y tres
     cifras quedaba una columna vacía y el bloque descentrado dentro de sus
     filetes. */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: 52px;
  max-width: 760px;
}
.stat-num {
  display: block;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.02em;
}
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ── Section base ── */
section { padding: 96px 0; position: relative; z-index: 2; }
.section-head { margin-bottom: 56px; }
.section-eyebrow {
  display: block;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.section-head h2 {
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -.02em;
  margin-bottom: 18px;
}
.section-head .sub {
  font-size: 17.5px;
  max-width: 660px;
  line-height: 1.55;
}

/* ── Hub de servicios: enlazado interno visible y rastreable ── */
.servicios-hub { border-top: 1px solid var(--rule-soft); background: var(--bg-2); }
.servicios-hub-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 22px;
}
.servicio-hub-card {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-height: 270px;
  padding: 28px;
  border: 2px solid var(--ink-1);
  border-radius: 4px;
  background: var(--bg-card);
  box-shadow: 5px 5px 0 var(--ink-1);
}
.servicio-hub-card:nth-child(4) { grid-column: 2 / span 2; }
.servicio-hub-card span {
  color: var(--seal);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.servicio-hub-card h3 {
  margin: 12px 0 10px;
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 600;
  line-height: 1.08;
}
.servicio-hub-card p { margin-bottom: 24px; color: var(--ink-2); }
.servicio-hub-card a {
  margin-top: auto;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.servicio-hub-card a:hover { color: var(--seal); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all .25s ease;
  background: none;
}
.btn-full { width: 100%; }

/* ── Juego tabs ── */
.juego-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 auto 36px;
  padding: 6px;
}
.juego-tabs-wrap { text-align: center; }
.juego-tab {
  padding: 12px 26px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all .2s;
  background: none;
}
.juego-tab[disabled] { opacity: .35; cursor: not-allowed; }
.juego-panel { display: none; }
.juego-panel.active { display: block; animation: fadeIn .35s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.juego-blurb { text-align: center; margin-bottom: 40px; font-size: 15px; }

/* ── Tarifas grid ── */
.tarifas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.tar-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s, border-color .25s;
}
/* Es una tabla comparativa: si cada cabecera mide lo suyo, el filete que la
   cierra cae a alturas distintas y la lectura en horizontal se rompe.

   Aquí hubo primero un min-height único de 234 px y luego cuatro medidos a
   mano, uno por panel. Los dos enfoques estaban mal por el mismo motivo:
   son números atados al texto. Cada vez que se reescribía el copy de una
   tarjeta había que volver a medir, y en la práctica se olvidaba —pasó
   tres veces seguidas—.

   Lo resuelve subgrid, y no hacía falta que las cuatro líneas de servicio
   tuvieran la misma estructura: basta con que la tengan las tarjetas de un
   mismo panel, que es donde hay que alinear, porque solo se ve uno a la
   vez. Cada tarjeta tiene exactamente dos hijos —cabecera y cuerpo— así
   que ocupa dos filas de la rejilla y hereda sus alturas. La fila de las
   cabeceras mide lo que mida la más alta, sola, para siempre. */
.tar-head { padding: 28px 28px 22px; position: relative; }
@media (min-width: 601px) {
  .tarifas-grid { grid-template-rows: auto 1fr; }
  .tar-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 2;
  }
  /* Un ítem de rejilla no baja de su ancho mínimo salvo que se le diga.
     Sin esto, la cabecera del nivel de nombre más largo —«High Quality
     Speedpainting»— medía 307 px dentro de una tarjeta de 276 y el
     overflow:hidden de .tar-card se comía el sobrante. */
  .tar-head, .tar-body { min-width: 0; }
}
.tar-tier-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  /* El nombre salta a línea completa cuando no cabe junto al numeral.
     Sin esto, «High Quality Speedpainting» se partía a media palabra
     en la columna estrecha de cuatro tarjetas. */
  flex-wrap: wrap;
}
.tar-numeral {
  font-size: 64px;
  line-height: .9;
  flex-shrink: 0;
  font-weight: 900;
  letter-spacing: -.04em;
}
.tar-names { flex: 1 1 150px; min-width: 0; padding-top: 6px; }
.tar-name {
  font-size: 24px;
  overflow-wrap: break-word;
  font-weight: 700;
  margin-bottom: 6px;
  line-height: 1.15;
  letter-spacing: -.01em;
}
.tar-badge {
  display: inline-block;
  font-size: 9px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 4px 10px;
  font-weight: 600;
}
.tar-icon-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
}
.tar-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 18px;
}
.tar-tag {
  font-size: 10.5px;
  letter-spacing: .04em;
  font-weight: 600;
  padding: 5px 10px;
  line-height: 1;
  white-space: nowrap;
}
.tar-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.tar-desc {
  font-size: 14.5px;
  line-height: 1.5;
  flex: 1;
}
.tar-body {
  padding: 22px 28px 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.tar-features {
  list-style: none;
  margin-bottom: 24px;
  flex: 1;
}
.tar-features li {
  padding: 11px 0;
  font-size: 14.5px;
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.tar-price-box {
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 18px;
}
.tar-price-label {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}
.tar-price-amount {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1;
}
.tar-price-note { font-size: 11px; margin-top: 6px; }
.tar-price-note .iva { font-weight: 700; }

/* ── Galería ── */
.galeria-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1040px;
  margin: 0 auto;
}
.galeria-item {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s;
}
.galeria-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.galeria-item:hover img { transform: scale(1.05); }

/* ═══ ACORDEÓN DE NIVELES ═══════════════════════════════════════ */
.nivel-accordions {
  border-top: 2px solid var(--ink-1);
  margin-bottom: 40px;
}
.nivel-accordion {
  border-bottom: 2px solid var(--ink-1);
}

.nivel-acc-header {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.nivel-acc-header:hover { background: var(--bg-2); }

/* Los cuatro distintivos llevaban su color en un style= del HTML, y eran
   azul, verde, ámbar y violeta de una paleta que no existe en esta web.
   Aquí van los de casa, ordenados como una rampa: del azul claro al azul
   profundo, al bermellón y a la tinta. Los cuatro pasan el 4.5:1 en blanco. */
.nivel-acc-badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: var(--ink-2);
  padding: 4px 10px;
  border-radius: 3px;
  min-width: 36px;
  text-align: center;
}
.nivel-acc-badge.n1  { background: var(--nivel-n1); }
.nivel-acc-badge.n1p { background: var(--nivel-n1p); }
.nivel-acc-badge.n2  { background: var(--nivel-n2); }
.nivel-acc-badge.n3  { background: var(--nivel-n3); }
.nivel-acc-name {
  font-size: 16px;
  font-weight: 700;
  flex: 1;
}
.nivel-acc-meta {
  font-size: 11px;
  white-space: nowrap;
}
.nivel-acc-arrow {
  font-size: 18px;
  line-height: 1;
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
}
.nivel-acc-header[aria-expanded="true"] .nivel-acc-arrow {
  transform: rotate(180deg);
}

/* Cuerpo del acordeón */
.nivel-acc-body {
  display: none;
  padding-bottom: 28px;
  animation: accSlideDown .3s ease;
}
.nivel-acc-body.open { display: block; }
@keyframes accSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══ MOSAICO DE FOTOS ══════════════════════════════════════════ */
/* CSS columns = masonry natural sin JS de layout */
.mosaic-grid {
  columns: 3;
  column-gap: 10px;
}
/* Cada foto mantiene su proporción original — sin recorte forzado */
.mosaic-item {
  break-inside: avoid;
  margin-bottom: 10px;
  aspect-ratio: unset !important;  /* sobreescribe el 4/5 de galeria-item */
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s;
}
.mosaic-item img {
  width: 100%;
  height: auto !important; /* proporción natural, no recorte */
  display: block;
  transition: transform .4s ease;
}
.mosaic-item:hover img { transform: scale(1.04); }

/* Responsive */
@media (max-width: 900px) {
  .mosaic-grid { columns: 2; }
  .nivel-acc-name { font-size: 15px; }
}
@media (max-width: 480px) {
  .mosaic-grid { columns: 2; column-gap: 7px; }
  .mosaic-item  { margin-bottom: 7px; }
  .nivel-acc-header { padding: 16px 2px; gap: 10px; }
  .nivel-acc-name { font-size: 14px; }
  .nivel-acc-meta { display: none; } /* en móvil pequeño el meta es ruido */
}
.galeria-item .gi-art {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -.02em;
}
.galeria-item .gi-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 22px;
  opacity: 0;
  transition: opacity .25s;
}
.galeria-item:hover .gi-overlay { opacity: 1; }
.gi-tag {
  display: block;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}

/* ── Reseñas reales en Google ── */
.resenas-google-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: -4px 0 30px;
  font-size: 14px;
}
.resenas-google-summary strong { font-size: 22px; }
.resenas-google-summary-stars,
.resena-google-estrellas {
  /* El ámbar de antes (#e8a317) daba 1.8:1 sobre el papel: las estrellas se
     leían peor que el texto que acompañan. */
  color: var(--oro);
  letter-spacing: .08em;
}
.resena-google-fuente {
  margin-left: 10px;
  font-weight: 800;
  text-underline-offset: 4px;
}
.resenas-google-lista {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 22px;
}
.resena-google-item {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-height: 238px;
  padding: 28px;
}
.resena-google-item:nth-child(4),
.resena-google-item:nth-child(5) { grid-column: span 3; }
.resena-google-estrellas {
  margin-bottom: 18px;
  font-size: 18px;
}
.resena-google-item blockquote {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.7;
}
.resena-google-item blockquote p { margin: 0; }
.resena-google-autor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid currentColor;
}
.resena-google-item cite {
  font-style: normal;
  font-weight: 800;
}
.resena-google-autor span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.resenas-google-update {
  max-width: 780px;
  margin: 0 auto 34px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}
@keyframes resena-flotar {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
#resenas { scroll-margin-top: 80px; }
#resenas .resena-google-item {
  animation: resena-flotar 6s ease-in-out infinite;
}
#resenas .resena-google-item:nth-child(even) { animation-delay: -3s; }
#resenas .resena-google-item:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  #resenas .resena-google-item { animation: none; }
}
.resenas-google-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 980px;
  margin: 34px auto 0;
  padding: 38px;
}
.resenas-google-label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  margin-bottom: 24px;
  padding: 5px 11px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.resenas-google-card h3 {
  margin-bottom: 12px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}
.resenas-google-card p {
  max-width: 590px;
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 1.7;
}
.resenas-google-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
}
.resenas-google-policy {
  margin: 28px auto 0;
  max-width: 760px;
  text-align: center;
  font-size: 13px;
}
.gi-cap { font-size: 14px; font-weight: 600; line-height: 1.35; }

/* ── Sobre Mí ── */
.sobremi-grid {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 56px;
  align-items: center;
  max-width: 1000px;
  margin: 0 auto;
}
.sobremi-portrait {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 36px;
  position: relative;
}
.sobremi-portrait img { width: 100%; height: auto; max-width: 220px; }
/* Sin tamaño propio caía en el 1.5em del navegador: 24 px frente a los
   hasta 60 px del resto de rótulos de sección, con la misma cinta detrás.
   Va un escalón por debajo porque vive dentro de una columna estrecha. */
.sobremi-texto h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.01em;
  margin-bottom: 22px;
}
.sobremi-texto p { margin-bottom: 16px; line-height: 1.75; }
.sobremi-stats {
  display: flex;
  gap: 36px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.sobremi-stat .num {
  display: block;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}
.sobremi-stat .lbl {
  display: block;
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.firma { margin-top: 28px; font-size: 15px; font-weight: 600; }

/* ── Taller ── */
.taller-banner {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  margin: 0 auto 44px;
  font-size: 14px;
  letter-spacing: .04em;
}
.taller-banner-wrap { text-align: center; }
.taller-pulse {
  width: 10px; height: 10px;
  border-radius: 50%;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.taller-grid {
  display: grid;
  /* El calendario ya no crece sin límite, así que su columna se ajusta a lo
     que ocupa y el panel de al lado se queda con el resto. Antes el panel
     del calendario medía 700 px para un calendario de 430. */
  grid-template-columns: minmax(0, 520px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.taller-panel { padding: 28px; min-width: 0; max-width: 100%; overflow: hidden; }
.taller-panel h3 {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 22px;
}
.mcal-header {
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 18px;
  text-transform: capitalize;
}
.mcal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  /* Las casillas son cuadradas (aspect-ratio:1). Sin tope, en una columna de
     700 px salían de 90 px y el panel medía 1.070 px de alto frente a los
     180 px del panel de al lado: media pantalla de hueco. Con este tope la
     casilla queda en unos 55 px, por encima del objetivo táctil. */
  max-width: 430px;
  margin-inline: auto;
}
.mcal-dow {
  text-align: center;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 0;
}
.mcal-day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 500;
}
.mcal-day.empty { visibility: hidden; }
/* .35 dejaba el número casi invisible; el mes entero se leía como
   deshabilitado. */
.mcal-day.past { opacity: .5; }
.mcal-legend {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: .04em;
}
.mcal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.mcal-dot { width: 12px; height: 12px; }

/* WIP list */
.trabajo-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 0;
}
.trabajo-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  font-size: 20px;
  flex-shrink: 0;
}
.trabajo-info { flex: 1; min-width: 0; }
.trabajo-titulo { font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.trabajo-nivel { font-size: 12px; }
.trabajo-progress {
  margin-top: 8px;
  height: 4px;
  position: relative;
}
.trabajo-progress::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--p, 0%);
}
.trabajo-badge {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 5px 11px;
  white-space: nowrap;
}

/* ── Contacto ── */
.cnt-card {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px;
  text-align: center;
}
.cnt-quote {
  font-size: 26px;
  line-height: 1.45;
  margin-bottom: 40px;
  font-style: italic;
}
.cnt-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 32px;
}
.cnt-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
}
.cnt-row .k {
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  min-width: 110px;
  text-align: right;
}
.cnt-row .v {
  font-size: 17px;
  text-align: left;
}
.cnt-row a { text-decoration: none; }
.cnt-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── Footer ── */
footer { padding: 72px 0 36px; text-align: center; position: relative; z-index: 2; }
.footer-brand { font-size: 26px; font-weight: 700; margin-bottom: 10px; letter-spacing: -.01em; }
.footer-meta { font-size: 14px; margin-bottom: 24px; }
.footer-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.footer-links a {
  text-decoration: none;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
}
.footer-copy { font-size: 11px; margin-top: 32px; letter-spacing: .04em; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .servicios-hub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicio-hub-card,
  .servicio-hub-card:nth-child(4) { grid-column: auto; }
  .tarifas-grid { grid-template-columns: repeat(2, 1fr); }
  .galeria-grid { grid-template-columns: repeat(2, 1fr); }
  .taller-grid { grid-template-columns: 1fr; }
  .sobremi-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
  .resena-google-item,
  .resena-google-item:nth-child(4),
  .resena-google-item:nth-child(5) { grid-column: span 3; }
  .sobremi-portrait { max-width: 280px; margin: 0 auto; }
  .hero-stats { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  /* La cabecera crece al bajar los enlaces a su propia fila. */
  html { --altura-cabecera: 132px; }
  .servicios-hub-grid { grid-template-columns: 1fr; }
  .servicio-hub-card { min-height: 0; }
  .tarifas-grid { grid-template-columns: 1fr; }
  .galeria-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: clamp(36px, 11vw, 64px); }
  .cnt-card { padding: 40px 24px; }
  .resena-google-fuente { width: 100%; margin-left: 0; text-align: center; }
  .resena-google-item,
  .resena-google-item:nth-child(4),
  .resena-google-item:nth-child(5) { grid-column: 1 / -1; min-height: 0; padding: 24px 20px; }
  .resenas-google-card { min-height: 0; padding: 28px 22px; }
  .resenas-google-actions { width: 100%; }
  .resenas-google-actions .btn { width: 100%; }
  /* Aquí los enlaces estaban en display:none y nada los sustituía: desde el
     móvil no se llegaba a Tarifas, Galería, Empresas ni Contacto salvo
     desplazando la página entera. Ahora la marca y el botón se quedan
     arriba y los enlaces bajan a una tira propia que se desplaza en
     horizontal —el mismo recurso que usan las pestañas de Material. */
  .header-inner { flex-wrap: wrap; gap: 12px; row-gap: 10px; padding: 12px 0; }
  .brand-block { flex: 1 1 auto; min-width: 0; gap: 12px; }
  .brand-mark { width: 44px; height: 44px; }
  .brand-name { font-size: 18px; white-space: nowrap; }
  .nav-cta { flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 48px; }
  nav {
    order: 3;
    flex: 1 0 100%;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    margin: 0 -20px;
    padding: 0 20px;
  }
  nav::-webkit-scrollbar { display: none; }
  nav a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    /* 48 px de alto: el mínimo que Lighthouse da por bueno en un objetivo
       táctil. Antes estos enlaces medían 19 px. */
    min-height: 48px;
    padding: 0 12px;
  }
  /* Lighthouse da por bueno un objetivo táctil a partir de 48×48 px. Estos
     enlaces medían entre 19 y 21 px de alto. */
  .servicio-hub-card a,
  .footer-links a,
  .cnt-row .v a,
  .galeria-instagram-note a {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
  }
  .footer-links { gap: 8px 24px; }
  .juego-tab { min-height: 48px; }
  .container { padding: 0 20px; }
}


/* ═══════════════════════════════════════════════════════════
   THEME FUSION — Washi · Tinta · Bermellón
   ═══════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   THEME — FUSIÓN
   Clásico × Brutalist × Sumi-e.
   Papel washi + tinta · estructura azul marino + Inter ·
   bordes duros y sombras desplazadas + sello bermellón.
   Construido en torno a las TARIFAS y la GALERÍA.
   ════════════════════════════════════════════════════ */
[data-theme="fusion"] {
  --bg: #f1ece0;             /* washi / paper */
  --bg-2: #e8e1d0;
  --bg-card: #fbf8f0;
  --bg-3: #15130f;
  --ink-1: #15130f;          /* sumi ink */
  --ink-2: #4a463c;
  /* El gris menor era #837c6e: 3.5:1 sobre el papel, por debajo del 4.5:1
     que pide la AA. Lo llevan pies de foto, etiquetas de cifras, el aviso
     de marcas y el copyright, así que se oscurece en el token y quedan
     todos arreglados a la vez. */
  --ink-3: #635e51;
  --navy: #2b3685;           /* clásico metal */
  --navy-2: #1e2760;
  --navy-soft: #4a56c0;
  /* El bermellón era #c8341c: 4.49:1 sobre papel, 4.06:1 sobre --bg-2. Se
     queda a un pelo de la AA y lo lleva *todo* el texto de acento —rótulos
     menores, firma, claves de contacto—. Un escalón más oscuro lo pone en
     5.7:1 sin salirse del bermellón. */
  --seal: #ad2914;           /* sumi vermillion / clásico red */
  --seal-deep: #95210f;
  --seal-soft: rgba(173,41,20,.10);
  --good: #3f7a4a;
  --oro: #855800;            /* estrellas de reseña, legibles sobre papel */
  /* La única sombra difuminada del sistema. Todo lo demás va con sombra
     desplazada dura; esta existe para despegar la tarjeta de contacto del
     papel y es deliberadamente la excepción. */
  --shadow-float: 0 30px 60px -28px rgba(43,54,133,.4);

  /* Código cromático de los cuatro niveles de acabado. El diseño los quiere
     de cuatro familias distintas —azul, verde, ámbar, violeta— para que el
     nivel se reconozca de un vistazo sin leer la etiqueta. Los valores no
     son los del documento de diseño: aquellos daban entre 2,15:1 y 4,23:1
     con el texto en blanco encima. Estos son los mismos tonos un punto más
     oscuros, ya por encima del 4,5:1. */
  --nivel-n1:  #3472d8;      /* azul     · 4,62:1 */
  --nivel-n1p: #0c875e;      /* verde    · 4,52:1 */
  --nivel-n2:  #a46a07;      /* ámbar    · 4,52:1 */
  --nivel-n3:  #8558ec;      /* violeta  · 4,56:1 */
  --accent: var(--navy);
  --accent-deep: var(--navy-2);
  --rule: var(--ink-1);
  --rule-soft: rgba(21,19,15,.14);
  /* OJO: 'Shippori Mincho' y 'Noto Serif JP' no están autoalojadas en
     /fonts ni se piden a ningún sitio —la web no llama a Google Fonts a
     propósito—, así que hoy TODOS los rótulos se dibujan con la primera que
     exista en el equipo. En la práctica: Georgia. Si se quiere de verdad el
     mincho, hay que autoalojarlo como se hizo con Inter. */
  /* Dos colores que solo viven en el hero, encima de la foto. El papel y
     el bermellón del sistema están pensados sobre fondo claro y ahí no
     valen: el bermellón sobre el velo da 2,6:1. */
  --amarillo: #f2c200;         /* rótulo del hero sobre el velo */
  --magenta-fluor: #ff0090;    /* AK Interactive Fluor Magenta, el de las minis */
  --papel-sobre-foto: #f1ece0;
  --font-display: 'Shippori Mincho', 'Noto Serif JP', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, sans-serif;

  background: var(--bg);
  color: var(--ink-1);
  font-family: var(--font-body);
  font-size: 16px;
}
[data-theme="fusion"] body { background: var(--bg); color: var(--ink-1); font-family: var(--font-body); font-size: 16px; }

/* Washi texture + faint ink wash corners */
[data-theme="fusion"]::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-conic-gradient(rgba(21,19,15,.06) 0% 25%, transparent 0% 50%) 0 0 / 48px 48px,
    var(--bg);
}
/* Noise layer removed for performance */

[data-theme="fusion"] h1,
[data-theme="fusion"] h2,
[data-theme="fusion"] h3 { font-family: var(--font-display); font-weight: 600; color: var(--ink-1); letter-spacing: 0; }
/* Header */
[data-theme="fusion"] header { background: rgba(241,236,224,.97); border-bottom: 2px solid var(--ink-1); }
[data-theme="fusion"] .brand-mark { background: #fff; border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 3px 3px 0 var(--ink-1); }
[data-theme="fusion"] .brand-mark img { padding: 4px; width: 44px; height: 44px; object-fit: contain; }
[data-theme="fusion"] .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink-1); letter-spacing: .01em; }
[data-theme="fusion"] .brand-tagline { color: var(--seal); font-weight: 600; }
[data-theme="fusion"] nav a { color: var(--ink-1); font-weight: 600; }
[data-theme="fusion"] nav a:hover { color: var(--seal); }
[data-theme="fusion"] .nav-cta { background: var(--navy); color: #fff; border: 2px solid var(--ink-1); box-shadow: 3px 3px 0 var(--ink-1); border-radius: 3px; }
[data-theme="fusion"] .nav-cta:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink-1); }

/* Hero — centered, with a vermillion seal and ink rule */
[data-theme="fusion"] .hero {
  border: 2px solid var(--ink-1);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--ink-1);
}
[data-theme="fusion"] .hero-foto-etiqueta {
  background: var(--bg-card);
  border: 2px solid var(--ink-1);
  border-radius: 2px;
  box-shadow: 3px 3px 0 var(--ink-1);
  color: var(--ink-1);
}
[data-theme="fusion"] .hero-foto-etiqueta:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--seal);
  color: var(--seal);
}
/* El bermellón del sistema no se lee sobre la foto oscura. El amarillo
   es el del handoff y da 11,9:1 sobre el velo. */
[data-theme="fusion"] .hero-eyebrow { color: var(--amarillo); font-weight: 600; letter-spacing: .26em; }
[data-theme="fusion"] .hero-llamada {
  /* Fluor Magenta de AK Interactive: el color real de estas miniaturas,
     muestreado de la propia foto. */
  color: var(--magenta-fluor);
  /* La placa no es decoración. Flotando sobre la foto, el magenta daba
     4,10:1 de media y 1,01:1 en el peor pixel —la frase llega hasta una
     zona clara de la imagen— y hace falta 4,5:1 para 14px en negrita.
     Una sombra no cuenta para el contraste; una placa opaca sí: sobre
     tinta el mismo magenta da 4,96:1 sin tocar el color. */
  background: var(--ink-1);
  border: 2px solid var(--ink-1);
  border-radius: 2px;
  padding: 7px 12px;
  box-shadow: 3px 3px 0 rgba(21,19,15,.55);
}
[data-theme="fusion"] .hero-eyebrow::before { content: '一 '; opacity: .5; }
[data-theme="fusion"] .hero h1 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.02; font-size: clamp(48px, 6.4vw, 88px); }
[data-theme="fusion"] .hero h1 .accent-block { color: var(--navy); }
[data-theme="fusion"] .hero h1 .marker {
  display: inline-block;
  position: relative;
  padding: 0 .08em;
  /* Va sobre el bloque bermellón sólido, no sobre papel. */
  color: var(--papel-sobre-foto);
}
[data-theme="fusion"] .hero h1 .marker::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: .06em;
  height: .38em;
  background: var(--seal);
  /* Sobre papel bastaba un 26%. Sobre la foto oscura tiene que ser un
     bloque sólido: si no, no se ve que hay subrayado. */
  opacity: 1;
  z-index: -1;
}
[data-theme="fusion"] .hero-sub { color: var(--papel-sobre-foto); font-size: 18.5px; max-width: 470px; margin-bottom: 34px; text-wrap: pretty; }
[data-theme="fusion"] .hero h1 .hero-h1-lema { color: var(--papel-sobre-foto); }
[data-theme="fusion"] .hero-sub strong { color: var(--ink-1); }
[data-theme="fusion"] .stat-num { font-family: var(--font-display); color: var(--navy); font-weight: 600; }
[data-theme="fusion"] .stat-label { color: var(--ink-3); }
[data-theme="fusion"] .hero-stats { margin: 0 auto 48px; padding: 26px 0; border-top: 2px solid var(--ink-1); border-bottom: 2px solid var(--ink-1); }
[data-theme="fusion"] .hero-stats > * { border-right: 1px solid var(--rule-soft); }
[data-theme="fusion"] .hero-stats > *:last-child { border-right: none; }
[data-theme="fusion"] .hero-cta { justify-content: flex-start; }

/* Section heads — centered, ink rule + seal */
[data-theme="fusion"] .section-head { text-align: center; }
[data-theme="fusion"] .section-eyebrow { color: var(--seal); font-weight: 600; letter-spacing: .24em; }
[data-theme="fusion"] .section-head h2 { font-weight: 600; }
[data-theme="fusion"] .section-head h2::after {
  content: '';
  display: block;
  width: 56px; height: 3px;
  background: var(--seal);
  margin: 18px auto 0;
}
[data-theme="fusion"] .section-head .sub { color: var(--ink-2); margin-left: auto; margin-right: auto; }
[data-theme="fusion"] section { border-top: 1px solid var(--rule-soft); }
[data-theme="fusion"] #tarifas { background: var(--bg-2); }
[data-theme="fusion"] #galeria { background: var(--bg); }
[data-theme="fusion"] #resenas { background: rgba(232,225,208,.55); }
[data-theme="fusion"] #sobre-mi { background: var(--bg-2); }
[data-theme="fusion"] #taller { background: var(--bg); }
/* #contacto se pintó oscuro en su día; hoy es transparente sobre el papel
   (más abajo, en el bloque del fondo de ajedrez). El color de texto crema
   que quedaba aquí dejaba invisible todo lo que no llevara color propio. */

/* Buttons */
[data-theme="fusion"] .btn { border-radius: 3px; letter-spacing: .18em; }
[data-theme="fusion"] .btn-primary { background: var(--navy); color: #fff; border: 2px solid var(--ink-1); box-shadow: 4px 4px 0 var(--ink-1); }
[data-theme="fusion"] .btn-primary:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--seal); }
[data-theme="fusion"] .btn-secondary { background: var(--bg-card); color: var(--ink-1); border: 2px solid var(--ink-1); box-shadow: 4px 4px 0 var(--ink-1); }
[data-theme="fusion"] .btn-secondary:hover { background: var(--bg); transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--ink-1); }

/* ═══ TARIFAS — el corazón del diseño ═══ */
[data-theme="fusion"] .juego-tabs { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 4px 4px 0 var(--ink-1); padding: 5px; gap: 4px; }
[data-theme="fusion"] .juego-tab { color: var(--ink-2); border-radius: 2px; font-weight: 600; }
[data-theme="fusion"] .juego-tab.active { background: var(--navy); color: #fff; }
[data-theme="fusion"] .juego-tab[disabled] { color: var(--ink-3); }
[data-theme="fusion"] .juego-blurb { color: var(--ink-2); font-style: italic; }

[data-theme="fusion"] .tar-card { background: linear-gradient(155deg, #fcf9f1 0%, #f3eede 42%, #e7e6f0 100%); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink-1); }
[data-theme="fusion"] .tar-card:hover { transform: translate(-3px,-3px); box-shadow: 10px 10px 0 var(--navy); }
[data-theme="fusion"] .tar-head { border-bottom: 2px solid var(--ink-1); background: linear-gradient(180deg, rgba(43,54,133,.04), transparent); }
[data-theme="fusion"] .tar-card.is-popular { border-color: var(--seal); box-shadow: 6px 6px 0 var(--seal); background: linear-gradient(155deg, #fdf6f0 0%, #f6ece4 45%, #f0ddd8 100%); }
[data-theme="fusion"] .tar-card.is-popular:hover { box-shadow: 10px 10px 0 var(--seal); }
[data-theme="fusion"] .tar-card.is-popular .tar-head { background: linear-gradient(180deg, rgba(200,52,28,.08), transparent); border-color: var(--seal); }
[data-theme="fusion"] .tar-card.is-popular::after {
  content: '推 · RECOMENDADO';
  position: absolute;
  top: -1px; right: -1px;
  background: var(--seal);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 9px;
  letter-spacing: .16em;
  padding: 7px 14px;
  z-index: 3;
  font-weight: 700;
  border-bottom-left-radius: 4px;
}
[data-theme="fusion"] .tar-numeral { font-family: var(--font-display); color: var(--seal); font-weight: 600; }
[data-theme="fusion"] .tar-name { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; font-size: 25px; }
[data-theme="fusion"] .tar-name em { color: var(--seal); font-style: italic; }
[data-theme="fusion"] .tar-badge { background: var(--navy); color: #fff; border-radius: 2px; font-weight: 700; }
[data-theme="fusion"] .tar-desc { color: var(--ink-2); font-size: 14.5px; }
[data-theme="fusion"] .tar-icon { color: var(--seal); }

/* tag chips — claridad de servicio */
[data-theme="fusion"] .tar-tag {
  background: var(--bg-2);
  color: var(--ink-1);
  border: 1px solid var(--ink-1);
  border-radius: 2px;
}
[data-theme="fusion"] .tar-tag.is-key { background: var(--navy); color: #fff; border-color: var(--navy-2); }
[data-theme="fusion"] .tar-card.is-popular .tar-tag.is-key { background: var(--seal); border-color: var(--seal-deep); }

[data-theme="fusion"] .tar-features li { border-bottom: 1px dashed var(--rule-soft); color: var(--ink-1); font-size: 14.5px; }
/* El filete del último rasgo no separaba nada: quedaba colgando sobre el
   hueco anterior al precio. */
[data-theme="fusion"] .tar-features li:last-child { border-bottom: none; }
[data-theme="fusion"] .tar-features li::before { content: '✓'; color: var(--navy); font-weight: 800; }
[data-theme="fusion"] .tar-card.is-popular .tar-features li::before { color: var(--seal); }

/* PRICE — centralizado, grande, inequívoco */
/* Columna centrada: el importe lleva recuadro propio para la trama y,
   suelto, se alinearía en la misma línea que la nota del IVA. */
[data-theme="fusion"] .tar-price-box {
  background: var(--ink-1); color: var(--bg); border: none; border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
[data-theme="fusion"] .tar-card.is-popular .tar-price-box { background: var(--seal); }
/* Sobre el bermellón, el crema al 66% daba 2.7:1. Blanco al 90% da 4.6:1 y
   sigue siendo más discreto que el importe. */
[data-theme="fusion"] .tar-price-label { color: rgba(255,255,255,.9); }
[data-theme="fusion"] .tar-price-amount { font-family: var(--font-display); color: #fff; font-weight: 600; }
[data-theme="fusion"] .tar-price-note {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-content: center;
}
/* Distintivo del IVA en positivo: es la duda que más frena a la hora
   de pedir presupuesto, así que conviene que se lea de un vistazo. */
[data-theme="fusion"] .tar-price-note .iva {
  background: #fff;
  color: var(--ink-1);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .14em;
  padding: 3px 9px;
  border-radius: 3px;
  text-transform: uppercase;
  border: none;
}
[data-theme="fusion"] .tar-card.is-popular .tar-price-note .iva {
  background: #fff;
  color: var(--seal);
}

/* ═══ GALERÍA — centralizada ═══ */
[data-theme="fusion"] .galeria-item { border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink-1); }
[data-theme="fusion"] .galeria-item:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--seal); }
[data-theme="fusion"] .galeria-item .gi-art { font-family: var(--font-display); }
[data-theme="fusion"] .galeria-item .gi-overlay { background: linear-gradient(180deg, transparent 45%, rgba(21,19,15,.93)); color: var(--bg); }
[data-theme="fusion"] .gi-tag { background: var(--seal); color: #fff; display: inline-block; padding: 3px 8px; border-radius: 2px; font-weight: 700; }

/* Reseñas reales: selección visible y acceso directo al Perfil de Empresa. */
[data-theme="fusion"] .resenas-google-summary,
[data-theme="fusion"] .resenas-google-update { color: var(--ink-2); }
[data-theme="fusion"] .resena-google-fuente { color: var(--navy); }
[data-theme="fusion"] .resena-google-fuente:hover { color: var(--seal); }
[data-theme="fusion"] .resena-google-item {
  background: var(--bg-card);
  color: var(--ink-2);
  border: 2px solid var(--ink-1);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink-1);
}
[data-theme="fusion"] .resena-google-item:nth-child(even) { box-shadow: 5px 5px 0 var(--navy); }
[data-theme="fusion"] .resena-google-item blockquote { color: var(--ink-2); }
[data-theme="fusion"] .resena-google-autor { border-top-color: var(--rule); }
[data-theme="fusion"] .resena-google-item cite { color: var(--ink-1); }
[data-theme="fusion"] .resena-google-autor span { color: var(--navy); }
[data-theme="fusion"] .resenas-google-card {
  background: var(--bg-card);
  border: 2px solid var(--ink-1);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--ink-1);
}
[data-theme="fusion"] .resenas-google-label {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--ink-1);
  border-radius: 2px;
}
[data-theme="fusion"] .resenas-google-card h3 {
  color: var(--ink-1);
  font-family: var(--font-display);
  font-weight: 600;
}
[data-theme="fusion"] .resenas-google-card p,
[data-theme="fusion"] .resenas-google-policy { color: var(--ink-2); }
[data-theme="fusion"] .resenas-google-policy::before {
  content: '✓';
  margin-right: 8px;
  color: var(--good);
  font-weight: 800;
}

/* Sobre mí */
/* La única sombra bermellón grande del diseño. Es deliberada: marca el
   cierre de la última pestaña igual que la sombra flotante marca el
   cierre de la página. */
[data-theme="fusion"] .sobremi-portrait { background: #fff; border: 2px solid var(--ink-1); border-radius: 6px; box-shadow: 8px 8px 0 var(--seal); padding: 26px; display: grid; place-items: center; aspect-ratio: 1; max-width: 280px; }
[data-theme="fusion"] .sobremi-portrait img { width: 100%; max-width: 180px; height: auto; }
[data-theme="fusion"] .sobremi-stat .num { font-family: var(--font-display); color: var(--navy); font-weight: 600; }
[data-theme="fusion"] .sobremi-stat .lbl { color: var(--ink-3); }
[data-theme="fusion"] .sobremi-texto p { color: var(--ink-2); font-size: 17px; line-height: 1.8; }
[data-theme="fusion"] .sobremi-texto p strong { color: var(--ink-1); }
[data-theme="fusion"] .sobremi-texto p strong em { color: var(--seal); font-style: normal; }
[data-theme="fusion"] .firma { font-family: var(--font-display); color: var(--seal); font-weight: 600; font-size: 20px; }

/* Taller */
[data-theme="fusion"] .taller-banner { background: var(--good); color: #fff; border: 2px solid var(--ink-1); border-radius: 3px; box-shadow: 3px 3px 0 var(--ink-1); font-weight: 600; }
[data-theme="fusion"] .taller-pulse { background: #fff; color: #fff; }
[data-theme="fusion"] .taller-panel { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink-1); }
[data-theme="fusion"] .taller-panel h3 { color: var(--navy); }
[data-theme="fusion"] .mcal-header { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; font-size: 20px; }
[data-theme="fusion"] .mcal-dow { color: var(--ink-3); }
[data-theme="fusion"] .mcal-day { color: var(--ink-2); border: 1px solid var(--rule-soft); border-radius: 3px; }
[data-theme="fusion"] .mcal-day.libre { background: rgba(63,122,74,.16); color: var(--good); border-color: rgba(63,122,74,.4); }
[data-theme="fusion"] .mcal-day.ocupado { background: var(--seal-soft); color: var(--seal); border-color: rgba(200,52,28,.4); }
[data-theme="fusion"] .mcal-day.cita { background: rgba(43,54,133,.1); color: var(--navy); border-color: var(--navy-soft); }
[data-theme="fusion"] .mcal-dot.libre { background: var(--good); }
[data-theme="fusion"] .mcal-dot.ocupado { background: var(--seal); }
[data-theme="fusion"] .mcal-dot.cita { background: var(--navy); }
[data-theme="fusion"] .trabajo-card { border-bottom: 1px solid var(--rule-soft); }
[data-theme="fusion"] .trabajo-card:last-child { border-bottom: none; }
[data-theme="fusion"] .trabajo-icon { background: var(--navy); color: #fff; border: 2px solid var(--ink-1); border-radius: 6px; }
[data-theme="fusion"] .trabajo-titulo { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; font-size: 16px; }
[data-theme="fusion"] .trabajo-nivel { color: var(--ink-3); }
[data-theme="fusion"] .trabajo-progress { background: var(--bg-2); border-radius: 3px; }
[data-theme="fusion"] .trabajo-progress::after { background: var(--navy); }
[data-theme="fusion"] .trabajo-badge { background: var(--ink-1); color: var(--bg); border-radius: 2px; font-weight: 700; }

/* Contacto — tarjeta flotante sobre el papel/ajedrez.
   El rótulo va como el de cualquier otra sección: blanco sobre la placa de
   tinta. Tenía color de tinta —heredado de cuando la sección era oscura—
   y quedaba tinta sobre tinta: contraste 1:1, ilegible. */
/* Deliberadamente la excepción del sistema: es la única superficie con
   esquina de 16 px, filete de 1 px al 10 % y sombra difuminada. Flota
   sobre el papel en lugar de apoyarse en él, y marca así el final de la
   página. Todo lo demás va con filete de 2 px y sombra dura. */
[data-theme="fusion"] .cnt-card {
  background: rgba(251, 248, 240, .86);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(21, 19, 15, .10);
  border-radius: 16px;
  box-shadow: var(--shadow-float);
}
[data-theme="fusion"] .cnt-quote { font-family: var(--font-display); font-style: italic; color: var(--ink-1); font-size: 26px; line-height: 1.4; font-weight: 500; }
[data-theme="fusion"] .cnt-row { border-bottom: 1px solid var(--rule-soft); }
[data-theme="fusion"] .cnt-row:last-child { border-bottom: none; }
[data-theme="fusion"] .cnt-row .k { color: var(--seal); }
[data-theme="fusion"] .cnt-row .v a { color: var(--ink-1); }
[data-theme="fusion"] .cnt-row .v a:hover { color: var(--seal); }

/* Footer */
[data-theme="fusion"] footer { border-top: 2px solid var(--ink-1); background: var(--bg-2); }
[data-theme="fusion"] .footer-brand { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; }
[data-theme="fusion"] .footer-meta { color: var(--ink-3); font-style: italic; }
[data-theme="fusion"] .footer-links a { color: var(--ink-1); }
[data-theme="fusion"] .footer-links a:hover { color: var(--seal); }
[data-theme="fusion"] .footer-copy { color: var(--ink-3); }

/* ════════════════════════════════════════════════════
   FONDO DE AJEDREZ EN TODA LA WEB
   El patrón vive en la capa fija ::before (definida arriba) y las
   secciones se vuelven semitransparentes para que se vea de forma
   continua en toda la página.
   ════════════════════════════════════════════════════ */
[data-theme="fusion"] #tarifas  { background: rgba(232,225,208,.55); }
[data-theme="fusion"] #galeria  { background: transparent; }
[data-theme="fusion"] #sobre-mi { background: rgba(232,225,208,.55); }
[data-theme="fusion"] #taller   { background: transparent; }
[data-theme="fusion"] #contacto { background: transparent; }


/* ═══════════════════════════════════════════════════════════
   FUSION COMPONENT OVERRIDES
   ═══════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────
   FUSION COMPONENT OVERRIDES
   (components not covered by base+theme)
   ──────────────────────────────────────── */

/* Buttons */
[data-theme="fusion"] .btn-primary {
  background: var(--navy); color: #fff;
  border: 2px solid var(--ink-1); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink-1);
}
[data-theme="fusion"] .btn-primary:hover {
  transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--ink-1);
  background: var(--navy-2);
}
[data-theme="fusion"] .btn-secondary {
  background: transparent; color: var(--ink-1);
  border: 2px solid var(--ink-1); border-radius: 3px;
  box-shadow: 4px 4px 0 var(--ink-1);
}
/* En el resto del sitio el fondo transparente deja ver el papel y el
   botón se lee. En el hero, debajo hay una foto oscura: tinta sobre
   transparente desaparecía. Aquí la placa tiene que ser opaca. */
[data-theme="fusion"] .hero .btn-secondary { background: var(--bg-card); }
[data-theme="fusion"] .hero .btn-secondary:hover { background: var(--bg); }
[data-theme="fusion"] .btn-secondary:hover {
  transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--seal);
  border-color: var(--seal); color: var(--seal);
}

/* Juego tabs */
[data-theme="fusion"] .juego-tabs {
  background: var(--bg-2); border: 2px solid var(--ink-1);
  border-radius: 3px; box-shadow: 3px 3px 0 var(--ink-1);
  display: inline-flex; gap: 4px; padding: 5px;
  margin-left: auto; margin-right: auto; margin-bottom: 14px;
}
[data-theme="fusion"] .juego-tab {
  font-family: var(--font-ui); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 600;
  border: none; background: none; color: var(--ink-2); cursor: pointer;
  padding: 10px 22px; transition: all .2s; border-radius: 2px;
}
[data-theme="fusion"] .juego-tab.active { background: var(--navy); color: #fff; }
[data-theme="fusion"] .juego-tab:hover:not(.active):not([disabled]) { color: var(--seal); }
[data-theme="fusion"] .juego-panel { display: none; }
[data-theme="fusion"] .juego-panel.active { display: block; animation: fadeInPanel .35s ease; }

/* Tar tags */
.tar-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.tar-tag {
  font-size: 10.5px; letter-spacing: .04em; font-weight: 600;
  padding: 5px 10px; line-height: 1; white-space: nowrap;
}
.tar-price-note { font-size: 11px; margin-top: 6px; }
.tar-price-note .iva { font-weight: 700; }

/* Tar calc */
[data-theme="fusion"] .tar-calc {
  margin-top: 14px; padding: 16px; background: var(--bg-2);
  border: 1px solid rgba(21,19,15,.2); border-radius: 4px;
}
[data-theme="fusion"] .tar-calc-reset { color: var(--ink-3); font-family: var(--font-ui); }
[data-theme="fusion"] .tar-mini-slider { background: rgba(21,19,15,.2); }
[data-theme="fusion"] .tar-mini-slider::-webkit-slider-thumb { background: var(--navy); border: none; }
[data-theme="fusion"] .tar-mini-slider::-moz-range-thumb { background: var(--navy); border: none; }
[data-theme="fusion"] .tar-pts-input {
  border: 2px solid rgba(21,19,15,.3); background: var(--bg-card); color: var(--ink-1);
}
[data-theme="fusion"] .tar-pts-input:focus { border-color: var(--navy); box-shadow: 0 0 0 3px rgba(43,54,133,.12); }

/* Lista w40k */
[data-theme="fusion"] .lista-w40k-wrapper { background: var(--bg-2); border: 1px dashed rgba(21,19,15,.25); border-radius: 4px; }
[data-theme="fusion"] .lista-w40k-label-text { color: var(--navy); }
[data-theme="fusion"] .lista-w40k-hint { color: var(--ink-3); }
[data-theme="fusion"] .lista-w40k-textarea { background: var(--bg); border: 1.5px solid rgba(21,19,15,.25); color: var(--ink-1); border-radius: 3px; }
[data-theme="fusion"] .lista-w40k-textarea:focus { border-color: var(--navy); }
[data-theme="fusion"] .lista-w40k-detected { background: rgba(43,54,133,.08); border-left-color: var(--navy); }
[data-theme="fusion"] .lista-w40k-detected strong { color: var(--navy); }

/* Lightbox */
[data-theme="fusion"] .lightbox { background: rgba(21,19,15,.92); }
[data-theme="fusion"] .lb-inner img { border: 3px solid var(--ink-1); box-shadow: 8px 8px 0 var(--seal); }
[data-theme="fusion"] .lb-close { color: var(--bg); }
[data-theme="fusion"] .lb-close:hover { color: var(--seal); }

/* Modal */
[data-theme="fusion"] .modal-overlay { background: rgba(21,19,15,.82); }
[data-theme="fusion"] .modal-box {
  background: var(--bg-card); border: 2px solid var(--ink-1);
  border-radius: 5px; box-shadow: 8px 8px 0 var(--ink-1);
}
[data-theme="fusion"] .modal-box::before { background: var(--navy); height: 4px; }
[data-theme="fusion"] .modal-head { border-bottom: 2px solid var(--ink-1); }
[data-theme="fusion"] .modal-tier-label { color: var(--seal); font-family: var(--font-ui); }
[data-theme="fusion"] .modal-title { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; }
[data-theme="fusion"] .modal-price-pill {
  background: var(--ink-1); color: var(--bg); border: none;
  font-family: var(--font-display); border-radius: 3px; padding: 6px 16px;
}
[data-theme="fusion"] .modal-close-btn { color: var(--ink-2); }
[data-theme="fusion"] .modal-close-btn:hover { color: var(--seal); }
[data-theme="fusion"] .form-label { font-family: var(--font-ui); color: var(--ink-2); }
[data-theme="fusion"] .form-input,
[data-theme="fusion"] .form-textarea,
[data-theme="fusion"] .form-select {
  background: var(--bg); border: 1.5px solid rgba(21,19,15,.3);
  color: var(--ink-1); border-radius: 3px;
}
[data-theme="fusion"] .form-input:focus,
[data-theme="fusion"] .form-textarea:focus,
[data-theme="fusion"] .form-select:focus {
  border-color: var(--navy); box-shadow: 0 0 0 3px rgba(43,54,133,.12);
}
[data-theme="fusion"] .form-hint { color: var(--ink-3); }
[data-theme="fusion"] .form-divider::before,
[data-theme="fusion"] .form-divider::after { background: rgba(21,19,15,.2); }
[data-theme="fusion"] .form-divider span { color: var(--ink-3); }
[data-theme="fusion"] .btn-next {
  background: var(--navy); border: 2px solid var(--ink-1);
  border-radius: 3px; box-shadow: 3px 3px 0 var(--ink-1);
  font-family: var(--font-ui); color: #fff;
}
[data-theme="fusion"] .btn-next:hover {
  transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink-1);
  background: var(--navy-2);
}
[data-theme="fusion"] .btn-back-link { color: var(--ink-2); font-family: var(--font-ui); }
[data-theme="fusion"] .btn-back-link:hover { color: var(--seal); }
[data-theme="fusion"] .btn-wa { border-radius: 3px; }
[data-theme="fusion"] .btn-mail {
  background: var(--navy); border: 2px solid var(--ink-1);
  border-radius: 3px; box-shadow: 3px 3px 0 var(--ink-1);
}
[data-theme="fusion"] .btn-mail:hover {
  transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink-1);
  background: var(--navy-2);
}
[data-theme="fusion"] .step-num { background: var(--bg-2); border: 2px solid rgba(21,19,15,.3); color: var(--ink-2); }
[data-theme="fusion"] .step-num.active { background: var(--navy); border-color: var(--navy-2); color: #fff; }
[data-theme="fusion"] .step-num.done { background: var(--good); border-color: var(--good); }
[data-theme="fusion"] .step-connector { background: rgba(21,19,15,.2); }
[data-theme="fusion"] .step-connector.done { background: var(--good); }
[data-theme="fusion"] .step-label { color: var(--ink-2); font-family: var(--font-ui); }
[data-theme="fusion"] .step-label.active { color: var(--navy); }
[data-theme="fusion"] .step1-summary { background: var(--bg-2); border: 1px solid rgba(21,19,15,.2); color: var(--ink-1); border-radius: 3px; }
[data-theme="fusion"] .step1-summary strong { color: var(--navy); }
[data-theme="fusion"] .review-title { color: var(--ink-1); font-family: var(--font-display); }
[data-theme="fusion"] .review-list { background: var(--bg); border: 1.5px solid rgba(21,19,15,.3); box-shadow: 3px 3px 0 rgba(21,19,15,.12); }
[data-theme="fusion"] .review-row { border-bottom-color: rgba(21,19,15,.14); }
[data-theme="fusion"] .review-row dt { color: var(--ink-3); font-family: var(--font-ui); }
[data-theme="fusion"] .review-row dd { color: var(--ink-1); }
[data-theme="fusion"] .consent-row input[type="checkbox"] { accent-color: var(--navy); }
[data-theme="fusion"] .consent-row label { color: var(--ink-1); }
[data-theme="fusion"] .consent-row label a { color: var(--navy); }
[data-theme="fusion"] .consent-row label a:hover { color: var(--seal); }

/* Sobremi */
/* sobremi-logo: inherits from sobremi-portrait */
[data-theme="fusion"] .sobremi-texto h2 { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .sobremi-texto p { color: var(--ink-2); line-height: 1.8; }
[data-theme="fusion"] .sobremi-stat .num { font-family: var(--font-display); color: var(--navy); }
[data-theme="fusion"] .sobremi-stat .lbl { color: var(--ink-3); }
[data-theme="fusion"] .firma { font-family: var(--font-display) !important; color: var(--seal) !important; font-weight: 600; }

/* Taller */
[data-theme="fusion"] .taller-estado-banner {
  background: var(--good); color: #fff; border: 2px solid var(--ink-1);
  border-radius: 3px; box-shadow: 3px 3px 0 var(--ink-1); font-weight: 600;
}
[data-theme="fusion"] .taller-estado-banner .pulse { background: #fff; }
[data-theme="fusion"] .taller-panel {
  background: var(--bg-card); border: 2px solid var(--ink-1);
  border-radius: 5px; box-shadow: 6px 6px 0 var(--ink-1);
}
[data-theme="fusion"] .taller-panel h3 { color: var(--navy); font-family: var(--font-ui); }
[data-theme="fusion"] .mcal-header { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; }
[data-theme="fusion"] .mcal-day { background: transparent; border: 1px solid var(--rule-soft); border-radius: 3px; color: var(--ink-2); }
[data-theme="fusion"] .mcal-day.libre { background: rgba(63,122,74,.16); color: var(--good); border-color: rgba(63,122,74,.4); }
[data-theme="fusion"] .mcal-day.ocupado { background: var(--seal-soft); color: var(--seal); border-color: rgba(200,52,28,.4); }
[data-theme="fusion"] .mcal-day.hoy { box-shadow: 0 0 0 2px var(--navy); }
[data-theme="fusion"] .mcal-dot.libre { background: var(--good); border: none; border-radius: 50%; }
[data-theme="fusion"] .mcal-dot.ocupado { background: var(--seal); border-radius: 50%; }
[data-theme="fusion"] .trabajo-icon { background: var(--navy); color: #fff; border: 2px solid var(--ink-1); border-radius: 6px; }
[data-theme="fusion"] .trabajo-titulo { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .trabajo-nivel { color: var(--ink-3); }
[data-theme="fusion"] .trabajo-badge { background: var(--ink-1); color: var(--bg); border-radius: 2px; }
[data-theme="fusion"] .taller-empty { color: var(--ink-3); }
/* ── Fusion: Gantt ── */
[data-theme="fusion"] .gantt-titulo { font-family: var(--font-ui); color: var(--ink-2); letter-spacing: .16em; }
[data-theme="fusion"] .gantt-months-row { border-bottom-color: rgba(21,19,15,.2); }
[data-theme="fusion"] .gantt-month { color: var(--ink-1); font-family: var(--font-ui); border-left-color: rgba(21,19,15,.2); }
[data-theme="fusion"] .gantt-days-row { border-bottom-color: var(--ink-1); }
[data-theme="fusion"] .gantt-day-col { border-left-color: rgba(21,19,15,.09); }
[data-theme="fusion"] .gantt-day-col.is-weekend { background: rgba(21,19,15,.04); }
[data-theme="fusion"] .gantt-day-col.is-today { background: rgba(200,52,28,.09); }
[data-theme="fusion"] .gantt-dow { color: var(--ink-3); }
[data-theme="fusion"] .gantt-dn { color: var(--ink-2); }
[data-theme="fusion"] .gantt-day-col.is-today .gantt-dn { color: var(--seal); }
[data-theme="fusion"] .gantt-today-line { background: var(--seal); }
[data-theme="fusion"] .gantt-row { border-bottom-color: rgba(21,19,15,.09); }
[data-theme="fusion"] .gantt-row-label { background: var(--bg-card); }
[data-theme="fusion"] .gantt-faccion { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .gantt-dur-text { color: var(--ink-2); }
[data-theme="fusion"] .gantt-dur-line { background: var(--ink-2); }
[data-theme="fusion"] .gantt-bar { box-shadow: 3px 3px 0 var(--ink-1); }
[data-theme="fusion"] .gantt-legend { color: var(--ink-2); font-family: var(--font-ui); }
[data-theme="fusion"] .ptl-track { background: var(--bg-2); border-radius: 0; }
[data-theme="fusion"] .tl-titulo { color: var(--navy); font-family: var(--font-ui); }

/* Contacto */
[data-theme="fusion"] .cnt-quote { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .cnt-quote::before { color: var(--navy); }
[data-theme="fusion"] .cnt-card {
  background: rgba(251,248,240,.86); backdrop-filter: blur(6px);
  border: 1px solid rgba(21,19,15,.10); border-radius: 16px;
  box-shadow: 0 30px 60px -28px rgba(43,54,133,.4), 0 12px 28px -18px rgba(21,19,15,.3);
}
[data-theme="fusion"] .cnt-row { background: var(--bg-2); border: 1px solid rgba(21,19,15,.12); border-radius: 3px; }
[data-theme="fusion"] .cnt-row .k { color: var(--seal); font-family: var(--font-ui); }
[data-theme="fusion"] .cnt-row .v a { color: var(--ink-1); }
[data-theme="fusion"] .cnt-row .v a:hover { color: var(--seal); }

/* Footer */
[data-theme="fusion"] footer { border-top: 2px solid var(--ink-1); background: var(--bg-2); }
[data-theme="fusion"] footer::before { display: none; }
[data-theme="fusion"] .footer-brand { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .footer-meta { color: var(--ink-3); font-style: italic; }
[data-theme="fusion"] .footer-links a { color: var(--ink-1); }
[data-theme="fusion"] .footer-links a:hover { color: var(--seal); }
[data-theme="fusion"] .footer-copy { color: var(--ink-3); }

/* Galería */
[data-theme="fusion"] .galeria-item {
  border: 2px solid var(--ink-1); border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink-1); overflow: hidden;
}
[data-theme="fusion"] .galeria-item:hover {
  transform: translate(-3px,-3px) !important;
  box-shadow: 9px 9px 0 var(--seal) !important;
}
[data-theme="fusion"] .galeria-item .gi-overlay {
  background: linear-gradient(180deg, transparent 45%, rgba(21,19,15,.93));
}
[data-theme="fusion"] .galeria-item .gi-tag {
  background: var(--seal); color: #fff; display: inline-block;
  padding: 3px 8px; border-radius: 2px; font-weight: 700;
  font-family: var(--font-ui); margin-bottom: 5px;
}
[data-theme="fusion"] .galeria-item .gi-cap { color: var(--bg); }
[data-theme="fusion"] #galeria > .container > p a { color: var(--navy); }
/* ── Fusion: CTA cards por nivel ── */
[data-theme="fusion"] .gnc-card {
  border: 2px solid var(--ink-1);
  border-radius: 0;
  box-shadow: 5px 5px 0 var(--ink-1);
  background: var(--bg-card);
  transition: transform .22s ease, box-shadow .22s ease;
}
[data-theme="fusion"] .gnc-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--seal);
}
[data-theme="fusion"] .gnc-empty {
  background: var(--bg-2);
}
[data-theme="fusion"] .gnc-empty-label { color: var(--ink-3); }
[data-theme="fusion"] .gnc-name { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .gnc-count { color: var(--ink-3); font-family: var(--font-ui); }
[data-theme="fusion"] .gnc-desc { color: var(--ink-2); }
[data-theme="fusion"] .gnc-cta { color: var(--seal); font-family: var(--font-ui); }
[data-theme="fusion"] .gnc-card:hover .gnc-cta { color: var(--ink-1); }
[data-theme="fusion"] .galeria-instagram-note { color: var(--ink-2); }
[data-theme="fusion"] .galeria-instagram-note a { color: var(--navy); font-weight: 600; }
[data-theme="fusion"] .galeria-instagram-note a:hover { color: var(--seal); }

/* ── Fusion: acordeón ── */
[data-theme="fusion"] .nivel-accordions { border-top-color: var(--ink-1); }
[data-theme="fusion"] .nivel-accordion  { border-bottom-color: var(--ink-1); }
[data-theme="fusion"] .nivel-acc-header:hover { background: var(--bg-2); }
[data-theme="fusion"] .nivel-acc-name { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .nivel-acc-meta { color: var(--ink-3); font-family: var(--font-ui); }
[data-theme="fusion"] .nivel-acc-arrow { color: var(--ink-2); }

/* ── Fusion: fotos del mosaico ── */
[data-theme="fusion"] .mosaic-item {
  border: 2px solid var(--ink-1);
  box-shadow: 4px 4px 0 var(--ink-1);
}
[data-theme="fusion"] .mosaic-item:hover {
  transform: translate(-2px, -2px);
  box-shadow: 7px 7px 0 var(--seal);
}

/* ── Fusion: modal galería ── */
[data-theme="fusion"] .gal-modal-box {
  background: var(--bg-card);
  border: 2px solid var(--ink-1);
  border-radius: 6px;
  box-shadow: 10px 10px 0 var(--ink-1);
}
[data-theme="fusion"] .gal-modal-head {
  border-bottom: 2px solid var(--ink-1);
  background: var(--bg-2);
}
[data-theme="fusion"] .gal-tab {
  color: var(--ink-2);
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 3px;
  font-family: var(--font-ui);
  letter-spacing: .04em;
}
[data-theme="fusion"] .gal-tab:hover { background: var(--bg); color: var(--ink-1); }
[data-theme="fusion"] .gal-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy-2);
  box-shadow: 3px 3px 0 var(--ink-1);
}
[data-theme="fusion"] .gal-modal-close { color: var(--ink-2); }
[data-theme="fusion"] .gal-modal-close:hover { color: var(--seal); }
[data-theme="fusion"] .gal-modal-foot { border-top-color: rgba(21,19,15,.15); }
[data-theme="fusion"] .gal-ig-link { color: var(--navy); }
[data-theme="fusion"] .gal-ig-link:hover { color: var(--seal); }
[data-theme="fusion"] .gal-empty-title { font-family: var(--font-display); color: var(--ink-1); }
[data-theme="fusion"] .gal-empty-sub { color: var(--ink-2); }
[data-theme="fusion"] .gal-empty-sub a { color: var(--navy); }

/* Marcas */
[data-theme="fusion"] .marcas-bloque {
  margin-top: 40px; border-top: 2px solid var(--ink-1);
  padding-top: 28px; background: transparent; border: none;
  border-top: 2px solid var(--ink-1);
}
[data-theme="fusion"] .marcas-nota-iva { color: var(--ink-2); }
[data-theme="fusion"] .marcas-nota-iva .iva-badge { background: var(--good); border-radius: 2px; }
[data-theme="fusion"] .marcas-disclaimer { color: var(--ink-3); }
[data-theme="fusion"] .marcas-disclaimer a { color: var(--navy-soft); }
[data-theme="fusion"] .marcas-disclaimer a:hover { color: var(--seal); }
[data-theme="fusion"] .marca-item-text { color: var(--ink-1); font-family: var(--font-ui); font-weight: 700; }
[data-theme="fusion"] .marca-item img { filter: none; opacity: 1; }
[data-theme="fusion"] .marca-item img:hover { filter: none; opacity: 1; }
[data-theme="fusion"] .marcas-bloque {
  background: var(--bg-card);
  border: 2px solid var(--ink-1);
  border-radius: 4px;
  box-shadow: 5px 5px 0 var(--ink-1);
  padding: 28px 32px;
  margin-top: 40px;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
[data-theme="fusion"] .marcas-nota-iva {
  border-bottom: 1px solid rgba(21,19,15,.15);
  padding-bottom: 18px;
  margin-bottom: 20px;
}
[data-theme="fusion"] .marcas-separator { background: rgba(21,19,15,.25); }
[data-theme="fusion"] .marcas-separator { background: rgba(21,19,15,.2); }

/* Scrollbar */
[data-theme="fusion"] ::-webkit-scrollbar { width: 7px; }
[data-theme="fusion"] ::-webkit-scrollbar-track { background: var(--bg-2); }
[data-theme="fusion"] ::-webkit-scrollbar-thumb { background: rgba(21,19,15,.3); border-radius: 0; }
[data-theme="fusion"] ::-webkit-scrollbar-thumb:hover { background: var(--navy); }
[data-theme="fusion"] ::selection { background: var(--navy); color: #fff; }

/* Responsive */
@media (max-width: 900px) {
  [data-theme="fusion"] .sobremi-grid { grid-template-columns: 1fr; gap: 28px; text-align: center; }
  [data-theme="fusion"] .sobremi-portrait { max-width: 220px; margin: 0 auto; }
  [data-theme="fusion"] .sobremi-stats { justify-content: center; }
}
@media (max-width: 600px) {
  /* Aquí estaba repetido el display:none de los enlaces del menú, con más
     especificidad que el de la parte estructural: quitarlo allí no bastaba.
     Es la misma regla dicha dos veces en dos sitios distintos. */
  [data-theme="fusion"] .cnt-card { padding: 32px 20px; }
  [data-theme="fusion"] .modal-overlay { padding: 0; align-items: flex-end; }
  [data-theme="fusion"] .modal-box {
    max-width: 100%;
    border-radius: 12px 12px 0 0;
    border-bottom: none;
    min-height: 80dvh;
    max-height: 96dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}


/* ── Sliders & misc kept from original ── */
.tar-calc-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.tar-calc-pts { font-size: 13px; font-weight: 600; }
.tar-calc-reset {
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; padding: 2px 4px;
  transition: color .2s;
}
.tar-mini-slider {
  -webkit-appearance: none; appearance: none; width: 100%; height: 5px;
  border-radius: 5px; outline: none; cursor: pointer; margin: 6px 0;
}
.tar-mini-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 18px; height: 18px;
  border-radius: 50%; cursor: pointer; box-shadow: 0 1px 4px rgba(20,26,69,.3);
}
.tar-mini-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  cursor: pointer; border: none;
}
.tar-mini-labels { display: flex; justify-content: space-between; font-size: 10px; }
.tar-pts-input {
  width: 72px; padding: 4px 6px;
  font-family: var(--font-ui); font-size: 15px; font-weight: 700;
  text-align: center; transition: border-color .2s;
  -moz-appearance: textfield;
}
.tar-pts-input::-webkit-inner-spin-button,
.tar-pts-input::-webkit-outer-spin-button { opacity: 1; }
.tar-pts-label { font-size: 13px; margin-left: 3px; }
.tar-calc-desc {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid rgba(21,19,15,.15);
}
.tar-calc-desc input { width: 16px; height: 16px; margin-top: 1px; cursor: pointer; flex-shrink: 0; }
.tar-calc-desc label { font-size: 11.5px; cursor: pointer; line-height: 1.4; }
[data-theme="fusion"] .tar-calc-desc input { accent-color: var(--navy); }

/* Lista w40k wrapper */
.lista-w40k-wrapper { border-radius: 4px; padding: 14px; margin-bottom: 14px; }
.lista-w40k-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.lista-w40k-label-text { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lista-w40k-hint { font-size: 11px; font-style: italic; }
.lista-w40k-textarea {
  width: 100%; min-height: 90px; max-height: 220px; padding: 10px 12px;
  font-family: 'SF Mono', Consolas, Monaco, monospace; font-size: 11px; line-height: 1.5;
  resize: vertical; transition: border-color .15s; outline: none;
}
.lista-w40k-detected {
  margin-top: 8px; padding: 8px 10px; border-left: 3px solid;
  font-size: 12px; display: none;
}
.lista-w40k-detected.visible { display: block; }

/* g-slot (thumbnail in modal) */
.tar-gallery { margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(21,19,15,.15); }
.tar-gallery-label { font-size: 9px; letter-spacing: .22em; text-transform: uppercase; margin-bottom: 12px; text-align: center; }
.gallery-slots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.g-slot { aspect-ratio: 1; overflow: hidden; cursor: pointer; transition: transform .2s; position: relative; }
.g-slot:hover { transform: scale(1.06); z-index: 10; }
.g-slot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; }
.g-slot:hover img { transform: scale(1.08); }
.g-slot-empty { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 20px; }

/* Form multi-step */
.form-steps-indicator { display: flex; align-items: center; gap: 0; margin-bottom: 24px; }
.step-pill { display: flex; align-items: center; gap: 8px; flex: 1; }
.step-num {
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 10px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all .25s ease;
}
.step-label { font-size: 9px; letter-spacing: .16em; text-transform: uppercase; transition: color .25s ease; }
.step-connector { flex: 1; height: 1px; margin: 0 10px; transition: background .25s ease; }
.form-panel { display: none; animation: panelIn .25s ease; }
.form-panel.visible { display: block; }
@keyframes panelIn { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: translateX(0); } }
.form-panel-back { display: none; }
.form-panel-back.visible { display: block; }
.btn-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px 22px; color: #fff;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  cursor: pointer; transition: all .2s; margin-top: 6px;
}
.btn-back-link {
  display: inline-flex; align-items: center; gap: 5px;
  background: none; border: none; font-size: 9.5px; letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer; padding: 0; margin-bottom: 18px;
  transition: color .2s;
}
.consent-row { display: flex; align-items: flex-start; gap: 10px; margin: 18px 0 6px; }
.consent-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.consent-row label { font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.consent-row label a { text-decoration: underline; text-underline-offset: 2px; }
.step1-summary { padding: 12px 16px; margin-bottom: 20px; font-size: 13px; font-style: italic; line-height: 1.5; }
.step1-summary strong { font-style: normal; }
.review-title { margin: 0 0 16px; font-size: 24px; line-height: 1.15; }
.review-title:focus { outline: none; }
.review-list { margin: 0 0 22px; padding: 0 18px; border-radius: 3px; }
.review-row { display: grid; grid-template-columns: minmax(120px, .65fr) minmax(0, 1.35fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid; }
.review-row:last-child { border-bottom: 0; }
.review-row dt { font-size: 9px; font-weight: 700; letter-spacing: .14em; line-height: 1.45; text-transform: uppercase; }
.review-row dd { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.review-multiline { max-height: 180px; overflow-y: auto; padding-right: 6px; white-space: pre-wrap; }

/* Form fields structural */
.form-group { margin-bottom: 18px; }
.form-label { display: block; font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 7px; }
.form-input, .form-textarea, .form-select {
  width: 100%; padding: 12px 14px; font-size: 15.5px; outline: none;
  transition: border-color .2s; appearance: none; -webkit-appearance: none;
}
.form-input:focus, .form-textarea:focus, .form-select:focus { outline: none; }
.form-textarea { resize: vertical; min-height: 100px; }
.form-select {
  cursor: pointer;
  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='%23837c6e' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-hint { font-size: 12px; margin-top: 5px; }
.form-divider { display: flex; align-items: center; gap: 14px; margin: 22px 0; }
.form-divider::before, .form-divider::after { content: ''; flex: 1; height: 1px; }
.form-divider span { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-wa {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px;
  /* El verde de WhatsApp con texto blanco daba 1.98:1. Se conserva el verde
     —es lo que hace reconocible el botón— y el texto pasa a tinta: 9.4:1. */
  background: #25d366; color: var(--ink-1); border: none;
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: background .2s;
  box-shadow: 0 2px 12px rgba(37,211,102,.22); flex: 1; justify-content: center;
}
.btn-wa:hover { background: #1da552; }
.btn-mail {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 22px;
  color: #fff; font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; transition: all .2s; flex: 1; justify-content: center;
}

/* Lightbox structural */
.lightbox {
  display: none; position: fixed; inset: 0;
  z-index: 900; align-items: center; justify-content: center;
  padding: 32px; backdrop-filter: blur(8px);
  animation: lbFadeIn .2s ease;
}
.lightbox.open { display: flex; }
@keyframes lbFadeIn { from { opacity: 0 } to { opacity: 1 } }
.lb-inner { position: relative; max-width: 90vw; max-height: 90vh; }
.lb-inner img { max-width: 100%; max-height: 88vh; display: block; }
.lb-close {
  position: absolute; top: -38px; right: 0;
  background: none; border: none; font-size: 34px;
  cursor: pointer; line-height: 1; padding: 4px; transition: color .2s;
}

/* Modal structural */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  z-index: 800; align-items: center; justify-content: center;
  padding: 24px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.modal-overlay.open { display: flex; }
#proyecto .proyecto-box { max-width: 720px; }
/* Encima del acceso flotante de privacidad; debajo de sus diálogos. */
#proyecto { z-index: 4950; }
#proyecto .modal-title { padding-right: 30px; }
#proyecto .proyecto-intro { font-size: 15px; margin-top: 12px; line-height: 1.5; }
#proyecto .proyecto-paso { font-size: 12px; font-weight: 700; margin-top: 18px; color: var(--seal); }
#proyecto .proyecto-panel { border: 0; padding: 0; margin: 0; min-width: 0; }
#proyecto [hidden] { display: none !important; }
#proyecto legend { font-weight: 700; margin-bottom: 18px; font-size: 17px; }
.proyecto-opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.proyecto-opcion { display: flex; align-items: flex-start; gap: 10px; padding: 18px 14px; border: 1.5px solid var(--ink-2); border-radius: 4px; cursor: pointer; background: var(--bg); }
.proyecto-opcion:has(input:checked) { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); background: var(--bg-2); }
.proyecto-opcion:focus-within { outline: 3px solid var(--seal); outline-offset: 3px; }
.proyecto-opcion input { margin-top: 4px; accent-color: var(--seal); flex-shrink: 0; }
.proyecto-opcion strong { display: block; font-size: 15px; margin-bottom: 6px; }
.proyecto-opcion small { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.proyecto-continuar { margin-top: 24px; width: 100%; }
#proyecto .proyecto-ayuda { font-size: 12px; line-height: 1.6; margin: 8px 0 20px; color: var(--ink-2); }
.proyecto-acciones { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; }
#proyecto select { max-width: 100%; }
#proyecto .review-list { padding: 20px; margin: 20px 0; }
#proyecto .review-list dt { font-weight: 700; margin-top: 12px; }
#proyecto .review-list dt:first-child { margin-top: 0; }
#proyecto .review-list dd { margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.proyecto-trampa { display: none; }
.proyecto-calculadora { border: 1px solid var(--ink-2); padding: 18px; margin: 0 0 24px; min-width: 0; }
.proyecto-calculadora > label { display: flex; gap: 10px; align-items: baseline; margin-bottom: 14px; font-size: 14px; line-height: 1.5; }
.proyecto-calculadora input[type="radio"] { accent-color: var(--seal); }
.proyecto-peana-fila { display: grid; grid-template-columns: 1fr 84px 1fr; gap: 10px; align-items: center; margin: 10px 0; }
.proyecto-peana-fila .form-input { padding: 8px; }
.proyecto-peana-fila output { font-size: 12px; text-align: right; }
.proyecto-estimacion { border-top: 1px solid var(--ink-2); padding-top: 16px; margin-top: 18px; font-weight: 600; font-size: 15px; line-height: 1.6; white-space: pre-line; }
@media (max-width: 540px) {
  .proyecto-opciones { grid-template-columns: 1fr; gap: 9px; }
  .proyecto-opcion { padding: 12px; }
  #proyecto .modal-head { padding: 24px 20px 16px; }
  #proyecto .modal-body { padding: 20px; }
  .proyecto-acciones { flex-direction: column-reverse; align-items: stretch; }
  .proyecto-acciones .btn { width: 100%; }
}
.modal-box {
  max-width: 520px; width: 100%; max-height: 92vh; overflow-y: auto;
  position: relative; animation: modalIn .3s cubic-bezier(.22,1,.36,1);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(28px) scale(.97) }
  to   { opacity: 1; transform: translateY(0) scale(1) }
}
.modal-box::before { content: ''; display: block; }
.modal-head { padding: 28px 32px 20px; position: relative; }
.modal-close-btn { position: absolute; top: 20px; right: 24px; background: none; border: none; font-size: 24px; cursor: pointer; line-height: 1; padding: 4px; transition: color .2s; }
.modal-tier-label { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; margin-bottom: 8px; }
.modal-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin-bottom: 6px; }
.modal-price-pill { display: inline-block; padding: 5px 14px; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.modal-body { padding: 26px 32px 32px; }
.modal-body p { font-size: 14.5px; margin-bottom: 24px; line-height: 1.55; }

/* Marcas structural */
.marcas-bloque { margin-top: 40px; padding-top: 28px; }
.marcas-nota-iva { text-align: center; font-size: 14px; font-weight: 600; margin-bottom: 20px; padding-bottom: 16px; }
.condiciones-40k .marcas-nota-iva { margin-bottom: 0; padding-bottom: 0; }
.marcas-grid { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; margin-bottom: 20px; }
.marca-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.marca-item img { height: 36px; width: auto; opacity: .85; filter: grayscale(20%); transition: opacity .2s, filter .2s; }
.marca-item img:hover { opacity: 1; filter: grayscale(0%); }
.marca-item-text { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.marcas-separator { width: 1px; height: 40px; flex-shrink: 0; }
.marcas-disclaimer { font-size: 11px; text-align: center; line-height: 1.6; max-width: 680px; margin: 0 auto; padding-top: 16px; }
.marcas-disclaimer a { text-decoration: none; }

/* Timeline público */
.taller-timeline{ margin-top:0 }

/* ── Gantt: wrapper con scroll horizontal ── */
.gantt-wrap{ width:100%; max-width:100%; overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:10px;margin-top:18px }
.gantt-inner{ position:relative }

/* ── Gantt: título ── */
.gantt-titulo{ font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:0 }

/* ── Gantt: línea de Hoy ── */
.gantt-today-line{ position:absolute;top:0;bottom:0;width:2px;background:var(--seal);z-index:8;pointer-events:none;opacity:.8 }

/* ── Gantt: cabecera de meses ── */
.gantt-months-row{ display:flex;height:22px;border-bottom:1px solid rgba(21,19,15,.15) }
.gantt-month{ flex-shrink:0;font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;display:flex;align-items:center;padding-left:8px;border-left:2px solid rgba(21,19,15,.2) }
.gantt-month:first-child{ border-left:none }

/* ── Gantt: cabecera de días ── */
.gantt-days-row{ display:flex;height:38px;border-bottom:2px solid rgba(21,19,15,.25) }
.gantt-label-spacer{ flex-shrink:0 }
.gantt-day-col{ flex:0 0 30px;width:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid rgba(21,19,15,.07);cursor:default }
.gantt-day-col.is-weekend{ background:rgba(21,19,15,.04) }
.gantt-day-col.is-today{ background:rgba(200,52,28,.1) }
.gantt-dow{ font-size:8px;letter-spacing:.03em;text-transform:uppercase;line-height:1;opacity:.55 }
.gantt-dn{ font-size:12px;font-weight:700;line-height:1.3 }
.gantt-day-col.is-today .gantt-dn{ color:var(--seal);font-weight:900 }

/* ── Gantt: filas ── */
.gantt-row{ display:flex;align-items:center;height:64px;border-bottom:1px solid rgba(21,19,15,.08);position:relative }
.gantt-row-label{ flex-shrink:0;padding:0 10px 0 4px;display:flex;flex-direction:column;justify-content:center;gap:5px;z-index:3;position:relative }
.gantt-faccion{ font-size:12px;font-weight:700;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap }
.gantt-nivel-badge{ font-size:9px;font-weight:800;color:#fff;padding:2px 8px;border-radius:2px;align-self:flex-start;line-height:1.4 }

/* ── Gantt: track (área de barras) ── */
.gantt-row-track{ flex:1;height:100%;position:relative;overflow:hidden }

/* ── Gantt: etiqueta de duración ── */
.gantt-bar-dur{ position:relative;z-index:1;font-size:9px;font-weight:600;color:rgba(255,255,255,.7);white-space:nowrap;margin-left:6px;flex-shrink:0 }

/* ── Gantt: barra ── */
.gantt-bar{ position:absolute;top:8px;height:40px;display:flex;align-items:center;overflow:hidden;min-width:30px;border-radius:3px;box-shadow:2px 2px 0 rgba(21,19,15,.2) }
.gantt-bar-fill{ position:absolute;left:0;top:0;bottom:0;background:rgba(255,255,255,.22);pointer-events:none }
.gantt-bar-text{ position:relative;z-index:1;font-size:10.5px;font-weight:700;color:#fff;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.35) }
.gantt-bar-pct{ position:relative;z-index:1;margin-left:auto;font-size:9px;font-weight:800;color:#fff;background:rgba(0,0,0,.2);padding:1px 6px;border-radius:10px;margin-right:6px;flex-shrink:0 }

/* ── Gantt: leyenda ── */
.gantt-legend{ display:flex;flex-wrap:wrap;gap:14px;margin-top:16px;font-size:11px }
.gantt-dot{ display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:middle;margin-right:4px }
.taller-empty{ font-size:13px;text-align:center;padding:20px 0 }
.mcal-dot { width: 11px; height: 11px; border-radius: 50%; }

/* Mobile modal dvh fix */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; }
  .cnt-row { flex-direction: column; }
  .cnt-row .k { text-align: center; min-width: auto; }
  .form-input, .form-textarea, .form-select { font-size: 16px; padding: 14px; }
  .form-textarea { min-height: 88px; }
  .btn-next { padding: 17px 22px; font-size: 11.5px; }
  .btn-wa, .btn-mail { padding: 16px 18px; font-size: 11px; flex: 1 1 100%; }
  .step-label { font-size: 8.5px; }
  .step-num { width: 28px; height: 28px; font-size: 11px; }
  .step1-summary { font-size: 12.5px; }
  .form-steps-indicator { gap: 4px; }
  .step-pill { gap: 5px; }
  .step-connector { margin: 0 3px; }
  .review-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 380px) {
  .modal-title { font-size: 21px; }
  .modal-body { padding: 18px 16px 24px; }
  .modal-head { padding: 20px 16px 16px; }
}

/* ═══════════════════════════════════════════════════════════
   FOCO VISIBLE Y SALTO AL CONTENIDO
   Había cuatro reglas quitando el contorno del navegador y ninguna
   poniendo nada en su lugar: navegando con teclado no se veía dónde
   estaba el cursor. :focus-visible solo se activa cuando el foco llega
   por teclado, así que el ratón sigue sin dibujar recuadros.
   ═══════════════════════════════════════════════════════════ */
:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 2px;
  border-radius: 2px;
}
[data-theme="fusion"] .tar-price-box :focus-visible,
[data-theme="fusion"] .modal-head :focus-visible {
  outline-color: #fff;   /* sobre las cajas oscuras, el azul no se ve */
}
/* Los campos del formulario sí marcan su propio foco */
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 0;
}

/* Enlace de salto: primer tabulador de la página, oculto hasta que
   recibe el foco. Ahorra pasar por las ocho entradas del menú en cada
   carga a quien navega con teclado o lector. */
.salto-contenido {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 300;
  background: var(--ink-1);
  color: var(--bg);
  padding: 12px 22px;
  border-radius: 0 0 4px 4px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .18s ease;
}
.salto-contenido:focus { transform: translate(-50%, 0); }

/* ═══════════════════════════════════════════════════════════
   PANELES GRAN FORMATO (clientes generalistas) + EMPRESAS
   Viven dentro de #tarifas como dos pestañas más, junto a Kill
   Team y Warhammer 40.000.
   ═══════════════════════════════════════════════════════════ */

/* Con cinco pestañas la barra ya no cabe de una línea en pantallas
   estrechas. Se reparten en varias filas en lugar de desbordar: si
   desbordaran, las últimas quedarían fuera de la pantalla y no habría
   forma de llegar a ellas. */
@media (max-width: 900px) {
  .juego-tabs { display: flex; flex-wrap: wrap; justify-content: center; }
  .juego-tab  { padding: 11px 18px; font-size: 11px; }
}
@media (max-width: 480px) {
  .juego-tab { padding: 10px 14px; font-size: 10.5px; letter-spacing: .1em; }
}

/* ── Línea de tiempo/distancia sobre el precio (gran formato) ── */
.gf-tiempo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 14px;
}
[data-theme="fusion"] .gf-tiempo { color: var(--ink-3); border-top: 1px dashed var(--rule-soft); padding-top: 14px; }

.gf-nota { margin-top: 32px; }
.gf-nota > span:first-child {
  display: block;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
[data-theme="fusion"] .gf-nota > span:first-child { color: var(--seal); }

/* ── Caja de datos sin precio (empresas) ── */
.tar-meta-box { padding: 16px 18px; margin-top: auto; }
.tar-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 7px 0;
  font-size: 13px;
}
.tar-meta-row .k {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
  flex-shrink: 0;
}
.tar-meta-row .v { text-align: right; font-weight: 600; }
[data-theme="fusion"] .tar-meta-box { background: var(--ink-1); border-radius: 4px; color: var(--bg); }
[data-theme="fusion"] .tar-meta-row { border-bottom: 1px solid rgba(241,236,224,.16); }
[data-theme="fusion"] .tar-meta-row:last-child { border-bottom: none; }
[data-theme="fusion"] .tar-meta-row .k { color: rgba(241,236,224,.6); }
[data-theme="fusion"] .tar-meta-row .v { color: #fff; }

/* ── Tablas (resumen económico y comparativa) ── */
.tabla-wrap { margin-top: 40px; overflow-x: auto; }
.tabla-jm {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 14px;
}
.tabla-jm caption {
  text-align: left;
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  font-weight: 700;
  padding-bottom: 12px;
}
.tabla-jm th, .tabla-jm td { padding: 13px 16px; text-align: left; }
.tabla-jm th {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}
[data-theme="fusion"] .tabla-jm { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink-1); }
[data-theme="fusion"] .tabla-jm caption { color: var(--seal); }
[data-theme="fusion"] .tabla-jm thead th { background: var(--ink-1); color: var(--bg); }
[data-theme="fusion"] .tabla-jm tbody tr { border-bottom: 1px dashed var(--rule-soft); }
[data-theme="fusion"] .tabla-jm tbody tr:last-child { border-bottom: none; }
[data-theme="fusion"] .tabla-jm tbody td { color: var(--ink-2); }
[data-theme="fusion"] .tabla-jm tbody td:first-child { color: var(--ink-1); font-weight: 700; }
[data-theme="fusion"] .tabla-jm tbody td strong { color: var(--navy); }
[data-theme="fusion"] .tabla-jm a { color: var(--seal); font-weight: 700; }

/* ── Bloques de valor (empresas) ── */
.emp-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 64px;
}
.emp-feature { padding: 26px 24px; }
.emp-feature-icon { font-size: 26px; line-height: 1; display: block; margin-bottom: 14px; }
.emp-feature h3 { font-size: 19px; margin-bottom: 10px; line-height: 1.2; }
.emp-feature p { font-size: 14.5px; line-height: 1.6; }
[data-theme="fusion"] .emp-feature { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 5px 5px 0 var(--ink-1); }
[data-theme="fusion"] .emp-feature h3 { font-family: var(--font-display); color: var(--navy); font-weight: 600; }
[data-theme="fusion"] .emp-feature p { color: var(--ink-2); }

/* ── Subtítulos internos de sección ── */
.emp-subtitle {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.1;
  margin: 64px 0 14px;
}
.emp-lead { font-size: 16px; line-height: 1.7; max-width: 760px; margin-bottom: 32px; }
[data-theme="fusion"] .emp-subtitle { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; }
[data-theme="fusion"] .emp-lead { color: var(--ink-2); }

/* ── Materiales de peana ── */
.emp-materiales {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.emp-material { padding: 24px; }
.emp-material h4 { font-size: 17px; margin-bottom: 10px; }
.emp-material p { font-size: 14.5px; line-height: 1.65; }
[data-theme="fusion"] .emp-material { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 5px 5px 0 var(--seal); }
[data-theme="fusion"] .emp-material h4 { font-family: var(--font-display); color: var(--seal); font-weight: 600; font-size: 19px; }
[data-theme="fusion"] .emp-material p { color: var(--ink-2); }

/* ── Punto de partida ── */
.proceso-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 28px;
}
.proceso-item { padding: 18px 0; }
.proceso-k {
  display: block;
  font-size: 9.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 8px;
}
.proceso-item p { font-size: 14.5px; line-height: 1.6; }
[data-theme="fusion"] .proceso-item { border-top: 2px solid var(--ink-1); }
[data-theme="fusion"] .proceso-k { color: var(--seal); }
[data-theme="fusion"] .proceso-item p { color: var(--ink-2); }

.emp-aviso { margin-top: 36px; padding: 22px 26px; font-size: 14.5px; line-height: 1.7; }
[data-theme="fusion"] .emp-aviso { background: rgba(43,54,133,.06); border-left: 4px solid var(--navy); border-radius: 3px; color: var(--ink-2); }
[data-theme="fusion"] .emp-aviso strong { color: var(--ink-1); }

/* ── Dossieres descargables ── */
.dossier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}
.dossier-card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 24px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}
.dossier-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.dossier-body { display: flex; flex-direction: column; gap: 8px; }
.dossier-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
.dossier-desc { font-size: 14px; line-height: 1.6; }
.dossier-meta {
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 700;
}
[data-theme="fusion"] .dossier-card { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 4px; box-shadow: 6px 6px 0 var(--ink-1); }
[data-theme="fusion"] .dossier-card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--navy); }
[data-theme="fusion"] .dossier-name { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; font-size: 20px; }
[data-theme="fusion"] .dossier-desc { color: var(--ink-2); }
[data-theme="fusion"] .dossier-meta { color: var(--seal); }

/* ── CTA de empresas ── */
.emp-cta { margin-top: 56px; padding: 36px 32px; text-align: center; }
.emp-cta > p { font-size: 17px; line-height: 1.6; max-width: 620px; margin: 0 auto 24px; }
.emp-cta-btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.emp-cta-note { margin-top: 26px; font-size: 11.5px; line-height: 1.6; max-width: 620px; margin-left: auto; margin-right: auto; }
[data-theme="fusion"] .emp-cta { background: var(--bg-card); border: 2px solid var(--ink-1); border-radius: 5px; box-shadow: 8px 8px 0 var(--navy); }
[data-theme="fusion"] .emp-cta > p { color: var(--ink-1); font-family: var(--font-display); font-size: 22px; }
[data-theme="fusion"] .emp-cta-note { color: var(--ink-3); font-style: italic; }

/* ═══════════════════════════════════════════════════════════
   CINTA HAZARD — franjas de señalización al 80% como marco
   La cinta enmarca el rótulo y el texto se apoya en una placa
   limpia, que es como funciona la señalización real: el amarillo
   avisa, la zona de lectura se respeta. Detrás de las letras la
   trama se comía el texto.
   Se resuelve con dos capas de fondo sobre el mismo elemento, sin
   marcado extra: la placa ocupa la caja de relleno y la cinta el
   borde transparente que la rodea.
   El ancho de la cinta baja con la jerarquía —rótulo de sección,
   caja de precio, píldora de modal— para que las dos aplicaciones
   convivan sin competir entre sí.
   ═══════════════════════════════════════════════════════════ */
[data-theme="fusion"] {
  --hazard-amarillo: #f2c200;   /* amarillo de señalización */
  --hazard-negro:    #15130f;   /* negro tinta */
  --hazard-paso:     10px;      /* ancho de cada franja */
  --hazard-marco:    8px;       /* ancho del marco de cinta que rodea la placa */
  --hazard-op:       .8;        /* opacidad por defecto de las franjas */
}

/* ── La trama, en dos capas ──
   1. Base oscura en el propio elemento. Es la que sostiene el
      contraste del texto en blanco: sin ella, en los rótulos —que van
      sobre papel— las franjas amarillas quedarían claras y se
      comerían las letras. En los precios esa base ya existía, porque
      su caja es negra.
   2. Las franjas en una capa ::before, con su opacidad propia, que se
      aplica a la capa entera y no al color: si viajara dentro del
      color de la franja se resolvería donde se declara la variable y
      todos los elementos heredarían el mismo valor ya calculado.
   El texto va por encima de las dos, siempre a plena intensidad. */
[data-theme="fusion"] .section-head h2,
[data-theme="fusion"] .sobremi-texto h2,
[data-theme="fusion"] .tar-card:not(.is-popular) .tar-price-amount,
[data-theme="fusion"] .gf-modal-total strong,
[data-theme="fusion"] .modal-price-pill {
  background-color: var(--ink-1);
}

/* Ya no hace falta perfilar la letra: el texto no llega a tocar las
   franjas. El antiguo -webkit-text-stroke adelgazaba el blanco a cambio
   de nada. */
[data-theme="fusion"] .section-head h2::before,
[data-theme="fusion"] .sobremi-texto h2::before,
[data-theme="fusion"] .tar-card:not(.is-popular) .tar-price-amount::before,
[data-theme="fusion"] .gf-modal-total strong::before,
[data-theme="fusion"] .modal-price-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 3px;
  /* El borde transparente reserva el anillo donde vive la cinta; la placa
     ocupa la caja de relleno y deja limpia la zona de lectura, que es lo
     que decía este comentario y no llegó a implementarse: las franjas
     iban a inset:0, por detrás de las letras.
     La placa se pinta del mismo tinte que el fondo del elemento, así la
     opacidad de la capa no la aclara —tinta sobre tinta sigue siendo
     tinta— y solo afecta a las franjas. */
  border: var(--hazard-marco) solid transparent;
  opacity: var(--hazard-op);
  background-image:
    linear-gradient(var(--ink-1), var(--ink-1)),
    repeating-linear-gradient(
      45deg,
      var(--hazard-amarillo) 0 var(--hazard-paso),
      var(--hazard-negro)    var(--hazard-paso) calc(var(--hazard-paso) * 2)
    );
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-repeat: no-repeat, repeat;
}

/* ── Nombres de sección ── */
/* Letras en blanco sobre la trama —el mismo contraste que tienen los
   precios—, con el subrayado bermellón fuera del recuadro para que la
   trama cubra solo el título. */
[data-theme="fusion"] .section-head h2,
[data-theme="fusion"] .sobremi-texto h2 {
  --hazard-marco: 10px;
  display: inline-block;
  position: relative;
  z-index: 0;
  color: #fff;
  padding: 14px 30px;
  border-radius: 3px;
}
[data-theme="fusion"] .section-head h2 { margin-bottom: 40px; }
[data-theme="fusion"] .section-head h2::after {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  margin: 0;
}

/* ── Precios ── */
/* La trama va detrás del importe, dentro de la caja de siempre. La
   tarjeta recomendada queda limpia: su caja ya es bermellón y sumarle
   amarillo y negro encima ensucia los tres colores. */
[data-theme="fusion"] .tar-price-amount,
[data-theme="fusion"] .gf-modal-total strong,
[data-theme="fusion"] .modal-price-pill {
  --hazard-marco: 7px;
  position: relative;
  z-index: 0;
  border-radius: 3px;
}
[data-theme="fusion"] .tar-price-amount,
[data-theme="fusion"] .gf-modal-total strong {
  display: inline-block;
  padding: 9px 18px;
}
/* Píldora del modal: franja más fina, un escalón por debajo. */
[data-theme="fusion"] .modal-price-pill { --hazard-paso: 7px; --hazard-marco: 5px; }

/* En títulos alineados a la izquierda, el sangrado del recuadro se
   compensa para que la primera letra siga a plomo con el texto. */
[data-theme="fusion"] .sobremi-texto h2 { margin-left: -20px; }

@media (max-width: 900px) {
  /* La columna pasa a centrarse: sin compensación de sangrado. */
  [data-theme="fusion"] .sobremi-texto h2 { margin-left: 0; }
}

@media (max-width: 600px) {
  [data-theme="fusion"] .section-head h2,
  [data-theme="fusion"] .sobremi-texto h2 { --hazard-marco: 7px; padding: 11px 20px; }
  [data-theme="fusion"] .tar-price-amount { --hazard-marco: 6px; padding: 8px 14px; }
}

/* ── Estimación dentro del modal de gran formato ── */
.gf-modal-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 16px;
  margin-bottom: 20px;
  text-align: center;
}
.gf-modal-total span:first-child {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 700;
}
.gf-modal-total strong { font-size: 34px; line-height: 1; font-weight: 800; }
.gf-modal-total span:last-child { font-size: 12px; }
[data-theme="fusion"] .gf-modal-total { background: var(--ink-1); border-radius: 4px; }
[data-theme="fusion"] .gf-modal-total span:first-child { color: rgba(241,236,224,.6); }
[data-theme="fusion"] .gf-modal-total strong { font-family: var(--font-display); color: #fff; font-weight: 600; }
[data-theme="fusion"] .gf-modal-total span:last-child { color: rgba(241,236,224,.85); }

@media (max-width: 600px) {
  .emp-subtitle { margin-top: 48px; }
  .tar-meta-row { font-size: 12.5px; }
  .emp-cta { padding: 28px 20px; }
  .dossier-card { padding: 20px; gap: 14px; }
}


/* ═══════════════════════════════════════════════════════════
   EMPRESAS — el hueco del precio
   En Kill Team, 40K y gran formato ahí va la placa del importe.
   Aquí no hay importe que poner: la tarifa se fija por escrito según
   volumen. La placa se mantiene igual de alta para que las tarjetas no
   queden más bajas al cambiar de pestaña, y el importe se sustituye por
   la invitación a preguntar.
   ═══════════════════════════════════════════════════════════ */
.emp-tarifa-box {
  padding: 18px 20px;
  text-align: center;
  margin-bottom: 14px;
}
.emp-tarifa-label {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-weight: 600;
}
/* Bastante más pequeño que un importe de 46 px: es texto, y a ese cuerpo
   se leería como un grito. */
.emp-tarifa-amount {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.1;
}
.emp-tarifa-note { font-size: 11px; margin-top: 7px; }

/* Los dos atajos, para quien no quiere rellenar nada. */
.emp-atajos {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}
.emp-atajos > * {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 11px 8px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--linea, rgba(255,255,255,.16));
  background: transparent;
  color: inherit;
  cursor: pointer;
  /* Objetivo táctil cómodo: se usan desde el móvil. */
  min-height: 44px;
}
.emp-atajos > *:hover { border-color: currentColor; }
.emp-atajos .wa { color: #25d366; }

@media (max-width: 380px) {
  /* Con la pantalla muy estrecha, uno debajo del otro antes que partir
     las palabras. */
  .emp-atajos { flex-direction: column; }
}

/* Tinta sólida, no un negro translúcido. El valor anterior era
   var(--bg-alt, rgba(0,0,0,.18)) y --bg-alt no existe como token, así que
   siempre se aplicaba el respaldo: un velo que solo se leía si detrás
   había una superficie oscura. Al reutilizar esta placa en figuras 3D,
   sobre tarjeta clara, el texto crema se volvía ilegible. */
[data-theme="fusion"] .emp-tarifa-box {
  background: var(--ink-1);
  border-radius: 4px;
}
[data-theme="fusion"] .emp-tarifa-label  { color: rgba(241,236,224,.66); }
[data-theme="fusion"] .emp-tarifa-amount { font-family: var(--font-display); color: #fff; font-weight: 600; }
[data-theme="fusion"] .emp-tarifa-note   { color: rgba(241,236,224,.6); }

/* Resultado del envío de la consulta de empresa. Vacío no ocupa nada, así
   que no deja un hueco en el modal mientras no hay nada que decir. */
.form-status:empty { display: none; }
.form-status {
  margin-top: 16px;
  padding: 13px 15px;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  border: 1px solid currentColor;
}
/* Antes traían un verde y un rojo propios (#3f9c5a / #d04b32) que no
   existen en la paleta y no llegaban al 4.5:1. */
.form-status.ok  { color: var(--good); }
.form-status.err { color: var(--seal-deep); }

/* ═══════════════════════════════════════════════════════════
   PANEL DE SECCIONES
   Cinco secciones que antes ocupaban scroll propio comparten una caja y
   se turnan. Dentro siguen siendo <section> completas, así que hay que
   desactivarles el ritmo de página —relleno de 96px, filete superior,
   fondo propio y el .container de 1320px— o se sumarían dos veces.
   ═══════════════════════════════════════════════════════════ */
#panel { padding: 0 0 96px; }

.jm-panel { overflow: hidden; }
.jm-panel-tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.jm-tab {
  padding: 19px 10px;
  background: none;
  border: none;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s;
}
.jm-tab-num {
  font-size: 13px;
  letter-spacing: 0;
}
/* Las cinco secciones miden entre 476 y 1.340 px. Sin un suelo común, la
   caja pega un salto al cambiar de pestaña y la página entera se mueve
   bajo el cursor. */
.jm-panel-body { padding: 44px 40px 48px; min-height: 520px; }

/* Sin JavaScript esta clase no se añade nunca y las cinco secciones se
   ven apiladas, como antes. Con él, solo la activa. */
.jm-panel-body.js-activo > section { display: none; }
.jm-panel-body.js-activo > section.activo { display: block; }

.jm-panel-body > section {
  padding: 0;
  border-top: 0;
  background: transparent;
}
.jm-panel-body > section > .container {
  max-width: none;
  padding: 0;
}

@media (max-width: 780px) {
  .jm-panel-tabs { grid-template-columns: repeat(2, 1fr); }
  .jm-tab { padding: 14px 6px; font-size: 9.5px; }
  .jm-panel-body { padding: 26px 18px 30px; }
}

/* ── Panel, tema fusión ── */
[data-theme="fusion"] .jm-panel {
  border: 2px solid var(--ink-1);
  border-radius: 5px;
  background: rgba(251, 248, 240, .72);
}
[data-theme="fusion"] .jm-panel-tabs { border-bottom: 2px solid var(--ink-1); }
[data-theme="fusion"] .jm-tab {
  border-left: 1px solid var(--rule-soft);
  color: var(--ink-2);
  font-family: var(--font-ui);
}
[data-theme="fusion"] .jm-tab:first-child { border-left: 0; }
[data-theme="fusion"] .jm-tab .jm-tab-num { color: var(--ink-3); font-family: var(--font-display); }
[data-theme="fusion"] .jm-tab:hover:not(.active) { color: var(--ink-1); background: var(--bg-2); }
[data-theme="fusion"] .jm-tab.active {
  background: var(--ink-1);
  border-left-color: var(--ink-1);
  color: var(--bg);
}
[data-theme="fusion"] .jm-tab.active .jm-tab-num { color: var(--seal); }
/* La caja del panel ya trae la superficie: las secciones de dentro no
   pueden traer la suya o se apilan dos tonos de papel. */
[data-theme="fusion"] .jm-panel-body > #tarifas,
[data-theme="fusion"] .jm-panel-body > #galeria,
[data-theme="fusion"] .jm-panel-body > #resenas,
[data-theme="fusion"] .jm-panel-body > #taller,
[data-theme="fusion"] .jm-panel-body > #sobre-mi { background: transparent; }

/* ── Ajustes de las secciones al vivir dentro del panel ── */
/* La rejilla de tarifas era de cuatro columnas fijas calculadas sobre el
   ancho de página completo. Dentro del panel ese ancho ya no existe y la
   cuarta tarjeta caía sola a una segunda fila. */
.jm-panel-body .tarifas-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}

/* La pestaña ya nombra la sección: el rótulo grande con su cinta repetía
   la misma palabra dos veces seguidas. El <h2> se queda en el documento
   —lo necesitan el esquema de encabezados y quien navega con lector— y
   solo deja de verse; el subtítulo explicativo sí se mantiene, que es lo
   único que aporta información nueva. */
.jm-panel-body .section-head { margin-bottom: 30px; }
.jm-panel-body .section-head .section-eyebrow { display: none; }
.jm-panel-body .section-head h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.jm-panel-body .section-head .sub { text-align: center; margin: 0 auto; }

/* ═══════════════════════════════════════════════════════════
   MOVIMIENTO
   Los estados de partida cuelgan de .js-movimiento, que pone
   public/js/movimiento.js en el <html>. Sin ese fichero —o con
   prefers-reduced-motion— no se aplica ninguno y la página se ve
   entera y quieta, que es el estado correcto, no un degradado.
   ═══════════════════════════════════════════════════════════ */
.barra-lectura {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 400;
  pointer-events: none;
}
.barra-lectura span {
  display: block;
  width: 0;
  height: 100%;
  transition: width .08s linear;
}

.js-movimiento [data-revelar] {
  opacity: 0;
  transform: scale(.96) translateY(30px);
  filter: blur(2.5px);
  transition: opacity var(--dur-revelado) var(--curva-movimiento),
              transform var(--dur-revelado) var(--curva-movimiento),
              filter var(--dur-revelado) var(--curva-movimiento);
}
.js-movimiento [data-revelar].revelado {
  opacity: 1;
  transform: none;
  filter: none;
}

/* El subrayado del titular se dibuja de izquierda a derecha una vez que
   el bloque ya está en su sitio. */
.js-movimiento .hero h1 .marker::after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-subrayado) var(--curva-movimiento) var(--retardo-subrayado);
}
.js-movimiento .hero h1.revelado .marker::after { transform: scaleX(1); }

/* Cabecera compacta a partir de los 90 px. */
.cabecera-compacta .header-inner { padding: 9px 0; }
.cabecera-compacta .brand-mark { transform: scale(.82); }
.header-inner { transition: padding .3s cubic-bezier(.2,.8,.2,1); }
.brand-mark { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s cubic-bezier(.2,.8,.2,1); }
[data-theme="fusion"] .cabecera-compacta .brand-mark { box-shadow: 2px 2px 0 var(--ink-1); }

@media (prefers-reduced-motion: reduce) {
  .js-movimiento [data-revelar],
  .js-movimiento [data-revelar].revelado {
    opacity: 1; transform: none; filter: none; transition: none;
  }
  .js-movimiento .hero h1 .marker::after { transform: scaleX(1); transition: none; }
  .header-inner, .brand-mark { transition: none; }
  .barra-lectura span { transition: none; }
}

/* ── Barra de lectura, tema fusión ── */
[data-theme="fusion"] .barra-lectura { background: rgba(21,19,15,.10); }
[data-theme="fusion"] .barra-lectura span { background: var(--seal); }

/* ── Hero en pantallas estrechas ── */
/* El diseño baja aquí a 780px, un escalón propio: entre los 900 y los 600
   del resto del sistema. La foto sigue detrás del texto, pero el velo
   tiene que cargarse: en vertical el texto ocupa el ancho entero y ya no
   hay una mitad limpia donde apoyarse. */
@media (max-width: 780px) {
  .hero {
    margin: 12px 16px 0;
    min-height: 520px;
  }
  .hero-texto {
    max-width: none;
    min-height: 520px;
    padding: 56px 22px 104px;
  }
  .hero-velo {
    background:
      radial-gradient(140% 100% at 70% 40%, rgba(21,19,15,.10) 0%, rgba(21,19,15,.78) 100%),
      linear-gradient(180deg, rgba(21,19,15,.62) 0%, rgba(21,19,15,.42) 45%, rgba(21,19,15,.88) 100%);
  }
  /* Abajo del todo y en una sola columna: al lado de la chapa no caben
     los dos sin partir la frase en cinco líneas. */
  .hero-pie {
    right: 22px;
    left: 22px;
    bottom: 18px;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    max-width: none;
  }
  .hero-llamada { font-size: 13px; }
  .cnt-card { padding: 34px 20px; }
}

/* ── Intercambio al cambiar de pestaña ── */
/* La sección que entra no aparece de golpe: sus bloques de primer nivel
   se escalonan. El retardo lo pone el script, no el CSS, porque depende
   del número de bloques que tenga cada sección. */
@keyframes jmZoomFade {
  from { opacity: 0; transform: scale(.96) translateY(22px); filter: blur(2px); }
  to   { opacity: 1; transform: none; filter: none; }
}
.js-movimiento .intercambiando {
  animation: jmZoomFade var(--dur-intercambio) var(--curva-movimiento) both;
}

/* ── Ken-burns ── */
/* Un vaivén lento sobre las fotos. Solo corre en la pestaña visible: las
   demás están en display:none y el navegador no las anima. */
@keyframes jmKen {
  0%   { transform: scale(1.04) translate(0, 0); }
  50%  { transform: scale(1.14) translate(-1.5%, -1%); }
  100% { transform: scale(1.04) translate(0, 0); }
}

/* ── Fundido entre las fotos del hero ── */
/* Tres vistas, 7 s cada una, en un ciclo de 21 s. Cada foto entra por
   encima de la anterior y la de debajo se apaga cuando ya está tapada,
   así nunca se ven dos a medias ni se oscurece el conjunto. Los retardos
   negativos arrancan el ciclo con la primera ya entera y las otras dos
   ocultas. */
@keyframes jmFundido {
  0%     { opacity: 1; }
  33.33% { opacity: 1; }
  40.48% { opacity: 0; }
  92.86% { opacity: 0; }
  100%   { opacity: 1; }
}
/* Misma especificidad que la regla de movimiento reducido, que va detrás
   y las deja quietas en la primera. */
.js-movimiento .hero-foto img {
  animation: jmKen 26s ease-in-out infinite, jmFundido 21s linear infinite;
}
.js-movimiento .hero-foto img:nth-child(1) { animation-delay: 0s, -1.5s; }
.js-movimiento .hero-foto img:nth-child(2) { animation-delay: 0s, -15.5s; }
.js-movimiento .hero-foto img:nth-child(3) { animation-delay: 0s, -8.5s; }
.js-movimiento .mosaic-item img {
  animation: jmKen 22s ease-in-out infinite;
}
/* Desfase por posición para que no respiren todas a la vez. */
.js-movimiento .mosaic-item:nth-child(5n+1) img { animation-duration: 22s; animation-delay: 0s; }
.js-movimiento .mosaic-item:nth-child(5n+2) img { animation-duration: 26s; animation-delay: -1.7s; }
.js-movimiento .mosaic-item:nth-child(5n+3) img { animation-duration: 30s; animation-delay: -3.4s; }
.js-movimiento .mosaic-item:nth-child(5n+4) img { animation-duration: 34s; animation-delay: -5.1s; }
.js-movimiento .mosaic-item:nth-child(5n+5) img { animation-duration: 38s; animation-delay: -6.8s; }

/* ── La llamada del hero, palabra a palabra ── */
/* El escalonado de izquierda a derecha empuja la mirada hacia la chapa,
   que es lo único con acción del hero. Sin movimiento.js la frase se ve
   entera desde el principio, como todo lo demás. */
@keyframes jmPalabra {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: none; }
}
.js-movimiento .hero-llamada > span { opacity: 0; }
.js-movimiento .hero-pie.revelado .hero-llamada > span {
  animation: jmPalabra .5s var(--curva-movimiento) both;
  animation-delay: calc(var(--palabra, 0) * 60ms);
}

@media (prefers-reduced-motion: reduce) {
  .js-movimiento .intercambiando,
  .js-movimiento .hero-foto img,
  .js-movimiento .mosaic-item img { animation: none; }
  /* La frase es información, no adorno: se queda, pero sin recorrido. */
  .js-movimiento .hero-llamada > span,
  .js-movimiento .hero-pie.revelado .hero-llamada > span {
    opacity: 1;
    animation: none;
    transform: none;
  }
}

/* ── Titular del hero: categoría y lema ── */
/* El <h1> lleva las dos cosas. La categoría existe porque es la consulta
   con la que llega la gente y el titular es una de las señales que más
   pesan; el lema es la voz del sitio. Separarlos en dos elementos habría
   dejado la palabra clave fuera del encabezado, que es justo lo que se
   quería evitar. */
.hero h1 .hero-h1-categoria {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.hero h1 .hero-h1-lema { display: block; }

@media (max-width: 780px) {
  .hero h1 .hero-h1-categoria { font-size: 11px; letter-spacing: .16em; margin-bottom: 12px; }
}

[data-theme="fusion"] .hero h1 .hero-h1-categoria {
  font-family: var(--font-ui);
  /* El gris menor es para papel; sobre la foto no llega al 4,5:1. */
  color: var(--papel-sobre-foto);
}

/* ═══════════════════════════════════════════════════════════
   PÁGINA 404
   Un error no puede ser un callejón. Antes esta ruta la servía el
   manejador por defecto de Express: «Cannot GET /…», en inglés, sin
   estilos y sin un solo enlace. Quien llegaba desde un anuncio con la
   URL caducada no tenía por dónde salir.
   ═══════════════════════════════════════════════════════════ */
.e404 { padding: 96px 0 120px; }
.e404-guia {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.e404-salidas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 34px;
}
.e404-salidas a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.e404-ayuda { font-size: 15px; line-height: 1.6; max-width: 620px; }

[data-theme="fusion"] .e404-guia { color: var(--ink-3); font-family: var(--font-ui); }
[data-theme="fusion"] .e404-salidas a {
  background: var(--bg-card);
  border: 2px solid var(--ink-1);
  border-radius: 3px;
  box-shadow: 3px 3px 0 var(--ink-1);
  color: var(--ink-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
[data-theme="fusion"] .e404-salidas a:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--seal);
}
[data-theme="fusion"] .e404-ayuda { color: var(--ink-2); }

/* ── Explicación de cada nivel de acabado ── */
/* El párrafo que dice CÓMO se consigue el acabado, no solo qué incluye.
   Es lo que permite a alguien que no pinta decidir sin preguntar, y era
   justo lo que la web no contaba: estaba en el catálogo en PDF y no
   había llegado aquí. */
.tar-explica {
  /* Vive en el cuerpo y no en la cabecera: metido arriba, cada tarjeta
     crecía lo suyo y los filetes que cierran las cabeceras volvían a caer
     a cuatro alturas distintas —472, 523, 537 y 451 px—, que es justo lo
     que se arregló al montar el panel. */
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
}
@media (max-width: 780px) {
  .tar-explica { font-size: 13px; }
}

[data-theme="fusion"] .tar-explica {
  color: var(--ink-2);
  border-top: 1px dashed var(--rule-soft);
  padding-top: 12px;
}

/* ── Figuras 3D · el acabado que va fuera de tarifa ── */
/* La pieza de exposición no compite en la misma liga que los tres niveles
   de lista: su precio no depende del tamaño sino de para qué es la figura
   —Box Art, fotografía de producto, encargo de estudio—. Por eso sale de
   la rejilla y se presenta como el servicio para empresas: con placa de
   consulta en lugar de importe. */
.gf-medida {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, .9fr);
  gap: 32px;
  align-items: start;
  margin-top: 34px;
  padding: 30px;
}
.gf-medida-rotulo {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.gf-medida-titulo {
  margin: 0 0 14px;
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.1;
}
.gf-medida-texto p { margin: 0 0 14px; line-height: 1.7; }
.gf-medida-texto p:last-child { margin-bottom: 0; }
.gf-medida-caja { display: flex; flex-direction: column; gap: 14px; }

@media (max-width: 780px) {
  .gf-medida { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
}

[data-theme="fusion"] .gf-medida {
  background: var(--bg-card);
  border: 2px solid var(--ink-1);
  border-radius: 4px;
  box-shadow: 6px 6px 0 var(--ink-1);
}
[data-theme="fusion"] .gf-medida-rotulo { color: var(--seal); font-family: var(--font-ui); }
[data-theme="fusion"] .gf-medida-titulo { font-family: var(--font-display); color: var(--ink-1); font-weight: 600; }
[data-theme="fusion"] .gf-medida-texto p { color: var(--ink-2); }