/* ==========================================================================
   PIEL 4 · ILUSTRADO
   La web de siempre contada con imágenes: paneles de color suave por tratamiento, cada uno
   con su ilustración de línea y fotos reales de sus productos; portada y video en marcos
   redondeados; cifras reales de la tienda; íconos propios en el menú de la tienda.
   Un color por panel (nada de degradados ni sombras dramáticas).
   ========================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Albert+Sans:wght@400;500;600&family=Cormorant+Garamond:ital,wght@1,500;1,600&display=swap");

html[data-piel="ilustrado"] {
  --color-brand: #b42e58;
  --color-brand-dark: #941f45;
  --color-brand-10: rgba(180, 46, 88, 0.12);
  --color-accent: #b42e58;
  --tinta: #1f1a1c;

  --t-rosa: #fbe4ea;     --i-rosa: #9c2c50;
  --t-salvia: #e7eddb;   --i-salvia: #4c5a2a;
  --t-durazno: #fde8d6;  --i-durazno: #94461a;
  --t-lavanda: #ede7f6;  --i-lavanda: #59408a;
  --t-arena: #f3ede1;    --i-arena: #6a5733;
  --t-celeste: #e0eff1;  --i-celeste: #2b6570;

  --font-primary: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Albert Sans", system-ui, sans-serif;

  --color-black: #1f1a1c;
  --color-text: #3b3436;
  --color-text-light: #6d6366;
  --color-bg: #fffaf7;
  --color-bg-alt: #f8f0eb;
  --color-bg-elevated: #ffffff;
  --color-surface: #ffffff;
  --color-border: #ecdfd8;
  --color-border-light: #f3e9e3;

  --header-bg: #fffaf7;
  --header-text: #1f1a1c;
  --header-border: #ecdfd8;
  --header-shadow: none;
  --color-topbar-bg: #1f1a1c;
  --color-topbar-text: #f3ece8;
  --r-panel: 22px;
}
html.dark[data-piel="ilustrado"] {
  /* Modo oscuro 100 % neutro (R=G=B): el color vive solo en íconos, precios, etiquetas y acentos */
  --color-brand: #f08aa8;
  --color-brand-dark: #f7a9c0;
  --color-accent: #f08aa8;
  --tinta: #f5f5f5;
  --t-rosa: #171717;     --i-rosa: #f5a9be;
  --t-salvia: #171717;   --i-salvia: #c4d39e;
  --t-durazno: #171717;  --i-durazno: #f3bd8e;
  --t-lavanda: #171717;  --i-lavanda: #c9b6ef;
  --t-arena: #171717;    --i-arena: #e1cfa5;
  --t-celeste: #171717;  --i-celeste: #9fd3db;
  --color-black: #f5f5f5;
  --color-text: #ececec;
  --color-text-light: #a3a3a3;
  --color-bg: #0f0f0f;
  --color-bg-alt: #171717;
  --color-bg-elevated: #171717;
  --color-surface: #171717;
  --color-card: #171717;
  --color-border: #2a2a2a;
  --color-border-light: #1f1f1f;
  --color-shadow: rgba(0, 0, 0, 0.4);
  --header-bg: #0f0f0f;
  --header-text: #f5f5f5;
  --header-border: #2a2a2a;
  --color-topbar-bg: #000;
  --color-topbar-text: #d4d4d4;
}
html[data-piel="ilustrado"] body { font-family: var(--font-body); }
html[data-piel="ilustrado"] .topbar a { color: inherit !important; }

