/* Portada de Rowan Analytics. Tokens y piezas comunes en site.css. */

/* ================= Portada ================= */
.hero {
  max-width: calc(var(--page-max) + 6rem);
  margin: 0 auto;
  padding: calc(var(--nav-h) + var(--space-2xl)) var(--page-gutter) var(--space-2xl);
}
.hero__head {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: var(--space-xl) var(--space-2xl);
  align-items: end;
  margin-bottom: var(--space-2xl);
}
.hero__title { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.045em; }
.hero__accent { color: var(--bronze); }
.hero__side { padding-bottom: 0.4rem; }
.hero__lede { font-size: var(--text-md); color: var(--ink-2); margin-bottom: var(--space-lg); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
@media (max-width: 60rem) { .hero__head { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .hero__actions .btn { flex: 1 1 100%; } }

/* — Escenario: selector de sector + captura real + ficha — */
.stage {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-xl);
  padding: var(--space-sm);
}
.stage__bar { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-xs) var(--space-xs) var(--space-sm); min-width: 0; }
.stage__hint { flex: none; font-family: var(--f-mono); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); padding-left: var(--space-xs); }
.stage__tabs {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  min-width: 0;
  -webkit-mask-image: linear-gradient(90deg, black 92%, transparent);
  mask-image: linear-gradient(90deg, black 92%, transparent);
  padding-right: 2rem;
}
.stage__tabs::-webkit-scrollbar { display: none; }

.stage__panel { position: relative; }
.stage__panel:not([hidden]) { animation: panel-in 380ms var(--ease-out); }
.stage__frame {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  aspect-ratio: 16 / 9;
}
.stage__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* Ficha del sector, montada sobre la esquina inferior de la captura. */
.stage__card {
  position: absolute;
  right: var(--space-lg);
  bottom: var(--space-lg);
  width: min(22rem, 42%);
  background: rgb(255 255 255 / 0.96);
  backdrop-filter: blur(8px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}
.stage__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 0.5em; vertical-align: 1px; }
.stage__desc { font-size: var(--text-sm); color: var(--ink-2); }
.stage__stats { display: flex; gap: var(--space-lg); margin: 0; }
.stage__stats div { display: flex; flex-direction: column-reverse; }
.stage__stats dt { font-size: var(--text-xs); color: var(--muted); }
.stage__stats dd { margin: 0; font-family: var(--f-display); font-size: 1.6rem; font-weight: 650; letter-spacing: -0.03em; line-height: 1.1; }
.stage__stats small { font-size: 0.6em; color: var(--muted); margin-left: 1px; }
.stage__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-md); margin-top: 0.25rem; }
.stage__demo { font-size: var(--text-sm); color: var(--muted); padding: 0 var(--space-xs) var(--space-sm); max-width: 62rem; }
.stage__demo strong { color: var(--ink); font-weight: 600; }
@media (max-width: 56rem) {
  .stage__bar { flex-direction: column; align-items: stretch; gap: var(--space-xs); }
  .stage__card { position: static; width: auto; margin-top: var(--space-sm); box-shadow: var(--shadow-card); }
}

/* — Cifras clave bajo el escenario — */
.facts {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--rule-strong);
}
.facts li { padding: var(--space-lg) var(--space-lg) 0 0; display: grid; gap: 0.15rem; }
.facts li + li { padding-left: var(--space-lg); border-left: 1px solid var(--rule); }
.facts strong { font-family: var(--f-display); font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.02em; }
.facts span { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 52rem) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts li:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* ================= Del Excel al cuadro de mando ================= */
.questions {
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  counter-reset: q;
}
.questions li { counter-increment: q; display: grid; gap: var(--space-xs); align-content: start; }
.questions li::before { content: "0" counter(q); font-family: var(--f-mono); font-size: var(--text-xs); color: var(--accent-text); padding-bottom: var(--space-xs); border-bottom: 1px solid var(--rule-strong); margin-bottom: var(--space-xs); }
.questions h3 { font-size: var(--text-md); letter-spacing: -0.015em; line-height: 1.3; }
.questions p { color: var(--muted); font-size: var(--text-sm); }
@media (max-width: 52rem) { .questions { grid-template-columns: 1fr; gap: var(--space-lg); } }

