/* ==========================================================================
   BroKreators · "Revista BK": la miniatura como tapa
   Crema #F3EBDD (papel) · Azul #D8E2F0 (pliego especial) · Negro cálido #1A1208
   Sin naranja: la gota va en negro cálido con el play en crema. Poppins 800 mayúsculas de borde a borde.
   ========================================================================== */

:root {
  --gota: #1a1208;
  --gota-play: #f3ebdd;
  --crema: #f3ebdd;
  --azul: #d8e2f0;
  --negro: #1a1208;
  --bg: var(--crema);
  --fg: var(--negro);
  --m: 4vw;
  --cab: 64px;
  --mini-w: min(48vw, 52svh * 16 / 9);
  --font: "Poppins", system-ui, -apple-system, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.87, 0, 0.13, 1);
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-xs: 0.18s;
  --dur-s: 0.3s;
  --dur-m: 0.6s;
  --dur-l: 0.9s;
}
html[data-theme="azul"] {
  --bg: var(--azul);
}
.gota-trazo {
  fill: var(--gota);
}
.gota-play {
  fill: var(--gota-play);
}
.menu,
.modal,
.lightbox__flecha {
  --gota: var(--crema);
  --gota-play: var(--negro);
}

/* ---------- base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  background: var(--bg);
  color: var(--fg);
  scroll-behavior: auto !important;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
  transition: background-color var(--dur-m) ease;
}
html.is-loading {
  overflow: hidden;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-m) ease;
}
body.is-fixed {
  position: fixed;
  width: 100%;
}
/* red de seguridad: ningún transform de entrada ensancha la página (clip no crea scroll ni rompe sticky/pin) */
#app {
  overflow-x: clip;
}
img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
p {
  margin: 0;
}
h1,
h2 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.035em;
}
::selection {
  background: var(--negro);
  color: var(--crema);
}
:focus-visible {
  outline: 2px solid var(--negro);
  outline-offset: 4px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

/* ---------- tipografía ---------- */
.display {
  font-size: 10vw;
  line-height: 0.88;
  white-space: nowrap;
}
.display .linea,
.display > span {
  display: block;
}
.display--sub {
  font-size: 0.42em;
  text-align: right;
  letter-spacing: -0.02em;
}
.folio {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
  margin: 0;
}
.folio--link {
  opacity: 1;
  font-weight: 700;
}
.apoyo {
  font-size: clamp(1.05rem, 2vw, 1.5rem);
  font-weight: 400;
  line-height: 1.3;
}
.apoyo--grande {
  font-size: clamp(1.8rem, 4vw, 3.6rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.apoyo--grande .big {
  font-size: 1.5em;
  line-height: 0.8;
}
.num {
  font-variant-numeric: tabular-nums;
}
.link {
  font-weight: 700;
  font-size: 14px;
  position: relative;
  padding-bottom: 3px;
}
.link::after,
.pie nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-s) var(--ease-ui);
}
.link:hover::after,
.pie nav a:hover::after {
  transform: scaleX(1);
}

/* SplitText: la máscara de línea deja aire para acentos (Ú, Í) y descendentes */
.line-mask {
  padding: 0.16em 0.06em 0.06em;
  margin: -0.16em -0.06em -0.06em;
}


/* ---------- botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 28px;
  border-radius: 999px;
  background: var(--negro);
  color: var(--crema);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border: 1px solid var(--negro);
  transition: background-color var(--dur-xs) ease-out, color var(--dur-xs) ease-out, transform 0.15s;
  will-change: transform;
}
.btn:hover {
  background: var(--azul);
  color: var(--negro);
}
.btn:active {
  transform: scale(0.97);
}
.btn--chico {
  padding: 10px 18px;
  font-size: 14px;
}
.btn .btn__t {
  display: inline-block;
}
html.is-vendiendo .cab__cta {
  background: transparent;
  color: var(--negro);
}
html.is-vendiendo .cab__cta:hover {
  background: var(--negro);
  color: var(--crema);
}

/* ---------- preloader ---------- */
.pre {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--crema);
  display: grid;
  place-items: center;
}
.pre__gota {
  width: 56px;
  height: 56px;
}
.pre__num {
  position: absolute;
  left: var(--m);
  bottom: 4vh;
  font-size: clamp(4rem, 18vw, 12rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
html:not(.is-loading) .pre {
  display: none;
}
/* red de seguridad si el JS no carga */
.pre {
  animation: pre-seguridad 0.4s ease 3s forwards;
}
@keyframes pre-seguridad {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
html.has-pre .pre {
  animation: none;
}

/* ---------- barra de progreso ---------- */
.progreso {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--negro);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 95;
}

/* ---------- cabecera ---------- */
.cab {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cab);
  z-index: 101;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--m);
  pointer-events: none;
}
.cab > * {
  pointer-events: auto;
}
.logo {
  width: 28px;
  height: 28px;
  display: block;
  position: relative;
}
.logo svg {
  width: 28px;
  height: 28px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover svg {
  transform: rotate(8deg);
}
.cab__der {
  display: flex;
  align-items: center;
  gap: 14px;
}
.burger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 4px;
}
.burger__label {
  position: relative;
  display: block;
  height: 1.1em;
  overflow: hidden;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.1;
  min-width: 3.4em;
  text-align: right;
}
.burger__label span {
  display: block;
  transition: transform var(--dur-s) var(--ease-out);
}
.burger__label span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}
.burger[aria-expanded="true"] .burger__label span:first-child {
  transform: translateY(-110%);
}
.burger[aria-expanded="true"] .burger__label span:last-child {
  transform: translateY(0);
}
.burger__icon {
  position: relative;
  width: 20px;
  height: 14px;
  display: block;
}
.burger__icon i {
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform var(--dur-s) var(--ease-inout);
}
.burger__icon i:first-child {
  top: 2px;
}
.burger__icon i:last-child {
  bottom: 2px;
}
.burger[aria-expanded="true"] .burger__icon i:first-child {
  transform: translateY(4px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__icon i:last-child {
  transform: translateY(-4px) rotate(-45deg);
}
body.menu-open .cab {
  color: var(--crema);
}
body.menu-open .cab__cta {
  opacity: 0;
  pointer-events: none;
}

/* ---------- menú overlay ---------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--negro);
  color: var(--crema);
  padding: calc(var(--cab) + 4vh) var(--m) 4vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.menu[hidden] {
  display: none;
}
.menu__lista a {
  display: flex;
  align-items: baseline;
  gap: 4vw;
  padding: 0.06em 0;
}
.menu__n {
  font-size: 14px;
  opacity: 0.5;
  width: 2em;
}
.menu__t {
  display: block;
  font-size: clamp(2.6rem, 9vw, 7rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.95;
  letter-spacing: -0.03em;
  transition: color var(--dur-s);
}
.menu__lista a:hover .menu__t,
.menu__lista a[aria-current="page"] .menu__t {
  color: var(--azul);
}
.menu__pie {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
}
.menu__redes {
  display: inline-flex;
  gap: 16px;
}
.menu__hora {
  font-weight: 400;
  opacity: 0.7;
  margin-left: auto;
}
.menu__preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 280px;
  height: 158px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  display: none;
}
.menu__preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (hover: hover) and (pointer: fine) {
  .menu__preview {
    display: block;
  }
}

/* ---------- rail de puntos ---------- */
.rail {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 90;
  display: none;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 1024px) and (hover: hover) {
  .rail {
    display: flex;
  }
}
.rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  height: 14px;
}
.rail i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--negro);
  opacity: 0.3;
  transition: transform 0.25s var(--ease-ui), opacity 0.25s;
}
.rail span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.25s, transform 0.25s var(--ease-ui);
}
.rail a:hover span,
.rail a[aria-current="page"] span {
  opacity: 1;
  transform: none;
}
.rail a[aria-current="page"] i {
  transform: scale(1.5);
  opacity: 1;
}

