Prompt · Actualizar 02-tema/rebeca-pal al system design v3

Autocontenido: lleva dentro todos los valores medidos, así funciona en una sesión en frío. Referencia larga en 01-html/RECETARIO.md.

---

Prompt (pegar tal cual)

Actualiza el child theme de Hello Elementor en 02-tema/rebeca-pal/ (hoy v0.1.0, style.css + functions.php) al system design v3. El tema quedó desfasado: declara Jost / Cormorant Garamond / Ms Madi, --rp-ciruela #3C192D, --rp-texto #463E42, --rp-hueso #F4EFE9 y content width 1140 — todo eso cambió.

La fuente de verdad es el prototipo 01-html/ (index.html, voragine.html, siete-suicidios.html, relatos-inconscientes.html, assets/rp.css, assets/rp.js), validado pixel a pixel contra los mockups de Figma en 1280 y 375. Cuando dudes, copia de assets/rp.css; no inventes valores intermedios.

1. Tipografías

Fuera Jost, Cormorant Garamond y Ms Madi. Entran:

• Manrope 400/500/600/700/800 — UI y cuerpo
• Lora 700 y 700 italic — título de libro y bio
• Nanum Pen Script 400 — notas de la sección Frases

Descárgalas y sírvelas locales desde assets/fonts/: genera los @font-face con font-display:swap y unicode-range latin + latin-ext, borra la constante RP_FONTS_URL y toda llamada a fonts.googleapis.com (también la del hook elementor/editor/after_enqueue_styles, que debe encolar la hoja local). Precarga sólo Manrope 500 y Manrope 800.

2. Tokens de color (reemplazar los del :root actual)

--rp-oro:        #B9AE5E   barra del header
--rp-oro-txt:    #7D6C3E   bio, título de libro, género·año, "obras publicadas"
--rp-vino:       #55191B   botones
--rp-borgona:    #600912   regla bajo "Yo soy"
--rp-ciruela:    #3D192E   titulares, CUERPO y fondo del footer
--rp-hueso:      #F8F8F6   fondo de sección y caja de portada
--rp-blanco:     #FFFFFF
--rp-input:      #D9D9D9   campo de contacto
--rp-input-txt:  #8E848B
--rp-nota-txt:   #432A37   texto de la nota dorada

Elimina --rp-texto y --rp-meta: el cuerpo va en ciruela y los metadatos en oro. Actualiza el comentario del kit al principio de functions.php, que sigue citando los colores viejos.

3. Escala tipográfica, dos breakpoints

Valores mobile en :root, desktop en @media (min-width:1024px). Nada de clamp() interpolado: el diseño está fijado en 375 y 1280 y así se verifica.

Rol	Desktop 1280	Mobile 375
H2 de sección	Manrope 800 · 40px · ls 5.2px · lh 43px	igual · footer 30px / ls 3.9px
Nav	Manrope 800 · 20px · ls 2.6px	oculto (hamburguesa)
Cuerpo	Manrope 500 · 22px · ls 2.86px · lh 30px	15px · ls 1.95px · lh 20px
Bio (sans)	Manrope 500 · 20px · ls 1.26px · lh 24.5px	14px · ls 1.8px · lh 20px
Bio (remate)	Lora 700 italic · 20px · ls 2.6px	igual
”Obras publicadas”	Manrope 700 · 25px · ls 3.25px	21px · ls 2.7px
Título de libro	Lora 700 · 20px · ls 0 · mayúsculas	igual
Género · año	Manrope 700 · 15px · ls 1.4px	igual
Botón	Manrope 600 · 21.25px · alto 47px	18px · alto 38px
Nota (Frases)	Nanum Pen Script 400 · 22px · ls 3.08px · lh 1.05	igual
Legal	Manrope 400 · 11px · lh 19px	igual

Ojo: el letter-spacing del body se hereda y ensancha los títulos Lora 23px. Van con letter-spacing:0 explícito.

4. Layout

• Content width 1100px (no 1140). Actualiza rebeca_pal_content_width() y el comentario del kit.
• Gutter: 25px en el main móvil, 40px en el footer móvil, 90px en desktop.
• Alto del header: 110px desktop / 108px mobile.
• Fondos alternos de sección: hero blanco → Yo soy #F8F8F6 → Libros #FFFFFF → Frases #F8F8F6 → footer #3D192E.
• La caja tras cada portada es #F8F8F6 de 333×412 con padding 35/55 y sin sombra (borra cualquier --rp-sombra-*).