/* ================= Lo que ganas (bento) ================= */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--space-md); }
.bento__item { grid-column: span 3; padding: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-xs); }
.bento__item--wide { grid-column: span 8; display: grid; grid-template-columns: 1fr 1.15fr; gap: var(--space-xl); align-items: center; }
.bento__item--alerts { grid-column: span 4; }
.bento__item h3 { font-size: var(--text-lg); letter-spacing: -0.02em; }
.bento__item p:not(.mono-label) { color: var(--muted); font-size: var(--text-sm); }
.bento__text { display: flex; flex-direction: column; gap: var(--space-xs); }
.bento__big { font-family: var(--f-display); font-size: 2.6rem; font-weight: 650; letter-spacing: -0.045em; line-height: 1; color: var(--bronze); margin-bottom: var(--space-sm); }
@media (max-width: 64rem) { .bento__item { grid-column: span 6; } .bento__item--wide, .bento__item--alerts { grid-column: span 12; } }
@media (max-width: 44rem) { .bento__item { grid-column: span 12; } .bento__item--wide { grid-template-columns: 1fr; } }

/* Diagrama ERP → Rowan Analytics: los puntos viajan por la tubería. */
.flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  background: #fff radial-gradient(var(--rule-strong) 1px, transparent 1px) 0 0 / 16px 16px;
  border: 1px solid var(--rule);
}
.flow__node { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-md); padding: var(--space-md); display: grid; gap: 0.15rem; box-shadow: var(--shadow-card); }
.flow__node strong { font-size: var(--text-sm); }
.flow__sub { font-size: var(--text-xs); color: var(--muted); }
.flow__node--gold { border-color: var(--gold); box-shadow: 0 0 0 3px var(--accent-tint); }
.flow__pipe { position: relative; width: 7rem; height: 2px; background: var(--rule-strong); }
.flow__lock {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--f-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--jade); background: var(--jade-tint); padding: 0.15rem 0.45rem; border-radius: var(--radius-pill);
}
.flow__pipe i { position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); animation: travel 2.4s linear infinite; }
.flow__pipe i:nth-child(3) { animation-delay: -0.8s; }
.flow__pipe i:nth-child(4) { animation-delay: -1.6s; }
@keyframes travel { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@media (max-width: 30rem) {
  .flow { grid-template-columns: 1fr; }
  .flow__pipe { width: 2px; height: 3rem; justify-self: center; }
  .flow__lock { bottom: auto; top: 50%; left: 12px; transform: translateY(-50%); }
  .flow__pipe i { display: none; }
}
.alerts { margin-top: auto; padding-top: var(--space-md); display: grid; gap: var(--space-xs); }
.alerts__row { display: flex; align-items: center; gap: var(--space-sm); padding: 0.55rem 0.7rem; border: 1px solid var(--rule); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--surface); box-shadow: var(--shadow-card); }

/* ================= 15 días ================= */
.days-head { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2xl); align-items: center; margin-bottom: var(--space-xl); }
.days-head .section-head { margin: 0; }
.days-big { display: flex; align-items: baseline; gap: 0.3rem; font-family: var(--f-display); line-height: 0.8; }
.days-big span { font-size: clamp(6rem, 13vw, 11rem); font-weight: 700; letter-spacing: -0.07em; color: var(--ink); }
.days-big small { font-size: var(--text-lg); font-weight: 600; color: var(--bronze); letter-spacing: -0.02em; }
@media (max-width: 52rem) { .days-head { grid-template-columns: 1fr; gap: var(--space-md); } }