/* ---------- folio de pliego + píldora móvil ---------- */
.pliego-n {
  position: fixed;
  right: var(--m);
  bottom: 24px;
  z-index: 90;
  font-size: 12px;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
  display: none;
}
@media (min-width: 1024px) {
  .pliego-n {
    display: block;
  }
}
body.menu-open .pliego-n,
body.menu-open .rail {
  opacity: 0;
}
.pildora {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  transform: translate(-50%, 120%);
  z-index: 92;
  display: none;
  opacity: 0;
}
@media (max-width: 480px) {
  .pildora {
    display: inline-flex;
  }
  .cab__cta {
    display: none;
  }
}

/* ---------- flips de texto (dos spans apilados) ---------- */
.flip {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.05em;
  line-height: 1.05;
  vertical-align: bottom;
}
.flip > span {
  display: block;
}
.flip > span:last-child {
  position: absolute;
  inset: 0;
  transform: translateY(110%);
}

/* ---------- pliegos ---------- */
.pliego {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--cab) + 2vh) var(--m) 6vh;
  background: transparent;
}
.pliego > .folio {
  position: absolute;
  top: calc(var(--cab) + 4px);
  left: var(--m);
}
.pliego > .folio--link {
  left: auto;
  right: var(--m);
}
.hairline {
  position: absolute;
  left: var(--m);
  right: var(--m);
  bottom: 0;
  height: 1px;
  background: var(--negro);
  opacity: 0.12;
  transform: scaleX(0);
  transform-origin: left;
}

/* TAPA: el último video */
.pliego--tapa {
  display: grid;
  align-content: end;
  gap: 2vh;
  padding-top: calc(var(--cab) + 5vh);
  padding-bottom: 5vh;
  overflow: hidden;
}
.tapa__quien {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
}
.tapa__quien span {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.75;
}
.tapa__quien [data-hora] {
  display: inline;
  margin: 0;
  opacity: 1;
}
.video--tapa {
  width: calc(100vw - var(--m) * 2);
  max-width: calc((100svh - var(--cab) - 22vh) * 16 / 9);
  margin: 0 auto;
}
.track__tira {
  display: contents;
}

