/* ============================================================
   TIENDA CDS · Creando Patria
   Estilo neumórfico oscuro: relieve con sombras dobles,
   degradados suaves y acentos dorados.
   ============================================================ */

:root {
  --fondo: #0b0b0c;
  --fondo-2: #141415;
  --fondo-3: #050506;
  --sombra-oscura: #000000;
  --sombra-clara: #1c1c1e;
  --texto: #e9e4d8;
  --texto-suave: #a39e92;
  --oro: #d4a84a;
  --oro-claro: #f0cf7e;
  --oro-oscuro: #9c7428;
  --verde: #6fcf8e;
  --rojo: #e77b6f;
  --naranja: #e8a94f;
  --azul: #7fb2e5;
  --radio: 22px;
  --radio-pequeno: 14px;
  /* Relieve muy marcado sobre negro: sombra profunda + luz tenue + bisel brillante en el canto */
  --relieve: 14px 14px 28px var(--sombra-oscura), -10px -10px 24px var(--sombra-clara),
             inset 1px 1px 0 rgba(255, 255, 255, .07), inset -1px -1px 0 rgba(0, 0, 0, .9);
  --relieve-suave: 7px 7px 14px var(--sombra-oscura), -6px -6px 12px var(--sombra-clara),
                   inset 1px 1px 0 rgba(255, 255, 255, .08), inset -1px -1px 0 rgba(0, 0, 0, .9);
  /* Incrustado: hueco profundo con canto de luz */
  --hundido: inset 9px 9px 18px #000, inset -7px -7px 16px rgba(255, 255, 255, .055), 0 1px 0 rgba(255, 255, 255, .06);
  --hundido-suave: inset 4px 4px 9px #000, inset -3px -3px 8px rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .05);
  --degradado: linear-gradient(145deg, #1a1a1c 0%, #101011 45%, #070708 100%);
  --degradado-oro: linear-gradient(145deg, #f0cf7e, #c4952f 55%, #9c7428);
  --fuente-titulos: 'Cinzel', Georgia, serif;
  --fuente: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: radial-gradient(ellipse at top, #141416 0%, var(--fondo) 55%, #060607 100%) fixed;
  background-color: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--oro); text-decoration: none; }
a:hover { color: var(--oro-claro); }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 700; line-height: 1.25; margin: 0 0 .6em; letter-spacing: .02em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.05rem; }
del { color: var(--texto-suave); font-size: .85em; margin-right: .4em; }
code { font-family: ui-monospace, Consolas, monospace; font-size: .88em; color: var(--oro-claro); word-break: break-all; }
.oculto-visual { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ── Piezas neumórficas ─────────────────────────────────── */
.neo {
  background: var(--degradado);
  border-radius: var(--radio);
  box-shadow: var(--relieve);
  border: 1px solid rgba(255, 255, 255, .035);
}
.neo-hundido {
  background: linear-gradient(145deg, #000 0%, #050506 55%, #0c0c0d 100%);
  border-radius: var(--radio-pequeno);
  box-shadow: var(--hundido);
  border: 1px solid rgba(0, 0, 0, .9);
}
/* Incrustación: marco grabado dentro de los bloques grandes, como una placa repujada */
:where(.portada, .tarjeta-cd, .ficha-portada, .ficha-datos, .caja-panel, .resumen, .resultado,
       .bloque-texto, .usb-incluido, .carrito-lineas, .vacio, .dato, .caja-login) { position: relative; }
.portada::after, .tarjeta-cd::after, .ficha-portada::after, .ficha-datos::after, .caja-panel::after,
.resumen::after, .resultado::after, .bloque-texto::after, .usb-incluido::after, .carrito-lineas::after,
.vacio::after, .dato::after, .caja-login::after {
  content: ''; position: absolute; inset: 8px; pointer-events: none;
  border-radius: calc(var(--radio) - 8px);
  border: 1px solid rgba(0, 0, 0, .95);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .05), inset 0 1px 0 rgba(255, 255, 255, .04);
}
.tarjeta-cd:hover::after, .dato:hover::after { border-color: rgba(212, 168, 74, .35); }

.contenedor { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
.principal { padding-top: 28px; padding-bottom: 60px; min-height: 60vh; }

/* ── Botones ────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  padding: 12px 22px;
  border: 0; border-radius: 999px;
  background: var(--degradado);
  color: var(--texto);
  font: 600 .95rem var(--fuente);
  cursor: pointer;
  box-shadow: var(--relieve-suave);
  transition: transform .15s ease, box-shadow .15s ease, color .15s;
  text-align: center; white-space: nowrap;
}
.boton:hover { color: var(--oro-claro); transform: translateY(-1px); }
.boton:active { box-shadow: var(--hundido-suave); transform: translateY(0); }
.boton-oro {
  background: var(--degradado-oro);
  color: #1b1607;
  box-shadow: 6px 6px 14px var(--sombra-oscura), -5px -5px 12px var(--sombra-clara), inset 0 1px 0 rgba(255, 255, 255, .35);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
}
.boton-oro:hover { color: #000; filter: brightness(1.07); }
.boton-pequeno { padding: 8px 16px; font-size: .85rem; }
.boton-grande { padding: 16px 26px; font-size: 1.05rem; }
.boton-bloque { display: flex; width: 100%; }
.boton-texto { background: transparent; box-shadow: none; color: var(--texto-suave); }
.boton-texto:hover { color: var(--rojo); }
.boton-peligro { color: var(--rojo); }
.boton-peligro:hover { color: #ff9a8f; }
.boton-icono {
  width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--degradado); color: var(--texto-suave); box-shadow: var(--relieve-suave); font-size: .9rem;
}
.boton-icono:hover { color: var(--rojo); }
.boton-icono:active { box-shadow: var(--hundido-suave); }

/* ── Avisos ─────────────────────────────────────────────── */
.aviso {
  padding: 14px 18px; border-radius: var(--radio-pequeno); margin: 0 0 18px;
  background: var(--fondo-3); box-shadow: var(--hundido-suave); border-left: 4px solid var(--azul);
}
.aviso-ok { border-left-color: var(--verde); }
.aviso-error { border-left-color: var(--rojo); }
.aviso-info { border-left-color: var(--oro); }

/* ── Cabecera ───────────────────────────────────────────── */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, rgba(11, 11, 12, .97), rgba(11, 11, 12, .9));
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.cabecera-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 74px; }
.marca { display: flex; align-items: center; gap: 12px; color: var(--texto); }
.marca:hover { color: var(--texto); }
/* Disco pequeño de la marca = logo de Creando Patria */
.marca-disco {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: url('logo-creando-patria.png') center / cover no-repeat, var(--fondo);
  box-shadow: 0 0 0 2px var(--oro-oscuro), var(--relieve-suave);
}
/* Mascota a la izquierda de la marca */
.marca-mascota { height: 62px; width: auto; flex: none; margin: -6px 0; filter: drop-shadow(3px 4px 6px rgba(0, 0, 0, .5)); }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; }
.marca-texto strong { font-family: var(--fuente-titulos); letter-spacing: .08em; font-size: 1rem; }
.marca-texto small { color: var(--oro); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }
.menu { display: flex; align-items: center; gap: 8px; }
.menu > a { color: var(--texto-suave); padding: 8px 12px; border-radius: 999px; font-weight: 500; font-size: .95rem; }
.menu > a:hover { color: var(--oro-claro); }
.boton-carrito {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  background: var(--degradado); box-shadow: var(--relieve-suave); color: var(--texto) !important; padding: 10px 16px !important;
}
.burbuja {
  min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--degradado-oro); color: #1b1607; font-size: .75rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ── Portada (hero) ─────────────────────────────────────── */