/* --- títulos --- */
html[data-piel="ilustrado"] .section-title {
  font-family: var(--font-primary);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  text-transform: none;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
html[data-piel="ilustrado"] h3, html[data-piel="ilustrado"] h4 { letter-spacing: -0.01em; }
/* los títulos vienen en MAYÚSCULAS desde la web: acá se escriben como una frase */
html[data-piel="ilustrado"] .section-title, html[data-piel="ilustrado"] .feature-text, html[data-piel="ilustrado"] .contact-card h3 { text-transform: lowercase !important; }
html[data-piel="ilustrado"] .section-title::first-letter, html[data-piel="ilustrado"] .feature-text::first-letter, html[data-piel="ilustrado"] .contact-card h3::first-letter { text-transform: uppercase; }

/* --- navegación --- */
html[data-piel="ilustrado"] #mainNav a { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.06em; color: var(--tinta) !important; }
html[data-piel="ilustrado"] #mainNav a:hover { color: var(--color-brand) !important; }

/* --- botones: píldora, sin mayúsculas gritadas --- */
html[data-piel="ilustrado"] .btn {
  font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0;
  font-size: 0.98rem; border-radius: 999px; padding: 0.85rem 1.6rem;
}
html[data-piel="ilustrado"] .btn-outline { border-color: var(--color-border); color: var(--tinta); background: var(--color-bg-elevated); }
html[data-piel="ilustrado"] .btn-outline:hover { background: var(--tinta); border-color: var(--tinta); color: var(--color-bg) !important; }

/* --- portada: un marco redondeado con el texto en una tarjeta --- */
/* los marcos redondeados llevan márgenes a los lados: sin «width: 100%» para no desbordar */
html[data-piel="ilustrado"] .hero-slider, html[data-piel="ilustrado"] #videoCarousel, html[data-piel="ilustrado"] section.bg-\[\#1a1a2e\] { width: auto !important; }
html[data-piel="ilustrado"] .hero-slider { margin: 14px clamp(10px, 2vw, 24px) 0; border-radius: 28px; min-height: 560px; }
html[data-piel="ilustrado"] .hero-slider .slide::before { background: rgba(31, 26, 28, 0.12); }
html[data-piel="ilustrado"] .hero-slider .slide { justify-content: flex-start; }
html[data-piel="ilustrado"] .hero-slider .slide-content {
  margin-left: clamp(16px, 6vw, 96px); max-width: 520px; padding: clamp(22px, 3vw, 36px) !important;
  text-align: left; border-radius: 22px; background: var(--color-bg-elevated); color: var(--tinta);
  box-shadow: 0 20px 50px rgba(31, 26, 28, 0.14);
}
html[data-piel="ilustrado"] .hero-slider .slide-title {
  font-family: var(--font-primary); font-weight: 700; text-transform: none; letter-spacing: -0.025em;
  font-size: clamp(2.2rem, 4.6vw, 3.6rem); line-height: 1; color: var(--tinta) !important; margin-bottom: 0.6rem;
}
html[data-piel="ilustrado"] .hero-slider .slide-subtitle { color: var(--color-text-light) !important; text-transform: none; font-weight: 500; font-size: 1.02rem; }
html[data-piel="ilustrado"] .hero-slider .slider-nav { left: auto; right: 28px; transform: none; }
html[data-piel="ilustrado"] .hero-slider .slider-arrow { background: var(--color-bg-elevated); color: var(--tinta); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }

/* --- beneficios: tres fichas de color con su ícono grande --- */
html[data-piel="ilustrado"] section:has(.feature-item) { background: var(--color-bg) !important; padding-top: 2.2rem !important; padding-bottom: 1rem !important; }
html[data-piel="ilustrado"] section:has(.feature-item) .grid { gap: 14px !important; }
html[data-piel="ilustrado"] .feature-item {
  flex-direction: row !important; justify-content: flex-start; gap: 16px !important; text-align: left;
  padding: 20px 22px !important; border-radius: var(--r-panel); background: var(--t-rosa);
}
html[data-piel="ilustrado"] .feature-item:nth-child(2) { background: var(--t-salvia); }
html[data-piel="ilustrado"] .feature-item:nth-child(3) { background: var(--t-durazno); }
html[data-piel="ilustrado"] .feature-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin: 0 !important; border-radius: 50%;
  background: var(--color-bg-elevated); color: var(--i-rosa) !important;
}
html[data-piel="ilustrado"] .feature-item:nth-child(2) .feature-icon { color: var(--i-salvia) !important; }
html[data-piel="ilustrado"] .feature-item:nth-child(3) .feature-icon { color: var(--i-durazno) !important; }
html[data-piel="ilustrado"] .feature-text { font-family: var(--font-primary); font-size: 1.05rem !important; font-weight: 600; letter-spacing: -0.01em !important; }

/* --- explora por tratamiento: paneles con ilustración y fotos reales --- */
html[data-piel="ilustrado"] section:has(> .container > .ama-trat) { padding-top: 2.5rem !important; }
html[data-piel="ilustrado"] .ama-trat__cab { display: flex; align-items: end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
html[data-piel="ilustrado"] .ama-trat__todo { font-weight: 600; color: var(--tinta) !important; white-space: nowrap; }
html[data-piel="ilustrado"] .ama-trat__todo:hover { color: var(--color-brand) !important; }
html[data-piel="ilustrado"] .ama-trat__grilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 196px; gap: 14px; }
html[data-piel="ilustrado"] .ama-panel {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden;
  padding: 20px; border-radius: var(--r-panel); background: var(--t-rosa); color: var(--tinta) !important; text-decoration: none;
  --ink: var(--i-rosa);
}
html[data-piel="ilustrado"] .ama-panel--salvia { background: var(--t-salvia); --ink: var(--i-salvia); }
html[data-piel="ilustrado"] .ama-panel--durazno { background: var(--t-durazno); --ink: var(--i-durazno); }
html[data-piel="ilustrado"] .ama-panel--lavanda { background: var(--t-lavanda); --ink: var(--i-lavanda); }
html[data-piel="ilustrado"] .ama-panel--arena { background: var(--t-arena); --ink: var(--i-arena); }
html[data-piel="ilustrado"] .ama-panel--celeste { background: var(--t-celeste); --ink: var(--i-celeste); }
html[data-piel="ilustrado"] .ama-panel--grande { grid-column: span 2; grid-row: span 2; padding: 28px; }
html[data-piel="ilustrado"] .ama-panel[style*="--span-pc"] { grid-column: span var(--span-pc); }
html[data-piel="ilustrado"] .ama-panel[style*="--span-pc"] .ama-panel__fotos { width: min(48%, 250px); }
html[data-piel="ilustrado"] .ama-panel__icono {
  position: relative; z-index: 2; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px;
  background: var(--color-bg-elevated); color: var(--ink);
}
html[data-piel="ilustrado"] .ama-panel--grande .ama-panel__icono { width: 60px; height: 60px; border-radius: 18px; }
html[data-piel="ilustrado"] .ama-panel--grande .ama-panel__icono svg { width: 32px; height: 32px; }
html[data-piel="ilustrado"] .ama-panel__txt { position: relative; z-index: 2; display: grid; gap: 2px; max-width: 62%; }
html[data-piel="ilustrado"] .ama-panel__nombre { font-family: var(--font-primary); font-weight: 700; font-size: 1.12rem; line-height: 1.1; letter-spacing: -0.01em; }
html[data-piel="ilustrado"] .ama-panel--grande .ama-panel__nombre { font-size: clamp(1.6rem, 2.6vw, 2.3rem); }
html[data-piel="ilustrado"] .ama-panel__n { font-size: 0.82rem; font-weight: 600; color: var(--ink); }
/* las fotos: tres fichas blancas escalonadas en la esquina */
html[data-piel="ilustrado"] .ama-panel__fotos { position: absolute; right: 12px; bottom: 12px; width: 48%; height: 74%; }
html[data-piel="ilustrado"] .ama-panel__foto {
  position: absolute; width: 58%; aspect-ratio: 1; object-fit: contain; padding: 6px; border-radius: 14px;
  background: #fff; box-shadow: 0 6px 16px rgba(31, 26, 28, 0.08); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-piel="ilustrado"] .ama-panel__foto--1 { right: 0; bottom: 0; z-index: 3; }
html[data-piel="ilustrado"] .ama-panel__foto--2 { right: 34%; bottom: 18%; z-index: 2; width: 46%; }
html[data-piel="ilustrado"] .ama-panel__foto--3 { right: 6%; bottom: 56%; z-index: 1; width: 40%; }
html[data-piel="ilustrado"] .ama-panel--grande .ama-panel__fotos { width: 56%; height: 78%; }
html[data-piel="ilustrado"] .ama-panel:hover .ama-panel__foto--1 { transform: translateY(-4px); }
html[data-piel="ilustrado"] .ama-panel:hover .ama-panel__foto--2 { transform: translate(-4px, -2px); }
html[data-piel="ilustrado"] .ama-panel:hover .ama-panel__foto--3 { transform: translateY(-6px); }
/* paneles chicos: fotos arriba a la derecha y el nombre abajo con todo el ancho
   (así «Micropigmentación» no queda tapado) */
html[data-piel="ilustrado"] .ama-panel:not(.ama-panel--grande) .ama-panel__txt { max-width: 100%; margin-top: auto; }
html[data-piel="ilustrado"] .ama-panel:not(.ama-panel--grande) .ama-panel__fotos { top: 12px; bottom: auto; height: 56%; width: 46%; }
html[data-piel="ilustrado"] .ama-panel:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- video y cinta de fotos en marcos redondeados --- */
/* el video manda su alto por proporción y quedaba más angosto que la página: alto fijo */
html[data-piel="ilustrado"] #videoCarousel { margin: 0 clamp(10px, 2vw, 24px); width: auto !important; aspect-ratio: auto !important; height: min(560px, 40vw); border-radius: 28px; }
@media (max-width: 767px) { html[data-piel="ilustrado"] #videoCarousel { height: 56vw; border-radius: 22px; } }
html[data-piel="ilustrado"] #videoCarousel > div[class*="bg-gradient"] { display: none; }
html[data-piel="ilustrado"] section.py-4 > .grid.grid-cols-6 { gap: 12px !important; padding: 0 clamp(10px, 2vw, 24px); }
html[data-piel="ilustrado"] section.py-4 > .grid.grid-cols-6 > a { border-radius: 18px; }

/* --- tarjetas de producto --- */
html[data-piel="ilustrado"] .pcard { border: 0 !important; border-radius: 20px !important; background: var(--color-bg-elevated) !important; }
html[data-piel="ilustrado"] .pcard:hover { transform: none !important; box-shadow: 0 10px 28px rgba(31, 26, 28, 0.08) !important; }
html[data-piel="ilustrado"] .pcard > a > div:first-child { margin: 8px; width: auto !important; border-radius: 14px; background: var(--color-bg-alt) !important; }
html[data-piel="ilustrado"] .pcard img { mix-blend-mode: multiply; transition: transform 0.4s ease; }
html.dark[data-piel="ilustrado"] .pcard img { mix-blend-mode: normal; }
html[data-piel="ilustrado"] .pcard:hover img { transform: scale(1.04); }
html[data-piel="ilustrado"] .pcard-body { padding: 6px 16px 16px !important; }
html[data-piel="ilustrado"] .pcard-title { font-family: var(--font-body); font-weight: 600; font-size: 0.92rem !important; }

/* --- marcas: fichas de color --- */
html[data-piel="ilustrado"] .ama-marca { border: 0; border-radius: 18px; background: var(--t-arena); }
html[data-piel="ilustrado"] .ama-marcas__lista li:nth-child(6n+2) .ama-marca { background: var(--t-rosa); }
html[data-piel="ilustrado"] .ama-marcas__lista li:nth-child(6n+3) .ama-marca { background: var(--t-salvia); }
html[data-piel="ilustrado"] .ama-marcas__lista li:nth-child(6n+4) .ama-marca { background: var(--t-lavanda); }
html[data-piel="ilustrado"] .ama-marcas__lista li:nth-child(6n+5) .ama-marca { background: var(--t-durazno); }
html[data-piel="ilustrado"] .ama-marcas__lista li:nth-child(6n) .ama-marca { background: var(--t-celeste); }
html[data-piel="ilustrado"] .ama-marca span { font-weight: 700; letter-spacing: -0.01em; }
html[data-piel="ilustrado"] .ama-marca:hover { outline: 2px solid var(--tinta); outline-offset: -2px; }

/* --- opiniones: tarjeta blanca con comillas grandes, sobre lavanda --- */
html[data-piel="ilustrado"] section.bg-\[\#1a1a2e\] { background: var(--t-lavanda) !important; margin: 0 clamp(10px, 2vw, 24px); border-radius: 28px; }
html[data-piel="ilustrado"] section.bg-\[\#1a1a2e\] .section-title { color: var(--tinta) !important; text-shadow: none !important; }
html[data-piel="ilustrado"] #testiSlider > div {
  position: relative; background: var(--color-bg-elevated) !important; border: 0 !important; border-radius: 24px !important;
  padding-top: 3.2rem !important; box-shadow: 0 14px 40px rgba(89, 64, 138, 0.1);
}
html[data-piel="ilustrado"] #testiSlider > div::before {
  content: "“"; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  font: 700 6rem/1 var(--font-primary); color: var(--i-lavanda);
}
html[data-piel="ilustrado"] #testiSlider p { color: var(--tinta) !important; font-style: normal; font-size: 1.2rem; }
html[data-piel="ilustrado"] #testiSlider h4 { color: var(--tinta) !important; font-family: var(--font-primary); }
html[data-piel="ilustrado"] #testiSlider span { color: var(--color-text-light) !important; opacity: 1; }
html[data-piel="ilustrado"] #testiDots button { filter: invert(1) brightness(0.4); }
html.dark[data-piel="ilustrado"] #testiDots button { filter: none; }

/* --- sobre nosotros + cifras reales de la tienda --- */
html[data-piel="ilustrado"] #about img { box-shadow: none !important; border-radius: 28px !important; background: var(--t-rosa); padding: 28px; }
html[data-piel="ilustrado"] #about h3 { color: var(--color-brand) !important; font-family: var(--font-primary); }
.ama-cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 26px 0 0; }
.ama-cifra { display: grid; gap: 2px; padding: 16px; border-radius: 18px; background: var(--t-salvia); }
.ama-cifra:nth-child(2) { background: var(--t-durazno); }
.ama-cifra:nth-child(3) { background: var(--t-celeste); }
.ama-cifra strong { font: 700 clamp(1.6rem, 2.6vw, 2.2rem)/1 var(--font-primary); color: var(--tinta); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ama-cifra span { font-size: 0.8rem; line-height: 1.25; color: var(--color-text-light); }

/* --- blog y contacto --- */
html[data-piel="ilustrado"] .blog-scroller article { border-radius: 22px !important; box-shadow: none !important; background: var(--color-bg-elevated) !important; }
html[data-piel="ilustrado"] .blog-scroller article > a:first-child { margin: 8px; border-radius: 16px; }
html[data-piel="ilustrado"] .blog-scroller article span[class*="bg-"] { border-radius: 999px !important; }
html[data-piel="ilustrado"] .contact-card { border-radius: var(--r-panel) !important; background: var(--t-rosa) !important; }
html[data-piel="ilustrado"] .contact-card:nth-child(2) { background: var(--t-salvia) !important; }
html[data-piel="ilustrado"] .contact-card:nth-child(3) { background: var(--t-durazno) !important; }
html[data-piel="ilustrado"] .contact-card:hover { transform: none !important; }
html[data-piel="ilustrado"] .contact-card > a:first-child, html[data-piel="ilustrado"] .contact-card > div:first-child {
  background: var(--color-bg-elevated) !important; color: var(--i-rosa) !important;
}
html[data-piel="ilustrado"] .contact-card > *:first-child * { color: inherit !important; }
html[data-piel="ilustrado"] .contact-card:nth-child(2) > *:first-child { color: var(--i-salvia) !important; }
html[data-piel="ilustrado"] .contact-card:nth-child(3) > *:first-child { color: var(--i-durazno) !important; }
html[data-piel="ilustrado"] .contact-card h3 { font-family: var(--font-primary); font-size: 1.15rem !important; }

/* --- pie --- */
html[data-piel="ilustrado"] footer h4 { font-family: var(--font-primary); text-transform: none !important; letter-spacing: -0.01em !important; font-size: 1.05rem !important; }

/* --- tienda: menú lateral con su ilustración por categoría --- */
html[data-piel="ilustrado"] aside a[class*="sidebar-cat"] { display: flex !important; align-items: center; gap: 10px; border-radius: 12px !important; }
.ama-cat-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--t-rosa); color: var(--i-rosa); }
.ama-cat-ico svg { width: 18px; height: 18px; }
html[data-piel="ilustrado"] aside .sidebar-cat-active .ama-cat-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
html[data-piel="ilustrado"] .shop-top { background: var(--t-rosa) !important; margin: 14px clamp(10px, 2vw, 24px) 0; border-radius: 28px; }
html[data-piel="ilustrado"] .shop-group__head h2, html[data-piel="ilustrado"] .shop-group__head h3 { font-family: var(--font-primary); text-transform: none; letter-spacing: -0.01em; }
html[data-piel="ilustrado"] .mchip { border-radius: 999px !important; }