/* FICHA */
.pliego--ficha {
  display: grid;
  align-content: center;
  padding-top: calc(var(--cab) + 6vh);
  padding-bottom: 8vh;
}
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 4vw;
  align-items: start;
}
.ficha {
  align-items: center;
}
.ficha__izq {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* el título nowrap no ensancha la columna */
  justify-items: center; /* foto y título centrados entre sí */
  text-align: center;
  gap: 3vh;
}
.ficha__izq .ficha__titulo {
  justify-self: stretch; /* ocupa toda la columna: fitText mide contra ese ancho */
}
.ficha__foto {
  display: block;
  margin: 0;
  width: min(100%, 52svh * 870 / 760);
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 870 / 760;
  box-shadow: 0 34px 60px -28px rgba(26, 18, 8, 0.5), 0 12px 24px -14px rgba(26, 18, 8, 0.25);
  transform: translateZ(0);
}
.ficha__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-out);
}
.ficha__foto:hover img {
  transform: scale(1.03);
}
.ficha__lista {
  margin: 0;
  border-top: 1px solid var(--negro);
}
@media (min-width: 1024px) and (hover: hover) {
  .ficha__lista {
    margin-right: 56px; /* deja lugar al rail de puntos */
  }
}
.ficha__fila {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr);
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--negro);
  align-items: baseline;
}
.ficha__fila dt {
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.7;
}
.ficha__fila dd {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

/* TRABAJO: casos (plan, miniatura, resultado) con vistas en vivo */
.pliego--casos {
  min-height: auto;
  padding-top: calc(var(--cab) + 6vh);
  padding-bottom: 4vh;
  overflow-x: clip; /* clip y no hidden: con hidden la columna de texto deja de ser sticky */
}
.casos__cab {
  margin-bottom: 4vh;
}
.casos__cab .display {
  margin-top: 2vh;
}
.casos__apoyo {
  margin-top: 2.5vh;
  max-width: 34ch;
}
.caso {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 4vw;
  align-items: start;
  padding: 7vh 0 8vh;
  border-top: 1px solid var(--negro);
}
.caso__txt {
  position: sticky;
  top: calc(var(--cab) + 2vh);
}
.caso__cliente {
  opacity: 1;
}
.caso__titulo {
  margin: 1.5vh 0 0;
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 4.6rem);
  line-height: 0.92;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.caso__rol {
  margin-top: 2vh;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.caso__pasos {
  margin-top: 3vh;
}
.caso__pasos .ficha__fila {
  grid-template-columns: 100px minmax(0, 1fr);
  padding: 14px 0;
}
.caso__pasos .ficha__fila dd {
  font-size: clamp(0.98rem, 1.25vw, 1.2rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
.caso__videos {
  display: grid;
  gap: 3vh 2vw;
  min-width: 0;
}
@media (min-width: 1024px) and (hover: hover) {
  .caso__videos {
    margin-right: 56px; /* lugar para el rail de puntos */
  }
}
.caso__video {
  margin: 0;
  min-width: 0;
}
.caso__play {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(26, 18, 8, 0.06);
  box-shadow: 0 28px 48px -24px rgba(26, 18, 8, 0.45), 0 10px 20px -12px rgba(26, 18, 8, 0.25);
  transform: translateZ(0);
}
.caso__video--principal .caso__play {
  box-shadow: 0 34px 60px -28px rgba(26, 18, 8, 0.5), 0 12px 24px -14px rgba(26, 18, 8, 0.25);
}
.caso__play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.caso__video:hover .caso__play img {
  transform: scale(1.03);
}
/* el play no tapa el copy: aparece solo al pasar el mouse, sobre la miniatura apenas oscurecida */
.caso__play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 18, 8, 0.28);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}
.caso__play .play {
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.35s var(--ease-out), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.caso__serie .caso__play .play {
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
}
.caso__video:hover .caso__play::after,
.caso__play:focus-visible::after {
  opacity: 1;
}
.caso__video:hover .caso__play .play,
.caso__play:focus-visible .play {
  opacity: 1;
  transform: none;
}
.caso__video figcaption {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  margin-top: 14px;
}
.vistas {
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.vistas__n {
  font-weight: 800;
  font-size: clamp(1.4rem, 2.4vw, 2.2rem);
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.caso__video--principal .vistas__n {
  font-size: clamp(2.2rem, 4vw, 3.8rem);
}
.vistas span {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
}
.caso__vtitulo {
  font-size: 13px;
  line-height: 1.35;
  opacity: 0.8;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.caso__video--principal .caso__vtitulo {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  font-weight: 600;
  opacity: 1;
}
.caso__serie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 2vw;
}
.caso__serie--grilla {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3vh 1.6vw;
}
.caso__serie--grilla .vistas__n {
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
}
.caso__serie .caso__video figcaption {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 10px;
}

/* TRABAJO: tira horizontal */
.pliego--trabajo {
  min-height: auto;
  padding: calc(var(--cab) + 6vh) 0 8vh;
  overflow: hidden;
}
.trabajo__cab {
  padding: 0 var(--m);
}
.trabajo__cab > .folio {
  position: static;
}
.trabajo__titulo {
  margin-top: 2vh;
}
.trabajo__ctl {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 2vh;
}
@media (min-width: 1024px) and (hover: hover) {
  .trabajo__ctl {
    padding-right: 56px; /* lugar para el rail de puntos */
  }
}
.contador {
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  margin-right: auto;
}
.contador__de {
  font-size: 0.45em;
  font-weight: 400;
  margin-left: 0.3em;
  letter-spacing: 0;
}
.flecha {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--negro);
  display: grid;
  place-items: center;
  font-weight: 700;
  transition: background-color var(--dur-xs), color var(--dur-xs), transform 0.15s;
}
.flecha:hover {
  background: var(--negro);
  color: var(--crema);
}
.flecha:active {
  transform: scale(0.95);
}
.track__tira {
  display: flex;
  gap: 2.5vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--m);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding: 4vh var(--m) 7vh;
  cursor: grab;
  overscroll-behavior-x: contain;
}
.track__tira::-webkit-scrollbar {
  display: none;
}
.track__tira.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}
.track__tira:focus-visible {
  outline-offset: -4px;
}
.mini {
  flex: none;
  width: var(--mini-w);
  margin: 0;
  scroll-snap-align: start;
}
.track__tira .mini {
  opacity: 0.001;
  transform: translateY(20px);
  transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out);
}
.track__tira .mini.is-in {
  opacity: 1;
  transform: none;
}
.mini button {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(26, 18, 8, 0.06);
  box-shadow: 0 28px 48px -24px rgba(26, 18, 8, 0.45), 0 10px 20px -12px rgba(26, 18, 8, 0.25);
  transform: translateZ(0);
}
.mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
  -webkit-user-drag: none;
  user-select: none;
}
.mini:hover img {
  transform: scale(1.03);
}
.mini .folio {
  margin-top: 14px;
  transition: transform var(--dur-s) var(--ease-ui);
}
.mini:hover .folio {
  transform: translateY(-4px);
}