.portada {
  display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: 30px;
  padding: clamp(24px, 5vw, 54px); margin-bottom: 40px; overflow: hidden;
}
/* Imagen de fondo (imagenes/fondo_tienda.png) oscurecida a la izquierda para que el texto se lea bien */
.portada.con-fondo {
  aspect-ratio: var(--fondo-proporcion, 2.5);   /* misma forma que la imagen → no se recorta */
  background:
    linear-gradient(90deg, rgba(8, 8, 9, .93) 0%, rgba(8, 8, 9, .78) 42%, rgba(8, 8, 9, .35) 100%),
    var(--fondo-portada) center / 100% 100% no-repeat,
    var(--fondo);
}
.portada.con-fondo p { color: #d8d2c6; }
.portada.con-fondo h1, .portada.con-fondo p, .portada.con-fondo li { text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.portada p { color: var(--texto-suave); font-size: 1.08rem; max-width: 52ch; }
.etiqueta-oro {
  display: inline-block; padding: 5px 14px; border-radius: 999px; margin-bottom: 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro); background: var(--fondo-3); box-shadow: var(--hundido-suave);
}
.ventajas { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.ventajas li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.icono { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.1rem; }
.portada-disco { display: flex; justify-content: center; }
/* Disco con el logo de Creando Patria impreso: el disco gira y el brillo se queda quieto */
.disco {
  position: relative; width: min(320px, 70vw); aspect-ratio: 1 / 1; border-radius: 50%;
  box-shadow: 16px 16px 34px var(--sombra-oscura), -14px -14px 30px var(--sombra-clara);
}
.disco-giratorio {
  position: absolute; inset: 0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: repeating-radial-gradient(circle, #1a1a1c 0 1px, #0d0d0e 1px 3px);
  background-color: #0d0d0e;
  animation: girar 14s linear infinite;
}
.disco-logo {
  width: 66%; height: 66%; object-fit: contain; border-radius: 50%;
  box-shadow: 0 0 0 3px var(--oro-oscuro), 0 0 0 5px #0d0d0e, 0 0 18px rgba(0, 0, 0, .55);
}
.disco::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 30deg, rgba(255, 255, 255, .10), transparent 18%, rgba(255, 255, 255, .07) 45%, transparent 65%, rgba(255, 255, 255, .10));
  mix-blend-mode: screen;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .disco-giratorio { animation: none; } }

/* ── Catálogo ───────────────────────────────────────────── */
.titulo-seccion { margin-bottom: 24px; }
.rejilla-cds { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 30px; }
.tarjeta-cd { padding: 16px; display: flex; flex-direction: column; transition: transform .2s ease; }
.tarjeta-cd:hover { transform: translateY(-4px); }
.tarjeta-portada { position: relative; display: block; padding: 6px; border-radius: 18px; }
.tarjeta-portada img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 10px; }
.agotado .tarjeta-portada img { filter: grayscale(.8) brightness(.7); }
.cinta {
  position: absolute; top: 18px; left: 18px; padding: 4px 12px; border-radius: 999px;
  background: var(--degradado-oro); color: #1b1607; font-size: .72rem; font-weight: 700; letter-spacing: .05em;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .4);
}
.cinta + .cinta { top: 50px; }
.cinta-roja { background: linear-gradient(145deg, #f09a8f, #c9574b); color: #fff; }
.cinta-gris { background: linear-gradient(145deg, #777, #4b4b4b); color: #fff; }
.tarjeta-info { padding: 16px 6px 4px; display: flex; flex-direction: column; flex: 1; }
.tarjeta-info h2 { font-size: 1.08rem; margin-bottom: 4px; }
.tarjeta-info h2 a { color: var(--texto); }
.tarjeta-info h2 a:hover { color: var(--oro-claro); }
.artista { color: var(--texto-suave); font-size: .9rem; margin: 0 0 14px; }
.artista.grande { font-size: 1.1rem; color: var(--oro); }
.tarjeta-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.precio strong { font-size: 1.3rem; color: var(--oro-claro); }

.vacio { text-align: center; padding: 50px 24px; }
.vacio-icono { font-size: 3rem; margin-bottom: 10px; }
.vacio p { color: var(--texto-suave); }

/* ── Ficha de CD ────────────────────────────────────────── */
.volver { display: inline-block; margin-bottom: 20px; color: var(--texto-suave); }
.ficha { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 36px; align-items: start; }
.ficha-portada { padding: 14px; }
.ficha-portada img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 12px; }
.miniaturas { display: flex; gap: 16px; margin-top: 20px; }
.miniatura { width: 86px; padding: 7px; border: 0; cursor: pointer; border-radius: 14px; }
.miniatura img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 8px; }
.miniatura.activa { box-shadow: var(--hundido-suave); outline: 2px solid var(--oro-oscuro); }
.ficha-datos { padding: clamp(22px, 4vw, 36px); }
.subtitulo { font-style: italic; color: var(--texto-suave); }
.ficha-precio { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.ficha-precio strong { font-size: 2.2rem; color: var(--oro-claro); font-family: var(--fuente-titulos); }
.ficha-precio small { color: var(--texto-suave); }
.disponibilidad { font-weight: 600; font-size: .92rem; }
.disponibilidad.si { color: var(--verde); }
.disponibilidad.no { color: var(--rojo); }
.ficha-compra { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 22px 0; }
.selector-cantidad { display: inline-flex; align-items: center; padding: 5px; border-radius: 999px; }
.selector-cantidad button {
  width: 34px; height: 34px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--degradado); color: var(--texto); font-size: 1.15rem; box-shadow: var(--relieve-suave);
}
.selector-cantidad button:active { box-shadow: var(--hundido-suave); }
.selector-cantidad input {
  width: 46px; text-align: center; border: 0; background: transparent; color: var(--texto);
  font: 600 1rem var(--fuente); -moz-appearance: textfield; appearance: textfield;
}
.selector-cantidad input::-webkit-outer-spin-button, .selector-cantidad input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ficha-tecnica { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 24px 0 0; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .06); font-size: .93rem; }
.ficha-tecnica dt { color: var(--texto-suave); }
.ficha-tecnica dd { margin: 0; }
.ficha-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 40px; }
.bloque-texto { padding: clamp(22px, 4vw, 34px); color: #d6d0c3; }
.pistas { margin: 0; padding-left: 1.6em; }
.pistas li { padding: 6px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.pistas li::marker { color: var(--oro); font-weight: 700; }

/* ── Mini reproductor de fragmentos ── */
.pista-escuchar { margin: -4px 0 12px; color: var(--texto-suave); font-size: .9rem; }
.pistas.con-muestras { list-style: none; padding-left: 0; counter-reset: pista; }
.pistas.con-muestras li {
  counter-increment: pista;
  display: flex; align-items: center; gap: 14px;
  padding: 8px 6px;
  border-radius: 12px;
  transition: background .25s;
}
.pistas.con-muestras li::before {
  content: counter(pista);
  min-width: 1.6em; text-align: right;
  color: var(--oro); font-weight: 700;
}
.pistas.con-muestras li.sonando { background: rgba(212, 168, 74, .08); }
.pistas.con-muestras li.sonando .pista-nombre { color: var(--oro-claro); }
.pista-nombre { flex: 1; min-width: 0; }
.muestra-hueco { width: 40px; flex: none; }
.muestra-play {
  --progreso: 0;
  position: relative;
  flex: none;
  width: 40px; height: 40px;
  border: 0; border-radius: 50%;
  cursor: pointer;
  background: var(--degradado);
  box-shadow: var(--relieve-suave);
  display: grid; place-items: center;
  transition: transform .15s, box-shadow .2s;
}
.muestra-play::before {                     /* anillo de progreso dorado */
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(var(--oro) calc(var(--progreso) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%);
          mask: radial-gradient(circle, transparent 60%, #000 61%);
  opacity: 0; transition: opacity .2s;
}
.muestra-play.sonando::before { opacity: 1; }
.muestra-play:hover { transform: scale(1.06); box-shadow: var(--relieve-suave), 0 0 14px rgba(212, 168, 74, .35); }
.muestra-play:active, .muestra-play.sonando { box-shadow: var(--hundido-suave); }
.icono-play {                               /* triángulo ▶ */
  width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent var(--oro-claro);
}
.muestra-play.sonando .icono-play {         /* ❚❚ pausa */
  width: 12px; height: 14px; margin-left: 0; border: 0;
  background: linear-gradient(90deg, var(--oro-claro) 0 35%, transparent 35% 65%, var(--oro-claro) 65% 100%);
}
.muestra-play.cargando .icono-play { animation: latido 1s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .35; } }

/* ── Panel: filas de audio por canción ── */
.lista-muestras { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 12px; }
.fila-muestra {
  display: grid; grid-template-columns: 34px minmax(0, 1.2fr) minmax(0, 1.6fr) auto;
  gap: 14px; align-items: center;
  padding: 10px 14px; border-radius: var(--radio-pequeno);
}
.fila-muestra[hidden] { display: none; }
.muestra-num { color: var(--oro); font-weight: 700; text-align: right; }
.muestra-nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muestra-actual { display: flex; align-items: center; gap: 12px; min-width: 0; }
.muestra-actual audio { height: 34px; width: 100%; max-width: 300px; }
.subir-muestra { position: relative; cursor: pointer; white-space: nowrap; }
.subir-muestra input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.subir-muestra.con-archivo { color: var(--verde); }
@media (max-width: 760px) {
  .fila-muestra { grid-template-columns: 28px minmax(0, 1fr); }
  .muestra-actual, .subir-muestra { grid-column: 2; }
}

/* ── Carrito ────────────────────────────────────────────── */
.carrito { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 30px; align-items: start; }
.carrito-lineas { padding: 18px; }
.linea { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto auto; gap: 16px; align-items: center; padding: 14px 6px; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.linea img { width: 76px; aspect-ratio: 1 / 1; height: auto; object-fit: cover; padding: 5px; border-radius: 12px; }
.linea-info { display: flex; flex-direction: column; min-width: 0; }
.linea-info span { color: var(--texto-suave); font-size: .87rem; }
.linea-importe { color: var(--oro-claro); min-width: 80px; text-align: right; }
.carrito-acciones { display: flex; justify-content: space-between; gap: 10px; padding-top: 16px; flex-wrap: wrap; }
.resumen { padding: 26px; position: sticky; top: 96px; }
.resumen-fila { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; }
.resumen-total { font-size: 1.25rem; font-weight: 700; border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 8px; padding-top: 14px; }
.resumen-total span:last-child { color: var(--oro-claro); }
.resumen-iva, .resumen-nota, .pista-envio { color: var(--texto-suave); font-size: .82rem; }
.pista-envio { color: var(--oro); }

/* ── Resultado (gracias / cancelado) ────────────────────── */
.resultado { max-width: 640px; margin: 20px auto; padding: clamp(28px, 5vw, 48px); text-align: center; }
.resultado p { color: #d2ccbf; }
.resultado-icono {
  width: 86px; height: 86px; margin: 0 auto 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 2.4rem;
  box-shadow: var(--relieve);
}
.resultado-icono.ok { color: #1b1607; background: var(--degradado-oro); }
.resultado-tabla { text-align: left; padding: 16px 22px; margin: 24px 0; }
.resultado-botones { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }
.legal h2 { margin-top: 1.4em; color: var(--oro); font-size: 1.1rem; }
.legal { max-width: 900px; margin: 0 auto; line-height: 1.75; }
.legal h2 { padding-left: 14px; border-left: 3px solid var(--oro); }
.legal ul { padding-left: 1.2em; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--oro); }
.legal a { text-decoration: underline; text-underline-offset: 3px; }
.legal .tabla { margin: 6px 0 14px; }
.legal-fecha { color: var(--texto-suave); font-size: .85rem; margin-top: -6px; }
.resumen-envio { padding: 16px 22px; margin: 10px 0 24px; }
.resumen-envio p { margin: 4px 0; }

/* ── Pie ────────────────────────────────────────────────── */
.pie { margin-top: 30px; padding: 34px 0 40px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .25)); }
.pie-in { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; color: var(--texto-suave); font-size: .88rem; }
.pie-pagos { display: flex; flex-wrap: wrap; gap: 8px 18px; justify-content: center; }
.sello-seguro { color: var(--verde); font-weight: 600; }
.pie-enlaces { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; }
.pie-enlaces a { color: var(--texto-suave); }
.pie-enlaces a:hover { color: var(--oro); }
.pie-copy { margin: 0; font-size: .8rem; }

/* ── Formularios ────────────────────────────────────────── */
.formulario label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; font-size: .88rem; font-weight: 600; color: var(--texto-suave); }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; padding: 13px 16px; border: 0; border-radius: var(--radio-pequeno);
  background: var(--fondo-3); color: var(--texto); box-shadow: var(--hundido-suave);
  font: 400 .97rem var(--fuente); outline: none; transition: box-shadow .15s;
}
textarea { resize: vertical; line-height: 1.55; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--oro) 50%), linear-gradient(135deg, var(--oro) 50%, transparent 50%); background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; }
input:focus, select:focus, textarea:focus { box-shadow: var(--hundido-suave), 0 0 0 2px rgba(212, 168, 74, .45); }
.formulario .casilla { flex-direction: row; align-items: center; gap: 10px; cursor: pointer; color: var(--texto); font-weight: 500; }
.casilla input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--oro); }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pista-interruptor {
  position: relative; width: 52px; height: 28px; flex: none; border-radius: 999px;
  background: var(--fondo-3); box-shadow: var(--hundido-suave); transition: background .2s;
}
.pista-interruptor::after {
  content: ''; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--degradado); box-shadow: 2px 2px 5px var(--sombra-oscura), -1px -1px 3px var(--sombra-clara); transition: transform .2s, background .2s;
}
.interruptor input:checked + .pista-interruptor { background: rgba(212, 168, 74, .22); }
.interruptor input:checked + .pista-interruptor::after { transform: translateX(24px); background: var(--degradado-oro); }
.interruptor input:focus-visible + .pista-interruptor { outline: 2px solid var(--oro); }
.campos-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.campos-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; align-items: end; }

