/* ================================
   ESTILOS SBOP FRONTEND
   ================================ */

/* ===== SBOP — LEGACY (BASE · PRO LAYOUT) ===== */
.sbop-card.sbop-style-legacy{
  --media-w: 340px;

  position: relative;
  border: 1px solid #e5e7eb;               /* gris limpio */
  border-radius: 14px;
  padding: 18px 18px 20px;
  margin: 20px 0;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  color: #1f2937;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout unificado */
  display: grid;
  grid-template-columns: var(--media-w) 1fr;   /* izq imagen | der features */
  grid-template-areas:
    "title   title"
    "media   features"
    "legend  features"
    "desc    desc"
    "actions actions";
  column-gap: 24px;
  row-gap: 10px;
}

/* ===== Título (Legacy · fila completa y centrado) ===== */
.sbop-card.sbop-style-legacy .sbop-title,
.sbop-card.sbop-style-legacy .sbop-header,
.sbop-card.sbop-style-legacy > :is(h2,h3,.wp-block-heading){
  grid-area: title !important;          /* usa el área "title" del grid */
  grid-column: 1 / -1 !important;       /* ocupa todo el ancho */
  display: block !important;
  width: 100% !important;
  justify-self: center !important;

  margin: 0 0 10px !important;
  text-align: center !important;

  font-weight: 800;                   /* negritas */
  line-height: 1.25;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); /* ~18–22px responsive */
  letter-spacing: .2px;
  color: #0f172a;
}

/* Neutraliza alineaciones que Gutenberg meta en el heading */
.sbop-card.sbop-style-legacy > .wp-block-heading.has-text-align-left,
.sbop-card.sbop-style-legacy > .wp-block-heading.has-text-align-right{
  text-align: center !important;
}

