/* ============================================================================
   Ficha de producto — Dirección A «La Carta»
   ----------------------------------------------------------------------------
   Mobile-first de verdad: el 95,64% del tráfico es móvil y esta página es la
   que sostiene el precio. Los valores base son los de 390px; el escritorio es
   la excepción al final del archivo.

   Regla dura del sistema, que acá se aplica varias veces: ningún componente de
   fondo claro hereda `color` de su sección. Una tarjeta blanca tiene texto
   tinta viva donde viva. Es la causa raíz de los dos bugs de contraste que ya
   aparecieron en este proyecto (testimonios ilegibles a 1,35:1 y botones de
   pastelería en el color equivocado), así que cada bloque declara el suyo.
   ========================================================================= */

.pdp {
  --pad: var(--edge);
  background: var(--papel);
  background-image: var(--harina);
  background-size: var(--harina-size);
  color: var(--ink);
  padding-bottom: 8px;
}

/* ---------- Migas ---------- */

.pdp-migas {
  padding-inline: var(--pad);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--cacao);
}

.pdp-migas a { color: inherit; }
.pdp-migas span[aria-hidden] { opacity: .55; margin: 0 2px; }

/* Las migas cierran pegadas a la galería (pedido de Ignacio, 24-08): son un
   rótulo de ubicación, no una sección, y los 10px del ritmo las dejaban
   flotando entre el header y la foto.
   ⚠️ Clase repetida —(0,3,0)— para ganarle al «RITMO VERTICAL ÚNICO» de
   components.css, que es (0,2,0), sin depender del orden de carga. */
.pdp-migas.pdp-migas.pdp-migas { padding-bottom: 0; }

/* ---------- Galería ----------
   Carrusel con enganche nativo. La barra va oculta siempre, así que las señales
   de que hay más son: asoman la foto anterior y la siguiente, están los
   chevrons y el contador dice cuántas hay.

   La foto activa va CENTRADA con un pedazo de la anterior y de la siguiente
   asomando a cada lado (pedido de Ignacio, 24-08). Antes enganchaba al
   principio (`start`) y solo asomaba la de la derecha, así que la galería no
   se leía como un carrusel: parecía una foto grande y algo cortado al lado.

   El recorrido es INFINITO: después de la última viene la primera sin
   rebobinar. Eso lo resuelve `carruselInfinito()` en app.js clonando la tanda
   a cada lado; desde el CSS no hay nada que saber, salvo que la pista termina
   con 3n elementos en vez de n.

   La aritmética del asomo, que es lo único delicado de acá:

     · La pista lleva `--gal-peek + --gal-gap` de padding a cada lado. Eso es
       lo que permite que la PRIMERA y la ÚLTIMA foto también se centren: con
       `scroll-snap-align: center` el navegador no puede llevar el scroll a
       negativo, así que sin ese padding la primera nunca quedaría al medio.
     · Y por eso mismo `flex-basis: 100%` da exactamente el ancho correcto: el
       porcentaje se resuelve contra la caja de contenido de la pista, que ya
       viene descontando ese padding. Los dos números salen de la misma cuenta,
       así que no hay forma de que se desincronicen.
     · El asomo va en % para que escale: 7% son ~27px en un teléfono y ~39px en
       la columna de escritorio, o sea el mismo gesto en las dos pantallas. */

.gal {
  --gal-peek: 7%;
  --gal-gap: 10px;
}

/* Sin aire abajo: la galería pega con el título de la ficha. Va con la clase
   repetida —(0,3,0)— para ganarle al «RITMO VERTICAL ÚNICO» de components.css,
   que es (0,2,0), sin depender del orden de carga. Mismo patrón que
   `.pdp-migas` y `.bk-testi`. */
.gal.gal.gal { padding-bottom: 0; }

/* El marco existe solo para colgar los chevrons: son `position: absolute` y
   necesitan centrarse sobre LA FOTO, no sobre `.gal`, que incluye además los
   puntos de abajo. */
.gal-marco { position: relative; }

.gal-track {
  display: flex;
  gap: var(--gal-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: calc(var(--gal-peek) + var(--gal-gap));
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.gal-track::-webkit-scrollbar { display: none; width: 0; height: 0; }

.gal-item {
  flex: 0 0 100%;
  /* 4:5, el formato real de la fotografía. Estaba en 1.75 (apaisado): sobre
     una foto vertical eso mostraba menos de la mitad de la imagen. */
  aspect-ratio: var(--foto-producto);
  scroll-snap-align: center;
  overflow: hidden;
  background: var(--sand);
  /* Sin esquinas rectas (30-08). El radio va en la CAJA, que ya tiene
     `overflow: hidden`: así el recorte es uno solo y la foto no puede asomar
     por una esquina. */
  border-radius: var(--r-caja);
}

.gal-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Los chevrons se apoyan sobre el borde de la foto activa, montados sobre el
   asomo del vecino. Van con sombra porque el fondo que les toca es una
   fotografía y no se puede saber de qué color es. */
.gal-chev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  box-shadow: 0 2px 10px rgba(43, 43, 43, .22);
}

.gal-chev--prev { left: 2px; }
.gal-chev--next { right: 2px; }

.gal-chev:active { transform: translateY(-50%) scale(.94); }

/* Chevron: 44×44 exactos, círculo de 1px, sin relleno sólido. Nunca se oculta
   en móvil — es también el único acceso por teclado y por lector de pantalla. */
.chev {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(121, 87, 87, .45);
  background: rgba(251, 247, 242, .9);
  color: var(--wine);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--t-fast);
}

.chev:active { transform: scale(.94); }
.chev[disabled] { opacity: .4; cursor: default; }

.chev--ink {
  border-color: rgba(251, 247, 242, .45);
  background: transparent;
  color: var(--papel);
}

