/*
 * product-blocks.css — El diseño de los bloques de la ficha de producto.
 *
 * Lo dibuja includes/product_blocks.php. Este archivo es el ÚNICO lugar donde
 * vive el aspecto de las fichas: cambiar acá un color o un espaciado alcanza a
 * todos los productos a la vez, que es la razón de ser de todo el sistema.
 *
 * Se carga sólo en las fichas que usan bloques (ver producto.php), igual que ya
 * se hace con electric-border.css.
 *
 * Los colores salen de las variables de la tienda (:root en main-*.css):
 * --orange, --white, --border. Las de acá abajo son los grises intermedios que
 * ese :root no tiene; van con prefijo --ds- y acotadas a .rich-content para no
 * ensuciar la paleta global.
 */
.rich-content{
  --ds-ink-2:   #a29c96;   /* texto secundario, con una pizca de cálido */
  --ds-ink-3:   #6d6862;   /* rótulos y epígrafes */
  --ds-surface: #1c1b1a;   /* fondo de las cajas de adentro de la ficha */
  --ds-ok:      #5fd39a;
  --ds-off:     #57524d;
}

/* Ritmo vertical entre bloques. Son hermanos sueltos dentro de .modal-desc,
   así que el aire va por margen y no por gap. */
.rich-content .ds-highlights,
.rich-content .ds-pitch,
.rich-content .ds-blk,
.rich-content .ds-meter-row,
.rich-content .ds-banner,
.rich-content .ds-note{ margin:22px 0 }
.rich-content .ds-highlights:first-child,
.rich-content .ds-pitch:first-child,
.rich-content .ds-blk:first-child{ margin-top:0 }

/* Rótulo de bloque ("Fortalezas", "Ficha técnica", "Detalles del producto").
   ES el título de la sección, así que lleva exactamente el mismo tratamiento
   que los <h2> de la descripción (ver producto.php): mismo tamaño, mismo peso,
   misma línea fina encima y el mismo aire repartido —mucho arriba, poco abajo—.
   Cuando era un renglón gris de 11px, un bloque quedaba anunciado más chico que
   el capítulo de al lado y se leía como una nota al pie de la sección anterior
   en vez de como una sección propia.
   La línea va en el rótulo y no en .ds-blk a propósito: un bloque sin título no
   tiene que arrastrar una raya suelta que no separa nada. */
.rich-content .ds-label{
  font-size:19px; font-weight:900; line-height:1.2; letter-spacing:.055em;
  text-transform:uppercase; color:var(--white);
  margin:0 0 18px; padding-top:34px; border-top:1px solid var(--border);
}
/* El primero abre la descripción: la línea de .pdp-desc ya está justo encima. */
.rich-content>.ds-blk:first-child .ds-label{ padding-top:0; border-top:0 }
@media (max-width:640px){
  .rich-content .ds-label{ font-size:17px; margin-bottom:16px; padding-top:26px }
}

/* ── El banner de características. Siempre arriba. ────────────────────── */
.rich-content .ds-highlights{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(108px,1fr));
  gap:1px; background:#ff5c0026; border:1px solid #ff5c003d;
  border-radius:14px; overflow:hidden;
}
.rich-content .ds-h{
  background:linear-gradient(180deg,#1d1108 0%,#160f0b 100%);
  padding:15px 17px; display:flex; flex-direction:column; gap:7px;
}
.rich-content .ds-h-n{
  font-size:26px; font-weight:800; line-height:1; letter-spacing:-.03em;
  color:var(--white); font-variant-numeric:tabular-nums;
}
/* El primer dato es el que define la compra del rubro: va en naranja. */
.rich-content .ds-h:first-child .ds-h-n{ color:var(--orange) }
.rich-content .ds-h-n small{ font-size:13px; font-weight:600; color:var(--ds-ink-2); margin-left:2px }
/* margin-top:auto empuja el rótulo al piso de la celda. Sin esto, una etiqueta
   que ocupa dos renglones ("Elementos de corte") estira su celda y deja a las
   vecinas con el rótulo flotando a media altura: la franja se lee como cuatro
   cajas sueltas en vez de como una sola. */
.rich-content .ds-h-l{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ds-ink-3); line-height:1.35; margin-top:auto;
}

/* ── El gancho ─────────────────────────────────────────────────────────── */
.rich-content .ds-pitch{ font-size:15.5px; line-height:1.6; color:var(--white) }
.rich-content .ds-pitch p:last-child{ margin-bottom:0 }

