/*
Theme Name: Nubesofá
Theme URI: https://alum18.blog/
Author: Lei Xu
Description: Tema e-commerce editorial para Nubesofá. Paleta blanco, negro y azul acero #4a6275. Inspirado en la estética Kave Home.
Version: 1.1.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: nubesofa
*/
:root {
/* Paleta Nubesofá oficial */
--kh-white: #FFFFFF; /* Blanco Puro */
--kh-black: #000000; /* Negro Puro */
--kh-ink: #000000; /* texto principal — Negro Puro */
--kh-gray-800: #2F3F4B; /* Azul Noche — textos fuertes secundarios */
--kh-gray-600: #5C6E7C; /* Azul Pizarra — textos suaves */
--kh-gray-400: #8A97A1; /* Gris Azulado Claro — placeholders, líneas */
--kh-beige: #5C6E7C; /* legacy alias → Azul Pizarra */
--kh-olive: #2F3F4B; /* legacy alias → Azul Noche */
--kh-accent: #4A6275; /* Azul Acero — acento principal / enlaces en texto */
--kh-accent-soft: #E8ECF0; /* tinte claro para bloom, halo, degradado */
--nube-price: #C1833E; /* Marrón Dorado — precio, exclusividad, acento cálido */
--kh-cream: #F5F6F7; /* neutro muy claro — fondos de tarjetas */
/* Roles semánticos — aplicación de la paleta por función */
--nube-text: #000000; /* Cuerpo de texto — Negro Puro */
--nube-heading: #2F3F4B; /* H1, H2, H3 — Azul Noche */
--nube-cta: #2F3F4B; /* Botón CTA base — Azul Noche */
--nube-cta-hover: #5C6E7C; /* Botón CTA hover — Azul Pizarra */
--nube-link: #4A6275; /* Enlace en texto — Azul Acero */
--nube-icon: #5C6E7C; /* Iconografía — Azul Pizarra */
--nube-border: rgba(138, 151, 161, 0.35); /* Línea/borde sutil — Gris Azulado 35% */
--nube-border-strong: #8A97A1; /* Línea/borde sólido */
--nube-section-bg: rgba(138, 151, 161, 0.10); /* Fondo sección secundaria 10% */
--nube-bg: #ffffff; /* Fondo base — Blanco Puro */
--nube-ink: #000000; /* Texto y elementos oscuros */
--nube-muted: #5C6E7C; /* Texto secundario */
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--font-serif: "Fraunces", Georgia, serif;
--font-heading: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--container: 1440px;
--gutter: 24px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Cloud cursor — SVG files con brillo y sombra horneados */
html, body, *, *::before, *::after {
cursor: url("/wp-content/themes/alum18-kave/assets/cursor-default.svg") 12 26, default !important;
}
a, a *, button, button *,
.pc-add-cart, .cta-primary, .cta-secondary, .hero-cta,
.header-search, .header-cart, .qty-btn, .cart-item-remove,
.summary-checkout, .summary-continue,
.slider-nav, .slider-dot, .slider-nav *, .slider-dot *,
.pg-thumb, .nav-toggle, .brand, .brand *,
[data-add-cart], [role="button"],
input[type=submit], input[type=button], input[type=checkbox], input[type=radio],
select, label {
cursor: url("/wp-content/themes/alum18-kave/assets/cursor-pointer.svg") 13 28, pointer !important;
}
input[type=text], input[type=email], input[type=number], input[type=search],
input[type=tel], input[type=password], input[type=url], textarea,
[contenteditable="true"] {
cursor: url("/wp-content/themes/alum18-kave/assets/cursor-default.svg") 12 26, text !important;
}
/* Disable text selection / caret globally; re-enable in content blocks */
html, body { -webkit-user-select: none; user-select: none; }
.single-article .content,
.pi-description, .pi-care,
.product-info p, .product-info dl,
.commitment h2, .editorial p,
.woocommerce, .wc-wrapper,
input, textarea, select, [contenteditable="true"] {
-webkit-user-select: text; user-select: text;
}
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
font-family: var(--font-sans);
font-size: 16px;
line-height: 1.5;
color: var(--kh-ink);
background: var(--kh-white);
-webkit-font-smoothing: antialiased;
font-feature-settings: "ss01", "cv11";
overflow-x: clip;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .2s ease; }
a:hover { opacity: .65; }
button { font: inherit; border: 0; background: none; cursor: pointer; color: inherit; }
/* Paleta Nubesofá — jerarquía semántica */
h1, h2, h3, h4, h5, h6,
.section-title,
.product-info h1,
.cart-summary h2,
.footer-col h4,
.commitment h2,
.editorial h2 { color: var(--nube-heading); }
/* Tipografía — H2/H3/H4 usan Montserrat; H1 y secciones editoriales usan Fraunces vía reglas específicas */
h2, h3, h4, h5, h6 { font-family: var(--font-heading); }
/* Enlaces en bloques de contenido — Azul Acero */
.pi-description a,
.editorial-text a,
.single-article a,
.content a,
.footer-col a,
article a { color: var(--nube-link); }
/* Iconografía — Azul Pizarra */
.header-search, .header-cart, .header-profile,
.header-search svg, .header-cart svg, .header-profile svg { color: var(--nube-icon); }
.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* ---------- HEADER ---------- */
/* Corrige solape con la barra de admin de WordPress */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
body.admin-bar .site-header { top: 46px; }
}
.site-header {
position: fixed; top: 0; left: 0; right: 0; z-index: 60;
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom: 0;
box-shadow: none;
opacity: 1;
pointer-events: auto;
transition:
background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
backdrop-filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
-webkit-backdrop-filter 0.55s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease,
box-shadow 0.5s ease;
}
.site-header.scrolled,
.site-header.nav-is-open {
background: rgba(255, 255, 255, 0.96);
-webkit-backdrop-filter: saturate(1.5) blur(14px);
backdrop-filter: saturate(1.5) blur(14px);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 0 rgba(0,0,0,.02), 0 6px 24px rgba(0,0,0,.05);
}
/* Con nav abierto: logo e iconos siempre en oscuro */
.site-header.nav-is-open .brand img { filter: none !important; }
.site-header.nav-is-open .header-search,
.site-header.nav-is-open .header-cart,
.site-header.nav-is-open .header-profile,
.site-header.nav-is-open .nav-toggle { color: var(--kh-ink) !important; }
.site-header.nav-is-open .header-search svg,
.site-header.nav-is-open .header-cart svg,
.site-header.nav-is-open .header-profile svg { color: var(--kh-ink) !important; }
/* ── Páginas con hero oscuro: header blanco mientras no hay scroll ── */
body.home .site-header:not(.scrolled) .brand img,
body.page-sobre .site-header:not(.scrolled) .brand img,
body.page-tienda .site-header:not(.scrolled) .brand img,
body.page-carrito .site-header:not(.scrolled) .brand img {
filter: brightness(0) invert(1);
}
body.home .site-header:not(.scrolled) .nav-primary a,
body.page-sobre .site-header:not(.scrolled) .nav-primary a,
body.page-tienda .site-header:not(.scrolled) .nav-primary a,
body.page-carrito .site-header:not(.scrolled) .nav-primary a {
color: rgba(255, 255, 255, 0.92);
}
body.home .site-header:not(.scrolled) .nav-primary a::after,
body.page-sobre .site-header:not(.scrolled) .nav-primary a::after,
body.page-tienda .site-header:not(.scrolled) .nav-primary a::after,
body.page-carrito .site-header:not(.scrolled) .nav-primary a::after {
background: rgba(255, 255, 255, 0.75);
}
body.home .site-header:not(.scrolled) .nav-primary a:hover,
body.page-sobre .site-header:not(.scrolled) .nav-primary a:hover,
body.page-tienda .site-header:not(.scrolled) .nav-primary a:hover,
body.page-carrito .site-header:not(.scrolled) .nav-primary a:hover {
color: #fff;
opacity: 1;
}
body.home .site-header:not(.scrolled) .header-search,
body.home .site-header:not(.scrolled) .header-cart,
body.home .site-header:not(.scrolled) .header-profile,
body.home .site-header:not(.scrolled) .nav-toggle,
body.page-sobre .site-header:not(.scrolled) .header-search,
body.page-sobre .site-header:not(.scrolled) .header-cart,
body.page-sobre .site-header:not(.scrolled) .header-profile,
body.page-sobre .site-header:not(.scrolled) .nav-toggle,
body.page-tienda .site-header:not(.scrolled) .header-search,
body.page-tienda .site-header:not(.scrolled) .header-cart,
body.page-tienda .site-header:not(.scrolled) .header-profile,
body.page-tienda .site-header:not(.scrolled) .nav-toggle,
body.page-carrito .site-header:not(.scrolled) .header-search,
body.page-carrito .site-header:not(.scrolled) .header-cart,
body.page-carrito .site-header:not(.scrolled) .header-profile,
body.page-carrito .site-header:not(.scrolled) .nav-toggle {
color: #fff;
}
body.home .site-header:not(.scrolled) .header-search svg,
body.home .site-header:not(.scrolled) .header-cart svg,
body.home .site-header:not(.scrolled) .header-profile svg,
body.page-sobre .site-header:not(.scrolled) .header-search svg,
body.page-sobre .site-header:not(.scrolled) .header-cart svg,
body.page-sobre .site-header:not(.scrolled) .header-profile svg,
body.page-tienda .site-header:not(.scrolled) .header-search svg,
body.page-tienda .site-header:not(.scrolled) .header-cart svg,
body.page-tienda .site-header:not(.scrolled) .header-profile svg,
body.page-carrito .site-header:not(.scrolled) .header-search svg,
body.page-carrito .site-header:not(.scrolled) .header-cart svg,
body.page-carrito .site-header:not(.scrolled) .header-profile svg {
color: #fff !important;
}
body.home .site-header:not(.scrolled) .header-search:hover,
body.home .site-header:not(.scrolled) .header-cart:hover,
body.home .site-header:not(.scrolled) .header-profile:hover,
body.page-sobre .site-header:not(.scrolled) .header-search:hover,
body.page-sobre .site-header:not(.scrolled) .header-cart:hover,
body.page-sobre .site-header:not(.scrolled) .header-profile:hover,
body.page-tienda .site-header:not(.scrolled) .header-search:hover,
body.page-tienda .site-header:not(.scrolled) .header-cart:hover,
body.page-tienda .site-header:not(.scrolled) .header-profile:hover,
body.page-carrito .site-header:not(.scrolled) .header-search:hover,
body.page-carrito .site-header:not(.scrolled) .header-cart:hover,
body.page-carrito .site-header:not(.scrolled) .header-profile:hover {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.25);
box-shadow: none;
}
body.home .hero-content { padding-top: 80px; padding-bottom: 48px; }
.header-inner {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
padding: 14px var(--gutter);
max-width: var(--container); margin: 0 auto;
min-height: 64px;
}
.brand {
display: inline-flex; align-items: center;
line-height: 0;
justify-self: start;
align-self: center;
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.brand:hover { opacity: 1; transform: translateY(-1px); }
.brand img {
height: 36px; width: auto; display: block;
transition: transform .3s cubic-bezier(.2,.8,.2,1), filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 959px) {
.header-inner {
grid-template-columns: 1fr auto;
gap: 8px;
padding: 10px var(--gutter);
min-height: 52px;
}
.nav-primary { display: none !important; }
}
@media (max-width: 700px) {
.brand img { height: 28px; }
}
/* Ocultar ítems "Nubesofá" y "Colección 2026" del menú */
.nav-primary .menu-item-home { display: none; }
.nav-primary a[href="/"],
.nav-primary a[href$="alum18.blog/"],
.nav-primary a[href$="alum18.blog"] { display: none; }
/* Iconos lupa, carrito y perfil: blancos en header transparente, negros al hacer scroll */
body.home .site-header:not(.scrolled) .header-search,
body.home .site-header:not(.scrolled) .header-cart,
body.home .site-header:not(.scrolled) .header-profile,
body.home .site-header:not(.scrolled) .header-search svg,
body.home .site-header:not(.scrolled) .header-cart svg,
body.home .site-header:not(.scrolled) .header-profile svg {
color: #fff !important;
}
body.home .site-header.scrolled .header-search,
body.home .site-header.scrolled .header-cart,
body.home .site-header.scrolled .header-profile,
body.home .site-header.scrolled .header-search svg,
body.home .site-header.scrolled .header-cart svg,
body.home .site-header.scrolled .header-profile svg {
color: #000 !important;
}
.header-search, .header-cart {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px; border-radius: 999px;
color: var(--kh-ink);
background: transparent;
border: 1px solid transparent;
transition:
color 0.4s ease,
background .25s cubic-bezier(.2,.8,.2,1),
border-color .25s ease,
transform .25s cubic-bezier(.2,.8,.2,1),
box-shadow .25s ease;
position: relative;
}
.header-search:hover, .header-cart:hover {
background: rgba(74,98,117,.08);
border-color: rgba(74,98,117,.14);
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(10,10,10,.06);
}
.header-search svg, .header-cart svg { display: block; }
.nav-primary {
display: none;
justify-content: center;
gap: 36px;
}
@media (min-width: 960px) { .nav-primary { display: flex; } }
.nav-primary a {
position: relative;
display: inline-block;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: .02em;
text-transform: none;
white-space: nowrap;
color: var(--kh-ink);
padding: 8px 2px;
transition: color 0.4s ease, opacity .2s ease;
}
.nav-primary a::after {
content: '';
position: absolute;
left: 50%; bottom: 2px;
width: 0; height: 1.5px;
background: var(--kh-accent);
transform: translateX(-50%);
transition: width .35s cubic-bezier(.2,.8,.2,1);
}
.nav-primary a:hover { color: var(--kh-accent); opacity: 1; }
.nav-primary a:hover::after { width: 100%; }
.nav-primary a.current-menu-item,
.nav-primary a[aria-current="page"] { color: var(--kh-accent); }
.nav-primary a.current-menu-item::after,
.nav-primary a[aria-current="page"]::after { width: 100%; }
.header-actions { display: flex; gap: 6px; align-items: center; font-size: 14px; justify-self: end; }
.nav-toggle { display: inline-flex; }
@media (min-width: 960px) { .nav-toggle { display: none; } }
/* ---------- HERO ---------- */
.hero {
position: relative;
height: 100vh;
min-height: 600px;
background: var(--kh-cream);
overflow: hidden;
}
/* Gradiente oscuro en la parte superior para que el header blanco sea legible */
.hero::after {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 140px;
background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, transparent 100%);
z-index: 2;
pointer-events: none;
}
.hero-media {
position: absolute; inset: 0;
background: linear-gradient(135deg, #E8ECF0 0%, #4A6275 45%, #2F3F4B 75%, #000000 100%);
background-size: cover; background-position: center;
}
.hero-particles {
position: absolute; inset: 0;
width: 100%; height: 100%;
z-index: 1;
pointer-events: none;
}
.hero-clouds {
position: absolute; inset: 0;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.hero-clouds .cloud {
position: absolute;
color: rgba(255, 255, 255, 0.78);
width: 420px; height: auto;
overflow: visible;
filter:
drop-shadow(0 0 14px rgba(255, 255, 255, 0.45))
drop-shadow(0 0 40px rgba(255, 255, 255, 0.25))
drop-shadow(0 8px 28px rgba(0, 0, 0, 0.28))
drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
will-change: transform;
}
.hero-clouds .cloud path { vector-effect: non-scaling-stroke; }
.hero-clouds .cloud-big { display: none; }
@keyframes cloudBigFloat {
0% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-6px); }
100% { transform: translateX(-50%) translateY(0); }
}
@media (max-width: 700px) {
.hero-clouds .cloud-big { display: none; }
}
.hero-clouds .cloud-1 { top: auto; bottom: -6%; left: -8%; width: 520px; animation: cloudFloat 7s ease-in-out infinite; }
.hero-clouds .cloud-2 { top: 10%; right: -4%; width: 620px; animation: cloudFloat 9s ease-in-out infinite -2s; }
.hero-clouds .cloud-3 { top: 55%; left: 42%; width: 380px; color: rgba(255,255,255,0.7); animation: cloudFloat 8.5s ease-in-out infinite -4s; }
.hero-clouds .cloud-4 { display: none; }
@media (max-width: 900px) {
.hero-clouds .cloud-1 { width: 340px; }
.hero-clouds .cloud-2 { width: 380px; top: 10%; }
.hero-clouds .cloud-3 { width: 300px; top: 55%; left: 10%; }
.hero-clouds .cloud-4 { width: 420px; bottom: -4%; }
}
@media (max-width: 600px) {
.hero-clouds .cloud-1 { width: 240px; top: 6%; left: -10%; }
.hero-clouds .cloud-2 { width: 280px; top: 14%; right: -10%; }
.hero-clouds .cloud-3 { display: none; }
.hero-clouds .cloud-4 { width: 320px; bottom: -2%; right: -10%; }
}
@keyframes cloudFloat {
0% { transform: translateY(0) translateX(0); }
50% { transform: translateY(-10px) translateX(4px); }
100% { transform: translateY(0) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
.hero-clouds .cloud { animation: none; }
}
.hero-media.has-image { background-image: var(--hero-bg); }
.hero-content {
position: relative; z-index: 3;
max-width: var(--container); margin: 0 auto;
padding: 0 var(--gutter);
display: flex; flex-direction: column; justify-content: flex-end;
height: 100%; padding-bottom: 110px; padding-top: 120px;
color: var(--kh-white);
}
.hero h1 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(56px, 11vw, 180px);
line-height: .95;
letter-spacing: -0.04em;
font-style: italic;
margin-bottom: 32px;
color: #ffffff;
text-shadow:
0 0 14px rgba(255, 255, 255, 0.45),
0 0 40px rgba(255, 255, 255, 0.25),
0 6px 24px rgba(0, 0, 0, 0.35),
0 2px 6px rgba(0, 0, 0, 0.25);
}
.hero-sub {
color: rgba(255,255,255,.88);
font-size: clamp(16px, 1.5vw, 22px);
line-height: 1.5;
max-width: 42ch;
margin-bottom: 36px;
letter-spacing: .005em;
text-shadow: 0 1px 14px rgba(0,0,0,.3);
}
/* Eyebrow editorial (con línea separadora) */
.hero-eyebrow {
display: inline-flex; align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: 12px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.85);
margin-bottom: 28px;
}
.hero-eyebrow-line {
display: inline-block;
width: 48px; height: 1px;
background: rgba(255,255,255,.55);
}
/* CTA estilo editorial: texto con flecha animada */
.hero-cta {
display: inline-flex; align-items: center;
gap: 14px;
padding: 14px 0;
font-family: var(--font-sans);
font-size: 13px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kh-white);
border-bottom: 1px solid rgba(255,255,255,.45);
align-self: flex-start;
transition: border-color .3s ease, color .3s ease;
}
.hero-cta:hover { border-bottom-color: #fff; opacity: 1; }
.hero-cta svg { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hero-cta:hover svg { transform: translateX(6px); }
/* Meta sticker vertical a la derecha */
.hero-meta {
position: absolute;
top: 50%;
right: 32px;
transform: translateY(-50%) rotate(-90deg);
transform-origin: right center;
display: inline-flex; align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .24em;
text-transform: uppercase;
color: rgba(255,255,255,.7);
z-index: 3;
white-space: nowrap;
pointer-events: none;
}
.hero-meta-line {
display: inline-block;
width: 36px; height: 1px;
background: rgba(255,255,255,.45);
}
@media (max-width: 900px) { .hero-meta { display: none; } }
/* Scroll indicator centrado abajo */
.hero-scroll {
position: absolute;
left: 50%;
bottom: 56px;
transform: translateX(-50%);
display: inline-flex; flex-direction: column; align-items: center;
gap: 12px;
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .28em;
text-transform: uppercase;
color: rgba(255,255,255,.8);
z-index: 3;
}
.hero-scroll-line {
display: block;
width: 1px; height: 42px;
background: rgba(255,255,255,.7);
position: relative;
overflow: hidden;
}
.hero-scroll-line::after {
content: "";
position: absolute; top: -42px; left: 0;
width: 100%; height: 42px;
background: linear-gradient(180deg, transparent 0%, #fff 100%);
animation: scrollLine 2.2s cubic-bezier(.4,0,.2,1) infinite;
}
@keyframes scrollLine {
0% { transform: translateY(0); }
60% { transform: translateY(84px); }
100% { transform: translateY(84px); }
}
.hero-scroll:hover { opacity: 1; color: #fff; }
/* Marquee editorial en el borde inferior */
.hero-marquee {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 2;
overflow: hidden;
padding: 18px 0;
border-top: 1px solid rgba(255,255,255,.14);
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.18) 100%);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
pointer-events: none;
}
.hero-marquee .marquee-track {
display: inline-flex; align-items: center;
gap: 48px;
white-space: nowrap;
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: -0.01em;
color: rgba(255,255,255,.85);
animation: marqueeSlide 40s linear infinite;
}
.hero-marquee .marquee-track em {
font-style: normal;
color: rgba(255,255,255,.4);
font-family: var(--font-sans);
}
@keyframes marqueeSlide {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.hero-marquee .marquee-track { animation: none; }
.hero-scroll-line::after { animation: none; }
}
@media (max-width: 700px) {
.hero-scroll { bottom: 90px; }
.hero-marquee .marquee-track { gap: 28px; font-size: 18px; }
}
.hero .cta {
display: inline-block;
font-size: 14px; letter-spacing: .08em;
text-transform: uppercase;
padding: 14px 28px;
background: var(--kh-white); color: var(--kh-black);
border-radius: 999px;
align-self: flex-start;
}
.hero .cta:hover { opacity: 1; background: var(--kh-ink); color: var(--kh-white); }
/* ---------- VALUES (USP) ---------- */
.values {
background: var(--kh-cream);
padding: 88px 0;
}
.values-compact { padding: 48px 0; background: var(--kh-white); border-top: 1px solid var(--nube-border); border-bottom: 1px solid var(--nube-border); }
.values-grid {
display: grid; grid-template-columns: 1fr; gap: 32px;
}
@media (min-width: 760px) { .values-grid { grid-template-columns: repeat(3, 1fr); gap: 48px; } }
.value-card { text-align: left; }
.values:not(.values-compact) .value-card { text-align: center; padding: 0 16px; }
.value-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 999px;
background: var(--kh-white);
color: var(--kh-accent);
margin-bottom: 20px;
}
.value-card h3 {
font-family: var(--font-serif);
font-weight: 400; font-style: italic;
font-size: clamp(20px, 2.2vw, 28px);
letter-spacing: -0.02em;
margin-bottom: 10px;
color: var(--kh-ink);
}
.values-compact .value-card h3 {
font-family: var(--font-heading);
font-weight: 500; font-style: normal;
font-size: 14px; letter-spacing: .04em;
text-transform: uppercase;
color: var(--kh-accent);
margin-bottom: 6px;
}
.value-card p {
font-size: 15px; line-height: 1.5;
color: var(--kh-gray-600);
max-width: 42ch;
}
.values:not(.values-compact) .value-card p { margin: 0 auto; }
/* ---------- SECTION ---------- */
section { padding: 96px 0; }
.section-eyebrow {
font-size: 12px; letter-spacing: .15em;
text-transform: uppercase;
color: var(--kh-beige);
margin-bottom: 16px;
}
.section-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(36px, 5vw, 72px);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 48px;
font-style: italic;
}
/* ---------- EDITORIAL GRID (6 bloques) ---------- */
.cat-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 2px;
background: #eee;
}
@media (min-width: 640px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } }
.cat-card {
position: relative;
aspect-ratio: 4/5;
background: var(--kh-cream);
overflow: hidden;
display: flex; align-items: flex-end;
padding: 32px;
color: var(--kh-ink);
}
.cat-card::before {
content: "";
position: absolute; inset: 0;
background: var(--cat-bg, linear-gradient(135deg, #E8ECF0, #4A6275));
z-index: 0;
}
.cat-card.has-photo::before {
background: linear-gradient(180deg, #F5F6F7 0%, #E8ECF0 100%);
}
.cat-photo {
position: absolute; inset: 0;
background-size: 220%;
background-repeat: no-repeat;
background-position: center center;
transition: background-size .8s cubic-bezier(.2,.8,.2,1);
z-index: 1;
}
.cat-card:hover .cat-photo { background-size: 250%; }
.cat-card:hover::before { transform: none; }
.cat-card-inner {
position: relative; z-index: 2;
width: 100%;
display: flex; justify-content: space-between; align-items: flex-end;
}
.cat-card h3 {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: 36px;
letter-spacing: -0.02em;
color: var(--kh-ink);
}
.cat-card.has-photo h3 {
color: var(--kh-white);
text-shadow: 0 2px 18px rgba(0,0,0,.35);
}
.cat-card .discover {
font-size: 12px; letter-spacing: .1em;
text-transform: uppercase;
color: var(--kh-ink);
padding-bottom: 4px;
border-bottom: 1px solid currentColor;
}
.cat-card.has-photo .discover {
color: var(--kh-white);
text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
/* Subtle dark gradient overlay for legibility on photo cards */
.cat-card.has-photo::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%);
z-index: 1; pointer-events: none;
}
/* ---------- EDITORIAL SPLIT ---------- */
.editorial {
display: grid;
grid-template-columns: 1fr;
gap: 48px;
align-items: center;
}
@media (min-width: 900px) {
.editorial { grid-template-columns: 1fr 1fr; gap: 80px; }
.editorial.reverse > :first-child { order: 2; }
}
.editorial-media {
aspect-ratio: 4/5;
background: linear-gradient(135deg, #E8ECF0, #4A6275);
background-size: cover; background-position: center;
}
.editorial h2 {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: clamp(36px, 4.5vw, 64px);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 24px;
}
.editorial h2 .highlight {
color: var(--kh-accent);
position: relative;
display: inline-block;
}
.editorial h2 .highlight::after {
content: "";
position: absolute;
left: -4%; right: -4%; bottom: -2px;
height: 8px;
background: var(--kh-accent);
opacity: .18;
border-radius: 4px;
}
.editorial p { font-size: 17px; line-height: 1.6; color: var(--kh-gray-800); margin-bottom: 24px; max-width: 48ch; }
.editorial .link {
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
/* ---------- POSTS ---------- */
.posts-grid {
display: grid; gap: 48px 32px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }
.post-card { display: block; }
.post-card .thumb {
aspect-ratio: 4/5;
background: var(--kh-cream);
background-size: cover; background-position: center;
margin-bottom: 16px;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.post-card:hover .thumb { transform: scale(1.01); }
.post-card h3 {
font-family: var(--font-serif);
font-weight: 300; font-style: italic;
font-size: 22px; line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.post-card .meta { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--kh-beige); }
/* ---------- COMPROMISO ---------- */
.commitment {
background: var(--kh-cream);
padding: 120px var(--gutter);
text-align: center;
}
.commitment h2 {
font-family: var(--font-serif);
font-weight: 300; font-style: italic;
font-size: clamp(40px, 6vw, 88px);
line-height: 1; letter-spacing: -0.03em;
max-width: 14ch; margin: 0 auto 32px;
}
.commitment .link {
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
border-bottom: 1px solid currentColor; padding-bottom: 4px;
}
/* ---------- NEWSLETTER ---------- */
.newsletter {
padding: 96px var(--gutter);
text-align: center;
border-top: 1px solid var(--nube-border);
background: var(--nube-section-bg);
}
.newsletter h2 {
font-family: var(--font-serif); font-weight: 300; font-style: italic;
font-size: clamp(32px, 4vw, 48px);
letter-spacing: -0.02em; margin-bottom: 16px;
}
.newsletter p { color: var(--kh-gray-600); max-width: 48ch; margin: 0 auto 32px; }
.newsletter form {
display: flex; max-width: 480px; margin: 0 auto;
border-bottom: 1px solid var(--kh-black);
}
.newsletter input[type="email"] {
flex: 1; padding: 12px 0;
border: 0; font: inherit; background: transparent;
outline: none;
}
.newsletter button[type="submit"] {
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
padding: 12px 0;
}
/* ---------- FOOTER ---------- */
.site-footer {
background: var(--nube-section-bg);
color: var(--nube-text);
padding: 80px var(--gutter) 32px;
font-size: 14px;
border-top: 1px solid var(--nube-border);
}
/* Footer — bloque de marca */
.footer-brand {
max-width: var(--container);
margin: 0 auto 56px;
display: flex;
flex-direction: column;
gap: 16px;
}
.footer-logo img {
height: 36px;
width: auto;
opacity: .9;
transition: opacity .2s;
}
.footer-logo:hover img { opacity: 1; }
.footer-tagline {
font-size: 13px;
line-height: 1.65;
color: var(--kh-gray-600);
max-width: 280px;
}
.footer-social-row {
display: flex;
gap: 10px;
margin-top: 4px;
}
.footer-social-icon {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--nube-border);
display: flex;
align-items: center;
justify-content: center;
color: var(--nube-muted);
transition: background .2s, color .2s, border-color .2s;
}
.footer-social-icon:hover {
background: var(--kh-night);
color: #fff;
border-color: var(--kh-night);
opacity: 1;
}
.footer-top {
max-width: var(--container); margin: 0 auto;
display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 720px) { .footer-top { grid-template-columns: repeat(3, 1fr); } }
.footer-col h4 {
font-family: var(--font-heading); font-weight: 600;
font-size: 14px; letter-spacing: .02em;
margin-bottom: 20px; color: var(--nube-heading);
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--nube-link); }
.footer-col a:hover { color: var(--nube-heading); opacity: 1; }
.footer-bottom {
max-width: var(--container); margin: 64px auto 0;
padding-top: 24px; border-top: 1px solid var(--nube-border);
display: flex; flex-wrap: wrap; gap: 16px;
justify-content: space-between;
font-size: 12px; color: var(--kh-gray-600);
}
/* ---------- ARTICLE / SINGLE ---------- */
.single-article {
max-width: 760px; margin: 0 auto; padding: 80px var(--gutter);
}
.single-article h1 {
font-family: var(--font-serif); font-weight: 300; font-style: italic;
font-size: clamp(40px, 6vw, 80px); line-height: 1;
letter-spacing: -0.03em; margin-bottom: 24px;
}
.single-article .meta { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--kh-beige); margin-bottom: 48px; }
.single-article .content p { font-size: 18px; line-height: 1.7; margin-bottom: 24px; color: var(--kh-gray-800); }
.single-article .content h2, .single-article .content h3 {
font-family: var(--font-serif); font-weight: 400; font-style: italic;
margin: 48px 0 16px; letter-spacing: -0.02em;
}
.single-article .content a { border-bottom: 1px solid currentColor; }
.single-article .content img { margin: 32px 0; }
/* ---------- ARCHIVE ---------- */
.archive-header {
padding: 120px var(--gutter) 60px;
max-width: var(--container); margin: 0 auto;
}
.archive-header h1 {
font-family: var(--font-serif); font-weight: 300; font-style: italic;
font-size: clamp(48px, 7vw, 96px); letter-spacing: -0.03em;
}
/* Lazy background fade-in */
.lazy-bg { background-color: var(--kh-cream); transition: filter .5s ease; }
.lazy-bg:not(.lazy-loaded) { filter: blur(12px); }
.lazy-bg.lazy-loaded { filter: blur(0); }
/* ---------- TIENDA HERO + SLIDER ---------- */
.tienda-hero {
position: relative;
background: var(--kh-cream);
padding: 0;
margin: 0;
}
.slider {
position: relative;
height: 100vh;
min-height: 600px;
overflow: hidden;
}
body.page-tienda .site-header .brand img,
body.page-carrito .site-header .brand img { filter: none; }
body.page-tienda .site-header .nav-primary a,
body.page-tienda .site-header .header-search,
body.page-tienda .site-header .header-cart,
body.page-tienda .site-header .header-profile,
body.page-tienda .site-header .nav-toggle,
body.page-carrito .site-header .nav-primary a,
body.page-carrito .site-header .header-search,
body.page-carrito .site-header .header-cart,
body.page-carrito .site-header .header-profile,
body.page-carrito .site-header .nav-toggle {
color: var(--kh-ink);
}
body.page-tienda .site-header .header-search:hover,
body.page-tienda .site-header .header-cart:hover,
body.page-tienda .site-header .header-profile:hover,
body.page-carrito .site-header .header-search:hover,
body.page-carrito .site-header .header-cart:hover,
body.page-carrito .site-header .header-profile:hover { background: var(--kh-cream); opacity: 1; }
body.page-tienda .slide-inner { padding-top: 120px; }
/* ---- Slide container + ken-burns background ---- */
.slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 1s cubic-bezier(.2,.8,.2,1);
pointer-events: none;
overflow: hidden;
}
.slide.is-active { opacity: 1; pointer-events: auto; }
.slide-bg {
position: absolute; inset: 0;
background-size: cover; background-position: center;
transform: scale(1.05);
transition: transform 8s ease-out;
}
.slide.is-active .slide-bg {
animation: ken-burns 9s linear forwards;
}
@keyframes ken-burns {
0% { transform: scale(1.04) translate3d(0, 0, 0); }
100% { transform: scale(1.14) translate3d(-1%, -1.5%, 0); }
}
/* Gradient overlay for text legibility */
.slide::before {
content: "";
position: absolute; inset: 0;
z-index: 1;
background:
linear-gradient(105deg, rgba(15,22,32,.55) 0%, rgba(15,22,32,.25) 42%, rgba(0,0,0,0) 65%),
linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.30) 100%);
pointer-events: none;
}
/* ---- Inner layout ---- */
.slide-inner {
position: relative; z-index: 2;
max-width: var(--container);
margin: 0 auto;
padding: 120px var(--gutter) 140px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: var(--kh-white);
}
/* ---- Glass editorial panel ---- */
.slide-panel {
position: relative;
max-width: 460px;
background: rgba(255, 255, 255, 0.94);
-webkit-backdrop-filter: blur(18px) saturate(1.4);
backdrop-filter: blur(18px) saturate(1.4);
border-radius: 22px;
padding: 34px 38px 30px;
color: var(--nube-heading);
box-shadow:
0 1px 2px rgba(10,20,35,.08),
0 18px 40px rgba(10,20,35,.22),
0 44px 90px rgba(10,20,35,.14);
transform: translateY(20px);
opacity: 0;
transition: transform .8s cubic-bezier(.22, .8, .26, 1) .15s,
opacity .6s ease .15s;
}
.slide.is-active .slide-panel {
transform: translateY(0);
opacity: 1;
}
/* Counter row */
.slide-counter {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.slide-counter-num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: 46px;
line-height: 1;
color: var(--kh-accent);
letter-spacing: -0.02em;
}
.slide-counter-label {
font-family: var(--font-sans);
font-size: 10.5px;
letter-spacing: .2em;
text-transform: uppercase;
color: var(--kh-gray-600);
font-weight: 500;
}
.slide-counter-line {
flex: 1;
height: 1px;
background: var(--nube-border-strong);
opacity: .4;
}
.slide-counter-total {
font-family: var(--font-sans);
font-size: 10.5px;
letter-spacing: .14em;
color: var(--kh-gray-600);
font-weight: 500;
font-feature-settings: "tnum";
}
/* Title */
.slide h2 {
font-family: var(--font-serif);
font-weight: 300; font-style: italic;
font-size: clamp(48px, 6vw, 88px);
line-height: .95;
letter-spacing: -0.03em;
color: var(--nube-heading);
margin: 0 0 22px;
text-shadow: none;
}
/* Meta (referencias + desde) */
.slide-meta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
margin: 0 0 26px;
padding: 18px 0;
border-top: 1px solid var(--nube-border);
border-bottom: 1px solid var(--nube-border);
}
.slide-meta > div { display: flex; flex-direction: column; gap: 4px; }
.slide-meta dt {
font-family: var(--font-sans);
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kh-gray-600);
font-weight: 500;
}
.slide-meta dd {
font-family: var(--font-serif);
font-weight: 400;
font-size: 19px;
color: var(--nube-heading);
margin: 0;
letter-spacing: -0.01em;
}
.slide-cta { align-self: flex-start; }
/* ---- Autoplay progress bar ---- */
.slide-progress {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 2px;
background: rgba(255, 255, 255, 0.18);
z-index: 3;
pointer-events: none;
}
.slide-progress-bar {
height: 100%; width: 0%;
background: linear-gradient(90deg, var(--kh-white), rgba(255,255,255,.6));
box-shadow: 0 0 10px rgba(255,255,255,.45);
}
.slide.is-active .slide-progress-bar {
animation: slide-progress 6.5s linear forwards;
}
@keyframes slide-progress {
from { width: 0%; }
to { width: 100%; }
}
/* ---- Nav arrows ---- */
.slider-nav { transform: translateY(-50%); }
.slider-nav.prev { left: 28px; }
.slider-nav.next { right: 28px; }
/* ---- Tabs (replaces dots) ---- */
.slider-tabs {
position: absolute;
bottom: 26px;
left: 50%;
transform: translateX(-50%);
z-index: 5;
display: flex;
gap: 4px;
padding: 5px;
background: rgba(255, 255, 255, 0.16);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.22);
border-radius: 999px;
max-width: calc(100% - 140px);
overflow-x: auto;
scrollbar-width: none;
}
.slider-tabs::-webkit-scrollbar { display: none; }
.slider-tab {
flex-shrink: 0;
display: inline-flex; align-items: center;
padding: 9px 18px;
border: 0; border-radius: 999px;
background: transparent;
color: #fff;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
cursor: pointer;
white-space: nowrap;
transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.slider-tab:hover {
background: rgba(255,255,255,.18);
opacity: 1;
transform: translateY(-1px);
}
.slider-tab.is-active {
background: #fff;
color: var(--nube-heading);
box-shadow: 0 4px 10px rgba(10,20,35,.18);
}
/* Hide old dot style variant (the .slider-dot class on buttons now just tracks state) */
.slider-tabs .slider-dot { width: auto; height: auto; background: transparent; }
@media (max-width: 760px) {
.slider { height: 88vh; min-height: 520px; }
.slider-nav.prev { left: 12px; }
.slider-nav.next { right: 12px; }
.slide-inner { padding: 100px var(--gutter) 110px; }
.slide-panel {
max-width: calc(100% - 8px);
padding: 26px 24px 22px;
border-radius: 18px;
}
.slide-counter-num { font-size: 36px; }
.slide h2 { font-size: clamp(42px, 12vw, 68px); margin-bottom: 18px; }
.slide-meta { gap: 14px; padding: 14px 0; margin-bottom: 22px; }
.slide-meta dd { font-size: 17px; }
.slider-tabs { max-width: calc(100% - 24px); bottom: 20px; }
.slider-tab { padding: 7px 14px; font-size: 10px; letter-spacing: .1em; }
}
.tienda-intro {
padding-top: 96px;
padding-bottom: 32px;
}
.tienda-intro .section-title { margin-bottom: 16px; }
/* ---------- CATALOG ---------- */
.catalogo { padding-top: 0; padding-bottom: 120px; }
.filters {
border-top: 1px solid var(--nube-border);
border-bottom: 1px solid var(--nube-border);
padding: 16px 0;
margin-bottom: 32px;
}
.filter-search {
display: flex; align-items: center; gap: 8px;
max-width: 420px; border-bottom: 1px solid var(--kh-ink);
margin-bottom: 16px;
}
.filter-search input {
flex: 1; padding: 10px 0; font: inherit;
border: 0; background: transparent; outline: none;
}
.filter-search button { padding: 10px 4px; font-size: 18px; }
.filter-row {
display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-end;
}
.filter-row label { display: flex; flex-direction: column; gap: 4px; }
.filter-row label span {
font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
color: var(--kh-gray-600);
}
.filter-row select {
font: inherit; padding: 8px 24px 8px 0;
border: 0; border-bottom: 1px solid var(--kh-gray-400);
background: transparent; min-width: 140px; cursor: pointer;
-webkit-appearance: none; appearance: none;
background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
background-position: right 8px top 55%, right 3px top 55%;
background-size: 5px 5px, 5px 5px;
background-repeat: no-repeat;
}
.filter-row select:focus { outline: none; border-bottom-color: var(--kh-accent); }
.clear-filters {
align-self: flex-end;
}
.catalog-meta {
font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
color: var(--kh-gray-600); margin-bottom: 24px;
}
.products-grid {
display: grid; gap: 48px 24px;
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 700px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .products-grid { grid-template-columns: repeat(4, 1fr); } }
.product-card { display: flex; flex-direction: column; color: var(--kh-ink); }
.product-card a { color: inherit; }
.product-card a:hover { opacity: 1; }
.product-card .thumb {
aspect-ratio: 1/1;
background: var(--kh-cream);
background-size: cover; background-position: center;
margin-bottom: 12px;
transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.product-card:hover .thumb { transform: scale(1.015); }
.pc-eyebrow {
font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
color: var(--kh-accent); margin-bottom: 4px;
}
.product-card h3 {
font-family: var(--font-heading);
font-weight: 500; font-style: normal;
font-size: 15px; line-height: 1.3;
margin-bottom: 6px;
letter-spacing: 0;
}
.pc-meta {
display: flex; justify-content: space-between;
font-size: 13px; color: var(--kh-gray-800);
}
.pc-price { font-weight: 500; color: var(--nube-price); }
.pc-price-old {
font-size: 12px;
color: var(--kh-gray-400);
text-decoration: line-through;
font-weight: 400;
}
.pc-price-sale {
font-weight: 600;
color: var(--nube-price);
font-size: 15px;
}
.pc-price-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.pc-size { color: var(--kh-gray-600); }
/* Quick-add button on card — shares .btn-nube styling below */
.pc-add-cart {
margin-top: 12px;
padding: 12px 18px;
font-size: 11.5px;
letter-spacing: .14em;
width: 100%;
}
.pagination {
display: flex; align-items: center; justify-content: center;
gap: 24px; margin-top: 80px;
font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
}
.pagination .page-info { color: var(--kh-gray-600); }
/* ---------- PRODUCT DETAIL ---------- */
.product-detail {
max-width: var(--container); margin: 0 auto;
padding: 40px var(--gutter) 120px;
}
.breadcrumbs {
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
color: var(--kh-gray-600); margin-bottom: 40px;
display: flex; gap: 8px; flex-wrap: wrap;
}
.breadcrumbs a { color: var(--kh-gray-800); }
.product-layout {
display: grid; grid-template-columns: 1fr; gap: 48px;
}
@media (min-width: 900px) {
.product-layout { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
}
.product-gallery { position: relative; }
@media (min-width: 900px) {
.product-gallery { position: sticky; top: 100px; }
}
.pg-main {
position: relative;
width: 100%;
max-width: 520px;
aspect-ratio: 1/1;
margin: 0 auto 16px;
background: linear-gradient(135deg, #f3f5f8, #E8ECF0);
border-radius: 24px;
overflow: hidden;
box-shadow:
0 1px 2px rgba(20, 30, 45, .04),
0 12px 32px rgba(20, 30, 45, .08),
0 30px 60px rgba(20, 30, 45, .06);
transition: transform .4s ease, box-shadow .4s ease;
}
.pg-main:hover {
transform: translateY(-3px);
box-shadow:
0 2px 4px rgba(20, 30, 45, .05),
0 16px 40px rgba(20, 30, 45, .10),
0 36px 72px rgba(20, 30, 45, .08);
}
.pg-main img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.pg-main.is-fallback {
background: linear-gradient(135deg, #E8ECF0 0%, #4A6275 100%);
}
.pg-thumbs {
display: grid; gap: 8px;
grid-template-columns: repeat(4, 1fr);
max-width: 520px; margin: 0 auto;
}
@media (min-width: 900px) {
.pg-thumbs { grid-template-columns: repeat(5, 1fr); gap: 10px; }
}
.pg-thumb {
width: 100%;
aspect-ratio: 1/1;
padding: 0; overflow: hidden;
border: 1.5px solid transparent;
border-radius: 10px;
background: #f3f5f8;
transition: border-color .2s ease, transform .2s ease;
}
@media (min-width: 900px) {
.pg-thumb { border-radius: 12px; }
.pg-thumb:hover { transform: translateY(-2px); }
}
.pg-thumb.is-active { border-color: var(--kh-accent); }
.pg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-detail {
padding: 24px 16px 64px;
max-width: 1240px; margin: 0 auto;
}
@media (min-width: 640px) {
.product-detail { padding: 32px 24px 80px; }
}
@media (min-width: 900px) {
.product-detail { padding: 48px 40px 120px; }
}
@media (max-width: 899px) {
.product-layout { gap: 32px; }
.pg-main { max-width: 100%; border-radius: 18px; aspect-ratio: 1/1; }
.pg-main:hover { transform: none; box-shadow:
0 1px 2px rgba(20, 30, 45, .04),
0 12px 32px rgba(20, 30, 45, .08),
0 30px 60px rgba(20, 30, 45, .06); }
.product-info h1 { font-size: clamp(26px, 7vw, 34px); }
.pi-price { font-size: 24px; margin-bottom: 20px; }
.pi-specs { margin: 20px 0; padding: 14px 0; }
.pi-specs > div { grid-template-columns: 90px 1fr; gap: 12px; }
.pi-actions { margin: 20px 0 4px; }
.product-nubes .nube.p1 { width: 240px; height: 115px; top: -20px; left: -60px; }
.product-nubes .nube.p2 { width: 170px; height: 80px; top: 35%; right: -50px; }
.product-nubes .nube.p3 { display: none; }
}
.product-info { padding-top: 8px; }
.product-info h1 {
font-family: var(--font-serif);
font-weight: 300; font-style: italic;
font-size: clamp(30px, 3.4vw, 46px);
line-height: 1.05; letter-spacing: -0.03em;
margin-bottom: 14px;
}
.pi-eyebrow {
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--kh-accent); margin-bottom: 18px; font-weight: 500;
}
.pi-price {
display: flex; gap: 14px; align-items: baseline;
font-size: 28px; margin-bottom: 28px;
font-family: var(--font-serif); font-weight: 400;
}
.pi-price strong { font-weight: 500; color: var(--nube-price); }
.pi-price-old {
font-size: 16px; color: var(--kh-gray-600);
text-decoration: line-through;
font-family: var(--font-sans);
}
.pi-specs {
margin: 28px 0;
display: grid; gap: 10px;
border-top: 1px solid var(--nube-border);
border-bottom: 1px solid var(--nube-border);
padding: 20px 0;
}
.pi-specs > div {
display: grid; grid-template-columns: 120px 1fr;
gap: 16px; font-size: 13px;
padding: 2px 0;
}
.pi-specs dt {
color: var(--kh-gray-600); font-weight: 400;
text-transform: uppercase; letter-spacing: .05em; font-size: 11px;
align-self: center;
}
.pi-specs dd { color: var(--kh-ink); margin: 0; font-weight: 500; }
.pi-actions {
display: flex; flex-wrap: wrap; gap: 12px;
margin: 28px 0 8px;
}
.pi-actions .cta-primary {
width: 100%;
padding: 18px 28px;
font-size: 13px;
letter-spacing: .12em;
text-align: center;
}
.cta-secondary {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
font-family: var(--font-sans);
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
font-weight: 500;
padding: 15px 32px;
border-radius: 999px;
border: 1.5px solid var(--kh-ink);
color: var(--kh-ink);
background: transparent;
transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.cta-secondary:hover {
background: var(--kh-ink); color: var(--kh-white); opacity: 1;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(10,10,10,.18);
}
.pi-description, .pi-care {
margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--nube-border);
}
.pi-description h3, .pi-care h3 {
font-family: var(--font-heading); font-weight: 600;
font-size: 14px; letter-spacing: .06em; text-transform: uppercase;
margin-bottom: 12px;
}
.pi-description p {
font-size: 15px; line-height: 1.7; color: var(--kh-gray-800);
}
.pi-care ul {
list-style: none; display: flex; flex-direction: column; gap: 8px;
font-size: 14px; color: var(--kh-gray-800);
}
.pi-care li::before { content: "· "; color: var(--kh-accent); }
.related { margin-top: 120px; }
.related .section-title { margin-bottom: 32px; }
/* Hidden WP admin bar adjustments */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* ---------- CART (custom, no WooCommerce) ---------- */
/* Cart page — full gradient bg matching hero */
.cart-page {
position: relative;
min-height: 100vh;
background: linear-gradient(135deg, #E8ECF0 0%, #4A6275 45%, #2F3F4B 75%, #000000 100%);
overflow: hidden;
}
.cart-page-bg { position: absolute; inset: 0; }
.cart-page > .hero-particles { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.cart-page > .hero-clouds { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.cart-page .cloud-cp-1 {
position: absolute; top: 15%; right: -6%; width: 420px;
color: rgba(255,255,255,.7); overflow: visible;
filter: drop-shadow(0 0 14px rgba(255,255,255,.45)) drop-shadow(0 0 40px rgba(255,255,255,.25)) drop-shadow(0 8px 28px rgba(0,0,0,.28));
animation: cloudFloat 8s ease-in-out infinite;
}
.cart-page .cloud-cp-2 {
position: absolute; bottom: 20%; left: -8%; width: 360px;
color: rgba(255,255,255,.6); overflow: visible;
filter: drop-shadow(0 0 14px rgba(255,255,255,.45)) drop-shadow(0 0 40px rgba(255,255,255,.25)) drop-shadow(0 8px 28px rgba(0,0,0,.28));
animation: cloudFloat 10s ease-in-out infinite -3s;
}
.cart-page .cloud-cp-3 {
position: absolute; top: 55%; left: 50%; width: 280px;
color: rgba(255,255,255,.5); overflow: visible;
filter: drop-shadow(0 0 14px rgba(255,255,255,.45)) drop-shadow(0 0 40px rgba(255,255,255,.25));
animation: cloudFloat 9s ease-in-out infinite -5s;
}
@media (max-width: 900px) {
.cart-page .cloud-cp-1 { width: 280px; }
.cart-page .cloud-cp-2 { display: none; }
.cart-page .cloud-cp-3 { display: none; }
}
.cart-page-content {
position: relative; z-index: 3;
padding: 80px 0 80px;
}
.cart-glass {
background: rgba(255,255,255,.92);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
border-radius: 20px;
padding: 40px 36px;
box-shadow: 0 8px 48px rgba(0,0,0,.14);
}
@media (max-width: 700px) {
.cart-glass { padding: 24px 18px; border-radius: 14px; }
}
/* Fallback WC page header (checkout, account) */
.wc-page-header {
background: var(--kh-cream);
padding: 80px 0 48px;
}
.wc-page-header .section-title { margin-bottom: 0; }
/* WC body */
.wc-body {
padding: 48px 0 120px;
font-family: var(--font-sans);
font-size: 15px;
color: var(--kh-ink);
line-height: 1.5;
}
.wc-body h2, .wc-body h3 {
font-family: var(--font-serif);
font-weight: 300; font-style: italic;
letter-spacing: -0.02em;
}
.wc-body h2 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 24px; }
.woocommerce td, .woocommerce th,
.woocommerce label, .woocommerce .amount {
font-family: var(--font-sans) !important;
}
/* Cart layout: products left, totals right (inspired by Couplet Coffee) */
.woocommerce-cart .woocommerce {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 960px) {
.woocommerce-cart .woocommerce {
grid-template-columns: 1.5fr 1fr;
align-items: start;
}
}
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
/* Shop grid */
.woocommerce ul.products {
display: grid !important;
grid-template-columns: repeat(2, 1fr);
gap: 32px 20px;
padding: 0; list-style: none;
}
@media (min-width: 700px) { .woocommerce ul.products { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .woocommerce ul.products { grid-template-columns: repeat(4, 1fr); } }
.woocommerce ul.products li.product {
width: auto !important; float: none !important; margin: 0 !important;
}
.woocommerce ul.products li.product a img {
aspect-ratio: 1/1;
object-fit: cover;
background: var(--kh-cream);
margin-bottom: 10px !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--font-sans) !important;
font-size: 14px !important;
font-weight: 500;
padding: 0 !important;
}
.woocommerce ul.products li.product .price {
font-size: 14px !important;
color: var(--nube-price) !important;
font-weight: 500;
}
.woocommerce ul.products li.product .button {
font-family: var(--font-sans);
font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
background: var(--kh-ink) !important;
color: var(--kh-white) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 10px 20px !important;
}
.woocommerce ul.products li.product .button:hover {
background: var(--kh-accent) !important;
}
/* Single product */
.woocommerce div.product div.images {
width: 55% !important; float: left;
}
.woocommerce div.product div.summary {
width: 40% !important; float: right;
}
@media (max-width: 768px) {
.woocommerce div.product div.images,
.woocommerce div.product div.summary { width: 100% !important; float: none; }
}
.woocommerce div.product .product_title {
font-family: var(--font-serif) !important;
font-weight: 300; font-style: italic;
font-size: clamp(28px, 4vw, 48px) !important;
letter-spacing: -0.03em;
}
.woocommerce div.product p.price {
font-size: 24px !important;
font-weight: 500;
color: var(--nube-price) !important;
}
.woocommerce div.product .single_add_to_cart_button {
font-family: var(--font-sans) !important;
font-size: 13px !important; letter-spacing: .1em; text-transform: uppercase;
background: var(--kh-ink) !important;
color: var(--kh-white) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 16px 32px !important;
}
.woocommerce div.product .single_add_to_cart_button:hover {
background: var(--kh-accent) !important;
}
/* Cart table — clean minimal (Couplet inspired) */
.woocommerce table.shop_table {
border: 0 !important;
border-collapse: collapse !important;
width: 100%;
}
.woocommerce table.shop_table th {
font-family: var(--font-sans);
font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
color: var(--kh-gray-400);
border: 0 !important;
border-bottom: 1px solid #eee !important;
padding: 0 12px 14px !important;
}
.woocommerce table.shop_table td {
border: 0 !important;
border-bottom: 1px solid #f0f0f0 !important;
padding: 20px 12px !important;
vertical-align: middle;
}
.woocommerce table.shop_table .product-thumbnail img {
width: 72px; height: 72px;
object-fit: cover; border-radius: 10px;
background: var(--kh-cream);
}
.woocommerce table.shop_table .product-name a {
font-family: var(--font-sans);
font-weight: 500; font-size: 14px;
color: var(--kh-ink);
}
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal {
font-weight: 500; font-size: 15px;
color: var(--nube-price);
}
.woocommerce table.shop_table .product-quantity .qty {
width: 52px; padding: 8px;
border: 1px solid #ddd; border-radius: 6px;
text-align: center; font: inherit;
}
.woocommerce table.shop_table .product-remove a {
font-size: 18px !important; color: var(--kh-gray-400) !important;
}
.woocommerce table.shop_table .product-remove a:hover { color: var(--kh-ink) !important; opacity: 1; }
/* Cart actions row */
.woocommerce .actions { border-top: 1px solid var(--nube-border); padding-top: 20px !important; }
/* Cart totals — sticky sidebar card */
.woocommerce .cart_totals {
background: var(--kh-cream);
padding: 28px;
border-radius: 14px;
position: sticky; top: 80px;
}
.woocommerce .cart_totals h2 {
font-family: var(--font-serif) !important;
font-weight: 300; font-style: italic;
font-size: 26px !important;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.woocommerce .cart_totals table { border: 0 !important; }
.woocommerce .cart_totals td, .woocommerce .cart_totals th {
border: 0 !important;
background: transparent;
padding: 8px 0 !important;
}
.woocommerce .cart_totals th { font-size: 13px !important; color: var(--kh-gray-600); }
.woocommerce .cart_totals .order-total td { font-size: 22px; font-weight: 600; }
/* Coupon */
.woocommerce .coupon { display: flex; gap: 8px; align-items: center; }
.woocommerce .coupon .input-text {
padding: 10px 14px !important; border: 1px solid #ddd !important;
border-radius: 8px !important; font: inherit;
}
/* --- Custom cart (localStorage) --- */
.cart-empty-msg { text-align: center; padding: 80px 0 32px; }
.cart-empty-msg p { font-size: 18px; color: var(--kh-gray-600); margin-bottom: 24px; }
.cart-layout {
display: grid; grid-template-columns: 1fr; gap: 48px;
}
@media (min-width: 900px) {
.cart-layout { grid-template-columns: 1.6fr 1fr; align-items: start; }
}
.cart-item {
display: grid;
grid-template-columns: 90px 1fr auto auto auto;
gap: 16px;
align-items: center;
padding: 20px 0;
border-bottom: 1px solid #f0f0f0;
}
@media (max-width: 700px) {
.cart-item { grid-template-columns: 70px 1fr; gap: 10px; }
.cart-item-qty, .cart-item-subtotal, .cart-item-remove { grid-column: 2; }
}
.cart-item-img img {
width: 90px; height: 90px;
object-fit: cover; border-radius: 10px;
background: var(--kh-cream);
}
.cart-item-placeholder {
width: 90px; height: 90px;
border-radius: 10px; background: var(--kh-cream);
}
.cart-item-name {
font-weight: 500; font-size: 14px;
color: var(--kh-ink); display: block;
margin-bottom: 4px;
}
.cart-item-price { font-size: 13px; color: var(--nube-price); }
.cart-item-qty {
display: inline-flex; align-items: center;
gap: 6px;
}
.qty-val {
width: 32px; text-align: center;
font-size: 14px; font-weight: 500;
}
.cart-item-subtotal { font-weight: 500; font-size: 15px; white-space: nowrap; }
.cart-summary {
background: var(--kh-cream);
border-radius: 14px;
padding: 28px;
position: sticky; top: 80px;
}
.cart-summary h2 {
font-family: var(--font-serif);
font-weight: 300; font-style: italic;
font-size: 26px; letter-spacing: -0.02em;
margin-bottom: 20px;
}
.summary-row {
display: flex; justify-content: space-between;
padding: 8px 0; font-size: 14px;
color: var(--kh-gray-600);
}
.summary-total {
border-top: 1px solid #ddd;
margin-top: 12px; padding-top: 16px;
font-size: 20px; font-weight: 600;
color: var(--kh-ink);
}
/* ── Total destacado con sparkles ── */
.cart-total-card {
margin: 20px 0 4px;
padding: 18px 22px;
background: linear-gradient(135deg, #1a2634 0%, #0e151e 55%, #2a3a48 100%);
border-radius: 14px;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
overflow: hidden;
box-shadow:
0 10px 36px rgba(0,0,0,.22),
0 2px 8px rgba(0,0,0,.14),
0 0 0 1px rgba(255,255,255,.07);
}
.cart-total-card::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(108deg, transparent 20%, rgba(255,255,255,.07) 50%, transparent 80%);
background-size: 250% 100%;
animation: cart-shimmer 3.6s ease-in-out infinite;
pointer-events: none;
}
@keyframes cart-shimmer {
0% { background-position: -150% 0; }
100% { background-position: 250% 0; }
}
.cart-total-label {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.5);
}
.cart-total-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.cart-total-val {
font-family: var(--font-serif);
font-size: clamp(26px, 3.2vw, 36px);
font-weight: 300;
font-style: italic;
color: #fff;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
animation: cart-total-glow 3s ease-in-out infinite;
}
@keyframes cart-total-glow {
0%, 100% { text-shadow: 0 1px 0 rgba(255,255,255,.08); }
50% { text-shadow: 0 0 16px rgba(255,255,255,.45), 0 0 44px rgba(100,150,200,.35); }
}
/* Estrella de 4 puntas via ::before + ::after */
.cart-sparkle {
position: absolute;
width: var(--sz, 8px);
height: var(--sz, 8px);
top: 50%;
left: 50%;
transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(.1) rotate(0deg);
opacity: 0;
animation: sparkle-pop 2.8s ease-in-out infinite var(--d, 0s);
pointer-events: none;
z-index: 2;
}
.cart-sparkle::before,
.cart-sparkle::after {
content: '';
position: absolute;
background: rgba(255,255,255,.95);
border-radius: 2px;
}
.cart-sparkle::before {
width: 2px; height: 100%;
left: 50%; top: 0;
transform: translateX(-50%);
}
.cart-sparkle::after {
width: 100%; height: 2px;
left: 0; top: 50%;
transform: translateY(-50%);
}
@keyframes sparkle-pop {
0%, 100% {
opacity: 0;
transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(.1) rotate(0deg);
}
30%, 70% {
opacity: 1;
transform: translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px))) scale(1) rotate(45deg);
}
}
@media (prefers-reduced-motion: reduce) {
.cart-total-card::before,
.cart-total-val,
.cart-sparkle { animation: none; }
.cart-sparkle { opacity: .5; transform: translate(calc(-50% + var(--x,0px)), calc(-50% + var(--y,0px))) scale(.7) rotate(45deg); }
}
.summary-checkout {
display: block; text-align: center;
margin-top: 24px; padding: 16px;
background: var(--kh-ink); color: var(--kh-white);
border-radius: 10px;
font-size: 13px; font-weight: 500;
letter-spacing: .1em; text-transform: uppercase;
transition: background .25s;
}
.summary-checkout:hover { background: var(--kh-accent); color: var(--kh-white); opacity: 1; }
.summary-continue {
margin-top: 12px;
width: 100%;
}
/* Toast notification */
.cart-toast {
position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%) translateY(20px);
background: var(--kh-ink); color: var(--kh-white);
padding: 14px 28px; border-radius: 10px;
font-family: var(--font-sans); font-size: 14px;
box-shadow: 0 8px 32px rgba(0,0,0,.18);
z-index: 9999; opacity: 0;
transition: opacity .3s ease, transform .3s ease;
pointer-events: none;
}
.cart-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* Checkout */
.woocommerce .checkout h3 {
font-family: var(--font-serif) !important;
font-weight: 300; font-style: italic;
font-size: 26px !important;
letter-spacing: -0.02em;
margin-bottom: 20px;
}
.woocommerce .checkout .form-row { margin-bottom: 16px; }
.woocommerce .checkout .form-row label {
font-size: 12px !important; letter-spacing: .08em;
text-transform: uppercase; color: var(--kh-gray-600);
margin-bottom: 6px !important;
}
.woocommerce #order_review {
background: var(--kh-cream);
padding: 32px;
border-radius: 16px;
}
/* Buttons — editorial underline style (matches hero CTA) */
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce #respond input#submit {
font-family: var(--font-sans) !important;
font-size: 13px !important; letter-spacing: .12em;
background: transparent !important;
color: var(--kh-ink) !important;
border: 0 !important;
border-bottom: 1px solid var(--kh-ink) !important;
border-radius: 0 !important;
padding: 10px 2px !important;
text-transform: uppercase;
transition: border-color .3s ease;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce input.button:hover {
background: transparent !important;
border-bottom-color: var(--kh-accent) !important;
color: var(--kh-accent) !important;
opacity: 1;
}
/* Primary actions keep solid style */
.woocommerce .checkout_coupon .button,
.woocommerce .wc-proceed-to-checkout a.button,
.woocommerce #place_order,
.woocommerce .single_add_to_cart_button {
background: var(--kh-ink) !important;
color: var(--kh-white) !important;
border: 0 !important;
border-radius: 999px !important;
padding: 16px 36px !important;
}
.woocommerce .wc-proceed-to-checkout a.button:hover,
.woocommerce #place_order:hover,
.woocommerce .single_add_to_cart_button:hover {
background: var(--kh-accent) !important;
color: var(--kh-white) !important;
}
/* My Account */
.woocommerce-account .woocommerce-MyAccount-navigation ul {
list-style: none; padding: 0;
display: flex; flex-direction: column; gap: 4px;
}
.woocommerce-account .woocommerce-MyAccount-navigation a {
font-family: var(--font-sans);
font-size: 14px; padding: 10px 16px;
display: block; border-radius: 8px;
color: var(--kh-ink);
}
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a {
background: var(--kh-cream);
font-weight: 500;
}
.woocommerce-account .woocommerce-MyAccount-navigation a:hover {
background: var(--kh-cream); opacity: 1;
}
/* Forms */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
font-family: var(--font-sans);
padding: 12px 14px;
border: 1px solid #ddd;
border-radius: 0;
}
.woocommerce form .form-row input.input-text:focus {
border-color: var(--kh-accent);
outline: none;
}
/* Cart icon in header */
.header-cart-count {
position: absolute; top: -4px; right: -4px;
background: var(--kh-accent);
color: var(--kh-white);
font-size: 10px; font-weight: 600;
letter-spacing: 0;
min-width: 18px; height: 18px;
padding: 0 5px;
border-radius: 999px;
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(74,98,117,.35);
display: inline-flex; align-items: center; justify-content: center;
line-height: 1;
animation: cart-pulse .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes cart-pulse {
0% { transform: scale(.7); opacity: 0; }
60% { transform: scale(1.12); opacity: 1; }
100% { transform: scale(1); }
}
/* WP core classes minimal support */
.alignleft { float: left; margin: 0 24px 24px 0; }
.alignright { float: right; margin: 0 0 24px 24px; }
.aligncenter { display: block; margin: 24px auto; }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: 13px; color: var(--kh-gray-600); margin-top: 8px; }
.screen-reader-text {
position: absolute !important; clip: rect(1px,1px,1px,1px);
width: 1px; height: 1px; overflow: hidden;
}
/* ==========================================================================
NUBE DECORATION SYSTEM — decorative clouds everywhere
========================================================================== */
.nube-layer {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: 0;
}
.nube-layer .nube {
position: absolute;
background-repeat: no-repeat;
background-size: contain;
background-position: center;
background-image: url('assets/cloud-fluffy.svg');
will-change: transform;
}
.nube-layer .nube.is-small {
background-image: url('assets/cloud-small.svg');
}
.nube-layer .nube.drift-slow { animation: nube-drift 38s ease-in-out infinite; }
.nube-layer .nube.drift-mid { animation: nube-drift 28s ease-in-out infinite reverse; }
.nube-layer .nube.drift-fast { animation: nube-drift 20s ease-in-out infinite; }
.nube-layer .nube.float-soft { animation: nube-float 9s ease-in-out infinite; }
.nube-layer .nube.float-long { animation: nube-float 13s ease-in-out infinite; }
@keyframes nube-drift {
0% { transform: translate3d(0, 0, 0); }
25% { transform: translate3d(10px, -12px, 0); }
50% { transform: translate3d(20px, -6px, 0); }
75% { transform: translate3d(12px, -18px, 0); }
100% { transform: translate3d(0, 0, 0); }
}
@keyframes nube-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(8px, -22px, 0); }
}
/* SVG section divider — wavy cloud border between sections */
.nube-divider {
display: block;
width: 100%;
height: 90px;
margin: 0;
line-height: 0;
pointer-events: none;
}
.nube-divider svg { width: 100%; height: 100%; display: block; }
/* Ambient cloud halo behind titles */
.section-title-nube {
position: relative;
display: inline-block;
}
.section-title-nube::before {
content: '';
position: absolute;
inset: -30px -60px -20px -60px;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
opacity: .18;
z-index: -1;
pointer-events: none;
}
/* Footer cloud bank — rises just above footer */
.footer-clouds {
position: relative;
height: 150px;
margin-top: -50px;
pointer-events: none;
overflow: hidden;
}
.footer-clouds .nube {
position: absolute;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
}
.footer-clouds .nube.f1 { width: 240px; height: 110px; left: 4%; bottom: 0; opacity: .55; animation: nube-float 11s ease-in-out infinite; }
.footer-clouds .nube.f2 { width: 300px; height: 135px; left: 38%; bottom: 0; opacity: .7; animation: nube-drift 32s ease-in-out infinite reverse; }
.footer-clouds .nube.f3 { width: 200px; height: 95px; right: 6%; bottom: 8px; opacity: .5; animation: nube-float 8s ease-in-out infinite; }
/* Tienda — ambient clouds above slider */
.tienda-hero { position: relative; }
.tienda-nubes { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.tienda-nubes .nube { position: absolute; background: url('assets/cloud-fluffy.svg') center/contain no-repeat; mix-blend-mode: screen; }
.tienda-nubes .nube.t1 { width: 280px; height: 130px; top: 8%; left: -40px; opacity: .55; animation: nube-drift 34s ease-in-out infinite; }
.tienda-nubes .nube.t2 { width: 180px; height: 90px; top: 22%; right: -20px; opacity: .45; animation: nube-float 10s ease-in-out infinite; }
.tienda-nubes .nube.t3 { width: 220px; height: 110px; bottom: 18%; left: 22%; opacity: .35; animation: nube-drift 40s ease-in-out infinite reverse; }
/* Product detail — soft clouds behind gallery */
.product-detail { position: relative; }
.product-nubes { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.product-nubes .nube { position: absolute; background: url('assets/cloud-fluffy.svg') center/contain no-repeat; opacity: .35; }
.product-nubes .nube.p1 { width: 360px; height: 170px; top: -40px; left: -80px; animation: nube-drift 42s ease-in-out infinite; }
.product-nubes .nube.p2 { width: 240px; height: 120px; top: 30%; right: -60px; opacity: .25; animation: nube-float 12s ease-in-out infinite; }
.product-nubes .nube.p3 { width: 300px; height: 140px; bottom: 0; left: 35%; opacity: .2; animation: nube-drift 36s ease-in-out infinite reverse; }
.product-detail > * { position: relative; z-index: 1; }
/* Newsletter section — tiny clouds behind */
.newsletter { position: relative; overflow: hidden; }
.newsletter::before,
.newsletter::after {
content: '';
position: absolute;
background: url('assets/cloud-small.svg') center/contain no-repeat;
pointer-events: none;
opacity: .35;
}
.newsletter::before { width: 180px; height: 90px; top: 20px; left: 6%; animation: nube-float 10s ease-in-out infinite; }
.newsletter::after { width: 160px; height: 80px; bottom: 20px; right: 8%; animation: nube-float 13s ease-in-out infinite reverse; }
.newsletter > * { position: relative; z-index: 1; }
/* Editorial manifesto — cloud halo behind highlight */
.editorial { position: relative; }
.editorial::before {
content: '';
position: absolute;
top: -30px; right: 0;
width: 200px; height: 100px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
opacity: .25;
pointer-events: none;
animation: nube-float 14s ease-in-out infinite;
z-index: 0;
}
.editorial > * { position: relative; z-index: 1; }
/* ==========================================================================
BRAND WIPE — the logo "eats" the page on click before navigating home
========================================================================== */
.brand-wipe {
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
overflow: hidden;
}
.brand-wipe-bg {
position: absolute;
inset: 0;
background: #000000;
clip-path: circle(0 at var(--cx, 60px) var(--cy, 32px));
-webkit-clip-path: circle(0 at var(--cx, 60px) var(--cy, 32px));
transition: clip-path .75s cubic-bezier(.7, 0, .2, 1),
-webkit-clip-path .75s cubic-bezier(.7, 0, .2, 1);
}
.brand-wipe.is-active .brand-wipe-bg {
clip-path: circle(160% at var(--cx, 60px) var(--cy, 32px));
-webkit-clip-path: circle(160% at var(--cx, 60px) var(--cy, 32px));
}
.brand-wipe-logo {
position: absolute;
left: 50%; top: 50%;
width: clamp(160px, 28vw, 320px);
height: auto;
transform: translate(-50%, -50%) scale(.35);
opacity: 0;
filter: brightness(0) invert(1);
transition: transform .7s cubic-bezier(.2, .8, .2, 1) .18s,
opacity .55s ease .22s;
}
.brand-wipe.is-active .brand-wipe-logo {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.brand-wipe { display: none; }
}
/* Arriving state — logo gently settles into header position, bg fades out */
.brand-wipe-arriving .brand-wipe-bg {
clip-path: none;
-webkit-clip-path: none;
background: #000000;
opacity: 1;
transition: none;
}
.brand-wipe-arriving .brand-wipe-logo {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
transition: none;
}
.brand-wipe-arriving.is-leaving .brand-wipe-bg {
opacity: 0;
transition: opacity .55s ease .45s;
}
.brand-wipe-arriving.is-leaving .brand-wipe-logo {
transform:
translate(-50%, -50%)
translate(var(--target-tx, 0), var(--target-ty, 0))
scale(var(--target-scale, .3));
filter: brightness(1) invert(0);
transition:
transform 1.05s cubic-bezier(.3, .7, .2, 1),
filter .45s ease .45s;
}
/* While the logo is settling, keep the header solid so the destination is visible.
transition:none is critical — without it the header glides in for 500ms and the
logo's target position gets computed mid-transition (lands slightly too high). */
body.brand-wipe-arriving-body .site-header {
opacity: 1 !important;
transform: none !important;
pointer-events: auto !important;
transition: none !important;
}
body.brand-wipe-arriving-body .site-header .brand,
body.brand-wipe-arriving-body .site-header .brand img {
transition: none !important;
transform: none !important;
}
/* Hide the real header logo during arrival so there's only one logo visible.
The overlay logo takes its place; when the overlay is removed, the real logo
re-appears at the same spot for a seamless hand-off. */
body.brand-wipe-arriving-body .site-header .brand img {
visibility: hidden !important;
}
/* ==========================================================================
PAGE WIPE — universal transition between internal pages
Coherent with the brand wipe: same black circle expanding from click,
with a small cloud as the shared Nubesofá motif.
========================================================================== */
.page-wipe {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
overflow: hidden;
}
.page-wipe-bg {
position: absolute;
inset: 0;
background: #000000;
clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%));
-webkit-clip-path: circle(0 at var(--cx, 50%) var(--cy, 50%));
transition: clip-path .6s cubic-bezier(.7, 0, .2, 1),
-webkit-clip-path .6s cubic-bezier(.7, 0, .2, 1);
}
.page-wipe.is-active .page-wipe-bg {
clip-path: circle(160% at var(--cx, 50%) var(--cy, 50%));
-webkit-clip-path: circle(160% at var(--cx, 50%) var(--cy, 50%));
}
/* Arriving state — overlay starts fully covered and contracts back */
.page-wipe-arriving .page-wipe-bg {
clip-path: circle(160% at 50% 50%);
-webkit-clip-path: circle(160% at 50% 50%);
transition: none;
}
.page-wipe-arriving.is-leaving .page-wipe-bg {
clip-path: circle(0 at 50% 50%);
-webkit-clip-path: circle(0 at 50% 50%);
transition: clip-path .65s cubic-bezier(.6, 0, .2, 1) .08s,
-webkit-clip-path .65s cubic-bezier(.6, 0, .2, 1) .08s;
}
@media (prefers-reduced-motion: reduce) {
.page-wipe { display: none; }
}
/* ==========================================================================
INTRO ANIMATION — plays once per session when entering the site
========================================================================== */
#intro-overlay {
position: fixed;
inset: 0;
z-index: 10000;
background: linear-gradient(180deg, #E8ECF0 0%, #ffffff 60%, #ffffff 100%);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#intro-overlay.hidden { display: none !important; }
#intro-overlay.leaving {
animation: intro-leave .75s cubic-bezier(.7, 0, .25, 1) forwards;
}
@keyframes intro-leave {
0% { clip-path: inset(0 0 0 0); opacity: 1; }
100% { clip-path: inset(100% 0 0 0); opacity: 1; }
}
html.intro-active, html.intro-active body { overflow: hidden !important; }
.intro-logo {
width: clamp(260px, 42vw, 440px);
height: auto;
overflow: visible;
filter: drop-shadow(0 20px 40px rgba(10, 20, 35, .08));
}
.intro-logo .intro-letters,
.intro-logo .intro-cloud,
.intro-logo .intro-letter { overflow: visible; }
.intro-cloud {
fill: #000000;
fill-opacity: 0;
stroke: #000000;
stroke-width: 1.4;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 700;
stroke-dashoffset: 700;
animation:
intro-draw 1.5s cubic-bezier(.55, 0, .2, 1) forwards .3s,
intro-fill .45s ease forwards 1.75s;
}
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
@keyframes intro-fill { to { fill-opacity: 1; } }
.intro-letter {
fill: #000000;
opacity: 0;
transform: translateY(6px) scale(.92);
transform-origin: center;
transform-box: fill-box;
animation: intro-letter-in .52s cubic-bezier(.2, .85, .25, 1) forwards;
}
@keyframes intro-letter-in {
0% { opacity: 0; transform: translateY(10px) scale(.85); }
60% { opacity: 1; transform: translateY(-2px) scale(1.03); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.intro-letter:nth-child(1) { animation-delay: 1.05s; }
.intro-letter:nth-child(2) { animation-delay: 1.13s; }
.intro-letter:nth-child(3) { animation-delay: 1.21s; }
.intro-letter:nth-child(4) { animation-delay: 1.29s; }
.intro-letter:nth-child(5) { animation-delay: 1.37s; }
.intro-letter:nth-child(6) { animation-delay: 1.45s; }
.intro-letter:nth-child(7) { animation-delay: 1.53s; }
.intro-letter:nth-child(8) { animation-delay: 1.61s; }
/* --- Light effects --- */
.intro-bloom {
position: absolute;
left: 50%; top: 50%;
width: 60vmax; height: 60vmax;
transform: translate(-50%, -50%) scale(.1);
background: radial-gradient(
circle at center,
rgba(255, 255, 255, 0.95) 0%,
rgba(235, 240, 248, 0.75) 22%,
rgba(186, 205, 225, 0.35) 45%,
rgba(186, 205, 225, 0) 72%
);
filter: blur(10px);
opacity: 0;
pointer-events: none;
animation: intro-bloom 2.8s cubic-bezier(.3, .8, .2, 1) forwards .4s;
}
@keyframes intro-bloom {
0% { transform: translate(-50%, -50%) scale(.15); opacity: 0; }
40% { transform: translate(-50%, -50%) scale(.75); opacity: 1; }
100% { transform: translate(-50%, -50%) scale(1.15); opacity: .85; }
}
/* Divine rays behind the logo */
.intro-rays {
position: absolute;
left: 50%; top: 50%;
width: 1px; height: 1px;
pointer-events: none;
opacity: 0;
animation: intro-rays-appear 1.8s ease-out forwards 1.8s;
}
@keyframes intro-rays-appear {
0% { opacity: 0; transform: rotate(0deg); }
50% { opacity: 1; }
100% { opacity: .35; transform: rotate(14deg); }
}
.intro-rays span {
position: absolute;
left: 50%; top: 50%;
width: 2px;
height: 50vmin;
background: linear-gradient(
to top,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, .8) 45%,
rgba(186, 205, 225, .3) 100%
);
transform-origin: 0 0;
mix-blend-mode: screen;
filter: blur(1px);
}
.intro-rays span:nth-child(1) { transform: rotate( 0deg) translateX(-1px); }
.intro-rays span:nth-child(2) { transform: rotate( 45deg) translateX(-1px); }
.intro-rays span:nth-child(3) { transform: rotate( 90deg) translateX(-1px); }
.intro-rays span:nth-child(4) { transform: rotate(135deg) translateX(-1px); }
.intro-rays span:nth-child(5) { transform: rotate(180deg) translateX(-1px); }
.intro-rays span:nth-child(6) { transform: rotate(225deg) translateX(-1px); }
.intro-rays span:nth-child(7) { transform: rotate(270deg) translateX(-1px); }
.intro-rays span:nth-child(8) { transform: rotate(315deg) translateX(-1px); }
/* Sparkles */
.intro-sparkles {
position: absolute;
left: 50%; top: 50%;
width: clamp(320px, 50vw, 540px);
height: clamp(140px, 24vw, 240px);
transform: translate(-50%, -50%);
pointer-events: none;
}
.intro-sparkles span {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 6px 1px rgba(255,255,255,.9),
0 0 14px 3px rgba(186, 205, 225, .7);
opacity: 0;
transform: scale(0);
animation: sparkle 1.4s cubic-bezier(.2, .8, .2, 1) forwards;
}
.intro-sparkles .s1 { top: 12%; left: 10%; animation-delay: 1.25s; }
.intro-sparkles .s2 { top: 68%; left: 82%; animation-delay: 1.35s; width: 4px; height: 4px; }
.intro-sparkles .s3 { top: 22%; left: 88%; animation-delay: 1.45s; width: 8px; height: 8px; }
.intro-sparkles .s4 { top: 78%; left: 6%; animation-delay: 1.55s; width: 5px; height: 5px; }
.intro-sparkles .s5 { top: 4%; left: 52%; animation-delay: 1.65s; }
.intro-sparkles .s6 { top: 90%; left: 44%; animation-delay: 1.75s; width: 4px; height: 4px; }
.intro-sparkles .s7 { top: 35%; left: -2%; animation-delay: 1.85s; width: 7px; height: 7px; }
.intro-sparkles .s8 { top: 50%; left: 96%; animation-delay: 1.95s; width: 5px; height: 5px; }
@keyframes sparkle {
0% { transform: scale(0); opacity: 0; }
30% { transform: scale(1.4); opacity: 1; }
70% { transform: scale(1); opacity: .9; }
100% { transform: scale(.3); opacity: 0; }
}
/* Shimmer sweep across the logo */
.intro-shimmer {
position: absolute;
left: 50%; top: 50%;
width: clamp(260px, 42vw, 440px);
height: clamp(115px, 19vw, 195px);
transform: translate(-50%, -50%);
pointer-events: none;
overflow: hidden;
mix-blend-mode: screen;
opacity: 0;
animation: shimmer-show 0.1s ease forwards 2.05s;
}
.intro-shimmer::before {
content: '';
position: absolute;
inset: -50% -150%;
background: linear-gradient(
115deg,
transparent 40%,
rgba(255, 255, 255, 0) 44%,
rgba(255, 255, 255, .85) 50%,
rgba(255, 255, 255, 0) 56%,
transparent 60%
);
transform: translateX(-120%);
animation: shimmer-sweep 1.1s cubic-bezier(.5, 0, .3, 1) forwards 2.1s;
}
@keyframes shimmer-show { to { opacity: 1; } }
@keyframes shimmer-sweep {
to { transform: translateX(120%); }
}
/* Enhance logo with subtle inner glow as letters appear */
.intro-logo {
filter:
drop-shadow(0 20px 40px rgba(10, 20, 35, .08))
drop-shadow(0 0 0 rgba(255, 255, 255, 0));
animation: logo-glow 1.4s ease-out forwards 1.4s;
}
@keyframes logo-glow {
to {
filter:
drop-shadow(0 20px 40px rgba(10, 20, 35, .10))
drop-shadow(0 0 22px rgba(255, 255, 255, .8));
}
}
@media (prefers-reduced-motion: reduce) {
#intro-overlay { display: none; }
}
/* ==========================================================================
BRAND WHOOSH — cartoon "yank to top" when clicking the logo on home
========================================================================== */
.brand-whoosh {
position: fixed;
inset: 0;
z-index: 90;
pointer-events: none;
overflow: hidden;
}
.whoosh-line {
position: absolute;
bottom: -60%;
width: 3px;
height: 55%;
background: linear-gradient(
to top,
rgba(74,98,117,0) 0%,
rgba(74,98,117,.75) 35%,
rgba(10,10,10,1) 65%,
rgba(10,10,10,.8) 85%,
rgba(10,10,10,0) 100%
);
border-radius: 3px;
animation-name: whoosh-rise;
animation-timing-function: cubic-bezier(.35, 0, .15, 1);
animation-fill-mode: forwards;
opacity: 0;
filter: drop-shadow(0 0 6px rgba(74,98,117,.5));
}
@keyframes whoosh-rise {
0% { transform: translateY(0) scaleY(.4); opacity: 0; }
10% { opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(-260vh) scaleY(1.8); opacity: 0; }
}
.whoosh-puff {
position: absolute;
background: url('assets/cloud-small.svg') center/contain no-repeat;
pointer-events: none;
opacity: 0;
animation-name: whoosh-puff;
animation-timing-function: cubic-bezier(.2, .8, .2, 1);
animation-fill-mode: forwards;
animation-duration: 780ms;
}
.whoosh-puff.p1 { left: 14%; top: 22%; width: 150px; height: 78px; animation-delay: 340ms; }
.whoosh-puff.p2 { left: 42%; top: 10%; width: 190px; height: 95px; animation-delay: 400ms; }
.whoosh-puff.p3 { left: 66%; top: 18%; width: 160px; height: 80px; animation-delay: 450ms; }
.whoosh-puff.p4 { left: 80%; top: 30%; width: 130px; height: 68px; animation-delay: 520ms; }
@keyframes whoosh-puff {
0% { transform: translate(-50%, 80%) scale(.15); opacity: 0; }
25% { opacity: .9; }
60% { opacity: .7; }
100% { transform: translate(-50%, -40%) scale(1.6); opacity: 0; }
}
/* Landing squash-and-stretch when the page hits the top */
body.brand-landing {
animation: brand-landing .42s cubic-bezier(.2, .9, .25, 1);
}
@keyframes brand-landing {
0% { transform: translateY(-10px) scaleY(.985); }
45% { transform: translateY(6px) scaleY(1.01); }
75% { transform: translateY(-2px) scaleY(.998); }
100% { transform: translateY(0) scaleY(1); }
}
/* ==========================================================================
BUTTON SYSTEM — unified Nubesofá pill buttons
========================================================================== */
.cta-primary,
.pc-add-cart,
.summary-checkout,
.newsletter button[type="submit"],
.newsletter input[type="submit"],
.wp-block-jetpack-subscriptions button[type="submit"],
.wp-block-jetpack-subscriptions__button,
.jetpack_subscription_widget input[type="submit"] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
text-align: center;
color: var(--kh-white);
background: var(--nube-cta);
border: 0;
border-radius: 999px;
padding: 16px 34px;
overflow: hidden;
isolation: isolate;
text-decoration: none;
box-shadow:
0 1px 2px rgba(0,0,0,.10),
0 6px 16px rgba(10,10,10,.18),
0 14px 32px rgba(10,10,10,.10),
inset 0 1px 0 rgba(255,255,255,.10);
transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s cubic-bezier(.2,.8,.2,1),
color .3s ease;
}
.cta-primary::before,
.pc-add-cart::before,
.summary-checkout::before,
.newsletter button[type="submit"]::before,
.newsletter input[type="submit"]::before,
.wp-block-jetpack-subscriptions button[type="submit"]::before,
.wp-block-jetpack-subscriptions__button::before,
.jetpack_subscription_widget input[type="submit"]::before {
content: '';
position: absolute;
inset: 0;
background: var(--nube-cta-hover);
transform: translateY(101%);
transition: transform .45s cubic-bezier(.2,.8,.2,1);
z-index: -1;
border-radius: inherit;
}
.cta-primary:hover,
.pc-add-cart:hover,
.summary-checkout:hover,
.newsletter button[type="submit"]:hover,
.newsletter input[type="submit"]:hover,
.wp-block-jetpack-subscriptions button[type="submit"]:hover,
.wp-block-jetpack-subscriptions__button:hover,
.jetpack_subscription_widget input[type="submit"]:hover {
transform: translateY(-3px);
color: var(--kh-white);
opacity: 1;
box-shadow:
0 2px 4px rgba(0,0,0,.08),
0 14px 28px rgba(74,98,117,.35),
0 26px 56px rgba(74,98,117,.22),
inset 0 1px 0 rgba(255,255,255,.14);
}
.cta-primary:hover::before,
.pc-add-cart:hover::before,
.summary-checkout:hover::before,
.newsletter button[type="submit"]:hover::before,
.newsletter input[type="submit"]:hover::before,
.wp-block-jetpack-subscriptions button[type="submit"]:hover::before,
.wp-block-jetpack-subscriptions__button:hover::before,
.jetpack_subscription_widget input[type="submit"]:hover::before {
transform: translateY(0);
}
.cta-primary:active,
.pc-add-cart:active,
.summary-checkout:active,
.newsletter button[type="submit"]:active,
.newsletter input[type="submit"]:active,
.wp-block-jetpack-subscriptions button[type="submit"]:active,
.wp-block-jetpack-subscriptions__button:active,
.jetpack_subscription_widget input[type="submit"]:active {
transform: translateY(-1px);
box-shadow:
0 1px 2px rgba(0,0,0,.10),
0 4px 10px rgba(10,10,10,.22);
}
/* Newsletter — rounded form layout to match new button */
.newsletter form {
display: flex;
gap: 12px;
max-width: 560px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
border-bottom: 0;
align-items: center;
}
.newsletter input[type="email"] {
flex: 1 1 240px;
padding: 15px 22px;
border: 1.5px solid var(--nube-border);
border-radius: 999px;
font: inherit;
background: rgba(255,255,255,.7);
outline: none;
transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.newsletter input[type="email"]:focus {
border-color: var(--kh-accent);
background: #fff;
box-shadow: 0 0 0 4px rgba(74,98,117,.12);
}
.newsletter button[type="submit"],
.newsletter input[type="submit"] {
padding: 15px 32px;
}
/* ---- Light pill (on dark imagery) — slide-cta ---- */
.slide-cta {
position: relative;
display: inline-flex;
align-items: center; justify-content: center;
gap: 10px;
font-family: var(--font-sans);
font-size: 13px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
color: var(--kh-ink);
background: rgba(255,255,255,.96);
border: 0;
border-radius: 999px;
padding: 15px 32px;
overflow: hidden;
isolation: isolate;
text-decoration: none;
box-shadow:
0 1px 2px rgba(0,0,0,.08),
0 6px 18px rgba(0,0,0,.18),
0 14px 36px rgba(0,0,0,.14);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s cubic-bezier(.2,.8,.2,1),
color .3s ease;
}
.slide-cta::before {
content: '';
position: absolute; inset: 0;
background: var(--nube-cta-hover);
transform: translateY(101%);
transition: transform .45s cubic-bezier(.2,.8,.2,1);
z-index: -1;
border-radius: inherit;
}
.slide-cta:hover {
transform: translateY(-3px);
color: var(--kh-white);
opacity: 1;
box-shadow:
0 2px 4px rgba(0,0,0,.10),
0 14px 30px rgba(0,0,0,.32),
0 26px 56px rgba(0,0,0,.22);
}
.slide-cta:hover::before { transform: translateY(0); }
/* ---- Ghost pill (outline) — secondary CTAs, continue, clear-filters ---- */
.cta-secondary,
.summary-continue,
.clear-filters {
position: relative;
display: inline-flex;
align-items: center; justify-content: center;
gap: 8px;
font-family: var(--font-sans);
font-size: 12.5px; font-weight: 500;
letter-spacing: .14em; text-transform: uppercase;
color: var(--kh-ink);
background: transparent;
border: 1.5px solid var(--kh-ink);
border-radius: 999px;
padding: 14px 28px;
overflow: hidden;
isolation: isolate;
text-decoration: none;
transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s cubic-bezier(.2,.8,.2,1),
color .3s ease,
border-color .3s ease;
}
.cta-secondary::before,
.summary-continue::before,
.clear-filters::before {
content: '';
position: absolute; inset: 0;
background: var(--kh-ink);
transform: translateY(101%);
transition: transform .45s cubic-bezier(.2,.8,.2,1);
z-index: -1;
border-radius: inherit;
}
.cta-secondary:hover,
.summary-continue:hover,
.clear-filters:hover {
color: var(--kh-white);
opacity: 1;
transform: translateY(-2px);
border-color: var(--kh-ink);
box-shadow: 0 12px 26px rgba(10,10,10,.18);
}
.cta-secondary:hover::before,
.summary-continue:hover::before,
.clear-filters:hover::before { transform: translateY(0); }
.clear-filters { padding: 10px 20px; font-size: 11.5px; }
/* ---- Circular icon pill — slider nav, filter search ---- */
.slider-nav,
.filter-search button {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
border-radius: 999px;
background: rgba(255,255,255,.96);
color: var(--kh-ink);
border: 0;
box-shadow:
0 1px 2px rgba(0,0,0,.08),
0 6px 16px rgba(0,0,0,.14);
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
background .25s ease,
color .25s ease,
box-shadow .3s cubic-bezier(.2,.8,.2,1);
}
.slider-nav:hover,
.filter-search button:hover {
background: var(--kh-ink);
color: var(--kh-white);
opacity: 1;
box-shadow:
0 2px 4px rgba(0,0,0,.10),
0 12px 24px rgba(10,10,10,.24);
}
.slider-nav {
position: absolute; top: 50%;
width: 48px; height: 48px;
font-size: 22px; line-height: 1;
z-index: 5;
}
.slider-nav:hover { transform: translateY(-50%) translateY(-2px) scale(1.04); }
@media (max-width: 700px) {
.slider-nav { width: 40px; height: 40px; }
}
.filter-search button {
width: 40px; height: 40px; font-size: 18px;
}
/* ---- Qty stepper + remove buttons (cart) — subtle round ---- */
.qty-btn,
.cart-item-remove {
width: 32px; height: 32px;
border-radius: 999px;
background: transparent;
border: 1px solid #e4e7ec;
color: var(--kh-ink);
display: inline-flex; align-items: center; justify-content: center;
font-size: 16px; line-height: 1;
transition: all .25s cubic-bezier(.2,.8,.2,1);
}
.qty-btn:hover,
.cart-item-remove:hover {
background: var(--kh-ink); color: var(--kh-white);
border-color: var(--kh-ink);
opacity: 1;
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(10,10,10,.18);
}
/* ==========================================================================
COOKIES — floating cloud button + modal + dedicated page
========================================================================== */
/* ---- Floating FAB (bottom right) ---- */
.cookies-fab {
position: fixed;
right: 22px; bottom: 22px;
z-index: 80;
display: inline-flex; align-items: center; gap: 10px;
padding: 10px 18px 10px 14px;
border: 0; border-radius: 999px;
background: #ffffff;
color: var(--nube-heading);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
box-shadow:
0 1px 2px rgba(10,20,35,.06),
0 8px 22px rgba(10,20,35,.10),
0 20px 48px rgba(10,20,35,.08);
cursor: pointer;
overflow: visible;
transition:
transform .35s cubic-bezier(.2,.8,.2,1),
box-shadow .35s cubic-bezier(.2,.8,.2,1);
animation: cookies-fab-float 6.5s ease-in-out infinite;
}
@keyframes cookies-fab-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.cookies-fab:hover {
transform: translateY(-4px) scale(1.03);
box-shadow:
0 2px 4px rgba(10,20,35,.08),
0 14px 32px rgba(74,98,117,.22),
0 30px 60px rgba(74,98,117,.14);
animation-play-state: paused;
}
.cookies-fab-cloud {
width: 34px; height: 22px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
filter: drop-shadow(0 2px 4px rgba(10,20,35,.12));
position: relative;
}
/* 3 crumbs (chocolate chips on the cloud) */
.cookies-fab-crumbs {
position: absolute;
left: 14px; top: 14px;
width: 34px; height: 22px;
pointer-events: none;
}
.cookies-fab-crumbs i {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: #2F3F4B;
}
.cookies-fab-crumbs i:nth-child(1) { top: 32%; left: 20%; }
.cookies-fab-crumbs i:nth-child(2) { top: 54%; left: 52%; width: 5px; height: 5px; }
.cookies-fab-crumbs i:nth-child(3) { top: 28%; left: 70%; width: 3px; height: 3px; }
.cookies-fab-label { display: inline-block; }
@media (max-width: 540px) {
.cookies-fab { padding: 10px; }
.cookies-fab-label { display: none; }
.cookies-fab-crumbs { left: 10px; top: 10px; }
}
/* ---- Scroll to top FAB ---- */
.scroll-top-fab {
position: fixed;
right: 22px;
bottom: 86px; /* encima del cookies-fab */
z-index: 80;
display: inline-flex; align-items: center; justify-content: center;
gap: 0;
width: 52px; height: 52px;
border: 0; border-radius: 999px;
background: #ffffff;
color: var(--nube-heading);
box-shadow:
0 1px 2px rgba(10,20,35,.06),
0 8px 22px rgba(10,20,35,.10),
0 20px 48px rgba(10,20,35,.08);
cursor: pointer;
overflow: visible;
opacity: 0;
pointer-events: none;
transform: translateY(16px) scale(.85);
transition:
opacity .3s cubic-bezier(.2,.8,.2,1),
transform .3s cubic-bezier(.2,.8,.2,1),
box-shadow .3s cubic-bezier(.2,.8,.2,1);
}
.scroll-top-fab.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0) scale(1);
animation: scroll-top-float 5s ease-in-out infinite;
}
@keyframes scroll-top-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-5px); }
}
.scroll-top-fab:hover {
transform: translateY(-4px) scale(1.06) !important;
box-shadow:
0 2px 4px rgba(10,20,35,.08),
0 14px 32px rgba(74,98,117,.22),
0 30px 60px rgba(74,98,117,.14);
animation-play-state: paused;
}
.scroll-top-cloud {
position: absolute;
width: 36px; height: 24px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
filter: drop-shadow(0 1px 3px rgba(10,20,35,.10));
opacity: .55;
pointer-events: none;
}
.scroll-top-arrow {
position: relative; z-index: 1;
color: var(--nube-heading);
transition: transform .25s cubic-bezier(.2,.8,.2,1);
}
.scroll-top-fab:hover .scroll-top-arrow {
transform: translateY(-2px);
}
@media (max-width: 540px) {
.scroll-top-fab { right: 22px; bottom: 80px; width: 44px; height: 44px; }
}
/* ---- Modal (cloud-burst — fluid unified animation) ---- */
.cookies-modal {
position: fixed; inset: 0;
z-index: 95;
visibility: hidden;
pointer-events: none;
/* Unified curves for all modal animations */
--nube-ease-out: cubic-bezier(.22, .8, .26, 1);
--nube-ease-in: cubic-bezier(.55, .05, .6, .15);
--nube-ease-spring: cubic-bezier(.2, .9, .3, 1.05);
}
.cookies-modal.is-open,
.cookies-modal.is-closing { visibility: visible; }
.cookies-modal.is-open { pointer-events: auto; }
.cookies-modal-scrim {
position: absolute; inset: 0;
background: rgba(47, 63, 75, 0.45);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
opacity: 0;
transition: opacity .5s var(--nube-ease-out);
will-change: opacity;
}
.cookies-modal.is-open .cookies-modal-scrim { opacity: 1; }
.cookies-modal.is-closing .cookies-modal-scrim {
opacity: 0;
transition: opacity .35s var(--nube-ease-out);
}
/* Cloud puffs bursting from the FAB */
.cookies-modal-puffs {
position: absolute;
right: 44px; bottom: 44px;
width: 1px; height: 1px;
pointer-events: none;
}
.cookies-modal-puffs span {
position: absolute;
left: 0; top: 0;
width: 44px; height: 28px;
margin: -14px 0 0 -22px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
opacity: 0;
transform: translate3d(0, 0, 0) scale(.1);
will-change: transform, opacity;
}
.cookies-modal.is-open .cookies-modal-puffs span {
animation: puff-burst .85s var(--nube-ease-out) forwards;
}
@keyframes puff-burst {
0% { transform: translate3d(0, 0, 0) scale(.1); opacity: 0; }
18% { opacity: 1; }
100% {
transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(var(--ps, 1.4));
opacity: 0;
}
}
/* Delays tightened: 0 → 180ms (was 0 → 390ms) */
.cookies-modal-puffs span:nth-child(1) { --px:-160px; --py:-210px; --ps:1.9; animation-delay: 0ms; }
.cookies-modal-puffs span:nth-child(2) { --px: 150px; --py:-230px; --ps:2.0; animation-delay: 25ms; width:34px; height:22px; }
.cookies-modal-puffs span:nth-child(3) { --px:-210px; --py: -90px; --ps:1.4; animation-delay: 55ms; width:38px; height:24px; }
.cookies-modal-puffs span:nth-child(4) { --px: 200px; --py: -70px; --ps:1.6; animation-delay: 80ms; width:36px; height:24px; }
.cookies-modal-puffs span:nth-child(5) { --px:-110px; --py:-310px; --ps:2.2; animation-delay:110ms; width:50px; height:32px; }
.cookies-modal-puffs span:nth-child(6) { --px: 210px; --py:-320px; --ps:1.7; animation-delay:135ms; width:42px; height:26px; }
.cookies-modal-puffs span:nth-child(7) { --px:-250px; --py:-170px; --ps:1.2; animation-delay:160ms; width:30px; height:20px; }
.cookies-modal-puffs span:nth-child(8) { --px: 250px; --py:-190px; --ps:1.8; animation-delay:180ms; width:40px; height:26px; }
/* Closing: puffs implode with same unified easing */
.cookies-modal.is-closing .cookies-modal-puffs span {
animation: puff-implode .4s var(--nube-ease-out) forwards;
}
@keyframes puff-implode {
0% { transform: translate3d(var(--px, 0), var(--py, 0), 0) scale(var(--ps, 1.4)); opacity: .4; }
100% { transform: translate3d(0, 0, 0) scale(.1); opacity: 0; }
}
/* Big cumulus — forms behind the card */
.cookies-modal-bigcloud {
position: absolute;
right: 22px;
bottom: 72px;
width: min(600px, calc(100vw - 44px));
height: 360px;
background: url('assets/cloud-fluffy.svg') center center/contain no-repeat;
transform-origin: 82% 90%;
transform: translate3d(0, 0, 0) scale(.12);
opacity: 0;
pointer-events: none;
filter: drop-shadow(0 24px 48px rgba(47,63,75,.28));
will-change: transform, opacity;
}
.cookies-modal.is-open .cookies-modal-bigcloud {
animation: bigcloud-bloom .85s var(--nube-ease-out) forwards 40ms;
}
@keyframes bigcloud-bloom {
0% { transform: translate3d(0, 0, 0) scale(.12); opacity: 0; }
40% { opacity: .95; }
100% { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
}
.cookies-modal.is-closing .cookies-modal-bigcloud {
animation: bigcloud-fold .4s var(--nube-ease-out) forwards;
}
@keyframes bigcloud-fold {
0% { transform: translate3d(0, 0, 0) scale(1); opacity: .92; }
100% { transform: translate3d(0, 0, 0) scale(.12); opacity: 0; }
}
/* Card inflates from FAB — blob to rectangle, then content cascades */
.cookies-modal-card {
position: absolute;
right: 22px; bottom: 90px;
width: min(440px, calc(100% - 44px));
max-height: calc(100vh - 130px);
overflow-y: auto;
background: #ffffff;
border-radius: 24px;
padding: 28px 26px 22px;
box-shadow:
0 2px 4px rgba(10,20,35,.08),
0 20px 50px rgba(10,20,35,.22),
0 48px 96px rgba(10,20,35,.18);
transform-origin: 95% 100%; /* anchor at FAB side */
transform: translate3d(20px, 50px, 0) scale(.35);
opacity: 0;
border-radius: 70% 70% 40% 40% / 80% 80% 30% 30%; /* cloud-blob shape */
will-change: transform, opacity, border-radius;
}
.cookies-modal.is-open .cookies-modal-card {
animation: card-inflate .85s cubic-bezier(.22, .9, .28, 1) forwards 140ms;
}
@keyframes card-inflate {
0% {
transform: translate3d(20px, 50px, 0) scale(.35);
opacity: 0;
border-radius: 70% 70% 40% 40% / 80% 80% 30% 30%;
}
30% {
opacity: 1;
}
55% {
transform: translate3d(-2px, -6px, 0) scale(1.03);
border-radius: 42% 42% 28px 28px / 50% 50% 28px 28px;
}
78% {
transform: translate3d(0, 1px, 0) scale(.995);
border-radius: 30px;
}
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
border-radius: 24px;
}
}
.cookies-modal.is-closing .cookies-modal-card {
animation: card-deflate .42s cubic-bezier(.5, 0, .3, 1) forwards;
}
@keyframes card-deflate {
0% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
border-radius: 24px;
}
45% {
border-radius: 50% 50% 30% 30% / 60% 60% 25% 25%;
}
100% {
transform: translate3d(20px, 40px, 0) scale(.4);
opacity: 0;
border-radius: 70% 70% 40% 40% / 80% 80% 30% 30%;
}
}
/* Inner content cascade — enters after card settles */
.cookies-modal-head,
.cookies-modal-prefs,
.cookies-modal-actions,
.cookies-modal-foot {
opacity: 0;
transform: translate3d(0, 12px, 0);
will-change: transform, opacity;
}
.cookies-modal.is-open .cookies-modal-head { animation: card-child-in .55s var(--nube-ease-out) forwards 520ms; }
.cookies-modal.is-open .cookies-modal-prefs { animation: card-child-in .55s var(--nube-ease-out) forwards 600ms; }
.cookies-modal.is-open .cookies-modal-actions { animation: card-child-in .55s var(--nube-ease-out) forwards 680ms; }
.cookies-modal.is-open .cookies-modal-foot { animation: card-child-in .55s var(--nube-ease-out) forwards 760ms; }
@keyframes card-child-in {
0% { opacity: 0; transform: translate3d(0, 12px, 0); }
100% { opacity: 1; transform: translate3d(0, 0, 0); }
}
/* Close: content fades quickly while card deflates */
.cookies-modal.is-closing .cookies-modal-head,
.cookies-modal.is-closing .cookies-modal-prefs,
.cookies-modal.is-closing .cookies-modal-actions,
.cookies-modal.is-closing .cookies-modal-foot {
animation: card-child-out .22s var(--nube-ease-out) forwards;
}
@keyframes card-child-out {
to { opacity: 0; transform: translate3d(0, 6px, 0); }
}
/* Modal bumps: delay so they appear as the card forms */
.cookies-modal-bumps { opacity: 0; transform: translate3d(0, 6px, 0); }
.cookies-modal.is-open .cookies-modal-bumps {
animation: card-child-in .45s var(--nube-ease-out) forwards 450ms;
}
.cookies-modal.is-closing .cookies-modal-bumps {
animation: card-child-out .2s var(--nube-ease-out) forwards;
}
.cookies-modal-close { opacity: 0; }
.cookies-modal.is-open .cookies-modal-close {
animation: card-child-in .4s var(--nube-ease-out) forwards 620ms;
}
.cookies-modal.is-closing .cookies-modal-close {
animation: card-child-out .18s var(--nube-ease-out) forwards;
}
/* Cloud bumps on top of the modal — subtle cumulus feel */
.cookies-modal-bumps {
position: absolute;
top: -22px; left: 24px; right: 64px;
height: 22px; display: flex; gap: 8px;
pointer-events: none;
}
.cookies-modal-bumps span {
flex: 1;
background: #ffffff;
border-radius: 50% 50% 20% 20% / 70% 70% 30% 30%;
box-shadow: 0 -2px 6px rgba(10,20,35,.04);
}
.cookies-modal-bumps span:nth-child(1) { transform: scale(.9) translateY(2px); }
.cookies-modal-bumps span:nth-child(3) { transform: scale(1.05); }
.cookies-modal-bumps span:nth-child(4) { transform: scale(.85) translateY(3px); }
.cookies-modal-close {
position: absolute; top: 14px; right: 14px;
width: 32px; height: 32px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
color: var(--nube-icon);
border: 1px solid var(--nube-border);
transition: all .2s ease;
}
.cookies-modal-close:hover {
background: var(--nube-heading); color: #fff;
border-color: var(--nube-heading);
}
.cookies-modal-head { margin-bottom: 20px; }
.cookies-modal-head .section-eyebrow { margin-bottom: 10px; display: block; }
.cookies-modal-head h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(26px, 3.6vw, 34px);
line-height: 1.05;
letter-spacing: -0.02em;
margin-bottom: 10px;
color: var(--nube-heading);
}
.cookies-modal-head h2 em {
font-style: italic;
color: var(--kh-accent);
}
.cookies-modal-head p {
font-size: 13.5px; line-height: 1.55;
color: var(--kh-gray-600);
margin: 0;
}
/* Preference rows */
.cookies-modal-prefs {
display: flex; flex-direction: column;
gap: 2px;
border: 1px solid var(--nube-border);
border-radius: 14px;
overflow: hidden;
margin-bottom: 20px;
}
.cookies-row {
display: flex; align-items: center; justify-content: space-between;
gap: 14px;
padding: 14px 16px;
background: #fff;
cursor: pointer;
transition: background .2s ease;
}
.cookies-row + .cookies-row { border-top: 1px solid var(--nube-border); }
.cookies-row:hover { background: var(--nube-section-bg); }
.cookies-row-text { flex: 1; min-width: 0; }
.cookies-row-text strong {
display: block;
font-size: 13px; font-weight: 600;
color: var(--nube-heading);
letter-spacing: .02em;
margin-bottom: 2px;
}
.cookies-row-text span {
display: block;
font-size: 12px;
color: var(--kh-gray-600);
line-height: 1.4;
}
/* Toggle */
.cookies-toggle {
flex-shrink: 0;
width: 44px; height: 24px;
border-radius: 999px;
background: var(--nube-border-strong);
position: relative;
transition: background .3s cubic-bezier(.2,.8,.2,1);
}
.cookies-toggle i {
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 2px 6px rgba(10,20,35,.25);
transition: left .3s cubic-bezier(.2,.8,.2,1);
}
.cookies-toggle[data-on] {
background: var(--kh-accent);
}
.cookies-toggle[data-on] i { left: 23px; }
.cookies-row.is-forced { opacity: .85; cursor: not-allowed; }
.cookies-toggle[data-locked] { background: var(--nube-heading); }
.cookies-toggle[data-locked]::after {
content: '';
position: absolute;
left: 8px; top: 8px;
width: 8px; height: 8px;
border-radius: 50%;
background: #fff;
box-shadow: 0 0 0 2px var(--nube-heading) inset;
display: none;
}
/* Actions */
.cookies-modal-actions {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 14px;
}
@media (min-width: 520px) {
.cookies-modal-actions {
grid-template-columns: 1fr 1fr;
}
.cookies-modal-actions .cta-primary {
grid-column: 1 / -1;
}
}
.cookies-modal-actions .cta-primary,
.cookies-modal-actions .cta-secondary {
padding: 13px 18px;
font-size: 11.5px;
letter-spacing: .12em;
width: 100%;
}
.cookies-modal-foot {
text-align: center;
font-size: 12px;
color: var(--kh-gray-600);
}
.cookies-modal-card .cookies-modal-foot a { color: var(--nube-link); text-decoration: underline; }
/* ---- Cookies page ---- */
.cookies-page {
position: relative;
overflow: hidden;
padding: 0 0 120px;
}
.cookies-clouds {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.cookies-clouds .nube {
position: absolute;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
opacity: .3;
}
.cookies-clouds .nube.c1 { width: 320px; height: 150px; top: 40px; left: -60px; animation: nube-drift 38s ease-in-out infinite; }
.cookies-clouds .nube.c2 { width: 240px; height: 115px; top: 15%; right: -40px; opacity: .22; animation: nube-float 11s ease-in-out infinite; }
.cookies-clouds .nube.c3 { width: 280px; height: 130px; top: 55%; left: 15%; opacity: .18; animation: nube-drift 42s ease-in-out infinite reverse; }
.cookies-clouds .nube.c4 { width: 200px; height: 95px; bottom: 10%; right: 10%; opacity: .25; animation: nube-float 13s ease-in-out infinite; }
.cookies-page > * { position: relative; z-index: 1; }
.cookies-hero {
max-width: 880px;
margin: 0 auto;
padding: 120px var(--gutter) 80px;
text-align: center;
}
.cookies-hero .section-eyebrow {
display: inline-block;
margin-bottom: 28px;
}
.cookies-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(56px, 10vw, 128px);
line-height: .95;
letter-spacing: -0.04em;
color: var(--nube-heading);
margin-bottom: 32px;
}
.cookies-title em {
font-style: italic;
color: var(--kh-accent);
}
.cookies-lead {
font-size: clamp(17px, 1.8vw, 21px);
line-height: 1.55;
color: var(--kh-gray-600);
max-width: 56ch;
margin: 0 auto 40px;
}
.cookies-meta {
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kh-gray-600);
}
.cookies-meta-line {
width: 50px; height: 1px;
background: var(--nube-border-strong);
}
.cookies-body {
max-width: 960px;
display: flex;
flex-direction: column;
gap: 60px;
}
.cookies-block {
display: grid;
grid-template-columns: 80px 1fr;
gap: 24px;
padding: 32px 0;
border-top: 1px solid var(--nube-border);
}
.cookies-block:last-child { border-bottom: 1px solid var(--nube-border); }
@media (max-width: 720px) {
.cookies-block { grid-template-columns: 1fr; gap: 12px; }
}
.cookies-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 48px;
font-weight: 300;
color: var(--kh-accent);
line-height: 1;
}
.cookies-content h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(26px, 3vw, 36px);
letter-spacing: -0.02em;
margin-bottom: 16px;
color: var(--nube-heading);
}
.cookies-content p {
font-size: 16px;
line-height: 1.7;
color: var(--nube-text);
margin-bottom: 14px;
max-width: 65ch;
}
.cookies-content p:last-child { margin-bottom: 0; }
.cookies-content a { color: var(--nube-link); text-decoration: underline; }
.cookies-types {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 10px 0 4px;
}
@media (min-width: 640px) {
.cookies-types { grid-template-columns: 1fr 1fr; }
}
.cookies-card {
position: relative;
padding: 22px 20px 20px;
border: 1px solid var(--nube-border);
border-radius: 16px;
background: #fff;
transition: transform .3s cubic-bezier(.2,.8,.2,1),
border-color .3s ease,
box-shadow .3s ease;
}
.cookies-card:hover {
transform: translateY(-3px);
border-color: var(--kh-accent);
box-shadow:
0 8px 20px rgba(74,98,117,.10),
0 20px 40px rgba(74,98,117,.06);
}
.cookies-card-icon {
width: 42px; height: 28px;
margin-bottom: 14px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
filter: drop-shadow(0 2px 4px rgba(74,98,117,.25));
}
.cookies-card h3 {
font-family: var(--font-sans);
font-size: 15px; font-weight: 600;
letter-spacing: .02em;
margin-bottom: 8px;
color: var(--nube-heading);
}
.cookies-card p {
font-size: 13.5px;
line-height: 1.55;
color: var(--kh-gray-600);
margin-bottom: 14px;
}
.cookies-tag {
display: inline-block;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
padding: 5px 12px;
border-radius: 999px;
background: var(--nube-heading);
color: #fff;
}
.cookies-tag.opt {
background: transparent;
color: var(--kh-accent);
border: 1px solid var(--kh-accent);
}
/* Cookies card — meta row (tag + duración) */
.cookies-card-meta {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 12px;
}
.cookies-card-dur {
font-size: 11px; color: var(--kh-gray-400);
letter-spacing: .08em;
}
/* Lista de acciones explícitas */
.cookies-actions-list {
list-style: none;
display: flex; flex-direction: column; gap: 10px;
margin: 16px 0 20px;
}
.cookies-actions-list li {
display: flex; align-items: flex-start; gap: 10px;
font-size: 15px; line-height: 1.5; color: var(--kh-gray-800);
}
.cookies-actions-list li::before {
content: '→';
color: var(--kh-accent);
font-weight: 600;
flex-shrink: 0;
margin-top: 1px;
}
/* Tabla legal de cookies */
.cookies-table-wrap {
overflow-x: auto;
margin: 28px 0 32px;
border-radius: 10px;
border: 1px solid var(--nube-border);
}
.cookies-legal-table {
width: 100%; border-collapse: collapse;
font-size: 14px;
}
.cookies-legal-table thead tr {
background: var(--kh-gray-800);
color: #fff;
}
.cookies-legal-table th {
padding: 14px 18px;
font-family: var(--font-heading); font-weight: 600;
font-size: 13px; letter-spacing: .04em;
text-align: left;
}
.cookies-legal-table th:first-child { border-radius: 9px 0 0 0; }
.cookies-legal-table th:last-child { border-radius: 0 9px 0 0; }
.cookies-legal-table td {
padding: 14px 18px;
border-bottom: 1px solid var(--nube-border);
vertical-align: top;
color: var(--kh-gray-800);
line-height: 1.5;
}
.cookies-legal-table tbody tr:last-child td { border-bottom: none; }
.cookies-legal-table tbody tr:nth-child(even) { background: var(--kh-cream); }
@media (max-width: 700px) {
.cookies-legal-table th, .cookies-legal-table td { padding: 10px 12px; font-size: 13px; }
}
/* ==========================================================================
NUBE 3D — rotating cloud-sofa model on home editorial section
========================================================================== */
.nube3d-wrap {
position: relative;
background:
radial-gradient(circle at 60% 30%, rgba(255,255,255,.6), rgba(255,255,255,0) 55%),
linear-gradient(135deg, #E8ECF0 0%, #4A6275 70%, #2F3F4B 100%);
border-radius: 20px;
overflow: hidden;
min-height: 420px;
aspect-ratio: 4/5;
box-shadow:
inset 0 0 80px rgba(47, 63, 75, .18),
0 2px 4px rgba(10,20,35,.04),
0 20px 48px rgba(10,20,35,.08);
}
.nube3d-wrap #nube3d-canvas {
position: absolute; inset: 0;
width: 100% !important;
height: 100% !important;
display: block;
}
.nube3d-wrap::after {
content: '';
position: absolute;
left: 10%; right: 10%;
bottom: 8%;
height: 20px;
background: radial-gradient(ellipse at center, rgba(0,0,0,.22), rgba(0,0,0,0) 70%);
filter: blur(6px);
pointer-events: none;
}
.nube3d-fallback { width: 100%; height: 100%; }
/* ==========================================================================
SOBRE NOSOTROS — editorial about page
========================================================================== */
/* ---- Hero ---- */
.sobre-hero {
position: relative;
min-height: 100vh;
overflow: hidden;
color: #fff;
}
.sobre-hero-bg {
position: absolute; inset: 0;
background: linear-gradient(135deg, #E8ECF0 0%, #4A6275 45%, #2F3F4B 75%, #000000 100%);
z-index: 0;
}
.sobre-hero .hero-particles,
.sobre-hero .hero-clouds,
.sobre-hero .sobre-hero-parallax { z-index: 1; }
.sobre-hero .cloud { position: absolute; opacity: .5; color: #fff; }
.sobre-hero .cloud-1 { width: 240px; top: 18%; left: 7%; animation: nube-drift 34s ease-in-out infinite; }
.sobre-hero .cloud-2 { width: 190px; top: 62%; right: 12%; animation: nube-float 11s ease-in-out infinite; opacity: .4; }
/* ---- Parallax hero (mousemove-reactive layers) ---- */
.sobre-hero-parallax {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
}
.sobre-hero-parallax .parallax-layer {
position: absolute;
inset: -40px;
transform: translate3d(0, 0, 0);
transition: transform .6s cubic-bezier(.2, .8, .2, 1);
will-change: transform;
}
.pl-cloud,
.pl-cloud-sm {
position: absolute;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
aspect-ratio: 400/180;
filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .18));
opacity: .32;
animation-name: parallax-float;
animation-duration: 14s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
will-change: transform;
}
.pl-cloud-sm {
background-image: url('assets/cloud-small.svg');
aspect-ratio: 200/110;
opacity: .55;
filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .22));
animation-duration: 10s;
}
@keyframes parallax-float {
0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(6px, -10px, 0); }
}
/* Tiny dust/spark stars */
.pl-star {
position: absolute;
width: 4px; height: 4px;
border-radius: 50%;
background: #ffffff;
box-shadow:
0 0 4px rgba(255,255,255,.85),
0 0 10px rgba(186,205,225,.5);
opacity: .8;
animation: parallax-twinkle 3s ease-in-out infinite;
}
.pl-star.big { width: 6px; height: 6px; opacity: 1; }
@keyframes parallax-twinkle {
0%, 100% { opacity: .35; transform: scale(1); }
50% { opacity: 1; transform: scale(1.4); }
}
/* Mini sofa-cloud icons (inline SVG via CSS mask) */
.pl-sofa {
position: absolute;
width: 220px;
aspect-ratio: 200/100;
background: #ffffff;
opacity: .22;
filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .2));
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
animation: parallax-float 12s ease-in-out infinite;
}
.pl-sofa.mini { width: 140px; opacity: .35; animation-duration: 9s; }
.pl-sofa.big { width: 260px; opacity: .28; animation-duration: 15s; }
/* Zzz floating element */
.pl-zzz {
position: absolute;
display: inline-flex;
gap: 6px;
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
color: rgba(255,255,255,.6);
letter-spacing: .06em;
animation: parallax-zzz 4s ease-in-out infinite;
}
.pl-zzz i {
font-style: italic;
font-size: 18px;
text-shadow: 0 2px 10px rgba(0,0,0,.3);
animation: zzz-rise 2.4s ease-in-out infinite;
}
.pl-zzz i:nth-child(1) { font-size: 14px; animation-delay: 0s; }
.pl-zzz i:nth-child(2) { font-size: 18px; animation-delay: .3s; }
.pl-zzz i:nth-child(3) { font-size: 22px; animation-delay: .6s; }
@keyframes parallax-zzz {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(4px, -6px); }
}
@keyframes zzz-rise {
0%, 100% { opacity: .3; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-6px); }
}
@media (hover: none), (max-width: 760px) {
/* On touch devices, disable mouse parallax and rely on ambient float only */
.sobre-hero-parallax .parallax-layer { transition: none; }
}
@media (prefers-reduced-motion: reduce) {
.sobre-hero-parallax * { animation: none !important; transition: none !important; }
}
.sobre-hero-content {
position: relative; z-index: 3;
max-width: var(--container);
margin: 0 auto;
padding: clamp(100px, 18vh, 180px) var(--gutter) clamp(60px, 8vh, 100px);
display: flex; flex-direction: column; gap: 24px;
}
.sobre-hero-content .hero-eyebrow {
display: inline-flex; align-items: center; gap: 16px;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: rgba(255,255,255,.75);
}
.sobre-hero-content .hero-eyebrow-line {
width: 48px; height: 1px; background: rgba(255,255,255,.5);
}
.sobre-hero-content h1 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(64px, 11vw, 160px);
line-height: .92;
letter-spacing: -0.04em;
color: #fff;
text-shadow: 0 4px 40px rgba(0, 0, 0, .45);
}
.sobre-hero-content h1 em {
font-style: italic;
color: #fff;
text-shadow: 0 4px 40px rgba(0, 0, 0, .45);
}
.sobre-hero-sub {
max-width: 54ch;
font-size: clamp(16px, 1.7vw, 20px);
line-height: 1.55;
color: rgba(255,255,255,.88);
margin-top: 12px;
}
/* ==========================================================================
SOBRE NOSOTROS — editorial "edition" format (sidebar + chapters)
========================================================================== */
/* ---- Layout shell: sticky sidebar + main content ---- */
.sobre-shell {
position: relative;
}
@media (min-width: 1100px) {
.sobre-shell {
display: grid;
grid-template-columns: 260px 1fr;
gap: 0;
}
.sobre-main { min-width: 0; }
}
/* ---- Sticky sidebar nav ---- */
.sobre-nav {
display: none;
}
@media (min-width: 1100px) {
.sobre-nav {
display: block;
position: sticky;
top: 80px;
align-self: start;
height: calc(100vh - 100px);
padding: 20px 28px 20px 32px;
border-right: 1px solid var(--nube-border);
overflow-y: auto;
scrollbar-width: thin;
opacity: 0;
transform: translateX(-12px);
pointer-events: none;
transition:
opacity .55s cubic-bezier(.22, .8, .26, 1),
transform .55s cubic-bezier(.22, .8, .26, 1);
}
.sobre-shell.is-past-hero .sobre-nav {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
}
.sobre-nav-head {
display: flex; flex-direction: column;
gap: 4px;
margin-bottom: 32px;
padding-bottom: 20px;
border-bottom: 1px solid var(--nube-border);
}
.sobre-nav-edition {
font-family: var(--font-serif);
font-style: italic;
font-size: 20px;
color: var(--nube-heading);
letter-spacing: -0.01em;
}
.sobre-nav-year {
font-family: var(--font-sans);
font-size: 10px;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--kh-gray-600);
font-feature-settings: "tnum";
}
.sobre-nav-list {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-direction: column;
gap: 2px;
}
.sobre-nav-list a {
display: grid;
grid-template-columns: 28px 1fr;
gap: 10px;
padding: 9px 12px 9px 0;
border-radius: 8px;
color: var(--kh-gray-600);
transition: color .25s ease, background .2s ease;
text-decoration: none;
}
.sobre-nav-list a:hover {
color: var(--nube-heading);
background: var(--nube-section-bg);
opacity: 1;
}
.sobre-nav-list a.is-active {
color: var(--nube-heading);
font-weight: 500;
}
.sobre-nav-list a.is-active .n {
color: var(--kh-accent);
}
.sobre-nav-list .n {
font-family: var(--font-serif);
font-style: italic;
font-size: 15px;
line-height: 1.2;
color: var(--kh-gray-400);
font-feature-settings: "tnum";
text-align: center;
}
.sobre-nav-list .t {
font-family: var(--font-sans);
font-size: 12.5px;
letter-spacing: .04em;
line-height: 1.2;
align-self: center;
}
/* ---- Hero: scale row (3 number brags) ---- */
.sobre-hero-scale {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
max-width: 560px;
margin-top: 40px;
padding-top: 28px;
border-top: 1px solid rgba(255,255,255,.22);
}
.sobre-hero-scale .scale-item {
display: flex; flex-direction: column;
gap: 6px;
}
.sobre-hero-scale strong {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: clamp(32px, 4vw, 56px);
line-height: 1;
letter-spacing: -0.02em;
color: #ffffff;
text-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.sobre-hero-scale strong span {
font-size: .55em;
color: rgba(255,255,255,.85);
}
.sobre-hero-scale .scale-item > span:last-child {
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: rgba(255,255,255,.8);
}
@media (max-width: 640px) {
.sobre-hero-scale {
grid-template-columns: 1fr;
gap: 16px;
margin-top: 28px;
padding-top: 20px;
}
}
/* ---- Section shell ---- */
.sobre-section {
position: relative;
padding: 110px var(--gutter);
max-width: 1100px;
margin: 0 auto;
}
.sobre-section.has-tint {
max-width: none;
background: var(--nube-section-bg);
padding-left: 0;
padding-right: 0;
}
.sobre-section.has-tint > * {
max-width: 1100px;
margin-left: auto;
margin-right: auto;
padding-left: var(--gutter);
padding-right: var(--gutter);
}
@media (min-width: 1100px) {
.sobre-section { padding: 110px 56px; max-width: none; }
.sobre-section.has-tint > * { padding-left: 56px; padding-right: 56px; max-width: none; }
}
/* ---- Section header ---- */
.sobre-section-head {
display: flex; flex-direction: column;
gap: 24px;
margin-bottom: 56px;
max-width: 880px;
}
.sobre-section-head-center { text-align: center; margin-left: auto; margin-right: auto; }
.sobre-section-meta {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 8px 14px 8px 10px;
border-radius: 999px;
background: var(--nube-section-bg);
border: 1px solid var(--nube-border);
align-self: flex-start;
}
.sobre-section-meta.is-centered { align-self: center; }
.has-tint .sobre-section-meta {
background: #fff;
border-color: rgba(138,151,161,.25);
}
.sobre-section-num {
font-family: var(--font-serif);
font-style: italic;
font-size: 22px;
font-weight: 300;
color: var(--kh-accent);
line-height: 1;
letter-spacing: -0.02em;
font-feature-settings: "tnum";
}
.sobre-section-tag {
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--nube-heading);
}
.sobre-section-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(40px, 6vw, 84px);
line-height: .98;
letter-spacing: -0.035em;
color: var(--nube-heading);
margin: 0;
}
.sobre-section-title em {
font-style: italic;
color: var(--kh-accent);
}
.sobre-section-title.is-center { text-align: center; }
.sobre-section-lede {
font-family: var(--font-sans);
font-size: clamp(16px, 1.5vw, 18px);
line-height: 1.6;
color: var(--kh-gray-600);
max-width: 56ch;
}
.sobre-section-lede.is-center {
text-align: center;
margin-left: auto; margin-right: auto;
}
/* ---- Intro manifesto block ---- */
.sobre-section.is-intro { padding-top: 140px; padding-bottom: 80px; }
.sobre-section-inner {
max-width: 880px;
}
.sobre-section.is-intro .sobre-section-title {
font-size: clamp(48px, 8vw, 112px);
margin-bottom: 32px;
}
.sobre-section.is-intro .sobre-section-lede {
font-size: clamp(17px, 1.8vw, 22px);
line-height: 1.55;
color: var(--nube-text);
}
.sobre-section.is-intro .sobre-section-num {
font-size: 28px;
margin-bottom: 10px;
display: block;
}
/* ---- Feature cards grid ---- */
.sobre-features {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 640px) { .sobre-features { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
@media (min-width: 1100px) { .sobre-features { grid-template-columns: repeat(4, 1fr); gap: 28px; } }
.sobre-feature.is-commitment { grid-column: span 1; }
@media (min-width: 1100px) {
.sobre-features:has(.is-commitment) { grid-template-columns: repeat(3, 1fr); }
}
.sobre-feature {
position: relative;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 20px;
overflow: hidden;
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
border-color .3s ease,
box-shadow .4s cubic-bezier(.2,.8,.2,1);
}
.sobre-feature:hover {
transform: translateY(-4px);
border-color: var(--kh-accent);
box-shadow:
0 10px 28px rgba(74,98,117,.10),
0 30px 60px rgba(74,98,117,.06);
}
.sobre-feature-media {
position: relative;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #F4F6F8 0%, #E2E8EE 100%);
overflow: hidden;
}
.sobre-feature-cloud {
position: absolute;
left: 50%; top: 55%;
width: 68%; height: 52%;
transform: translate(-50%, -50%);
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
filter: drop-shadow(0 10px 28px rgba(47,63,75,.15));
animation: nube-float 8s ease-in-out infinite;
}
.sobre-feature-num {
position: absolute;
top: 16px; left: 18px;
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: 28px;
line-height: 1;
color: var(--nube-heading);
opacity: .6;
font-feature-settings: "tnum";
}
.sobre-feature-body {
padding: 22px 22px 24px;
}
.sobre-feature-body h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 24px;
letter-spacing: -0.015em;
color: var(--nube-heading);
margin: 0 0 10px;
}
.sobre-feature-body p {
font-size: 14.5px;
line-height: 1.6;
color: var(--kh-gray-600);
margin: 0 0 14px;
}
.sobre-feature-cta {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--nube-link);
text-decoration: none;
border-bottom: 1px solid var(--nube-link);
padding-bottom: 2px;
transition: color .2s ease, border-color .2s ease, transform .25s ease;
}
.sobre-feature-cta:hover {
color: var(--nube-heading);
border-color: var(--nube-heading);
opacity: 1;
transform: translateX(3px);
}
/* ---- Alternating rows (origen) ---- */
.sobre-rows {
display: flex;
flex-direction: column;
gap: 64px;
}
.sobre-row {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: center;
}
@media (min-width: 900px) {
.sobre-row {
grid-template-columns: 1.1fr 1fr;
gap: 80px;
}
.sobre-row.is-reverse .sobre-row-media { order: 2; }
.sobre-row.is-reverse .sobre-row-text { order: 1; }
}
.sobre-row-media {
position: relative;
width: 100%;
aspect-ratio: 5/4;
border-radius: 22px;
overflow: hidden;
box-shadow:
0 2px 4px rgba(10,20,35,.04),
0 24px 60px rgba(10,20,35,.10);
display: flex; align-items: center; justify-content: center;
}
.sobre-row-year {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: clamp(80px, 14vw, 180px);
color: rgba(255,255,255,.92);
line-height: 1;
letter-spacing: -0.04em;
text-shadow: 0 6px 30px rgba(0,0,0,.22);
font-feature-settings: "tnum";
}
.sobre-row-text { max-width: 46ch; }
.sobre-row-eyebrow {
display: inline-block;
font-family: var(--font-sans);
font-size: 11px;
letter-spacing: .18em;
text-transform: uppercase;
color: var(--kh-accent);
font-weight: 500;
margin-bottom: 14px;
}
.sobre-row-text h3 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3.6vw, 44px);
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--nube-heading);
margin: 0 0 16px;
}
.sobre-row-text p {
font-size: 16px;
line-height: 1.7;
color: var(--nube-text);
max-width: 44ch;
}
/* ---- Chips (fabrics) ---- */
.sobre-chips {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 640px) { .sobre-chips { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .sobre-chips { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.sobre-chip {
display: flex; align-items: center; gap: 18px;
padding: 16px 20px;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 16px;
transition:
transform .3s cubic-bezier(.2,.8,.2,1),
border-color .3s ease,
box-shadow .3s ease;
}
.sobre-chip:hover {
transform: translateY(-3px);
border-color: var(--kh-accent);
box-shadow: 0 10px 24px rgba(74,98,117,.10);
}
.sobre-chip-swatch {
width: 56px; height: 56px;
flex-shrink: 0;
border-radius: 50%;
box-shadow:
inset 0 2px 4px rgba(255,255,255,.3),
inset 0 -3px 6px rgba(0,0,0,.08),
0 0 0 1px rgba(10,20,35,.08);
}
.sobre-chip-body { min-width: 0; }
.sobre-chip-meta {
display: block;
font-size: 10.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kh-gray-600);
font-weight: 500;
margin-bottom: 4px;
}
.sobre-chip h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 20px;
color: var(--nube-heading);
margin: 0 0 4px;
letter-spacing: -0.01em;
}
.sobre-chip p {
font-size: 13px;
line-height: 1.5;
color: var(--kh-gray-600);
margin: 0;
}
/* ---- Steps (proceso) ---- */
.sobre-steps {
list-style: none;
margin: 0; padding: 0;
display: grid;
grid-template-columns: 1fr;
gap: 16px;
counter-reset: step;
}
@media (min-width: 760px) { .sobre-steps { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
@media (min-width: 1100px) { .sobre-steps { grid-template-columns: repeat(4, 1fr); gap: 24px; } }
.sobre-step {
position: relative;
padding: 32px 24px 30px;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 18px;
min-height: 220px;
display: flex; flex-direction: column;
overflow: hidden;
transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .35s ease;
}
.sobre-step:hover {
transform: translateY(-4px);
border-color: var(--kh-accent);
box-shadow: 0 12px 28px rgba(74,98,117,.10);
}
.sobre-step-num {
font-family: var(--font-serif);
font-style: italic;
font-weight: 300;
font-size: 56px;
line-height: 1;
color: var(--kh-accent);
letter-spacing: -0.02em;
margin-bottom: 18px;
font-feature-settings: "tnum";
}
.sobre-step-body h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.015em;
color: var(--nube-heading);
margin: 0 0 8px;
}
.sobre-step-body p {
font-size: 14px;
line-height: 1.55;
color: var(--kh-gray-600);
margin: 0;
}
.sobre-step-cloud {
position: absolute;
bottom: -14px; right: -14px;
width: 90px; height: 58px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
opacity: .35;
pointer-events: none;
transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
.sobre-step:hover .sobre-step-cloud {
transform: translate(-6px, -6px);
opacity: .6;
}
/* ---- Team ---- */
.sobre-team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (min-width: 900px) { .sobre-team-grid { grid-template-columns: repeat(4, 1fr); gap: 32px; } }
.sobre-member { display: flex; flex-direction: column; gap: 14px; }
.sobre-member-photo {
position: relative;
width: 100%;
aspect-ratio: 3/4;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(10,20,35,.06);
transition: transform .4s cubic-bezier(.2,.8,.2,1);
display: flex; align-items: center; justify-content: center;
}
.sobre-member:hover .sobre-member-photo {
transform: translateY(-4px);
}
.sobre-member-initials {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: 56px;
letter-spacing: -0.02em;
color: rgba(255,255,255,.88);
text-shadow: 0 4px 16px rgba(0,0,0,.22);
line-height: 1;
user-select: none;
}
.sobre-member h4 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 20px;
color: var(--nube-heading);
margin: 0 0 2px;
letter-spacing: -0.01em;
}
.sobre-member figcaption span {
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kh-gray-600);
}
/* ---- Back-to-top link at section end ---- */
.sobre-back {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 56px;
padding: 10px 0;
font-family: var(--font-sans);
font-size: 11px;
font-weight: 500;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kh-gray-600);
border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.sobre-back:hover {
color: var(--nube-heading);
border-color: var(--nube-heading);
opacity: 1;
}
/* ---- Final CTA ---- */
.sobre-section.is-cta {
padding: 120px var(--gutter);
text-align: center;
border-top: 1px solid var(--nube-border);
max-width: none;
background: linear-gradient(180deg, transparent 0%, var(--nube-section-bg) 100%);
}
.sobre-cta-actions {
display: inline-flex;
gap: 14px;
flex-wrap: wrap;
justify-content: center;
margin-top: 36px;
}
/* ==========================================================================
CONTACTO — chat + channels + form
========================================================================== */
.contacto-page {
position: relative;
overflow: hidden;
padding: 0 0 120px;
}
.contacto-clouds {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.contacto-clouds .nube {
position: absolute;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
opacity: .25;
}
.contacto-clouds .nube.c1 { width: 300px; height: 140px; top: 60px; left: -60px; animation: nube-drift 40s ease-in-out infinite; }
.contacto-clouds .nube.c2 { width: 220px; height: 105px; top: 35%; right: -40px; opacity: .2; animation: nube-float 12s ease-in-out infinite; }
.contacto-clouds .nube.c3 { width: 260px; height: 120px; bottom: 8%; left: 18%; opacity: .18; animation: nube-drift 44s ease-in-out infinite reverse; }
.contacto-page > * { position: relative; z-index: 1; }
/* ---- Hero ---- */
.contacto-hero {
max-width: 860px;
margin: 0 auto;
padding: 140px var(--gutter) 72px;
text-align: center;
}
.contacto-hero .section-eyebrow { display: inline-block; margin-bottom: 24px; }
.contacto-title {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(48px, 8vw, 108px);
line-height: .95;
letter-spacing: -0.035em;
color: var(--nube-heading);
margin-bottom: 28px;
}
.contacto-title em {
font-style: italic;
color: var(--kh-accent);
}
.contacto-lead {
font-size: clamp(16px, 1.6vw, 19px);
line-height: 1.6;
color: var(--kh-gray-600);
max-width: 56ch;
margin: 0 auto 24px;
}
.contacto-status {
display: inline-flex; align-items: center; gap: 10px;
font-size: 13px;
color: var(--nube-heading);
background: var(--nube-section-bg);
border: 1px solid var(--nube-border);
padding: 8px 16px;
border-radius: 999px;
}
.contacto-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #30b878;
box-shadow: 0 0 0 4px rgba(48,184,120,.18);
animation: contacto-pulse 2s ease-in-out infinite;
}
@keyframes contacto-pulse {
0%, 100% { box-shadow: 0 0 0 4px rgba(48,184,120,.18); }
50% { box-shadow: 0 0 0 8px rgba(48,184,120,.08); }
}
/* ---- Main grid (chat + channels) ---- */
.contacto-main { padding: 20px var(--gutter); }
.contacto-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
max-width: 1120px;
margin: 0 auto;
}
@media (min-width: 960px) {
.contacto-grid {
grid-template-columns: 1.3fr 1fr;
gap: 40px;
align-items: stretch;
}
}
/* ---- Chat ---- */
.contacto-chat {
background: #ffffff;
border-radius: 22px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow:
0 2px 4px rgba(10,20,35,.04),
0 18px 40px rgba(10,20,35,.10),
0 40px 80px rgba(10,20,35,.06);
border: 1px solid var(--nube-border);
min-height: 560px;
max-height: 720px;
}
.chat-head {
display: flex; align-items: center; gap: 14px;
padding: 18px 20px;
background: var(--nube-heading);
color: #fff;
border-bottom: 1px solid var(--nube-border);
}
.chat-avatar {
width: 44px; height: 44px;
border-radius: 999px;
background: #fff;
display: inline-flex; align-items: center; justify-content: center;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.chat-avatar-cloud {
width: 28px; height: 18px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
}
.chat-head-text { flex: 1; }
.chat-head-text strong {
display: block;
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
margin-bottom: 2px;
}
.chat-head-text span {
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px;
color: rgba(255,255,255,.85);
}
.chat-dot {
display: inline-block;
width: 7px; height: 7px;
border-radius: 50%;
background: #30b878;
box-shadow: 0 0 0 2px rgba(48,184,120,.3);
animation: contacto-pulse 2s ease-in-out infinite;
}
.chat-minimize {
color: rgba(255,255,255,.7);
width: 28px; height: 28px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
transition: background .2s ease;
}
.chat-minimize:hover { background: rgba(255,255,255,.12); color: #fff; opacity: 1; }
.chat-body {
flex: 1;
overflow-y: auto;
padding: 22px 20px;
display: flex;
flex-direction: column;
gap: 14px;
background:
radial-gradient(circle at 15% 10%, rgba(138,151,161,.08), rgba(138,151,161,0) 50%),
#fcfcfd;
}
.chat-msg {
display: flex; gap: 10px;
max-width: 82%;
animation: chat-in .4s cubic-bezier(.22, .8, .26, 1) both;
}
.chat-msg.bot { align-self: flex-start; }
.chat-msg.user {
align-self: flex-end;
flex-direction: row-reverse;
max-width: 82%;
}
@keyframes chat-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-msg-avatar {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: 999px;
background:
url('assets/cloud-small.svg') center/70% no-repeat,
var(--nube-section-bg);
border: 1px solid var(--nube-border);
align-self: flex-end;
}
.chat-msg.user .chat-msg-avatar { display: none; }
.chat-bubble {
padding: 11px 16px;
font-size: 14px;
line-height: 1.5;
border-radius: 18px 18px 18px 4px;
background: var(--nube-section-bg);
color: var(--nube-text);
border: 1px solid var(--nube-border);
}
.chat-msg.user .chat-bubble {
background: var(--nube-heading);
color: #fff;
border: 0;
border-radius: 18px 18px 4px 18px;
}
.chat-time {
align-self: center;
font-size: 11px;
color: var(--kh-gray-600);
letter-spacing: .1em;
text-transform: uppercase;
}
.chat-time .chat-msg-avatar { display: none; }
.chat-quickreplies {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 4px;
align-self: flex-start;
max-width: 100%;
}
.chat-chip {
font-family: var(--font-sans);
font-size: 12.5px;
padding: 8px 14px;
border-radius: 999px;
background: #fff;
color: var(--kh-accent);
border: 1px solid var(--kh-accent);
cursor: pointer;
transition: all .2s ease;
}
.chat-chip:hover {
background: var(--kh-accent);
color: #fff;
transform: translateY(-1px);
}
.chat-typing {
display: inline-flex; gap: 4px; padding: 14px 16px;
background: var(--nube-section-bg);
border: 1px solid var(--nube-border);
border-radius: 18px 18px 18px 4px;
}
.chat-typing i {
width: 6px; height: 6px; border-radius: 50%;
background: var(--kh-gray-600);
animation: chat-typing 1.1s ease-in-out infinite;
}
.chat-typing i:nth-child(2) { animation-delay: .15s; }
.chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-typing {
0%, 60%, 100% { opacity: .3; transform: translateY(0); }
30% { opacity: 1; transform: translateY(-3px); }
}
.chat-compose {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
border-top: 1px solid var(--nube-border);
background: #fff;
}
.chat-compose input {
flex: 1;
border: 0;
background: transparent;
font: inherit;
font-size: 14px;
color: var(--nube-text);
padding: 10px 4px;
outline: none;
}
.chat-compose input::placeholder { color: var(--kh-gray-400); }
.chat-send {
width: 40px; height: 40px;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--nube-cta);
color: #fff;
transition: all .25s ease;
flex-shrink: 0;
}
.chat-send:hover {
background: var(--nube-cta-hover);
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(74,98,117,.25);
opacity: 1;
}
.chat-foot {
font-size: 11px;
color: var(--kh-gray-600);
text-align: center;
padding: 10px 16px 14px;
background: #fff;
border-top: 1px solid var(--nube-border);
}
.chat-foot a { color: var(--nube-link); text-decoration: underline; }
/* ---- Channels ---- */
.contacto-channels {
display: flex;
flex-direction: column;
gap: 14px;
}
.contacto-channels .section-eyebrow { margin-bottom: 8px; }
.contacto-channels h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(28px, 3.2vw, 38px);
letter-spacing: -0.02em;
color: var(--nube-heading);
margin-bottom: 18px;
}
.channel-card {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 20px;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 16px;
text-decoration: none;
color: inherit;
transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.channel-card:hover {
transform: translateY(-3px);
border-color: var(--kh-accent);
box-shadow:
0 8px 22px rgba(74,98,117,.10),
0 20px 44px rgba(74,98,117,.06);
opacity: 1;
}
.channel-icon {
width: 46px; height: 46px;
border-radius: 12px;
background: var(--nube-section-bg);
color: var(--kh-accent);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
transition: background .25s ease, color .25s ease;
}
.channel-card:hover .channel-icon {
background: var(--kh-accent);
color: #fff;
}
.channel-content { flex: 1; min-width: 0; }
.channel-label {
display: block;
font-size: 11px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kh-gray-600);
margin-bottom: 2px;
}
.channel-content strong {
display: block;
font-size: 15px;
font-weight: 600;
color: var(--nube-heading);
margin-bottom: 2px;
}
.channel-meta {
font-size: 12px;
color: var(--kh-gray-600);
}
.channel-arrow {
font-size: 20px;
color: var(--kh-accent);
transition: transform .25s ease;
}
.channel-card:hover .channel-arrow {
transform: translateX(4px);
}
.channel-social {
display: flex;
gap: 10px;
margin-top: 8px;
flex-wrap: wrap;
}
.social-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 999px;
background: #fff;
border: 1px solid var(--nube-border);
color: var(--nube-heading);
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all .25s ease;
}
.social-chip:hover {
background: var(--nube-heading);
color: #fff;
border-color: var(--nube-heading);
transform: translateY(-2px);
opacity: 1;
}
/* ---- Form ---- */
.contacto-form-wrap {
max-width: 860px;
margin: 100px auto 0;
padding: 0 var(--gutter);
}
.contacto-form-head {
text-align: center;
margin-bottom: 40px;
}
.contacto-form-head h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(32px, 4vw, 52px);
letter-spacing: -0.03em;
color: var(--nube-heading);
margin: 8px 0 12px;
}
.contacto-form-head p {
font-size: 16px;
color: var(--kh-gray-600);
max-width: 50ch;
margin: 0 auto;
}
.contacto-form {
display: flex;
flex-direction: column;
gap: 20px;
padding: 36px;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 22px;
box-shadow:
0 2px 4px rgba(10,20,35,.03),
0 16px 38px rgba(10,20,35,.06);
}
.contacto-form-row {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 640px) {
.contacto-form-row { grid-template-columns: 1fr 1fr; }
}
.contacto-form label {
display: flex;
flex-direction: column;
gap: 6px;
}
.contacto-form label span {
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--kh-gray-600);
font-weight: 500;
}
.contacto-form input[type="text"],
.contacto-form input[type="email"],
.contacto-form textarea {
padding: 14px 16px;
font: inherit;
font-size: 14px;
border: 1.5px solid var(--nube-border);
border-radius: 10px;
background: #fff;
color: var(--nube-text);
outline: none;
resize: vertical;
transition: border-color .2s ease, box-shadow .2s ease;
}
.contacto-form input:focus,
.contacto-form textarea:focus {
border-color: var(--kh-accent);
box-shadow: 0 0 0 4px rgba(74,98,117,.10);
}
.contacto-form-actions {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 16px;
margin-top: 8px;
}
.contacto-form-check {
display: flex !important;
flex-direction: row !important;
align-items: center;
gap: 10px;
font-size: 13px;
color: var(--kh-gray-600);
flex: 1 1 240px;
}
.contacto-form-check input[type="checkbox"] {
width: 18px; height: 18px;
accent-color: var(--kh-accent);
flex-shrink: 0;
}
.contacto-form-check a { color: var(--nube-link); text-decoration: underline; }
/* ---- Meta info ---- */
.contacto-meta {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
max-width: 1120px;
margin: 80px auto 0;
padding: 0 var(--gutter);
}
@media (min-width: 760px) {
.contacto-meta { grid-template-columns: repeat(3, 1fr); gap: 24px; }
}
.contacto-meta-card {
padding: 28px 26px;
background: var(--nube-section-bg);
border: 1px solid var(--nube-border);
border-radius: 16px;
}
.contacto-meta-card .section-eyebrow { margin-bottom: 12px; display: block; }
.contacto-meta-card h3 {
font-family: var(--font-serif);
font-weight: 400;
font-size: 22px;
letter-spacing: -0.02em;
color: var(--nube-heading);
margin-bottom: 10px;
}
.contacto-meta-card p {
font-size: 14px;
line-height: 1.6;
color: var(--kh-gray-600);
}
/* ---- Stats row (below hero) ---- */
.contacto-stats {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 56px auto 0;
max-width: 720px;
}
@media (min-width: 640px) {
.contacto-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.contacto-stat {
padding: 20px 14px;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 16px;
text-align: center;
transition: transform .3s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}
.contacto-stat:hover {
transform: translateY(-4px);
border-color: var(--kh-accent);
box-shadow: 0 10px 30px rgba(74,98,117,.10);
}
.contacto-stat .stat-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--nube-section-bg);
color: var(--kh-accent);
margin-bottom: 10px;
}
.contacto-stat strong {
display: block;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(22px, 2.4vw, 30px);
color: var(--nube-heading);
line-height: 1;
margin-bottom: 6px;
}
.contacto-stat span:not(.stat-icon) {
display: block;
font-size: 11.5px;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--kh-gray-600);
}
/* ==========================================================================
SOFA SPLIT — scroll-driven before / after reveal
========================================================================== */
.sofa-split-section { width: 100%; }
.sofa-split-track {
position: relative;
height: 260vh;
}
.sofa-split-sticky {
position: sticky;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
}
.sofa-split-label {
font-family: var(--font-sans);
font-size: 0.68rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--kh-gray-400);
text-align: center;
margin: 0;
}
.sofa-split-scene {
position: relative;
width: min(360px, 72vw);
aspect-ratio: 1 / 1;
user-select: none;
border-radius: 16px;
overflow: hidden;
}
/* Dirty sofa — bottom layer, always visible */
.sofa-img-dirty {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 0;
pointer-events: none;
}
/* Clean sofa — top layer, clips from top downward as scroll progresses */
.sofa-img-clean {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 1;
clip-path: inset(0 0 100% 0);
will-change: clip-path;
pointer-events: none;
}
/* Caption that appears when the reveal is done */
.sofa-split-caption {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--kh-gray-400);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.5s ease, transform 0.5s ease;
pointer-events: none;
}
.sofa-split-caption.is-visible {
opacity: 1;
transform: translateY(0);
}
.sofa-caption-after { color: var(--kh-accent); }
.sofa-caption-sep {
display: block;
width: 26px;
height: 1px;
background: currentColor;
opacity: 0.45;
flex-shrink: 0;
}
@media (max-width: 760px) {
.sofa-split-track { height: 220vh; }
}
@media (prefers-reduced-motion: reduce) {
.sofa-split-track { height: auto; }
.sofa-split-sticky { position: static; height: auto; padding: 56px 0; }
.sofa-img-clean { clip-path: none; }
.sofa-split-caption { opacity: 1; transform: none; }
}
/* ==========================================================================
MOBILE NAV — hamburger + slide-down drawer
========================================================================== */
/* Hamburger button */
.nav-toggle {
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 8px;
background: transparent;
-webkit-appearance: none;
appearance: none;
border: 0;
border-radius: 0;
outline: none;
box-shadow: none;
color: inherit;
cursor: pointer;
transition: opacity .2s ease;
}
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active {
background: transparent;
color: var(--kh-accent);
box-shadow: none;
outline: none;
transform: none;
opacity: 1;
}
.nav-toggle-bar {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .25s ease;
transform-origin: center;
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
opacity: 0;
transform: scaleX(0);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
/* ── Mobile nav ───────────────────────────────────────────────────────────
Posición: justo debajo del header.
top = altura real del header en cada breakpoint:
701–959 px → logo(36) + padding(14+14) = 64 px
≤700 px → logo(28) + padding(10+10) = 48 px → min-height fuerza 52 px
transform: translateY(-100%) lo esconde encima del header sin crear
ningún cuadrado blanco visible.
──────────────────────────────────────────────────────────────────────── */
.mobile-nav {
display: none;
position: fixed;
top: 64px;
left: 0; right: 0;
z-index: 59;
background: #ffffff;
border-bottom: 1px solid var(--nube-border);
box-shadow: 0 8px 24px rgba(0,0,0,.10);
transform: translateY(-100%);
visibility: hidden;
transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear .38s;
will-change: transform;
}
.mobile-nav.is-open {
transform: translateY(0);
visibility: visible;
transition: transform .38s cubic-bezier(.2,.8,.2,1), visibility 0s linear 0s;
}
/* Admin bar de WordPress (desktop: +32px, mobile: +46px) */
body.admin-bar .mobile-nav { top: 96px; }
@media (max-width: 700px) {
.mobile-nav { top: 52px; }
body.admin-bar .mobile-nav { top: 98px; }
}
@media screen and (min-width: 701px) and (max-width: 782px) {
body.admin-bar .mobile-nav { top: 110px; }
}
.mobile-nav nav {
display: flex;
flex-direction: column;
padding: 6px var(--gutter) 32px;
}
.mobile-nav nav a {
padding: 18px 0;
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(26px, 7vw, 34px);
letter-spacing: -0.02em;
color: var(--nube-heading);
border-bottom: 1px solid var(--nube-border);
transition: color .2s ease, transform .25s cubic-bezier(.2,.8,.2,1);
}
.mobile-nav nav a:last-child { border-bottom: none; }
.mobile-nav nav a:hover { color: var(--kh-accent); transform: translateX(6px); opacity: 1; }
@media (max-width: 959px) {
.nav-toggle { display: flex; }
.mobile-nav { display: block; }
}
/* ==========================================================================
HORIZONTAL SCROLL FIX — clip hero decorative overflow on mobile
========================================================================== */
.sobre-hero,
.sobre-hero-parallax,
.tienda-hero,
.hero-section,
.footer-clouds,
.nube-divider {
overflow-x: clip;
}
/* ---- Editorial quote ---- */
.contacto-quote {
max-width: 860px;
margin: 120px auto 0;
padding: 72px var(--gutter);
text-align: center;
position: relative;
}
.contacto-quote::before,
.contacto-quote::after {
content: '';
position: absolute;
top: 50%;
width: clamp(60px, 10vw, 120px);
height: 1px;
background: var(--nube-border-strong);
opacity: .4;
}
.contacto-quote::before { left: 0; }
.contacto-quote::after { right: 0; }
.contacto-quote-mark {
color: var(--kh-accent);
opacity: .25;
margin-bottom: 24px;
display: block;
margin-left: auto; margin-right: auto;
}
.contacto-quote p {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(26px, 3.6vw, 44px);
line-height: 1.25;
color: var(--nube-heading);
letter-spacing: -0.02em;
max-width: 22ch;
margin: 0 auto 24px;
}
.contacto-quote p em {
font-style: italic;
color: var(--kh-accent);
}
.contacto-quote-sign {
font-size: 12px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--kh-gray-600);
}
/* ---- Team (who responds) ---- */
.contacto-team {
max-width: 1120px;
margin: 100px auto 0;
padding: 0 var(--gutter);
}
.contacto-team-head {
text-align: center;
max-width: 640px;
margin: 0 auto 52px;
}
.contacto-team-head h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(32px, 4.4vw, 54px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--nube-heading);
margin: 10px 0 14px;
}
.contacto-team-head h2 em {
font-style: italic;
color: var(--kh-accent);
}
.contacto-team-head p {
font-size: 16px;
color: var(--kh-gray-600);
line-height: 1.6;
}
.contacto-team-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
@media (min-width: 720px) {
.contacto-team-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
.team-person {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.team-avatar {
--accent: #4A6275;
position: relative;
width: 120px; height: 120px;
border-radius: 50%;
background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.28), var(--accent) 80%);
border: 1.5px solid transparent;
display: flex; align-items: center; justify-content: center;
transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease;
overflow: hidden;
}
.team-avatar::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: radial-gradient(circle at 70% 80%, rgba(255,255,255,.12), transparent 55%);
pointer-events: none;
}
.team-avatar-initials {
position: relative;
z-index: 1;
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: 34px;
letter-spacing: -0.02em;
color: rgba(255,255,255,.92);
text-shadow: 0 2px 10px rgba(0,0,0,.25);
line-height: 1;
user-select: none;
}
.team-person:hover .team-avatar {
transform: translateY(-6px);
box-shadow: 0 14px 34px rgba(47,63,75,.22);
}
.team-person figcaption strong {
display: block;
font-family: var(--font-serif);
font-weight: 400;
font-size: 18px;
color: var(--nube-heading);
margin-bottom: 4px;
}
.team-person figcaption span {
display: block;
font-size: 11.5px;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--kh-gray-600);
}
/* ---- FAQ accordion ---- */
.contacto-faq {
max-width: 880px;
margin: 100px auto 0;
padding: 0 var(--gutter);
}
.contacto-faq-head {
text-align: center;
max-width: 560px;
margin: 0 auto 44px;
}
.contacto-faq-head h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(30px, 4vw, 46px);
letter-spacing: -0.03em;
color: var(--nube-heading);
margin: 10px 0 12px;
}
.contacto-faq-head p {
font-size: 15px;
color: var(--kh-gray-600);
line-height: 1.6;
}
.contacto-faq-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.faq-item {
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 14px;
overflow: hidden;
transition: border-color .25s ease, box-shadow .25s ease;
}
.faq-item[open] {
border-color: var(--kh-accent);
box-shadow: 0 8px 22px rgba(74,98,117,.08);
}
.faq-item summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 20px 22px;
font-size: 15.5px;
font-weight: 500;
color: var(--nube-heading);
transition: background .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: var(--nube-section-bg); }
.faq-icon {
position: relative;
width: 24px; height: 24px;
flex-shrink: 0;
border-radius: 50%;
background: var(--nube-section-bg);
transition: background .3s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.faq-icon::before,
.faq-icon::after {
content: '';
position: absolute;
top: 50%; left: 50%;
background: var(--kh-accent);
transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.faq-icon::before {
width: 12px; height: 1.5px;
transform: translate(-50%, -50%);
}
.faq-icon::after {
width: 1.5px; height: 12px;
transform: translate(-50%, -50%);
}
.faq-item[open] .faq-icon {
background: var(--kh-accent);
transform: rotate(180deg);
}
.faq-item[open] .faq-icon::before,
.faq-item[open] .faq-icon::after { background: #fff; }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-answer {
padding: 0 22px 22px;
animation: faq-reveal .35s cubic-bezier(.2, .8, .2, 1);
}
.faq-answer p {
font-size: 14.5px;
line-height: 1.7;
color: var(--kh-gray-600);
max-width: 62ch;
}
@keyframes faq-reveal {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
SCROLL REVEALS — editorial entrance
========================================================================== */
[data-reveal] {
opacity: 0;
transform: translate3d(0, 28px, 0);
transition:
opacity .9s cubic-bezier(.22, .8, .26, 1),
transform .9s cubic-bezier(.22, .8, .26, 1);
will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="zoom"] { transform: translate3d(0, 0, 0) scale(.96); }
[data-reveal].is-revealed { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal-delay="4"] { transition-delay: .32s; }
[data-reveal-delay="5"] { transition-delay: .4s; }
@media (prefers-reduced-motion: reduce) {
[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* ==========================================================================
CLOUD SECTION DIVIDERS — wavy SVG between home blocks
========================================================================== */
.cloud-divider {
display: block;
width: 100%;
height: 90px;
margin: 0;
line-height: 0;
pointer-events: none;
color: var(--kh-white);
}
.cloud-divider.flip { transform: scaleY(-1); }
.cloud-divider.tinted { color: var(--nube-section-bg); }
.cloud-divider svg { width: 100%; height: 100%; display: block; }
/* ==========================================================================
SCROLL PROGRESS — thin accent bar at top of viewport
========================================================================== */
.scroll-progress {
position: fixed;
top: 0; left: 0;
height: 2px;
width: 0%;
background: linear-gradient(90deg, var(--kh-accent) 0%, #5C6E7C 60%, #8A97A1 100%);
z-index: 100;
pointer-events: none;
transition: width .08s linear;
box-shadow: 0 0 8px rgba(74,98,117,.4);
}
/* ==========================================================================
PRODUCT BADGES — small pill over product images
========================================================================== */
.pc-badge {
position: absolute;
top: 12px; left: 12px;
z-index: 3;
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--font-sans);
font-size: 10px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 6px 10px;
border-radius: 999px;
background: var(--kh-accent);
color: #fff;
box-shadow: 0 2px 6px rgba(10,20,35,.18);
animation: badge-breathe 3.5s ease-in-out infinite;
}
.pc-badge.nuevo { background: var(--kh-accent); }
.pc-badge.outlet { background: #B85C4A; }
.pc-badge.popular { background: var(--nube-heading); }
.pc-badge::before {
content: '';
width: 6px; height: 6px;
border-radius: 50%;
background: #fff;
opacity: .9;
flex-shrink: 0;
}
@keyframes badge-breathe {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-2px) scale(1.02); }
}
.product-card { position: relative; }
/* ==========================================================================
EMPTY CART STATE — sleeping cloud
========================================================================== */
.cart-empty-state {
text-align: center;
padding: 80px 24px 60px;
max-width: 520px;
margin: 0 auto;
}
.cart-empty-illustration {
position: relative;
width: 200px; height: 130px;
margin: 0 auto 36px;
}
.cart-empty-cloud {
position: absolute;
inset: 0;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
filter: drop-shadow(0 16px 30px rgba(47,63,75,.18));
animation: cart-empty-float 5s ease-in-out infinite;
}
.cart-empty-zzz {
position: absolute;
top: -8px; right: 0;
font-family: var(--font-serif);
font-style: italic;
color: var(--kh-accent);
font-size: 22px;
letter-spacing: .2em;
opacity: .55;
animation: cart-empty-zzz 3s ease-in-out infinite;
}
@keyframes cart-empty-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes cart-empty-zzz {
0%, 100% { opacity: .3; transform: translate(0, 0); }
50% { opacity: .75; transform: translate(6px, -6px); }
}
.cart-empty-state h2 {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: clamp(28px, 4vw, 42px);
color: var(--nube-heading);
letter-spacing: -0.02em;
margin-bottom: 14px;
}
.cart-empty-state p {
color: var(--kh-gray-600);
max-width: 42ch;
margin: 0 auto 28px;
font-size: 15px;
line-height: 1.65;
}
/* ==========================================================================
404 PAGE — editorial "cloud dissipated"
========================================================================== */
.page-404 {
min-height: calc(100vh - 80px);
display: flex;
align-items: center;
justify-content: center;
padding: 120px var(--gutter) 100px;
text-align: center;
position: relative;
overflow: hidden;
}
.page-404-clouds {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.page-404-clouds .nube {
position: absolute;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
opacity: .3;
}
.page-404-clouds .nube.n1 { width: 320px; height: 150px; top: 12%; left: -50px; animation: nube-drift 38s ease-in-out infinite; }
.page-404-clouds .nube.n2 { width: 240px; height: 115px; top: 60%; right: -40px; opacity: .22; animation: nube-float 11s ease-in-out infinite; }
.page-404-clouds .nube.n3 { width: 280px; height: 130px; bottom: 15%; left: 18%; opacity: .18; animation: nube-drift 42s ease-in-out infinite reverse; }
.page-404-content {
max-width: 640px;
position: relative;
z-index: 1;
}
.page-404-number {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(100px, 18vw, 200px);
line-height: 1;
letter-spacing: -0.05em;
color: var(--nube-heading);
margin-bottom: 24px;
}
.page-404-number em {
font-style: italic;
color: var(--kh-accent);
}
.page-404-number .cloud-gap {
display: inline-block;
width: clamp(70px, 14vw, 140px);
height: clamp(40px, 8vw, 80px);
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
animation: nube-float 5s ease-in-out infinite;
filter: drop-shadow(0 10px 20px rgba(47,63,75,.18));
}
.page-404 h1 {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: clamp(26px, 3.6vw, 40px);
color: var(--nube-heading);
letter-spacing: -0.02em;
margin-bottom: 18px;
}
.page-404 h1 em {
font-style: italic;
color: var(--kh-accent);
}
.page-404 .page-404-lead {
color: var(--kh-gray-600);
font-size: 17px;
line-height: 1.65;
max-width: 52ch;
margin: 0 auto 36px;
}
.page-404-actions {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ==========================================================================
NEWSLETTER CONFIRMATION — cloud puff burst
========================================================================== */
.newsletter { position: relative; }
.newsletter-confirmation {
display: none;
padding: 20px 20px 10px;
animation: news-confirm .7s cubic-bezier(.22, .9, .3, 1) both;
}
.newsletter.is-confirmed .newsletter-confirmation { display: block; }
.newsletter.is-confirmed > h2,
.newsletter.is-confirmed > p,
.newsletter.is-confirmed > form,
.newsletter.is-confirmed > div > form {
opacity: 0;
pointer-events: none;
transition: opacity .4s ease;
position: absolute;
left: -9999px;
}
@keyframes news-confirm {
0% { opacity: 0; transform: translateY(14px) scale(.96); }
100% { opacity: 1; transform: translateY(0) scale(1); }
}
.newsletter-confirmation-cloud {
width: 80px; height: 52px;
margin: 0 auto 18px;
background: url('assets/cloud-fluffy.svg') center/contain no-repeat;
filter: drop-shadow(0 8px 16px rgba(74,98,117,.2));
animation: nube-float 3s ease-in-out infinite;
}
.newsletter-confirmation h3 {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: clamp(26px, 3.6vw, 36px);
color: var(--nube-heading);
margin-bottom: 10px;
}
.newsletter-confirmation h3 em {
font-style: italic;
color: var(--kh-accent);
}
.newsletter-confirmation p {
color: var(--kh-gray-600);
max-width: 42ch;
margin: 0 auto;
font-size: 15px;
}
/* Puff burst (launched by JS) */
.newsletter-puffs {
position: absolute;
left: 50%; top: 50%;
width: 1px; height: 1px;
pointer-events: none;
z-index: 2;
}
.newsletter-puffs span {
position: absolute;
left: 0; top: 0;
width: 42px; height: 28px;
margin: -14px 0 0 -21px;
background: url('assets/cloud-small.svg') center/contain no-repeat;
filter: drop-shadow(0 4px 12px rgba(184,92,74,.30));
opacity: 0;
transform: scale(.15);
animation: news-puff 1.3s cubic-bezier(.2, .85, .3, 1) forwards;
}
/* Heart-shape burst — clouds fly out to form a heart silhouette, hold, then fade */
.newsletter-puffs.heart-burst span {
animation: news-puff-heart 2.1s cubic-bezier(.25, .8, .3, 1) forwards;
}
@keyframes news-puff {
0% { transform: scale(.15); opacity: 0; }
20% { opacity: 1; }
100% {
transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1.4));
opacity: 0;
}
}
@keyframes news-puff-heart {
0% { transform: scale(.15); opacity: 0; }
18% { opacity: 1; transform: scale(.9); }
45% {
opacity: 1;
transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1));
}
80% {
opacity: 1;
transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1));
}
100% {
opacity: 0;
transform: translate(var(--tx, 0), var(--ty, 0)) scale(calc(var(--ts, 1) * 0.6));
}
}
/* ==========================================================================
TESTIMONIALS — editorial quotes section
========================================================================== */
.testimonials {
padding: 120px var(--gutter);
max-width: 1180px;
margin: 0 auto;
position: relative;
}
.testimonials-head {
text-align: center;
max-width: 640px;
margin: 0 auto 56px;
}
.testimonials-head .section-eyebrow { display: inline-block; margin-bottom: 16px; }
.testimonials-head h2 {
font-family: var(--font-serif);
font-weight: 300;
font-size: clamp(36px, 5vw, 64px);
line-height: 1;
letter-spacing: -0.03em;
color: var(--nube-heading);
margin-bottom: 14px;
}
.testimonials-head h2 em {
font-style: italic;
color: var(--kh-accent);
}
.testimonials-head p {
color: var(--kh-gray-600);
font-size: 16px;
line-height: 1.6;
}
.testimonials-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 760px) {
.testimonials-grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.testimonial {
position: relative;
padding: 34px 30px 28px;
background: #fff;
border: 1px solid var(--nube-border);
border-radius: 20px;
transition:
transform .4s cubic-bezier(.2,.8,.2,1),
border-color .3s ease,
box-shadow .3s ease;
}
.testimonial:hover {
transform: translateY(-5px);
border-color: var(--kh-accent);
box-shadow:
0 12px 28px rgba(74,98,117,.10),
0 28px 56px rgba(74,98,117,.06);
}
.testimonial-mark {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 72px;
color: var(--kh-accent);
opacity: .28;
line-height: .5;
margin-bottom: 4px;
pointer-events: none;
}
.testimonial-quote {
font-family: var(--font-serif);
font-weight: 300;
font-style: italic;
font-size: 19px;
line-height: 1.5;
color: var(--nube-heading);
letter-spacing: -0.01em;
margin-bottom: 22px;
}
.testimonial-quote em {
color: var(--kh-accent);
font-style: italic;
}
.testimonial-stars {
display: flex;
gap: 2px;
margin-bottom: 16px;
color: var(--kh-accent);
}
.testimonial-stars svg { display: block; }
.testimonial-author {
display: flex;
align-items: center;
gap: 12px;
padding-top: 18px;
border-top: 1px solid var(--nube-border);
}
.testimonial-avatar {
width: 42px; height: 42px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), var(--nube-section-bg) 70%);
border: 1px solid var(--nube-border);
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-serif);
font-size: 17px;
font-weight: 400;
color: var(--kh-accent);
flex-shrink: 0;
}
.testimonial-meta strong {
display: block;
font-family: var(--font-sans);
font-size: 14px;
color: var(--nube-heading);
font-weight: 600;
margin-bottom: 2px;
}
.testimonial-meta span {
display: block;
font-size: 11px;
color: var(--kh-gray-600);
letter-spacing: .08em;
text-transform: uppercase;
}
/* ==========================================================================
COLOR SWATCHES — tienda color filter (replaces the