/* =========================================================
   HC SKIN — rediseño inspirado en Hero Collective
   Solo presentación (no altera ni añade contenido de texto).
   Se carga DESPUÉS de styles.css / hero-test.css / index-*.css
   ========================================================= */

/* ---------- Tipografías auto-alojadas de la referencia ---------- */
@font-face { font-family: "Anton"; src: url("fonts/Anton.woff2") format("woff2"); font-display: block; font-style: normal; font-weight: 400 }
@font-face { font-family: "Staff-Regular"; src: url("fonts/Staff-Regular.woff2") format("woff2"); font-display: block; font-style: normal }
@font-face { font-family: "Staff-Bold"; src: url("fonts/Staff-Bold.woff2") format("woff2"); font-display: block; font-style: normal; font-weight: 700 }

/* ---------- Tokens ---------- */
:root {
  --hc-bg: #121212;
  --hc-bg2: #1f1f1f;
  --hc-bg3: #1b1b1b;
  --hc-red: #ffc400;
  --hc-red-deep: #241d05;
  --hc-jungle: #102423;
  --hc-navy: #061a2b;
  --hc-navy2: #00192b;
  --hc-cream: #f4f3e3;
  --hc-beige: #e6e5ce;
  --hc-tan: #c7c5ac;
  --hc-muted: #a5a3a3;
  --hc-line: rgba(244, 243, 227, .18);
  --hc-line-dark: rgba(18, 18, 18, .18);
  --hc-r-s: 1rem;
  --hc-r-l: 2.5rem;
  --hc-anton: "Anton", "Arial Narrow", Impact, sans-serif;
  --hc-staff: "Staff-Regular", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --hc-bold: "Staff-Bold", var(--hc-staff);
  --hc-ease: cubic-bezier(.4, 0, .2, 1);
  --hc-ghost: 20vw;
}

/* ---------- Lenis (smooth scroll) ---------- */
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain }
.lenis.lenis-stopped { overflow: hidden }

/* ---------- Base ---------- */
html { background: var(--hc-bg) }
body {
  background: var(--hc-bg) !important;
  color: var(--hc-cream) !important;
  font-family: var(--hc-staff) !important;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--hc-red); color: var(--hc-cream) }

h1, h2, h3, h4, h5, h6,
.lm-giant, .xr-sec-title, .tst-h2, .xr-kicker, .demo-hint,
.stat-num, .breadcrumb, .page-hero h1 {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: -.012em;
  line-height: .9;
}
p, a, li, input, button, label, figcaption, .xr-lead, .blurb {
  font-family: var(--hc-staff);
}
strong, b, .bold { font-family: var(--hc-bold); font-weight: 700 }

/* Sin marcadores amarillos/lima en el texto del home (solo negrita) */
.xr-sub strong, .xr-lead strong, .xr-card strong, .demo-feat strong {
  background: none !important;
  color: inherit !important;
  padding: 0 !important;
}

/* Sin efecto 3D que sigue al cursor en los titulares (anticuado) */
.xp-3d-mid { display: none !important }
.xp-3d-face { transform: none !important }

/* ---------- Reveal (app.js añade .in a [data-reveal]) ---------- */
[data-reveal] { opacity: 0; transform: translateY(2.4rem); transition: opacity .9s var(--hc-ease), transform .9s var(--hc-ease) }
[data-reveal].in { opacity: 1; transform: none }
.should-animate { opacity: 0 }
.should-animate.is-in { opacity: 1 }

/* ---------- Estructura de secciones: paneles redondeados apilados ---------- */
.xr-page { background: var(--hc-bg) }
main { position: relative }

/* Fondo de vídeo global (el del hero), fijo detrás de todas las secciones.
   Así los bordes redondeados de cada panel dejan ver el vídeo y no el gris. */
.hc-page-bg {
  position: fixed; inset: 0; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: #070709;
}
.hc-page-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}

main > section[data-xp-chapter] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-top: -2.5rem;
  border-top-left-radius: var(--hc-r-s);
  border-top-right-radius: var(--hc-r-s);
}
@media (min-width: 1024px) {
  main > section[data-xp-chapter] { border-top-left-radius: var(--hc-r-l); border-top-right-radius: var(--hc-r-l) }
}
main > section[data-xp-chapter] > * { position: relative; z-index: 1 }

/* Palabra gigante desenfocada al fondo, con el texto ya presente en
   data-xp-chapter (no es contenido nuevo) */
main > section[data-xp-chapter]:not(.lm-hero)::before {
  content: attr(data-xp-chapter);
  position: absolute;
  left: 50%;
  bottom: -.14em;
  transform: translateX(-50%);
  z-index: 0;
  font-family: var(--hc-anton);
  font-size: var(--hc-ghost);
  line-height: .8;
  white-space: nowrap;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--hc-red);
  opacity: .12;
  filter: blur(.55vw);
  pointer-events: none;
  user-select: none;
}
.band-yellow::before, .band-white::before, .band-cream::before { color: #121212; opacity: .10 }

/* ---------- Color por banda ---------- */
.band-pink { background: var(--hc-red) !important; color: var(--hc-cream) !important }
.band-cyan { background: var(--hc-red-deep) !important; color: var(--hc-cream) !important }
.band-cyan .xr-sec-title, .band-cyan .xr-kicker { color: var(--hc-red) !important }
.band-lime { background: var(--hc-jungle) !important; color: var(--hc-cream) !important }
.band-yellow { background: var(--hc-tan) !important; color: #121212 !important }
.band-orange { background: var(--hc-navy) !important; color: var(--hc-cream) !important }
.band-mint { background: var(--hc-bg2) !important; color: var(--hc-cream) !important }
.band-white { background: var(--hc-tan) !important; color: #121212 !important }
.band-cream { background: var(--hc-beige) !important; color: #121212 !important }
#estudio { background: var(--hc-beige) !important; color: #121212 !important }

/* Padding de banda y contenedor interior (solo secciones de primer nivel) */
main > section.band-pad, main > section.band-pad-lg, main > section.band {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: clamp(4.5rem, 8vw, 9rem) clamp(1rem, 4vw, 3.5rem) !important;
}
main > section.band-pad > *, main > section.band-pad-lg > *, main > section.band > * {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Tipografía de sección ---------- */
.xr-kicker {
  color: var(--hc-red);
  letter-spacing: .08em;
  font-size: clamp(.72rem, 1vw, 1rem);
  margin-bottom: .9rem;
}
.band-pink .xr-kicker, .band-lime .xr-kicker, .band-orange .xr-kicker,
.band-mint .xr-kicker, .band-cyan .xr-kicker { color: var(--hc-cream) !important; opacity: .75 }
.band-cyan .xr-kicker { color: var(--hc-red) !important; opacity: 1 }

.xr-sec-title, .tst-h2 {
  font-size: clamp(2.1rem, 6.4vw, 6.4rem) !important;
  line-height: .92 !important;
  margin-bottom: clamp(1rem, 2vw, 1.8rem);
  text-wrap: balance;
}
/* "Problema": palabra a todo lo ancho, centrada, con las letras juntándose al hacer scroll */
#problema > .xr-sec-title, #seo-local > .xr-sec-title, #estudio > .xr-sec-title, #paginas > .xr-sec-title, #contacto > .xr-sec-title { text-align: center; position: relative; }
#problema > .xr-sec-title .cv-giant, #seo-local > .xr-sec-title .cv-giant, #estudio > .xr-sec-title .cv-giant, #paginas > .xr-sec-title .cv-giant, #contacto > .xr-sec-title .cv-giant {
  display: block;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  text-align: center;
  line-height: .9;
  letter-spacing: -.035em;
  font-size: 26vw;
}
#problema > .xr-sec-title .cv-giant .cv-word, #seo-local > .xr-sec-title .cv-giant .cv-word, #estudio > .xr-sec-title .cv-giant .cv-word, #paginas > .xr-sec-title .cv-giant .cv-word, #contacto > .xr-sec-title .cv-giant .cv-word {
  display: inline-block;
  white-space: nowrap;
}
#problema > .xr-sec-title .cv-ltr, #seo-local > .xr-sec-title .cv-ltr, #estudio > .xr-sec-title .cv-ltr, #paginas > .xr-sec-title .cv-ltr, #contacto > .xr-sec-title .cv-ltr {
  display: inline-block;
  will-change: transform;
}
#problema > .xr-sec-title .cv-static, #seo-local > .xr-sec-title .cv-static {
  position: relative;
  z-index: 4;
  display: block;
  font-family: var(--hc-anton) !important;
  font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-transform: uppercase;
  margin-top: max(2.5rem, 4.5vw);
}
/* El subtítulo de Problema, a tamaño de titular */
#problema > .xr-sec-title .cv-static { font-size: clamp(2.2rem, 5vw, 5.2rem) !important }
/* "invisible" con el mismo tamaño que el resto (solo se divide en letras para el efecto polvo) */
#problema .cv-dust { display: inline-block; white-space: nowrap }
.cv-dust .dust-l { display: inline-block; will-change: transform, opacity, filter }
/* Párrafo "Cada día..." — tipografía del texto informativo de la referencia:
   Staff, mayúsculas, peso 600, line-height 1.1, clamp(22px → 34px), centrado */
#problema > .xr-lead {
  font-family: var(--hc-staff) !important;
  font-weight: 600 !important;
  font-size: clamp(1.375rem, 1.6vw, 2.125rem) !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  text-align: center;
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: 0 !important;
  padding: 0 2vw !important;
}
/* Vídeo dentro de las letras de la palabra (recorte con la forma exacta del texto) */
#problema > .xr-sec-title .cv-fill, #seo-local > .xr-sec-title .cv-fill {
  position: absolute;
  left: 0; top: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s linear;
}
#problema > .xr-sec-title .cv-fill-video, #seo-local > .xr-sec-title .cv-fill-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
#problema > .xr-sec-title .cv-fill-svg, #seo-local > .xr-sec-title .cv-fill-svg {
  position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); display: block;
}
#problema > .xr-sec-title .cv-giant, #seo-local > .xr-sec-title .cv-giant, #estudio > .xr-sec-title .cv-giant, #paginas > .xr-sec-title .cv-giant, #contacto > .xr-sec-title .cv-giant { position: relative; z-index: 2; transition: opacity .35s linear; }
/* La sección empieza más arriba, con la palabra pegada al borde superior */
#problema, #seo-local { padding-top: clamp(1.6rem, 3vw, 3rem) !important }
/* Texto de la sección Problema en negro (fondo amarillo) */
#problema { color: #121212 !important }
#problema > .xr-sec-title,
#problema > .xr-sec-title .cv-giant,
#problema > .xr-sec-title .cv-static { color: #121212 !important }
#problema > .xr-lead { color: #121212 !important }
#problema > .xr-lead .slot,
#problema > .xr-lead .slot.filled {
  color: #121212 !important; background: none !important; border: 0 !important;
  padding: 0 !important; text-decoration: none !important;
}
#problema .lead-link { color: #121212 !important }
/* "Problema" más pequeño en móvil para que encaje */
@media (max-width: 640px) {
  #problema > .xr-sec-title .cv-giant { font-size: 19vw }
}