/* ===== Media / Imagen ===== */
.sbop-card.sbop-style-legacy .sbop-media{
  grid-area: media; width: var(--media-w);
  border-radius: 12px; overflow: hidden; background:#f3f4f6;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}
.sbop-card.sbop-style-legacy .sbop-media img{ width:100%; height:auto; display:block; object-fit:cover; }
/* si la plantilla usa .sbop-img o <img> suelto */
.sbop-card.sbop-style-legacy .sbop-img,
.sbop-card.sbop-style-legacy > img{
  grid-area: media; width: var(--media-w); border-radius: 12px; display:block;
}

/* ===== CORTESÍA — Legacy (bajo la imagen, a la izquierda) ===== */
.sbop-card.sbop-style-legacy .sbop-credit,
.sbop-card.sbop-style-legacy .sbop-legend,
.sbop-card.sbop-style-legacy .sbop-img-legend{
  grid-area: legend !important;
  display: block !important;
  justify-self: start !important;
  align-self: start !important;
  margin-top: 6px;
  color: #6b7280;            /* gris elegante */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}


/* ===== Características (derecha) ===== */
.sbop-card.sbop-style-legacy .sbop-features,
.sbop-card.sbop-style-legacy .sbop-specs{ grid-area: features; align-self: start; }
.sbop-card.sbop-style-legacy .sbop-features ul,
.sbop-card.sbop-style-legacy .sbop-specs{ margin: 6px 0 10px; padding-left: 18px; }
.sbop-card.sbop-style-legacy .sbop-features li,
.sbop-card.sbop-style-legacy .sbop-specs li{ margin: .28rem 0; }
/* si tu legacy quitaba viñetas, las restauramos discretas */
.sbop-card.sbop-style-legacy .sbop-specs{ list-style: disc; }

/* ===== Descripción (Legacy · centrada como Glass, con fallback) ===== */
.sbop-card.sbop-style-legacy .sbop-desc,
.sbop-card.sbop-style-legacy > p:first-of-type{
  grid-area: desc !important;
  justify-self: center !important;   /* centra dentro del grid */
  align-self: start;

  width: min(780px, 100%);
  margin: 6px auto 8px;              /* centra en el eje X */
  text-align: left;

  padding: .8rem 1rem;
  border-radius: 12px;
  line-height: 1.28;
  color: #111827;
  background: linear-gradient(180deg, #f9fafb, #f3f4f6 60%, #e5e7eb);
  border: 1px solid #e6e9ef;
  outline: 1px solid rgba(17,24,39,.05);
  box-shadow: inset 0 1px 0 #fff, 0 4px 10px rgba(0,0,0,.05);

  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}

/* Etiqueta “Descripción:” solo cuando existe la clase .sbop-desc */
.sbop-card.sbop-style-legacy .sbop-desc::before{
  content: "Descripción: ";
  font-weight: 800;
  letter-spacing: .02em;
  margin-right: .4rem;
}

/* ===== Botones (mantén tu azul) ===== */
.sbop-card.sbop-style-legacy .sbop-actions,
.sbop-card.sbop-style-legacy .sbop-buttons{
  grid-area: actions;
  display: flex; gap: 10px; flex-wrap: wrap;
  justify-self: start; align-self: start;    /* alineados a la izquierda (como Metálico) */
}
.sbop-card.sbop-style-legacy .sbop-btn{
  display:inline-block;
  background:#0073aa;
  color:#fff; text-decoration:none;
  padding:.72rem 1.05rem;
  border-radius:999px;
  font-size:.92rem; font-weight:700;
  border: 1px solid #cfe5f6;
  box-shadow: 0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .15s, filter .15s;
}
.sbop-card.sbop-style-legacy .sbop-btn:hover{
  background:#005c87;
  transform: translateY(-1px);
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .sbop-card.sbop-style-legacy{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "media"
      "legend"
      "desc"
      "features"
      "actions";
  }
  .sbop-card.sbop-style-legacy .sbop-media,
  .sbop-card.sbop-style-legacy .sbop-img,
  .sbop-card.sbop-style-legacy > img{
    justify-self: center; width: 100%; max-width: 560px;
  }
  .sbop-card.sbop-style-legacy .sbop-desc{ max-width: 95%; }
}
@media (max-width: 560px){
  .sbop-card.sbop-style-legacy .sbop-btn{ display:block; width:max-content; margin:10px 0 0 0; }
}

/* ===== SBOP — GLASS (PRO, layout unificado) ===== */

/* Card cristal azul */
.sbop-card.sbop-style-glass{
  position: relative;
  isolation: isolate;
  border-radius: 20px;
  padding: 20px;
  margin: 24px 0;

  /* Cristal vivo */
  background: linear-gradient(180deg, rgba(120,180,255,.26), rgba(120,180,255,.14));
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);

  /* Vidrio: borde + halo */
  border: 1px solid rgba(255,255,255,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 16px 38px rgba(0,0,0,.18),
    0 0 34px rgba(120,170,255,.26);

  /* === LAYOUT (igual que el de los otros skins) === */
  --media-w: 340px;
  display: grid;
  grid-template-columns: var(--media-w) 1fr;      /* izq: imagen  | der: features */
  grid-template-areas:
    "title   title"                               /* 1) título ancho */
    "media   features"                            /* 2) imagen | características */
    "legend  features"                            /* 3) cortesía bajo imagen | características */
    "desc    desc"                                /* 4) descripción centrada */
    "actions actions";                            /* 5) botones centrados */
  column-gap: 24px;
  row-gap: 14px;
}

/* Reflejo superior */
.sbop-card.sbop-style-glass::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:28%;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(to bottom, rgba(255,255,255,.35), rgba(255,255,255,0));
  pointer-events:none; z-index:0;
}
/* todo el contenido por encima del reflejo */
.sbop-card.sbop-style-glass > *{ position: relative; z-index:1; }

/* ===== TÍTULO (centrado como los demás) ===== */
.sbop-card.sbop-style-glass .sbop-title,
.sbop-card.sbop-style-glass > :is(h1,h2,h3,h4,.wp-block-heading){
  grid-area:title !important;
  margin:0 0 6px;
  text-align:center;
  color:#121527;
  font-weight:900;
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  letter-spacing:.3px;
}

/* ===== IMAGEN ===== */
.sbop-card.sbop-style-glass .sbop-media{ grid-area:media; width:var(--media-w); border-radius:14px; overflow:hidden; background:rgba(0,0,0,.06); box-shadow:0 12px 26px rgba(0,0,0,.20); }
.sbop-card.sbop-style-glass .sbop-media img{ width:100%; height:auto; object-fit:cover; display:block; }
/* por si la imagen viene suelta como hijo directo */
.sbop-card.sbop-style-glass > img{ grid-area:media; width:var(--media-w); border-radius:14px; display:block; }

/* ===== CORTESÍA — Glass (bajo la imagen, a la izquierda) ===== */
.sbop-card.sbop-style-glass .sbop-credit,
.sbop-card.sbop-style-glass .sbop-legend,
.sbop-card.sbop-style-glass .sbop-img-legend{
  grid-area: legend !important;
  display: block !important;
  justify-self: start !important;
  align-self: start !important;
  margin-top: 8px;

  /* estilos propios de Glass */
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  color: #51607b;            /* gris azulado suave */
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ===== CARACTERÍSTICAS (derecha) ===== */
.sbop-card.sbop-style-glass .sbop-features{ grid-area:features; align-self:start; }
.sbop-card.sbop-style-glass .sbop-features ul{ margin:6px 0 10px; padding-left:16px; color:#151a2d; }
.sbop-card.sbop-style-glass .sbop-features li{ margin:.35rem 0; }

/* Captura listas sueltas (Gutenberg) y envíalas a “features” */
.sbop-card.sbop-style-glass > :is(ul,ol,.wp-block-list),
.sbop-card.sbop-style-glass :is(.wp-block-group,.wp-block-columns) > :is(ul,ol,.wp-block-list){
  grid-area:features !important; margin:0; padding-left:16px;
}

/* ===== PÍLDORA (mismo morado pero 1 paso más suave) ===== */
.sbop-card.sbop-style-glass .sbop-desc{
  grid-area:desc !important;
  justify-self:center; align-self:start;
  width:100%; max-width:760px;
  margin:8px 0 6px; text-align:left;

  border-radius:14px; padding:.78rem 1rem; color:#fff;
  background: linear-gradient(180deg, #8f7dff, #6a58e6);  /* +suave que antes */
  border:1px solid rgba(255,255,255,.55);
  box-shadow: inset 0 0 10px rgba(255,255,255,.10), 0 2px 10px rgba(0,0,0,.10);
}
.sbop-card.sbop-style-glass .sbop-desc::before{
  content:"Descripción: ";
  font-weight:800; letter-spacing:.02em; margin-right:.4rem;
}

/* ===== BOTONES (Glass · como Legacy, hover gris oscuro y sutil) ===== */
.sbop-card.sbop-style-glass .sbop-actions,
.sbop-card.sbop-style-glass .sbop-buttons{
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-start;  /* igual que Legacy */
  justify-self: start;
  align-self: start;
  margin: 10px 0 6px;
}

.sbop-card.sbop-style-glass .sbop-btn{
  position: relative;            /* para el velo de hover */
  overflow: hidden;              /* recorta el velo */
  display: inline-block;
  min-width: 150px;
  padding: .78rem 1.15rem;
  border-radius: 999px;
  margin-block: 4px;
  text-align: center;
  font-weight: 800;
  text-decoration: none;
  color: #101431;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
  transition: transform .14s ease, box-shadow .14s ease;
}

/* velo gris oscuro (no altera tus colores base) */
.sbop-card.sbop-style-glass .sbop-btn::after{
  content: "";
  position: absolute; inset: 0;
  background: transparent;
  transition: background .14s ease;
}

/* Hover PRO: leve levantamiento y velo en gris oscuro */
.sbop-card.sbop-style-glass .sbop-btn:hover{
  transform: translateY(-1px);                          /* sutil */
  box-shadow: 0 3px 12px rgba(0,0,0,.16);
}
.sbop-card.sbop-style-glass .sbop-btn:hover::after{
  background: rgba(31, 41, 55, .18);                    /* gris oscuro */
}

/* Variantes (colores intactos) */
.sbop-card.sbop-style-glass .sbop-btn--violet{
  color:#fff;
  background: linear-gradient(180deg, #8b6cff, #5b48db);
  border-color: rgba(255,255,255,.85);
}
.sbop-card.sbop-style-glass .sbop-btn--blue{
  color:#0f1833;
  background: linear-gradient(180deg, #cfe0ff, #9fbcff);
  border-color: rgba(255,255,255,.95);
}


/* ===== Responsive (mismo orden) ===== */
@media (max-width: 860px){
  .sbop-card.sbop-style-glass{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "media"
      "legend"
      "desc"
      "features"
      "actions";
    row-gap:12px;
  }
  .sbop-card.sbop-style-glass .sbop-media{ justify-self:center; width:100%; max-width:560px; aspect-ratio:16 / 9; }
  .sbop-card.sbop-style-glass .sbop-desc{ max-width:680px; }
}

/* ===== SBOP — LAYS/ROSA (PRO) ===== */
.sbop-card.sbop-style-rose{
  /* Identidad rosa */
  --rose-50: #fff1f7;
  --rose-100:#ffe4ef;
  --rose-200:#ffc8dd;
  --rose-300:#ffa8d6;
  --rose-500:#f472b6;
  --rose-600:#db2777;
  --ink:#2a1020;

  position:relative; isolation:isolate;
  border-radius:16px; padding:18px 18px 20px; color:var(--ink);
  background:
    linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0)) 0 0/100% 26% no-repeat,
    radial-gradient(120% 140% at -10% 120%, rgba(255,168,214,.25), transparent 60%),
    radial-gradient(120% 140% at 100% -10%, rgba(255,200,221,.25), transparent 60%),
    linear-gradient(160deg, var(--rose-50), var(--rose-100));
  border:1px solid rgba(255,0,128,.18);
  box-shadow: 0 10px 26px rgba(255,0,128,.08), 0 12px 28px rgba(0,0,0,.07);

  /* Layout (igual que metálico) */
  --media-w: 340px;
  display:grid;
  grid-template-columns: var(--media-w) 1fr;          /* izq imagen | der características */
  grid-template-areas:
    "title   title"
    "media   features"
    "legend  features"
    "desc    desc"
    "actions actions";
  column-gap:24px;
  row-gap:10px;
}

/* ===== Lays/Rosa — Título centrado (span completo, área propia) ===== */
.sbop-card.sbop-style-rose .sbop-title,
.sbop-card.sbop-style-rose > h2,
.sbop-card.sbop-style-rose > h3,
.sbop-card.sbop-style-rose > .wp-block-heading{
  grid-area: title !important;       /* ← mapea a la fila 'title' */
  grid-column: 1 / -1 !important;    /* ← ocupa TODAS las columnas */
  justify-self: center !important;   /* ← centra la caja del heading */
  width: 100%;
  margin: 0 0 10px;

  text-align: center !important;     /* ← centra el texto */
  font-weight: 800;
  line-height: 1.25;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem); /* h2/h3 consistente */
  letter-spacing: .2px;
}

/* IMAGEN */
.sbop-card.sbop-style-rose .sbop-media{ grid-area:media; width:var(--media-w); border-radius:14px; overflow:hidden; background:#fff4f8; box-shadow:0 10px 20px rgba(0,0,0,.08); }
.sbop-card.sbop-style-rose .sbop-media img{ display:block; width:100%; height:auto; object-fit:cover; }
.sbop-card.sbop-style-rose > img{ grid-area:media; width:var(--media-w); border-radius:14px; display:block; }

/* LEYENDA (CORTESÍA) — bajo la imagen */
.sbop-card.sbop-style-rose .sbop-credit,
.sbop-card.sbop-style-rose .sbop-legend,
.sbop-card.sbop-style-rose .sbop-img-legend{
  grid-area: legend !important;
  display: block;
  justify-self: start !important;   /* izquierda */
  align-self: start !important;      /* pegada bajo la imagen */
  margin-top: 8px;
  color:#7a345f; font-weight:700; letter-spacing:.02em;
}


/* FEATURES derecha */
.sbop-card.sbop-style-rose .sbop-features{ grid-area:features; align-self:start; }
.sbop-card.sbop-style-rose .sbop-features ul{ margin:0; padding-left:18px; }
.sbop-card.sbop-style-rose .sbop-features li{ margin:.28rem 0; }

/* Captura listas sueltas (Gutenberg) y envíalas a “features” */
.sbop-card.sbop-style-rose > :is(ul,ol,.wp-block-list),
.sbop-card.sbop-style-rose :is(.wp-block-group,.wp-block-columns) > :is(ul,ol,.wp-block-list){
  grid-area:features !important; margin:0; padding-left:18px;
}

/* ===== Lays/Rosa — Descripción (rectángulo redondeado, centrada) ===== */
.sbop-card.sbop-style-rose .sbop-desc{
  grid-area: desc !important;
  justify-self: center; align-self: start;
  width: min(780px,100%);                 /* centrada y con ancho máximo */
  margin: 6px auto 8px; text-align: left;

  padding: .82rem 1.05rem;
  border-radius: 14px;                     /* ← ya NO es píldora */
  line-height: 1.28; color:#2b1022;

  /* tus colores/efectos intactos */
  background:
    linear-gradient(180deg, #fff 0%, rgba(255,255,255,.65) 58%),
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.35), rgba(255,255,255,0) 60%),
    linear-gradient(160deg, #ffe7f1, #ffd1e6 60%, #ffc1de);
  border:1px solid #ffd3e7;
  outline:1px solid rgba(200,60,150,.15);
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px rgba(255,0,128,.08);

  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}
.sbop-card.sbop-style-rose .sbop-desc::before{
  content:"Descripción: ";
  font-weight:800; letter-spacing:.02em; margin-right:.4rem;
}

/* ===== Lays/Rosa — Botones (posición como Legacy) ===== */
.sbop-card.sbop-style-rose .sbop-actions,
.sbop-card.sbop-style-rose .sbop-buttons{
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  justify-content: flex-start;   /* a la izquierda, igual que Legacy */
  justify-self: start;
  align-self: start;

  margin: 10px 0 6px;
}

/* ===== Base simple (sin 3D, sin outline, sin overlay) ===== */
.sbop-card.sbop-style-rose .sbop-buttons a,
.sbop-card.sbop-style-rose .sbop-buttons button,
.sbop-card.sbop-style-rose .sbop-btn{
  display: inline-block;
  padding: .72rem 1.05rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: #fff;

  border: 0;                     /* ← quitamos borde */
  outline: 0;                    /* ← quitamos outline/relieve */
  box-shadow: 0 2px 8px rgba(0,0,0,.10);   /* sombra limpia y plana */
  transition: filter .12s ease, transform .12s ease, box-shadow .12s ease;
}

/* Hover PRO: gris oscuro sutil + micro-lift */
.sbop-card.sbop-style-rose .sbop-buttons a:hover,
.sbop-card.sbop-style-rose .sbop-buttons button:hover,
.sbop-card.sbop-style-rose .sbop-btn:hover{
  filter: brightness(.93);                 /* “velo” gris oscuro sutil */
  transform: translateY(-1px);             /* lift mínimo (no salta) */
  box-shadow: 0 4px 10px rgba(0,0,0,.16);
}

/* ===== Colores (se mantienen iguales) ===== */
.sbop-card.sbop-style-rose .sbop-btn--primary,
.sbop-card.sbop-style-rose .sbop-buttons .sbop-btn--amazon{
  background: linear-gradient(180deg, #fb79b1, #db2777);
}
.sbop-card.sbop-style-rose .sbop-btn--secondary,
.sbop-card.sbop-style-rose .sbop-buttons .sbop-btn--ml{
  background: linear-gradient(180deg, #c084fc, #7c3aed);
}

/* Fallback: si no traen clase, 1º fucsia / 2º morado (sin cambios) */
.sbop-card.sbop-style-rose .sbop-buttons > a:first-child:not([class*="sbop-btn--"]){
  background: linear-gradient(180deg, #fb79b1, #db2777);
}
.sbop-card.sbop-style-rose .sbop-buttons > a:nth-child(2):not([class*="sbop-btn--"]){
  background: linear-gradient(180deg, #c084fc, #7c3aed);
}

/* Responsive (mismo orden que metálico/neón) */
@media (max-width: 860px){
  .sbop-card.sbop-style-rose{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "media"
      "legend"
      "desc"
      "features"
      "actions";
  }
  .sbop-card.sbop-style-rose .sbop-media{ justify-self:center; max-width:560px; }
  .sbop-card.sbop-style-rose .sbop-desc{ max-width:95%; }
}
@media (max-width: 560px){
  .sbop-card.sbop-style-rose .sbop-buttons a,
  .sbop-card.sbop-style-rose .sbop-buttons .sbop-btn,
  .sbop-card.sbop-style-rose .wp-block-buttons .wp-block-button__link{
    display:block; width:max-content; margin:10px 0 0 0;
  }
}

/* ==== SBOP — NEÓN (FINAL) ==== */
/* Base + layout metálico 1:1 (sin cambiar tus colores/efectos) */
.sbop-card.sbop-style-neon{
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  padding: 20px;
  margin: 24px 0;
  background:
    radial-gradient(120% 140% at 20% 0%, rgba(0,180,255,.10), transparent 60%),
    radial-gradient(120% 140% at 100% 100%, rgba(167,139,250,.10), transparent 60%),
    #161b29;
  color: #eef4ff;
  box-shadow: 0 18px 42px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.06);
  overflow: hidden;

  /* LAYOUT */
  --media-w: 340px;
  display: grid;
  grid-template-columns: var(--media-w) 1fr;   /* izq imagen | der features */
  grid-template-areas:
    "title   title"
    "media   features"
    "legend  features"
    "desc    desc"
    "actions actions";
  column-gap: 24px;
  row-gap: 10px;
}

/* ===== TÍTULO (centrado) ===== */
.sbop-card.sbop-style-neon .sbop-title,
.sbop-card.sbop-style-neon > :is(h1,h2,h3,h4,.wp-block-heading){
  grid-area: title !important;
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: .5px;
  color: #e0f7ff;
  text-shadow:
    0 0 6px rgba(56,189,248,.6),
    0 0 12px rgba(167,139,250,.5),
    0 0 20px rgba(56,189,248,.25);
  text-align: center;            /* ← centrado */
  justify-self: center;          /* ← centra el bloque en la grilla */
  width: 100%;
}

/* ===== IMAGEN ===== */
.sbop-card.sbop-style-neon .sbop-media{ grid-area: media; width: var(--media-w); position: relative; border-radius: 14px; overflow: hidden; }
.sbop-card.sbop-style-neon .sbop-media img{ display:block; width:100%; height:auto; object-fit:cover; }
.sbop-card.sbop-style-neon > img{ grid-area: media; width: var(--media-w); border-radius: 14px; display:block; }

/* ===== CORTESÍA / LEYENDA (bajo la imagen; sin cambiar color) ===== */
.sbop-card.sbop-style-neon .sbop-img-legend,
.sbop-card.sbop-style-neon .sbop-legend,
.sbop-card.sbop-style-neon .sbop-credit{
  grid-area: legend !important;
  display: block;
  justify-self: start !important;   /* izquierda */
  align-self: start !important;      /* pegada bajo la imagen */
  margin-top: 8px;
  /* Nota: no tocamos color/estilo tipográfico para conservar el del bestseller */
}


/* ===== CARACTERÍSTICAS (derecha) ===== */
.sbop-card.sbop-style-neon .sbop-features{ grid-area: features; align-self: start; }
.sbop-card.sbop-style-neon .sbop-features ul{ margin:0; padding-left:18px; }
.sbop-card.sbop-style-neon .sbop-features li{ margin:.28rem 0; }

/* Captura listas sueltas (Gutenberg) y las manda a “features” */
.sbop-card.sbop-style-neon > :is(ul,ol,.wp-block-list),
.sbop-card.sbop-style-neon :is(.wp-block-group,.wp-block-columns) > :is(ul,ol,.wp-block-list){
  grid-area: features !important; margin:0; padding-left:18px;
}

/* ===== PÍLDORA MORADA (centrada) ===== */
.sbop-card.sbop-style-neon .sbop-desc{
  grid-area: desc !important;
  margin: 6px auto 8px; text-align: left;
  width: max-content; max-width: min(880px, 100%);
  justify-self: center; align-self: start;

  /* tus estilos de color/efecto intactos */
  padding: 10px 12px;
  border-radius: 12px;
  color: #f2eaff;
  background: linear-gradient(180deg, rgba(167,139,250,.22), rgba(167,139,250,.12));
  border: 1px solid rgba(167,139,250,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 16px rgba(0,0,0,.22);
}

/* Etiqueta dentro de la píldora – NEÓN */
.sbop-card.sbop-style-neon .sbop-desc::before{
  content: "Descripción: ";
  font-weight: 800;
  letter-spacing: .02em;
  margin-right: .4rem;
}


/* ===== NEÓN — BOTONES (misma posición que Metálico) ===== */
.sbop-card.sbop-style-neon .sbop-actions,
.sbop-card.sbop-style-neon .sbop-buttons{
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  /* ← igual que Metálico */
  justify-content: flex-start;
  justify-self: start;
  align-self: start;

  margin: 10px 0 6px;
}

/* Base de botones (mantén colores; permitimos hover/lift) */
.sbop-card.sbop-style-neon .sbop-buttons a,
.sbop-card.sbop-style-neon .sbop-buttons button,
.sbop-card.sbop-style-neon .sbop-btn{
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: .2px;
  text-decoration: none;

  color: #fff !important;
  border: 1px solid rgba(255,255,255,.14);

  /* permitir efectos suaves */
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  transform: translateY(0);
  transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}

/* Colores NEÓN (se conservan) */
.sbop-card.sbop-style-neon .sbop-buttons .sbop-btn--primary,
.sbop-card.sbop-style-neon .sbop-buttons .sbop-btn--amazon,
.sbop-card.sbop-style-neon .sbop-btn.sbop-btn--primary,
.sbop-card.sbop-style-neon .sbop-btn.sbop-btn--amazon{
  background: linear-gradient(180deg, #38bdf8, #0ea5e9) !important;
  border-color: rgba(56,189,248,.6) !important;
}

.sbop-card.sbop-style-neon .sbop-buttons .sbop-btn--secondary,
.sbop-card.sbop-style-neon .sbop-buttons .sbop-btn--ml,
.sbop-card.sbop-style-neon .sbop-btn.sbop-btn--secondary,
.sbop-card.sbop-style-neon .sbop-btn.sbop-btn--ml{
  background: linear-gradient(180deg, #a78bfa, #6d28d9) !important;
  border-color: rgba(167,139,250,.6) !important;
}

/* Fallback por posición (1º azul, 2º morado) */
.sbop-card.sbop-style-neon .sbop-buttons > a:first-child:not([class*="sbop-btn--"]),
.sbop-card.sbop-style-neon .sbop-actions  > a:first-child:not([class*="sbop-btn--"]){
  background: linear-gradient(180deg, #38bdf8, #0ea5e9) !important;
  border-color: rgba(56,189,248,.9) !important;
}
.sbop-card.sbop-style-neon .sbop-buttons > a:nth-child(2):not([class*="sbop-btn--"]),
.sbop-card.sbop-style-neon .sbop-actions  > a:nth-child(2):not([class*="sbop-btn--"]){
  background: linear-gradient(180deg, #a78bfa, #6d28d9) !important;
  border-color: rgba(167,139,250,.9) !important;
}

/* Hover PRO: velo gris oscuro + lift sutil (sin cambiar el color base) */
.sbop-card.sbop-style-neon .sbop-buttons a:hover,
.sbop-card.sbop-style-neon .sbop-buttons button:hover,
.sbop-card.sbop-style-neon .sbop-btn:hover{
  filter: brightness(.93);                 /* gris oscuro sutil */
  transform: translateY(-1px);             /* lift mínimo */
  box-shadow: 0 4px 10px rgba(0,0,0,.18);
}

/* Active / Focus (suaves, sin salto) */
.sbop-card.sbop-style-neon .sbop-buttons a:active,
.sbop-card.sbop-style-neon .sbop-buttons button:active,
.sbop-card.sbop-style-neon .sbop-btn:active{
  transform: translateY(0);
  filter: brightness(.98);
}
.sbop-card.sbop-style-neon .sbop-buttons a:focus-visible,
.sbop-card.sbop-style-neon .sbop-buttons button:focus-visible,
.sbop-card.sbop-style-neon .sbop-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,.18), 0 0 0 4px rgba(56,189,248,.35);
}

/* ===== Responsive (mismo orden que metálico) ===== */
@media (max-width: 860px){
  .sbop-card.sbop-style-neon{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "media"
      "legend"
      "desc"
      "features"
      "actions";
  }
  .sbop-card.sbop-style-neon .sbop-media{ justify-self:center; max-width:560px; }
  .sbop-card.sbop-style-neon .sbop-desc{ max-width:95%; }
}
@media (max-width: 560px){
  .sbop-card.sbop-style-neon .sbop-buttons a,
  .sbop-card.sbop-style-neon .sbop-buttons .sbop-btn,
  .sbop-card.sbop-style-neon .wp-block-buttons .wp-block-button__link{
    display:block; width:max-content; margin:10px 0 0 0;
  }
}

/* ===== SBOP — METÁLICO PRO (Bestseller consolidado) ===== */
.sbop-card.sbop-style-metal{
  /* Tokens */
  --metal-50:#f4f6f8; --metal-200:#d9dee6; --metal-300:#c6cbd6; --metal-500:#98a1b3; --metal-700:#5b6272; --metal-900:#232832;
  --r:20px; --shadow-sm:0 8px 22px rgba(0,0,0,.16); --media-w:340px;

  /* Caja y fondo */
  position:relative; isolation:isolate; border-radius:var(--r); padding:18px 18px 20px; color:#0f1320;
  background:
    linear-gradient(to bottom,rgba(255,255,255,.35),rgba(255,255,255,0)) 0 0/100% 28% no-repeat,
    conic-gradient(from 210deg at 30% 25%,rgba(255,255,255,.35),rgba(255,255,255,0) 35%,rgba(0,0,0,.08) 55%,rgba(255,255,255,.25) 75%,rgba(255,255,255,0) 100%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.035) 1px 4px),
    linear-gradient(160deg,var(--metal-300),var(--metal-500) 45%,var(--metal-700) 95%),
    radial-gradient(80% 120% at 90% 10%,rgba(0,0,0,.12),transparent 60%);
  border:1px solid rgba(255,255,255,.35); outline:1px solid rgba(0,0,0,.10); box-shadow:var(--shadow-sm);

  /* LAYOUT: 2 columnas arriba + filas anchas abajo */
  display:grid;
  grid-template-columns: var(--media-w) 1fr;           /* izq imagen | der características */
  grid-template-areas:
    "title   title"     /* 1) Título ancho */
    "media   features"  /* 2) Imagen | Características */
    "legend  features"  /* 3) Cortesía bajo imagen | Características */
    "desc    desc"      /* 4) Descripción ancho */
    "actions actions";  /* 5) Botones ancho */
  column-gap:24px;
  row-gap:10px;
}

/* Hover caja (sin lift) */
.sbop-card.sbop-style-metal:hover{
  box-shadow: var(--shadow-sm); /* o 0 12px 28px rgba(0,0,0,.20) si te gustaba */
  transform: none;
}

/* ===== Header / Título — mapeado a la fila completa y centrado ===== */
.sbop-card.sbop-style-metal .sbop-title,
.sbop-card.sbop-style-metal .sbop-header,
.sbop-card.sbop-style-metal > :is(h1,h2,h3,h4,.wp-block-heading){
  grid-area: title !important;
  grid-column: 1 / -1 !important;
  display: block !important;
  width: 100% !important;
  justify-self: center !important;

  margin: 0 0 10px !important;
  text-align: center !important;

  font-weight: 900;
  line-height: 1.25;
  font-size: clamp(1.125rem, 2.2vw, 1.375rem);
  letter-spacing: .2px;
  color:#0d1325;
  text-shadow:0 1px 0 rgba(255,255,255,.35),0 1px 12px rgba(255,255,255,.2);
}
/* Neutraliza alineaciones de Gutenberg en el heading */
.sbop-card.sbop-style-metal > .wp-block-heading.has-text-align-left,
.sbop-card.sbop-style-metal > .wp-block-heading.has-text-align-right{
  text-align: center !important;
}

/* ===== Media ===== */
.sbop-card.sbop-style-metal .sbop-media{ grid-area:media; width:var(--media-w); position:relative; border-radius:14px; overflow:hidden; background:rgba(0,0,0,.06); box-shadow:0 10px 20px rgba(0,0,0,.18); }
.sbop-card.sbop-style-metal .sbop-media img{ display:block; width:100%; height:auto; object-fit:cover; }
/* Si la imagen viene suelta */
.sbop-card.sbop-style-metal > img{ grid-area:media; width:var(--media-w); border-radius:14px; display:block; }

/* ===== Leyenda (Cortesía) — forzada bajo la imagen (texto simple) ===== */
.sbop-card.sbop-style-metal .sbop-credit,
.sbop-card.sbop-style-metal .sbop-legend,
.sbop-card.sbop-style-metal .sbop-img-legend{
  /* Posición en el grid */
  grid-area: legend !important;
  display: block;

  /* Alineaciones debajo de la imagen */
  justify-self: start;
  align-self: start;

  /* Estilo de texto (reset sin píldora) */
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;

  /* Tipografía */
  margin-top: 8px;
  color: #2a3142;
  font-weight: 700;
  letter-spacing: .02em;
}


/* ===== Características (derecha siempre) ===== */
.sbop-card.sbop-style-metal .sbop-features{ grid-area:features; align-self:start; }
.sbop-card.sbop-style-metal .sbop-features ul{ margin:0; padding-left:18px; }
.sbop-card.sbop-style-metal .sbop-features li{ margin:.28rem 0; }

/* Captura listas sueltas/Gutenberg a “features” */
.sbop-card.sbop-style-metal > :is(ul,ol,.wp-block-list),
.sbop-card.sbop-style-metal :is(.wp-block-group,.wp-block-columns) > :is(ul,ol,.wp-block-list){
  grid-area:features !important; margin:0; padding-left:18px;
}

/* Perímetro suave de la columna de características */
.sbop-card.sbop-style-metal .sbop-features,
.sbop-card.sbop-style-metal > :is(.wp-block-list, ul, ol),
.sbop-card.sbop-style-metal :is(.wp-block-group, .wp-block-columns) > :is(ul, ol, .wp-block-list){
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  border-left: 1px solid rgba(255,255,255,.25);
  border-radius: 10px;
  padding-left: 20px;
}

/* ===== Descripción — rectángulo redondeado, centrada ===== */
.sbop-card.sbop-style-metal .sbop-desc,
.sbop-card.sbop-style-metal > p:first-of-type,
.sbop-card.sbop-style-metal > :is(.wp-block-group,.wp-block-paragraph,div,section):has(> .sbop-desc){
  grid-area:desc !important;
  justify-self:center; align-self:start;
  width:max-content; max-width:min(880px,100%);
  margin:6px auto 8px; text-align:left;

  padding:.82rem 1.05rem;
  border-radius:14px;                /* ← ya NO es píldora */
  line-height:1.28; color:#2a1f00;

  /* Mantén tu acabado metálico-dorado */
  background:
    linear-gradient(180deg, rgba(255,255,255,.45), rgba(255,255,255,0) 58%),
    radial-gradient(120% 140% at 15% 0%, rgba(255,255,255,.25), rgba(255,255,255,0) 60%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 1px, rgba(0,0,0,.08) 1px 3px),
    linear-gradient(160deg, #ffebb0, #ffd95a 50%, #d6a800 96%);
  border:1px solid rgba(255,255,255,.70);
  outline:1px solid rgba(120,90,0,.35);
  box-shadow:none; filter:none; transform:none;

  overflow-wrap:anywhere; word-break:break-word; hyphens:auto;
}
.sbop-card.sbop-style-metal .sbop-desc::before,
.sbop-card.sbop-style-metal :is(.sbop-badge,.sbop-meta,li,ul)+p::before,
.sbop-card.sbop-style-metal p:first-of-type::before{
  content:"Descripción: "; font-weight:800; letter-spacing:.02em; margin-right:.4rem;
}

/* ===== Botones (fila centrada, botones a la izquierda — igual al ancho de la descripción) ===== */
.sbop-card.sbop-style-metal .sbop-actions,
.sbop-card.sbop-style-metal .sbop-buttons{
  grid-area: actions;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  /* La fila se centra dentro de la tarjeta… */
  justify-self: center;
  width: 100%;
  max-width: 780px;         /* mismo ancho visual que la .sbop-desc */
  margin: 10px auto 6px;

  /* …pero los botones arrancan a la izquierda dentro de esa fila */
  justify-content: flex-start;
  align-self: start;
}

/* Botones propios o de Gutenberg (mantén tu estilo actual) */
.sbop-card.sbop-style-metal .sbop-btn,
.sbop-card.sbop-style-metal > .wp-block-buttons .wp-block-button__link{
  display: inline-block;
  margin: 0 10px 0 0;
  padding: .72rem 1.05rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  color: #0f162a;
  background: linear-gradient(180deg,#d9dee6,#f4f6f8);
  border: 1px solid rgba(255,255,255,.7);
  outline: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 2px 8px rgba(0,0,0,.12), inset 0 1px 0 rgba(255,255,255,.65);
  transition: transform .15s, filter .15s;
}
.sbop-card.sbop-style-metal .sbop-btn:hover,
.sbop-card.sbop-style-metal > .wp-block-buttons .wp-block-button__link:hover{
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Si vienen envueltos en .wp-block-buttons, aplica el mismo contenedor centrado */
.sbop-card.sbop-style-metal > .wp-block-buttons{
  grid-area: actions !important;
  display: flex; flex-wrap: wrap; gap: 12px;
  justify-content: flex-start;   /* a la izquierda dentro del bloque */
  justify-self: center;          /* bloque centrado como la desc */
  width: 100%; max-width: 780px;
  margin: 10px auto 6px;
}
.sbop-card.sbop-style-metal > .wp-block-buttons .wp-block-button{
  margin-right: 10px;
}

/* ===== Responsive ===== */
@media (max-width: 860px){
  .sbop-card.sbop-style-metal{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "media"
      "legend"
      "desc"
      "features"
      "actions";
  }
  .sbop-card.sbop-style-metal .sbop-desc{ max-width:95%; }
}
@media (max-width: 560px){
  .sbop-card.sbop-style-metal .sbop-btn,
  .sbop-card.sbop-style-metal > .wp-block-buttons .wp-block-button__link{
    display:block; width:max-content; margin:10px 0 0 0;
  }
}

/* ===== Fallback UNIVERSAL (todos los estilos) =====
   Aplica el layout 2 columnas y contiene la imagen
   cuando la card NO tiene wrappers (.sbop-body).   */

/* 2 columnas para cualquier sbop-style-* sin wrappers */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)){
  display: grid;
  grid-template-columns: 340px 1fr;
  column-gap: 24px;
  row-gap: 14px;
  align-items: start;
}

/* La primera imagen actúa como MEDIA contenida */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > img:first-of-type{
  grid-column: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: 0 12px 26px rgba(0,0,0,.20);
  justify-self: start;
}

/* Todo lo demás a la derecha */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > :not(img):not(.sbop-header){
  grid-column: 2;
}

/* Píldora centrada a ancho legible y botones abajo con separación */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-desc,
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-actions{
  grid-column: 1 / -1;
}
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-actions{
  display: flex;
  gap: 14px;
  justify-content: end;
  margin: 10px 0;
}
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-btn{
  min-width: 150px;
  border-radius: 999px;
  padding: .78rem 1.15rem;
  margin-block: 4px;
}

/* MÓVIL: apilar, imagen 16:9, botones centrados */
@media (max-width: 860px){
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)){
    grid-template-columns: 1fr;
  }
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > img:first-of-type{
    aspect-ratio: 16 / 9;
  }
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > :not(img):not(.sbop-header){
    grid-column: 1;
  }
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-actions{
    justify-content: center;
  }
}

/* ===== Overrides de colocación (después del fallback) ===== */

/* Título (o header) a lo ancho arriba */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-header,
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-title,
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > h1,
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > h2,
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) > h3{
  grid-column: 1 / -1;
}

/* “CORTESIA” (badge) debajo de la imagen, a la izquierda */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-badge{
  grid-column: 1;
  justify-self: start;
  margin-top: 6px;
}

/* Lista de características a la derecha */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-specs{
  grid-column: 2;
}

/* Píldora de descripción centrada y de ancho legible */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-desc{
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 760px;
  margin: 10px 0 6px;
}

/* Botones: fila inferior, alineados a la derecha en desktop */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-actions{
  grid-column: 1 / -1;
  justify-content: end;
  gap: 14px;
  margin: 12px 0;
}

/* Móvil: apilar y centrar botones */
@media (max-width: 860px){
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-badge,
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-specs{
    grid-column: 1;
  }
  .sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-actions{
    justify-content: center;
  }
}

/* Forzar características al lado derecho de la imagen */
.sbop-card[class*="sbop-style-"]:not(:has(.sbop-body)) .sbop-specs{
  grid-column: 2;          /* ocupa la segunda columna */
  align-self: start;       /* que inicie al nivel de la imagen */
  margin-top: 0;           /* evitar separación innecesaria */
}

/* ===== SBOP: Layout genérico 2 columnas para TODOS los estilos ===== */
/* Imagen IZQ + contenido DER sin necesidad de wrappers (.sbop-body/.sbop-media) */

.sbop-card[class*="sbop-style-"]{
  display: grid;
  grid-template-columns: 360px 1fr;
  column-gap: 24px;
  align-items: start;
}

/* Título arriba a lo ancho (si existe) */
.sbop-card[class*="sbop-style-"] > h1,
.sbop-card[class*="sbop-style-"] > h2,
.sbop-card[class*="sbop-style-"] > h3,
.sbop-card[class*="sbop-style-"] .sbop-header,
.sbop-card[class*="sbop-style-"] .sbop-title{
  grid-column: 1 / -1;
}

/* Marco de imagen uniforme (si usas <img> suelto) */
.sbop-card[class*="sbop-style-"] > img{
  grid-column: 1;
  width: 360px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  display: block;
  object-fit: cover;
}

/* Si tienes un contenedor .sbop-media, úsalo igual como columna 1 */
.sbop-card[class*="sbop-style-"] .sbop-media{
  grid-column: 1;
  width: 360px;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  overflow: hidden;
}
.sbop-card[class*="sbop-style-"] .sbop-media img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Badge “CORTESIA” debajo de la imagen, a la izquierda */
.sbop-card[class*="sbop-style-"] .sbop-badge{
  grid-column: 1;
  justify-self: start;
  margin-top: 6px;
}

/* Especificaciones a la DERECHA */
.sbop-card[class*="sbop-style-"] .sbop-specs{ grid-column: 2; }

/* Píldora/Descripción centrada y legible */
.sbop-card[class*="sbop-style-"] .sbop-desc{
  grid-column: 1 / -1;
  justify-self: center;
  width: 100%;
  max-width: 760px;
  margin: 10px 0 6px;
}

/* Botones al final, alineados a la derecha con buen respiro */
.sbop-card[class*="sbop-style-"] .sbop-actions{
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap;
  justify-content: end;
  gap: 14px;
  margin: 12px 0;
}
.sbop-card[class*="sbop-style-"] .sbop-btn{ margin-block: 4px; }

/* ===== Responsive: apilar en móvil ===== */
@media (max-width: 860px){
  .sbop-card[class*="sbop-style-"]{
    grid-template-columns: 1fr;
    row-gap: 12px;
  }
  .sbop-card[class*="sbop-style-"] > img,
  .sbop-card[class*="sbop-style-"] .sbop-media{
    grid-column: 1;
    width: 100%;
    aspect-ratio: 16 / 9;  /* se ve mejor en móvil */
  }
  .sbop-card[class*="sbop-style-"] .sbop-specs{ grid-column: 1; }
  .sbop-card[class*="sbop-style-"] .sbop-actions{ justify-content: center; }
}