/* ── Login / instalación ────────────────────────────────── */
.pagina-login { display: flex; align-items: center; justify-content: center; padding: 30px 16px; }
.caja-login { width: 100%; max-width: 420px; padding: 36px 30px; }
.caja-ancha { max-width: 560px; }
.login-marca { text-align: center; margin-bottom: 24px; }
.login-marca .marca-disco { width: 70px; height: 70px; margin: 0 auto 16px; }
.login-marca h1 { font-size: 1.5rem; margin-bottom: 4px; }
.login-marca p { color: var(--texto-suave); margin: 0; font-size: .9rem; }
.caja-login label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; font-size: .88rem; font-weight: 600; color: var(--texto-suave); }
.enlace-suave { display: block; text-align: center; margin-top: 18px; color: var(--texto-suave); font-size: .9rem; }
.caja-titulo .enlace-suave { display: inline; margin: 0; }
.lista-checks { list-style: none; padding: 0; margin: 0 0 20px; }
.lista-checks li { padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.lista-checks li.si { color: var(--verde); }
.lista-checks li.no { color: var(--rojo); }
.lista-checks small { display: block; color: var(--texto-suave); font-size: .8rem; margin-left: 1.4em; }

/* ── Panel de control ───────────────────────────────────── */
.panel { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.panel-lateral {
  position: sticky; top: 0; height: 100vh; padding: 26px 18px; display: flex; flex-direction: column; gap: 30px;
  background: linear-gradient(180deg, #141415, #060607);
  box-shadow: 8px 0 22px rgba(0, 0, 0, .35);
}
.panel-menu { display: flex; flex-direction: column; gap: 10px; }
.panel-menu a {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radio-pequeno);
  color: var(--texto-suave); font-weight: 600;
}
.panel-menu a:hover { color: var(--oro-claro); }
.panel-menu a.activo { color: var(--oro-claro); background: var(--fondo-3); box-shadow: var(--hundido-suave); }
.panel-menu .burbuja { margin-left: auto; }
.panel-lateral-pie { margin-top: auto; display: flex; flex-direction: column; gap: 10px; font-size: .88rem; }
.panel-lateral-pie a { color: var(--texto-suave); }
.panel-cuerpo { padding: 28px clamp(16px, 3vw, 40px) 60px; min-width: 0; }
.panel-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 24px; }
.panel-cabecera h1 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.modo-stripe { padding: 6px 14px; border-radius: 999px; font-size: .78rem; font-weight: 700; box-shadow: var(--hundido-suave); background: var(--fondo-3); }
.modo-real { color: var(--verde); }
.modo-prueba { color: var(--naranja); }
.modo-falta { color: var(--rojo); }

.tarjetas-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 24px; margin-bottom: 30px; }
.dato { padding: 22px; display: flex; flex-direction: column; gap: 4px; color: var(--texto); }
.dato:hover { color: var(--texto); }
.dato strong { font-size: 1.6rem; font-family: var(--fuente-titulos); color: var(--oro-claro); }
.dato small { color: var(--texto-suave); }
.dato-icono { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 10px; }
.dato-alerta { outline: 2px solid rgba(212, 168, 74, .55); }

