/* ============================================================
   PAM26 · Black Friday — página de compra
   Misma identidad que la landing de registro (registro/styles.css): negro profundo, rosa del
   logo, Lilita One + Figtree, etiquetas festoneadas y botón 3D rosa. Pero SIMPLE: todo a la
   vista, el precio y el botón en cada tarjeta, y una barra fija abajo en el celular.
   ============================================================ */

:root {
  --negro: #0b0a0b;
  --negro-2: #141114;
  --negro-3: #1d181c;
  --linea: #2f272d;
  --rosa: #ffb3cf;
  --rosa-fuerte: #ff5fa2;
  --rosa-sombra: #c2416f;
  --texto: #f6eef2;
  --texto-2: #bfb2b9;
  --tachado: #ff7a7a;
  --oro: #f3c969;        /* solo el Pase de Oro */
  --oro-sombra: #b8892c;
  --display: "Lilita One", "Arial Rounded MT Bold", system-ui, sans-serif;
  --cuerpo: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--negro); color: var(--texto);
  font-family: var(--cuerpo); font-size: 16px; line-height: 1.5;
  overflow-x: hidden;
}
body.modo-carrito { padding-bottom: 84px; }
img { max-width: 100%; display: block; }
h1, h2, h3 { margin: 0; font-weight: 400; }
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ---------- Barra de arriba ---------- */
.barra { background: var(--rosa); color: var(--negro); text-align: center; padding: 8px 14px; font-size: 14.5px; font-weight: 600; }
.barra p { margin: 0; }

/* ---------- Cabecera: logo + título en una sola franja ---------- */
.cabeza {
  max-width: 1120px; margin: 0 auto; padding: 18px 16px 6px;
  display: flex; align-items: center; gap: 18px;
}
.logo { width: 150px; height: auto; flex: none; }
.cabeza h1 { font-family: var(--display); font-size: clamp(28px, 6vw, 42px); line-height: 1.05; color: var(--rosa); }
.cabeza-sub { margin: 4px 0 0; color: var(--texto-2); font-size: 14.5px; font-weight: 600; }

/* ---------- Botón (el de la landing) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 14px 18px;
  border: 0; border-radius: 13px;
  background: var(--rosa-fuerte); color: #fff;
  font-family: var(--display); font-size: 19px; letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 5px 0 var(--rosa-sombra), 0 12px 26px rgba(255, 95, 162, .3);
  transition: transform .12s, box-shadow .12s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--rosa-sombra); }
.btn-flecha { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, .18); font-family: var(--cuerpo); font-weight: 800; }
.btn-chico { padding: 11px 14px; font-size: 17px; box-shadow: 0 4px 0 var(--rosa-sombra); }
.btn.pendiente { opacity: .55; cursor: not-allowed; }
.btn.avisar { animation: temblor .4s; }
@keyframes temblor { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* ---------- Precios: tachado · Black · % ---------- */
.precios { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 12px; }
.precios s { color: var(--tachado); font-weight: 700; font-size: 15px; text-decoration-thickness: 2px; }
.precios strong { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1; color: var(--texto); }
.precios .off { padding: 2px 8px; border-radius: 999px; background: var(--rosa); color: var(--negro); font-weight: 800; font-size: 13px; }
.precios-grande strong { font-size: 44px; color: var(--rosa); text-shadow: 0 3px 0 var(--rosa-sombra); }

