/* ============================================================
LOGRAMO — STYLES v3 (Hard-Edge Edition)
· Hard-edge offset shadows on every surface
· 2-3px solid borders for definition
· Helvetica Neue (display) + Inter (body)
· ALL CAPS labels, bold geometric system
============================================================ */
/* Inter is loaded via + in each page's
(moved out of @import to avoid the render-blocking font waterfall). */
/* ---------- Helvetica Neue (local files) ---------- */
@font-face {
font-family: 'HelveticaNeue';
src: url('fonts/HelveticaNeue-Roman.otf') format('opentype');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('fonts/HelveticaNeue-Medium.otf') format('opentype');
font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('fonts/HelveticaNeueBold.ttf') format('truetype');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('fonts/HelveticaNeue-Heavy.otf') format('opentype');
font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'HelveticaNeue';
src: url('fonts/HelveticaNeue-Black.otf') format('opentype');
font-weight: 900; font-style: normal; font-display: swap;
}
/* ---------- Helvetica Neue Condensed (local files) — display heading font ---------- */
@font-face {
font-family: 'HelveticaCond';
src: url('fonts/HelveticaNeueCondensedBold.ttf') format('truetype');
font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'HelveticaCond';
src: url('fonts/HelveticaNeueCondensedBlack.ttf') format('truetype');
font-weight: 900; font-style: normal; font-display: swap;
}
/* ============================================================
DESIGN TOKENS
============================================================ */
:root {
/* Colors */
--c-cream: #FEFAE8;
--c-cream-alt: #F8F3D9;
--c-tan: #F4E6B5;
--c-peach: #FFCDB8;
--c-pink: #FCD1D8;
--c-lavender: #F2DCFF;
--c-sky: #ADCBEF;
--c-sage: #B5C1AB;
--c-golden: #F6D055;
--c-terracotta: #C55932;
--c-terra-dark: #A8461F;
--c-forest: #3C4824;
--c-rose: #DBC3C3;
--c-burgundy: #C65768;
--c-text: #1E2820;
--c-ink: #111A17; /* darkest, for shadows + borders */
--c-text-muted: #5A6857;
--c-border: #1E2820;
/* Type */
--font-display: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-body: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
--font-heading: 'HelveticaCond', 'Helvetica Neue Condensed', 'Helvetica Neue', 'Impact', Helvetica, Arial, sans-serif;
--font-heading-sm: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
/* Spacing */
--section-py: 120px;
--container: 1320px;
--container-sm: 960px;
--container-xs: 720px;
--radius-sm: 12px;
--radius-md: 20px;
--radius-lg: 28px;
--radius-xl: 40px;
--radius-2xl: 56px;
--radius-full: 9999px;
/* Hard-edge shadows (NO soft blur) */
--shadow-xs: 2px 2px 0 var(--c-ink);
--shadow-sm: 4px 4px 0 var(--c-ink);
--shadow-md: 6px 6px 0 var(--c-ink);
--shadow-lg: 10px 10px 0 var(--c-ink);
--shadow-xl: 14px 14px 0 var(--c-ink);
/* Coloured offset shadows */
--shadow-terra: 6px 6px 0 var(--c-terracotta);
--shadow-golden: 6px 6px 0 var(--c-golden);
--shadow-forest: 6px 6px 0 var(--c-forest);
/* Borders */
--bw-1: 2px;
--bw-2: 3px;
/* Motion */
--ease: cubic-bezier(.22,.61,.36,1);
--ease-out: cubic-bezier(.16,1,.3,1);
--ease-back: cubic-bezier(.34,1.56,.64,1);
--transition: .25s var(--ease);
}
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
font-family: var(--font-body);
background: var(--c-cream);
color: var(--c-text);
font-weight: 400;
line-height: 1.6;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { border: none; background: none; cursor: pointer; font-family: inherit; color: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--c-terracotta); color: var(--c-cream); }
/* ============================================================
LAYOUT
============================================================ */
.container {
width: 100%;
max-width: var(--container);
margin: 0 auto;
padding: 0 28px;
}
.container--sm { max-width: var(--container-sm); }
.container--xs { max-width: var(--container-xs); }
.section { padding: var(--section-py) 0; }
.section--sm { padding: 80px 0; }
/* ============================================================
TYPOGRAPHY
============================================================ */
/* Biggest display headlines — Helvetica Condensed Black */
.display-2xl, .display-xl, .display-lg, .display-md, .display-sm,
h1, h2 {
font-family: var(--font-heading);
font-weight: 900;
line-height: .94;
letter-spacing: -.015em;
text-transform: uppercase;
color: var(--c-text);
}
.display-2xl { font-size: clamp(4.5rem, 11vw, 10rem); }
.display-xl { font-size: clamp(3.8rem, 9vw, 8rem); }
.display-lg { font-size: clamp(3rem, 7vw, 6.5rem); }
.display-md { font-size: clamp(2.4rem, 5vw, 4.5rem); }
.display-sm { font-size: clamp(1.8rem, 3vw, 2.8rem); }
h1 { font-size: clamp(3.4rem, 7.5vw, 6.5rem); }
h2 { font-size: clamp(2.6rem, 5.5vw, 5rem); }
/* Smaller titles — regular Helvetica Neue Bold */
h3, h4, h5, h6 {
font-family: var(--font-heading-sm);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.01em;
text-transform: uppercase;
color: var(--c-text);
}
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: .9rem; }
.lead {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.55;
color: var(--c-text-muted);
font-weight: 400;
}
.text-muted { color: var(--c-text-muted); }
.text-small { font-size: .85rem; }
.text-center { text-align: center; }
/* ALL CAPS — used widely per brief */
.caps {
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 700;
}
.caps--tight { letter-spacing: .04em; }
.caps--display {
font-family: var(--font-body);
font-weight: 900;
letter-spacing: .02em;
text-transform: uppercase;
}
.eyebrow {
display: inline-flex; align-items: center; gap: 10px;
font-family: var(--font-body);
font-weight: 600;
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--c-terracotta);
margin-bottom: 18px;
}
.eyebrow::before {
content: '';
width: 28px; height: 3px;
background: currentColor;
}
.eyebrow--light { color: var(--c-golden); }
.eyebrow--ink { color: var(--c-text); }
/* ============================================================
BUTTONS — hard-edge offset shadow style
============================================================ */
.btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
border-radius: var(--radius-full);
font-family: var(--font-body);
font-weight: 700;
font-size: .82rem;
text-transform: uppercase;
letter-spacing: .06em;
white-space: nowrap;
cursor: pointer;
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
color: var(--c-ink);
box-shadow: var(--shadow-sm);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
position: relative;
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--transition); }
.btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--c-ink); }
.btn:hover .icon { transform: translateX(3px); }
.btn--primary { background: var(--c-terracotta); color: var(--c-cream); }
.btn--secondary{ background: var(--c-forest); color: var(--c-cream); }
.btn--golden { background: var(--c-golden); color: var(--c-ink); }
.btn--dark { background: var(--c-ink); color: var(--c-cream); }
.btn--cream { background: var(--c-cream); color: var(--c-ink); }
.btn--peach { background: var(--c-peach); color: var(--c-ink); }
.btn--sky { background: var(--c-sky); color: var(--c-ink); }
.btn--ghost {
background: transparent;
box-shadow: none;
}
.btn--ghost:hover { background: var(--c-ink); color: var(--c-cream); transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.btn--lg { padding: 20px 36px; font-size: .9rem; }
.btn--sm { padding: 10px 18px; font-size: .72rem; }
.btn--icon { padding: 0; width: 44px; height: 44px; justify-content: center; }
.btn--icon .icon { width: 20px; height: 20px; }
/* ============================================================
ICONS
============================================================ */
.icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; fill: currentColor; }
.icon--xs { width: 14px; height: 14px; }
.icon--sm { width: 16px; height: 16px; }
.icon--md { width: 24px; height: 24px; }
.icon--lg { width: 32px; height: 32px; }
.icon--xl { width: 48px; height: 48px; }
.icon--2xl { width: 72px; height: 72px; }
/* ============================================================
TAGS / BADGES
============================================================ */
.tag {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 14px;
border-radius: var(--radius-full);
background: var(--c-cream);
color: var(--c-ink);
font-family: var(--font-body);
font-weight: 700;
font-size: .68rem;
letter-spacing: .08em;
text-transform: uppercase;
border: var(--bw-1) solid var(--c-ink);
}
.tag--solid { background: var(--c-ink); color: var(--c-cream); }
.tag--terra { background: var(--c-terracotta); color: var(--c-cream); }
.tag--forest { background: var(--c-forest); color: var(--c-cream); }
.tag--golden { background: var(--c-golden); color: var(--c-ink); }
.tag--peach { background: var(--c-peach); color: var(--c-ink); }
.tag--sky { background: var(--c-sky); color: var(--c-ink); }
.tag--sage { background: var(--c-sage); color: var(--c-ink); }
.tag--lavender { background: var(--c-lavender); color: var(--c-ink); }
.tag--pink { background: var(--c-pink); color: var(--c-ink); }
.tag-sticker {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
border-radius: var(--radius-full);
background: var(--c-golden);
color: var(--c-ink);
font-family: var(--font-body);
font-weight: 800;
font-size: .78rem;
letter-spacing: .04em;
text-transform: uppercase;
border: var(--bw-1) solid var(--c-ink);
box-shadow: var(--shadow-xs);
transform: rotate(-2deg);
transition: transform var(--transition), box-shadow var(--transition);
}
.tag-sticker:hover { transform: rotate(0); box-shadow: var(--shadow-sm); }
/* ============================================================
CARDS / SURFACES — unified hard-edge style
============================================================ */
.card {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-md); }
.card--tan { background: var(--c-tan); }
.card--peach { background: var(--c-peach); }
.card--sky { background: var(--c-sky); }
.card--sage { background: var(--c-sage); }
.card--lavender { background: var(--c-lavender); }
.card--golden { background: var(--c-golden); }
.card--pink { background: var(--c-pink); }
.card--forest { background: var(--c-forest); color: var(--c-cream); }
.card--dark { background: var(--c-ink); color: var(--c-cream); }
.card--terra { background: var(--c-terracotta); color: var(--c-cream); }
/* Surface block (a coloured section container) */
.surface-block {
border-radius: var(--radius-2xl);
border: var(--bw-1) solid var(--c-ink);
box-shadow: var(--shadow-md);
padding: 80px clamp(28px, 5vw, 72px);
overflow: hidden;
position: relative;
}
.surface-block--cream { background: var(--c-cream); }
.surface-block--tan { background: var(--c-tan); }
.surface-block--peach { background: var(--c-peach); }
.surface-block--sky { background: var(--c-sky); }
.surface-block--lavender { background: var(--c-lavender); }
.surface-block--sage { background: var(--c-sage); }
.surface-block--pink { background: var(--c-pink); }
.surface-block--golden { background: var(--c-golden); }
.surface-block--forest { background: var(--c-forest); color: var(--c-cream); }
.surface-block--dark { background: var(--c-ink); color: var(--c-cream); }
.surface-block--terra { background: var(--c-terracotta); color: var(--c-cream); }
.surface-block--forest h1, .surface-block--forest h2, .surface-block--forest h3,
.surface-block--dark h1, .surface-block--dark h2, .surface-block--dark h3,
.surface-block--terra h1, .surface-block--terra h2, .surface-block--terra h3 {
color: var(--c-cream);
}
/* ============================================================
NAVIGATION
============================================================ */
.nav {
position: sticky; top: 0; z-index: 100;
background: var(--c-cream);
border-bottom: var(--bw-1) solid var(--c-ink);
padding: 16px 0;
transition: padding .25s var(--ease);
}
.nav.scrolled { padding: 10px 0; }
.nav__inner {
display: flex; align-items: center; justify-content: space-between;
gap: 24px;
}
.nav__logo {
display: flex; align-items: center; gap: 8px;
color: var(--c-terracotta); /* BRIGHT LOGO COLOR */
transition: transform .25s var(--ease-back);
}
.nav__logo:hover { transform: scale(1.04) rotate(-1deg); }
.nav__logo svg { height: 26px; width: auto; color: inherit; }
.nav__logo svg path { fill: currentColor; }
.nav__links {
display: flex; align-items: center; gap: 8px;
}
.nav__links a {
font-family: var(--font-body);
font-weight: 700;
font-size: .78rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--c-ink);
padding: 9px 16px;
border-radius: var(--radius-full);
border: var(--bw-1) solid transparent;
background: transparent;
box-shadow: 0 0 0 transparent;
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease), border-color .2s var(--ease);
}
.nav__links a:hover {
background: var(--c-cream);
border-color: var(--c-ink);
box-shadow: 3px 3px 0 var(--c-ink);
transform: translate(-2px, -2px);
}
.nav__links a.active {
background: var(--c-golden);
border-color: var(--c-ink);
box-shadow: 3px 3px 0 var(--c-ink);
color: var(--c-ink);
}
.nav__actions { display: flex; align-items: center; gap: 10px; position: relative; }
/* Currency chip + popover */
.ccy-chip {
display: inline-flex; align-items: center; gap: 6px;
height: 38px; padding: 0 12px;
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink); border-radius: 9999px;
font-family: var(--font-display); font-weight: 800;
font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
cursor: pointer; box-shadow: 2px 2px 0 var(--c-ink);
transition: transform .15s, box-shadow .15s;
}
.ccy-chip:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--c-ink); }
.ccy-chip__flag { font-size: 1rem; line-height: 1; }
.ccy-chip__code { letter-spacing: .08em; }
.ccy-popover {
position: absolute; top: calc(100% + 10px); right: 0;
background: var(--c-cream); border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-md); box-shadow: 5px 5px 0 var(--c-ink);
padding: 6px; z-index: 120;
min-width: 220px; max-height: 360px; overflow-y: auto;
display: flex; flex-direction: column; gap: 4px;
}
.ccy-popover[hidden] { display: none; }
.ccy-popover__item {
display: flex; align-items: center; gap: 10px;
padding: 8px 12px; border-radius: var(--radius-sm);
background: transparent; border: 0; cursor: pointer;
font-family: var(--font-body); font-size: .9rem; color: var(--c-ink);
text-align: left; width: 100%;
}
.ccy-popover__item:hover { background: var(--c-cream-alt); }
.ccy-popover__item.is-active { background: var(--c-golden); }
.ccy-popover__flag { font-size: 1.1rem; line-height: 1; width: 22px; text-align: center; }
.ccy-popover__code { font-family: var(--font-display); font-weight: 800; font-size: .72rem; letter-spacing: .06em; color: var(--c-text-muted); margin-left: auto; }
.ccy-popover__item.is-active .ccy-popover__code { color: var(--c-ink); }
@media (max-width: 760px) {
.ccy-chip { height: 34px; padding: 0 10px; }
.ccy-chip__code { display: none; }
}
.nav__btn {
position: relative;
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
color: var(--c-ink);
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
}
.nav__btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); background: var(--c-golden); }
.nav__btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 var(--c-ink); }
/* Logged-in state: golden background with 2-letter initials */
.nav__btn--user .nav__initials {
font-family: var(--font-display);
font-weight: 900;
font-size: .82rem;
letter-spacing: .02em;
line-height: 1;
color: var(--c-ink);
}
.nav__btn--user:has(.nav__initials:not([hidden])) {
background: var(--c-golden);
}
.cart-count {
position: absolute; top: -4px; right: -4px;
background: var(--c-terracotta); color: var(--c-cream);
font-family: var(--font-body); font-weight: 900; font-size: .65rem;
min-width: 20px; height: 20px; padding: 0 4px;
border-radius: 10px;
display: flex; align-items: center; justify-content: center;
border: var(--bw-1) solid var(--c-ink);
opacity: 0; transform: scale(.4);
transition: all .25s var(--ease-back);
}
.cart-count.visible { opacity: 1; transform: scale(1); }
.nav__hamburger { display: none; }
/* Mobile Nav */
.mobile-nav {
display: none;
position: fixed; inset: 0; z-index: 300;
background: var(--c-forest);
flex-direction: column; padding: 24px;
}
.mobile-nav.open { display: flex; }
.mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; }
.mobile-nav__head .nav__logo { color: var(--c-golden); }
.mobile-nav__close {
width: 44px; height: 44px; border-radius: 50%;
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
}
.mobile-nav__head .nav__logo { color: var(--c-golden); }
.mobile-nav__head .nav__logo svg,
.mobile-nav__head .nav__logo svg path { fill: var(--c-golden) !important; color: var(--c-golden); }
.mobile-nav__links {
display: flex; flex-direction: column; gap: 6px; flex: 1;
align-items: center;
justify-content: flex-start;
text-align: center;
padding-top: 12px;
}
.mobile-nav__links li { width: 100%; text-align: center; }
.mobile-nav__links a {
display: block;
font-family: var(--font-heading);
font-size: clamp(2.4rem, 10vw, 3.6rem); font-weight: 900;
text-transform: uppercase; letter-spacing: -.015em;
color: var(--c-cream);
padding: 18px 0;
border-bottom: var(--bw-1) solid rgba(254,250,232,.12);
transition: color var(--transition), transform var(--transition);
}
.mobile-nav__links li:last-child a { border-bottom: none; }
.mobile-nav__links a:hover { color: var(--c-golden); transform: scale(1.04); }
/* ============================================================
HERO
============================================================ */
.hero { padding: 80px 0 40px; overflow: hidden; }
.hero__inner {
display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px;
align-items: center;
}
.hero__pretitle { margin-bottom: 24px; display: flex; align-items: center; gap: 12px; }
.hero__title {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(3rem, 7.5vw, 7rem);
line-height: .92;
letter-spacing: -.045em;
margin-bottom: 28px;
text-transform: none;
}
.hero__title .word {
display: inline-block;
opacity: 0;
transform: translateY(40px);
animation: heroWord .85s var(--ease-out) forwards;
}
.hero__title .word:nth-child(1) { animation-delay: .05s; }
.hero__title .word:nth-child(2) { animation-delay: .12s; }
.hero__title .word:nth-child(3) { animation-delay: .19s; color: var(--c-terracotta); }
.hero__title .word:nth-child(4) { animation-delay: .26s; }
.hero__title .word:nth-child(5) { animation-delay: .33s; }
.hero__title .word:nth-child(6) { animation-delay: .40s; }
.hero__title .word:nth-child(7) { animation-delay: .47s; }
.hero__title .word:nth-child(8) { animation-delay: .54s; }
@keyframes heroWord { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
.hero__sub {
font-size: clamp(1.05rem, 1.4vw, 1.2rem);
line-height: 1.55;
color: var(--c-text-muted);
margin-bottom: 36px;
max-width: 520px;
opacity: 0; animation: fadeUp .8s var(--ease-out) .7s forwards;
}
.hero__ctas {
display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 44px;
opacity: 0; animation: fadeUp .8s var(--ease-out) .85s forwards;
}
.hero__proof {
display: flex; align-items: center; gap: 16px;
font-family: var(--font-body); font-size: .78rem; font-weight: 600;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-text-muted);
opacity: 0; animation: fadeUp .8s var(--ease-out) 1s forwards;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.hero__avatars { display: flex; }
.hero__avatar {
width: 36px; height: 36px; border-radius: 50%;
border: var(--bw-1) solid var(--c-ink);
background: var(--c-sage); color: var(--c-forest);
font-family: var(--font-body); font-weight: 900; font-size: .78rem;
display: flex; align-items: center; justify-content: center;
margin-left: -10px;
}
.hero__avatar:first-child { margin-left: 0; }
.hero__image { position: relative; opacity: 0; animation: fadeIn 1s var(--ease-out) .3s forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.hero__img-wrap {
position: relative;
border-radius: var(--radius-2xl);
overflow: hidden;
aspect-ratio: 5/6;
border: var(--bw-2) solid var(--c-ink);
box-shadow: var(--shadow-lg);
background: var(--c-tan);
}
.hero__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.hero__img-wrap .hero__img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease-out), transform 1.4s var(--ease-out); }
.hero__img-wrap .hero__img.is-active { opacity: 1; }
.hero__sticker {
position: absolute;
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
padding: 12px 20px;
font-family: var(--font-body);
font-weight: 800;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .04em;
display: flex; align-items: center; gap: 8px;
box-shadow: var(--shadow-sm);
animation: floaty 4s ease-in-out infinite;
}
.hero__sticker--1 { top: 8%; left: -30px; transform: rotate(-6deg); background: var(--c-golden); --rot: -6deg; }
.hero__sticker--2 { bottom: 22%; right: -20px; transform: rotate(5deg); background: var(--c-terracotta); color: var(--c-cream); --rot: 5deg; animation-delay: 1s; }
.hero__sticker--3 { bottom: -10px; left: 20%; transform: rotate(-3deg); --rot: -3deg; animation-delay: 2s; }
/* Per-image badge groups: fade in/out in sync with the active hero image */
.hero__stickers { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-out); }
.hero__stickers.is-active { opacity: 1; }
/* Second image's badge palette (distinct from the first set) */
.hero__stickers--b .hero__sticker--1 { background: var(--c-peach); color: var(--c-ink); }
.hero__stickers--b .hero__sticker--2 { background: var(--c-forest); color: var(--c-cream); }
.hero__stickers--b .hero__sticker--3 { background: var(--c-sky); color: var(--c-ink); }
@keyframes floaty {
0%,100% { transform: translateY(0) rotate(var(--rot)); }
50% { transform: translateY(-10px) rotate(var(--rot)); }
}
/* ============================================================
MARQUEE
============================================================ */
.marquee-wrap {
margin: 0 28px;
background: var(--c-ink);
color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 26px 0;
overflow: hidden;
}
.marquee-track {
display: flex; align-items: center;
width: max-content;
white-space: nowrap;
animation: marquee 14s linear infinite;
}
.marquee-track > span { flex: 0 0 auto; }
.marquee-track > span {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(1.6rem, 3vw, 2.4rem);
letter-spacing: .02em; text-transform: uppercase;
padding: 0 28px;
display: inline-flex; align-items: center; gap: 28px;
}
.marquee-track > span::after {
content: ''; display: inline-block;
width: 16px; height: 16px;
background: var(--c-golden);
border-radius: 50%;
margin-left: 28px;
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* Mobile: content is narrower; tuned duration for a comfortable scroll speed */
@media (max-width: 768px) {
.marquee-track { animation-duration: 15s; }
}
/* ============================================================
EMPIEZA AQUÍ
============================================================ */
.start-here { padding: var(--section-py) 0; }
#empieza { scroll-margin-top: 90px; } /* clear the sticky nav when the hero button jumps here */
.start-here__head {
display: grid; grid-template-columns: 1.6fr 1fr; gap: 60px;
align-items: end; margin-bottom: 56px;
}
.start-here__grid {
display: grid; grid-template-columns: repeat(3,1fr); gap: 24px;
}
.path-card {
position: relative;
padding: 40px;
border-radius: var(--radius-xl);
border: var(--bw-1) solid var(--c-ink);
box-shadow: var(--shadow-sm);
background: var(--c-tan);
display: flex; flex-direction: column;
min-height: 360px;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
cursor: pointer;
overflow: hidden;
}
.path-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-md); }
.path-card__num {
font-family: var(--font-body);
font-weight: 800;
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .12em;
margin-bottom: 24px;
opacity: .55;
}
.path-card__illo {
width: 88px; height: 88px;
margin-bottom: 24px;
display: flex; align-items: center; justify-content: center;
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
transform: rotate(-3deg);
transition: transform .3s var(--ease-back);
}
.path-card:hover .path-card__illo { transform: rotate(0) scale(1.06); }
.path-card__title {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(1.3rem, 1.9vw, 1.8rem);
line-height: 1.05;
letter-spacing: -.025em;
margin-bottom: 14px;
}
.path-card__desc { font-size: .95rem; line-height: 1.6; opacity: .82; margin-bottom: 28px; flex: 1; }
.path-card__cta {
align-self: flex-start;
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 18px;
background: var(--c-ink); color: var(--c-cream);
border-radius: var(--radius-full);
font-family: var(--font-body); font-weight: 700; font-size: .74rem;
text-transform: uppercase; letter-spacing: .08em;
transition: gap .2s var(--ease);
}
.path-card:hover .path-card__cta { gap: 14px; }
.path-card--1 { background: var(--c-peach); }
.path-card--2 { background: var(--c-sky); }
.path-card--3 { background: var(--c-golden); }
/* ============================================================
STATS / TRUST — ALL CAPS, geometric icons
============================================================ */
.stats-block {
margin: 0 28px var(--section-py);
background: var(--c-forest);
color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 64px 56px;
}
.stats-block__head { text-align: center; margin-bottom: 40px; }
.stats-block__head .eyebrow { color: var(--c-golden); justify-content: center; }
.stats-block__title {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(1.6rem, 2.5vw, 2.2rem);
text-transform: uppercase;
letter-spacing: .01em;
color: var(--c-cream);
}
.stats-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 0;
border-top: var(--bw-1) solid rgba(254,250,232,.15);
}
.stat {
padding: 36px 24px;
text-align: center;
border-right: var(--bw-1) solid rgba(254,250,232,.15);
display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.stat:last-child { border-right: none; }
.stat__icon {
width: 56px; height: 56px;
background: var(--c-golden);
color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
margin-bottom: 4px;
}
.stat__number {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(2.2rem, 4vw, 3.6rem);
letter-spacing: -.04em;
line-height: 1;
color: var(--c-golden);
}
.stat__label {
font-family: var(--font-body);
font-weight: 700;
font-size: .72rem;
letter-spacing: .12em;
text-transform: uppercase;
color: rgba(254,250,232,.7);
}
/* ============================================================
FREEBIE
============================================================ */
.freebie {
margin: 0 28px var(--section-py);
background: var(--c-pink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 80px 64px;
position: relative;
}
.freebie__inner {
display: grid; grid-template-columns: 1fr 1fr; gap: 64px;
align-items: center;
}
.freebie__title {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(2.4rem, 5vw, 4rem);
line-height: .95;
letter-spacing: -.035em;
margin-bottom: 24px;
}
.freebie__title em { font-style: normal; color: var(--c-terracotta); }
.freebie__desc { font-size: 1.02rem; line-height: 1.65; opacity: .82; margin-bottom: 32px; max-width: 480px; }
.freebie__bullets { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; }
.freebie__bullet {
display: flex; align-items: flex-start; gap: 14px;
font-size: 1rem; font-weight: 500;
}
.freebie__bullet-icon {
width: 28px; height: 28px; flex-shrink: 0;
background: var(--c-terracotta); color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
}
.freebie__img-wrap {
border-radius: var(--radius-xl);
border: var(--bw-2) solid var(--c-ink);
overflow: hidden;
aspect-ratio: 4/5;
background: var(--c-peach);
box-shadow: var(--shadow-md);
}
.freebie__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.freebie__img-wrap:hover img { transform: scale(1.04); }
.freebie__pdf-card {
position: absolute;
bottom: -28px; left: -28px;
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-md);
padding: 16px 22px;
display: flex; align-items: center; gap: 14px;
box-shadow: var(--shadow-md);
transform: rotate(-3deg);
}
.freebie__pdf-icon {
width: 48px; height: 56px;
background: var(--c-terracotta); color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: 6px;
display: flex; align-items: center; justify-content: center;
}
.freebie__pdf-title { font-family: var(--font-body); font-weight: 800; font-size: .82rem; }
.freebie__pdf-sub { font-size: .7rem; color: var(--c-text-muted); margin-top: 2px; }
.freebie__image-wrap { position: relative; }
/* ============================================================
POPUP / MODAL SYSTEM
============================================================ */
.popup-overlay {
display: none;
position: fixed; inset: 0; z-index: 400;
background: rgba(30,40,32,.55);
backdrop-filter: blur(6px);
align-items: center; justify-content: center;
padding: 20px;
}
.popup-overlay.open { display: flex; animation: fadeIn .25s var(--ease); }
.popup {
background: var(--c-cream);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-xl);
padding: 48px;
max-width: 520px; width: 100%;
position: relative;
text-align: center;
box-shadow: var(--shadow-lg);
animation: popIn .35s var(--ease-back);
}
.popup--wide { max-width: 720px; }
.popup--peach { background: var(--c-peach); }
.popup--terra { background: var(--c-terracotta); color: var(--c-cream); }
.popup--terra h3, .popup--terra p { color: var(--c-cream); }
@keyframes popIn { from { opacity: 0; transform: translateY(20px) scale(.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.popup__close {
position: absolute; top: 16px; right: 16px; z-index: 20;
width: 36px; height: 36px; border-radius: 50%;
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
}
.popup__close:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); background: var(--c-golden); }
.popup__illo { margin: 0 auto 20px; display: flex; justify-content: center; }
.popup h3 {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(1.6rem, 3vw, 2.2rem);
line-height: 1;
letter-spacing: -.03em;
margin-bottom: 14px;
text-transform: uppercase;
}
.popup p { color: var(--c-text-muted); margin-bottom: 28px; line-height: 1.6; }
.popup--terra p { color: rgba(254,250,232,.85); }
.popup__form { display: flex; flex-direction: column; gap: 12px; }
.popup__input {
padding: 16px 22px;
border-radius: var(--radius-full);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
font-size: 1rem; color: var(--c-ink); outline: none;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back);
}
.popup__input:focus { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.popup__note {
font-size: .72rem;
text-transform: uppercase;
letter-spacing: .1em;
color: var(--c-text-muted);
margin-top: 14px;
font-weight: 600;
}
/* ============================================================
BLOG / ARTICLE CARDS
============================================================ */
.blog-preview { padding: var(--section-py) 0; background: var(--c-cream); }
.blog-more { text-align: center; margin-top: 48px; }
.blog-preview__head {
display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px;
align-items: end; margin-bottom: 56px;
}
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.article-card {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
position: relative;
}
.article-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-md); }
/* Color variants — shuffled brand palette */
.article-card--sky { background: var(--c-sky); }
.article-card--peach { background: var(--c-peach); }
.article-card--golden { background: var(--c-golden); }
.article-card--sage { background: var(--c-sage); }
.article-card--rose { background: var(--c-rose); }
.article-card--sky .article-card__excerpt,
.article-card--peach .article-card__excerpt,
.article-card--golden .article-card__excerpt,
.article-card--sage .article-card__excerpt,
.article-card--rose .article-card__excerpt { color: rgba(30,40,32,.78); }
.article-card__img-wrap { position: relative; overflow: hidden; aspect-ratio: 4/3; border-bottom: var(--bw-1) solid var(--c-ink); }
.article-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.article-card:hover .article-card__img { transform: scale(1.06); }
.article-card__tag { position: absolute; top: 16px; left: 16px; z-index: 2; }
.article-card__tag--hot { left: auto; right: 16px; background: var(--c-burgundy); color: var(--c-cream); }
.filter-btn--hot.active { background: var(--c-burgundy); color: var(--c-cream); }
.article-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.article-card__title {
font-family: var(--font-body);
font-weight: 800;
font-size: 1.2rem;
line-height: 1.15;
letter-spacing: -.02em;
margin-bottom: 10px;
}
.article-card__excerpt { font-size: .9rem; color: var(--c-text-muted); line-height: 1.6; flex: 1; margin-bottom: 18px; }
.article-card__meta {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body); font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-text-muted);
padding-top: 14px; border-top: var(--bw-1) solid var(--c-border);
}
.article-card__meta > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.article-card__read {
display: inline-flex; align-items: center; gap: 6px;
color: var(--c-terracotta);
transition: gap .2s var(--ease);
}
.article-card:hover .article-card__read { gap: 10px; }
/* ============================================================
VIDEOS SECTION
============================================================ */
.videos { padding: var(--section-py) 0; }
.videos__inner {
background: var(--c-sky);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 80px 64px;
overflow: hidden;
}
.videos__head { text-align: center; margin-bottom: 56px; }
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.video-card {
position: relative;
aspect-ratio: 4/5;
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
background: var(--c-ink);
cursor: pointer;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.video-card:hover { transform: translate(-4px,-4px) rotate(-1deg); box-shadow: var(--shadow-md); }
.video-card__thumb { position:absolute; inset:0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity var(--transition), transform .9s var(--ease-out); }
.video-card:hover .video-card__thumb { opacity: .78; transform: scale(1.06); }
.video-card__overlay {
position: absolute; inset: 0;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 22px 22px 12px;
background: linear-gradient(to top, rgba(30,40,32,.9), transparent 50%);
}
.video-card__play {
position: absolute; top: 50%; left: 50%;
transform: translate(-50%,-50%);
width: 68px; height: 68px;
background: var(--c-golden); color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease-back);
}
.video-card:hover .video-card__play { transform: translate(-50%,-50%) scale(1.1); }
.video-card__label {
font-family: var(--font-body); font-weight: 800;
font-size: .68rem; text-transform: uppercase; letter-spacing: .12em;
color: var(--c-golden);
margin-bottom: 6px;
}
.video-card__title {
font-family: var(--font-body);
font-weight: 800;
font-size: 1rem; line-height: 1.2;
color: var(--c-cream);
letter-spacing: -.015em;
}
/* ============================================================
REVIEWS
============================================================ */
.reviews { padding: var(--section-py) 0; }
.reviews__head { text-align: center; max-width: 700px; margin: 0 auto 56px; }
.reviews__stars {
display: flex; justify-content: center; gap: 4px;
margin-bottom: 16px;
}
.reviews__stars svg { color: var(--c-golden); width: 32px; height: 32px; }
.reviews__avg {
font-family: var(--font-body); font-weight: 700;
font-size: .82rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--c-text-muted);
}
.reviews__avg strong { font-weight: 900; color: var(--c-ink); font-size: 1.3rem; }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card {
padding: 32px;
border-radius: var(--radius-lg);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-tan);
box-shadow: var(--shadow-sm);
display: flex; flex-direction: column;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.review-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-md); }
.review-card__stars { color: var(--c-golden); margin-bottom: 16px; display: flex; gap: 2px; }
.review-card__stars svg { width: 18px; height: 18px; }
.review-card__quote {
font-family: var(--font-body);
font-weight: 700;
font-size: 1.1rem;
line-height: 1.3;
letter-spacing: -.015em;
margin-bottom: 24px; flex: 1;
}
.review-card__author { display: flex; align-items: center; gap: 14px; padding-top: 18px; border-top: var(--bw-1) solid rgba(30,40,32,.12); }
.review-card__avatar {
width: 46px; height: 46px; border-radius: 50%;
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 900;
}
.review-card__name {
font-family: var(--font-body); font-weight: 700; font-size: .9rem;
text-transform: uppercase; letter-spacing: .04em;
}
.review-card__loc { font-size: .76rem; color: var(--c-text-muted); }
.review-card--peach { background: var(--c-peach); }
.review-card--sage { background: var(--c-sage); }
.review-card--lavender { background: var(--c-lavender); }
.review-card--golden { background: var(--c-golden); }
.review-card--terra { background: var(--c-terracotta); color: var(--c-cream); }
.review-card--terra .review-card__loc { color: rgba(254,250,232,.7); }
.review-card--terra .review-card__avatar { background: var(--c-cream); }
/* ============================================================
PRODUCT / BOOK PAGE
============================================================ */
.product-hero { padding: 60px 0 0; }
.product-hero__inner {
display: grid; grid-template-columns: 1.05fr 1fr; gap: 64px; align-items: center;
}
.product-hero__title {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(2.6rem, 6vw, 5rem);
line-height: .92;
letter-spacing: -.04em;
margin-bottom: 24px;
}
.product-hero__title em { font-style: normal; color: var(--c-terracotta); }
.product-hero__desc { color: var(--c-text-muted); line-height: 1.65; margin-bottom: 32px; font-size: 1.05rem; max-width: 480px; }
.product-hero__price-row { display: flex; align-items: center; gap: 16px; margin-bottom: 32px; flex-wrap: wrap; }
.product-hero__price {
font-family: var(--font-body); font-weight: 900;
font-size: 2.8rem; letter-spacing: -.04em; line-height: 1;
color: var(--c-terracotta);
}
.product-hero__original { font-size: 1.05rem; color: var(--c-text-muted); text-decoration: line-through; font-weight: 500; }
.product-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.product-hero__trust { display: flex; gap: 16px; flex-wrap: wrap; }
.trust-item {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-body); font-size: .72rem; font-weight: 700;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-text-muted);
}
.trust-item svg { color: var(--c-forest); }
.product-cover { position: relative; transform: rotate(2deg); transition: transform .5s var(--ease-out); }
.product-cover:hover { transform: rotate(0) scale(1.03); }
.product-cover__book {
background: var(--c-terracotta); color: var(--c-cream);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-lg);
padding: 48px 36px;
text-align: center;
box-shadow: var(--shadow-xl);
}
.product-cover__badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--c-golden); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
padding: 6px 16px;
font-family: var(--font-body);
font-size: .68rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .08em;
margin-bottom: 28px;
}
.product-cover__title {
font-family: var(--font-body); font-weight: 900;
font-size: 2rem; line-height: 1;
letter-spacing: -.03em;
margin-bottom: 20px;
text-transform: uppercase;
}
.product-cover__sub { font-size: .92rem; opacity: .9; margin-bottom: 28px; line-height: 1.5; }
.product-cover__price {
font-family: var(--font-body); font-weight: 900;
font-size: 2.4rem; line-height: 1; letter-spacing: -.04em;
}
.product-cover__price span { font-size: 1rem; opacity: .55; text-decoration: line-through; font-weight: 500; margin-left: 10px; }
.product-cover__note { font-family: var(--font-body); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; opacity: .75; margin-top: 8px; }
/* Product image grid — 1 big top + 2 small below (max 3 images).
Tile = colored background (the "page"). Inside each tile sits a
.product-grid__paper element shaped like an A4 sheet that actually
contains the image. */
.product-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-rows: minmax(0, auto);
gap: 14px;
}
.product-grid__tile {
background: var(--c-peach);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: 4px 4px 0 var(--c-ink);
overflow: hidden;
display: flex; align-items: center; justify-content: center;
aspect-ratio: 1;
padding: 18px;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.product-grid__tile:hover { transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--c-ink); }
.product-grid__tile--main {
grid-column: 1 / -1;
aspect-ratio: 1.15 / 1;
background: var(--c-sky);
padding: 24px;
}
/* Inner "paper" — A4 portrait — holds the image */
.product-grid__paper {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-sm);
box-shadow: 3px 3px 0 var(--c-ink);
overflow: hidden;
aspect-ratio: 1 / 1.414; /* A4 portrait */
height: 100%;
width: auto;
max-width: 100%;
display: flex; align-items: center; justify-content: center;
}
.product-grid__paper img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Slightly tighter paper inside the smaller tiles so it doesn't fill all the bg */
.product-grid__tile:not(.product-grid__tile--main) .product-grid__paper { max-height: 88%; }
/* alternating soft tints for the two small tiles */
.product-grid__tile--main + .product-grid__tile { background: var(--c-peach); }
.product-grid__tile--main + .product-grid__tile + .product-grid__tile { background: var(--c-golden); }
/* empty placeholders blend in */
.product-grid__tile--ghost { background: var(--c-cream-alt); box-shadow: none; opacity: .6; }
.product-grid__tile { cursor: zoom-in; }
.product-grid__tile--ghost { cursor: default; }
/* Image lightbox */
.lightbox {
position: fixed; inset: 0; z-index: 500;
background: rgba(17,26,23,.92);
display: none; align-items: center; justify-content: center;
padding: 40px;
}
.lightbox.is-open { display: flex; }
.lightbox img { max-width: min(900px, 92vw); max-height: 82vh; width: auto; height: auto; border: var(--bw-2) solid var(--c-ink); border-radius: var(--radius-lg); background: var(--c-cream); box-shadow: 8px 8px 0 var(--c-ink); object-fit: contain; padding: 18px; }
.lightbox__close, .lightbox__nav {
position: absolute; background: var(--c-cream); color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink); border-radius: 9999px;
width: 48px; height: 48px; cursor: pointer;
font-family: var(--font-display); font-weight: 900; font-size: 1.4rem;
display: flex; align-items: center; justify-content: center;
box-shadow: 3px 3px 0 var(--c-ink); transition: transform .15s, box-shadow .15s;
}
.lightbox__close { top: 20px; right: 20px; font-size: 1.1rem; }
.lightbox__nav--prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--c-ink); }
.lightbox__nav--prev:hover { transform: translate(-1px, calc(-50% - 1px)); }
.lightbox__nav--next:hover { transform: translate(-1px, calc(-50% - 1px)); }
.lightbox__count { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); color: var(--c-cream); font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .78rem; opacity: .8; }
/* The active coverflow image opens full screen — hint it. */
.cover-flow .cover-flow__item.is-active { cursor: zoom-in; }
/* Lightbox swipe dots (pills) */
.lightbox__dots { position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.lightbox__dots:empty { display: none; }
.lightbox__dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 9999px; background: rgba(254,250,232,.45); cursor: pointer; transition: width .2s var(--ease-out), background .2s; }
.lightbox__dots button.is-active { width: 22px; background: var(--c-cream); }
/* Mobile: true full-screen image (no frame); swipe + dots instead of arrows. */
@media (max-width: 660px) {
.lightbox { padding: 0; }
.lightbox img { max-width: 100vw; max-height: 100vh; border: none; border-radius: 0; box-shadow: none; padding: 0; background: transparent; }
.lightbox__close { top: 14px; right: 14px; }
.lightbox__nav { display: none !important; }
}
/* Branded wrapper around the "Pagar" button (Stripe Checkout redirect) */
.pay-wrap {
background: var(--c-cream-alt);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-md);
box-shadow: 4px 4px 0 var(--c-ink);
padding: 14px;
width: 100%;
max-width: 380px;
margin-left: auto; margin-right: auto; /* centre the checkout box */
display: flex; flex-direction: column; gap: 10px;
}
.pay-wrap__head {
display: flex; align-items: center; justify-content: center; gap: 8px;
font-family: var(--font-display); font-weight: 800;
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--c-ink);
}
.pay-wrap__head .icon { color: var(--c-terracotta); }
.pay-wrap__note { margin: 4px 2px 0; font-size: .75rem; color: var(--c-text-muted); text-align: center; line-height: 1.4; }
/* Accepted-payment-method logos, shown under the checkout button */
.pay-logos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; }
.pay-logo {
display: inline-flex; align-items: center; gap: 3px;
height: 24px; padding: 0 6px; box-sizing: border-box;
background: #fff; border: 1px solid rgba(17,26,23,.18); border-radius: 5px;
font-family: var(--font-display); font-weight: 800; font-size: .62rem; letter-spacing: .02em;
color: var(--c-ink); line-height: 1;
}
.pay-logo svg { display: block; height: 15px; width: auto; }
.pay-logo--visa { color: #1A1F71; font-style: italic; letter-spacing: .04em; }
/* Hero columns: left text/CTA grows, right gallery is narrower & stays pinned to top so it
doesn't get pushed down when the Pay-with-Card form opens */
.product-hero__inner {
align-items: stretch;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
gap: 56px;
}
.product-hero__inner > div:first-child {
display: flex; flex-direction: column; min-width: 0;
}
.product-hero__inner > div:first-child .product-hero__ctas { margin-top: auto; }
.product-hero__inner #productMedia { align-self: start; max-width: 440px; width: 100%; justify-self: end; }
/* PROBLEM/SOLUTION */
.problem-solution {
margin: var(--section-py) 28px;
background: var(--c-cream-alt);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 80px 64px;
}
.problem-solution__head { text-align: center; max-width: 600px; margin: 0 auto 56px; }
.problem-solution__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.problems-col h3, .solutions-col h3 {
font-family: var(--font-body); font-weight: 900;
font-size: 1.6rem; margin-bottom: 28px; text-transform: uppercase; letter-spacing: -.02em;
}
.problems-col h3 { color: var(--c-text-muted); }
.solutions-col h3 { color: var(--c-terracotta); }
.problems-list, .solutions-list { display: flex; flex-direction: column; gap: 16px; }
.problem-item, .solution-item {
display: flex; align-items: flex-start; gap: 16px;
padding: 22px;
border-radius: var(--radius-md);
border: var(--bw-1) solid var(--c-ink);
box-shadow: var(--shadow-xs);
}
.problem-item { background: var(--c-peach); }
.solution-item { background: var(--c-forest); color: var(--c-cream); }
.problem-item__icon, .solution-item__icon {
width: 40px; height: 40px; flex-shrink: 0;
border-radius: 10px;
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
}
.problem-item__icon { background: var(--c-cream); }
.solution-item__icon { background: var(--c-golden); color: var(--c-ink); }
.problem-item__text strong, .solution-item__text strong {
display: block;
font-family: var(--font-body); font-weight: 800;
text-transform: uppercase; letter-spacing: .03em;
font-size: .92rem;
margin-bottom: 4px;
}
.solution-item__text strong { color: var(--c-golden); }
.problem-item__text, .solution-item__text { font-size: .9rem; line-height: 1.55; }
/* MODULES */
.modules-section { padding: var(--section-py) 0; }
.modules-section__head { text-align: center; max-width: 600px; margin: 0 auto 56px; }
.modules-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.module-card {
padding: 32px;
border-radius: var(--radius-lg);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.module-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-md); }
.module-card__num {
font-family: var(--font-body); font-weight: 800;
font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
color: var(--c-terracotta);
margin-bottom: 10px;
}
.module-card__title {
font-family: var(--font-body); font-weight: 900;
font-size: 1.3rem; line-height: 1.1;
letter-spacing: -.02em;
margin-bottom: 10px;
text-transform: uppercase;
}
.module-card__desc { font-size: .9rem; color: var(--c-text-muted); line-height: 1.6; }
.module-card--1 { background: var(--c-peach); }
.module-card--2 { background: var(--c-sage); }
.module-card--3 { background: var(--c-sky); }
.module-card--4 { background: var(--c-golden); }
.module-card--5 { background: var(--c-lavender); }
.module-card--6 { background: var(--c-pink); }
/* WHO IT'S FOR */
.for-section { padding: var(--section-py) 0; }
.for-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.for-card {
padding: 32px;
border-radius: var(--radius-lg);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
box-shadow: var(--shadow-sm);
text-align: left;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.for-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-md); }
.for-card__icon {
width: 56px; height: 56px;
background: var(--c-golden);
border: var(--bw-1) solid var(--c-ink);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
margin-bottom: 18px;
}
.for-card__title {
font-family: var(--font-body); font-weight: 800;
font-size: 1.05rem;
text-transform: uppercase;
letter-spacing: -.005em;
margin-bottom: 8px;
line-height: 1.2;
}
.for-card__desc { font-size: .88rem; color: var(--c-text-muted); line-height: 1.55; }
/* Multi-color process cards (Cómo trabajamos) */
.for-grid--multi .for-card:nth-child(1) { background: var(--c-peach); }
.for-grid--multi .for-card:nth-child(2) { background: var(--c-sage); }
.for-grid--multi .for-card:nth-child(3) { background: var(--c-sky); }
.for-grid--multi .for-card:nth-child(1) .for-card__icon { background: var(--c-terracotta); color: var(--c-cream); }
.for-grid--multi .for-card:nth-child(2) .for-card__icon { background: var(--c-forest); color: var(--c-cream); }
.for-grid--multi .for-card:nth-child(3) .for-card__icon { background: var(--c-golden); color: var(--c-ink); }
/* BONUSES */
.bonuses-section {
margin: var(--section-py) 28px;
background: var(--c-forest);
color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 80px 64px;
}
.bonuses-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.bonus-card {
background: rgba(254,250,232,.06);
border: var(--bw-1) solid rgba(254,250,232,.18);
border-radius: var(--radius-lg);
padding: 32px;
color: var(--c-cream);
}
.bonus-card__badge {
display: inline-block;
background: var(--c-golden); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
padding: 5px 14px;
font-family: var(--font-body); font-weight: 800;
font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
margin-bottom: 18px;
}
.bonus-card__title { font-family: var(--font-body); font-weight: 800; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.005em; margin-bottom: 8px; }
.bonus-card__desc { font-size: .85rem; color: rgba(254,250,232,.7); line-height: 1.55; margin-bottom: 14px; }
.bonus-card__value {
font-family: var(--font-body); font-weight: 700;
font-size: .78rem; color: var(--c-golden);
text-transform: uppercase; letter-spacing: .06em;
}
.bonus-card__value span { text-decoration: line-through; opacity: .45; margin-right: 6px; }
/* FAQ */
.faq-section { padding: var(--section-py) 0; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-md);
padding: 22px 28px;
cursor: pointer;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back);
}
.faq-item:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.faq-item summary {
font-family: var(--font-body);
font-weight: 800;
font-size: 1rem;
letter-spacing: -.01em;
text-transform: uppercase;
display: flex; justify-content: space-between; align-items: center;
list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
content: '+';
font-family: var(--font-body);
font-weight: 900;
font-size: 1.6rem;
color: var(--c-terracotta);
width: 24px; height: 24px;
display: flex; align-items: center; justify-content: center;
transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item p { margin-top: 14px; color: var(--c-text-muted); line-height: 1.6; font-size: .94rem; }
.product-cta-sticky {
position: sticky; bottom: 0; z-index: 80;
background: var(--c-cream);
border-top: var(--bw-1) solid var(--c-ink);
padding: 14px 0;
display: none;
box-shadow: 0 -8px 0 var(--c-ink);
}
.product-cta-sticky.visible { display: block; }
.product-cta-sticky__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.product-cta-sticky__info h4 { font-family: var(--font-body); font-weight: 800; font-size: .92rem; text-transform: uppercase; letter-spacing: .02em; }
.product-cta-sticky__price { font-family: var(--font-body); font-weight: 900; color: var(--c-terracotta); font-size: 1.2rem; }
/* ============================================================
BIBLIOTECA — Book library page
============================================================ */
.library-hero { padding: 80px 0 40px; text-align: center; }
.library-hero h1 {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(3rem, 7vw, 6rem);
line-height: .92;
letter-spacing: -.04em;
margin-bottom: 20px;
text-transform: uppercase;
}
.library-hero h1 em { font-style: normal; color: var(--c-terracotta); }
.library-hero .lead { max-width: 600px; margin: 0 auto; }
.filter-row {
display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
padding: 24px 0; margin-bottom: 56px;
border-top: var(--bw-1) solid var(--c-ink);
border-bottom: var(--bw-1) solid var(--c-ink);
}
.filter-btn {
padding: 10px 20px;
border-radius: var(--radius-full);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
font-family: var(--font-body); font-weight: 700;
font-size: .72rem; color: var(--c-ink);
text-transform: uppercase; letter-spacing: .08em;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
}
.filter-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); background: var(--c-golden); }
.filter-btn.active { background: var(--c-ink); color: var(--c-cream); }
.filter-hint {
text-align: center;
margin-top: 16px;
font-size: .78rem;
text-transform: uppercase;
letter-spacing: .08em;
font-weight: 600;
color: var(--c-text-muted);
}
.filter-clear {
font: inherit;
color: var(--c-terracotta);
background: transparent;
border: none;
padding: 0 0 2px;
margin-left: 4px;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
transition: color .2s var(--ease);
}
.filter-clear:hover { color: var(--c-terra-dark); }
/* Featured book hero */
.featured-book {
background: var(--c-forest); color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
display: grid; grid-template-columns: 1fr 1fr;
overflow: hidden;
margin-bottom: 80px;
}
.featured-book__body { padding: 56px 48px; }
.featured-book__title {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(2rem, 4vw, 3rem);
line-height: 1; letter-spacing: -.03em;
margin: 18px 0 18px;
text-transform: uppercase;
color: var(--c-cream);
}
.featured-book__desc { color: rgba(254,250,232,.78); line-height: 1.65; margin-bottom: 28px; }
.featured-book__cover-wrap {
background: var(--c-terracotta);
display: flex; align-items: center; justify-content: center;
padding: 60px; min-height: 460px;
}
.featured-book__cover {
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-md);
padding: 36px 28px; text-align: center;
box-shadow: var(--shadow-lg);
max-width: 280px;
transform: rotate(-3deg);
transition: transform .4s var(--ease-out);
}
.featured-book__cover:hover { transform: rotate(0); }
.featured-book__cover-tag { font-family: var(--font-body); font-weight: 800; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-terracotta); margin-bottom: 12px; }
.featured-book__cover-title { font-family: var(--font-body); font-weight: 900; font-size: 1.4rem; line-height: 1; text-transform: uppercase; letter-spacing: -.02em; }
/* Library book grid */
.library-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 56px 28px; align-items: start; }
.book-card {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
display: flex; flex-direction: column;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.book-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-md); }
.book-card__cover-wrap {
aspect-ratio: 5/4;
background: var(--c-peach);
display: flex; align-items: center; justify-content: center;
padding: 28px;
border-bottom: var(--bw-1) solid var(--c-ink);
position: relative;
}
.book-card__cover-wrap--sky { background: var(--c-sky); }
.book-card__cover-wrap--sage { background: var(--c-sage); }
.book-card__cover-wrap--lavender { background: var(--c-lavender); }
.book-card__cover-wrap--golden { background: var(--c-golden); }
.book-card__cover-wrap--pink { background: var(--c-pink); }
.book-card__cover-wrap--peach { background: var(--c-peach); }
.book-card__top-tag {
position: absolute; top: 12px; right: 12px; z-index: 2;
box-shadow: 2px 2px 0 var(--c-ink);
}
.book-card__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Reusable product/article tag badges */
.lib-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lib-tag { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 800; font-size: .58rem; text-transform: uppercase; letter-spacing: .07em; padding: 3px 9px; border-radius: var(--radius-full); border: var(--bw-1) solid var(--c-ink); }
.lib-tag--gratis { background: var(--c-forest); color: var(--c-cream); }
.lib-tag--caliente { background: var(--c-terracotta); color: var(--c-cream); }
.lib-tag--nuevo { background: var(--c-sky); color: var(--c-ink); }
.lib-tag--popular { background: var(--c-golden); color: var(--c-ink); }
.lib-tag--recomendado { background: var(--c-lavender); color: var(--c-ink); }
.lib-tag--bestseller { background: var(--c-terracotta); color: var(--c-cream); }
.lib-tag--default { background: var(--c-pink); color: var(--c-ink); }
.article-card__tag--nuevo { left: auto; right: 16px; background: var(--c-sky); color: var(--c-ink); }
.book-card__cover {
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink);
border-radius: 6px;
padding: 24px 18px;
width: 70%; max-width: 200px;
text-align: center;
box-shadow: var(--shadow-sm);
transform: rotate(-3deg);
transition: transform .35s var(--ease-out);
display: flex; flex-direction: column; gap: 10px;
}
.book-card:hover .book-card__cover { transform: rotate(0); }
/* Cover icon slot — emoji sits at the bottom-center of the cover (legacy SVG icons keep their old look) */
.cover-icon-slot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: center; }
/* Cover IMAGE slot — uploaded cover photo sits framed in a 4:5 portrait box (1080×1350).
Design your cover image at 4:5 (e.g., 1080×1350) to fit with zero whitespace. */
.cover-image-slot {
margin-top: auto; width: 90%;
aspect-ratio: 4 / 5;
margin-left: auto; margin-right: auto;
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: 4px;
overflow: hidden;
display: flex; align-items: center; justify-content: center;
}
.cover-image-slot img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Hero (product page) variant — bigger slot for the big book hero */
.cover-image-slot--hero { width: 70%; max-width: 280px; margin-top: 0; margin-bottom: 24px; border-width: var(--bw-2); border-radius: 8px; }
/* Image-mode cover frames — the paper card holds ONLY the image (no title/sub).
Drops the inner padding so the image fills the frame edge-to-edge; the ink
border of the cover IS the frame. */
.book-card__cover--image { padding: 0; overflow: hidden; }
.book-card__cover--image .cover-image-slot { width: 100%; margin: 0; border: none; border-radius: 0; background: transparent; }
.fc-card__cover--image { padding: 0; overflow: hidden; }
.fc-card__cover--image .cover-image-slot { width: 100%; margin: 0; border: none; border-radius: 0; background: transparent; }
.freebie-modal__cover--image .cover-image-slot { width: 100%; margin: 0; border: none; border-radius: inherit; background: transparent; }
/* Cover image carousel inside the product modal — crossfade slides + controls BELOW the image */
.cover-carousel { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.cover-carousel__viewport { position: relative; }
.cover-carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity .5s var(--ease); pointer-events: none; display: block; }
.cover-carousel__img.is-active { opacity: 1; }
.cover-carousel__controls { display: flex; align-items: center; justify-content: center; gap: 14px; }
.cover-carousel__arrow {
width: 34px; height: 34px; border-radius: 50%;
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
font-size: 1.3rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
padding: 0 0 3px; flex: none;
}
.cover-carousel__arrow:hover { background: var(--c-golden); transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.cover-carousel__dots { display: flex; align-items: center; gap: 8px; }
.cover-carousel__dot {
width: 9px; height: 9px; border-radius: 50%;
background: transparent; border: var(--bw-1) solid var(--c-ink);
padding: 0; cursor: pointer;
transition: background .2s var(--ease), width .25s var(--ease-out);
}
.cover-carousel__dot.is-active { background: var(--c-ink); width: 22px; border-radius: 9999px; }
/* ===== Coverflow (product modal, multiple images) =====
Active book centred & in front; previous/next books peek smaller on each side. */
.cover-carousel--flow { display: flex; flex-direction: column; align-items: center; gap: 22px; width: 100%; padding-top: 12px; }
.cover-flow {
position: relative; width: 100%; height: 300px; margin: 0 auto;
cursor: grab; touch-action: pan-y; user-select: none;
overflow: hidden; /* safety; the stage is wide enough that side books aren't clipped */
}
.cover-flow:active { cursor: grabbing; }
.cover-flow .cover-flow__item {
position: absolute; top: 50%; left: 50%; width: 100%; max-width: 180px; margin: 0;
transform: translate(-50%, -50%) scale(.72); opacity: 0; z-index: 1; pointer-events: none;
transition: transform .42s cubic-bezier(.22,.61,.36,1), opacity .42s var(--ease);
-webkit-user-drag: none;
}
/* Pages grow to the SAME size as the cover. The cover keeps its width from the
modal's `.freebie-modal__cover .book3d--fill { width:100%; max-width:180px }`,
so pages mirror that exact sizing. */
.cover-flow .cover-flow__item--page { width: 100%; max-width: 180px; }
.cover-flow .cover-flow__item.is-prev,
.cover-flow .cover-flow__item.is-next { opacity: .5; z-index: 2; pointer-events: auto; cursor: pointer; }
.cover-flow .cover-flow__item.is-prev { transform: translate(calc(-50% - 50%), -50%) scale(.78); }
.cover-flow .cover-flow__item.is-next { transform: translate(calc(-50% + 50%), -50%) scale(.78); }
/* Mobile: smaller books so the full side books fit on a narrow phone stage. */
@media (max-width: 660px) {
.freebie-modal__cover .book3d--fill,
.cover-flow .cover-flow__item--page,
.cover-flow .cover-flow__item { max-width: 150px; }
.cover-flow { height: 264px; }
}
.cover-flow .cover-flow__item.is-active {
transform: translate(-50%, -50%) scale(1); opacity: 1; z-index: 3; pointer-events: auto;
}
/* hard book shadow only on the cover (image 0), not on the pages */
.cover-flow .cover-flow__item--cover.is-active { box-shadow: 5px 6px 0 var(--c-ink); }
.cover-flow .cover-flow__item img { pointer-events: none; -webkit-user-drag: none; }
/* tag + banner only on the centred cover */
.cover-flow__item:not(.is-active) .gtag,
.cover-flow__item:not(.is-active) .gbanner { display: none; }
/* Non-cover images render as plain photos with a folded (dog-eared) bottom-right
corner, like a turned page. No frame, border or brutalist shadow. */
.cover-flow__item--page .page {
display: block; position: relative; width: 100%; aspect-ratio: 5 / 7; overflow: hidden;
border-radius: 5px;
}
.cover-flow__item--page .page img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Modal trust badges (Acceso inmediato + Acceso de por vida) */
.freebie-modal__badges { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 14px 0 18px; }
.freebie-modal__badges .trust-item { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-weight: 700; font-size: .78rem; color: var(--c-ink); text-transform: uppercase; letter-spacing: .04em; }
.freebie-modal__badges .emoji-icon { font-size: 1.1rem; }
.product-cover__book--image .cover-image-slot--hero { margin-top: 0; }
/* ============ BLOG PAGER ============ */
.blog-pager { display: flex; justify-content: center; align-items: center; gap: 18px; margin: 56px 0 24px; flex-wrap: wrap; }
.blog-pager__info { font-family: var(--font-body); font-weight: 700; color: var(--c-ink); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; }
.blog-pager button[disabled] { opacity: .35; pointer-events: none; }
/* Mobile blog cards: hide the description, keep title + tag + read time */
@media (max-width: 720px) {
.article-card__excerpt { display: none; }
}
.cover-emoji { display: inline-block; line-height: 1; font-size: 2.2rem; }
.cover-emoji--lg { font-size: 2.6rem; }
.cover-emoji--xl { font-size: 3.4rem; }
/* Dashboard: single-emoji input for cover design */
.emoji-input { width: 92px; padding: 10px 14px; font-size: 1.6rem; line-height: 1; text-align: center; border: var(--bw-1) solid var(--c-ink); border-radius: var(--radius-md); background: var(--c-cream); box-shadow: var(--shadow-xs); }
.emoji-input:focus { outline: none; transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
/* ============ EMOJI ICONS (sitewide — replaced decorative SVG sprite) ============ */
.emoji-icon { display: inline-block; line-height: 1; font-style: normal; vertical-align: middle; }
/* Big decorative icons in cards/sections */
.stat__icon { font-size: 2.6rem; line-height: 1; }
.path-card__illo { font-size: 3.4rem; line-height: 1; }
.for-card__icon { font-size: 2.6rem; line-height: 1; }
.widget__icon-circle .emoji-icon { font-size: 1.8rem; }
.comment-auth-cta__icon { font-size: 1.6rem; }
.about-stat__icon { font-size: 2.2rem; }
/* Rating-stars row: keep stars at a comfortable inline size */
.review-card__stars { font-size: 1.05rem; letter-spacing: 2px; line-height: 1; }
.reviews__stars { font-size: 1.4rem; letter-spacing: 4px; line-height: 1; }
/* Tags (small chips like "Para nuevos dueños 🐾") */
.tag .emoji-icon { font-size: 1.05em; vertical-align: -1px; }
/* Hero stickers — inline with text */
.hero__sticker .emoji-icon { font-size: 1em; }
.book-card__cover--forest { background: var(--c-forest); color: var(--c-cream); }
.book-card__cover--terra { background: var(--c-terracotta); color: var(--c-cream); }
.book-card__cover-title {
font-family: var(--font-body); font-weight: 900;
font-size: 1.1rem; line-height: .95;
text-transform: uppercase;
letter-spacing: -.02em;
}
.book-card__cover-sub { font-size: .7rem; opacity: .7; letter-spacing: .04em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; }
.book-card__free-badge,
.book-card__badge {
position: absolute; top: 14px; right: 14px;
background: var(--c-golden); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
padding: 4px 12px;
font-family: var(--font-body); font-size: .65rem; font-weight: 800;
text-transform: uppercase; letter-spacing: .08em;
box-shadow: var(--shadow-xs);
transform: rotate(6deg);
z-index: 2; white-space: nowrap;
}
/* Badge color variants — reuse on any book card */
.book-card__badge--free { background: var(--c-golden); color: var(--c-ink); }
.book-card__badge--bestseller { background: var(--c-terracotta); color: var(--c-cream); }
.book-card__badge--new { background: var(--c-sky); color: var(--c-ink); }
.book-card__badge--popular { background: var(--c-forest); color: var(--c-cream); }
.book-card__badge--offer { background: var(--c-pink); color: var(--c-ink); }
/* If a card has two badges, stack the second one below the first */
.book-card__badge + .book-card__badge,
.book-card__free-badge + .book-card__badge { top: 50px; }
.book-card__body { padding: 22px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.book-card__category { font-family: var(--font-body); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-terracotta); margin-bottom: 10px; }
.book-card__title { font-family: var(--font-body); font-weight: 800; font-size: 1.1rem; line-height: 1.15; letter-spacing: -.015em; margin-bottom: 8px; text-transform: uppercase; }
.book-card__desc { font-size: .85rem; color: var(--c-text-muted); line-height: 1.55; margin-bottom: 18px; flex: 1; }
.book-card__footer {
display: flex; justify-content: space-between; align-items: center;
padding-top: 14px;
border-top: var(--bw-1) solid var(--c-border);
}
.book-card__price { font-family: var(--font-body); font-weight: 900; font-size: 1.1rem; color: var(--c-terracotta); letter-spacing: -.02em; }
.book-card__price--free { color: var(--c-forest); }
.book-card__cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-body); font-weight: 700; font-size: .72rem;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-terracotta);
}
/* Library category section */
.library-section { margin-bottom: 64px; }
.library-section__head {
display: flex; justify-content: space-between; align-items: end;
margin-bottom: 32px; flex-wrap: wrap; gap: 16px;
}
.library-section__head h2 {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(1.8rem, 3.5vw, 2.6rem);
text-transform: uppercase; letter-spacing: -.03em;
}
/* Related books */
.related-books { padding: var(--section-py) 0; }
.related-books__head { margin-bottom: 40px; }
/* ============================================================
SOBRE NOSOTROS
============================================================ */
.about-hero { padding: 80px 0; }
.about-hero__inner {
display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
align-items: center;
}
.about-hero__title {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(2.8rem, 6vw, 5rem);
line-height: .92;
letter-spacing: -.04em;
margin-bottom: 24px;
text-transform: uppercase;
}
.about-hero__title em { font-style: normal; color: var(--c-terracotta); }
.about-hero__img-wrap {
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-2xl);
overflow: hidden;
aspect-ratio: 5/6;
box-shadow: var(--shadow-lg);
}
.about-hero__img-wrap img { width: 100%; height: 100%; object-fit: cover; }
.story-section {
margin: var(--section-py) 28px;
background: var(--c-tan);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 80px 64px;
}
.story-section__inner { max-width: 760px; margin: 0 auto; }
.story-section h2 {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(2rem, 4vw, 3.2rem);
text-transform: uppercase; letter-spacing: -.03em;
margin-bottom: 24px;
}
.story-section p {
font-size: 1.05rem; line-height: 1.7; color: var(--c-ink);
margin-bottom: 20px;
}
.story-section blockquote {
margin: 32px 0;
padding: 28px 32px;
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-weight: 800;
font-size: 1.3rem;
line-height: 1.2;
letter-spacing: -.02em;
box-shadow: var(--shadow-sm);
text-transform: uppercase;
}
.values-section { padding: var(--section-py) 0; }
.values-section__head { text-align: center; max-width: 620px; margin: 0 auto 56px; }
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.value-card {
padding: 36px;
border-radius: var(--radius-lg);
border: var(--bw-1) solid var(--c-ink);
box-shadow: var(--shadow-sm);
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.value-card:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-md); }
.value-card--1 { background: var(--c-peach); }
.value-card--2 { background: var(--c-sky); }
.value-card--3 { background: var(--c-golden); }
.value-card__num { font-family: var(--font-body); font-weight: 900; font-size: 2.4rem; color: var(--c-ink); opacity: .25; line-height: 1; margin-bottom: 18px; letter-spacing: -.04em; }
.value-card__title { font-family: var(--font-body); font-weight: 900; font-size: 1.3rem; text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 12px; line-height: 1.1; }
.value-card__desc { font-size: .94rem; line-height: 1.6; opacity: .82; }
.team-section { padding: var(--section-py) 0; }
.team-section__head { text-align: center; margin-bottom: 56px; }
.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.team-card {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
text-align: center;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.team-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-md); }
.team-card__img { aspect-ratio: 1/1; overflow: hidden; border-bottom: var(--bw-1) solid var(--c-ink); }
.team-card__img img { width: 100%; height: 100%; object-fit: cover; }
.team-card__body { padding: 24px; }
.team-card__name { font-family: var(--font-body); font-weight: 900; font-size: 1.15rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 4px; }
.team-card__role { font-family: var(--font-body); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--c-terracotta); margin-bottom: 12px; }
.team-card__bio { font-size: .88rem; color: var(--c-text-muted); line-height: 1.55; }
/* ============================================================
NEWSLETTER / MISSION
============================================================ */
.mission {
margin: 0 28px var(--section-py);
background: var(--c-forest); color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 120px 64px;
text-align: center;
position: relative;
overflow: hidden;
}
.mission__inner { max-width: 880px; margin: 0 auto; position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }
.mission__inner > * { width: 100%; }
.mission__inner > [data-reveal]:last-child { display: flex; justify-content: center; width: auto; }
.mission__quote {
font-family: var(--font-body);
font-weight: 900;
font-size: clamp(2rem, 4.5vw, 4rem);
line-height: 1;
letter-spacing: -.035em;
margin-bottom: 36px;
color: var(--c-cream);
text-transform: uppercase;
}
.mission__quote em { font-style: normal; color: var(--c-golden); }
.mission__text { color: rgba(254,250,232,.72); max-width: 560px; margin: 0 auto 40px; line-height: 1.65; font-size: 1.02rem; }
.newsletter-section {
margin: 0 28px var(--section-py);
background: var(--c-terracotta); color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
padding: 80px 64px;
text-align: center;
}
.newsletter-section__inner { max-width: 640px; margin: 0 auto; }
.newsletter-section__title {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(2.2rem, 4.5vw, 3.6rem);
line-height: 1; letter-spacing: -.035em;
margin-bottom: 14px;
text-transform: uppercase;
}
.newsletter-section__desc { color: rgba(254,250,232,.8); margin-bottom: 36px; font-size: 1.02rem; line-height: 1.55; }
.newsletter-section__form { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: 520px; margin: 0 auto; }
.newsletter-section__input {
flex: 1; min-width: 220px;
padding: 18px 24px;
border-radius: var(--radius-full);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream); color: var(--c-ink);
font-size: 1rem; outline: none;
box-shadow: var(--shadow-xs);
}
.newsletter-section__input::placeholder { color: var(--c-text-muted); }
.newsletter-section__input:focus { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.newsletter-section__note {
font-family: var(--font-body); font-weight: 700;
font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
color: rgba(254,250,232,.65);
margin-top: 16px;
}
/* ============================================================
FOOTER — matches website style with rounded corners + hard shadows
============================================================ */
.footer-wrap { padding: 0 28px var(--section-py); }
.footer {
background: var(--c-sky);
color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-lg);
padding: 72px 56px 32px;
}
.footer__inner {
display: grid; grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 56px;
margin-bottom: 64px;
}
.footer__brand-logo { color: var(--c-ink); margin-bottom: 16px; }
.footer__brand-logo svg { height: 32px; width: auto; }
.footer__brand-logo svg path { fill: currentColor; }
.footer__brand-desc { color: rgba(17,26,23,.7); line-height: 1.65; font-size: .9rem; max-width: 320px; }
.footer__social { display: flex; gap: 12px; margin-top: 28px; }
.footer__social-link {
width: 46px; height: 46px;
background: var(--c-cream);
color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease), color .2s var(--ease);
}
.footer__social-link svg { width: 20px; height: 20px; }
.footer__social-link:hover {
transform: translate(-3px,-3px);
box-shadow: var(--shadow-sm);
}
.footer__social-link--fb:hover { background: #1877F2; color: #fff; }
.footer__social-link--ig:hover { background: #E4405F; color: #fff; }
.footer__social-link--yt:hover { background: #FF0000; color: #fff; }
.footer__social-link--pin:hover { background: #E60023; color: #fff; }
.footer__col h4 {
font-family: var(--font-heading-sm); font-weight: 700;
font-size: .82rem; letter-spacing: .08em; text-transform: uppercase;
color: var(--c-ink);
margin-bottom: 22px;
}
.footer__col ul { display: flex; flex-direction: column; gap: 12px; }
.footer__col li a {
font-size: .92rem;
color: rgba(17,26,23,.75);
transition: color var(--transition), transform var(--transition);
display: inline-block;
}
.footer__col li a:hover { color: var(--c-terracotta); transform: translateX(4px); }
.footer__bottom {
border-top: var(--bw-1) solid rgba(17,26,23,.2);
padding-top: 24px;
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body); font-weight: 600;
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
color: rgba(17,26,23,.6);
flex-wrap: wrap; gap: 12px;
}
.footer__bottom .heart {
display: inline-block;
width: 14px; height: 14px;
color: var(--c-burgundy);
vertical-align: -2px;
margin: 0 4px;
}
/* ============================================================
FLOATING CHAT
============================================================ */
.chat-btn {
position: fixed; bottom: 28px; right: 28px; z-index: 90;
display: flex; flex-direction: row; align-items: center; gap: 12px;
}
.chat-btn__bubble {
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
padding: 10px 18px;
font-family: var(--font-body); font-weight: 700;
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
box-shadow: var(--shadow-sm);
opacity: 0; transform: translateX(8px) scale(.95);
transition: opacity .35s var(--ease), transform .35s var(--ease-back);
pointer-events: none;
white-space: nowrap;
max-width: 64vw; overflow: hidden; text-overflow: ellipsis;
}
.chat-btn:hover .chat-btn__bubble,
.chat-btn__bubble.is-visible { opacity: 1; transform: translateX(0) scale(1); }
.chat-btn__trigger {
width: 64px; height: 64px; border-radius: 50%;
background: var(--c-terracotta); color: var(--c-cream);
border: var(--bw-2) solid var(--c-ink);
box-shadow: var(--shadow-md);
display: flex; align-items: center; justify-content: center;
transition: all .2s var(--ease-back);
}
.chat-btn__trigger:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-lg); }
.chat-btn__trigger:active { transform: translate(2px,2px); box-shadow: var(--shadow-xs); }
.chat-panel {
display: none;
position: fixed; bottom: 110px; right: 28px; z-index: 90;
width: 340px;
background: var(--c-cream);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.chat-panel.open { display: flex; flex-direction: column; animation: popIn .35s var(--ease-back); }
.chat-panel__header {
background: var(--c-forest); color: var(--c-cream);
padding: 16px 20px;
display: flex; align-items: center; gap: 12px;
border-bottom: var(--bw-1) solid var(--c-ink);
}
.chat-panel__avatar {
width: 38px; height: 38px; border-radius: 50%;
background: var(--c-golden); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
}
.chat-panel__name { font-family: var(--font-body); font-weight: 800; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.chat-panel__status { font-size: .7rem; color: rgba(254,250,232,.65); }
.chat-panel__body { padding: 20px; display: flex; flex-direction: column; gap: 10px; max-height: 280px; overflow-y: auto; }
.chat-msg { padding: 10px 14px; border-radius: var(--radius-md); font-size: .9rem; line-height: 1.5; max-width: 85%; border: var(--bw-1) solid var(--c-ink); }
.chat-msg--bot { background: var(--c-tan); align-self: flex-start; }
.chat-msg--user { background: var(--c-terracotta); color: var(--c-cream); align-self: flex-end; }
.chat-panel__options { display: flex; flex-direction: column; gap: 8px; padding: 0 20px 20px; }
.chat-panel__option {
padding: 12px 16px;
border-radius: var(--radius-full);
border: var(--bw-1) solid var(--c-ink);
background: var(--c-cream);
box-shadow: var(--shadow-xs);
font-family: var(--font-body); font-weight: 700;
font-size: .76rem; text-transform: uppercase; letter-spacing: .04em;
text-align: left;
transition: all .15s var(--ease-back);
}
.chat-panel__option:hover { background: var(--c-golden); transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
/* Quick-fill chips above the chat form */
.chat-panel__quick { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.chat-panel__quick .chat-panel__option { font-size:.66rem; padding:6px 10px; border-radius:var(--radius-full); }
/* Closed-conversation banner with "Start new" button */
.chat-panel__closed {
padding:14px 18px;
border-top:var(--bw-1) solid rgba(17,26,23,.12);
background: var(--c-cream-alt);
text-align:center;
}
.chat-panel__closed p {
margin:0 0 10px;
font-family:var(--font-body); font-weight:700; font-size:.82rem;
color:var(--c-text); line-height:1.4;
}
.chat-panel__newconv {
display:inline-flex; align-items:center; gap:6px;
padding:9px 18px;
font-family:var(--font-body); font-weight:900; font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
background:var(--c-golden); color:var(--c-ink);
border:var(--bw-1) solid var(--c-ink); border-radius:var(--radius-full);
box-shadow:var(--shadow-xs); cursor:pointer;
transition:transform .12s var(--ease-back), box-shadow .12s var(--ease-back);
}
.chat-panel__newconv:hover { transform:translate(-2px,-2px); box-shadow:var(--shadow-sm); }
/* Chat contact form */
.chat-panel__form {
display:flex; flex-direction:column; gap:10px;
padding: 14px 18px 18px;
border-top: var(--bw-1) solid rgba(17,26,23,.12);
background: var(--c-cream);
}
.chat-panel__identity {
display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:10px 12px;
background:var(--c-cream-alt); border:var(--bw-1) solid var(--c-ink); border-radius:var(--radius-sm);
font-size:.82rem; line-height:1.35;
}
.chat-panel__identity-text { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-panel__identity-text strong { color:var(--c-ink); font-weight:800; }
.chat-panel__identity-email { color:var(--c-text-muted); font-size:.78rem; }
.chat-panel__identity-change {
border:none; background:none; padding:0;
color:var(--c-terracotta); font:inherit; font-size:.74rem; font-weight:800;
text-transform:uppercase; letter-spacing:.04em; cursor:pointer; white-space:nowrap;
}
.chat-panel__identity-change:hover { text-decoration:underline; }
.chat-panel__row { display:flex; gap:8px; }
.chat-panel__row > * { flex:1 1 0; min-width:0; }
.chat-panel__input, .chat-panel__textarea {
width:100%; box-sizing:border-box;
padding:10px 12px;
border:var(--bw-1) solid var(--c-ink); border-radius:var(--radius-sm);
background: var(--c-cream-alt); color: var(--c-text);
font:inherit; font-size:.85rem; line-height:1.4;
}
.chat-panel__textarea { resize:vertical; min-height:68px; max-height:140px; }
.chat-panel__input:focus, .chat-panel__textarea:focus { outline:none; box-shadow:var(--shadow-xs); transform:translate(-1px,-1px); }
.chat-panel__foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.chat-panel__hint { font-size:.7rem; color:var(--c-text-muted); line-height:1.3; flex:1; min-width:0; }
.chat-panel__send {
display:inline-flex; align-items:center; gap:6px;
padding:9px 16px;
font-family:var(--font-body); font-weight:900; font-size:.72rem;
letter-spacing:.08em; text-transform:uppercase;
background:var(--c-golden); color:var(--c-ink);
border:var(--bw-1) solid var(--c-ink); border-radius:var(--radius-full);
box-shadow:var(--shadow-xs); cursor:pointer; white-space:nowrap;
transition:transform .12s var(--ease-back), box-shadow .12s var(--ease-back);
}
.chat-panel__send:hover:not(:disabled) { transform:translate(-2px,-2px); box-shadow:var(--shadow-sm); }
.chat-panel__send:disabled { opacity:.55; cursor:wait; }
/* ============================================================
CART SIDEBAR
============================================================ */
.cart-overlay {
display: none; position: fixed; inset: 0; z-index: 200;
background: rgba(30,40,32,.4); backdrop-filter: blur(4px);
}
.cart-overlay.open { display: block; animation: fadeIn .25s var(--ease); }
.cart-sidebar {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 201;
width: 420px; max-width: 92vw;
background: var(--c-cream);
border-left: var(--bw-2) solid var(--c-ink);
display: flex; flex-direction: column;
transform: translateX(100%);
transition: transform .35s var(--ease-out);
}
.cart-sidebar.open { transform: translateX(0); }
.cart-sidebar__header {
padding: 24px;
border-bottom: var(--bw-1) solid var(--c-ink);
background: var(--c-tan);
display: flex; justify-content: space-between; align-items: center;
}
.cart-sidebar__title { font-family: var(--font-body); font-weight: 900; font-size: 1.2rem; text-transform: uppercase; letter-spacing: -.01em; }
.cart-sidebar__items { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.cart-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 16px; color: var(--c-text-muted); padding: 40px 0; }
.cart-item {
display: flex; gap: 16px; align-items: center;
background: var(--c-tan);
border: var(--bw-1) solid var(--c-ink);
padding: 16px;
border-radius: var(--radius-md);
}
.cart-item__name { font-family: var(--font-body); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: -.005em; }
.cart-item__price { font-family: var(--font-body); font-weight: 900; color: var(--c-terracotta); font-size: 1rem; margin-top: 4px; }
.cart-item__remove {
width: 32px; height: 32px; border-radius: 50%;
background: var(--c-cream); border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
}
.cart-item__remove:hover { background: var(--c-terracotta); color: var(--c-cream); }
.cart-sidebar__footer { padding: 24px; border-top: var(--bw-1) solid var(--c-ink); background: var(--c-cream-alt); }
.cart-total {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body); font-weight: 900;
font-size: 1.2rem; letter-spacing: -.02em;
margin-bottom: 18px;
text-transform: uppercase;
}
/* Cart checkout panel (loading state before the Stripe redirect), swapped in over "Ir al pago" */
.cart-pay {
background: var(--c-cream); border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-md); box-shadow: 4px 4px 0 var(--c-ink);
padding: 14px;
}
.cart-pay__head {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-display); font-weight: 800;
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--c-ink); padding-bottom: 10px; margin-bottom: 12px;
border-bottom: 1px dashed rgba(17,26,23,.15);
}
#cartPayButtons { display: flex; flex-direction: column; gap: 8px; }
.cart-pay__note { margin: 8px 2px 0; font-size: .75rem; color: var(--c-text-muted); text-align: center; line-height: 1.4; }
.cart-pay__back {
display: block; width: 100%; margin-top: 12px; padding: 8px;
background: none; border: none; cursor: pointer;
font-family: var(--font-body); font-size: .82rem; color: var(--c-text-muted);
text-decoration: underline; text-underline-offset: 2px;
}
.cart-pay__back:hover { color: var(--c-ink); }
/* While the checkout panel is open, hide the item list and let the footer take
the remaining height and scroll, so the whole panel (incl. any note) is
reachable. */
.cart-sidebar--paying .cart-sidebar__items { display: none; }
.cart-sidebar--paying .cart-sidebar__footer {
flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ============================================================
BLOG POST
============================================================ */
.read-progress { position: fixed; top: 0; left: 0; z-index: 200; height: 4px; background: var(--c-terracotta); width: 0%; transition: width .1s linear; }
.post-hero { padding: 80px 0 60px; }
.post-hero__inner { max-width: 760px; margin: 0 auto; text-align: left; }
.breadcrumb {
display: flex; gap: 8px; align-items: center;
font-family: var(--font-body); font-weight: 700;
font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
color: var(--c-text-muted);
margin-bottom: 24px;
}
.breadcrumb a { color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-terracotta); }
.post-hero__title {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(2.4rem, 5.5vw, 4.4rem);
line-height: .98;
letter-spacing: -.04em;
margin: 16px 0 28px;
}
.post-meta {
display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
font-family: var(--font-body); font-weight: 600;
font-size: .76rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--c-text-muted);
}
.post-meta__author { display: flex; align-items: center; gap: 10px; color: var(--c-ink); }
.post-meta__avatar {
width: 36px; height: 36px; border-radius: 50%;
background: var(--c-peach); color: var(--c-terra-dark);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 900; font-size: .76rem;
}
.post-hero__img {
margin: 0 28px;
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-2xl);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.post-hero__img img { width: 100%; max-height: 540px; object-fit: cover; }
.post-layout {
display: grid; grid-template-columns: 1fr 300px; gap: 64px;
max-width: var(--container); margin: 0 auto;
padding: 80px 28px 120px;
}
.post-content { font-family: var(--font-body); font-size: 1.05rem; line-height: 1.75; color: var(--c-ink); }
.post-content h2 {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(1.6rem, 3vw, 2.2rem);
letter-spacing: -.03em; line-height: 1.05;
margin: 48px 0 18px;
text-transform: uppercase;
}
.post-content h3 { font-family: var(--font-body); font-weight: 800; font-size: 1.3rem; margin: 32px 0 12px; text-transform: uppercase; letter-spacing: -.02em; }
.post-content p { margin-bottom: 22px; }
.post-content ul, .post-content ol { margin: 22px 0; padding-left: 26px; }
.post-content li { margin-bottom: 10px; }
.post-content blockquote {
margin: 36px 0; padding: 28px 32px;
background: var(--c-tan);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
font-family: var(--font-body);
font-weight: 800; font-size: 1.3rem;
line-height: 1.2; letter-spacing: -.02em;
text-transform: uppercase;
box-shadow: var(--shadow-sm);
}
.post-content a:not(.btn):not(.share-btn):not(.comment__action):not(.toc-link) { color: var(--c-terracotta); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.post-tags { margin-top: 36px; display: flex; gap: 8px; flex-wrap: wrap; }
.post-share { margin-top: 48px; padding-top: 32px; border-top: var(--bw-1) solid var(--c-border); }
.post-share h4 { font-family: var(--font-body); font-weight: 800; font-size: 1rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: -.01em; }
.share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 12px 20px; border-radius: var(--radius-full);
font-family: var(--font-body); font-weight: 700;
font-size: .72rem; text-transform: uppercase; letter-spacing: .08em;
color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
box-shadow: var(--shadow-xs);
transition: all .15s var(--ease-back);
}
.share-btn--whatsapp { background: #25d366; }
.share-btn--facebook { background: #1877f2; }
.share-btn--twitter { background: var(--c-ink); }
.share-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.author-card {
margin-top: 56px;
display: flex; gap: 20px; align-items: flex-start;
padding: 32px;
background: var(--c-tan);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.author-card__avatar {
width: 64px; height: 64px; border-radius: 50%;
background: var(--c-peach); color: var(--c-terra-dark);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 900;
flex-shrink: 0;
}
.author-card__name { font-family: var(--font-body); font-weight: 900; font-size: 1.1rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: -.01em; }
.author-card__bio { font-size: .92rem; color: var(--c-text-muted); line-height: 1.6; }
.comments { margin-top: 64px; }
.comments h3 { font-family: var(--font-body); font-weight: 900; font-size: 1.6rem; text-transform: uppercase; letter-spacing: -.025em; margin-bottom: 36px; }
.comment-list { display: flex; flex-direction: column; gap: 28px; margin-bottom: 48px; }
.comment { display: flex; gap: 16px; }
.comment__avatar {
width: 46px; height: 46px; border-radius: 50%;
background: var(--c-sage); color: var(--c-forest);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 900; font-size: .82rem;
flex-shrink: 0;
}
.comment__body { flex: 1; }
.comment__header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.comment__name { font-family: var(--font-body); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: -.005em; }
.comment__date { font-family: var(--font-body); font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-text-muted); }
.comment__text { font-size: .94rem; line-height: 1.6; }
.comment__reply { font-family: var(--font-body); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-terracotta); margin-top: 8px; }
/* Admin (Logramo) comments stand out: terracotta avatar with a bolder stroke,
and the whole name shown as a terracotta pill */
.comment.comment--admin .comment__avatar {
width: 46px; height: 46px;
background: var(--c-terracotta); color: var(--c-cream);
border-width: 3px;
overflow: hidden; padding: 0;
}
.comment--admin .comment__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.comment__name--admin {
display: inline-block;
background: var(--c-peach); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
padding: 3px 12px;
letter-spacing: .02em;
}
.comment__admin-like {
display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
color: var(--c-terracotta);
font-family: var(--font-body); font-weight: 700; font-size: .72rem;
text-transform: uppercase; letter-spacing: .06em;
}
.comment__admin-like svg { width: 14px; height: 14px; }
.comment-form {
background: var(--c-cream-alt);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 24px;
}
.comment-form h4 { font-family: var(--font-body); font-weight: 900; font-size: 1.1rem; margin-bottom: 20px; text-transform: uppercase; letter-spacing: -.01em; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-family: var(--font-body); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.form-input {
padding: 14px 18px;
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-sm);
background: var(--c-cream);
font-size: .95rem; color: var(--c-ink); outline: none;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back);
}
.form-input:focus { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.form-textarea { min-height: 130px; resize: vertical; }
/* ============ POST ENGAGE (likes + share) ============ */
.post-engage {
margin: 40px 0 36px;
padding: 18px 22px;
display: flex; align-items: center; justify-content: center; gap: 24px;
background: var(--c-cream-alt);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
box-shadow: var(--shadow-xs);
flex-wrap: wrap;
}
.post-engage__share { display: flex; align-items: center; gap: 8px; }
.post-engage__share-label { font-family: var(--font-body); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
.post-engage__share .share-btn { padding: 8px 10px; gap: 0; }
/* ============ RELATED-PRODUCT POPUP ============ */
.rel-pop {
position: fixed; right: 22px; bottom: 22px; z-index: 120;
width: min(360px, calc(100vw - 32px));
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: 6px 6px 0 var(--c-ink);
overflow: hidden;
transform: translateY(140%); opacity: 0;
transition: transform .35s var(--ease-back), opacity .35s var(--ease);
}
.rel-pop.is-in { transform: translateY(0); opacity: 1; }
.rel-pop__close {
position: absolute; top: 8px; right: 10px; z-index: 2;
width: 30px; height: 30px; border-radius: 50%;
border: var(--bw-1) solid var(--c-ink); background: var(--c-cream);
font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--c-ink);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
}
.rel-pop__close:hover { background: var(--c-golden); transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.rel-pop__thumb { width: 100%; height: 130px; border-bottom: var(--bw-1) solid var(--c-ink); background: var(--c-cream-alt); }
.rel-pop__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rel-pop__body { padding: 18px 20px 20px; }
.rel-pop__eyebrow { font-family: var(--font-body); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-terracotta); }
.rel-pop__title { font-family: var(--font-body); font-weight: 900; font-size: 1.15rem; line-height: 1.15; text-transform: uppercase; letter-spacing: -.01em; margin: 6px 0 8px; }
.rel-pop__desc { font-size: .88rem; line-height: 1.5; color: var(--c-text-muted); margin-bottom: 16px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rel-pop__cta { width: 100%; justify-content: center; }
@media (max-width: 560px) {
.rel-pop { right: 12px; left: 12px; bottom: 12px; width: auto; }
.rel-pop__thumb { height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
.rel-pop { transition: opacity .2s ease; transform: none; }
}
.like-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 18px;
background: var(--c-cream);
color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
font-family: var(--font-body); font-weight: 800;
font-size: .8rem; text-transform: uppercase; letter-spacing: .06em;
cursor: pointer;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back), background .2s var(--ease);
}
.like-btn:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-sm); }
.like-btn:active { transform: translate(1px,1px); box-shadow: none; }
.like-btn__heart {
width: 20px; height: 20px;
color: var(--c-text-muted);
transition: color .2s var(--ease), transform .25s var(--ease-back);
}
.like-btn.is-liked { background: var(--c-terracotta); color: var(--c-cream); }
.like-btn.is-liked .like-btn__heart { color: var(--c-cream); transform: scale(1.15); }
.like-btn__count {
min-width: 22px; padding: 0 8px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-ink); color: var(--c-cream);
border-radius: var(--radius-full);
font-size: .72rem; font-weight: 900;
}
.like-btn.is-liked .like-btn__count { background: var(--c-cream); color: var(--c-terracotta); }
/* ============ COMMENTS (new) ============ */
.comments-section { margin-top: 56px; }
.comments-section__title {
font-family: var(--font-body); font-weight: 900;
font-size: 1.4rem; text-transform: uppercase; letter-spacing: -.02em;
margin-bottom: 24px;
}
.comment-auth-cta {
background: var(--c-golden);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 26px 24px 24px;
display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
margin-bottom: 28px;
}
/* The `display: flex` rules above (and `display: inline-flex` on .btn)
override the native [hidden] behavior. Force re-hiding here so the
logged-in/out toggles in JS actually work. */
.comment-auth-cta[hidden],
.btn[hidden],
.comment-form[hidden],
.comment-form__reply-target[hidden] { display: none !important; }
.comment-auth-cta__icon {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--c-terracotta); color: var(--c-cream);
border: var(--bw-2) solid var(--c-ink);
border-radius: 50%;
box-shadow: var(--shadow-sm);
margin-bottom: 4px;
}
.comment-auth-cta__text { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--c-ink); max-width: 480px; }
.comment-auth-cta__text strong { display: block; font-family: var(--font-body); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; letter-spacing: -.01em; margin-bottom: 4px; }
.comment-auth-cta__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.comment-auth-cta__actions .btn { text-decoration: none; }
.comment-auth-cta__actions .btn--primary { color: var(--c-cream); }
.comment-auth-cta__actions .btn--cream { color: var(--c-ink); }
.comment-form { margin-bottom: 32px; }
.comment-form__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.comment-form__avatar {
width: 38px; height: 38px; border-radius: 50%;
background: var(--c-golden); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 900; font-size: .78rem;
flex-shrink: 0;
}
.comment-form__hello { font-size: .88rem; color: var(--c-text); }
.comment-form__hello strong { font-family: var(--font-body); font-weight: 800; }
.comment-form__reply-target { color: var(--c-terracotta); font-weight: 700; font-size: .82rem; }
.comment-form__textarea {
width: 100%; box-sizing: border-box;
padding: 14px 16px;
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-md);
background: var(--c-cream);
font: inherit; font-size: .95rem; color: var(--c-ink); line-height: 1.5;
outline: none; resize: vertical; min-height: 90px;
box-shadow: var(--shadow-xs);
transition: transform .15s var(--ease-back), box-shadow .15s var(--ease-back);
}
.comment-form__textarea:focus { transform: translate(-1px,-1px); box-shadow: var(--shadow-sm); }
.comment-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; flex-wrap: wrap; }
.comment-form__hint { font-size: .78rem; color: var(--c-text-muted); flex: 1; min-width: 180px; }
.comment-form__buttons { display: flex; gap: 8px; }
.btn--sm { padding: 8px 16px; font-size: .76rem; }
.comment-list__empty {
padding: 24px 16px;
text-align: center;
font-size: .94rem;
color: var(--c-text-muted);
}
.comment__actions { display: flex; gap: 14px; margin-top: 8px; }
.comment__action {
background: transparent; border: none; padding: 0; cursor: pointer;
font-family: var(--font-body); font-weight: 700; font-size: .72rem;
text-transform: uppercase; letter-spacing: .08em;
color: var(--c-terracotta);
transition: color .15s var(--ease);
}
.comment__action:hover { color: var(--c-terra-dark); text-decoration: underline; }
.comment__action--danger { color: var(--c-text-muted); }
.comment__action--danger:hover { color: var(--c-terracotta); }
.comment__me {
display: inline-block;
background: var(--c-golden); color: var(--c-ink);
border: 1px solid var(--c-ink);
border-radius: var(--radius-full);
padding: 1px 8px;
font-size: .62rem;
font-weight: 800;
text-transform: lowercase;
letter-spacing: .04em;
margin-left: 6px;
vertical-align: middle;
}
.comment__replies { margin-top: 18px; padding-left: 20px; border-left: 2px dashed var(--c-border); display: flex; flex-direction: column; gap: 18px; }
.comment__replies[hidden] { display: none; }
.comment--reply .comment__avatar { width: 36px; height: 36px; font-size: .72rem; }
.comment__replies-toggle {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px; padding: 0;
background: none; border: none; cursor: pointer;
font-family: var(--font-body); font-weight: 700; font-size: .74rem;
text-transform: uppercase; letter-spacing: .06em; color: var(--c-terracotta);
}
.comment__replies-toggle:hover { color: var(--c-terra-dark); }
.comment__replies-caret { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.comment__replies-toggle[aria-expanded="true"] .comment__replies-caret { transform: rotate(180deg); }
/* ============ LEGAL PAGES ============ */
.legal-wrap { max-width: 800px; margin: 0 auto; padding: 130px 28px 110px; }
.legal-head { margin-bottom: 36px; }
.legal-head .eyebrow { color: var(--c-terracotta); }
.legal-head h1 { font-family: var(--font-body); font-weight: 900; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.05; text-transform: uppercase; letter-spacing: -.02em; margin: 10px 0 14px; }
.legal-updated { font-size: .85rem; color: var(--c-text-muted); }
.legal-body { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.75; color: var(--c-ink); }
.legal-body h2 { font-family: var(--font-body); font-weight: 900; font-size: 1.4rem; text-transform: uppercase; letter-spacing: -.01em; margin: 42px 0 14px; }
.legal-body h3 { font-weight: 800; font-size: 1.08rem; margin: 24px 0 8px; }
.legal-body p { margin-bottom: 18px; }
.legal-body ul { margin: 0 0 18px; padding-left: 24px; }
.legal-body li { margin-bottom: 8px; }
.legal-body a { color: var(--c-terracotta); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.legal-body strong { font-weight: 800; }
/* ============ COOKIE CONSENT BANNER ============ */
.cookie-banner {
position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200;
max-width: 760px; margin: 0 auto;
background: var(--c-cream); border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg); box-shadow: 6px 6px 0 var(--c-ink);
padding: 18px 20px;
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
transform: translateY(140%); opacity: 0;
transition: transform .4s var(--ease-back), opacity .4s var(--ease);
}
.cookie-banner.is-in { transform: translateY(0); opacity: 1; }
.cookie-banner__text { flex: 1; min-width: 240px; font-family: var(--font-body); font-size: .9rem; line-height: 1.55; color: var(--c-ink); }
.cookie-banner__text a { color: var(--c-terracotta); text-decoration: underline; font-weight: 700; }
.cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) { .cookie-banner__actions { width: 100%; } .cookie-banner__actions .btn { flex: 1; } }
/* ============ SIDEBAR WIDGET ICON CIRCLE ============ */
.widget__icon-circle {
width: 56px; height: 56px;
display: flex; align-items: center; justify-content: center;
background: var(--c-golden);
border: var(--bw-2) solid var(--c-ink);
border-radius: 50%;
box-shadow: var(--shadow-sm);
}
.widget--terra .widget__icon-circle,
.widget--forest .widget__icon-circle { background: var(--c-golden); }
/* ============ BLOG POST MOBILE ============ */
@media (max-width: 768px) {
/* Hide elements that only make sense on desktop (avatars, dup share block) */
.bp-hide-mobile { display: none !important; }
/* Tighter engage row on mobile */
.post-engage {
border-radius: var(--radius-lg);
padding: 14px 16px;
gap: 10px;
}
.post-engage__share-label { display: none; }
/* Author card sits OUTSIDE the article (as a grid sibling). On mobile the
layout is single-column so it lands as the last block of the page,
after the article and the sidebar widgets. */
#bpAuthorCard { margin-top: 24px; }
}
/* BLOG SIDEBAR */
.blog-search {
display: flex;
max-width: 540px; margin: 24px auto 0;
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
background: var(--c-cream);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.blog-search input { flex: 1; padding: 16px 24px; border: none; background: transparent; font-size: 1rem; outline: none; color: var(--c-ink); }
.blog-search input::placeholder { color: var(--c-text-muted); }
.blog-search button { padding: 0 18px; background: var(--c-terracotta); color: var(--c-cream); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; }
.blog-search button:hover { background: var(--c-terra-dark); }
.blog-search button .icon { width: 18px; height: 18px; }
/* Mobile — keep the search bar visible as a full bar (no icon-collapse).
Slightly smaller padding so it fits comfortably. */
@media (max-width: 640px) {
.blog-search { margin: 18px 0 0; }
.blog-search input { padding: 12px 18px; font-size: .92rem; }
.blog-search button { padding: 0 16px; }
.blog-search button .icon { width: 16px; height: 16px; }
}
.blog-main { padding: var(--section-py) 0; }
.blog-layout { display: grid; grid-template-columns: 1fr 320px; gap: 56px; align-items: start; }
.featured-post {
display: grid; grid-template-columns: 1fr 1fr;
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
margin-bottom: 48px;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.featured-post:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-md); }
/* Image fills whatever height the text panel sets; min-height keeps it
reasonable when the text is short. */
.featured-post__img {
position: relative;
overflow: hidden;
min-height: 280px;
border-right: var(--bw-1) solid var(--c-ink);
}
.featured-post__img img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover; object-position: center;
transition: transform 1s var(--ease-out);
}
.featured-post:hover .featured-post__img img { transform: scale(1.05); }
.featured-post__body { padding: 40px; display: flex; flex-direction: column; justify-content: center; }
.featured-post__title {
font-family: var(--font-body); font-weight: 900;
font-size: clamp(1.4rem, 2.5vw, 2rem);
line-height: 1.05; letter-spacing: -.025em;
margin: 16px 0;
text-transform: uppercase;
}
.featured-post__excerpt { color: var(--c-text-muted); line-height: 1.6; margin-bottom: 24px; font-size: .94rem; }
.posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.blog-sidebar { display: flex; flex-direction: column; gap: 28px; position: sticky; top: 110px; align-self: start; }
.widget {
background: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 26px;
}
.widget--forest { background: var(--c-forest); color: var(--c-cream); }
.widget--terra { background: var(--c-terracotta); color: var(--c-cream); }
.widget h3 { font-family: var(--font-body); font-weight: 900; font-size: 1rem; margin-bottom: 18px; text-transform: uppercase; letter-spacing: -.01em; }
.widget--forest h3, .widget--terra h3 { color: var(--c-cream); }
.cat-list { display: flex; flex-direction: column; gap: 10px; }
.cat-row {
display: flex; justify-content: space-between; align-items: center;
font-family: var(--font-body); font-weight: 700;
font-size: .8rem; text-transform: uppercase; letter-spacing: .04em;
padding: 8px 0;
border-bottom: var(--bw-1) solid var(--c-border);
}
.cat-row:last-child { border-bottom: none; }
.cat-row a {
color: var(--c-ink);
transition: color .2s var(--ease), transform .2s var(--ease-back);
display: inline-block;
}
.cat-row:hover a { color: var(--c-terracotta); transform: translateX(4px); }
.cat-row:hover .cat-row__count { background: var(--c-golden); }
.cat-row__count {
background: var(--c-tan);
border: var(--bw-1) solid var(--c-ink);
padding: 2px 10px; border-radius: var(--radius-full);
font-size: .68rem; font-weight: 800;
transition: background .2s var(--ease);
}
.sidebar-articles { display: flex; flex-direction: column; gap: 16px; }
.sidebar-article { display: flex; gap: 12px; align-items: flex-start; transition: transform .2s var(--ease-back); }
.sidebar-article:hover { transform: translateX(4px); }
.sidebar-article__img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; border: var(--bw-1) solid var(--c-ink); transition: box-shadow .2s var(--ease); }
.sidebar-article:hover .sidebar-article__img { box-shadow: var(--shadow-xs); }
.sidebar-article__title {
font-family: var(--font-body); font-weight: 800; font-size: .82rem; line-height: 1.25;
margin-bottom: 4px; text-transform: uppercase; letter-spacing: -.005em;
color: var(--c-ink);
transition: color .2s var(--ease);
}
.sidebar-article:hover .sidebar-article__title { color: var(--c-terracotta); }
.sidebar-article__date { font-family: var(--font-body); font-weight: 600; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--c-text-muted); }
/* ============================================================
SCROLL REVEAL
============================================================ */
[data-reveal] {
opacity: 0;
transform: translateY(36px);
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="left"].in { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="right"].in { transform: translateX(0); }
[data-reveal="scale"] { transform: scale(.92); }
[data-reveal="scale"].in { transform: scale(1); }
[data-stagger] > * {
opacity: 0; transform: translateY(28px);
transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
[data-stagger].in > * { opacity: 1; transform: translateY(0); }
[data-stagger].in > *:nth-child(1) { transition-delay: .05s; }
[data-stagger].in > *:nth-child(2) { transition-delay: .12s; }
[data-stagger].in > *:nth-child(3) { transition-delay: .19s; }
[data-stagger].in > *:nth-child(4) { transition-delay: .26s; }
[data-stagger].in > *:nth-child(5) { transition-delay: .33s; }
[data-stagger].in > *:nth-child(6) { transition-delay: .40s; }
[data-stagger].in > *:nth-child(7) { transition-delay: .47s; }
[data-stagger].in > *:nth-child(8) { transition-delay: .54s; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
[data-reveal], [data-stagger] > * { opacity: 1; transform: none; }
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 1100px) {
:root { --section-py: 90px; }
.blog-layout { grid-template-columns: 1fr; }
.blog-sidebar { position: static; }
.post-layout { grid-template-columns: 1fr; gap: 48px; }
.footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; }
.featured-book { grid-template-columns: 1fr; }
.featured-book__cover-wrap { min-height: 360px; }
}
@media (max-width: 880px) {
:root { --section-py: 72px; }
.nav__links { display: none; }
.nav__hamburger { display: flex; }
.hero { padding-top: 32px; }
.hero__inner { grid-template-columns: 1fr; gap: 32px; }
.hero__image { order: -1; }
.start-here__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
.start-here__grid { grid-template-columns: 1fr; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat { border-right: none; border-bottom: var(--bw-1) solid rgba(254,250,232,.15); }
.stat:nth-last-child(-n+2) { border-bottom: none; }
.blog-grid { grid-template-columns: 1fr; }
.blog-preview__head { grid-template-columns: 1fr; gap: 20px; }
.video-grid { grid-template-columns: 1fr 1fr; }
.videos__inner { padding: 28px 28px; }
.reviews-grid { grid-template-columns: 1fr; }
.freebie__inner, .product-soft__inner, .product-hero__inner, .about-hero__inner { grid-template-columns: 1fr; gap: 48px; }
.product-hero__inner .product-cover, .product-hero__inner #productMedia { order: -1; }
/* Homepage "Lo más vendido": eyebrow → book → details on mobile.
Copy becomes display:contents so its children join the grid and can reorder. */
.freebie__inner { gap: 28px; }
.freebie__copy { display: contents; }
.freebie__eyebrow { order: 1; margin-bottom: 0; justify-self: center; }
.freebie__image-wrap { order: 2; }
.freebie__details { order: 3; }
/* Center everything in the "Lo más vendido" card on mobile — content
centered to the container, not just text-aligned. */
.freebie__inner { text-align: center; }
.freebie__details { text-align: center; display: flex; flex-direction: column; align-items: center; }
.freebie__details > * { max-width: 100%; }
.freebie__bullets { align-items: center; }
.freebie__details .product-hero__price-row { justify-content: center; }
.freebie__title { display: none; }
.freebie__desc { display: none; }
.freebie .book3d { --w: min(300px, 60vw) !important; }
/* Mobile spacing pass: snap the homepage vertical gaps to a uniform ~32px.
Section-to-section gaps = 16px (bottom of one) + 16px (top of next). */
.blog-more { margin-top: 6px; } /* hugs the last article (button belongs to the blog) */
.blog-preview { padding-bottom: 16px; }
.videos { padding: 64px 0; } /* generous room above & below the video card */
.reviews { padding-top: 16px; } /* video card -> "Lo que dicen" */
.freebie, .mission, .newsletter-section, .stats-block, .product-soft, .problem-solution, .bonuses-section, .story-section { padding: 56px 28px; }
.modules-grid, .for-grid, .bonuses-grid, .values-grid, .team-grid { grid-template-columns: 1fr; }
.problem-solution__grid { grid-template-columns: 1fr; gap: 32px; }
.featured-post { grid-template-columns: 1fr; }
.featured-post__img { border-right: none; border-bottom: var(--bw-1) solid var(--c-ink); }
.featured-post__body { padding: 28px; }
.posts-grid { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr 1fr; text-align: center; gap: 36px 24px; margin-bottom: 40px; }
.footer__inner > :first-child { grid-column: 1 / -1; }
.footer__inner > :last-child { grid-column: 1 / -1; }
.footer__brand-logo svg { margin-left: auto; margin-right: auto; }
.footer__brand-desc { max-width: none; margin-left: auto; margin-right: auto; }
.footer__social { justify-content: center; }
.footer__col h4 { margin-bottom: 16px; }
.footer__col ul { align-items: center; }
.footer__bottom { flex-direction: column; text-align: center; }
.form-row { grid-template-columns: 1fr; }
.cart-sidebar { width: 100%; }
.marquee-wrap { margin: 0 16px; }
.footer-wrap { padding: 0 16px var(--section-py); }
.footer { padding: 56px 28px 24px; }
}
@media (max-width: 560px) {
.hero__sticker--1, .hero__sticker--2, .hero__sticker--3 { font-size: .7rem; padding: 8px 14px; }
.hero__ctas { flex-direction: column; align-items: stretch; }
.hero__ctas .btn { justify-content: center; width: 100%; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.stat { border-right: var(--bw-1) solid rgba(254,250,232,.15); border-bottom: var(--bw-1) solid rgba(254,250,232,.15); }
.stat:nth-child(2n) { border-right: none; }
.stat:nth-last-child(-n+2) { border-bottom: none; }
}
/* Video grid → horizontal carousel on mobile (next card peeks for scroll affordance) */
@media (max-width: 768px) {
.videos__inner { position: relative; }
.video-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: visible;
gap: 14px;
padding: 8px 20px 28px;
margin: 0 -20px;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
position: relative;
}
.video-grid::-webkit-scrollbar { display: none; }
.video-card {
flex: 0 0 74vw;
scroll-snap-align: start;
aspect-ratio: 4 / 5;
}
.video-card:last-child { scroll-snap-align: end; }
}
/* ============ HORIZONTAL SCROLL AFFORDANCES ============
- Right edge gradient fade
- "Swipe →" hint pill that pulses
- Dot indicators that highlight current card
*/
.h-scroll-wrap { position: relative; }
.h-scroll-hint {
position: absolute;
bottom: 14px;
right: 18px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
background: var(--c-ink);
color: var(--c-cream);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-full);
box-shadow: var(--shadow-xs);
font-family: var(--font-body);
font-weight: 700;
font-size: .68rem;
text-transform: uppercase;
letter-spacing: .08em;
pointer-events: none;
transition: opacity .35s var(--ease), transform .35s var(--ease-back);
animation: hScrollNudge 1.8s ease-in-out infinite;
}
.h-scroll-hint svg { width: 14px; height: 14px; }
.h-scroll-wrap.is-scrolled .h-scroll-hint { opacity: 0; transform: translateX(20px); }
@keyframes hScrollNudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(6px); }
}
.h-scroll-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 4px;
padding-bottom: 4px;
}
.h-scroll-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: rgba(30,40,32,.2);
border: var(--bw-1) solid var(--c-ink);
transition: width .25s var(--ease), background .25s var(--ease);
}
.h-scroll-dot.is-active {
background: var(--c-ink);
width: 24px;
border-radius: var(--radius-full);
}
/* Hide affordances on desktop (only show under tablet/mobile),
EXCEPT for the reviews carousel — there we keep the hint + dots
at all sizes and also show Prev/Next arrow buttons. */
@media (min-width: 900px) {
.h-scroll-hint,
.h-scroll-dots { display: none; }
/* Reviews always show their hint + dots + arrows */
.reviews-grid + .h-scroll-dots,
.h-scroll-wrap:has(> .reviews-grid) .h-scroll-hint { display: flex; }
}
/* Prev / Next arrow buttons (reviews only — wired by JS for .reviews-grid) */
.h-scroll-arrows {
display: none; /* mobile = touch swipe, hide arrows */
justify-content: center;
gap: 14px;
margin-top: 14px;
}
.h-scroll-arrow {
width: 48px; height: 48px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--c-cream);
color: var(--c-ink);
border: var(--bw-2) solid var(--c-ink);
border-radius: var(--radius-full);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.h-scroll-arrow:hover { transform: translate(-2px,-2px); box-shadow: var(--shadow-md); background: var(--c-golden); }
.h-scroll-arrow:active { transform: translate(0,0); box-shadow: var(--shadow-xs); }
.h-scroll-arrow svg { width: 22px; height: 22px; }
@media (min-width: 900px) {
.h-scroll-arrows { display: flex; }
}
/* ============================================================
LARGE DISPLAY OVERRIDES — Helvetica Neue Black for big titles
(Inter is used everywhere else for solid, readable UI text)
============================================================ */
.display-2xl, .display-xl, .display-lg, .display-md, .display-sm,
h1, h2, h3, h4,
.hero__title,
.freebie__title,
.mission__quote,
.newsletter-section__title,
.stats-block__title,
.stat__number,
.featured-book__title, .featured-book__cover-title,
.product-hero__title, .product-hero__price,
.product-cover__title, .product-cover__price,
.about-hero__title,
.post-hero__title,
.featured-post__title,
.post-content h2, .post-content h3, .post-content blockquote,
.library-hero h1,
.story-section h2, .story-section blockquote,
.book-card__title, .book-card__price,
.value-card__num, .value-card__title,
.team-card__name,
.bonus-card__title,
.module-card__title,
.for-card__title,
.cart-item__price, .product-cta-sticky__price, .cart-sidebar__title,
.comments h3, .author-card__name,
.path-card__title,
.review-card__quote,
.video-card__title,
.faq-item summary,
.marquee-track > span {
font-family: var(--font-display);
}
/* ============================================================
BONUS CARDS — match site style (cream background, hard shadow)
============================================================ */
.bonus-card {
background: var(--c-cream);
color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 32px;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
}
.bonus-card:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-md); }
.bonus-card--peach { background: var(--c-peach); }
.bonus-card--golden { background: var(--c-golden); }
.bonus-card--sky { background: var(--c-sky); }
.bonus-card--sage { background: var(--c-sage); }
.bonus-card__desc { color: var(--c-text-muted); }
.bonus-card__value { color: var(--c-terracotta); }
.bonus-card__value span { color: var(--c-text-muted); }
.bonus-card__title { color: var(--c-ink); }
.bonus-card__icon-box {
width: 56px; height: 56px;
background: var(--c-ink); color: var(--c-golden);
border: var(--bw-1) solid var(--c-ink);
border-radius: 14px;
display: flex; align-items: center; justify-content: center;
box-shadow: var(--shadow-xs);
margin-bottom: 18px;
}
/* ============================================================
AVATAR IMAGES — support ![]()
inside circle avatars
============================================================ */
.hero__avatar, .review-card__avatar, .comment__avatar,
.post-meta__avatar, .author-card__avatar, .chat-panel__avatar,
.cart-item__avatar {
overflow: hidden;
position: relative;
}
.hero__avatar img, .review-card__avatar img, .comment__avatar img,
.post-meta__avatar img, .author-card__avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
border-radius: 50%;
}
/* ============================================================
PASSION ONE — global heading override
Applies to every title/headline class across the site so the
condensed display font takes over headings while body copy
stays in Inter.
============================================================ */
/* Big display titles — Helvetica Condensed Black */
.hero__title,
.product-hero__title,
.stats-block__title,
.freebie__title,
.newsletter-section__title,
.auth__title,
.post-hero__title,
.cta-block h2,
.mission__quote,
.stat__number {
font-family: var(--font-heading);
font-weight: 900;
text-transform: uppercase;
letter-spacing: -.015em;
}
/* Smaller titles — Helvetica Neue Bold (not condensed) */
.popup h3,
.path-card__title,
.article-card__title,
.video-card__title,
.profile-name,
.faq__q,
.book-card__title,
.cat-card__title,
.author-card__name,
.related-card__title,
.toc__title,
.team-card__name,
.value-card__title,
.timeline__title,
.feature-card__title,
.widget h3,
.sidebar-article__title {
font-family: var(--font-heading-sm) !important;
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: -.005em;
}
/* Remove italic emphasis from headings — Passion One has no italic */
.hero__title em,
.product-hero__title em,
.freebie__title em,
.auth__title em,
.mission__quote em,
.blog-preview__head em {
font-style: normal;
}
/* Slightly bump key headlines */
.hero__title { font-size: clamp(3.6rem, 8vw, 7rem); line-height: .92; }
.freebie__title { font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: .95; }
.newsletter-section__title { font-size: clamp(2.6rem, 5.5vw, 5rem); line-height: .95; }
.mission__quote { font-size: clamp(2.2rem, 4.5vw, 4rem); line-height: 1; }
.auth__title { font-size: clamp(2.6rem, 6vw, 4.5rem); line-height: .95; }
/* Reviews — recolor cards so golden stars always pop */
.review-card--peach { background: var(--c-forest); color: var(--c-cream); }
.review-card--golden { background: var(--c-burgundy); color: var(--c-cream); }
.review-card--terra { background: var(--c-terracotta); color: var(--c-cream); }
.review-card--peach .review-card__loc,
.review-card--golden .review-card__loc,
.review-card--terra .review-card__loc { color: rgba(254,250,232,.7); }
.review-card--peach .review-card__author,
.review-card--golden .review-card__author,
.review-card--terra .review-card__author { border-top-color: rgba(254,250,232,.18); }
.review-card--peach .review-card__avatar,
.review-card--golden .review-card__avatar,
.review-card--terra .review-card__avatar { background: var(--c-cream); color: var(--c-ink); }
.review-card__stars { color: var(--c-golden) !important; }
.review-card__stars svg { width: 20px; height: 20px; }
/* ============ FREEBIE / PRODUCT MODAL ============ */
/* Cap the popup height and scroll the body side internally so a long product
description doesn't blow the popup out of the viewport. */
.popup--freebie { max-width: 560px; padding: 0; overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; }
.freebie-modal__grid {
display: grid;
grid-template-columns: 1fr; /* single column everywhere: images on top, content below */
max-height: 90vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.freebie-modal__body { overflow-y: visible; }
/* Framed paper-card inside the modal cover.
Design mode (only sub + title + emoji) — narrower, book-shaped (5:7 portrait).
Image mode — wider, the image dictates its own ratio. */
.freebie-modal__cover .book-card__cover {
width: 64%; max-width: 200px;
aspect-ratio: 5 / 7;
padding: 20px 16px;
transform: none;
margin: 0 auto;
}
.freebie-modal__cover .book-card__cover--image {
width: 86%; max-width: 280px;
aspect-ratio: auto;
}
.freebie-modal__cover:hover .book-card__cover { transform: none; }
@media (max-width: 660px) {
/* Mobile: popup keeps its rounded-corner clipping (overflow:hidden), but the
BODY side scrolls internally so the content has room. */
.popup--freebie { max-width: 100%; max-height: 92vh; overflow: hidden; display: flex; flex-direction: column; }
/* Whole modal scrolls as one piece — so a swipe that starts on the cover
image scrolls too (no more "dead" top area). */
.freebie-modal__grid { grid-template-columns: 1fr; grid-template-rows: auto auto; max-height: 92vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.freebie-modal__cover { min-height: 0; padding: 22px 18px 16px; }
.freebie-modal__cover .book-card__cover { max-width: 200px; }
/* More specific than the base .freebie-modal__body rule below so it actually wins:
tighter side padding + real bottom margin under the checkout. */
.popup--freebie .freebie-modal__body { max-height: none; min-height: 0; overflow-y: visible; padding: 22px 18px 44px; }
}
.freebie-modal__cover {
background: var(--c-sky);
border-bottom: var(--bw-1) solid var(--c-ink);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px;
padding: 30px 24px 24px;
min-height: 0;
overflow: hidden; /* a book can never spill past the cover into the title */
text-align: center;
}
@media (max-width: 660px) {
.freebie-modal__cover { border-right: none; border-bottom: var(--bw-1) solid var(--c-ink); min-height: 220px; padding: 28px 20px; }
}
/* Desktop: the cover is a grid item with overflow:hidden, so its automatic
minimum size is 0 and the grid collapses it to just its padding — clipping
the top of the book / coverflow. Reserve height (mobile already does this
via the 220px rule above). Image products use the taller coverflow stage. */
@media (min-width: 661px) {
.freebie-modal__cover { min-height: 280px; }
.freebie-modal__cover--image { min-height: 360px; }
}
.freebie-modal__cover-sub {
font-family: var(--font-body); font-weight: 700;
font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--c-ink); opacity: .65;
}
.freebie-modal__cover-title {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(1.4rem, 3vw, 1.9rem); line-height: 1;
letter-spacing: -.02em; text-transform: uppercase;
color: var(--c-ink); margin: 0;
}
.freebie-modal__cover-icon { color: var(--c-terracotta); }
.freebie-modal__body { padding: 32px 32px 28px; display: flex; flex-direction: column; text-align: center; align-items: center; }
.freebie-modal__sep { width: 100%; height: 0; border: 0; border-top: var(--bw-1) solid var(--c-ink); margin: 4px 0 18px; opacity: .5; }
.freebie-modal__price { font-family: var(--font-body); font-weight: 900; font-size: 1.8rem; line-height: 1; letter-spacing: -.02em; color: var(--c-terracotta); margin: 0 0 18px; display: flex; align-items: baseline; justify-content: center; gap: 12px; flex-wrap: wrap; }
.freebie-modal__price-was { font-size: 1.1rem; font-weight: 700; color: var(--c-text-muted); text-decoration: line-through; letter-spacing: -.01em; }
.freebie-modal__body .freebie-modal__badges { justify-content: center; }
.freebie-modal__body .pay-wrap { margin-top: 4px; }
.freebie-modal__body .freebie-modal__actions { width: 100%; }
.freebie-modal__title {
font-family: var(--font-display); font-weight: 900;
font-size: clamp(1.5rem, 3vw, 2rem); line-height: 1.05; letter-spacing: -.02em;
text-transform: uppercase; margin: 10px 0 8px; color: var(--c-ink);
}
.freebie-modal__meta { font-size: .82rem; color: var(--c-text-muted); margin: 0 0 16px; }
.freebie-modal__desc { color: var(--c-text); font-size: .96rem; line-height: 1.55; margin: 0 0 22px; flex: 1; }
.freebie-modal__actions { margin-top: auto; }
.freebie-modal__hint { font-size: .78rem; color: var(--c-text-muted); text-align: center; margin: 10px 0 0; }
/* Modal "more details" — Lo que aprenderás / Para ti si… */
.freebie-modal__details { width: 100%; text-align: left; display: flex; flex-direction: column; gap: 18px; margin: 2px 0 6px; }
.fb-detail__h { font-family: var(--font-display); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink); margin: 0 0 10px; }
.fb-detail__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.fb-detail__list li { position: relative; padding-left: 24px; font-size: .9rem; line-height: 1.4; color: var(--c-text); }
.fb-detail__list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--c-terracotta); font-weight: 900; }
.fb-detail__list li strong { display: block; color: var(--c-ink); font-weight: 700; }
.fb-detail__list li span { color: var(--c-text-muted); font-size: .84rem; }
/* "Más información" disclosure — collapses the detail blocks to cut scroll */
.fb-more { width: 100%; border: var(--bw-1) solid var(--c-ink); border-radius: var(--radius-md); background: var(--c-cream); box-shadow: var(--shadow-xs); overflow: hidden; }
.fb-more__summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; font-family: var(--font-display); font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink); user-select: none; }
.fb-more__summary::-webkit-details-marker { display: none; }
.fb-more__chevron { width: 10px; height: 10px; border-right: 2.4px solid var(--c-ink); border-bottom: 2.4px solid var(--c-ink); transform: rotate(45deg); transition: transform .2s var(--ease); flex: 0 0 auto; margin-bottom: 3px; }
.fb-more[open] .fb-more__chevron { transform: rotate(225deg); margin-bottom: -3px; }
.fb-more__body { padding: 4px 16px 16px; }
.fb-more:not([open]) .fb-more__body { display: none; }
.fb-more[open] .fb-more__body { display: flex; flex-direction: column; gap: 18px; }
/* Recommended (same-category) books at the bottom of the modal */
.freebie-modal__related { width: 100%; margin-top: 22px; padding-top: 18px; border-top: var(--bw-1) solid rgba(17,26,23,.15); }
.fb-related__h { text-align: left; margin-bottom: 14px; }
.fb-related__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.fb-related__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; }
.fb-related__item .book3d { width: 100%; }
@media (max-width: 660px) { .fb-related__row { gap: 10px; } }
/* Reviews — always-horizontal carousel (mobile + desktop).
Overrides the default 3-column grid + the generic [data-h-drag] mobile rules. */
.reviews-grid {
display: flex !important;
grid-template-columns: none !important;
gap: 24px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-behavior: smooth; /* JS just sets scrollLeft; browser animates the jump */
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
cursor: grab;
padding: 8px 24px 36px;
margin: 0 -24px;
perspective: 1400px;
user-select: none;
-webkit-user-select: none;
}
.reviews-grid::-webkit-scrollbar { display: none; }
.reviews-grid > * {
flex: 0 0 auto;
width: 360px;
scroll-snap-align: start;
transform-style: preserve-3d;
will-change: transform;
opacity: 1 !important;
transition: box-shadow .25s var(--ease-out), transform .25s var(--ease-out) !important;
}
.reviews-grid.is-dragging { cursor: grabbing; }
.reviews-grid.is-dragging > * { pointer-events: none; }
.reviews-grid img { pointer-events: none; -webkit-user-drag: none; }
@media (max-width: 899px) {
.reviews-grid { padding: 8px 20px 36px; margin: 0 -20px; }
.reviews-grid > * { width: min(82vw, 360px); }
}
/* Review card: fixed height so all cards in the carousel match.
Quote is clamped to 6 lines and capped at ~280 chars from the form side. */
.review-card { min-height: 320px; }
.review-card__quote {
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 0 1 auto;
}
.review-card__author { margin-top: auto; } /* pin the author block to the bottom */
/* Top row — stars on the left, dog-name pill on the right */
.review-card__top {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 16px;
}
.review-card__top .review-card__stars { margin-bottom: 0; }
.review-card__dog {
display: inline-flex; align-items: center; gap: 6px;
background: var(--c-cream); color: var(--c-ink);
border: var(--bw-1) solid var(--c-ink); border-radius: var(--radius-full);
padding: 5px 12px 5px 9px;
font-size: .72rem; font-weight: 900;
letter-spacing: .08em; text-transform: uppercase;
box-shadow: var(--shadow-xs);
white-space: nowrap;
}
.review-card__dog svg { width: 14px; height: 14px; }
/* On dark-card variants, keep the pill cream so it pops */
.review-card--peach .review-card__dog,
.review-card--golden .review-card__dog,
.review-card--terra .review-card__dog { background: var(--c-cream); color: var(--c-ink); }
/* ============================================================
ANIMATION SUPPORT — sticky-stack + horizontal drag
============================================================ */
/* Horizontal drag track — mobile/tablet only. On desktop keep original grid. */
@media (max-width: 899px) {
[data-h-drag] {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto;
overflow-y: visible;
gap: 18px;
padding: 24px 20px 36px;
margin: 0 -20px;
scroll-snap-type: x mandatory;
cursor: grab;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
perspective: 1400px;
user-select: none;
-webkit-user-select: none;
}
[data-h-drag]::-webkit-scrollbar { display: none; }
[data-h-drag] > * {
flex: 0 0 auto;
width: min(82vw, 380px);
scroll-snap-align: center;
transform-style: preserve-3d;
will-change: transform;
pointer-events: auto;
opacity: 1 !important;
transition: box-shadow .25s var(--ease-out), background .2s var(--ease) !important;
}
[data-h-drag].is-dragging { cursor: grabbing; }
[data-h-drag].is-dragging > * { pointer-events: none; }
[data-h-drag] img { pointer-events: none; -webkit-user-drag: none; }
}
/* Mobile sticky stack */
@media (max-width: 768px) {
[data-stack-mobile] {
display: block !important;
grid-template-columns: none !important;
padding-top: 8px;
padding-bottom: 32px;
}
[data-stack-mobile] > * {
position: sticky;
top: 90px;
margin-bottom: 22vh;
transform-origin: center top;
will-change: transform, opacity, filter;
opacity: 1 !important;
transition: none !important;
}
[data-stack-mobile] > *:last-child {
margin-bottom: 0;
}
/* When a library filter is active, show results as a normal stacked list
(no sticky pinning / big 22vh gaps that assume all cards are visible) */
body.lib-filtering [data-stack-mobile] > * {
position: static !important;
margin-bottom: 24px !important;
transform: none !important;
}
body.lib-filtering [data-stack-mobile] > *:last-child {
margin-bottom: 0 !important;
}
}
/* Horizontal track on mobile = full bleed */
@media (max-width: 768px) {
[data-h-drag] {
padding: 24px 20px 40px;
margin: 0 -20px;
}
[data-h-drag] > * { width: 84vw; }
}
/* Video card needs 3D context */
[data-video-tilt] {
perspective: 1400px;
}
[data-video-tilt] > * {
transform-style: preserve-3d;
will-change: transform;
}
.video-card__thumb {
will-change: transform;
}
.video-card__play {
will-change: transform;
}
/* Team cards need 3D context */
.team-grid {
perspective: 1400px;
}
.team-card {
transform-style: preserve-3d;
will-change: transform;
}
.team-card__img {
will-change: transform;
overflow: hidden;
}
/* Utilities */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; } .mb-32 { margin-bottom: 32px; }
.full-w { width: 100%; justify-content: center; }
/* ============================================================
COVER FONTS + OVERFLOW (Playfair title · New Montreal subtitle)
============================================================ */
.book-card__cover-title, .featured-book__cover-title, .fc-card__cover-title, .product-cover__title {
font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
overflow-wrap: anywhere; word-break: break-word; hyphens: auto;
}
.book-card__cover-sub, .fc-cover-sub, .featured-book__cover-tag, .fc-card__cover-tag, .product-cover__sub {
font-family: 'HelveticaCond', 'Helvetica Neue Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
}
/* keep long product names inside their boxes */
.book-card__title, .featured-book__title, .fc-card__title, .product-hero__title {
overflow-wrap: anywhere; word-break: break-word;
}
/* image-based cover fills the cover area */
.book-card__cover-img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ============================================================
BOOK FRAME (.book3d) — "real book" 5:7 cover treatment.
Wrap any cover (an ![]()
OR a .gcover) in it.
============================================================ */
.book3d{ position:relative; display:inline-block; border-radius:2px 4px 4px 2px;
transition:transform .25s ease, box-shadow .25s ease; }
.book3d > .cover{
display:block; position:relative; overflow:hidden;
width:var(--w,200px); height:calc(var(--w,200px) * 1.4); /* 5:7 */
border-radius:inherit; background:#cfc9b8 center/cover no-repeat;
container-type:inline-size;
}
.book3d > .cover > img{ width:100%; height:100%; object-fit:cover; display:block; }
/* spine fold (left) */
.book3d::before{ content:""; position:absolute; top:0; bottom:0; left:0; width:11px;
border-radius:inherit; pointer-events:none; z-index:3;
background:linear-gradient(to right,
rgba(0,0,0,.22) 0px, rgba(0,0,0,.05) 1.5px, rgba(255,255,255,.70) 3px,
rgba(255,255,255,.12) 4.5px, rgba(0,0,0,.18) 6px, rgba(0,0,0,.04) 8px, rgba(0,0,0,0) 11px); }
/* corner glow + bottom depth shadow + fore-edge page lines + sheen.
Overlays children below z-index:2 (e.g. the bottom banner). */
.book3d::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:2; border-radius:inherit;
background:
radial-gradient(28px 28px at top left, rgba(255,255,255,.40), rgba(255,255,255,0) 72%),
radial-gradient(28px 28px at top right, rgba(255,255,255,.34), rgba(255,255,255,0) 72%),
radial-gradient(24px 24px at bottom left, rgba(255,255,255,.18), rgba(255,255,255,0) 72%),
radial-gradient(24px 24px at bottom right, rgba(255,255,255,.18), rgba(255,255,255,0) 72%),
linear-gradient(to top, rgba(0,0,0,.30) 0, rgba(0,0,0,.10) 3%, rgba(0,0,0,.02) 6.5%, rgba(0,0,0,0) 10%),
linear-gradient(to right,
rgba(0,0,0,0) calc(100% - 7px), rgba(0,0,0,.06) calc(100% - 6px), rgba(255,255,255,.55) calc(100% - 5px),
rgba(0,0,0,.05) calc(100% - 4px), rgba(255,255,255,.6) calc(100% - 3px), rgba(0,0,0,.05) calc(100% - 2px),
rgba(255,255,255,.5) calc(100% - 1px), rgba(0,0,0,.04) 100%),
linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 22%); }
/* no border · hard offset + soft contact shadow */
.book3d--shadow{ box-shadow:5px 6px 0 var(--c-ink); }
.book3d--shadow:hover{ transform:translate(-2px,-2px); box-shadow:7px 8px 0 var(--c-ink); }
/* generated cover: subtitle TOP, title CENTERED */
.gcover{ color:#fff; }
.gcover__top{ position:absolute; top:8%; left:8%; right:8%; z-index:1; display:flex; align-items:center; justify-content:flex-start; gap:7px; }
.gcover .gemoji{ font-size:13cqw; line-height:1; display:inline-flex; }
.gcover .gemoji .icon{ width:1em; height:1em; }
.gcover .gsub{ font-size:4.4cqw; letter-spacing:.13em; text-transform:uppercase; opacity:.92; font-weight:700; }
.gcover .gtitle{ position:absolute; top:46%; left:8%; right:8%; transform:translateY(-50%); z-index:1; text-align:left;
font-weight:900; font-size:15.5cqw; line-height:1.02; letter-spacing:-.02em; overflow-wrap:break-word; hyphens:none; }
/* secondary tag — top-right corner (stays inside frame) */
.gtag{ position:absolute; z-index:4; display:inline-flex; align-items:center; gap:1.2cqw;
background:var(--c-golden); color:var(--c-ink); border:1.5px solid var(--c-ink); border-radius:999px;
padding:1.4cqw 3.2cqw; font-weight:800; font-size:4cqw; text-transform:uppercase; letter-spacing:.05em;
white-space:nowrap; box-shadow:1.5px 1.5px 0 var(--c-ink); }
.gtag--terra{ background:var(--c-terracotta); color:#fff; }
/* Per-tag colors — mirror the .lib-tag palette so the cover badge matches the
color assigned to each tag in the admin (the `tags` table). */
.gtag--gratis{ background:var(--c-forest); color:var(--c-cream); }
.gtag--caliente{ background:var(--c-terracotta); color:var(--c-cream); }
.gtag--nuevo{ background:var(--c-sky); color:var(--c-ink); }
.gtag--popular{ background:var(--c-golden); color:var(--c-ink); }
.gtag--recomendado{ background:var(--c-lavender); color:var(--c-ink); }
.gtag--bestseller{ background:var(--c-terracotta); color:var(--c-cream); }
.gtag--default{ background:var(--c-pink); color:var(--c-ink); }
.gtag--tr{ top:7%; right:7%; transform:rotate(4deg); transform-origin:center; }
/* OPTIONAL integrated bottom banner — z-index:1 so the cover's bottom
shadow/glow (::after, z2) passes over it. No top stroke. */
.gbanner{ position:absolute; left:0; right:0; bottom:0; z-index:1;
display:flex; align-items:center; justify-content:center; gap:1.5cqw;
padding:3.4cqw; font-weight:800; font-size:4.2cqw; letter-spacing:.1em;
text-transform:uppercase; white-space:nowrap;
background:rgba(17,26,23,.62); color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.35);
-webkit-backdrop-filter:saturate(1.1) brightness(.95); backdrop-filter:saturate(1.1) brightness(.95); }
.gbanner--solid{ background:var(--c-forest); color:var(--c-cream); text-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
.gbanner--terra{ background:var(--c-terracotta); color:#fff; text-shadow:none; -webkit-backdrop-filter:none; backdrop-filter:none; }
/* book frame that fills its container width (used in the biblioteca list) */
.book3d--fill{ display:block; width:100%; }
.book3d--fill > .cover{ width:100%; height:auto; aspect-ratio:5/7; }
/* biblioteca: just the book + a price/button bar (no card chrome) */
.book-card--bare{ background:transparent; border:0; border-radius:0; box-shadow:none; overflow:visible; }
.book-card--bare:hover{ transform:none; box-shadow:none; }
.book-card__coverlink{ display:block; text-decoration:none; }
.book-card__bar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:18px; }
.book-card__bar .book-card__price{ font-family:'HelveticaNeue','Helvetica Neue',Helvetica,Arial,sans-serif; font-weight:900; font-size:1.1rem; }
.book-card__bar .book-card__price--free{ color:var(--c-terracotta); }
.book-card__add{ flex:0 0 auto; gap:7px; padding:8px 14px; white-space:nowrap; }
.book-card__add .icon{ width:16px; height:16px; }
/* biblioteca on phones: 2 books per row, each centered in its column. */
@media (max-width: 640px){
.library-grid{
grid-template-columns:repeat(2, 1fr);
gap:32px 24px;
justify-items:center;
}
.library-grid > .book-card{ width:100%; max-width:170px; }
.library-section__head h2{ font-size:1.35rem; }
.book-card__bar{ gap:8px; margin-top:14px; }
.book-card__bar .book-card__price{ font-size:1rem; }
.book-card__add{ padding:8px 11px; }
.book-card__add-label{ display:none; }
}
/* book frame inside the product modal — capped + centered */
.freebie-modal__cover .book3d--fill,
.freebie-modal__cover .cover-carousel{ width:100%; max-width:180px; margin:0 auto; }
.freebie-modal__cover .cover-carousel--flow{ max-width:400px; } /* wide enough to show the full side books */
.freebie-modal__cover--image{ background: var(--c-cream-alt); } /* offwhite behind the coverflow */