/* ---------- Titular ---------- */

.pdp-head { padding-inline: var(--pad); }

/* Sin aire abajo: el título pega con lo que sigue. Clase repetida —(0,3,0)—
   para ganarle al «RITMO VERTICAL ÚNICO» de components.css, que es (0,2,0),
   sin depender del orden de carga. Mismo patrón que `.gal` y `.pdp-migas`. */
/* 30px de aire arriba (pedido de Ignacio, 31-08). El titular NO es primer hijo
   de `.pdp` —lo son las migas— así que el ritmo solo le daba 10px. */
.pdp-head.pdp-head.pdp-head { padding-top: 30px; padding-bottom: 0; }

/* Doble clase por la misma razón que en base.css: al subir aquella a 0,2,0,
   una regla de 0,1,0 acá dejaría de aplicarse y el eyebrow de la ficha
   volvería a los 11,5px de base en vez de sus 10,5. Carga después de
   base.css, así que con la misma especificidad gana esta. */
.eyebrow.eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cacao);
}

.pdp-head h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.06;
  letter-spacing: -.005em;
  margin: 8px 0 0;
  text-wrap: pretty;
}

/* ---------- Píldoras ---------- */

/* ---------- Precio y compra ---------- */

/* Sin aire arriba: el precio pega con el titular. En ESCRITORIO no aplica —ahí
   `.pdp-buy` es una tarjeta blanca con borde y su padding de 20px es interior
   de caja, no espacio de sección; quitárselo pegaría el precio al borde. */
/* El padding INFERIOR entró con los chips de pago (31-08): antes el último
   hijo era `.pdp-entrega` y la tarjeta cerraba a ras de esa línea. Con los
   chips adentro, sin él las píldoras tocarían el borde redondeado. */
.pdp-buy { padding: 0 var(--pad) 16px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

/* El espacio de arriba de la columna de compra lo pone el «RITMO VERTICAL
   ÚNICO» de components.css (0,2,0), así que va con la clase repetida —(0,3,0)—
   para ganarle sin depender del orden de carga. Mismo patrón que `.gal`,
   `.pdp-head` y `.pdp-migas`. */
.pdp-col-compra.pdp-col-compra.pdp-col-compra { padding-top: 0; }

.price { display: inline-flex; align-items: baseline; gap: 9px; }

/* Aire arriba del precio (pedido de Ignacio, 31-08). `.pdp-buy` tiene
   `padding-top: 0` a propósito —el precio pega con el titular— y al quitarse
   las píldoras y la bajada en cursiva el número quedó tocando el `<h1>`.
   Va SCOPEADO al bloque de compra: `.price` lo usan también la barra fija y
   la caja del CTA final, que no llevan este aire. */
.pdp-precio .price { padding-top: 20px; }

/* PRECIOS EN WORK SANS (pedido de Janice, 30-08)
   Los números de precio estaban en Young Serif. Pasan a `--body` con peso 600:
   a 400 —el peso con el que se dibuja un serif— Work Sans queda visiblemente
   más liviano y el precio deja de ser el protagonista del bloque.
   `tabular-nums` para que las cifras no bailen de ancho entre productos.
   Las ANOTACIONES sobre la cifra —«USD», el comparativo tachado y la
   conversión de moneda— siguen en `--mono` por la regla de §3.n. */
.price-now {
  font-family: var(--body);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}

/* El comparativo tachado es, desde que se eliminó la mecánica de alza de
   precios, la única urgencia legítima que le queda a la ficha. */
.price-was {
  font-family: var(--mono);
  font-size: 15px;
  color: var(--cacao);
  text-decoration: line-through;
}

.price-cur {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cacao);
}


.pdp-cta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pdp-cta form { margin: 0; }

.pdp-entrega {
  margin: 8px 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: var(--lh-texto);
  color: var(--cacao);
}

/* ---------- Sello ----------
   Reemplaza a la garantía de devolución. Las tres partes del argumento van
   siempre juntas y en orden: probado, sin reembolsos de frente, acompañamiento.
   Acá va la versión corta de una línea; la política completa está en las FAQ. */

/* `.sello--linea` se promovió a components.css el 26-08: el carrito cierra con
   esta misma garantía (pedido de Ignacio). Acá queda solo lo propio de la
   ficha, que es dónde se apoya dentro de su columna. */
.sello--linea { margin: 11px var(--pad) 0; }

/* ---------- La voz de Janice ---------- */

.pdp-cita { margin: 0; padding-inline: var(--pad); }

.pdp-cita blockquote {
  margin: 0;
  font-family: var(--script);
  font-size: 20px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
  border-left: 2px solid var(--wine);
  padding-left: 14px;
}

.pdp-cita figcaption {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--cacao);
  margin-top: 10px;
  padding-left: 16px;
}

/* ---------- Qué vas a aprender ---------- */

/* El bloque queda entre «Las recetas» (marco doble, 01–06) y «El índice»
   (filete vertical, romanos), y era el único de los tres sin título propio:
   su encabezado se pintaba como eyebrow de 10px en mono, o sea la lista que
   dice el RESULTADO de la compra se presentaba con un rotulito. Peor: repetía
   el marcador «01» de la carta que va justo arriba, así que las dos listas se
   leían como una sola que se reinició.

   Reparto de gestos, para que ninguno de los tres se repita:
     · Las recetas → marco doble, centrado, «01»
     · Qué vas a aprender → numeral colgado, SIN caja ni hilos, «1»
     · El índice → filete vertical, punteado, «I»

   A este le toca ser el más suelto y a la vez el más fuerte: numerales grandes
   en Young Serif vino en su propia canaleta y texto un punto mayor que el de
   sus vecinas. Sin líneas separadoras a propósito — el punteado ya es el
   lenguaje de la carta y del índice, y una tercera lista rayada seguida
   convertiría el tramo en una tabla larga. */
