/* ==========================================================================
   Portada (inicio.html). Solo lo propio de esta página:
   el resto (tarjetas, filas, banner, ventajas, botones) viene de tienda.css.

   1. Portada con diapositivas     4. Tiras de líneas
   2. Categorías                   5. Rutina y mayorista
   3. Banner del probador          6. Marcas e Instagram
   ========================================================================== */

/* ───────────── 1. Portada ───────────── */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--soft); }
.hero-slides { display: grid; max-width: 1680px; margin-inline: auto; }
/* Las diapositivas las arma inicio.js cuando llegan los datos: mientras tanto se guarda su lugar
   (foto de 1 : .82 más el alto del texto; desde 560 px, el alto de la foto) para que la página no salte */
.hero-slides:empty { min-height: calc(82vw + 17.5rem); }
/* Todas las diapositivas ocupan la misma celda: se cruzan con un fundido */
.hero-slide { grid-area: 1 / 1; display: grid; grid-template-columns: minmax(0, 1fr); opacity: 0; visibility: hidden; transition: opacity .8s ease, visibility 0s .8s; }
.hero-slide.is-on { z-index: 1; opacity: 1; visibility: visible; transition: opacity .8s ease; }
.hero-media { position: relative; order: -1; aspect-ratio: 1 / .82; overflow: hidden; background: var(--line); }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-slide.is-on .hero-media img { animation: hero-zoom 7.5s ease-out both; }
.hero-copy { display: grid; gap: .7rem; align-content: center; justify-items: start; padding: 1.4rem var(--gutter) 1.5rem; }
.hero-brand { font-size: .72rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.hero-title { max-width: 15ch; font-size: clamp(1.6rem, 6.6vw, 2.3rem); line-height: 1.06; }
.hero-text { max-width: 36ch; color: var(--ink-2); }
.hero-copy .btn { margin-top: .4rem; padding-inline: 1.3rem; }
/* El texto entra escalonado cada vez que cambia la diapositiva */
.hero-slide.is-on .hero-copy > * { animation: rise .7s var(--ease) backwards; }
.hero-slide.is-on .hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-slide.is-on .hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-slide.is-on .hero-copy > :nth-child(4) { animation-delay: .24s; }

.hero-ui { display: flex; align-items: center; gap: .8rem; padding-block: .55rem; }
.hero-bars { flex: 1; display: flex; gap: .4rem; }
.hero-bars button { position: relative; flex: 1; height: 24px; }
.hero-bars button::before, .hero-bars i { content: ""; position: absolute; left: 0; top: 11px; width: 100%; height: 2px; background: var(--line-2); }
.hero-bars i { background: var(--ink); transform: scaleX(0); transform-origin: left; }
.hero-bars .is-done i { transform: scaleX(1); }
.hero-bars .is-on i { animation: hero-fill var(--hero-time, 6s) linear forwards; }
.hero.is-paused .hero-bars .is-on i { animation-play-state: paused; }
.hero-count { font-size: .76rem; letter-spacing: .12em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

@keyframes hero-zoom { from { transform: scale(1.09); } to { transform: scale(1); } }
@keyframes hero-fill { to { transform: scaleX(1); } }

/* ───────────── 2. Categorías ───────────── */
.gtiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.gtile { display: grid; gap: .6rem; align-content: start; }
.gtile-img { display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; background: var(--soft); }
.gtile-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.gtile:hover .gtile-img img { transform: scale(1.07); }
.gtile-txt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 .6rem; }
.gtile-txt b { position: relative; font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.gtile-txt b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); }
.gtile:hover .gtile-txt b::after { transform: scaleX(1); }
.gtile-txt small { font-size: .78rem; color: var(--pink); white-space: nowrap; }

.ctiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(1.1rem, 2.6vw, 1.7rem); }
.ctile { display: grid; justify-items: center; align-content: start; gap: .1rem; text-align: center; }
.ctile-img { display: block; width: 100%; aspect-ratio: 1; margin-bottom: .4rem; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.ctile-img img { width: 100%; height: 100%; object-fit: contain; padding: 13%; transition: transform .6s var(--ease); }
.ctile-img img.cover { object-fit: cover; padding: 0; }
.ctile:hover .ctile-img { border-color: #cdc2c3; box-shadow: var(--shadow); }
.ctile:hover .ctile-img img { transform: scale(1.09); }
.ctile b { font-size: .66rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.ctile small { font-size: .74rem; color: var(--pink); }

/* ───────────── 3. Banner del probador ───────────── */
.tono-shades { display: flex; padding-left: 9px; }
.tono-shades img { width: 42px; height: 42px; margin-left: -9px; border: 2px solid var(--soft); border-radius: 50%; object-fit: cover; transition: transform .35s var(--ease); }
.tono-banner.is-visible .tono-shades img { animation: pop .5s var(--ease) calc(.35s + var(--i, 0) * 70ms) backwards; }
.tono-banner:hover .tono-shades img { transform: translateY(-4px); transition-delay: calc(var(--i, 0) * 30ms); }
.tono-banner:hover .btn { background: #000; }
.tono-banner:hover .btn .ic { transform: translateX(4px); }

/* ───────────── 4. Tiras de líneas ───────────── */
/* El color de cada línea aparece solo como un filete arriba */
.ltile { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.ltile::before { content: ""; flex: none; height: 4px; background: var(--acc, var(--ink)); }
.ltile:hover { border-color: #cdc2c3; box-shadow: var(--shadow); }
.ltile-img { display: block; aspect-ratio: 1 / .88; overflow: hidden; }
.ltile-img img { width: 100%; height: 100%; object-fit: contain; padding: 9%; transition: transform .6s var(--ease); }
.ltile:hover .ltile-img img { transform: scale(1.08); }
.ltile-body { display: grid; gap: .15rem; padding: .1rem .8rem .85rem; }
.ltile-body b { font-size: .82rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.ltile-body span { font-size: .84rem; color: var(--ink-2); }
.ltile-body small { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; font-size: .76rem; color: var(--pink); }
.ltile-body .ic { width: 14px; height: 14px; transition: transform .3s var(--ease); }
.ltile:hover .ltile-body .ic { transform: translateX(4px); }

/* ───────────── 5. Rutina y mayorista ───────────── */
.duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
.duo-card { display: grid; align-content: space-between; gap: 1.3rem; padding: clamp(1.2rem, 3.4vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); overflow: hidden; transition: border-color .3s, box-shadow .3s; }
.duo-card:hover { border-color: #cdc2c3; box-shadow: var(--shadow); }
.duo-copy { display: grid; gap: .6rem; justify-items: start; }
.duo-copy p:not(.eyebrow) { max-width: 40ch; font-size: .98rem; color: var(--ink-2); }
.duo-copy .btn { margin-top: .4rem; }
.duo-card:hover .btn .ic { transform: translateX(4px); }
.duo-card.dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.duo-card.dark .eyebrow, .duo-card.dark .duo-copy p:not(.eyebrow) { color: rgba(255, 255, 255, .72); }
.duo-art { display: flex; align-items: flex-end; min-height: 96px; }
.duo-art img { width: 38%; max-width: 150px; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 10px 10px rgba(29, 26, 27, .12)); transition: transform .5s var(--ease); }
.duo-art img + img { margin-left: -7%; }
.duo-card:hover .duo-art img { transform: translateY(-7px); transition-delay: calc(var(--i, 0) * 50ms); }
.duo-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem 1.6rem; }
.duo-stats b { display: block; font-size: clamp(1.8rem, 4.8vw, 2.8rem); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duo-stats span { display: block; margin-top: .35rem; font-size: .68rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }

/* ───────────── 6. Marcas e Instagram ───────────── */
/* Grilla con filetes: el fondo gris del contenedor asoma 1 px entre celdas blancas */
.brand-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--line); border-radius: var(--r); background: var(--line); overflow: hidden; }
.brand { position: relative; display: grid; align-content: center; gap: .05rem; min-height: 76px; padding: .8rem 2.2rem .8rem 1rem; background: #fff; transition: background .25s, color .25s; }
.brand b { font-size: 1.02rem; font-weight: 500; line-height: 1.2; }
.brand small { font-size: .76rem; color: var(--pink); transition: color .25s; }
.brand .ic { position: absolute; right: .9rem; top: 50%; width: 16px; height: 16px; opacity: 0; transform: translate(-8px, -50%); transition: opacity .3s, transform .3s var(--ease); }
.brand:hover, .brand:focus-visible { background: var(--ink); color: #fff; }
.brand:hover small, .brand:focus-visible small { color: rgba(255, 255, 255, .7); }
.brand:hover .ic, .brand:focus-visible .ic { opacity: 1; transform: translate(0, -50%); }
.brand.all { grid-column-end: -1; }   /* la última celda completa la fila */

.insta { padding-bottom: clamp(2rem, 5vw, 3.6rem); }
.film { overflow: hidden; }
.film-track { display: flex; width: max-content; }
.film.is-loop .film-track { animation: film 70s linear infinite; }
.film:hover .film-track { animation-play-state: paused; }
.film a { flex: none; display: block; width: 168px; aspect-ratio: 4 / 5; margin-right: var(--gap); border-radius: var(--r); overflow: hidden; background: var(--line); }
.film img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease); }
.film a:hover img { transform: scale(1.07); }
@keyframes film { to { transform: translateX(-50%); } }

/* ───────────── Cortes ───────────── */
@media (min-width: 560px) {
  .hero-slide { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
  .hero-media { order: 0; aspect-ratio: auto; height: clamp(340px, 46vw, 580px); }
  .hero-slides:empty { min-height: clamp(340px, 46vw, 580px); }
  .hero-copy { padding: 1.6rem clamp(1.2rem, 3.6vw, 5rem); }
  .hero-title { font-size: clamp(1.5rem, 3.7vw, 3.2rem); }
  .gtiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gtile-img { aspect-ratio: 4 / 5; }
  .ctile b { font-size: .72rem; letter-spacing: .08em; }
  .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brand-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .film a { width: 208px; }
}

@media (min-width: 960px) {
  .hero-copy { gap: .9rem; }
  .hero-text { font-size: 1.08rem; }
  .hero-copy .btn { padding-inline: 1.8rem; }
  .gtile-img { aspect-ratio: 1; }
  .ctiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .duo-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: end; }
  .duo-art { justify-content: flex-end; }
  .duo-stats { justify-content: flex-end; text-align: right; }
  .brand-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .brand { min-height: 88px; padding-left: 1.3rem; }
  .film a { width: 240px; }
}

@media (min-width: 1320px) {
  .brand-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}