/* Alas de Ángel — landing
Los tokens vienen tal cual del design system; aquí solo se componen.
Las fuentes se cargan con en el (preconnect) en vez de
tokens/fonts.css: un @import encadenado bloquea el render. */
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/effects.css";
@import "./tokens/base.css";
*,
*::before,
*::after { box-sizing: border-box; }
/* El atributo hidden aplica display:none desde la hoja del navegador, y
cualquier display de autor lo pisa. .pieza es flex y .piezas es grid, así
que sin esto el filtrado y la paginación no ocultan nada. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
font-size: var(--text-body-md);
line-height: var(--leading-body);
overflow-x: hidden;
}
/* height:auto es imprescindible: los ![]()
llevan width/height como atributos
(evitan el salto de layout al cargar) y sin esto la altura se queda clavada
en el valor del atributo. */
img { max-width: 100%; height: auto; display: block; }
/* ---------- primitivas ---------- */
.wrap {
max-width: var(--container-max);
margin: 0 auto;
padding: 0 var(--space-5);
}
.section { padding: var(--space-9) 0; }
.dark {
background: var(--surface-dark);
color: var(--text-on-dark);
}
/* Sobre fondo claro el kicker usa rosegold-deep: --rosegold sobre crema da
3.66:1 y no pasa AA a 11px. Sobre negro sí (5.11:1), y ahí se deja. */
.kicker {
font-size: var(--text-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--rosegold-deep);
margin: 0;
}
.dark .kicker { color: var(--rosegold); }
.title {
font-size: var(--text-h2);
margin-top: var(--space-2);
}
.dark .title { color: var(--pink-100); }
.lede {
font-size: var(--text-body-lg);
color: var(--text-muted);
max-width: 52ch;
margin: var(--space-4) 0 0;
}
.dark .lede { color: var(--ink-300); }
.section-head { margin-bottom: var(--space-8); }
/* ---------- botones ---------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 15px var(--space-6);
border-radius: var(--radius-sm);
border: 1px solid transparent;
cursor: pointer;
text-decoration: none;
transition: background var(--dur-fast) var(--ease-brand),
color var(--dur-fast) var(--ease-brand),
border-color var(--dur-fast) var(--ease-brand);
}
.btn-primary {
background: var(--pink-100);
color: var(--ink-900);
}
.btn-primary:hover { background: var(--pink-200); color: var(--ink-900); }
.btn-primary:active { background: var(--pink-300); }
.btn-outline {
background: transparent;
border-color: var(--rosegold);
color: var(--pink-100);
}
.btn-outline:hover { background: rgba(183, 110, 121, 0.14); color: var(--pink-100); }
.btn-ghost {
background: transparent;
color: var(--pink-100);
padding-left: var(--space-3);
padding-right: var(--space-3);
}
.btn-ghost:hover { color: var(--pink-200); }
.btn-ink {
background: var(--ink-900);
color: var(--pink-100);
}
.btn-ink:hover { background: var(--ink-800); color: var(--pink-100); }
.btn:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 3px;
}
/* ---------- logotipo ---------- */
.stars {
font-size: 10px;
letter-spacing: 0.4em;
color: var(--rosegold);
line-height: 1;
}
.wordmark {
font-family: var(--font-display);
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
color: var(--ink-900);
}
.logo-sub {
font-family: var(--font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.32em;
text-transform: uppercase;
color: var(--rosegold-deep);
line-height: 1;
}
.dark .logo-sub { color: var(--rosegold); }
/* ---------- header ---------- */
.header {
position: sticky;
top: 0;
z-index: 20;
background: var(--cream);
border-bottom: 1px solid var(--line);
}
.header .wrap {
min-height: 76px;
display: flex;
align-items: center;
gap: var(--space-6);
}
.brand {
display: flex;
flex-direction: column;
gap: 5px;
text-decoration: none;
}
.brand .wordmark { font-size: 21px; }
.brand:hover .wordmark { color: var(--ink-900); }
.nav {
display: flex;
gap: var(--space-5);
flex: 1;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.nav a {
color: var(--ink-800);
padding-bottom: 2px;
border-bottom: 1px solid transparent;
white-space: nowrap;
}
.nav a:hover {
color: var(--ink-900);
border-bottom-color: var(--rosegold);
}
/* ---------- hero ---------- */
/* Portada tipográfica: sin imagen, el peso lo lleva la Prata sobre negro y el
aire alrededor. Centrada y con medida corta para que se lea de un golpe. */
.hero .wrap {
min-height: 520px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding-top: var(--space-9);
padding-bottom: var(--space-9);
}
.hero h1 {
font-size: var(--text-hero);
color: var(--pink-100);
margin-top: var(--space-5);
line-height: 1.1;
max-width: 16ch;
}
.hero .lede {
max-width: 52ch;
margin-left: auto;
margin-right: auto;
}
.hero-actions {
display: flex;
gap: var(--space-3);
margin-top: var(--space-7);
flex-wrap: wrap;
justify-content: center;
}
/* ---------- categorías ---------- */
/* Índice de catálogo: filas separadas por líneas de 1px, que es el motivo
estructural de la marca. Sin recuadros de imagen que llenar. */
.cat-index {
list-style: none;
margin: 0;
padding: 0;
border-top: 1px solid var(--line);
}
.cat-index li {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1.3fr);
align-items: baseline;
gap: var(--space-5);
padding: var(--space-6) 0;
border-bottom: 1px solid var(--line);
}
.cat-index .num {
font-family: var(--font-display);
font-size: var(--text-body-sm);
color: var(--rosegold-deep);
letter-spacing: 0.1em;
}
.cat-index h3 {
font-size: 26px;
color: var(--ink-900);
}
.cat-index p {
font-size: var(--text-body-md);
color: var(--text-muted);
margin: 0;
line-height: 1.7;
}
/* ---------- piezas ---------- */
.piezas-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-5);
flex-wrap: wrap;
}
.filtros {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
/* Mismas medidas que el componente Tag del design system. */
.tag {
font-family: var(--font-body);
font-size: var(--text-body-sm);
padding: 7px var(--space-4);
border-radius: var(--radius-pill);
border: 1px solid var(--line-strong);
background: var(--surface-card);
color: var(--ink-800);
cursor: pointer;
white-space: nowrap;
transition: all var(--dur-fast) var(--ease-brand);
}
.tag:hover { background: var(--pink-50); }
.tag.sel {
background: var(--ink-900);
border-color: var(--ink-900);
color: var(--pink-100);
}
.tag:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* El contador a la izquierda y las flechas a la derecha, en la misma línea:
así el paginador queda pegado al borde de la rejilla que controla. */
.barra-piezas {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
margin-top: var(--space-6);
}
.conteo {
font-size: var(--text-body-sm);
color: var(--text-muted);
margin: 0;
}
/* Las flechas van arriba, junto a los filtros, y no flanqueando la rejilla:
a los lados se comían 80px de ancho y dejaban las fotos en 232px. */
.piezas-fila { margin-top: var(--space-4); }
.paginador {
display: flex;
gap: var(--space-2);
flex: none;
}
.flecha {
flex: none;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
/* Borde oscuro, no --line-strong: sobre crema aquello era tan tenue que las
flechas parecían desactivadas incluso cuando funcionaban. */
background: var(--surface-card);
border: 1px solid var(--ink-900);
border-radius: var(--radius-sm);
color: var(--ink-900);
cursor: pointer;
transition: all var(--dur-fast) var(--ease-brand);
}
.flecha:hover:not(:disabled) { background: var(--ink-900); color: var(--pink-100); }
.flecha:disabled {
opacity: 1;
border-color: var(--line-strong);
color: var(--text-faint);
cursor: default;
}
.flecha:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Sin JS no hay paginación que controlar, así que las flechas sobran. */
html:not(.js) .flecha { display: none; }
html:not(.js) .filtros { display: none; }
.vacio {
font-size: var(--text-body-md);
color: var(--text-muted);
text-align: center;
padding: var(--space-8) 0;
margin: 0;
}
.piezas {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
min-width: 0;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-5);
}
.pieza {
background: var(--surface-card);
border: 1px solid var(--line);
border-radius: var(--radius-md);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow var(--dur-med) var(--ease-brand),
border-color var(--dur-med) var(--ease-brand);
}
.pieza:hover {
box-shadow: var(--shadow-card);
border-color: var(--line-strong);
}
/* Las fotos del proveedor vienen sobre blanco: la tarjeta también es blanca,
así el fondo se funde y no aparece un recuadro dentro de otro. */
.pieza-foto {
aspect-ratio: 1 / 1;
background: #fff;
padding: var(--space-4);
position: relative;
}
/* Mismas medidas que el componente Badge del design system, tono brand. */
.pieza-badge {
position: absolute;
top: var(--space-3);
left: var(--space-3);
z-index: 1;
display: inline-block;
font-family: var(--font-body);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--radius-pill);
background: var(--pink-100);
color: var(--ink-900);
}
.pieza-foto img {
width: 100%;
height: 100%;
object-fit: contain;
}
.pieza-info {
padding: 0 var(--space-4) var(--space-5);
border-top: 1px solid var(--line);
padding-top: var(--space-4);
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 1;
}
.pieza-info h3 {
font-size: var(--text-h3);
color: var(--ink-900);
line-height: 1.25;
}
/* Subcategoría a la izquierda y precio a la derecha. Cuando el precio es un
rango ("$7.000 – $24.990") no cabe al lado, así que baja a su propia línea
en vez de apretar el subtítulo hasta los puntos suspensivos. */
.pieza-linea {
display: flex;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 2px var(--space-2);
margin: var(--space-2) 0 0;
margin-top: auto;
padding-top: var(--space-3);
}
.pieza-sub {
font-size: var(--text-body-sm);
color: var(--text-muted);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.precio {
font-size: var(--text-body-md);
font-weight: 700;
color: var(--rosegold-deep);
white-space: nowrap;
}
.precio .desde {
font-size: 11px;
font-weight: 400;
color: var(--text-muted);
}
/* El guion del rango, en tono apagado para que los dos importes destaquen. */
.precio .separador,
.ficha-precio .separador {
color: var(--text-faint);
font-weight: 400;
margin: 0 1px;
}
.btn-comprar {
width: 100%;
margin-top: var(--space-3);
padding: 11px var(--space-4);
background: var(--ink-900);
color: var(--pink-100);
font-size: 12px;
}
.btn-comprar:hover { background: var(--ink-800); color: var(--pink-100); }
.btn-comprar.copiado {
background: var(--success);
color: #fff;
}
.nota-precios {
font-size: var(--text-body-sm);
color: var(--text-muted);
text-align: center;
margin: var(--space-6) 0 0;
max-width: 60ch;
margin-left: auto;
margin-right: auto;
}
.ver-mas {
display: flex;
justify-content: center;
margin-top: var(--space-7);
}
.btn-outline-ink {
background: transparent;
border-color: var(--ink-900);
color: var(--ink-900);
}
.btn-outline-ink:hover { background: var(--ink-900); color: var(--pink-100); }
/* ---------- página de catálogo ---------- */
.visually-hidden {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.cat-hero {
padding: var(--space-7) 0 var(--space-6);
border-bottom: 1px solid var(--line);
}
.cat-hero .title { font-size: var(--text-h1); }
.cat-hero .lede { margin-top: var(--space-3); }
.volver {
font-size: var(--text-body-sm);
margin: 0 0 var(--space-5);
}
.cat-layout {
display: grid;
grid-template-columns: 232px minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
padding-top: var(--space-7);
padding-bottom: var(--space-9);
}
.filtros-panel { position: sticky; top: 100px; }
.filtros-titulo {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--space-3);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--line);
}
.filtros-titulo h2 {
font-size: var(--text-h3);
color: var(--ink-900);
}
.limpiar {
background: none;
border: none;
padding: 0;
font-family: var(--font-body);
font-size: var(--text-body-sm);
color: var(--rosegold-deep);
cursor: pointer;
text-decoration: underline;
}
.limpiar:hover { color: var(--ink-900); }
.filtros-panel fieldset {
border: none;
margin: 0;
padding: var(--space-5) 0;
border-bottom: 1px solid var(--line);
}
.filtros-panel legend {
font-size: var(--text-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-muted);
padding: 0;
margin-bottom: var(--space-4);
}
.filtros-panel ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.filtros-panel label {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-body-sm);
color: var(--ink-800);
cursor: pointer;
}
.filtros-panel label:hover { color: var(--ink-900); }
.filtros-panel input { accent-color: var(--rosegold); cursor: pointer; }
.cat-barra {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-4);
padding-bottom: var(--space-5);
flex-wrap: wrap;
}
.cat-barra .conteo { margin: 0; }
.orden select {
font-family: var(--font-body);
font-size: var(--text-body-sm);
color: var(--ink-800);
background: var(--surface-card);
border: 1px solid var(--line-strong);
border-radius: var(--radius-sm);
padding: 9px var(--space-3);
cursor: pointer;
}
.orden select:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* En el catálogo la rejilla no va flanqueada por flechas. */
.cat-main .piezas { grid-template-columns: repeat(4, 1fr); }
/* ---------- ficha de producto ---------- */
.miga {
font-size: var(--text-body-sm);
color: var(--text-muted);
padding: var(--space-5) 0;
}
.miga a { color: var(--text-muted); }
.miga a:hover { color: var(--rosegold-deep); }
.ficha {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--space-8);
align-items: start;
padding-bottom: var(--space-8);
}
.ficha-foto {
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-6);
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.ficha-foto img { max-height: 100%; width: auto; object-fit: contain; }
.ficha-info h1 {
font-size: var(--text-h1);
color: var(--ink-900);
margin-top: var(--space-3);
}
.ficha-precio {
font-family: var(--font-body);
font-size: 28px;
font-weight: 700;
color: var(--rosegold-deep);
margin: var(--space-4) 0 0;
}
.ficha-precio .desde {
font-size: var(--text-body-md);
font-weight: 400;
color: var(--text-muted);
}
.ficha-entradilla {
font-size: var(--text-body-lg);
line-height: 1.7;
color: var(--ink-700);
margin: var(--space-4) 0 0;
}
.ficha-presentacion {
font-size: var(--text-body-md);
color: var(--text-muted);
margin: var(--space-2) 0 0;
}
.presentaciones {
margin-top: var(--space-6);
border-top: 1px solid var(--line);
padding-top: var(--space-5);
}
.presentaciones h2 {
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--text-muted);
margin: 0 0 var(--space-3);
}
.presentaciones ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.presentaciones li { border-bottom: 1px solid var(--line); }
/* Cada hermana lleva su miniatura: es lo que deja ver de un vistazo que el
sachet y el frasco no son lo mismo. */
.presentaciones a {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) 0;
font-size: var(--text-body-md);
color: var(--ink-800);
}
.presentaciones a:hover { color: var(--rosegold-deep); }
.presentaciones img {
width: 44px;
height: 44px;
object-fit: contain;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
flex: none;
}
.presentaciones a span:nth-of-type(1) { flex: 1; }
.presentaciones .precio { font-size: var(--text-body-md); }
.btn-comprar-grande {
margin-top: var(--space-6);
padding: 17px var(--space-6);
font-size: var(--text-body-sm);
}
.ficha-promesas {
list-style: none;
margin: var(--space-5) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
font-size: var(--text-body-sm);
color: var(--text-muted);
}
.ficha-promesas li::before {
content: "✓";
color: var(--rosegold);
margin-right: var(--space-2);
}
/* ---------- pestañas de la ficha ---------- */
.ficha-tabs { padding-bottom: var(--space-9); }
.tabs-barra {
display: flex;
gap: var(--space-6);
border-bottom: 1px solid var(--line);
overflow-x: auto;
scrollbar-width: none;
}
.tabs-barra::-webkit-scrollbar { display: none; }
.tab {
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
padding: var(--space-3) 0;
font-family: var(--font-body);
font-size: var(--text-body-sm);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-muted);
cursor: pointer;
white-space: nowrap;
transition: color var(--dur-fast) var(--ease-brand);
}
.tab:hover { color: var(--ink-900); }
.tab.sel { color: var(--ink-900); border-bottom-color: var(--ink-900); }
.tab:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
/* Sin JS se ven todos los paneles seguidos, que es un estado legible. */
html:not(.js) .tabs-barra { display: none; }
html:not(.js) .tab-panel[hidden] { display: block !important; }
.tab-panel {
padding-top: var(--space-6);
max-width: 68ch;
}
.tab-panel h3 {
font-size: var(--text-h3);
color: var(--ink-900);
margin-top: var(--space-6);
}
.tab-panel h3:first-child { margin-top: 0; }
.tab-panel p,
.tab-panel li {
font-size: var(--text-body-md);
line-height: 1.75;
color: var(--ink-700);
}
.tab-panel p { margin: var(--space-3) 0 0; }
.tab-panel ul,
.tab-panel ol { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.tab-panel li { margin-bottom: var(--space-2); }
.tab-panel strong { color: var(--ink-900); font-weight: 600; }
/* La tarjeta enlaza a la ficha: el enlace no debe repintar el título. */
.pieza-info h3 a { color: var(--ink-900); }
.pieza-info h3 a:hover { color: var(--rosegold-deep); }
a.pieza-foto { display: block; }
/* ---------- compromiso ---------- */
/* Sección más compacta: las cuatro promesas ocupaban 166px y la sección tenía
192px de padding — más vacío que contenido. */
#compromiso { padding: var(--space-8) 0; }
.promises {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: 1px solid var(--line);
margin-top: var(--space-6);
}
.promise {
padding: var(--space-6) var(--space-5) 0 0;
border-right: 1px solid var(--line);
}
.promise:last-child { border-right: none; padding-right: 0; }
.promise:not(:first-child) { padding-left: var(--space-5); }
.promise .mark {
color: var(--rosegold-deep);
font-size: 17px;
line-height: 1;
}
.promise h3 {
font-size: var(--text-h3);
color: var(--ink-900);
margin-top: var(--space-3);
}
/* Sube de 13 a 15px: a 13 el texto de las columnas costaba de leer. */
.promise p {
font-size: var(--text-body-md);
color: var(--text-muted);
line-height: 1.65;
margin: var(--space-2) 0 0;
}
/* ---------- historia ---------- */
/* Dos columnas de texto, como una nota editorial. */
.story-text {
columns: 2;
column-gap: var(--space-8);
margin-top: var(--space-6);
}
.story-text p:first-child { margin-top: 0; }
.story p {
font-size: var(--text-body-lg);
line-height: 1.75;
color: var(--ink-700);
margin: var(--space-4) 0 0;
}
/* Cruza las dos columnas para cerrar el bloque, no queda colgando en una. */
.story .signature {
column-span: all;
font-family: var(--font-display);
font-size: var(--text-h3);
color: var(--ink-900);
margin-top: var(--space-6);
}
/* ---------- comunidad ---------- */
.community { text-align: center; }
.community .lede { margin-left: auto; margin-right: auto; }
.community .title { font-size: var(--text-h1); }
.hashtag { color: var(--pink-100); }
.community-cta { margin-top: var(--space-7); }
/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--ink-700); }
.footer .wrap {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: var(--space-8);
padding-top: var(--space-8);
padding-bottom: var(--space-8);
}
.footer .wordmark { color: var(--pink-100); font-size: 25px; }
.footer .brand { gap: 7px; }
.footer p {
font-size: var(--text-body-sm);
line-height: 1.75;
color: var(--ink-300);
max-width: 34ch;
margin: var(--space-4) 0 0;
}
.footer h2 {
font-family: var(--font-body);
font-size: var(--text-caption);
font-weight: 700;
letter-spacing: var(--tracking-caps);
text-transform: uppercase;
color: var(--rosegold);
margin: 0 0 var(--space-4);
}
.footer ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--text-body-sm);
color: var(--pink-100);
}
.footer ul a { color: var(--pink-100); }
.footer ul a:hover { color: var(--pink-200); }
.legal {
border-top: 1px solid var(--ink-700);
}
.legal .wrap {
display: flex;
flex-wrap: wrap;
gap: var(--space-3) var(--space-5);
justify-content: space-between;
padding-top: var(--space-5);
padding-bottom: var(--space-5);
font-size: var(--text-body-sm);
color: var(--ink-300);
}
/* ---------- entrada ---------- */
/* La animación solo se arma si hay JS (la clase .js la pone un script inline
en el ). Sin JS, el contenido nace visible: nunca se puede dar el caso
de una página en blanco porque el observer no llegó a disparar. */
.js .reveal {
opacity: 0;
transform: translateY(8px);
transition: opacity var(--dur-med) var(--ease-brand),
transform var(--dur-med) var(--ease-brand);
}
.js .reveal.in { opacity: 1; transform: none; }
/* ---------- responsive ---------- */
@media (max-width: 900px) {
.section { padding: var(--space-8) 0; }
.nav { display: none; }
.hero .wrap { min-height: 0; }
.story-text { columns: 1; }
.cat-index li {
grid-template-columns: 32px minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
}
.cat-index p { grid-column: 2; }
.piezas { grid-template-columns: repeat(3, 1fr); }
.cat-main .piezas { grid-template-columns: repeat(3, 1fr); }
.ficha { grid-template-columns: 1fr; gap: var(--space-6); }
.ficha-foto { max-width: 420px; }
/* Los filtros pasan a una tira horizontal encima de la rejilla. */
.cat-layout { grid-template-columns: 1fr; gap: var(--space-6); }
.filtros-panel { position: static; }
.filtros-panel fieldset { padding: var(--space-4) 0; }
.filtros-panel fieldset ul { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
.promises { grid-template-columns: repeat(2, 1fr); }
.promise:nth-child(2) { border-right: none; padding-right: 0; }
.promise:nth-child(3) { padding-left: 0; }
.promise:nth-child(3),
.promise:nth-child(4) { border-top: 1px solid var(--line); }
.footer .wrap { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
.footer .brand-col { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
.header .wrap { min-height: 68px; gap: var(--space-4); }
.brand .wordmark { font-size: 18px; }
.brand .logo-sub { font-size: 8px; letter-spacing: 0.28em; }
.title { font-size: 24px; }
.community .title { font-size: 30px; }
.promises { grid-template-columns: 1fr; }
.promise {
border-right: none;
padding: var(--space-5) 0 0;
}
.promise:not(:first-child) {
padding-left: 0;
border-top: 1px solid var(--line);
}
.cat-index h3 { font-size: 22px; }
.cat-index li { padding: var(--space-5) 0; }
.piezas { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.cat-main .piezas { grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.cat-hero .title { font-size: 30px; }
.ficha-info h1 { font-size: 28px; }
.ficha-precio { font-size: 24px; }
.ficha-foto { padding: var(--space-4); }
.tabs-barra { gap: var(--space-4); }
.pieza-foto { padding: var(--space-2); }
.pieza-info { padding: var(--space-3) var(--space-3) var(--space-4); }
.pieza-info h3 { font-size: 15px; }
.pieza-linea { padding-top: var(--space-2); flex-direction: column; align-items: flex-start; gap: 2px; }
.pieza-sub { font-size: 12px; }
.paginador { flex: none; }
/* Fila de filtros deslizable, para no comerse media pantalla. */
.filtros {
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
margin: 0 calc(-1 * var(--space-5));
padding: 0 var(--space-5) var(--space-2);
}
.filtros::-webkit-scrollbar { display: none; }
.footer .wrap { grid-template-columns: 1fr; }
.btn { width: 100%; }
.hero-actions .btn { width: auto; flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.js .reveal { opacity: 1; transform: none; transition: none; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
/* ---------- cortinilla de entrada ---------- */
/* Dos alas grandes que baten, con la marca debajo. Solo con JS (clase .js) y
una vez por sesión: verla en cada clic sería un peaje, y hay 59 páginas.
La animación de .cortinilla la esconde sola a los 5 s aunque el JS no
llegue a quitarla: nada que tape la web entera puede depender de un script. */
.cortinilla { display: none; }
.js .cortinilla {
display: flex;
position: fixed;
inset: 0;
z-index: 200;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-6);
background: var(--ink-900);
animation: cortinilla-fuera 2500ms var(--ease-brand) 5s forwards;
}
.cortinilla.fuera { animation: cortinilla-fuera 2500ms var(--ease-brand) forwards; }
@keyframes cortinilla-fuera {
to { opacity: 0; visibility: hidden; }
}
/* El contenido entra con un fundido a la vez que la cortinilla se va.
Lo mueve una animación CSS con el MISMO retardo que la cortinilla (5 s), no
una transición que dispare el JS.
Antes esto esperaba al evento `load` para revelar el contenido, y con 57
imágenes ese evento llega tarde: la cortinilla ya se había ido por CSS y
quedaba una ventana de página en blanco. Atar las dos cosas al mismo reloj
—el del CSS— es lo que hace imposible que se separen. */
.js.cargando .header,
.js.cargando main,
.js.cargando footer {
animation: contenido-entra 1400ms var(--ease-brand) 5s both;
}
@keyframes contenido-entra {
from { opacity: 0; }
to { opacity: 1; }
}
.alas {
position: relative;
width: 460px;
height: 150px;
display: flex;
justify-content: center;
animation: alas-respira 3.2s var(--ease-brand) infinite;
}
@keyframes alas-respira {
50% { transform: translateY(-8px); }
}
.ala {
position: absolute;
top: 0;
left: 50%;
width: 30px;
height: 260px;
}
/* La segunda ala es la primera reflejada: mismo dibujo, sentido contrario. */
.ala:nth-child(2) { transform: scaleX(-1); }
.pluma {
position: absolute;
top: 0;
left: 0;
width: 26px;
transform-origin: top left;
border-bottom-right-radius: 100%;
border-top-left-radius: 100%;
animation-name: batir;
animation-duration: 1.15s;
animation-timing-function: var(--ease-brand);
animation-iteration-count: infinite;
}
/* El aleteo: la pluma se abre y vuelve. El desfase corto entre plumas es lo
que hace que la onda recorra el ala rápido, en vez de arrastrarse. */
@keyframes batir {
0%, 100% { transform: rotate(var(--giro)) translateY(0); }
50% { transform: rotate(calc(var(--giro) + 9deg)) translateY(10px); }
}
.cortinilla-marca {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
animation: marca-entra 520ms var(--ease-brand) both;
}
@keyframes marca-entra {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.cortinilla-marca .stars { color: var(--rosegold); font-size: 14px; }
.cortinilla-marca .wordmark { color: var(--pink-100); font-size: 40px; }
.cortinilla-marca .logo-sub { color: var(--rosegold); font-size: 10px; }
@media (max-width: 700px) {
.alas { width: 300px; height: 110px; transform: scale(0.72); transform-origin: center bottom; }
.cortinilla-marca .wordmark { font-size: 28px; }
}
/* Sin animaciones: ni alas batiendo ni esperas, y el contenido nunca se oculta. */
@media (prefers-reduced-motion: reduce) {
.js .cortinilla { display: none; }
.js.cargando .header,
.js.cargando main,
.js.cargando footer { opacity: 1; }
}
.pluma:nth-of-type(1){--giro:0.0deg;height:117px;background:#FADDE6;animation-delay:32ms}
.pluma:nth-of-type(2){--giro:4.7deg;height:124px;background:#F6D7E0;animation-delay:64ms}
.pluma:nth-of-type(3){--giro:9.4deg;height:131px;background:#F3D1DB;animation-delay:96ms}
.pluma:nth-of-type(4){--giro:14.1deg;height:138px;background:#EFCBD5;animation-delay:128ms}
.pluma:nth-of-type(5){--giro:18.8deg;height:145px;background:#ECC6CF;animation-delay:160ms}
.pluma:nth-of-type(6){--giro:23.5deg;height:152px;background:#E8C0C9;animation-delay:192ms}
.pluma:nth-of-type(7){--giro:28.2deg;height:159px;background:#E5BAC4;animation-delay:224ms}
.pluma:nth-of-type(8){--giro:32.9deg;height:166px;background:#E1B4BE;animation-delay:256ms}
.pluma:nth-of-type(9){--giro:37.6deg;height:173px;background:#DEAEB8;animation-delay:288ms}
.pluma:nth-of-type(10){--giro:42.3deg;height:180px;background:#DAA8B2;animation-delay:320ms}
.pluma:nth-of-type(11){--giro:47.0deg;height:187px;background:#D7A3AD;animation-delay:352ms}
.pluma:nth-of-type(12){--giro:51.7deg;height:194px;background:#D39DA7;animation-delay:384ms}
.pluma:nth-of-type(13){--giro:56.4deg;height:201px;background:#D097A1;animation-delay:416ms}
.pluma:nth-of-type(14){--giro:61.1deg;height:208px;background:#CC919B;animation-delay:448ms}
.pluma:nth-of-type(15){--giro:65.8deg;height:215px;background:#C98B96;animation-delay:480ms}
.pluma:nth-of-type(16){--giro:70.5deg;height:222px;background:#C58590;animation-delay:512ms}
.pluma:nth-of-type(17){--giro:75.2deg;height:229px;background:#C2808A;animation-delay:544ms}
.pluma:nth-of-type(18){--giro:79.9deg;height:236px;background:#BE7A84;animation-delay:576ms}
.pluma:nth-of-type(19){--giro:84.6deg;height:243px;background:#BB747F;animation-delay:608ms}
.pluma:nth-of-type(20){--giro:89.3deg;height:250px;background:#B76E79;animation-delay:640ms}