/* --- celular --- */
@media (max-width: 1023px) {
  html[data-piel="ilustrado"] .hero-slider { min-height: 440px; border-radius: 22px; }
  html[data-piel="ilustrado"] .hero-slider .slide { align-items: flex-end; }
  html[data-piel="ilustrado"] .hero-slider .slide-content { margin: 0 12px 44px; max-width: none; }
  html[data-piel="ilustrado"] .ama-trat__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 168px; gap: 10px; }
  html[data-piel="ilustrado"] .ama-panel { padding: 14px; border-radius: 18px; }
  html[data-piel="ilustrado"] .ama-panel--grande { grid-row: span 1; padding: 18px; }
  html[data-piel="ilustrado"] .ama-panel[style*="--span-cel"] { grid-column: span var(--span-cel); }
  html[data-piel="ilustrado"] .ama-panel__icono { width: 38px; height: 38px; border-radius: 12px; }
  html[data-piel="ilustrado"] .ama-panel__icono svg { width: 20px; height: 20px; }
  html[data-piel="ilustrado"] .ama-panel__txt { max-width: 100%; }
  html[data-piel="ilustrado"] .ama-panel__nombre { font-size: 0.98rem; }
  html[data-piel="ilustrado"] .ama-panel--grande .ama-panel__nombre { font-size: 1.35rem; }
  html[data-piel="ilustrado"] .ama-panel__fotos { width: 54%; height: 58%; right: 8px; bottom: 8px; opacity: 0.95; }
  html[data-piel="ilustrado"] .ama-panel:not(.ama-panel--grande) .ama-panel__txt { margin-top: auto; padding-right: 0; }
  html[data-piel="ilustrado"] .ama-panel:not(.ama-panel--grande) .ama-panel__fotos { top: 10px; bottom: auto; height: 52%; width: 50%; }
  html[data-piel="ilustrado"] .ama-panel__foto--3 { display: none; }
  .ama-cifras { grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .ama-cifra { padding: 12px; }
  html[data-piel="ilustrado"] section.py-4 > .grid.grid-cols-6 { gap: 8px !important; }
}
@media (max-width: 380px) {
  html[data-piel="ilustrado"] .ama-trat__cab { flex-direction: column; align-items: start; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-piel="ilustrado"] .ama-panel__foto { transition: none; }
}