/* ---------- Noviembre Total: la tarjeta destacada ---------- */
.total {
  position: relative; margin: 14px 0 8px; padding: 16px 13px;
  background: var(--negro-2); border: 2px solid var(--rosa-fuerte); border-radius: 20px;
  display: grid; gap: 13px;
  box-shadow: 0 0 0 6px rgba(255, 95, 162, .08), 0 20px 50px rgba(255, 95, 162, .12);
}
.total-fotos { position: relative; height: 110px; }
.tf { position: absolute; top: 0; width: 26%; height: 102px; object-fit: cover; border-radius: 12px; border: 3px solid var(--negro-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.tf1 { left: 6%; transform: rotate(-9deg); }
.tf2 { left: 26%; transform: rotate(-3deg); z-index: 2; }
.tf3 { left: 48%; transform: rotate(3deg); z-index: 2; }
.tf4 { left: 68%; transform: rotate(9deg); }
.etiqueta-tag {
  display: inline-block; margin: 0 0 6px; padding: 3px 12px; border-radius: 999px;
  background: var(--negro); color: var(--rosa);
  font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
}
.total .etiqueta-tag { background: var(--rosa-fuerte); color: #fff; }
.total-titulo { font-family: var(--display); font-size: clamp(25px, 5.8vw, 38px); line-height: 1; }
.total-titulo em { font-style: normal; color: var(--rosa); }
.total-texto { margin: 4px 0 8px; color: var(--texto-2); font-size: 12.5px; }
.total .chips { gap: 5px; }
.total .chips li { font-size: 11px; padding: 3px 8px; }
.total .precios { margin: 8px 0 10px; }
.total .precios s { font-size: 13px; }
.total .precios-grande strong { font-size: 32px; }
.total .btn { font-size: 15px; padding: 10px 14px; }
.chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { padding: 4px 10px; border-radius: 999px; background: var(--negro-3); border: 1px solid var(--linea); font-size: 13.5px; font-weight: 600; }

/* ---------- Pase de Oro: un TICKET DORADO ----------
   Papel de oro metalizado, cuerpo + talón separados por una línea troquelada con las dos
   muescas del ticket (una máscara de dos círculos). El talón trae el precio y el botón.
   La sombra va en el contenedor (#oro) con drop-shadow: en .ticket la máscara la recortaría.
   15 % más chico que la primera versión (pedido del 03/11). */
.oro { margin: 16px 0 0; scroll-margin-top: 12px; filter: drop-shadow(0 16px 30px rgba(243, 201, 105, .22)); }
.ticket {
  --muesca: 13px;
  --corte: calc(100% - 142px);      /* en el celular, el troquel queda arriba del talón */
  position: relative; overflow: hidden;
  display: grid; grid-template-rows: 1fr 142px;
  color: #2b1d05;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .0) 0 14px, rgba(255, 255, 255, .07) 14px 15px),
    linear-gradient(135deg, #fbe7a1 0%, #e9bf55 28%, #fff1b8 46%, #d8a53a 64%, #f6d77c 82%, #c8962f 100%);
  border-radius: 16px;
  -webkit-mask:
    radial-gradient(circle var(--muesca) at 0 var(--corte), #0000 98%, #000) ,
    radial-gradient(circle var(--muesca) at 100% var(--corte), #0000 98%, #000);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle var(--muesca) at 0 var(--corte), #0000 98%, #000) ,
    radial-gradient(circle var(--muesca) at 100% var(--corte), #0000 98%, #000);
  mask-composite: intersect;
}
/* Marco grabado adentro del papel, como el borde de un billete */
.ticket::before {
  content: ""; position: absolute; inset: 8px; border-radius: 10px; pointer-events: none;
  border: 1.5px solid rgba(80, 52, 6, .45); outline: 1px dashed rgba(80, 52, 6, .3); outline-offset: -5px;
}
/* El brillo que cruza el oro cada pocos segundos */
.ticket::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -40%; width: 30%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); animation: brillo-oro 5s ease-in-out infinite;
}
@keyframes brillo-oro { 0%, 65% { left: -40%; } 100% { left: 130%; } }
.ticket-cuerpo { position: relative; padding: 20px 20px 12px; }
.ticket-sobre { margin: 0 0 4px; font-weight: 800; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b4a0e; }
.oro-titulo {
  font-family: var(--display); font-size: clamp(28px, 6.5vw, 40px); line-height: 1; color: #3a2606;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .6), 0 -1px 0 rgba(0, 0, 0, .15);
}
.ticket-bajada { margin: 4px 0 9px; font-size: 13px; font-weight: 600; color: #5a3e0b; }
.oro-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.oro-lista li { font-weight: 800; font-size: 13px; line-height: 1.3; padding-left: 22px; position: relative; }
.oro-lista li::before { content: "★"; position: absolute; left: 0; color: #8a5f10; }
.oro-nota { margin: 8px 0 0; font-size: 11px; font-weight: 600; color: #6b4a0e; }
/* El talón: troquel punteado arriba (celular) o a la izquierda (escritorio) */
.ticket-talon {
  position: relative; padding: 14px 20px 16px;
  border-top: 2px dashed rgba(80, 52, 6, .5);
  display: flex; flex-direction: column; justify-content: center;
}
.ticket-admite { margin: 0; font-weight: 800; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: #6b4a0e; }
.oro .precios { margin: 2px 0 10px; }
.oro .precios-grande strong { font-size: 33px; color: #2b1d05; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.oro .btn { background: #2b1d05; border: 2px solid #2b1d05; color: var(--oro); box-shadow: 0 4px 0 #120c02; font-size: 15.5px; padding: 11px 14px; }
.oro .agregar { box-shadow: none; }
.oro .agregar { background: #2b1d05; border-color: #2b1d05; color: var(--oro); font-size: 15.5px; padding: 11px 14px; }
.oro .agregar:hover { background: #3d2a08; }
.oro.en-carrito .agregar { background: #fff6d6; border-color: #2b1d05; color: #2b1d05; }
.oro.en-carrito { filter: drop-shadow(0 0 14px rgba(243, 201, 105, .6)) drop-shadow(0 16px 30px rgba(243, 201, 105, .25)); }
.sugerencia-oro { background: rgba(243, 201, 105, .12); }
.sugerencia-oro .link { color: var(--oro); }

/* ---------- Títulos de bloque ---------- */
.titulo {
  display: flex; align-items: center; gap: 10px; margin: 34px 0 14px;
  font-family: var(--display); font-size: clamp(26px, 6vw, 34px); color: var(--texto);
}
.titulo span {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--rosa); color: var(--negro); font-size: 24px;
}

/* ---------- Combos: etiqueta festoneada (la de la landing), compacta ---------- */
.combos { display: grid; gap: 22px; }
.etiqueta {
  background: var(--negro-3); border: 1.5px solid var(--linea); border-top: 0;
  border-radius: 0 0 20px 20px; display: flex; flex-direction: column;
}
.etiqueta-cabeza {
  display: flex; align-items: center; gap: 12px; padding: 20px 16px 14px;
  background: var(--rosa); color: var(--negro);
  -webkit-mask: radial-gradient(10px at 50% 0, #0000 98%, #000) 50% / 20px 100% repeat-x;
  mask: radial-gradient(10px at 50% 0, #0000 98%, #000) 50% / 20px 100% repeat-x;
}
.etiqueta-cabeza h3 { font-family: var(--display); font-size: clamp(24px, 5.8vw, 29px); line-height: 1; }
.etiqueta-lema { margin: 4px 0 0; font-weight: 600; font-size: 12px; line-height: 1.3; }
.etiqueta-lema b { font-weight: 800; }
.mini-fotos { flex: none; display: grid; grid-template-columns: repeat(2, 41px); gap: 4px; }
.mini-fotos img { width: 41px; height: 41px; object-fit: cover; border-radius: 9px; border: 2px solid var(--negro); }
/* Cada combo con su color y el mismo peso: el 1 en rosa fuerte, el 2 en vino (el realce de la
   paleta de Pame). Los dos saturados, para que ninguno grite más que el otro. */
.etiqueta-combo1 .etiqueta-cabeza { background: var(--rosa-fuerte); color: #fff; }
.etiqueta-combo2 .etiqueta-cabeza { background: #a8325f; color: #fff; }
.etiqueta-combo1 .etiqueta-tag { background: #fff; color: var(--rosa-fuerte); }
.etiqueta-combo2 .etiqueta-tag { background: #fff; color: #a8325f; }
.etiqueta-combo1 .mini-fotos img, .etiqueta-combo2 .mini-fotos img { border-color: #fff; }
.etiqueta-combo1 h3 { text-shadow: 0 3px 0 var(--rosa-sombra); }
.etiqueta-combo2 h3 { text-shadow: 0 3px 0 #6e1d3d; }
.incluye { padding: 0 16px; border-bottom: 2px dashed var(--linea); }
.incluye summary { cursor: pointer; padding: 10px 0; font-size: 14.5px; font-weight: 700; color: var(--rosa); list-style: none; }
.incluye summary::-webkit-details-marker { display: none; }
.incluye summary::after { content: " ▾"; }
.incluye[open] summary::after { content: " ▴"; }
.incluye ul { margin: 0 0 12px; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
.incluye li { font-size: 13px; font-weight: 600; }
.incluye li::before { content: "✓ "; color: var(--rosa-fuerte); font-weight: 800; }
/* "Ver qué incluye" en el Pase de Oro y en Noviembre Total: sin el borde ni el margen de los combos */
.incluye.incluye-grande { padding: 0; border-bottom: 0; }
.incluye-grande summary { padding: 4px 0 6px; }
.incluye-grande ul { margin: 2px 0 4px; }
.incluye-grande .oro-lista { display: grid; grid-template-columns: none; }
.incluye-grande .chips { display: flex; grid-template-columns: none; }
.incluye-grande .chips li::before, .incluye-grande .oro-lista li::before { content: none; }
.oro .incluye-grande summary { color: #3a2606; }
.oro .incluye-grande .oro-lista li::before { content: "★"; color: #8a5f10; }
.oro .incluye-grande .oro-lista li { font-weight: 800; }
.etiqueta-pie { padding: 4px 16px 16px; }
.etiqueta .precios { margin: 8px 0 10px; }
.etiqueta .precios s { font-size: 13.5px; }
.etiqueta .precios strong { font-size: 25px; }
.etiqueta .btn { font-size: 17px; padding: 12px 16px; }
.combos { gap: 20px; }

/* ---------- Cursos sueltos: uno debajo del otro, como los combos ----------
   Tarjeta horizontal: foto a la izquierda, nombre en el medio, precio y botón a la derecha
   (en el celular, el precio y el botón bajan debajo del nombre). */
.cursos { display: grid; gap: 10px; }
.curso {
  display: flex; align-items: stretch;
  background: var(--negro-3); border: 1.5px solid var(--linea); border-radius: 14px; overflow: hidden;
}
.curso-foto { flex: none; width: 95px; height: 116px; object-fit: cover; }
.curso-cuerpo { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; }
.curso h3 { font-family: var(--display); font-size: 18px; line-height: 1.1; }
.curso-bajada { margin: 2px 0 0; color: var(--texto-2); font-size: 12.5px; line-height: 1.3; }
.curso .precios { margin: 6px 0 8px; gap: 3px 8px; }
.curso .precios s { font-size: 13px; }
.curso .precios strong { font-size: 20px; }
.curso .precios .off { font-size: 11px; padding: 1px 7px; }
.curso .btn-chico { font-size: 14.5px; padding: 9px 12px; border-width: 1.5px; }

/* ---------- Botón "Agregar al carrito": en contorno, para que el único lleno sea "Comprar ahora" ---------- */
.agregar { background: transparent; color: var(--rosa); border: 2px solid var(--rosa-fuerte); box-shadow: none; }
.agregar:hover { background: rgba(255, 95, 162, .12); }
.agregar:active { transform: translateY(1px); box-shadow: none; }
.agregar .a-si { display: none; }
.en-carrito .agregar { background: var(--rosa); border-color: var(--rosa); color: var(--negro); }
.en-carrito .agregar .a-no { display: none; }
.en-carrito .agregar .a-si { display: inline; }
.curso.en-carrito, .etiqueta.en-carrito { border-color: var(--rosa-fuerte); }
.total.en-carrito { box-shadow: 0 0 0 6px rgba(255, 95, 162, .25), 0 20px 50px rgba(255, 95, 162, .2); }

/* ---------- El carrito, al final de la página ---------- */
.carrito {
  margin: 34px 0 0; padding: 22px 18px; scroll-margin-top: 12px;
  background: var(--negro-2); border: 2px dashed var(--rosa); border-radius: 22px;
}
.carrito-titulo { font-family: var(--display); font-size: 30px; color: var(--rosa); margin-bottom: 10px; }
.carrito-vacio { margin: 0; color: var(--texto-2); }
.carrito-vacio b { color: var(--texto); }
.carrito-lista { list-style: none; margin: 0; padding: 0; }
.carrito-lista li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed var(--linea); }
.carrito-lista span { flex: 1; min-width: 0; font-weight: 700; }
.carrito-lista b { white-space: nowrap; }
.quitar {
  flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--linea);
  background: transparent; color: var(--texto-2); font-size: 18px; line-height: 1; cursor: pointer;
}
.quitar:hover { border-color: var(--rosa); color: var(--rosa); }
.sugerencia { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(255, 95, 162, .12); font-size: 15px; }
.link { background: none; border: 0; padding: 0; color: var(--rosa); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }
.carrito-total { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 0; }
.carrito-total span { flex: 1; font-family: var(--display); font-size: 22px; }
.carrito-total s { color: var(--tachado); font-weight: 700; }
.carrito-total strong { font-family: var(--display); font-weight: 400; font-size: 38px; color: var(--rosa); text-shadow: 0 3px 0 var(--rosa-sombra); }
.carrito-ahorro { margin: 2px 0 14px; text-align: right; color: var(--texto-2); font-weight: 700; font-size: 14.5px; }
.btn-comprar { font-size: 22px; padding: 17px 22px; }
.carrito-msg { margin: 10px 0 0; text-align: center; color: #ff8a8a; font-weight: 600; }
.carrito-msg:empty { display: none; }

/* ---------- Pie ---------- */
.pie { text-align: center; padding: 40px 16px 20px; color: var(--texto-2); font-size: 14px; }
.pie img { margin: 0 auto 8px; width: 110px; height: auto; opacity: .8; }
.pie p { margin: 0; }

/* ---------- Barra fija abajo (celular) ---------- */
.fija {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: none; align-items: center; gap: 12px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: rgba(20, 17, 20, .96); border-top: 1px solid var(--linea);
  backdrop-filter: blur(8px);
}
.fija.visible { display: flex; }
.fija-texto { flex: 1; min-width: 0; line-height: 1.2; }
.fija-texto b { display: block; font-family: var(--display); font-weight: 400; font-size: 18px; color: var(--rosa); }
.fija-texto span { font-weight: 800; font-size: 15px; }
.fija .btn { width: auto; flex: none; padding: 11px 22px; }

/* ---------- Escritorio ---------- */
@media (min-width: 760px) {
  .logo { width: 210px; }
  .total { grid-template-columns: 1fr 1.15fr; align-items: center; padding: 21px; gap: 21px; }
  .total-fotos { height: 190px; }
  .tf { width: 42%; height: 168px; }
  .tf1 { left: 0; } .tf2 { left: 19%; } .tf3 { left: 38%; } .tf4 { left: 57%; }
  .total .btn { max-width: 310px; }
  /* Escritorio: talón a la derecha; el troquel y las muescas pasan a ser verticales */
  .ticket {
    grid-template-rows: none; grid-template-columns: 1fr 270px;
    -webkit-mask:
      radial-gradient(circle var(--muesca) at calc(100% - 270px) 0, #0000 98%, #000) ,
      radial-gradient(circle var(--muesca) at calc(100% - 270px) 100%, #0000 98%, #000);
    -webkit-mask-composite: source-in;
    mask:
      radial-gradient(circle var(--muesca) at calc(100% - 270px) 0, #0000 98%, #000) ,
      radial-gradient(circle var(--muesca) at calc(100% - 270px) 100%, #0000 98%, #000);
    mask-composite: intersect;
  }
  .ticket-cuerpo { padding: 23px 27px; }
  .ticket-talon { border-top: 0; border-left: 2px dashed rgba(80, 52, 6, .5); padding: 22px 25px; }
  .carrito { max-width: 640px; margin-left: auto; margin-right: auto; padding: 28px 30px; }
  .fija { justify-content: center; }
  .fija-texto { flex: 0 1 auto; margin-right: 18px; }
  .combos { grid-template-columns: 1fr 1fr; }
  .curso-foto { width: 128px; height: 95px; }
  .curso-cuerpo { flex-direction: row; align-items: center; gap: 17px; padding: 12px 17px; }
  .curso-nombre { flex: 1; min-width: 0; }
  .curso .precios { margin: 0; flex-wrap: nowrap; }
  .curso .btn { width: auto; flex: none; min-width: 128px; }
}
@media (max-width: 759px) {
  .cabeza { gap: 12px; }
  .logo { width: 124px; }
}
@media (max-width: 380px) {
  .curso-foto { width: 80px; height: 116px; }
  .curso .precios strong { font-size: 18px; }
  .btn-chico { font-size: 15px; padding: 10px; }
  .logo { width: 116px; }
}
/* ---------- Celular compacto (pedido del 03/11) ----------
   Menos scroll sin perder la jerarquía: Pase de Oro y Noviembre Total > combos > cursos.
   Lo que más ahorra: precio y botón en la MISMA línea en las tarjetas grandes y en los combos. */
@media (max-width: 759px) {
  .cabeza { padding: 12px 16px 2px; }
  .logo { width: 96px; }
  .cabeza h1 { font-size: 26px; }
  .barra { font-size: 13px; padding: 6px 12px; }

  /* Pase de Oro: talón bajo, con precio y botón lado a lado */
  .oro { margin-top: 12px; }
  .ticket { grid-template-rows: 1fr 68px; --corte: calc(100% - 68px); --muesca: 10px; }
  .ticket::before { inset: 6px; }
  .ticket-cuerpo { padding: 13px 15px 8px; }
  .ticket-sobre { font-size: 9px; margin-bottom: 1px; }
  .oro-titulo { font-size: 22px; }
  .ticket-bajada { font-size: 11px; margin: 2px 0 5px; }
  .oro-lista { gap: 2px; }
  .oro-lista li { font-size: 11px; padding-left: 15px; }
  .oro-nota { font-size: 9px; margin-top: 4px; }
  .ticket-talon { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; }
  .ticket-admite { display: none; }
  .oro .precios { margin: 0; }
  .oro .precios-grande strong { font-size: 23px; }


  /* Noviembre Total: abanico bajo, chips mínimos, precio y botón lado a lado */
  .total { margin-top: 10px; padding: 9px 12px 10px; gap: 5px; border-radius: 14px; }
  .total-fotos { height: 47px; }
  .tf { height: 45px; width: 21%; border-width: 2px; border-radius: 9px; }
  .tf1 { left: 14%; } .tf2 { left: 31%; } .tf3 { left: 48%; } .tf4 { left: 65%; }
  .total .etiqueta-tag { font-size: 10px; padding: 2px 9px; margin-bottom: 3px; }
  .total-titulo { font-size: 20px; }
  .total-texto { font-size: 10px; margin: 2px 0 5px; }
  .total .chips { gap: 4px; }
  .total .chips { gap: 3px; }
  .total .chips li { font-size: 9.5px; padding: 1px 6px; }
  .compra-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
  /* el tachado arriba del precio, para que entre al lado del botón largo */
  .total .precios { margin: 0; flex-direction: column; align-items: flex-start; gap: 0; white-space: nowrap; }
  .total .precios strong { line-height: 1; }
  .total .precios s { font-size: 11px; }
  .total .precios-grande strong { font-size: 21px; }
  .total .precios .off { display: none; }
  /* Los botones de las dos tarjetas grandes: más largos, del mismo ancho y alineados igual */
  .oro .btn { width: 168px; max-width: 54%; flex: none; font-size: 14.5px; padding: 10px 12px; box-shadow: 0 3px 0 #120c02; }
  .total .btn { width: 152px; max-width: 50%; flex: none; font-size: 13.5px; padding: 8px 12px; }

  /* Títulos de bloque más bajos */
  .titulo { margin: 18px 0 8px; font-size: 20px; }
  .titulo span { width: 28px; height: 28px; font-size: 17px; }

  /* Combos: cabecera más baja y precio + botón en una línea */
  .combos { gap: 10px; }
  .etiqueta-cabeza { padding: 13px 12px 8px; gap: 8px; }
  .etiqueta-cabeza h3 { font-size: 17px; }
  .etiqueta-tag { font-size: 9.5px; padding: 1px 8px; margin-bottom: 2px; }
  .etiqueta-lema { font-size: 10px; margin-top: 2px; }
  .mini-fotos { grid-template-columns: repeat(2, 26px); gap: 3px; }
  .mini-fotos img { width: 26px; height: 26px; border-radius: 7px; }
  .incluye { padding: 0 12px; }
  .incluye summary { padding: 5px 0; font-size: 12px; }
  .incluye li { font-size: 12px; }
  .etiqueta-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px 9px; }
  .etiqueta .precios { margin: 0; flex-wrap: nowrap; gap: 6px; }
  .etiqueta .precios s { font-size: 11px; }
  .etiqueta .precios strong { font-size: 18px; }
  .etiqueta .precios .off { font-size: 10.5px; padding: 1px 6px; }
  .etiqueta .btn { width: auto; flex: none; font-size: 14.5px; padding: 10px 18px; }

  /* Cursos: los más chicos de la página */
  .cursos { gap: 7px; }
  .curso-foto { width: 68px; height: 84px; }
  .curso-cuerpo { padding: 7px 9px; }
  .curso h3 { font-size: 14.5px; }
  .curso-bajada { font-size: 10.5px; }
  .curso .precios { margin: 3px 0 5px; }
  .curso .precios s { font-size: 10.5px; }
  .curso .precios strong { font-size: 16px; }
  .curso .btn-chico { font-size: 12.5px; padding: 6px 9px; box-shadow: 0 3px 0 var(--rosa-sombra); }
  /* precio y botón en la misma línea, debajo del nombre */
  /* nombre y precio a la izquierda; el botón a la derecha, centrado en el alto de la tarjeta */
  .curso-cuerpo { display: grid; grid-template-columns: 1fr auto; align-content: center; column-gap: 10px; }
  .curso-nombre { grid-column: 1; grid-row: 1; min-width: 0; }
  .curso .precios { grid-column: 1; grid-row: 2; }
  .curso .btn { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
  .curso .precios { margin: 4px 0 0; flex-wrap: nowrap; gap: 5px; }
  .curso .precios .off { display: none; }
  .curso .btn-chico { width: auto; margin: 0; font-size: 14px; padding: 9px 15px; }
  .curso-foto { height: 72px; }
  .curso .btn-flecha, .etiqueta .btn-flecha { width: 22px; height: 22px; font-size: 13px; }
  .oro .btn-flecha, .total .btn-flecha { width: 22px; height: 22px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }