/* PLN-18 — home.css | Estilos específicos del Home   Las fuentes (Cormorant Garamond, DM Sans) ya se cargan en base.css *//* ── HERO [2] ────────────────────────────────────────── */.hero {  background: var(--color-brand);  min-height: 85vh;  display: flex;  align-items: center;}.hero-inner {  max-width: 1200px;  margin: 0 auto;  padding: var(--space-16) var(--space-6);  display: grid;  grid-template-columns: 55fr 45fr;  gap: var(--space-16);  align-items: center;  width: 100%;}.hero-text { color: var(--color-bg); }.hero-eyebrow {  font-size: var(--text-xs);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-widest);  text-transform: uppercase;  color: var(--color-sage);  margin-bottom: var(--space-5);}.hero-title {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: clamp(2.5rem, 8vw, 4rem);  font-weight: var(--weight-light, 300);  line-height: var(--leading-tight, 1.2);  letter-spacing: var(--tracking-tight, -0.01em);  color: var(--color-bg);  margin-bottom: var(--space-6);}.hero-subtitle {  font-size: var(--text-md);  font-weight: var(--weight-regular);  line-height: var(--leading-relaxed);  color: rgba(250,249,246,0.80);  margin-bottom: var(--space-10);  max-width: 440px;}.hero-actions {  display: flex;  gap: var(--space-4);  align-items: center;  flex-wrap: wrap;}.btn-hero-primary {  background: var(--color-bg);  color: var(--color-brand);  font-size: var(--text-sm);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  padding: var(--space-4) var(--space-8);  border-radius: var(--radius-full);  border: none;  cursor: pointer;  transition: opacity var(--transition-fast), transform var(--transition-fast);  box-shadow: var(--shadow-md);}.btn-hero-primary:hover { opacity: 0.92; transform: translateY(-1px); }.btn-hero-wa {  display: flex;  align-items: center;  gap: var(--space-2);  font-size: var(--text-sm);  font-weight: var(--weight-medium);  color: rgba(250,249,246,0.85);  letter-spacing: var(--tracking-wide);  transition: color var(--transition-fast);}.btn-hero-wa:hover { color: var(--color-bg); }.btn-hero-wa svg { width: 18px; height: 18px; }.hero-image-wrap {  display: flex;  align-items: center;  justify-content: center;}.hero-image-placeholder {  width: 100%;  aspect-ratio: 4/5;  max-height: 560px;  background: rgba(250,249,246,0.10);  border-radius: var(--radius-lg);  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  gap: var(--space-3);  color: rgba(250,249,246,0.45);  font-size: var(--text-sm);  letter-spacing: var(--tracking-wide);  border: 1px solid rgba(250,249,246,0.15);}.hero-image-placeholder svg { width: 48px; height: 48px; opacity: 0.4; }/* ── VALUE PROPS [3] ─────────────────────────────────── */.value-props {  background: var(--color-bg-subtle);  padding: var(--space-12) 0;  border-bottom: 1px solid var(--color-border);}.props-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: var(--space-8);}.prop-item {  display: flex;  flex-direction: column;  align-items: center;  text-align: center;  gap: var(--space-4);  padding: var(--space-6);}.prop-icon {  width: 52px;  height: 52px;  background: var(--color-brand-light);  border-radius: var(--radius-full);  display: flex;  align-items: center;  justify-content: center;  color: var(--color-brand);  flex-shrink: 0;}.prop-icon svg { width: 24px; height: 24px; }.prop-title {  font-weight: var(--weight-medium);  font-size: var(--text-base);  color: var(--color-text-primary);  letter-spacing: var(--tracking-tight);}.prop-desc {  font-size: var(--text-sm);  color: var(--color-text-secondary);  line-height: var(--leading-relaxed);}/* ── FEATURED PRODUCTS [4] ───────────────────────────── */.featured-products {  padding: var(--space-20) 0;}.section-header {  display: flex;  align-items: flex-end;  justify-content: space-between;  margin-bottom: var(--space-10);}.section-header-text { display: flex; flex-direction: column; gap: var(--space-2); }.section-eyebrow {  font-size: var(--text-xs);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-widest);  text-transform: uppercase;  color: var(--color-text-muted);}.section-title {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-2xl);  font-weight: var(--weight-light);  color: var(--color-text-primary);  letter-spacing: var(--tracking-tight);  line-height: var(--leading-tight);}.see-all-link {  font-size: var(--text-sm);  font-weight: var(--weight-medium);  color: var(--color-brand);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  display: flex;  align-items: center;  gap: var(--space-1);  transition: gap var(--transition-fast);  white-space: nowrap;  padding-bottom: 4px;}.see-all-link:hover { gap: var(--space-3); }.products-grid {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: var(--space-5);}.product-card {  background: var(--color-surface);  border: 1px solid var(--color-border);  border-radius: var(--radius-lg);  overflow: hidden;  display: flex;  flex-direction: column;  transition: box-shadow var(--transition-base), transform var(--transition-base);  cursor: pointer;}.product-card:hover {  box-shadow: var(--shadow-lg);  transform: translateY(-2px);}.product-image {  aspect-ratio: 1;  background: var(--color-bg-subtle);  display: flex;  align-items: center;  justify-content: center;  position: relative;  overflow: hidden;}.product-image svg { width: 56px; height: 56px; color: var(--color-sage); }.product-badge {  position: absolute;  top: var(--space-3);  left: var(--space-3);  background: var(--color-brand-light);  color: var(--color-brand);  font-size: var(--text-xs);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  padding: 2px var(--space-3);  border-radius: var(--radius-full);}.product-body {  padding: var(--space-4) var(--space-5) var(--space-5);  display: flex;  flex-direction: column;  gap: var(--space-2);  flex: 1;}.product-brand {  font-size: var(--text-xs);  letter-spacing: var(--tracking-wider);  text-transform: uppercase;  color: var(--color-text-muted);}.product-name {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-lg);  font-weight: var(--weight-light);  color: var(--color-text-primary);  line-height: var(--leading-snug);  flex: 1;}.product-price {  font-size: var(--text-md);  font-weight: var(--weight-medium);  color: var(--color-brand);}.product-price-original {  font-size: var(--text-sm);  color: var(--color-text-muted);  text-decoration: line-through;  margin-left: var(--space-2);}.btn-add-cart {  display: flex;  align-items: center;  justify-content: center;  gap: var(--space-2);  background: var(--color-brand);  color: var(--color-bg);  font-size: var(--text-sm);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  padding: var(--space-3) var(--space-4);  border-radius: var(--radius-full);  border: none;  cursor: pointer;  transition: background var(--transition-fast), transform var(--transition-fast);  width: 100%;  margin-top: var(--space-2);}.btn-add-cart:hover { background: var(--color-brand-hover); transform: translateY(-1px); }/* ── BRAND PERSONAL [5] ──────────────────────────────── */.brand-personal {  background: var(--color-brand);  padding: var(--space-20) 0;}.brand-grid {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-16);  align-items: center;}.brand-photo-wrap {  display: flex;  align-items: center;  justify-content: center;}.brand-photo {  width: 100%;  max-width: 440px;  aspect-ratio: 3/4;  background: rgba(250,249,246,0.10);  border-radius: var(--radius-xl, 20px);  display: flex;  flex-direction: column;  align-items: center;  justify-content: center;  gap: var(--space-3);  color: rgba(250,249,246,0.45);  font-size: var(--text-sm);  letter-spacing: var(--tracking-wide);  border: 1px solid rgba(250,249,246,0.15);}.brand-photo svg { width: 48px; height: 48px; opacity: 0.4; }.brand-text { color: var(--color-bg); }.brand-eyebrow {  font-size: var(--text-xs);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-widest);  text-transform: uppercase;  color: var(--color-sage);  margin-bottom: var(--space-4);}.brand-name {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-3xl);  font-weight: var(--weight-light);  line-height: var(--leading-tight);  color: var(--color-bg);  margin-bottom: var(--space-2);}.brand-subtitle {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-lg);  font-style: italic;  font-weight: var(--weight-light);  color: var(--color-sage);  margin-bottom: var(--space-6);}.brand-desc {  font-size: var(--text-base);  line-height: var(--leading-relaxed);  color: rgba(250,249,246,0.80);  margin-bottom: var(--space-8);}.btn-outline-light {  display: inline-flex;  align-items: center;  gap: var(--space-2);  font-size: var(--text-sm);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  color: var(--color-bg);  border: 1px solid rgba(250,249,246,0.50);  padding: var(--space-3) var(--space-8);  border-radius: var(--radius-full);  transition: border-color var(--transition-fast), background var(--transition-fast);}.btn-outline-light:hover {  border-color: var(--color-bg);  background: rgba(250,249,246,0.10);}/* ── NEWSLETTER [5b] ─────────────────────────────────── */.newsletter {  background: var(--color-accent-light);  padding: var(--space-16) 0;  border-top: 1px solid var(--color-border);  border-bottom: 1px solid var(--color-border);}.newsletter-inner {  display: flex;  flex-direction: column;  align-items: center;  text-align: center;  gap: var(--space-4);}.newsletter-badge {  display: inline-flex;  align-items: center;  gap: var(--space-2);  background: var(--color-accent);  color: var(--color-bg);  font-size: var(--text-xs);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wider);  text-transform: uppercase;  padding: var(--space-1) var(--space-4);  border-radius: var(--radius-full);}.newsletter-title {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-2xl);  font-weight: var(--weight-light);  color: var(--color-text-primary);  letter-spacing: var(--tracking-tight);}.newsletter-subtitle {  font-size: var(--text-sm);  color: var(--color-text-secondary);  line-height: var(--leading-relaxed);  max-width: 400px;}.newsletter-form {  display: flex;  gap: var(--space-2);  width: 100%;  max-width: 460px;  margin-top: var(--space-2);}.newsletter-input {  flex: 1;  height: 48px;  background: var(--color-surface);  border: 1px solid var(--color-border);  border-radius: var(--radius-full);  padding: 0 var(--space-6);  font-family: var(--font-body, 'DM Sans');  font-size: var(--text-sm);  color: var(--color-text-primary);  outline: none;  transition: border-color var(--transition-fast);}.newsletter-input::placeholder { color: var(--color-text-muted); }.newsletter-input:focus { border-color: var(--color-brand); }.btn-newsletter {  height: 48px;  background: var(--color-brand);  color: var(--color-bg);  font-size: var(--text-sm);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  padding: 0 var(--space-10);  border-radius: var(--radius-full);  border: none;  cursor: pointer;  white-space: nowrap;  transition: background var(--transition-fast);}.btn-newsletter:hover { background: var(--color-brand-hover); }.newsletter-privacy {  font-size: var(--text-xs);  color: var(--color-text-muted);  letter-spacing: var(--tracking-wide);}/* ── CATEGORIES [6] ──────────────────────────────────── */.categories {  background: var(--color-bg-subtle);  padding: var(--space-20) 0;}.categories-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: var(--space-5);}.category-card {  background: var(--color-surface);  border: 1px solid var(--color-border);  border-radius: var(--radius-lg);  overflow: hidden;  cursor: pointer;  transition: box-shadow var(--transition-base), transform var(--transition-base);}.category-card:hover {  box-shadow: var(--shadow-lg);  transform: translateY(-3px);}.category-image {  aspect-ratio: 4/3;  background: var(--color-sage);  display: flex;  align-items: center;  justify-content: center;  color: var(--color-bg);  font-size: var(--text-sm);  letter-spacing: var(--tracking-wide);  gap: var(--space-2);  flex-direction: column;}.category-image svg { width: 36px; height: 36px; opacity: 0.7; }.category-body {  padding: var(--space-5) var(--space-5) var(--space-6);  display: flex;  align-items: center;  justify-content: space-between;}.category-name {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-xl);  font-weight: var(--weight-light);  color: var(--color-text-primary);}.category-arrow {  color: var(--color-brand);  font-size: var(--text-lg);  transition: transform var(--transition-fast);}.category-card:hover .category-arrow { transform: translateX(4px); }/* ── WHATSAPP CTA [7] ─────────────────────────────────── */.whatsapp-cta {  background: var(--color-bg);  padding: var(--space-16) 0;  border-top: 1px solid var(--color-border);  border-bottom: 1px solid var(--color-border);}.whatsapp-inner {  display: flex;  flex-direction: column;  align-items: center;  text-align: center;  gap: var(--space-5);}.whatsapp-title {  font-family: var(--font-display, 'Cormorant Garamond');  font-size: var(--text-2xl);  font-weight: var(--weight-light);  color: var(--color-text-primary);  letter-spacing: var(--tracking-tight);}.whatsapp-desc {  font-size: var(--text-base);  color: var(--color-text-secondary);  max-width: 480px;}.btn-whatsapp {  display: inline-flex;  align-items: center;  gap: var(--space-3);  background: #25D366;  color: #ffffff;  font-size: var(--text-sm);  font-weight: var(--weight-medium);  letter-spacing: var(--tracking-wide);  text-transform: uppercase;  padding: var(--space-4) var(--space-8);  border-radius: var(--radius-full);  box-shadow: var(--shadow-md);  transition: opacity var(--transition-fast), transform var(--transition-fast);}.btn-whatsapp:hover { opacity: 0.92; transform: translateY(-1px); }.btn-whatsapp svg { width: 22px; height: 22px; flex-shrink: 0; }/* ── RESPONSIVE 768px ────────────────────────────────── */@media (max-width: 768px) {  .hero-inner {    grid-template-columns: 1fr;    gap: var(--space-10);    padding: var(--space-12) var(--space-5);    min-height: auto;  }  .hero { min-height: auto; }  .hero-image-wrap { display: none; }  .hero-title { font-size: clamp(2.2rem, 8vw, 3.5rem); }  .hero-subtitle { max-width: 100%; }  .hero-actions { flex-direction: column; align-items: flex-start; gap: var(--space-5); }  .props-grid { grid-template-columns: 1fr; gap: var(--space-2); }  .prop-item { flex-direction: row; text-align: left; gap: var(--space-5); align-items: flex-start; }  .products-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }  .brand-grid {    grid-template-columns: 1fr;    gap: var(--space-10);  }  .brand-photo-wrap { display: none; }  .brand-name { font-size: var(--text-2xl); }  .newsletter-form { flex-direction: column; }  .newsletter-input { width: 100%; }  .categories-grid { grid-template-columns: 1fr; gap: var(--space-4); }}/* ── FOOTER LINK ──────────────────────────────────────── */.footer-link {  color: var(--color-brand);  text-decoration: none;  transition: text-decoration var(--transition-fast);}.footer-link:hover { text-decoration: underline; }