/*!
* USE Theme — Templates por defecto (single, archive, page, 404, search).
*
* Mobile-first. Theme-aware: usa los tokens del preset
* (--use-color-bg, --use-color-text, --use-color-primary, etc.)
* que inyecta DesignTokensModule en .
*
* Solo se carga si NO hay plantilla Elementor — el tema toma el
* lienzo y dibuja un layout bonito y legible por defecto.
*
* @package UseTheme
*/
/* ============================================================
1. Token bridge — preset (--use-color-*) → semantic aliases
============================================================ */
:root {
/*
* Cadena de fallbacks por var:
* 1) --use-ecom-* (módulo Ecommerce override por WooCommerce)
* 2) --use-color-* (preset activo del Apariencia tab)
* 3) literal por defecto (para edge cases sin tokens)
*/
--use-accent: var(--use-ecom-accent, var(--use-color-primary, #2563eb));
--use-surface: var(--use-ecom-surface, var(--use-color-surface, #f6f7f9));
--use-surface-soft: var(--use-ecom-secondary, rgba(127,127,127,.08));
--use-text-strong: var(--use-ecom-text, var(--use-color-text, #111827));
--use-text-muted: var(--use-ecom-muted, var(--use-color-muted, #6b7280));
--use-border-soft: var(--use-ecom-border, var(--use-color-border, rgba(17,24,39,0.14)));
--use-gradient: var(--use-ecom-gradient, linear-gradient(135deg, var(--use-accent), #1f2937));
--use-glow: var(--use-ecom-glow, 0 8px 28px rgba(99,102,241,.22));
/* --use-font-heading y --use-font-body ya las emite el preset (Tokens::defaults).
* NO las redefinas aquí o sobreescribirían los valores del preset. */
/* Tipografía editorial (mobile-first; clamp escala con viewport).
* H1 más agresivo para que titulares largos no rompan en móvil. */
--use-fs-display: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
--use-fs-h1: clamp(1.5rem, 1.05rem + 2.4vw, 3rem);
--use-fs-h2: clamp(1.375rem, 1.15rem + 1.2vw, 2.125rem);
--use-fs-h3: clamp(1.2rem, 1.05rem + .6vw, 1.625rem);
--use-fs-lead: clamp(1rem, .95rem + .35vw, 1.25rem);
--use-fs-body: clamp(1rem, .95rem + .25vw, 1.125rem);
--use-fs-sm: .875rem;
--use-fs-xs: .75rem;
/* Espaciado fluido */
--use-space-2xs: .375rem;
--use-space-xs: .625rem;
--use-space-sm: 1rem;
--use-space-md: 1.5rem;
--use-space-lg: clamp(2rem, 1.5rem + 2vw, 3.5rem);
--use-space-xl: clamp(3rem, 2rem + 4vw, 6rem);
/* Radios */
--use-radius-sm: .5rem;
--use-radius-md: .875rem;
--use-radius-lg: 1.25rem;
--use-radius-xl: 1.75rem;
/* Anchos legibles */
--use-prose: 68ch; /* artículos largos */
--use-prose-wide: 78ch; /* listados / hero */
}
/*
* Si el navegador soporta color-mix(), upgradeamos los tokens a
* versiones inteligentes que se mezclan con el accent del preset.
* Los browsers sin soporte conservan los fallbacks rgba() de arriba.
*/
@supports (color: color-mix(in srgb, red, blue)) {
:root {
--use-surface-soft: var(--use-ecom-secondary, color-mix(in srgb, var(--use-text-strong) 4%, transparent));
--use-gradient: var(--use-ecom-gradient, linear-gradient(135deg, var(--use-accent), color-mix(in srgb, var(--use-accent) 50%, #000)));
--use-glow: var(--use-ecom-glow, 0 8px 28px color-mix(in srgb, var(--use-accent) 22%, transparent));
}
}
/*
* Cuando hay preset activo, el body adopta su paleta — la elección
* del usuario en el admin gana sobre prefers-color-scheme. Si no hay
* preset, se respeta el modo claro/oscuro del SO (definido en critical.css).
*/
body {
font-family: var(--use-font-body, system-ui, sans-serif);
background: var(--use-ecom-primary, var(--use-color-bg, #ffffff));
color: var(--use-ecom-text, var(--use-color-text, #111827));
}
a { color: var(--use-accent); }
/*
* Focus-visible — el outline en critical.css usa --use-link (que NO
* sigue el preset por restricción CSS de variables circulares).
* Aquí lo redirigimos al --use-accent para que el indicador de foco
* adopte el color del preset elegido por el usuario.
*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--use-accent);
outline-offset: 2px;
}
/* ============================================================
2. Typography — base editorial, mobile-first
============================================================ */
.use-main h1,
.use-main h2,
.use-main h3,
.use-main h4 {
font-family: var(--use-font-heading);
color: var(--use-text-strong);
letter-spacing: -.015em;
}
.use-main p { color: var(--use-text-strong); }
/* ============================================================
3. Single — post / page con hero + breadcrumb + meta
============================================================ */
/* Breadcrumb */
.use-breadcrumb {
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
margin-bottom: var(--use-space-sm);
}
.use-breadcrumb__list {
display: flex;
flex-wrap: wrap;
gap: .375rem;
list-style: none;
margin: 0;
padding: 0;
}
.use-breadcrumb__item:not(:last-child)::after {
content: '›';
margin-left: .375rem;
color: var(--use-text-muted);
opacity: .6;
}
.use-breadcrumb__item a {
color: inherit;
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color .15s, color .15s;
}
.use-breadcrumb__item a:hover {
color: var(--use-accent);
border-bottom-color: currentColor;
}
.use-breadcrumb__item--current {
color: var(--use-text-strong);
font-weight: 500;
}
/* Article wrapper — usa todo el ancho del container (hasta 1280px).
* Hero, contenido y todo respiran cómodos. */
.use-entry,
.use-page {
max-width: var(--use-article-max, 1200px);
margin-inline: auto;
}
.use-entry__header,
.use-page__header {
margin-bottom: var(--use-space-md);
}
.use-entry__category {
display: inline-block;
font-size: var(--use-fs-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--use-accent);
margin-bottom: var(--use-space-xs);
}
.use-entry__title,
.use-page__title {
font-size: var(--use-fs-h1);
line-height: 1.1;
margin: 0 0 var(--use-space-sm);
font-weight: 800;
}
.use-entry__lead {
font-size: var(--use-fs-lead);
line-height: 1.55;
color: var(--use-text-muted);
margin: 0 0 var(--use-space-md);
}
.use-entry__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
margin: 0 0 var(--use-space-md);
}
.use-entry__avatar { display: inline-flex; }
.use-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--use-border-soft);
}
.use-entry__author-name {
font-weight: 600;
color: var(--use-text-strong);
}
.use-entry__sep { opacity: .5; }
/* Imagen destacada como hero (caso sin overlay, ej. páginas) */
.use-entry__media {
margin: 0 0 var(--use-space-md);
border-radius: var(--use-radius-lg);
overflow: hidden;
box-shadow: 0 12px 32px color-mix(in srgb, var(--use-text-strong) 12%, transparent);
}
.use-entry__media img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* ============================================================
Hero overlay — post con featured image
El contenido (categoría, título, lead, meta) va ENCIMA de la imagen.
Overlay oscuro + backdrop blur para garantizar contraste universal sin
importar la imagen ni el preset. Texto blanco con text-shadow sutil.
============================================================ */
.use-entry__hero {
position: relative;
margin-bottom: var(--use-space-md);
border-radius: var(--use-radius-lg);
overflow: hidden;
min-height: clamp(360px, 60vh, 620px);
display: grid;
box-shadow: 0 16px 40px color-mix(in srgb, var(--use-text-strong) 14%, transparent);
isolation: isolate;
}
.use-entry__hero-bg {
position: absolute; inset: 0;
z-index: 0;
}
.use-entry__hero-bg img {
width: 100%; height: 100%;
display: block;
object-fit: cover;
}
/* Overlay degradado: arriba semi-transparente para dejar ver la imagen,
* abajo denso + blur en la franja de texto. */
.use-entry__hero::before {
content: '';
position: absolute; inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(0,0,0,.15) 0%,
rgba(0,0,0,.35) 45%,
rgba(0,0,0,.78) 100%
);
pointer-events: none;
}
.use-entry__hero::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 55%;
z-index: 1;
backdrop-filter: blur(6px) saturate(120%);
-webkit-backdrop-filter: blur(6px) saturate(120%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
mask-image: linear-gradient(180deg, transparent 0%, #000 35%);
pointer-events: none;
}
.use-entry__hero-content {
position: relative;
z-index: 2;
align-self: end;
padding: clamp(1.25rem, 3vw, 2.5rem);
color: #fff;
max-width: 920px;
text-shadow: 0 1px 14px rgba(0,0,0,.45);
}
.use-entry__hero-category {
display: inline-block;
font-size: var(--use-fs-xs);
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
/* Color del preset (primary) sobre fondo blanco — contraste garantizado en
* cualquier paleta porque todos los primarys son colores saturados. */
color: var(--use-color-primary, #2563eb);
background: #fff;
padding: .35rem .75rem;
border-radius: 999px;
text-decoration: none;
margin-bottom: clamp(.6rem, 1.5vw, 1rem);
text-shadow: none;
box-shadow: 0 2px 12px rgba(0,0,0,.3);
transition: transform .15s;
}
.use-entry__hero-category:hover { transform: translateY(-1px); }
.use-entry__hero-title {
font-size: var(--use-fs-h1);
line-height: 1.05;
font-weight: 800;
margin: 0 0 clamp(.5rem, 1.5vw, .9rem);
color: inherit;
letter-spacing: -.01em;
/* word-wrap inteligente para que titulares largos no rompan feo */
overflow-wrap: break-word;
hyphens: auto;
}
.use-entry__hero-lead {
font-size: var(--use-fs-lead);
line-height: 1.5;
margin: 0 0 clamp(.75rem, 1.8vw, 1.1rem);
color: rgba(255,255,255,.92);
max-width: 65ch;
}
.use-entry__hero-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
font-size: var(--use-fs-sm);
color: rgba(255,255,255,.85);
}
.use-entry__hero-avatar { display: inline-flex; }
.use-entry__hero-avatar .use-avatar {
border-color: rgba(255,255,255,.5);
}
.use-entry__hero-author { font-weight: 600; color: #fff; }
.use-entry__hero-sep { opacity: .6; }
/* Sin soporte de backdrop-filter (Firefox <103) → overlay extra denso */
@supports not (backdrop-filter: blur(6px)) {
.use-entry__hero::before {
background: linear-gradient(
180deg,
rgba(0,0,0,.25) 0%,
rgba(0,0,0,.55) 45%,
rgba(0,0,0,.88) 100%
);
}
.use-entry__hero::after { display: none; }
}
/* Móvil: hero un poco más bajo, padding compactado */
@media (max-width: 560px) {
.use-entry__hero {
min-height: clamp(300px, 75vh, 480px);
border-radius: var(--use-radius-md);
}
}
/* Contenido — usa el ancho completo del article. El padding lateral del
* .use-container ya garantiza respiración en mobile. Si quieres restringir
* la columna de lectura, añade `max-width: var(--use-prose); margin-inline: auto`
* en un override propio. */
.use-entry__content,
.use-page__content {
font-size: var(--use-fs-body);
line-height: 1.7;
padding-top: var(--use-space-md);
}
.use-entry__content > * + *,
.use-page__content > * + * {
margin-top: 1.25em;
}
.use-entry__content h2,
.use-page__content h2 {
font-size: var(--use-fs-h2);
line-height: 1.2;
margin-top: 2em;
margin-bottom: .5em;
font-weight: 700;
}
.use-entry__content h3,
.use-page__content h3 {
font-size: var(--use-fs-h3);
line-height: 1.3;
margin-top: 1.6em;
margin-bottom: .4em;
font-weight: 600;
}
.use-entry__content a,
.use-page__content a {
color: var(--use-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-thickness .15s;
}
.use-entry__content a:hover,
.use-page__content a:hover {
text-decoration-thickness: 2px;
}
.use-entry__content blockquote,
.use-page__content blockquote {
border-left: 4px solid var(--use-accent);
padding: .75rem 1.25rem;
margin-inline: 0;
background: color-mix(in srgb, var(--use-accent) 5%, transparent);
border-radius: 0 var(--use-radius-md) var(--use-radius-md) 0;
font-size: var(--use-fs-lead);
font-style: italic;
color: var(--use-text-strong);
}
.use-entry__content blockquote p:last-child { margin-bottom: 0; }
.use-entry__content code,
.use-page__content code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: .9em;
padding: .15em .4em;
background: var(--use-surface-soft);
border-radius: .35rem;
}
.use-entry__content pre,
.use-page__content pre {
background: var(--use-surface-soft);
padding: 1.25rem;
border-radius: var(--use-radius-md);
overflow: auto;
font-size: .9375rem;
line-height: 1.6;
}
.use-entry__content pre code,
.use-page__content pre code {
padding: 0;
background: transparent;
border-radius: 0;
}
.use-entry__content img,
.use-page__content img {
border-radius: var(--use-radius-md);
height: auto;
}
.use-entry__content figure,
.use-page__content figure {
margin-inline: 0;
}
.use-entry__content figcaption,
.use-page__content figcaption {
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
text-align: center;
margin-top: .5rem;
}
.use-entry__content ul,
.use-entry__content ol,
.use-page__content ul,
.use-page__content ol {
padding-left: 1.5rem;
}
.use-entry__content li + li,
.use-page__content li + li {
margin-top: .375rem;
}
/* Tags al final */
.use-entry__tags {
display: flex;
flex-wrap: wrap;
gap: .375rem;
list-style: none;
padding: 0;
margin: var(--use-space-lg) 0 0;
}
.use-entry__tags li a {
display: inline-flex;
align-items: center;
padding: .35rem .75rem;
background: var(--use-surface-soft);
border: 1px solid var(--use-border-soft);
border-radius: 999px;
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
text-decoration: none;
transition: background .15s, color .15s, border-color .15s;
}
.use-entry__tags li a:hover {
color: var(--use-accent);
border-color: var(--use-accent);
background: color-mix(in srgb, var(--use-accent) 8%, transparent);
}
.use-entry__tags li a::before {
content: '#';
opacity: .5;
margin-right: .15em;
}
/* Footer del entry — autor card */
.use-entry__author {
display: flex;
gap: 1rem;
align-items: flex-start;
padding: var(--use-space-md);
margin-top: var(--use-space-lg);
background: var(--use-surface-soft);
border-radius: var(--use-radius-lg);
border: 1px solid var(--use-border-soft);
}
.use-entry__author .use-avatar {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.use-entry__author-info { flex: 1; min-width: 0; }
.use-entry__author-info strong {
display: block;
font-size: 1rem;
color: var(--use-text-strong);
margin-bottom: .125rem;
}
.use-entry__author-info p {
margin: 0;
color: var(--use-text-muted);
font-size: var(--use-fs-sm);
}
/* ============================================================
4. Archive / Index grid — magazine layout
============================================================ */
.use-archive__header {
max-width: var(--use-prose-wide);
margin: 0 auto var(--use-space-lg);
text-align: center;
padding: var(--use-space-md) 0 0;
}
.use-archive__title {
font-size: var(--use-fs-display);
line-height: 1.05;
font-weight: 800;
letter-spacing: -.02em;
margin: 0 0 var(--use-space-xs);
color: var(--use-accent); /* fallback para navegadores sin background-clip:text */
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
.use-archive__title {
background: var(--use-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.use-archive__title span {
color: var(--use-accent);
font-style: italic;
}
.use-archive__description {
max-width: var(--use-prose);
margin: 0 auto;
color: var(--use-text-muted);
font-size: var(--use-fs-lead);
line-height: 1.55;
}
/* Grid de cards */
.use-archive__list {
display: grid;
grid-template-columns: 1fr;
gap: var(--use-space-md);
margin: 0 auto var(--use-space-lg);
}
/* Card por defecto: stack vertical, mobile-first */
.use-card {
display: flex;
flex-direction: column;
background: var(--use-surface);
border: 1px solid var(--use-border-soft);
border-radius: var(--use-radius-lg);
overflow: hidden;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
position: relative;
isolation: isolate;
/* Reset el padding heredado de layout.css (gutter doble) */
padding: 0;
gap: 0;
}
.use-card:hover {
transform: translateY(-4px);
/* Fallback estático para navegadores sin color-mix() */
box-shadow: 0 16px 40px rgba(0,0,0,.14);
border-color: var(--use-accent);
box-shadow: 0 16px 40px color-mix(in srgb, var(--use-text-strong) 14%, transparent);
border-color: color-mix(in srgb, var(--use-accent) 40%, var(--use-border-soft));
}
/* Media del card */
.use-card__media {
display: block;
position: relative;
/* Coincide con el tamaño 'use-theme-card' (720x480 = 3:2) registrado en setup.php */
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--use-surface-soft);
}
.use-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform .5s ease;
}
.use-card:hover .use-card__media img {
transform: scale(1.05);
}
.use-card__media--placeholder {
background: var(--use-gradient);
display: flex;
align-items: center;
justify-content: center;
}
/*
* Pill de categoría flotando sobre la imagen.
* Background blanco fijo + texto oscuro: garantiza contraste AAA en
* cualquier preset (dark/light) porque la imagen detrás cubre el contraste
* visual contra el preset, y la pill tiene su propia paleta interna.
*/
.use-card__category {
position: absolute;
top: 1rem;
left: 1rem;
display: inline-block;
padding: .35rem .75rem;
background: #ffffff;
color: #1f2937;
font-size: var(--use-fs-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.use-card__media--placeholder .use-card__category {
position: static;
}
/* Body del card */
.use-card__body {
display: flex;
flex-direction: column;
gap: .75rem;
padding: var(--use-space-md);
flex: 1;
}
.use-card__title {
font-size: var(--use-fs-h3);
line-height: 1.25;
font-weight: 700;
margin: 0;
letter-spacing: -.01em;
}
.use-card__title a {
color: var(--use-text-strong);
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 0% 1px;
background-repeat: no-repeat;
background-position: 0 100%;
transition: background-size .3s, color .15s;
}
.use-card__title a:hover {
color: var(--use-accent);
background-size: 100% 1px;
}
/*
* Card excerpt — the_excerpt() envuelve el texto en , así que
* aplicamos line-clamp al
interno (el wrapper solo da color/size).
*/
.use-card__excerpt {
color: var(--use-text-muted);
font-size: var(--use-fs-body);
line-height: 1.6;
flex: 1;
overflow: hidden;
}
.use-card__excerpt p {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.use-card__meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .375rem;
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
margin: 0;
padding-top: .5rem;
border-top: 1px solid var(--use-border-soft);
}
.use-card__sep { opacity: .5; }
.use-card__author { font-weight: 500; }
/* ============================================================
4.b — Blog layouts (grid / list / magazine)
============================================================ */
/* ---------- GRID — default, 2-3 cols + featured horizontal ---------- */
@media (min-width: 768px) {
.use-archive__list--grid {
grid-template-columns: repeat(2, 1fr);
}
.use-archive__list--grid .use-card--featured {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1.2fr 1fr;
align-items: stretch;
}
.use-archive__list--grid .use-card--featured .use-card__media {
aspect-ratio: auto;
min-height: 100%;
}
.use-archive__list--grid .use-card--featured .use-card__title {
font-size: var(--use-fs-h2);
}
.use-archive__list--grid .use-card--featured .use-card__body {
padding: var(--use-space-lg);
justify-content: center;
}
}
@media (min-width: 1024px) {
.use-archive__list--grid {
grid-template-columns: repeat(3, 1fr);
}
.use-archive__list--grid .use-card--featured {
grid-template-columns: 1.5fr 1fr;
}
}
/* ---------- LIST — una columna, card horizontal (imagen izq / texto der) ---------- */
.use-archive__list--list {
grid-template-columns: 1fr;
max-width: var(--use-prose-wide, 960px);
margin-inline: auto;
}
@media (min-width: 640px) {
.use-archive__list--list .use-card {
display: grid;
grid-template-columns: 280px 1fr;
align-items: stretch;
}
.use-archive__list--list .use-card__media {
aspect-ratio: auto;
min-height: 100%;
}
.use-archive__list--list .use-card__title {
font-size: var(--use-fs-h2);
}
.use-archive__list--list .use-card__body {
padding: var(--use-space-lg);
justify-content: center;
}
}
.use-archive__list--list .use-card--featured .use-card__title {
font-size: var(--use-fs-h2);
}
/* ---------- MAGAZINE — hero gigante arriba + cuadrícula compacta abajo ---------- */
.use-archive__list--magazine {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.use-archive__list--magazine {
grid-template-columns: repeat(2, 1fr);
}
.use-archive__list--magazine .use-card--featured {
grid-column: 1 / -1;
}
.use-archive__list--magazine .use-card--featured .use-card__media {
aspect-ratio: 21 / 9;
}
.use-archive__list--magazine .use-card--featured .use-card__title {
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.05;
}
.use-archive__list--magazine .use-card--featured .use-card__body {
padding: var(--use-space-lg);
}
}
@media (min-width: 1024px) {
.use-archive__list--magazine {
grid-template-columns: repeat(4, 1fr);
}
.use-archive__list--magazine .use-card--featured {
grid-column: 1 / -1;
}
.use-archive__list--magazine .use-card:not(.use-card--featured) .use-card__title {
font-size: var(--use-fs-body);
line-height: 1.3;
}
.use-archive__list--magazine .use-card:not(.use-card--featured) .use-card__excerpt {
display: none;
}
.use-archive__list--magazine .use-card:not(.use-card--featured) .use-card__body {
padding: var(--use-space-sm);
gap: .5rem;
}
}
/* ============================================================
5. Empty states — 404, search vacío
============================================================ */
.use-404 {
text-align: center;
max-width: var(--use-prose);
margin-inline: auto;
padding-block: var(--use-space-xl);
}
.use-404__visual {
font-size: clamp(7rem, 5rem + 12vw, 14rem);
font-weight: 900;
line-height: 1;
letter-spacing: -.05em;
color: var(--use-accent); /* fallback */
margin: 0 0 var(--use-space-sm);
user-select: none;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
.use-404__visual {
background: var(--use-gradient);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
.use-404__title {
font-size: var(--use-fs-h1);
font-weight: 800;
margin: 0 0 var(--use-space-xs);
letter-spacing: -.015em;
}
.use-404__description {
color: var(--use-text-muted);
font-size: var(--use-fs-lead);
line-height: 1.55;
margin: 0 auto var(--use-space-md);
max-width: 50ch;
}
.use-404__actions {
display: flex;
flex-wrap: wrap;
gap: .75rem;
justify-content: center;
margin-top: var(--use-space-md);
}
/* Search empty */
.use-empty {
text-align: center;
padding: var(--use-space-lg);
background: var(--use-surface-soft);
border-radius: var(--use-radius-lg);
border: 1px dashed var(--use-border-soft);
margin-block: var(--use-space-md);
}
.use-empty__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 50%;
/* Fallback estático + color-mix con opacidad mayor (20% en vez de 12%)
para garantizar visibilidad en presets dark donde el accent sobre
fondo casi-negro queda invisible al 12%. */
background: rgba(99,102,241,.20);
background: color-mix(in srgb, var(--use-accent) 20%, transparent);
color: var(--use-accent);
margin-bottom: var(--use-space-sm);
font-size: 28px;
}
.use-empty__title {
font-size: var(--use-fs-h3);
font-weight: 700;
margin: 0 0 .375rem;
}
.use-empty__description {
color: var(--use-text-muted);
font-size: var(--use-fs-body);
margin: 0 0 var(--use-space-md);
}
/* Botones / CTA */
.use-button,
.use-button--primary {
display: inline-flex;
align-items: center;
gap: .5rem;
padding: .8rem 1.5rem;
background: var(--use-accent);
color: #fff;
border: 0;
border-radius: 999px;
text-decoration: none;
font: 600 var(--use-fs-body) var(--use-font-body);
cursor: pointer;
line-height: 1.2;
box-shadow: var(--use-glow);
transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}
.use-button:hover {
transform: translateY(-1px);
filter: brightness(1.05);
}
.use-button--ghost {
background: transparent;
color: var(--use-accent);
border: 1px solid var(--use-accent);
box-shadow: none;
}
.use-button--ghost:hover {
background: color-mix(in srgb, var(--use-accent) 8%, transparent);
}
/* Search form bonito */
.use-search {
display: flex;
gap: 0;
align-items: stretch;
max-width: 560px;
margin-inline: auto;
background: var(--use-surface);
border: 2px solid var(--use-border-soft);
border-radius: 999px;
padding: .25rem;
transition: border-color .2s, box-shadow .2s;
}
.use-search:focus-within {
border-color: var(--use-accent);
/* Fallback estático para navegadores sin color-mix() */
box-shadow: 0 0 0 4px rgba(99,102,241,.18);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--use-accent) 15%, transparent);
}
.use-search__input {
flex: 1;
padding: .625rem 1rem;
border: 0;
background: transparent;
color: inherit;
font: inherit;
min-width: 0;
outline: 0;
}
.use-search__submit {
padding: .625rem 1.25rem;
background: var(--use-accent);
color: #fff;
border: 0;
border-radius: 999px;
font: 600 var(--use-fs-sm) var(--use-font-body);
cursor: pointer;
transition: filter .15s;
}
.use-search__submit:hover { filter: brightness(1.05); }
/* ============================================================
6. Comments — selectores reales de WordPress
============================================================ */
#comments,
.comments-area {
max-width: var(--use-prose);
margin: var(--use-space-xl) auto 0;
padding-top: var(--use-space-lg);
border-top: 1px solid var(--use-border-soft);
color: var(--use-text-strong);
}
.comments-title,
.comments-area .comments-title,
#reply-title,
.comment-reply-title {
font-size: var(--use-fs-h3);
font-weight: 700;
margin: 0 0 var(--use-space-md);
color: var(--use-text-strong);
line-height: 1.2;
}
/* ── Lista de comentarios ───────────────────────────────── */
.comment-list,
.commentlist {
list-style: none;
padding: 0;
margin: 0 0 var(--use-space-lg);
display: grid;
gap: var(--use-space-md);
}
.comment-list .children,
.commentlist .children {
list-style: none;
padding-left: 1.25rem;
margin-top: var(--use-space-sm);
display: grid;
gap: var(--use-space-sm);
border-left: 2px solid var(--use-border-soft);
}
.comment-body {
background: var(--use-surface);
border: 1px solid var(--use-border-soft);
border-radius: var(--use-radius-lg);
padding: var(--use-space-md);
}
.comment-author {
display: flex;
align-items: center;
gap: .65rem;
margin-bottom: .5rem;
font-weight: 600;
color: var(--use-text-strong);
}
.comment-author img.avatar {
width: 40px; height: 40px;
border-radius: 50%;
border: 2px solid var(--use-border-soft);
}
.comment-metadata {
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
margin-bottom: .65rem;
}
.comment-metadata a {
color: inherit;
text-decoration: none;
}
.comment-content p {
margin: 0 0 .75em;
color: var(--use-text-strong);
}
.comment-content p:last-child { margin-bottom: 0; }
.reply {
margin-top: .65rem;
}
.comment-reply-link {
display: inline-block;
font-size: var(--use-fs-sm);
font-weight: 600;
color: var(--use-accent);
text-decoration: none;
padding: .35rem .75rem;
border-radius: 999px;
border: 1px solid currentColor;
transition: background .15s, color .15s;
}
.comment-reply-link:hover {
background: var(--use-accent);
color: var(--use-surface);
}
/* ── Formulario de respuesta (compacto) ─────────────────── */
#respond,
.comment-respond {
background: var(--use-surface);
border: 1px solid var(--use-border-soft);
border-radius: var(--use-radius-md);
padding: 1rem 1.25rem .9rem;
margin-top: var(--use-space-md);
}
.comment-notes,
.logged-in-as {
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
margin: 0 0 .6rem;
}
.comment-notes a,
.logged-in-as a { color: var(--use-accent); }
.comment-form {
display: grid;
gap: .55rem;
}
.comment-form p {
margin: 0;
display: flex;
flex-direction: column;
gap: .25rem;
}
.comment-form label {
font-size: var(--use-fs-sm);
font-weight: 600;
color: var(--use-text-strong);
}
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
width: 100%;
font: inherit;
font-size: var(--use-fs-sm);
color: var(--use-text-strong);
background: var(--use-ecom-primary, var(--use-color-bg, #fff));
border: 1px solid var(--use-border-soft);
border-radius: var(--use-radius-sm);
padding: .5rem .7rem;
transition: border-color .15s, box-shadow .15s;
box-sizing: border-box;
}
.comment-form textarea {
min-height: 110px;
resize: vertical;
line-height: 1.5;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
outline: 0;
border-color: var(--use-accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--use-accent) 22%, transparent);
}
.comment-form .comment-form-cookies-consent {
flex-direction: row;
align-items: center;
gap: .5rem;
font-size: var(--use-fs-xs);
color: var(--use-text-muted);
margin-top: .15rem;
}
.comment-form .comment-form-cookies-consent label {
font-weight: 400;
color: inherit;
}
.comment-form .form-submit {
margin-top: .35rem;
align-items: flex-start;
}
.comment-form .submit,
.comment-form input[type="submit"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
min-width: 0;
height: 40px;
padding: 0 1.25rem;
background: var(--use-accent);
color: var(--use-surface);
border: 0;
border-radius: 999px;
font: 600 var(--use-fs-sm) var(--use-font-body);
cursor: pointer;
transition: filter .15s, transform .12s;
}
.comment-form .submit:hover,
.comment-form input[type="submit"]:hover {
filter: brightness(1.06);
transform: translateY(-1px);
}
/* Layout dos columnas en desktop para author + email + url (compacto) */
@media (min-width: 720px) {
.comment-form .comment-form-author,
.comment-form .comment-form-email,
.comment-form .comment-form-url {
display: grid;
grid-template-columns: 120px 1fr;
align-items: center;
gap: .25rem .75rem;
}
.comment-form .comment-form-author label,
.comment-form .comment-form-email label,
.comment-form .comment-form-url label {
margin: 0;
}
}
/* Mensaje "Los comentarios están cerrados" */
.no-comments {
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
font-style: italic;
text-align: center;
padding: var(--use-space-md);
border: 1px dashed var(--use-border-soft);
border-radius: var(--use-radius-md);
}
/* ============================================================
6.b — Post navigation (anterior / siguiente) + page media + wp_link_pages
============================================================ */
.use-postnav {
max-width: var(--use-prose);
margin: var(--use-space-xl) auto 0;
padding-top: var(--use-space-lg);
border-top: 1px solid var(--use-border-soft);
display: grid;
gap: var(--use-space-sm);
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.use-postnav { grid-template-columns: 1fr 1fr; }
}
.use-postnav__link {
display: flex;
flex-direction: column;
gap: .25rem;
padding: var(--use-space-sm) var(--use-space-md);
background: var(--use-surface);
border: 1px solid var(--use-border-soft);
border-radius: var(--use-radius-lg);
text-decoration: none;
color: var(--use-text-strong);
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.use-postnav__link:hover {
border-color: var(--use-accent);
transform: translateY(-2px);
box-shadow: 0 8px 24px color-mix(in srgb, var(--use-text-strong) 10%, transparent);
}
.use-postnav__link--next {
text-align: right;
grid-column: 2;
}
.use-postnav__direction {
font-size: var(--use-fs-xs);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--use-accent);
}
.use-postnav__title {
font-size: var(--use-fs-body);
font-weight: 600;
line-height: 1.3;
}
.use-page__media {
margin: 0 0 var(--use-space-md);
border-radius: var(--use-radius-lg);
overflow: hidden;
max-width: var(--use-prose);
margin-inline: auto;
}
.use-page__media img {
width: 100%;
height: auto;
display: block;
}
.use-entry__pages {
margin-top: var(--use-space-md);
font-size: var(--use-fs-sm);
color: var(--use-text-muted);
display: flex;
flex-wrap: wrap;
gap: .5rem;
align-items: center;
}
.use-entry__pages a {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 32px;
height: 32px;
padding: 0 .5rem;
border-radius: 999px;
border: 1px solid var(--use-border-soft);
text-decoration: none;
color: inherit;
}
.use-entry__pages a:hover {
border-color: var(--use-accent);
color: var(--use-accent);
}
/* ============================================================
7. Pagination — botones compactos pill
============================================================ */
.navigation.pagination,
.use-pagination {
margin: var(--use-space-lg) auto 0;
display: flex;
justify-content: center;
}
.navigation.pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: .25rem;
}
.navigation.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
/* WCAG 2.5.5 + Apple HIG: 44x44 mínimo para tap targets */
min-width: 44px;
height: 44px;
padding: 0 .875rem;
border-radius: 999px;
color: var(--use-text-muted);
text-decoration: none;
font-size: var(--use-fs-sm);
font-weight: 500;
border: 1px solid transparent;
transition: background .15s, color .15s, border-color .15s;
}
.navigation.pagination .page-numbers:hover {
color: var(--use-accent);
border-color: var(--use-accent);
}
.navigation.pagination .page-numbers.current {
background: var(--use-accent);
color: #fff;
font-weight: 700;
}
/* ============================================================
Responsive — desktop refinements
============================================================ */
@media (min-width: 640px) {
.use-entry__media img {
aspect-ratio: 21 / 9;
}
}
/* ============================================================
8. Reduced motion — desactiva animaciones pesadas
============================================================ */
@media (prefers-reduced-motion: reduce) {
.use-card,
.use-card__media img,
.use-card__title a,
.use-button {
transition: none !important;
transform: none !important;
}
.use-card:hover {
transform: none !important;
}
.use-card:hover .use-card__media img {
transform: none !important;
}
}