/* Palabras gigantes de paso ("AUD1TORÍA", "DI2EÑO"): a todo el ancho, con el nº en lugar de una letra */
#auditoria, #resultados, #paginas, #contacto { padding-top: clamp(1.6rem, 3vw, 3rem) !important }
#diseno { padding-top: clamp(5rem, 9vw, 11rem) !important }
#auditoria > .xr-sec-title, #diseno > .xr-sec-title, #resultados > .xr-sec-title, #paginas > .xr-sec-title, #contacto > .xr-sec-title { text-align: center; position: relative }
/* El wrapper NO lleva filter (rompería la máscara SVG del vídeo); el blur va solo al texto */
.au-wrap {
  position: relative;
  display: inline-block;
  vertical-align: top;
  font-size: 0;
  line-height: 0;
  transform-origin: 50% 50%;
  transition: transform 3.1s cubic-bezier(.16, .84, .24, 1), opacity 2.6s ease;
}
.au-giant {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  line-height: .9;
  letter-spacing: -.045em;
  font-size: clamp(3rem, 19vw, 17rem);
  filter: blur(1px);
  will-change: filter;
  transition: filter 2.8s ease;
}
.au-step { color: var(--hc-red) }
/* Entrada tipo hero ("EXISTES"): zoom en el conjunto + blur en el texto, al entrar en pantalla */
.au-wrap.au-prep { opacity: 0; transform: perspective(900px) translateZ(130px) scale(1.02) }
.au-wrap.au-prep .au-giant { filter: blur(34px) }
.au-wrap.au-in { opacity: 1; transform: none }
.au-wrap.au-in .au-giant { filter: blur(1px) }
/* DI2EÑO: las letras son ventanas al vídeo de fondo (un único vídeo, sin parpadeo).
   La sombra oscura tapa el vídeo; la máscara recorta las letras. */
#diseno .au-giant {
  position: relative;
  z-index: 2;
  color: transparent;
  -webkit-text-stroke: clamp(1px, .16vw, 2.5px) rgba(255, 255, 255, .6);
  paint-order: stroke fill;
}
#diseno .dis-shade {
  position: absolute;
  left: 50%; top: 0;
  width: 100vw; height: 220vh;
  margin-left: -50vw; margin-top: -25vh;
  z-index: 1;
  pointer-events: none;
  display: block;
}
/* Párrafo del funnel: legible sobre el vídeo (las palabras resaltadas no pueden quedar oscuras) */
#diseno .xr-lead { color: var(--hc-cream) !important; text-shadow: 0 2px 14px rgba(0, 0, 0, .55) }
#diseno .xr-lead .slot { color: inherit !important; opacity: 1 !important; background: none !important; border: 0 !important; padding: 0 !important; text-decoration: none !important }
#diseno .xr-lead .slot.filled {
  background: var(--hc-red) !important;
  color: var(--hc-cream) !important;
  padding: .02em .3em !important;
  border-radius: .16em;
  font-weight: 800 !important;
}
/* "Te muestro cómo lo conseguimos.": separada y más abajo */
#diseno .dis-close2 { margin-top: clamp(1.4rem, 3vw, 2.6rem) !important }
/* Fondo de vídeo de la sección Diseño */
#diseno { background: var(--hc-bg2) !important }
#diseno > .dis-bg { position: absolute; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; max-width: none !important; margin: 0 !important }
#diseno > .dis-bg > video { display: block; width: 100%; height: 100%; object-fit: cover }
/* Fondo de vídeo de la sección Resultados */
#resultados { position: relative; overflow: hidden }
#resultados > *:not(.aud-glow) { position: relative; z-index: 2 }
/* Fondo de vídeo de la sección Precios */
#precios { position: relative; background: var(--hc-bg2) !important; overflow: hidden }
#precios > .pre-bg { position: absolute; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; max-width: none !important; margin: 0 !important }
#precios > .pre-bg > video { display: block; width: 100%; height: 100%; object-fit: cover }
#precios > .pre-bg::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, .42) 45%, rgba(0, 0, 0, .72)) }
#precios > *:not(.pre-bg) { position: relative; z-index: 2 }
#precios > .xr-sec-title { text-align: center }
/* Tarjetas de Precios: claras y legibles (etiqueta + cifra grande + texto) */
#precios .xr-cards { gap: clamp(14px, 1.6vw, 22px) }
#precios .xr-card {
  padding: clamp(1.7rem, 2.8vw, 2.5rem);
  gap: .8rem;
  min-height: clamp(210px, 20vw, 280px);
  border-radius: var(--hc-r-l) !important;
}
#precios .xr-card h3 { display: block; font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important; line-height: 1.1 }
#precios .xr-card h3 .lbl {
  display: block;
  font-family: var(--hc-anton);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  letter-spacing: .02em;
  text-transform: uppercase;
  opacity: .72;
  margin: 0 0 .35rem;
}
#precios .xr-card h3 .n {
  display: block !important;
  font-family: var(--hc-anton);
  font-size: clamp(3rem, 5.2vw, 4.4rem) !important;
  line-height: .92;
  letter-spacing: -.01em;
  margin: 0 !important;
  color: var(--hc-red) !important;
}
#precios .xr-card.price-txt h3 .n,
#precios .xr-card h3.price-txt .n { font-size: clamp(2rem, 3.4vw, 2.9rem) !important }
#precios .xr-card p {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important;
  line-height: 1.5 !important;
  opacity: .95 !important;
  max-width: 34ch;
}
#precios .xr-card.hot h3 .n { color: #121212 !important }
#precios .xr-card.hot h3 .lbl { opacity: .6 }
#precios .xr-card.hot p { color: #121212 !important; opacity: .92 !important }
#precios .xr-card:hover h3 .n { transform: none }
/* "Diseño": titular grande bajo la palabra DI2EÑO (mismo color/tamaño/brillo que la sección 2) */
#diseno .dis-big {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(2rem, 7.5vw, 7rem) !important;
  line-height: .82 !important;
  letter-spacing: -.01em !important;
  color: var(--hc-red) !important;
  text-transform: uppercase;
  text-align: center;
  margin: clamp(1.2rem, 3vw, 2.4rem) auto 0;
  text-wrap: balance;
  filter: blur(1px);
  text-shadow: 0 0 14px rgba(255, 196, 0, .35), 0 0 40px rgba(255, 196, 0, .20);
}
#diseno .dis-big em { color: inherit; font-style: normal }
/* "Son las dos mitades del mismo trabajo:" — bajado una línea y con su propio tamaño */
#diseno .dis-sub {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(1.2rem, 3vw, 2.6rem) !important;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hc-cream);
  margin: clamp(1.8rem, 3.6vw, 3.2rem) auto 0;
}
/* Pasos del funnel (1 Visita · 2 Interés · ...) como tarjetas del nuevo estilo */
#diseno .funnel-steps {
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1.1rem);
  margin-top: clamp(1.8rem, 3.5vw, 3rem);
  justify-content: normal;
}
#diseno .funnel-steps li:not(.fs-arrow) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  padding: clamp(1rem, 2vw, 1.6rem);
  background: rgba(0, 0, 0, .35) !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: var(--hc-r-s) !important;
  box-shadow: none !important;
  color: var(--hc-cream) !important;
  font-family: var(--hc-anton) !important;
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  letter-spacing: .02em;
  line-height: 1;
  white-space: normal;
}
#diseno .funnel-steps li .fs-n {
  font-family: var(--hc-anton) !important;
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  line-height: .85;
  color: var(--hc-red) !important;
  background: none !important;
  border: 0 !important;
  display: block;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
#diseno .funnel-steps li.fs-go {
  background: var(--hc-red) !important;
  border-color: var(--hc-red) !important;
  color: #121212 !important;
}
#diseno .funnel-steps li.fs-go .fs-n { color: #121212 !important }
@media (max-width: 760px) {
  #diseno .funnel-steps { grid-template-columns: repeat(2, 1fr) }
}
/* Features del diseño (A medida · Rápida · Que vende · Lista para Google) al estilo HC */
#diseno .demo-feats { counter-reset: demofeat; gap: clamp(.6rem, 1.4vw, 1.1rem); margin-top: clamp(2rem, 4vw, 3.2rem) }
#diseno .demo-feat {
  counter-increment: demofeat;
  color: var(--hc-cream) !important;
  border: 1px solid var(--hc-line) !important;
  background: rgba(0, 0, 0, .35) !important;
  border-radius: var(--hc-r-s) !important;
  box-shadow: none !important;
  padding: clamp(1rem, 2vw, 1.6rem) !important;
}
#diseno .demo-feat::before {
  content: "0" counter(demofeat);
  display: block;
  font-family: var(--hc-anton);
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: .85;
  color: var(--hc-red);
  margin-bottom: .5rem;
}
#diseno .demo-feats .demo-feat strong {
  display: block !important;
  margin: 0 0 .4em !important;
  color: var(--hc-cream) !important;
  font-family: var(--hc-anton) !important;
  font-size: clamp(1.1rem, 1.8vw, 1.45rem) !important;
  text-transform: uppercase;
  letter-spacing: .02em;
}
#diseno .demo-feats .demo-feat span { color: var(--hc-muted) !important }
/* Mensaje "Diseños de última generación": mismo estilo que "Ese es tu FUNNEL", más pequeño y a todo el ancho */
#diseno .demo-hint {
  font-family: var(--hc-staff) !important;
  font-weight: 600 !important;
  font-size: clamp(1rem, 1.3vw, 1.55rem) !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--hc-cream) !important;
  max-width: none !important;
  width: 100vw !important;
  margin-top: clamp(2.4rem, 4.5vw, 3.6rem) !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 2vw !important;
  text-wrap: balance;
}
#diseno .demo-hint strong { color: var(--hc-red); font-weight: 700 }
/* Cierre de "Problema": bloque negro a sangre completa, esquinas superiores
   redondeadas y bajando hasta el final de la sección (toca la siguiente) */
#problema .tst-close {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: clamp(2.8rem, 6vw, 5rem) !important;
  /* Cancela el padding inferior de la banda para llegar hasta abajo */
  margin-bottom: calc(-1 * clamp(4.5rem, 8vw, 9rem)) !important;
  padding: clamp(4rem, 9vw, 8rem) clamp(1rem, 4vw, 3.5rem) clamp(4.5rem, 9vw, 8rem) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--hc-r-s) var(--hc-r-s) 0 0 !important;
  background: #141414 !important;
}
@media (min-width: 1024px) {
  #problema .tst-close { border-radius: var(--hc-r-l) var(--hc-r-l) 0 0 !important }
}
/* Título del cierre: mismo tratamiento que el título de sección de arriba */
#problema .tst-close .tst-mission { text-wrap: balance }
#problema .tst-close .tst-mission em {
  font-style: normal;
  color: var(--hc-red);
}
/* Párrafo del cierre, adaptado al nuevo diseño (HC) */
#problema .tst-close .tst-sub {
  font-family: var(--hc-staff);
  font-size: clamp(.85rem, 1.4vw, 1.15rem);
  line-height: 1.5;
  color: var(--hc-cream);
  opacity: .92;
  max-width: 62ch;
  margin: clamp(1rem, 2vw, 1.6rem) auto 0;
  text-align: center;
  text-shadow: none;
}
#problema .tst-close .tst-sub strong,
#problema .tst-close .tst-ink {
  font-family: var(--hc-bold);
  font-weight: 700;
  color: var(--hc-red);
  background: none;
  padding: 0;
}