/* --- foco visible --- */
html[data-piel="ilustrado"] a:focus-visible, html[data-piel="ilustrado"] button:focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; }

/* --- portada: el logo completo y el eslogan en cursiva --- */
html[data-piel="ilustrado"] .slide-title--logo { margin: 0 0 0.4rem !important; line-height: 0; }
html[data-piel="ilustrado"] .slide-title--logo img { width: min(300px, 70vw); height: auto; }
html[data-piel="ilustrado"] .slide-title--logo .logo-noche, html.dark[data-piel="ilustrado"] .slide-title--logo .logo-dia { display: none; }
html.dark[data-piel="ilustrado"] .slide-title--logo .logo-noche { display: block; }
html[data-piel="ilustrado"] .hero-slider .slide-subtitle.slide-eslogan {
  font-family: "Cormorant Garamond", Georgia, serif !important; font-style: italic; font-weight: 600 !important;
  font-size: clamp(1.25rem, 2vw, 1.55rem) !important; line-height: 1.25 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--color-brand) !important; margin-bottom: 1.4rem !important;
}
@media (max-width: 1023px) { html[data-piel="ilustrado"] .slide-title--logo img { width: min(190px, 52vw); } }

/* --- opiniones de Google sobre lavanda, como las demás fichas --- */
html[data-piel="ilustrado"] .ama-resenas { background: var(--t-lavanda); margin: 0 clamp(10px, 2vw, 24px); border-radius: 28px; }
html[data-piel="ilustrado"] .ama-resena { border: 0; border-radius: 24px; box-shadow: 0 14px 40px rgba(89, 64, 138, 0.1); }
html[data-piel="ilustrado"] .ama-resena blockquote { font-family: var(--font-primary); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; }

