/*
Theme Name: Proyecto David · GP
Theme URI: https://santswebdesign.com
Description: Tema hijo de GeneratePress para la web de David Garcia-Carazo, cruise director.
Registro visual tomado de swd-new (santswebdesign.com) con la paleta de David.
Reescrito el 12/09/2026. Los valores estan medidos sobre swd-new, no inventados.
Author: Sants Web Design
Author URI: https://santswebdesign.com
Template: generatepress
Version: 2.0.0
Text Domain: proyecto-david-gp
*/
/* ==========================================================================
1 · FUENTES · Montserrat, las mismas tres de swd-new
33 KB entre las tres, ya subconjuntadas.
========================================================================== */
@font-face {
font-family: "Montserrat";
src: url("assets/fonts/montserrat-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("assets/fonts/montserrat-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Montserrat";
src: url("assets/fonts/montserrat-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ==========================================================================
2 · TOKENS
Los COLORES los emite GeneratePress desde los colores globales que define
functions.php, como --contrast, --base-2, --accent. Aqui no se repiten.
========================================================================== */
:root {
--pd-fuente: "Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
--pd-medio: 600;
--pd-fuerte: 700;
/* --- medidas tomadas de swd-new --- */
--pd-ancho: 1140px;
--pd-texto: 68ch;
--pd-radio: 12px;
--pd-radio-boton: 6px;
--pd-sombra: 0 2px 8px rgba(18, 41, 61, 0.08);
--pd-sombra-alta: 0 6px 18px rgba(18, 41, 61, 0.12);
/* --- espacio --- */
--e-3xs: 4px;
--e-2xs: 8px;
--e-xs: 12px;
--e-s: 16px;
--e-m: 24px;
--e-l: 40px;
--e-xl: 64px;
--e-seccion: 48px; /* movil. Sube a 64 en pantalla ancha, como swd-new */
--margen-lateral: 20px;
--transicion: 180ms ease-out;
}
@media (min-width: 768px) {
:root {
--margen-lateral: 32px;
--e-seccion: 64px;
}
}
/* ==========================================================================
3 · BASE
========================================================================== */
body,
button,
input,
select,
textarea {
font-family: var(--pd-fuente);
font-size: 17px;
line-height: 1.5;
}
body {
color: var(--contrast-2);
background-color: var(--base-3);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
font-family: var(--pd-fuente);
font-weight: var(--pd-fuerte);
color: var(--contrast);
text-wrap: balance;
letter-spacing: 0;
}
h1 {
font-size: clamp(30px, 4.4vw, 46px);
line-height: 1.2;
}
/* El titular de seccion va CENTRADO y con aire debajo, que es la marca de
swd-new. 31 px medidos, 64 de separacion. */
h2 {
font-size: clamp(25px, 3vw, 31px);
line-height: 1.3;
text-align: center;
margin-bottom: var(--e-xl);
}
h3 {
font-size: 18px;
line-height: 1.35;
margin-bottom: var(--e-xs);
}
h4 {
font-size: 17px;
line-height: 1.4;
margin-bottom: var(--e-2xs);
}
h5, .pd-etiqueta {
font-size: 13px;
font-weight: var(--pd-medio);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--e-2xs);
}
p { margin-bottom: var(--e-s); }
p:last-child { margin-bottom: 0; }
/* Ningun parrafo pasa de 72 caracteres, ni dentro de una tarjeta ancha.
Sin esto la trayectoria llegaba a 82 y el "para quien" a 101. */
.pd-seccion p:not(.pd-intro):not(.pd-etiqueta):not(.pd-cifra) {
max-width: 72ch;
}
.pd-entradilla {
font-size: 19px;
line-height: 1.6;
color: var(--contrast-2);
}
.pd-secundario,
figcaption {
font-size: 15px;
line-height: 1.5;
color: var(--contrast-3);
}
a {
color: var(--accent);
text-decoration: none;
transition: color var(--transicion);
}
a:hover { color: var(--contrast); text-decoration: underline; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* Texto corrido centrado bajo un titular de seccion, como en swd-new */
.pd-intro {
max-width: 62ch;
margin-inline: auto;
text-align: center;
margin-top: calc(var(--e-xl) * -1 + var(--e-m));
margin-bottom: var(--e-xl);
color: var(--contrast-2);
}
/* ==========================================================================
4 · SECCIONES · blanco y hueso alternando, como swd-new alterna
blanco y su azul palido
========================================================================== */
/* GeneratePress mete 40 px arriba y abajo en CADA .wp-block-group__inner-container,
ENCIMA del relleno que pone el sistema. O sea que un "64/64" eran 104/104 de
verdad.
VA SIN `>` A PROPOSITO. Con el selector de hijo directo solo se arreglaba la
seccion, y cada grupo ANIDADO —una tarjeta, un modulo del temario, la lista
de clases— seguia metiendo sus 40+40. En el temario eran 80 px muertos
debajo del video, que es lo que se veia como "demasiado aire".
El relleno vertical lo ponen las clases del sistema, nunca el envoltorio. */
.pd-seccion .wp-block-group__inner-container,
.pd-franja .wp-block-group__inner-container,
.pd-hero .wp-block-group__inner-container {
/* padding, no padding-block. El envoltorio tambien mete 40 px A LOS LADOS,
y con dos grupos anidados son 160 px que a 390 de ancho dejaban la
tarjeta del temario en 230 y el video en 60. El margen lateral lo pone
.alignfull, aqui no hace falta ninguno. */
padding: 0;
}
.pd-seccion { padding-block: var(--e-seccion); }
/* En este registro la cabecera de seccion va centrada — la etiqueta, el
titular y el parrafo de entrada. Las tarjetas y las listas de debajo van
alineadas a la izquierda, que es como lo hace swd-new. */
.pd-seccion > .wp-block-group__inner-container > .pd-etiqueta,
.pd-seccion > .pd-etiqueta {
text-align: center;
}
/* --- el video de la home ---
A 1140 px de ancho era un bloque enorme sin contexto y se comia la seccion.
En dos columnas mide la mitad, el titular va a su lado y deja de ser un
trozo de YouTube pegado en medio de la pagina. */
.pd-video__fila { gap: var(--e-xl); align-items: center; }
.pd-video__fila .pd-video__titulo {
text-align: left;
margin-bottom: var(--e-s);
}
.pd-video__fila .pd-etiqueta { text-align: left; }
.pd-video__fila p + p { margin-top: var(--e-s); }
@media (min-width: 900px) {
.pd-video__fila { grid-template-columns: 0.85fr 1.15fr; }
}
.pd-cierre p,
.pd-escalas > .wp-block-group__inner-container > p:not(.pd-globo__pie),
.pd-trayectoria > .wp-block-group__inner-container > p {
text-align: center;
max-width: 62ch;
margin-inline: auto;
}
.pd-cierre .wp-block-buttons,
.pd-escalas .wp-block-buttons {
justify-content: center;
}
.pd-navieras__titulo { margin-top: var(--e-l); }
/* El inner-container de un grupo lleva is-layout-constrained y recorta a sus
hijos al ancho de contenido, dejando las tarjetas 80px mas estrechas que la
seccion. Aqui se quita, que las tarjetas ocupan la caja entera. */
.pd-hitos > .wp-block-group__inner-container > *,
.pd-temario__lista > .wp-block-group__inner-container > * {
max-width: none;
}
/* Una lista de ventajas a 1140px de ancho no se lee. Dos columnas y centrada. */
.pd-incluye .pd-lista {
max-width: 800px;
margin-inline: auto;
}
@media (min-width: 700px) {
.pd-incluye .pd-lista {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--e-l);
}
}
.pd-fondo-hueso { background-color: var(--base-2); }
.pd-fondo-blanco { background-color: var(--base-3); }
.pd-fondo-tinta {
background-color: var(--contrast);
color: var(--base-2);
}
.pd-fondo-tinta h1,
.pd-fondo-tinta h2,
.pd-fondo-tinta h3,
.pd-fondo-tinta h4 { color: #FFFFFF; }
.pd-fondo-tinta .pd-etiqueta { color: var(--accent-claro); }
.pd-fondo-tinta a { color: var(--accent-claro); }
/* El parrafo de entrada centrado hereda el gris de cuerpo, que sobre tinta
es ilegible. Sobre oscuro va en hueso claro. */
.pd-fondo-tinta .pd-intro,
.pd-fondo-tinta p { color: #E7E2DA; }
/* ==========================================================================
5 · TARJETAS · la pieza central del registro de swd-new
Fondo blanco, filete de 3 px del acento arriba, borde fino alrededor,
radio de 12 y una sombra suave y unica.
========================================================================== */
.pd-tarjeta {
background-color: var(--base-3);
border: 1px solid var(--base);
border-top: 3px solid var(--accent);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
padding: 26px;
height: 100%;
transition: box-shadow var(--transicion), transform var(--transicion);
}
.pd-tarjeta:hover {
box-shadow: var(--pd-sombra-alta);
}
/* Variante sin filete de acento, para cuando hay muchas juntas y el rojo
—aqui el laton— cansaria. */
.pd-tarjeta--lisa {
border-top: 1px solid var(--base);
}
/* La destacada de un grupo de tres, como el pack del medio en swd-new */
.pd-tarjeta--destacada {
border: 1px solid var(--accent);
border-top: 3px solid var(--accent);
box-shadow: var(--pd-sombra-alta);
}
.pd-tarjeta h3 { color: var(--contrast); }
.pd-tarjeta p { color: var(--contrast-2); }
/* Rejilla de tarjetas */
.pd-rejilla {
display: grid;
gap: var(--e-m);
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .pd-rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .pd-rejilla--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pd-rejilla--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 700px) { .pd-rejilla--4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .pd-rejilla--4 { grid-template-columns: repeat(4, 1fr); } }
/* ==========================================================================
6 · BOTONES
========================================================================== */
.wp-block-button__link,
.pd-boton,
.gb-button {
display: inline-block;
font-family: var(--pd-fuente);
font-size: 17px;
font-weight: var(--pd-fuerte);
line-height: 1.4;
padding: 14px 28px;
border-radius: var(--pd-radio-boton);
border: 2px solid transparent;
text-decoration: none;
transition: background-color var(--transicion), color var(--transicion),
border-color var(--transicion);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.pd-boton--1 {
background-color: var(--accent);
color: #FFFFFF;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.pd-boton--1:hover {
background-color: var(--contrast);
color: #FFFFFF;
text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link,
.pd-boton--2 {
background-color: transparent;
color: var(--contrast);
border-color: var(--contrast);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.pd-boton--2:hover {
background-color: var(--contrast);
color: #FFFFFF;
text-decoration: none;
}
/* Sobre cualquier fondo oscuro el boton fantasma va en blanco.
La portada tambien es fondo oscuro aunque no lleve la clase pd-fondo-tinta,
y sin incluirla aqui salia tinta sobre tinta, o sea invisible. */
.pd-fondo-tinta .wp-block-button.is-style-outline .wp-block-button__link,
.pd-hero .wp-block-button.is-style-outline .wp-block-button__link {
color: #FFFFFF;
border-color: #FFFFFF;
}
.pd-fondo-tinta .wp-block-button.is-style-outline .wp-block-button__link:hover,
.pd-hero .wp-block-button.is-style-outline .wp-block-button__link:hover {
background-color: #FFFFFF;
color: var(--contrast);
}
.wp-block-buttons {
display: flex;
flex-wrap: wrap;
gap: var(--e-s);
}
@media (max-width: 700px) {
.wp-block-buttons .wp-block-button,
.wp-block-button__link { width: 100%; text-align: center; }
}
/* ==========================================================================
7 · PORTADA · fotografia con velo oscuro y texto encima, como swd-new
========================================================================== */
.pd-hero {
position: relative;
background-color: var(--contrast);
background-size: cover;
background-position: center;
color: var(--base-2);
overflow: hidden;
}
.pd-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
100deg,
rgba(10, 28, 43, 0.94) 0%,
rgba(18, 41, 61, 0.86) 46%,
rgba(18, 41, 61, 0.62) 100%
);
}
.pd-hero > * { position: relative; }
.pd-hero h1 { color: #FFFFFF; margin-bottom: var(--e-m); }
.pd-hero .pd-etiqueta { color: var(--accent-claro); }
.pd-hero .pd-entradilla {
color: #E7E2DA;
max-width: 56ch;
margin-bottom: var(--e-l);
}
.pd-hero--home { padding-block: clamp(72px, 12vh, 128px); }
.pd-hero--interior { padding-block: clamp(56px, 9vh, 88px); }
/* LA FOTO DEL BARCO, 03/10/2026.
-------------------------------------------------------------------------
El hero ya estaba preparado para esto desde el primer dia — el ::before de
arriba es el velo oscuro y nunca hubo foto debajo. Solo faltaba la imagen.
La aporto David por correo el 27/09. Es de 1280x720, asi que en un monitor
de 1920 se amplia y se ablanda; con el velo encima apenas se nota, pero si
algun dia manda una mas grande, se cambia aqui y ya esta.
DOS TAMAÑOS. 1280 para escritorio y 800 por debajo de 768, donde el ancho
util son 390 px y mandar la grande es tirar 110 KB al visitante. */
.pd-hero--home {
background-image: url("assets/img/hero-barco.jpg");
}
/* EL VELO, MAS DENSO SOLO AQUI.
-------------------------------------------------------------------------
El velo general vale sobre el azul liso de los heros interiores, pero sobre
la fotografia se queda corto. Medido sobre la captura real, con el texto
oculto para leer el fondo de debajo:
etiqueta dorada 4,04:1 en escritorio y 4,27 en movil, hace falta 4,5
entradilla 4,22:1 en movil, hace falta 4,5
Va en .pd-hero--home y no en .pd-hero para no oscurecer las portadas
interiores, que estan aprobadas y no llevan foto.
SE PROBO ALIGERARLO EL 05/10/2026 Y MARC LO DESCARTO. Queda la escala
medida por si alguien vuelve sobre esto, que ahorra repetir la prueba —
lo que marca el limite es la etiqueta dorada, que a 13 px pide 4,5:1
mientras al titular de 46 le piden 3.
0,96 / 0,92 / 0,78 ... 5,29:1 el que hay
0,93 / 0,89 / 0,74 ... 4,84:1
0,92 / 0,88 / 0,72 ... 4,64:1 pasa con un 3 % de margen
0,89 / 0,84 / 0,66 ... 4,10:1 NO CUMPLE
Y abrir SOLO el lado derecho sale gratis de contraste, porque todo el
texto vive en la mitad izquierda — la etiqueta acaba en el 27 % del hero,
el titular en el 38 % y la entradilla en el 47 %. Tambien se probo y
tampoco convencio. */
.pd-hero--home::before {
background: linear-gradient(
100deg,
rgba(10, 28, 43, 0.96) 0%,
rgba(12, 32, 48, 0.92) 46%,
rgba(12, 32, 48, 0.78) 100%
);
}
@media (max-width: 767px) {
.pd-hero--home {
background-image: url("assets/img/hero-barco-800.jpg");
/* En vertical la foto se recorta mucho. Desplazada a la derecha se ve
el barco grande en vez del muelle vacio de la izquierda. */
background-position: 68% center;
}
/* En movil el texto ocupa el ancho entero, asi que el degradado deja de
tener sentido en diagonal y pasa a vertical.
Y se abre abajo. Con el velo parejo que hacia falta para el contraste,
el barco desaparecia y la portada quedaba un panel azul liso. Debajo de
los botones no hay texto, asi que ahi el velo baja a 0,55 y se ve el
barco sin tocar ni un ratio. El corte del 80 % esta medido — los botones
acaban antes. */
.pd-hero--home::before {
background: linear-gradient(
180deg,
rgba(10, 28, 43, 0.94) 0%,
rgba(10, 28, 43, 0.93) 72%,
rgba(10, 28, 43, 0.88) 80%,
rgba(10, 28, 43, 0.55) 100%
);
}
}
/* La franja de credibilidad justo debajo de la portada. En swd-new lleva las
resenas; aqui lleva las tres cifras, que es lo que David tiene. */
/* Franja de credibilidad. Es una tira, no una seccion — tiene que leerse de
un vistazo al pasar, no invitar a pararse. 20 arriba y abajo. */
.pd-franja {
background-color: var(--base-2);
border-bottom: 1px solid var(--base);
padding-block: 20px;
}
.pd-franja__fila {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--e-s);
text-align: center;
}
.pd-franja .pd-cifra {
font-size: clamp(26px, 3.4vw, 34px);
font-weight: var(--pd-fuerte);
line-height: 1.1;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin-bottom: 2px;
}
.pd-franja .pd-secundario { font-size: 14px; }
/* ==========================================================================
8 · LISTAS DE VENTAJAS · vinetas con marca del acento
========================================================================== */
.pd-lista {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--e-xs);
}
.pd-lista li {
position: relative;
padding-left: 30px;
line-height: 1.5;
}
/*
* Check en vez de circulo.
* Va como MASCARA y no como background-image con el color dentro del SVG,
* porque un data URI no puede leer var(--accent). Con mask el color sigue
* saliendo del token y la paleta no se duplica.
*/
.pd-lista li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 20px;
height: 20px;
background-color: var(--accent);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Sobre fondo oscuro el check va en el laton claro, que es el que contrasta */
.pd-fondo-tinta .pd-lista li::before,
.pd-hero .pd-lista li::before { background-color: var(--accent-claro); }
/* ==========================================================================
9 · TABLA COMPARATIVA Y TEMARIO
========================================================================== */
.pd-tabla-wrap { overflow-x: auto; }
.pd-tabla {
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
background-color: var(--base-3);
border: 1px solid var(--base);
border-radius: var(--pd-radio);
overflow: hidden;
box-shadow: var(--pd-sombra);
font-variant-numeric: tabular-nums;
}
.pd-tabla th,
.pd-tabla td {
padding: var(--e-s) var(--e-m);
text-align: left;
border-bottom: 1px solid var(--base);
vertical-align: top;
}
.pd-tabla thead th {
background-color: var(--contrast);
color: #FFFFFF;
font-size: 14px;
font-weight: var(--pd-medio);
letter-spacing: 0.04em;
text-transform: uppercase;
border-bottom: 0;
}
.pd-tabla tbody tr:last-child td { border-bottom: 0; }
/* El temario, un modulo por tarjeta */
.pd-modulo {
background-color: var(--base-3);
border: 1px solid var(--base);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
padding: var(--e-m);
margin-bottom: var(--e-s);
}
.pd-modulo__num {
font-size: 13px;
font-weight: var(--pd-medio);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: var(--e-3xs);
}
.pd-modulo__titulo { font-size: 18px; margin-bottom: var(--e-2xs); }
/* --- las clases, cada una un desplegable con su video --- */
.pd-clases {
margin-top: var(--e-s);
border-top: 1px solid var(--base);
}
.pd-clase { border-bottom: 1px solid var(--base); }
.pd-clase > summary {
display: flex;
align-items: center;
gap: var(--e-s);
padding-block: var(--e-xs);
padding-inline-end: var(--e-s);
cursor: pointer;
list-style: none;
color: var(--contrast-2);
font-size: 16px;
font-variant-numeric: tabular-nums;
transition: color var(--transicion);
}
.pd-clase > summary::-webkit-details-marker { display: none; }
/* La flecha, dibujada. Gira al abrir. */
.pd-clase > summary::before {
content: "";
flex: none;
width: 10px;
height: 10px;
border-right: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
transform: rotate(-45deg);
transition: transform var(--transicion);
}
.pd-clase[open] > summary::before { transform: rotate(45deg); }
.pd-clase > summary:hover { color: var(--contrast); }
.pd-clase > summary:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* El aire dentro de la clase abierta.
Estaba al reves — el video PEGADO al sumario a 0 px y 130 px muertos
debajo, porque el grupo de bloques anade su propio hueco entre hijos y el
details trae margen propio. Se anulan los dos y se pone el aire a mano. */
.pd-clases > *,
.pd-clase { margin-block: 0; }
/* El video se ALINEA CON EL TITULO DE SU CLASE, no con el borde de la tarjeta.
Sangrado de 26 px, que es lo que ocupan la flecha y su hueco. Asi se lee
como contenido que cuelga de esa clase, que es lo que es.
Antes arrancaba a la izquierda del propio titulo y no cuadraba con nada. */
.pd-clase .wp-block-embed {
margin-block: var(--e-s) var(--e-m);
margin-inline-start: 26px;
max-width: 880px;
}
/* En movil no hay sitio para sangrar. Ocupa todo el ancho de la tarjeta. */
@media (max-width: 700px) {
.pd-clase .wp-block-embed {
margin-inline-start: 0;
max-width: none;
}
}
/* Un poco menos de relleno en el modulo. Con el desplegable cerrado la
tarjeta respiraba de sobra. */
.pd-modulo { padding: var(--e-m) var(--e-m) var(--e-s); }
/* ==========================================================================
10 · TRAYECTORIA · tarjetas con la fecha en el acento
========================================================================== */
.pd-hito {
background-color: var(--base-3);
border: 1px solid var(--base);
border-left: 3px solid var(--accent);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
padding: var(--e-m);
margin-bottom: var(--e-s);
}
.pd-hito__fecha {
font-size: 14px;
font-weight: var(--pd-fuerte);
letter-spacing: 0.04em;
color: var(--accent);
font-variant-numeric: tabular-nums;
margin-bottom: var(--e-3xs);
}
.pd-hito__puesto { font-size: 18px; margin-bottom: var(--e-2xs); }
.pd-hito p { color: var(--contrast-2); }
.pd-navieras {
text-align: center;
max-width: 60ch;
margin-inline: auto;
color: var(--contrast-2);
/* REPARTE LOS RENGLONES PARA QUE NO QUEDE UNA PALABRA SOLA.
Al entrar MSC el 05/10 la lista paso de dos renglones a tres y
«Cruises», de «Mano Cruises», se quedo colgando sola en el ultimo.
`balance` reparte el texto en renglones de ancho parecido en vez de
llenar cada uno hasta el borde, que es justo lo que evita la viuda.
Solo actua hasta seis renglones por norma, de sobra aqui. */
text-wrap: balance;
}
/* ==========================================================================
11 · IMAGENES
========================================================================== */
.entry-content img,
.wp-block-image img {
border-radius: var(--pd-radio);
display: block;
}
.pd-r-retrato img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.pd-r-escena img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.pd-r-video { aspect-ratio: 16 / 9; }
.wp-block-embed iframe {
border-radius: var(--pd-radio);
display: block;
width: 100%;
}
/* ==========================================================================
12 · CABECERA Y NAVEGACION
========================================================================== */
.site-header {
background-color: var(--contrast);
border-bottom: 0;
}
.main-navigation { background-color: transparent; }
.site-branding .main-title {
font-size: 19px;
font-weight: var(--pd-fuerte);
letter-spacing: 0;
}
.site-branding .main-title a { color: #FFFFFF; }
.site-description { color: var(--apoyo-oscuro); font-size: 13px; }
.main-navigation a {
font-size: 15px;
font-weight: var(--pd-medio);
color: #FFFFFF;
}
.main-navigation .main-nav ul li:not(.pd-cta) > a:hover,
.main-navigation .main-nav ul li.current-menu-item:not(.pd-cta) > a {
color: var(--accent-claro);
}
/* La cabecera alinea por el centro. GeneratePress la deja en display:block
con floats, y asi la marca (42 px) y el menu (80 px) no compartian eje —
el logotipo quedaba pegado arriba y el menu colgando. */
/* El contenido de la cabecera cae en el MISMO eje que el de las secciones.
Va con `body .site-header` porque GeneratePress fija el ancho con
`body .grid-container { max-width: 1140px }`, que tiene mas especificidad
que un `.inside-header` a secas y me lo estaba ganando. */
body .site-header .inside-header {
display: flex;
align-items: center;
gap: var(--e-m);
box-sizing: border-box;
max-width: calc(var(--pd-ancho) + var(--margen-lateral) * 2);
padding-inline: var(--margen-lateral);
}
/* GeneratePress lleva un clearfix con ::before y ::after en .inside-header.
Al pasar el contenedor a flex esos DOS PSEUDOELEMENTOS SE CONVIERTEN EN
ITEMS DEL FLEX, y con el gap de 24 px empujaban el contenido 24 por cada
lado. Ese era el desfase que quedaba contra el resto de la pagina. */
body .site-header .inside-header::before,
body .site-header .inside-header::after {
display: none;
}
body .site-header .site-branding { padding: 0; }
.inside-header .site-branding { float: none; }
/* margin-left auto en vez de justify-content. Es lo unico que no depende de
que gane mi regla contra la de GeneratePress — con space-between los dos
bloques me salian centrados, repartidos a tercios. */
.inside-header .main-navigation {
float: none;
margin-inline-start: auto;
}
.main-navigation .main-nav ul li.pd-cta > a {
background-color: var(--accent);
color: #FFFFFF;
border-radius: var(--pd-radio-boton);
margin-inline-start: var(--e-s);
/* Sin padding vertical propio. La altura la da menu_item_height, 44 px,
igual que el resto de enlaces. Con 10 px arriba y abajo el boton se iba
a 80 y era el elemento mas alto de la cabecera. */
padding-block: 0;
line-height: 44px;
}
.main-navigation .main-nav ul li.pd-cta > a:hover {
background-color: #FFFFFF;
color: var(--contrast);
}
/* --- selector de idioma, dentro del menu --- */
.main-navigation .main-nav ul li.pd-idioma > a {
font-size: 13px;
font-weight: var(--pd-fuerte);
letter-spacing: 0.06em;
color: var(--apoyo-oscuro);
padding-inline: 8px;
}
/* El respiro entre el boton y el primer idioma.
ANTES ERA `li.pd-idioma:first-of-type` y NO PINTABA NADA. `:first-of-type`
no mira la clase, mira el tipo — pedia un que fuera a la vez el primero
de sus hermanos y de idioma, y el primero siempre es «Inicio». El selector
bueno es el hermano adyacente del boton, que es donde el filtro de
functions.php engancha los idiomas.
Y va con `:not(.slideout-navigation)` porque el panel movil lleva la misma
clase `main-navigation` que la cabecera. Sin eso, ese margen de 16 px se
colaba dentro del panel y descolocaba el primer idioma. */
.main-navigation:not(.slideout-navigation) .main-nav ul li.pd-cta + li.pd-idioma > a {
margin-inline-start: var(--e-s);
}
.main-navigation .main-nav ul li.pd-idioma > a:hover { color: #FFFFFF; }
.main-navigation .main-nav ul li.pd-idioma--activo > a {
color: var(--accent-claro);
}
/* ==========================================================================
13 · PIE
========================================================================== */
/* Distribucion tomada de swd-new — tres columnas iguales, 52 arriba y 36
abajo, y debajo una fila centrada de redes con el copyright.
EL PIE LO PINTA EL TEMA, NO WIDGETS. Un widget de bloque no se traduce con
Polylang Free, asi que con widgets habria hecho falta duplicar las tres
columnas por idioma y mantenerlas a mano. */
/* EL PIE ES UN SOLO BLOQUE. El fondo va en .site-footer y todo lo de dentro
se apoya en el, como en swd-new. Antes solo lo tenia la barra de abajo y el
bloque de columnas quedaba flotando sobre el fondo de la pagina. */
.site-footer {
background-color: var(--noche);
color: var(--apoyo-oscuro);
}
/* Posicion tomada de web-jordi, medida el 18/09/2026.
IGUALADO A SWD-NEW EL 07/10/2026, por encargo de Marc.
-------------------------------------------------------------------------
Antes las medidas venian de web-jordi — columnas estrechas centradas como
un bloque, con mucho aire a los lados. Marc pidio que el pie quede igual
que el de swd-new, asi que esas medidas se sustituyen por las suyas, que
estan leidas del codigo fuente de su tema hijo y no deducidas de cajas.
DE DONDE SALE CADA NUMERO · generatepress-child/style.css de swd-new
relleno vertical .site-footer .footer-widgets lineas 3955-3958
ancho y margen .site-footer .inside-footer-widgets lineas 3960-3965
titulo .swd-pie__titulo lineas 3967-3974
lista y enlaces .swd-pie__lista lineas 3976-3995
barra inferior .site-info lineas 4030-4041
centrado en movil @media (max-width: 768px) lineas 4107-4110
LO UNICO QUE NO SE COPIA ES EL ANCHO MAXIMO, Y ES A PROPOSITO.
swd-new tiene 1200 px porque SU rejilla de contenido es de 1200. La de
David es de 1140 — medido en las dos webs el 07/10. Copiar el 1200 dejaria
el pie 30 px mas ancho por lado que todo lo que tiene encima y se veria
descuadrado. Lo que se iguala es la RELACION, que en las dos es la misma ·
el pie mide exactamente lo que mide el contenido de su propio sitio.
TAMPOCO SE TOCAN LOS COLORES. Son blanco sobre --noche por peticion de
Marc, con el contraste medido en la seccion 30. */
/* SWD-NEW TIENE TRES CAPAS ANIDADAS Y DAVID DOS, asi que los rellenos SE
SUMAN. Medido en el codigo de GeneratePress y del tema hijo:
.footer-widgets clamp(3rem, 2.2rem + 1.2vw, 4.5rem) arriba
clamp(2rem, 1.5rem + 0.8vw, 3rem) abajo
.footer-widgets-container 40px por los cuatro lados · 30px hasta 768
.inside-footer-widgets clamp(20px, 14.58px + 1.506vw, 30px) a los lados
Aqui las tres caen en .pd-pie, y por eso van en calc(). Sin sumarlas, el
pie de David salia 48 px mas corto por arriba y 30 mas estrecho por lado. */
.pd-pie {
padding-block:
calc(clamp(3rem, 2.2rem + 1.2vw, 4.5rem) + 40px)
calc(clamp(2rem, 1.5rem + 0.8vw, 3rem) + 40px);
padding-inline: calc(40px + clamp(20px, 14.58px + 1.506vw, 30px));
}
/* GeneratePress baja su contenedor de 40 a 30 por debajo de 769. */
@media (max-width: 768px) {
.pd-pie {
padding-block:
calc(clamp(3rem, 2.2rem + 1.2vw, 4.5rem) + 30px)
calc(clamp(2rem, 1.5rem + 0.8vw, 3rem) + 30px);
padding-inline: calc(30px + clamp(20px, 14.58px + 1.506vw, 30px));
}
}
/* TRES COLUMNAS IGUALES, como en swd-new.
Alli son areas de widget de GeneratePress reparfidas a tercios con su
rejilla vieja de floats. Aqui se consigue lo mismo con flex, que da el
mismo reparto sin arrastrar el margen negativo de GP. */
.pd-pie__fila {
display: flex;
flex-wrap: wrap;
gap: 40px;
max-width: var(--pd-ancho);
margin-inline: auto;
}
/* `flex: 1 1 0` con `min-width: 0` reparte a partes iguales, que es lo que
hace swd-new. Antes era `0 1 auto` con suelo de 200, que daba columnas de
ancho desigual segun el texto de cada una. */
.pd-pie__col {
flex: 1 1 0;
min-width: 0;
}
/* La lista de swd-new no es flex ni lleva gap · la separacion entre lineas
sale del interlineado de 1,9, y los van a margen cero. */
.pd-pie__col ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9rem;
line-height: 1.9;
}
/* EL RITMO DE LA LISTA, medido en swd-new el 07/10 a 1440 px:
alto de cada linea ..... 27,4 px (0.9rem x 1,9)
margen inferior ........ 7,2 px (0,5em)
paso de una a otra ..... 34,5 px
Los 0,5em salen de GeneratePress, no del tema hijo — el `margin: 0` de
.swd-pie__lista li lo pierde por especificidad y el margen sigue ahi.
Se copia el resultado medido, no la intencion del codigo. */
.pd-pie__col li { margin: 0 0 0.5em; }
.pd-pie__col p { margin-bottom: var(--e-2xs); }
/* 0.9rem = 14,4 px, el --swd-txt-s de swd-new. Antes eran 16 px. */
.pd-pie__col,
.pd-pie__col a {
font-size: 0.9rem;
line-height: 1.9;
}
/* Los 3 px de relleno que tienen los enlaces de swd-new. Al ser `inline` no
mueven la maquetacion — agrandan la caja pulsable y colocan el subrayado. */
.pd-pie__col a {
display: inline;
padding-block: 3px;
}
/* 768 Y NO 767. Medido recorriendo de 700 a 820 de uno en uno · swd-new pasa
de una columna a tres al llegar a 769, y David lo hacia en 768. Era un
pixel de diferencia, pero justo en 768, que es un iPad en vertical. */
@media (max-width: 768px) {
.pd-pie__fila {
flex-direction: column;
gap: var(--e-m);
}
/* swd-new centra todo el bloque del pie por debajo de 768. */
.pd-pie,
.pd-pie__titulo {
text-align: center;
}
}
/* EL AREA PULSABLE AMPLIADA DEL PIE SE RETIRO EL 07/10/2026.
-------------------------------------------------------------------------
Aqui habia un bloque @media (max-width: 1024px) que convertia cada enlace
de las columnas en `display: block` con 12 px de relleno arriba y abajo,
dejando filas de 43 px para tocar con el dedo. Se puso el 18/09 despues de
medir que los enlaces median 19 px y que los 8 px de separacion eran hueco
del contenedor, o sea margen muerto.
SE QUITA PORQUE MARC PIDIO QUE EL PIE QUEDE IGUAL QUE EL DE SWD-NEW, y
swd-new no lo tiene · alli los enlaces son `inline` con 3 px de relleno y
la separacion sale del interlineado de 1,9.
LO QUE SE PIERDE, dicho claro. Las filas pasan de 43 px a 27. Sigue
cumpliendo WCAG 2.5.8 por la excepcion de separacion —igual que cumplia
antes del 18/09— pero se toca peor. Si se quiere recuperar sin romper el
parecido con swd-new, lo barato es subir el interlineado de la lista en
movil, no volver a meter relleno. */
.site-footer .footer-widgets { padding-block: 52px 36px; }
/* Las columnas tienen que caer en el mismo eje que el contenido de la pagina.
GeneratePress monta el pie con su rejilla vieja — floats y un
`margin-left: -40px` en el contenedor — asi que las columnas empezaban en
103 y el resto de la web en 143, y ademas se tocaban sin separacion.
Se cambia por flex, que resuelve las dos cosas de una vez. */
/* El selector copia el de GeneratePress a proposito.
El suyo es `.site-footer .footer-widgets-container .inside-footer-widgets`,
tres clases, y le ganaba a un `body .site-footer .inside-footer-widgets`.
Mismo selector y mas abajo en la cascada, sin necesidad de !important. */
.site-footer .footer-widgets-container .inside-footer-widgets {
display: flex;
gap: var(--e-l);
max-width: var(--pd-ancho);
margin: 0 auto;
width: 100%;
}
/* El clearfix de GeneratePress otra vez. Sus ::before y ::after se convierten
en items del flex y se comian un hueco de 40 px, dejando las columnas en
340 en vez de 353 y el borde derecho a 1243 en lugar de 1283. */
.site-footer .footer-widgets-container .inside-footer-widgets::before,
.site-footer .footer-widgets-container .inside-footer-widgets::after {
display: none;
}
.site-footer .footer-widgets-container .inside-footer-widgets > * {
float: none;
flex: 1 1 0;
width: auto;
padding: 0;
}
/* GeneratePress le mete 40 px de relleno al .widget de dentro con la clase
inner-padding, y los titulos entraban 40 px respecto al borde de columna. */
.site-footer .footer-widgets-container .widget { padding: 0; }
@media (max-width: 767px) {
.site-footer .footer-widgets-container .inside-footer-widgets {
flex-direction: column;
gap: var(--e-m);
}
}
.site-footer .widget,
.site-footer .widget p,
.site-footer .widget li,
.site-footer .widget a { font-size: 16px; }
/* Los titulos de columna van a la izquierda. La regla global de h2 los centra
porque en el cuerpo de la web los titulares de seccion SI van centrados, y
aqui son encabezados de lista.
LAS MEDIDAS SON LAS DE .swd-pie__titulo · 1rem, 700, interlineado 1,4,
espaciado 0,01em y 1rem de margen abajo. Antes eran 17 px sin interlineado
propio ni espaciado entre letras. */
.site-footer .pd-pie__titulo {
color: #FFFFFF;
font-size: 1rem;
font-weight: var(--pd-fuerte);
line-height: 1.4;
letter-spacing: 0.01em;
text-align: left;
margin: 0 0 1rem;
}
.site-footer .wp-block-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--e-2xs);
}
/* LA BARRA DE ABAJO, igualada a la de swd-new el 07/10/2026.
-------------------------------------------------------------------------
Alli el relleno NO va en .site-info sino en .inside-site-info, junto con
el ancho maximo. Por eso aqui se mueve de sitio · si se deja en los dos,
se suma y la barra sale el doble de alta.
CAMBIOS RESPECTO A LO QUE HABIA
tamano 14 px -> 0.9rem (14,4), el --swd-txt-s
relleno 18 px -> 1.5rem (24) arriba y abajo, su --swd-esp-3
filete 0.1 alfa -> 0.12, el suyo
reparto columna -> fila centrada con 2rem de hueco, y columna
solo por debajo de 600
El fondo sigue siendo transparente para heredar el del pie, y el color
sigue siendo el de David. Marc pidio igualar medidas, no colores. */
.site-info {
background-color: transparent;
font-size: 0.9rem;
text-align: center;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
/* Fila centrada, como swd-new. Aqui dentro hoy solo esta el copyright —las
redes subieron a su columna el 18/09— pero se deja en fila con envoltura
para que si algun dia vuelve a haber dos piezas se coloquen como alli. */
.site-info .inside-site-info {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 2rem;
max-width: var(--pd-ancho);
margin-inline: auto;
padding: 1.5rem clamp(20px, 14.58px + 1.506vw, 30px);
}
/* Por debajo de 600 se apila, con el hueco mas corto. Es el corte de
swd-new y no coincide con el de las columnas de arriba, que esta en 768. */
@media (max-width: 600px) {
.site-info .inside-site-info {
flex-direction: column;
gap: 1.5rem;
}
}
.site-info .inside-site-info::before,
.site-info .inside-site-info::after { display: none; }
.site-info .copyright-bar,
.site-info .footer-bar { float: none; width: auto; }
.site-info .widget { margin-bottom: 0; }
/* La fila de redes de la barra de abajo se retiro el 18/09/2026. YouTube y
Facebook subieron a su propia columna del pie, con su titulo, como el resto.
Aqui abajo solo queda el copyright. */
/* ==========================================================================
14 · ESTRUCTURA · lo que hay que domar de GeneratePress
========================================================================== */
/* Con one-container el fondo blanco lo pone .site.grid-container, no
.site-content. El ancho lo controla la rejilla de .entry-content y el
fondo lo pone cada seccion. */
.page .site.grid-container,
.page .site-content,
.page .inside-article {
max-width: 100%;
background-color: transparent;
padding: 0;
}
.page .site-content .content-area,
.page .entry-content { padding-inline: 0; }
/* Rejilla de tres columnas para el sangrado completo. NO con margin-inline
y 100vw, que cuenta la barra de scroll y provoca scroll lateral. */
.page .entry-content {
display: grid;
grid-template-columns:
1fr
min(var(--pd-ancho), calc(100% - var(--margen-lateral) * 2))
1fr;
}
.page .entry-content > * { grid-column: 2; }
.page .entry-content > .alignfull {
grid-column: 1 / -1;
padding-inline: var(--margen-lateral);
width: auto;
max-width: none;
margin-inline: 0;
}
.page .entry-content > .alignfull > * {
max-width: var(--pd-ancho);
margin-inline: auto;
}
/* Las tarjetas se montan con el bloque de columnas nativo, asi que la columna
ES la tarjeta. Nada de display:contents, que saca el elemento del arbol de
accesibilidad. */
.pd-cols-tarjetas { gap: var(--e-m); align-items: stretch; }
/* Sin filete dorado arriba. La tarjeta se sostiene con el borde fino, el
radio y la sombra. El acento se queda para los checks y el boton, que es
donde tiene una funcion. */
.pd-cols-tarjetas > .wp-block-column {
display: flex;
flex-direction: column;
background-color: var(--base-3);
border: 1px solid var(--base);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
padding: 26px;
transition: box-shadow var(--transicion);
}
.pd-cols-tarjetas > .wp-block-column:hover { box-shadow: var(--pd-sombra-alta); }
/* EL TITULO DE LA TARJETA, SEA h2 O h3 · 07/10/2026
-------------------------------------------------------------------------
EN LA PAGINA DE CURSOS ESOS TITULOS SON h2 DESDE HOY, y no por estetica —
la pagina iba `h1` y luego `h3`, saltandose un nivel, y un lector de
pantalla recorre el documento por su indice de encabezados. Es WCAG 1.3.1.
PERO CAMBIAR EL NIVEL CAMBIA EL ASPECTO, y eso se me colo al hacerlo. El
`h2` del tema es el titular de SECCION · 31 px, centrado y con 64 px de
aire debajo. El `h3` era 18, a la izquierda y con 8. Medido despues del
cambio · los titulos salieron a 31 px centrados y las tarjetas crecieron.
Asi que el nivel semantico sube y la pinta se queda donde estaba. En las
demas paginas las tarjetas siguen con h3 y les vale la misma regla. */
.pd-cols-tarjetas h2,
.pd-cols-tarjetas h3 {
font-size: 18px;
line-height: 1.35;
margin-bottom: var(--e-xs);
text-align: start;
color: var(--contrast);
}
/* Ritmo interior de la tarjeta.
Los margenes van con !important y sobre TODOS los hijos porque WordPress
emite `.wp-block-buttons { margin-bottom: 0 }` y reglas de bloque con mas
peso, y con margenes normales el boton se subia encima de la ultima linea
de la lista. Se vio en la captura de Marc a 1540 px. */
.pd-cols-tarjetas > .wp-block-column > * { margin-block: 0; }
.pd-cols-tarjetas > .wp-block-column > * + * { margin-top: var(--e-s) !important; }
.pd-cols-tarjetas > .wp-block-column > .pd-etiqueta + h3 { margin-top: var(--e-2xs) !important; }
.pd-cols-tarjetas > .wp-block-column > .pd-lista { margin-top: var(--e-m) !important; }
/* El boton se pega abajo del todo, asi que dos tarjetas de distinto largo
tienen la llamada a la accion a la misma altura. */
.pd-cols-tarjetas > .wp-block-column > .wp-block-buttons {
margin-top: auto !important;
padding-top: var(--e-m);
}
/* DOS FILAS DE TARJETAS SEGUIDAS NO SE TOCAN · 06/10/2026
-------------------------------------------------------------------------
Lo vio Marc en la ficha del curso 1, en «Lo que vas a saber al terminar».
Las seis tarjetas van en DOS bloques `wp:columns` apilados, no en una
rejilla, asi que el hueco entre las dos filas no lo pone ningun `row-gap`
sino el margen entre dos hermanos. Y ese margen era CERO, medido — las
tarjetas de arriba y las de abajo se tocaban, con 24 px a los lados.
LA CAUSA, leida con getMatchedStylesForNode y no deducida. WordPress SI
les da separacion, `margin-bottom: 1.75em`, pero la declara dentro de
`:where(.wp-block-columns)`, y `:where()` vale CERO de especificidad. El
reset de GeneratePress, esa lista larguisima de etiquetas que empieza por
`a, abbr, acronym…`, pone `margin: 0` y gana con un solo elemento.
SE IGUALA AL HUECO HORIZONTAL, 24 px, que es el `gap` que ya tiene el
bloque. Si el hueco de arriba fuera distinto del de los lados las seis
tarjetas dejarian de leerse como una rejilla.
ALCANZA A DOS PAGINAS Y SE HA COMPROBADO CUALES — la ficha del curso 1 en
los dos idiomas, 126 y 129, que son las unicas con dos bloques de
tarjetas seguidos. Las portadas tienen dos, pero con contenido en medio. */
.pd-cols-tarjetas + .pd-cols-tarjetas {
margin-block-start: var(--e-m);
}
/* La portada en dos columnas, el texto y la foto.
-------------------------------------------------------------------------
MEDIDO EL 03/10/2026, Y NO ERA LO QUE PONIA AQUI. Habia un display:grid
con grid-template-columns que no se ha aplicado nunca. WordPress emite
`body .is-layout-flex { display: flex }` y ese selector —dos clases y un
elemento— gana a `.pd-hero__fila`, que es una clase sola. El display
calculado es flex en todos los anchos, comprobado con
CSS.getMatchedStylesForNode.
O sea que las dos columnas nunca han medido 1,05 contra 1. Miden lo
mismo, porque el flex de WordPress les pone flex-basis 0 y flex-grow 1.
Se quita lo muerto y se deja gap y align-items, que valen igual en flex
y son los que estaban haciendo el trabajo.
Y EL BREAKPOINT DE ESTA FILA ES 782, NO 900. Quien parte en dos columnas
es `.wp-block-columns { flex-wrap: nowrap }` dentro de su propia
@media (min-width: 782px). Cualquier regla que dependa de que haya una
columna o dos tiene que usar ese numero. Tenerlo en 900 dejaba una franja
de 118 px con dos columnas y la foto en tamano de movil. */
.pd-hero__fila {
gap: var(--e-l);
align-items: center;
}
@media (min-width: 782px) {
.pd-hero__fila { gap: var(--e-xl); }
}
/* En la portada el globo NO es una tarjeta. Flota sobre el fondo.
El lienzo de globe.gl ya es transparente, asi que la caja que se veia eran
estas tres cosas mias — fondo, radio y sombra. Y overflow visible, o el
halo de atmosfera se corta en el borde y delata el rectangulo. */
.pd-hero .pd-globo {
background-color: transparent;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
/* ==========================================================================
15 · LA BOLA DEL MUNDO
Portada del tema anterior. Aqui SI lleva radio y sombra, porque en este
registro las tarjetas los llevan y el globo es una tarjeta mas.
========================================================================== */
.pd-globo {
position: relative;
overflow: hidden;
background-color: var(--contrast);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra-alta);
}
.pd-globo__lienzo {
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
cursor: grab;
}
.pd-globo__lienzo:active { cursor: grabbing; }
.pd-globo__lienzo.esta-sobre-punto,
.pd-globo__lienzo.esta-sobre-punto:active { cursor: pointer; }
.pd-globo__lienzo canvas { display: block; outline: none; }
.pd-globo__cargando,
.pd-globo noscript p {
color: var(--apoyo-oscuro);
font-size: 15px;
margin: 0;
padding: var(--e-l);
text-align: center;
}
.pd-globo__etiqueta {
background-color: #FFFFFF;
border-radius: var(--pd-radio-boton);
color: var(--contrast);
font-family: var(--pd-fuente);
font-size: 13px;
font-weight: var(--pd-medio);
padding: 6px 12px;
white-space: nowrap;
}
.pd-globo__ficha {
position: absolute;
inset-block-end: var(--e-m);
inset-inline-start: var(--e-m);
/* MIN-WIDTH, no solo max. Con un destino de nombre corto —Roatan, Bali—
la ficha se encogia a 139 px y el boton de cerrar, que ocupa su esquina,
se comia el nombre del pais. */
min-width: 220px;
max-width: min(340px, calc(100% - var(--e-l)));
/* border-box, o el relleno que reserva sitio para el aspa se suma al
max-width y la ficha se pasa de largo con un destino de nombre largo. */
box-sizing: border-box;
background-color: #FFFFFF;
border-radius: var(--pd-radio);
padding: var(--e-m);
/* Sitio reservado para el aspa. Asi el texto nunca pasa por debajo. */
padding-inline-end: calc(var(--e-m) + 28px);
box-shadow: var(--pd-sombra-alta);
transition: opacity var(--transicion);
}
.pd-globo__ficha[hidden] { display: none; }
.pd-globo__pais {
color: var(--accent);
font-size: 13px;
font-weight: var(--pd-medio);
letter-spacing: 0.1em;
text-transform: uppercase;
margin-bottom: var(--e-3xs);
}
.pd-globo__destino {
color: var(--contrast);
font-size: 20px;
font-weight: var(--pd-fuerte);
line-height: 1.2;
margin: 0;
}
.pd-globo__foto img {
aspect-ratio: 3 / 2;
border-radius: var(--pd-radio-boton);
margin-top: var(--e-s);
object-fit: cover;
width: 100%;
}
/*
* El aspa.
*
* Se resetea ENTERO porque GeneratePress estiliza el elemento `button` con su
* propio relleno de 10px 20px y su fondo. Con eso el aspa media 53x44 y tapaba
* el nombre del pais.
*
* Mide 28x28 a la vista y el objetivo tactil de 44 se consigue con ::after,
* que es la tecnica estandar — area de pulsacion grande sin caja grande.
*/
.pd-globo__cerrar {
position: absolute;
inset-block-start: var(--e-2xs);
inset-inline-end: var(--e-2xs);
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
min-width: 0;
min-height: 0;
padding: 0;
margin: 0;
background: none;
background-color: transparent;
border: 0;
border-radius: 50%;
color: var(--contrast-3);
cursor: pointer;
font-family: var(--pd-fuente);
font-size: 20px;
font-weight: 400;
line-height: 1;
text-shadow: none;
box-shadow: none;
transition: background-color var(--transicion), color var(--transicion);
}
/* El area de pulsacion, invisible, centrada y de 44x44. */
.pd-globo__cerrar::after {
content: "";
position: absolute;
inset: -8px;
}
.pd-globo__cerrar:hover,
.pd-globo__cerrar:focus-visible {
background-color: var(--base);
color: var(--contrast);
}
/* GeneratePress pinta fondo propio en :hover y :active del boton. */
.pd-globo__cerrar:active { background-color: var(--base); color: var(--contrast); }
.pd-globo__pie { text-align: center; margin-top: var(--e-s); }
/* ==========================================================================
16 · MOVIMIENTO
========================================================================== */
.pd-aparece {
opacity: 0;
transform: translateY(12px);
transition: opacity 400ms ease-out, transform 400ms ease-out;
}
.pd-aparece.pd-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.pd-aparece { opacity: 1; transform: none; }
}
/* ==========================================================================
17 · EL MENU MOVIL DESLIZANTE
--------------------------------------------------------------------------
El panel NO esta hecho a mano. Es el panel lateral de GP Premium, el mismo
componente y los mismos ajustes que swd-new — `slideout_menu: mobile`,
estilo `slide`, por la derecha y con el aspa dentro.
LO QUE EL COMPONENTE TRAE, COMPROBADO CONTRA SU CODIGO Y MIDIENDOLO.
Mueve el foco al primer enlace al abrir (offside.js:529), cierra con Escape
y al cerrar con Escape devuelve el foco a la hamburguesa (offside.js:607),
cierra al tocar el velo, al tocar el aspa y al tocar un enlace.
LO QUE NO TRAE, Y ANTES AQUI PONIA QUE SI. El foco NO se queda atrapado
dentro del panel: al llegar al ultimo enlace, el tabulador se escapa a la
pagina de detras, que sigue estando ahi. Le pasa igual a swd-new — es del
componente, no de esta web. Medido el 18/09/2026 con eventos de teclado de
verdad. Queda anotado para que Marc decida si se arregla, porque arreglarlo
aqui seria separarse de swd-new.
Abajo va solo lo que el componente no cubre.
Dos cosas cambian respecto a swd-new, y las dos a proposito.
El punto de corte se queda en 768 y no en 1024. En swd-new son 1024 porque
su menu es mas ancho; mover el de David cambiaria CUANDO aparece la
hamburguesa, y lo que pidio Marc es como se ve, no cuando sale.
Y la etiqueta «Menu» del boton se vacia a mano en los ajustes. swd-new la
tiene vacia sola porque va en flexbox y el tema padre se la quita en
`generate_set_menu_plus_compat_defaults()`; David va en floats, ahi esa
condicion no se cumple y la palabra salia al lado del icono.
Medidas tomadas de swd-new el 18/09/2026 — panel de 265 px, relleno
35/20/32, enlaces de 51 px y velo al 60 %.
========================================================================== */
/* --- La hamburguesa ------------------------------------------------------- */
/* GeneratePress trae el icono en SVG. Se esconde y se dibujan tres barras — la
del medio es el propio span y las otras dos salen de sus pseudoelementos.
Asi no hay que tocar el marcado del tema padre.
ANTES ERA LA PALABRA «Menu» dentro de un boton de 110x120. El boton era el
elemento mas alto de la cabecera y se la llevaba a 156 px de alto.
EL LIMITE ES 1024, NO 768, y tiene que coincidir con
`mobile_menu_breakpoint` de los ajustes. Con 768 aqui y 1024 alli, entre
esos dos anchos salia la hamburguesa del tema padre con su SVG a la vista y
sin las barras dibujadas — dos iconos distintos segun el ancho. */
@media (max-width: 1024px) {
.main-navigation .menu-toggle {
position: relative;
width: 44px;
height: 44px;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: 0;
-webkit-tap-highlight-color: transparent;
}
/* El SVG del tema padre, fuera. Con menos peso que esto ganaba su regla de
cerrar, que enseña el aspa cuando el menu esta abierto, y se veia cruzada
con las barras. */
.site-header .main-navigation .menu-toggle .gp-icon svg {
display: none;
}
.main-navigation .menu-toggle .gp-icon {
position: relative;
display: block;
width: 24px;
height: 2px;
border-radius: 2px;
background-color: #FFFFFF;
transition: background-color var(--transicion);
}
.main-navigation .menu-toggle .gp-icon::before,
.main-navigation .menu-toggle .gp-icon::after {
content: "";
position: absolute;
left: 0;
width: 24px;
height: 2px;
border-radius: 2px;
background-color: #FFFFFF;
}
.main-navigation .menu-toggle .gp-icon::before { top: -8px; }
.main-navigation .menu-toggle .gp-icon::after { top: 8px; }
/* Sin animacion de barras a aspa. Con el panel abierto la cabecera queda
debajo del velo y esa transicion no se llega a ver nunca. El aspa que si
se ve es la del panel. */
.main-navigation .menu-toggle:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
}
}
/* --- El aire de dentro del panel ------------------------------------------- */
/* GP pinta el fondo, los colores y el ancho. Lo que no da es el respiro: sin
esto los enlaces salen pegados al canto izquierdo.
El relleno de arriba esta calculado, no elegido. Deja el centro del aspa a
la misma altura a la que estaba el centro de la hamburguesa que se acaba de
pulsar, asi que el aspa aparece donde ya esta el dedo. */
.slideout-navigation.main-navigation .inside-navigation {
display: block;
padding: 35px var(--margen-lateral) 32px;
max-width: none;
}
/* La barra de administracion de WordPress mide 46 px en movil y el panel va
fijo al viewport, asi que sin esto el aspa se le mete debajo. */
.admin-bar .slideout-navigation.main-navigation .inside-navigation {
padding-top: calc(35px + 46px);
}
/* El aire entre el aspa y el primer enlace. Va en el bloque del menu y no como
margen del boton, para que el boton siga siendo un objetivo de 22 px y no una
franja pulsable que llegue hasta el primer enlace. */
.slideout-navigation.main-navigation .main-nav {
margin-top: 28px;
margin-bottom: 0;
}
/* --- Los enlaces ----------------------------------------------------------- */
/* La lista pasa a flex para que los dos enlaces de idioma queden en fila al
final. Todo lo demas ocupa la linea entera. */
.slideout-navigation.main-navigation .main-nav > ul {
display: flex;
flex-wrap: wrap;
}
.slideout-navigation.main-navigation .main-nav > ul > li {
flex: 0 0 100%;
}
.slideout-navigation.main-navigation .main-nav > ul > li > a {
display: block;
padding: 0.85rem 0;
line-height: 1.4;
font-size: 17px;
font-weight: var(--pd-medio);
text-align: left;
}
/* Sin filetes entre enlaces. Con cuatro, las lineas hacian mas ruido que
trabajo — el hueco ya separa de sobra. */
.slideout-navigation.main-navigation .main-nav ul li a:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 2px;
border-radius: 3px;
}
/* --- El boton de accion ----------------------------------------------------- */
/* Deja de ser un enlace mas y baja al final como boton a todo el ancho. Es la
unica accion del panel, asi que tiene que verse como tal.
Va con !important a regañadientes: GP escribe los colores del panel como CSS
en linea en el , y eso se pone por delante de la hoja del tema hijo con
la misma especificidad. */
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta {
margin-top: 28px;
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta > a,
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta:hover > a,
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta.current-menu-item > a {
padding: 0.9rem 1.2rem;
/* En la cabecera el boton va separado del ultimo enlace por la izquierda.
Aqui es un bloque a todo el ancho y ese margen lo descentraba. */
margin-inline-start: 0;
background-color: var(--accent) !important;
border-radius: var(--pd-radio-boton);
color: #FFFFFF !important;
font-weight: var(--pd-fuerte);
line-height: 1.4;
text-align: center;
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta:hover > a {
background-color: #FFFFFF !important;
color: var(--contrast) !important;
}
/* --- El cambio de idioma ---------------------------------------------------- */
/* En fila y al final, debajo del boton. Son dos enlaces de dos letras; en
vertical y a todo el ancho parecian dos secciones mas del menu. */
/* Va con el ID a proposito. offside.css trae
`#generate-slideout-menu .slideout-menu li { width: 100% }`, y con un ID
dentro gana a cualquier selector de clases por muchas que le ponga — los dos
idiomas salian uno debajo de otro y el segundo se salia del panel 16 px por
la derecha. Con el mismo ID delante empatan en ID y decide la clase de mas. */
#generate-slideout-menu .main-nav > ul > li.pd-idioma {
flex: 0 0 auto;
width: auto;
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cta + li.pd-idioma {
margin-top: var(--e-m);
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-idioma + li.pd-idioma {
margin-top: var(--e-m);
margin-inline-start: var(--e-s);
}
/* 44x44 de area de pulsacion. Son dos letras, asi que sin el min-width se
quedaban en 37 y 35 px de ancho — legibles, pero por debajo del objetivo que
lleva el resto de la web. */
.slideout-navigation.main-navigation .main-nav > ul > li.pd-idioma > a {
font-size: 13px;
font-weight: var(--pd-fuerte);
letter-spacing: 0.06em;
padding: 0.85rem 8px;
min-width: 44px;
text-align: center;
color: var(--apoyo-oscuro) !important;
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-idioma--activo > a {
color: var(--accent-claro) !important;
}
/* --- El velo ----------------------------------------------------------------- */
/* Translucido, para que la web se siga viendo detras — se ve donde estabas.
GP lo trae en negro al 80 %. Aqui va el azul noche de la casa al 60 %, que es
el mismo criterio que swd-new con su azul.
Va con el selector repetido a proposito. offside.css se encola despues de la
hoja del tema hijo, asi que con un solo .slideout-overlay ganaba el suyo por
orden de carga. Repetir la clase sube la especificidad sin !important. */
.slideout-overlay.slideout-overlay {
background-color: rgba(10, 28, 43, 0.6);
}
/* --- El aspa ------------------------------------------------------------------ */
/* Dentro del panel y arriba a la derecha, que es justo donde estaba la
hamburguesa que acabas de pulsar. Se cambia en Personalizar -> Menus, ajuste
«Close Button» a «Inside». */
.slideout-navigation.main-navigation button.slideout-exit {
width: 100%;
padding: 0;
text-align: right;
line-height: 1;
color: #FFFFFF;
cursor: pointer;
}
.slideout-navigation.main-navigation button.slideout-exit svg {
width: 22px;
height: 22px;
fill: currentColor;
}
.slideout-navigation.main-navigation button.slideout-exit:hover {
color: var(--accent-claro);
}
.slideout-navigation.main-navigation button.slideout-exit:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 4px;
border-radius: 3px;
}
/* Con el panel abierto el fondo no se mueve. Si no, se desplaza la pagina de
detras y al cerrar apareces en otro sitio.
SOLO EN EL CUERPO, NUNCA EN EL HTML. offside.js pone la clase en los dos.
Con la barra de administracion, WordPress le mete al html un margin-top de
46 px, y al pasar el html a overflow: hidden la pagina entera baja otros 46
al abrir el menu — la cabecera da un tiron cada vez. Y es redundante: cuando
el cuerpo declara overflow y la raiz no, el valor se propaga a la ventana. */
body.slide-opened {
overflow: hidden;
}
/* Quien pide menos movimiento no lo tiene. El panel aparece y desaparece. */
@media (prefers-reduced-motion: reduce) {
.offside-js--interact .offside,
.offside-js--interact .offside-sliding-element,
.slideout-overlay {
transition: none;
}
}
/* ==========================================================================
18 · LA FOTO PEGADA CON CELO
El retrato de David en la columna derecha de la portada, donde antes
estaba el globo. Va como una foto pegada a mano — marco blanco, celo
arriba y la hoja algo torcida.
POR QUE ASI. Las fotos que mando son planos generales de teatro donde el
sale a lo lejos. Presentadas como galeria se leen como fotos malas;
pegadas con celo se leen como un recuerdo, que es lo que son. El retrato
de esmoquin es la unica del lote en la que se le reconoce la cara.
EL ORIGINAL ES DE 488x600 y aqui se muestra a 360, asi que hay 1,36x de
margen. En una pantalla de densidad doble se vera algo blanda. Si David
manda el original de la sesion, se cambia el fichero y ya esta.
EL CELO SOBRESALE del marco, asi que nada en la cadena puede llevar
overflow hidden por encima de la figura. El hero si lo lleva, pero la
foto queda centrada en su columna y no llega a los bordes — medido.
========================================================================== */
.pd-pegada {
position: relative;
box-sizing: border-box;
width: min(360px, 100%);
margin: 0 auto;
padding: 13px 13px 15px;
background-color: #FFFFFF;
/* Sombra mas dura que la del resto del tema. Las tarjetas flotan sobre
fondo claro; esto es papel sobre un panel oscuro y necesita peso. */
box-shadow: 0 20px 44px rgba(0, 0, 0, 0.46);
transform: rotate(-2.2deg);
}
.pd-pegada img {
display: block;
width: 100%;
height: auto;
}
/* El trozo de celo. Translucido y mate, con el brillo de un borde claro a
cada lado para que parezca cinta y no un rectangulo pintado. Va girado al
reves que la foto, que es como queda cuando se pega de verdad. */
.pd-pegada::before {
content: "";
position: absolute;
inset-block-start: -15px;
inset-inline-start: 50%;
width: 128px;
height: 34px;
transform: translateX(-50%) rotate(1.8deg);
background-color: rgba(236, 234, 227, 0.5);
border-inline: 1px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
/* Con dos columnas la foto se baja un pelin respecto al texto y gana aire
por arriba para el celo. 782, que es donde WordPress parte la fila. */
@media (min-width: 782px) {
.pd-hero__fila > .wp-block-column:last-child { padding-block-start: 10px; }
}
/* UNA SOLA COLUMNA, HASTA 781.
-------------------------------------------------------------------------
Aqui la foto cae debajo del texto, que ocupa el ancho entero. Un tamano
fijo no vale, y esto me lo enseno Marc con una captura — a 200 px fijos la
foto iba del 59 % del ancho del texto a 390 px hasta el 29 % a 768, o sea
un sello perdido debajo de unos botones enormes.
Con clamp la foto sigue al texto. Medido, se queda entre el 47 y el 51 %
del ancho del bloque de texto en todo el rango, que es la proporcion que
tiene en escritorio.
EL MINIMO SON 200 PX a proposito. Es el tamano que Marc aprobo para el
movil estrecho, donde el hero ya se iba a 1.026 px de alto.
El marco y el celo escalan con ella por la misma razon — un marco de 13 px
sobre una foto de 200 es el doble de grueso, en proporcion, que sobre una
de 360. */
@media (max-width: 781px) {
.pd-pegada {
width: clamp(200px, 46vw, 330px);
padding: clamp(9px, 2.4vw, 13px);
padding-block-end: clamp(11px, 2.9vw, 15px);
transform: rotate(-1.4deg);
margin-block-start: var(--e-m);
}
.pd-pegada::before {
width: clamp(76px, 20vw, 128px);
height: clamp(24px, 6vw, 34px);
inset-block-start: clamp(-14px, -3vw, -10px);
}
}
/* ==========================================================================
19 · LA VENTA DE LOS CURSOS · 04/10/2026
Lo que aporta Easy Digital Downloads a la pagina comercial — la clase
cerrada del temario, la seccion de compra y el aviso de rebote.
EDD saca sus botones con .edd-submit y encima les cuelga .button .blue,
que son clases suyas con color propio. Aqui se les da el mismo aspecto que
a los botones del tema reutilizando los tokens de la seccion 6, para que no
se note que el boton lo pinta un plugin.
========================================================================== */
/* LA CLASE QUE AUN NO SE TIENE.
Se deja plegable igual que las abiertas, para que el temario se lea igual,
pero el triangulo se apaga y dentro solo hay una linea.
VA EN --contrast-3 Y NO EN --apoyo-oscuro, aunque este ultimo es el gris
de apoyo del tema. Medido el 04/10 — #9FAEBA sobre el blanco de la tarjeta
del temario da 2,27:1 y WCAG AA pide 4,5 para texto normal. #5E6E7B da
5,26:1. El --apoyo-oscuro esta bien donde se usaba hasta hoy, que es la
cabecera y el pie, sobre tinta, donde da 6,55:1. */
.pd-clase--cerrada > summary {
color: var(--contrast-3);
}
.pd-clase__cerrada {
margin: 0;
padding: var(--e-s) 0 var(--e-xs);
color: var(--contrast-3);
font-size: 15px;
font-style: italic;
}
/* Un candado delante, dibujado con borde y sin fuente de iconos. Es
decorativo, asi que va en ::before de un elemento que ya tiene texto y no
necesita que nadie lo lea. */
.pd-clase__cerrada::before {
content: "";
display: inline-block;
width: 9px;
height: 7px;
margin-inline-end: 8px;
border: 1.5px solid currentColor;
border-radius: 2px;
border-block-start-width: 7px;
border-start-start-radius: 6px;
border-start-end-radius: 6px;
vertical-align: baseline;
opacity: 0.75;
}
/* LA SECCION DE COMPRA. */
.pd-comprar {
text-align: center;
}
.pd-comprar .pd-intro {
margin-inline: auto;
max-width: 52ch;
}
.pd-comprar .edd_download_purchase_form {
margin-block-start: var(--e-l);
}
/* LOS BOTONES DE EDD, con el aspecto de los del tema.
Se repite el bloque de la seccion 6 en vez de encadenar selectores alli,
porque alli el selector es de bloques de WordPress y aqui son clases de un
plugin — mezclarlos haria ilegibles los dos.
SIN display AQUI, Y ES A PROPOSITO. EDD manda dos botones, uno para cuando
hay JavaScript y otro con .edd-no-js para cuando no lo hay, y esconde el
que sobra con `.edd-js .edd-no-js { display: none }`. Ese selector pesa
0,2,0, lo mismo que `.pd-comprar .edd-submit`. Al empatar decide el orden
de la cascada, y como esta hoja carga despues, declarar display aqui
resucitaba el boton escondido y salian los dos pegados. Se vio en la
captura del 04/10. No hace falta declararlo — un button y un input ya
vienen en inline-block de serie. */
.pd-comprar .edd-submit,
.pd-comprar .edd-submit.button,
.pd-comprar .edd_go_to_checkout {
font-family: var(--pd-fuente);
font-size: 17px;
font-weight: var(--pd-fuerte);
line-height: 1.4;
padding: 14px 28px;
border-radius: var(--pd-radio-boton);
border: 2px solid transparent;
background-color: var(--accent);
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transicion), color var(--transicion),
border-color var(--transicion);
}
.pd-comprar .edd-submit:hover,
.pd-comprar .edd-submit.button:hover,
.pd-comprar .edd_go_to_checkout:hover {
background-color: var(--contrast);
color: #FFFFFF;
}
.pd-comprar .edd-cart-ajax-alert,
.pd-comprar .edd-loading {
margin-inline-start: var(--e-xs);
}
/* EL AVISO DE QUIEN LLEGA REBOTADO de la zona del curso. */
.pd-aviso-acceso {
max-width: var(--pd-ancho);
margin: var(--e-m) auto 0;
padding-inline: var(--margen-lateral);
}
.pd-aviso-acceso p {
margin: 0;
padding: 14px 18px;
background-color: var(--base-3);
border-inline-start: 3px solid var(--accent);
border-radius: var(--pd-radio);
color: var(--contrast);
font-size: 16px;
}
/* ==========================================================================
20 · EL PROCESO DE COMPRA · 04/10/2026
Checkout, recibo e historial con el registro de la web.
Lo que pinta EDD aqui son bloques suyos (.edd-blocks-*), no bloques de
WordPress, asi que nada de lo de las secciones anteriores les llega. Se
les da el mismo sistema — tarjeta blanca con radio y sombra, campos con
el borde del tema y botones de acento.
LAS CLASES ESTAN LEIDAS DEL HTML SERVIDO con el carrito lleno, no de
memoria. Con el carrito vacio EDD pinta otra cosa y la mitad de estas
clases no existen.
========================================================================== */
/* El lienzo. Sin esto el formulario sale pegado a la cabecera y a lo ancho
de la pantalla, que es como se veia en la captura de Marc. */
/* `wp-block-edd-orders` Y NO `wp-block-edd-order-history`.
Corregido el 06/10. La segunda NO EXISTE — EDD envuelve el historial en
`wp-block-edd-orders`, leido en includes/blocks/includes/orders/orders.php
linea 80. Con el nombre mal, el bloque se quedaba sin lienzo, sin ancho
maximo y sin aire, y en «Tus compras» se salia por debajo del contenido
hasta meterse en el pie. El recibo si se llama `wp-block-edd-receipt`,
ese estaba bien. */
.edd-blocks__checkout,
.wp-block-edd-receipt,
.wp-block-edd-orders,
.wp-block-edd-confirmation,
.pd-mis-cursos {
box-sizing: border-box;
/* WIDTH ADEMAS DE MAX-WIDTH, Y NO SOBRA.
.entry-content de GeneratePress es display:grid, asi que esto es un
grid item, y un grid item sin width se encoge a su contenido por mucho
max-width que tenga. Medido el 04/10 — pedia 1140 y ocupaba 557.
Con width 100% toma la pista entera y el max-width vuelve a mandar. */
width: 100%;
max-width: var(--pd-ancho);
margin-inline: auto;
justify-self: center;
padding-inline: var(--margen-lateral);
padding-block: var(--e-seccion);
}
/* Cuando van juntos en la misma pagina —el listado de cursos y el recibo—
el de abajo no repite el aire de arriba. */
.pd-mis-cursos + .wp-block-edd-receipt,
.pd-mis-cursos + .wp-block-edd-orders,
.pd-mis-cursos + .wp-block-edd-confirmation {
padding-block-start: 0;
}
/* ---------- EL CARRITO ---------- */
.edd-blocks-cart {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #FFFFFF;
border: 1px solid var(--base);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
overflow: hidden;
margin-block-end: var(--e-l);
}
.edd-blocks-cart__row {
display: flex;
flex-wrap: wrap;
gap: var(--e-s);
align-items: center;
justify-content: space-between;
padding: var(--e-s) var(--e-m);
border-block-end: 1px solid var(--base);
}
.edd-blocks-cart__row:last-child {
border-block-end: 0;
}
.edd-blocks-cart__row-header {
background-color: var(--base-2);
font-family: var(--pd-fuente);
font-weight: var(--pd-fuerte);
font-size: 14px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--contrast);
}
.edd-blocks-cart__row-footer {
background-color: var(--base-2);
font-weight: var(--pd-fuerte);
}
.edd_cart_item_name a {
font-weight: var(--pd-medio);
text-decoration: none;
}
.edd_cart_item_price,
.edd_cart_amount {
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* La papelera de quitar del carrito. Un enlace de texto diminuto es un
objetivo malo en movil, asi que se le da area de toque. */
.edd-blocks-cart__action-remove {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
margin-inline-start: var(--e-2xs);
color: var(--contrast-3);
text-decoration: none;
}
.edd-blocks-cart__action-remove:hover {
color: var(--accent);
}
/* ---------- EL FORMULARIO ---------- */
.edd-blocks__user-details,
.edd-blocks__payment-details {
margin-block-end: var(--e-l);
}
/* La tarjeta blanca va en los fieldset de DATOS, no en el que envuelve al
boton de pagar. #edd_purchase_submit tambien es un fieldset y sin
excluirlo el boton salia metido en una caja blanca con borde, que es como
se veia en la captura del 04/10. */
#edd_checkout_user_info,
.edd-blocks__payment-details fieldset:not(#edd_purchase_submit) {
background-color: #FFFFFF;
border: 1px solid var(--base);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
padding: var(--e-m);
margin: 0;
}
#edd_checkout_user_info legend,
.edd-blocks__payment-details legend {
font-family: var(--pd-fuente);
font-size: 13px;
font-weight: var(--pd-fuerte);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--accent);
padding-inline: var(--e-2xs);
margin-inline-start: calc(var(--e-2xs) * -1);
}
.edd-blocks-form__group + .edd-blocks-form__group {
margin-block-start: var(--e-m);
}
.edd-label {
display: block;
font-family: var(--pd-fuente);
font-weight: var(--pd-medio);
font-size: 15px;
color: var(--contrast);
margin-block-end: var(--e-3xs);
}
.edd-required-indicator {
color: var(--accent);
margin-inline-start: 2px;
}
.edd-input,
.edd-blocks-form select {
box-sizing: border-box;
width: 100%;
font-family: var(--pd-fuente);
font-size: 16px; /* 16 o menos hace que iOS haga zoom al enfocar */
line-height: 1.5;
padding: 11px 14px;
background-color: #FFFFFF;
border: 1px solid var(--base);
border-radius: var(--pd-radio-boton);
color: var(--contrast);
transition: border-color var(--transicion), box-shadow var(--transicion);
}
.edd-input:focus,
.edd-blocks-form select:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(134, 102, 49, 0.18);
}
/* El foco por teclado se ve igual aunque el navegador no pinte su anillo. */
.edd-input:focus-visible,
.edd-blocks-form select:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.edd-description {
margin: var(--e-3xs) 0 0;
font-size: 14px;
color: var(--contrast-3);
}
/* ---------- EL BOTON DE PAGAR ---------- */
/* Igual que en la seccion 19, SIN display — EDD esconde con esa propiedad
el boton que sobra y declararla aqui lo resucita. */
#edd-purchase-button,
#edd_purchase_submit .edd-submit,
.edd-blocks__checkout .edd-submit {
font-family: var(--pd-fuente);
font-size: 17px;
font-weight: var(--pd-fuerte);
line-height: 1.4;
padding: 14px 32px;
border-radius: var(--pd-radio-boton);
border: 2px solid transparent;
background-color: var(--accent);
color: #FFFFFF;
cursor: pointer;
transition: background-color var(--transicion), color var(--transicion);
}
#edd-purchase-button:hover,
#edd_purchase_submit .edd-submit:hover,
.edd-blocks__checkout .edd-submit:hover {
background-color: var(--contrast);
color: #FFFFFF;
}
#edd_purchase_submit {
margin-block-start: var(--e-l);
}
/* ---------- QUIEN YA TIENE SESION ---------- */
.edd-blocks__checkout-user > p:first-child,
.edd_checkout_user_info_logged_in {
margin-block-end: var(--e-m);
padding: 12px 16px;
background-color: var(--base-2);
border-inline-start: 3px solid var(--accent);
border-radius: var(--pd-radio);
font-size: 15px;
}
/* ---------- LOS CURSOS DEL COMPRADOR ---------- */
.pd-mis-cursos h2 {
margin-block-end: var(--e-m);
}
.pd-mis-cursos ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--e-s);
/* CENTRADA, COMO SU TITULAR. Todos los h2 de la web van centrados por una
regla global, asi que «Tus cursos» tambien, y el boton debajo salia a la
izquierda. Se veia descolgado en la captura del 06/10. */
justify-content: center;
}
.pd-mis-cursos li {
margin: 0;
}
/* ---------- MOVIL ---------- */
@media (max-width: 600px) {
/* La fila se queda en linea y deja que el nombre largo baje el precio a
la siguiente. En columna forzada quedaba un hueco de 225 px por fila.
El contenedor ya trae flex-wrap de arriba. */
.edd-blocks-form__cart .edd-blocks-cart__row {
align-items: baseline;
gap: var(--e-2xs) var(--e-s);
padding: var(--e-s);
}
.edd_cart_item_name {
flex: 1 1 100%;
}
/* LA CABECERA, FUERA. Una cabecera de tabla sin tabla no dice nada.
TRES CLASES, Y HACEN FALTA LAS TRES. En el checkout EDD carga una
tercera hoja, blocks/build/checkout/style-index.css, que va DESPUES
del tema — es la octava y el tema es la sexta. Ahi trae
`.edd-blocks-form__cart .edd-blocks-cart__row { display: flex }` con
0,2,0, asi que con dos clases se empata y gana la suya por ir despues.
Con tres se resuelve por especificidad y no por orden de carga, que es
lo que se quiere. Medido con CSS.getMatchedStylesForNode. */
.edd-blocks-form__cart .edd-blocks-cart .edd-blocks-cart__row-header,
.edd-blocks__cart .edd-blocks-cart .edd-blocks-cart__row-header {
display: none;
}
#edd-purchase-button,
.edd-blocks__checkout .edd-submit {
width: 100%;
}
.pd-mis-cursos ul {
flex-direction: column;
}
.pd-mis-cursos .pd-boton {
display: block;
text-align: center;
}
}
/* ==========================================================================
21 · EL MURO DE FOTOS · 04/10/2026
Seis fotos de David a bordo, pegadas con celo, en Sobre mi.
Hereda el lenguaje del retrato de la portada —seccion 18— y por eso
comparte con el la idea del marco, el celo y el giro. Lo que cambia es la
escala y que aqui cada hoja va girada distinto, porque un muro con todas
las fotos al mismo angulo no parece un muro, parece una tabla.
SIN overflow hidden en la rejilla. El celo sobresale por arriba de cada
foto y las esquinas giradas se salen de su casilla; con overflow puesto se
cortarian. El aire de la seccion ya las contiene.
========================================================================== */
.pd-muro {
max-width: var(--pd-ancho);
margin-inline: auto;
}
/* LA CABECERA, CENTRADA A MANO.
La seccion 4 centra la etiqueta con
`.pd-seccion > .wp-block-group__inner-container > .pd-etiqueta`, que pide
que sea HIJA DIRECTA del contenedor. Aqui la pinta el shortcode dentro de
.pd-muro, asi que no le llega y salia la etiqueta a la izquierda con el
titular centrado. Se vio en la captura del 04/10. */
.pd-muro > .pd-etiqueta,
.pd-muro > h2 {
text-align: center;
}
.pd-muro > h2 {
margin-block-start: var(--e-2xs);
}
.pd-muro__rejilla {
display: grid;
/* LA MISMA PISTA EN LOS DOS MUROS, y de ahi sale que la foto mida lo
mismo en Sobre mi y en Cruceros. Antes uno iba a tres columnas fijas y
el otro a cuatro, asi que la misma tarjeta salia de 369 px en una
pagina y de 272 px en la otra — que es lo que se veia distinto.
Con auto-fill no se declara el NUMERO de columnas sino el ANCHO MINIMO
de cada una, y el navegador mete las que caben. A 1140 px de contenido
caben tres de 354,67 px en los dos muros, y al estrechar bajan a dos y
a una por su cuenta, iguales. Dejo de haber dos juegos de breakpoints
que mantener en paralelo y descuadrarse.
EL TOPE DE 420 NO VA AQUI AUNQUE LO PAREZCA, va en .pd-muro__foto.
MEDIDO EL 04/10: con minmax(290px, 420px) el muro se quedaba en DOS
columnas a 1440 px en vez de tres. auto-fill no cuenta las pistas que
caben usando el minimo sino el MAXIMO cuando es una longitud
definida — floor((1140+38) / (420+38)) = 2. Con 1fr el maximo es
indefinido, cuenta por el minimo y salen las tres.
El tope sigue haciendo falta porque sin el, a 600 px de pantalla la
foto sola salia de 583 px de marco, mas grande que en escritorio y al
reves de lo que uno espera al estrechar. Topando la TARJETA se
consigue lo mismo sin tocar la cuenta de columnas. */
grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
/* Hueco generoso. Con poco hueco las esquinas giradas de dos fotos
vecinas se tocan y parece un error, no una intencion. */
gap: 46px 38px;
margin-block-start: var(--e-l);
}
.pd-muro__foto {
position: relative;
margin: 0;
/* El tope del que habla la rejilla. justify-self la centra en su pista
cuando la pista es mas ancha que esto.
EL box-sizing NO SOBRA. Sin el, `width: 100%` midio los 354,67 px de
la pista como CAJA DE CONTENIDO y le sumo los 20 de padding, asi que
la hoja salia de 374,67 y se metia en el hueco — medido el 04/10, tres
pisadas en Sobre mi y seis en Cruceros. El tema no trae reset
universal de border-box, asi que aqui se declara. */
box-sizing: border-box;
max-width: 420px;
justify-self: center;
width: 100%;
padding: 10px 10px 12px;
background-color: #FFFFFF;
box-shadow: 0 10px 26px rgba(18, 41, 61, 0.18);
}
.pd-muro__foto img {
display: block;
width: 100%;
height: auto;
}
/* El celo de cada hoja. Mas pequeño que el del retrato de la portada,
proporcional a que la foto tambien lo es. */
.pd-muro__foto::before {
content: "";
position: absolute;
inset-block-start: -11px;
inset-inline-start: 50%;
width: 84px;
height: 24px;
transform: translateX(-50%) rotate(1.6deg);
/* EL MISMO TONO SOBRE LOS DOS FONDOS. El celo va sobre hueso en Sobre mi
y sobre blanco en Cruceros. Con el valor anterior quedaba a cuatro
puntos de RGB del hueso —invisible— y a once del blanco, asi que en
una pagina habia celo y en la otra casi no. Este cae en 234 sobre
blanco y en 229 sobre hueso, que se ve parecido en las dos. */
background-color: rgba(214, 209, 198, 0.5);
border-inline: 1px solid rgba(255, 255, 255, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
}
/* DOCE GIROS DISTINTOS, uno por foto. Los valores no son al azar — se
alternan de signo para que el ojo no encuentre un patron, y ninguno pasa
de 3 grados porque a partir de ahi deja de parecer una foto mal pegada y
empieza a parecer un error de maquetacion.
SON DOCE Y NO SEIS porque esta lista la usan los dos muros — el de Sobre
mi gasta las seis primeras y el de Cruceros las doce. Antes cada uno
tenia su propia tanda y la de Cruceros era mas suave, asi que alli las
fotos parecian alineadas y aqui esparcidas.
COMPROBADO QUE NO SE PISAN a 2,8 grados con tarjeta de 369x382 — el giro
le añade 18,7 px de ancho y quedan 19 px libres en un hueco de 38. */
.pd-muro__foto:nth-child(1) { transform: rotate(-2.4deg); }
.pd-muro__foto:nth-child(2) { transform: rotate(1.6deg); }
.pd-muro__foto:nth-child(3) { transform: rotate(-1.1deg); }
.pd-muro__foto:nth-child(4) { transform: rotate(2.8deg); }
.pd-muro__foto:nth-child(5) { transform: rotate(-1.9deg); }
.pd-muro__foto:nth-child(6) { transform: rotate(1.2deg); }
.pd-muro__foto:nth-child(7) { transform: rotate(-2.1deg); }
.pd-muro__foto:nth-child(8) { transform: rotate(2.3deg); }
.pd-muro__foto:nth-child(9) { transform: rotate(-1.4deg); }
.pd-muro__foto:nth-child(10) { transform: rotate(1.9deg); }
.pd-muro__foto:nth-child(11) { transform: rotate(-2.6deg); }
.pd-muro__foto:nth-child(12) { transform: rotate(1.5deg); }
/* Y el celo girado al reves que su hoja, que es como queda al pegarlo de
verdad. Sin esto las dos cosas van paralelas y canta. */
.pd-muro__foto:nth-child(odd)::before { transform: translateX(-50%) rotate(2.2deg); }
.pd-muro__foto:nth-child(even)::before { transform: translateX(-50%) rotate(-1.8deg); }
/* Al pasar por encima la hoja se endereza y sube un poco. Es el unico
movimiento de la seccion y se apaga con prefers-reduced-motion. */
@media (hover: hover) {
.pd-muro__foto {
transition: transform var(--transicion), box-shadow var(--transicion);
}
.pd-muro__foto:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 16px 34px rgba(18, 41, 61, 0.26);
z-index: 2;
}
}
@media (prefers-reduced-motion: reduce) {
.pd-muro__foto {
transition: none;
}
.pd-muro__foto:hover {
transform: none;
}
}
/* MOVIL. YA NO HAY QUE DECIRLE CUANTAS COLUMNAS — el auto-fill de arriba
baja a dos y a una por su cuenta, y ademas lo hace a la vez en los dos
muros, que es justo lo que no pasaba con los breakpoints a mano.
TAMPOCO SE ENCOGE EL CELO. Antes hacia falta porque en movil la tarjeta
se quedaba en 150 px y un celo de 84 la cruzaba entera; con el minimo de
290 px la tarjeta nunca baja de ahi y el mismo celo vale en todo el
recorrido. Lo unico que se aprieta es el hueco, que con una o dos
columnas no necesita 46 px. */
@media (max-width: 900px) {
.pd-muro__rejilla {
gap: 38px 30px;
}
}
/* ==========================================================================
22 · EL CARRUSEL DE RESEÑAS · 04/10/2026
Ajustes del plugin pd-resenas al tema. El plugin viene de swd-new y alli
funciona tal cual, asi que lo que hace falta aqui se escribe en el tema y
NO se toca el plugin — asi sigue siendo el mismo codigo en las dos webs y
se puede actualizar en bloque.
DOS CLASES EN LOS SELECTORES, no una. El CSS del plugin se encola en
wp_enqueue_scripts y puede cargar despues que este, asi que empatar a una
clase es jugarsela al orden. Con la seccion delante gana la especificidad.
========================================================================== */
/* CENTRADO CUANDO CABEN TODAS.
Las tarjetas miden un tercio del ancho, asi que con dos reseñas ocupaban
dos tercios y dejaban un hueco a la derecha — se vio en la captura del
04/10 en la pagina del Cruise Staff, que solo tiene dos.
«safe center» y no «center» a secas. El carril hace scroll horizontal, y
un center normal, cuando el contenido desborda, recorta por el principio y
deja la primera tarjeta inalcanzable. Con safe, el navegador centra solo
mientras quepa y vuelve a alinear al inicio en cuanto no cabe. */
.pd-resenas-seccion .pd-resenas__lista {
justify-content: safe center;
}
/* La seccion ya trae su aire de .pd-seccion, asi que el margen propio del
plugin sobra y sumaba el doble. */
.pd-resenas-seccion .pd-resenas {
margin-block: 0;
}
/* El titular, con la tipografia de los demas de la web en vez de la del
plugin. */
.pd-resenas-seccion .pd-resenas__titulo {
font-family: var(--pd-fuente);
color: var(--contrast);
text-align: center;
}
/* ==========================================================================
23 · EL MURO DE DESTINOS · 04/10/2026
Variante del muro de la seccion 21 para la pagina de Cruceros.
AQUI SOLO VIVE LO QUE DE VERDAD ES DISTINTO, que es el nombre escrito en
la hoja. Todo lo demas —el ancho de la tarjeta, el marco, el celo, la
sombra, el giro y el comportamiento— lo pone la seccion 21 y los dos
muros lo comparten.
ANTES NO ERA ASI y por eso se veian distintos. Esta seccion redeclaraba
la rejilla a cuatro columnas, el celo mas pequeño y una tanda de giros
mas suave, asi que la misma tarjeta salia de 272 px en Cruceros y de 369
en Sobre mi. Lo que se arregla no es «ponerle los mismos numeros a los
dos» sino que haya un solo sitio donde esten los numeros.
========================================================================== */
/* EL PIE, dentro del marco. Es lo que convierte la hoja en una polaroid
escrita a mano, y es la razon de que este muro tenga pie y el de Sobre mi
no — alli las fotos son escenas y aqui el valor de la foto ES el sitio. */
.pd-muro__foto--pie {
padding-block-end: 0;
}
.pd-muro__foto--pie figcaption {
padding: 12px 6px 14px;
font-family: var(--pd-fuente);
font-size: 15px;
font-weight: var(--pd-medio);
line-height: 1.3;
color: var(--contrast);
text-align: center;
/* DOS LINEAS RESERVADAS, Y EN LOS DOCE.
-------------------------------------------------------------------
Antes era UNA linea con `nowrap` y puntos suspensivos, y estaba bien
cuando los pies eran «Kotor» o «Bergen». Desde el 06/10 llevan pais y
el mas largo ya no cabe — medido, «Virgin Gorda, Islas Vírgenes
Británicas» pide 305 px y tiene 275 a una ventana de 1.024, que es el
peor caso porque ahi la rejilla todavia da TRES columnas y son las
mas estrechas de todo el rango. Por debajo baja a dos y sobra sitio.
Cortarlo con puntos suspensivos esconderia el pais, que es justo lo
que se acaba de anadir, asi que se deja partir en dos lineas.
EL ALTO SE RESERVA EN LOS DOCE y no solo en el que desborda. Si solo
creciera uno, esa tarjeta seria mas alta que sus vecinas y la fila
quedaria descuadrada. Con el minimo puesto en todos, los doce marcos
miden lo mismo haya una linea o dos.
El grid con place-items centra el texto en esa caja de dos lineas,
que si no el pie de una sola linea se quedaria pegado arriba. */
display: grid;
place-items: center;
min-height: calc(2 * 1.3em);
overflow: hidden;
}
/* DOS COLUMNAS EN MOVIL, EN LOS DOS MUROS · unificado el 06/10/2026
-------------------------------------------------------------------------
AQUI HABIA UNA EXCEPCION SOLO PARA DESTINOS y su motivo ha caducado. El
comentario decia «para las seis de Sobre mi esta bien pero para estas doce
son doce pantallas de scroll», y Sobre mi YA NO TIENE SEIS FOTOS, tiene
doce igual que Cruceros. Contadas hoy ejecutando los dos shortcodes.
LO QUE SE VEIA, medido antes de tocar nada.
ancho Cruceros Sobre mi
320 2 cols 1 col
480 2 1
600 2 1
768 2 2
O sea que la misma seccion de fotos se recorria de dos gestos en una
pagina y de doce en la otra. Marc pidio el mismo criterio en las dos, y
que sean dos columnas.
El selector pierde el `--destinos` y pasa a valer para los dos muros. El
pie se queda acotado a destinos porque es el unico que lleva texto bajo
la foto. */
@media (max-width: 680px) {
.pd-muro__rejilla {
grid-template-columns: repeat(2, 1fr);
gap: 30px 20px;
}
/* EL CELO TAMBIEN EN LOS DOS. La seccion 21 explica que no hacia falta
encogerlo porque con el minimo de 290 px la tarjeta nunca bajaba de
ahi. A dos columnas si baja —130 px a 320 de pantalla—, asi que un
celo a tamano normal cruzaria la foto entera. Vale para el muro de
David exactamente igual que para el de destinos. */
.pd-muro__foto::before {
width: 54px;
height: 17px;
inset-block-start: -8px;
}
.pd-muro--destinos .pd-muro__foto--pie figcaption {
padding: 8px 2px 10px;
font-size: 13px;
}
}
/* TRES LINEAS RESERVADAS EN LA PANTALLA MAS ESTRECHA.
-------------------------------------------------------------------------
A dos columnas la tarjeta se queda en 140 px de texto util a 320, y ahi
«Virgin Gorda, Islas Vírgenes Británicas» y «Dubái, Emiratos Árabes
Unidos» necesitan TRES lineas. Medido — esas dos tarjetas salian de 189 px
y las otras diez de 172, o sea 17 px de diferencia dentro de la misma
fila.
El corte va en 360 y no en 320 porque a 390 ya caben las doce en dos
lineas, comprobado. Entre 360 y 390 no hay pantallas que me consten, pero
el limite tiene que caer en algun sitio y por debajo nunca sobra sitio. */
@media (max-width: 360px) {
.pd-muro--destinos .pd-muro__foto--pie figcaption {
min-height: calc(3 * 1.3em);
}
}
/* ==========================================================================
24 · EL PIE EN BLANCO · 04/10/2026
Todo el texto del pie pasa a blanco, a peticion de Marc.
Lo que habia, medido antes de tocarlo — los titulos ya eran blancos, los
enlaces salian en el dorado del acento #866631 y los parrafos y el
copyright en el gris azulado --apoyo-oscuro #9FAEBA.
CONTRASTE, medido sobre el fondo real del pie, que es --noche #0A1C2B.
Blanco da 17,30:1, muy por encima del 4,5 que pide WCAG AA para texto
normal. El dorado del acento daba 3,26:1, o sea que los enlaces del pie
NO cumplian. Este cambio, ademas de lo que pidio Marc, arregla eso.
El gris --apoyo-oscuro si cumplia, con 7,61:1.
========================================================================== */
.site-footer,
.site-footer .pd-pie__col,
.site-footer .pd-pie__col p,
.site-footer .copyright-bar,
.site-footer .copyright-bar p {
color: #FFFFFF;
}
/* LOS ENLACES TAMBIEN, y con la especificidad suficiente. El color dorado
venia de la regla general de enlaces del tema, que gana a .site-footer a
secas por ir despues. */
.site-footer a,
.site-footer .pd-pie__col a,
.site-footer .copyright-bar a {
color: #FFFFFF;
}
/* SI TODO ES BLANCO, EL HOVER NECESITA OTRA SEÑAL.
Antes el enlace se distinguia por el color; ahora no, asi que al pasar
por encima se subraya. Sin esto, un enlace y un parrafo del pie serian
exactamente iguales y no habria forma de saber que uno se puede pulsar. */
.site-footer a {
text-decoration: none;
transition: text-decoration-color var(--transicion), opacity var(--transicion);
}
.site-footer a:hover,
.site-footer a:focus-visible {
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
/* Y el foco por teclado, que sobre fondo oscuro necesita un anillo claro. */
.site-footer a:focus-visible {
outline: 2px solid #FFFFFF;
outline-offset: 3px;
border-radius: 2px;
}
/* ==========================================================================
25 · EL AIRE DEL PIE · 04/10/2026
Los enlaces del pie estaban pegados. Marc lo vio y al medirlo salio esto,
en escritorio:
hueco entre un enlace y el siguiente ... 8 px
alto de cada enlace ................... 19 px
hueco entre el titulo y el primero .... 16 px
Ocho pixeles entre dos lineas de texto de 16 no es una lista, es un
parrafo mal maquetado. Y 19 px de alto es ademas un objetivo pulsable por
debajo de los 24x24 que pide WCAG 2.2 en el criterio 2.5.8.
EN MOVIL YA ESTABA BIEN y no se toca — alli los enlaces ya llevan
padding-block de 12, miden 48 px y se pulsan sin problema. Lo que faltaba
era llevar esa misma idea al escritorio.
RETIRADA ENTERA EL 07/10/2026, al igualar el pie a swd-new.
-------------------------------------------------------------------------
Aqui habia un @media (min-width: 1025px) que ponia los enlaces en
`display: block` con 8 px de relleno, quitaba el hueco de la lista y
recortaba el margen del titulo a 12 px.
SWD-NEW NO HACE NADA DE ESO. Alli el aire entre enlaces sale del
interlineado de 1,9 mas 0,5em de margen en el , que es lo que ahora
hace la seccion 13. Dejar estas reglas encima significaba que el pie
seguia siendo el de antes en cuanto la pantalla pasaba de 1024.
El problema que resolvia era real —8 px entre lineas y enlaces de 19 px—
pero lo resuelve igual el ritmo de swd-new · 27,4 px de linea mas 7,2 de
margen son 34,5 px de paso, mas que los 35 de antes menos el relleno. */
/* ==========================================================================
26 · LAS COLUMNAS DEL PIE, REPARTIDAS · 04/10/2026
Al quitar la columna de Contacto se quedaron las tres juntas en el centro
con el ancho a medio usar. Marc lo vio y al medirlo salio esto, igual en
1440, 1920 y 2560:
ancho de la fila ...................... 1140 px
lo que ocupaban las tres columnas ..... 744 px (3x200 + 2x72)
espacio desaprovechado a cada lado .... 198 px
CON CUATRO COLUMNAS NO SE NOTABA, porque 4x200 + 3x72 son 1016 y casi
llenaban los 1140. Al pasar a tres sobraron 272 px y el grupo se encogio
hacia el centro, que es justo lo que se veia.
LA SOLUCION NO ES SUBIR EL GAP. Eso separaria las columnas pero dejaria
igual el hueco de los lados, y en una pantalla mas ancha volveria a
descuadrar. Con flex:1 cada columna se queda con un tercio del ancho
real, asi que se reparten solas sea cual sea la pantalla.
========================================================================== */
@media (min-width: 768px) {
/* Un tercio cada una. La base 0 es lo que hace que repartan el ancho en
partes iguales y no en proporcion a lo que mide su texto — con base
auto, «Legal» con tres enlaces cortos se quedaria mas estrecha que
«La web» con cuatro. */
.site-footer .pd-pie__col {
flex: 1 1 0;
min-width: 0;
}
/* El gap ya no hace el trabajo de separar, lo hace el reparto. Se deja
un minimo para que dos textos largos nunca se toquen.
07/10/2026 · de 32 a 40, que es la separacion de swd-new. Alli sale del
`inner-padding: 0 0 0 40px` de GeneratePress combinado con el
`margin-left: -40px` de .inside-footer-widgets — el mismo resultado que
un gap de 40, comprobado con las cuentas en la seccion 13. */
.site-footer .pd-pie__fila {
gap: 40px;
justify-content: flex-start;
}
}
/* ==========================================================================
27 · EL PIE, ALINEADO A LA IZQUIERDA COMO EL DE SWD · 04/10/2026
Esta seccion centraba el contenido de las columnas. Marc lo pidio asi por
la mañana y por la tarde pidio el pie igual que el de swd-new, donde las
columnas van alineadas a la izquierda. Manda lo segundo.
SE REESCRIBE EN VEZ DE AÑADIR UN OVERRIDE ENCIMA. Dejar el centrado y
taparlo con otra regla deja dos reglas peleandose por lo mismo y la
siguiente persona no sabe cual manda.
EL TITULO SIGUE NOMBRADO APARTE, Y NO SOBRA. La seccion 13 declara
`.site-footer .pd-pie__titulo { text-align: left }`, y una declaracion
propia gana siempre a la heredada del padre. Aqui coincide con lo que se
quiere, pero se deja escrito para que no vuelva a pasar lo de la mañana —
los titulos a la izquierda con los enlaces centrados debajo.
POR DEBAJO DE 768 NO SE TOCA. Ahi las columnas van una sobre otra y el pie
se centra entero, que es tambien lo que hace swd-new con su
`@media (max-width: 768px) { .inside-footer-widgets { text-align: center } }`.
========================================================================== */
/* 769 Y NO 768. swd-new centra con `@media (max-width: 768px)`, asi que a
768 clavados esta CENTRADO. Con min-width: 768 aqui se alineaba a la
izquierda justo en ese ancho, que es un iPad en vertical. */
@media (min-width: 769px) {
.site-footer .pd-pie__col,
.site-footer .pd-pie__titulo,
.site-footer .pd-pie__col ul a {
text-align: start;
}
}
/* ==========================================================================
28 · EL LOGO · 05/10/2026
AQUI HABIA DOS TAMAÑOS CALCULADOS A MANO, 20,5 px en ingles y 21,8 en
español, para que «David García-Carazo» midiera exactamente lo mismo que
el eslogan de debajo. Salian de una regla de tres contra el ancho medido
de cada cadena, y cuadraban con menos de un cuarto de pixel de error.
SE RETIRAN PORQUE YA NO CUADRAN NADA. El 05/10 la web pasa a llamarse
«Cruises with David», que es otra cadena y mide otra cosa, y Marc dijo
expresamente que el ancho ya da igual. Dos numeros magicos cuyo motivo ha
desaparecido no se dejan puestos — el que los lea manana creeria que
siguen alineando algo.
Sin esto manda el tamaño del tema, que es el que habia antes de empezar a
cuadrarlos. Si algun dia se quiere volver a igualar las dos lineas, el
metodo esta en el historico del 04/10 — se mide el ancho de cada una con
un Range y el tamaño sale de una regla de tres, porque el ancho de un
texto escala lineal con el cuerpo en la misma fuente.
========================================================================== */
/* ==========================================================================
29 · AIRE DEBAJO DE LOS DOS MUROS · 04/10/2026
Las fotos quedaban pegadas a la banda oscura de la llamada a la accion, en
Sobre mi y en Cruceros.
MEDIDO: 55,6 px en Sobre mi y 59,7 en Cruceros entre el borde de la foto
mas baja y el arranque de la banda. La separacion declarada eran los 64 px
de siempre, pero la sombra de la hoja —0 10px 26px— se come unos 23, asi
que de aire limpio quedaban 32. De ahi que se viera apretado teniendo el
mismo padding que cualquier otra seccion.
SE DEVUELVEN LOS 40 QUE SE COME LA HOJA y no un numero redondo inventado.
--e-l es justo ese orden de magnitud, y al ir en calc sobre --e-seccion
sigue al token en movil —48+40— en vez de clavarse en un valor de
escritorio.
SOLO ABAJO Y NO ARRIBA. Arriba la hoja no tiene sombra que la separe del
titular, y ademas ahi ya hay el margen de la rejilla. Abajo es donde el
problema existe.
VA EN LA SECCION DEL MURO Y NO EN LA DEL CIERRE. El aire que falta es el
que rodea a la foto, y tiene que ser del color del papel —hueso o
blanco—, no de la banda azul. Metido en el cierre, la banda crece y la
foto sigue igual de pegada a su borde.
========================================================================== */
.pd-muro-seccion,
.pd-destinos-seccion {
padding-block-end: calc(var(--e-seccion) + var(--e-l));
}
/* ==========================================================================
30 · EL AVISO DENTRO DEL CONTENIDO · 04/10/2026
Para decir algo que el visitante TIENE que leer antes de decidir. Hoy lo
usa una sola cosa — que el Cruise Staff esta grabado en ingles aunque su
pagina este en español.
POR QUE NO VALE .pd-aviso-acceso, que ya existe en la seccion 19. Aquel lo
pinta functions.php para quien llega rebotado de la zona del curso, va
suelto fuera del contenido y lleva `role="status"` porque aparece despues
de una accion. Este va escrito dentro de la pagina y esta ahi siempre, asi
que no es un estado y no lleva rol.
PANEL BLANCO CON FILETE, y no un fondo de color. El aviso cae sobre blanco
en la pagina publica y sobre hueso en la del curso, y un fondo tintado que
se vea en uno se pierde en el otro — es la misma trampa que el celo del
muro. Blanco con borde y sombra se distingue de los dos.
EL FILETE DORADO A LA IZQUIERDA es el mismo rasgo que usa swd-new en sus
tarjetas y el que ya lleva .pd-aviso-acceso, asi que el aviso se lee como
parte del sistema y no como un parche.
========================================================================== */
.pd-aviso {
max-width: 46rem;
margin-block: var(--e-m);
margin-inline: auto;
padding: 18px 22px;
background-color: var(--base-3);
border: 1px solid var(--filete);
border-inline-start: 3px solid var(--accent);
border-radius: var(--pd-radio);
box-shadow: 0 4px 14px rgba(18, 41, 61, 0.07);
text-align: start;
}
.pd-aviso > * {
margin-block: 0;
}
.pd-aviso > * + * {
margin-block-start: var(--e-2xs);
}
/* El titular del aviso. No es un heading de verdad a proposito — no abre
seccion ni debe salir en el indice del documento, asi que va en un
parrafo con peso. */
.pd-aviso__titulo {
font-family: var(--pd-fuente);
font-weight: var(--pd-medio);
font-size: 17px;
line-height: 1.35;
color: var(--contrast);
}
.pd-aviso p:not(.pd-aviso__titulo) {
font-size: 16px;
line-height: 1.6;
color: var(--contrast-2);
}
@media (max-width: 600px) {
.pd-aviso {
padding: 15px 17px;
}
.pd-aviso__titulo {
font-size: 16px;
}
}
/* ==========================================================================
31 · EL CHECKOUT, SEGUNDA PASADA · 04/10/2026
La seccion 20 le dio el registro del tema y Marc dijo que faltaba pulirlo.
Esto es lo que faltaba, y casi todo sale de una sola causa.
POR QUE LA SECCION 20 NO LLEGABA A LOS CAMPOS. Los `input` SI llevan la
clase `.edd-input`, comprobado en el HTML servido. Lo que pasa es que EDD
los pinta con `.wp-block-edd-checkout #edd_purchase_form .edd-blocks-form
input[type=text]`, que pesa (1,3,1), y la seccion 20 usaba `.edd-input`,
que pesa (0,1,0). Medido el 04/10 — padding 4px 6px y borde 1px #ccc, o
sea ni uno solo de los valores del tema.
Y NO SE ARREGLA EMPATANDO. `blocks/build/checkout/style-index.css` es la
hoja 19 y el tema la 15, asi que a igual peso gana siempre la de EDD. Hay
que subir por encima, no igualar. Aqui se sube con el id del envoltorio,
que da (2,2,1) y gana por el numero de ids sin necesidad de `!important`.
LAS DOS COLUMNAS NO SON CSS MIO. El bloque de EDD ya trae el reparto, se
elige con su atributo `layout` y las paginas 135 y 186 pasaron a
`two-thirds`. Lo de aqui es solo el acabado de lo que el bloque reparte.
========================================================================== */
/* ---------- LAS DOS COLUMNAS, ALINEADAS ARRIBA ---------- */
/* Sin esto las dos cajas se estiran a la altura de la fila y el resumen,
que es mas corto, queda con un hueco blanco debajo del total. */
@media (min-width: 782px) {
#edd_checkout_form_wrap.edd-checkout__layout--two-thirds {
align-items: start;
gap: var(--e-l);
}
/* El resumen acompaña mientras se rellena el formulario. El 120 sale de
la cabecera pegajosa mas aire. */
#edd_checkout_form_wrap .edd-blocks__cart {
position: sticky;
top: 120px;
}
}
/* ---------- EL RESUMEN DEL PEDIDO ---------- */
/* A LA IZQUIERDA, Y HAY QUE DECIRLO. El h2 lo pinta functions.php dentro
del contenido de la pagina, asi que hereda el centrado de la cabecera de
seccion del tema y salia centrado sobre una tarjeta alineada a la
izquierda. Misma leccion que el titulo del pie en la seccion 27 — un
valor declarado gana a uno heredado, pero hay que declararlo. */
.pd-resumen__titulo {
margin-block: 0 var(--e-s);
font-size: 20px;
text-align: start;
}
/* LA CABECERA DE TABLA, FUERA, Y AHORA EN TODOS LOS ANCHOS. En la seccion
20 solo se quitaba por debajo de 600 px. Con el resumen ya en columna
estrecha, «NOMBRE DEL ARTICULO» y «PRECIO» ocupaban dos lineas para
rotular un carrito de un solo curso. En su lugar va el h2 de arriba, que
lo pone functions.php y ademas sirve para navegar con lector de pantalla.
CON EL ID DEL CARRITO, no con tres clases. EDD declara el display en
`.edd-blocks-form__cart .edd-blocks-cart__row`, que pesa (0,2,0); esto
pesa (1,1,0) y gana por el id, que es mas corto de leer y no depende de
cuantas clases traiga la proxima version. */
#edd_checkout_cart .edd-blocks-cart__row-header {
display: none;
}
#edd_checkout_cart .edd-blocks-cart__row-footer {
font-size: 17px;
}
/* ---------- LOS CAMPOS ---------- */
#edd_checkout_form_wrap #edd_purchase_form fieldset.edd-blocks-form {
gap: var(--e-m);
padding: var(--e-l) var(--e-m) var(--e-m);
border: 1px solid var(--base);
border-radius: var(--pd-radio);
background-color: #FFFFFF;
box-shadow: var(--pd-sombra);
}
/* La leyenda, dentro de la caja y no montada en su borde. Con el padding
de arriba del fieldset tiene sitio propio. */
#edd_checkout_form_wrap #edd_purchase_form fieldset.edd-blocks-form legend {
float: left;
width: 100%;
margin-block-end: var(--e-s);
padding-inline: 0;
}
/* AQUI ESTA EL ARREGLO QUE IMPORTA. (2,2,1) contra el (1,3,1) de EDD. */
#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form input.edd-input,
#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form select {
padding: 12px 14px;
font-size: 16px; /* por debajo de 16 iOS hace zoom al enfocar */
line-height: 1.5;
border: 1px solid var(--linea-ui);
border-radius: var(--pd-radio-boton);
background-color: #FFFFFF;
color: var(--contrast);
}
#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form input.edd-input::placeholder {
color: var(--contrast-3);
}
/* EL MARGEN DE LA ETIQUETA LLEVA `!important` EN EDD, asi que aqui tambien,
y es el unico de toda la hoja. No hay forma de ganarle por especificidad
a un `!important`, y la alternativa —dejar 0,5 rem entre etiqueta y campo
cuando el resto del formulario respira el doble— se nota. */
#edd_checkout_form_wrap #edd_purchase_form .edd-blocks-form .edd-blocks-form__group > label {
margin-block-end: var(--e-3xs) !important;
}
/* ---------- EL BOTON DE PAGAR ---------- */
/* A LO ANCHO DE SU COLUMNA. Un boton de 145 px suelto debajo de una caja de
641 se lee como un enlace perdido y no como el final del proceso. Sigue
SIN `display`, por lo de la seccion 19 — EDD esconde con esa propiedad el
boton que sobra y declararla aqui lo resucita. */
#edd_purchase_submit #edd-purchase-button,
#edd_purchase_submit .edd-submit {
width: 100%;
padding-block: 17px;
font-size: 18px;
}
#edd_checkout_form_wrap #edd_purchase_submit {
margin-block-start: var(--e-m);
}
/* ---------- EL CARRITO VACIO ---------- */
/* Sin esto el aviso es una frase suelta centrada y nada mas.
Y LA CAJA, que es lo que lo sacaba de la pantalla. EDD le declara
`width: 100%` y `padding: 3rem 1rem`, y este `span` computa
`box-sizing: content-box`, asi que a 320 px medía 280 de columna + 32 de
relleno = 312 empezando en x=20, o sea 332. Doce pixeles de scroll
horizontal en el checkout con el carrito vacio, en los seis anchos de
movil y en los dos idiomas. Medido, no deducido — la columna de la
rejilla es `20px 280px 20px`.
Se declara `border-box` en vez de quitarle el relleno, que es de EDD y
le da aire al aviso. */
.edd_empty_cart {
box-sizing: border-box;
display: block;
padding-block: var(--e-xl);
text-align: center;
font-size: 18px;
color: var(--contrast-2);
}
/* EL BOTON VA EN SU PROPIA LINEA · 06/10/2026
Estaba en `inline-block` dentro del mismo `span` que el aviso, asi que
el `margin-block-start` no hacia nada —es un margen VERTICAL sobre una
caja en linea— y el boton se quedaba pegado al texto. Medido, CERO
pixeles de separacion de 768 px de ventana para arriba. En movil no se
veia porque ahi el texto ya partia solo.
Con `block` y `width: fit-content` baja a su linea, se centra con los
margenes automaticos y el `margin-block-start` por fin cuenta. */
.pd-carrito-vacio__salida {
display: block;
width: fit-content;
margin-block-start: var(--e-m);
margin-inline: auto;
}
/* ---------- MOVIL ---------- */
@media (max-width: 781px) {
/* En una columna el resumen va primero, que es lo que se quiere mirar
antes de ponerse a teclear. El bloque ya lo coloca asi; aqui solo se
le da el aire que en escritorio ponia el `gap` de la rejilla. */
#edd_checkout_form_wrap .edd-blocks__cart {
margin-block-end: var(--e-m);
}
#edd_checkout_form_wrap #edd_purchase_form fieldset.edd-blocks-form {
padding: var(--e-m) var(--e-s) var(--e-s);
}
}
/* ==========================================================================
32 · EL RETRATO SUELTO Y LA NOTA DE LOS SUBTITULOS · 04/10/2026
Dos cosas de la pagina de los cursos.
========================================================================== */
/* ---------- EL RETRATO, FUERA DEL HERO ---------- */
/* La misma foto pegada de la portada, pero aqui cae sobre hueso en vez de
sobre el panel oscuro del hero, y eso cambia dos cosas.
LA SOMBRA, MAS LIGERA. La de la seccion 18 es `0 20px 44px` al 46 % de
negro porque alli hay que despegar papel blanco de un fondo casi negro.
Sobre hueso esa misma sombra es una mancha. Aqui se usa el peso del muro
de fotos, que ya esta probado sobre este fondo.
EL CELO, MAS VISIBLE. Mismo caso que el muro — el tono de la seccion 18
queda a cuatro puntos de RGB del hueso y desaparece. Se usa el de la
seccion 21, que se ve parecido sobre hueso y sobre blanco. */
.pd-retrato-suelto .pd-pegada {
box-shadow: 0 14px 34px rgba(18, 41, 61, 0.2);
}
.pd-retrato-suelto .pd-pegada::before {
background-color: rgba(214, 209, 198, 0.5);
}
/* MAS ANCHA EN MOVIL QUE LA DEL HERO, y es por la forma de la foto.
-------------------------------------------------------------------------
El clamp de la seccion 18 —200px a 46vw— se calculo para el hero, donde
la foto cae DEBAJO de un bloque de texto a ancho completo y ese 46 % la
deja a la mitad del texto, que es la proporcion que tiene en escritorio.
Aqui la foto esta sola y centrada en su seccion, sin nada al lado que le
de escala. Y desde el 06/10 es APAISADA, no vertical. Medido, de 320 a
430 el marco se quedaba clavado en 204 px porque a esos anchos manda el
minimo del clamp y no el 46vw — con la foto vertical eso daba 204x251 y
se leia, con la apaisada da 204x162 y parece un sello perdido en medio
de la seccion.
Se ata al hueco del contenedor y no al ancho de la ventana. Medido, da
241 px a 320, 301 a 390 y el tope de 330 a partir de 430, que enlaza sin
salto con los 370 de escritorio.
VA DENTRO DE .pd-retrato-suelto a proposito. Con esa clase delante gana
a la regla del hero por especificidad y no puede tocarla. */
@media (max-width: 781px) {
.pd-retrato-suelto .pd-pegada {
width: min(330px, 86%);
}
}
/* Al pasar por encima se endereza, igual que las hojas del muro. Es el
mismo objeto y debe comportarse igual. */
@media (hover: hover) {
.pd-retrato-suelto .pd-pegada {
transition: transform var(--transicion), box-shadow var(--transicion);
}
.pd-retrato-suelto .pd-pegada:hover {
transform: rotate(0deg) translateY(-4px);
box-shadow: 0 20px 44px rgba(18, 41, 61, 0.26);
}
}
@media (prefers-reduced-motion: reduce) {
.pd-retrato-suelto .pd-pegada {
transition: none;
}
.pd-retrato-suelto .pd-pegada:hover {
transform: rotate(-2.2deg);
}
}
/* ---------- LA NOTA DE LOS SUBTITULOS ---------- */
/* Va debajo de la lista de la tarjeta del curso en ingles, en la pagina
española. Pequeña a proposito — es una aclaracion, no un argumento de
venta, y si pesa lo mismo que la lista compite con ella.
SE QUEDA EN 14 px Y NO BAJA MAS. Por debajo de eso deja de leerse comodo
en movil, y un texto que nadie lee no aclara nada. */
.pd-curso__subtitulos {
margin-block: var(--e-s) 0;
font-size: 14px;
line-height: 1.5;
color: var(--contrast-3);
}
/* ==========================================================================
33 · LA FICHA DE AUTOR · 04/10/2026
Debajo del retrato de la pagina de cursos. Es el lockup de la cabecera
—nombre arriba, cargo debajo y los dos al mismo ancho— pero sobre hueso.
LOS NUMEROS SON LOS DE LA CABECERA, MEDIDOS, no parecidos. Montserrat,
700 para el nombre y 400 para el cargo, 13 px el cargo y 21,8 o 20,5 el
nombre segun el idioma, que es lo que iguala los dos anchos. El porque de
los dos tamaños esta en la seccion 28 y no se repite aqui.
EL COLOR DEL CARGO NO SE PUEDE COPIAR, y es el unico cambio de verdad. En
la cabecera va en --apoyo-oscuro, #9FAEBA, que sobre el panel de noche da
7,6:1. Sobre hueso ese mismo color da **2,27:1** y no cumple ni el minimo
de AA. Se usa --contrast-3, que da 4,7:1 sobre este fondo.
SI DAVID CAMBIA EL ESLOGAN esto se descuadra igual que la cabecera, y hay
que recalcular los dos sitios. El texto sale del titulo y la descripcion
del sitio, asi que el contenido si se actualiza solo — lo que no se
actualiza solo es el tamaño que los iguala.
========================================================================== */
.pd-ficha {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
/* MARGIN-INLINE AUTO, Y NO SOBRA. El diseño «constrained» de WordPress le
pone a este parrafo un max-width de 810 px dentro de un contenedor de
1140, pero deja los margenes laterales en 0. Medido el 04/10 — la caja
se quedaba con su centro en 555 mientras la foto estaba centrada en
720, asi que la ficha salia descolgada debajo del retrato.
Y `margin-block` NO sirve para esto, que es donde cai. Solo toca arriba
y abajo. El retrato de la seccion 18 se centra porque lleva
`margin: 0 auto`, y aqui hacia falta lo mismo. */
margin-block: var(--e-m) 0;
margin-inline: auto;
text-align: center;
}
.pd-ficha__nombre {
font-family: var(--pd-fuente);
font-weight: var(--pd-fuerte);
font-size: 20.5px;
line-height: 1.2;
color: var(--contrast);
}
html[lang|="es"] .pd-ficha__nombre {
font-size: 21.8px;
}
.pd-ficha__cargo {
font-family: var(--pd-fuente);
font-weight: 400;
font-size: 13px;
line-height: 1.5;
color: var(--contrast-3);
}
/* ==========================================================================
34 · LO QUE QUEDA DEL PIE IGUALADO A SWD · 04/10/2026
Aqui hubo un bloque entero de iconos redondos para las redes, copiado de
swd-new. Se retiro el mismo dia — Marc los probo y prefirio el nombre de
cada red escrito, como las otras dos columnas del pie.
SE BORRA EN VEZ DE DEJARLO APAGADO. CSS que no usa nadie es CSS que la
proxima persona tiene que leer para descubrir que no hace nada. El
marcado de los iconos tampoco existe ya, asi que estas reglas no tenian
a quien aplicarse.
LO QUE SI SE QUEDA del pie de swd-new es el aire de la barra de abajo,
con sus numeros leidos de su hoja — `padding` de 1,5 rem.
========================================================================== */
.site-info {
padding-block: 1.5rem;
}
/* POR DEBAJO DE 768 TODO AL CENTRO, que es lo que hace swd-new con su
`.inside-footer-widgets { text-align: center }`. En una columna el texto
pegado a la izquierda con el copyright centrado debajo queda descosido. */
/* 768 y no 767, para que case con el centrado de swd-new. */
@media (max-width: 768px) {
.site-footer .pd-pie__col,
.site-footer .pd-pie__titulo,
.site-footer .pd-pie__col ul a {
text-align: center;
}
}
.pd-copyright {
margin: 0;
}
/* La barra de abajo se queda SOLO con el copyright. Los iconos subieron a
la tercera columna del pie el 04/10, asi que aqui ya no hay dos hijos que
separar y el gap que habia aqui sobraba. */
/* ==========================================================================
35 · LA ZONA DE CUENTA · 06/10/2026
Las pantallas de acceder, recuperar contraseña y ponerse una nueva. Las
pinta el bloque `edd/login`, que las tres las saca del mismo sitio y
cambia de cara segun la URL.
POR QUE NO LES LLEGABA NADA DE LA SECCION 20. Alli todo esta acotado a
`.edd-blocks__checkout`, que en estas paginas no existe. El bloque de
acceso cuelga de `.wp-block-edd-login` y se quedaba con el CSS de serie
de EDD — boton azul de Bootstrap, campos de 34 px y esquina recta.
CONTRA QUE SE PELEA, LEIDO DE SU HOJA Y NO SUPUESTO.
`.edd-blocks-form input[type=text]` (0,2,0) padding 4px 6px
`[type=submit].edd-submit` (0,2,0) borde #ccc, radio 4px
`.edd-blocks-form .edd-required-indicator` (0,2,0) rojo #dc3232
`.edd-blocks-form .edd-blocks-form__group>label` margin-bottom !important
Por eso aqui TODO va precedido de `.wp-block-edd-login`, que sube un
punto de clase y gana sin recurrir a !important mas que donde EDD lo usa.
========================================================================== */
/* El lienzo. ESTRECHO Y CENTRADO, no a 1.140 px como el checkout. Un
formulario de dos campos a lo ancho de la pantalla se lee como un error,
y asi salia en la captura de Marc. */
.wp-block-edd-login {
box-sizing: border-box;
width: 100%;
max-width: 34rem;
margin-inline: auto;
justify-self: center;
padding-inline: var(--margen-lateral);
padding-block: var(--e-seccion);
}
/* La tarjeta. EDD ya la hace —borde gris y 2rem de aire— asi que no se
reconstruye, se le cambia el tono al del tema. */
.wp-block-edd-login .edd-blocks-form {
background-color: #FFFFFF;
border: 1px solid var(--filete);
border-radius: var(--pd-radio);
box-shadow: 0 4px 14px rgba(18, 41, 61, 0.07);
padding: var(--e-m);
gap: var(--e-s);
}
/* ---------- CAMPOS ---------- */
.wp-block-edd-login .edd-blocks-form input[type="text"],
.wp-block-edd-login .edd-blocks-form input[type="email"],
.wp-block-edd-login .edd-blocks-form input[type="password"] {
font-family: var(--pd-fuente);
/* 16 px y no menos. Por debajo, iOS hace zoom al enfocar el campo y
deja la pagina descuadrada. */
font-size: 16px;
line-height: 1.5;
padding: 11px 14px;
background-color: #FFFFFF;
border: 1px solid var(--base);
border-radius: var(--pd-radio-boton);
color: var(--contrast);
transition: border-color var(--transicion), box-shadow var(--transicion);
}
.wp-block-edd-login .edd-blocks-form input[type="text"]:focus,
.wp-block-edd-login .edd-blocks-form input[type="email"]:focus,
.wp-block-edd-login .edd-blocks-form input[type="password"]:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(134, 102, 49, 0.18);
}
.wp-block-edd-login .edd-blocks-form input:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.wp-block-edd-login .edd-blocks-form label {
font-family: var(--pd-fuente);
font-weight: var(--pd-medio);
font-size: 15px;
color: var(--contrast);
}
/* El asterisco de obligatorio. EDD lo pone en su rojo de aviso, y aqui no
es un error sino una marca de campo — va en el acento, como en el
checkout de la seccion 20. */
.wp-block-edd-login .edd-blocks-form .edd-required-indicator {
color: var(--accent);
}
/* ---------- RECUERDAME ---------- */
/* La casilla y su etiqueta en la misma linea. EDD las apila porque le pone
`display:block` a la etiqueta y un margen con !important, que es la razon
de que aqui haya que repetirlo. */
.wp-block-edd-login .edd-blocks-form__group-remember .edd-blocks-form__control {
display: flex;
align-items: center;
gap: 10px;
}
.wp-block-edd-login .edd-blocks-form .edd-blocks-form__group-remember label {
margin-bottom: 0 !important;
font-weight: 400;
cursor: pointer;
}
.wp-block-edd-login .edd-blocks-form input[type="checkbox"] {
/* 24 px y no 20. Es el minimo de zona pulsable del criterio 2.5.8 de
WCAG, y a 20 el barrido la marcaba. Pulsar la etiqueta tambien la
activa, pero la casilla en si tiene que llegar. */
inline-size: 24px;
block-size: 24px;
margin: 0;
accent-color: var(--accent);
cursor: pointer;
}
/* ---------- EL BOTON ---------- */
/* A ANCHO COMPLETO DE LA TARJETA. Son formularios de un solo paso y no hay
nada que elegir al lado, asi que el boton no compite con nada.
`white-space: normal` porque EDD pone `nowrap` y «Obtener nueva
contraseña» no cabe en una linea en movil — medido, se salia de la
tarjeta. */
.wp-block-edd-login .edd-submit,
.wp-block-edd-login [type="submit"].edd-submit {
width: 100%;
font-family: var(--pd-fuente);
font-size: 17px;
font-weight: var(--pd-fuerte);
line-height: 1.4;
padding: 14px 24px;
border: 2px solid transparent;
border-radius: var(--pd-radio-boton);
background-color: var(--accent);
color: #FFFFFF;
white-space: normal;
cursor: pointer;
transition: background-color var(--transicion), color var(--transicion);
}
.wp-block-edd-login .edd-submit:hover,
.wp-block-edd-login [type="submit"].edd-submit:hover {
background-color: var(--contrast);
color: #FFFFFF;
/* EDD levanta el boton un pixel al pasar por encima. Los botones de esta
web no se mueven, asi que se anula para que no haya dos lenguajes. */
transform: none;
}
.wp-block-edd-login .edd-submit:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 3px;
}
/* ---------- EL ENLACE DE CONTRASEÑA PERDIDA ---------- */
/* Va en un `p` fuera del grupo del boton. Centrado debajo y en secundario,
que es una salida y no la accion principal. */
.wp-block-edd-login .edd-blocks-form__group-lost-password {
margin: 0;
text-align: center;
}
.wp-block-edd-login .edd-blocks-form__group-lost-password a {
display: inline-block;
/* 44 px de alto de zona pulsable contando el padding, que es el minimo
del criterio 2.5.8 de WCAG. El texto solo da 22. */
padding: 11px 8px;
font-size: 15px;
color: var(--contrast-2);
text-decoration-color: var(--filete);
text-underline-offset: 3px;
}
.wp-block-edd-login .edd-blocks-form__group-lost-password a:hover {
color: var(--accent);
text-decoration-color: currentColor;
}
/* ---------- LOS MENSAJES ---------- */
/* El texto que EDD pone encima del formulario de contraseña perdida, y el
«ya tienes la sesion abierta como…». Mismo panel con filete que el aviso
de la seccion 30, para que la web hable de una sola manera. */
.wp-block-edd-login > p.message,
.wp-block-edd-login > .edd-alert,
.wp-block-edd-login > div:not([class]) {
box-sizing: border-box;
margin-block-end: var(--e-m);
padding: 14px 18px;
background-color: var(--base-3);
border: 1px solid var(--filete);
border-inline-start: 3px solid var(--accent);
border-radius: var(--pd-radio);
font-size: 16px;
line-height: 1.6;
color: var(--contrast);
}
/* EL ESTADO DE SESION ABIERTA NO TIENE DONDE AGARRARSE.
-------------------------------------------------------------------------
Cuando ya hay sesion, EDD no pinta formulario ni contenedor — escribe el
texto «Estas conectado como…» SUELTO dentro de `.wp-block-edd-login`, como
nodo de texto. Leido en includes/blocks/includes/forms/forms.php, el
bloque que sale cuando is_user_logged_in().
Un nodo de texto no se puede seleccionar, asi que el panel se le da al
propio bloque, y solo cuando no lleva formulario dentro. De ahi el :has().
EL AIRE PASA DE PADDING A MARGIN. El bloque usa padding para separarse de
la cabecera, y si ademas es el panel ese padding seria el interior de la
caja — 48 px de hueco alrededor de una frase. Con margin se separa igual
y el panel conserva su medida.
El max-width con min() es lo que lo mantiene despegado de los bordes en
movil, ya que al pasar a margin se pierde el padding lateral. */
.wp-block-edd-login:not(:has(.edd-blocks-form)) {
max-width: min(34rem, 100% - 2 * var(--margen-lateral));
margin-block: var(--e-seccion);
padding: 14px 18px;
background-color: var(--base-3);
border: 1px solid var(--filete);
border-inline-start: 3px solid var(--accent);
border-radius: var(--pd-radio);
font-size: 16px;
line-height: 1.6;
color: var(--contrast);
}
/* El «salir» de dentro de esa frase, que es la unica accion que ofrece. */
.wp-block-edd-login:not(:has(.edd-blocks-form)) a {
font-weight: var(--pd-medio);
color: var(--accent);
text-underline-offset: 3px;
}
/* Los errores de EDD, en rojo pero con el mismo armazon. */
.wp-block-edd-login .edd_errors,
.wp-block-edd-login .edd-alert-error {
border-inline-start-color: #B3261E;
}
.wp-block-edd-login .edd_error {
margin: 0;
color: #8C1D18;
}
/* ---------- MOVIL ---------- */
@media (max-width: 600px) {
.wp-block-edd-login .edd-blocks-form {
padding: var(--e-s);
}
.wp-block-edd-login .edd-submit,
.wp-block-edd-login [type="submit"].edd-submit {
font-size: 16px;
padding: 13px 16px;
}
}
/* ==========================================================================
36 · EL RECIBO Y LA CONFIRMACION · 06/10/2026
Las dos pantallas que ve el comprador justo despues de pagar.
POR QUE NO LES LLEGABA NADA. La seccion 20 estilo el CARRITO, con las
clases `.edd-blocks-cart__*`. El recibo usa otra familia entera,
`.edd-blocks-receipt__*`, y se quedo con el aspecto de serie de EDD —
caja de borde gris #EEE, esquina recta y sin fondo. Medido el 06/10
contra los tokens del tema, que piden #DDD6CA y 12 px de radio.
SE LE DA EL MISMO LENGUAJE QUE AL CARRITO y no uno nuevo. Es la misma
informacion dos pantallas despues, asi que debe leerse igual.
LAS CLASES ESTAN LEIDAS DEL HTML SERVIDO con una compra de verdad. El
bloque no se puede pintar fuera de la sesion de compra, asi que no valia
mirarlo en el editor.
========================================================================== */
/* El titular «Productos». EDD lo saca como h3 pelado. */
.edd-blocks__confirmation > h3,
.wp-block-edd-receipt > h3 {
font-family: var(--pd-fuente);
font-weight: var(--pd-medio);
font-size: 15px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--contrast-3);
margin-block: var(--e-l) var(--e-xs);
text-align: start;
}
/* ---------- LAS DOS TARJETAS ---------- */
/* Los articulos comprados y el desglose del pedido. Mismo panel que el
carrito de la seccion 20 — blanco, filete, radio y sombra del tema. */
.edd-blocks-receipt__items,
.edd-blocks-receipt__totals {
background-color: #FFFFFF;
border: 1px solid var(--base);
border-radius: var(--pd-radio);
box-shadow: var(--pd-sombra);
overflow: hidden;
margin-block-end: var(--e-m);
}
/* EL BORDE NECESITA UN PUNTO MAS DE PESO, y es el unico de los cinco que
lo necesita. EDD declara EXACTAMENTE EL MISMO SELECTOR —
`.edd-blocks-receipt__items, .edd-blocks-receipt__totals` con
`border: 1px solid var(--edd-blocks-light-grey)`, que es #EEE— asi que
empatan a 0,1,0 y decide el orden de carga. Su hoja va despues de la del
tema, con lo que ganaba el gris suyo. Preguntado al navegador con
CSS.getMatchedStylesForNode, no deducido.
Con el envoltorio delante sube a 0,2,0 y gana sin !important. Van los dos
envoltorios porque la confirmacion y el recibo usan distinto. */
.edd-blocks__confirmation .edd-blocks-receipt__items,
.edd-blocks__confirmation .edd-blocks-receipt__totals,
.wp-block-edd-receipt .edd-blocks-receipt__items,
.wp-block-edd-receipt .edd-blocks-receipt__totals {
border-color: var(--base);
}
/* La fila, igual que la del carrito — etiqueta a un lado, dato al otro, y
en movil una debajo de la otra sin que nada se salga. */
.edd-blocks-receipt__items .edd-blocks__row,
.edd-blocks-receipt__totals .edd-blocks__row {
display: flex;
flex-wrap: wrap;
gap: var(--e-2xs) var(--e-s);
align-items: baseline;
justify-content: space-between;
padding: var(--e-s) var(--e-m);
border-block-end: 1px solid var(--base);
}
.edd-blocks-receipt__items .edd-blocks__row:last-child,
.edd-blocks-receipt__totals .edd-blocks__row:last-child {
border-block-end: 0;
}
/* La primera fila del desglose lleva el numero de pedido. Se trata como la
cabecera del carrito, que es el mismo papel. */
.edd-blocks-receipt__row-header {
background-color: var(--base-2);
}
.edd-blocks-receipt__row-header .edd-blocks__row-label,
.edd-blocks-receipt__row-header .edd-blocks__row-value {
font-weight: var(--pd-fuerte);
}
.edd-blocks__row-label {
font-family: var(--pd-fuente);
font-weight: var(--pd-medio);
color: var(--contrast);
}
/* Las cifras, con cifras de ancho fijo para que las columnas cuadren, y
sin partirse de linea. */
.edd-blocks__row-value,
.edd-blocks-receipt__item-price {
font-variant-numeric: tabular-nums;
white-space: nowrap;
color: var(--contrast-2);
}
/* La ultima fila es el total y tiene que pesar mas que las demas. */
.edd-blocks-receipt__totals .edd-blocks__row:last-child {
background-color: var(--base-2);
}
.edd-blocks-receipt__totals .edd-blocks__row:last-child .edd-blocks__row-label,
.edd-blocks-receipt__totals .edd-blocks__row:last-child .edd-blocks__row-value {
font-weight: var(--pd-fuerte);
color: var(--contrast);
font-size: 18px;
}
/* ---------- EL ARTICULO COMPRADO ---------- */
.edd-blocks-receipt__item-details {
flex: 1 1 60%;
min-width: 0;
}
.edd-blocks-receipt__item-details .edd-blocks__row-label {
font-size: 17px;
}
.edd-blocks-receipt__item-price {
font-weight: var(--pd-medio);
color: var(--contrast);
}
/* La linea de acceso al curso, debajo del nombre. Es una lista de EDD con
las vinetas puestas — aqui es una sola linea y la vineta sobra. */
.edd_purchase_receipt_files {
list-style: none;
margin: var(--e-3xs) 0 0;
padding: 0;
}
.edd_purchase_receipt_files li {
margin: 0;
font-size: 15px;
color: var(--contrast-3);
}
.edd_purchase_receipt_files a {
font-weight: var(--pd-medio);
color: var(--accent);
}
/* El estado del pedido, en verde cuando esta completo. */
.edd_receipt_payment_status.complete {
font-weight: var(--pd-medio);
color: #2E7D32;
}
/* ---------- EL ENLACE DEL FINAL ---------- */
/* «Ver los detalles del pedido» salia como un enlace suelto de 20 px de
alto pegado al borde izquierdo. Pasa a boton secundario con area de
toque, que es el unico camino que ofrece esa pantalla ademas del curso. */
.edd-blocks__confirmation-details {
margin-block-start: var(--e-m);
}
.edd-blocks__confirmation-details a {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 10px 22px;
border: 1px solid var(--filete);
border-radius: var(--pd-radio-boton);
font-family: var(--pd-fuente);
font-weight: var(--pd-medio);
font-size: 15px;
color: var(--contrast);
text-decoration: none;
transition: border-color var(--transicion), color var(--transicion);
}
.edd-blocks__confirmation-details a:hover {
border-color: var(--accent);
color: var(--accent);
}
/* ---------- EL PARRAFO DE GRACIAS ---------- */
/* Es la primera linea que lee quien acaba de pagar y salia PEGADA al hero,
a trece pixeles. Se le da el mismo aire que a las secciones y se centra
con el bloque de cursos que viene debajo, que si no una va a la izquierda
y el otro al centro. */
.entry-content > p:first-of-type:has(+ .pd-mis-cursos),
.entry-content > p:first-of-type:has(+ .wp-block-edd-confirmation) {
box-sizing: border-box;
width: 100%;
max-width: var(--pd-ancho);
margin-inline: auto;
justify-self: center;
padding-inline: var(--margen-lateral);
padding-block-start: var(--e-seccion);
margin-block: 0;
text-align: center;
color: var(--contrast-2);
}
/* ---------- MOVIL ---------- */
@media (max-width: 600px) {
.edd-blocks-receipt__items .edd-blocks__row,
.edd-blocks-receipt__totals .edd-blocks__row {
padding: var(--e-xs) var(--e-s);
}
/* El precio del articulo baja debajo del nombre en vez de pelearse con
el por el ancho. */
.edd-blocks-receipt__item-price {
flex-basis: 100%;
}
}
/* ==========================================================================
37 · EL BOTON DE CUENTA · 06/10/2026
«Acceder» o «Salir», al final del menu y a la derecha de los idiomas.
TIENE QUE VERSE QUE ES OTRA COSA. No es una pagina de la web, es la
puerta de tu cuenta. De ahi el filete vertical que lo separa de los
idiomas y el contorno, que lo saca de la fila de enlaces planos.
PERFILADO Y NO RELLENO, a proposito. El relleno de acento ya lo lleva
«Los cursos», que es la accion que vende. Si la cuenta llevara el mismo
peso competirian y la cabecera tendria dos botones gritando.
EL ORDEN LO DECIDE functions.php, no esto. El filtro de la cuenta entra
con prioridad 11 y el de los idiomas con 10, asi que la cuenta queda
detras. Aqui solo se le da forma.
========================================================================== */
/* ---------- EN LA CABECERA ---------- */
/* El filete que lo separa de los idiomas. Va en el li y no en el enlace,
para que la linea ocupe el alto de la fila y no el del texto. */
.main-navigation:not(.slideout-navigation) .main-nav ul li.pd-cuenta {
display: flex;
align-items: center;
margin-inline-start: var(--e-s);
padding-inline-start: var(--e-s);
border-inline-start: 1px solid rgba(255, 255, 255, 0.18);
}
.main-navigation:not(.slideout-navigation) .main-nav ul li.pd-cuenta > a {
display: inline-flex;
align-items: center;
/* El tema no trae reset universal, asi que sin esto el borde de 1px suma
por fuera y el boton sale de 46 en vez de 44. Medido. */
box-sizing: border-box;
/* 44, LOS MISMOS QUE «Los cursos». Primero lo puse a 36 pensando que un
contorno a la altura entera de la fila quedaria encajado a presion, y
medido al lado del otro boton lo que pasa es lo contrario — con 38 y 44
los dos botones no comparten eje y se ve. Iguales se leen como un par,
uno relleno y otro perfilado. Y de paso el area de pulsacion llega a
los 44 que lleva el resto de la web. */
height: 44px;
padding-block: 0;
padding-inline: 16px;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: var(--pd-radio-boton);
font-size: 14px;
font-weight: var(--pd-medio);
line-height: 1;
color: #FFFFFF;
transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.main-navigation:not(.slideout-navigation) .main-nav ul li.pd-cuenta > a:hover {
background-color: #FFFFFF;
border-color: #FFFFFF;
color: var(--contrast);
}
.main-navigation:not(.slideout-navigation) .main-nav ul li.pd-cuenta > a:focus-visible {
outline: 2px solid var(--accent-claro);
outline-offset: 2px;
}
/* ---------- EN EL PANEL DE MOVIL ---------- */
/* Aqui no hay fila ni idiomas al lado, asi que el filete vertical no tiene
sentido. Se separa con aire y una linea horizontal, que es lo que marca
un cambio de zona en una lista vertical.
CON !important Y A REGAÑADIENTES, por lo mismo que el boton de cursos de
la seccion anterior — GeneratePress escribe los colores del panel como
CSS en linea en el y eso gana a la hoja del tema hijo. */
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cuenta {
margin-top: var(--e-m);
padding-top: var(--e-m);
border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cuenta > a {
display: block;
padding: 0.8rem 1.2rem;
border: 1px solid rgba(255, 255, 255, 0.35);
border-radius: var(--pd-radio-boton);
font-size: 15px;
font-weight: var(--pd-medio);
line-height: 1.4;
text-align: center;
color: #FFFFFF !important;
}
.slideout-navigation.main-navigation .main-nav > ul > li.pd-cuenta > a:hover {
background-color: #FFFFFF !important;
border-color: #FFFFFF;
color: var(--contrast) !important;
}
/* ==========================================================================
38 · LAS PANTALLAS SIN NADA QUE ENSEÑAR · 06/10/2026
Las tres transaccionales cuando no hay pedido ni sesion — «tus compras»
sin haber entrado, la confirmacion sin compra y el recibo con una clave
que no es. functions.php sustituye el contenido por un panel con salida.
REUTILIZA .pd-aviso DE LA SECCION 30 y solo le añade lo que le falta —
centrado bajo el hero y sitio para el boton. Nada de un panel nuevo, que
seria un tercer estilo de aviso en la misma web.
========================================================================== */
.pd-aviso--salida {
margin-block: var(--e-l) var(--e-xl);
text-align: center;
border-inline-start-width: 1px;
border-block-start: 3px solid var(--accent);
}
/* El boton va en su propio parrafo para que el espacio salga del flujo del
panel y no de un margen suelto. */
.pd-aviso--salida .pd-boton {
margin-block-start: var(--e-2xs);
}
@media (max-width: 600px) {
.pd-aviso--salida .pd-boton {
display: block;
}
}
/* ==========================================================================
39 · EN MOVIL, LA FOTO DE DAVID VA PRIMERO · 06/10/2026
Lo pidio Marc. En escritorio NO cambia nada — la composicion de dos
columnas se queda igual, con el texto a la izquierda y la foto a la
derecha.
EL CORTE ES 782 Y NO 900 NI 768. Lo marca WordPress, no este tema —
`.wp-block-columns { flex-wrap: nowrap }` vive dentro de su propia
@media (min-width: 782px), y es lo unico que decide si la fila va en una
columna o en dos. Ya esta escrito en la seccion 14 y aqui se respeta.
Usar otro numero dejaria una franja con dos columnas y la foto arriba.
POR QUE CON `order` Y NO MOVIENDO EL HTML. El orden del documento manda
en la tabulacion, y en escritorio el texto tiene que seguir leyendose
antes que la foto. Cambiar el HTML arreglaria el movil y estropearia el
escritorio. `order` solo mueve lo que se pinta, y solo por debajo de 782.
Y AQUI NO ROMPE EL ORDEN DE TABULACION, que es la pega habitual de
reordenar con CSS. Medido — la columna de la foto NO tiene ni un elemento
enfocable, los dos botones estan los dos en la de texto. Asi que al
teclado le da igual, porque el primer elemento que alcanza sigue siendo
el primer boton.
SE ORDENAN LAS DOS COLUMNAS, no solo una. Si `:has()` fallara, las dos se
quedarian en `order: 2` y volveria el orden original en vez de quedar
algo a medias. Y se busca la columna POR LO QUE LLEVA DENTRO en vez de
por `:last-child`, para que siga valiendo si algun dia se le da la vuelta
al HTML.
========================================================================== */
@media (max-width: 781px) {
.pd-hero__fila > .wp-block-column {
order: 2;
}
.pd-hero__fila > .wp-block-column:has(.pd-pegada) {
order: 1;
}
/* EL MARGEN DE ARRIBA DE LA FOTO SE VA, y no es un retoque estetico.
Los 24 px de `margin-block-start` de la seccion 18 estaban para
separar la foto del texto que tenia ENCIMA. Ahora la foto es lo
primero, asi que ese margen se suma al relleno del hero y baja la
foto sin motivo. El hueco entre foto y texto lo sigue poniendo el
`gap` de 40 px de la fila, que no se toca.
Va acotado a `.pd-hero` porque `.pd-pegada` la pinta `pd_retrato()`
y se usa tambien fuera del hero, donde ese margen si hace falta. */
.pd-hero .pd-pegada {
margin-block-start: 0;
}
}
/* ==========================================================================
40 · EL AIRE DEL HERO EN MOVIL · 06/10/2026
Marc miro la composicion con la foto ya arriba y senalo tres cosas. Las
tres son la misma causa — la foto ahora ABRE el hero y sigue dimensionada
como cuando era un sello debajo del texto.
LO MEDIDO, a 390 px.
hero arriba -> foto 106 px
foto -> etiqueta 38
etiqueta -> titular 8
titular -> entradilla 24
entradilla -> boton 40
boton 2 -> hero abajo 108 px
214 de los 966 que mide el hero son relleno de los bordes, un 22 %. Y la
foto ocupa 206 px de una columna de 350, o sea que deja 72 px de aire a
cada lado DENTRO del contenido.
POR QUE ESTABA ASI Y POR QUE YA NO VALE. La seccion 18 dejo la foto entre
el 47 y el 51 % del ancho del texto a proposito, para que tuviera la misma
proporcion que en escritorio. Con la foto DEBAJO del texto eso era un
sello firmando el bloque y funcionaba. Arriba del todo, el mismo tamano se
lee como una estampa perdida en un campo oscuro.
========================================================================== */
@media (max-width: 781px) {
/* 1 · MENOS RELLENO EN LOS BORDES.
`clamp(72px, 12vh, 128px)` es de cuando esto se penso para escritorio.
A 390x844 el 12vh da 101 px. En un portatil es respiracion, en un movil
son dos tercios de pantalla sin nada. Solo baja en `--home`, que los
heros interiores estan aprobados y no llevan foto. */
.pd-hero--home {
padding-block: clamp(40px, 7vh, 72px);
}
/* 2 · MAS HUECO ENTRE LA FOTO Y EL TEXTO.
Son dos bloques distintos, no una pieza. Con 38 px se leen pegados, y
mas ahora que la foto es grande. 64 es el mismo token que ya usa la fila
en escritorio, asi que no se inventa una medida nueva. */
.pd-hero__fila {
gap: var(--e-xl);
}
/* 3 · LA FOTO, AL TAMANO QUE LE TOCA AHORA.
Alrededor del 80 % de la columna en todo el rango de movil, con tope en
440 para que en tablet estrecha no se desmadre.
320 -> 237 px el 85 % de la columna
390 -> 289 el 83 %
430 -> 319 el 82 %
600 -> 445 el 79 %
768 -> 553 el 79 %
EL TOPE ES 560 Y NO 440, y lo primero que puse fueron 440. Medido, a
768 px eso dejaba la foto en el 64 % de la columna y 126 px de aire a
cada lado, que es exactamente lo que Marc pidio quitar. El tope no
esta para limitar la proporcion, esta para que no se dispare justo
antes de los 782 donde la fila vuelve a dos columnas.
EL MARCO Y EL CELO VAN EN `calc()` SOBRE EL ANCHO, no en clamps sueltos.
La seccion 18 ya decia por que tienen que escalar con ella — un marco de
13 px sobre una foto de 200 es, en proporcion, el doble de grueso que
sobre una de 360. Atandolos al ancho con los mismos porcentajes que
tenian, la proporcion se mantiene sola y no hay tres clamps que cuadrar
a mano cada vez que se toca el tamano. */
.pd-hero .pd-pegada {
--pd-foto: clamp(230px, 72vw, 560px);
width: var(--pd-foto);
padding: calc(var(--pd-foto) * 0.04);
padding-block-end: calc(var(--pd-foto) * 0.05);
}
.pd-hero .pd-pegada::before {
width: calc(var(--pd-foto) * 0.38);
height: calc(var(--pd-foto) * 0.1);
inset-block-start: calc(var(--pd-foto) * -0.042);
}
}
/* ==========================================================================
41 · EL PIE NO FLOTA EN LAS PAGINAS CORTAS · 06/10/2026
Lo vio Marc en el checkout con el carrito vacio, pero NO es de esa
pagina. Medido en una ventana de 1920x1200, que es la suya.
/es/politica-de-privacidad/ 507 px de blanco debajo del pie
/es/aviso-legal/ 507
/es/finalizar-compra/ 277
/…/tus-compras/ 212
/…/recibo/ 212
/…/confirmacion/ 186
DOCE DE DIECIOCHO paginas dejaban el pie a media pantalla con blanco
debajo. Las legales son las peores porque hoy tienen cinco palabras.
SE PUEDE PONER `body` EN FLEX SIN ROMPER NADA, y esto se comprobo antes
de escribirlo. De los ocho hijos de `body` solo TRES estan en el flujo
—la cabecera, `#page` y el pie—. Los otros cinco son `fixed` o
`absolute`, o sea que el flex ni los mira · el enlace de saltar al
contenido, el menu deslizante, su velo, la burbuja de WhatsApp y el
indicador de carga del carrito.
Y EL PIE ES HERMANO DE `#page`, NO VA DENTRO. Por eso el contenedor que
crece es `#page` y el flex va en `body`. Si el pie estuviera dentro
habria que hacerlo justo al reves, y esa es la equivocacion tipica aqui.
`svh` ANTES QUE `vh`, Y LAS DOS. En movil `100vh` cuenta la barra de
direcciones del navegador aunque no se vea, asi que en una pagina corta
empujaria el pie un poco por debajo de lo visible y apareceria un scroll
que no hace falta. `100svh` es la ventana pequena, la de verdad. Se
declaran las dos y el navegador que no entienda `svh` se queda con `vh`,
que es el comportamiento de siempre.
GENERATEPRESS NO TRAE AJUSTE PARA ESTO. Buscado en su documentacion en
disco, `docs-generatepress`, con «sticky footer» y con el documento de
flexbox. No aparece, asi que va en CSS. */
body {
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
}
/* Crece el contenido, no el pie. `flex-shrink: 0` para que en una pagina
larga no intente encogerse por debajo de su alto.
Y `margin-inline: 0`, QUE NO ES COSMETICA · ESTO SE ROMPIO Y SE VIO.
-------------------------------------------------------------------------
GeneratePress le pone a `#page` la clase `.grid-container`, que lleva
`margin-left: auto; margin-right: auto`. En maquetacion de bloques un
margen automatico con ancho automatico se resuelve a CERO y el bloque
ocupa todo. En FLEX no — el margen automatico se come todo el espacio
libre y el elemento se encoge a su contenido.
Al poner `body` en flex, `#page` paso de 1920 px a 465, su ancho de
contenido, con 727,6 px de margen a cada lado. El hero a pantalla
completa quedo como una cajita oscura en mitad de la pagina. Medido
comparando con el flex apagado desde el navegador.
Poner los margenes a cero devuelve el estirado del flex, y no se pierde
nada porque `#page` tiene `max-width: 100%` y esos automaticos ya valian
cero en el comportamiento anterior. */
body > #page {
flex: 1 0 auto;
width: 100%;
margin-inline: 0;
}
body > .site-footer {
flex-shrink: 0;
}
/* ==========================================================================
45 · LAS PAGINAS LEGALES · 07/10/2026
--------------------------------------------------------------------------
El aviso legal y la politica de privacidad son DOCUMENTOS, no paginas de
venta, y el tema las estaba maquetando como si lo fueran.
MEDIDO ANTES DE TOCAR, a 1280 px
h2 ....... 31 px, CENTRADO, 64 px de margen abajo
parrafo .. 17 px / 25,5, tope de 810 px
lista .... 17 px / 25,5, SIN tope, 1.089 px de ancho
Tres cosas mal para leer un documento.
1 · Un encabezado centrado sobre texto alineado a la izquierda no deja
ver donde empieza cada seccion. En un documento el encabezado va
pegado a la izquierda, encima de su propio texto.
2 · 64 px de aire DEBAJO del titulo y nada encima hacen que cada
encabezado parezca el pie del bloque anterior en vez de la cabeza
del suyo. Se invierte · mucho aire arriba y poco abajo.
3 · Las listas corrian 280 px mas anchas que los parrafos. La medida de
lectura tiene que ser la misma para los dos o el ojo salta.
El h1 se queda como esta · 46 px y a la izquierda, ya estaba bien.
========================================================================== */
.pd-legal h2 {
text-align: left;
font-size: 22px;
line-height: 1.35;
/* Al reves que antes · el aire va arriba, separando del bloque anterior. */
margin-block: var(--e-xl) var(--e-xs);
}
/* La primera no necesita el aire de arriba, que ya lo pone el h1. */
.pd-legal h2:first-of-type {
margin-block-start: var(--e-l);
}
/* Misma medida de lectura que los parrafos, que el tema deja en 810 px. */
.pd-legal ul,
.pd-legal ol {
max-width: 810px;
}
.pd-legal li {
margin-bottom: var(--e-2xs);
}
/* La fecha de actualizacion, que va en cursiva justo debajo del titulo. */
.pd-legal h1 + p em {
color: var(--apoyo-oscuro);
font-size: 15px;
}
/* En movil el titulo de 46 px se come la pantalla. */
@media (max-width: 767px) {
.pd-legal h2 {
font-size: 20px;
margin-block: var(--e-l) var(--e-xs);
}
}
/* ==========================================================================
48 · LA CASILLA DEL CONSENTIMIENTO DIGITAL · 07/10/2026
--------------------------------------------------------------------------
Es un requisito legal, no un detalle de formulario, asi que tiene que
LEERSE. Si pasa desapercibida no sirve de nada — la reg. 37(1)(b) pide un
reconocimiento expreso, y nadie reconoce lo que no ha visto.
Pero tampoco puede dar miedo. Va en una caja clara con filete, separada
del resto del formulario, sin rojo ni iconos de alarma.
EL OBJETIVO PULSABLE ES LA ETIQUETA ENTERA, no el cuadradito de 13 px.
Se toca cualquier parte de la frase.
========================================================================== */
.pd-consentimiento {
border: 1px solid rgba(10, 28, 43, 0.14);
border-radius: 6px;
background-color: #F7F9FB;
padding: var(--e-s);
margin-block: var(--e-m);
}
.pd-consentimiento__texto {
font-size: 14px;
line-height: 1.5;
color: var(--apoyo-oscuro);
margin-bottom: var(--e-xs);
}
/* Flex y no un `display: block` en el input, para que la segunda linea del
texto no se meta debajo de la casilla. */
.pd-consentimiento__label {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
font-size: 15px;
line-height: 1.45;
font-weight: var(--pd-fuerte);
color: var(--contrast);
}
.pd-consentimiento__label input[type="checkbox"] {
/* 18 px y sin encoger. Por debajo de eso se falla al tocarlo. */
inline-size: 18px;
block-size: 18px;
flex: 0 0 auto;
margin: 2px 0 0;
accent-color: var(--contrast);
cursor: pointer;
}
.pd-consentimiento__label input[type="checkbox"]:focus-visible {
outline: 2px solid var(--contrast);
outline-offset: 2px;
}
/* El consentimiento repetido en la pagina del recibo. Ahi es un registro,
no una peticion, asi que va discreto. */
.pd-recibo-consentimiento {
border-top: 1px solid rgba(10, 28, 43, 0.12);
margin-block-start: var(--e-m);
padding-block-start: var(--e-s);
font-size: 14px;
color: var(--apoyo-oscuro);
}