.rejilla-panel { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; margin-bottom: 26px; }
.caja-panel { padding: clamp(18px, 3vw, 28px); margin-bottom: 26px; }
.rejilla-panel .caja-panel { margin-bottom: 0; }
.caja-panel h2 { color: var(--oro); font-size: 1.12rem; }
.caja-panel h2:not(:first-child) { margin-top: 26px; }
.caja-titulo { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.caja-estrecha { max-width: 560px; }
.texto-suave { color: var(--texto-suave); font-size: .9rem; }
.rojo { color: var(--rojo) !important; }
.naranja { color: var(--naranja); }

.tabla-envoltorio { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.tabla th { text-align: left; color: var(--texto-suave); font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; padding: 10px 12px; }
.tabla td { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .05); vertical-align: middle; white-space: nowrap; }
.tabla tfoot td { border-top: 0; padding: 6px 12px; }
.tabla tfoot td:last-child, .tabla td:last-child { text-align: right; }
.fila-total td { font-weight: 700; font-size: 1.05rem; color: var(--oro-claro); }
.fila-enlace { cursor: pointer; }
.fila-enlace:hover td { background: rgba(255, 255, 255, .02); }

.estado { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .76rem; font-weight: 700; background: var(--fondo-3); box-shadow: var(--hundido-suave); white-space: nowrap; }
.estado-pagado { color: var(--oro-claro); }
.estado-enviado { color: var(--azul); }
.estado-entregado { color: var(--verde); }
.estado-reembolsado, .estado-cancelado, .estado-fallido { color: var(--rojo); }
.estado-pendiente, .estado-caducado { color: var(--texto-suave); }

.barra-acciones { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.barra-acciones.pegajosa {
  position: sticky; bottom: 14px; z-index: 5; justify-content: flex-end; padding: 14px 18px; border-radius: var(--radio);
  background: rgba(11, 11, 12, .92); backdrop-filter: blur(6px); box-shadow: var(--relieve);
}
.botones-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.botones-fila form { margin: 0; }

.lista-admin-cds { display: grid; gap: 20px; }
.fila-cd { display: grid; grid-template-columns: 80px minmax(0, 1fr) auto auto auto; gap: 18px; align-items: center; padding: 14px 18px; }
.fila-cd.inactivo { opacity: .55; }
.fila-cd img { width: 80px; aspect-ratio: 1 / 1; height: auto; object-fit: cover; padding: 5px; border-radius: 12px; }
.fila-cd-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fila-cd-info > span { color: var(--texto-suave); font-size: .87rem; }
.fila-cd-precio { font-weight: 700; color: var(--oro-claro); font-size: 1.1rem; }
.fila-cd-stock { display: flex; align-items: end; gap: 8px; margin: 0; }
.fila-cd-stock label { display: flex; flex-direction: column; font-size: .75rem; color: var(--texto-suave); gap: 4px; }
.fila-cd-stock input { width: 84px; padding: 8px 10px; }
.fila-cd-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.fila-cd-acciones form { display: flex; gap: 8px; margin: 0; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chip { font-style: normal; font-size: .72rem; padding: 2px 10px; border-radius: 999px; background: var(--fondo-3); box-shadow: var(--hundido-suave); color: var(--texto-suave); }
.chip-oro { color: var(--oro); }

.subida-imagen { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; margin-bottom: 20px; }
.vista-previa { padding: 10px; border-radius: 18px; }
.vista-previa img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 10px; }
.vista-previa.pequena { max-width: 140px; }
.zona-archivo {
  display: flex !important; align-items: center; justify-content: center; text-align: center; min-height: 120px;
  padding: 20px; border-radius: 18px; cursor: pointer; color: var(--texto) !important; border: 2px dashed rgba(212, 168, 74, .35);
}
.zona-archivo:hover { border-color: var(--oro); }
.zona-archivo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zona-archivo small { color: var(--texto-suave); font-weight: 400; }
.zona-archivo.con-archivo { border-style: solid; border-color: var(--verde); }

.filtros { padding: 16px 18px; margin-bottom: 26px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; }
.pestanas { display: flex; flex-wrap: wrap; gap: 8px; }
.pestanas a { padding: 8px 14px; border-radius: 999px; color: var(--texto-suave); font-size: .87rem; font-weight: 600; }
.pestanas a.activo { color: var(--oro-claro); background: var(--fondo-3); box-shadow: var(--hundido-suave); }
.pestanas small { opacity: .7; margin-left: 4px; }
.buscador { display: flex; gap: 8px; margin: 0; }
.buscador input { min-width: 230px; padding: 9px 14px; }

.direccion { padding: 16px 20px; line-height: 1.6; margin-bottom: 14px; }
.caja-accion { padding: 20px; margin-top: 18px; }
.caja-accion h3 { color: var(--oro); }
.linea-tiempo { list-style: none; padding: 0; margin: 0; }
.linea-tiempo li { position: relative; padding: 6px 0 6px 24px; color: var(--texto-suave); font-size: .9rem; }
.linea-tiempo li::before { content: ''; position: absolute; left: 4px; top: 13px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); box-shadow: 0 0 8px rgba(212, 168, 74, .6); }
.lista-stock { list-style: none; padding: 0; margin: 0 0 20px; }
.lista-stock li { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, .05); }
.copiar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 14px; }
.lista-codigo { margin: 0 0 14px; padding-left: 1.2em; }