/* BANDA A SANGRE, y es lo que rompe la planicie del tramo.
   El problema no era ningún bloque suelto: de la carta al «para quién es» todo
   caía sobre la MISMA superficie —papel, texto a la izquierda, mismo ancho,
   mismo tamaño de titular—, así que al deslizar el tramo se leía como una sola
   columna larga. Lo que faltaba era variación de superficie, no más adornos.

   Le toca a este bloque porque es la PROMESA —lo que te llevas—, no inventario
   como sus dos vecinos, y estaba dicho con la misma voz que ellos.

   ⚠️ SE PROBARON DOS BANDAS DE COLOR Y LAS DOS SE DESCARTARON (Ignacio, 24-08):
   blush queda dulce y ajeno sobre el papel cálido, y tinta resulta demasiado
   imponente en medio de la lectura. La conclusión que queda escrita para que
   nadie la vuelva a intentar: **la planicie de este tramo no se arregla
   pintando un bloque.** Se arregla con escala, con aire y con movimiento al
   deslizar, que es literalmente lo que se reportó —«cuando se está deslizando
   es muy plano»—, no con superficie.

   Lo único que sobrevive de esos dos intentos es el pico de escala: este
   titular es más grande que los de sus vecinos porque es la PROMESA —lo que te
   llevas—, no inventario como ellos, y estaba dicho con la misma voz.

   ⚠️ Regla de §3.l aplicada: cambiar el fondo obliga a revisar el color de
   TODO lo que vive dentro. Título, filete, numeral y texto declaran el suyo;
   ninguno hereda. Es la trampa que este proyecto ya pisó cinco veces.

   La harina va al mismo tamaño que la del fondo de la ficha a propósito: así
   el punteado cruza la banda sin cortarse y se lee como papel teñido, no como
   un rectángulo de color pegado encima. */
.pdp-learn {
  padding-inline: var(--pad);
}

/* Título real, no eyebrow. El filete corto encima reemplaza al rótulo que
   había: marca el arranque de la sección sin agregar una línea de texto. */
.pdp-learn h2 {
  font-family: var(--serif);
  font-weight: 400;
  /* Más grande que los titulares vecinos (21px): la banda necesita un pico de
     escala, si no el cambio de superficie queda como un fondo sin jerarquía. */
  font-size: 25px;
  line-height: 1.16;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}

.pdp-learn h2::before {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--wine);
  margin-bottom: 12px;
}

.pdp-learn ol {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Grid y no flex: la canaleta del numeral es una columna fija, así las cinco
   líneas de texto arrancan exactamente en la misma vertical aunque el numeral
   cambie de ancho. Con flex + baseline el texto se corría por ítem. */
.pdp-learn li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

/* El numeral es tipografía, no una etiqueta —misma decisión que ya se tomó en
   la carta y en el índice—, pero acá va grande: es lo único que estructura la
   lista, porque no hay hilos ni caja. Se alinea ópticamente con la primera
   línea de texto, que es lo que hace el margin-top negativo. */
.pdp-learn .num {
  font-family: var(--serif);
  font-size: 30px;
  line-height: 1;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
  margin-top: -3px;
}

.pdp-learn .txt {
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: pretty;
}

/* ---------- Las recetas · «la carta» ---------- */

/* El bloque más caro de la ficha: es la lista que decide la compra.
   Estaba en blanco plano con hilos grises, o sea el lenguaje de una tabla de
   especificaciones — el mismo look que tendría cualquier tienda. Aquí toma
   prestada la pieza que le da nombre a toda la dirección visual: la carta de
   un restaurante. Papel cálido, harina espolvoreada, doble filete vino y
   Young Serif. Nada de esto es decoración suelta: los cuatro recursos ya
   existen en el tema y se usan en el home y en la colección. */
.pdp-carta { padding-inline: var(--pad); }

/* El marco, los filetes y el cierre viven en components.css como `.carta-*`:
   el carrito usa la misma pieza (26-08). Acá queda solo lo propio de la ficha:
   el pie corto, porque debajo del último renglón viene el ornamento. */
.pdp-carta-marco { padding-bottom: 8px; }

.pdp-carta h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.14;
  text-align: center;
  color: var(--ink);
  margin: 10px 0 0;
  text-wrap: balance;
}

.pdp-carta ol {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.pdp-carta li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  /* Punteado y no línea llena: separa los platos de una carta sin dibujar la
     grilla de una tabla, que es justo lo que se leía como genérico. */
  border-top: 1px dotted rgba(110, 44, 52, .30);
}

.pdp-carta li:first-child { border-top: 0; }

/* El numeral es tipografía, no una etiqueta: Young Serif en vino, del mismo
   tamaño que el texto. En mono y gris se leía como un id de sistema. */
.pdp-carta .n {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--wine);
  flex: none;
  min-width: 20px;
  font-variant-numeric: tabular-nums;
}

.pdp-carta .t {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.34;
  color: var(--ink);
  text-wrap: pretty;
}



/* ---------- El índice ---------- */

/* Es el más callado de los tres bloques de lista, y eso es a propósito: las
   recetas son el deseo, «qué vas a aprender» es la promesa, y esto es la
   referencia. Subirle el volumen sería competirle a los dos que sí venden.

   Lo que cambia es el EJE del punteado. Antes los hilos punteados cruzaban la
   fila, o sea dibujaban la grilla de una tabla — justo el look genérico que la
   carta de recetas vino a corregir, y encima repitiendo su mismo recurso dos
   bloques más abajo. Ahora el punteado corre en el sentido de la lectura: una
   guía de puntos por entrada, que es el gesto inconfundible del índice de un
   libro (y de una carta impresa, que es la dirección visual del sitio). Mismo
   vocabulario, otro eje, y deja de leerse como tabla sin agregar nada nuevo.

   Reparto final de los tres, sin repeticiones:
     · Las recetas → marco doble, punteado horizontal, «01»
     · Qué vas a aprender → numeral colgado, sin líneas, «1»
     · El índice → filete vertical + guía de puntos, «I» */