.days { --gap: 4px; }
.days__strip { display: grid; grid-template-columns: repeat(15, 1fr); gap: var(--gap); }
.day { aspect-ratio: 1; border-radius: var(--radius-sm); display: flex; align-items: flex-start; padding: 0.4rem; font-size: var(--text-xs); }
.day b { font-weight: 600; }
.day--p1 { background: var(--gold); color: var(--ink); }
.day--p2 { background: #edd4ad; color: var(--ink); }
.day--p3 { background: #f6e7cf; color: var(--accent-text); }
.day--p4 { background: var(--jade); color: #fff; }
.days__phases { display: grid; grid-template-columns: repeat(15, 1fr); gap: var(--gap); margin-top: var(--space-md); }
.phase { grid-column: span var(--span); padding: var(--space-md) var(--space-sm) 0 0; border-top: 2px solid; display: grid; gap: 0.35rem; align-content: start; }
.phase--p1 { border-color: var(--gold); }
.phase--p2 { border-color: #edd4ad; }
.phase--p3 { border-color: #f6e7cf; }
.phase--p4 { border-color: var(--jade); }
.phase__range { font-family: var(--f-mono); font-size: var(--text-xs); color: var(--accent-text); font-weight: 600; }
.phase h3 { font-size: var(--text-md); letter-spacing: -0.015em; }
.phase p:not(.phase__range) { font-size: var(--text-sm); color: var(--muted); }
@media (max-width: 64rem) {
  .days__phases { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .phase { grid-column: auto; }
}
@media (max-width: 40rem) {
  .days__strip { grid-template-columns: repeat(8, 1fr); }
  .days__phases { grid-template-columns: 1fr; }
}

/* ================= Cuatro modos (banda oscura) ================= */
.modes-band { background: var(--ink); color: #d4d0c3; }
.modes { display: grid; grid-template-columns: 1fr 1.7fr; gap: var(--space-2xl); align-items: center; }
.modes h2 { color: #fff; font-size: var(--text-section); margin-bottom: var(--space-md); }
.modes h2 .accent { color: var(--gold); }
.modes .eyebrow { color: var(--gold); }
.modes__copy > p:not(.eyebrow) { color: #a9a7a0; margin-bottom: var(--space-lg); }
.modes__list { display: grid; gap: 0.35rem; margin-bottom: var(--space-lg); }
.mode-btn {
  display: grid;
  gap: 0.1rem;
  text-align: left;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid #262a37;
  background: transparent;
  color: #d4d0c3;
  cursor: pointer;
  font-family: var(--f-body);
  transition: border-color 150ms, background-color 150ms;
}
.mode-btn:hover { border-color: #3a3f50; }
.mode-btn[aria-selected="true"] { background: #171922; border-color: var(--gold); }
.mode-btn__name { font-weight: 600; font-size: var(--text-sm); color: #fff; }
.mode-btn__desc { font-size: var(--text-xs); color: #8b8da3; }
.modes__frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid #262a37;
  box-shadow: 0 30px 80px -30px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(228 181 107 / 0.08);
  aspect-ratio: 16 / 10;
  background: #12141c;
}
.modes__frame img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.modes__frame img:not([hidden]) { animation: panel-in 380ms var(--ease-out); }
@media (max-width: 60rem) { .modes { grid-template-columns: 1fr; } .modes__frame { order: -1; } }

/* ================= ¿Encajas? ================= */
.fit { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-lg); align-items: start; }
.fit__yes, .fit__no { border-radius: var(--radius-xl); padding: var(--space-xl); }
.fit__yes { background: var(--surface); border: 1px solid var(--rule); }
.fit__no { background: var(--paper-2); border: 1px dashed var(--rule-strong); display: grid; gap: var(--space-lg); justify-items: start; }
.fit__label { font-family: var(--f-display); font-size: var(--text-lg); font-weight: 650; letter-spacing: -0.02em; margin-bottom: var(--space-md); }
.fit__no .fit__label { margin-bottom: 0; }
.checks, .crosses { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.checks { grid-template-columns: 1fr 1fr; gap: var(--space-lg) var(--space-xl); }
.checks li, .crosses li { position: relative; padding-left: 2.1rem; font-size: var(--text-sm); color: var(--muted); }
.checks strong, .crosses strong { display: block; color: var(--ink); font-size: var(--text-base); font-weight: 600; margin-bottom: 0.15rem; }
.checks li::before, .crosses li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--jade-tint) no-repeat center / 0.8rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%232f8066' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.crosses li::before {
  background-color: var(--rust-tint);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 4l8 8M12 4l-8 8' fill='none' stroke='%23a8402f' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}
@media (max-width: 60rem) { .fit { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .checks { grid-template-columns: 1fr; } .fit__yes, .fit__no { padding: var(--space-lg); } }