/* YOUTUBE */
.pliego--yt {
  padding-bottom: 8vh;
  overflow: hidden;
}
.pliego--yt .display {
  margin-top: 2vh;
}
.video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 18px;
  box-shadow: 0 34px 60px -28px rgba(26, 18, 8, 0.5), 0 12px 24px -14px rgba(26, 18, 8, 0.25);
  overflow: hidden;
  background: rgba(26, 18, 8, 0.08);
  cursor: pointer;
}
.video img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  --gota: var(--crema);
  --gota-play: var(--negro);
}
.play svg {
  width: 100%;
  height: 100%;
}
.video:hover .play {
  transform: scale(1.15);
}
/* La ficha del video como en la página de YouTube (tipografía Roboto y medidas reales), sin vistas */
.yt {
  width: calc(100vw - var(--m) * 2);
  max-width: calc((100svh - var(--cab) - 22vh) * 16 / 9);
  margin: 12px auto 0;
  font-family: Roboto, Arial, sans-serif;
  color: var(--negro);
  -webkit-font-smoothing: antialiased;
}
.yt__titulo {
  font-size: 20px;
  line-height: 28px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yt__canal {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.yt__avatar {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.yt__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt__nombre {
  font-size: 16px;
  line-height: 20px;
  font-weight: 500;
}
.yt__sub {
  margin-left: 12px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--negro);
  color: var(--crema);
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  transition: background-color var(--dur-xs) ease-out;
}
.yt__sub:hover {
  background: #3a2d20;
}
.yt__desc {
  display: block;
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(26, 18, 8, 0.07);
  font-size: 14px;
  line-height: 20px;
  transition: background-color var(--dur-xs) ease-out;
}
.yt__desc:hover {
  background: rgba(26, 18, 8, 0.11);
}
.yt__desc b,
.yt__mas {
  font-weight: 500;
}
.yt__desc p {
  margin-top: 4px;
}
.anteriores {
  display: flex;
  gap: 2vw;
  margin-top: 4vh;
}
.anteriores li {
  width: 18vw;
  flex: none;
}
.anteriores a {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(26, 18, 8, 0.08);
}
.anteriores img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-m) var(--ease-out);
}
.anteriores a:hover img {
  transform: scale(1.04);
}

/* PACK: grilla prolija */
.pliego--pack {
  display: grid;
  align-content: center;
  padding: calc(var(--cab) + 4vh) var(--m) 6vh;
  overflow: hidden;
}
.pack__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4vw;
  align-items: center;
}
.pack__txt {
  min-width: 0;
}
.pack__txt .apoyo {
  margin: 3vh 0 4vh;
  max-width: 28ch;
}
.pack__cover {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 34px 60px -28px rgba(26, 18, 8, 0.5), 0 12px 24px -14px rgba(26, 18, 8, 0.25);
  transform: translateZ(0);
  transition: transform 0.7s var(--ease-out);
}
.pack__cover:hover {
  transform: translateY(-6px);
}
.pack__cover img {
  width: 100%;
  height: auto;
  transition: transform 0.9s var(--ease-out);
}
.pack__cover:hover img {
  transform: scale(1.03);
}