/* ---------- Tarjetas de datos (93% / 75% / 0): paneles HC ---------- */
#problema .xr-cards { counter-reset: hcstat }
#problema .xr-cards .xr-card {
  counter-increment: hcstat;
  position: relative;
  display: flex; flex-direction: column; gap: .55rem;
  min-height: clamp(230px, 24vw, 320px);
  padding: clamp(1.5rem, 2.6vw, 2.4rem) clamp(1.3rem, 2.2vw, 2rem) clamp(1.2rem, 2vw, 1.8rem);
  background: rgba(0, 0, 0, .3) !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: var(--hc-r-s) !important;
  box-shadow: none !important;
  color: var(--hc-cream) !important;
  overflow: hidden;
  transition: transform .5s var(--hc-ease), border-color .5s var(--hc-ease), background-color .5s var(--hc-ease);
}
@media (min-width: 1024px) {
  #problema .xr-cards .xr-card { border-radius: var(--hc-r-l) !important }
}
/* Índice 01/02/03 arriba a la derecha, como los tiles de la referencia */
#problema .xr-cards .xr-card::after {
  content: "0" counter(hcstat);
  position: absolute; top: clamp(.9rem, 1.6vw, 1.4rem); right: clamp(1.1rem, 2vw, 1.7rem);
  font-family: var(--hc-anton);
  font-size: clamp(.8rem, 1.1vw, 1rem);
  letter-spacing: .06em;
  color: var(--hc-cream); opacity: .4;
  transition: color .5s var(--hc-ease), opacity .5s var(--hc-ease);
}
/* Número gigante arriba, etiqueta debajo, descripción abajo del todo */
#problema .xr-cards .xr-card h3 {
  display: block;
  margin: 0 0 auto;
  font-size: clamp(1.05rem, 1.8vw, 1.5rem) !important;
  letter-spacing: .01em;
}
#problema .xr-cards .xr-card h3 .n {
  display: block;
  width: auto; min-width: 0; height: auto; min-height: 0;
  margin: 0 0 .12em; padding: 0;
  background: none !important;
  border: 0 !important; box-shadow: none !important;
  color: var(--hc-red) !important;
  font-size: clamp(3.6rem, 7vw, 6.6rem);
  line-height: .85;
  letter-spacing: -.01em;
  filter: drop-shadow(0 0 .1em rgba(255, 196, 0, .3));
  transition: transform .5s var(--hc-ease), filter .5s var(--hc-ease);
}
#problema .xr-cards .xr-card p {
  color: var(--hc-cream) !important;
  opacity: .8;
  font-size: clamp(.85rem, 1.1vw, 1rem);
}
/* Hover: eleva, enciende borde e índice, el número crece y brilla */
#problema .xr-cards .xr-card:hover {
  transform: translateY(-6px);
  border-color: var(--hc-red) !important;
  background: rgba(0, 0, 0, .42) !important;
}
#problema .xr-cards .xr-card:hover::after { color: var(--hc-red); opacity: 1 }
#problema .xr-cards .xr-card:hover h3 .n {
  transform: scale(1.035);
  filter: drop-shadow(0 0 .18em rgba(255, 196, 0, .55));
}
/* Tarjeta destacada (0 TRÁFICO): panel crema con número oscuro */
#problema .xr-cards .xr-card.hot {
  background: var(--hc-cream) !important;
  border-color: var(--hc-cream) !important;
  color: #121212 !important;
}
#problema .xr-cards .xr-card.hot::after { color: #121212; opacity: .35 }
#problema .xr-cards .xr-card.hot h3 .n { color: #121212 !important; filter: none }
#problema .xr-cards .xr-card.hot p { color: #121212 !important; opacity: .85 }
#problema .xr-cards .xr-card.hot:hover {
  transform: translateY(-6px);
  border-color: var(--hc-red) !important;
  background: #fff !important;
}
#problema .xr-cards .xr-card.hot:hover h3 .n { transform: scale(1.035) }
@media (prefers-reduced-motion: reduce) {
  #problema .xr-cards .xr-card, #problema .xr-cards .xr-card h3 .n,
  #problema .xr-cards .xr-card::after { transition: none }
}
.band-pink .xr-sec-title, .band-lime .xr-sec-title, .band-orange .xr-sec-title,
.band-mint .xr-sec-title { color: var(--hc-cream) !important }
.band-cyan .xr-sec-title { color: var(--hc-cream) !important }
.band-yellow .xr-sec-title, .band-white .xr-sec-title, .band-cream .xr-sec-title { color: var(--hc-cream) !important }
/* El beige es más claro: tinta oscura para mantener la legibilidad */
#estudio .xr-sec-title, #estudio .tst-h2 { color: #121212 !important }

.xr-lead {
  font-size: clamp(1.02rem, 1.5vw, 1.4rem) !important;
  line-height: 1.5;
  max-width: 62ch;
  opacity: .9;
}
.band-yellow .xr-lead, .band-white .xr-lead, .band-cream .xr-lead,
#estudio .xr-lead { color: #2a2a2a !important }

.hl { background: var(--hc-red) !important; color: var(--hc-cream) !important; box-shadow: none !important; transform: none !important; padding: .02em .14em !important }
.slot { color: inherit }
/* Sobre bandas oscuras/rojas el resaltado se invierte para no perderse */
.band-pink .hl, .band-lime .hl, .band-orange .hl, .band-mint .hl {
  background: var(--hc-cream) !important; color: var(--hc-red) !important;
}

/* Enlaces de texto con subrayado animado (referencia) */
.lead-link, .xr-lead a, .blurb a, .demo-premium a {
  position: relative;
  text-decoration: none;
  color: var(--hc-red);
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-position: left 100%;
  background-repeat: no-repeat;
  transition: background-size .35s linear;
}
.lead-link:hover, .xr-lead a:hover, .demo-premium a:hover { background-size: 100% 1px }
.band-pink .lead-link, .band-lime .lead-link, .band-orange .lead-link,
.band-mint .lead-link { color: var(--hc-cream) }

/* ---------- HERO ---------- */
#inicio.lm-hero {
  min-height: 100vh;
  min-height: 100svh;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: transparent !important;
  color: var(--hc-cream) !important;
  padding: clamp(6.5rem, 15vh, 9.5rem) 0 clamp(1rem, 3vh, 2rem);
  overflow: hidden;
}
/* La sección siguiente empieza justo donde acaba la primera pantalla */
main > #inicio + section { margin-top: 0 !important }
/* El hero es la primera sección: sin margen negativo, mide exactamente la pantalla */
main > #inicio.lm-hero { margin-top: 0 !important }
/* Sin badge flotante del programa Fundadores en el home */
.f5-float { display: none !important }
/* Sin barra de progreso ni etiqueta de capítulo ("HOLA 00") en el home */
.progress, .xp-words { display: none !important }
/* Fondo a pantalla completa con efecto cinematográfico (como la referencia) */
#inicio .lm-bg { display: block !important; position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #070709 }
#inicio .lm-bg-img {
  position: absolute; inset: -6%; width: 112%; height: 112%;
  object-fit: cover; object-position: 50% 50%;
  filter: contrast(1.06) brightness(1.04) saturate(1.06);
  animation: hc-kenburns 30s ease-in-out infinite alternate;
  will-change: transform;
}
#inicio .lm-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* Fondo del hero: vídeo en crudo, sin filtros ni tintes de color */
#inicio .lm-bg::before,
#inicio .lm-bg::after { display: none !important }
#inicio .lm-bg .hc-film-lights,
#inicio .lm-bg .lm-glow,
#inicio .lm-bg .lm-grid,
#inicio .lm-bg .lm-graffiti,
#inicio .lm-bg .lm-noise,
#inicio .lm-bg .hc-flicker,
#inicio .lm-bg .hc-scan { display: none !important }
/* Grano de película animado */
#inicio .lm-bg::before {
  content: ""; position: absolute; inset: -60%; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .16; mix-blend-mode: overlay;
  animation: hc-grain .7s steps(3) infinite;
}
/* Duotono oscuro + viñeta + tinte rojo */
#inicio .lm-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  background:
    radial-gradient(132% 106% at 50% 44%, transparent 38%, rgba(5, 5, 6, .84) 100%),
    radial-gradient(58% 46% at 44% 2%, rgba(255, 196, 0, .18), transparent 66%),
    linear-gradient(180deg, rgba(9, 9, 10, .42) 0%, rgba(9, 9, 10, .16) 40%, rgba(9, 9, 10, .72) 82%, var(--hc-bg) 100%);
}
@keyframes hc-kenburns {
  from { transform: scale(1.06) translate3d(-1.5%, 0, 0) }
  to { transform: scale(1.2) translate3d(2%, -2%, 0) }
}
@keyframes hc-grain {
  0% { transform: translate(0, 0) }
  20% { transform: translate(-4%, 3%) }
  40% { transform: translate(3%, -4%) }
  60% { transform: translate(-3%, -2%) }
  80% { transform: translate(4%, 2%) }
  100% { transform: translate(0, 0) }
}
#inicio .lm-glow { background: radial-gradient(circle, rgba(255, 196, 0, .5), transparent 70%) !important; opacity: .45 }
#inicio .lm-grid { opacity: .08 }
#inicio .lm-graffiti { display: none }
#inicio .lm-noise { opacity: .12 }

/* Columna del hero: eyebrow arriba, bloque tipográfico abajo (a sangre) */
#inicio .lm-inner {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: none; margin: 0; padding: 0;
  text-align: center;
}
#inicio .lm-inner[data-reveal] { opacity: 1 !important; transform: none !important }

#inicio .lm-eyebrow {
  margin: auto 0 clamp(.5rem, 1.2vh, .9rem) !important;
  color: var(--hc-cream) !important;
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: .03em;
  font-size: clamp(.78rem, 1.25vw, 1.1rem) !important;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--hc-ease), transform .9s var(--hc-ease);
  transition-delay: .05s;
}
#inicio.lm-hero.hc-ready .lm-eyebrow { opacity: .9; transform: none }
#inicio .lm-eyebrow em { color: var(--hc-red); font-style: normal }
#inicio .lm-eyebrow-tag {
  background: var(--hc-red) !important; color: var(--hc-cream) !important;
  border: 0 !important; border-radius: 0 !important; padding: .08em .55em .12em !important;
  margin-right: .4em; font-weight: 400;
}
#inicio .lm-claim { display: block; width: 100%; transform: none !important; margin-top: 0 }
#inicio .lm-frame { display: block !important; width: 100%; border: 0 !important; padding: 0 !important; margin: 0 !important }
#inicio .lm-h { display: none !important }

/* Palabra gigante a todo el ancho, como "HEROES" en la referencia.
   El tamaño real lo calcula hc.js para que ocupe el ancho completo. */
#inicio .lm-giant {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  text-align: center;
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: 100px;
  line-height: .82 !important;
  letter-spacing: -.03em !important;
  text-transform: uppercase;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}
/* Cada palabra en su propia línea a todo el ancho (título enorme) */
#inicio .lm-giant .w-mal, #inicio .lm-giant .w-dis { display: block; white-space: nowrap; line-height: .82 }
/* Forzar Anton también en las letras y palabras internas del titular */
#inicio .lm-giant, #inicio .lm-giant .w-mal, #inicio .lm-giant .w-dis, #inicio .lm-giant .hc-ltr {
  font-family: var(--hc-anton) !important;
}
/* Sin contorno/reborde en el titular */
#inicio .lm-giant .w-mal, #inicio .lm-giant .w-dis, #inicio .lm-giant .hc-ltr {
  -webkit-text-stroke: 0 !important;
  -webkit-text-stroke-width: 0 !important;
  -webkit-text-fill-color: currentColor !important;
}
#inicio .lm-giant .w-mal { color: var(--hc-beige) !important; text-shadow: none !important; word-spacing: .22em }
#inicio .lm-giant .w-dis {
  color: var(--hc-red) !important;
  text-shadow:
    0 0 14px rgba(255, 196, 0, .35),
    0 0 40px rgba(255, 196, 0, .20) !important;
  padding-top: .04em !important;
}
/* Entrada letra a letra (flip 3D + stagger), como en la referencia */
#inicio .lm-giant .hc-ltr {
  display: inline-block;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(58%) perspective(900px) rotateX(-88deg);
  will-change: transform, opacity;
  transition: transform .95s cubic-bezier(.16, .84, .24, 1), opacity .55s ease;
}
#inicio .lm-giant.hc-in .hc-ltr { opacity: 1; transform: none }
/* Palabras con glifos que sobresalen (Ñ, ...): entrada como palabra completa */
#inicio .lm-giant .hc-word {
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(16%) perspective(900px) rotateX(-62deg);
  will-change: transform, opacity;
  transition: transform .95s cubic-bezier(.16, .84, .24, 1), opacity .55s ease;
}
#inicio .lm-giant.hc-in .hc-word { opacity: 1; transform: none }

/* Entrada palabra a palabra (primera línea) y entrada lenta (última palabra) */
#inicio .lm-giant .hc-w {
  display: inline-block;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: opacity;
  transition: opacity .01s linear;
}
#inicio .lm-giant.hc-in .hc-w { opacity: 1 }
#inicio .lm-giant .hc-w.hc-w-slow {
  transform-origin: 50% 50%;
  filter: blur(34px);
  transform: perspective(900px) translateZ(130px) scale(1.02);
  will-change: transform, opacity, filter;
  transition: transform 3.1s cubic-bezier(.16, .84, .24, 1), opacity 2.6s ease, filter 2.8s ease;
}
#inicio .lm-giant.hc-in .hc-w.hc-w-slow {
  opacity: 1; filter: blur(1px); transform: perspective(900px) translateZ(0) scale(1);
}

/* Trazo dibujado a mano bajo "NO SABE" */
#inicio .lm-giant { position: relative }
#inicio .lm-giant .hc-underline {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  pointer-events: none;
  z-index: 3;
  clip-path: inset(0 100% 0 0);
  transition: clip-path .65s cubic-bezier(.62, .04, .3, 1);
}
#inicio .lm-giant.hc-circled .hc-underline { clip-path: inset(0 0 0 0) }

#inicio .lm-think-sub {
  margin: .7rem 0 0 !important;
  color: var(--hc-muted) !important;
  font-size: clamp(.9rem, 1.35vw, 1.15rem) !important;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--hc-ease), transform .8s var(--hc-ease);
  transition-delay: .35s;
}
#inicio.lm-hero.hc-ready .lm-think-sub { opacity: 1; transform: none }
#inicio .lm-think-sub strong { color: var(--hc-cream) !important; background: none !important }

#inicio .lm-think {
  margin: .35rem 0 0 !important;
  color: var(--hc-cream) !important;
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(1.3rem, 2.6vw, 2.3rem) !important;
  letter-spacing: -.01em !important;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--hc-ease), transform .8s var(--hc-ease);
  transition-delay: .45s;
}
#inicio.lm-hero.hc-ready .lm-think { opacity: 1; transform: none }
#inicio .lm-think span { color: var(--hc-red) !important; -webkit-text-fill-color: var(--hc-red) !important; background: none !important; text-transform: uppercase }

#inicio .lm-ctas {
  justify-content: center !important;
  margin-top: clamp(1rem, 2.2vh, 1.6rem) !important;
  opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--hc-ease), transform .8s var(--hc-ease);
  transition-delay: .55s;
}
#inicio.lm-hero.hc-ready .lm-ctas { opacity: 1; transform: none }

#inicio .lm-cta, #inicio .lm-swipe { font-family: var(--hc-anton) !important; text-transform: uppercase; letter-spacing: .03em }
#inicio .lm-cta.solid {
  background: var(--hc-red) !important; color: var(--hc-cream) !important;
  border: 0 !important; border-radius: 12px !important; padding: 1.05em 1.6em !important;
}
#inicio .lm-cta.solid:hover { background: #ffd94a !important; color: var(--hc-cream) !important; transform: scale(.97) !important; box-shadow: none !important }
#inicio .lm-cta.pill {
  background: transparent !important; color: var(--hc-cream) !important;
  border: 1px solid var(--hc-line) !important; border-radius: 12px !important; padding: 1.05em 1.6em !important;
}
#inicio .lm-cta.pill:hover { background: var(--hc-cream) !important; color: #121212 !important; border-color: var(--hc-cream) !important }
#inicio .lm-swipe { color: var(--hc-muted) !important; border: 0 !important; border-bottom: 1px solid var(--hc-line) !important; border-radius: 0 !important; padding: .2em 0 !important }
#inicio .lm-swipe:hover { color: var(--hc-red) !important; border-bottom-color: var(--hc-red) !important }

#inicio .lm-spec {
  position: relative;
  z-index: 2;
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: .4rem clamp(1rem, 5vw, 3.5rem);
  width: 100%;
  margin-top: clamp(1rem, 2.4vh, 1.8rem) !important;
  padding: .85rem 0 1.05rem !important;
  border-top: 1px solid var(--hc-line) !important;
  color: var(--hc-muted) !important;
  font-family: var(--hc-staff) !important;
  font-size: clamp(.68rem, .95vw, .86rem) !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0; transform: translateY(14px);
  transition: opacity .8s var(--hc-ease), transform .8s var(--hc-ease);
  transition-delay: .65s;
}
#inicio.lm-hero.hc-ready .lm-spec { opacity: 1; transform: none }
#inicio .lm-spec b { color: var(--hc-red) !important; margin-right: .35em }

/* El logo se queda fijo arriba también al bajar (no se esconde) */
#inicio .lm-logo { position: fixed; z-index: 9500 }
body.hc-header-hidden #inicio .lm-logo { transform: none !important }
/* Color del logo según el fondo (assets/logo-contrast.js) */
#inicio .lm-logo { filter: brightness(0) invert(1) }          /* fondo oscuro: logo claro */
body.logo-on-light #inicio .lm-logo { filter: brightness(0) } /* fondo claro: logo oscuro */
@media (min-width: 761px) {
  body.menu-pinned #inicio .lm-menu { padding-left: clamp(96px, 9vw, 150px) }
}

/* ---------- NAV / MENÚ DESPLEGABLE (panel crema, como la referencia) ---------- */
/* La referencia no usa nav horizontal: solo logo + hamburguesa.
   Se oculta la lista y se replica dentro del panel desplegable. */
#inicio .lm-logo {
  filter: none;
  position: fixed !important;
  top: clamp(12px, 2.4vh, 24px) !important;
  left: clamp(12px, 2vw, 30px) !important;
  z-index: 120;
  transition: transform .5s var(--hc-ease), opacity .35s var(--hc-ease) !important;
}
#inicio .lm-logo-word { filter: brightness(0) invert(1) }
#inicio .lm-menu { display: none !important }
.site-header .lm-menu { display: none !important }

#inicio .lm-burger {
  display: grid !important;
  place-items: center;
  position: fixed !important;
  top: clamp(12px, 2.2vh, 22px) !important;
  right: clamp(12px, 2vw, 26px) !important;
  left: auto !important;
  width: 46px !important; height: 46px !important;
  margin: 0 !important; padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  z-index: 130 !important;
  cursor: pointer;
  transition: transform .5s var(--hc-ease) !important;
}
#inicio .lm-burger span {
  background: var(--hc-cream) !important;
  width: 28px !important; height: 2px !important; margin: 3px 0 !important;
  transition: transform .4s var(--hc-ease), opacity .3s var(--hc-ease), background-color .3s var(--hc-ease) !important;
}
#inicio .lm-burger span:nth-child(2) { display: none } /* dos líneas, como la referencia */
body.hc-header-hidden #inicio .lm-logo { transform: translateY(-160%) }
body.hc-header-hidden #inicio .lm-burger { transform: translateY(-160%) }
body.hc-menu-open #inicio .lm-burger span { background: var(--hc-cream) !important }
body.hc-menu-open #inicio .lm-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg) }
body.hc-menu-open #inicio .lm-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg) }
body.hc-menu-open #inicio .lm-logo { opacity: 0; pointer-events: none }

/* Backdrop */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 124;
  background: rgba(8, 8, 8, .62);
  opacity: 0; pointer-events: none;
  transition: opacity .45s var(--hc-ease);
}
body.hc-menu-open::before { opacity: 1; pointer-events: auto }

