eyebrow span: text-xs uppercase tracking-[0.3em] text-poly-rose font-semibold sparkle
h2: mt-2 text-3xl text-poly-deep sm:text-4xl (30 → 36px)
sub: mt-2 text-sm text-poly-muted max-w-xl (36rem = 576px)
────────────────────────────────────────────────────────────── */
.polymernai-section-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.polymernai-section-head__title {
margin: 0.5rem 0 0;
font-family: var(--wp--preset--font-family--display);
font-size: 1.875rem;
color: var(--poly-section-title);
font-weight: 600;
line-height: 1.2; /* text-3xl default leading */
letter-spacing: -0.005em;
}
@media (min-width: 640px) {
.polymernai-section-head__title {
font-size: 2.25rem;
line-height: 1.1111; /* text-4xl default leading */
}
}
.polymernai-section-head__sub {
margin: 0.5rem 0 0;
font-size: 0.875rem;
color: var(--poly-section-sub);
max-width: 36rem;
line-height: 1.5;
}
.polymernai-section-head__link {
font-size: 0.875rem;
font-weight: 600;
color: var(--wp--preset--color--poly-rose);
text-decoration: none;
white-space: nowrap;
transition: color 0.15s;
}
/* Astro: el link "Ver todo" está oculto en móvil (hidden sm:inline-block) */
@media (max-width: 639px) {
.polymernai-section-head__link { display: none; }
}
.polymernai-section-head__link:hover {
color: var(--wp--preset--color--poly-magenta);
}
/* ──────────────────────────────────────────────────────────────
Category grid (Explora la tienda)
────────────────────────────────────────────────────────────── */
.polymernai-cat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (min-width: 768px) {
/* Astro: md:grid-cols-3 (768), no sm */
.polymernai-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.polymernai-cat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; }
}
.polymernai-section--categories .polymernai-section-head { margin-bottom: 2rem; } /* mb-8 */
.polymernai-section--kawaii .polymernai-section-head { margin-bottom: 2rem; } /* mb-8 */
.polymernai-section--novedades .polymernai-section-head { margin-bottom: 1.5rem; } /* mb-6 */
.polymernai-section--novedades .polymernai-prod-carousel ul { padding-bottom: 0.5rem; } /* pb-2 reserve scrollbar */
/* Dots del carrusel de productos — Astro: .carousel-dots mt-5 flex gap-2, dot h-2 w-2 blush, activo w-6 rose */
.polymernai-prod-carousel__dots {
margin-top: 1.25rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.polymernai-prod-carousel__dots[hidden] { display: none; }
.polymernai-prod-carousel__dots button {
height: 0.5rem;
width: 0.5rem;
padding: 0;
border: 0;
border-radius: 9999px;
background: var(--wp--preset--color--poly-blush);
cursor: pointer;
transition: all 0.15s;
}
.polymernai-prod-carousel__dots button[data-active="true"] {
width: 1.5rem;
background: var(--wp--preset--color--poly-rose);
}
.polymernai-cat-card {
position: relative;
display: block;
aspect-ratio: 1 / 1;
border-radius: 1.5rem;
overflow: hidden;
box-shadow: 0 6px 20px -8px color-mix( in srgb, var(--poly-shadow-card) 30%, transparent );
outline: 2px solid #fff;
outline-offset: -2px;
transition: transform 0.3s;
}
.polymernai-cat-card:hover { transform: translateY(-4px); }
.polymernai-cat-card img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.polymernai-cat-card:hover img { transform: scale(1.1); }
.polymernai-cat-card__overlay {
position: absolute;
inset: 0;
background: linear-gradient(to top, color-mix( in srgb, var(--poly-cat-overlay) 70%, transparent ) 0%, color-mix( in srgb, var(--poly-cat-overlay) 20%, transparent ) 50%, transparent 100%);
}
.polymernai-cat-card__label {
position: absolute;
bottom: 0.75rem;
left: 0.75rem;
right: 0.75rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.4286; /* text-sm default */
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em; /* tracking-wider matching Astro */
color: #fff;
}
/* Feature section padding (py-14 sm:py-20) */
.polymernai-feature-section {
padding: 3.5rem 0;
}
@media (min-width: 640px) {
.polymernai-feature-section { padding: 5rem 0; }
}
/* Última sección antes del footer: el footer ya aporta su propio margen
superior (6rem), no duplicar con el padding inferior de la sección. */
main > .polymernai-feature-section:last-child { padding-bottom: 0; }
/* ──────────────────────────────────────────────────────────────
Feature grid — Astro: max-w-6xl gap-10 md:grid-cols-3
item: flex col items-center text-center
bubble: h-16 w-16 rounded-full bg-poly-blush text-3xl shadow-sm
h3: mt-5 text-xl text-poly-deep
p: mt-2 text-sm text-poly-muted
────────────────────────────────────────────────────────────── */
.polymernai-feature-grid {
display: grid;
gap: 2.5rem; /* gap-10 = 40px */
grid-template-columns: 1fr;
max-width: 72rem; /* max-w-6xl */
margin: 0 auto;
padding: 0 1rem; /* px-4 */
box-sizing: border-box;
}
@media (min-width: 640px) {
.polymernai-feature-grid { padding-left: 1.5rem; padding-right: 1.5rem; } /* sm:px-6 */
}
@media (min-width: 768px) {
.polymernai-feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.polymernai-feature {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.polymernai-feature__bubble {
width: 4rem; /* h-16 w-16 = 64px */
height: 4rem;
border-radius: 9999px;
background: var(--wp--preset--color--poly-blush);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); /* shadow-sm */
}
.polymernai-feature__bubble {
font-size: 1.875rem; /* text-3xl applied at parent for inheritance */
line-height: 1.2;
}
.polymernai-feature__bubble span {
font-size: 1.875rem; /* text-3xl */
line-height: 1;
}
/* webp icons ya incluyen su propio círculo de fondo */
.polymernai-feature__bubble:has(.polymernai-feature__icon) {
background: transparent;
box-shadow: none;
width: auto;
height: auto;
}
.polymernai-feature__icon {
width: 7rem;
height: 7rem;
object-fit: contain;
}
@media (min-width: 640px) {
.polymernai-feature__icon { width: 8rem; height: 8rem; }
}
.polymernai-feature__title {
margin: 1.25rem 0 0; /* mt-5 = 20px */
font-family: var(--wp--preset--font-family--display);
font-size: 1.25rem; /* text-xl */
line-height: 1.4; /* text-xl default leading */
color: var(--wp--preset--color--poly-deep);
font-weight: 600;
letter-spacing: -0.005em;
}
.polymernai-feature__desc {
margin: 0.5rem 0 0; /* mt-2 = 8px */
font-size: 0.875rem; /* text-sm */
line-height: 1.4286; /* text-sm default leading */
color: var(--wp--preset--color--poly-muted);
}
/* ──────────────────────────────────────────────────────────────
Footer — matches Astro Footer.astro exactly
────────────────────────────────────────────────────────────── */
.polymernai-footer {
border-top: 1px solid var(--wp--preset--color--poly-blush);
background: var(--wp--preset--color--poly-cream);
}
.polymernai-footer__inner {
max-width: 80rem; /* max-w-7xl */
margin: 0 auto;
padding: 2.25rem 1.25rem; /* mobile compacto */
box-sizing: border-box;
line-height: 1.5;
}
@media (min-width: 640px) {
.polymernai-footer__inner { padding: 3.5rem 1.5rem; } /* py-14 sm:px-6 */
}
.polymernai-footer__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 cols mobile pa Catálogo+Info */
gap: 2rem 1.25rem;
}
/* brand (1ra) y contacto (4ta) full-width en mobile */
.polymernai-footer__col:first-child,
.polymernai-footer__col:last-child { grid-column: 1 / -1; }
@media (min-width: 1024px) {
.polymernai-footer__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3rem; }
.polymernai-footer__col:first-child,
.polymernai-footer__col:last-child { grid-column: auto; }
}
.polymernai-footer__logo img {
height: 3.5rem; /* h-14 */
width: auto;
display: block;
}
.polymernai-footer__tagline {
margin: 1rem 0 0;
max-width: 20rem; /* max-w-xs */
font-size: 0.875rem;
line-height: 1.625; /* leading-relaxed */
color: var(--wp--preset--color--poly-muted);
}
.polymernai-footer__contact-text {
/* Astro: text-sm leading-relaxed text-poly-muted — sin max-width ni margin-top */
margin: 0;
font-size: 0.875rem;
line-height: 1.625;
color: var(--wp--preset--color--poly-muted);
}
.polymernai-footer__social {
margin-top: 1.25rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.polymernai-footer__social a {
color: var(--wp--preset--color--poly-muted);
transition: color 0.15s;
display: inline-flex;
text-decoration: none;
}
.polymernai-footer__social a:hover { color: var(--wp--preset--color--poly-rose); }
.polymernai-footer__title {
margin: 0 0 1rem;
/* Astro footer h3 inherits global h3: Fredoka 600, ls -0.005em */
font-family: var(--wp--preset--font-family--display);
font-size: 0.875rem; /* text-sm */
line-height: 1.4286; /* text-sm default */
font-weight: 600;
text-transform: uppercase;
letter-spacing: -0.005em;
color: var(--wp--preset--color--poly-ink);
}
.polymernai-footer__list {
list-style: none;
margin: 0;
padding: 0;
font-size: 0.875rem;
line-height: 1.4286;
}
.polymernai-footer__list li + li { margin-top: 0.5rem; } /* space-y-2 */
.polymernai-footer__list li { font-size: 0.875rem; line-height: 1.4286; }
.polymernai-footer__list a {
color: var(--wp--preset--color--poly-muted);
text-decoration: none;
font-size: 0.875rem;
line-height: 1.4286;
transition: color 0.15s;
}
.polymernai-footer__list a:hover { color: var(--wp--preset--color--poly-rose); }
.polymernai-footer__email {
display: inline-block;
margin-top: 0.75rem;
color: var(--wp--preset--color--poly-rose);
text-decoration: underline;
text-underline-offset: 4px;
font-size: 0.875rem;
line-height: 1.4286;
font-weight: 500;
}
.polymernai-footer__email:hover { color: var(--wp--preset--color--poly-magenta); }
.polymernai-footer__bottom {
margin-top: 3rem; /* mt-12 */
display: flex;
flex-direction: column;
gap: 0.75rem;
border-top: 1px solid var(--wp--preset--color--poly-blush);
padding-top: 1.5rem; /* pt-6 */
font-size: 0.75rem; /* text-xs */
line-height: 1.3333; /* text-xs default */
color: var(--wp--preset--color--poly-muted);
}
@media (min-width: 640px) {
.polymernai-footer__bottom { flex-direction: row; justify-content: space-between; }
}
.polymernai-footer__bottom p { margin: 0; }
/* ──────────────────────────────────────────────────────────────
Newsletter (pre-footer band)
────────────────────────────────────────────────────────────── */
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
position: absolute !important;
word-wrap: normal !important;
}
.polymernai-newsletter {
background: linear-gradient(135deg, var(--wp--preset--color--poly-blush) 0%, var(--wp--preset--color--poly-cream) 100%);
border-top: 1px solid var(--wp--preset--color--poly-blush);
}
.polymernai-newsletter__inner {
max-width: 1152px;
margin: 0 auto;
padding: 2.75rem 1.25rem;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: center;
text-align: center;
}
@media (min-width: 880px) {
.polymernai-newsletter__inner {
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
gap: 4rem;
padding: 3rem 1.5rem;
text-align: left;
}
}
.polymernai-newsletter__main {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: 100%;
}
@media (min-width: 880px) {
.polymernai-newsletter__main { align-items: flex-start; text-align: left; }
}
.polymernai-newsletter__copy { max-width: 38rem; }
/* Icono badge + eyebrow centrados; el resto del copy queda a la izquierda */
.polymernai-newsletter__icon {
display: block;
width: 96px;
height: 96px;
margin: 0 auto 0.5rem;
}
.polymernai-newsletter__copy .polymernai-eyebrow {
display: block;
text-align: center;
margin-bottom: 0.375rem !important;
color: var(--wp--preset--color--poly-magenta);
}
.polymernai-newsletter__title {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.25rem);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--wp--preset--color--poly-deep);
}
.polymernai-newsletter__text {
margin: 0.5rem 0 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--wp--preset--color--poly-ink);
}
.polymernai-newsletter__form {
display: flex;
flex-direction: column;
gap: 0.625rem;
width: 100%;
max-width: 26rem;
}
@media (min-width: 480px) {
.polymernai-newsletter__form { flex-direction: row; }
}
.polymernai-newsletter__input {
flex: 1 1 auto;
min-width: 0;
padding: 0.75rem 1rem;
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 999px;
background: var(--wp--preset--color--white);
color: var(--wp--preset--color--poly-ink);
font-size: 0.9375rem;
line-height: 1.4;
}
.polymernai-newsletter__input::placeholder { color: var(--wp--preset--color--poly-muted); }
.polymernai-newsletter__input:focus-visible {
outline: 2px solid var(--wp--preset--color--poly-rose);
outline-offset: 1px;
}
.polymernai-newsletter__input:disabled { opacity: 0.6; cursor: not-allowed; }
.polymernai-newsletter__button {
flex: 0 0 auto;
padding: 0.75rem 1.5rem;
border: 0;
border-radius: 999px;
background: var(--wp--preset--color--poly-rose);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--display);
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.polymernai-newsletter__button:hover { background: var(--wp--preset--color--poly-magenta); }
.polymernai-newsletter__button:active { transform: translateY(1px); }
.polymernai-newsletter__button:disabled {
background: var(--wp--preset--color--poly-muted);
cursor: not-allowed;
opacity: 0.7;
}
.polymernai-newsletter__discount {
margin: 0;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--wp--preset--color--poly-ink);
}
.polymernai-newsletter__discount strong { color: var(--wp--preset--color--poly-magenta); }
/* Perks: subhead + lista compacta (icono + texto al lado) */
.polymernai-newsletter__perks {
width: 100%;
max-width: 30rem;
}
.polymernai-newsletter__perks-title {
margin: 0 0 1rem;
font-family: var(--wp--preset--font-family--display);
font-size: 1rem;
font-weight: 600;
color: var(--wp--preset--color--poly-deep);
text-align: left;
}
.polymernai-newsletter__cards {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.polymernai-newsletter__card {
display: flex;
align-items: flex-start;
gap: 0.875rem;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(255, 255, 255, 0.8);
border-radius: 16px;
padding: 0.875rem 1rem;
text-align: left;
}
.polymernai-newsletter__card-icon {
flex: 0 0 auto;
width: 64px;
height: 64px;
margin-top: 0.0625rem;
}
.polymernai-newsletter__card-title {
margin: 0 0 0.125rem;
font-family: var(--wp--preset--font-family--display);
font-size: 0.9375rem;
font-weight: 600;
color: var(--wp--preset--color--poly-deep);
}
.polymernai-newsletter__card-text {
margin: 0;
font-size: 0.8125rem;
line-height: 1.45;
color: var(--wp--preset--color--poly-ink);
}
.polymernai-newsletter__notice {
flex-basis: 100%;
margin: 0;
font-size: 0.75rem;
line-height: 1.4;
color: var(--wp--preset--color--poly-deep);
background: rgba(255, 255, 255, 0.55);
border-radius: 0.5rem;
padding: 0.5rem 0.75rem;
}
/* ──────────────────────────────────────────────────────────────
NEWSLETTER — ventana emergente (inc/newsletter.php)
────────────────────────────────────────────────────────────── */
.polymernai-nlmodal {
position: fixed;
inset: 0;
/* Por encima del header sticky y del menú móvil, por debajo de la barra de admin. */
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
opacity: 0;
visibility: hidden;
transition: opacity 0.25s ease, visibility 0.25s ease;
}
.polymernai-nlmodal[hidden] { display: none; }
.polymernai-nlmodal.is-open { opacity: 1; visibility: visible; }
.polymernai-nlmodal__backdrop {
position: absolute;
inset: 0;
background: color-mix( in srgb, var(--poly-nlmodal-veil) 68%, transparent );
backdrop-filter: blur(2px);
}
.polymernai-nlmodal__dialog {
position: relative;
width: 100%;
max-width: 30rem;
max-height: calc(100dvh - 2.5rem);
overflow-y: auto;
box-sizing: border-box;
padding: 2rem 1.5rem 1.5rem;
text-align: center;
background: linear-gradient(135deg, var(--poly-nlmodal-bg-start) 0%, var(--poly-nlmodal-bg-end) 100%);
border: 1px solid var(--poly-nlmodal-bg-start);
border-radius: var(--poly-radius);
box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.35);
transform: translateY(12px) scale(0.98);
transition: transform 0.25s ease;
}
.polymernai-nlmodal.is-open .polymernai-nlmodal__dialog { transform: none; }
@media (prefers-reduced-motion: reduce) {
.polymernai-nlmodal,
.polymernai-nlmodal__dialog { transition: none; }
.polymernai-nlmodal__dialog { transform: none; }
}
.polymernai-nlmodal__close {
position: absolute;
top: 0.5rem;
right: 0.75rem;
width: 2rem;
height: 2rem;
padding: 0;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--wp--preset--color--poly-deep);
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
transition: background 0.15s;
}
.polymernai-nlmodal__close:hover { background: rgba(255, 255, 255, 0.6); }
.polymernai-nlmodal .polymernai-eyebrow {
display: block;
margin-bottom: 0.375rem !important;
color: var(--wp--preset--color--poly-magenta);
}
.polymernai-nlmodal__title {
margin: 0;
font-family: var(--wp--preset--font-family--display);
font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.85rem);
line-height: 1.15;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--poly-nlmodal-title);
}
.polymernai-nlmodal__text {
margin: 0.5rem 0 0;
font-size: 0.9375rem;
line-height: 1.5;
color: var(--poly-nlmodal-text);
}
/* Imagen grande opcional, entre el texto y el formulario. La elige la tienda
desde el Personalizador, así que puede venir con cualquier proporción: se
recorta a un apaisado fijo para que el modal no cambie de alto según la foto. */
.polymernai-nlmodal__banner {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
max-height: 14rem;
margin: 1.25rem 0 0;
border-radius: 1rem;
object-fit: cover;
}
/* Fila del formulario: el icono a la izquierda del campo de correo, cuadrado y
exactamente del alto del campo.
La medida se calcula igual que la del input (padding 0.75rem × 2 + borde 1px
× 2 + línea 1.4 × 0.9375rem = 47px) en vez de dejar que el icono se estire:
como es una imagen, «stretch» hace que sean sus píxeles nativos los que
marquen el alto de la fila entera. */
.polymernai-nlmodal__row {
--poly-nlmodal-field: calc(1.5rem + 2px + 1.3125rem);
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1.25rem;
}
.polymernai-nlmodal__icon {
flex: 0 0 auto;
width: var(--poly-nlmodal-field);
height: var(--poly-nlmodal-field);
object-fit: contain;
}
.polymernai-nlmodal__form {
flex: 1 1 auto;
min-width: 0;
max-width: none;
}
/* Por debajo de 480px el form se apila (input sobre botón). Sin esto el icono
se centraría respecto a la columna entera y quedaría flotando entre los dos;
alineado arriba acompaña al campo de correo, que es lo que ilustra. */
@media (max-width: 479px) {
.polymernai-nlmodal__row { align-items: flex-start; }
}
.polymernai-nlmodal__discount {
margin: 0.75rem 0 0;
font-size: 0.8125rem;
line-height: 1.4;
color: var(--poly-nlmodal-text);
}
.polymernai-nlmodal__discount strong { color: var(--wp--preset--color--poly-magenta); }
.polymernai-nlmodal__dismiss {
margin: 1rem 0 0;
padding: 0.25rem 0.5rem;
border: 0;
background: transparent;
color: var(--wp--preset--color--poly-muted);
font-size: 0.8125rem;
text-decoration: underline;
cursor: pointer;
}
.polymernai-nlmodal__dismiss:hover { color: var(--wp--preset--color--poly-deep); }
/* Con el modal abierto el fondo no se mueve (y en iOS no rebota). */
body.polymernai-nlmodal-open { overflow: hidden; }
/* ──────────────────────────────────────────────────────────────
Artist photo
────────────────────────────────────────────────────────────── */
.polymernai-artist-photo img {
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 2rem;
box-shadow: 0 0 0 4px #fff, 0 12px 35px -10px rgba(232,122,167,0.3);
}
/* Artist summary section — Astro: py-16 sm:py-20 (64/80px), gradient bg full bleed */
.polymernai-artist-summary {
padding: 4rem 1rem;
}
@media (min-width: 640px) {
.polymernai-artist-summary { padding: 5rem 1.5rem; }
}
.polymernai-artist-summary__cols { gap: 2.5rem !important; } /* gap-10 en todos los tamaños */
@media (max-width: 1023px) {
/* Astro: text-center + justify-center por debajo de lg */
.polymernai-artist-summary__col-text { text-align: center; }
.polymernai-artist-summary__col-text .wp-block-buttons { justify-content: center; }
}
@media (min-width: 1024px) {
.polymernai-artist-summary__col-photo { flex-basis: 0 !important; flex-grow: 1 !important; }
.polymernai-artist-summary__col-text { flex-basis: 0 !important; flex-grow: 1.2 !important; }
}
/* Astro: h2 text-3xl sm:text-4xl (sin clamp fluido) */
.polymernai-artist-summary h2 {
font-size: 1.875rem !important;
line-height: 1.2 !important;
}
@media (min-width: 640px) {
.polymernai-artist-summary h2 {
font-size: 2.25rem !important;
line-height: 1.1111 !important;
}
}
/* Astro: space-y-4 (16px) entre hijos; el eyebrow inline solo deja 8px hasta el h2;
botones con pt-2 extra (24px) */
.polymernai-artist-summary__col-text > * + * { margin-top: 1rem !important; }
.polymernai-artist-summary__col-text > h2 { margin-top: 0 !important; } /* Astro: h2 arranca a y=24 */
.polymernai-artist-summary__col-text > .wp-block-buttons { margin-top: 1.5rem !important; }
/* Astro: p1 text-base lg:text-lg leading-relaxed; p2 text-sm lh default */
.polymernai-artist-summary__col-text > p.has-poly-ink-color {
font-size: 1rem !important;
line-height: 1.625 !important;
}
@media (min-width: 1024px) {
.polymernai-artist-summary__col-text > p.has-poly-ink-color {
font-size: 1.125rem !important;
}
}
.polymernai-artist-summary__col-text > p.has-poly-muted-color {
font-size: 0.875rem !important;
line-height: 1.4286 !important;
}
/* Astro: btn-primary 44px (px-6 py-3 text-sm), btn-outline 48px (border-2); gap-3 */
.polymernai-artist-summary .wp-block-buttons { gap: 0.75rem !important; }
.polymernai-artist-summary .wp-block-button__link {
box-sizing: border-box;
border: 0;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
line-height: 1.4286;
font-weight: 600;
letter-spacing: 0.025em;
border-radius: 9999px;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.polymernai-artist-summary .is-style-outline .wp-block-button__link {
border: 2px solid var(--wp--preset--color--poly-rose);
}
.polymernai-summary-photo {
position: relative;
max-width: 20rem; /* max-w-xs = 320px */
margin: 0 auto;
}
@media (min-width: 1024px) {
.polymernai-summary-photo { max-width: none; }
}
.polymernai-summary-photo::before {
content: "";
position: absolute;
inset: -0.5rem; /* -inset-2 */
border-radius: 2rem; /* rounded-[2rem] */
/* background: rgba(244, 168, 196, 0.4); */ /* poly-pink/40 — glow desactivado */
filter: blur(32px); /* blur-2xl */
z-index: 0;
}
.polymernai-summary-photo img {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
border-radius: 2rem; /* rounded-[2rem] */
object-fit: cover;
display: block;
z-index: 1;
}
/* ──────────────────────────────────────────────────────────────
About page sections (Sobre la artista)
────────────────────────────────────────────────────────────── */
.polymernai-discipline-chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin: 1.5rem 0 0; /* space-y-6 */
}
/* Astro: rounded-full bg-white px-3 py-1 text-xs font-medium shadow-sm ring-1 ring-poly-blush → h=24 */
.polymernai-discipline-chips span {
background: #fff;
color: var(--wp--preset--color--poly-magenta);
box-shadow: inset 0 0 0 1px var(--wp--preset--color--poly-blush), 0 1px 2px rgba(0,0,0,0.05);
border-radius: 9999px;
padding: 0.25rem 0.75rem; /* px-3 py-1 */
font-size: 0.75rem;
line-height: 1.3333;
font-weight: 500;
}
.polymernai-quick-facts {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.75rem;
margin: 1.5rem 0 0; /* space-y-6 */
}
/* Astro: rounded-2xl border blush bg-white/70 p-3 text-sm */
.polymernai-quick-facts > div {
background: rgba(255, 255, 255, 0.7);
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 1rem;
padding: 0.75rem; /* p-3 */
font-size: 0.875rem;
line-height: 1.4286;
box-sizing: border-box;
}
.polymernai-quick-facts dt {
font-size: 0.625rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--wp--preset--color--poly-rose);
font-weight: 700;
margin-bottom: 0.25rem;
}
.polymernai-quick-facts dd {
color: var(--wp--preset--color--poly-ink);
margin: 0;
font-size: 0.875rem;
}
.polymernai-social-row {
display: flex;
flex-wrap: wrap;
gap: 0.75rem; /* gap-3 */
align-items: center;
margin-top: 1.5rem; /* space-y-6 */
}
.polymernai-social-row__label {
color: var(--wp--preset--color--poly-muted);
font-size: 0.875rem;
margin-right: 0.25rem;
}
/* Astro: rounded-full bg-white px-3 py-1.5 shadow-sm ring-1 ring-blush → h=32 */
.polymernai-social-pill {
display: inline-flex;
align-items: center;
gap: 0.375rem;
background: #fff;
color: var(--wp--preset--color--poly-magenta);
box-shadow: inset 0 0 0 1px var(--wp--preset--color--poly-blush), 0 1px 2px rgba(0,0,0,0.05);
border-radius: 9999px;
padding: 0.375rem 0.75rem; /* px-3 py-1.5 */
font-size: 0.875rem;
line-height: 1.4286;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.polymernai-social-pill:hover {
background: var(--wp--preset--color--poly-pink);
color: #fff;
}
.polymernai-social-pill--primary {
background: var(--wp--preset--color--poly-rose);
color: #fff !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.polymernai-social-pill--primary:hover {
background: var(--wp--preset--color--poly-magenta);
}
.polymernai-process-cards {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tailwind grid-cols-3 */
gap: 0.75rem;
margin-top: 1.25rem; /* space-y-5 */
padding-top: 0.5rem; /* pt-2 */
}
.polymernai-process-card {
background: var(--wp--preset--color--poly-cream);
border-radius: 1rem;
padding: 1rem;
text-align: center;
}
.polymernai-process-card > * { margin-block-start: 0 !important; } /* sin block-gap de WP */
.polymernai-process-card > .polymernai-process-card__label { margin-block-start: 0.25rem !important; }
.polymernai-process-card__icon {
font-size: 1.5rem;
line-height: 1.3333; /* text-2xl → 32px */
}
.polymernai-process-card__label {
margin-top: 0.25rem;
font-size: 0.75rem;
line-height: 1.3333; /* text-xs → 16px */
font-weight: 600; /* font-semibold */
text-transform: uppercase;
letter-spacing: 0.05em; /* tracking-wider */
color: var(--wp--preset--color--poly-magenta);
overflow-wrap: normal; /* Astro no parte "Producción" */
word-break: normal;
}
.polymernai-process-card__sub {
font-size: 0.6875rem;
line-height: 1.5; /* text-[11px] → 16.5px */
color: var(--wp--preset--color--poly-muted);
}
.polymernai-create-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 2.5rem; /* mb-10 del head */
}
@media (min-width: 1024px) {
.polymernai-create-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.polymernai-create-card {
background: #fff;
border-radius: 1.5rem;
padding: 1.25rem;
border: 0;
box-shadow: 0 0 0 1px var(--wp--preset--color--poly-blush); /* Astro: ring-1 ring-poly-blush */
box-sizing: border-box;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
display: block;
}
.polymernai-create-card:hover {
transform: translateY(-4px);
box-shadow: 0 0 0 1px var(--wp--preset--color--poly-blush), 0 8px 20px -6px color-mix( in srgb, var(--poly-shadow-card) 25%, transparent );
}
.polymernai-create-card__icon {
font-size: 1.875rem;
line-height: 1.2; /* text-3xl → 36px */
}
.polymernai-create-card h3 {
font-size: 1rem;
line-height: 1.5; /* text-base → 24px */
margin: 0.75rem 0 0;
color: var(--wp--preset--color--poly-deep);
}
.polymernai-create-card:hover h3 {
color: var(--wp--preset--color--poly-rose);
}
.polymernai-create-card p {
font-size: 0.75rem;
line-height: 1.3333; /* text-xs → 16px */
color: var(--wp--preset--color--poly-muted);
margin: 0.25rem 0 0; /* mt-1 */
}
/* Astro: eyebrow inline en línea de 24 + h2 mt-2 → con eyebrow en block (16px) son 16px de mt */
.polymernai-about-section > h2 { margin-top: 1rem !important; }
/* CTA gradiente (about/contacto) — Astro: p mt-3 lh 1.5, botones mt-6 gap-3,
primary 44px (px-6 py-3 text-sm), outline 48px (border-2) */
.has-poly-cta-gradient-background h2 + p {
margin-top: 0.75rem !important;
line-height: 1.5 !important;
}
.has-poly-cta-gradient-background .wp-block-buttons {
margin-top: 1.5rem !important;
gap: 0.75rem !important;
}
.has-poly-cta-gradient-background h2 { color: #fff !important; }
.has-poly-cta-gradient-background h2 + p { color: rgba(255, 255, 255, 0.9) !important; }
.has-poly-cta-gradient-background .wp-block-button__link {
box-sizing: border-box;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
line-height: 1.4286;
font-weight: 600;
letter-spacing: normal; /* Astro: sin tracking en los botones del CTA */
border-radius: 9999px;
background: #fff !important;
color: var(--wp--preset--color--poly-magenta) !important;
box-shadow: none;
}
.has-poly-cta-gradient-background .wp-block-button__link:hover {
background: var(--wp--preset--color--poly-cream) !important;
}
.has-poly-cta-gradient-background .is-style-outline .wp-block-button__link {
border: 2px solid #fff;
background: transparent !important;
color: #fff !important;
}
.has-poly-cta-gradient-background .is-style-outline .wp-block-button__link:hover {
background: #fff !important;
color: var(--wp--preset--color--poly-magenta) !important;
}
/* ──────────────────────────────────────────────────────────────
Quote simple (Sobre la artista)
────────────────────────────────────────────────────────────── */
.polymernai-quote {
margin: 0 auto;
max-width: 45rem;
text-align: center;
}
.polymernai-quote__mark {
display: block;
font-family: Georgia, "Times New Roman", serif;
font-size: 3rem;
line-height: 1;
color: var(--wp--preset--color--poly-pink);
margin: 0 0 1rem;
user-select: none;
}
.polymernai-quote__text {
margin: 0;
font-family: var(--wp--preset--font-family--sans);
font-weight: 400;
font-size: 1.5rem;
line-height: 1.4;
color: var(--wp--preset--color--poly-deep);
quotes: none;
}
@media (min-width: 640px) {
.polymernai-quote__text { font-size: 1.875rem; }
}
.polymernai-quote__sig {
margin-top: 1.5rem;
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--wp--preset--color--poly-rose);
font-weight: 600;
}
/* Ring-1 (box-shadow) en vez de borde real para no sumar altura */
.polymernai-info-card {
border: 0 !important;
box-shadow: 0 0 0 1px var(--wp--preset--color--poly-blush);
height: 100%; /* iguala la altura de las dos cards a la más alta */
}
/* Las columnas estiran al alto de la fila, no se alinean por centro */
.page-sobre-la-artista .wp-block-columns:has(.polymernai-info-card) {
align-items: stretch !important;
}
.page-sobre-la-artista .wp-block-columns:has(.polymernai-info-card) .wp-block-column {
align-self: stretch !important;
display: flex;
flex-direction: column;
}
.polymernai-info-card__head {
display: flex;
gap: 1rem;
align-items: flex-start;
margin-bottom: 1rem;
}
.polymernai-info-card__bubble {
width: 3.5rem;
height: 3.5rem;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 1rem;
font-size: 1.5rem;
box-shadow: 0 4px 12px color-mix( in srgb, var(--poly-shadow-card) 10%, transparent );
flex-shrink: 0;
}
.polymernai-info-card__head h3 {
margin: 0.25rem 0 0;
font-size: 1.5rem;
line-height: 1.3333; /* text-2xl */
color: var(--wp--preset--color--poly-deep);
}
/* Astro info card: eyebrow text-[10px], p mt-5 lh relaxed, ul mt-5 text-sm grid gap-3, link text-sm */
.polymernai-info-card .polymernai-eyebrow {
font-size: 0.625rem;
line-height: 1.5;
}
.polymernai-info-card > p {
margin: 1.25rem 0 0 !important;
line-height: 1.625;
}
.polymernai-info-card > ul {
margin: 1.25rem 0 0 !important;
padding: 0;
list-style: none;
display: grid;
gap: 0.75rem;
font-size: 0.875rem;
line-height: 1.4286;
}
.polymernai-info-card > ul li {
margin: 0;
font-size: 0.875rem;
line-height: 1.4286;
position: relative;
padding-left: 0.875rem; /* dot 6px + gap 8px */
}
.polymernai-info-card > ul li::before {
content: "";
position: absolute;
left: 0;
top: 7px; /* mt-1 sobre lh20 */
width: 6px;
height: 6px;
border-radius: 9999px;
background: var(--wp--preset--color--poly-pink);
}
.polymernai-info-card > p:last-child {
margin-top: 1.5rem !important; /* mt-6 del enlace */
font-size: 0.875rem;
line-height: 1.4286;
}
.polymernai-info-card > p:last-child a {
text-decoration: none; /* Astro: link rose sin subrayado */
font-weight: 600;
}
.polymernai-info-card > p:last-child a:hover { text-decoration: underline; }
/* Botón mail de la card de contacto — Astro: icono 18 + gap-2, w-full en móvil, wrap a 2 líneas */
.polymernai-mail-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.polymernai-mail-btn svg { flex-shrink: 0; }
@media (max-width: 639px) {
.wp-block-button:has(> .polymernai-mail-btn) { width: 100%; }
.polymernai-mail-btn { width: 100%; }
}
/* Astro: el p de la card usa lh base (1.5), no relaxed */
.polymernai-contact-cta p { line-height: 1.5; }
.polymernai-contact-list {
display: grid;
gap: 0.5rem;
margin-top: 1.25rem; /* mt-5 */
}
/* Astro: el emoji va en span text-lg → línea de 28px → fila de 52px */
.polymernai-contact-list a { line-height: 1.75rem; }
.polymernai-contact-list a {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
border: 0;
box-shadow: 0 0 0 1px var(--wp--preset--color--poly-blush); /* Astro: ring-1 */
border-radius: 1rem;
padding: 0.75rem 1rem;
color: var(--wp--preset--color--poly-ink);
text-decoration: none;
transition: background 0.15s, color 0.15s;
font-size: 0.875rem;
font-weight: 500;
}
.polymernai-contact-list a:hover {
background: var(--wp--preset--color--poly-pink);
color: #fff;
}
.polymernai-contact-list a span {
font-size: 0.75rem;
color: var(--wp--preset--color--poly-muted);
}
.polymernai-contact-list a:hover span {
color: rgba(255,255,255,0.8);
}
/* About page — constrain illustration img to max-w-md (448px) */
.page-sobre-la-artista .wp-block-image img {
width: 100%; /* Astro: w-full max-w-md */
height: auto;
max-width: 28rem;
margin: 0 auto;
display: block;
border-radius: 2rem;
object-fit: contain;
position: relative;
z-index: 1;
}
/* Halo lila difuminado detrás de la ilustración (sección "Del dibujo a tu casa") */
.page-sobre-la-artista .polymernai-about-section .wp-block-image {
position: relative;
max-width: 28rem;
margin-left: auto;
margin-right: auto;
}
.page-sobre-la-artista .polymernai-about-section .wp-block-image::before {
content: "";
position: absolute;
inset: -1rem; /* Astro: -inset-4 */
border-radius: 2.5rem;
background: rgba(200, 168, 224, 0.25); /* poly-lilac/25 */
filter: blur(64px); /* Tailwind blur-3xl */
z-index: 0;
pointer-events: none;
}
/* About sections 4 — Astro Shipping has py-16 sm:py-20 = 80px at lg */
@media (min-width: 1024px) {
.page-sobre-la-artista main > div > div:nth-child(4) {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
}
}
/* About hero section — Astro: py-12 sm:px-6 lg:py-16, content max-w-6xl con px-6 → 1104 efectivo */
.polymernai-about-hero {
position: relative;
overflow: hidden; /* contiene los blobs */
padding-top: 3rem !important;
padding-bottom: 3rem !important;
padding-left: 1rem !important;
padding-right: 1rem !important;
/* Base con gradiente diagonal más rico */
background: linear-gradient(135deg,
#fbe1ec 0%,
var(--wp--preset--color--poly-bg) 45%,
var(--wp--preset--color--poly-cream) 100%) !important;
}
/* Aurora 1 — pink arriba a la derecha (-top-20 -right-20 h-72 w-72 bg-poly-pink/30 blur-3xl) */
.polymernai-about-hero::before {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
top: -5rem; /* -top-20 */
right: -5rem; /* -right-20 */
width: 18rem; /* w-72 */
height: 18rem; /* h-72 */
border-radius: 9999px;
background: rgba(244, 168, 196, 0.3); /* poly-pink/30 */
filter: blur(64px); /* blur-3xl */
}
/* Aurora 2 — lila abajo a la izquierda (simétrica) */
.polymernai-about-hero::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
bottom: -5rem;
left: -5rem;
width: 18rem;
height: 18rem;
border-radius: 9999px;
background: rgba(200, 168, 224, 0.3); /* poly-lilac/30 */
filter: blur(64px);
}
/* El contenido debe quedar por encima de las auras */
.polymernai-about-hero > * { position: relative; z-index: 1; }
/* Astro <640: h2 text-3xl (30px) y h1 de pageheader text-4xl (36px);
theme.json los fija a los tamaños sm+ (36/48) */
@media (max-width: 639px) {
/* sin !important: las reglas con clase (p. ej. h2 de contacto a 1.5rem) deben ganar */
h2 { font-size: 1.875rem; line-height: 1.2; }
.polymernai-pageheader h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
.polymernai-pageheader { padding-left: 1rem !important; padding-right: 1rem !important; }
}
/* Astro: secciones del about con py-16 sm:py-20 y px-4 sm:px-6 */
@media (min-width: 640px) {
.polymernai-about-section {
padding-top: 5rem !important;
padding-bottom: 5rem !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
.polymernai-about-quote,
.page-sobre-la-artista .has-poly-cta-gradient-background,
.page-contacto .entry-content > .wp-block-group:not(.polymernai-pageheader) {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
/* Astro: imagen del proceso con altura natural (object-contain, height auto) */
.polymernai-about-section .wp-block-image img { height: auto; }
/* Astro: proceso gap-10 (40px); info cards gap-6 (24px) — apilados hasta lg */
@media (max-width: 1023px) {
.polymernai-about-section .wp-block-columns { gap: 2.5rem !important; }
.polymernai-about-section .wp-block-columns:has(.polymernai-info-card) { gap: 1.5rem !important; }
/* Astro: en el proceso el texto va ANTES que la ilustración (order-1/order-2) */
.polymernai-about-section .wp-block-column:has(.wp-block-image) { order: 2; }
}
/* Astro: space-y-5 en la columna de texto del proceso (h2 pegado al eyebrow) */
.polymernai-about-section .wp-block-column > * + * { margin-top: 1.25rem !important; }
.polymernai-about-section .wp-block-column > h2 { margin-top: 0 !important; } /* Astro: h2 pegado a la línea del eyebrow (24px) */
.polymernai-about-section .wp-block-column > p.has-poly-ink-color { line-height: 1.625 !important; }
.polymernai-about-hero > .wp-block-columns,
.polymernai-about-hero > :where(:not(.alignfull)) {
max-width: 1104px !important;
}
@media (min-width: 1024px) {
.polymernai-about-hero .wp-block-columns { gap: 3.5rem !important; } /* lg:gap-14 */
.polymernai-about-hero .wp-block-column:first-child {
flex-basis: 240px !important; /* lg:w-60 */
flex-grow: 0 !important;
}
}
@media (min-width: 640px) {
.polymernai-about-hero {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
}
}
@media (min-width: 1024px) {
.polymernai-about-hero {
padding-top: 4rem !important;
padding-bottom: 4rem !important;
}
}
.polymernai-about-portrait {
position: relative;
width: 224px; /* Astro: w-56 hasta lg */
max-width: 100%;
margin: 0 auto;
}
@media (min-width: 1024px) {
/* Astro's sticky top-24 leaves the portrait 32px below the column top */
.polymernai-about-portrait { width: 240px; margin-top: 2rem; } /* lg:w-60 */
}
/* Astro: h1 hero text-3xl sm:text-4xl lg:text-5xl */
.polymernai-about-hero h1 {
font-size: 1.875rem !important;
line-height: 1.2 !important;
}
@media (min-width: 640px) {
.polymernai-about-hero h1 { font-size: 2.25rem !important; line-height: 1.1111 !important; }
}
@media (min-width: 1024px) {
.polymernai-about-hero h1 { font-size: 3rem !important; line-height: 1 !important; }
}
/* Astro: p intro mt-3, leading-relaxed; el h1 no lleva mb (el seed lo trae inline) */
.polymernai-about-hero h1 { margin-bottom: 0 !important; }
.polymernai-about-hero h1 + p {
margin-top: 0.75rem !important;
line-height: 1.625 !important;
}
@media (min-width: 1024px) {
.polymernai-about-hero h1 + p { font-size: 1.125rem !important; } /* lg:text-lg */
}
/* Astro apila el hero hasta lg con gap-10 y texto centrado */
@media (max-width: 1023px) {
.polymernai-about-hero .wp-block-columns { gap: 2.5rem !important; }
.polymernai-about-hero .wp-block-column { text-align: center; }
.polymernai-about-hero .polymernai-discipline-chips,
.polymernai-about-hero .polymernai-social-row { justify-content: center; }
}
@media (min-width: 782px) and (max-width: 1023px) {
/* WP des-apila a 782px; Astro mantiene 1 columna hasta 1024 (lg) en el about,
el artist summary de la home y el grid del producto */
.page-sobre-la-artista .wp-block-columns,
.polymernai-artist-summary .wp-block-columns,
.polymernai-single__cols {
flex-wrap: wrap !important;
}
.page-sobre-la-artista .wp-block-columns > .wp-block-column,
.polymernai-artist-summary .wp-block-columns > .wp-block-column,
.polymernai-single__cols > .wp-block-column {
flex-basis: 100% !important;
flex-grow: 1 !important;
}
}
.polymernai-about-portrait__blur {
position: absolute;
inset: -0.5rem;
border-radius: 2.5rem;
background: color-mix( in srgb, var(--poly-hero-blur-left) 40%, transparent );
filter: blur(28px);
z-index: 0;
}
.polymernai-about-portrait img {
position: relative;
z-index: 1;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
border-radius: 2rem;
box-shadow: 0 0 0 4px #fff, 0 16px 40px -10px color-mix( in srgb, var(--poly-shadow-card) 35%, transparent );
display: block;
}
/* Astro: px-4 py-1.5 text-xs shadow-md ring-1 blush → h=28 */
.polymernai-about-portrait__chip {
position: absolute;
z-index: 2;
bottom: -0.75rem;
left: 50%;
transform: translateX(-50%);
background: #fff;
color: var(--wp--preset--color--poly-magenta);
padding: 0.375rem 1rem; /* px-4 py-1.5 */
border-radius: 9999px;
font-size: 0.75rem;
line-height: 1.3333;
font-weight: 600;
letter-spacing: 0.05em; /* tracking-wider */
box-shadow: inset 0 0 0 1px var(--wp--preset--color--poly-blush), 0 4px 6px -1px rgba(0,0,0,0.1);
white-space: nowrap;
}
/* ──────────────────────────────────────────────────────────────
Contact page
────────────────────────────────────────────────────────────── */
.polymernai-contact-block {
background: #fff;
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 1.5rem;
padding: 1.5rem;
margin-top: 1rem;
}
.polymernai-contact-block__label {
font-size: 0.75rem;
line-height: 1.3333; /* text-xs default */
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--wp--preset--color--poly-rose);
font-weight: 700;
margin: 0 0 0.25rem;
}
.polymernai-contact-block__value {
display: block;
font-size: 1.125rem;
line-height: 1.5556; /* text-lg default */
color: var(--wp--preset--color--poly-magenta);
text-decoration: underline;
text-underline-offset: 4px;
}
.polymernai-contact-cta {
box-shadow: 0 4px 20px color-mix( in srgb, var(--poly-shadow-card) 8%, transparent ), 0 0 0 4px #fff;
}
/* Left-column card mirroring the right CTA — equal padding so h2 baseline
aligns with the CTA h3 baseline. */
.polymernai-contact-card {
box-shadow: 0 4px 20px color-mix( in srgb, var(--poly-shadow-card) 6%, transparent ), 0 0 0 4px #fff;
}
/* Email label + link inside the card (no nested card border). */
.polymernai-contact-inline {
margin-top: 1.5rem;
}
/* Social row — compact pill list under the email card */
.polymernai-contact-socials__label {
font-size: 0.75rem;
line-height: 1.3333;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--wp--preset--color--poly-rose);
font-weight: 700;
margin: 1.75rem 0 0.75rem !important;
}
.polymernai-contact-socials {
display: grid;
grid-template-columns: 1fr;
gap: 0.625rem;
}
@media (min-width: 640px) {
.polymernai-contact-socials { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.polymernai-contact-social {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: #fff;
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 9999px;
padding: 0.625rem 1rem;
color: var(--wp--preset--color--poly-ink);
text-decoration: none;
transition: border-color 0.15s, color 0.15s, transform 0.15s, box-shadow 0.15s;
min-width: 0;
}
.polymernai-contact-social:hover {
border-color: var(--wp--preset--color--poly-rose);
color: var(--wp--preset--color--poly-rose);
transform: translateY(-1px);
box-shadow: 0 4px 12px color-mix( in srgb, var(--poly-shadow-card) 15%, transparent );
}
.polymernai-contact-social svg {
flex-shrink: 0;
color: var(--wp--preset--color--poly-rose);
}
.polymernai-contact-social__text {
display: flex;
flex-direction: column;
line-height: 1.2;
min-width: 0;
overflow: hidden;
}
.polymernai-contact-social__name {
font-size: 0.8125rem;
font-weight: 600;
}
.polymernai-contact-social__handle {
font-size: 0.75rem;
color: var(--wp--preset--color--poly-muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Contact section headings — sub-headings under the page h1, not competing
with it. Match h2 and h3 visually for symmetric columns. */
.page-contacto .entry-content h2.wp-block-heading,
.page-contacto .polymernai-contact-cta h3.wp-block-heading {
font-size: 1.375rem !important; /* 22px */
line-height: 1.25 !important;
letter-spacing: -0.005em;
}
@media (min-width: 1024px) {
.page-contacto .entry-content h2.wp-block-heading,
.page-contacto .polymernai-contact-cta h3.wp-block-heading {
font-size: 1.5rem !important; /* 24px */
}
}
/* Tighten vertical breathing — pageheader already has 3.5rem bottom padding,
so the content section doesn't need another 3.5rem on top. */
.page-contacto .entry-content > .wp-block-group:not(.polymernai-pageheader) {
padding-top: 2rem !important;
}
@media (min-width: 1024px) {
.page-contacto .entry-content > .wp-block-group:not(.polymernai-pageheader) {
padding-top: 2.5rem !important;
}
}
/* Astro:
*/
.polymernai-contact-actions {
display: flex;
gap: 0.75rem;
margin-top: 1rem;
}
.polymernai-btn-outline {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border-radius: 9999px;
border: 2px solid var(--wp--preset--color--poly-rose);
padding: 0.75rem 1.5rem; /* px-6 py-3 */
font-size: 0.875rem;
line-height: 1.4286;
font-weight: 600;
letter-spacing: 0.025em; /* tracking-wide */
color: var(--wp--preset--color--poly-rose);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.polymernai-btn-outline:hover {
background: var(--wp--preset--color--poly-rose);
color: #fff;
}
/* ──────────────────────────────────────────────────────────────
Prose (envios long-form) — Astro prose-poly:
p: leading-relaxed text-poly-ink/85
h2: mt-12 mb-4 text-3xl text-poly-magenta
h3: mt-8 mb-3 text-2xl text-poly-rose
a: text-poly-magenta underline underline-offset-4
ul: my-4 list-disc pl-6
────────────────────────────────────────────────────────────── */
/* Override seed inline pad-bottom 5rem to match Astro py-14 (56/56 symmetric) */
.polymernai-prose {
padding-bottom: 3.5rem !important;
}
/* Ancho completo de página (1232px), igual que la cabecera */
.polymernai-prose > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
max-width: 1232px !important;
}
.polymernai-prose p {
line-height: 1.625; /* leading-relaxed */
color: color-mix( in srgb, var(--poly-text-soft) 85%, transparent ); /* poly-ink/85 */
}
.polymernai-prose h2 {
margin-top: 3rem !important; /* mt-12 */
margin-bottom: 1rem !important; /* mb-4 */
font-size: 1.875rem !important; /* text-3xl */
line-height: 1.2 !important; /* text-3xl default leading */
color: var(--wp--preset--color--poly-magenta) !important;
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
}
.polymernai-prose h3 {
margin-top: 2rem; /* mt-8 */
margin-bottom: 0.75rem; /* mb-3 */
font-size: 1.5rem; /* text-2xl */
color: var(--wp--preset--color--poly-rose);
font-family: var(--wp--preset--font-family--display);
font-weight: 600;
}
.polymernai-prose ul {
margin: 1rem auto !important; /* my-4 + centrado del layout constrained */
padding-left: 1.5rem !important; /* pl-6 */
list-style: disc !important;
line-height: 1.5;
}
.polymernai-prose ul li { margin: 0 !important; line-height: 1.5 !important; }
/* Astro prose-poly p has no own margins — spacing comes from h2/h3 margins */
.polymernai-prose > p { margin-top: 0 !important; margin-bottom: 0 !important; line-height: 1.625; }
.polymernai-prose a {
color: var(--wp--preset--color--poly-magenta) !important;
text-decoration: underline !important;
text-underline-offset: 4px !important;
}
.polymernai-prose blockquote {
margin: 1.5rem 0; /* my-6 */
border-left: 4px solid var(--wp--preset--color--poly-pink);
padding-left: 1rem; /* pl-4 */
font-style: italic;
}
.polymernai-prose img {
margin: 2rem 0; /* my-8 */
border-radius: 1rem; /* rounded-2xl */
}
/* PageHeader (eyebrow + h1) — compacto, contenedor 1232px */
.polymernai-pageheader {
text-align: left;
padding-top: 2rem !important;
padding-bottom: 2rem !important;
}
@media (min-width: 1024px) {
.polymernai-pageheader {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}
}
/* Astro: max-w-7xl (1280) box with px-6 → effective content 1232px */
.polymernai-pageheader > h1,
.polymernai-pageheader > p {
max-width: 1232px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
}
.polymernai-pageheader > .polymernai-eyebrow {
max-width: 1232px !important;
width: 100%;
margin-left: auto !important;
margin-right: auto !important;
display: block;
}
.polymernai-pageheader .polymernai-eyebrow {
text-align: left;
/* Astro: span sits in a 24px line box (parent lh 1.5) before h1; WP block is 16px */
margin-bottom: 0.5rem !important;
}
.polymernai-pageheader h1 {
margin-top: 0 !important;
margin-bottom: 0 !important;
font-size: 1.75rem !important; /* compact mobile */
font-family: var(--wp--preset--font-family--display) !important;
font-weight: 600 !important;
color: var(--wp--preset--color--poly-deep) !important;
line-height: 1.2 !important;
letter-spacing: -0.005em;
}
@media (min-width: 640px) {
.polymernai-pageheader h1 { font-size: 2.25rem !important; }
}
@media (min-width: 1024px) {
.polymernai-pageheader h1 { font-size: 2.5rem !important; }
}
.polymernai-pageheader p:not(.polymernai-eyebrow),
.polymernai-pageheader .wp-block-term-description {
margin-top: 0.5rem !important;
margin-left: max(0px, calc((100% - 1232px) / 2)) !important;
margin-right: 0 !important;
font-size: 1rem !important;
line-height: 1.5;
color: color-mix( in srgb, var(--poly-text-soft) 75%, transparent ) !important;
max-width: 36rem !important;
width: auto !important;
}
.polymernai-pageheader .wp-block-term-description p {
color: inherit !important;
font-size: inherit !important;
margin: 0 !important;
}
/* ──────────────────────────────────────────────────────────────
404 — Astro: section py-24, max-w-2xl center, ✿ text-6xl mb-4,
h1 text-5xl, sub mt-3 muted, actions mt-8 gap-3
────────────────────────────────────────────────────────────── */
.polymernai-404__section {
padding: 6rem 0; /* py-24 */
}
.polymernai-404__inner {
max-width: 42rem; /* max-w-2xl */
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
text-align: center;
}
.polymernai-404__flower {
margin: 0 0 1rem; /* mb-4 */
font-size: 3.75rem; /* text-6xl */
line-height: 1;
color: var(--wp--preset--color--poly-ink);
}
.polymernai-404__inner h1 {
margin: 0;
font-size: 3rem; /* text-5xl */
line-height: 1;
font-weight: 600;
font-family: var(--wp--preset--font-family--display);
color: var(--wp--preset--color--poly-deep);
}
.polymernai-404__sub {
margin: 0.75rem 0 0; /* mt-3 */
color: var(--wp--preset--color--poly-muted);
}
.polymernai-404__actions {
margin-top: 2rem; /* mt-8 */
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem; /* gap-3 */
}
/* ──────────────────────────────────────────────────────────────
Search results — grid of vertical cards (mirror product cards)
────────────────────────────────────────────────────────────── */
.polymernai-search-results { padding-inline: 1.5rem; }
@media (max-width: 640px) {
.polymernai-search-results { padding-inline: 1rem; }
}
/* Pageheader on /?s=… — center everything, tighter vertical rhythm */
.polymernai-pageheader--search,
.polymernai-pageheader:has(.polymernai-search-inline) {
text-align: center;
padding-top: 2.25rem !important;
padding-bottom: 1.75rem !important;
overflow: hidden;
}
@media (min-width: 1024px) {
.polymernai-pageheader--search,
.polymernai-pageheader:has(.polymernai-search-inline) {
padding-top: 3rem !important;
padding-bottom: 2.5rem !important;
}
}
.polymernai-pageheader--search .polymernai-eyebrow,
.polymernai-pageheader--search h1,
.polymernai-pageheader:has(.polymernai-search-inline) .polymernai-eyebrow,
.polymernai-pageheader:has(.polymernai-search-inline) h1 { text-align: center !important; }
.polymernai-pageheader--search h1,
.polymernai-pageheader:has(.polymernai-search-inline) h1 {
max-width: 60rem !important;
margin-left: auto !important;
margin-right: auto !important;
margin-top: 0.5rem !important;
overflow-wrap: anywhere;
}
/* Inline search form in pageheader — pill, centered, breathing room */
.polymernai-pageheader .polymernai-search-inline {
max-width: 30rem;
margin-top: 1.5rem !important;
margin-left: auto !important;
margin-right: auto !important;
margin-bottom: 0 !important;
width: 100%;
min-width: 0;
}
.polymernai-pageheader .polymernai-search-inline .wp-block-search__inside-wrapper {
border: 1px solid var(--wp--preset--color--poly-blush);
background: #fff;
border-radius: 9999px;
padding: 0.25rem;
box-shadow: 0 4px 12px rgba(244, 168, 196, 0.15);
}
.polymernai-pageheader .polymernai-search-inline .wp-block-search__input {
border: 0;
background: transparent;
padding: 0.6rem 1.1rem;
font-size: 1rem;
color: var(--wp--preset--color--poly-ink);
outline: none;
min-width: 0;
}
.polymernai-pageheader .polymernai-search-inline .wp-block-search__input::placeholder {
color: rgba(58, 34, 56, 0.45);
}
.polymernai-pageheader .polymernai-search-inline .wp-block-search__button {
border: 0;
background: var(--wp--preset--color--poly-rose);
color: #fff;
border-radius: 9999px;
padding: 0.5rem 0.75rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.15s;
}
.polymernai-pageheader .polymernai-search-inline .wp-block-search__button:hover {
background: var(--wp--preset--color--poly-magenta);
}
.polymernai-pageheader .polymernai-search-inline .wp-block-search__button svg { fill: currentColor; }
/* Grid: 4 / 3 / 2 / 1 columns */
.polymernai-search-grid.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 1024px) {
.polymernai-search-grid.wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
.polymernai-search-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
}
@media (max-width: 480px) {
.polymernai-search-grid.wp-block-post-template { grid-template-columns: 1fr; }
}
/* Card: same chrome as product cards */
.polymernai-search-grid > li {
background: #fff;
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 1.5rem;
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column;
position: relative;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.polymernai-search-grid > li:hover {
transform: translateY(-4px);
box-shadow: 0 20px 25px -5px color-mix( in srgb, var(--poly-card-grid) 20%, transparent ), 0 8px 10px -6px color-mix( in srgb, var(--poly-card-grid) 20%, transparent );
}
/* Stretched link via title (matches product card behavior) */
.polymernai-search-grid .polymernai-card-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.polymernai-search-grid .polymernai-search-card__image,
.polymernai-search-grid .polymernai-card-cat a {
position: relative;
z-index: 2;
}
/* Featured image */
.polymernai-search-grid .polymernai-search-card__image {
margin: 0;
background: var(--wp--preset--color--poly-cream);
overflow: hidden;
}
.polymernai-search-grid .polymernai-search-card__image,
.polymernai-search-grid .polymernai-search-card__image a,
.polymernai-search-grid .polymernai-search-card__image img {
width: 100%;
display: block;
}
.polymernai-search-grid .polymernai-search-card__image img {
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.7s ease;
}
.polymernai-search-grid > li:hover .polymernai-search-card__image img {
transform: scale(1.05);
}
/* Fallback when post has no featured image */
.polymernai-search-grid > li:has(> .polymernai-search-card__image:empty),
.polymernai-search-grid > li:not(:has(> .polymernai-search-card__image)) {
/* card still works; body gets a soft top */
}
.polymernai-search-grid .polymernai-search-card__image:empty {
aspect-ratio: 1 / 1;
background: linear-gradient(135deg, var(--wp--preset--color--poly-cream), var(--wp--preset--color--poly-blush));
}
/* Body */
.polymernai-search-grid .polymernai-card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1.25rem !important;
}
.polymernai-search-grid .polymernai-card-cat {
font-size: 0.625rem !important;
letter-spacing: 0.2em !important;
text-transform: uppercase;
font-weight: 600 !important;
color: var(--wp--preset--color--poly-pink) !important;
margin: 0 !important;
line-height: 1.5;
}
.polymernai-search-grid .polymernai-card-cat a {
color: inherit !important;
text-decoration: none !important;
}
.polymernai-search-grid .polymernai-card-title {
font-family: var(--wp--preset--font-family--display) !important;
font-size: 1rem !important;
line-height: 1.25 !important;
color: var(--wp--preset--color--poly-ink) !important;
margin: 0 !important;
font-weight: 600 !important;
letter-spacing: -0.005em;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 2.5em;
transition: color 0.15s;
}
.polymernai-search-grid .polymernai-card-title a {
color: inherit !important;
text-decoration: none !important;
}
.polymernai-search-grid > li:hover .polymernai-card-title,
.polymernai-search-grid > li:hover .polymernai-card-title a {
color: var(--wp--preset--color--poly-rose) !important;
}
.polymernai-search-card__excerpt,
.polymernai-search-grid .polymernai-search-card__excerpt p {
margin: 0 !important;
font-size: 0.85rem;
line-height: 1.5;
color: var(--wp--preset--color--poly-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.polymernai-search-card__excerpt a.wp-block-post-excerpt__more-link {
display: none;
}
/* Empty state */
.polymernai-search-empty {
padding: 4rem 0;
text-align: center;
color: var(--wp--preset--color--poly-muted);
font-size: 1rem;
}
/* Pagination — light pill buttons */
.polymernai-search-query .wp-block-query-pagination {
gap: 0.5rem;
flex-wrap: wrap;
}
.polymernai-search-query .wp-block-query-pagination-numbers {
display: inline-flex;
gap: 0.35rem;
flex-wrap: wrap;
justify-content: center;
}
.polymernai-search-query .wp-block-query-pagination a,
.polymernai-search-query .wp-block-query-pagination .page-numbers:not(.dots) {
color: var(--wp--preset--color--poly-ink);
text-decoration: none;
padding: 0.45rem 0.85rem;
min-width: 2.4rem;
text-align: center;
border-radius: 9999px;
border: 1px solid var(--wp--preset--color--poly-blush);
background: #fff;
font-size: 0.9rem;
line-height: 1.2;
transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.polymernai-search-query .wp-block-query-pagination a:hover,
.polymernai-search-query .wp-block-query-pagination .page-numbers.current {
background: var(--wp--preset--color--poly-rose);
color: #fff;
border-color: var(--wp--preset--color--poly-rose);
}
.polymernai-search-query .wp-block-query-pagination .page-numbers.dots {
color: var(--wp--preset--color--poly-muted);
padding: 0.45rem 0.25rem;
background: transparent;
border: 0;
}
.polymernai-search-query .wp-block-query-pagination-previous,
.polymernai-search-query .wp-block-query-pagination-next {
font-weight: 600;
}
/* ──────────────────────────────────────────────────────────────
Mobile menu (cuando se abre)
────────────────────────────────────────────────────────────── */
.polymernai-mobile-menu {
display: none;
border-top: 1px solid var(--wp--preset--color--poly-blush);
background: var(--wp--preset--color--poly-cream);
}
.polymernai-mobile-menu.is-open { display: block; }
@media (min-width: 1024px) { .polymernai-mobile-menu { display: none !important; } }
/* ──────────────────────────────────────────────────────────────
Blog (índice de posts) — tarjetas a juego con ProductCard
────────────────────────────────────────────────────────────── */
/* Grid: 3 / 2 / 1 columnas (posts → cards algo más anchas que productos) */
.polymernai-blog-grid.wp-block-post-template {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem; /* gap-6 */
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 1024px) {
.polymernai-blog-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.polymernai-blog-grid.wp-block-post-template { grid-template-columns: 1fr; gap: 1rem; }
}
/* Card chrome — idéntico a la tarjeta de producto */
.polymernai-blog-grid > li.wp-block-post {
background: #fff;
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 1.5rem; /* rounded-3xl */
overflow: hidden;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column;
position: relative;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.polymernai-blog-grid > li.wp-block-post:hover {
transform: translateY(-4px); /* -translate-y-1 */
box-shadow: 0 20px 25px -5px color-mix( in srgb, var(--poly-card-grid) 20%, transparent ), 0 8px 10px -6px color-mix( in srgb, var(--poly-card-grid) 20%, transparent );
}
/* Enlace estirado vía título (igual que las cards de producto) */
.polymernai-blog-grid .polymernai-card-title a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.polymernai-blog-grid .polymernai-card-media,
.polymernai-blog-grid .polymernai-card-cat a {
position: relative;
z-index: 2;
}
/* Imagen destacada — cuadrada, cover, zoom en hover */
.polymernai-blog-grid .polymernai-card-media {
margin: 0 !important;
background: var(--wp--preset--color--poly-cream);
overflow: hidden;
display: block;
}
.polymernai-blog-grid .polymernai-card-media,
.polymernai-blog-grid .polymernai-card-media a,
.polymernai-blog-grid .polymernai-card-media img {
width: 100%;
display: block;
}
.polymernai-blog-grid .polymernai-card-media img {
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.7s ease;
}
.polymernai-blog-grid > li.wp-block-post:hover .polymernai-card-media img {
transform: scale(1.05);
}
/* Fallback cuando el post no tiene imagen destacada */
.polymernai-blog-grid .polymernai-card-media:empty {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, var(--wp--preset--color--poly-cream), var(--wp--preset--color--poly-blush));
}
/* Cuerpo de la card */
.polymernai-blog-grid .polymernai-card-body {
flex: 1 1 auto !important;
display: flex !important;
flex-direction: column !important;
gap: 0.5rem !important; /* gap-2 */
padding: 1.25rem !important; /* p-5 */
}
.polymernai-blog-grid .polymernai-card-cat {
font-size: 0.625rem !important; /* text-[10px] */
letter-spacing: 0.2em !important;
text-transform: uppercase;
font-weight: 600 !important;
color: var(--wp--preset--color--poly-pink) !important;
margin: 0 !important;
line-height: 1.5;
}
.polymernai-blog-grid .polymernai-card-cat a {
color: inherit !important;
text-decoration: none !important;
}
.polymernai-blog-grid .polymernai-card-title {
font-family: var(--wp--preset--font-family--display) !important;
font-size: 1rem !important; /* text-base */
line-height: 1.25 !important; /* leading-tight */
color: var(--wp--preset--color--poly-ink) !important;
margin: 0 !important;
font-weight: 600 !important;
letter-spacing: -0.005em;
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: 2.5em;
transition: color 0.15s;
}
.polymernai-blog-grid .polymernai-card-title a {
color: inherit !important;
text-decoration: none !important;
}
.polymernai-blog-grid > li.wp-block-post:hover .polymernai-card-title,
.polymernai-blog-grid > li.wp-block-post:hover .polymernai-card-title a {
color: var(--wp--preset--color--poly-rose) !important;
}
.polymernai-blog-grid .polymernai-card-excerpt,
.polymernai-blog-grid .polymernai-card-excerpt p {
margin: 0 !important;
font-size: 0.85rem;
line-height: 1.5;
color: var(--wp--preset--color--poly-muted);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.polymernai-blog-grid .polymernai-card-excerpt .wp-block-post-excerpt__more-link { display: none; }
.polymernai-blog-grid .polymernai-card-date {
margin: auto 0 0 !important; /* mt-auto: ancla la fecha abajo */
padding-top: 0.75rem !important;
font-size: 0.7rem !important;
letter-spacing: 0.04em;
color: var(--wp--preset--color--poly-pink) !important;
}
/* Paginación — reutiliza el look de la búsqueda */
.polymernai-blog-query .wp-block-query-pagination {
gap: 0.5rem;
}
.polymernai-blog-query .wp-block-query-pagination a,
.polymernai-blog-query .wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers {
color: var(--wp--preset--color--poly-rose);
text-decoration: none;
font-weight: 600;
}
.polymernai-blog-query .wp-block-query-pagination .page-numbers.current {
color: var(--wp--preset--color--poly-magenta);
}
/* ──────────────────────────────────────────────────────────────
Single post (artículo) — a juego con las páginas (.polymernai-prose)
────────────────────────────────────────────────────────────── */
/* Eyebrow = categoría: el block post-terms es un
con
dentro */
.polymernai-pageheader .polymernai-eyebrow.wp-block-post-terms,
.polymernai-eyebrow.wp-block-post-terms { color: var(--wp--preset--color--poly-rose); }
.polymernai-eyebrow.wp-block-post-terms a {
color: inherit !important;
text-decoration: none !important;
}
.polymernai-eyebrow.wp-block-post-terms a:hover { color: var(--wp--preset--color--poly-magenta) !important; }
/* Meta (fecha · autor) bajo el título — al contenedor 1232 del header, igual que
el eyebrow y el título. La cabecera va a 1232 como en el resto del sitio. */
.polymernai-pageheader .polymernai-article__meta {
max-width: 1232px !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 0.5rem !important;
align-items: center;
}
.polymernai-article__meta * { margin: 0 !important; }
.polymernai-article__date,
.polymernai-article__author,
.polymernai-article__sep {
font-size: 0.8rem !important;
color: var(--wp--preset--color--poly-muted) !important;
font-weight: 500;
line-height: 1.4 !important;
}
.polymernai-article__author a { color: var(--wp--preset--color--poly-rose) !important; text-decoration: none; }
.polymernai-article__sep { color: var(--wp--preset--color--poly-blush) !important; }
/* Imagen destacada — hero ancho (1232, como el resto del sitio) que rompe la
columna de lectura de 720. Banner bajo para que no domine ni recorte tanto. */
.polymernai-article__prose .polymernai-article__media {
max-width: 1232px !important;
width: 100% !important;
margin: 0 auto 3rem !important;
overflow: hidden;
border-radius: 1.5rem;
background: var(--wp--preset--color--poly-cream);
}
.polymernai-article__prose .polymernai-article__media img {
width: 100%;
display: block;
border-radius: 1.5rem;
height: clamp(220px, 32vw, 380px);
object-fit: cover;
object-position: center;
margin: 0 !important;
}
/* Listas ordenadas en la prosa (las páginas solo usan ; los posts usan ) */
.polymernai-prose ol {
margin: 1rem auto !important;
padding-left: 1.5rem !important;
list-style: decimal !important;
line-height: 1.6;
color: rgba(58, 34, 56, 0.85);
}
.polymernai-prose ol li { margin: 0 0 0.4rem !important; }
.polymernai-prose ol li::marker { color: var(--wp--preset--color--poly-rose); font-weight: 700; }
/* Tags estilo pill */
.polymernai-article__tags {
max-width: 720px !important;
margin-inline: auto !important;
gap: 0.5rem !important;
flex-wrap: wrap;
}
.polymernai-article__tags:empty { display: none; }
.polymernai-article__tags .wp-block-post-terms a {
display: inline-block;
font-size: 0.7rem;
letter-spacing: 0.04em;
text-transform: uppercase;
font-weight: 600;
color: var(--wp--preset--color--poly-rose);
background: #fff;
border: 1px solid var(--wp--preset--color--poly-blush);
border-radius: 999px;
padding: 0.25rem 0.75rem;
text-decoration: none;
}
.polymernai-article__tags .wp-block-post-terms a:hover { background: var(--wp--preset--color--poly-cream); }
/* Volver al blog */
.polymernai-article__prose .polymernai-article__back {
max-width: 720px !important;
margin: 2.5rem auto 0 !important;
font-weight: 600;
}
.polymernai-article__back a { color: var(--wp--preset--color--poly-rose); text-decoration: none; }
.polymernai-article__back a:hover { color: var(--wp--preset--color--poly-magenta); }
/* Relacionados — borde superior + 3 columnas */
.polymernai-article__related {
border-top: 1px solid var(--wp--preset--color--poly-blush);
padding-top: 3.5rem;
margin-top: 0;
}
.polymernai-article__related .polymernai-blog-grid.wp-block-post-template {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 900px) {
.polymernai-article__related .polymernai-blog-grid.wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.polymernai-article__related .polymernai-blog-grid.wp-block-post-template { grid-template-columns: 1fr; }
}
/* Barra de progreso de navegación (feedback durante el TTFB) */
.poly-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
z-index: 99999;
pointer-events: none;
opacity: 0;
transition: opacity 0.2s ease;
}
.poly-progress.is-active { opacity: 1; }
.poly-progress__bar {
display: block;
height: 100%;
width: 100%;
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.2s ease;
background: linear-gradient(
90deg,
var(--wp--preset--color--poly-pink),
var(--wp--preset--color--poly-magenta)
);
box-shadow: 0 0 8px -1px var(--wp--preset--color--poly-pink);
}
@media (prefers-reduced-motion: reduce) {
.poly-progress__bar { transition: none; }
}
/* ──────────────────────────────────────────────────────────────
Página de lanzamiento (Coming Soon como página normal)
Ver templates/page-lanzamiento.html, templates/coming-soon.html
y patterns/coming-soon.php
────────────────────────────────────────────────────────────── */
.polymernai-comingsoon {
position: relative;
min-height: 100vh;
min-height: 100svh;
display: flex;
flex-direction: column;
box-sizing: border-box;
/* Mismo fondo que el body de la tienda. */
background: var(--wp--preset--color--poly-bg);
}
/* Blanco detrás del toldo, igual que .polymernai-header: el festón está
recortado con máscara y sus muescas revelan lo que haya detrás. */
.polymernai-comingsoon__top {
background-color: #fff;
/* Recrea el shopfloor de la home: el festón tiene que recortar contra
blanco, no contra el crema de la página, o no se lee. */
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--wp--preset--color--poly-blush);
}
/* La tarjeta cuelga bajo el toldo, no se centra en el hueco que queda. */
.polymernai-comingsoon__body {
flex: 1;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 2rem 1.25rem 3rem;
box-sizing: border-box;
}
.polymernai-comingsoon__card {
width: 100%;
max-width: 33rem;
min-width: 0;
box-sizing: border-box;
text-align: center;
/* Blanca con anillo blush, como el resto de tarjetas del tema: sobre el fondo
crema es el blanco lo que la separa. */
background: #fff;
border-radius: 1.75rem;
box-shadow: 0 0 0 1px var(--wp--preset--color--poly-blush), 0 12px 30px -12px rgba(0, 0, 0, 0.12);
padding: 2.5rem 1.75rem;
}
@media (min-width: 640px) {
.polymernai-comingsoon__card { padding: 3rem 2.5rem; }
}
/* Misma escala y misma sombra que el logo del header: sobre el toldo a rayas es
la sombra la que lo despega del fondo. */
.polymernai-comingsoon__logo {
display: block;
height: 5rem;
width: auto;
max-width: 100%;
margin: 0 auto;
object-fit: contain;
filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07)) drop-shadow(0 2px 2px rgba(0,0,0,0.06));
}
@media (min-width: 640px) {
.polymernai-comingsoon__logo { height: 7rem; }
}
@media (min-width: 1024px) {
.polymernai-comingsoon__logo { height: 9rem; }
}
.polymernai-comingsoon__title {
margin: 0.25rem 0 0.75rem;
color: var(--wp--preset--color--poly-magenta);
}
.polymernai-comingsoon__text {
margin: 0 0 1.5rem;
color: var(--wp--preset--color--poly-ink);
}
.polymernai-comingsoon__form {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.polymernai-comingsoon__input {
flex: 1 1 14rem;
min-width: 0;
box-sizing: border-box;
font-family: inherit;
font-size: 1rem;
padding: 0.75rem 1rem;
border: 0;
border-radius: 9999px;
background: #fff;
box-shadow: inset 0 0 0 1px var(--wp--preset--color--poly-blush);
color: var(--wp--preset--color--poly-ink);
}
.polymernai-comingsoon__input:focus-visible {
outline: 2px solid var(--wp--preset--color--poly-magenta);
outline-offset: 2px;
}
.polymernai-comingsoon__button {
flex: 0 0 auto;
font-family: inherit;
font-size: 1rem;
font-weight: 600;
padding: 0.75rem 1.5rem;
border: 0;
border-radius: 9999px;
background: var(--wp--preset--color--poly-magenta);
color: #fff;
cursor: pointer;
transition: opacity 0.15s;
}
.polymernai-comingsoon__button:hover { opacity: 0.88; }
.polymernai-comingsoon__button[disabled],
.polymernai-comingsoon__input[disabled] {
opacity: 0.55;
cursor: not-allowed;
}
.polymernai-comingsoon__note {
margin: 1rem 0 0;
font-size: 0.8125rem;
color: var(--wp--preset--color--poly-ink);
opacity: 0.75;
}
.polymernai-comingsoon__card > .wp-block-shortcode {
margin: 0;
}
.polymernai-comingsoon__card > .wp-block-heading {
margin-top: 0.25rem;
}
.polymernai-comingsoon__notice {
margin: 1.25rem 0 0;
font-size: 0.8125rem;
color: var(--wp--preset--color--poly-magenta);
}