Arreglos pendientes · tema Rebeca Pal

Proyecto: Rebeca Pal · 02-tema/rebeca-pal (v0.2.1) · rama design-system-v3 Fecha: 2026-08-12 Referencia de diseño: 01-html/ y 01-html/RECETARIO.md (medidos contra Figma a 1280 y 375)

Cinco arreglos, cada uno con su diagnóstico y su prompt listo para pegar. Se pueden aplicar por separado, pero el orden recomendado es 1 → 3 → 2 → 5 → 4: primero el editor (para poder trabajar), luego la alineación, después las notas y las flechas, y al final la capa de editabilidad, que es la que más toca estructura.

#	Arreglo	Toca
1	Aislar la hoja del tema del chrome de Elementor	functions.php, style.css
2	Notas de “Frases”: el texto se sale del papel	style.css (opcional home.json)
3	Alineación del sitio contra el diseño	style.css
4	Lo que le falta al tema para ser editable	functions.php, plantillas, CPT
5	Flechas fuera y regla para el cuarto libro	editor, style.css, rp-carrusel.js

Bloqueos de contenido, independientes del código: sinopsis reales de Los siete suicidios capitales y Relatos inconscientes (las actuales las escribí yo, son de relleno), enlaces de compra de los tres libros, URLs de las cinco redes, página de Aviso de privacidad, y la portada de Siete suicidios en alta (300×473 hoy; la ficha pide 386×600).

---

Arreglo 1 · Aislar la hoja del tema del chrome de Elementor

Síntoma: el panel del editor de Elementor hereda la tipografía del sitio — etiquetas con 1.95px de tracking y el navegador “Estructura” ilegible (texto ciruela #3D192E sobre el panel negro de Elementor).

---

Prompt (pegar tal cual)

En el child theme 02-tema/rebeca-pal hay un bug de alcance de CSS: la hoja completa del tema se está inyectando en la interfaz del editor de Elementor, no sólo en la previsualización.

Causa. rebeca_pal_editor_styles() engancha get_stylesheet_uri() a elementor/editor/after_enqueue_styles. Como style.css trae reglas globales sin acotar, caen sobre el chrome del editor:

• body{ letter-spacing:1.95px } → el interletrado ancho de las etiquetas del panel
• body{ color:var(--rp-ciruela) } → texto ciruela sobre fondo negro, “Estructura” ilegible
• body{ font-size:15px; line-height:20px } → etiquetas apretadas
• html,body{ overflow-x:clip } → puede romper el scroll del panel
• img{ display:block; max-width:100% } → deforma miniaturas e iconos de Elementor

El enganche además es redundante: la previsualización es un iframe que ya carga el frontend por wp_enqueue_scripts. Lo único que el panel necesita de esa hoja son los @font-face, para que el control de Tipografía renderice Manrope, Lora y Nanum Pen Script.

Haz esto:

1. Mueve el bloque @font-face completo (las 12 declaraciones: Manrope 400–800, Lora 700 y 700 italic, Nanum Pen Script 400) de style.css a un archivo nuevo assets/css/rp-fonts.css. Conserva font-display:swap y los unicode-range de latin y latin-ext tal cual están.

2. En style.css, donde estaba el bloque, deja un comentario que apunte al archivo nuevo. No uses @import: se encola por separado.

3. En functions.php:

   • Registra y encola rp-fonts (assets/css/rp-fonts.css, versión RP_VERSION) en wp_enqueue_scripts, antes de rebeca-pal, y añádelo como dependencia de la hoja del tema.
   • Cambia rebeca_pal_editor_styles() para que encole sólo rp-fonts. Que deje de encolar get_stylesheet_uri().
   • Actualiza el comentario de esa función: hoy dice que mete la hoja del tema en el editor a propósito, y eso es justo lo que estamos corrigiendo.

4. Sube RP_VERSION y la cabecera Version: de style.css a 0.2.2.

5. Quita rp_probe_dev2() y su add_action( 'wp_footer', ... ): es código de depuración que no debe viajar al tema. Si lo quieres conservar, muévelo a un archivo aparte cargado sólo con WP_DEBUG.

Verifica, con Elementor abierto en la home:

• El panel izquierdo y el navegador “Estructura” se leen con la tipografía propia de Elementor, sin tracking heredado y con su contraste normal.
• El lienzo (el iframe de previsualización) sigue mostrando el sitio con Manrope, Lora y Nanum Pen Script correctamente.
• El control Tipografía del panel sigue ofreciendo y previsualizando las tres familias.
• view-source del frontend: rp-fonts.css se carga una sola vez y antes de style.css.

No toques tokens, escala tipográfica ni ninguna clase rp-*: los valores son los medidos contra Figma y son correctos. Este cambio es sólo de alcance.

---

Antes de aplicarlo: reconciliar las dos hojas

Hay un style.css en ~/Downloads que no coincide con el de la rama. Diferencias reales, no de formato:

	Rama (02-tema/rebeca-pal)	Copia de Downloads
Hero	horizontal por defecto, vertical sólo <480px	vertical 375/706 por defecto
Flechas de carrusel	tiene .rp-carrusel-nav (libros y frases)	sólo .rp-hero-nav
Grid de libros	repeat(3, minmax(0,1fr)), gap 20	repeat(3, 333px), gap 52
Notas	ancho 100%, sin offsets	334/340/352px con offsets individuales
Nota móvil	212px	302px
Breakpoint del orden móvil	max-width:1279px	max-width:1023px
Form de contacto	reglas de elementor-form-fields-wrapper	no las tiene

La de la rama es más nueva y trae trabajo hecho sobre WordPress real. Decide cuál manda antes de tocar nada, o el arreglo se aplicará sobre la versión equivocada.

---

Arreglo 2 · Las notas de “Frases”: el texto se sale del papel

Diagnóstico

El markup que sirve el sitio es una sección interna por nota:

section.rp-nota.rp-nota--1
└ .elementor-container
  └ .elementor-column
    └ .elementor-widget-wrap.elementor-element-populated
      ├ .elementor-widget-image      ← el papel (PNG)
      └ .rp-nota-texto               ← el texto, position:absolute

.rp-nota-texto se posiciona con inset:30% 9% 14% contra .rp-nota, pero el papel lo dibuja el widget de imagen, que vive dos niveles más adentro. Son dos cajas distintas: en cuanto el wrapper tiene padding propio, o el ancho de la columna cambia, la caja de texto deja de coincidir con el papel.

A eso se suma que la tipografía es fija (22px con 3.08px de tracking) mientras la nota es fluida (minmax(0,1fr)). Cuando la columna se angosta, el texto no cabe y, como el contenedor es display:flex; align-items:center, el sobrante se derrama arriba y abajo del papel. En la nota vino el texto es blanco: lo que se sale no se “corta”, se vuelve invisible sobre el fondo claro de la sección.

Medido sobre los PNG (760×1018), el papel ocupa:

	izquierda	derecha	arriba (bajo la pinza)	abajo
nota-oro.png	6.2%	93.3%	19.8%	99.5%
nota-vino.png	6.7%	94.5%	19.5%	100%

La inclinación no es la causa — el papel y el texto rotan juntos. Los ángulos (6.07° / −1.68° / 3.5°) son del diseño y se conservan.

El papel tampoco se puede generar en CSS: es una fotografía con textura de cartón y pinza metálica. Lo que sí pasa a CSS es la composición, para que papel y texto sean una sola caja por construcción.

Prompt (pegar tal cual)

En 02-tema/rebeca-pal/style.css, arregla las notas de la sección Frases: el texto se derrama fuera del papel porque su caja se posiciona contra .rp-nota mientras el papel lo dibuja un widget de imagen anidado, y porque la tipografía es fija (22px) dentro de una nota de ancho fluido.

Opción A — sin tocar tooling/build_v3/home.json (preferida): haz que la caja de texto se ancle al mismo elemento que contiene la imagen y que la tipografía escale con el ancho de la nota.

.rp-nota .elementor-widget-wrap{
  position:relative;
  padding:0;
  container-type:inline-size;   /* habilita las unidades cqw */
}
.rp-nota > .elementor-container{ width:100%; max-width:100%; }
.rp-nota .elementor-widget-image,
.rp-nota .elementor-widget-image .elementor-widget-container{ margin:0; }
 
.rp-nota .rp-nota-texto{
  position:absolute;
  inset:36% 11% 10%;            /* área útil del papel, bajo la pinza */
  display:flex; align-items:center; justify-content:center;
  text-align:center;
  font-family:var(--rp-font-mano);
  font-weight:400;
  font-size:7.3cqw;             /* = 22px cuando la nota mide 302px */
  letter-spacing:1.02cqw;       /* = 3.08px a 302px */
  line-height:1.05;
  overflow-wrap:break-word;
  color:var(--rp-nota-txt);
}

Borra --rp-nota-size y --rp-nota-ls de :root si dejan de usarse, y elimina la regla duplicada .rp-nota__texto (líneas ~296-306): es un resto del prototipo que ya no se aplica a este markup.

Opción B — si prefieres simplificar la estructura: en tooling/build_v3/home.json, sustituye por nota el par widget imagen + widget texto por un solo widget de texto con la clase rp-nota-papel, y en CSS pon el papel como fondo:

.rp-nota-papel{
  background-image:var(--papel);
  background-size:100% 100%;
  background-repeat:no-repeat;
  aspect-ratio:760/1018;
  padding:36% 11% 10%;
  /* …mismas propiedades de texto que arriba, font-size en cqw… */
}
.rp-nota--oro  .rp-nota-papel{ --papel:url(../nota-oro.png); }
.rp-nota--vino .rp-nota-papel{ --papel:url(../nota-vino.png); color:var(--rp-hueso); }

Es menos markup y elimina de raíz el desajuste entre las dos cajas, pero obliga a regenerar la home con build.py.

Además, en las dos opciones: las flechas del carrusel se están pintando encima de las notas en escritorio. Hoy sólo se ocultan por debajo de 767px, pero desde 768px el carrusel ya es una retícula estática y no hacen falta:

@media (min-width: 768px){ .rp-carrusel-nav{ display:none; } }

Verifica en Frases, a 375, 768, 1280 y 1920: el texto de las tres notas queda dentro del papel, el de la nota vino no se sale por la derecha, la inclinación se mantiene, y no hay flechas encima de las notas en escritorio.

Comprobado

Los valores de arriba están verificados renderizando las tres notas con esos insets y la tipografía en cqw, a ancho de columna completo y angosto: el texto entra en el papel en ambos casos. No pude medir el DOM del sitio en vivo (el navegador del entorno no alcanza rebecapal.local); el arreglo está diseñado para funcionar sin depender de cuál de las dos cajas esté desalineada.

---

Arreglo 3 · Alineación del sitio actual contra el diseño

Comprobado contra el DOM en vivo (curl https://rebecapal.local/): el contenido está completo — las tres portadas, la foto de “Yo soy”, el rp-cabeza y las tres notas existen en el HTML, y las clases-gancho rp-yosoy-* y rp-f-* están puestas. Lo que falla es CSS, no contenido.

Causa confirmada del desorden

En el bloque @media (max-width:1279px), display:contents se aplica sólo a .elementor-column. En el markup de Sections los widgets no cuelgan de la columna sino de .elementor-widget-wrap, así que los order:1…5 no operan sobre los widgets como se esperaba y el orden visual acaba siendo el del DOM por bloques.

Defectos observados (375 / ~768 / ~1024)

1. “Yo soy” en orden equivocado en las tres anchuras. Debe ser h2 → regla → bio → foto → párrafos. Hoy la bio y la foto salen arriba y el h2 cae después. La regla aparece encima del h2 cuando va debajo.
2. A 375 la foto de “Yo soy” deja un hueco en blanco — el elemento existe; revisar aspect-ratio + el width:calc(100% + gutter*2) del sangrado.
3. “LIBROS” y “OBRAS PUBLICADAS” salen pegados, sin la separación del diseño (27px en escritorio; en móvil el sub va en su propia línea).
4. Las tarjetas de libro se desalinean entre sí: los títulos de 2–3 líneas empujan género·año y el botón, y las tres columnas dejan de compartir línea base. En el mockup los tres botones están a la misma altura.
5. En tablet el título “FRASES” queda tapado por las notas, que se montan encima.
6. A ~1024 sale la hamburguesa en vez del menú horizontal; conviene fijar en qué ancho cambia (el diseño sólo define 1280 y 375).
7. rp-cabeza no se ve en escritorio aunque está en el DOM: comprobar que no lo recorte el overflow-x:clip de .rp-yosoy.

Prompt (pegar tal cual)

En 02-tema/rebeca-pal/style.css, corrige la alineación del sitio contra el diseño (01-html/ es la referencia; medidas en 01-html/RECETARIO.md).

1. Orden de “Yo soy”. display:contents está sólo en .elementor-column; los widgets cuelgan de .elementor-widget-wrap, así que los order no aplican. Aplícalo a los dos niveles:

   .rp-yosoy-grid > .elementor-container > .elementor-column,
   .rp-yosoy-grid > .elementor-container > .elementor-column > .elementor-widget-wrap{
     display:contents;
   }

   Haz lo mismo en .rp-footer-grid y .rp-ficha-grid, que tienen el mismo patrón. Verifica el orden resultante: h2 → regla → bio → foto → párrafos.
2. La regla va debajo del h2, no encima. Confirma que .rp-yosoy-regla queda con order:2 efectivo y con los 13px de separación del diseño.
3. Foto de “Yo soy” a 375: debe medir 375×423 a sangre, pegada a los dos bordes. Hoy deja un hueco.
4. Cabecera de Libros: 27px entre “LIBROS” y “OBRAS PUBLICADAS” en escritorio; apilados con 4px en móvil.
5. Tarjetas de libro alineadas entre sí: que género·año y el botón queden a la misma altura en las tres columnas aunque el título ocupe una o tres líneas (reserva de altura para el título, o subgrid/align-self:end en el botón).
6. Notas de Frases: aplica el Arreglo 2 de este documento; además asegúrate de que no se monten sobre el título “FRASES” en tablet.
7. rp-cabeza: debe verse solapando el borde entre “Yo soy” y “Libros” en escritorio. Revisa si lo recorta el overflow-x:clip de .rp-yosoy.
8. Menú: decide y documenta a qué ancho pasa a hamburguesa.

Verifica a 375, 768, 1024, 1280 y 1920, y compara cada sección contra la tabla de posiciones de 01-html/RECETARIO.md §7.

---

Arreglo 4 · Lo que le falta al tema para ser editable

Hoy la home es estática: las tres tarjetas de libro están escritas a mano en la plantilla de Elementor, no salen del CPT. Si Rebeca publica un cuarto libro, no aparece. Comprobado en el DOM: sin elementor-loop, sin clases type-libro, y los tres botones “Comprar” apuntan a #.

Lo que hay que pedir

Falta	Hoy	Debería
Listado de libros en la home	3 tarjetas escritas a mano	consulta al CPT libro, ordenada por año
Enlace de compra	los tres botones a #	campo rp_enlace_compra del CPT, y ocultar el botón si está vacío
Frases	3 textos fijos en la plantilla	CPT frase con campo de color de papel (oro/vino)
Redes sociales	5 enlaces fijos en el footer	página de opciones o menú, para editarlos sin abrir Elementor
Aviso de privacidad	texto plano sin enlace	página real + enlace
Sinopsis de dos libros	texto de relleno que escribí yo	contenido real de la autora
Portada de Siete suicidios	300×473	386×600 mínimo, que es lo que pide la ficha
Archivo de libros	no existe	plantilla de listado en /libro/
Cadenas en PHP	sin envolver	__() / esc_html__() con textdomain rebeca-pal

Prompt (pegar tal cual)

Haz el tema 02-tema/rebeca-pal realmente editable desde WordPress, sin que haya que abrir Elementor para cambiar contenido:

1. La home debe leer los libros del CPT. Sustituye las tres tarjetas estáticas por una consulta al CPT libro ordenada por el campo año descendente. Si usas Loop Grid de Elementor Pro, deja la plantilla de ítem versionada en tooling/build_v3/. Debe funcionar con 1, 2, 4 y 6 libros sin romper la retícula ni el carrusel móvil.
2. Conecta el botón Comprar al campo rp_enlace_compra del CPT, tanto en la tarjeta de la home como en la ficha. Si el campo está vacío, no pintes el botón.
3. CPT frase para las notas de Frases: título opcional, el texto en el editor, y un campo de color de papel (oro | vino). La sección debe pintarlas todas, rotándolas cíclicamente con los tres ángulos del diseño (6.07°, −1.68°, 3.5°).
4. Página de opciones del tema (o Customizer) para: los cinco enlaces de redes, el correo de contacto y la página de aviso de privacidad. Que el footer los lea de ahí.
5. Plantilla de archivo para /libro/, reusando la tarjeta de la home.
6. Estados límite: título de libro muy largo, libro sin portada, sección Frases vacía, un solo libro. Que ninguno rompa el layout.
7. Cadenas traducibles: envuelve todo texto de PHP con esc_html__() / __() y el textdomain rebeca-pal.
8. Documenta en el README qué se edita desde dónde: qué vive en el CPT, qué en opciones del tema, qué en Elementor y qué está en el CSS del tema.

Regla de fondo: si un dato lo va a cambiar la autora, no puede vivir dentro de una plantilla de Elementor.

---

Arreglo 5 · Flechas fuera y regla para el cuarto libro

Estado al redactar

Las reglas .rp-hero-nav y .rp-carrusel-nav ya no están en style.css (el archivo pasó de 711 a 684 líneas). Pero los botones siguen en la página: son widgets HTML añadidos a mano en el editor y no aparecen en tooling/build_v3/*.json, así que viven sólo en la base de datos. Nunca estuvieron conectados: rp-carrusel.js no tiene ningún manejador para esas clases.

Es el primer caso concreto del riesgo de tener la maqueta partida entre JSON y DB.

Qué dice el diseño sobre el número de obras

El patrón aparece dos veces —Libros y Frases— y es idéntico:

	Escritorio 1280	Móvil 375
Ítems visibles	3 de 3	1 de 3
Indicador	ninguno	3 puntos
Flechas	ninguna	ninguna

En móvil el diseño define carrusel con indicador que cuenta ítems: ya es N-ready, y rp-carrusel.js genera los puntos desde el número de hijos. En escritorio muestra el catálogo completo, sin interacción. Sobre un cuarto libro en escritorio el diseño no dice nada — los 333px sólo cuadran para tres. Es decisión, no dato.

Decisión tomada: filas de tres, sin slider en escritorio. Un catálogo de cuatro no es un problema de volumen; esconder el 25% detrás de una interacción cuesta descubrimiento a cambio de nada, e inventa UI que la clienta no ha visto. Se revisa a partir de ~9 títulos, donde el problema pasa a ser la longitud de la página y la salida correcta es un enlace al archivo /libro/, no un carrusel.

Prompt (pegar tal cual)

1. Quita las flechas de carrusel y de hero. No hacen nada: son widgets HTML puestos a mano en el editor y rp-carrusel.js no las escucha. Su CSS ya se retiró de style.css.

• Bórralas de la plantilla de la home en Elementor.
• Comprueba que no queden en tooling/build_v3/home.json (hoy no están) para que un build.py no las reintroduzca.
• Barre style.css y rp-carrusel.js por restos de rp-hero-nav y rp-carrusel-nav, incluido el comentario del JS que dice “y chevrones”.

2. La sección Libros debe crecer en filas de tres. Con el listado ya saliendo del CPT (Arreglo 4):

• Escritorio y tablet: repeat(3, minmax(0,1fr)), el cuarto ítem baja a una segunda fila alineado a la izquierda. Separación entre filas: 52px, igual que la columna (el diseño no la define; se fija aquí).
• Orden: año descendente, más reciente primero, como en el mockup (Vorágine 2022 → 2020 → 2020).
• Dentro de cada fila, género·año y el botón Comprar deben quedar a la misma altura aunque el título ocupe una o tres líneas. Con dos filas esto deja de ser cosmético.
• Móvil: sin cambios. El carrusel y los puntos ya escalan con el número de ítems.

3. No añadas slider, flechas ni paginación en escritorio. Si el catálogo llega a nueve títulos, la salida es un enlace “Ver todos” al archivo /libro/, no un carrusel.

Verifica la home con 3, 4, 5 y 6 libros publicados, a 375, 768, 1024 y 1280: la retícula no se rompe, la segunda fila respeta los 52px, los botones de cada fila quedan alineados, y en móvil hay tantos puntos como libros.