/* Menú a pantalla completa, con el idioma visual del sitio */
.hc-menu {
  position: fixed;
  inset: 0;
  z-index: 125;
  background: var(--hc-bg);
  color: var(--hc-cream);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 4vh, 2.5rem);
  padding: clamp(3.75rem, 9vh, 6rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.25rem, 4vh, 2.25rem);
  overflow: auto;
  opacity: 0;
  visibility: hidden;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), opacity .35s var(--hc-ease), visibility 0s linear .45s;
}
.hc-menu::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(115% 75% at 84% 4%, rgba(255, 196, 0, .10) 0%, transparent 58%),
    radial-gradient(150% 120% at 8% 100%, rgba(0, 0, 0, .6) 0%, transparent 68%);
}
body.hc-menu-open .hc-menu {
  opacity: 1;
  visibility: visible;
  clip-path: inset(0 0 0 0);
  transition: clip-path .7s cubic-bezier(.76, 0, .24, 1), opacity .25s var(--hc-ease), visibility 0s;
}
body.hc-menu-open { overflow: hidden }
.hc-menu-close {
  position: absolute;
  top: clamp(12px, 2.2vh, 22px);
  right: clamp(12px, 2vw, 26px);
  z-index: 3;
  width: 46px; height: 46px; margin: 0; padding: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  cursor: pointer;
}
.hc-menu-close::before, .hc-menu-close::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 28px; height: 2px; background: var(--hc-cream);
  transition: background-color .3s var(--hc-ease);
}
.hc-menu-close::before { transform: translate(-50%, -50%) rotate(45deg) }
.hc-menu-close::after { transform: translate(-50%, -50%) rotate(-45deg) }
.hc-menu-close:hover::before, .hc-menu-close:hover::after,
.hc-menu-close:focus-visible::before, .hc-menu-close:focus-visible::after { background: var(--hc-red) }
.hc-menu-list { position: relative; z-index: 1; display: flex; flex-direction: column }
.hc-menu a.hc-menu-link {
  display: block;
  width: 100%;
  font-family: var(--hc-anton) !important;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.1rem, min(8vw, 7.2vh), 5rem);
  line-height: 1.03;
  letter-spacing: -.015em;
  color: var(--hc-cream) !important;
  background: none !important;
  border: 0; border-bottom: 1px solid var(--hc-line);
  border-radius: 0; box-shadow: none !important;
  text-decoration: none;
  padding: clamp(.35rem, 1.1vh, .8rem) 0;
  transform: translateY(.35em);
  opacity: 0;
  transition: color .3s var(--hc-ease), padding-left .5s var(--hc-ease), opacity .5s var(--hc-ease), transform .5s var(--hc-ease);
}
body.hc-menu-open .hc-menu a.hc-menu-link {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * 55ms + 100ms);
}
.hc-menu a.hc-menu-link:hover,
.hc-menu a.hc-menu-link:focus-visible {
  color: var(--hc-red) !important;
  padding-left: clamp(.1em, 1.6vw, .45em);
  outline: none;
}
.hc-menu a.hc-menu-link.is-hot { color: var(--hc-red) !important }
.hc-menu a.hc-menu-link.is-hot:hover { color: var(--hc-cream) !important }
.hc-menu-foot {
  position: relative; z-index: 1;
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .9rem 1.5rem;
  padding-top: clamp(.85rem, 2.2vh, 1.4rem);
  border-top: 1px solid var(--hc-line);
  font-family: var(--hc-staff);
  font-size: clamp(.78rem, 1.5vw, .92rem);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hc-muted);
}
.hc-menu-foot a { color: var(--hc-cream) !important; text-decoration: none; border-bottom: 1px solid transparent; transition: color .3s var(--hc-ease), border-color .3s var(--hc-ease) }
.hc-menu-foot a:hover { color: var(--hc-red) !important; border-bottom-color: var(--hc-red) }
.hc-menu-cta {
  background: var(--hc-red) !important;
  color: #121212 !important;
  padding: .72em 1.35em;
  border-radius: 999px;
  font-family: var(--hc-bold);
  font-weight: 700;
  letter-spacing: .04em;
}
.hc-menu-cta:hover { background: var(--hc-cream) !important; color: #121212 !important; border-bottom-color: transparent !important }
.hc-menu-tel { margin-left: auto }
@media (prefers-reduced-motion: reduce) {
  .hc-menu, body.hc-menu-open .hc-menu { clip-path: none }
  .hc-menu a.hc-menu-link, body.hc-menu-open .hc-menu a.hc-menu-link { opacity: 1; transform: none; transition-delay: 0s }
}

/* ---------- Tarjetas ---------- */
.xr-cards { gap: clamp(12px, 1.4vw, 20px) !important }
.xr-card, .demo-feat {
  background: rgba(0, 0, 0, .22) !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: var(--hc-r-s) !important;
  box-shadow: none !important;
  color: inherit !important;
  transition: transform .45s var(--hc-ease), border-color .45s var(--hc-ease), background-color .45s var(--hc-ease);
}
.xr-card:hover, .demo-feat:hover { transform: translateY(-5px); border-color: var(--hc-red) !important; background: rgba(0, 0, 0, .32) !important }
.band-yellow .xr-card, .band-white .xr-card, #estudio .xr-card, .band-cream .xr-card { background: rgba(18, 18, 18, .06) !important; border-color: var(--hc-line-dark) !important }
.xr-card h3, .demo-feat strong { font-family: var(--hc-anton) !important; text-transform: uppercase; letter-spacing: 0; font-size: clamp(1.05rem, 1.6vw, 1.5rem) !important }
.xr-card h3 .n { color: var(--hc-red) !important; font-family: var(--hc-anton) !important }
.xr-card.hot { background: var(--hc-red) !important; border-color: var(--hc-red) !important; color: var(--hc-cream) !important }
.xr-card.hot h3 .n { color: var(--hc-cream) !important }
.band-yellow .xr-card.hot, .band-white .xr-card.hot { background: var(--hc-cream) !important; border-color: var(--hc-cream) !important; color: #121212 !important }
.band-pink .xr-card.hot, .band-lime .xr-card.hot, .band-orange .xr-card.hot, .band-mint .xr-card.hot {
  background: var(--hc-cream) !important; border-color: var(--hc-cream) !important; color: #121212 !important;
}
.band-pink .xr-card.hot h3 .n, .band-lime .xr-card.hot h3 .n,
.band-orange .xr-card.hot h3 .n, .band-mint .xr-card.hot h3 .n { color: var(--hc-red) !important }

/* Tarjetas de páginas (a.xr-page) — estilo panel de proyecto */
a.xr-page {
  background: var(--hc-red) !important;
  color: var(--hc-cream) !important;
  border: 0 !important;
  border-radius: var(--hc-r-s) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color .45s var(--hc-ease), color .45s var(--hc-ease), transform .45s var(--hc-ease);
}
a.xr-page:hover { background: var(--hc-cream) !important; color: #121212 !important; transform: translateY(-6px) !important }
a.xr-page h3 { font-family: var(--hc-anton) !important; font-size: clamp(1.3rem, 2.2vw, 2rem) !important; line-height: .95 !important; color: inherit !important; margin-bottom: .4rem }
a.xr-page p { color: inherit !important; opacity: .85 }
a.xr-page .go { color: inherit !important; font-family: var(--hc-anton); text-transform: uppercase; letter-spacing: .06em }

/* ---------- Botones ---------- */
.xr-btn, .xr-actions .xr-btn, .tst-cta {
  font-family: var(--hc-anton) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--hc-red) !important;
  color: var(--hc-cream) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: transform .4s var(--hc-ease), background-color .4s var(--hc-ease), color .4s var(--hc-ease);
}
@media (min-width: 1024px) { .xr-btn, .tst-cta { border-radius: 24px !important } }
.xr-btn:hover, .tst-cta:hover { transform: scale(.97) !important; background: #ffd94a !important; color: var(--hc-cream) !important }
.xr-btn.ghost, .tst-cta.ghost {
  background: transparent !important; color: var(--hc-cream) !important;
  border: 1px solid currentColor !important;
}
.xr-btn.ghost:hover, .tst-cta.ghost:hover { background: var(--hc-cream) !important; color: #121212 !important }
.band-yellow .xr-btn, .band-white .xr-btn, .band-cream .xr-btn, #estudio .xr-btn { background: #121212 !important; color: var(--hc-cream) !important }
.band-yellow .xr-btn.ghost, .band-white .xr-btn.ghost, .band-cream .xr-btn.ghost, #estudio .xr-btn.ghost { background: transparent !important; color: #121212 !important }
.band-yellow .xr-btn:hover, .band-white .xr-btn:hover, #estudio .xr-btn:hover { background: var(--hc-red) !important; color: var(--hc-cream) !important }

/* ---------- Funnel, demo, dot, premium ---------- */
.funnel-steps { color: inherit }
.funnel-steps li { font-family: var(--hc-anton); text-transform: uppercase; letter-spacing: .03em }
.funnel-steps .fs-n { background: var(--hc-red) !important; color: var(--hc-cream) !important; border: 0 !important }
.demo-card { border-radius: var(--hc-r-s) !important; border: 1px solid var(--hc-line) !important; box-shadow: none !important; background: #000 !important }
.demo-bar { background: #121212 !important; border-bottom: 1px solid var(--hc-line) !important }
.demo-bar i { background: var(--hc-red) !important }
.demo-card figcaption { background: #121212 !important; color: var(--hc-cream) !important; border-top: 1px solid var(--hc-line) !important; font-family: var(--hc-anton) !important }
/* Gama Signature: editorial centrado, sin tarjeta ni fondos (como el resto de titulares) */
#diseno .demo-premium {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: clamp(3rem, 6vw, 5rem) !important;
  text-align: center;
}
#diseno .demo-premium-title {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(2.4rem, 7.5vw, 7rem) !important;
  line-height: .82 !important;
  letter-spacing: -.02em !important;
  text-transform: uppercase;
  color: var(--hc-red) !important;
  margin: 0 auto !important;
  filter: blur(1px);
  text-shadow: 0 0 14px rgba(255, 196, 0, .35), 0 0 40px rgba(255, 196, 0, .20);
  text-wrap: balance;
}
#diseno .demo-premium-lead {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(1.2rem, 3vw, 2.6rem) !important;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: var(--hc-cream) !important;
  margin: clamp(1rem, 2.4vw, 1.8rem) auto 0 !important;
}
#diseno .demo-premium-body {
  font-family: var(--hc-staff) !important;
  font-weight: 400 !important;
  font-size: clamp(1rem, 1.5vw, 1.3rem) !important;
  line-height: 1.5 !important;
  text-transform: uppercase;
  color: var(--hc-cream) !important;
  opacity: .9;
  max-width: 62ch !important;
  margin: clamp(1.2rem, 2.6vw, 2rem) auto 0 !important;
}
#diseno .demo-premium-cta {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  font-family: var(--hc-anton) !important;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
  color: var(--hc-cream) !important;
  background: transparent !important;
  background-image: none !important;
  border: 1px solid var(--hc-cream);
  border-radius: 999px;
  padding: .9em 1.7em;
  text-decoration: none;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
  box-decoration-break: clone;
  transition: transform .35s var(--hc-ease), background-color .35s var(--hc-ease), color .35s var(--hc-ease), border-color .35s var(--hc-ease);
}
#diseno .demo-premium-cta:hover {
  background: var(--hc-cream) !important;
  color: #121212 !important;
  border-color: var(--hc-cream);
  text-shadow: none;
  transform: translateY(-2px);
}
/* ---------- El estudio: titular gigante + editorial centrado (estilo Hero Collective) ---------- */
#estudio { padding-top: clamp(1.6rem, 3vw, 3rem) !important; padding-bottom: clamp(5rem, 9vw, 9rem) !important }
#estudio > .xr-sec-title { text-align: center; position: relative; color: var(--hc-cream) !important }
#estudio .estudio-big {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(2.6rem, 8.5vw, 8rem) !important;
  line-height: .84 !important;
  letter-spacing: -.015em !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--hc-red) !important;
  margin: clamp(1.4rem, 3.2vw, 2.8rem) auto 0;
  filter: blur(1px);
  text-shadow: 0 0 14px rgba(255, 196, 0, .35), 0 0 40px rgba(255, 196, 0, .20);
  text-wrap: balance;
}
#estudio .estudio-big em { background: none !important; color: inherit !important; font-style: normal }
#estudio .estudio-big .slot,
#estudio .estudio-big .slot.filled {
  background: none !important; color: var(--hc-cream) !important; border: 0 !important;
  padding: 0 !important; text-decoration: none !important; opacity: 1 !important;
}
#estudio > .xr-lead .slot,
#estudio > .xr-lead .slot.filled {
  background: none !important; color: var(--hc-red) !important; border: 0 !important;
  padding: 0 !important; text-decoration: none !important; opacity: 1 !important;
}
#estudio .estudio-sub {
  font-family: var(--hc-anton) !important;
  font-weight: 400 !important;
  font-size: clamp(1.5rem, 3.8vw, 3.4rem) !important;
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-align: center;
  color: var(--hc-cream) !important;
  margin: clamp(1.1rem, 2.6vw, 2rem) auto 0;
}
#estudio > .xr-lead {
  color: var(--hc-cream) !important;
  font-size: clamp(1.15rem, 1.7vw, 1.75rem) !important;
  max-width: 54ch !important;
  margin: clamp(1.6rem, 3vw, 2.4rem) auto 0 !important;
}
#estudio .rw-ctas { justify-content: center; margin-top: clamp(3rem, 5.5vw, 4.6rem) }
.dot-head .dot-num { font-family: var(--hc-anton) !important; color: var(--hc-red) !important }
.dot-head .dot-name { font-family: var(--hc-staff) !important; text-transform: uppercase; letter-spacing: .06em }

