/* iki.css — utilidades propias que NO existen en site.css (compilado del original).
   Carruseles horizontales con snap, tamaños de tarjeta de video/before-after y flechas. */

/* Carrusel siempre (móvil y desktop) */
.iki-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; scroll-behavior: smooth; }
.iki-carousel::-webkit-scrollbar { display: none; }
.iki-carousel > * { flex: 0 0 auto; scroll-snap-align: start; }

/* Carrusel solo en móvil (< 768px); en desktop conserva la grilla original */
@media (max-width: 767px) {
  .iki-carousel-m { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 8px; scroll-behavior: smooth; margin-left: -16px; margin-right: -16px; padding-left: 16px; padding-right: 16px; }
  .iki-carousel-m::-webkit-scrollbar { display: none; }
  .iki-carousel-m > * { flex: 0 0 auto; width: var(--iki-card-w, 210px); scroll-snap-align: start; }
}

/* Tarjetas */
.iki-video { width: 150px; }
.iki-pair { width: 260px; }
.iki-quote { width: 280px; }
@media (min-width: 768px) {
  .iki-video { width: 190px; }
  .iki-pair { width: 320px; }
  .iki-quote { width: 360px; }
}
.iki-ratio-916 { aspect-ratio: 9 / 16; }

/* Flechas */
.iki-nav { display: flex; gap: 8px; align-items: center; }
.iki-nav button { width: 34px; height: 34px; border-radius: 9999px; border: 1px solid #D8D2C7; background: #fff; color: #1A1714; display: flex; align-items: center; justify-content: center; transition: border-color .2s, opacity .2s; }
.iki-nav button:hover { border-color: #1A1714; }
.iki-nav button[disabled] { opacity: .35; pointer-events: none; }
.iki-nav .iki-count { font-size: 11px; letter-spacing: .08em; color: #6D6760; min-width: 34px; text-align: center; font-variant-numeric: tabular-nums; }

/* Shop en móvil: 2 columnas compactas */
@media (max-width: 639px) {
  #product-grid { column-gap: 10px; row-gap: 18px; }
  #product-grid > a { padding: 10px; }
  #product-grid h4 { font-size: 15px; line-height: 1.25; }
  #product-grid p { font-size: 11px; margin-bottom: 8px; }
  #product-grid .text-\[14px\] { font-size: 13px; }
}

/* Áreas táctiles mínimas en pie de página y breadcrumbs */
@media (max-width: 767px) {
  #site-footer a, nav[aria-label="breadcrumb"] a { display: inline-block; padding: 6px 0; }
}

/* Acordeones (FAQ, INCI) */
.iki-details summary { list-style: none; }
.iki-details summary::-webkit-details-marker { display: none; }
.iki-details[open] .iki-plus { transform: rotate(45deg); }
.iki-plus { display: inline-block; font-size: 22px; line-height: 1; transition: transform .2s; }

/* Quick-add de tarjetas relacionadas: siempre visible en móvil (no hay hover) */
@media (max-width: 767px) {
  .iki-qa { opacity: 1 !important; transform: none !important; }
}

/* Reseñas: texto largo recortado a 5 líneas hasta "Read more" */
.iki-clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* iki-utilities-2026-09: utilidades Tailwind usadas por páginas nuevas (FAQ, artículos, ingredientes, colecciones, study) que no existen en site.css */
.bg-amber-xlight\/40 { background-color: rgb(251 243 234 / .4); }
.pt-10 { padding-top: 2.5rem; } .px-7 { padding-left: 1.75rem; padding-right: 1.75rem; } .pl-2 { padding-left: .5rem; } .pb-\[50px\] { padding-bottom: 50px; } .pt-\[16\%\] { padding-top: 16%; }
.divide-y > :not([hidden]) ~ :not([hidden]) { border-top-width: 1px; border-bottom-width: 0; }
.divide-border-whisper > :not([hidden]) ~ :not([hidden]) { border-color: #1a171414; }
.space-y-5 > :not([hidden]) ~ :not([hidden]) { margin-top: 1.25rem; }
.max-w-\[36ch\] { max-width: 36ch; } .max-w-\[40ch\] { max-width: 40ch; } .max-w-\[70ch\] { max-width: 70ch; } .max-w-\[680px\] { max-width: 680px; } .max-w-\[720px\] { max-width: 720px; }
.w-14 { width: 3.5rem; } .h-14 { height: 3.5rem; } .w-\[52px\] { width: 52px; } .w-\[70px\] { width: 70px; } .w-\[200px\] { width: 200px; } .h-\[82px\] { height: 82px; } .min-w-\[640px\] { min-width: 640px; } .min-h-\[10px\] { min-height: 10px; } .min-h-\[20px\] { min-height: 20px; }
.border-cream { border-color: rgb(250 248 245); } .border-white\/40 { border-color: rgb(255 255 255 / .4); } .text-border-med { color: #1a171424; }
.hover\:border-white:hover { border-color: #fff; } .hover\:border-moss:hover { border-color: rgb(146 158 148); } .hover\:bg-cream:hover { background-color: rgb(250 248 245); }
.last\:border-0:last-child { border-width: 0; }
.grid-cols-\[120px_1fr\] { grid-template-columns: 120px 1fr; }
.leading-\[1\.05\] { line-height: 1.05; } .leading-\[1\.55\] { line-height: 1.55; } .text-\[19px\] { font-size: 19px; } .tracking-\[0\.04em\] { letter-spacing: .04em; }
.gap-\[32px\] { gap: 32px; } .gap-y-2 { row-gap: .5rem; } .items-baseline { align-items: baseline; } .mt-\[22px\] { margin-top: 22px; }
.bg-hero-sage { background-color: rgb(111 120 96); } .duration-400 { transition-duration: 400ms; }
@media (min-width: 768px) { .md\:pb-\[70px\] { padding-bottom: 70px; } .md\:text-\[17px\] { font-size: 17px; } .md\:text-\[52px\] { font-size: 52px; } }
@media (min-width: 900px) { .min-\[900px\]\:mt-\[28px\] { margin-top: 28px; } }
@media (min-width: 1024px) { .lg\:grid-cols-\[1fr_2fr\] { grid-template-columns: 1fr 2fr; } .lg\:gap-\[32px\] { gap: 32px; } }

/* iki-hero-v2-utils */
.mb-\[16px\] { margin-bottom: 16px; } .mt-\[12px\] { margin-top: 12px; } .mt-\[26px\] { margin-top: 26px; } .pt-\[18px\] { padding-top: 18px; } .px-\[22px\] { padding-left: 22px; padding-right: 22px; }
.text-\[clamp\(34px\2c 7\.2vw\2c 58px\)\] { font-size: clamp(34px, 7.2vw, 58px); } .text-\[clamp\(15px\2c 1\.15vw\2c 17px\)\] { font-size: clamp(15px, 1.15vw, 17px); }
.max-w-\[430px\] { max-width: 430px; } .max-w-\[360px\] { max-width: 360px; } .min-h-\[52px\] { min-height: 52px; } .w-\[64px\] { width: 64px; } .h-\[64px\] { height: 64px; }
.border-\[\#E6DFD3\] { border-color: #E6DFD3; } .hover\:border-hero-dark:hover { border-color: rgb(61 58 51 ); }
.right-\[5vw\] { right: 5vw; } .bottom-\[36px\] { bottom: 36px; } .shadow-\[0_10px_30px_rgba\(26\2c 23\2c 20\2c 0\.08\)\] { box-shadow: 0 10px 30px rgba(26,23,20,.08); }
@media (min-width: 640px) { .sm\:gap-4 { gap: 1rem; } }
@media (min-width: 900px) { .min-\[900px\]\:min-h-\[620px\] { min-height: 620px; } .min-\[900px\]\:h-\[86vh\] { height: 86vh; } .min-\[900px\]\:max-h-\[780px\] { max-height: 780px; } .min-\[900px\]\:pl-\[7vw\] { padding-left: 7vw; } .min-\[900px\]\:mb-\[24px\] { margin-bottom: 24px; } .min-\[900px\]\:mb-\[22px\] { margin-bottom: 22px; } .min-\[900px\]\:hidden { display: none; } .min-\[900px\]\:py-\[18px\] { padding-top: 18px; padding-bottom: 18px; } .min-\[900px\]\:mt-\[34px\] { margin-top: 34px; } .min-\[900px\]\:text-\[26px\] { font-size: 26px; } .min-\[900px\]\:flex { display: flex; } }
/* iki-hero-v2-utils-b (escape con \, como Tailwind) */
.text-\[clamp\(34px\,7\.2vw\,58px\)\] { font-size: clamp(34px, 7.2vw, 58px); } .text-\[clamp\(15px\,1\.15vw\,17px\)\] { font-size: clamp(15px, 1.15vw, 17px); }
.shadow-\[0_10px_30px_rgba\(26\,23\,20\,0\.08\)\] { box-shadow: 0 10px 30px rgba(26,23,20,.08); }

/* iki-hero-v2-utils-c */
.tracking-\[0\.1em\] { letter-spacing: .1em; } .px-\[24px\] { padding-left: 24px; padding-right: 24px; }
@media (min-width: 900px) { .min-\[900px\]\:text-\[13px\] { font-size: 13px; } .min-\[900px\]\:tracking-\[0\.14em\] { letter-spacing: .14em; } .min-\[900px\]\:px-\[32px\] { padding-left: 32px; padding-right: 32px; } }
/* iki-hero-v2-utils-d (altura fluida, columnas anchas, tarjeta) */
.pt-\[124px\] { padding-top: 124px; } .max-w-\[640px\] { max-width: 640px; } .left-\[44\%\] { left: 44%; }
@media (min-width: 640px) { .sm\:whitespace-nowrap { white-space: nowrap; } }
@media (min-width: 900px) { .min-\[900px\]\:pt-\[140px\] { padding-top: 140px; } .min-\[900px\]\:pb-\[56px\] { padding-bottom: 56px; } .min-\[900px\]\:min-h-\[640px\] { min-height: 640px; } .min-\[900px\]\:pl-\[6vw\] { padding-left: 6vw; } }
@media (min-width: 1200px) { .min-\[1200px\]\:flex { display: flex; } }
@media (min-width: 1600px) { .min-\[1600px\]\:max-w-\[720px\] { max-width: 720px; } }

/* iki-hero-v2-utils-e */
.right-\[700px\] { right: 700px; }
@media (min-width: 1800px) { .min-\[1800px\]\:flex { display: flex; } }