/* ============================================================
   home-moderno.css — SOLO para la portada (index.html).
   Lo compartido (tokens, header, botones, footer, reveal) vive en
   css/moderno.css, que se carga antes que este archivo.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero-badge{
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.45rem .9rem .45rem .7rem;border-radius:var(--r-pill,99px);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.9);
  backdrop-filter:blur(10px);transition:background .25s var(--ease);
}
.hero-badge:hover{background:rgba(255,255,255,.15);}

.hero-title{
  margin-top:1.4rem;
  font-size:clamp(2.05rem,4.45vw,3.6rem);
  font-weight:var(--fw-x,800);line-height:.98;letter-spacing:-.045em;color:#fff;
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.06em;}
.hero-title .line-inner{display:block;}
.hero-title .hl{font-style:normal;color:var(--yellow);}
.hero-sub{
  margin-top:1.6rem;max-width:34rem;
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.65;color:rgba(255,255,255,.72);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.2rem;}

@media (prefers-reduced-motion:no-preference){
  .hero-title .line-inner{transform:translateY(105%);animation:riseIn .95s var(--ease) forwards;}
  .hero-title .line:nth-child(1) .line-inner{animation-delay:.08s;}
  .hero-title .line:nth-child(2) .line-inner{animation-delay:.18s;}
  .hero-title .line:nth-child(3) .line-inner{animation-delay:.28s;}
  @keyframes riseIn{to{transform:translateY(0);}}
  .hero-badge,.hero-sub,.hero-cta,.hero-figure{opacity:0;animation:fadeUp .8s var(--ease) forwards;}
  .hero-badge{animation-delay:.05s;}
  .hero-sub{animation-delay:.42s;}
  .hero-cta{animation-delay:.54s;}
  .hero-figure{animation-delay:.3s;}
  @keyframes fadeUp{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);}}
}

.hero-figure{position:relative;margin:0;}
.hero-img{
  width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card,26px);
  box-shadow:0 40px 80px -40px rgba(0,0,0,.8);
  border:1px solid rgba(255,255,255,.14);
}
@media (max-width:1023px){.hero-img{aspect-ratio:16/10;}}
.density-rail{
  position:absolute;left:-.75rem;bottom:1.25rem;display:flex;gap:.4rem;padding:.4rem;
  border-radius:var(--r-pill,99px);background:rgba(7,28,52,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
}
.density-chip{
  padding:.3rem .7rem;border-radius:var(--r-pill,99px);font-size:12px;font-weight:700;
  font-variant-numeric:tabular-nums;color:rgba(255,255,255,.62);
}
.density-chip.is-on{background:var(--yellow);color:var(--ink);}

/* ============================================================
   BUSCADOR
   ============================================================ */
.search-console{
  background:var(--white);border-radius:var(--r-card,24px);padding:1.15rem;
  border:1px solid var(--line-soft);
  box-shadow:0 30px 60px -35px rgba(7,28,52,.45);
}
.search-input{
  width:100%;height:3.5rem;padding-left:3rem;padding-right:1rem;border-radius:var(--r-inner,16px);
  background:var(--paper);border:1px solid transparent;
  font-size:14.5px;font-weight:500;color:var(--ink);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}
.search-input::placeholder{color:rgba(7,28,52,.42);}
.search-input:focus{outline:none;background:#fff;border-color:var(--yellow);box-shadow:0 0 0 4px rgba(255,199,44,.24);}
.chip-row{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.9rem;}
.chip{
  padding:.42rem .85rem;border-radius:var(--r-pill,99px);font-size:12.5px;font-weight:600;
  color:rgba(7,28,52,.7);background:var(--paper);border:1px solid var(--line-soft);
  transition:all .2s var(--ease);
}
.chip:hover{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-band{
  background:var(--ink);color:#fff;overflow:hidden;
  padding:.95rem 0;
}
.marquee-track{display:flex;width:max-content;}
.marquee-set{display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;}
.marquee-item{
  display:inline-flex;align-items:center;gap:.6rem;white-space:nowrap;
  font-size:13px;font-weight:700;letter-spacing:.01em;color:rgba(255,255,255,.88);
}
.marquee-item .material-symbols-outlined{font-size:19px;color:var(--yellow);}
.marquee-dot{width:5px;height:5px;border-radius:var(--r-pill,99px);background:var(--yellow);opacity:.65;flex:none;}
@media (prefers-reduced-motion:no-preference){
  .marquee-track{animation:scrollX 34s linear infinite;}
  .marquee-band:hover .marquee-track{animation-play-state:paused;}
  @keyframes scrollX{to{transform:translateX(-50%);}}
}
@media (prefers-reduced-motion:reduce){
  .marquee-track{overflow-x:auto;}
}

/* ============================================================
   DOS MUNDOS
   ============================================================ */
.world-card{
  position:relative;border-radius:var(--r-card,28px);overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.world-card:hover{transform:translateY(-4px);}
.world-industrial{
  background:linear-gradient(150deg,var(--ink) 0%,var(--blue) 120%);
  color:#fff;padding:2.25rem;box-shadow:0 30px 60px -40px rgba(7,28,52,.8);
}
.world-industrial:hover{box-shadow:0 40px 70px -40px rgba(7,28,52,.9);}
@media (min-width:768px){.world-industrial{padding:3rem;}}
.world-descanso{background:var(--white);border:1px solid var(--line-soft);box-shadow:0 20px 50px -40px rgba(7,28,52,.6);}
.world-body{display:flex;flex-direction:column;align-items:flex-start;}
.world-descanso .world-body{padding:2rem;}
@media (min-width:768px){.world-descanso .world-body{padding:2.25rem;}}
.world-kicker{
  font-size:11.5px;font-weight:var(--fw-x,800);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
}
.world-kicker-ink{color:var(--blue);}
.world-title{margin-top:.85rem;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:var(--fw-x,800);letter-spacing:-.035em;line-height:1.08;}
.world-title-ink{color:var(--ink);}
.world-text{margin-top:.9rem;font-size:15px;line-height:1.7;color:rgba(255,255,255,.72);max-width:44ch;}
.world-text-ink{color:rgba(7,28,52,.62);}
.world-specs{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.25rem;
  margin-top:1.75rem;padding-top:1.5rem;width:100%;
  border-top:1px solid rgba(255,255,255,.16);list-style:none;
}
.world-specs li{
  position:relative;padding-left:1.35rem;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.9);
}
.world-specs li::before{
  content:"";position:absolute;left:0;top:.42em;width:7px;height:7px;border-radius:2px;background:var(--yellow);
}
.world-photo{aspect-ratio:16/11;overflow:hidden;}
.world-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.world-descanso:hover .world-photo img{transform:scale(1.04);}

/* ============================================================
   BENTO CATEGORÍAS
   ============================================================ */
.bento{display:grid;grid-template-columns:1fr;gap:1.25rem;}
@media (min-width:768px){
  .bento{grid-template-columns:1.35fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr));}
  .tile-lg{grid-row:span 2;}
}
.tile{
  position:relative;display:block;overflow:hidden;border-radius:var(--r-card,24px);isolation:isolate;
  background:var(--ink);min-height:230px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.tile-lg{min-height:420px;}
.tile:hover{transform:translateY(-4px);box-shadow:0 34px 60px -38px rgba(7,28,52,.75);}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .8s var(--ease),filter .45s var(--ease);
}
.tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(7,28,52,.92) 0%,rgba(7,28,52,.35) 45%,rgba(7,28,52,.05) 100%);
}
.tile:hover img{transform:scale(1.05);}
.tile-face{position:absolute;inset:auto 0 0 0;padding:1.6rem;display:flex;flex-direction:column;align-items:flex-start;}
.tile-tag{
  font-size:11px;font-weight:var(--fw-x,800);letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);
}
.tile-title{margin-top:.4rem;font-size:clamp(1.15rem,1.8vw,1.6rem);font-weight:var(--fw-x,800);letter-spacing:-.03em;color:#fff;}
.tile-go{
  position:absolute;right:1.4rem;bottom:1.5rem;width:44px;height:44px;border-radius:var(--r-pill,99px);
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;
  backdrop-filter:blur(8px);transition:all .3s var(--ease);
}
.tile:hover .tile-go{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:rotate(45deg);}
.tile-go .material-symbols-outlined{font-size:21px;transition:transform .3s var(--ease);}
.tile:hover .tile-go .material-symbols-outlined{transform:rotate(-45deg);}

/* ============================================================
   PRODUCTOS
   ============================================================ */
.tabs{position:relative;display:inline-flex;gap:.15rem;padding:.3rem;border-radius:var(--r-pill,99px);background:rgba(7,28,52,.06);align-self:flex-start;}
.tab-pill{
  position:absolute;top:.3rem;bottom:.3rem;left:0;width:0;border-radius:var(--r-pill,99px);background:var(--ink);
  transition:transform .42s var(--ease),width .42s var(--ease);z-index:0;
}
.product-tab{
  position:relative;z-index:1;padding:.5rem 1rem;border-radius:var(--r-pill,99px);
  font-size:13px;font-weight:700;color:rgba(7,28,52,.58);white-space:nowrap;
  transition:color .3s var(--ease);
}
.product-tab.is-active{color:#fff;}
.product-tab:not(.is-active):hover{color:var(--ink);}

.p-card{
  display:flex;flex-direction:column;background:var(--white);border-radius:var(--r-card,22px);padding:.85rem .85rem 1.15rem;
  border:1px solid var(--line-soft);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
}
.p-card:hover{transform:translateY(-5px);box-shadow:0 30px 55px -38px rgba(7,28,52,.6);border-color:var(--line);}
.p-media{position:relative;aspect-ratio:1/1;border-radius:var(--r-inner,16px);overflow:hidden;background:var(--paper);}
.p-media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.p-card:hover .p-media img{transform:scale(1.045);}
.p-flag{
  position:absolute;top:.7rem;left:.7rem;z-index:2;padding:.25rem .6rem;border-radius:var(--r-pill,99px);
  background:var(--yellow);color:var(--ink);font-size:11.5px;font-weight:var(--fw-x,800);letter-spacing:.03em;text-transform:uppercase;
}
.p-flag-soft{background:rgba(255,255,255,.92);color:var(--blue);}
.p-flag-ink{background:var(--ink);color:#fff;}
.p-title{margin:1rem .35rem 0;font-size:15px;font-weight:var(--fw-x,800);letter-spacing:-.02em;line-height:1.25;color:var(--ink);}
.p-text{margin:.4rem .35rem 0;font-size:12.5px;line-height:1.55;color:rgba(7,28,52,.55);}
.p-sizes{display:flex;flex-wrap:wrap;gap:.3rem;margin:.85rem .35rem 0;}
.p-sizes span{
  padding:.2rem .55rem;border-radius:7px;font-size:11px;font-weight:700;
  color:rgba(7,28,52,.6);background:var(--paper);border:1px solid var(--line-soft);
}
.p-sizes span.is-on{background:var(--ink);color:#fff;border-color:var(--ink);}
.p-foot{margin:auto .35rem 0;padding-top:1rem;}
.p-price{display:flex;align-items:baseline;gap:.45rem;margin-bottom:.75rem;font-variant-numeric:tabular-nums;}
.p-price strong{font-size:21px;font-weight:var(--fw-x,800);letter-spacing:-.03em;color:var(--ink);}
.p-price s{font-size:12px;color:rgba(7,28,52,.4);}
.p-price em{font-style:normal;font-size:11.5px;font-weight:var(--fw-x,800);color:var(--ink);background:var(--yellow);padding:.1rem .4rem;border-radius:6px;}
.p-price .p-unit{font-size:11.5px;color:rgba(7,28,52,.5);font-weight:600;}

.catalog-link{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:2.5rem;
  font-size:14px;font-weight:700;color:var(--ink);
  border-bottom:2px solid var(--yellow);padding-bottom:.15rem;
  transition:gap .25s var(--ease);
}
.catalog-link:hover{gap:.75rem;}

/* ============================================================
   VENTAJAS
   ============================================================ */
.ventajas-band{background:var(--ink);color:#fff;}
.advantages{list-style:none;margin:3rem 0 0;padding:0;}
.adv-row{
  display:flex;flex-direction:column;gap:.75rem;
  padding:1.9rem 0;border-top:1px solid rgba(255,255,255,.12);
  position:relative;
}
.adv-row:last-child{border-bottom:1px solid rgba(255,255,255,.12);}
@media (min-width:768px){
  .adv-row{flex-direction:row;align-items:baseline;gap:2.5rem;}
}
.adv-num{
  font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:var(--fw-x,800);color:var(--yellow);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;line-height:1;
  flex:none;width:3.25rem;opacity:.9;
}
.adv-body{flex:1;}
.adv-body h3{font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:var(--fw-x,800);letter-spacing:-.03em;color:#fff;}
.adv-body p{margin-top:.5rem;max-width:58ch;font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.58);}
.adv-tag{
  flex:none;font-size:11px;font-weight:var(--fw-x,800);letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.45);
}
@media (prefers-reduced-motion:no-preference){
  .adv-row{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
  .adv-row.is-visible{opacity:1;transform:none;}
  .adv-row:nth-child(1){transition-delay:0ms;}
  .adv-row:nth-child(2){transition-delay:90ms;}
  .adv-row:nth-child(3){transition-delay:180ms;}
  .adv-row:nth-child(4){transition-delay:270ms;}
}


/* Carrusel de la portada: las fotos se apilan y cambian con un fundido. */
.hero-slides{display:grid;}
.hero-slide{grid-area:1/1;object-position:var(--pos,50% 50%);opacity:0;transition:opacity .3s var(--ease);}
.hero-slide.is-on{opacity:1;}
.hero-dots{
  position:absolute;right:1rem;bottom:1.25rem;display:flex;align-items:center;gap:.4rem;padding:.55rem .7rem;
  border-radius:var(--r-pill,99px);background:rgba(7,28,52,.72);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(14px);
}
.hero-dot{
  position:relative;width:8px;height:8px;padding:0;border:0;border-radius:99px;cursor:pointer;
  background:rgba(255,255,255,.45);transition:width .3s var(--ease),background-color .3s var(--ease);
}
.hero-dot::after{content:"";position:absolute;inset:-8px -4px;}
.hero-dot.is-on{width:20px;background:var(--yellow);}
.hero-dot:focus-visible{outline:2px solid var(--yellow);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){.hero-slide,.hero-dot{transition:none;}}