/* Imágenes / figuras redondeadas a juego */
.xr-shot, .xr-shot img, .tst-photo .tst-frame { border-radius: var(--hc-r-s) !important; overflow: hidden }
.xr-shot { border: 1px solid var(--hc-line) !important; box-shadow: none !important }

/* ---------- Cabecera del estudio (loupe) ---------- */
#estudio .tst-lower { background: transparent !important; border-radius: var(--hc-r-s) }
#estudio .tst-mark { color: var(--hc-red) !important }

/* ---------- Footer ---------- */
/* Vídeo de fondo del footer (el mismo del index) */
.xr-footer { position: relative; overflow: hidden; isolation: isolate }
.xr-footer-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
  opacity: 1; filter: none;
}
.xr-footer-grid, .xr-footer-bar { position: relative; z-index: 1 }
.xr-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 18, 18, .45) 0%, rgba(18, 18, 18, .72) 70%);
}
.xr-footer { background: var(--hc-bg) !important; color: var(--hc-cream) !important }
.xr-footer .xr-btn { background: var(--hc-red) !important; color: var(--hc-cream) !important }
.xr-footer h2 { color: var(--hc-red) !important; font-family: var(--hc-anton) !important; text-transform: uppercase; letter-spacing: .06em }
.xr-footer a { color: var(--hc-cream) !important; position: relative; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-position: left 100%; background-repeat: no-repeat; transition: background-size .35s linear, color .3s var(--hc-ease) }
.xr-footer a:hover { color: var(--hc-red) !important; background-size: 100% 1px; text-decoration: none !important }
.xr-footer-bar { border-top: 1px solid var(--hc-line) !important; color: var(--hc-muted) }
.xr-torn { background: var(--hc-red) !important; height: 18px !important }

/* ---------- Elementos flotantes ---------- */
.progress-bar { background: var(--hc-red) !important }
.cursor span { border-color: var(--hc-red) !important }
.to-top { background: var(--hc-red) !important; color: var(--hc-cream) !important; border-radius: 999px !important }
.xp-words { color: var(--hc-cream) }
.xp-words-dot { background: var(--hc-red) !important }
.xp-words-num { color: var(--hc-red) !important }

/* ---------- Cookies ---------- */
.cookie-consent-inner { background: #121212 !important; color: var(--hc-cream) !important; border: 1px solid var(--hc-line) !important; border-radius: var(--hc-r-s) }
.cookie-consent .cookie-title { color: var(--hc-red) !important; font-family: var(--hc-anton) !important; text-transform: uppercase }
.cookie-consent .btn-primary { background: var(--hc-red) !important; color: var(--hc-cream) !important; border: 0 !important }
.cookie-consent .btn:not(.btn-primary) { background: transparent !important; color: var(--hc-cream) !important; border: 1px solid var(--hc-line) !important }

/* ---------- Parallax helper ---------- */
.hc-parallax { will-change: transform }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important }
  main > section[data-xp-chapter]:not(.lm-hero)::before { filter: blur(6px) }
  #inicio .lm-giant .hc-ltr, #inicio .lm-giant .hc-word, #inicio .lm-giant .hc-w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important }
  .au-wrap, .au-wrap.au-prep, .au-giant, .au-giant.au-prep { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important }
  #inicio .lm-giant .hc-underline { transition: none !important; clip-path: none !important }
  #inicio .lm-eyebrow, #inicio .lm-think-sub, #inicio .lm-think, #inicio .lm-ctas, #inicio .lm-spec {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  #inicio .lm-bg-img, #inicio .lm-bg::before { animation: none !important }
}

/* =========================================================
   FILM LAYERS — luces en movimiento + parpadeo de cine antiguo
   (fondos generados localmente; sin vídeos de terceros)
   ========================================================= */
.hc-film-lights { position: absolute; inset: -18%; z-index: 1; pointer-events: none; mix-blend-mode: screen; overflow: hidden }
.hc-film-lights i { position: absolute; display: block; border-radius: 50%; filter: blur(64px); will-change: transform, opacity }
.hc-film-lights i:nth-child(1) {
  left: 4%; top: 6%; width: 54%; height: 62%;
  background: radial-gradient(circle, rgba(255, 196, 0, .55), transparent 68%);
  animation: hc-drift1 17s ease-in-out infinite alternate, hc-flick 5.5s steps(1) infinite;
}
.hc-film-lights i:nth-child(2) {
  right: 0; top: 24%; width: 48%; height: 54%;
  background: radial-gradient(circle, rgba(58, 118, 190, .5), transparent 70%);
  animation: hc-drift2 21s ease-in-out infinite alternate, hc-flick 7.3s steps(1) infinite;
}
.hc-film-lights i:nth-child(3) {
  left: 22%; bottom: 0; width: 58%; height: 54%;
  background: radial-gradient(circle, rgba(235, 138, 48, .42), transparent 70%);
  animation: hc-drift3 25s ease-in-out infinite alternate, hc-flick 9.1s steps(1) infinite;
}
@keyframes hc-drift1 {
  0% { transform: translate3d(-6%, -4%, 0) scale(1) }
  100% { transform: translate3d(10%, 8%, 0) scale(1.25) }
}
@keyframes hc-drift2 {
  0% { transform: translate3d(6%, 4%, 0) scale(1.15) }
  100% { transform: translate3d(-8%, -6%, 0) scale(1) }
}
@keyframes hc-drift3 {
  0% { transform: translate3d(-4%, 8%, 0) scale(1.05) }
  100% { transform: translate3d(8%, -6%, 0) scale(1.3) }
}
@keyframes hc-flick {
  0%, 100% { opacity: .5 }
  7% { opacity: .34 } 9% { opacity: .62 }
  36% { opacity: .48 } 38% { opacity: .28 }
  61% { opacity: .58 } 63% { opacity: .4 }
  84% { opacity: .52 }
}
/* Parpadeo de película (gate flicker) */
.hc-flicker {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(255, 255, 255, .05); mix-blend-mode: overlay;
  animation: hc-flickgate .32s steps(2) infinite;
}
@keyframes hc-flickgate { 0% { opacity: .28 } 50% { opacity: .04 } 100% { opacity: .2 } }
/* Ligeras líneas de escaneo */
.hc-scan {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .24) 0 1px, transparent 1px 3px);
  opacity: .3; mix-blend-mode: multiply;
}
@keyframes hc-burnpulse { 0%, 100% { opacity: .55 } 50% { opacity: .9 } }

/* =========================================================
   SECCIÓN ROJA DE PALABRAS (estilo o-text-and-decors)
   ========================================================= */
.lm-redwords {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--hc-red-deep); color: var(--hc-red);
  margin-top: -2.5rem;
  border-top-left-radius: var(--hc-r-s); border-top-right-radius: var(--hc-r-s);
  padding: clamp(4.5rem, 9vw, 9rem) clamp(1rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-family: var(--hc-anton); text-transform: uppercase;
}
@media (min-width: 1024px) {
  .lm-redwords { border-top-left-radius: var(--hc-r-l); border-top-right-radius: var(--hc-r-l) }
}
.lm-redwords .rw-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0b0807 }
.lm-redwords .rw-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  filter: brightness(.55) contrast(1.06) saturate(1.05);
}
.lm-redwords .rw-bg-img {
  position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover;
  filter: contrast(1.08) brightness(.9) saturate(1.1);
  animation: hc-kenburns 34s ease-in-out infinite alternate; will-change: transform;
}
.lm-redwords .rw-bg::before {
  content: ""; position: absolute; inset: -60%; z-index: 3; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  opacity: .2; mix-blend-mode: overlay; animation: hc-grain .7s steps(3) infinite;
}
.lm-redwords .rw-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(128% 100% at 50% 46%, transparent 38%, rgba(6, 4, 3, .9) 100%),
    linear-gradient(180deg, rgba(8, 6, 5, .6) 0%, rgba(8, 6, 5, .1) 32%, rgba(8, 6, 5, .1) 68%, rgba(8, 6, 5, .85) 100%);
}
.lm-redwords .rw-burn {
  position: absolute; top: -2%; height: 104%; width: clamp(80px, 15vw, 240px); z-index: 1;
  pointer-events: none; mix-blend-mode: screen; opacity: .5;
  animation: hc-burnpulse 6s ease-in-out infinite;
}
.lm-redwords .rw-burn--l { left: 0 }
.lm-redwords .rw-burn--r { right: 0; transform: scaleX(-1); animation-delay: -3s }