/* ── Ficha técnica ─────────────────────────────────────────────────────── */
.rich-content .ds-specs{ width:100%; border-collapse:collapse; font-size:14px }
.rich-content .ds-specs tr{ border-top:1px solid var(--border) }
.rich-content .ds-specs tr:first-child{ border-top:0 }
.rich-content .ds-specs th{
  text-align:left; font-weight:500; color:var(--ds-ink-2);
  padding:10px 16px 10px 0; white-space:nowrap; width:1%;
}
.rich-content .ds-specs td{
  padding:10px 0; color:var(--white); font-weight:500; font-variant-numeric:tabular-nums;
}

/* ── Medidor sobre escala declarada ────────────────────────────────────── */
.rich-content .ds-meter-row{ display:grid; gap:6px }
.rich-content .ds-meter-top{ display:flex; justify-content:space-between; align-items:baseline; gap:12px }
.rich-content .ds-meter-k{ font-size:13.5px; color:var(--ds-ink-2) }
.rich-content .ds-meter-v{
  font-size:13.5px; font-weight:700; color:var(--white); font-variant-numeric:tabular-nums;
}
.rich-content .ds-track{ height:7px; background:#ffffff0d; border-radius:4px; overflow:hidden }
.rich-content .ds-fill{ height:100%; background:var(--orange); border-radius:4px }
.rich-content .ds-meter-note{ font-size:12px; color:var(--ds-ink-3) }

/* ── Comparativa contra los pares ──────────────────────────────────────── */
/* Ancho acotado. La ficha ocupa 1180px en escritorio y una barra de ese largo
   deja de leerse como una barra: es una línea que cruza la pantalla y hay que
   barrer la vista de punta a punta para saber si una es más larga que otra. Lo
   que se compara entra en un golpe de vista o no se compara. */
.rich-content .ds-compare{ display:flex; flex-direction:column; gap:2px; max-width:820px }
.rich-content .ds-crow{
  display:grid; grid-template-columns:minmax(120px,168px) 1fr 62px; gap:14px;
  align-items:center; padding:6px 8px; margin:0 -8px; border-radius:8px;
}
.rich-content .ds-crow:hover{ background:#ffffff08 }
.rich-content .ds-cname{ font-size:13px; color:var(--ds-ink-2); line-height:1.3 }
.rich-content .ds-crow.is-this .ds-cname{ color:var(--white); font-weight:600 }
/* El extremo redondeado va sólo del lado del dato; el otro nace en la línea
   de base, que es de donde se lee la magnitud.
   Barra fina a propósito: lo que se compara es el LARGO. Con 12px de alto la
   barra pesaba como un bloque de color y las cinco filas se leían como un
   gráfico de barras de informe; a 7px vuelve a ser una regla graduada y la
   diferencia entre un set y otro se ve de un vistazo. */
.rich-content .ds-cbar{ height:7px; border-radius:0 4px 4px 0; background:var(--ds-surface) }
.rich-content .ds-crow.is-this .ds-cbar{ background:var(--orange) }
.rich-content .ds-cval{
  font-size:13px; font-weight:600; text-align:right; color:var(--ds-ink-2);
  font-variant-numeric:tabular-nums;
}
.rich-content .ds-crow.is-this .ds-cval{ color:var(--white) }
/* Con miniaturas. La columna extra la agrega el PHP sólo cuando hay alguna
   foto que poner (ver .con-foto en pb_render_compare), así que una comparativa
   escrita a mano contra la competencia sigue saliendo igual que siempre. */
.rich-content .ds-compare.con-foto .ds-crow{
  grid-template-columns:30px minmax(110px,168px) 1fr 56px; gap:11px;
}
.rich-content .ds-cimg{
  width:30px; height:30px; margin:0; border-radius:7px; object-fit:contain;
  background:var(--ds-surface); border:1px solid var(--border); display:block;
}
/* El hueco de una fila sin foto: mismo tamaño, sin borde, para que no parezca
   una foto que no cargó. */
.rich-content span.ds-cimg{ border-color:transparent; background:#ffffff08 }
.rich-content .ds-crow.is-this .ds-cimg{ border-color:#ff5c0059 }

/* ── Compatibilidad ────────────────────────────────────────────────────── */
.rich-content .ds-compat{
  display:flex; flex-direction:column; gap:1px; background:var(--border);
  border:1px solid var(--border); border-radius:12px; overflow:hidden;
}
.rich-content .ds-fit{
  display:flex; align-items:center; gap:11px; background:var(--dark2);
  padding:11px 15px; font-size:14px;
}
/* Sí y no se distinguen por SÍMBOLO y por la palabra escrita, no sólo por
   color: en el celular, a las apuradas, el color solo no alcanza. */
.rich-content .ds-fit-ico{
  flex:0 0 18px; height:18px; display:grid; place-items:center;
  border-radius:50%; font-size:11px; font-weight:700;
}
.rich-content .ds-fit.yes .ds-fit-ico{ background:#5fd39a1f; color:var(--ds-ok) }
.rich-content .ds-fit.no  .ds-fit-ico{ background:#ffffff0d; color:var(--ds-off) }
.rich-content .ds-fit-m{ color:var(--white) }
.rich-content .ds-fit.no .ds-fit-m{ color:var(--ds-ink-3) }
.rich-content .ds-fit-s{
  margin-left:auto; font-size:12px; color:var(--ds-ink-3); white-space:nowrap;
}

/* ── Radar de perfil de uso ────────────────────────────────────────────── */
.rich-content .ds-radar{ display:flex; gap:24px; align-items:center; flex-wrap:wrap }
.rich-content .ds-radar svg{ flex:0 0 auto; max-width:100%; height:auto; overflow:visible }
.rich-content .ds-radar-grid polygon{ stroke:#ffffff1f; stroke-width:1 }
.rich-content .ds-radar-edge{ stroke:#ffffff33; stroke-width:1 }
.rich-content .ds-radar-spoke path{ stroke:#ffffff1a; stroke-width:1 }
.rich-content .ds-radar-area{ fill:#ff5c0033; stroke:var(--orange); stroke-width:2; stroke-linejoin:round }
.rich-content .ds-radar-dot circle{ fill:var(--orange) }
.rich-content .ds-radar-label text{ fill:var(--ds-ink-2); font-size:11.5px; font-family:inherit }
/* Los valores también en texto: un gráfico que sólo se puede leer mirándolo
   deja afuera a quien usa lector de pantalla. */
.rich-content .ds-radar-legend{ display:flex; flex-direction:column; gap:7px; min-width:150px }
.rich-content .ds-radar-legend div{
  display:flex; justify-content:space-between; gap:14px; font-size:13.5px; color:var(--ds-ink-2);
}
.rich-content .ds-radar-legend b{ color:var(--white); font-variant-numeric:tabular-nums }

/* ── Qué viene en la caja ──────────────────────────────────────────────── */
.rich-content .ds-box{ background:var(--ds-surface); border-radius:14px; padding:17px 19px }
.rich-content .ds-box ul{
  margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px;
}
.rich-content .ds-box li{
  display:flex; gap:10px; font-size:14px; color:var(--white); align-items:flex-start; margin:0;
}
.rich-content .ds-box li::before{
  content:""; flex:0 0 5px; height:5px; border-radius:50%;
  background:var(--orange); margin-top:8px;
}

/* ── Detalles del fabricante. Siempre abajo. ───────────────────────────── */
.rich-content .ds-details{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px;
}
.rich-content .ds-details figure{ margin:0; display:flex; flex-direction:column; gap:9px }
/* Gana en especificidad sobre `.rich-content img` de producto.php, que le
   metería un margen de 12px y redondeo de 10 a cada foto. */
/* Marco cuadrado y foto CONTENIDA, no recortada — la misma decisión que ya
   tomó product-square.css para la grilla, y por el mismo motivo: las fotos del
   fabricante son cuadradas y traen su explicación impresa arriba o abajo.
   Con `cover` sobre un marco 4:3, lo primero que se cortaba era justamente ese
   texto. */
.rich-content .ds-details img{
  width:100%; aspect-ratio:1/1; object-fit:contain; margin:0;
  border:1px solid var(--border); border-radius:12px; background:var(--dark);
}
.rich-content .ds-details figcaption{ font-size:13px; line-height:1.45; color:var(--ds-ink-2) }
.rich-content .ds-details figcaption b{
  display:block; color:var(--white); font-weight:600; margin-bottom:2px;
}
.rich-content .ds-credit{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ds-ink-3); margin-top:14px;
}

/* ── El recorrido por los detalles: foto y explicación, en zigzag ───────── */
/* Igual que la comparativa, el recorrido no usa los 1180px de la ficha. A ancho
   completo la foto salía de 520px de lado —más grande que la foto principal del
   producto— y el párrafo de al lado quedaba flotando en el medio de un vacío,
   con renglones de cien caracteres que nadie termina. */
.rich-content .ds-story{ display:flex; flex-direction:column; gap:30px; max-width:920px }
.rich-content .ds-scene{
  display:grid; grid-template-columns:minmax(0,44%) minmax(0,1fr);
  gap:24px; align-items:center;
}
/* El zigzag. `order` funciona igual en grid que en flex, así que el lado se
   cambia sin tocar el marcado: el PHP manda las escenas siempre en el mismo
   orden —foto, texto— y quien no ve el CSS (un lector de pantalla, un crawler)
   las lee en ese orden, que es el correcto. */
.rich-content .ds-scene.der .ds-scene-i{ order:2 }
.rich-content .ds-scene.der .ds-scene-t{ order:1 }
.rich-content .ds-scene-i{ margin:0; min-width:0 }
/* Gana en especificidad sobre `.rich-content img` de producto.php.
   `contain` y no `cover`: son fotos de detalle: la Pokébola abierta, el anillo
   de profundidad. Recortar justo eso es recortar la única razón por la que la
   foto está ahí. Las bandas que sobran quedan del color del marco. */
.rich-content .ds-scene-i img{
  width:100%; aspect-ratio:4/3; object-fit:contain; margin:0; display:block;
  border:1px solid var(--border); border-radius:14px; background:var(--ds-surface);
}
.rich-content .ds-scene-t{ display:flex; flex-direction:column; gap:9px; min-width:0 }
/* Una escena sin foto no se queda en su columna del 44%: ocupa el ancho entero,
   o el texto sale embotellado contra el margen sin nada al lado. */
.rich-content .ds-scene-t:only-child{ grid-column:1/-1 }
.rich-content .ds-scene-t h3{
  margin:0; font-size:16.5px; font-weight:800; line-height:1.3;
  letter-spacing:-.01em; color:var(--white);
}
.rich-content .ds-scene-t p{ margin:0; font-size:14px; line-height:1.62; color:var(--ds-ink-2) }

/* ── Franja promocional ────────────────────────────────────────────────── */
.rich-content .ds-banner{
  border-radius:14px; padding:16px 19px; display:flex; align-items:center; gap:15px;
}
.rich-content .ds-banner-t{ min-width:0; display:flex; flex-direction:column; gap:3px }
.rich-content .ds-banner-k{
  font-size:15px; font-weight:800; letter-spacing:-.01em; line-height:1.25; color:var(--white);
}
.rich-content .ds-banner-s{ font-size:12.5px; line-height:1.45; color:var(--ds-ink-2) }
.rich-content .ds-banner-n{
  margin-left:auto; font-weight:900; font-size:24px; letter-spacing:-.03em;
  color:var(--orange); font-variant-numeric:tabular-nums; white-space:nowrap; line-height:1;
}
/* El único tono al que se le permite levantar la voz. */
.rich-content .ds-banner.oferta{
  background:radial-gradient(120% 190% at 10% 50%,#ff5c0033 0%,#ff5c0000 60%),
             linear-gradient(100deg,#231105 0%,#160c05 50%,#100d0b 100%);
  border:1px solid #ff5c0047; box-shadow:0 0 34px -20px var(--orange);
}
.rich-content .ds-banner.oferta .ds-banner-s{ color:#cfae98 }
.rich-content .ds-banner.aviso{ background:var(--ds-surface); border:1px solid #ffffff26 }
.rich-content .ds-banner.info{ border:1px solid var(--border); padding:12px 18px }
.rich-content .ds-banner.info .ds-banner-k{ font-size:13.5px; font-weight:600; color:var(--ds-ink-2) }

/* ── Letra chica ───────────────────────────────────────────────────────── */
.rich-content .ds-note{
  border-top:1px solid var(--border); padding-top:15px;
  font-size:12.5px; line-height:1.55; color:var(--ds-ink-3);
}
.rich-content .ds-note p{ margin:0 }

/* ── Celular ───────────────────────────────────────────────────────────── */
@media (max-width:560px){
  .rich-content .ds-crow{ grid-template-columns:1fr; gap:4px }
  .rich-content .ds-cval{ text-align:left }
  /* Con foto no se apila: la miniatura se queda al costado ocupando las dos
     líneas, el nombre y el número comparten el renglón de arriba y la barra
     cruza abajo. Apilar las cuatro cosas daba filas de 90px de alto y la
     comparativa entera dejaba de entrar en una pantalla, que es justo lo que
     una comparativa necesita: verse junta. */
  .rich-content .ds-compare.con-foto .ds-crow{
    grid-template-columns:30px 1fr auto; gap:5px 10px;
  }
  .rich-content .ds-compare.con-foto .ds-cimg{ grid-row:1/3; width:30px; height:30px }
  .rich-content .ds-compare.con-foto .ds-cname{ grid-column:2; grid-row:1 }
  .rich-content .ds-compare.con-foto .ds-cval{ grid-column:3; grid-row:1; text-align:right }
  .rich-content .ds-compare.con-foto .ds-cbar{ grid-column:2/4; grid-row:2 }
  /* En el celular no hay dos columnas que alternar: la foto va siempre
     arriba de su explicación. */
  .rich-content .ds-scene{ grid-template-columns:1fr; gap:13px }
  .rich-content .ds-scene.der .ds-scene-i,
  .rich-content .ds-scene.der .ds-scene-t{ order:0 }
  .rich-content .ds-story{ gap:26px }
  .rich-content .ds-fit{ flex-wrap:wrap }
  .rich-content .ds-fit-s{ margin-left:29px; width:100% }
  .rich-content .ds-radar{ gap:14px }
}