/* ASESORÍA */
.pliego--ases {
  overflow: hidden;
  padding-bottom: 6vh;
}
.anillo {
  position: absolute;
  left: -70px;
  top: 34%;
  width: 160px;
  height: 160px;
  display: grid;
  place-items: center;
}
.anillo--grande {
  left: auto;
  right: var(--m);
  top: 50%;
  width: min(34vw, 46svh);
  height: min(34vw, 46svh);
  transform: translateY(-40%);
  z-index: 1;
}
.anillo--grande .anillo__n {
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 1;
}
.anillo__min {
  position: absolute;
  bottom: 18%;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.anillo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.anillo circle {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.anillo__n {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.ases__titulo {
  position: relative;
  z-index: 2;
  margin-top: 3vh;
  pointer-events: none;
}
.ases__texto {
  position: absolute;
  left: var(--m);
  bottom: 16vh;
  z-index: 2;
  max-width: 24ch;
}
.linea-1px {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--negro);
  margin: 10px 0 12px;
  transform-origin: left;
}
.ases__btn {
  position: absolute;
  left: var(--m);
  bottom: 6vh;
  z-index: 3;
}

/* RESEÑAS */
.pliego--resenas {
  padding-bottom: 10vh;
}
.pliego--resenas .display {
  margin-top: 2vh;
}
.resenas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6vh 4vw;
  margin-top: 6vh;
}
.resena {
  margin: 0;
  border-top: 1px solid var(--negro);
  padding-top: 24px;
}
.resena blockquote {
  margin: 0;
  font-size: clamp(1.05rem, 1.5vw, 1.4rem);
  line-height: 1.4;
  font-weight: 400;
}
.resena figcaption {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  font-size: 13px;
  line-height: 1.35;
}
.resena figcaption img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
}
.resena b {
  font-weight: 700;
  font-size: 15px;
}
.resenas__link {
  display: inline-block;
  margin-top: 6vh;
}

/* CONTACTO */
.pliego--contacto {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* sin esto el título nowrap ensancha la columna y se sale */
  align-content: end;
  padding-bottom: 0;
  overflow: hidden;
}
.contacto__titulo {
  margin-bottom: 4vh;
}
.hablemos {
  display: inline-flex;
  align-items: center;
}
.o-gota {
  display: inline-block;
  width: 0.74em;
  height: 0.74em;
  margin-inline: 0.01em;
  transform-origin: center;
}
.o-gota svg {
  width: 100%;
  height: 100%;
}
/* Contacto: logos de cada canal en negativo, minimalistas (círculo de 1 px como las flechas) */
.apps {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: start;
  gap: 20px 28px;
  margin-top: 1vh;
}
.app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.app__icono {
  width: clamp(60px, 5.5vw, 80px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--negro);
  color: var(--negro);
  display: grid;
  place-items: center;
  transition: background-color var(--dur-s) var(--ease-ui), color var(--dur-s) var(--ease-ui), transform 0.4s var(--ease-out);
}
.app__icono svg {
  width: 42%;
  height: auto;
  fill: currentColor;
}
.app:hover .app__icono,
.app:focus-visible .app__icono {
  background: var(--negro);
  color: var(--crema);
  transform: translateY(-4px);
}
.app:active .app__icono {
  transform: scale(0.96);
}
.app__nombre {
  font-size: 13px;
  font-weight: 600;
}
.contacto__pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6vh;
  gap: 24px;
}
.marquee {
  margin: 6vh calc(var(--m) * -1) 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee__t {
  display: inline-flex;
  gap: 1.2em;
  padding-left: 1.2em;
  font-weight: 800;
  font-size: clamp(3rem, 10vw, 9rem);
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: -0.03em;
  color: rgba(26, 18, 8, 0.1);
  animation: marquee 28s linear infinite;
}
.marquee:hover .marquee__t {
  animation-play-state: paused;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}
.pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 48px;
  font-size: 12px;
  margin-top: 2vh;
}
.pie nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
}
.pie nav a {
  position: relative;
  padding: 4px 0;
}
.pie img {
  width: 171px;
  height: 20px;
}