.pdp-indice {
  padding-inline: var(--pad);
  color: var(--ink);
}

.pdp-indice .eyebrow { color: var(--wine); }

.pdp-indice h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.18;
  margin: 8px 0 0;
}

.pdp-indice ul {
  margin: 16px 0 0;
  padding: 0 0 0 14px;
  list-style: none;
  /* El filete del margen: el gesto del índice impreso, y lo que hace que la
     columna de romanos se lea como una sola pieza y no como ítems sueltos. */
  border-left: 1px solid rgba(110, 44, 52, .28);
}

/* Grid con canaleta fija: los romanos van de I a XII y en flex el texto se
   corría de entrada en entrada según cuánto midiera el numeral. */
.pdp-indice li {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  column-gap: 10px;
  align-items: baseline;
  padding: 7px 0;
}

.pdp-indice .rom {
  font-family: var(--serif);
  font-size: 13px;
  color: var(--wine);
  font-variant-numeric: tabular-nums;
}

.pdp-indice .ent {
  font-size: 15.5px;
  line-height: var(--lh-texto);
  /* La guía de puntos: un ::after inline de ancho 100% que fluye DESPUÉS de la
     última palabra —por eso arranca donde termina el texto, aunque la entrada
     ocupe tres líneas— y se recorta contra el borde derecho. Es el único modo
     que sobrevive al texto que envuelve; con flex, el relleno se alinearía a
     la PRIMERA línea y quedaría flotando arriba. */
  overflow: hidden;
}

.pdp-indice .ent::after {
  content: "";
  display: inline-block;
  width: 100%;
  margin-left: 10px;
  vertical-align: .22em;
  border-bottom: 1px dotted rgba(110, 44, 52, .32);
}

/* La destacada sale de la lista y se apoya en arena con trama de mantel — el
   mismo par que ya marca «Qué recibes cuando pagas». Es la promesa, no un
   capítulo más, y por eso no lleva guía de puntos: la guía dice «esto sigue
   hacia una página», y acá no hay nada después. */
.pdp-indice .destacada {
  margin: 14px 0 0 -14px;
  padding: 11px 12px;
  background: var(--sand);
  background-image: var(--mantel);
  font-weight: 500;
  border-radius: var(--r-campo);
}

.pdp-indice .destacada .rom { color: var(--wine); }
.pdp-indice .destacada .ent::after { content: none; }

/* ---------- Para quién es ---------- */

/* No es una lista de características: es un espejo de identificación —«¿soy
   yo?»— y su segunda mitad es la respuesta contraria. Por eso los tres «sí» y
   el «no» comparten UNA canaleta y se leen como una sola decisión continua, en
   vez de una lista suelta con una advertencia pegada abajo.

   Es el cuarto bloque de lista seguido (recetas → aprender → índice → este) y
   el único sin numerar, así que va también sin ornamento: un cuarto adorno
   distinto sería ruido, y después de tres bloques decorados esto calma la
   página. Lo que lo identifica es la marca, no un marco.

   🔴 Sale el verde. El bullet era `content: "●"` en --sage, o sea sage usado
   como COLOR DE TEXTO, que la regla de la paleta (§3.l) prohíbe: mide 2,53:1
   sobre papel y falla AA. Es además el mismo defecto que se corrigió el 23-08
   en Postres a pedido —el verde era lo único de ese color en un recorrido que
   es vino, rosa y papel— y que acá había quedado sin tocar. Ahora sí = vino
   (9,5:1), no = cacao (5,94:1). */
/* Apertura de capítulo: hilo a sangre + remate centrado.
   Es el único punto del tramo donde algo se sale del riel izquierdo, y eso es
   justamente lo que hace: después de tres bloques alineados a la izquierda, un
   elemento centrado corta la monotonía de la columna sin pintar nada.

   El hilo va de borde a borde —no metido dentro del padding como el del «no es
   para ti»— porque acá no separa dos párrafos: separa lo que el ebook ES de la
   pregunta de si es para ti. Es el único hilo a sangre de la ficha.

   🔴 El remate NO puede ser un glifo. Se probó con ❧ (U+2767), que es el que
   ya cierra la carta de recetas, y en la fuente de respaldo del sistema se
   dibuja como un borrón —parece un caracol, no un ornamento—. Es la misma
   lección que ya se aplicó a los ✓ y ✕ de «para quién es»: se DIBUJA, no se
   escribe, para que no dependa de qué fuente lo resuelva.

   Son tres puntos: la asterisma, el corte de sección de la tipografía impresa
   de toda la vida. Va con un radial-gradient repetido, así que es un solo
   pseudo-elemento y no hay marcado extra.

   ⚠️ `.carta-pie` sigue usando ese mismo glifo y tiene el mismo defecto: en la
   ficha se ve como una mancha bajo la lista de recetas. Queda anotado. */
.pdp-forwho {
  padding-inline: var(--pad);
  border-top: 1px solid rgba(121, 87, 87, .20);
}

.pdp-forwho::before {
  content: "";
  display: block;
  /* 48 / 16 = exactamente tres puntos. */
  width: 48px;
  height: 5px;
  /* 30px bajo la asterisma (pedido de Ignacio, 31-08). Va en MARGIN y no en
     padding: el pseudo-elemento mide 5px y pinta su fondo repetido en toda su
     caja, así que un padding estiraría los puntos en vez de separar. */
  margin: 2px auto 30px;
  background-image: radial-gradient(circle, var(--wine) 2.4px, transparent 2.5px);
  background-size: 16px 5px;
  background-repeat: repeat-x;
  opacity: .65;
}