5. Global Styles de Elementor

En functions.php, registra Global Colors y Global Typography por código (hook elementor/init o el kit por defecto) para que salgan nombrados en el panel: colores Oro, Oro texto, Vino, Borgoña, Ciruela, Hueso, Blanco; tipografías “Título de sección”, “Nav”, “Cuerpo”, “Bio”, “Título de libro”, “Género y año”, “Botón”, “Nota”, “Legal”. Deja el mapeo token → global en un comentario.

6. Clases utilitarias rp-*

Porta desde assets/rp.css sólo lo que Elementor va a usar como CSS Class de widget, funcionando suelto dentro de cualquier contenedor: .rp-titulo-seccion, .rp-btn, .rp-btn--vino, .rp-btn--hueso, .rp-bio, .rp-libro-titulo, .rp-libro-meta, .rp-nota, .rp-puntos, .rp-regla.

7. CPT libro

Registra el CPT libro (público, con archivo, soporta title / editor / thumbnail / excerpt) y los metadatos con register_post_meta y show_in_rest para leerlos desde Elementor: género, año, enlace de compra, portada grande. Slugs esperados: voragine, siete-suicidios, relatos-inconscientes.

8. single-libro.php

Réplica exacta de 01-html/voragine.html:

• Desktop: grid 496px 549px, gap 60. Izquierda portada 386×600 (margen izquierdo 49px) y debajo el botón Comprar 210×71 con fuente 26px. Derecha: h1 Manrope 800 50px ls 6.5px en versalitas, género·año Manrope 700 24px ls 3.1px en --rp-oro-txt, y la descripción Manrope 500 20px / lh 25px. Sin “Leer más” en desktop.
• Mobile: una columna, orden portada → título → género·año → texto → “Leer más” → Comprar. Portada 250×388 centrada, h1 39px ls 5px.
• Títulos largos: aplica la clase es-largo al h1 cuando el título pase de 16 caracteres (28px mobile / 44px desktop).
• El footer de la ficha es el mismo del home (Theme Builder, no duplicado).

El home lo arma Elementor: deja los estilos listos pero no generes front-page.php.

9. Carruseles móviles

Porta 01-html/assets/rp.js a assets/js/rp-carrusel.js, encolado con defer y sin dependencias. Debe seguir operando sobre cualquier contenedor con data-carrusel + data-puntos, para que también funcione si el listado de libros lo arma un Loop Grid de Elementor. Comportamiento: una tarjeta a la vez con scroll-snap y puntos que marcan posición; en ≥768px el carrusel pasa a grid y los puntos se ocultan.

10. Assets

Copia a 02-tema/rebeca-pal/assets/: logo-header.png (620×106, se muestra a 53px de alto desktop / 45px mobile), firma.svg (179×48 → 245px desktop, 224px centrada en mobile), hero.jpg, yo-soy.jpg, cabeza-texto.png, nota-oro.png, nota-vino.png. Las portadas de los libros no van en el tema: van a la biblioteca de medios como thumbnail del CPT.

11. Header y footer con Theme Builder

No los hagas en PHP. Documenta en el README del tema cómo montarlos: header 110/108px con fondo --rp-oro, logo a la izquierda (centrado en mobile, nav en hamburguesa), nav Manrope 800 20px ls 2.6px en --rp-ciruela; footer --rp-ciruela con redes en space-between y filete inferior en desktop, en columna en mobile, y la firma 245px arriba a la derecha / 224px centrada abajo en mobile.

12. Entrega

• README.md del tema: tokens, escala, clases rp-*, campos del CPT y los pasos de Theme Builder del punto 11.
• Sube la versión a 0.2.0 (constante RP_VERSION y cabecera de style.css).
• Regenera 02-tema/rebeca-pal.zip.
• Termina listando qué queda por hacer a mano en el admin de WordPress.

Restricciones: sin librerías externas ni peticiones a CDNs, compatible con PHP 7.4, no toques hello-elementor, y conserva el estilo de comentarios en español que ya tiene style.css.

---

Pendientes de contenido (no bloquean el tema, sí el lanzamiento)

• Sinopsis reales de Los siete suicidios capitales y Relatos inconscientes (las de 01-html/ las escribí yo, son provisionales).
• URLs de compra de los tres libros.
• URLs reales de las cinco redes.
• Texto y página de “Aviso de privacidad”.
• Portada de Los siete suicidios capitales en alta: la actual es 300×473 y la ficha la pide a 386×600.