/* =========================================================================
COFAINE — e-commerce
Réplica de cofaine.pe fuera de Squarespace.
Los colores no están adivinados: salen de las variables de tema del sitio
original leídas en el navegador (hsla(267.61,100%,77.84%) = #C28EFF, etc.).
Los cuatro temas de sección de Squarespace —dark, black, light, bright—
se conservan porque el ritmo del home depende de ellos.
========================================================================= */
/* --- Tipografía ---------------------------------------------------------
El original usa Aktiv Grotesk (Adobe Fonts, kit no redistribuible). Se
sirve Archivo auto-hospedada, igual que en la carta QR. Si algún día se
contrata un proyecto propio de Adobe Fonts, la constante ADOBE_FONTS_KIT
de build.mjs mete el y 'aktiv-grotesk' toma el control sola.
-------------------------------------------------------------------- */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/archivo-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
--negro: #000000;
--carbon: #121212;
--tinta: #1e1e1e;
--crema: #f9f1e1;
--crema-barra: #f5f4eb;
--morado: #c28eff;
--morado-hondo: #6d28d9;
--blanco: #ffffff;
--fuente: 'aktiv-grotesk', 'Archivo', system-ui, -apple-system,
'Helvetica Neue', Arial, sans-serif;
/* Escala calcada de los tamaños medidos en cofaine.pe a 375 y 1440 px. */
/* El titulazo se mide contra el ancho de la ventana, no contra un punto
fijo: Archivo es algo más ancha que Aktiv Grotesk y «DOSIS ILIMITADA»
se partía en dos líneas entre 1100 y 1400 px. */
--fs-titulazo: clamp(38px, 4.7vw, 67.84px);
--fs-t2: clamp(28px, 20px + 2.2vw, 46px);
--fs-t3: clamp(22px, 18px + 1.1vw, 33.28px);
--fs-base: clamp(15px, 14.4px + 0.16vw, 17px);
--fs-chico: 14.27px;
--gap: clamp(20px, 3vw, 40px);
--pad-sec: clamp(64px, 8vw, 130px);
--ancho: 1200px;
--ancho-amplio: 1380px;
--ancho-medio: 860px;
--radio: 20px;
--pastilla: 300px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
body {
margin: 0;
background: var(--negro);
color: var(--blanco);
font-family: var(--fuente);
font-size: var(--fs-base);
line-height: 1.8;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.16; font-weight: 700; letter-spacing: .01em; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--morado); outline-offset: 3px; border-radius: 4px; }
.saltar {
position: absolute; left: -9999px; top: 0; z-index: 10001;
background: var(--morado); color: var(--carbon);
padding: 12px 20px; font-weight: 700;
}
.saltar:focus { left: 0; }
.centro { text-align: center; }
/* --- Logo: un solo PNG blanco usado como máscara, así sirve sobre fondo
oscuro y sobre crema sin necesitar un segundo archivo. --------------- */
.logo {
display: block;
width: 148px; height: 26px;
background-color: currentColor;
-webkit-mask: url('/assets/img/logo.png') no-repeat left center / contain;
mask: url('/assets/img/logo.png') no-repeat left center / contain;
}
/* ---------------------------------------------------- Barra de anuncio -- */
.anuncio {
position: relative; z-index: 10000;
background: var(--crema-barra); color: var(--negro);
}
.anuncio[hidden] { display: none; }
.anuncio__texto { padding: 10px 40px; text-align: center; font-size: 13px; line-height: 1.6; }
.anuncio__texto p { margin: 0; }
.anuncio__cerrar {
position: absolute; inset: 0 0 auto auto;
width: 38px; height: 100%;
display: flex; align-items: center; justify-content: center;
border: 0; padding: 0; background: none; color: inherit;
font: inherit; font-size: 18px; line-height: 1; cursor: pointer;
}
/* ------------------------------------------------------------- Cabecera -- */
.cab {
position: sticky; top: 0; z-index: 900;
background: var(--carbon); color: var(--blanco);
}
.cab__inner {
max-width: var(--ancho-amplio);
margin: 0 auto;
padding: 18px clamp(18px, 4vw, 48px);
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: var(--gap);
}
.cab__logo { display: block; text-decoration: none; }
.cab__nav { justify-self: center; }
.cab__lista { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.cab__lista a, .cab__masbtn {
font-size: 13px; letter-spacing: .08em; text-transform: uppercase;
text-decoration: none; color: inherit; opacity: .82;
background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
}
.cab__lista a:hover, .cab__masbtn:hover { opacity: 1; }
.cab__mas { position: relative; }
.cab__masbtn::after { content: ' ▾'; }
.cab__submenu {
position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
min-width: 220px; padding: 10px;
background: var(--carbon); border: 1px solid rgba(255,255,255,.14);
border-radius: 14px; box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.cab__submenu[hidden] { display: none; }
.cab__submenu a { display: block; padding: 9px 12px; border-radius: 9px; }
.cab__submenu a:hover { background: rgba(255,255,255,.08); }
.cab__cta .btn { padding: 13px 26px; font-size: 12.5px; }
.cab__burger { display: none; }
@media (max-width: 1023px) {
.cab__inner { grid-template-columns: auto 1fr; }
.cab__nav { display: none; }
/* El CTA «Dosis mensual» ya está dentro del menú móvil: aquí sólo empujaba
la cabecera fuera de la pantalla. */
.cab__acciones > .btn { display: none; }
.cab__burger {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
justify-self: end; width: 42px; height: 42px;
background: none; border: 0; padding: 0 8px; cursor: pointer;
}
.cab__burger span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.cab__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cab__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cab__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.cab__movil { padding: 8px clamp(18px, 4vw, 48px) 28px; border-top: 1px solid rgba(255,255,255,.1); }
.cab__movil[hidden] { display: none; }
.cab__movil ul { margin-bottom: 18px; }
.cab__movil a {
display: block; padding: 13px 0; text-decoration: none;
font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
border-bottom: 1px solid rgba(255,255,255,.08);
}
}
@media (min-width: 1024px) { .cab__movil { display: none; } }
/* -------------------------------------------------------------- Botones -- */
.btn {
display: inline-block;
padding: 20px 36px;
border: 1px solid transparent;
border-radius: var(--pastilla);
font-size: var(--fs-chico);
font-weight: 500;
letter-spacing: .02em;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
cursor: pointer;
}
.btn:hover { transform: translateY(-2px); }
.btn--primario { background: var(--morado); color: var(--carbon); }
.btn--tinta { background: var(--tinta); color: var(--blanco); }
/* Primario y tinta no cambian de fondo al pasar por encima: se llenan de
abajo arriba con un ::before. Está en el bloque MOVIMIENTO, junto con la
transición del botón. */
.btn--fantasma { background: transparent; color: inherit; border-color: currentColor; }
.btn--fantasma:hover { background: currentColor; }
.btn--fantasma:hover { color: var(--carbon); }
.sec--light .btn--fantasma:hover, .sec--bright .btn--fantasma:hover { color: var(--crema); }
.enlace-flecha {
display: inline-block;
font-size: var(--fs-chico); font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; text-decoration: none;
border-bottom: 2px solid var(--morado); padding-bottom: 3px;
}
.enlace-flecha:hover { border-bottom-color: currentColor; }
/* ------------------------------------------------------------ Secciones -- */
.sec { position: relative; padding: var(--pad-sec) clamp(18px, 4vw, 48px); }
.sec__cuerpo { position: relative; z-index: 1; max-width: var(--ancho); margin: 0 auto; }
.sec__cuerpo--ancho { max-width: var(--ancho-amplio); }
.sec__cuerpo--medio { max-width: var(--ancho-medio); }
.sec--dark { background: var(--carbon); color: var(--blanco); }
.sec--black { background: var(--negro); color: var(--blanco); }
.sec--light { background: var(--crema); color: var(--negro); }
/* Sobre el morado el texto va en carbón, no en blanco: es lo que se ve en el
sitio original (la variable de Squarespace decía blanco, pero el render
real es oscuro) y además el blanco al 85% no llega a 3:1 contra #C28EFF. */
.sec--bright { background: var(--morado); color: var(--tinta); }
.sec--bright h1, .sec--bright h2, .sec--bright h3, .sec--bright h4 { color: var(--tinta); }
.sec--imagen { display: grid; align-items: center; min-height: min(72vh, 620px); }
.sec__fondo { position: absolute; inset: 0; overflow: hidden; }
.sec__fondo img { width: 100%; height: 100%; object-fit: cover; }
.sec--imagen::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72));
}
.sec--imagen .sec__cuerpo { z-index: 2; }
/* ------------------------------------------------------------ Tipografía -- */
.titulazo { font-size: var(--fs-titulazo); letter-spacing: -.005em; }
.titulazo--centro { text-align: center; }
.titulo2 { font-size: var(--fs-t2); }
.titulo2--centro { text-align: center; }
.titulo3 { font-size: var(--fs-t3); }
.titulo3--centro { text-align: center; }
.subrayado {
font-style: normal;
color: var(--morado);
box-shadow: inset 0 -.09em 0 var(--morado);
}
.sec--bright .subrayado { color: var(--blanco); box-shadow: inset 0 -.09em 0 var(--blanco); }
.kicker {
margin: 0 0 18px;
font-size: 13px; font-weight: 500;
letter-spacing: .16em; text-transform: uppercase;
opacity: .78;
}
.kicker--centro { text-align: center; }
.bajada { font-size: clamp(16px, 15px + .3vw, 19px); line-height: 1.7; opacity: .9; }
.bajada--centro { text-align: center; max-width: 62ch; margin-inline: auto; }
.titulo2 + .bajada, .titulazo + .bajada { margin-top: 18px; }
.bajada--centro + .grilla-cafes, .bajada--centro + ul, .bajada--centro + ol, .bajada--centro + div { margin-top: clamp(34px, 5vw, 64px); }
.titulo2--centro + .grilla-cafes { margin-top: clamp(34px, 5vw, 64px); }
/* ----------------------------------------------------------------- Hero -- */
.sec--hero { padding-block: clamp(56px, 7vw, 110px); }
.hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 5vw, 80px); }
.hero__bajada { margin: 26px 0 34px; font-size: clamp(18px, 16px + .6vw, 24px); font-weight: 700; line-height: 1.5; }
.hero__botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.hero__arte { display: grid; place-items: center; }
/* La foto de la tarjeta viene sobre un cuadrado morado; el original la
recorta en círculo. Se recorta acá igual, en vez de dibujar un círculo
aparte, para que el morado sea el de la foto y no uno inventado. */
.hero__arte img {
width: min(100%, 520px); aspect-ratio: 1;
object-fit: cover; border-radius: 50%;
}
@media (max-width: 860px) {
.hero { grid-template-columns: 1fr; }
.hero__arte { order: -1; }
.hero__arte img { width: min(84%, 420px); }
}
/* Franjas con foto de fondo */
.franja { text-align: center; }
.franja .kicker { margin: 18px 0 0; }
.franja--baja .titulo2 { max-width: 20ch; margin-inline: auto; }
.franja--baja .centro { margin-top: 34px; }
/* ------------------------------------------------------- Grilla de cafés -- */
.grilla-cafes { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-bottom: clamp(34px, 5vw, 56px); }
@media (max-width: 900px) { .grilla-cafes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grilla-cafes { grid-template-columns: 1fr; } }
.cafe-card__link {
display: grid; gap: 10px;
text-decoration: none; height: 100%;
}
.cafe-card__foto { display: block; overflow: hidden; border-radius: var(--radio); background: rgba(0,0,0,.06); }
.cafe-card__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease; }
.cafe-card__link:hover .cafe-card__foto img { transform: scale(1.05); }
.cafe-card__nombre { font-size: 19px; font-weight: 700; letter-spacing: .03em; margin-top: 6px; }
.cafe-card__texto { font-size: 15px; line-height: 1.6; opacity: .82; }
.cafe-card__mas { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--morado-hondo); margin-top: auto; padding-top: 6px; }
.sec--dark .cafe-card__mas, .sec--black .cafe-card__mas { color: var(--morado); }
/* -------------------------------------------------------- Bloque en dos -- */
.duo { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 5vw, 80px); }
.duo--invertido .duo__arte { order: 2; }
.duo__arte img { width: 100%; border-radius: var(--radio); }
.duo__arte--circulo img { aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
.duo__texto .bajada { margin: 20px 0 32px; }
@media (max-width: 860px) {
.duo { grid-template-columns: 1fr; }
.duo--invertido .duo__arte { order: -1; }
}
/* ---------------------------------------------------------------- Cinta -- */
.cinta { position: relative; overflow: hidden; background: var(--negro); color: var(--blanco); padding: clamp(40px, 6vw, 80px) 0; }
.cinta__fondo { position: absolute; inset: 0; opacity: .28; }
.cinta__fondo img { width: 100%; height: 100%; object-fit: cover; }
.cinta__pista { position: relative; display: flex; width: max-content; animation: correr 42s linear infinite; }
.cinta--simple { background: var(--carbon); }
.cinta__grupo { display: flex; align-items: center; gap: 22px; padding-right: 22px; white-space: nowrap; }
.cinta__grupo span { font-size: clamp(30px, 5vw, 62px); font-weight: 700; letter-spacing: .01em; }
.cinta__punto { color: var(--morado); }
@keyframes correr { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .cinta__pista { animation: none; } }
/* ------------------------------------------------------ Grilla instagram -- */
.grilla-ig { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: clamp(34px, 5vw, 56px) 0; }
.grilla-ig img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
@media (max-width: 700px) { .grilla-ig { grid-template-columns: repeat(2, 1fr); } }
.cierre { display: grid; justify-items: center; gap: 28px; text-align: center; }
/* ------------------------------------------------------------- Acordeón -- */
.acordeon { display: grid; gap: 0; margin-top: clamp(30px, 4vw, 52px); }
.acordeon__item { border-bottom: 1px solid rgba(0,0,0,.16); }
.acordeon__item:first-child { border-top: 1px solid rgba(0,0,0,.16); }
.sec--dark .acordeon__item, .sec--black .acordeon__item { border-color: rgba(255,255,255,.16); }
.acordeon__item summary {
list-style: none; cursor: pointer;
padding: 24px 44px 24px 0; position: relative;
font-size: clamp(17px, 16px + .35vw, 21px); font-weight: 700;
}
.acordeon__item summary::-webkit-details-marker { display: none; }
.acordeon__item summary::after {
content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-size: 26px; font-weight: 400; line-height: 1; color: var(--morado-hondo);
}
.acordeon__item[open] summary::after { content: '–'; }
.acordeon__cuerpo { padding: 0 0 26px; max-width: 68ch; }
.acordeon__cuerpo ol, .acordeon__cuerpo ul { margin: 0 0 1em; padding-left: 1.3em; }
.acordeon__cuerpo ol { list-style: decimal; }
.acordeon__cuerpo ul { list-style: disc; }
.acordeon__cuerpo li { margin-bottom: .35em; }
/* ---------------------------------------------------------------- Planes -- */
/* stretch y no center: los planes tienen distinto número de beneficios y
centrados quedaban desalineados. El destacado sigue distinguiéndose por
la cinta, el borde y la sombra. */
.planes { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; margin: clamp(40px, 5vw, 70px) 0 40px; }
@media (max-width: 900px) { .planes { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }
.plan {
position: relative;
background: var(--blanco); color: var(--negro);
border-radius: var(--radio);
padding: clamp(30px, 4vw, 48px) clamp(22px, 3vw, 34px);
text-align: center;
display: grid; gap: 14px; justify-items: center;
box-shadow: 0 20px 40px rgba(0,0,0,.12);
}
.plan--destacado { padding-block: clamp(42px, 5.5vw, 66px); box-shadow: 0 28px 60px rgba(0,0,0,.22); }
.plan__cinta {
position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
background: var(--tinta); color: var(--blanco);
padding: 6px 16px; border-radius: var(--pastilla);
font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.plan__nombre { font-size: clamp(21px, 18px + .8vw, 27px); letter-spacing: .04em; }
.plan__precio { margin: 0; font-size: clamp(24px, 20px + 1vw, 32px); font-weight: 700; }
.plan__detalle { margin: 0; font-weight: 700; font-size: 15px; line-height: 1.55; }
.plan__extra { margin: 0 0 8px; font-size: 14px; line-height: 1.55; opacity: .78; }
.plan .btn { margin-top: 4px; }
.notas { max-width: 70ch; margin-inline: auto; text-align: center; font-size: 13.5px; line-height: 1.7; opacity: .85; }
.notas p { margin: 0 0 .6em; }
.moliendas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 760px) { .moliendas { grid-template-columns: repeat(2, 1fr); } }
.moliendas li {
display: grid; gap: 4px; padding: 22px;
border: 1px solid rgba(0,0,0,.16); border-radius: 16px;
background: rgba(255,255,255,.5);
}
.moliendas strong { font-size: 16px; }
.moliendas span { font-size: 13.5px; opacity: .75; }
/* ============================================================ COFAINE CLUB */
/* --- Pasos --- */
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: clamp(38px, 5vw, 64px); }
@media (max-width: 860px) { .pasos { grid-template-columns: 1fr; } }
.paso { padding: clamp(26px, 3vw, 38px); border-radius: var(--radio); background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.1); }
.paso__n { display: block; font-size: 40px; font-weight: 700; color: var(--morado-hondo); line-height: 1; margin-bottom: 14px; }
.paso__titulo { font-size: 21px; margin-bottom: 10px; }
.paso p { margin: 0; font-size: 15.5px; line-height: 1.7; opacity: .85; }
/* --- Reglas de acumulación --- */
.reglas { margin-top: clamp(30px, 4vw, 50px); border-top: 1px solid rgba(255,255,255,.16); }
.reglas li {
display: flex; flex-wrap: wrap; gap: 8px 20px;
justify-content: space-between; align-items: baseline;
padding: 18px 0; border-bottom: 1px solid rgba(255,255,255,.16);
}
.reglas__que { font-size: 16.5px; }
.reglas__gana { font-weight: 700; color: var(--morado); white-space: nowrap; }
/* --- Niveles --- */
.niveles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: clamp(38px, 5vw, 64px); }
@media (max-width: 1000px) { .niveles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .niveles { grid-template-columns: 1fr; } }
.nivel {
display: flex; flex-direction: column;
background: var(--blanco); color: var(--negro);
border-radius: var(--radio); overflow: hidden;
box-shadow: 0 20px 40px rgba(0,0,0,.14);
}
.nivel__cabeza { padding: clamp(24px, 3vw, 32px); background: var(--tinta); color: var(--blanco); }
.nivel--leyenda .nivel__cabeza { background: linear-gradient(140deg, var(--morado-hondo), var(--tinta)); }
.nivel__n { font-size: 12px; letter-spacing: .18em; opacity: .6; }
/* La cabecera de la tarjeta es oscura aunque la sección sea morada, así que
el nombre no puede heredar el color de titular de .sec--bright. */
.sec--bright .nivel__nombre, .nivel__nombre { color: var(--blanco); font-size: clamp(20px, 17px + .8vw, 26px); letter-spacing: .04em; margin: 6px 0 10px; }
.nivel__umbral { margin: 0; font-size: 13.5px; opacity: .75; }
.nivel__mult { margin: 4px 0 0; font-size: 15px; font-weight: 700; color: var(--morado); }
.nivel__beneficios { padding: clamp(22px, 3vw, 30px); display: grid; gap: 12px; align-content: start; }
.nivel__beneficios li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.55; }
.nivel__beneficios li::before {
content: ''; position: absolute; left: 0; top: .55em;
width: 12px; height: 12px; border-radius: 50%;
background: var(--morado);
}
/* --- Calculadora --- */
.calc { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
.calc__label { display: block; margin: 30px 0 10px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; }
.calc__rango { width: 100%; accent-color: var(--morado); height: 30px; }
.calc__gasto { display: block; font-size: clamp(28px, 24px + 1vw, 38px); font-weight: 700; color: var(--morado); }
.calc__check { display: flex; align-items: center; gap: 10px; margin-top: 20px; font-size: 15.5px; cursor: pointer; }
.calc__check input { width: 20px; height: 20px; accent-color: var(--morado); }
.calc__panel {
padding: clamp(30px, 4vw, 46px);
border: 1px solid rgba(255,255,255,.18); border-radius: var(--radio);
background: radial-gradient(120% 80% at 50% -10%, rgba(109,40,217,.28), transparent 62%), rgba(255,255,255,.03);
text-align: center;
}
.calc__cifra { margin: 0; font-size: clamp(46px, 36px + 3vw, 76px); font-weight: 700; line-height: 1; color: var(--morado); }
.calc__pie { margin: 6px 0 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; opacity: .7; }
.calc__panel hr { border: 0; border-top: 1px solid rgba(255,255,255,.16); margin: 26px 0; }
.calc__nivel { margin: 0 0 6px; font-size: 17px; }
.calc__nivel strong { color: var(--morado); }
.calc__tiempo { margin: 0 0 14px; font-size: 14.5px; opacity: .8; }
.calc__canje { margin: 0; font-size: 14.5px; opacity: .8; }
/* --- Juego: racha, misiones, insignias --- */
.juego { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(38px, 5vw, 60px); }
@media (max-width: 860px) { .juego { grid-template-columns: 1fr; } }
.juego__caja { padding: clamp(26px, 3.4vw, 40px); border-radius: var(--radio); background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.1); }
.juego__caja p { font-size: 15.5px; line-height: 1.7; opacity: .85; }
.juego__caja .titulo3 { margin-bottom: 14px; }
.escalera { display: flex; gap: 8px; align-items: flex-end; margin-top: 22px; }
.escalera li { flex: 1; display: grid; gap: 6px; justify-items: center; text-align: center; }
.escalera__sem { font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; opacity: .65; }
.escalera__mult {
display: grid; place-items: center; width: 100%;
padding: 10px 4px; border-radius: 10px;
background: var(--morado); color: var(--tinta);
font-weight: 700; font-size: 14px;
}
.escalera li:nth-child(1) .escalera__mult { opacity: .45; }
.escalera li:nth-child(2) .escalera__mult { opacity: .6; }
.escalera li:nth-child(3) .escalera__mult { opacity: .75; }
.escalera li:nth-child(4) .escalera__mult { opacity: .88; }
.misiones { display: grid; gap: 14px; margin-top: 20px; }
.misiones li {
display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline;
padding: 14px 0; border-top: 1px solid rgba(0,0,0,.12);
}
.misiones strong { font-size: 16px; }
.misiones span { grid-column: 1; font-size: 14px; opacity: .75; }
.misiones em { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-weight: 700; color: var(--morado-hondo); white-space: nowrap; }
.insignias-bloque { margin-top: clamp(48px, 6vw, 80px); }
.insignias { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 900px) { .insignias { grid-template-columns: repeat(2, 1fr); } }
.insignias li {
display: grid; gap: 4px; justify-items: center; text-align: center;
padding: 22px 16px; border-radius: 16px;
background: rgba(255,255,255,.55); border: 1px solid rgba(0,0,0,.1);
}
.insignia__emoji { font-size: 30px; line-height: 1.2; }
.insignias strong { font-size: 15px; }
.insignias li > span:last-child { font-size: 13px; opacity: .75; line-height: 1.5; }
/* --- Canjes --- */
.canjes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: clamp(34px, 5vw, 56px); }
@media (max-width: 980px) { .canjes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .canjes { grid-template-columns: 1fr; } }
.canje {
display: grid; gap: 2px; align-content: start;
padding: 26px 22px; border-radius: 16px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.03);
}
.canje__granos { font-size: 34px; font-weight: 700; line-height: 1; color: var(--morado); }
.canje__unidad { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .6; margin-bottom: 10px; }
.canje__que { font-size: 15px; line-height: 1.55; }
.canje--tienda { border-color: rgba(194,142,255,.4); }
.canje--merch, .canje--suscripcion { border-color: rgba(194,142,255,.6); background: rgba(194,142,255,.07); }
/* --- Club Ilimitado --- */
.precio-doble {
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
margin: 0 0 26px;
}
.precio-doble strong { font-size: clamp(30px, 24px + 1.4vw, 44px); line-height: 1; }
.precio-doble span { font-size: 14px; opacity: .8; }
.precio-doble em { font-style: normal; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }
.incluye { display: grid; gap: 10px; margin: 0 0 30px; }
.incluye li { position: relative; padding-left: 28px; font-size: 15.5px; line-height: 1.55; }
.incluye li::before {
content: '✓'; position: absolute; left: 0; top: 0;
font-weight: 700; color: var(--tinta);
}
.letra-chica { margin-top: 26px; font-size: 13.5px; line-height: 1.7; }
.letra-chica summary { cursor: pointer; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 12.5px; }
.letra-chica ul { list-style: disc; padding-left: 1.2em; margin: 14px 0; display: grid; gap: 6px; }
/* --- Formulario --- */
.unirme { text-align: center; }
.formulario { display: grid; gap: 16px; max-width: 460px; margin: clamp(30px, 4vw, 46px) auto 0; text-align: left; }
.formulario label { display: grid; gap: 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.formulario input {
font: inherit; font-size: 16px; letter-spacing: normal; text-transform: none;
padding: 15px 18px; border-radius: 12px;
border: 1px solid rgba(255,255,255,.24);
background: rgba(255,255,255,.05); color: inherit;
}
.formulario input::placeholder { color: rgba(255,255,255,.4); }
.formulario input:invalid:not(:placeholder-shown) { border-color: #ff9a9a; }
.formulario .btn { margin-top: 6px; justify-self: start; border: 0; font-family: inherit; }
.formulario__nota { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; opacity: .6; }
.formulario__gracias { margin: 8px 0 0; font-weight: 700; color: var(--morado); }
.formulario__gracias[hidden] { display: none; }
/* ================================================================ PRODUCTO */
.producto { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: start; }
@media (max-width: 860px) { .producto { grid-template-columns: 1fr; } }
.producto__foto img { width: 100%; border-radius: var(--radio); }
.producto__precio { margin: 18px 0 26px; font-size: clamp(24px, 20px + 1vw, 32px); font-weight: 700; }
.producto__precio span { font-size: 14px; font-weight: 400; opacity: .7; }
.producto__botones { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 34px; }
.ficha { display: grid; gap: 0; margin: 0 0 26px; border-top: 1px solid rgba(0,0,0,.16); }
.ficha > div { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid rgba(0,0,0,.16); }
.ficha dt { font-size: 13.5px; opacity: .7; margin: 0; }
.ficha dd { margin: 0; font-size: 15px; font-weight: 600; text-align: right; }
.notas-cata { text-align: center; }
.notas-cata .titulo2 { max-width: 24ch; margin: 0 auto .3em; }
.notas-cata__en { margin-top: 26px; font-size: 15px; font-style: italic; opacity: .8; max-width: 60ch; margin-inline: auto; }
.finca { text-align: center; }
.finca .titulazo { max-width: 20ch; margin-inline: auto; }
.finca .titulo3 { margin-top: 26px; }
.finca .kicker { margin-top: 8px; }
.finca__fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(34px, 5vw, 56px); }
@media (max-width: 760px) { .finca__fotos { grid-template-columns: 1fr; } }
.finca__fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radio); }
/* --------------------------------------------------------- Lista de cafés */
.lista-cafes { display: grid; gap: clamp(34px, 5vw, 64px); margin: clamp(38px, 5vw, 64px) 0; }
/* Las filas alternan lado. `order` sola no basta: hay que voltear también las
columnas, si no la foto cae en la pista ancha y el texto en la angosta. */
.cafe-fila { display: grid; grid-template-columns: 380px 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.cafe-fila:nth-child(even) { grid-template-columns: 1fr 380px; }
.cafe-fila:nth-child(even) .cafe-fila__foto { order: 2; }
@media (max-width: 780px) {
.cafe-fila, .cafe-fila:nth-child(even) { grid-template-columns: 1fr; }
.cafe-fila:nth-child(even) .cafe-fila__foto { order: -1; }
}
/* Las fotos de bolsa vienen en 3:4; recortadas a cuadrado las filas del
listado quedan del alto del texto y no obligan a un scroll enorme. */
.cafe-fila__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); }
.cafe-fila__texto p { font-size: 16px; line-height: 1.7; margin: 14px 0; }
.cafe-fila__precio { font-weight: 700; font-size: 20px; }
/* ------------------------------------------------------------------- Pie -- */
.pie { background: var(--negro); color: var(--blanco); padding: clamp(56px, 7vw, 96px) clamp(18px, 4vw, 48px) 40px; }
.pie__inner { max-width: var(--ancho-amplio); margin: 0 auto; }
.pie__marca { margin: 0 0 clamp(34px, 4vw, 52px); }
/* El logo es un bloque de ancho fijo (una máscara PNG), así que se centra
con márgenes automáticos: `text-align` no le haría nada. */
.pie__marca .logo { width: 180px; height: 32px; margin-inline: auto; }
.pie__bloques { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 860px) { .pie__bloques { grid-template-columns: 1fr; } }
.pie__bloque h3 { font-size: 16px; margin-bottom: 12px; }
.pie__bloque p { font-size: 14.5px; line-height: 1.75; opacity: .82; margin: 0; }
.pie__legales { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: clamp(40px, 5vw, 64px) 0 18px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.pie__legales a { font-size: 13.5px; opacity: .8; }
.pie__copy { margin: 0; font-size: 12.5px; opacity: .55; text-align: center; }
/* -------------------------------------------------------------- WhatsApp -- */
.wa {
position: fixed; right: 18px; bottom: 18px; z-index: 950;
width: 52px; height: 52px; border-radius: 50%;
display: grid; place-items: center;
background: #25d366; color: #fff;
box-shadow: 0 8px 22px rgba(0,0,0,.3);
transition: transform .15s ease;
}
.wa:hover { transform: scale(1.06); }
.wa svg { width: 30px; height: 30px; }
/* ====================================== Flujo de suscripción (3 pasos) === */
.flujo { max-width: 900px; margin-inline: auto; }
.flujo .bajada--centro { margin-bottom: clamp(30px, 4vw, 48px); }
.flujo__pasos {
display: flex; gap: 8px; justify-content: center;
margin: 0 0 clamp(30px, 4vw, 46px); counter-reset: paso;
}
.flujo__pasos li {
flex: 1; max-width: 200px; padding-top: 14px;
border-top: 3px solid rgba(255,255,255,.18);
font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase;
opacity: .5; text-align: center;
}
.flujo__pasos li.es-actual, .flujo__pasos li.es-hecho { border-top-color: var(--morado); opacity: 1; }
.flujo__paso { border: 0; padding: 0; margin: 0; }
.flujo__paso[hidden] { display: none; }
.flujo__paso legend { padding: 0; margin-bottom: 22px; }
.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.opciones--cuatro { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .opciones, .opciones--cuatro { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .opciones, .opciones--cuatro { grid-template-columns: 1fr; } }
.opcion { display: block; cursor: pointer; }
.opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion__cuerpo {
display: grid; gap: 4px; height: 100%;
padding: 22px 20px; border-radius: 16px;
border: 1px solid rgba(255,255,255,.2);
background: rgba(255,255,255,.03);
transition: border-color .15s ease, background-color .15s ease;
}
.opcion:hover .opcion__cuerpo { border-color: rgba(194,142,255,.6); }
.opcion input:checked + .opcion__cuerpo {
border-color: var(--morado);
background: rgba(194,142,255,.12);
box-shadow: inset 0 0 0 1px var(--morado);
}
.opcion input:focus-visible + .opcion__cuerpo { outline: 3px solid var(--morado); outline-offset: 3px; }
.opcion__nombre { font-weight: 700; font-size: 17px; letter-spacing: .03em; }
.opcion__precio { font-weight: 700; font-size: 20px; color: var(--morado); }
.opcion__detalle { font-size: 14px; opacity: .85; line-height: 1.5; }
.opcion__extra { font-size: 13px; opacity: .62; line-height: 1.5; margin-top: 4px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .campos { grid-template-columns: 1fr; } }
.campos label { display: grid; gap: 8px; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.campos input, .campos select {
font: inherit; font-size: 16px; letter-spacing: normal; text-transform: none;
padding: 15px 18px; border-radius: 12px;
border: 1px solid rgba(255,255,255,.24);
background: rgba(255,255,255,.05); color: inherit;
}
/* Misma flecha que el resto de desplegables del sitio. */
.campos select {
width: 100%; padding-right: 40px; cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; background-size: 11px;
}
.campos select:invalid { color: rgba(255,255,255,.45); }
.campos option { color: #111; }
/* El plan ya viene elegido de /dosis-mensuales: acá sólo se recuerda cuál es
y se ofrece volver, en vez de repetir el paso entero. */
.flujo__plan {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center;
gap: 6px 14px; margin: 0 0 clamp(24px, 3vw, 34px);
font-size: 17px; font-weight: 700; letter-spacing: .02em;
}
.flujo__cambiar {
font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
color: var(--morado); text-decoration: none;
border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.flujo__resumen {
margin: 26px 0 0; padding: 18px 22px; border-radius: 14px;
background: rgba(194,142,255,.12); border: 1px solid rgba(194,142,255,.4);
font-size: 15px; line-height: 1.6;
}
.flujo__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 4vw, 40px); }
.flujo__botones .btn { border: 1px solid transparent; font-family: inherit; }
.flujo__botones .btn--fantasma { border-color: currentColor; }
.flujo__botones .btn[hidden] { display: none; }
.flujo__nota { margin-top: 20px; font-size: 13px; line-height: 1.6; opacity: .6; max-width: 60ch; }
/* =========================================================================
TIENDA · CARRITO · CHECKOUT
========================================================================= */
.visualmente-oculto {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.sin-scroll { overflow: hidden; }
/* --------------------------------------------- Cabecera: acciones y carrito */
.cab__acciones { display: flex; align-items: center; gap: 10px; justify-self: end; }
.cab__carrito {
position: relative;
display: grid; place-items: center;
width: 44px; height: 44px; padding: 0;
background: none; border: 0; color: inherit; cursor: pointer;
border-radius: 50%;
}
.cab__carrito:hover { background: rgba(255,255,255,.1); }
.cab__carrito svg { width: 24px; height: 24px; }
.cab__carrito-n {
position: absolute; top: 4px; right: 2px;
min-width: 18px; height: 18px; padding: 0 5px;
display: grid; place-items: center;
border-radius: 9px;
background: var(--morado); color: var(--carbon);
font-size: 11px; font-weight: 700; line-height: 1;
}
.cab__carrito-n[hidden] { display: none; }
/* ------------------------------------------------------ Tarjeta de producto */
.grilla-prod { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: clamp(34px, 5vw, 60px) 0; }
@media (max-width: 1000px) { .grilla-prod { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .grilla-prod { grid-template-columns: 1fr; } }
.prod {
display: flex; flex-direction: column;
background: var(--blanco); color: var(--negro);
border-radius: var(--radio); overflow: hidden;
box-shadow: 0 14px 34px rgba(0,0,0,.10);
}
.prod__foto { display: block; overflow: hidden; background: #efe9df; }
.prod__foto img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* El levantar de la tarjeta y el acercamiento de la foto: en MOVIMIENTO. */
.prod__cuerpo { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.prod__nombre { font-size: 18px; letter-spacing: .03em; }
.prod__nombre a { text-decoration: none; }
.prod__nombre a:hover { color: var(--morado-hondo); }
.prod__notas { margin: 0; font-size: 14px; line-height: 1.55; opacity: .78; }
.prod__precio { margin: 4px 0 0; font-size: 22px; font-weight: 700; }
.prod__precio span { font-size: 13px; font-weight: 400; opacity: .6; }
.prod__form { display: grid; gap: 8px; margin-top: auto; padding-top: 12px; }
.prod__molienda select, .compra__campo select {
width: 100%; font: inherit; font-size: 14px;
padding: 11px 34px 11px 14px;
border: 1px solid rgba(0,0,0,.22); border-radius: 10px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231e1e1e' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
-webkit-appearance: none; appearance: none;
color: inherit; cursor: pointer;
}
.prod__anadir { width: 100%; padding: 15px 20px; border: 0; font-family: inherit; }
.grilla-prod--tienda .prod__foto img { aspect-ratio: 4 / 5; }
.tienda__nota { text-align: center; font-size: 14px; opacity: .7; margin: 0; }
.envios { display: grid; gap: 0; margin-top: clamp(28px, 4vw, 44px); border-top: 1px solid rgba(255,255,255,.16); }
.envios li {
display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: baseline;
padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.16);
}
.envios strong { font-size: 16px; }
.envios span { flex: 1; font-size: 14px; opacity: .7; }
.envios em { font-style: normal; font-weight: 700; color: var(--morado); }
.envios--gratis em { color: var(--morado); }
/* ------------------------------------------------- Ficha: bloque de compra */
.compra {
display: grid; grid-template-columns: 1fr auto; gap: 14px 16px;
align-items: end; margin: 0 0 18px;
padding: 22px; border-radius: var(--radio);
border: 1px solid rgba(0,0,0,.14); background: rgba(255,255,255,.55);
}
.compra__campo { display: grid; gap: 8px; }
.compra__campo > span { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; opacity: .7; }
.compra__boton { grid-column: 1 / -1; width: 100%; padding: 18px; border: 0; font-family: inherit; }
@media (max-width: 520px) { .compra { grid-template-columns: 1fr; align-items: stretch; } }
.contador {
display: inline-grid; grid-template-columns: 40px 46px 40px; align-items: center;
border: 1px solid rgba(0,0,0,.22); border-radius: 10px; overflow: hidden;
background: #fff;
}
.contador button {
height: 44px; border: 0; background: none; color: inherit;
font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
}
.contador button:hover { background: rgba(0,0,0,.06); }
.contador output { text-align: center; font-weight: 700; font-size: 16px; }
.producto__alterna { font-size: 14px; opacity: .8; margin: 0 0 30px; }
.producto__alterna .enlace-flecha { margin-left: 6px; }
/* ---------------------------------------------------- Panel lateral carrito */
.panel { position: fixed; inset: 0; z-index: 1000; }
.panel[hidden] { display: none; }
.panel__fondo { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.panel__caja {
position: absolute; top: 0; right: 0; bottom: 0;
width: min(420px, 100%);
display: flex; flex-direction: column;
background: var(--carbon); color: var(--blanco);
box-shadow: -18px 0 50px rgba(0,0,0,.45);
animation: entra-panel .22s ease;
}
@keyframes entra-panel { from { transform: translateX(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .panel__caja { animation: none; } }
.panel__cabeza {
display: flex; align-items: center; justify-content: space-between;
padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.14);
}
.panel__cerrar {
width: 40px; height: 40px; border: 0; border-radius: 50%;
background: rgba(255,255,255,.08); color: inherit;
font: inherit; font-size: 22px; line-height: 1; cursor: pointer;
}
.panel__vacio { padding: 40px 24px; text-align: center; opacity: .8; }
.panel__vacio[hidden] { display: none; }
.panel__vacio .enlace-flecha { display: block; margin-top: 16px; }
.panel__lista { flex: 1; overflow-y: auto; padding: 8px 24px; }
.linea {
display: grid; grid-template-columns: 62px 1fr auto auto;
gap: 6px 14px; align-items: center;
padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.12);
}
.linea__foto { width: 62px; height: 62px; object-fit: cover; border-radius: 10px; grid-row: span 2; }
.linea__texto { grid-column: 2; }
.linea__nombre { margin: 0; font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.linea__meta { margin: 2px 0 0; font-size: 12.5px; opacity: .65; }
.linea__precio { margin: 4px 0 0; font-weight: 700; font-size: 15px; color: var(--morado); }
.linea__quitar {
grid-column: 4; align-self: start;
width: 28px; height: 28px; border: 0; border-radius: 50%;
background: none; color: inherit; opacity: .55;
font: inherit; font-size: 17px; line-height: 1; cursor: pointer;
}
.linea__quitar:hover { opacity: 1; background: rgba(255,255,255,.1); }
.cantidad {
grid-column: 3; display: inline-grid; grid-template-columns: 30px 30px 30px;
align-items: center; border: 1px solid rgba(255,255,255,.24); border-radius: 8px;
}
.cantidad button {
height: 32px; border: 0; background: none; color: inherit;
font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
}
.cantidad button:hover { background: rgba(255,255,255,.1); }
.cantidad span { text-align: center; font-weight: 700; font-size: 14px; }
.panel__pie { padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.14); }
.panel__pie[hidden] { display: none; }
.panel__envio { margin: 0 0 12px; font-size: 13px; color: var(--morado); }
.panel__total { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 4px; font-size: 15px; }
.panel__total strong { font-size: 24px; }
.panel__nota { margin: 0 0 16px; font-size: 12px; opacity: .55; }
.panel__ir { display: block; width: 100%; text-align: center; }
/* ------------------------------------------------------------- Checkout -- */
.checkout { display: grid; grid-template-columns: 1.35fr .65fr; gap: clamp(30px, 4vw, 60px); align-items: start; margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 900px) { .checkout { grid-template-columns: 1fr; } }
.checkout__form { display: grid; gap: clamp(30px, 4vw, 46px); }
.checkout__form fieldset { border: 0; padding: 0; margin: 0; }
.checkout__form legend { padding: 0; margin-bottom: 18px; }
.campos--ancho { grid-column: 1 / -1; }
.campos--envio { margin-top: 18px; }
.opciones--dos { grid-template-columns: 1fr 1fr; }
.opciones--pago { grid-template-columns: 1fr; gap: 12px; }
@media (max-width: 620px) { .opciones--dos { grid-template-columns: 1fr; } }
.opcion__precio { font-weight: 700; color: var(--morado); }
.opcion--inactiva { cursor: not-allowed; }
.opcion--inactiva .opcion__cuerpo { opacity: .45; }
.opcion__aviso { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--morado); }
.checkout__error {
margin: 0; padding: 14px 18px; border-radius: 12px;
background: rgba(255,120,120,.14); border: 1px solid rgba(255,120,120,.5);
font-size: 14.5px;
}
.checkout__error[hidden] { display: none; }
.checkout__enviar { border: 0; font-family: inherit; justify-self: start; padding: 20px 44px; }
.checkout__enviar:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.checkout__legal { margin: 0; font-size: 12.5px; opacity: .55; max-width: 52ch; }
.resumen {
position: sticky; top: 100px;
padding: clamp(24px, 3vw, 32px); border-radius: var(--radio);
border: 1px solid rgba(255,255,255,.18);
background: radial-gradient(120% 80% at 50% -10%, rgba(109,40,217,.22), transparent 62%), rgba(255,255,255,.03);
}
@media (max-width: 900px) { .resumen { position: static; } }
.resumen__lista { display: grid; gap: 14px; margin: 20px 0; }
.resumen__lista li { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; }
.resumen__lista img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.resumen__que { display: grid; gap: 2px; }
.resumen__que strong { font-size: 14.5px; }
.resumen__que em { font-style: normal; font-size: 12.5px; opacity: .65; }
.resumen__precio { font-weight: 700; font-size: 14.5px; }
.resumen__vacio { font-size: 14.5px; opacity: .8; }
.resumen__vacio[hidden] { display: none; }
.resumen__cuentas { margin: 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.16); display: grid; gap: 10px; }
.resumen__cuentas > div { display: flex; justify-content: space-between; align-items: baseline; }
.resumen__cuentas dt, .resumen__cuentas dd { margin: 0; font-size: 14.5px; }
.resumen__total { padding-top: 12px; border-top: 1px solid rgba(255,255,255,.16); }
.resumen__total dt { font-weight: 700; }
.resumen__total dd { font-size: 24px !important; font-weight: 700; color: var(--morado); }
/* -------------------------------------------------------------- Gracias -- */
.gracias { text-align: center; }
.gracias__numero { margin: 20px 0; font-size: 17px; }
.gracias__numero strong { font-size: 22px; color: var(--morado); letter-spacing: .04em; }
.gracias__detalle {
display: grid; gap: 0; margin: clamp(30px, 4vw, 44px) 0;
text-align: left; border-top: 1px solid rgba(255,255,255,.16);
}
.gracias__detalle li {
display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: space-between;
padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.16); font-size: 14.5px;
}
.gracias__detalle span { opacity: .7; }
.gracias__botones { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* =========================================================================
FICHA DE PRODUCTO — galería, modos de compra y pastillas
========================================================================= */
.galeria { position: sticky; top: 100px; display: grid; gap: 12px; }
@media (max-width: 860px) { .galeria { position: static; } }
.galeria__grande { border-radius: var(--radio); overflow: hidden; background: #efe9df; }
.galeria__grande img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* Flex y no rejilla: los cafés no tienen todos el mismo número de fotos y
con columnas fijas quedaban huecos. */
.galeria__miniaturas { display: flex; flex-wrap: wrap; gap: 10px; }
.galeria__miniaturas li { flex: 0 1 96px; }
.galeria__miniaturas button {
display: block; width: 100%; padding: 0; cursor: pointer;
border: 2px solid transparent; border-radius: 10px; overflow: hidden;
background: none;
}
.galeria__miniaturas button[aria-current="true"] { border-color: var(--morado-hondo); }
.galeria__miniaturas img { width: 100%; aspect-ratio: 1; object-fit: cover; }
/* --------------------------------------------- Compra única / suscripción */
.modos { border: 0; padding: 0; margin: 0 0 22px; display: grid; gap: 12px; }
.modo { display: block; cursor: pointer; }
.modo input { position: absolute; opacity: 0; width: 0; height: 0; }
.modo__cuerpo {
display: grid; gap: 4px;
padding: 18px 20px; border-radius: 14px;
border: 2px solid rgba(0,0,0,.16);
transition: border-color .16s ease, background-color .16s ease;
}
.modo:hover .modo__cuerpo { border-color: rgba(109,40,217,.5); }
.modo input:checked + .modo__cuerpo { border-color: var(--morado-hondo); background: rgba(194,142,255,.12); }
.modo input:focus-visible + .modo__cuerpo { outline: 3px solid var(--morado); outline-offset: 3px; }
.modo__titulo { font-weight: 700; font-size: 16px; }
.modo__titulo em { font-style: normal; color: var(--morado-hondo); }
.modo__precio { font-weight: 700; font-size: 21px; }
.modo__precio small { font-size: 13px; font-weight: 400; opacity: .65; }
.modo__nota { font-size: 13.5px; opacity: .72; line-height: 1.5; }
/* Los planes sólo aparecen cuando la suscripción está elegida. */
.modo__planes { display: none; gap: 10px; margin-top: 12px; }
.modo input:checked ~ .modo__cuerpo .modo__planes,
.modo__cuerpo:has(~ input:checked) .modo__planes { display: grid; }
.modo:has(input:checked) .modo__planes { display: grid; }
.modo__planes select {
width: 100%; font: inherit; font-size: 14px;
padding: 12px 34px 12px 14px;
border: 1px solid rgba(0,0,0,.22); border-radius: 10px;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%231e1e1e' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E") no-repeat right 12px center / 11px;
-webkit-appearance: none; appearance: none; cursor: pointer;
}
.modo__ir { text-align: center; }
/* Con suscripción elegida, molienda/cantidad/carrito no aplican. */
.compra--suscripcion .compra__opciones,
.compra--suscripcion .compra__boton { display: none; }
/* --------------------------------------------------- Pastillas de molienda */
.pastillas { display: flex; flex-wrap: wrap; gap: 8px; }
.pastilla { position: relative; }
.pastilla input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pastilla span {
display: inline-flex; align-items: center; justify-content: center;
min-height: 44px; padding: 0 18px;
border: 2px solid rgba(0,0,0,.2); border-radius: var(--pastilla);
font-size: 14px; font-weight: 600; cursor: pointer;
transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
.pastilla:hover span { border-color: rgba(109,40,217,.55); }
.pastilla input:checked + span { border-color: var(--tinta); background: var(--tinta); color: var(--blanco); }
.pastilla input:focus-visible + span { outline: 3px solid var(--morado); outline-offset: 3px; }
/* La caja de compra deja de ser una rejilla de dos columnas: ahora tiene
modos arriba, opciones al medio y el botón abajo, a lo ancho. */
.compra { display: block; }
.compra__opciones { display: grid; grid-template-columns: 1fr auto; gap: 18px 24px; align-items: start; }
@media (max-width: 560px) { .compra__opciones { grid-template-columns: 1fr; } }
.compra__ayuda { margin: 8px 0 0; font-size: 13px; opacity: .65; }
.compra__boton { margin-top: 20px; }
/* ========================================================== PIE: redes y sello */
.pie__redes { display: flex; gap: 22px; justify-content: center; margin: 0 0 clamp(34px, 5vw, 60px); }
.pie__redes a { display: grid; place-items: center; width: 26px; height: 26px; opacity: .85; transition: opacity .18s ease, transform .18s ease; }
.pie__redes a:hover { opacity: 1; transform: translateY(-2px); }
.pie__redes svg { width: 24px; height: 24px; }
/* ============================================ MENÚ MÓVIL A PANTALLA COMPLETA */
@media (max-width: 1023px) {
.cab__movil {
position: fixed; inset: 0; z-index: 1200;
display: flex; flex-direction: column;
padding: 20px clamp(18px, 5vw, 40px) calc(32px + env(safe-area-inset-bottom));
background: var(--carbon); color: var(--blanco);
overflow-y: auto; border-top: 0;
animation: entra-menu .22s ease;
}
@keyframes entra-menu { from { transform: translateX(100%); } to { transform: none; } }
.cab__movil-cabeza { display: flex; align-items: center; justify-content: space-between; margin-bottom: 26px; }
.cab__movil-cerrar {
width: 42px; height: 42px; border: 0; border-radius: 50%;
background: rgba(255,255,255,.08); color: inherit;
font: inherit; font-size: 24px; line-height: 1; cursor: pointer;
}
.cab__movil ul { margin-bottom: 26px; }
.cab__movil a { font-size: 20px; letter-spacing: .04em; padding: 16px 0; }
.cab__movil .btn { width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { .cab__movil { animation: none; } }
/* --------------------------------------------- Planes: lista de beneficios */
.plan__precio { display: block; }
.plan__precio small { display: block; margin-top: 6px; font-size: 14px; font-weight: 400; opacity: .6; }
.plan__lista { display: grid; gap: 11px; text-align: left; width: 100%; margin: 6px 0 10px; }
.plan__lista li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.plan__lista li::before {
content: ''; flex: 0 0 8px; height: 8px; margin-top: .5em;
border-radius: 50%; background: var(--morado);
}
.plan__cta { width: 100%; text-align: center; margin-top: auto; }
.plan { justify-items: stretch; }
.plan__nombre, .plan__precio { text-align: center; }
/* Paso 3 del flujo de suscripción: zona de envío y beneficios del plan. */
.opciones--tres { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .opciones--tres { grid-template-columns: 1fr; } }
.flujo__sub { margin: -8px 0 16px; font-size: 14px; opacity: .7; }
.opcion__lista { display: grid; gap: 6px; margin-top: 6px; }
.opcion__lista span { position: relative; padding-left: 18px; font-size: 13.5px; line-height: 1.5; opacity: .85; }
.opcion__lista span::before {
content: ''; position: absolute; left: 0; top: .55em;
width: 7px; height: 7px; border-radius: 50%; background: var(--morado);
}
.flujo__resumen strong { display: block; margin-bottom: 4px; }
/* =========================================================================
MOVIMIENTO
Una idea, no efectos sueltos: aquí las cosas se sirven. Llegan de arriba,
llenan su sitio y se asientan; nunca rebotan ni entran de costado para
adornar. De ahí salen las tres formas de aparecer —bloque, pieza y
vertido— y el relleno de los botones, que es el mismo gesto en pequeño.
Tres duraciones, tres curvas, y todo se apaga entero con
`prefers-reduced-motion` al final del bloque.
========================================================================= */
:root {
/* Deja animar de 0 a `auto`: sin esto el acordeón no puede abrirse con
transición sin medir alturas a mano. */
interpolate-size: allow-keywords;
--t-rapido: .16s;
--t-medio: .28s;
--t-lento: .6s;
/* El vertido es lo único que se toma su tiempo: es lo que hay que leer. */
--t-vertido: .8s;
/* Salida suave, sin rebote: la marca es sobria. */
--curva: cubic-bezier(.22, .61, .36, 1);
--curva-entrada: cubic-bezier(.16, .84, .44, 1);
/* Frenada larga: lo que cae en un vaso no vuelve a subir. */
--curva-asentar: cubic-bezier(.16, 1, .3, 1);
}
/* ------------------------------------------------------ Cabecera al bajar */
.cab {
transition: padding var(--t-medio) var(--curva),
background-color var(--t-medio) var(--curva),
box-shadow var(--t-medio) var(--curva);
}
.cab__inner { transition: padding var(--t-medio) var(--curva); }
.cab.es-compacta .cab__inner { padding-top: 10px; padding-bottom: 10px; }
.cab.es-compacta {
background: rgba(18, 18, 18, .88);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
/* Subrayado del menú. Se dibuja de izquierda a derecha al entrar y se
recoge en esa misma dirección al salir: la línea nunca desanda el camino.
El teclado ve lo mismo que el ratón. */
.cab__lista > li > a { position: relative; }
.cab__lista > li > a::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -4px;
height: 2px; background: var(--morado);
transform: scaleX(0); transform-origin: right;
transition: transform var(--t-medio) var(--curva);
}
.cab__lista > li > a:hover::after,
.cab__lista > li > a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* ------------------------------------------------------------- Botones --
El botón se llena de abajo hacia arriba al pasar por encima: el mismo
gesto que el resto de la web, en pequeño. En el negro de «Añadir» el
relleno es morado hondo, así el color adelanta la confirmación que llega
un segundo después. Antes el hover sólo cambiaba el fondo de golpe —y en
el negro era prácticamente invisible. */
.btn {
position: relative;
overflow: hidden;
isolation: isolate;
will-change: transform;
transition: transform var(--t-rapido) var(--curva),
background-color var(--t-medio) var(--curva),
color var(--t-medio) var(--curva),
border-color var(--t-medio) var(--curva),
letter-spacing var(--t-medio) var(--curva);
}
.btn:active { transform: translateY(0) scale(.985); }
.btn--primario::before,
.btn--tinta::before {
content: '';
position: absolute; inset: 0; z-index: -1;
transform: scaleY(0); transform-origin: bottom;
transition: transform var(--t-medio) var(--curva-asentar);
}
.btn--primario::before { background: #d3aaff; }
.btn--tinta::before { background: var(--morado-hondo); }
.btn--primario:hover::before, .btn--primario:focus-visible::before,
.btn--tinta:hover::before, .btn--tinta:focus-visible::before { transform: scaleY(1); }
/* La flecha de los CTA se adelanta un poco al pasar por encima. */
.enlace-flecha { transition: transform var(--t-rapido) var(--curva),
border-color var(--t-medio) var(--curva),
letter-spacing var(--t-medio) var(--curva); }
.enlace-flecha:hover { letter-spacing: .06em; }
/* Confirmación al añadir al carrito: el botón se pone morado y avisa. */
.btn.es-anadido, .prod__anadir.es-anadido, .compra__boton.es-anadido {
background: var(--morado); color: var(--carbon);
animation: latido var(--t-medio) var(--curva);
}
@keyframes latido { 50% { transform: scale(1.04); } }
/* Mientras confirma, el relleno del hover se retira: si no, el morado hondo
taparía el morado de la confirmación con el puntero todavía encima. */
.btn.es-anadido::before,
.btn.es-anadido:hover::before { transform: scaleY(0); }
/* ------------------------------------------------ Insignia del carrito --
Confirmar que el añadido llegó es lo más útil que puede hacer una
animación en esta web: el panel abre a la derecha y el número está
arriba, lejos del botón que se acaba de pulsar. Por eso, además del
brinco del número, el botón entero suelta un aro. */
.cab__carrito-n { transition: transform var(--t-rapido) var(--curva); }
.cab__carrito-n.es-nuevo { animation: brinco .4s var(--curva); }
@keyframes brinco {
0% { transform: scale(1); }
35% { transform: scale(1.45); }
100% { transform: scale(1); }
}
.cab__carrito svg { transition: transform var(--t-medio) var(--curva); }
.cab__carrito:hover svg { transform: translateY(-2px); }
.cab__carrito::after {
content: '';
position: absolute; inset: -2px;
border-radius: 50%;
border: 2px solid var(--morado);
opacity: 0;
pointer-events: none;
}
.cab__carrito.es-avisando::after { animation: aro .62s var(--curva-asentar); }
@keyframes aro {
from { opacity: .9; transform: scale(.84); }
to { opacity: 0; transform: scale(1.55); }
}
/* ------------------------------------------------- Tarjetas de producto -- */
.prod {
will-change: transform;
transition: transform var(--t-medio) var(--curva-asentar),
box-shadow var(--t-medio) var(--curva-asentar);
}
.prod:hover { transform: translateY(-4px); box-shadow: 0 24px 50px rgba(0,0,0,.16); }
.prod__foto img { transition: transform .7s var(--curva-asentar); }
.prod:hover .prod__foto img { transform: scale(1.05); }
.prod__nombre a { position: relative; }
.prod__nombre a::after {
content: '';
position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: currentColor;
transform: scaleX(0); transform-origin: right;
transition: transform var(--t-medio) var(--curva);
}
.prod__nombre a:hover::after,
.prod__nombre a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
/* --------------------------------------------------- Panel del carrito -- */
.panel__fondo { animation: fundido var(--t-medio) var(--curva); }
@keyframes fundido { from { opacity: 0; } to { opacity: 1; } }
.panel__caja { animation: entra-panel var(--t-medio) var(--curva-entrada); }
/* Las líneas del carrito entran escalonadas: se lee cuál es la nueva. */
.linea { animation: entra-linea var(--t-medio) var(--curva-asentar) backwards; }
@keyframes entra-linea { from { opacity: 0; transform: translateX(14px); } }
.panel__vacio { display: grid; gap: 14px; justify-items: center; padding: 48px 24px; }
.panel__vacio p { margin: 0; }
.panel__vacio-icono { width: 46px; height: 46px; opacity: .35; }
/* Progreso hacia el envío gratis: convierte un número en algo que se mira.
La barra se llena con la curva de asentar, como todo lo que se sirve. */
.progreso { margin-bottom: 14px; }
.progreso__riel {
height: 6px; border-radius: 3px; overflow: hidden;
background: rgba(255, 255, 255, .14);
margin-bottom: 9px;
}
.progreso__barra {
display: block; height: 100%; width: 0;
border-radius: 3px;
background: linear-gradient(90deg, var(--morado-hondo), var(--morado));
transition: width var(--t-lento) var(--curva-asentar);
}
/* Al completarse, un solo destello. La clase se pone una vez —repintar el
panel con el carrito ya completo no la vuelve a disparar—, así que el
aviso no se repite en cada cambio de cantidad. */
.progreso.es-completo .progreso__barra { background: var(--morado); }
.progreso.es-completo .progreso__riel { animation: destello .8s var(--curva); }
@keyframes destello {
40% { box-shadow: 0 0 0 4px rgba(194, 142, 255, .3); }
}
.progreso.es-completo .panel__envio { animation: brinco .5s var(--curva-asentar); }
/* Cantidades: el número da un saltito al cambiar, y el botón se hunde. */
.cantidad span.es-cambiado, .contador output.es-cambiado { animation: brinco .32s var(--curva); }
.cantidad button, .contador button {
transition: background-color var(--t-rapido) var(--curva),
transform var(--t-rapido) var(--curva);
}
.cantidad button:active, .contador button:active { transform: scale(.88); }
/* ------------------------------------------------------------ Acordeón --
Se anima con ::details-content, que es lo que el navegador crea alrededor
del contenido de un . Junto con `interpolate-size` permite animar
hasta `auto` sin medir alturas con JavaScript ni romper el cierre.
Donde no esté soportado (Safari y Firefox, por ahora) el acordeón abre y
cierra de golpe, que es exactamente lo que hacía antes. */
.acordeon__item::details-content {
block-size: 0;
overflow: hidden;
opacity: 0;
transition: block-size var(--t-medio) var(--curva),
opacity var(--t-medio) var(--curva),
content-visibility var(--t-medio) allow-discrete;
}
.acordeon__item[open]::details-content { block-size: auto; opacity: 1; }
.acordeon__item summary::after { transition: transform var(--t-medio) var(--curva-asentar); }
.acordeon__item[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.acordeon__item summary { transition: color var(--t-rapido) var(--curva); }
.acordeon__item summary:hover { color: var(--morado-hondo); }
.sec--dark .acordeon__item summary:hover,
.sec--black .acordeon__item summary:hover { color: var(--morado); }
/* -------------------------------------------------------------- Cinta ----
Se detiene al pasar por encima: si dice algo, hay que poder leerlo. */
.cinta__pista { transition: opacity var(--t-medio) var(--curva); }
.cinta:hover .cinta__pista { animation-play-state: paused; }
/* ------------------------------------------------------------ Galería -- */
.galeria__grande img { transition: opacity var(--t-medio) var(--curva); }
.galeria__grande img.es-cambiando { opacity: 0; }
.galeria__miniaturas button {
transition: border-color var(--t-medio) var(--curva),
transform var(--t-rapido) var(--curva);
}
.galeria__miniaturas button:hover { transform: translateY(-2px); }
.galeria__miniaturas button:active { transform: translateY(0) scale(.96); }
/* --------------------------------------------------- Tarjetas del Club -- */
.nivel, .canje, .insignias li, .paso, .juego__caja, .moliendas li {
transition: transform var(--t-medio) var(--curva-asentar),
box-shadow var(--t-medio) var(--curva-asentar),
border-color var(--t-medio) var(--curva);
}
.nivel:hover { transform: translateY(-4px); box-shadow: 0 26px 52px rgba(0,0,0,.22); }
.canje:hover { transform: translateY(-3px); border-color: var(--morado); }
.insignias li:hover, .paso:hover, .moliendas li:hover { transform: translateY(-3px); }
.insignia__emoji { transition: transform var(--t-medio) var(--curva-asentar); }
.insignias li:hover .insignia__emoji { transform: scale(1.15) rotate(-6deg); }
.plan { transition: transform var(--t-medio) var(--curva-asentar), box-shadow var(--t-medio) var(--curva-asentar); }
.plan:hover { transform: translateY(-5px); box-shadow: 0 30px 60px rgba(0,0,0,.24); }
/* -------------------------------------------------------- Formularios -- */
.campos input, .campos select, .formulario input, .prod__molienda select, .compra__campo select, .modo__planes select {
transition: border-color var(--t-rapido) var(--curva),
background-color var(--t-rapido) var(--curva),
box-shadow var(--t-rapido) var(--curva);
}
.campos input:focus, .campos select:focus, .formulario input:focus {
outline: none;
border-color: var(--morado);
background: rgba(255,255,255,.09);
box-shadow: 0 0 0 3px rgba(194,142,255,.22);
}
/* Elegir una opción la levanta y la deja levantada: el color solo no
distingue bien «encima» de «elegida». */
.opcion__cuerpo, .modo__cuerpo {
will-change: transform;
transition: border-color var(--t-medio) var(--curva),
background-color var(--t-medio) var(--curva),
transform var(--t-medio) var(--curva-asentar);
}
.opcion:hover .opcion__cuerpo { transform: translateY(-2px); }
.opcion input:checked + .opcion__cuerpo,
.modo input:checked + .modo__cuerpo { transform: translateY(-3px); }
.opcion--inactiva:hover .opcion__cuerpo { transform: none; }
/* La cifra de la calculadora y los totales cambian sin parpadeo. */
.calc__cifra, .resumen__total dd, .panel__total strong { transition: color var(--t-medio) var(--curva); }
.calc__cifra.es-cambiando { color: var(--blanco); }
/* -------------------------------------------------- Flotante WhatsApp -- */
.wa {
transition: transform var(--t-medio) var(--curva-asentar), opacity var(--t-medio) var(--curva);
}
.wa.es-oculto { opacity: 0; transform: translateY(80px) scale(.8); pointer-events: none; }
/* Paso a paso del flujo: la barra de progreso se llena. */
.flujo__pasos li { transition: border-color var(--t-medio) var(--curva), opacity var(--t-medio) var(--curva); }
.flujo__paso { animation: entra-paso var(--t-medio) var(--curva-asentar); }
@keyframes entra-paso { from { opacity: 0; transform: translateX(16px); } }
/* ------------------------------------------------- Aparición al hacer scroll
Va al final del bloque a propósito. Los elementos que se revelan son los
mismos que luego se levantan al pasar por encima (`.prod`, `.plan`,
`.nivel`…), y las dos cosas animan `transform` con la misma especificidad:
gana la última que se escribe. Que gane el revelado es lo correcto
mientras dura, y en cuanto termina el JS le quita las clases —entonces
manda otra vez la tarjeta y su hover recupera sus 0,28 s.
Tres formas, y el JS elige según lo que sea el elemento:
.revelar bloque de texto — sube y se funde.
.revelar--pieza tarjeta de una rejilla — además llega con peso,
apenas encogida, y se asienta.
.revelar--vertido titular — se destapa de arriba abajo, como el café
llenando la taza. Uno por sección, y es el único
que se anima despacio.
El estado inicial lo pone siempre el JS, nunca el HTML: si el script no
carga, todo se ve igual y nada queda invisible. */
.revelar {
opacity: 0;
transform: translateY(18px);
transition: opacity var(--t-lento) var(--curva-entrada),
transform var(--t-lento) var(--curva-entrada);
transition-delay: calc(var(--i, 0) * 60ms);
}
.revelar.visible { opacity: 1; transform: none; }
.revelar--pieza {
transform: translateY(24px) scale(.972);
transition-duration: .72s;
transition-timing-function: var(--curva-asentar);
}
.revelar--pieza.visible { transform: none; }
/* El titular no se funde: se destapa. Mezclar las dos cosas emborrona el
borde que hace legible el gesto.
Se destapa con una MÁSCARA, no con `clip-path`. Parece lo mismo y no lo
es: `IntersectionObserver` deja de ver un elemento recortado a cero, así
que el titular se escondía a sí mismo del observador que tenía que
revelarlo y no volvía a aparecer nunca. La máscara es sólo pintura y no
toca la geometría que mide el observador.
Enmascarar texto lo saca a su propia capa y puede rasterizarlo algo más
blando mientras dura; por eso importa que el JS quite las clases al
terminar — el estado final no lleva máscara ninguna. */
.revelar--vertido {
opacity: 1;
-webkit-mask-image: linear-gradient(#000, #000);
mask-image: linear-gradient(#000, #000);
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: 0 0; mask-position: 0 0;
-webkit-mask-size: 100% 0%; mask-size: 100% 0%;
transform: translateY(10px);
transition: -webkit-mask-size var(--t-vertido) var(--curva-asentar),
mask-size var(--t-vertido) var(--curva-asentar),
transform var(--t-vertido) var(--curva-asentar);
/* La forma corta reinicia el retardo, así que se vuelve a poner: en el
hero el titular va segundo y tiene que esperar al antetítulo. */
transition-delay: calc(var(--i, 0) * 60ms);
}
.revelar--vertido.visible {
-webkit-mask-size: 100% 100%; mask-size: 100% 100%;
transform: none;
}
/* =========================================================================
Nadie que haya pedido menos movimiento debería ver nada de lo anterior.
Ojo: apagar movimiento nunca apaga funciones — las miniaturas de la
galería siguen cambiando la foto, sólo que sin fundido (ver movimiento.js).
========================================================================= */
@media (prefers-reduced-motion: reduce) {
.revelar, .revelar--pieza, .revelar--vertido {
opacity: 1 !important; transform: none !important;
-webkit-mask-image: none !important; mask-image: none !important;
transition: none !important;
}
.linea, .panel__caja, .panel__fondo, .flujo__paso,
.progreso.es-completo .progreso__riel,
.progreso.es-completo .panel__envio,
.cab__carrito.es-avisando::after { animation: none !important; }
.cab.es-compacta { backdrop-filter: none; -webkit-backdrop-filter: none; }
.prod:hover, .nivel:hover, .canje:hover, .plan:hover,
.insignias li:hover, .paso:hover, .moliendas li:hover,
.opcion:hover .opcion__cuerpo, .galeria__miniaturas button:hover,
.prod:hover .prod__foto img { transform: none; }
.btn--primario::before, .btn--tinta::before { transition: none; }
.acordeon__cuerpo { transition: none; }
}
/* La tarjeta del hero flota apenas: le da vida al bloque sin pedir atención.
6 s y 8 px — cualquier cosa más rápida o más amplia distrae de leer. */
.hero__arte img { animation: flotar 6s ease-in-out infinite; }
@keyframes flotar {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
/* El hero de las páginas internas no lleva foto: que el degradado morado del
Club no compita con el titular. */
.sec--hero { overflow: hidden; }
/* Las secciones con foto de fondo acercan la imagen muy despacio al entrar,
lo justo para que no parezca una diapositiva. */
.sec--imagen .sec__fondo img {
transform: scale(1.06);
transition: transform 1.6s var(--curva);
}
.sec--imagen.es-cerca .sec__fondo img { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
.hero__arte img { animation: none; }
.sec--imagen .sec__fondo img { transform: none; transition: none; }
}
/* El flotante de WhatsApp arranca visible: si el script no corre —o el
navegador congela los fotogramas de la pestaña— tiene que seguir ahí.
Ocultarlo es una decisión que toma el JS, no el estado por defecto. */
.wa { opacity: 1; transform: none; }
/* Enlace explícito al detalle en la tarjeta de la tienda. Con /nuestros-cafes
retirado, la ficha de cada café sólo se alcanza desde aquí: que la foto y
el título sean enlaces no basta como pista. */
.prod__detalle {
align-self: start;
font-size: 13px; font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; text-decoration: none;
color: var(--morado-hondo);
border-bottom: 2px solid currentColor;
padding-bottom: 2px;
transition: letter-spacing var(--t-medio) var(--curva), color var(--t-medio) var(--curva);
}
.prod__detalle:hover { letter-spacing: .09em; color: var(--tinta); }
/* Los botones van en versalitas (`text-transform: uppercase`), y eso convertía
el «s/» del precio en «S/» al pintarlo, aunque en el HTML estuviera bien.
El importe se exceptúa: la moneda va siempre en minúscula. */
[data-total-compra],
.opcion__precio,
.modo__precio { text-transform: none; }
/* =========================================================================
FORMULARIOS DE CONTACTO — Tostaduría y Aliados
Un mismo objeto visual para los dos: rótulo arriba, campo redondeado sobre
fondo oscuro y botón en pastilla morada, como en la página de Negocios del
sitio original.
========================================================================= */
.contacto { display: grid; gap: 20px; margin-top: clamp(28px, 4vw, 42px); }
.campo { display: grid; gap: 8px; }
.campo__nombre { font-size: 14.5px; font-weight: 700; letter-spacing: .01em; }
.campo__nombre em { font-style: normal; font-weight: 400; opacity: .55; font-size: 13px; }
.campo__ayuda { font-size: 12.5px; opacity: .6; }
.contacto input,
.contacto select {
font: inherit; font-size: 16px;
width: 100%; padding: 15px 18px;
border: 1px solid rgba(255,255,255,.24); border-radius: 12px;
background: rgba(255,255,255,.05); color: inherit;
transition: border-color var(--t-rapido) var(--curva),
background-color var(--t-rapido) var(--curva),
box-shadow var(--t-rapido) var(--curva);
}
.contacto input::placeholder { color: rgba(255,255,255,.38); }
.contacto input:focus, .contacto select:focus {
outline: none; border-color: var(--morado);
background: rgba(255,255,255,.09);
box-shadow: 0 0 0 3px rgba(194,142,255,.22);
}
.contacto select {
padding-right: 40px; cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23ffffff' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 16px center; background-size: 11px;
}
.contacto select:invalid { color: rgba(255,255,255,.45); }
.contacto option { color: #111; }
/* Teléfono con prefijo fijo: el original traía un selector de 240 países. */
.campo__tel { display: flex; align-items: stretch; }
.campo__prefijo {
display: grid; place-items: center;
padding: 0 14px; font-size: 15px; font-weight: 700;
border: 1px solid rgba(255,255,255,.24); border-right: 0;
border-radius: 12px 0 0 12px;
background: rgba(255,255,255,.09);
}
.campo__tel input { border-radius: 0 12px 12px 0; }
.campo-grupo { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.campo-grupo legend { padding: 0; }
.campo-grupo__campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo-grupo__campos .campo__nombre { font-weight: 400; opacity: .75; font-size: 13px; }
@media (max-width: 520px) { .campo-grupo__campos { grid-template-columns: 1fr; } }
.contacto__enviar { justify-self: start; border: 0; font-family: inherit; margin-top: 6px; }
.contacto__enviar:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.contacto__error {
margin: 0; padding: 13px 18px; border-radius: 12px;
background: rgba(255,120,120,.14); border: 1px solid rgba(255,120,120,.5); font-size: 14.5px;
}
.contacto__gracias {
margin: 0; padding: 16px 20px; border-radius: 12px;
background: rgba(194,142,255,.14); border: 1px solid var(--morado);
font-weight: 700;
}
.contacto__error[hidden], .contacto__gracias[hidden] { display: none; }
/* ------------------------------------------------------ Tostaduría · hero */
.tueste { text-align: center; }
.tueste .titulazo { margin: 6px 0 20px; }
.tueste .bajada { max-width: 56ch; margin-inline: auto; }
/* ---------------------------------------------------------------- Aliados */
.aliados .kicker { margin-bottom: 10px; }
.aliados .bajada { margin: 16px 0 0; max-width: 56ch; }
.aliados__contacto { margin: 18px 0 0; font-size: 15.5px; opacity: .85; }
.aliados__contacto a { color: var(--morado); font-weight: 700; }
/* ------------------------------------------------------------------- Info */
.info__contacto { margin-top: clamp(30px, 4vw, 44px); text-align: center; }
.info__contacto ul { display: grid; gap: 8px; margin-top: 14px; }
.info__contacto a { font-size: 17px; }
.sec--imagen.info__foto { min-height: min(52vh, 420px); }
.tiendas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-top: clamp(30px, 4vw, 48px); }
@media (max-width: 760px) { .tiendas { grid-template-columns: 1fr; } }
.local {
padding: clamp(26px, 3.4vw, 38px); border-radius: var(--radio);
border: 1px solid rgba(255,255,255,.18);
background: radial-gradient(120% 80% at 50% -10%, rgba(109,40,217,.18), transparent 62%), rgba(255,255,255,.03);
}
.local__dir { margin: 12px 0 18px; font-size: 15px; opacity: .8; line-height: 1.6; }
.local__horario { margin: 0 0 18px; display: grid; gap: 8px; }
.local__horario > div { display: flex; flex-wrap: wrap; gap: 4px 16px; justify-content: space-between; }
.local__horario dt { margin: 0; font-size: 14px; opacity: .7; }
.local__horario dd { margin: 0; font-size: 14.5px; font-weight: 700; }
.franja__cta { margin-top: 30px; }
/* Error del flujo de suscripción, con el mismo tono que el del checkout. */
.flujo__error {
margin: 0 0 16px; padding: 14px 18px; border-radius: 12px;
background: rgba(255,120,120,.14); border: 1px solid rgba(255,120,120,.5);
font-size: 14.5px;
}
.flujo__error[hidden] { display: none; }