/* (0,3,0) contra el ritmo único, igual que la banda: un corte necesita aire de
   los dos lados o se lee como un subrayado del bloque anterior. */
.pdp-forwho.pdp-forwho.pdp-forwho { padding-top: 24px; padding-bottom: 30px; }

.pdp-forwho > h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.18;
  color: var(--ink);
  margin: 0;
}

.pdp-forwho > ul {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

/* Misma canaleta de 22px que el bloque «no», para que las cuatro marcas caigan
   en la misma vertical. Grid y no flex: con flex + baseline la marca se movía
   según el largo de la primera palabra. */
.pdp-forwho > ul li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  font-size: 16px;
  line-height: var(--lh-texto);
  color: var(--ink);
  text-wrap: pretty;
}

/* La marca se DIBUJA con dos bordes rotados, no se escribe con un glifo: así
   no depende de que la fuente traiga «✓» ni cambia de forma entre sistemas, y
   toma el grosor exacto que se le pida. */
.pdp-forwho > ul li::before {
  content: "";
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--wine);
  border-bottom: 2px solid var(--wine);
  transform: rotate(-45deg);
  justify-self: center;
  margin-top: 5px;
}

/* Deja de ser tarjeta blanca. El blanco puro venía del sistema visual viejo y
   sobre el papel cálido se lee como un pantallazo de otro sitio — es la misma
   corrección que ya se le hizo al índice. Acá basta un hilo arriba: la
   jerarquía la da el color apagado, no una caja. */
.pdp-notfor {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(121, 87, 87, .22);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
}

/* La ✕ en la misma canaleta que los ✓. Dos degradados cruzados en vez de un
   glifo, por lo mismo que arriba. */
.pdp-notfor::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  width: 11px;
  height: 11px;
  justify-self: center;
  margin-top: 3px;
  background-image:
    linear-gradient(45deg, transparent 43%, var(--cacao) 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, var(--cacao) 43% 57%, transparent 57%);
}

.pdp-notfor > * { grid-column: 2; }

.pdp-notfor .eyebrow {
  color: var(--cacao);
  letter-spacing: .14em;
  margin: 0;
}

.pdp-notfor p:last-child {
  margin: 7px 0 0;
  font-size: 15.5px;
  line-height: var(--lh-texto);
  /* Secundario a propósito —8,96:1, pasa AA de sobra— porque es la mitad que
     descarta, no la que vende. */
  color: var(--tinta-2);
  text-wrap: pretty;
}

/* ---------- Testimonios ---------- */

/* Nada que estilar: la franja es `.bk-testi`, el mismo componente del home y
   de «Sobre mí» (components.css). `.pdp-testi` sobrevive solo como marca de
   posición en la grilla de escritorio de más abajo.

   Tenía aquí ~55 líneas propias —fondo, cabecera, pista, pie— que repetían el
   componente con las medidas cambiadas: tarjetas a 12px de separación en vez
   de 16 y titular de 22px en vez de 19. Decimocuarta aparición de la trampa
   del proyecto; se borra en vez de dejarse muerta, que es la lección de los
   ~200px de CSS muerto de `home-brooklyn.css` (19-08). */

/* ---------- Puente a Pastelería Rentable ---------- */

/* Nada que estilar: el bloque es `.bk-puente`, el mismo componente del home y
   de la colección (components.css). `.pdp-puente` sobrevive solo como marca de
   posición en la grilla de escritorio de más abajo.

   Tenía aquí ~48 líneas propias —foto de 150px, titular de 24px, bajada y una
   línea de precio— que contaban la misma oferta de otra forma. Decimoquinta
   aparición de la trampa del proyecto; se borra en vez de dejarse muerta. */

/* ---------- Cross-sell del Bundle ----------
   El bloque es `.bk-upsell`, componente compartido con el carrito
   (components.css). `.pdp-crossell` sobrevive solo como marca de posición en la
   grilla de escritorio de más abajo: no estiliza nada.

   Vivió unas horas acá completo, y habría sido la decimosexta aparición de la
   trampa del proyecto — CSS de componente compartido en la hoja de una página,
   que se ve bien justo en la página que le da nombre. */

/* Lo ÚNICO propio de la ficha: 20px de aire arriba para despegarlo del puente a
   Pastelería Rentable, que es la sección inmediatamente anterior (pedido de
   Ignacio, 25-08).

   ⚠️ Va en MARGIN y no en padding, que es la excepción a la regla general del
   ritmo vertical. `.bk-upsell` lleva su marco —`border` + `outline` con offset
   negativo— en este mismo elemento, así que un `padding-top` empuja el
   contenido hacia adentro del marco y el filete sigue tocando la franja vino
   del puente. El aire tiene que quedar por FUERA del borde.

   Clase TRIPLE (0,3,0) a propósito: el RITMO VERTICAL ÚNICO de components.css
   declara `margin-block: 0` con (0,2,1) —su `:is()` toma la especificidad de
   `.wrap--reading.section > article`—, así que con una o dos clases esta regla
   no se aplicaría. Misma razón por la que están escritas así las migas, la
   galería y `.pdp-janice`. */
/* 30px arriba del puente (pedido de Ignacio, 31-08). Acotado a `.pdp-puente`:
   la franja vino es `.bk-puente`, compartida con el home y la colección, donde
   el ritmo sigue mandando. Su `padding-bottom: 30px` sí es del componente y
   vive en components.css. Clase repetida contra el (0,2,1) del ritmo. */
.pdp-puente.pdp-puente.pdp-puente { padding-top: 30px; }