/* ── Plazos de preparación / bajo pedido ────────────────── */
.cinta-azul { background: linear-gradient(145deg, #a9cdf0, #5d8fc4); color: #0f1d2c; }
.chip-azul { color: var(--azul); }
.plazo-tarjeta { margin: -8px 0 12px; font-size: .8rem; color: var(--texto-suave); }
.disponibilidad.pedido { color: var(--azul); }
.nota-plazo { padding: 12px 16px; font-size: .88rem; color: #cfd8e3; border-left: 3px solid var(--azul); }
.linea-plazo { font-size: .8rem !important; }
.linea-plazo.bajo-pedido { color: var(--azul) !important; }
.resumen-plazo { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin: 14px 0 6px; font-size: .88rem; color: var(--texto-suave); }
.resumen-plazo strong { color: var(--texto); font-weight: 600; }
.plazo-limite { display: inline-block; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: .82rem; background: var(--fondo-3); box-shadow: var(--hundido-suave); color: var(--texto); }
.plazo-limite.urgente { color: var(--naranja); }
.plazo-limite.retrasado { color: #fff; background: linear-gradient(145deg, #e77b6f, #b44c41); box-shadow: 0 0 12px rgba(231, 123, 111, .45); }
.fila-plazo { display: flex; align-items: end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.fila-plazo label { margin: 0; flex: 1 1 220px; }

/* ── CD + USB con el álbum en MP3 ───────────────────────── */
.usb-incluido { display: flex; align-items: center; gap: 28px; padding: clamp(18px, 3vw, 28px) clamp(20px, 4vw, 36px); margin-top: 36px; }
.usb-foto { flex: none; width: 150px; padding: 12px; border-radius: 18px; }
.usb-foto img { width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
.usb-texto h2 { margin: 0 0 6px; font-size: clamp(1.15rem, 2.5vw, 1.45rem); }
.usb-texto p { margin: 0; color: #d2ccbf; max-width: 60ch; }
.usb-texto .etiqueta-oro { margin-bottom: 10px; }
.usb-mini { display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; margin: 0 0 12px; border-radius: 12px; font-size: .8rem; color: var(--texto-suave); }
.usb-mini img { width: 46px; height: 46px; object-fit: contain; flex: none; }
.usb-mini strong { color: var(--oro); }
.usb-mini + .plazo-tarjeta { margin-top: 0; }
.vista-usb { max-width: 160px; }
.vista-usb img { aspect-ratio: auto !important; object-fit: contain !important; }

/* ── Adaptación a móvil ─────────────────────────────────── */
@media (max-width: 960px) {
  .ficha, .carrito, .rejilla-panel { grid-template-columns: minmax(0, 1fr); }
  .resumen { position: static; }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel-lateral { position: static; height: auto; padding: 14px 16px; gap: 12px; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .panel-menu { flex-direction: row; flex-wrap: wrap; gap: 6px; width: 100%; }
  .panel-menu a { padding: 8px 12px; font-size: .88rem; }
  .panel-lateral-pie { flex-direction: row; gap: 16px; margin: 0; width: 100%; }
  .fila-cd { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .fila-cd-stock, .fila-cd-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 700px) {
  .portada { grid-template-columns: minmax(0, 1fr); text-align: left; }
  .portada-disco { order: -1; }
  /* En el móvil la sección es alta: la imagen se ve entera arriba y el texto va debajo sobre fondo oscuro */
  .portada.con-fondo {
    aspect-ratio: auto;
    background:
      linear-gradient(180deg, rgba(8, 8, 9, .25) 0%, rgba(8, 8, 9, .85) 45%, rgba(8, 8, 9, .97) 100%),
      var(--fondo-portada) top center / 100% auto no-repeat,
      var(--fondo);
  }
  .disco { width: 190px; }
  .ocultar-movil { display: none; }
  .marca-texto small { display: none; }
  .marca { gap: 8px; }
  .marca-mascota { height: 48px; margin: 0; }
  .cabecera .marca-disco { width: 36px; height: 36px; }
  /* Móvil: una sola columna de CDs, tarjetas a todo el ancho */
  .rejilla-cds { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 460px; margin-left: auto; margin-right: auto; }
  .tarjeta-cd { padding: 14px; }
  .tarjeta-pie { flex-direction: column; align-items: stretch; }
  .tarjeta-pie .boton { width: 100%; }
  .linea { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .linea img { width: 60px; }
  .linea .selector-cantidad { grid-column: 2; justify-self: start; }
  .linea-importe { grid-column: 3; grid-row: 1; }
  .linea .boton-icono { grid-column: 3; grid-row: 2; justify-self: end; }
  .campos-2, .campos-3 { grid-template-columns: minmax(0, 1fr); }
  .subida-imagen { grid-template-columns: minmax(0, 1fr); }
  .vista-previa { max-width: 200px; }
  .ficha-compra .boton { flex: 1 1 100%; }
  .usb-incluido { flex-direction: column; text-align: center; }
  .usb-foto { width: 120px; }
  .usb-texto p { margin: 0 auto; }
  .buscador { width: 100%; }
  .buscador input { min-width: 0; flex: 1; }
}

/* ══ Panel · Estadísticas ══ */
.estad-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.estad-periodos { display: flex; flex-wrap: wrap; gap: 8px; }
.estad-tarjetas { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.estad-tarjetas .dato strong { font-size: 1.45rem; }
.var { display: inline-block; margin-left: 4px; font-size: .78rem; font-weight: 700; color: var(--texto-suave); }
.var.sube { color: var(--verde); }
.var.baja { color: var(--rojo); }
.estad-ideas ul { margin: 6px 0 0; padding-left: 0; list-style: none; display: grid; gap: 10px; }
.estad-ideas li { padding: 10px 14px; border-radius: var(--radio-pequeno); box-shadow: var(--hundido-suave); line-height: 1.5; }
.estad-ideas strong { color: var(--oro-claro); }
.grafica { width: 100%; height: auto; display: block; margin-top: 10px; }
.g-linea { stroke: rgba(255, 255, 255, .06); stroke-width: 1; }
.g-eje { fill: var(--texto-suave); font-size: 11px; font-family: Inter, sans-serif; }
.g-barra { fill: var(--oro); opacity: .85; }
.g-barra:hover { opacity: 1; fill: var(--oro-claro); }
.g-pedido { fill: var(--verde); stroke: #000; stroke-width: 1.5; }
.leyenda-grafica { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; font-size: .85rem; }
.muestra-barra, .muestra-pedido { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--oro); }
.muestra-pedido { border-radius: 50%; background: var(--verde); }
.embudo { display: grid; gap: 10px; margin-top: 12px; }
.embudo-paso { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 110px; gap: 14px; align-items: center; }
.embudo-barra, .barra-pista, .mini-barra { display: block; height: 14px; border-radius: 999px; box-shadow: var(--hundido-suave); overflow: hidden; }
.embudo-barra > span, .barra-pista > span, .mini-barra > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro)); }
.embudo-valor, .barra-valor { text-align: right; font-weight: 700; color: var(--oro-claro); }
.embudo-valor small, .barra-valor small { color: var(--texto-suave); font-weight: 500; margin-left: 4px; }
.barras { display: grid; gap: 9px; margin: 10px 0 6px; }
.barra-fila { display: grid; grid-template-columns: minmax(110px, 170px) minmax(0, 1fr) 96px; gap: 12px; align-items: center; font-size: .9rem; }
.barra-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-barra { display: inline-block; width: 60px; height: 8px; vertical-align: middle; margin-right: 6px; }
.estad-cd { display: flex; align-items: center; gap: 10px; color: var(--texto); }
.estad-cd img { width: 42px; height: 42px; object-fit: cover; border-radius: 8px; box-shadow: var(--relieve-suave); }
.estad-cd span { display: flex; flex-direction: column; white-space: normal; }
.estad-cd small { color: var(--texto-suave); }
.tabla-ordenable th[data-num], .tabla-ordenable td[data-valor] { text-align: right; }
.tabla-ordenable th:hover { color: var(--oro-claro); }
.estad-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.mapa-calor { display: grid; grid-template-columns: 36px repeat(24, minmax(0, 1fr)); gap: 3px; margin-top: 12px; font-size: .7rem; }
.mc-hora { color: var(--texto-suave); text-align: center; }
.mc-dia { color: var(--texto-suave); align-self: center; }
.mc-celda { aspect-ratio: 1; border-radius: 4px; background: rgba(212, 168, 74, calc(.06 + var(--i) * .94)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
.nota-privacidad { margin: 10px 0 30px; font-size: .85rem; }
@media (max-width: 900px) {
  .estad-rejilla { grid-template-columns: minmax(0, 1fr); }
  .embudo-paso { grid-template-columns: minmax(0, 1fr) 90px; }
  .embudo-barra { grid-column: 1 / -1; grid-row: 2; }
  .barra-fila { grid-template-columns: minmax(90px, 120px) minmax(0, 1fr) 84px; }
}

/* ── Banner de Música Creando Patria (portada de la tienda) ── */
.banner-musica { padding: clamp(8px, 1.2vw, 14px); margin: 0 0 clamp(26px, 4vw, 40px); border-radius: var(--radio); }
.banner-musica a { display: block; border-radius: calc(var(--radio) - 6px); overflow: hidden; box-shadow: var(--hundido-suave); transition: transform .3s ease, box-shadow .3s ease; }
.banner-musica img { display: block; width: 100%; height: auto; }
.banner-musica a:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(111, 207, 142, .5), 0 0 28px rgba(111, 207, 142, .35); }

/* ── Franja informativa de la portada (sustituye al recuadro grande) ── */
.franja-info {
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px);
  padding: 12px clamp(16px, 2.6vw, 30px);
  margin-bottom: clamp(26px, 4vw, 38px);
}
.franja-info .disco-mini {
  flex: none; width: 92px;
  box-shadow: 7px 7px 16px var(--sombra-oscura), -6px -6px 14px var(--sombra-clara);
}
.franja-info .disco-mini .disco-logo { box-shadow: 0 0 0 2px var(--oro-oscuro), 0 0 0 3px #0d0d0e, 0 0 10px rgba(0, 0, 0, .55); }
.franja-texto { min-width: 0; flex: 1 1 240px; }
@media (min-width: 1100px) { .franja-ventajas { flex-wrap: nowrap; } }
.franja-texto h1 { margin: 0; font-size: clamp(1.15rem, 2vw, 1.45rem); line-height: 1.2; }
.franja-texto p { margin: 3px 0 0; color: var(--texto-suave); font-size: .9rem; }
.franja-ventajas {
  list-style: none; margin: 0 0 0 auto; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px 22px;
}
.franja-ventajas li { display: flex; align-items: center; gap: 9px; font-weight: 500; font-size: .92rem; white-space: nowrap; }
.franja-ventajas .icono { width: 34px; height: 34px; font-size: .95rem; }
@media (max-width: 860px) {
  .franja-info { flex-wrap: wrap; }
  .franja-info .disco-mini { width: 70px; }
  .franja-texto { flex: 1; }
  .franja-ventajas { margin: 2px 0 4px; width: 100%; justify-content: flex-start; gap: 6px 14px; }
  .franja-ventajas li { font-size: .8rem; gap: 6px; }
  .franja-ventajas .icono { width: 26px; height: 26px; font-size: .8rem; }
  .franja-texto p { font-size: .82rem; }
}