/* ---------- lightbox / modal ---------- */
.lightbox,
.modal {
  position: fixed;
  inset: 0;
  z-index: 98;
  display: grid;
  place-items: center;
  padding: var(--m);
}
.lightbox[hidden],
.modal[hidden] {
  display: none;
}
.lightbox {
  background: rgba(243, 235, 221, 0.96);
}
.lightbox__img {
  width: min(86vw, calc((100svh - 160px) * 16 / 9));
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 40px 80px -30px rgba(26, 18, 8, 0.5);
}
.lightbox__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lightbox__folio {
  position: absolute;
  left: var(--m);
  bottom: 5vh;
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.lightbox__n {
  font-size: clamp(2rem, 5vw, 4.4rem);
  font-weight: 800;
  letter-spacing: -0.04em;
}
.lightbox__c {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.lightbox__cerrar,
.modal__cerrar {
  position: absolute;
  inset: 0;
  z-index: 0;
  cursor: pointer;
}
.lightbox__flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--negro);
  color: var(--crema);
  font-weight: 700;
  z-index: 2;
}
.lightbox__flecha--izq {
  left: var(--m);
}
.lightbox__flecha--der {
  right: var(--m);
}
.lightbox__img,
.lightbox__folio {
  position: relative;
  z-index: 1;
}
.modal {
  background: rgba(26, 18, 8, 0.92);
}
.modal__marco {
  position: relative;
  z-index: 1;
  width: min(92vw, calc((100svh - 120px) * 16 / 9));
  aspect-ratio: 16 / 9;
  background: #000;
}
.modal__marco iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- cursor ---------- */
.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9500;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 1px solid rgba(26, 18, 8, 0.6);
  pointer-events: none;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--crema);
  opacity: 0;
}
.cursor span {
  opacity: 0;
}

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
}
@media (max-width: 767px) {
  :root {
    --m: 16px;
    --mini-w: 84vw;
  }
  .display {
    line-height: 0.9;
  }
  .pliego {
    padding-top: calc(var(--cab) + 6vh);
  }
  .ficha {
    grid-template-columns: 1fr;
    gap: 4vh;
  }
  .ficha__fila {
    grid-template-columns: 6ch minmax(0, 1fr);
    gap: 14px;
    padding: 14px 0;
  }
  .video {
    width: 100vw;
    margin-inline: calc(var(--m) * -1);
  }
  .play {
    width: 72px;
    height: 72px;
    margin: -36px 0 0 -36px;
  }
  .yt__titulo {
    font-size: 18px;
    line-height: 24px;
  }
  .yt__avatar {
    width: 36px;
    height: 36px;
  }
  .yt__sub {
    margin-left: auto;
  }
  .anteriores {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--m) * -1);
    padding-inline: var(--m);
    gap: 3vw;
  }
  .anteriores::-webkit-scrollbar {
    display: none;
  }
  .anteriores li {
    width: 60vw;
    scroll-snap-align: center;
  }
  .pack__grid {
    grid-template-columns: 1fr;
    gap: 6vh;
  }
  .pack__btn {
    width: 100%;
    min-height: 48px;
  }

  .sticky {
    position: static;
    min-height: 100svh;
    padding-bottom: 12vh;
  }
  .pliego--ases {
    display: flex;
    flex-direction: column;
    padding-bottom: 12vh;
  }
  .ases__titulo {
    font-size: clamp(2.8rem, 15vw, 5rem);
    margin-top: 4vh;
  }
  .anillo--grande {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    width: 46vw;
    height: 46vw;
    margin: 4vh 0 0 auto;
  }
  .resenas {
    grid-template-columns: 1fr;
    gap: 6vh;
  }
  .caso {
    grid-template-columns: 1fr;
    gap: 4vh;
    padding: 5vh 0 6vh;
  }
  .caso__txt {
    position: static;
    order: 2;
  }
  .caso__videos {
    order: 1;
  }
  .caso__serie {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--m);
    scrollbar-width: none;
    margin-inline: calc(var(--m) * -1);
    padding: 6px var(--m) 10px;
  }
  .caso__serie::-webkit-scrollbar {
    display: none;
  }
  .caso__serie .caso__video {
    flex: 0 0 66vw;
    scroll-snap-align: start;
  }
  .caso__pasos .ficha__fila {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 0;
  }
  .caso__video figcaption {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .video--tapa,
  .yt {
    max-width: none;
  }
  .ases__texto {
    position: static;
    margin-top: 4vh;
    max-width: none;
  }
  .ases__btn {
    position: static;
    width: 100%;
    margin-top: 4vh;
    min-height: 48px;
  }
  .pliego--contacto {
    padding-bottom: 88px;
  }
  .apps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px 8px;
    justify-items: center;
  }
  .contacto__pie {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .pie {
    flex-wrap: wrap;
    height: auto;
    padding: 16px 0 24px;
  }
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html,
  body {
    transition-duration: 0.3s !important;
  }
  .marquee__t {
    animation: none;
  }
  .pre {
    display: none;
  }
  html.is-loading {
    overflow: auto;
  }
}

