/* RUTILIO PAGE (scoped) — Bootstrap 5 + paleta oficial */
.ruti-page{
  --hero-overlap: 72px;
  background:
    radial-gradient(900px 420px at 10% 0%, rgba(var(--bs-primary-rgb), .10), transparent 55%),
    radial-gradient(900px 420px at 90% 10%, rgba(var(--bs-secondary-rgb), .10), transparent 60%),
    var(--color-neutral-white);
}

/* util */
.ruti-page .ruti-divider{
  width: 64px;
  height: 4px;
  background: var(--color-tertiary-500);
  border-radius: 999px;
}
.ruti-page .ruti-card{
  background: var(--color-neutral-white);
  border: 1px solid rgba(159,159,159,.22);
  box-shadow: 0 10px 26px rgba(31,31,31,.08);
}
.ruti-page .ruti-content{
  position: relative;
  z-index: 3;
  margin-top: calc(-1.7 * var(--hero-overlap)); /* evita “despegue” */
}

/* reveal */
.ruti-page [data-reveal]{
  opacity: 0;
  transform: translateY(10px);
  transition: .45s ease;
}
.ruti-page [data-reveal].is-visible{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){
  .ruti-page [data-reveal]{ transition:none; transform:none; }
}

/* ==========================================
   HERO “Ruta Maya”
   ========================================== */
.ruti-page .hero-section{
  position: relative;
  min-height: 78vh;
  overflow: hidden;
  padding: 112px 0 var(--hero-overlap);
  display: flex;
  align-items: stretch;
  background:
    radial-gradient(1200px 650px at 18% 35%, rgba(var(--bs-primary-rgb), .35), transparent 62%),
    radial-gradient(1000px 560px at 78% 28%, rgba(var(--bs-primary-rgb), .25), transparent 60%),
    radial-gradient(900px 520px at 70% 78%, rgba(var(--bs-secondary-rgb), .16), transparent 62%),
    linear-gradient(115deg, var(--color-secondary-500) 0%, var(--color-primary-500) 52%, #1c2350 100%);
}
.ruti-page .hero-section::before{
  content:"";
  position:absolute;
  inset:-25%;
  background:
    radial-gradient(650px 420px at 15% 40%, rgba(255,255,255,.10), transparent 62%),
    radial-gradient(780px 520px at 58% 22%, rgba(var(--bs-primary-rgb), .40), transparent 64%),
    radial-gradient(720px 520px at 88% 60%, rgba(var(--bs-primary-rgb), .32), transparent 66%);
  filter: blur(18px);
  opacity: .95;
  animation: heroFloat1 16s ease-in-out infinite;
  pointer-events:none;
}
@keyframes heroFloat1{
  0%,100%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(18px,-10px,0) scale(1.02); }
}
@media (prefers-reduced-motion: reduce){
  .ruti-page .hero-section::before{ animation:none; }
}

/* ancla consistente por resolución */
.ruti-page .hero-section .container{ position:relative; z-index:2; flex:1; display:flex; }
.ruti-page .hero-row{ flex:1; }
.ruti-page .hero-text-col{ display:flex; flex-direction:column; justify-content:center; }
.ruti-page .hero-figure-col{ display:flex; justify-content:center; align-items:flex-end; }

.ruti-page .hero-title{
  color: var(--color-neutral-white);
  font-weight: 800;
  line-height: 1.05;
  font-size: clamp(2.0rem, 4.2vw, 3.4rem);
  margin: 0;
}
.ruti-page .hero-highlight{ color: var(--color-tertiary-500); }
.ruti-page .hero-lead{ color: rgba(255,255,255,.82); max-width: 62ch; }

.ruti-page .hero-pill{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--color-neutral-white);
  font-weight: 600;
  padding: .55rem .75rem;
  border-radius: 999px;
}

.ruti-page .hero-media{
  position: relative;
  width: min(520px, 100%);
  display:flex;
  justify-content:center;
  align-items:flex-end;
  transform: translateY(10px);
}
.ruti-page .hero-media::before{
  content:"";
  position:absolute;
  inset:-10%;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 30%, rgba(var(--bs-secondary-rgb), .16), transparent 58%),
    radial-gradient(circle at 60% 65%, rgba(255,255,255,.08), transparent 62%);
  filter: blur(6px);
  pointer-events:none;
}
.ruti-page .hero-rutilio{
  max-height: 560px;
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.35));
}

/* ==========================================
   ALUX
   ========================================== */
.ruti-page .alux-card{ overflow:hidden; }
.ruti-page .alux-visual{
  position: relative;
  min-height: 360px;
  background:
    radial-gradient(620px 420px at 30% 20%, rgba(var(--bs-primary-rgb), .38), transparent 60%),
    radial-gradient(520px 420px at 80% 70%, rgba(var(--bs-secondary-rgb), .18), transparent 62%),
    linear-gradient(135deg, var(--color-secondary-500), var(--color-primary-500));
}
.ruti-page .alux-visual-inner{ position:relative; z-index:2; padding:1.75rem 1.75rem 0; }
.ruti-page .alux-tag{
  display:inline-block;
  font-weight:700;
  font-size:.75rem;
  padding:.35rem .6rem;
  border-radius:999px;
  background: rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  color: var(--color-neutral-white);
}
.ruti-page .alux-img{
  position:absolute;
  left:50%;
  bottom:11px;
  transform: translateX(-48%);
  width: min(420px, 83%);
  height:auto;
  filter: drop-shadow(0 18px 24px rgba(0,0,0,.28));
}
.ruti-page .info-tile{
  display:flex;
  gap:.85rem;
  padding:1rem 1.05rem;
  border-radius:1rem;
  background:#f7f8fb;
  border:1px solid rgba(159,159,159,.18);
}
.ruti-page .tile-icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:grid;
  place-items:center;
  font-weight:800;
  color: var(--color-secondary-500);
  background: rgba(var(--bs-secondary-rgb), .18);
}
.ruti-page .ruti-accordion .accordion-button:focus{ box-shadow:none; }
.ruti-page .ruti-accordion .accordion-button:not(.collapsed){
  color: var(--color-secondary-500);
  background: rgba(var(--bs-secondary-rgb), .10);
}

/* ==========================================
   EVOLUCIÓN
   ========================================== */