/* 30px arriba y abajo del cross-sell (pedido de Ignacio, 31-08). Reemplaza al
   `padding: 20px 16px 16px` que `.bk-upsell` declara con (0,1,0), y le gana al
   ritmo con la clase repetida. Es aire INTERIOR de la tarjeta —el marco lo
   dibuja este mismo elemento—; el aire por fuera lo sigue poniendo el
   `margin-top` de acá abajo. */
.pdp-crossell.pdp-crossell.pdp-crossell { padding-block: 30px; margin-top: 20px; }

.pdp-desglose-cierre {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 14px 0 0;
}

/* PRECIOS EN WORK SANS (pedido de Janice, 30-08)
   Los números de precio estaban en Young Serif. Pasan a `--body` con peso 600:
   a 400 —el peso con el que se dibuja un serif— Work Sans queda visiblemente
   más liviano y el precio deja de ser el protagonista del bloque.
   `tabular-nums` para que las cifras no bailen de ancho entre productos.
   Las ANOTACIONES sobre la cifra —«USD», el comparativo tachado y la
   conversión de moneda— siguen en `--mono` por la regla de §3.n. */
.pdp-desglose-cierre b {
  font-family: var(--body);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
  color: var(--wine);
}

/* `:not(.precio-especial)` porque esa etiqueta trae su propio tamaño y su propio
   color desde components.css — sin esto la generosa regla de aquí, que carga
   después, se lo comería. */
.pdp-desglose-cierre span:not(.precio-especial) {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--cacao);
}

/* ---------- Desglose (solo ficha del Bundle) ----------
   Se imprimen los DOS totales: el de lista, que es el ancla, y el de los cuatro
   sueltos hoy, que es la suma que la compradora puede hacer sola mirando la
   grilla. Si esa segunda no está, la descubre y deja de creer en el resto. */

.pdp-desglose {
  margin: 24px var(--pad) 0;
  background: var(--white);
  color: var(--ink);
  padding: 16px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.pdp-desglose ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.9;
  color: var(--tinta-2);
}

.pdp-desglose li { display: flex; justify-content: space-between; gap: 12px; }
.pdp-desglose .montos { flex: none; }
.pdp-desglose del { color: var(--cacao); }
.pdp-desglose b { font-weight: 400; color: var(--ink); margin-left: 4px; }

/* La separación la marca una clase del marcado y no una posición contada a
   mano: los ebooks sueltos podrían dejar de ser cuatro. (`:first-of-type` no
   sirve acá — filtra por etiqueta, no por clase.) */
.pdp-desglose li.total--primero {
  border-top: 1px solid rgba(121, 87, 87, .3);
  margin-top: 7px;
  padding-top: 7px;
}

/* ---------- Quién te enseña ---------- */

/* `.pdp-janice` sobrevive solo como posición en la grilla de escritorio: el
   bloque lo dibuja `.bk-quien` en components.css.

   El `padding-bottom: 0` (pedido de Ignacio, 25-08) va con la clase TRIPLE
   (0,3,0), igual que las migas, la galería y la cabecera: los 20px los pone el
   RITMO VERTICAL ÚNICO de components.css, cuyo `:is()` toma la especificidad
   de su argumento más alto —`.wrap--reading.section > article`, (0,2,1)—, así
   que dos clases NO alcanzan aunque esta hoja cargue después. */
.pdp-janice { padding-inline: var(--pad); }
/* 30px arriba y abajo (pedido de Ignacio, 31-08), en reemplazo del
   `padding-bottom: 0` del 25-08. Va acotado a `.pdp-janice`: el bloque es
   `.bk-quien`, compartido con la colección, y ahí el ritmo sigue mandando. */
.pdp-janice.pdp-janice.pdp-janice { padding-block: 30px; }

/* ---------- FAQ ---------- */

.pdp-faq { padding-inline: var(--pad); }

/* 30px arriba y abajo (pedido de Ignacio, 31-08). Clase repetida —(0,3,0)—
   contra el (0,2,1) del RITMO VERTICAL ÚNICO. */
.pdp-faq.pdp-faq.pdp-faq { padding-block: 30px; }

.faq-item { border-bottom: 1px solid rgba(121, 87, 87, .2); }

.faq-item summary,
.pdp-legal summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 11px 0;
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
}

.faq-item summary::-webkit-details-marker,
.pdp-legal summary::-webkit-details-marker { display: none; }

.faq-item summary {
  font-weight: 500;
  font-size: 16px;
  line-height: var(--lh-texto);
  color: var(--ink);
}

.pdp-legal summary span { color: var(--wine); font-family: var(--mono); flex: none; }

.pdp-legal[open] summary span { transform: rotate(45deg); }

.faq-answer p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

/* ---------- Aviso legal ----------
   Borde cacao y no vino: el vino es de acción y de error, y esto no es ninguna
   de las dos. Sin mayúsculas, sin candado, sin fondo de alerta — no es una
   amenaza, y la línea de permiso al final es lo que lo mantiene así. */

.pdp-legal {
  margin-top: 14px;
  background: var(--white);
  color: var(--ink);
  border-left: 3px solid var(--cacao);
  padding: 0 14px;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

.pdp-legal summary {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--tinta-2);
}

.pdp-legal p {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: var(--lh-texto);
  color: var(--tinta-2);
}

.pdp-legal-si {
  border-top: 1px solid rgba(121, 87, 87, .2);
  padding-top: 10px;
  font-weight: 500;
  color: var(--ink) !important;
}

/* ---------- Cierre ---------- */