.lm-redwords .rw-inner { position: relative; z-index: 5; width: 100%; max-width: 1560px; margin: 0 auto }
.lm-redwords .rw-kicker {
  font-family: var(--hc-staff); text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(.78rem, 1.25vw, 1.1rem); color: var(--hc-cream); opacity: .88;
  margin-bottom: clamp(1rem, 2.2vw, 1.8rem);
}
.lm-redwords .rw-kicker .rw-tag {
  background: var(--hc-red); color: var(--hc-cream); padding: .1em .55em .14em; margin-right: .35em;
}
.lm-redwords .rw-kicker em { color: var(--hc-red); font-style: normal }
.lm-redwords .rw-title { margin: 0; display: block; font-family: var(--hc-anton); line-height: .8; letter-spacing: -.03em }
.lm-redwords .rw-line { display: block }
.lm-redwords .rw-word { display: block; color: var(--hc-red); line-height: .8 }
.lm-redwords .rw-title .rw-line:nth-child(1) .rw-word {
  font-size: min(52vw, 34rem);
  filter: drop-shadow(0 0 .12em rgba(255, 196, 0, .3));
}
.lm-redwords .rw-title .rw-line:nth-child(2) .rw-word {
  font-size: min(27vw, 19rem);
}
.lm-redwords .rw-sub {
  font-family: var(--hc-anton); font-size: clamp(1.3rem, 3.5vw, 3rem); line-height: 1;
  color: var(--hc-cream); margin-top: clamp(1rem, 2.4vw, 1.8rem);
}
.lm-redwords .rw-sub strong { color: var(--hc-red) }
.lm-redwords .rw-decl {
  font-family: var(--hc-anton); font-size: clamp(1.15rem, 2.8vw, 2.3rem); line-height: 1;
  color: var(--hc-cream); margin-top: .5rem;
}
.lm-redwords .rw-decl span { color: var(--hc-red) }
:is(.lm-redwords, #problema .tst-close, main) .rw-ctas { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; margin-top: clamp(1.6rem, 3vw, 2.6rem) }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta {
  font-family: var(--hc-anton); text-transform: uppercase; letter-spacing: .04em;
  font-size: clamp(.9rem, 1.35vw, 1.1rem); padding: 1em 1.55em; border-radius: 12px;
  text-decoration: none; transition: transform .35s var(--hc-ease), background-color .35s var(--hc-ease), color .35s var(--hc-ease);
}
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.solid { background: var(--hc-red); color: var(--hc-cream) }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.solid:hover { background: #ffd94a; transform: scale(.97) }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill { background: transparent; color: var(--hc-cream); border: 1px solid var(--hc-line) }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill:hover { background: var(--hc-cream); color: #121212 }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.ghost { background: transparent; color: var(--hc-muted); border-radius: 0; border-bottom: 1px solid var(--hc-line); padding: .2em 0 }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.ghost:hover { color: var(--hc-red); border-bottom-color: var(--hc-red) }
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill.big:hover { background: transparent; color: var(--hc-cream) }

/* Botones grandes estilo referencia: texto temblando + vídeo dentro al pasar el cursor */
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.big {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  flex: 1 1 100%;
  padding: clamp(1.5rem, 4vw, 4rem) 2.5rem;
  border-radius: 24px;
  font-size: clamp(1.6rem, 3.6vw, 3.75rem) !important;
  line-height: 1;
  transition: transform .4s var(--hc-ease), background-color .35s var(--hc-ease), color .35s var(--hc-ease);
}
@media (min-width: 1024px) {
  :is(.lm-redwords, #problema .tst-close, main) .rw-cta.big { flex: 1 1 calc(50% - .5rem) }
}
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.big .rw-cta-title {
  position: relative; z-index: 2; white-space: nowrap;
  display: inline-block; transform-origin: 50% 100%;
}
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.big .rw-cta-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; pointer-events: none;
  transition: opacity .35s var(--hc-ease);
}
@media (min-width: 1024px) {
  :is(.lm-redwords, #problema .tst-close, main) .rw-cta.big:hover { transform: scale(.97) }
  :is(.lm-redwords, #problema .tst-close, main) .rw-cta.big:hover .rw-cta-video { opacity: .1 }
  :is(.lm-redwords, #problema .tst-close, main) .rw-cta.big:hover .rw-cta-title { animation: rw-shake .5s linear infinite }
}
@keyframes rw-shake {
  0% { transform: translate(2px, 1px) }
  10% { transform: translate(-1px, -2px) }
  20% { transform: translate(-3px, 0) }
  30% { transform: translateY(2px) }
  40% { transform: translate(1px, -1px) }
  50% { transform: translate(-1px, 2px) }
  60% { transform: translate(-3px, 1px) }
  70% { transform: translate(2px, 1px) }
  80% { transform: translate(-1px, -1px) }
  90% { transform: translate(2px, 2px) }
  to { transform: translate(2px, 1px) }
}
.lm-redwords .rw-spec {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem clamp(1rem, 4vw, 3rem);
  margin-top: clamp(1.5rem, 3vw, 2.4rem); padding-top: 1rem;
  border-top: 1px solid var(--hc-line); color: var(--hc-muted);
  font-family: var(--hc-staff); font-size: clamp(.68rem, .95vw, .86rem); letter-spacing: .06em;
}
.lm-redwords .rw-spec b { color: var(--hc-red); margin-right: .35em }

/* La sección roja es oscura: excepción al velo de banda */
.lm-redwords::before { display: none !important }

/* Sección roja: igual que la 2ª sección de la referencia — mismo tamaño y color, centrado, sin aire */
.lm-redwords .rw-kicker,
.lm-redwords .rw-title .rw-word,
.lm-redwords .rw-sub,
.lm-redwords .rw-sub strong,
.lm-redwords .rw-decl,
.lm-redwords .rw-decl span {
  font-family: var(--hc-anton) !important;
  font-size: clamp(2rem, 7.5vw, 7rem) !important;
  line-height: .82 !important;
  letter-spacing: -.01em !important;
  color: var(--hc-red) !important;
  margin: 0 !important;
  filter: blur(1px);
  text-shadow: 0 0 14px rgba(255, 196, 0, .35), 0 0 40px rgba(255, 196, 0, .20);
}
.lm-redwords .rw-kicker .rw-tag { background: none !important; color: inherit !important; padding: 0 !important; margin: 0 !important }
.lm-redwords .rw-kicker em { color: inherit !important; font-style: normal }
.lm-redwords .rw-title, .lm-redwords .rw-line { margin: 0 !important; line-height: .82 !important }
.lm-redwords .rw-inner { line-height: .82 }

@media (max-width: 700px) {
  .lm-redwords .rw-burn { width: 74px }
  .lm-redwords .rw-spec { font-size: .7rem }
}

@media (prefers-reduced-motion: reduce) {
  .hc-film-lights i, .hc-flicker, .hc-scan, .lm-redwords .rw-bg-img,
  .lm-redwords .rw-bg::before, .lm-redwords .rw-burn { animation: none !important }
}

/* Móvil: "GOOGLE NO SABE QUE" repartido y solapado sobre la parte de arriba de EXISTES */
@media (max-width: 760px) {
  #inicio .lm-giant .w-mal {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 94%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    word-spacing: 0;
    transform: translateY(-10px);
  }
  #inicio .lm-giant .w-dis {
    position: relative;
    z-index: 1;
    margin-top: -.24em;
  }
}

/* =========================================================
   RESTO DE PÁGINA — unificación al estilo HC
   Paneles negros apilados, títulos a sangre centrados, texto
   informativo tipo "Cada día...", botones grandes, sin brutalismo.
   El amarillo se reserva para #problema (band-pink) como acento.
   ========================================================= */

/* ---------- Fondos: paneles negros alternando con #1f1f1f ---------- */
.band-cyan, .band-lime, .band-yellow, .band-orange,
.band-mint, .band-white, .band-cream {
  color: var(--hc-cream) !important;
}
.band-cyan, .band-yellow, .band-mint, .band-cream { background: var(--hc-bg) !important }
.band-lime, .band-orange, .band-white { background: var(--hc-bg2) !important }
#estudio { background: var(--hc-bg) !important; color: var(--hc-cream) !important }
/* Fondo de vídeo de El estudio, detrás de todo el texto */
#estudio > .est-bg { position: absolute; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; max-width: none !important; margin: 0 !important }
#estudio > .est-bg > video { display: block; width: 100%; height: 100%; object-fit: cover }
#estudio > .est-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6) }
/* Fondo de vídeo de SEO Local, detrás de todo el texto */
#seo-local > .seo-bg { position: absolute; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; max-width: none !important; margin: 0 !important }
#seo-local > .seo-bg > video { display: block; width: 100%; height: 100%; object-fit: cover }
#seo-local > .seo-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6) }
/* Fondo de vídeo de Contacto (Hablemos), detrás de todo el texto */
#contacto > .con-bg { position: absolute; inset: 0; z-index: 0 !important; overflow: hidden; pointer-events: none; max-width: none !important; margin: 0 !important }
#contacto > .con-bg > video { display: block; width: 100%; height: 100%; object-fit: cover }
#contacto > .con-bg::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6) }
/* Auditoría: fondo antracita con luz amarilla vertical a los lados (estilo Hero Collective) */
#auditoria, #resultados { background: #2b2b2b !important }
#auditoria > .aud-glow, #resultados > .aud-glow {
  position: absolute; inset: 0; z-index: 0 !important; pointer-events: none;
  max-width: none !important; margin: 0 !important;
  background:
    linear-gradient(90deg, rgba(255, 196, 0, .20), rgba(255, 196, 0, 0) 15%),
    linear-gradient(270deg, rgba(255, 196, 0, .20), rgba(255, 196, 0, 0) 15%);
}
main section.band { border: 0 !important; box-shadow: none !important }

/* ---------- Títulos de sección: a sangre, centrados, grandes ---------- */
main .xr-sec-title {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  text-align: center !important;
  text-wrap: balance;
  font-size: clamp(2.5rem, 6.8vw, 7rem) !important;
  color: var(--hc-cream) !important;
}
main .band .hl { background: var(--hc-red) !important; color: #121212 !important; box-shadow: none !important; transform: none !important }

/* ---------- Kicker centrado ---------- */
main .xr-kicker { text-align: center !important }
main .xr-kicker::after { margin-left: auto; margin-right: auto; background: var(--hc-red) !important }
main .xr-kicker b { color: var(--hc-red) !important }

/* ---------- Texto informativo: misma receta que "Cada día..." ---------- */
main .xr-lead {
  font-family: var(--hc-staff) !important;
  font-weight: 600 !important;
  font-size: clamp(1.375rem, 1.6vw, 2.125rem) !important;
  line-height: 1.1 !important;
  letter-spacing: normal !important;
  text-transform: uppercase !important;
  text-align: center !important;
  max-width: none !important;
  width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding: 0 2vw !important;
}
.band-yellow .xr-lead, .band-white .xr-lead, .band-cream .xr-lead, #estudio .xr-lead {
  color: inherit !important;
}
main .xr-lead .short-sub { font-size: .6em !important; margin-top: .6em !important }
main .xr-lead .kw-go { background: none !important; color: var(--hc-red) !important; padding: 0 !important }

/* ---------- Tarjetas: chips cuadrados fuera, número Anton ---------- */
@media (min-width: 1024px) {
  main .xr-card { border-radius: var(--hc-r-l) !important }
}
main .xr-card h3 .n {
  background: none !important; border: 0 !important; box-shadow: none !important;
  display: inline !important; width: auto !important; height: auto !important;
  padding: 0 !important; margin-right: .3em !important;
  color: var(--hc-red) !important;
}
main .xr-card p { color: inherit !important; opacity: .8 }
.band-yellow .xr-card, .band-white .xr-card, .band-cream .xr-card, #estudio .xr-card {
  background: rgba(0, 0, 0, .22) !important; border-color: var(--hc-line) !important
}
.band-cyan .xr-card.hot { background: var(--hc-red) !important; border-color: var(--hc-red) !important; color: #121212 !important }
.band-cyan .xr-card.hot h3 .n { color: #121212 !important }
.band-cyan .xr-card.hot p { color: #121212 !important; opacity: .85 }
main .xr-card.hot:hover { background: #ffd94a !important; border-color: #ffd94a !important }

/* ---------- Funnel: pastillas HC en vez de chips brutalistas ---------- */
.funnel-steps { justify-content: center }
.funnel-steps li:not(.fs-arrow) {
  background: rgba(0, 0, 0, .22) !important; color: var(--hc-cream) !important;
  border: 1px solid var(--hc-line) !important; box-shadow: none !important;
  border-radius: 999px !important;
}
.funnel-steps .fs-n { width: auto !important; height: auto !important; min-width: 1.8em; padding: .1em .55em !important; border-radius: 999px !important }
.funnel-steps .fs-go, .funnel-steps .fs-n { background: var(--hc-red) !important; color: #121212 !important }

/* ---------- Features del diseño (A medida / Rápida / ...): sin chips ---------- */
main .demo-feats .demo-feat strong {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 0 .5em !important; display: block !important;
  color: var(--hc-red) !important; font-size: clamp(1.2rem, 1.8vw, 1.6rem) !important;
}
main .demo-feats .demo-feat span { color: var(--hc-muted) }

/* ---------- Métricas (dot-bars): panel HC ---------- */
.dot-bars { background: rgba(0, 0, 0, .22) !important; border: 1px solid var(--hc-line) !important; box-shadow: none !important; border-radius: var(--hc-r-s) !important }
@media (min-width: 1024px) { .dot-bars { border-radius: var(--hc-r-l) !important } }
.dot-col { border-left: 1px solid var(--hc-line) !important }
.dot-col::after { display: none }
.dot-head { color: var(--hc-cream) !important }

/* ---------- El estudio: título grande, sin subrayado lima ---------- */
#estudio .tst-links .rw-cta.big { flex: 1 1 100% !important; font-size: clamp(1.2rem, 2.6vw, 2.6rem) !important }
#estudio .tst-h2 { color: var(--hc-cream) !important; font-size: clamp(2.2rem, 4.6vw, 4.6rem) !important; max-width: none !important }
#estudio .tst-mark { background: none !important; color: var(--hc-red) !important }
#estudio .tst-lead { color: var(--hc-cream) !important }
#estudio .tst-frame { border: 1px solid var(--hc-line) !important; box-shadow: none !important; border-radius: var(--hc-r-s) !important }
#estudio .tst-loupe-hint { color: var(--hc-muted) !important }
#estudio .tst-loupe-hint::before { background: var(--hc-red); border-color: var(--hc-red) }
#estudio .tst-rim { border-color: var(--hc-red) }

/* ---------- #paginas: mosaico de vídeo en las tarjetas de servicios ---------- */
/* 12 teselas sin separación: juntas reconstruyen el vídeo completo (3x4; 2x6 en móvil) */
#paginas .xr-cards.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(10px, 1.4vw, 18px) !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: clamp(1rem, 4vw, 3.5rem);
  padding-right: clamp(1rem, 4vw, 3.5rem);
}
#paginas .xr-cards > a.xr-page {
  --pad: 22px;
  position: relative;
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  aspect-ratio: 3 / 4;
  padding: var(--pad) !important;
  background: #000 !important;
  color: var(--hc-cream) !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: var(--hc-r-s) !important;
  box-shadow: none !important;
}
#paginas .xr-cards > a.xr-page::before,
#paginas .xr-cards > a.xr-page::after { content: none !important; display: none !important }
/* Tesela del vídeo (cada tarjeta muestra su trozo) */
#paginas .xr-page .card-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; transition: transform .6s var(--hc-ease) }
#paginas .xr-page .card-video-el { position: absolute; inset: 0; width: 100%; height: 100%; display: block }
.mosaic-src { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; z-index: -1 }
#paginas .xr-page .card-video::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .35) 45%, rgba(0, 0, 0, .78));
}
/* Texto por encima del vídeo */
#paginas .xr-page h3 {
  position: relative; z-index: 3;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 .55rem;
  line-height: .9;
  color: var(--hc-cream) !important;
}
#paginas .xr-page .cv-giant {
  display: block;
  width: 100%;
  white-space: nowrap;
  line-height: .9;
  letter-spacing: -.02em;
  text-transform: uppercase;
  font-family: var(--hc-anton);
  color: var(--hc-cream);
}
#paginas .xr-page .cv-giant .cv-word { display: inline-block; white-space: nowrap }
#paginas .xr-page .cv-ltr { display: inline-block; will-change: transform }
#paginas a.xr-page p {
  position: relative; z-index: 3;
  color: var(--hc-cream) !important; text-align: center; margin: 0 auto; max-width: 100%;
  font-size: clamp(.72rem, .95vw, .92rem);
  line-height: 1.35;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
}
#paginas a.xr-page .go {
  display: inline !important;
  background: none !important; color: var(--hc-red) !important;
  border: 0 !important; padding: 0 .12em !important; box-shadow: none !important;
  font-weight: 800;
  transition: transform .35s ease;
}
#paginas .xr-cards > a.xr-page:hover .go { transform: translateX(4px) }
@media (max-width: 760px) {
  #paginas .xr-cards.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important }
  #paginas .xr-cards > a.xr-page { --pad: 14px }
}
@media (max-width: 640px) {
  #paginas .xr-page .cv-giant { letter-spacing: -.01em }
  #estudio .estudio-big { font-size: clamp(2rem, 9.5vw, 3.4rem) !important }
  #estudio .estudio-sub { font-size: clamp(1.2rem, 5.5vw, 2rem) !important }
  #estudio > .xr-lead { max-width: none !important }
}

