/* ===================================================   UNIVERSAL — Utilidades, grids, tablas, media   Protepiel Design System   =================================================== *//* ===== TIPOGRAFÍA EXTENDIDA ===== */h4 {  font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);  font-weight: 600;  line-height: 1.3;  font-family: var(--font-body);  color: var(--on-surface-variant);}h5 {  font-size: 0.78rem;  font-weight: 700;  font-family: var(--font-body);  color: var(--secondary);  text-transform: uppercase;  letter-spacing: 0.13em;}h6 {  font-size: 0.72rem;  font-weight: 600;  font-family: var(--font-body);  color: var(--on-surface-variant);  text-transform: uppercase;  letter-spacing: 0.1em;}small {  font-size: 0.8rem;  font-family: var(--font-body);  color: var(--secondary);  font-weight: 600;  letter-spacing: 0.1em;  text-transform: uppercase;}strong, b { font-weight: 700; color: var(--on-surface); }em, i     { font-style: italic; }blockquote {  position: relative;  padding: var(--space-6) var(--space-4) var(--space-4);  font-family: var(--font-display);  font-style: italic;  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);  line-height: 1.5;  color: var(--on-surface);  background: var(--surface-container);  border-radius: var(--radius-xl);  border-left: 4px solid var(--secondary);  margin: var(--space-6) 0;}blockquote::before {  content: '\201C';  position: absolute;  top: var(--space-1);  left: var(--space-3);  font-size: 5rem;  line-height: 1;  color: var(--secondary);  opacity: 0.2;}hr {  border: 0;  height: 1px;  background: linear-gradient(to right, transparent, var(--surface-highest), transparent);  margin: var(--space-8) 0;}/* ===== LISTAS ===== */ul, ol {  padding-left: 1.5rem;  margin: var(--space-3) 0;}li {  font-size: clamp(1rem, 0.95rem + 0.2vw, 1.08rem);  font-family: var(--font-body);  color: var(--on-surface-variant);  margin: 0.5rem 0;  line-height: 1.65;}::marker {  color: var(--secondary);  font-size: 1.1em;}/* ===== MEDIA ===== */img {  display: block;  max-width: 100%;  height: auto;  object-fit: cover;  border-radius: var(--radius-lg);}iframe {  width: 100%;  max-width: 100%;  border-radius: var(--radius-lg);}/* ===== TABLAS ===== */.table-container {  display: block;  width: 100%;  overflow-x: auto;  -webkit-overflow-scrolling: touch;  border-radius: var(--radius-lg);  box-shadow: var(--shadow-ambient);  margin: var(--space-6) 0;}table {  width: 100%;  border-collapse: separate;  border-spacing: 0;  background: var(--surface-highest);  border-radius: var(--radius-lg);  overflow: hidden;  font-family: var(--font-body);}table th {  background: var(--primary);  color: var(--on-primary);  padding: var(--space-3) var(--space-3);  text-align: left;  font-size: 0.75rem;  letter-spacing: 0.1em;  text-transform: uppercase;  font-weight: 700;}table td {  padding: var(--space-3);  border-bottom: 1px solid var(--surface-highest);  font-size: 0.95rem;  color: var(--on-surface-variant);  background: var(--surface-low);}table tbody tr:last-child td { border-bottom: none; }table tbody tr:hover td { background: var(--surface-container); }/* ===== LAYOUT UTILITIES ===== */.flow > * + * { margin-top: var(--flow-space, 1.25em); }.flow--tight > * + * { margin-top: 0.75em; }.flow--loose > * + * { margin-top: 2em; }/* Two columns */.two-columns {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-8);  align-items: center;}/* Secciones full-bleed */.seccion-completa {  background-color: var(--bg-color, var(--surface-low));  box-shadow: 0 0 0 100vmax var(--bg-color, var(--surface-low));  clip-path: inset(0 -100vmax);}.seccion-completa--principal   { --bg-color: var(--primary);           color: var(--on-primary); }.seccion-completa--teal        { --bg-color: var(--secondary);          color: var(--on-secondary); }.seccion-completa--acento      { --bg-color: var(--secondary-container); }.seccion-completa--superficie  { --bg-color: var(--surface-low); }.seccion-completa--gris        { --bg-color: var(--surface-highest); }.seccion-completa--warm        { --bg-color: var(--accent-container); }/* ===== BENTO GRID ===== */.bento {  display: grid;  gap: var(--bento-gap, var(--space-3));}.bento--2col { grid-template-columns: 1fr 1fr; }.bento--3col { grid-template-columns: repeat(3, 1fr); }.bento--4col { grid-template-columns: repeat(4, 1fr); }.bento--asym { grid-template-columns: 2fr 1fr; }.bento--asym-rev { grid-template-columns: 1fr 2fr; }.bento-cell {  background: var(--cell-bg, var(--surface-container));  border-radius: var(--radius-xl);  padding: var(--cell-pad, var(--space-4));  overflow: hidden;  position: relative;  transition: transform 0.25s ease, box-shadow 0.25s ease;}.bento-cell--interactive:hover {  transform: translateY(-4px);  box-shadow: var(--shadow-float);}.bento-cell--surface   { --cell-bg: var(--surface); }.bento-cell--low       { --cell-bg: var(--surface-low); }.bento-cell--container { --cell-bg: var(--surface-container); }.bento-cell--primary   { --cell-bg: var(--primary);    color: var(--on-primary); }.bento-cell--teal      { --cell-bg: var(--secondary);  color: var(--on-secondary); }.bento-cell--warm      { --cell-bg: var(--accent-container); }.bento-cell--white     { --cell-bg: #ffffff; box-shadow: var(--shadow-ambient); }.bento-cell--span-2  { grid-column: span 2; }.bento-cell--row-2   { grid-row:    span 2; }/* ===== CARD ===== */.card {  background: var(--surface);  border-radius: var(--radius-xl);  box-shadow: var(--shadow-ambient);  padding: var(--space-4);  transition: box-shadow 0.25s ease, transform 0.25s ease;}.card--interactive:hover {  transform: translateY(-4px);  box-shadow: var(--shadow-float);}/* ===== GRID RESPONSIVE ===== */.grid-responsive {  display: grid;  gap: var(--gap, var(--space-4));  grid-template-columns: repeat(auto-fit, minmax(var(--min-size, 240px), 1fr));}/* ===== UTILIDADES TIPOGRÁFICAS ===== */.label-organic {  font-family: var(--font-body);  font-size: 0.72rem;  font-weight: 700;  letter-spacing: 0.15em;  text-transform: uppercase;  color: var(--secondary);}.display-serif {  font-family: var(--font-display);  font-style: italic;  line-height: 1.05;  letter-spacing: -0.03em;}.text-balance { text-wrap: balance; }/* ===== BADGE / PILL ===== */.badge {  display: inline-flex;  align-items: center;  gap: 0.35rem;  padding: 0.3em 0.85em;  border-radius: var(--radius-full);  font-size: 0.72rem;  font-weight: 700;  letter-spacing: 0.08em;  text-transform: uppercase;  font-family: var(--font-body);}.badge--green  { background: var(--secondary-container); color: var(--primary); }.badge--warm   { background: var(--accent-container);    color: var(--accent); }.badge--primary { background: var(--primary); color: var(--on-primary); }/* ===== ANIMACIONES ===== */@keyframes fadeUp {  from { opacity: 0; transform: translateY(18px); }  to   { opacity: 1; transform: translateY(0); }}@keyframes pulse-green {  0%, 100% { box-shadow: 0 0 0 0 rgba(26,158,138,0.35); }  50%       { box-shadow: 0 0 0 10px rgba(26,158,138,0); }}.animate-fade-up { animation: fadeUp 0.5s ease both; }/* ===== DIVISORES ORGÁNICOS ===== */.divider-leaf {  display: flex;  align-items: center;  gap: var(--space-3);  margin: var(--space-6) 0;  color: var(--secondary);}.divider-leaf::before,.divider-leaf::after {  content: '';  flex: 1;  height: 1px;  background: var(--outline-variant);}/* ===== FORMULARIOS ===== */input, textarea, select {  font-family: var(--font-body);  font-size: 1rem;  padding: 0.875rem 1rem;  background: var(--surface-container);  border: 1.5px solid var(--surface-highest);  border-radius: var(--radius-md);  color: var(--on-surface);  transition: border-color 0.2s ease, box-shadow 0.2s ease;  width: 100%;}input:focus, textarea:focus, select:focus {  outline: none;  border-color: var(--secondary);  box-shadow: 0 0 0 3px rgba(26,158,138,0.15);}label {  font-size: 0.85rem;  font-weight: 600;  color: var(--on-surface);  font-family: var(--font-body);  margin-bottom: 0.4rem;  display: block;}/* ===== PRINT ===== */@media print {  :is(h1,h2,h3,h4,h5,h6) { color: #000 !important; }  .boton { display: none !important; }}/* ===== RESPONSIVE ===== */@media (max-width: 768px) {  .two-columns,  .bento--2col,  .bento--3col,  .bento--4col,  .bento--asym,  .bento--asym-rev { grid-template-columns: 1fr; }  .bento-cell--span-2 { grid-column: span 1; }  .bento-cell--row-2  { grid-row:    span 1; }}/* ===================================================   FOOTER — Protepiel   =================================================== */.site-footer {  background: var(--primary);  color: rgba(255,255,255,0.85);  padding-block: var(--space-12) var(--space-6);  margin-top: var(--space-12);}.footer-grid {  display: grid;  grid-template-columns: 2fr 1fr 1fr 1fr;  gap: var(--space-8);  width: min(calc(100% - 2rem), 1280px);  margin-inline: auto;}.footer-brand { display: flex; flex-direction: column; gap: var(--space-3); }.footer-logo {  font-family: var(--font-display);  font-size: 1.5rem;  font-weight: 700;  font-style: italic;  color: var(--surface);  letter-spacing: -0.02em;}.footer-desc {  font-size: 0.9rem;  color: rgba(255,255,255,0.65);  line-height: 1.65;  max-width: 36ch;}.footer-social {  display: flex;  gap: var(--space-2);  margin-top: var(--space-2);}.footer-social a {  width: 38px;  height: 38px;  background: rgba(255,255,255,0.10);  border-radius: var(--radius-lg);  display: flex;  align-items: center;  justify-content: center;  color: rgba(255,255,255,0.80);  transition: background 0.2s ease, color 0.2s ease;  opacity: 1;}.footer-social a:hover {  background: var(--secondary);  color: #fff;  opacity: 1;}.footer-col { display: flex; flex-direction: column; gap: var(--space-3); }.footer-col-title {  font-size: 0.72rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.15em;  color: var(--secondary-container);  font-family: var(--font-body);}.footer-col ul {  list-style: none;  padding: 0;  margin: 0;  display: flex;  flex-direction: column;  gap: 0.6rem;}.footer-col ul li a {  font-size: 0.88rem;  color: rgba(255,255,255,0.65);  transition: color 0.2s ease;  opacity: 1;  font-weight: 400;}.footer-col ul li a:hover {  color: var(--secondary-container);  opacity: 1;}.footer-contact-item {  display: flex;  align-items: center;  gap: 0.6rem;  font-size: 0.88rem;  color: rgba(255,255,255,0.65);}.footer-contact-item svg { flex-shrink: 0; color: var(--secondary); }/* Footer bottom */.footer-bottom {  width: min(calc(100% - 2rem), 1280px);  margin-inline: auto;  margin-top: var(--space-8);  padding-top: var(--space-4);  border-top: 1px solid rgba(255,255,255,0.1);  display: flex;  align-items: center;  justify-content: space-between;  flex-wrap: wrap;  gap: var(--space-2);}.footer-copy {  font-size: 0.8rem;  color: rgba(255,255,255,0.45);}.footer-legal {  display: flex;  gap: var(--space-3);}.footer-legal a {  font-size: 0.8rem;  color: rgba(255,255,255,0.45);  font-weight: 400;  opacity: 1;}.footer-legal a:hover {  color: var(--secondary-container);  opacity: 1;}/* ===== RESPONSIVE FOOTER ===== */@media (max-width: 900px) {  .footer-grid { grid-template-columns: 1fr 1fr; }}@media (max-width: 560px) {  .footer-grid { grid-template-columns: 1fr; gap: var(--space-6); }  .footer-bottom { flex-direction: column; align-items: flex-start; }}/* ===================================================   HOME — Secciones de la página principal   Organic · Bento · Editorial Luxury   =================================================== *//* ===== HERO EDITORIAL ===== */.hero-home {  padding-top: 6rem;  padding-bottom: 0;  background: var(--surface-low);  box-shadow: 0 0 0 100vmax var(--surface-low);  clip-path: inset(0 -100vmax);}.hero-home__inner {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-8);  align-items: end;  min-height: 88dvh;  padding-bottom: 0;}.hero-home__content {  display: flex;  flex-direction: column;  gap: var(--space-4);  padding-bottom: var(--space-12);  align-self: center;}.hero-home__eyebrow {  display: flex;  align-items: center;  gap: 0.75rem;  font-family: var(--font-body);  font-size: 0.72rem;  font-weight: 700;  letter-spacing: 0.16em;  text-transform: uppercase;  color: var(--secondary);}.hero-home__eyebrow::before {  content: '';  display: inline-block;  width: 2.5rem;  height: 2px;  background: var(--secondary);  border-radius: 2px;}.hero-home__title {  font-family: var(--font-display);  font-style: italic;  font-weight: 700;  font-size: clamp(3.2rem, 2.5rem + 3vw, 6rem);  line-height: 1.0;  letter-spacing: -0.03em;  color: var(--on-surface);}.hero-home__title em {  color: var(--secondary);  font-style: italic;}.hero-home__lead {  font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);  color: var(--on-surface-variant);  line-height: 1.7;  max-width: 48ch;}.hero-home__actions {  display: flex;  flex-wrap: wrap;  gap: var(--space-2);  align-items: center;  margin-top: var(--space-2);}.hero-home__price-hint {  font-size: 0.8rem;  color: var(--on-surface-variant);  font-family: var(--font-body);}.hero-home__price-hint strong {  color: var(--primary);  font-size: 1rem;}/* Imagen hero */.hero-home__media {  align-self: end;  position: relative;}.hero-home__img-wrap {  position: relative;  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  overflow: hidden;  max-height: 75dvh;}.hero-home__img-wrap img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  display: block;}/* Badge flotante en hero */.hero-badge {  position: absolute;  top: var(--space-4);  right: var(--space-4);  background: var(--surface);  border-radius: var(--radius-xl);  padding: var(--space-3) var(--space-4);  box-shadow: var(--shadow-float);  display: flex;  flex-direction: column;  align-items: center;  gap: 0.25rem;  text-align: center;}.hero-badge__number {  font-family: var(--font-display);  font-size: 1.8rem;  font-weight: 700;  font-style: italic;  color: var(--secondary);  line-height: 1;}.hero-badge__text {  font-size: 0.65rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.1em;  color: var(--on-surface-variant);}/* ===== TRUST BAR ===== */.trust-bar {  background: var(--primary);  box-shadow: 0 0 0 100vmax var(--primary);  clip-path: inset(0 -100vmax);  padding: var(--space-6) 0;}.trust-bar__grid {  display: grid;  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));  gap: var(--space-4);  max-width: 1280px;  margin-inline: auto;  padding-inline: var(--space-4);  align-items: start;}.trust-bar__cell {  display: flex;  flex-direction: column;  gap: 0.4rem;  border-top: 1px solid rgba(255,255,255,0.12);  padding-top: var(--space-3);}.trust-bar__number {  font-family: var(--font-display);  font-style: italic;  font-size: clamp(2.2rem, 3vw, 3rem);  font-weight: 700;  color: var(--secondary-container);  line-height: 1;  letter-spacing: -0.02em;}.trust-bar__label {  font-size: 0.72rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.14em;  color: rgba(255,255,255,0.80);}/* ===== BENEFICIOS BENTO ===== */.benefits-section {}.benefits-bento {  display: grid;  grid-template-columns: repeat(4, 1fr);  gap: var(--space-3);  --bento-gap: var(--space-3);}.benefit-cell {  background: var(--surface);  border-radius: var(--radius-xl);  padding: var(--space-6) var(--space-4);  display: flex;  flex-direction: column;  gap: var(--space-3);  box-shadow: var(--shadow-ambient);  transition: transform 0.25s ease, box-shadow 0.25s ease;}.benefit-cell:hover {  transform: translateY(-4px);  box-shadow: var(--shadow-float);}.benefit-cell__icon {  width: 52px;  height: 52px;  background: var(--secondary-container);  border-radius: var(--radius-lg);  display: flex;  align-items: center;  justify-content: center;  color: var(--secondary);  flex-shrink: 0;}.benefit-cell__title {  font-size: 1rem;  font-weight: 700;  color: var(--primary);  font-family: var(--font-body);  line-height: 1.3;}.benefit-cell__text {  font-size: 0.9rem;  color: var(--on-surface-variant);  line-height: 1.6;  max-width: unset;}/* ===== ANTES/DESPUÉS ===== */.antes-despues {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-3);  position: relative;}.antes-despues__panel {  position: relative;  border-radius: var(--radius-xl);  overflow: hidden;  aspect-ratio: 4/3;}.antes-despues__panel img {  width: 100%;  height: 100%;  object-fit: cover;  border-radius: var(--radius-xl);}.antes-despues__label {  position: absolute;  top: var(--space-3);  left: var(--space-3);  background: var(--surface);  border-radius: var(--radius-full);  padding: 0.3rem 0.85rem;  font-size: 0.72rem;  font-weight: 700;  letter-spacing: 0.12em;  text-transform: uppercase;  color: var(--primary);  box-shadow: var(--shadow-ambient);}.antes-despues__label--despues {  background: var(--secondary);  color: var(--on-secondary);}/* ===== PRODUCTO CARD HOME ===== */.producto-home {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-8);  align-items: center;}.producto-home__media img {  border-radius: var(--radius-xl);  box-shadow: var(--shadow-deep);  width: 100%;  max-width: 480px;  margin-inline: auto;}.producto-home__info {  display: flex;  flex-direction: column;  gap: var(--space-4);}.producto-home__price {  display: flex;  align-items: baseline;  gap: var(--space-2);  flex-wrap: wrap;}.producto-home__price-main {  font-family: var(--font-display);  font-size: 2.5rem;  font-weight: 700;  font-style: italic;  color: var(--primary);  line-height: 1;}.producto-home__price-note {  font-size: 0.85rem;  color: var(--on-surface-variant);}.producto-home__discount-hint {  background: var(--accent-container);  border-radius: var(--radius-md);  padding: var(--space-3) var(--space-4);  display: flex;  flex-direction: column;  gap: 0.5rem;}.producto-home__discount-hint h4 {  font-size: 0.85rem;  font-weight: 700;  color: var(--accent);  font-family: var(--font-body);  letter-spacing: 0.02em;}.discount-row {  display: flex;  align-items: center;  justify-content: space-between;  font-size: 0.88rem;  color: var(--on-surface-variant);}.discount-row strong { color: var(--accent); }/* ===== TESTIMONIOS ===== */.testimonios-grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: var(--space-4);}.testimonio-card {  background: var(--surface);  border-radius: var(--radius-xl);  padding: var(--space-6) var(--space-4);  box-shadow: var(--shadow-ambient);  display: flex;  flex-direction: column;  gap: var(--space-3);}.testimonio-card__stars {  display: flex;  gap: 3px;  color: var(--accent);}.testimonio-card__text {  font-family: var(--font-display);  font-style: italic;  font-size: 1.05rem;  color: var(--on-surface);  line-height: 1.6;  max-width: unset;}.testimonio-card__author {  display: flex;  flex-direction: column;  gap: 0.2rem;  margin-top: auto;  padding-top: var(--space-3);  border-top: 1px solid var(--outline-variant);}.testimonio-card__name {  font-size: 0.9rem;  font-weight: 700;  color: var(--on-surface);}.testimonio-card__detail {  font-size: 0.78rem;  color: var(--on-surface-variant);}/* ===== BLOG PREVIEW ===== */.blog-preview__grid {  display: grid;  grid-template-columns: repeat(3, 1fr);  gap: var(--space-4);}.post-preview {  background: var(--surface);  border-radius: var(--radius-xl);  overflow: hidden;  box-shadow: var(--shadow-ambient);  display: flex;  flex-direction: column;  transition: transform 0.25s ease, box-shadow 0.25s ease;}.post-preview:hover {  transform: translateY(-4px);  box-shadow: var(--shadow-float);}.post-preview__img {  width: 100%;  aspect-ratio: 16/9;  object-fit: cover;  border-radius: 0;}.post-preview__body {  padding: var(--space-4);  display: flex;  flex-direction: column;  gap: var(--space-2);  flex: 1;}.post-preview__category {  font-size: 0.68rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.12em;  color: var(--secondary);}.post-preview__title {  font-size: 1.05rem;  font-weight: 700;  color: var(--on-surface);  font-family: var(--font-display);  line-height: 1.35;  max-width: unset;}.post-preview__excerpt {  font-size: 0.88rem;  color: var(--on-surface-variant);  line-height: 1.6;  max-width: unset;  flex: 1;}.post-preview__link {  font-size: 0.85rem;  font-weight: 700;  color: var(--secondary);  display: flex;  align-items: center;  gap: 0.35rem;  margin-top: var(--space-2);}/* ===== CTA FINAL ===== */.cta-final {  text-align: center;  display: flex;  flex-direction: column;  align-items: center;  gap: var(--space-4);  padding-block: var(--space-12);}.cta-final__title {  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);  font-family: var(--font-display);  font-style: italic;  color: var(--on-primary);  max-width: 22ch;  text-wrap: balance;}.cta-final__sub {  color: rgba(255,255,255,0.82);  max-width: 52ch;  text-align: center;}/* ===== RESPONSIVE HOME ===== */@media (max-width: 1024px) {  .benefits-bento { grid-template-columns: repeat(2, 1fr); }  .testimonios-grid { grid-template-columns: repeat(2, 1fr); }  .blog-preview__grid { grid-template-columns: repeat(2, 1fr); }}@media (max-width: 768px) {  .hero-home__inner {    grid-template-columns: 1fr;    min-height: auto;    padding-top: var(--space-4);  }  .hero-home__media { order: -1; }  .hero-home__img-wrap { border-radius: var(--radius-xl); max-height: 50vw; }  .hero-home__img-wrap img { border-radius: var(--radius-xl); }  .benefits-bento,  .testimonios-grid,  .blog-preview__grid,  .antes-despues,  .producto-home { grid-template-columns: 1fr; }  .hero-badge { display: none; }}/* ===================================================   PRODUCTO — Página de producto y modal de compra   =================================================== *//* ===== HEADER PRODUCTO ===== */.header-producto {  padding-top: 5.5rem;  padding-bottom: 0;  background: var(--surface-low);  box-shadow: 0 0 0 100vmax var(--surface-low);  clip-path: inset(0 -100vmax);}.header-producto__inner {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-8);  align-items: center;  padding-block: var(--space-8);}.header-producto__content { display: flex; flex-direction: column; gap: var(--space-4); }.header-producto__eyebrow {  font-size: 0.72rem;  font-weight: 700;  letter-spacing: 0.15em;  text-transform: uppercase;  color: var(--secondary);  font-family: var(--font-body);}.header-producto__media img {  border-radius: var(--radius-xl);  box-shadow: var(--shadow-deep);  width: 100%;  max-width: 440px;  margin-inline: auto;}/* Breadcrumb */.breadcrumb {  display: flex;  align-items: center;  gap: 0.5rem;  flex-wrap: wrap;  font-size: 0.82rem;  color: var(--on-surface-variant);  margin-bottom: var(--space-4);}.breadcrumb a { color: var(--secondary); font-weight: 500; }.breadcrumb .separator { color: var(--surface-highest); }/* ===== INGREDIENTES / FEATURES ===== */.features-grid {  display: grid;  grid-template-columns: repeat(2, 1fr);  gap: var(--space-3);}.feature-item {  display: flex;  align-items: flex-start;  gap: var(--space-2);  padding: var(--space-3);  background: var(--surface);  border-radius: var(--radius-lg);  box-shadow: var(--shadow-ambient);}.feature-item__icon {  width: 36px;  height: 36px;  background: var(--secondary-container);  border-radius: var(--radius-md);  display: flex;  align-items: center;  justify-content: center;  color: var(--secondary);  flex-shrink: 0;}.feature-item__title {  font-size: 0.88rem;  font-weight: 700;  color: var(--primary);  font-family: var(--font-body);  line-height: 1.3;}.feature-item__desc {  font-size: 0.82rem;  color: var(--on-surface-variant);  line-height: 1.5;  max-width: unset;  margin-top: 0.2rem;}/* ===== FAQS ACCORDION ===== */.faqs-section { }.accordion {  display: flex;  flex-direction: column;  gap: var(--space-2);}.accordion-item {  background: var(--surface);  border-radius: var(--radius-lg);  box-shadow: var(--shadow-ambient);  overflow: hidden;}.accordion-button {  width: 100%;  display: flex;  align-items: center;  justify-content: space-between;  gap: var(--space-3);  padding: var(--space-4);  background: none;  border: none;  cursor: pointer;  text-align: left;  font-family: var(--font-body);  font-size: 1rem;  font-weight: 600;  color: var(--on-surface);  transition: color 0.2s ease;}.accordion-button:hover { color: var(--primary); }.accordion-button[aria-expanded="true"] { color: var(--secondary); }.accordion-icon {  width: 20px;  height: 20px;  flex-shrink: 0;  color: var(--secondary);  transition: transform 0.3s ease;}.accordion-button[aria-expanded="true"] .accordion-icon {  transform: rotate(45deg);}.accordion-content {  display: none;  padding: 0 var(--space-4) var(--space-4);  font-size: 0.95rem;  color: var(--on-surface-variant);  line-height: 1.75;  max-width: unset;}.accordion-content.active { display: block; }.accordion-content p { max-width: unset; }/* ===== MODAL DE COMPRA ===== */.modal-overlay {  position: fixed;  inset: 0;  background: rgba(26,74,53,0.55);  backdrop-filter: blur(4px);  -webkit-backdrop-filter: blur(4px);  z-index: 2000;  display: flex;  align-items: flex-end;  justify-content: center;  opacity: 0;  pointer-events: none;  transition: opacity 0.3s ease;}.modal-overlay.is-open {  opacity: 1;  pointer-events: auto;}.modal-panel {  background: var(--surface);  border-radius: var(--radius-xl) var(--radius-xl) 0 0;  padding: var(--space-8) var(--space-6);  width: min(100%, 580px);  max-height: 92dvh;  overflow-y: auto;  transform: translateY(100%);  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);  position: relative;}.modal-overlay.is-open .modal-panel {  transform: translateY(0);}.modal-close {  position: absolute;  top: var(--space-4);  right: var(--space-4);  background: var(--surface-container);  border: none;  border-radius: 50%;  width: 36px;  height: 36px;  display: flex;  align-items: center;  justify-content: center;  cursor: pointer;  color: var(--on-surface-variant);  transition: background 0.2s ease;}.modal-close:hover { background: var(--surface-highest); }.modal-title {  font-size: 1.5rem;  font-family: var(--font-display);  font-style: italic;  font-weight: 700;  color: var(--primary);  margin-bottom: var(--space-6);  max-width: unset;}/* Selector de cantidad */.qty-selector {  display: flex;  flex-direction: column;  gap: var(--space-2);  margin-bottom: var(--space-6);}.qty-selector__label {  font-size: 0.85rem;  font-weight: 700;  color: var(--on-surface);}.qty-controls {  display: flex;  align-items: center;  gap: var(--space-3);}.qty-btn {  width: 42px;  height: 42px;  border-radius: 50%;  border: 2px solid var(--secondary);  background: transparent;  color: var(--secondary);  font-size: 1.4rem;  font-weight: 700;  cursor: pointer;  display: flex;  align-items: center;  justify-content: center;  transition: all 0.2s ease;  flex-shrink: 0;}.qty-btn:hover {  background: var(--secondary);  color: var(--on-secondary);}.qty-input {  width: 70px;  text-align: center;  font-size: 1.3rem;  font-weight: 700;  color: var(--primary);  font-family: var(--font-display);  padding: 0.5rem;  border: 2px solid var(--outline-variant);  border-radius: var(--radius-md);  background: var(--surface);}/* Resumen de precio */.precio-resumen {  background: var(--surface-container);  border-radius: var(--radius-lg);  padding: var(--space-4);  margin-bottom: var(--space-6);  display: flex;  flex-direction: column;  gap: var(--space-2);}.precio-row {  display: flex;  justify-content: space-between;  align-items: center;  font-size: 0.9rem;  color: var(--on-surface-variant);}.precio-row--total {  border-top: 1px solid var(--surface-highest);  padding-top: var(--space-2);  margin-top: var(--space-1);  font-size: 1.1rem;  font-weight: 700;  color: var(--on-surface);}.precio-row--total span:last-child {  font-family: var(--font-display);  font-style: italic;  font-size: 1.5rem;  color: var(--secondary);}.descuento-badge {  display: inline-flex;  align-items: center;  gap: 0.3rem;  background: var(--accent-container);  color: var(--accent);  padding: 0.25rem 0.75rem;  border-radius: var(--radius-full);  font-size: 0.75rem;  font-weight: 700;  letter-spacing: 0.08em;}/* Formulario modal */.modal-form {  display: flex;  flex-direction: column;  gap: var(--space-3);}.form-group {  display: flex;  flex-direction: column;  gap: 0.4rem;}.form-row {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-3);}.modal-submit {  margin-top: var(--space-2);  width: 100%;  justify-content: center;  padding: 1rem 2rem;  font-size: 1rem;  border-radius: var(--radius-full);  animation: pulse-green 2.5s ease-in-out infinite;}.modal-submit:hover { animation: none; }.modal-disclaimer {  font-size: 0.75rem;  color: var(--on-surface-variant);  text-align: center;  line-height: 1.5;  max-width: unset;}/* Estado de éxito */.modal-success {  display: none;  flex-direction: column;  align-items: center;  gap: var(--space-4);  text-align: center;  padding: var(--space-8) var(--space-4);}.modal-success.is-visible { display: flex; }.modal-success__icon {  width: 72px;  height: 72px;  background: var(--secondary-container);  border-radius: 50%;  display: flex;  align-items: center;  justify-content: center;  color: var(--secondary);}/* ===== RESPONSIVE PRODUCTO ===== */@media (max-width: 768px) {  .header-producto__inner {    grid-template-columns: 1fr;    padding-block: var(--space-6) var(--space-4);  }  .header-producto__media { order: -1; }  .features-grid { grid-template-columns: 1fr; }  .modal-panel { padding: var(--space-6) var(--space-4); }  .form-row { grid-template-columns: 1fr; }}/* ===================================================   BLOG — Listado y artículos   =================================================== *//* Hero blog */.blog-hero {  padding-top: 6rem;  background: var(--primary);  box-shadow: 0 0 0 100vmax var(--primary);  clip-path: inset(0 -100vmax);  color: var(--on-primary);}.blog-hero h1 { color: var(--on-primary); max-width: 22ch; }.blog-hero p  { color: rgba(255,255,255,0.78); }/* Grid de posts */.blog-grid {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));  gap: var(--space-6);}/* Post card */.post-card {  background: var(--surface);  border-radius: var(--radius-xl);  overflow: hidden;  box-shadow: var(--shadow-ambient);  display: flex;  flex-direction: column;  transition: transform 0.25s ease, box-shadow 0.25s ease;}.post-card:hover {  transform: translateY(-5px);  box-shadow: var(--shadow-float);}.post-card__img {  width: 100%;  aspect-ratio: 16/9;  object-fit: cover;  border-radius: 0;}.post-card__body {  padding: var(--space-4);  display: flex;  flex-direction: column;  gap: var(--space-2);  flex: 1;}.post-card__category {  font-size: 0.68rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.13em;  color: var(--secondary);}.post-card__title {  font-size: 1.1rem;  font-weight: 700;  color: var(--on-surface);  font-family: var(--font-display);  line-height: 1.3;  max-width: unset;}.post-card__excerpt {  font-size: 0.88rem;  color: var(--on-surface-variant);  line-height: 1.65;  max-width: unset;  flex: 1;}.post-card__meta {  display: flex;  align-items: center;  gap: var(--space-2);  font-size: 0.78rem;  color: var(--on-surface-variant);  padding-top: var(--space-2);  border-top: 1px solid var(--outline-variant);  margin-top: auto;}/* Artículo individual */.post-article {  display: grid;  grid-template-columns: 1fr min(65ch, 100%) 1fr;}.post-article > * { grid-column: 2; }.post-article .wide {  grid-column: 1 / -1;  width: 100%;}.post-hero-img {  width: 100%;  aspect-ratio: 16/7;  object-fit: cover;  border-radius: var(--radius-xl);  margin-block: var(--space-6);}.post-header {  padding-top: 5.5rem;  padding-bottom: var(--space-4);}.post-meta-bar {  display: flex;  align-items: center;  flex-wrap: wrap;  gap: var(--space-2);  font-size: 0.82rem;  color: var(--on-surface-variant);  margin-bottom: var(--space-4);}.post-meta-bar time { font-weight: 600; }/* Navegación entre posts */.post-nav {  display: grid;  grid-template-columns: 1fr 1fr;  gap: var(--space-4);  margin-top: var(--space-8);  padding-top: var(--space-6);  border-top: 1px solid var(--outline-variant);}.post-nav a {  background: var(--surface-low);  border-radius: var(--radius-lg);  padding: var(--space-3) var(--space-4);  display: flex;  flex-direction: column;  gap: 0.3rem;  color: var(--on-surface);  opacity: 1;  transition: background 0.2s ease;}.post-nav a:hover { background: var(--surface-container); }.post-nav__label {  font-size: 0.72rem;  font-weight: 700;  text-transform: uppercase;  letter-spacing: 0.1em;  color: var(--secondary);}.post-nav__title {  font-size: 0.9rem;  font-weight: 600;  color: var(--on-surface);  line-height: 1.35;}@media (max-width: 640px) {  .blog-grid { grid-template-columns: 1fr; }  .post-nav { grid-template-columns: 1fr; }}