/* ---------- Cierre de la ficha: LA CUENTA (25-08) ----------
   Es el último bloque antes del footer y la última oportunidad de vender en el
   scroll. Se compone como la cuenta de un restaurante —lo que te llevas, el
   total, con qué se paga—, que es el gesto que le faltaba a «La Carta» y que
   acá es literal.

   Sigue en ARENA con trama de mantel, y no en papel: el cross-sell del Bundle
   viene justo antes y ya es papel con doble filete. Dos marcos idénticos
   seguidos se leen como un solo bloque partido. El arena además es el tono más
   cálido de la paleta, que es lo que la evidencia de neuromarketing pide
   exactamente acá.

   ⚠️ REGLA DURA DE COLOR (§3.l): esta caja invierte el fondo, así que TODO lo
   que vive adentro declara su color. Contrastes medidos sobre arena #EFE2B7 —
   ink 10,94:1 · vino 7,83:1 · tinta-2 7,39:1 · cacao 4,9:1. El papel y el
   propio arena dan 1,2:1 y NO pueden usarse como color de texto acá: es
   exactamente el bug que ya mordió cinco veces en este proyecto. */

.pdp-final { padding-inline: var(--pad); }

/* 30px de aire arriba (pedido de Ignacio, 31-08). El fondo de arena lo lleva
   `.pdp-final-caja`, así que este padding queda por FUERA del recuadro y
   separa de verdad. Clase repetida contra el (0,2,1) del ritmo. */
.pdp-final.pdp-final.pdp-final { padding-top: 30px; }

.pdp-final-caja {
  background: var(--sand);
  background-image: var(--mantel);
  color: var(--ink);
  /* Doble filete, el mismo recurso de `.pdp-carta` y del bloque del Bundle: es
     lo que convierte una caja de fondo en una pieza. El `outline` con offset
     negativo dibuja el filete interior sin sumar al box model. */
  padding: 22px 18px 20px;
  text-align: center;
  border-radius: var(--r-caja);
  box-shadow: var(--borde-caja);
}

/* Clase repetida: `product.css` declara un `.eyebrow.eyebrow` global (0,2,0)
   para la ficha; acá hace falta ganarle para subir el eyebrow a vino, que es
   el color que ordena esta pieza. */
.pdp-final-caja .eyebrow.eyebrow {
  margin: 0;
  color: var(--wine);
  font-size: .72rem;
  letter-spacing: .12em;
}

/* Lo que te llevas. Alineada a la IZQUIERDA dentro de una caja centrada, a
   propósito: una lista centrada no tiene margen común por donde el ojo baje y
   se lee más lento, que es lo último que quieres en el cierre. */
.pdp-final-lleva {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: inline-block;
}

.pdp-final-lleva li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px dotted rgba(110, 44, 52, .3);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--tinta-2);
}

.pdp-final-lleva li:first-child {
  /* La línea que cambia por producto —«6 recetas paso a paso»— es la que más
     vende de las cuatro, así que se lee primero y con el peso de la marca. */
  font-family: var(--serif);
  font-size: 17px;
  color: var(--ink);
}

.pdp-final-lleva li:last-child { border-bottom: 0; }

/* El tick, en vino y en la misma tipografía del resto de los ticks del sitio. */
.pdp-final-lleva li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 9px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.4;
  color: var(--wine);
}

.pdp-final-caja h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 23px;
  line-height: 1.18;
  /* Filete de separación arriba: cierra el listado y abre el total, que es la
     articulación de una cuenta. */
  margin: 20px 0 0;
  padding-top: 18px;
  border-top: 1px solid rgba(110, 44, 52, .3);
  color: var(--ink);
}

.pdp-final-caja .pdp-precio { margin-top: 12px; }
.pdp-final-caja .price { justify-content: center; }
.pdp-final-caja .price-now { font-size: 40px; }

.pdp-final-ahorro {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--wine);
}

.pdp-final-conv { margin: 4px 0 0; }

.pdp-final-caja .pdp-cta { margin-top: 16px; }

.pdp-final-nota {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--tinta-2);
}

/* La objeción #1 del infoproducto, respondida al cerrar. Filete arriba porque
   ya no es parte de la compra: es lo que viene después de ella. */
.pdp-final-apoyo {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px dotted rgba(110, 44, 52, .3);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--tinta-2);
}

/* Centrados en las DOS superficies donde viven —la columna de compra y el
   cierre de la ficha—. En el cierre estaban alineados a la izquierda bajo un
   bloque cuyo titular, precio y botón están centrados, así que la última fila
   de la página rompía el eje (pedido de Ignacio, 25-08). */
.pdp-pagos {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--cacao);
}

.pdp-pagos li {
  background: rgba(110, 44, 52, .06); padding: 6px 9px;
  border-radius: 999px;
}

/* Dentro de la caja de arena el borde al 30% de cacao casi desaparece: el
   contraste contra arena es mucho menor que contra papel. Sube a vino tenue. */
.pdp-final-caja .pdp-pagos { margin-top: 14px; }
.pdp-final-caja .pdp-pagos li { border-color: rgba(110, 44, 52, .3); color: var(--tinta-2); }

/* Los mismos chips, ahora DENTRO de la tarjeta de compra (31-08). Sin margen
   lateral: el inset lo pone el `padding-inline` de `.pdp-buy`, y mantener el
   `var(--pad)` de cuando era hermano lo duplicaría. */
.pdp-pagos--compra { margin: 12px 0 0; }

/* ---------- Barra fija de compra ---------- */

.pdp-sticky {
  /* ⚠️ FIXED y no STICKY (25-08). Una barra `sticky; bottom:0` sigue OCUPANDO
     su lugar en el flujo, así que al final del documento reserva su propio
     alto y deja una franja de papel vacía entre la última sección y el footer
     —lo que Ignacio marcó en la colección—. Es capa de interfaz, no una
     sección: no debe ocupar flujo. El JS ya la esconde al asomar el footer,
     que es lo que antes parecía que hacía el sticky. */
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background: var(--papel);
  border-top: 1px solid rgba(121, 87, 87, .3);
  box-shadow: 0 -8px 24px -12px rgba(43, 43, 43, .3);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: transform var(--t-base);
}