/* ---------- Botón pequeño restante (footer): píldora HC ---------- */
.xr-footer .xr-btn {
  background: transparent !important; color: var(--hc-cream) !important;
  border: 1px solid var(--hc-line) !important; box-shadow: none !important;
  border-radius: 999px !important; display: inline-block !important; margin-top: 1rem;
  transition: background-color .35s var(--hc-ease), color .35s var(--hc-ease), border-color .35s var(--hc-ease);
}
.xr-footer .xr-btn:hover { background: var(--hc-red) !important; color: #121212 !important; border-color: var(--hc-red) !important }
.xr-footer h2 { color: var(--hc-red) !important }
.xr-footer { color: #fff }
/* Footer: TODOS los textos en el mismo color claro (blanco) */
.xr-footer,
.xr-footer *,
.xr-footer *::before,
.xr-footer *::after,
.xr-footer-bar,
.xr-footer-bar *,
.xr-footer-grid {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}
.xr-footer h2, .xr-footer h2 * {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: none !important;
  text-shadow: none !important;
}
.xr-footer a, .xr-footer .xr-btn, .xr-footer .blurb, .xr-footer-bar, .xr-footer-bar * { color: #fff !important; text-shadow: none !important }
/* Excepción: el número de teléfono (enlace) mantiene su color de enlace */
.xr-footer-bar a[href^="tel:"] { color: var(--hc-cream) !important; -webkit-text-fill-color: var(--hc-cream) !important }
.xr-footer .footer-logo, .xr-footer .brand-logo { filter: brightness(0) invert(1) !important }

/* ---------- Torn brutalista fuera; footer como panel redondeado ---------- */
.xr-torn { display: none }
.xr-footer {
  position: relative;
  z-index: 1;
  background: var(--hc-bg) !important;
  border-top-left-radius: var(--hc-r-l);
  border-top-right-radius: var(--hc-r-l);
  margin-top: -2.5rem;
}

@media (prefers-reduced-motion: reduce) {
  #paginas .xr-cards>a.xr-page { transition: none }
}

/* ---------- Footer en móvil: compacto a dos columnas ---------- */
@media (max-width: 640px) {
  .xr-footer { padding: 24px 0 16px !important; margin-top: -1.25rem }
  .xr-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 1.3rem 1.1rem !important }
  .xr-footer-grid > div:first-child { grid-column: 1 / -1 !important }
  .xr-footer .footer-logo { height: 32px !important; max-width: 160px !important }
  .xr-footer .blurb { font-size: .76rem !important; line-height: 1.35; margin: .45rem 0 .7rem !important; max-width: 40ch }
  .xr-footer .xr-btn { width: auto !important; text-align: left !important; padding: .62em 1.1em !important; font-size: .7rem !important; margin-top: 0 !important }
  .xr-footer h2 { font-size: .66rem !important; letter-spacing: .09em; margin-bottom: .35rem !important }
  .xr-footer ul { gap: .28rem !important }
  .xr-footer a { font-size: .77rem !important; line-height: 1.3 }
  .xr-footer-bar {
    flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
    flex-wrap: wrap; gap: .3rem 1rem !important;
    margin-top: 1rem !important; padding-top: .8rem !important; font-size: .7rem !important;
  }
}

@supports (height: 100svh) {
  #inicio .lm-logo { top: clamp(10px, 2.4svh, 22px) !important }
}

/* ---------- Logo mini al hacer scroll (assets/logo-mini.js) ---------- */
#inicio .lm-logo { transition: width .45s var(--hc-ease), top .45s var(--hc-ease), filter .3s var(--hc-ease) }
body.logo-mini #inicio .lm-logo { width: clamp(34px, 3.6vw, 48px) !important }

/* Difuminado durante el trayecto de mini + color del logo */
#inicio .lm-logo { transition: width .5s var(--hc-ease), top .5s var(--hc-ease), filter .5s var(--hc-ease) }
#inicio .lm-logo { filter: brightness(0) invert(1) }
body.logo-on-light #inicio .lm-logo { filter: brightness(0) }
body.logo-anim #inicio .lm-logo { filter: brightness(0) invert(1) blur(2.2px) }
body.logo-anim.logo-on-light #inicio .lm-logo { filter: brightness(0) blur(2.2px) }

/* Burguer: mini + difuminado como el logo */
#inicio .lm-burger { transition: transform .5s var(--hc-ease), filter .5s var(--hc-ease) !important }
body.hc-header-hidden #inicio .lm-burger { transform: none !important }
body.logo-mini #inicio .lm-burger { transform: scale(.6) !important }
body.logo-anim #inicio .lm-burger { filter: blur(2.2px) }


/* ---------- Botones con BORDE, sin relleno; borde = color del botón ---------- */
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.solid,
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill {
  background: transparent !important;
  border: 2px solid var(--hc-red) !important;
  color: var(--hc-red) !important;
  /* 30% más pequeños */
  font-size: clamp(1.1rem, 2.5vw, 2.6rem) !important;
  padding: clamp(1rem, 2.6vw, 2.6rem) 1.9rem !important;
  transition: transform .3s var(--hc-ease), border-color .3s var(--hc-ease), color .3s var(--hc-ease) !important;
}
/* El botón de la derecha: borde y texto blancos */
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill {
  border-color: #fff !important;
  color: #fff !important;
}
/* Hover = zoom */
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.solid:hover,
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill:hover,
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill.big:hover {
  background: transparent !important;
  transform: scale(1.06) !important;
}
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.solid:hover {
  border-color: var(--hc-red) !important;
  color: var(--hc-red) !important;
}
:is(.lm-redwords, #problema .tst-close, main) .rw-cta.pill:hover {
  border-color: #fff !important;
  color: #fff !important;
}