/* ---------- páginas propias (pack, asesoría) ---------- */
.volver {
  position: absolute;
  top: calc(var(--cab) + 4px);
  left: var(--m);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.page-hero {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--cab) + 6vh) var(--m) 6vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 4vw;
  align-items: end;
  overflow: hidden;
}
.page-hero__txt {
  min-width: 0;
}
.page-hero__txt .display {
  margin-top: 2vh;
}
.page-hero__txt .apoyo {
  margin-top: 3vh;
  max-width: 30ch;
}
.page-hero__txt .btn {
  margin-top: 4vh;
}
.page-cover {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  align-self: center;
}
.page-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.precio--page {
  font-size: clamp(4rem, 11vw, 11rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  margin-top: 2vh;
}
.galeria-nativa {
  display: flex;
  gap: 4vw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 4vh var(--m) 6vh;
  margin: 0 calc(var(--m) * -1);
}
.galeria-nativa::-webkit-scrollbar {
  display: none;
}
.galeria-nativa .mini {
  width: var(--mini-w);
  scroll-snap-align: center;
}
.lista-900 {
  display: grid;
  gap: 0.2em;
  font-weight: 800;
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 1;
  margin-top: 4vh;
}
.marquee-minis {
  overflow: hidden;
  margin: 0 calc(var(--m) * -1);
  padding: 4vh 0;
}
.marquee-minis__t {
  display: flex;
  gap: 2vw;
  width: max-content;
  animation: marquee 60s linear infinite;
}
.marquee-minis:hover .marquee-minis__t {
  animation-play-state: paused;
}
.marquee-minis img {
  width: 22vw;
  flex: none;
}
.agenda-bloque {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 960px;
}
#agenda {
  min-height: 640px;
}
.sin-embed {
  display: none;
  margin-top: 16px;
}
html.sin-embed .sin-embed {
  display: inline-flex;
}
.contacto-mini {
  padding-top: 10vh;
}
@media (max-width: 767px) {
  .page-hero {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .page-cover {
    margin: 0 calc(var(--m) * -1);
  }
  .agenda-bloque {
    grid-template-columns: 1fr;
  }
  .marquee-minis img {
    width: 56vw;
  }
}

/* ---------- ajustes: menú de 6 ítems en pantallas bajas ---------- */
.menu {
  overflow-y: auto;
}
@media (max-height: 680px) and (min-width: 768px) {
  .menu__t {
    font-size: clamp(1.8rem, 9.5svh, 7rem);
  }
}

/* el año del pie no queda debajo del folio fijo "08 / 08" */
@media (min-width: 1024px) {
  .pie {
    padding-right: 96px;
  }
}

@media (min-width: 1024px) and (hover: hover) {
  .ases__titulo {
    margin-right: 56px;
  }
}
.ases__texto {
  max-width: 30ch;
}

/* ---------- celu: menos trabajo de pintado al scrollear ---------- */
@media (hover: none), (pointer: coarse) {
  .mini button,
  .caso__play,
  .ficha__foto,
  .pack__cover,
  .video {
    transform: none;
    box-shadow: 0 14px 24px -14px rgba(26, 18, 8, 0.4);
  }
  html,
  body {
    transition: none;
  }
}

/* descripción del último video: 2 renglones como mucho */
.yt__desc p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* reseñas: la tercera no queda debajo de los puntos de navegación */
@media (min-width: 1024px) and (hover: hover) {
  .resenas {
    margin-right: 56px;
  }
}

/* las tres firmas (foto + nombre) a la misma altura aunque las frases midan distinto */
.resena {
  display: flex;
  flex-direction: column;
}
.resena blockquote {
  flex: 1;
}

/* ---------- v3.4: menos negro. Paletas a elegir (?paleta=tinta | cielo | tostado) ---------- */
:root {
  --tit: var(--negro); /* títulos y acentos */
  --txt: var(--negro); /* texto corrido */
  --linea: var(--negro);
  --caja: rgba(255, 255, 255, 0.5);
  --caja-borde: rgba(26, 18, 8, 0.08);
}
html[data-paleta="tinta"] {
  --tit: #23395b;
  --txt: #3d342b;
  --linea: rgba(35, 57, 91, 0.3);
}
html[data-paleta="cielo"] {
  --tit: #47689a;
  --txt: #4a4036;
  --linea: rgba(71, 104, 154, 0.32);
  --caja-borde: rgba(71, 104, 154, 0.14);
}
html[data-paleta="tostado"] {
  --tit: #6b4e37;
  --txt: #4d4135;
  --linea: rgba(107, 78, 55, 0.3);
}
html[data-paleta] {
  --fg: var(--txt);
}
html[data-paleta] :is(.display, .caso__titulo, .apoyo--grande, .ficha__fila dt, .folio, .vistas__n, .precio--page) {
  color: var(--tit);
}
html[data-paleta] .ficha__fila dt,
html[data-paleta] .folio {
  opacity: 1;
}
html[data-paleta] :is(.ficha__lista, .caso, .resena) {
  border-top-color: var(--linea);
}
html[data-paleta] .ficha__fila {
  border-bottom-color: var(--linea);
}
html[data-paleta] :is(.btn, .yt__sub) {
  background: var(--tit);
  border-color: var(--tit);
}
html[data-paleta] :is(.progreso, .hairline, .linea-1px, .rail i) {
  background: var(--tit);
}
html[data-paleta] .app__icono {
  border-color: var(--tit);
  color: var(--tit);
}
html[data-paleta] .app:hover .app__icono,
html[data-paleta] .app:focus-visible .app__icono {
  background: var(--tit);
}
html[data-paleta] .yt {
  color: var(--txt);
}

/* Vistas como en la app de YouTube: recuadro claro con el canal */
.caso__video figcaption.ytc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--caja);
  border: 1px solid var(--caja-borde);
  font-family: Roboto, Arial, sans-serif;
}
.ytc__av {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}
.ytc__txt {
  min-width: 0;
}
.caso__video--principal .ytc .caso__vtitulo {
  font-family: Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  color: var(--txt);
}
.ytc__meta {
  margin-top: 4px;
  font-size: 14px;
  line-height: 20px;
  color: var(--txt);
  opacity: 0.75;
}
.ytc .vistas,
.ytc .vistas__n {
  display: inline;
  font: inherit;
  letter-spacing: 0;
  color: inherit;
}
.ytc .vistas__n {
  font-weight: 500;
}
.caso__serie .caso__video figcaption.ytc--chico,
.caso__video figcaption.ytc--chico {
  display: inline-flex;
  margin-top: 10px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 18px;
  color: var(--txt);
}
.ytc--chico .vistas__n {
  font-weight: 700;
}

/* Títulos de sección: en compu más contenidos (en el celu siguen de borde a borde) */
@media (min-width: 1024px) {
  .caso__titulo {
    font-size: clamp(2rem, 3.4vw, 3.4rem);
  }
  .ficha__fila dd {
    font-size: clamp(1.1rem, 1.6vw, 1.5rem);
  }
}

