/* ============================================================================
   IDEARUM — hoja de estilos única
   ============================================================================ */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  --blanco:      #ffffff;
  --gris-fondo:  #f5f5f7;
  --texto:       #1d1d1f;
  --texto-sec:   #86868b;
  --borde:       #d2d2d7;
  --amarillo:    #FFDE21;

  --ancho:       980px;
  --nav-h:       44px;
  --ease:        cubic-bezier(.28, .11, .32, 1);

  /* En Mac/iOS cae en San Francisco; en Windows, en Segoe UI; en Android, en
     Roboto. No se listan "SF Pro Display", "Helvetica Neue" ni "Inter" antes
     de las del sistema: si el equipo tiene instalada una version rara de esas
     (contorneada o italica), la web entera se ve con las letras huecas. */
  --fuente: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
            "Segoe UI", Roboto, system-ui, Arial, sans-serif;
}

/* El amarillo aparece SOLO en tres lugares de toda la web:
   1. el subrayado de una palabra del H1 del hero  (.marca)
   2. la pildora de filtro activa del catalogo     (.pill.is-activa)
   3. los dos botones Escribinos de A medida       (.btn--acento)
   Nunca como texto, borde fino, icono ni fondo de seccion. */

/* ---------- 2. Reset ----------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 17px;
  line-height: 1.47;
  color: var(--texto);
  background: var(--blanco);
  font-style: normal;
  -webkit-text-stroke: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }

:focus-visible { outline: 2px solid var(--texto); outline-offset: 3px; border-radius: 4px; }

/* ---------- 3. Layout ---------------------------------------------------- */

.wrap {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 22px;
}

.seccion { padding: 110px 0; }

/* ---------- 4. Tipografia ------------------------------------------------ */

.h-hero {
  font-size: 72px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.h-seccion {
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

.sub-hero {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--texto-sec);
}

.etiqueta {
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--texto-sec);
}

.meta {
  font-size: 14px;
  line-height: 1.3;
  color: var(--texto-sec);
}

.nota {
  font-size: 12px;
  line-height: 1.35;
  color: var(--texto-sec);
}

/* Subrayado amarillo grueso — uso n1 del acento. */
.marca {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  z-index: 0;
}
.marca::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  bottom: 0.04em;
  height: 6px;
  border-radius: 3px;
  background: var(--amarillo);
  z-index: -1;
}

/* ---------- 5. Botones y enlaces ----------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 980px;
  padding: 12px 22px;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}

.btn--primario           { background: var(--texto); color: var(--blanco); }
.btn--primario:hover     { background: #000; transform: scale(1.02); }

.btn--secundario         { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.btn--secundario:hover   { border-color: var(--texto); transform: scale(1.02); }

/* Uso n3 del acento — solo los dos Escribinos de A medida. */
.btn--acento             { background: var(--amarillo); color: var(--texto); }
.btn--acento:hover       { background: #FFE95C; transform: scale(1.02); }

.btn--compacto { padding: 8px 18px; font-size: 14px; }

/* Icono de WhatsApp dentro de un boton: acompana al texto, no es la marca.
   La web usa solo el blanco, que va sobre los botones negros. La version
   negra, por si algun dia hace falta sobre un boton claro, esta guardada en
   assets/img/origen/ (esa carpeta no hace falta subirla al hosting). */
.btn .wa { width: 17px; height: 17px; flex: none; }

/* Enlace con chevron */
.chev {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-size: 17px;
  color: var(--texto);
}
.chev::after {
  content: "\203A";
  display: inline-block;
  transition: transform .25s var(--ease);
}
.chev:hover::after { transform: translateX(4px); }
.chev--grande { font-size: 21px; }

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 30px;
}
.acciones--centro { justify-content: center; }

/* ---------- 6. Nav ------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--nav-h);
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--borde);
}

.nav__in {
  max-width: var(--ancho);
  height: 100%;
  margin: 0 auto;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.nav__logo img { width: 20px; height: 20px; }

.nav__links { display: flex; align-items: center; gap: 28px; }

.nav__links a {
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--texto);
  opacity: .8;
  transition: opacity .2s var(--ease);
}
.nav__links a:hover { opacity: 1; }

.nav__burger { display: none; width: 44px; height: 44px; margin-right: -10px; padding: 0; position: relative; }
.nav__burger span {
  position: absolute; left: 13px; right: 13px; height: 1px;
  background: var(--texto);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav__burger span:nth-child(1) { top: 19px; }
.nav__burger span:nth-child(2) { top: 24px; }
.nav.is-abierta .nav__burger span:nth-child(1) { transform: translateY(2.5px) rotate(45deg); }
.nav.is-abierta .nav__burger span:nth-child(2) { transform: translateY(-2.5px) rotate(-45deg); }

.menu {
  position: fixed;
  top: var(--nav-h);
  left: 0; right: 0; bottom: 0;
  z-index: 55;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  padding: 24px 22px;
  display: none;
}
.menu.is-abierto { display: block; }
.menu a {
  display: block;
  padding: 18px 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.015em;
  border-bottom: 1px solid var(--borde);
}

/* ---------- 7. Hero ------------------------------------------------------ */

.hero { position: relative; }

/* La foto ocupa todo el ancho. Los dos tercios de arriba son fondo limpio:
   ahi va el texto. En movil el texto pasa a ir ARRIBA de la foto, porque
   recortada en vertical no queda aire suficiente para sostenerlo.

   Los archivos NO se nombran aca: van en el <picture> de index.html, asi el
   navegador los encuentra leyendo el HTML y no despues de leer este archivo.
   Aca solo se dice que forma tiene la foto en cada pantalla. */
.hero__foto {
  display: block;
  position: relative;
  background: #e9eef4;
}
.hero__foto img {
  width: 100%;
  aspect-ratio: 1800 / 1021;   /* la del archivo, recortado para que el bombo
                                  con el logo caiga en el eje exacto */
  min-height: 560px;
  max-height: 1050px;
  object-fit: cover;           /* lo mismo que hacia background-size: cover */
  object-position: 50% 100%;   /* anclada abajo: lo que se recorta es cielo */
}

/* Por defecto (y en cualquier pantalla angosta) el texto va arriba de la foto:
   asi nunca se monta sobre los instrumentos. Solo a partir de 1200px, donde
   el tercio limpio de la foto da de sobra, el texto pasa a ir encima. */
.hero__txt { padding: 64px 0 48px; text-align: center; }

.hero .etiqueta { margin-bottom: 14px; }
.hero .h-hero   { margin-bottom: 14px; }
.hero .sub-hero { max-width: 780px; margin: 0 auto 24px; color: #5f6069; }

@media (min-width: 1200px) {
  .hero__txt {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    padding: clamp(34px, 4.4%, 84px) 0 0;
  }
  .hero .h-hero   { font-size: 64px; }
  .hero .sub-hero { font-size: 22px; }
}

/* ---------- 8. Corredor de portadas --------------------------------------
   Dos rieles de tarjetas que vienen desde el fondo hacia el que mira. La
   perspectiva hace todo el trabajo: al crecer la z, la tarjeta se agranda y
   al mismo tiempo se abre hacia afuera. Las medidas van en cqw (porcentaje
   del ancho del contenedor) para que la escena conserve la proporcion en
   cualquier pantalla. Los keyframes los genera js/app.js.
   -------------------------------------------------------------------------- */

/* Las secciones negras se apoyan sobre lo de arriba con la esquina superior
   redondeada: quedan como una placa levantada. */
.negra {
  position: relative;
  z-index: 1;
  border-radius: 34px 34px 0 0;
}

/* El corredor sube 34px para meterse por debajo de la foto del hero: asi por
   el hueco de las esquinas redondeadas se ve la foto y no una franja blanca.
   Lo que tapa es el piso vacio del estudio, no se pierde nada. */
.corredor.negra { margin-top: -34px; }

/* La franja de cierre va pegada a la seccion negra de precios: con esquinas
   redondeadas se veia el blanco de la pagina entre los dos negros. Va recta,
   separada solo por la linea sutil de .credibilidad. */
.credibilidad.negra { border-radius: 0; }

.corredor {
  position: relative;
  overflow: hidden;
  height: 640px;
  background: #000;
  color: var(--blanco);
  container-type: inline-size;
}

.corredor__mundo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  perspective: 30cqw;
  perspective-origin: 50% 55%;
}
.corredor__escena { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Las dos animaciones que corren solas —el corredor y la luz que recorre el
   borde de "Tema propio"— se congelan cuando su seccion no esta en pantalla.
   La clase la pone y la saca js/app.js. No se nota nada al mirar la web: lo
   que se ahorra es el telefono dibujando sin parar algo que nadie ve. */
.fuera-de-vista .corredor__card,
.fuera-de-vista .traza__luz { animation-play-state: paused; }

/* El fondo gris oscuro dibuja la cinta desde el primer cuadro: mientras las
   portadas terminan de bajar, se ven las tarjetas y no un bloque negro vacio. */
.corredor__card { position: absolute; overflow: hidden; backface-visibility: hidden; background: #1c1c1f; }
.corredor__card img { width: 100%; height: 100%; object-fit: cover; }

/* Velo para que el texto blanco se lea sobre cualquier portada. */
.corredor__velo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(0,0,0,.78) 0%, rgba(0,0,0,.20) 30%,
              rgba(0,0,0,.20) 58%, rgba(0,0,0,.85) 100%);
}

