/**
* Walluminium Área de Arquitectos — estilos de marca.
*
* Tokens de diseño + escala tipográfica según el brief del cliente.
* Fuente: Clash Grotesk (self-hosted, gratuita de Fontshare). Coloca los
* .woff2 en assets/fonts/ (ver assets/fonts/README.md).
*
* Se encola SOLO en las páginas del área privada (Wap_Assets).
*/
/* ----------------------------------------------------------------------
* @font-face — Clash Grotesk (self-hosted)
* -------------------------------------------------------------------- */
@font-face {
font-family: "Clash Grotesk";
src: url("fonts/ClashGrotesk-Light.woff2") format("woff2"),
url("fonts/ClashGrotesk-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Grotesk";
src: url("fonts/ClashGrotesk-Regular.woff2") format("woff2"),
url("fonts/ClashGrotesk-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Grotesk";
src: url("fonts/ClashGrotesk-Medium.woff2") format("woff2"),
url("fonts/ClashGrotesk-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Grotesk";
src: url("fonts/ClashGrotesk-Semibold.woff2") format("woff2"),
url("fonts/ClashGrotesk-Semibold.woff") format("woff");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Clash Grotesk";
src: url("fonts/ClashGrotesk-Bold.woff2") format("woff2"),
url("fonts/ClashGrotesk-Bold.woff") format("woff");
font-weight: 700;
font-style: normal;
font-display: swap;
}
/* ----------------------------------------------------------------------
* Tokens de diseño
* -------------------------------------------------------------------- */
:root {
--wap-verde: #4FAD32;
/* El logotipo de la cabecera NO se colorea desde CSS: es un se
veía BLANCO SOBRE BLANCO y solo se leía al pasar el ratón (cuando el sistema
pinta el fondo azul de selección). Causa: el cerrado hereda el tema
oscuro del área, pero la LISTA desplegada la pinta el SISTEMA OPERATIVO con su
propio fondo claro, y las no heredaban color.
Solución pedida por el cliente ("pon el texto en negro"): fijar explícitamente
color oscuro sobre fondo claro en las , y también en el propio
para que el valor seleccionado se lea igual en Windows y macOS. Se declara con
especificidad (0,2,1) para ganar al global kit de Elementor (`.elementor-kit-N
select`, 0,1,1), igual que el resto del blindaje de este fichero.
SEGUNDA VUELTA (cliente 2026-08-05, segundo aviso): "al seleccionar en el selector
el curso ya se ve bien el desplegable pero se ve en blanco la casilla aunque haya
seleccionado uno". El desplegado se leía (las tienen su regla propia y
nadie la pisa) pero la CASILLA CERRADA seguía en blanco sobre blanco.
CAUSA: EMPATE DE ESPECIFICIDAD, no un color mal escrito. Este bloque es (0,2,1) y
el "Blindaje de contraste de CAMPOS DE FORMULARIO" de más abajo declaraba
`.wap-area .wap-field select { color: var(--wap-blanco) }` con la MISMA (0,2,1);
con especificidad empatada gana la ÚLTIMA en orden de aparición, y ese bloque está
~540 líneas después. ARREGLO: se ha sacado `select` de aquel bloque (los `input` y
`textarea` SIGUEN en blanco: van sobre el campo negro y ahí es lo correcto), de
modo que el queda gobernado SOLO por este bloque.
REGLA PARA QUIEN AÑADA CSS: el del área es el ÚNICO campo con fondo CLARO
y texto OSCURO. No lo metas en listas de selectores junto a `input`/`textarea`, o
el empate vuelve y la casilla se queda otra vez en blanco.
`-webkit-text-fill-color` además de `color`: Chrome/Safari pintan el texto con esa
propiedad cuando está presente, y el tema la fija en los campos — sin ella `color`
no basta. `border-color` propio: el borde genérico rgba(222,219,219,.25) se pensó
para un campo NEGRO y sobre este fondo claro es invisible. */
.wap-area .wap-field select {
font-family: var(--wap-font);
color: #14150f;
-webkit-text-fill-color: #14150f;
background-color: var(--wap-blanco);
border-color: rgba(20, 21, 15, .35);
opacity: 1;
}
.wap-area .wap-field select option,
.wap-area .wap-field select optgroup {
font-family: var(--wap-font);
color: #14150f;
background-color: var(--wap-blanco);
}
/* BOTÓN "SELECCIONAR ARCHIVO" LEGIBLE (cliente 2026-08-05).
Fallo reportado: "Tampoco se ve la casilla de seleccionar archivo, cambia el color
del texto para que se lea bien".
CAUSA: el pseudo-elemento del botón nativo NUNCA se había estilado, así que el
navegador lo pintaba con SUS colores por defecto (gris oscuro sobre gris oscuro)
dentro de nuestro campo negro. `color`/`font-family` del de arriba, que es el otro control del área con fondo claro. Se
descartó el verde de marca: #F9F9F9 sobre #4FAD32 da 2.9:1 y NO llega al 4.5:1.
El NOMBRE del fichero queda fuera del botón y lo pinta el `color` del `
* de `templates/partials/header.php`, y en el Figma renderizado las tres usan el
* mismo estilo H1 (48px / 600 / #DEDBDB). Si en el futuro una pantalla necesitara
* otro tamaño, se le añade una clase propia (p. ej. `wap-banner__title--publica`) y
* se separa aquí; NO se toca el token global.
* -------------------------------------------------------------------- */
.wap-area .wap-banner h1.wap-banner__title,
.wap-area .wap-banner__titlerow h1.wap-banner__title {
font-size: var(--wap-h1);
font-weight: 600;
}
/* ----------------------------------------------------------------------
* RESET DE ELEMENTOS NATIVOS — `.wap-reset-btn` (v1.3.0)
*
* CAUSA RAÍZ DEL "BLOQUE VERDE" DE LAS FILAS DE LECCIÓN.
*
* En staging cada fila de lección se pintaba como un RECTÁNGULO VERDE MACIZO a
* todo el ancho de la columna, con el título en MAYÚSCULAS y a un tamaño enorme.
* No era un color mal escrito aquí: la fila es un `` nativo, y su única
* declaración de fondo era `.wap-video-item__btn { background: transparent }` →
* especificidad (0,1,0). El CSS del tema y el global kit de Elementor colorean los
* botones nativos con selectores del tipo `.elementor-kit-N button`,
* `.elementor-kit-N button:not(.x)` o `.kava-theme button` → (0,1,1) o superior,
* que GANAN. De un solo golpe la fila heredaba del tema:
* background-color: → el bloque verde
* color: #fff → texto blanco sobre verde
* padding: 1em 2em → los ~70px de alto
* font-size / letter-spacing de botón → el título "enorme"
* text-transform: uppercase → LAS MAYÚSCULAS (heredadas además por
* los de título y duración)
*
* Es la MISMA clase de fallo ya documentada en este fichero para los botones
* (verde sobre verde), los enlaces del pie y los inputs (el campo de teléfono que
* "no dejaba escribir"). El patrón de arreglo también es el mismo: subir la
* especificidad con clases PROPIAS y declarar explícitamente TODAS las propiedades
* que el tema puede inyectar, en lugar de confiar en el valor por defecto del
* navegador.
*
* Reglas de este bloque:
* · Selectores de (0,2,1) y (0,3,1) que NO comparten ninguna clase con
* `.wap-btn`, `.wap-btn--primary` ni `.wap-btn--pill`: el verde de los botones
* de relleno sólido no puede llegar aquí ni por herencia ni por cascada.
* · SIN `!important`: la política del fichero lo reserva a los botones de relleno
* sólido; la especificidad ya basta (ver la ESCALA de abajo).
* · `text-transform: none` explícito → mata las mayúsculas del tema.
* · `float: none; inset: auto` → un tema no puede sacar la fila del flujo y
* provocar solapes. (`position` NO se toca aquí: la fila necesita
* `position: relative` para anclar su texto de lector de pantalla, y se declara
* en el bloque del componente.)
*
* ESCALA DE ESPECIFICIDAD USADA EN TODO EL ÁREA (importante al añadir reglas):
* (0,1,1) `.elementor-kit-N button` / `… a` / `… button:hover` sin pseudo ← el tema
* (0,2,0) `.wap-area .wap-reset-btn` ← este reset
* (0,2,1) `.wap-area button.wap-reset-btn` · `.elementor-kit-N button:hover`
* (0,3,0) `.wap-area .wap-curso .wap-video-row` ← COMPONENTES
* (0,4,0) `.wap-area .wap-curso .wap-video-row:hover` ← estados
* El reset se queda DELIBERADAMENTE por debajo de los componentes: si el reset
* empatara o ganara, borraría el relleno, los márgenes y el separador de 1px de las
* filas. Por eso aquí no se añaden variantes con `.wap-main` ni con más clases, y
* por eso los componentes llevan SIEMPRE el prefijo `.wap-area .wap-curso`.
* -------------------------------------------------------------------- */
.wap-area .wap-reset-btn,
.wap-area button.wap-reset-btn {
appearance: none;
-webkit-appearance: none;
background: none;
background-color: transparent;
background-image: none;
border: 0;
border-radius: 0;
box-shadow: none;
margin: 0;
padding: 0;
width: auto;
min-width: 0;
max-width: 100%;
height: auto;
min-height: 0;
font-family: var(--wap-font);
font-size: var(--wap-parrafo);
font-weight: 400;
font-style: normal;
letter-spacing: normal;
line-height: 1.25;
text-align: left;
text-decoration: none;
text-shadow: none;
text-transform: none;
color: var(--wap-gris-claro);
float: none;
clear: none;
inset: auto;
transform: none;
opacity: 1;
cursor: pointer;
}
/* Accesibilidad: foco visible en TODOS los botones (WCAG 2.4.7). El contorno
blanco es visible tanto sobre relleno verde como sobre fondo negro. */
.wap-btn:focus-visible,
.wap-area a.wap-btn:focus-visible,
.wap-video-hero__btn:focus-visible,
.wap-area .wap-reset-btn:focus-visible,
.wap-area .wap-curso .wap-video-row:focus-visible,
.wap-area .wap-curso .wap-resource-row:focus-visible,
.wap-course-card:focus-visible,
.wap-teaser:focus-visible {
outline: 3px solid var(--wap-blanco);
outline-offset: 3px;
}
/* Enlaces de texto del área: el tema colorea `a:link`/`a:visited` igual que en
los botones. Aquí NO hace falta `!important` (verde sobre negro es legible),
solo especificidad suficiente para conservar el gris claro del diseño.
NOTA (v1.1.0): los selectores `.wap-topbar__*` se sustituyen por los del PIE
(`.wap-footer__row`, `.wap-footer__navlink`) porque la barra superior de
contacto/mini-nav desaparece de la cabecera — en el diseño esos enlaces viven
en el pie. Misma protección, elementos nuevos. */
.wap-area a.wap-link,
.wap-area a.wap-link:link,
.wap-area a.wap-link:visited,
.wap-area .wap-footer__legal a:link,
.wap-area .wap-footer__legal a:visited,
.wap-area .wap-footer__row:link,
.wap-area .wap-footer__row:visited,
.wap-area .wap-footer__navlink:link,
.wap-area .wap-footer__navlink:visited {
color: var(--wap-gris-claro);
}
.wap-area a.wap-link:hover,
.wap-area a.wap-link:focus,
.wap-area .wap-footer__legal a:hover,
.wap-area .wap-footer__legal a:focus,
.wap-area .wap-footer__row:hover,
.wap-area .wap-footer__row:focus,
.wap-area .wap-footer__navlink:hover,
.wap-area .wap-footer__navlink:focus {
color: var(--wap-verde);
}
/* Filas de recurso descargable: enlaces de bloque con texto propio. Gris claro
del diseño en reposo, verde al pasar (mismo criterio que el resto de enlaces
del área, sin `!important`).
v1.3.0: la clase pasa de `.wap-recurso-item__link` a `.wap-resource-row` para que
NINGÚN selector de la lista de recursos comparta nombre con los botones sólidos. */
.wap-area .wap-curso .wap-resource-row:link,
.wap-area .wap-curso .wap-resource-row:visited {
color: var(--wap-gris-claro);
text-decoration: none;
}
.wap-area .wap-curso .wap-resource-row:hover,
.wap-area .wap-curso .wap-resource-row:focus {
color: var(--wap-verde);
}
/* Excepción explícita: el enlace que el diseño quiere verde sigue siendo verde. */
.wap-area a.wap-link--green,
.wap-area a.wap-link--green:link,
.wap-area a.wap-link--green:visited {
color: var(--wap-verde);
}
/* ----------------------------------------------------------------------
* Blindaje de contraste de CAMPOS DE FORMULARIO (v1.1.0)
*
* Misma clase de fallo que el de los botones, pero en los inputs: el global kit
* de Elementor y el CSS del tema colorean `input`/`textarea`/`select` con
* selectores de especificidad (0,1,1) (`.elementor-kit-N input`). Sobre el fondo
* NEGRO del área eso produce texto oscuro sobre oscuro: el usuario escribe y no
* ve nada, y concluye que "el campo no deja escribir".
*
* Es EXACTAMENTE lo que le pasaba al campo de teléfono, que era el único del
* formulario sin `color` propio de especificidad suficiente (ver la nota de causa
* raíz en la regla `.wap-field input[type=…]`). Este bloque deja de depender de
* una allowlist de tipos: cubre CUALQUIER input del área.
*
* Sin `!important` a propósito: `.wap-area .wap-field input` es (0,2,1) y ya gana
* al kit (0,1,1) por especificidad. La política del fichero reserva `!important`
* a los botones de relleno sólido (ver punto 2 del bloque anterior).
*
* ¡SIN `select` AQUÍ! (cliente 2026-08-05, segundo aviso). Hasta v1.5.0 esta lista
* incluía `select` y era la causa exacta de "la casilla del curso se ve en blanco
* aunque haya seleccionado uno": este bloque es (0,2,1), IGUAL que el bloque
* "DESPLEGABLE LEGIBLE" de arriba que lo pide en #14150f, y al empatar la
* especificidad gana el que aparece DESPUÉS — este. Resultado: texto blanco sobre el
* fondo blanco del . El del área es el único campo de fondo CLARO;
* su color vive SOLO en su bloque dedicado. `input` y `textarea` sí van en blanco
* porque su fondo es el campo negro.
* -------------------------------------------------------------------- */
.wap-area .wap-field input,
.wap-area .wap-field textarea {
color: var(--wap-blanco);
/* Safari/Chrome pintan el texto con -webkit-text-fill-color cuando está
presente; si el tema lo fija, `color` no basta. */
-webkit-text-fill-color: var(--wap-blanco);
opacity: 1;
}
/* El placeholder debe verse atenuado pero legible (no invisible). */
.wap-area .wap-field input::placeholder,
.wap-area .wap-field textarea::placeholder {
color: var(--wap-gris-claro);
opacity: .7;
}
/* AUTOCOMPLETAR de Chrome: al rellenar, el navegador impone su propio fondo
claro y su propio -webkit-text-fill-color mediante la pseudo-clase
`:-webkit-autofill`, que NO se puede sobrescribir con `background` normal.
El truco estándar es una `box-shadow` interior enorme que tapa ese fondo.
Sin esto, un teléfono/email autocompletado puede quedar ilegible — y el campo
de teléfono es justo uno de los que el navegador autocompleta
(`autocomplete="tel"`). */
.wap-area .wap-field input:-webkit-autofill,
.wap-area .wap-field input:-webkit-autofill:hover,
.wap-area .wap-field input:-webkit-autofill:focus,
.wap-area .wap-field input:-webkit-autofill:active {
-webkit-text-fill-color: var(--wap-blanco);
caret-color: var(--wap-blanco);
/* `inset` de 100vh: cubre el fondo amarillo/azul del autocompletar. */
-webkit-box-shadow: 0 0 0 100vh var(--wap-negro) inset;
box-shadow: 0 0 0 100vh var(--wap-negro) inset;
transition: background-color 9999s ease-in-out 0s;
}
/* Cursor de texto visible sobre fondo negro en TODOS los campos. */
.wap-area .wap-field input,
.wap-area .wap-field textarea {
caret-color: var(--wap-blanco);
}
/* ----------------------------------------------------------------------
* Cabecera
* -------------------------------------------------------------------- */
/* Banner a sangre de 420px con la fila de botones + logotipo arriba (y≈54) y el
bloque de título MUY por debajo (y≈290), como bloque independiente. */
/* ALTO FLUIDO (v1.3.0): 420px del Figma en escritorio, bajando hasta 240px en
móvil con `clamp()` para que el banner no se coma la pantalla en un teléfono. */
/* VELO DEL BANNER (v1.3.2). Antes `linear-gradient(rgba(0,0,0,.45), rgba(0,0,0,.55))`
→ DOBLE OSCURECIDO: los tres JPG del export ya son casi negros de por sí, así que
el velo remataba la foto y la casa no se distinguía, mientras en el Figma
renderizado sí se aprecia dentro de un tono oscuro.
MEDIDO sobre los propios assets (luminancia relativa sRGB, muestreo 1 de cada 3px):
banner-viviendas.jpg banda del título (60–85% de alto): Y media 0.0068, Y máx 0.0194
banner-edificios.jpg banda del título: Y media 0.0081, Y máx 0.0194
banner-logged-out.jpg banda del título: Y media 0.0045, Y máx 0.0194
Con una Y máxima de 0.0194 (≈ #202020) el título #DEDBDB (Y=0.7305) tiene 11.2:1
SIN velo alguno, y 12.3:1 con el velo nuevo al 30%: sobra margen sobre el 3:1 que
pide WCAG para texto grande (48px/600) y sobre el 4.5:1 de texto normal. Por eso NO
hace falta un degradado extra que oscurezca la banda del texto: el problema es que
la foto está DEMASIADO oscura, no que el título esté desprotegido.
Se mantiene el degradado (más claro arriba, algo más denso abajo) porque la fila de
botones + logotipo va arriba y el bloque de título abajo. */
.wap-banner {
position: relative;
min-height: var(--wap-banner-min);
display: flex;
background-image: linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.30)), var(--wap-banner);
background-size: cover;
background-position: center;
}
.wap-banner__inner {
position: relative;
width: 100%;
max-width: var(--wap-wrap);
margin: 0 auto;
padding: clamp(24px, 2.8vw, 54px) var(--wap-gutter) clamp(32px, 3.7vw, 71px);
display: flex;
flex-direction: column;
}
/* Fila superior: 3 zonas (izquierda / logo centrado / derecha). */
.wap-banner__top {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
.wap-header__back { justify-self: start; }
.wap-header__logout { justify-self: end; }
.wap-banner__logo {
justify-self: center;
width: 363px;
max-width: 100%;
height: auto;
display: block;
}
.wap-banner__spacer { display: block; }
.wap-header__login { justify-self: end; display: inline-flex; align-items: center; gap: 12px; }
.wap-header__login-note { color: var(--wap-gris-claro); font-size: var(--wap-parrafo); }
/* Bloque de título independiente: icono (opcional) + H1, en la misma fila.
Separación y hueco FLUIDOS (v1.3.0): 104px/41px del Figma en escritorio. */
.wap-banner__titlerow {
margin-top: clamp(28px, 5.4vw, 104px);
display: flex;
align-items: center;
justify-content: center;
gap: clamp(14px, 2.1vw, 41px);
flex-wrap: wrap;
min-width: 0;
}
.wap-banner__icon {
width: clamp(30px, 2.3vw, 44px);
height: auto;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
}
/* `overflow-wrap: anywhere` (v1.3.0): los rótulos largos con ® deben poder partir
antes que desbordar horizontalmente. `text-transform: none` explícito: el H1 del
Figma va en caja normal, no en la caja `lowercase` de los botones. */
.wap-banner__title {
font-size: var(--wap-h1);
font-weight: 600;
color: var(--wap-gris-claro);
margin: 0;
line-height: 1.2;
text-align: center;
text-transform: none;
letter-spacing: normal;
min-width: 0;
overflow-wrap: anywhere;
}
/* ----------------------------------------------------------------------
* Pie
* -------------------------------------------------------------------- */
/* Banda superior sobre fondo NEGRO; la franja de copyright/legales es la única
con fondo #2B2424 (así lo separa el diseño). */
.wap-footer { background: var(--wap-negro); }
.wap-footer__line {
height: 1px;
background: var(--wap-verde);
max-width: var(--wap-wrap);
margin: 0 auto;
}
.wap-footer__inner {
max-width: var(--wap-wrap);
margin: 0 auto;
padding: 23px var(--wap-gutter) 28px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
gap: 24px 32px;
}
/* Columna izquierda: contacto + redes. */
.wap-footer__contact { display: flex; flex-direction: column; gap: 13px; align-items: flex-start; }
.wap-footer__row {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--wap-parrafo);
color: var(--wap-gris-claro);
text-decoration: none;
}
.wap-footer__row img { flex: 0 0 auto; }
.wap-footer__social { display: flex; gap: 9px; margin-top: 10px; }
.wap-footer__social a { display: inline-flex; }
.wap-footer__social img { width: 21px; height: 21px; }
/* Columna central: sellos de certificación. */
.wap-footer__seals { display: flex; align-items: center; justify-content: center; gap: 28px; flex-wrap: wrap; }
.wap-footer__seals img { height: auto; max-width: 100%; }
/* Columna derecha: navegación con chevron, alineada a la derecha. */
.wap-footer__nav { display: flex; flex-direction: column; gap: 13px; align-items: flex-end; }
.wap-footer__navlink {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: var(--wap-parrafo);
color: var(--wap-gris-claro);
text-decoration: none;
}
/* TODO-ASSET: no hay chevron "hacia la derecha" exportado; se voltea el de
"volver". Cuando exista el asset propio, quitar el `transform`. */
.wap-footer__navlink img { transform: scaleX(-1); flex: 0 0 auto; }
/* Franja inferior: copyright + legales. */
.wap-footer__bottom { background: var(--wap-gris); }
.wap-footer__bottom-inner {
max-width: var(--wap-wrap);
margin: 0 auto;
padding: 6px var(--wap-gutter);
min-height: 32px;
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
justify-content: space-between;
align-items: center;
}
.wap-footer__copy { font-size: var(--wap-small); font-weight: 300; color: var(--wap-gris-claro); margin: 0; }
.wap-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; font-size: var(--wap-small); font-weight: 300; }
.wap-footer__legal a { color: var(--wap-gris-claro); text-decoration: none; }
.wap-footer__legal a:hover { color: var(--wap-verde); }
/* ----------------------------------------------------------------------
* Pantalla logged-out — geometría del frame 523:2 del Figma
*
* Coordenadas del diseño (frame 1920 de ancho, contenido de 1640 centrado):
* tarjeta de vídeo 899×532 en x=510, y=188 (SOLAPA el banner de 420)
* rótulo del vídeo ancho 899 en x=510, y=737
* 4 miniaturas 381×245 en x=140, y=840 (huecos de ≈39px)
* tarjeta GRATIS 1407×243 en x=256, y=942 (SOLAPA la zona ya fundida a
* negro de las miniaturas)
* -------------------------------------------------------------------- */
.wap-lo { position: relative; z-index: 1; }
/* El vídeo empieza en y=188, es decir 232px POR ENCIMA del final del banner (420).
`.wap-main` añade 64px de padding superior, así que el desplazamiento total es
-(232 + 64) = -296px.
BREAKPOINT (v1.3.0): el corte pasa de 1024px a 1200px para alinearse con los
breakpoints únicos del área. El solape solo tiene sentido cuando el banner mide
sus 420px completos; por debajo de 1200px `--wap-banner-min` ya lo ha comprimido,
así que la pantalla se apila en orden normal (ver "RESPONSIVE"). */
@media (min-width: 1200px) {
.wap-lo { margin-top: -296px; }
}
.wap-video-hero { max-width: 899px; margin: 0 auto; }
/* 899×532 con borde verde de 1px y sombra del diseño. Sin radio: el Figma no lo
tiene (antes eran 16px). */
.wap-video-hero__btn {
position: relative;
display: block;
width: 100%;
aspect-ratio: 899 / 532;
padding: 0;
border: 1px solid var(--wap-verde);
border-radius: 0;
cursor: pointer;
background-color: var(--wap-negro);
background-size: cover;
background-position: center;
box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
overflow: hidden;
transition: transform .25s ease;
}
/* Capa oscura del diseño: rgba(0,0,0,.4). */
.wap-video-hero__btn::after {
content: "";
position: absolute; inset: 0;
background: rgba(0, 0, 0, .4);
transition: background .25s ease;
}
.wap-video-hero__btn:hover { transform: scale(1.01); }
.wap-video-hero__btn:hover::after { background: rgba(0, 0, 0, .22); }
/* Botón de play: círculo de 158px con relleno rgba(0,0,0,.8) y el triángulo verde
encima.
GEOMETRÍA CORREGIDA (cliente 2026-08-05: "el botón de play está desproporcionado,
desajustado y descentrado").
Hasta v1.5.0 el triángulo se dibujaba con `viewBox="0 0 90 90"` y un `path` que
ocupaba TODO el cuadro (`M0 0 L90 45 L0 90 Z`): 90×90 dentro de un círculo de 158
= 57 % del diámetro y proporción 1:1 — un triángulo gigantesco y achatado. Encima
llevaba `margin-left: -4px`, que lo empujaba a la IZQUIERDA, justo al revés de lo
que necesita un triángulo que apunta a la derecha (su masa visual está en la base,
así que para verse centrado tiene que ir a la DERECHA).
Los números buenos salen del asset REAL del Figma (`assets/img/play.svg`, el mismo
glifo en versión inversa: círculo verde + triángulo claro), círculo r=28 en un
lienzo de 56 y triángulo `M42 27.5 L20.25 40.0574 L20.25 14.9426 Z`:
· ancho del triángulo = 21,75 / 56 → 38,8 % del diámetro
· alto del triángulo = 25,11 / 56 → 44,8 % del diámetro
· proporción ancho/alto = 0,866 (no 1:1)
· desplazamiento óptico = +5,6 % del diámetro hacia la DERECHA (y −0,5 px arriba)
NO se corrige con márgenes: el SVG en línea usa YA el `viewBox="0 0 56 56"` y el
MISMO `path` del asset, así que comparte sistema de coordenadas con el círculo y el
desplazamiento óptico viaja DENTRO del path. Por eso aquí el SVG ocupa el 100 % del
círculo y NO hay `margin-left` ni `width: 57%`.
SI ALGUIEN VUELVE A "CENTRARLO" con un margen negativo, lo está descentrando. */
.wap-video-hero__play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
/* 158px en el diseño; `min()` lo hace encoger con la tarjeta en pantallas
pequeñas sin deformarse (aspect-ratio 1). */
width: min(158px, 30%);
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
background: rgba(0, 0, 0, .8);
display: flex;
align-items: center;
justify-content: center;
color: var(--wap-verde);
}
/* El SVG comparte el lienzo del círculo (56×56 → 100 %/100 %): el tamaño real del
triángulo (38,8 % × 44,8 %) y su desplazamiento óptico a la derecha ya están en el
`path`. Nada de `width` parcial ni de márgenes de compensación. */
.wap-video-hero__tri { display: block; width: 100%; height: 100%; }
/* Rótulo del vídeo: H2 36px #DEDBDB, alineado con el borde izquierdo de la tarjeta
(x=510 = borde de la tarjeta) y 17px por debajo de ella. */
.wap-video-hero__caption {
max-width: 899px;
margin: 17px auto 0;
text-align: left;
}
/* TITULARES DE LA PANTALLA PÚBLICA A 36px / SEMIBOLD 600 (cliente 2026-08-05).
Petición literal: «el título de "Lección 1. El panel Walluminium®" y el de "Recibe
toda la formación completamente GRATIS" debería ir en negrita con estos parámetros:
Fuente Clash Grotesk, Peso 600, Estilo Semibold, Tamaño 36px».
Los dos ya llevaban `.wap-h2` (600 + `--wap-h2`, cuyo MÁXIMO son 36px), pero
`--wap-h2` es un `clamp()` y solo llega a 36px por encima de ~1830px de viewport;
además una clase suelta es (0,1,0) y el global kit de Elementor dimensiona los
encabezados con `.elementor-kit-N h2` (0,1,1), que GANA. Es el mismo patrón ya
documentado en "Blindaje de TAMAÑO y PESO del H1 del banner".
Aquí se fija el valor EXACTO medido por el cliente en Figma con (0,3,1) —
`.wap-area` + `.wap-lo` + `h2` + clase propia—, muy por encima del kit y SIN
`!important` (la política del fichero lo reserva a los 2 botones sólidos).
El peso 600 es `ClashGrotesk-Semibold`, autoalojado con `font-weight: 600` en su
`@font-face` (ver cabecera del fichero), así que el navegador usa el fichero real y
NO sintetiza una falsa negrita.
NO se toca `--wap-h2`: el resto de H2 del área (Vídeos, Recursos, tarjetas del
dashboard…) siguen con la escala fluida. Solo estos dos titulares están medidos. */
.wap-area .wap-lo h2.wap-video-hero__caption,
.wap-area .wap-lo h2.wap-lo__free-title {
font-family: var(--wap-font);
font-weight: 600;
font-size: 36px;
}
/* Fila de 4 miniaturas a todo el ancho del contenido (1640): 4×381 + 3 huecos de
≈39px. Se funden a negro con el degradado del diseño (rect 1920×450 desde y=570
con linear-gradient a negro + rect negro 1920×222 desde y=1020). */
.wap-teasers {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 39px;
margin: 58px 0 0;
}
.wap-teaser {
position: relative;
display: block;
aspect-ratio: 381 / 245;
overflow: hidden;
}
.wap-teaser__img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform .25s ease; }
.wap-teaser:hover .wap-teaser__img { transform: scale(1.05); }
/* Degradado del Figma: a la altura del borde superior de las miniaturas el negro ya
va al 60 %, y a partir del 73 % de su alto es negro pleno. Cubre toda la fila,
incluidos los huecos, y no intercepta el clic. */
.wap-teasers__fade {
position: absolute;
inset: 0;
pointer-events: none;
background: linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .82) 45%, #000 73%, #000 100%);
}
/* Tarjeta GRATIS 1407×243, radio 18px, fondo GRIS WALLUMINIUM. Monta sobre la zona
ya negra de las miniaturas (y=942 contra y=840+245): el solape del diseño son
143px, aquí se aplica -132px para dejar respirar el borde superior. */
.wap-lo__free {
position: relative;
z-index: 2;
max-width: 1407px;
margin: 0 auto;
background: var(--wap-gris);
border-radius: 18px;
/* Relleno FLUIDO (v1.3.0): antes 48/105/48/61px fijos, que en anchuras
intermedias empujaban el contenido y provocaban desbordamiento. */
padding: clamp(28px, 2.5vw, 48px) clamp(24px, 5.5vw, 105px) clamp(28px, 2.5vw, 48px) clamp(24px, 3.2vw, 61px);
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
color: var(--wap-gris-claro);
}
/* Mismo breakpoint único que el solape del vídeo (v1.3.0): 1200px. */
@media (min-width: 1200px) {
.wap-lo__free { margin-top: -132px; }
}
.wap-lo__free-text { max-width: 784px; }
.wap-lo__free-title { margin: 0 0 20px; }
.wap-lo__free-p { font-size: var(--wap-parrafo); line-height: 1.35; margin: 0 0 8px; }
.wap-lo__free-p:last-child { margin-bottom: 0; }
/* El color se hereda de la tarjeta, pero el global kit del tema colorea `p` con
`.elementor-kit-N p` (0,1,1) y la herencia PIERDE contra una declaración directa
(misma trampa que los botones y los inputs). Con (0,2,0) queda blindado. */
.wap-lo__free .wap-lo__free-p { color: var(--wap-gris-claro); }
/* Pastilla 275×59 del diseño, centrada verticalmente en la tarjeta. */
.wap-lo__free-cta { flex: 0 0 auto; min-width: 275px; justify-content: center; text-align: center; }
/* ----------------------------------------------------------------------
* Panel (login / registro) — inputs subrayados
* -------------------------------------------------------------------- */
/* Panel del formulario de registro: 1327px de ancho útil (x=296 → x=1623 sobre
1920), con dos columnas de 646px y un hueco de 35px. El login conserva el
panel estrecho (`--narrow`). */
.wap-panel { max-width: 1327px; margin: 0 auto; }
.wap-panel--narrow { max-width: 480px; }
.wap-panel__subtitle { text-align: left; }
.wap-panel--narrow .wap-panel__subtitle { text-align: center; }
.wap-grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 35px; }
.wap-form--login { max-width: 720px; }
.wap-form--registro { max-width: 100%; }
.wap-field--submit { margin-top: 28px; }
.wap-field--underline { gap: 8px; }
.wap-field--underline label {
font-size: var(--wap-big);
font-weight: 400;
letter-spacing: .2em;
text-transform: lowercase;
color: var(--wap-blanco);
}
.wap-field--underline input {
background: transparent;
border: none;
border-bottom: 1px solid rgba(249,249,249,.85);
border-radius: 0;
padding: 8px 2px;
color: var(--wap-blanco);
font-size: var(--wap-parrafo);
}
.wap-field--underline input:focus { border-bottom-color: var(--wap-verde); outline: none; }
.wap-field--check { align-items: flex-start; gap: 12px; }
.wap-field--check label { display: flex; align-items: flex-start; gap: 12px; font-size: var(--wap-parrafo); color: var(--wap-gris-claro); font-weight: 400; letter-spacing: 0; text-transform: none; }
.wap-field--check input[type="checkbox"] {
appearance: none;
-webkit-appearance: none;
width: 22px; height: 22px;
flex: 0 0 22px;
border: 1px solid var(--wap-blanco);
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
margin-top: 2px;
}
.wap-field--check input[type="checkbox"]:checked { border-color: var(--wap-verde); }
.wap-field--check input[type="checkbox"]:checked::after {
content: "";
position: absolute; left: 6px; top: 2px;
width: 6px; height: 11px;
border: solid var(--wap-verde);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.wap-field--check input[type="checkbox"]:focus-visible { outline: 2px solid var(--wap-verde); outline-offset: 2px; }
.wap-form__links { font-size: var(--wap-parrafo); margin: 10px 0 0; }
/* ----------------------------------------------------------------------
* Dashboard
* -------------------------------------------------------------------- */
/* DOS COLUMNAS FLUIDAS (v1.3.0): en el Figma cada tarjeta mide 803px con un hueco
de 34px sobre los 1640 de contenido. Aquí `1fr 1fr` + `--wap-card-gap` reproduce
la misma proporción sin fijar ningún px, y `min-width: 0` en las columnas evita
el desbordamiento clásico de grid con contenido largo. `position: static` +
`float: none` son explícitos para que el tema no pueda sacar una columna del
flujo (era el patrón que producía el solape de columnas en staging). */
.wap-area .wap-dash .wap-course-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--wap-card-gap);
align-items: start;
position: static;
float: none;
}
.wap-area .wap-dash .wap-course-col {
min-width: 0;
position: static;
float: none;
}
/* Icono 28×28 + H2, ENCIMA de la tarjeta (no dentro), como en el Figma. */
.wap-area .wap-dash .wap-course-col__head {
display: flex;
align-items: center;
gap: clamp(10px, 1vw, 20px);
margin: 0 0 clamp(12px, 1vw, 19px);
min-width: 0;
}
.wap-area .wap-dash .wap-course-col__icon {
width: clamp(22px, 1.5vw, 28px);
height: auto;
aspect-ratio: 1 / 1;
flex: 0 0 auto;
}
.wap-area .wap-dash .wap-course-col__title {
margin: 0;
color: var(--wap-gris-claro);
text-transform: none;
min-width: 0;
overflow-wrap: anywhere;
}
/* Tarjeta fotográfica 803×286 (proporción conservada con `aspect-ratio`) con
degradado negro→transparente y las dos líneas de información pegadas al borde
inferior izquierdo. El ZOOM del hover se hace sobre una capa propia
(`__img`, `transform: scale`) y NUNCA sobre `width`/`height`, para no provocar
reflow. */
.wap-area .wap-dash .wap-course-card {
position: relative;
display: block;
aspect-ratio: 803 / 286;
min-height: 180px;
border-radius: 11px;
overflow: hidden;
text-decoration: none;
background-color: var(--wap-negro);
isolation: isolate;
}
/* Capa de imagen independiente: es la que escala en el hover. */
.wap-area .wap-dash .wap-course-card::before {
content: "";
position: absolute;
inset: 0;
background-image: var(--wap-card-bg);
background-size: cover;
background-position: center;
transform: scale(1);
transition: transform var(--wap-t) var(--wap-ease);
}
.wap-area .wap-dash .wap-course-card:hover::before,
.wap-area .wap-dash .wap-course-card:focus-visible::before {
transform: scale(1.04);
}
/* VELO DE LA TARJETA — DOS CAPAS (v1.11.0). El degradado a 39° es el del diseño y
NO se toca: es el que da el aire fotográfico de la tarjeta. Se le añade DELANTE
una segunda capa de abajo hacia arriba, y esto es el porqué:
Desde la v1.11.0 la foto de la tarjeta la elige el profesor (imagen destacada
del curso), así que ya NO se puede dar por hecho que sea casi negra como los
`fondo-curso-*.jpg` del paquete. El texto de la tarjeta ("N vídeos" y "Recursos
CAD y Revit incluidos", #DEDBDB, 24px/400) va pegado al borde inferior, y ahí el
degradado de 39° solo llega a ~0,62 de opacidad en el extremo DERECHO de la
segunda línea. Con una foto clara detrás (Y≈1) eso deja el fondo en Y≈0,38 y el
contraste cae a ~1,8:1 → incumpliría WCAG.
Contraste calculado en el punto más desfavorable (final de la segunda línea,
~x=324 y=240 sobre la caja de 803×286), con la foto MÁS CLARA posible (blanco):
solo capa 39° → 1,8:1 INSUFICIENTE
con esta segunda capa → 5,2:1 pasa el 4,5:1 de texto normal
Y en la esquina inferior izquierda queda en ~10:1.
Sobre los JPG del paquete (Y media ≈0,007) el cambio es INVISIBLE: negro sobre
negro. Es decir, no hay regresión visual en los dos cursos actuales; lo que se
gana es que cualquier foto que suba el profesor siga siendo legible.
Se implementa como SEGUNDA CAPA de `background-image` en lugar de un
pseudo-elemento nuevo para no tocar el apilado: el `::after` del hover (velo
verde) sigue pintándose encima de las dos, exactamente como antes. */
.wap-area .wap-dash .wap-course-card__overlay {
position: absolute;
inset: 0;
/* Se mantiene la ABREVIATURA `background` (no `background-image`) a propósito:
así se sigue reinicializando `background-color` a transparente, que es la
protección que ya tenía esta regla contra el kit global del tema. */
background:
linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.60) 30%, rgba(0,0,0,0) 55%),
linear-gradient(39deg, rgba(0,0,0,.95) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,0) 100%);
transition: opacity var(--wap-t) var(--wap-ease);
}
/* Segunda capa con el degradado verde: se anima su OPACIDAD (no el `background`,
que no es interpolable y provoca un salto seco). */
.wap-area .wap-dash .wap-course-card__overlay::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(39deg, rgba(0,0,0,.95) 0%, rgba(79,173,50,.45) 55%, rgba(0,0,0,0) 100%);
opacity: 0;
transition: opacity var(--wap-t) var(--wap-ease);
}
.wap-area .wap-dash .wap-course-card:hover .wap-course-card__overlay::after,
.wap-area .wap-dash .wap-course-card:focus-visible .wap-course-card__overlay::after {
opacity: 1;
}
.wap-area .wap-dash .wap-course-card__body {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
padding: clamp(16px, 1.4vw, 24px);
gap: 6px;
min-width: 0;
}
.wap-area .wap-dash .wap-course-card__meta {
font-size: var(--wap-h4);
font-weight: 400;
color: var(--wap-gris-claro);
line-height: 1.25;
text-transform: none;
letter-spacing: normal;
overflow-wrap: anywhere;
}
/* ----------------------------------------------------------------------
* Sección "Solicita tu certificado" (dashboard)
* -------------------------------------------------------------------- */
/* Separaciones del Figma (109px / 42px / 25px sobre 1920) hechas fluidas. */
.wap-area .wap-cert { text-align: center; margin-top: clamp(48px, 5.7vw, 109px); }
.wap-area .wap-cert__mark {
width: min(462px, 100%);
height: auto;
margin: 0 auto;
display: block;
}
.wap-area .wap-cert__title {
margin: clamp(20px, 2.2vw, 42px) auto 0;
max-width: 1140px;
color: var(--wap-gris-claro);
text-transform: none;
overflow-wrap: anywhere;
}
/* 4 pasos numerados: `repeat(4, minmax(0,1fr))` — el `minmax(0,…)` es lo que evita
que un texto largo ensanche una columna y desborde la fila. */
.wap-area .wap-steps {
list-style: none;
margin: clamp(16px, 1.3vw, 25px) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(16px, 1.4vw, 27px);
text-align: left;
}
.wap-area .wap-step {
background: var(--wap-gris);
border-radius: 11px;
padding: clamp(16px, 1.3vw, 24px);
min-height: 246px;
display: flex;
flex-direction: column;
gap: 6px;
color: var(--wap-gris-claro);
min-width: 0;
overflow-wrap: anywhere;
}
.wap-area .wap-step__num { font-size: var(--wap-h1); font-weight: 600; line-height: 1; }
.wap-area .wap-step__head { font-size: var(--wap-h3); font-weight: 600; line-height: 1.2; text-transform: none; }
.wap-area .wap-step__text { font-size: var(--wap-parrafo); font-weight: 400; line-height: 1.4; }
/* ----------------------------------------------------------------------
* CTA "enviar diseño" → despliega el formulario de subida ya existente.
* / nativo: en estado cerrado solo se ve la pastilla del
* diseño; sin JavaScript y accesible por teclado.
* -------------------------------------------------------------------- */
.wap-enviar { margin: clamp(20px, 2vw, 39px) 0 0; }
.wap-cert .wap-enviar { display: flex; flex-direction: column; align-items: center; }
.wap-enviar__btn {
/* Quitar el triangulito nativo del en todos los navegadores. */
list-style: none;
display: inline-flex;
justify-content: center;
text-align: center;
/* 309px en el Figma; `min()` lo hace encoger en móvil sin desbordar. */
min-width: min(309px, 100%);
max-width: 100%;
cursor: pointer;
}
/* CONTROL INERTE de la vista previa de gestor (v1.3.0): mismo aspecto que la
pastilla del diseño (incluido el texto BLANCO del blindaje de contraste, que le
aplica porque conserva `.wap-btn--primary`), pero sin cursor de mano y atenuado
para que se vea que no está activo. */
.wap-enviar__btn.is-inert,
.wap-btn.is-inert {
cursor: not-allowed;
opacity: .55;
transform: none;
}
.wap-enviar--inert { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.wap-cert .wap-enviar--inert { align-items: center; text-align: center; }
.wap-note--inert { max-width: 46ch; }
.wap-enviar__btn::-webkit-details-marker { display: none; }
.wap-enviar__btn::marker { content: ""; }
.wap-enviar__btn:focus-visible { outline: 3px solid var(--wap-blanco); outline-offset: 3px; }
.wap-enviar__panel {
margin-top: 24px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(222,219,219,.18);
border-radius: 14px;
padding: 24px;
text-align: left;
}
.wap-enviar__panel .wap-form { margin: 0 auto; }
/* En el dashboard el se centra, así que el panel necesita ancho propio. */
.wap-cert .wap-enviar__panel { width: 100%; max-width: 720px; }
/* ----------------------------------------------------------------------
* Pantalla de curso
* -------------------------------------------------------------------- */
/* ======================================================================
* MAQUETACIÓN REHECHA EN v1.3.0
*
* Todo este bloque usa selectores prefijados con `.wap-area` → especificidad
* (0,2,1) o superior, para que NINGUNA regla del tema ni del global kit de
* Elementor —que llegan como `.elementor-kit-N `, (0,1,1)— pueda pisar
* el fondo, la caja de texto, la tipografía ni el posicionamiento. Es el mismo
* patrón ya usado en este fichero para títulos e inputs, aplicado ahora a la
* pantalla de curso completa. Ver el bloque "RESET DE ELEMENTOS NATIVOS" para la
* causa raíz del bloque verde.
* ==================================================================== */
/* DOS COLUMNAS FLUIDAS. En el Figma son 814px + 62px de hueco sobre los 1640 de
contenido; aquí `1fr 1fr` + `--wap-col-gap` mantiene la proporción SIN copiar
ningún px del frame de 1920, que era lo que desbordaba.
`min-width: 0` en las columnas: sin él, un título largo (o el ® sin punto de
corte) fuerza el ancho de la pista y la fila se sale.
`position: static` / `float: none` / `inset: auto` explícitos: si el tema
posiciona o flota estos contenedores, las columnas se superponen —era
exactamente el síntoma de staging ("Recursos" encima de "Vídeos"). Declararlos
aquí con (0,2,1) lo hace imposible.
`align-items: start`: las dos columnas empiezan arriba y son independientes en
altura, así que la tarjeta del certificado puede crecer sin arrastrar la
columna de vídeos. */
.wap-area .wap-curso {
position: static;
float: none;
min-width: 0;
}
.wap-area .wap-curso .wap-curso__cols {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--wap-col-gap);
align-items: start;
position: static;
float: none;
inset: auto;
width: auto;
margin: 0;
padding: 0;
}
.wap-area .wap-curso .wap-curso__col {
min-width: 0;
position: static;
float: none;
inset: auto;
width: auto;
margin: 0;
padding: 0;
display: block;
}
/* ENCABEZADOS DE COLUMNA ("Vídeos" / "Recursos").
En staging aparecían RECORTADOS POR ARRIBA. Se blinda con:
· `line-height: 1.2` (con 1.1 el tema podía recortar los ascendentes),
· `overflow: visible` y `padding-top: 0` explícitos,
· `text-transform: none` (el `lowercase` del estilo "Big" del Figma es SOLO
para los botones pastilla, nunca para los encabezados),
· separación inferior fluida (63px del Figma → 24px en móvil). */
.wap-area .wap-curso .wap-curso__coltitle,
.wap-area .wap-curso .wap-curso__col > .wap-h2 {
font-size: var(--wap-h2);
font-weight: 600;
line-height: 1.2;
color: var(--wap-gris-claro);
margin: 0 0 clamp(24px, 3.3vw, 63px);
padding: 0;
overflow: visible;
text-transform: none;
letter-spacing: normal;
overflow-wrap: anywhere;
}
/* ----------------------------------------------------------------------
* FILAS DE LECCIÓN — `.wap-video-row`
*
* Estructura del Figma: botón CIRCULAR de play verde a la izquierda, a su derecha
* el título en CAJA NORMAL y debajo la duración en gris más pequeño; separador de
* 1px al final de la fila. El fondo de la fila es TRANSPARENTE sobre el negro.
*
* La clase ya NO se llama `…__btn` y no comparte selector con `.wap-btn`,
* `.wap-btn--primary` ni `.wap-btn--pill`. El reset de `.wap-reset-btn` (arriba)
* neutraliza lo que inyecta el tema; aquí solo se añade la geometría del diseño.
* -------------------------------------------------------------------- */
.wap-area .wap-curso .wap-video-list,
.wap-area .wap-curso .wap-recurso-list {
list-style: none;
margin: 0;
padding: 0;
display: block;
min-width: 0;
}
.wap-area .wap-curso .wap-video-item,
.wap-area .wap-curso .wap-recurso-item {
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
.wap-area .wap-curso .wap-video-item::before,
.wap-area .wap-curso .wap-video-item::marker,
.wap-area .wap-curso .wap-recurso-item::marker { content: ""; display: none; }
/* Fila de lección y fila de recurso comparten geometría: se declara una vez. */
.wap-area .wap-curso .wap-video-row,
.wap-area .wap-curso .wap-resource-row {
position: relative; /* ancla del .screen-reader-text de las lecciones sin vídeo */
display: flex;
align-items: center;
gap: clamp(14px, 1.7vw, 32px);
width: 100%;
min-width: 0;
text-align: left;
background: none;
background-color: transparent;
border: 0;
border-bottom: 1px solid rgba(222, 219, 219, .55);
border-radius: 0;
padding: clamp(10px, 1vw, 14px) 6px clamp(16px, 1.4vw, 26px);
margin: 0 0 clamp(14px, 1.4vw, 26px);
color: var(--wap-gris-claro);
text-decoration: none;
cursor: pointer;
/* Solo `background-color`, `color`, `border-color` y `transform`: ninguna de
ellas provoca reflow (no se anima `width`/`height`/`padding`). */
transition:
background-color var(--wap-t) var(--wap-ease),
border-color var(--wap-t) var(--wap-ease),
color var(--wap-t) var(--wap-ease),
transform var(--wap-t) var(--wap-ease);
}
.wap-area .wap-curso .wap-video-item:last-child .wap-video-row,
.wap-area .wap-curso .wap-recurso-item:last-child .wap-resource-row { margin-bottom: 0; }
/* HOVER / FOCO / PULSACIÓN: fondo MUY tenue + separador verde + desplazamiento
mínimo. Se declaran los CUATRO estados (`:hover`, `:focus`, `:focus-visible`,
`:active`) a propósito: el global kit de Elementor también colorea
`button:hover` y `button:focus` por separado —(0,2,1)— y si aquí faltara uno, el
verde del tema volvería a asomar justo en ese estado. Con el prefijo
`.wap-area .wap-curso` estas reglas son (0,4,0) y ganan siempre. */
.wap-area .wap-curso .wap-video-row:hover,
.wap-area .wap-curso .wap-video-row:focus,
.wap-area .wap-curso .wap-video-row:focus-visible,
.wap-area .wap-curso .wap-video-row:active,
.wap-area .wap-curso .wap-resource-row:hover,
.wap-area .wap-curso .wap-resource-row:focus,
.wap-area .wap-curso .wap-resource-row:focus-visible,
.wap-area .wap-curso .wap-resource-row:active {
background-color: rgba(249, 249, 249, .05);
background-image: none;
border-bottom-color: var(--wap-verde);
transform: translateX(3px);
}
.wap-area .wap-curso .wap-video-row:hover .wap-video-row__title,
.wap-area .wap-curso .wap-video-row:focus .wap-video-row__title,
.wap-area .wap-curso .wap-resource-row:hover .wap-resource-row__title,
.wap-area .wap-curso .wap-resource-row:focus .wap-resource-row__title { color: var(--wap-verde); }
/* El icono crece un poco y se aclara. Se anima `transform`/`filter`, nunca el
tamaño de la caja. */
.wap-area .wap-curso .wap-video-row:hover .wap-video-row__icon,
.wap-area .wap-curso .wap-video-row:focus-visible .wap-video-row__icon,
.wap-area .wap-curso .wap-resource-row:hover .wap-resource-row__icon,
.wap-area .wap-curso .wap-resource-row:focus-visible .wap-resource-row__icon {
transform: scale(1.08);
filter: brightness(1.12);
}
/*
* Lección todavía sin vídeo asignado: la fila se mantiene en su sitio —el temario
* completo del diseño— pero el botón está deshabilitado, así que no se le da
* cursor de mano ni efecto hover. Mismo criterio para un recurso sin fichero (no
* debería llegar aquí, pero el estado existe).
*
* ATENUACIÓN DEL ICONO (v1.3.2): antes `opacity: .35`. MEDIDO en staging: con las 8
* lecciones sembradas SIN URL de YouTube todas las filas llevan `is-unavailable`, y
* un verde #4FAD32 al 35% sobre fondo negro desaparece → la pantalla parecía rota
* (motivo por el que el cliente ya rechazó versiones anteriores). Se sube a .85:
* el círculo verde se lee con claridad y sigue distinguiéndose de una fila activa.
* El estado "no disponible" NO se comunica escondiendo el icono, sino por medios no
* destructivos que ya existen y se mantienen: `disabled` + `aria-disabled` en el
* , `cursor: default`, y CERO efecto hover/focus (ni color, ni fondo, ni
* `transform`, ni `filter`). El título se atenúa solo levemente (.9), nunca por
* debajo de un contraste legible.
*/
.wap-area .wap-curso .wap-video-row.is-unavailable,
.wap-area .wap-curso .wap-resource-row.is-unavailable { cursor: default; }
.wap-area .wap-curso .wap-video-row.is-unavailable:hover,
.wap-area .wap-curso .wap-video-row.is-unavailable:focus,
.wap-area .wap-curso .wap-video-row.is-unavailable:active,
.wap-area .wap-curso .wap-resource-row.is-unavailable:hover,
.wap-area .wap-curso .wap-resource-row.is-unavailable:focus,
.wap-area .wap-curso .wap-resource-row.is-unavailable:active {
color: var(--wap-gris-claro);
background-color: transparent;
background-image: none;
border-bottom-color: rgba(222, 219, 219, .55);
transform: none;
}
.wap-area .wap-curso .wap-video-row.is-unavailable:hover .wap-video-row__title,
.wap-area .wap-curso .wap-video-row.is-unavailable:focus .wap-video-row__title,
.wap-area .wap-curso .wap-resource-row.is-unavailable:hover .wap-resource-row__title,
.wap-area .wap-curso .wap-resource-row.is-unavailable:focus .wap-resource-row__title { color: var(--wap-gris-claro); }
.wap-area .wap-curso .wap-video-row.is-unavailable .wap-video-row__icon,
.wap-area .wap-curso .wap-resource-row.is-unavailable .wap-resource-row__icon {
opacity: .85;
transform: none;
filter: none;
}
.wap-area .wap-curso .wap-video-row.is-unavailable .wap-video-row__body,
.wap-area .wap-curso .wap-resource-row.is-unavailable .wap-resource-row__body {
opacity: .9;
}
/* Texto solo para lectores de pantalla (no depende del CSS del tema). */
.wap-curso .screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ICONOS. El SVG ya trae la forma y el color del Figma (`play.svg` = círculo verde
#4FAD32 de 56px con el triángulo #DEDBDB dentro; `download.svg` = cuadrado
redondeado verde de 50px con radio 10). El solo da la CAJA:
· 56px / 50px del Figma en escritorio,
· nunca por debajo de 44px → área táctil mínima accesible en móvil,
· `flex: 0 0 auto` para que no se comprima cuando el título es largo. */
.wap-area .wap-curso .wap-video-row__icon,
.wap-area .wap-curso .wap-resource-row__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
background: none;
/* Lección/recurso CON URL = icono a plena opacidad. Declarado de forma EXPLÍCITA
(v1.3.2) para que el estado normal no dependa del valor inicial de `opacity` y
quede imposible que la atenuación de `is-unavailable` se filtre a una fila
activa: esa regla es (0,4,0) y solo aplica con la clase `is-unavailable`. */
opacity: 1;
transition: transform var(--wap-t) var(--wap-ease), filter var(--wap-t) var(--wap-ease);
will-change: transform;
}
.wap-area .wap-curso .wap-video-row__icon { width: clamp(44px, 2.9vw, 56px); }
.wap-area .wap-curso .wap-resource-row__icon { width: clamp(44px, 2.6vw, 50px); }
.wap-area .wap-curso .wap-video-row__icon img,
.wap-area .wap-curso .wap-resource-row__icon img {
display: block;
width: 100%;
height: auto;
max-width: none;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* TEXTO de la fila: título en caja NORMAL + línea secundaria en gris y más
pequeña. `text-transform: none` explícito en ambos: la fila heredaba
`uppercase` del botón del tema (ver causa raíz). */
.wap-area .wap-curso .wap-video-row__body,
.wap-area .wap-curso .wap-resource-row__body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
flex: 1 1 auto;
}
.wap-area .wap-curso .wap-video-row__title,
.wap-area .wap-curso .wap-resource-row__title {
font-family: var(--wap-font);
font-size: var(--wap-h4);
font-weight: 400;
line-height: 1.3;
letter-spacing: normal;
text-transform: none;
color: inherit;
/* Los títulos largos con ® deben poder partir antes que desbordar. */
overflow-wrap: anywhere;
transition: color var(--wap-t) var(--wap-ease);
}
.wap-area .wap-curso .wap-video-row__meta,
.wap-area .wap-curso .wap-resource-row__meta {
font-family: var(--wap-font);
font-size: var(--wap-small);
font-weight: 400;
line-height: 1.35;
letter-spacing: normal;
text-transform: none;
color: var(--wap-gris-medio);
overflow-wrap: anywhere;
}
/* ----------------------------------------------------------------------
* TARJETA DEL CERTIFICADO (panel oscuro del Figma: radio 21px, fondo #2B2424,
* sello 270×71, 3 párrafos y el CTA). Va DEBAJO de la columna de recursos, como
* en el diseño; en una sola columna queda al final de todo (ver responsive).
* -------------------------------------------------------------------- */
.wap-area .wap-cert-card {
background: var(--wap-gris);
border-radius: 21px;
padding: clamp(20px, 1.9vw, 34px) clamp(20px, 2.3vw, 43px) clamp(24px, 2.3vw, 43px);
margin-top: clamp(40px, 5.1vw, 98px);
color: var(--wap-gris-claro);
position: static;
float: none;
min-width: 0;
overflow-wrap: anywhere;
}
.wap-area .wap-cert-card__seal {
width: min(270px, 100%);
height: auto;
display: block;
}
.wap-area .wap-cert-card__text {
font-size: var(--wap-parrafo);
line-height: 1.45;
margin: clamp(16px, 1.3vw, 24px) 0 0;
text-transform: none;
}
.wap-area .wap-cert-card .wap-enviar { margin-top: clamp(20px, 1.7vw, 32px); }
/* ----------------------------------------------------------------------
* Aviso de VISTA PREVIA DE GESTOR (v1.3.0) — discreto y no destructivo.
* -------------------------------------------------------------------- */
.wap-area .wap-preview-note {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin: 0 0 clamp(24px, 2.2vw, 40px);
padding: 10px 16px;
border: 1px dashed rgba(162, 162, 162, .55);
border-radius: 10px;
background: rgba(249, 249, 249, .04);
color: var(--wap-gris-claro);
font-size: var(--wap-small);
line-height: 1.35;
text-transform: none;
}
/* Etiqueta del aviso. `text-transform: none` A PROPÓSITO: en este fichero no queda
ni una sola declaración `text-transform: uppercase`, para que no pueda volver a
filtrarse a un título por herencia o por un selector demasiado amplio. */
.wap-area .wap-preview-note__tag {
font-weight: 600;
color: var(--wap-verde);
text-transform: none;
letter-spacing: .06em;
font-size: 13px;
}
/* ----------------------------------------------------------------------
* Modal / lightbox de vídeo
* -------------------------------------------------------------------- */
html.wap-modal-open { overflow: hidden; }
.wap-modal { position: fixed; inset: 0; z-index: 99999; display: none; align-items: center; justify-content: center; }
.wap-modal.is-open { display: flex; }
.wap-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.85); }
.wap-modal__box { position: relative; width: min(92vw, 960px); }
.wap-modal__frame { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 12px; overflow: hidden; }
.wap-modal__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.wap-modal__close {
position: absolute; top: -46px; right: 0;
background: transparent; border: none; color: #fff;
font-size: 34px; line-height: 1; cursor: pointer;
}
.wap-modal__close:hover { color: var(--wap-verde); }
/* ----------------------------------------------------------------------
* Revelado al hacer scroll (micro-interacción)
* -------------------------------------------------------------------- */
/*
* A PRUEBA DE FALLOS (v1.3.1). El estado OCULTO exige DOS condiciones:
* 1. `.wap-js` en — la pone `assets/wap.js` como primera instrucción.
* 2. que el elemento AÚN no tenga `.is-visible`.
* Si el JS no carga o revienta (basta un error de otro plugin del sitio), no hay
* `.wap-js`, ninguna regla baja la opacidad y el contenido del área se ve SIEMPRE.
* Antes `.wap-reveal { opacity: 0 }` era incondicional: un JS caído dejaba media
* pantalla invisible. NO devuelvas el `opacity: 0` a la regla base.
*
* Sin FOUC: la clase `.wap-reveal` la añade también el propio JS (no está en el
* HTML), así que ambas cosas ocurren en la misma instrucción y nunca hay un
* fotograma con el contenido oculto por CSS y sin observador vigilándolo.
*/
.wap-reveal { transition: opacity .3s ease, transform .3s ease; }
.wap-js .wap-reveal:not(.is-visible) { opacity: 0; transform: translateY(14px); }
.wap-reveal.is-visible { opacity: 1; transform: none; }
/* ----------------------------------------------------------------------
* ACCESIBILIDAD DEL MOVIMIENTO (v1.3.0)
*
* Con `prefers-reduced-motion: reduce` se DESACTIVAN todas las animaciones del
* área, no solo unas cuantas: la regla comodín cubre cualquier transición futura
* sin tener que mantener una lista. Los elementos del revelado por scroll se dejan
* VISIBLES (opacity 1) para que el contenido nunca quede oculto.
* -------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.wap-area *,
.wap-area *::before,
.wap-area *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
}
/* Visible SIEMPRE, sin animación de entrada. Se repite el selector con
`.wap-js … :not(.is-visible)` porque esa regla es (0,3,0) y un simple
`.wap-reveal` (0,1,0) NO la ganaría por especificidad. */
.wap-reveal,
.wap-js .wap-reveal:not(.is-visible) { opacity: 1; transform: none; }
/* Sin movimiento: los hover que desplazaban o escalaban se quedan quietos y el
cambio se comunica solo por color/fondo. */
.wap-area .wap-curso .wap-video-row:hover,
.wap-area .wap-curso .wap-resource-row:hover,
.wap-area .wap-curso .wap-video-row:focus-visible,
.wap-area .wap-curso .wap-resource-row:focus-visible { transform: none; }
.wap-area .wap-curso .wap-video-row:hover .wap-video-row__icon,
.wap-area .wap-curso .wap-resource-row:hover .wap-resource-row__icon,
.wap-area .wap-curso .wap-video-row:focus-visible .wap-video-row__icon,
.wap-area .wap-curso .wap-resource-row:focus-visible .wap-resource-row__icon { transform: none; }
.wap-area .wap-dash .wap-course-card:hover::before,
.wap-area .wap-dash .wap-course-card:focus-visible::before { transform: none; }
.wap-btn--pill:hover,
.wap-btn--primary:hover,
.wap-btn--gray:hover,
.wap-btn--ghost:hover,
.wap-video-hero__btn:hover,
.wap-teaser:hover .wap-teaser__img { transform: none; }
}
/* ======================================================================
* RESPONSIVE — BREAKPOINTS ÚNICOS DEL ÁREA (v1.3.0)
*
* Antes había tres cortes heredados (1279 / 1023 / 719) que no se correspondían
* con ningún tamaño de dispositivo y provocaban saltos de tipografía. Ahora hay
* TRES cortes, coherentes y documentados, y la tipografía NO salta en ninguno
* (escala con `clamp()`, ver los tokens al principio del fichero):
*
* ≥1200px ESCRITORIO. El diseño tal cual: dos columnas Vídeos/Recursos, dos
* tarjetas de curso, 4 pasos en una fila, banner de 420px y los solapes
* del Figma en la pantalla pública.
*
* 900–1199 ESCRITORIO ESTRECHO / TABLET HORIZONTAL. Se MANTIENEN las dos
* columnas (Vídeos/Recursos y las dos tarjetas de curso) pero más
* estrechas y con huecos menores; los 4 pasos pasan a 2×2 y se
* desactivan los solapes de la pantalla pública, que necesitan el
* banner a 420px.
*
* 600–899 TABLET VERTICAL / MÓVIL GRANDE. UNA sola columna en todo:
* 1) Vídeos, 2) Recursos, 3) tarjeta del certificado (ese es el orden
* del DOM, así que se respeta sin reordenar nada). Tarjetas de curso
* apiladas, pasos apilados, pie centrado.
*
* <600px MÓVIL. Lo anterior más: fila superior del banner en columna,
* CTA a todo el ancho, y áreas táctiles garantizadas a 44×44px.
*
* Los tamaños de texto y el alto del banner ya son fluidos, así que estos bloques
* solo cambian ESTRUCTURA (columnas, orden y huecos), nunca tipografía.
* ==================================================================== */
/* --- 900–1199px: dos columnas más estrechas ------------------------- */
@media (max-width: 1199px) {
/* 4 pasos → 2×2 y sin alto mínimo (el texto manda). */
.wap-area .wap-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wap-area .wap-step { min-height: 0; }
/* Las dos columnas siguen, con el hueco ya reducido por `--wap-col-gap`. */
.wap-area .wap-curso .wap-curso__cols { gap: clamp(24px, 3vw, 40px); }
.wap-area .wap-cert-card { margin-top: clamp(32px, 4vw, 56px); }
}
/* --- <900px: UNA columna ------------------------------------------- */
@media (max-width: 899px) {
/* Orden resultante (el del DOM): Vídeos → Recursos → tarjeta del certificado. */
.wap-area .wap-curso .wap-curso__cols { grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 6vw, 48px); }
.wap-area .wap-dash .wap-course-cards { grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 5vw, 40px); }
.wap-area .wap-teasers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.wap-lo__free { flex-direction: column; align-items: flex-start; padding: 32px 28px; margin-top: 40px; }
.wap-lo__free-cta { width: 100%; }
.wap-area .wap-cert-card { margin-top: clamp(28px, 5vw, 48px); }
.wap-footer__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.wap-footer__contact { align-items: center; }
.wap-footer__nav { align-items: center; }
}
/* --- <600px: móvil ------------------------------------------------- */
@media (max-width: 599px) {
.wap-banner__top { grid-template-columns: 1fr; justify-items: center; gap: 14px; }
.wap-header__back,
.wap-header__logout,
.wap-header__login,
.wap-banner__logo { justify-self: center; }
.wap-banner__spacer { display: none; }
.wap-area .wap-steps { grid-template-columns: minmax(0, 1fr); }
.wap-area .wap-teasers { grid-template-columns: minmax(0, 1fr); }
.wap-grid--2 { grid-template-columns: 1fr; gap: 0; }
.wap-enviar__btn { min-width: 0; width: 100%; }
.wap-footer__bottom-inner { justify-content: center; text-align: center; }
.wap-footer__legal { justify-content: center; }
/* Los 36px EXACTOS del Figma son una medida de ESCRITORIO (frame de 1920). En un
teléfono de 360px, "Recibe toda la formación completamente GRATIS" a 36px se
parte en 5 líneas y desborda la tarjeta, así que por debajo de 600px se pasa a
`clamp()`: nunca menos de 24px (legible), nunca más de los 36px pedidos.
Se conserva el `font-weight: 600` heredado del bloque de escritorio. */
.wap-area .wap-lo h2.wap-video-hero__caption,
.wap-area .wap-lo h2.wap-lo__free-title { font-size: clamp(24px, 5.6vw, 36px); }
/* OBJETIVOS TÁCTILES (WCAG 2.5.8): los iconos ya miden 44px por el `clamp()`,
y aquí se garantiza además que la FILA completa —que es el objetivo real que
se pulsa— tenga al menos 44px de alto útil. */
.wap-area .wap-curso .wap-video-row,
.wap-area .wap-curso .wap-resource-row { min-height: 60px; padding-left: 2px; padding-right: 2px; }
.wap-area .wap-curso .wap-video-row__icon,
.wap-area .wap-curso .wap-resource-row__icon { width: 44px; min-width: 44px; min-height: 44px; }
}