.ruti-page .ruti-evo-wrap{
  background: var(--color-neutral-white);
  border: 1px solid rgba(159,159,159,.22);
  box-shadow: 0 10px 26px rgba(31,31,31,.08);
}
.ruti-page .ruti-evo-head{
  background:
    radial-gradient(900px 420px at 12% 10%, rgba(var(--bs-primary-rgb), .32), transparent 62%),
    linear-gradient(115deg, var(--color-secondary-500) 0%, var(--color-primary-500) 70%);
}
.ruti-page .ruti-evo-quote{ font-weight:800; font-size:1.05rem; }
.ruti-page .ruti-evo-badge{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: var(--color-neutral-white);
}
.ruti-page .ruti-evo-steps{ display:flex; flex-direction:column; gap:.85rem; }
.ruti-page .ruti-evo-step{
  width:100%;
  text-align:left;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.95rem 1rem;
  border-radius:18px;
  border:1px solid rgba(159,159,159,.18);
  background: var(--color-neutral-white);
  box-shadow: 0 6px 16px rgba(31,31,31,.05);
  transition:.18s ease;
  cursor:pointer;
}
.ruti-page .ruti-evo-step:hover{ transform: translateY(-2px); border-color: rgba(var(--bs-secondary-rgb), .45); }
.ruti-page .ruti-evo-step.is-active{ border-color: var(--color-tertiary-500); box-shadow: 0 10px 22px rgba(31,31,31,.10); }
.ruti-page .ruti-evo-dot{ width:10px; height:10px; border-radius:999px; background: rgba(51,64,158,.35); }
.ruti-page .ruti-evo-step.is-active .ruti-evo-dot{ background: var(--color-tertiary-500); }
.ruti-page .ruti-evo-chip{
  margin-left:auto;
  width:36px; height:36px;
  border-radius:12px;
  display:grid;
  place-items:center;
  font-weight:800;
  color: var(--color-secondary-500);
  background: rgba(var(--bs-secondary-rgb), .18);
}
.ruti-page .ruti-evo-step.is-active .ruti-evo-chip{
  color: var(--color-neutral-white);
  background: var(--color-tertiary-500);
}
.ruti-page .ruti-evo-spotlight{
  background: var(--color-neutral-white);
  border:1px solid rgba(159,159,159,.18);
  box-shadow: 0 10px 24px rgba(31,31,31,.08);
}
.ruti-page .ruti-evo-imgWrap,
.ruti-page .ruti-evo-carouselWrap{
  background:#f7f8fb;
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:360px;
}
.ruti-page .ruti-evo-img{
  max-height:340px;
  width:auto;
  background:#fff;
  border-radius:16px;
  padding:.5rem;
  border:1px solid rgba(159,159,159,.18);
}
.ruti-page .ruti-evo-cimg{
  height:340px;
  object-fit:contain;
  background:#fff;
  border-radius:16px;
  padding:.5rem;
  border:1px solid rgba(159,159,159,.18);
}
.ruti-page .ruti-evo-img.is-swapping{ opacity:.55; transition: opacity .12s ease; }

/* ==========================================
   ¿QUIÉN ES? (azul + asomado)
   ========================================== */
.ruti-page .ruti-who{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 520px at 15% 20%, rgba(var(--bs-primary-rgb), .35), transparent 62%),
    linear-gradient(115deg, var(--color-secondary-500) 0%, var(--color-primary-500) 70%);
}
.ruti-page .ruti-peek{
  position:fixed;
  top:-143px;
  left:29%;
  transform: translateX(-50%);
  width: clamp(190px, 24vw, 290px);
  height:auto;
  z-index:2;
  pointer-events:none;
  filter: drop-shadow(0 16px 24px rgba(0,0,0,.30));
}
.ruti-page .who-item{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  color: var(--color-neutral-white);
  border-radius:16px;
}
.ruti-page .who-num{
  width:40px; height:40px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:800;
  background: rgba(var(--bs-secondary-rgb), .18);
  color: var(--color-tertiary-500);
}

/* ==========================================
   BOTARGA (carousel)
   ========================================== */
.ruti-page .ruti-botarga-carousel{
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(159,159,159,.18);
  box-shadow: 0 10px 26px rgba(31,31,31,.08);
}
.ruti-page .ruti-botarga-img{
  aspect-ratio: 16 / 9;
  object-fit: scale-down;
}

/* ==========================================
   Responsive
   ========================================== */
@media (max-width: 991.98px){
  .ruti-page{ --hero-overlap: 28px; }
  .ruti-page .hero-section{ min-height:auto; padding-top:96px; }
  .ruti-page .hero-title{ font-size: clamp(1.75rem, 7vw, 2.4rem); }
  .ruti-page .hero-rutilio{ max-height: 380px; }
  .ruti-page .alux-visual{ min-height: 300px; }
  .ruti-page .alux-img{ transform: translateX(-50%);  left:50%;bottom:11px;transform: translateX(-37%);width: min(420px, 43%);height:auto; }
  .ruti-page .ruti-peek{ left:71%; top:-103px; width:210px; }
  .ruti-page .ruti-evo-imgWrap,
  .ruti-page .ruti-evo-carouselWrap{ min-height: 300px; }
  .ruti-page .ruti-evo-cimg{ height: 280px; }
}