/* Tipografías de marca: Cormorant Garamond (display, igual que el planner) +
Outfit (UI/cuerpo — fuente del sistema NANIKA; reemplazó a Jost jul-2026) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300&family=Outfit:wght@300;400;500;600;700&display=swap');
:root {
/* Paleta NANIKA — los 5 colores originales */
--cream: #fff3e3;
--coral: #ffa488;
--blush: #ffe9e9;
--pink: #f9cdc6;
--gold: #f8b972;
/* Texto por roles: carbón principal, coral solo como acento.
Jerarquía de texto y su contraste sobre crema #fff3e3 (mínimo WCAG AA: 4.5:1):
--ink / --text #2f2a28 12.9:1 títulos y cuerpo principal
--light-text #6e5b4f 5.9:1 texto secundario
--taupe #9a8175 3.3:1 REPRUEBA — solo decoración, nunca texto
El taupe se usaba como texto secundario (beneficios, relato de marca, nota del
newsletter) y quedaba en 3.32:1 sobre crema y 3.64:1 sobre blanco. Se movió todo
ese rol al gris cálido, que ya estaba en la paleta madre (jul-2026). */
--dark: #c4704a; /* terracota — acentos, badges y énfasis decorativo (3.64:1: no usar
como texto de lectura, ver --terracota-texto) */
--terracota-texto: #9e5533; /* terracota oscurecida — MISMA familia, apta para texto
(5.05:1 sobre crema, 5.53:1 sobre blanco). Se usa en las
etiquetas de sección y en las bajadas de producto, que son
texto de lectura y no elementos decorativos (Nat, jul-2026). */
--text: #2f2a28; /* carbón cálido — texto de cuerpo principal */
--light-text: #6e5b4f; /* gris cálido OFICIAL (paleta madre) — texto secundario */
--taupe: #9a8175; /* taupe claro OFICIAL (paleta madre) — DECORATIVO, no texto */
--white: #ffffff;
--ink: #2f2a28; /* carbón — títulos, nav, logo */
--text-soft: #6e5b4f; /* gris cálido OFICIAL (paleta madre) — párrafos suaves */
--sage: #a8c7a1; /* matcha OFICIAL (paleta madre) — íconos verdes */
/* Texto que va ENCIMA del acento (--coral). Tiene que virar con el tema: el coral de
Sakura es claro y pide carbón (7.36:1); la amatista de Tsuki es oscura y pide blanco
(4.68:1). Un color fijo reprueba en una de las dos. Blanco sobre coral daba 1.92:1. */
--on-accent: #2f2a28;
/* Acento para usar SOBRE el footer carbón. También tiene que virar: el coral rinde
7.36:1 ahí, pero la amatista de Tsuki cae a 3.03:1 y hay que aclararla. */
--accent-on-dark: #ffa488;
--shadow: 0 4px 24px rgba(255, 164, 136, 0.15);
--shadow-hover: 0 8px 32px rgba(255, 164, 136, 0.25);
--radius: 18px;
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
font-family: 'Outfit', sans-serif;
background: var(--cream);
color: var(--text);
font-size: 16px;
line-height: 1.6;
overflow-x: hidden;
}
/* ── PROTECCIÓN DE IMÁGENES (disuade copia casual: no arrastrar / no seleccionar / sin menú de pulsación) ── */
img {
/* Con width/height en el HTML (contra el layout shift), height:auto conserva la proporción.
Especificidad mínima a propósito: cualquier regla de clase que fije alto la pisa. */
height: auto;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* ── HEADER ── */
header {
background: var(--white);
border-bottom: 1px solid var(--pink);
position: sticky;
top: 0;
z-index: 100;
padding: 0 2rem;
}
nav {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 72px;
}
.nav-logo {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.nav-logo img { height: 52px; object-fit: contain; }
.nav-logo .wordmark-img {
height: 22px;
width: auto;
display: block;
}
.logo-flower { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; }
.nav-links {
display: flex;
gap: 2rem;
list-style: none;
}
.nav-links a {
text-decoration: none;
color: var(--text-soft);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap; /* "Planner Digital Sakura" nunca se quiebra en 2 líneas */
transition: var(--transition);
}
/* El descendiente .nav-links a (0,1,1) le gana a .btn-primary (0,1,0), asi que el CTA
"Comprar" heredaba --text-soft sobre coral: 3.34:1. Se le devuelve el token del acento. */
.nav-links a.btn, .nav-links a.btn:hover { color: var(--on-accent); }
.nav-links a:not(.btn):hover { color: var(--terracota-texto); } /* coral daba 1.92:1 sobre blanco.
:not(.btn) deja fuera al CTA "Comprar", que tiene fondo coral propio y lleva --on-accent. */
/* ── Desplegable de planners en el nav (jul-2026) ──
Consolida "Planner Sakura" + "Planner Tsuki" en un solo item para acortar
el nav y darle aire al logo. Hover/foco en desktop, siempre abierto en mobile. */
.nav-dd { position: relative; }
.nav-dd-trigger {
display: inline-flex;
align-items: center;
gap: 0.4rem;
/* medía 18px de alto: bajo el mínimo de 24px (WCAG 2.2 AA). El nav centra por flex,
así que el padding agranda el área sin mover la composición. */
padding: 0.25rem 0;
background: none;
border: none;
cursor: pointer;
font-family: inherit;
color: var(--text-soft);
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
transition: var(--transition);
}
.nav-dd-trigger:hover,
.nav-dd:hover .nav-dd-trigger,
.nav-dd:focus-within .nav-dd-trigger,
.nav-dd-trigger[aria-expanded="true"] { color: var(--terracota-texto); } /* coral daba 1.92:1 */
.nav-dd-caret { width: 11px; height: 8px; transition: transform 0.22s ease; }
.nav-dd:hover .nav-dd-caret,
.nav-dd:focus-within .nav-dd-caret,
.nav-dd-trigger[aria-expanded="true"] .nav-dd-caret { transform: rotate(180deg); }
.nav-dd-panel {
position: absolute;
top: calc(100% + 16px);
left: 50%;
transform: translateX(-50%) translateY(-8px);
min-width: 292px;
background: var(--white);
border: 1px solid var(--blush);
border-radius: 18px;
box-shadow: 0 18px 42px rgba(160, 100, 80, 0.16);
padding: 0.5rem;
display: flex;
flex-direction: column;
gap: 0.2rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
z-index: 95;
}
/* puente invisible: mantiene el hover al cruzar del trigger al panel */
.nav-dd-panel::before {
content: "";
position: absolute;
top: -16px; left: 0; right: 0; height: 16px;
}
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel,
.nav-dd-panel.open {
opacity: 1;
pointer-events: all;
transform: translateX(-50%) translateY(0);
}
.nav-dd-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.55rem 0.6rem;
border-radius: 13px;
text-decoration: none;
transition: background 0.18s ease;
}
.nav-dd-item:hover { background: var(--cream); }
.nav-dd-thumb {
width: 60px;
height: 45px;
object-fit: cover;
border-radius: 9px;
flex-shrink: 0;
box-shadow: 0 2px 9px rgba(160, 100, 80, 0.16);
}
.nav-dd-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nav-dd-name {
font-size: 0.94rem;
font-weight: 600;
color: var(--ink);
letter-spacing: 0.01em;
text-transform: none;
transition: color 0.18s ease;
}
.nav-dd-sub {
font-size: 0.72rem;
color: var(--text-soft);
letter-spacing: 0.02em;
text-transform: none;
}
.nav-dd-item:hover .nav-dd-name { color: var(--terracota-texto); } /* coral daba 1.92:1 sobre blanco */
.nav-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.cart-btn {
background: var(--blush);
border: none;
border-radius: 50px;
padding: 0.5rem 1.2rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text);
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
font-weight: 500;
transition: var(--transition);
position: relative;
}
.cart-btn:hover { background: var(--pink); }
.cart-count {
background: var(--coral);
color: var(--on-accent); /* blanco daba 1.92:1 a 11px */
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 700;
}
/* ── HERO ── */
.hero {
position: relative;
overflow: hidden;
padding: 3.5rem 2rem 5rem;
/* fondo cuadriculado suave (como papel de planner) + brillos cálidos */
background-color: var(--cream);
background-image:
linear-gradient(rgba(196, 112, 74, 0.06) 1px, transparent 1px),
linear-gradient(90deg, rgba(196, 112, 74, 0.06) 1px, transparent 1px),
radial-gradient(55% 75% at 88% 18%, rgba(255, 233, 233, 0.65) 0%, transparent 60%),
radial-gradient(45% 55% at 8% 95%, rgba(248, 185, 114, 0.12) 0%, transparent 60%);
background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100%;
background-position: center top;
}
.hero-inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3rem;
align-items: center;
position: relative;
z-index: 2;
}
/* — Texto del hero — */
.hero-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--white);
color: var(--terracota-texto); /* --dark daba 3.64:1 a 12.5px */
border: 1.5px solid var(--pink);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
padding: 0.5rem 1.15rem;
border-radius: 50px;
margin-bottom: 1.6rem;
box-shadow: 0 2px 12px rgba(255, 164, 136, 0.12);
}
.hero-badge::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--coral);
flex-shrink: 0;
}
.hero-text h1 {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(2.6rem, 5.5vw, 4.4rem);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 1.3rem;
}
.hero-text h1 .accent { color: var(--coral); }
.hero-text > p {
font-size: 1.08rem;
line-height: 1.7;
color: var(--text-soft);
max-width: 450px;
margin-bottom: 2rem;
}
.hero-features {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.35rem 1.4rem;
font-size: 0.82rem;
color: var(--light-text);
margin-top: 1.7rem;
}
.hero-features li { position: relative; padding-left: 0.95rem; }
.hero-features li::before {
content: '·';
position: absolute;
left: 0;
color: var(--coral);
font-weight: 700;
}
/* — Pétalos decorativos — */
.petal {
position: absolute;
opacity: 0.7;
z-index: 1;
pointer-events: none;
object-fit: contain;
}
.petal--1 { width: 26px; height: 26px; top: 14%; left: 6%; animation: float 7s ease-in-out infinite; }
.petal--2 { width: 18px; height: 18px; top: 44%; left: 2.5%; color: var(--coral); opacity: 0.5; animation: float 9s ease-in-out infinite; }
.petal--3 { width: 30px; height: 30px; top: 9%; right: 3%; animation: float 8s ease-in-out infinite; }
.petal--4 { width: 16px; height: 16px; bottom: 18%; right: 34%; color: var(--coral); opacity: 0.5; animation: float 6.5s ease-in-out infinite; }
.petal--5 { width: 22px; height: 22px; bottom: 11%; right: 8%; animation: float 7.5s ease-in-out infinite; }
.petal--6 { width: 20px; height: 20px; top: 27%; left: 17%; opacity: 0.55; animation: float 8.5s ease-in-out infinite; }
.petal--7 { width: 14px; height: 14px; top: 66%; left: 11%; color: var(--coral); opacity: 0.45; animation: float 7s ease-in-out infinite; }
.petal--8 { width: 24px; height: 24px; top: 5%; right: 27%; opacity: 0.6; animation: float 9.5s ease-in-out infinite; }
.petal--9 { width: 15px; height: 15px; top: 52%; right: 3%; opacity: 0.5; animation: float 6.8s ease-in-out infinite; }
.petal--10 { width: 18px; height: 18px; bottom: 32%; left: 41%; color: var(--coral); opacity: 0.4; animation: float 8.2s ease-in-out infinite; }
/* — Showcase del producto estrella (Planner Sakura) — */
.hero-art {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 480px;
}
.showcase {
position: relative;
width: 100%;
max-width: 430px;
}
.showcase-screen {
position: relative;
z-index: 2;
width: 100%;
aspect-ratio: 4 / 3;
background: #fff;
border-radius: 20px;
padding: 9px;
box-shadow: 0 30px 60px rgba(90, 60, 50, 0.22);
transform: rotate(1.5deg);
}
.showcase-screen > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
display: block;
}
/* Hojeo del planner: 4 páginas (portada, mensual, semanal, hábitos) que se
funden en un ciclo de 16s. Sin marca de agua y en baja resolución (760px para
un elemento de ≤430px), según la regla que fijó Nat el 2026-07-18. Los previews
grandes de la ficha de producto siguen marcados.
Solo cross-fade, sin desplazamiento ni escala: alrededor del marco ya conviven
la portada Tsuki asomada, dos badges, Ninika, la etiqueta なにか y los pétalos.
Sumar movimiento adentro competiría con todo eso. */
/* Fondo del cruce. Sin esto, en el medio de cada transición las dos páginas
quedan al 50% y deja pasar el blanco del marco: la portada, que es la única
con zonas oscuras (la máscara), se lavaba ~25% durante 0,24s. El color es el
fondo real de la página del planner, así el cruce ocurre sobre papel.
Una variante Tsuki tendría que pisar este color por su fondo noche. */
.showcase-screen::before {
content: '';
position: absolute;
inset: 9px;
border-radius: 12px;
background: #fff4ea; /* base del degradado de página del planner */
z-index: 0;
}
.showcase-page {
z-index: 1;
opacity: 0;
animation: hojear 16s ease-in-out infinite both;
}
/* La portada se queda EN FLUJO y es la que le da tamaño al marco: .hero-art se
ajusta al contenido, así que con las cuatro páginas en absoluto la cadena
quedaba sin nada que la dimensionara y el showcase colapsaba a 24px en móvil.
Además es la página correcta para que sostenga el layout: si algo falla, lo
que queda a la vista es la portada. */
.showcase-page:first-of-type { position: relative; }
/* Las otras tres se apilan encima con medidas explícitas. No sirve `inset`:
una imagen en absoluto con width/height auto toma su tamaño intrínseco
(regla de elementos reemplazados). El 18px descuenta el bisel de 9px por lado. */
.showcase-page:not(:first-of-type) {
position: absolute;
top: 9px;
left: 9px;
width: calc(100% - 18px);
height: calc(100% - 18px);
}
.showcase-page:nth-of-type(2) { animation-delay: 4s; }
.showcase-page:nth-of-type(3) { animation-delay: 8s; }
.showcase-page:nth-of-type(4) { animation-delay: 12s; }
@keyframes hojear {
0% { opacity: 0; }
3%, 25% { opacity: 1; }
28%, 100% { opacity: 0; }
}
/* Peek = portada del Planner Tsuki asomándose detrás de la Sakura: hace visible
la dualidad día/noche desde el hero y enlaza a /producto-tsuki. Queda detrás de
la portada principal (z-index 1 < 2); solo su borde superior sobresale, así que
la etiqueta "Versión noche" flota por encima de ese borde (única zona no tapada). */
.showcase-peek {
position: absolute;
top: -7%;
right: -8%;
width: 78%;
aspect-ratio: 4 / 3;
background: #fff;
border-radius: 16px;
padding: 7px;
box-shadow: 0 20px 44px rgba(90, 60, 50, 0.15);
transform: rotate(6deg);
transform-origin: center;
z-index: 1;
display: block;
text-decoration: none;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}
.showcase-peek:hover {
transform: rotate(6deg) translateY(-6px);
box-shadow: 0 28px 54px rgba(90, 60, 50, 0.22);
}
.showcase-peek > img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
display: block;
}
.showcase-peek-tag {
position: absolute;
top: -15px;
left: 8px;
background: #8b5fbf; /* amatista Tsuki */
color: #fff;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.02em;
padding: 0.32rem 0.72rem;
border-radius: 50px;
box-shadow: 0 8px 18px rgba(139, 95, 191, 0.34);
white-space: nowrap;
}
.planner-days { display: flex; justify-content: space-between; margin-bottom: 0.85rem; }
.planner-days span { font-size: 0.6rem; color: var(--light-text); letter-spacing: 0.04em; }
.planner-rows { display: flex; flex-direction: column; gap: 0.62rem; }
.prow { display: flex; align-items: center; gap: 0.4rem; min-height: 9px; }
.bar { height: 8px; border-radius: 50px; display: block; }
.bar.g { background: #cfe3c4; }
.bar.p { background: var(--pink); }
.w35 { width: 35%; } .w40 { width: 40%; } .w50 { width: 50%; }
.w60 { width: 60%; } .w70 { width: 70%; } .w75 { width: 75%; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.prow.sep { min-height: 0.4rem; }
.prow.line { height: 7px; background: #f3efe9; border-radius: 50px; }
.prow.line.short { width: 60%; }
/* — Piezas flotantes del showcase: stickers + Ninika — */
.showcase-stickers-badge {
position: absolute;
left: -8%;
bottom: -11%;
display: inline-flex;
align-items: center;
white-space: nowrap;
background: #fff;
color: var(--terracota-texto); /* coral daba 1.92:1 a 12.8px sobre blanco */
font-size: 0.8rem;
font-weight: 600;
border: 1.5px solid rgba(255, 164, 136, 0.5);
border-radius: 50px;
padding: 0.55rem 1.1rem;
box-shadow: 0 14px 30px rgba(90, 60, 50, 0.16);
transform: rotate(-4deg);
z-index: 3;
}
.showcase-ninika {
position: absolute;
right: -5%;
bottom: -13%;
width: 108px;
z-index: 4;
display: block;
}
.showcase-ninika img {
width: 100%;
display: block;
filter: drop-shadow(0 12px 20px rgba(90, 60, 50, 0.2));
}
/* — Etiquetas なにか — */
.kana-tag {
position: absolute;
font-size: 0.8rem;
letter-spacing: 0.1em;
z-index: 1;
}
.kana-tag--dashed {
top: 4%;
right: 0;
color: var(--terracota-texto); /* coral daba 1.76:1 a 12.8px */
border: 1.5px dashed var(--pink);
border-radius: 8px;
padding: 0.3rem 0.6rem;
}
.kana-tag--solid {
bottom: 10%;
right: -2%;
background: var(--blush);
color: var(--terracota-texto); /* --dark daba 3.1:1 */
border-radius: 8px;
padding: 0.3rem 0.6rem;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-15px); }
}
/* ── BUTTONS ── */
/* ── Botones (jul-2026): chip rectangular suave, plano, texto carbón.
Regla de formas: botones = 12px; badges/chips informativos siguen en pastilla.
El texto oscuro sobre relleno de paleta reemplaza al blanco sobre coral,
que daba ~2:1 de contraste (bajo el mínimo WCAG de 4.5:1). ── */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.85rem 2rem;
border-radius: 12px;
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
font-weight: 500;
letter-spacing: 0.06em;
text-decoration: none;
border: none;
cursor: pointer;
transition: var(--transition);
}
.btn-primary {
background: var(--coral);
color: var(--ink);
}
.btn-primary:hover {
background: #f6a59b; /* coral suave (paleta extendida) */
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 164, 136, 0.28);
}
.btn-outline {
background: transparent;
color: var(--ink);
border: 1.5px solid var(--coral);
}
.btn-outline:hover {
background: var(--coral);
color: var(--ink);
transform: translateY(-2px);
}
/* botón secundario: chip sakura plano con texto carbón */
.btn-soft {
background: var(--pink);
color: var(--ink);
}
.btn-soft:hover {
background: #fbd7d7; /* sakura (paleta extendida) */
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(249, 205, 198, 0.45);
}
/* ── HERO: doble botón ── */
.hero-buttons { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* ── PROMO JUEGO (home) ── */
#juego-promo { background: var(--white); padding-top: 0; }
.promo-card {
display: grid;
grid-template-columns: 1.4fr 1fr;
align-items: center;
gap: 2rem;
background: linear-gradient(135deg, var(--blush), var(--pink));
border-radius: var(--radius);
padding: 3rem;
overflow: hidden;
}
.promo-text .section-label { text-align: left; }
.promo-text .section-title { text-align: left; margin-bottom: 1rem; }
.promo-text p { color: var(--ink); /* --dark con opacity .85 caia bajo 2.5:1 sobre el rosa */ margin-bottom: 1.5rem; max-width: 420px; }
.promo-art {
font-size: 7rem;
text-align: center;
filter: drop-shadow(0 12px 24px rgba(160, 100, 80, 0.25));
animation: float 6s ease-in-out infinite;
}
.promo-art img {
width: 100%;
max-width: 230px;
display: block;
margin: 0 auto;
}
/* ── MASCOTA FLOTANTE (Ninika asomándose) ── */
.ninika-float {
position: fixed;
right: 20px;
bottom: 0;
width: 96px;
z-index: 90;
text-decoration: none;
transform: translateY(16px);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ninika-float img {
width: 100%;
display: block;
filter: drop-shadow(0 8px 16px rgba(90, 60, 50, 0.22));
animation: ninika-bob 4s ease-in-out infinite;
}
.ninika-float:hover { transform: translateY(0); }
.ninika-float-bubble {
position: absolute;
bottom: 88%;
right: 50%;
transform: translateX(50%) scale(0.6);
transform-origin: bottom center;
opacity: 0;
background: var(--coral);
color: #fff;
font-size: 0.72rem;
font-weight: 500;
white-space: nowrap;
padding: 0.35rem 0.7rem;
border-radius: 50px;
box-shadow: var(--shadow);
transition: var(--transition);
pointer-events: none;
}
.ninika-float:hover .ninika-float-bubble { opacity: 1; transform: translateX(50%) scale(1); }
@keyframes ninika-bob {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@media (max-width: 760px) {
.promo-card { grid-template-columns: 1fr; text-align: center; padding: 2.25rem 1.5rem; }
.promo-text .section-label,
.promo-text .section-title { text-align: center; }
.promo-text p { margin-left: auto; margin-right: auto; }
.promo-art { order: -1; font-size: 5rem; }
}
/* ── SECTIONS ── */
section {
padding: 6rem 2rem;
}
.section-inner {
max-width: 1200px;
margin: 0 auto;
}
.section-header {
text-align: center;
margin-bottom: 3.5rem;
}
.section-label {
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--terracota-texto); /* era var(--coral): 1.92:1, y se repite 7 veces por página */
display: block;
margin-bottom: 0.5rem;
}
.section-title {
font-family: 'Cormorant Garamond', serif;
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 300;
color: var(--dark);
}
/* ── PRODUCTOS ── */
#productos {
background: var(--white);
}
.filtros {
display: flex;
justify-content: center;
gap: 0.75rem;
margin-bottom: 2.75rem;
flex-wrap: wrap;
}
.filtro-btn {
padding: 0.55rem 1.5rem;
border-radius: 50px;
border: 1.5px solid var(--pink);
background: var(--white);
color: var(--ink);
font-family: 'Outfit', sans-serif;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
}
.filtro-btn:hover { border-color: var(--coral); color: var(--terracota-texto); } /* coral daba 1.92:1 */
.filtro-btn.active {
background: var(--coral);
border-color: var(--coral);
color: #fff;
}
.productos-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
gap: 1.6rem;
}
.producto-card {
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(160, 100, 80, 0.10);
transition: var(--transition);
cursor: pointer;
display: flex;
flex-direction: column;
}
.producto-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 40px rgba(160, 100, 80, 0.16);
}
.producto-card.is-soon { cursor: default; }
.producto-card.is-soon:hover {
transform: none;
box-shadow: 0 10px 30px rgba(160, 100, 80, 0.10);
}
/* — mockup estilizado de la tarjeta — */
.producto-mockup {
background: var(--mk-bg, var(--blush));
padding: 1.5rem 1.4rem;
aspect-ratio: 1.5 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.mk-card {
width: 100%;
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 6px 16px rgba(120, 80, 60, 0.10);
}
.mk-head { height: 14px; background: var(--mk-head, var(--pink)); }
.mk-body { padding: 0.75rem 0.85rem 0.85rem; }
.mk-row { display: flex; gap: 6px; margin-bottom: 8px; }
.mk-row i { height: 5px; border-radius: 50px; background: rgba(150, 110, 95, 0.13); display: block; }
.mk-dots { display: flex; justify-content: space-between; margin-top: 10px; }
.mk-dots span { width: 9px; height: 9px; border-radius: 50%; }
.mk-dots span:first-child { background: var(--mk-head, var(--pink)); }
.mk-dots span:last-child { background: rgba(150, 110, 95, 0.18); }
/* — imagen real del planner en la tarjeta — */
.producto-thumb {
background: var(--mk-bg, var(--blush));
aspect-ratio: 1.5 / 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1.1rem;
}
.producto-thumb img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 8px 20px rgba(120, 80, 60, 0.16);
display: block;
}
/* — info de la tarjeta — */
.producto-info {
padding: 1.1rem 1.3rem 1.4rem;
display: flex;
flex-direction: column;
flex: 1;
}
.producto-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0.6rem;
}
.producto-badge {
font-size: 0.72rem;
font-weight: 600;
padding: 0.25rem 0.7rem;
border-radius: 50px;
white-space: nowrap;
}
.badge--coral { background: var(--coral); color: var(--on-accent); } /* blanco daba 1.92:1 */
.badge--soft { background: var(--blush); color: var(--terracota-texto); } /* --dark daba 3.1:1 a 11px */
.badge--sage { background: var(--sage); color: var(--ink); } /* blanco daba 1.85:1 */
.badge--muted { background: #efe6d8; color: var(--light-text); }
.producto-categoria {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 0.95rem;
color: var(--light-text);
letter-spacing: 0;
text-transform: none;
margin: 0;
}
.producto-nombre {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--ink);
margin-bottom: 0.35rem;
}
.producto-desc {
font-size: 0.85rem;
color: var(--light-text);
margin-bottom: 1.1rem;
line-height: 1.5;
}
.producto-footer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: auto;
}
.producto-precio {
font-family: 'Outfit', sans-serif;
font-size: 1.3rem;
font-weight: 700;
color: var(--ink);
}
.producto-precio.precio--soon {
font-size: 0.95rem;
font-weight: 600;
color: var(--light-text);
}
.add-cart-btn {
background: var(--coral);
color: #fff;
border: none;
border-radius: 50px;
padding: 0.6rem 1.15rem;
font-family: 'Outfit', sans-serif;
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
margin-left: auto;
}
.add-cart-btn:hover { background: var(--dark); }
.add-cart-btn--off { background: #efe6d8; color: var(--taupe); cursor: not-allowed; } /* beige papel + taupe OFICIALES — estado inactivo, exento de WCAG 1.4.3 */
.add-cart-btn--off:hover { background: #efe6d8; } /* beige papel OFICIAL */
/* ── ABOUT ── */
#nosotros {
background: linear-gradient(135deg, var(--blush), var(--cream));
}
.about-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5rem;
align-items: center;
}
/* — Ilustración de Nosotros — */
.about-art {
position: relative;
display: flex;
justify-content: center;
align-items: center;
min-height: 440px;
}
.about-device {
position: relative;
width: 340px;
max-width: 100%;
background: #fff;
border-radius: 22px;
padding: 1.3rem 1.3rem 1.6rem;
box-shadow: 0 24px 50px rgba(90, 60, 50, 0.16);
transform: rotate(-3deg);
z-index: 2;
}
.about-tab {
display: block;
background: linear-gradient(90deg, var(--pink), var(--blush));
color: var(--ink); /* --dark daba 2.53:1 sobre el extremo rosa */
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 1rem;
letter-spacing: 0.03em;
padding: 0.5rem 0.9rem;
border-radius: 10px;
margin-bottom: 0.85rem;
}
.about-device .planner-rows { opacity: 0.85; }
.about-note {
position: absolute;
top: 3rem;
left: 1.1rem;
width: 58%;
background: #fff6ee;
border: 1px solid rgba(249, 205, 198, 0.8);
border-radius: 12px;
padding: 0.85rem 0.95rem;
box-shadow: 0 14px 30px rgba(90, 60, 50, 0.14);
z-index: 3;
}
.about-note-title {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 0.9rem;
color: var(--ink);
margin-bottom: 0.65rem;
}
.about-check {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
color: var(--text-soft);
margin-bottom: 0.45rem;
}
.about-check:last-child { margin-bottom: 0; }
.about-check .cb {
width: 14px;
height: 14px;
border: 1.5px solid var(--pink);
border-radius: 4px;
flex-shrink: 0;
}
.about-kana {
top: auto;
right: auto;
bottom: 1rem;
left: 1.1rem;
}
.about-seal {
position: absolute;
bottom: -30px;
left: 54%;
width: 88px;
height: 88px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 16px 34px rgba(90, 60, 50, 0.16);
transform: rotate(3deg);
z-index: 4;
}
.about-seal img { width: 58%; display: block; }
.about-naneko {
position: absolute;
left: -6%;
bottom: -4%;
width: 132px;
z-index: 1;
display: block;
filter: drop-shadow(0 14px 22px rgba(90, 60, 50, 0.18));
}
.about-flower {
position: absolute;
top: 6%;
right: -4%;
width: 30px;
height: auto;
object-fit: contain;
z-index: 1;
animation: float 8s ease-in-out infinite;
}
.about-text .section-label { text-align: left; }
.about-text .section-title { text-align: left; margin-bottom: 1.1rem; }
/* Outfit y no Cormorant Garamond: la serif de display es de alto contraste y x-height
chica, pensada para titulares. Como cuerpo de varias líneas se leía delgada y apagada.
Outfit ya es la fuente de cuerpo del resto del sitio, así que además unifica.
Baja de 1.13rem a 1.02rem porque a igual px Outfit se ve bastante más grande. */
.about-text p {
font-family: 'Outfit', sans-serif;
font-size: 1.02rem;
line-height: 1.7;
color: var(--light-text);
margin: 0 0 1.05rem;
}
.about-text .about-signoff {
font-style: italic;
font-size: 1.05rem;
color: var(--light-text);
margin-bottom: 1.6rem;
}
.about-quote {
font-family: 'Cormorant Garamond', serif;
font-size: 1.25rem;
line-height: 1.5;
color: var(--ink);
border-left: 3px solid var(--coral);
padding-left: 1.1rem;
margin-bottom: 1.8rem;
}
/* ── COMO FUNCIONA ── */
#como-funciona {
background: var(--white);
}
.section-sub {
/* Outfit y no Cormorant Garamond (Nat, ago-2026): la serif Light se leia
debil/fragil a este tamano, entre un titulo sans bold y cuerpo sans -
un salto tipografico que "no funcionaba". Mismo criterio que el titular
de about-text (linea 1070). */
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 1.1rem;
line-height: 1.5;
color: var(--light-text);
margin: 0.6rem auto 0;
max-width: 620px;
}
.pasos {
display: flex;
align-items: stretch;
justify-content: center;
gap: 0;
}
.paso {
flex: 1;
text-align: left;
padding: 1.8rem 1.6rem;
background: var(--white);
border-radius: var(--radius);
border: 1px solid rgba(249, 205, 198, 0.6);
box-shadow: var(--shadow);
transition: var(--transition);
}
.paso:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-hover);
}
/* fila número + ícono */
.paso-head {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 1.1rem;
}
.paso-numero {
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--pink);
color: var(--ink);
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.paso-icon {
width: 34px;
height: 34px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.paso-icon svg { width: 19px; height: 19px; }
.paso-icon img { width: 74%; height: 74%; object-fit: contain; display: block; }
.paso-icon.coral { background: rgba(255, 164, 136, 0.14); color: var(--coral); }
.paso-icon.sage { background: rgba(141, 167, 123, 0.18); color: var(--sage); }
/* conector ondulado entre tarjetas */
.paso-link {
flex-shrink: 0;
display: flex;
align-items: center;
padding: 0 0.9rem;
color: var(--coral);
}
.paso-link svg { width: 26px; height: 12px; }
.paso h3 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--ink);
margin-bottom: 0.5rem;
}
.paso p { font-size: 0.9rem; color: var(--light-text); line-height: 1.6; }
/* ── POR QUÉ NANIKA (tarjetas de valor) ── */
#por-que { background: var(--cream); }
.section-title--ink {
font-family: 'Outfit', sans-serif;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
max-width: 860px;
margin: 0 auto;
}
.feature-card {
background: var(--white);
border-radius: var(--radius);
padding: 2.1rem 1.3rem;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-hover);
}
.feature-icon {
width: 62px;
height: 62px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.15rem;
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-icon img { width: 76%; height: 76%; object-fit: contain; display: block; }
.feature-icon.coral { background: rgba(255, 164, 136, 0.14); color: var(--coral); }
.feature-icon.sage { background: rgba(141, 167, 123, 0.18); color: var(--sage); }
.feature-card h3 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1.02rem;
color: var(--ink);
margin-bottom: 0.5rem;
}
.feature-card p {
font-size: 0.88rem;
color: var(--light-text);
line-height: 1.55;
}
@media (max-width: 720px) { .features-grid { grid-template-columns: 1fr; max-width: 380px; } }
/* ── CART DRAWER ── */
.cart-overlay {
position: fixed;
inset: 0;
background: rgba(61, 44, 44, 0.35);
z-index: 200;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.cart-overlay.open { opacity: 1; pointer-events: all; }
.cart-drawer {
position: fixed;
top: 0;
right: 0;
width: 400px;
max-width: 100vw;
height: 100vh;
background: var(--white);
z-index: 201;
transform: translateX(100%);
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: -8px 0 32px rgba(61, 44, 44, 0.12);
}
.cart-drawer.open { transform: translateX(0); }
.cart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 1.75rem;
border-bottom: 1px solid var(--blush);
}
.cart-header h2 {
font-family: 'Cormorant Garamond', serif;
font-size: 1.5rem;
font-weight: 400;
color: var(--dark);
}
.close-btn {
background: none;
border: none;
font-size: 1.5rem;
/* medía 20x32: el ancho reprobaba el mínimo de 24px */
min-width: 32px;
min-height: 32px;
line-height: 1;
cursor: pointer;
color: var(--light-text);
transition: var(--transition);
}
.close-btn:hover { color: var(--terracota-texto); } /* coral daba 1.92:1 en hover */
.cart-items {
flex: 1;
overflow-y: auto;
padding: 1.5rem 1.75rem;
}
.cart-empty {
text-align: center;
padding: 3rem 1rem;
color: var(--light-text);
}
.cart-empty .empty-icon { margin-bottom: 1rem; }
.cart-empty .empty-icon img { width: 72px; height: auto; opacity: 0.92; }
.cart-item {
display: flex;
gap: 1rem;
padding: 1rem 0;
border-bottom: 1px solid var(--blush);
}
.cart-item-thumb {
width: 72px;
height: 72px;
border-radius: 10px;
background: var(--blush);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.8rem;
flex-shrink: 0;
overflow: hidden;
}
/* Los thumbs son mini-mockups del producto (PNG transparente con la portada
montada como tarjeta), no íconos sueltos: el aire ya viene en el lienzo, así
que aquí casi no lleva padding. Ver regen_hero_thumbs.py */
.cart-item-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.cart-item-info { flex: 1; }
/* Contraste del drawer (ago-2026): el nombre y el precio son la información que se
lee justo antes de pagar, no decoración, así que salen de la familia terracota/coral
y pasan a carbón. El precio queda igual que en las tarjetas de producto
(.producto-precio también es --ink): un precio se ve del mismo color en todo el sitio.
La calidez del drawer la siguen dando los thumbs blush, los bordes rosa, el botón
coral y los dos titulares en --dark, que sí pasan por ser texto grande. */
.cart-item-name {
font-family: 'Cormorant Garamond', serif;
font-size: 1rem;
color: var(--ink); /* era --dark: 3.64:1 sobre blanco. Ahora 14.2:1 */
margin-bottom: 0.2rem;
}
.cart-item-cat {
font-size: 0.75rem;
color: var(--light-text);
margin-bottom: 0.5rem;
}
.cart-item-precio {
font-weight: 600; /* sube de 500: sin el coral, el peso distingue el precio */
color: var(--ink); /* era --coral: 1.92:1 sobre blanco. Ahora 14.2:1 */
font-size: 0.95rem;
}
.remove-item {
background: none;
border: none;
color: var(--light-text);
cursor: pointer;
font-size: 1.1rem;
transition: var(--transition);
align-self: flex-start;
padding: 0.2rem;
}
.remove-item:hover { color: var(--terracota-texto); } /* coral daba 1.92:1 en hover */
.cart-footer {
padding: 1.5rem 1.75rem;
border-top: 1px solid var(--blush);
background: var(--cream);
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.25rem;
}
.cart-total span { font-size: 0.9rem; color: var(--light-text); }
.cart-total strong {
font-family: 'Cormorant Garamond', serif;
font-size: 1.6rem;
color: var(--dark);
}
/* Código de descuento (premio NANIKA Run) */
.cart-code {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.cart-code input {
flex: 1;
min-width: 0;
padding: 0.6rem 0.9rem;
border: 1px solid var(--pink);
border-radius: 50px;
background: var(--white);
font-family: inherit;
font-size: 0.85rem;
color: var(--text);
text-transform: uppercase;
}
.cart-code input::placeholder { text-transform: none; color: var(--light-text); }
.cart-code input:focus { outline: none; border-color: var(--coral); }
.code-apply {
border: none;
background: none;
font-family: inherit;
font-size: 0.85rem;
font-weight: 600;
color: var(--terracota-texto); /* era --dark: 3.33:1 sobre crema. Ahora 5.05:1 */
cursor: pointer;
padding: 0 0.4rem;
}
/* El hover coral quedaba en 1.76:1 sobre crema: al pasar el mouse el control se volvía
ilegible. Ahora oscurece a carbón, que además lee como "activo". Mismo criterio en
los cuatro controles de texto del drawer. */
.code-apply:hover { color: var(--ink); }
.cart-line {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--text-soft);
margin-bottom: 0.4rem;
}
.cart-line-dcto { color: var(--terracota-texto); } /* era --dark: 3.33:1. Ahora 5.05:1 */
.remove-code {
border: none;
background: none;
color: var(--light-text);
font-size: 0.75rem;
cursor: pointer;
padding: 0 0.2rem;
}
.remove-code:hover { color: var(--terracota-texto); } /* coral daba 1.76:1 sobre crema */
/* Aviso de producto digital + aceptación de términos (Ley 19.496: la exclusión
del retracto se informa de forma destacada ANTES del pago). Tono calmo, en
paleta: nada de rojos ni estilos de advertencia. */
.cart-legal {
margin: 0 0 1rem;
padding: 0.8rem 0.95rem;
background: var(--white);
border: 1px solid var(--pink);
border-radius: 12px;
}
.cart-legal-aviso {
font-size: 0.76rem;
line-height: 1.5;
color: var(--text-soft);
margin: 0;
}
.cart-legal-aviso a { color: var(--terracota-texto); } /* era --dark: 3.64:1. Ahora 5.52:1 */
.cart-legal-aviso a:hover { color: var(--ink); }
.checkout-btn {
width: 100%;
justify-content: center;
font-size: 1rem;
padding: 1rem;
}
.checkout-btn:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ── MODAL DE PRODUCTO ── */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(61, 44, 44, 0.5);
z-index: 300;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
}
.modal-overlay.open { opacity: 1; pointer-events: all; }
.modal {
background: var(--white);
border-radius: var(--radius);
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.modal-overlay.open .modal { transform: scale(1); }
.modal-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.modal-img {
background: linear-gradient(135deg, var(--blush), var(--pink));
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
min-height: 300px;
border-radius: var(--radius) 0 0 var(--radius);
overflow: hidden;
}
.modal-img img { width: 100%; height: 100%; object-fit: cover; }
/* ── CARRUSEL DE PREVIEW (modal) ── */
.carousel { position: relative; width: 100%; height: 100%; min-height: 320px; overflow: hidden; background: var(--blush); }
.carousel-track { display: flex; height: 100%; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.carousel-slide { min-width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 0.6rem; }
.carousel-arw {
position: absolute; top: 50%; transform: translateY(-50%);
width: 36px; height: 36px; border-radius: 50%; border: none;
background: rgba(255, 255, 255, 0.88); color: var(--dark);
font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow);
display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.carousel-arw:hover { background: #fff; transform: translateY(-50%) scale(1.08); }
.carousel-arw.prev { left: 10px; }
.carousel-arw.next { right: 10px; }
.carousel-dots { position: absolute; bottom: 11px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.cdot { width: 7px; height: 7px; border-radius: 50%; background: rgba(196, 112, 74, 0.35); cursor: pointer; transition: var(--transition); }
.cdot.on { background: var(--coral); transform: scale(1.25); }
.modal-body {
padding: 2.5rem;
display: flex;
flex-direction: column;
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--blush);
border: none;
border-radius: 50%;
width: 36px;
height: 36px;
cursor: pointer;
font-size: 1rem;
color: var(--text);
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.modal-close:hover { background: var(--coral); color: var(--on-accent); } /* blanco daba 1.92:1 */
.modal-categoria {
font-size: 0.75rem;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--coral);
margin-bottom: 0.5rem;
}
.modal-nombre {
font-family: 'Cormorant Garamond', serif;
font-size: 1.8rem;
font-weight: 400;
color: var(--dark);
margin-bottom: 0.75rem;
}
.modal-desc {
font-size: 0.9rem;
color: var(--light-text);
line-height: 1.7;
margin-bottom: 1.5rem;
flex: 1;
}
.modal-tags {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.tag {
background: var(--blush);
color: var(--text);
border-radius: 50px;
padding: 0.25rem 0.75rem;
font-size: 0.75rem;
}
.modal-precio {
font-family: 'Cormorant Garamond', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--dark);
margin-bottom: 1rem;
}
.modal-add-btn {
width: 100%;
justify-content: center;
font-size: 1rem;
}
/* ── TOAST ── */
.toast {
position: fixed;
bottom: 2rem;
left: 50%;
transform: translateX(-50%) translateY(80px);
background: var(--dark);
color: white;
padding: 0.85rem 2rem;
border-radius: 50px;
font-size: 0.9rem;
z-index: 500;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
white-space: nowrap;
}
.toast.show { transform: translateX(-50%) translateY(0); }
/* ── WASHI TAPE ──
Cinta de papel translúcida, para dar acabado de papelería a las tarjetas.
Componente reutilizable:
dentro de cualquier contenedor con position:relative.
Tres detalles hacen que lea como cinta y no como una etiqueta pegada:
1. Translucidez — se ve el borde de la tarjeta por debajo, y el tramo que
sobresale del borde superior se apoya sobre el fondo de la sección.
2. Bordes cortos rasgados — el washi se corta a mano y deja fibra (clip-path).
3. Rotación mínima — nadie pega cinta perfectamente recta.
La sombra va en el contenedor y el recorte en el : box-shadow se recortaría
junto con el clip-path, y filter se aplica antes de recortar. Separarlos en dos
elementos es la única forma de que la sombra siga la silueta rasgada. */
.washi {
position: absolute;
z-index: 3;
width: 152px;
height: 34px;
pointer-events: none;
filter: drop-shadow(0 2px 5px rgba(160, 100, 80, 0.18));
}
.washi > i {
display: block;
width: 100%;
height: 100%;
background:
repeating-linear-gradient(48deg,
rgba(255, 164, 136, 0.26) 0 3px,
rgba(255, 164, 136, 0) 3px 10px),
repeating-linear-gradient(90deg,
rgba(196, 112, 74, 0.05) 0 1px,
rgba(196, 112, 74, 0) 1px 5px),
linear-gradient(180deg, rgba(252, 224, 217, 0.9), rgba(249, 205, 198, 0.86));
clip-path: polygon(
1.5% 0%, 98.5% 0%,
100% 14%, 98% 30%, 100% 46%, 98% 62%, 100% 78%, 98% 92%, 99.5% 100%,
1.5% 100%,
0% 88%, 2% 72%, 0% 56%, 2% 40%, 0% 24%, 1% 10%
);
}
/* Centrada sobre el borde superior: 13px por fuera y 21px por dentro, para que
lea como cinta que sujeta la tarjeta contra la página. */
.washi--top {
top: -13px;
left: 50%;
transform: translateX(-50%) rotate(-2.4deg);
}
/* ── NEWSLETTER ── */
.newsletter {
background: var(--white);
padding: 5rem 2rem;
}
.news-card {
position: relative;
max-width: 720px;
margin: 0 auto;
background: linear-gradient(165deg, #fff7f0, #fdeae4);
border: 1px solid rgba(249, 205, 198, 0.6);
border-radius: 28px;
padding: 3.4rem 3rem 2.8rem;
text-align: center;
box-shadow: 0 20px 50px rgba(160, 100, 80, 0.10);
}
.news-tab {
display: inline-block;
background: var(--blush);
color: var(--terracota-texto); /* --dark daba 3.1:1 */
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.12em;
padding: 0.32rem 0.95rem;
border-radius: 50px;
margin-bottom: 1.1rem;
}
.news-sub {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 1.05rem;
line-height: 1.5;
color: var(--light-text);
max-width: 520px;
margin: 0.6rem auto 0;
}
.news-form {
display: flex;
gap: 0.6rem;
max-width: 480px;
margin: 2rem auto 0.9rem;
}
.news-input {
flex: 1;
min-width: 0;
background: #fff;
border: 1.5px solid var(--pink);
border-radius: 50px;
padding: 0.85rem 1.3rem;
font-family: 'Outfit', sans-serif;
font-size: 0.95rem;
color: var(--ink);
outline: none;
transition: var(--transition);
}
.news-input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 164, 136, 0.15); }
.news-input::placeholder { color: var(--light-text); }
.news-btn { flex-shrink: 0; }
.news-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.news-note { font-size: 0.78rem; color: var(--light-text); }
.news-ok { color: var(--terracota-texto); /* --dark daba 3.64:1 sobre blanco */ font-weight: 600; margin: 2rem auto 0.9rem; max-width: 480px; }
.news-petal { z-index: 1; }
.news-petal--1 { width: 30px; height: 30px; top: 9%; right: 7%; color: var(--pink); opacity: 0.55; animation: float 8s ease-in-out infinite; }
.news-petal--2 { width: 22px; height: 22px; bottom: 12%; left: 8%; color: var(--coral); opacity: 0.4; animation: float 7s ease-in-out infinite; }
/* ── FOOTER ── */
footer {
background: #2f2a28; /* carbón OFICIAL (paleta madre) */
color: rgba(255, 255, 255, 0.7);
padding: 4rem 2rem 2rem;
}
.footer-inner {
max-width: 1200px;
margin: 0 auto;
}
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 2.5rem;
margin-bottom: 3rem;
}
.footer-wordmark-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
/* medía 18px de alto: bajo el mínimo de 24px */
padding: 0.25rem 0;
margin-bottom: 0.75rem;
}
/* Logo oficial de texto NANIKA (versión crema para el fondo oscuro del footer;
proporciones fijas — solo se escala por altura) */
.footer-logo-img {
height: 18px;
width: auto;
display: block;
opacity: 0.95;
}
.footer-tagline {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.55);
line-height: 1.6;
max-width: 260px;
margin-bottom: 1rem;
}
.footer-email {
color: var(--accent-on-dark);
text-decoration: none;
font-size: 0.9rem;
/* medía 18px de alto: bajo el mínimo de 24px */
display: inline-block;
padding: 0.25rem 0;
}
.footer-email:hover { text-decoration: underline; }
.footer-col h2 {
color: var(--accent-on-dark);
/* el footer es carbon oscuro: la amatista de Tsuki caia a 3.0:1 sobre el */
font-size: 0.76rem;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 1.1rem; /* se ve igual que el h4 anterior: el cambio fue solo semantico */
}
.footer-col ul {
list-style: none;
display: flex;
flex-direction: column;
gap: 0.25rem; /* baja para compensar el padding del link, mismo ritmo visual */
}
.footer-col a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 0.9rem;
/* area tactil: 18px de alto reprobaba el minimo de 24px (WCAG 2.2 AA, 2.5.8) */
display: inline-block;
padding: 0.25rem 0;
transition: var(--transition);
}
.footer-col a:hover { color: var(--accent-on-dark); }
.footer-run-circle {
width: 90px;
height: 90px;
border-radius: 50%;
background: #fff;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
}
.footer-run-circle img { width: 76px; display: block; }
.footer-run-cta {
display: inline-block;
margin-top: 0.75rem;
font-size: 0.72rem;
font-weight: 600;
color: var(--coral);
text-decoration: none;
border: 1px solid rgba(255, 164, 136, 0.45);
padding: 0.22rem 0.75rem;
border-radius: 50px;
transition: var(--transition);
}
.footer-run-cta:hover {
background: var(--accent-on-dark);
color: #2f2a28; /* el CTA del footer vive sobre carbón; blanco daba 1.92:1 */
}
.footer-copy {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1.6rem;
text-align: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
}
.footer-copy span { color: var(--accent-on-dark); }
@media (max-width: 820px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
.footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.newsletter { padding: 3.5rem 1.25rem; }
.news-card { padding: 2.6rem 1.5rem 2.2rem; }
.news-form { flex-direction: column; }
.footer-grid { grid-template-columns: 1fr; text-align: center; gap: 2.2rem; }
.footer-wordmark-link { justify-content: center; }
.footer-tagline { margin-left: auto; margin-right: auto; }
.footer-col ul { align-items: center; }
.footer-run-circle { margin: 0 auto; }
}
/* ── EXITO PAGE ── */
.exito-page {
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
background: linear-gradient(180deg, var(--white) 0%, var(--blush) 100%);
}
.exito-card {
background: var(--white);
border-radius: var(--radius);
padding: 3rem;
max-width: 560px;
width: 100%;
text-align: center;
box-shadow: var(--shadow);
}
.exito-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.exito-icon img {
width: 160px;
height: auto;
margin: 0 auto;
}
.exito-card h1 {
font-family: 'Cormorant Garamond', serif;
font-size: 2rem;
color: var(--dark);
margin-bottom: 0.75rem;
}
.exito-card p { color: var(--light-text); margin-bottom: 1.5rem; }
.descargas {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin: 2rem 0;
text-align: left;
}
.descarga-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: var(--cream);
border-radius: 12px;
border: 1.5px solid var(--pink);
text-decoration: none;
color: var(--text);
transition: var(--transition);
}
.descarga-item:hover {
border-color: var(--coral);
background: var(--blush);
}
.descarga-icon { font-size: 1.5rem; display: flex; align-items: center; justify-content: center; width: 2.25rem; }
.descarga-icon img { width: 2rem; height: 2rem; object-fit: contain; }
.descarga-info { flex: 1; }
.descarga-nombre { font-weight: 500; font-size: 0.9rem; color: var(--terracota-texto); } /* --dark daba 3.33:1 a 14px */
.descarga-tipo { font-size: 0.75rem; color: var(--light-text); }
.descarga-arrow { color: var(--coral); font-size: 1.1rem; }
/* ── RESPONSIVE ── */
@media (max-width: 900px) {
.hero-inner { grid-template-columns: 1fr; text-align: center; }
.hero-art { margin: 2.5rem auto 0; }
.hero-text > p { margin: 0 auto 2rem; }
.hero-badge { margin-left: auto; margin-right: auto; }
.hero-buttons, .hero-features { justify-content: center; }
.about-grid { grid-template-columns: 1fr; text-align: center; gap: 2.5rem; }
.about-art { order: -1; }
.about-text .section-label,
.about-text .section-title { text-align: center; }
.about-text p, .about-quote { text-align: left; }
.pasos { flex-direction: column; gap: 1.25rem; }
.paso-link { display: none; }
.modal-grid { grid-template-columns: 1fr; }
.modal-img { border-radius: var(--radius) var(--radius) 0 0; min-height: 220px; }
}
@media (max-width: 640px) {
nav { padding: 0 1rem; }
.nav-links { display: none; }
.cart-drawer { width: 100vw; }
section { padding: 4rem 1.25rem; }
.hero { padding: 2.5rem 1.25rem 4rem; }
.productos-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.ninika-float { display: none; }
.kana-tag--dashed { right: 2%; }
.kana-tag--solid { right: 2%; }
/* En móvil la tarjeta ocupa todo el ancho y tapaba a Naneko (quedaba detrás,
abajo a la izquierda). Se asoma por el borde superior de la tarjeta:
min-height 0 para que el alto del contenedor sea el de la tarjeta y el
top negativo la ancle exactamente al borde. Sigue detrás (z-index 1 < 2). */
.about-art { min-height: 0; margin-top: 2rem; }
.about-naneko {
left: 4%;
bottom: auto;
top: -66px;
width: 120px;
}
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.petal, .ninika-float img, .promo-art, .about-flower,
.run-cloud, .run-star, .run-ninika, .run-play-spark { animation: none; }
/* El hojeo del hero se congela en la portada, que es la página que mejor
representa el producto (y la única sin marca de agua por regla de marca). */
.showcase-page { animation: none; opacity: 0; }
.showcase-page:first-of-type { opacity: 1; }
}
/* showcase del hero en móvil */
@media (max-width: 640px) {
.hero-art { min-height: 380px; }
.showcase { max-width: 320px; }
.showcase-ninika { width: 84px; }
}
/* ═══════════════════════════════════════════════
PÁGINA DE PRODUCTO — PLANNER SAKURA
═══════════════════════════════════════════════ */
.ps-main { background: var(--cream); }
.ps-breadcrumb {
max-width: 1180px;
margin: 0 auto;
padding: 1.4rem 2rem 0;
font-size: 0.82rem;
color: var(--light-text);
}
.ps-breadcrumb a { color: var(--text-soft); text-decoration: none; }
.ps-breadcrumb a:hover { color: var(--terracota-texto); } /* coral daba 1.92:1 */
/* — Cabecera de producto — */
.ps-hero { padding: 2.2rem 2rem 4.5rem; }
.ps-hero-inner {
max-width: 1180px;
margin: 0 auto;
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: 3.5rem;
align-items: flex-start;
}
.ps-gallery { position: sticky; top: 92px; }
.ps-main-frame {
background: #fff;
border-radius: 20px;
padding: 0.9rem;
box-shadow: 0 20px 50px rgba(160, 100, 80, 0.14);
}
.ps-main-frame img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
display: block;
}
.ps-thumbs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 0.6rem;
margin-top: 0.8rem;
}
.ps-thumb {
border: 2px solid transparent;
border-radius: 10px;
background: #fff;
cursor: pointer;
overflow: hidden;
aspect-ratio: 1 / 1;
box-shadow: 0 6px 16px rgba(160, 100, 80, 0.10);
transition: var(--transition);
}
.ps-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ps-thumb:hover { border-color: var(--pink); }
.ps-thumb.on { border-color: var(--coral); }
.ps-buy { padding-top: 0.4rem; }
.ps-eyebrow {
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--terracota-texto); /* coral daba 1.76:1 a 12.5px */
display: block;
margin-bottom: 0.7rem;
}
.ps-buy h1 {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(2rem, 4vw, 2.9rem);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ink);
margin-bottom: 0.7rem;
}
.ps-buy h1 .accent { color: var(--coral); }
.ps-lead {
font-size: 1.04rem;
line-height: 1.7;
color: var(--text-soft);
margin-bottom: 1.5rem;
}
.ps-price-row {
display: flex;
align-items: baseline;
gap: 0.8rem;
margin-bottom: 1.5rem;
}
.ps-price {
font-family: 'Outfit', sans-serif;
font-size: 2.4rem;
font-weight: 700;
color: var(--ink);
}
.ps-price-note { font-size: 0.85rem; color: var(--light-text); }
.ps-includes {
list-style: none;
display: grid;
gap: 0.6rem;
margin-bottom: 1.8rem;
padding: 1.3rem 1.4rem;
background: #fff;
border: 1px solid rgba(249, 205, 198, 0.7);
border-radius: 16px;
}
.ps-includes li {
display: flex;
align-items: flex-start;
gap: 0.65rem;
font-size: 0.92rem;
color: var(--text-soft);
}
.ps-includes li::before {
content: '✓';
color: var(--coral);
font-weight: 700;
flex-shrink: 0;
}
.ps-includes strong { color: var(--ink); font-weight: 600; }
.ps-buy-btn { width: 100%; justify-content: center; font-size: 1rem; padding: 1rem; }
.ps-buy-sub {
text-align: center;
font-size: 0.8rem;
color: var(--light-text);
margin-top: 0.8rem;
}
.ps-trust {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 1.4rem;
}
.ps-trust span {
font-size: 0.74rem;
color: var(--text-soft);
background: var(--blush);
border-radius: 50px;
padding: 0.3rem 0.85rem;
}
/* — Secciones de contenido — */
.ps-section { padding: 4.5rem 2rem; }
.ps-section--white { background: var(--white); }
.ps-section--blush { background: linear-gradient(135deg, var(--blush), var(--cream)); }
.ps-section .section-inner { max-width: 1100px; }
.ps-set-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.4rem;
}
.ps-set-card {
background: var(--white);
border-radius: var(--radius);
padding: 1.6rem 1.5rem;
box-shadow: var(--shadow);
border: 1px solid rgba(249, 205, 198, 0.5);
transition: var(--transition);
}
.ps-set-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.ps-set-emoji {
width: 54px; height: 54px;
border-radius: 14px;
background: var(--blush);
display: flex; align-items: center; justify-content: center;
margin-bottom: 1rem;
}
.ps-set-emoji img { width: 80%; height: 80%; object-fit: contain; display: block; }
.ps-set-card h3 {
font-family: 'Outfit', sans-serif;
font-weight: 600;
font-size: 1.02rem;
color: var(--ink);
margin-bottom: 0.35rem;
}
.ps-set-card p { font-size: 0.86rem; color: var(--light-text); line-height: 1.55; margin-bottom: 0.8rem; }
.ps-chip {
display: inline-block;
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.04em;
color: var(--terracota-texto); /* --dark daba 3.1:1 */
background: var(--blush);
border-radius: 50px;
padding: 0.22rem 0.7rem;
}
.ps-versions {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.6rem;
}
.ps-version-card {
background: var(--white);
border-radius: var(--radius);
padding: 2rem 1.9rem;
box-shadow: var(--shadow);
border: 1px solid rgba(249, 205, 198, 0.5);
}
.ps-version-tag {
display: inline-block;
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--on-accent); /* blanco daba 1.92:1 sobre coral */
background: var(--coral);
border-radius: 50px;
padding: 0.3rem 0.85rem;
margin-bottom: 1rem;
}
.ps-version-tag.sage { background: var(--sage); color: var(--ink); } /* el matcha no vira en Tsuki: blanco daba 1.85:1 */
.ps-version-card h3 {
font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 1.2rem;
color: var(--ink); margin-bottom: 0.6rem;
}
.ps-version-card > p { font-size: 0.92rem; color: var(--text-soft); line-height: 1.6; margin-bottom: 1rem; }
.ps-version-card ul { list-style: none; display: grid; gap: 0.5rem; }
.ps-version-card li { display: flex; gap: 0.55rem; font-size: 0.88rem; color: var(--light-text); }
.ps-version-card li::before { content: '✦'; color: var(--coral); flex-shrink: 0; }
.ps-inside {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
gap: 1rem;
}
.ps-inside-item {
background: var(--white);
border-radius: 14px;
padding: 1.2rem 1.3rem;
box-shadow: var(--shadow);
border: 1px solid rgba(249, 205, 198, 0.5);
}
.ps-inside-num {
font-family: 'Cormorant Garamond', serif;
font-size: 1.3rem; color: var(--terracota-texto); font-weight: 600; /* coral daba 1.92:1 y 20.8px aun no es texto grande */
display: block; margin-bottom: 0.35rem;
}
.ps-inside-item h3 {
font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem;
color: var(--ink); margin-bottom: 0.3rem;
}
.ps-inside-item p { font-size: 0.82rem; color: var(--light-text); line-height: 1.5; }
.ps-strip {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 1rem;
margin-top: 2.5rem;
}
.ps-strip img {
width: 100%;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(160, 100, 80, 0.14);
display: block;
}
.ps-faq { max-width: 760px; margin: 0 auto; display: grid; gap: 0.8rem; }
.ps-faq details {
background: var(--white);
border: 1px solid rgba(249, 205, 198, 0.7);
border-radius: 14px;
padding: 1.1rem 1.4rem;
}
.ps-faq summary {
font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.98rem;
color: var(--ink); cursor: pointer; list-style: none;
display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.ps-faq summary::-webkit-details-marker { display: none; }
.ps-faq summary::after { content: '+'; color: var(--coral); font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.ps-faq details[open] summary::after { content: '–'; }
.ps-faq details p { font-size: 0.9rem; color: var(--text-soft); line-height: 1.65; margin-top: 0.8rem; }
.ps-cta {
position: relative;
max-width: 1000px;
margin: 0 auto;
background: linear-gradient(135deg, var(--blush), var(--pink));
border-radius: 28px;
padding: 3.2rem 2.5rem;
text-align: center;
overflow: hidden;
}
.ps-cta-ninika { width: 116px; margin: 0 auto 1rem; display: block; }
.ps-cta h2 {
font-family: 'Outfit', sans-serif; font-weight: 700;
font-size: clamp(1.7rem, 3.5vw, 2.5rem); color: var(--ink);
margin-bottom: 0.6rem;
}
.ps-cta > p { color: var(--ink); /* --dark con opacity .85 caia bajo 2.5:1 sobre el rosa */ margin-bottom: 1.2rem; }
.ps-cta .ps-price { display: block; margin-bottom: 1.3rem; }
@media (max-width: 900px) {
.ps-hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
.ps-gallery { position: static; max-width: 520px; margin: 0 auto; }
.ps-set-grid { grid-template-columns: 1fr 1fr; }
.ps-versions { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
.ps-set-grid { grid-template-columns: 1fr; }
.ps-hero, .ps-section { padding-left: 1.25rem; padding-right: 1.25rem; }
}
/* ═══════════════════════════════════════════════
HOME PREMIUM — navbar, producto destacado, qué recibes, NANIKA Run
═══════════════════════════════════════════════ */
/* — Navbar — */
.nav-cta { padding: 0.5rem 1.2rem; font-size: 0.82rem; letter-spacing: 0.04em; }
/* link a la muestra gratis (pagina de producto → newsletter del index) */
.ps-muestra { margin-top: 0.4rem; font-size: 0.85rem; }
.ps-muestra a { color: var(--terracota-texto); text-decoration: underline; text-underline-offset: 3px; }
.ps-muestra a:hover { color: var(--terracota-texto); } /* coral daba 1.92:1 */
.cart-btn { padding: 0.5rem 0.9rem; }
.cart-ico { font-size: 1.05rem; line-height: 1; }
/* contorno carbón en los íconos (detalle coral/sage en el círculo) */
.feature-icon svg, .paso-icon svg, .recibes-ico svg { color: var(--ink); }
/* — Producto destacado — */
.featured-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
background: #fff;
border: 1px solid var(--pink);
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 20px 50px rgba(160, 100, 80, 0.10);
}
.featured-visual { position: relative; }
.featured-frame {
background: #fff;
border: 1px solid var(--blush);
border-radius: 16px;
padding: 0.8rem;
box-shadow: 0 16px 40px rgba(160, 100, 80, 0.12);
}
.featured-frame img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 10px;
display: block;
}
.featured-stickers-badge {
/* Washi tape, no pill (Nat, ago-2026): tira semitransparente de esquinas
casi rectas en vez de un badge solido con borde grueso - lee como cinta
de papel pegada sobre la foto, no como un boton flotante. */
position: absolute;
right: -12px;
bottom: -24px;
display: inline-flex;
align-items: center;
white-space: nowrap;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(255, 233, 233, 0.85));
color: var(--terracota-texto);
font-size: 0.76rem;
font-weight: 600;
border: none;
border-radius: 2px;
padding: 0.5rem 1.15rem;
box-shadow: 0 6px 16px rgba(90, 60, 50, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
transform: rotate(-4deg);
}
.featured-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1.12;
color: var(--ink);
margin: 0.4rem 0 0.5rem;
}
.featured-sub {
font-family: 'Outfit', sans-serif;
font-weight: 500;
font-size: 1.1rem;
color: var(--terracota-texto); /* era var(--dark): 3.64:1 */
margin-bottom: 0.85rem;
}
.featured-text {
font-size: 0.96rem;
color: var(--text-soft);
line-height: 1.65;
margin-bottom: 1.2rem;
}
.featured-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.3rem; }
.featured-badges span {
font-size: 0.72rem;
font-weight: 600;
color: var(--ink);
background: rgba(255, 233, 233, 0.55);
border: 1px solid var(--pink);
border-radius: 50px;
padding: 0.3rem 0.8rem;
}
.featured-price-row { display: flex; align-items: baseline; gap: 0.35rem; margin-bottom: 0.7rem; }
.featured-price { font-family: 'Outfit', sans-serif; font-size: 2rem; font-weight: 700; color: var(--ink); }
.featured-price-cur { font-size: 0.9rem; font-weight: 600; color: var(--light-text); }
.featured-incluye { font-size: 0.85rem; color: var(--text-soft); line-height: 1.6; margin-bottom: 1.4rem; }
.featured-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; }
/* — BUNDLE: SAKURA + TSUKI — misma estructura que .featured-card, con
mockup de dos portadas en abanico en vez de una sola imagen. */
.bundle-card {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
background: linear-gradient(155deg, #fff 0%, var(--cream) 100%);
border: 1px solid var(--gold);
border-radius: 24px;
padding: 2.5rem;
box-shadow: 0 20px 50px rgba(160, 100, 80, 0.12);
margin-top: 2.5rem;
}
.bundle-ribbon {
position: absolute;
top: -16px;
left: 2.5rem;
background: var(--gold);
color: var(--ink); /* blanco daba 1.73:1 */
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
padding: 0.45rem 1.1rem;
border-radius: 50px;
box-shadow: 0 10px 24px rgba(248, 185, 114, 0.4);
}
.bundle-visual { position: relative; }
.bundle-frame {
position: relative;
aspect-ratio: 4 / 3.1;
width: 100%;
}
.bundle-cover {
position: absolute;
width: 62%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 12px;
background: #fff;
border: 5px solid #fff;
box-shadow: 0 16px 34px rgba(90, 60, 50, 0.18);
}
.bundle-cover--a {
left: 2%;
top: 6%;
transform: rotate(-8deg);
z-index: 1;
}
.bundle-cover--b {
right: 2%;
bottom: 4%;
transform: rotate(6deg);
z-index: 2;
}
.bundle-price-old {
font-family: 'Outfit', sans-serif;
font-size: 1.15rem;
font-weight: 600;
color: var(--light-text);
text-decoration: line-through;
text-decoration-color: rgba(154, 129, 117, 0.6);
}
.btn-bundle { background: var(--gold); color: var(--ink); }
.btn-bundle:hover { background: #e3a45a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(248, 185, 114, 0.32); }
@media (max-width: 900px) {
.bundle-card { grid-template-columns: 1fr; gap: 2.5rem; }
.bundle-ribbon { left: 1.6rem; }
}
@media (max-width: 640px) {
.bundle-card { padding: 1.6rem; }
}
/* — Qué recibes — */
.recibes { margin-top: 3.8rem; }
.recibes-title {
text-align: center;
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: 1.3rem;
color: var(--ink);
margin-bottom: 1.9rem;
}
.recibes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.recibes-item {
background: #fff;
border: 1px solid rgba(249, 205, 198, 0.5);
border-radius: 16px;
padding: 1.6rem 1.3rem;
text-align: center;
box-shadow: var(--shadow);
transition: var(--transition);
}
.recibes-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.recibes-ico {
width: 48px;
height: 48px;
border-radius: 14px;
background: rgba(255, 233, 233, 0.6);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.95rem;
}
.recibes-ico svg { width: 23px; height: 23px; }
.recibes-ico img { width: 82%; height: 82%; object-fit: contain; display: block; }
.recibes-item h4 { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.3rem; }
.recibes-item p { font-size: 0.8rem; color: var(--light-text); line-height: 1.5; }
/* — Guiño universo (próximamente) — */
.soon-row { margin-top: 3rem; text-align: center; }
.soon-label {
display: block;
font-size: 0.74rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--light-text);
margin-bottom: 0.9rem;
}
.soon-items { display: flex; justify-content: center; gap: 0.7rem; flex-wrap: wrap; }
.soon-chip {
font-size: 0.82rem;
color: var(--text-soft);
background: var(--cream);
border: 1px dashed var(--pink);
border-radius: 50px;
padding: 0.45rem 1.1rem;
}
/* — CTA bajo los pasos — */
.pasos-cta { text-align: center; margin-top: 2.6rem; }
/* — NANIKA Run (teaser · mundo del juego) — */
.nanika-run {
position: relative;
overflow: hidden;
background: linear-gradient(160deg, #fff3e3 0%, #ffe9e9 55%, #f9cdc6 100%);
}
.nanika-run .section-inner { position: relative; z-index: 3; }
.run-mountains {
position: absolute;
left: 0; right: 0; bottom: 0;
width: 100%; height: 110px;
fill: rgba(246, 165, 155, 0.42);
z-index: 1;
}
.run-cloud {
position: absolute;
z-index: 1;
fill: rgba(255, 255, 255, 0.72);
height: auto;
}
.run-cloud--1 { width: 132px; top: 14%; left: 7%; animation: float 9s ease-in-out infinite; }
.run-cloud--2 { width: 96px; top: 28%; right: 12%; opacity: 0.85; animation: float 11s ease-in-out infinite; }
.run-cloud--3 { width: 168px; bottom: 30%; right: 24%; opacity: 0.6; animation: float 10s ease-in-out infinite; }
.run-card {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: 0.9fr 1.1fr;
align-items: center;
gap: 2.5rem;
}
.run-art { position: relative; display: flex; align-items: center; justify-content: center; min-height: 330px; }
.run-glow {
position: absolute;
width: 300px; height: 300px;
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 68%);
}
.run-ninika {
position: relative;
z-index: 2;
width: 260px;
max-width: 78%;
display: block;
filter: drop-shadow(0 18px 22px rgba(196, 112, 74, 0.22));
animation: float 5s ease-in-out infinite;
}
.run-star { position: absolute; fill: rgba(248, 185, 114, 0.95); z-index: 2; }
.run-star--1 { width: 22px; height: 22px; top: 12%; left: 16%; animation: float 6s ease-in-out infinite; }
.run-star--2 { width: 14px; height: 14px; top: 30%; right: 14%; opacity: 0.8; animation: float 7s ease-in-out infinite; }
.run-star--3 { width: 18px; height: 18px; bottom: 16%; left: 26%; opacity: 0.75; animation: float 5.5s ease-in-out infinite; }
.run-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.9);
color: var(--terracota-texto); /* #c4704a daba 3.64:1 a 11.8px */
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.04em;
padding: 0.42rem 1rem;
border-radius: 50px;
margin-bottom: 1.2rem;
}
.run-title {
font-family: 'Outfit', sans-serif;
font-weight: 700;
font-size: clamp(1.7rem, 3.4vw, 2.5rem);
line-height: 1.14;
color: #c4704a;
margin-bottom: 1rem;
text-shadow: none;
}
.run-desc {
font-size: 1.02rem;
line-height: 1.6;
color: var(--text-soft);
margin-bottom: 0.6rem;
max-width: 440px;
}
.run-hint {
font-size: 0.85rem;
font-weight: 600;
color: var(--terracota-texto); /* el gold daba 1.58:1 sobre crema */
margin-bottom: 0.6rem;
}
.run-q {
font-family: 'Cormorant Garamond', serif;
font-style: italic;
font-size: 1.4rem;
color: var(--terracota-texto); /* #c4704a daba 3.33:1 y a 22px aun no es texto grande */
margin-bottom: 1.7rem;
}
.run-soon {
display: inline-flex;
align-items: center;
gap: 0.4rem;
background: #fff;
color: #c4704a;
font-weight: 600;
font-size: 0.95rem;
padding: 0.8rem 1.7rem;
border-radius: 50px;
box-shadow: 0 8px 20px rgba(196, 112, 74, 0.18);
}
/* Botón "Jugar" con destello */
.run-play {
box-shadow: 0 8px 22px rgba(255, 164, 136, 0.25);
}
.run-play .run-play-spark {
display: inline-block;
font-size: 1.05em;
animation: twinkle 1.7s ease-in-out infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
50% { opacity: 0.45; transform: scale(1.4) rotate(20deg); }
}
/* — Responsive home premium — */
@media (max-width: 900px) {
.featured-card { grid-template-columns: 1fr; gap: 2.5rem; }
.featured-stickers-badge { right: 8px; }
.recibes-grid { grid-template-columns: 1fr 1fr; }
.run-card { grid-template-columns: 1fr; text-align: center; gap: 1rem; }
.run-desc, .run-q { margin-left: auto; margin-right: auto; }
.run-art { order: -1; min-height: 250px; }
}
@media (max-width: 560px) {
.recibes-grid { grid-template-columns: 1fr; }
.featured-card { padding: 1.6rem; }
}
/* — Menú mobile (hamburguesa) — */
.nav-toggle {
display: none;
background: var(--blush);
border: none;
border-radius: 12px;
width: 40px;
height: 40px;
cursor: pointer;
align-items: center;
justify-content: center;
color: var(--ink);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-menu-cta { display: none; }
/* Breakpoint subido 640 → 1080 (jul-2026): con el nombre oficial "Planner
Digital Sakura" el nav inline desbordaba bajo ~1080px (links 651px + logo
+ botón Comprar + carrito ≈ 1020px). */
@media (max-width: 1080px) {
.nav-toggle { display: inline-flex; }
.nav-links {
display: flex;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
background: var(--white);
border-top: 1px solid var(--blush);
border-bottom: 1px solid var(--pink);
box-shadow: 0 16px 32px rgba(160, 100, 80, 0.14);
padding: 0.4rem 1.25rem 1.1rem;
transform: translateY(-10px);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s ease;
z-index: 90;
}
.nav-links.open { transform: translateY(0); opacity: 1; pointer-events: all; }
.nav-links li { width: 100%; }
.nav-links > li > a {
display: block;
padding: 0.9rem 0.2rem;
border-bottom: 1px solid var(--blush);
text-transform: none;
font-size: 0.98rem;
letter-spacing: 0.02em;
}
.nav-menu-cta { display: block; margin-top: 0.9rem; }
.nav-menu-cta a { display: block; text-align: center; padding: 0.85rem; border-bottom: none; }
/* Desplegable de planners: en mobile se muestra siempre abierto como
bloque de dos sub-items, sin toggle. */
.nav-dd { width: 100%; border-bottom: 1px solid var(--blush); }
.nav-dd-trigger {
width: 100%;
justify-content: flex-start;
padding: 0.9rem 0.2rem 0.5rem;
text-transform: none;
font-size: 0.98rem;
letter-spacing: 0.02em;
color: var(--ink);
cursor: default;
}
.nav-dd-caret { display: none; }
.nav-dd-panel {
position: static;
transform: none;
opacity: 1;
pointer-events: all;
min-width: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
padding: 0 0 0.5rem;
gap: 0.1rem;
}
.nav-dd-panel::before { display: none; }
.nav-dd-item { padding: 0.5rem 0.4rem; }
}
@media (max-width: 640px) {
.nav-cta { display: none; }
}
/* ══════════════════════════════════════════════════════════════
TEMA TSUKI — viraje morado de la paleta madre (jul-2026)
Reusa TODAS las reglas .ps-*, .btn-primary, etc. — solo cambia
las variables de color bajo body.pt-main, igual que build_planner.py
parametriza por THEME en el planner. Cero duplicación de layout.
══════════════════════════════════════════════════════════════ */
body.pt-main {
--coral: #8b5fbf; /* amatista — acento principal, CTAs */
--dark: #6b4494; /* plum profundo — texto de énfasis, hover de botones */
--pink: #e6d3f5; /* lila claro — bordes, hover de thumbs */
--blush: #f3ebfa; /* lila muy pálido — fondos secundarios */
/* El token de texto-con-color también tiene que virar, si no el drawer del carrito
y las etiquetas de sección salen terracota cálida dentro de una página morada.
El plum ya sirve como texto: 7.29:1 sobre blanco y 6.66:1 sobre crema, mejor que
los 5.05:1 del terracota en Sakura (ago-2026). */
--terracota-texto: #6b4494;
--on-accent: #ffffff; /* la amatista es oscura: acá el carbón daría 3.03:1 */
--accent-on-dark: #b98fe0; /* amatista aclarada: 5.44:1 sobre el footer (la original daba 3.03:1) */
/* Fondo de página propio (Nat, ago-2026): heredaba el --cream cálido de Sakura por
defecto (nunca se sobreescribía acá), y quedaba un durazno tibio detrás de una
portada morada noche. Mismo degradado que ya usa .ps-section--blush en esta
página ("Elige cómo quieres planificar"), ahora como fondo de TODO el body. */
background: linear-gradient(135deg, var(--blush), var(--pink));
}
/* — Card de Tsuki en el home: MISMA estructura .featured-card que Sakura
(mismo tamaño, mismo peso visual), solo con acento morado en vez de coral.
Las clases base (.featured-card, .featured-visual, .featured-title, etc.)
se reusan tal cual; acá solo se sobreescriben los valores hardcodeados
en rgba/hex que no responden al cascade de variables de body.pt-main
(esta card vive en index.html, que no lleva esa clase en el body). — */
.featured-card--tsuki {
margin-top: 3.8rem;
border-color: #e6d3f5;
box-shadow: 0 20px 50px rgba(139, 95, 191, 0.14);
}
.featured-card--tsuki .featured-frame {
border-color: #f3ebfa;
box-shadow: 0 16px 40px rgba(139, 95, 191, 0.16);
}
.featured-card--tsuki .featured-stickers-badge {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(230, 211, 245, 0.85));
color: #6b4494;
}
.featured-card--tsuki .featured-sub { color: #6b4494; }
.featured-card--tsuki .featured-badges span {
background: rgba(230, 211, 245, 0.55);
border-color: #e6d3f5;
}
.btn-tsuki { background: #8b5fbf; color: #fff; }
.btn-tsuki:hover { background: #6b4494; transform: translateY(-2px); box-shadow: 0 8px 26px rgba(139, 95, 191, 0.3); }
.btn-soft-tsuki { background: var(--white); color: var(--ink); border: 1.5px solid #e6d3f5; box-shadow: 0 4px 18px rgba(139, 95, 191, 0.12); }
.btn-soft-tsuki:hover { background: #f3ebfa; color: #6b4494; border-color: #8b5fbf; }