.corredor__txt {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 72px 22px 62px;
  text-align: center;
}
.corredor__txt h2 { color: var(--blanco); max-width: 19ch; }
.corredor__pie { max-width: 520px; }
.corredor__pie p { color: rgba(255,255,255,.72); font-size: 17px; }
.corredor__pie .precio {
  display: block;
  margin-top: 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--blanco);
}

/* Si el navegador no soporta unidades de contenedor, queda la banda negra
   con el titulo y nada roto. */
@supports not (container-type: inline-size) {
  .corredor__mundo { display: none; }
}

/* ---------- 8c. Vista previa del catalogo (home) --------------------------
   Las mismas filas del catalogo, cortadas por un difuminado al blanco que
   deja ver que la lista sigue.
   -------------------------------------------------------------------------- */

.previa__cab { max-width: 720px; margin-bottom: 40px; }
.previa__cab p { margin-top: 14px; color: var(--texto-sec); font-size: 21px; line-height: 1.3; }

.previa__caja { position: relative; }
.previa__caja .fila:last-child,
.previa__caja .fila:nth-last-child(2) { border-bottom: 0; }

.previa__velo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 130px;
  pointer-events: none;
  background: linear-gradient(to top,
              var(--blanco) 12%, rgba(255,255,255,.55) 58%, rgba(255,255,255,0) 100%);
}

/* El boton se apoya justo debajo del difuminado, sin pisar la fila que se
   desvanece. */
.previa__pie { margin-top: -8px; text-align: center; position: relative; }

/* ---------- 9. A medida (precios, sobre negro) ---------------------------- */

.precios {
  position: relative;
  overflow: hidden;
  padding: 120px 0 118px;
  background: #000;
  color: var(--blanco);
}

/* Grilla tenue de fondo, difuminada hacia los bordes. */
.precios__reja {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right,  rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 12%, transparent 78%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 52%, #000 12%, transparent 78%);
}

.precios .wrap { position: relative; z-index: 1; }

.precios__cab { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.precios__cab .h-seccion { color: var(--blanco); margin-top: 20px; }
.precios__cab p { margin-top: 16px; color: rgba(255,255,255,.62); font-size: 17px; }

.etiqueta-caja {
  display: inline-block;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 8px;
  padding: 5px 14px;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* Marco con las cuatro cruces en las esquinas. */
.precios__marco {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.02);
}
.precios__marco .cruz {
  position: absolute;
  width: 13px;
  height: 13px;
  color: rgba(255,255,255,.5);
}
.precios__marco .cruz::before,
.precios__marco .cruz::after {
  content: "";
  position: absolute;
  background: currentColor;
}
.precios__marco .cruz::before { left: 6px; top: 0; width: 1px; height: 13px; }
.precios__marco .cruz::after  { top: 6px; left: 0; height: 1px; width: 13px; }
.cruz--si { top: -7px; left: -7px; }
.cruz--sd { top: -7px; right: -7px; }
.cruz--ii { bottom: -7px; left: -7px; }
.cruz--id { bottom: -7px; right: -7px; }

.precios__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.plan { display: flex; flex-direction: column; padding: 24px 22px 22px; }

/* El titulo del plan nunca se corta ("Tema / propio"): si no entra junto al
   chip, el chip baja a la linea de abajo. */
.plan__cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.plan__cab h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.chip {
  flex: none;
  border-radius: 980px;
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(255,255,255,.75);
  background: rgba(255,255,255,.10);
}
.plan__sub { margin-top: 6px; font-size: 14px; color: rgba(255,255,255,.58); }

.plan__precio {
  margin-top: 28px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  color: rgba(255,255,255,.58);
  font-size: 17px;
}
.plan__precio .num + span { margin-left: 5px; }
.plan__precio .num {
  margin-bottom: -2px;
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--blanco);
}

.plan__incluye { margin: 18px 0 26px; }
.plan__incluye li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.62);
}
.plan__incluye li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,.38);
}

.plan__cta { margin-top: auto; }
.plan__cta .btn { width: 100%; }

/* Tarjeta destacada, con la luz que recorre el borde. */
.plan--destacado { padding: 0; }
.traza {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  padding: 1px;
  height: 100%;
}
.traza__luz {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220%;
  aspect-ratio: 1;
  margin: -110% 0 0 -110%;
  background: conic-gradient(from 0deg,
              transparent 0 68%, rgba(255,255,255,.15) 78%,
              rgba(255,255,255,.95) 86%, rgba(255,255,255,.15) 92%, transparent 100%);
  animation: traza-giro 5s linear infinite;
}
@keyframes traza-giro { to { transform: rotate(360deg); } }

.traza__in {
  position: relative;
  height: 100%;
  border-radius: 9px;
  /* Un punto mas clara que el resto de la seccion: junto con la luz que
     recorre el borde, separa el producto caro sin gritar. */
  background: linear-gradient(#1c1c20, #141416);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
}

.precios__extra {
  margin-top: 26px;
  text-align: center;
  font-size: 15px;
  color: rgba(255, 255, 255, .62);
}

.precios__pie {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 14px;
  color: rgba(255,255,255,.55);
}
.precios__pie svg { display: inline-block; width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; fill: currentColor; }

/* ---------- 9b. Antes y despues (reproductores) --------------------------- */

.ejemplos__cab { max-width: 720px; margin-bottom: 48px; }
.ejemplos__cab p { margin-top: 14px; color: var(--texto-sec); font-size: 21px; line-height: 1.3; }

.ejemplos__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.ejemplo {
  background: var(--gris-fondo);
  border-radius: 18px;
  padding: 28px 26px 26px;
  display: flex;
  flex-direction: column;
}

.ejemplo__tipo {
  align-self: flex-start;
  border-radius: 980px;
  padding: 4px 11px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto);
  background: rgba(0, 0, 0, .07);
}
.ejemplo__titulo {
  margin-top: 16px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.ejemplo__meta { margin-top: 3px; }
.ejemplo__pistas { margin-top: 26px; display: flex; flex-direction: column; gap: 10px; }

/* Reproductor */
.repro {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanco);
  border-radius: 14px;
  padding: 10px 14px 10px 10px;
}