/* Estado seguro: si el JS no carga, la barra queda visible. */
.pdp-sticky.is-oculta { transform: translateY(110%); }

.pdp-sticky form { margin: 0; flex: none; }

.pdp-sticky-info { flex: 1; min-width: 0; }

.pdp-sticky-nombre {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cacao);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pdp-sticky-precio { display: block; margin-top: 2px; }
.pdp-sticky-precio .price-now { font-family: var(--body); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 18px; color: var(--ink); }
.pdp-sticky-precio .price-was { font-size: 11px; }
.pdp-sticky-precio .price-cur { font-size: 10px; }

.pdp-agotado {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--cacao);
}

/* ============================================================================
   Escritorio — la excepción, no la base.
   ========================================================================= */

/* ⚠️ ABRE EN 760px Y NO EN 900 (31-08). El iPad vertical mide 768 y con el
   corte en 900 se quedaba con la ficha de teléfono: la galería a 704px de
   ancho dibujaba una foto 4:5 de 880px de alto —o sea el primer pantallazo
   entero era una imagen— y el `<h1>` caía a ~900px de scroll. La medida de la
   columna de compra para el tramo 760–899 la afina `escritorio.css` §9. */
@media (min-width: 760px) {
  .pdp {
    --pad: 0px;
    max-width: var(--container);
    margin: 0 auto;
    /* `--edge` y no 24px: con 24 la ficha arrancaba 8px a la izquierda de todas
       las demás páginas del sitio. Sin padding vertical: lo pone el ritmo
       único de components.css. */
    padding-inline: var(--edge);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    column-gap: 48px;
    align-items: start;
  }

  /* La columna de compra queda fija a la derecha mientras se lee la ficha. */
  .pdp-migas,
  .gal,
  .pdp-head,
  .pdp-cita,
  .sello--linea,
  .pdp-learn,
  .pdp-indice,
  .pdp-carta,
  .pdp-forwho,
  .pdp-testi,
  .pdp-puente,
  .bk-upsell,
  .pdp-desglose,
  .pdp-janice,
  .pdp-faq,
  .pdp-final { grid-column: 1; }

  /* La caja se acota y se centra. Sin esto, en la columna ancha de la ficha el
     CTA a ancho completo mide ~1800px y la lista se estira hasta dejar cada
     línea sola en su renglón: es el mismo defecto de proporción que ya mordió
     en la ficha y en la colección, ahora al revés —no vacío al lado, sino
     contenido estirado—. */
  .pdp-final-caja {
    max-width: 620px;
    margin-inline: auto;
    padding: 28px 32px 24px;
  }

  .pdp-final-caja h2 { font-size: 27px; }
  .pdp-final-caja .price-now { font-size: 46px; }

  /* La columna de compra entera —precio, sello y medios de pago— es lo que
     queda fijo. Antes solo se fijaba `.pdp-buy` y, al pegarse, tapaba al sello
     y a la línea de cuotas, que eran sus hermanos de más abajo en la misma
     columna. */
  .pdp-col-compra {
    grid-column: 2;
    /* Ocupa TODAS las filas: así arranca arriba, junto a la galería, y acompaña
       la lectura de la ficha entera. Antes se auto-colocaba después de las
       píldoras, con lo que dejaba 460px de vacío a la derecha y el precio
       quedaba bajo el pliegue — justo lo contrario de lo que dice el comentario
       de más abajo («en escritorio el CTA está siempre a la vista»), que
       describía una intención que el CSS no cumplía. */
    /* `span 30` y no `1 / -1`: sin `grid-template-rows` explícitas, la línea
       `-1` apunta a la única línea explícita que existe, así que `1 / -1` se
       resuelve a UNA fila y la columna entera se metía en la fila del
       breadcrumb, inflándola 380px y empujando la galería hacia abajo. Con un
       span generoso cubre todas las filas reales; las filas implícitas que
       sobran miden cero. */
    grid-row: 1 / span 30;
    position: sticky;
    top: calc(var(--sticky-h) + 16px);
    /* `height: max-content` evita que el estirado de la fila arrastre el borde
       de la tarjeta hasta el pie de la página. */
    height: max-content;
    margin-top: 14px;
  }

  .pdp-buy {
    margin-left: 0;
    margin-right: 0;
  }

  /* Qué vas a aprender — en escritorio la columna de contenido ronda los
     700px y la lista quedaría en líneas de ~95 caracteres, muy por encima del
     rango 50–75 que fija §3.m. El tope va en la CELDA de texto y no en la
     sección, para que el numeral siga colgando en el margen izquierdo. */
  .pdp-learn h2 { font-size: 26px; }

  .pdp-learn li { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }

  .pdp-learn .num { font-size: 38px; margin-top: -6px; }

  .pdp-learn .txt { font-size: 18px; max-width: 62ch; }

  /* Para quién es — mismo tope de medida por la misma razón: en escritorio la
     columna ronda los 700px y las líneas se irían sobre los 90 caracteres. */
  .pdp-forwho > h2 { font-size: 24px; }
  .pdp-forwho > ul li,
  .pdp-notfor p:last-child { max-width: 64ch; }

  .pdp-learn h2 { font-size: 28px; }

  .pdp-buy {
    background: var(--white);
    border: 0;
    border-radius: var(--r-caja);
    box-shadow: var(--borde-caja);
    padding: 20px;
  }

  .pdp-head h1 { font-size: 42px; }
  .gal { max-width: 560px; }

  /* La variante de escritorio con foto a la izquierda se fue con la foto. El
     encolumnado en pantalla ancha lo pone ahora el propio `.bk-puente`. */

  /* En escritorio la barra fija no aporta: el CTA está siempre a la vista en
     la columna pegajosa. */
  .pdp-sticky { display: none; }
}