/* nuestros títulos ya vienen escritos como frase (y «Google» lleva mayúscula) */
html[data-piel="ilustrado"] .ama-resenas .section-title, html[data-piel="ilustrado"] .ama-marcas .section-title,
html[data-piel="ilustrado"] .ama-trat .section-title { text-transform: none !important; }

/* --- modo oscuro neutro: superficies grises (R=G=B); el color queda en íconos, precios, etiquetas y acentos --- */
html.dark[data-piel="ilustrado"] .ama-panel__icono,
html.dark[data-piel="ilustrado"] .feature-icon,
html.dark[data-piel="ilustrado"] .contact-card > a:first-child,
html.dark[data-piel="ilustrado"] .contact-card > div:first-child { background: #1f1f1f !important; }
html.dark[data-piel="ilustrado"] .ama-cat-ico { background: #1f1f1f; }
html.dark[data-piel="ilustrado"] .pcard > a > div:first-child { background: #1f1f1f !important; }
html.dark[data-piel="ilustrado"] .ama-marca,
html.dark[data-piel="ilustrado"] .ama-cifra { background: #171717 !important; }
html.dark[data-piel="ilustrado"] #about img { background: #171717; }
html.dark[data-piel="ilustrado"] .ama-resena,
html.dark[data-piel="ilustrado"] #testiSlider > div,
html.dark[data-piel="ilustrado"] .hero-slider .slide-content,
html.dark[data-piel="ilustrado"] .ama-post:hover { box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45); }
html.dark[data-piel="ilustrado"] .ama-resenas,
html.dark[data-piel="ilustrado"] section.bg-\[\#1a1a2e\] { background: #171717 !important; }
html.dark[data-piel="ilustrado"] .ama-resena,
html.dark[data-piel="ilustrado"] #testiSlider > div,
html.dark[data-piel="ilustrado"] .ama-post { background: #1f1f1f !important; }
html.dark[data-piel="ilustrado"] .ama-post__portada,
html.dark[data-piel="ilustrado"] .ama-articulo__portada { background: #171717; }

/* --- modo oscuro: el rosa claro de la marca lleva letra oscura (la blanca no se leía) --- */
html.dark[data-piel="ilustrado"] .btn-primary, html.dark[data-piel="ilustrado"] .btn-primary:visited,
html.dark[data-piel="ilustrado"] .btn-primary:hover, html.dark[data-piel="ilustrado"] .btn-add-cart { color: #1f1a1c !important; }


/* ==========================================================================
   BLOG (2026-10-18): tarjetas con la foto real de un producto sobre un panel de color,
   y artículos con lectura cómoda (renglones cortos, letra grande, buen interlineado).
   ========================================================================== */
.ama-blog__cab { margin: 14px clamp(10px, 2vw, 24px) 0; padding: clamp(36px, 6vw, 72px) 0 clamp(28px, 4vw, 48px); border-radius: 28px; background: var(--t-lavanda); }
.ama-blog__pre, .ama-articulo__etiqueta, .ama-esteticas__pre { margin: 0 0 8px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-brand); }
.ama-blog__intro { max-width: 60ch; margin: 12px 0 0; font-size: 1.05rem; color: var(--color-text-light); }
.ama-blog__lista { padding-top: clamp(28px, 4vw, 48px); display: grid; gap: 18px; }
.ama-blog__grilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ama-blog__esteticas { padding: clamp(28px, 4vw, 48px) clamp(16px, 2vw, 32px); }

.ama-post { display: flex; flex-direction: column; overflow: hidden; border-radius: 22px; background: var(--color-bg-elevated); color: var(--tinta) !important; text-decoration: none; transition: transform 0.4s var(--suave, ease), box-shadow 0.4s ease; }
.ama-post:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(31, 26, 28, 0.08); }
.ama-post__portada { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; margin: 8px; border-radius: 16px; background: var(--t-rosa); overflow: hidden; }
.ama-post--salvia .ama-post__portada { background: var(--t-salvia); }
.ama-post--durazno .ama-post__portada { background: var(--t-durazno); }
.ama-post--lavanda .ama-post__portada { background: var(--t-lavanda); }
.ama-post--arena .ama-post__portada { background: var(--t-arena); }
.ama-post--celeste .ama-post__portada { background: var(--t-celeste); }
.ama-post__portada img { width: 62%; height: 78%; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.6s ease; }
html.dark .ama-post__portada img { mix-blend-mode: normal; }
.ama-post:hover .ama-post__portada img { transform: scale(1.05); }
.ama-post__etiqueta { position: absolute; top: 12px; left: 12px; padding: 5px 11px; border-radius: 999px; background: var(--color-bg-elevated); font-size: 0.75rem; font-weight: 600; color: var(--tinta); }
.ama-post__txt { display: grid; gap: 8px; padding: 10px 20px 22px; }
.ama-post__titulo { font-family: var(--font-primary); font-weight: 700; font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em; }
.ama-post__resumen { font-size: 0.93rem; line-height: 1.5; color: var(--color-text-light); }
.ama-post__meta { font-size: 0.78rem; color: var(--color-text-light); }
/* el artículo destacado: foto a un lado, texto al otro */
.ama-post--destacado { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; }
.ama-post--destacado .ama-post__portada { aspect-ratio: 16 / 11; margin: 10px; }
.ama-post--destacado .ama-post__txt { padding: 24px 32px 28px 12px; }
.ama-post--destacado .ama-post__titulo { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.ama-post--destacado .ama-post__resumen { font-size: 1.02rem; }

/* «Las mejores estéticas de Cali» */
.ama-esteticas { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--t-durazno); }
.ama-esteticas__titulo { margin: 0 0 6px; font-family: var(--font-primary); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.1; color: var(--tinta); }
.ama-esteticas__txt p:last-child { margin: 0; max-width: 56ch; color: var(--color-text); }
.ama-esteticas__btn { flex: none; }
.ama-esteticas--compacto { margin-top: 28px; }

/* el artículo */
.ama-blog--articulo { padding-bottom: 24px; }
.ama-articulo { max-width: 760px !important; padding-top: 28px; }
.ama-articulo__migas { font-size: 0.85rem; color: var(--color-text-light); }
.ama-articulo__migas a { color: var(--color-text-light) !important; }
.ama-articulo__migas a:hover { color: var(--tinta) !important; }
.ama-articulo__cab { margin: 22px 0 22px; }
.ama-articulo__titulo { margin: 0; font-family: var(--font-primary); font-weight: 700; font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; color: var(--tinta); text-wrap: balance; }
.ama-articulo__resumen { margin: 14px 0 10px; font-size: 1.15rem; line-height: 1.5; color: var(--color-text); }
.ama-articulo__meta { margin: 0; font-size: 0.85rem; color: var(--color-text-light); }
.ama-articulo__portada { display: grid; place-items: center; margin: 0 0 28px; aspect-ratio: 16 / 9; border-radius: 24px; background: var(--t-rosa); }
.ama-articulo__portada img { width: 56%; height: 82%; object-fit: contain; mix-blend-mode: multiply; }
html.dark .ama-articulo__portada img { mix-blend-mode: normal; }
.ama-articulo__cuerpo { font-size: 1.08rem; line-height: 1.75; color: var(--color-text); }
.ama-articulo__cuerpo > * + * { margin-top: 1em; }
.ama-articulo__cuerpo h2 { margin-top: 1.8em; font-family: var(--font-primary); font-weight: 700; font-size: 1.55rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--tinta); text-transform: none !important; }
.ama-articulo__cuerpo ul, .ama-articulo__cuerpo ol { padding-left: 1.3em; }
.ama-articulo__cuerpo ul { list-style: disc; }
.ama-articulo__cuerpo ol { list-style: decimal; }
.ama-articulo__cuerpo li + li { margin-top: 0.45em; }
.ama-articulo__cuerpo li::marker { color: var(--color-brand); }
.ama-articulo__cuerpo strong { color: var(--tinta); }
.ama-articulo__cuerpo a { color: var(--color-brand) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.ama-articulo__productos, .ama-articulo__otros { padding-top: clamp(32px, 5vw, 56px); }
.ama-articulo__productos .section-title, .ama-articulo__otros .section-title { margin-bottom: 20px; font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }

@media (max-width: 1023px) {
  .ama-blog__grilla { grid-template-columns: 1fr 1fr; }
  .ama-post--destacado { grid-template-columns: 1fr; }
  .ama-post--destacado .ama-post__txt { padding: 10px 20px 22px; }
}
@media (max-width: 640px) {
  .ama-blog__grilla { grid-template-columns: 1fr; }
  .ama-esteticas { flex-direction: column; align-items: flex-start; }
  .ama-esteticas__btn { width: 100%; }
  .ama-articulo__cuerpo { font-size: 1.03rem; }
}