.repro__btn {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--texto);
  color: var(--blanco);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s var(--ease), transform .2s var(--ease);
}
.repro__btn:hover { background: #000; transform: scale(1.06); }
.repro__btn svg { width: 12px; height: 12px; fill: currentColor; }
.repro__btn .icono-pausa { display: none; }
.repro.is-sonando .repro__btn .icono-play  { display: none; }
.repro.is-sonando .repro__btn .icono-pausa { display: block; }

.repro__cuerpo { flex: 1; min-width: 0; }
.repro__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.repro__nombre { font-size: 13px; font-weight: 600; letter-spacing: -0.01em; }
.repro__t { font-size: 12px; color: var(--texto-sec); font-variant-numeric: tabular-nums; }

.repro__barra {
  position: relative;
  height: 3px;
  margin-top: 7px;
  border-radius: 3px;
  background: var(--borde);
  cursor: pointer;
}
.repro__llena {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 3px;
  background: var(--texto);
}

/* Sin archivo cargado todavia */
.repro--vacio { opacity: .55; }
.repro--vacio .repro__btn { background: var(--borde); cursor: default; }
.repro--vacio .repro__btn:hover { background: var(--borde); transform: none; }
.repro--vacio .repro__barra { cursor: default; }

/* Version corta (arriba del catalogo): la pastilla entera es el boton y el
   avance se ve como un relleno que crece de fondo. Sin reloj ni barra: es
   para escuchar la diferencia en dos toques, no para recorrer el tema.
   El min-height reserva el lugar antes de que el JS la dibuje, asi la lista
   de pistas no pega un salto hacia abajo al cargar. */
.repro--mini { display: block; min-height: 44px; padding: 0; background: none; border-radius: 0; }

.repro__pastilla {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px 0 5px;
  border-radius: 980px;
  background: var(--gris-fondo);
  text-align: left;
  transition: background-color .2s var(--ease);
}
.repro__pastilla:hover { background: #ebebf0; }
.repro__pastilla:hover .repro__btn { background: #000; transform: scale(1.06); }

/* El texto y el boton van por encima del relleno. */
.repro__pastilla .repro__btn,
.repro__pastilla .repro__nombre,
.repro__detalle { position: relative; white-space: nowrap; }
.repro__detalle {
  min-width: 0;
  margin-left: -4px;
  overflow: hidden;
  text-overflow: ellipsis;       /* por si una fuente de otro sistema ocupa mas */
  font-size: 13px;
  color: var(--texto-sec);
}

.repro--mini .repro__llena {
  border-radius: 0;
  background: rgba(0, 0, 0, .07);
  transition: width .25s linear;
}

.repro--vacio .repro__pastilla { cursor: default; }
.repro--vacio .repro__pastilla:hover { background: var(--gris-fondo); }
.repro--vacio .repro__pastilla:hover .repro__btn { background: var(--borde); transform: none; }

/* La tarjeta de tema propio va oscura, igual que en los precios: el mismo
   codigo visual para el mismo producto en las dos secciones. */
.ejemplo--propio {
  background: linear-gradient(#1c1c20, #0d0d0f);
  color: var(--blanco);
}
.ejemplo--propio .ejemplo__tipo { background: rgba(255,255,255,.13); color: var(--blanco); }
.ejemplo--propio .ejemplo__meta { color: rgba(255,255,255,.55); }
.ejemplo--propio .repro { background: rgba(255,255,255,.07); }
.ejemplo--propio .repro__nombre { color: var(--blanco); }
.ejemplo--propio .repro__t { color: rgba(255,255,255,.55); }
.ejemplo--propio .repro__barra { background: rgba(255,255,255,.18); }
.ejemplo--propio .repro__llena { background: var(--blanco); }
.ejemplo--propio .repro__btn { background: var(--blanco); color: var(--texto); }
.ejemplo--propio .repro__btn:hover { background: var(--blanco); }
.ejemplo--propio .repro--vacio .repro__btn { background: rgba(255,255,255,.22); color: rgba(255,255,255,.5); }

.ejemplos__nota { margin-top: 26px; }

/* ---------- 10. Credibilidad (franja negra) ------------------------------- */

.credibilidad {
  padding: 84px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: #000;
  color: var(--blanco);
}

.tres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.tres h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 8px; }
.tres p  { color: rgba(255, 255, 255, .58); }

/* ---------- 11. Footer ---------------------------------------------------- */

.footer {
  background: var(--gris-fondo);
  padding: 44px 0 32px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--texto-sec);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  padding-bottom: 26px;
}
.footer h4 { font-size: 12px; font-weight: 600; color: var(--texto); margin: 0 0 10px; }
.footer__marca { display: flex; align-items: center; gap: 8px; }
.footer__marca img { width: 16px; height: 16px; opacity: .45; }
.footer li { margin-bottom: 8px; }
.footer a:hover { text-decoration: underline; }
.footer__pie {
  border-top: 1px solid var(--borde);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  justify-content: space-between;
}

/* ---------- 12. Catalogo -------------------------------------------------- */

.cat-cabecera { padding: 64px 0 28px; }
.cat-cabecera .h-seccion { margin-bottom: 8px; }

.cat-precio {
  margin-top: 14px;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--texto);
}
.cat-precio strong { font-weight: 600; }
.cat-precio__sep { margin: 0 12px; color: var(--texto-sec); }

/* Buscador */
.buscador { position: relative; margin: 26px 0 6px; }
.buscador__lupa {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: var(--texto-sec); pointer-events: none;
}
.buscador input {
  width: 100%;
  height: 48px;
  padding: 0 46px;
  font-size: 17px;
  color: var(--texto);
  background: var(--gris-fondo);
  border: 1px solid transparent;
  border-radius: 980px;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.buscador input::placeholder { color: var(--texto-sec); }
.buscador input:focus {
  outline: none;
  background: var(--blanco);
  border-color: var(--borde);
}
.buscador__limpiar {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%;
  display: none; align-items: center; justify-content: center;
  background: var(--borde); color: var(--blanco); font-size: 14px; line-height: 1;
}
.buscador.tiene-texto .buscador__limpiar { display: flex; }

/* Antes y despues en version corta, debajo del buscador. Tres parejas: arriba
   el antes, abajo el despues. */
.muestras { margin-top: 22px; }
.muestras__titulo { margin-bottom: 10px; font-size: 14px; color: var(--texto-sec); }
.muestras__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.muestras__par { display: flex; flex-direction: column; gap: 8px; }

/* Sin JS los botones no existen: mejor no mostrar el titulo solo. */
.no-js .muestras { display: none; }

/* Pildoras de filtro — barra sticky bajo la nav */
.filtros {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--borde);
}
/* En escritorio las doce pildoras entran en dos lineas: se ven todas de una.
   En movil pasan a una sola fila con scroll horizontal (ver el media query). */
.filtros__in {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.filtros__in::-webkit-scrollbar { display: none; }

.pill {
  flex: none;
  border-radius: 980px;
  padding: 7px 16px;
  font-size: 14px;
  color: var(--texto);
  background: transparent;
  border: 1px solid var(--borde);
  transition: background-color .2s var(--ease), border-color .2s var(--ease);
}
.pill:hover { border-color: var(--texto); }

/* Uso n2 del acento — pildora activa. */
.pill.is-activa {
  background: var(--amarillo);
  border-color: var(--amarillo);
  color: var(--texto);
}

/* Resultados. La lista arranca con aire bajo la barra de filtros (antes ese
   espacio lo ocupaba un contador de pistas, que ya no se muestra). */
.resultados { padding: 32px 0 110px; }   /* abajo: aire antes de la seccion negra */

.lista {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  border-top: 1px solid var(--borde);
}

.fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--borde);
  min-height: 72px;
}
.fila__txt { min-width: 0; }
.fila__titulo {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.fila__meta { margin-top: 3px; }
.fila .btn { flex: none; }

.cargar-mas { text-align: center; padding: 44px 0 0; }

.vacio { padding: 64px 0; text-align: center; border-bottom: 1px solid var(--borde); }
.vacio h3 { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 10px; }
.vacio p  { color: var(--texto-sec); margin-bottom: 24px; }


/* ---------- 13. Reveal ---------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Red de seguridad: si el JS no corre, nada queda invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* ---------- 14. Movil ----------------------------------------------------- */

@media (max-width: 833px) {
  .seccion { padding: 60px 0; }

  .h-hero    { font-size: 40px; }
  .h-seccion { font-size: 32px; }
  .sub-hero  { font-size: 19px; }

  .nav__links { display: none; }
  .nav__burger { display: block; }

  /* En movil la foto se recorta mas cuadrada, para que el kit de bateria y
     las guitarras se sigan viendo grandes. */
  .hero__txt { padding: 48px 0 36px; }
  .hero__foto img {
    aspect-ratio: 5 / 4;
    min-height: 0;
    max-height: none;
  }
  .hero .acciones { flex-direction: column; gap: 18px; }
  .hero .sub-hero { margin-bottom: 26px; }
  .hero .chev { padding: 8px 0; }
  .btn--compacto { padding: 10px 18px; }

  .negra { border-radius: 24px 24px 0 0; }
  .corredor.negra { margin-top: -24px; }

  .corredor { height: 400px; }
  .corredor__txt { padding: 40px 22px 34px; }
  .corredor__pie p { font-size: 15px; }

  .precios { padding: 80px 0 84px; }
  .credibilidad { padding: 60px 0; }

  .ejemplos__grid { grid-template-columns: 1fr; }
  .ejemplos__cab { margin-bottom: 32px; }
  .ejemplos__cab p { font-size: 19px; }

  /* En una sola columna alcanzan cuatro filas: tres legibles y la cuarta
     bajo el difuminado. Las que sobran se ocultan. */
  .previa__cab { margin-bottom: 30px; }
  .previa__cab p { font-size: 19px; }
  .previa__caja .fila:nth-child(n + 5) { display: none; }
  .previa__caja .fila:nth-last-child(2) { border-bottom: 1px solid var(--borde); }
  .previa__velo {
    height: 118px;
    background: linear-gradient(to top,
                var(--blanco) 34%, rgba(255,255,255,.7) 66%, rgba(255,255,255,0) 100%);
  }
  .previa__pie { margin-top: 6px; }
  .previa__pie .btn { width: 100%; }

  .cat-precio { font-size: 17px; }
  .cat-precio__sep { margin: 0 8px; }

  .filtros__in { flex-wrap: nowrap; overflow-x: auto; }

  .tres { grid-template-columns: 1fr; gap: 28px; }

  .footer { font-size: 14px; }
  .footer__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__cols > div:last-child { grid-column: 1 / -1; }
  .footer h4 { font-size: 13px; margin-bottom: 4px; }
  .footer li { margin-bottom: 0; }
  .footer li a { display: inline-block; padding: 7px 0; }
  .footer__pie { flex-direction: column; font-size: 12px; }

  .precios__grid { grid-template-columns: 1fr; }
  .precios__marco { padding: 12px; }
  .plan, .traza__in { padding: 22px 18px 20px; }
  .precios__cab { margin-bottom: 32px; }
  .plan__precio .num { font-size: 40px; }

  .lista { grid-template-columns: 1fr; }

  .cat-cabecera { padding: 40px 0 20px; }

  /* Las tres parejas pasan a una fila que se desliza con el dedo, igual que
     las pildoras de filtro: ocupan dos renglones y no seis, y la lista de
     pistas no queda empujada hacia abajo. La que asoma al costado avisa que
     hay mas. */
  .muestras { margin-top: 18px; }
  .muestras__grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(216px, 1fr);   /* en tablet entran las tres */
    gap: 12px;
    margin: 0 -22px;
    padding: 0 22px;
    overflow-x: auto;
    scroll-padding: 0 22px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .muestras__grid::-webkit-scrollbar { display: none; }
  .muestras__par { scroll-snap-align: start; }
}

/* ---------- 15. Celular (hasta 600px) --------------------------------------
   Solo telefonos: tablet y computadora no cambian.
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  /* Hero: el texto va ENCIMA de la foto, como en escritorio. hero-movil.jpg
     es la foto a escala normal (bateria, guitarras y amplis completos) con el
     fondo celeste y blanco del estudio EXTENDIDO hacia arriba, fundido sin
     corte: el texto queda sobre el cielo de la propia imagen. Se anclan abajo
     los instrumentos; si la pantalla es mas ancha, lo que se recorta es cielo.
     El bloque de texto se centra en la zona del cielo y los botones van en
     una sola linea. */
  .hero__txt {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 64%;             /* la zona de cielo, arriba de los platillos */
    display: flex;
    align-items: center;
    padding: 0 0 22px;       /* centro optico: apenas por encima del medio */
  }
  .hero__txt .wrap { width: 100%; }
  .hero__foto img {
    aspect-ratio: auto;
    height: max(600px, 138vw);
    max-height: none;
  }
  .hero .etiqueta { margin-bottom: 10px; }
  .hero .h-hero { margin-bottom: 10px; }
  .hero .sub-hero { font-size: 17px; margin-bottom: 20px; }
  .hero .acciones { flex-direction: row; gap: 12px 22px; }
  .hero .chev { font-size: 18px; }
  .hero .btn { padding: 11px 18px; font-size: 16px; }

  /* Corredor: un poco mas alto para que entren las tapas grandes (la
     geometria "de cerca" la arma el JS con VIA_MOVIL). */
  .corredor { height: 440px; }
  .corredor__txt { padding: 36px 22px 30px; }
}

@media (max-width: 480px) {
  .fila__titulo { font-size: 17px; }
}

/* Celulares chicos (360px): el titulo del hero baja a 36px para quedar en
   dos lineas y no acercarse a los platillos de la foto. */
@media (max-width: 380px) {
  .hero .h-hero { font-size: 36px; }
}