/* selector de paletas (solo en el borrador, con ?paleta=) */
.paletas {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px -10px rgba(26, 18, 8, 0.35);
  font: 600 13px/1 var(--font);
}
.paletas button {
  padding: 9px 14px;
  border-radius: 999px;
  color: var(--negro);
}
.paletas button[aria-pressed="true"] {
  background: var(--tit);
  color: var(--crema);
}
html[data-paleta].is-vendiendo .cab__cta {
  background: transparent;
  color: var(--tit);
}
html[data-paleta].is-vendiendo .cab__cta:hover {
  background: var(--tit);
  color: var(--crema);
}
html[data-paleta] .o-gota {
  --gota: var(--tit);
}
@media (min-width: 1024px) {
  .ases__titulo {
    display: flex;
    align-items: baseline;
    gap: 0.35em;
  }
  .ases__titulo .display--sub {
    font-size: 0.42em;
    text-align: left;
  }
}

/* v3.5: asesoría compacta en compu (sin el hueco entre el título y el texto) */
@media (min-width: 768px) {
  .pliego--ases {
    min-height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: calc(var(--cab) + 8vh);
    padding-bottom: 14vh;
  }
  .ases__texto,
  .ases__btn {
    position: static;
  }
  .ases__texto {
    margin-top: 3vh;
  }
  .ases__btn {
    margin-top: 4vh;
  }
}
.pliego--ases {
  min-height: auto;
}

/* v3.6: sin rail de puntos ni rótulos de sección: se libera el margen derecho que les dejábamos */
@media (min-width: 1024px) and (hover: hover) {
  .ficha__lista,
  .caso__videos,
  .resenas,
  .ases__titulo {
    margin-right: 0;
  }
  .pie {
    padding-right: 0;
  }
}
/* la tapa arranca directo con el video (sin nombre ni rótulo arriba) */
.pliego--tapa {
  align-content: start;
}
@media (max-width: 767px) {
  .pliego--tapa {
    min-height: auto;
    padding-top: calc(var(--cab) + 3vh);
  }
}

/* v3.7: Quién soy. Foto grande a la izquierda; título y ficha juntos a la derecha */
.ficha {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 5vw;
  align-items: center;
}
.ficha .ficha__foto {
  width: min(100%, 72svh * 870 / 760);
  justify-self: start;
}
.ficha__der {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* el título nowrap no ensancha la columna */
  gap: 4vh;
}
@media (max-width: 767px) {
  .ficha {
    grid-template-columns: 1fr;
    gap: 4vh;
  }
  .ficha .ficha__foto {
    width: 100%;
  }
}

/* v3.8: en compu los títulos se alternan: izquierda, derecha, izquierda... */
@media (min-width: 1024px) {
  /* Miniaturas: título y flechas a la derecha */
  .trabajo__cab {
    text-align: right;
  }
  .trabajo__ctl {
    justify-content: flex-end;
    padding-right: 0;
  }
  /* Asesoría: todo a la derecha */
  .pliego--ases {
    align-items: flex-end;
    text-align: right;
  }
  .ases__titulo {
    justify-content: flex-end;
  }
  .ases__texto {
    max-width: 30ch;
  }
  /* Hablemos: título, logos y hora a la derecha */
  .contacto__titulo {
    text-align: right;
  }
  .hablemos {
    justify-content: flex-end;
  }
  .apps {
    justify-content: end;
  }
  .contacto__pie {
    justify-content: flex-end;
  }
}
/* debajo de cada miniatura, solo el nombre del canal (sin mayúsculas espaciadas) */
.mini figcaption.folio {
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}

/* v3.9: HABLEMOS pasa a la sección de asesoría; el contacto queda solo con los links, centrados */
.ases__etiqueta {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 1vh;
}
.pliego--contacto {
  min-height: auto;
  align-content: start;
  padding-top: 12vh;
  justify-items: center;
  text-align: center;
}
.pliego--contacto .apps {
  justify-content: center;
}
.pliego--contacto .contacto__pie {
  justify-content: center;
  margin-top: 4vh;
}
.pliego--contacto .marquee,
.pliego--contacto .pie {
  justify-self: stretch;
  text-align: left;
}
@media (max-width: 767px) {
  .pliego--contacto .contacto__pie {
    align-items: center;
  }
  .pliego--contacto .apps {
    width: 100%;
  }
}
/* Miniaturas: título centrado, flechas abajo al medio */
@media (min-width: 1024px) {
  .trabajo__cab {
    text-align: center;
  }
  .trabajo__ctl {
    justify-content: center;
  }
}
.contacto-mini .contacto__titulo {
  text-align: center;
  justify-self: stretch;
}
/* logo de BroKreators en el cierre del pack */
.contacto__logo {
  display: block;
  margin: 6vh auto 2vh;
  width: min(320px, 60vw);
}
.contacto__logo img {
  width: 100%;
  height: auto;
}
/* Pack: el cierre lleva el logo (HABLEMOS queda para la asesoría) */
.contacto__marca {
  justify-self: center;
  width: min(640px, 84vw);
  margin-bottom: 6vh;
}
.contacto__marca a,
.contacto__marca img {
  display: block;
  width: 100%;
  height: auto;
}