:root {
  --bg: #faf9f6;
  --surface: #ffffff;
  --text: #1b1b1b;
  --muted: #5a5a5a;
  --primary: #2d6a4f;
  --primary-dark: #1b4332;
  --accent: #d68c45;
  --border: #e2e0d8;
  --radius: 16px;
  --max-width: 780px;
  /* Ancho de la portada. La columna del sitio mide 780px y en un monitor
     ancho eso la deja como una tira central con todo vacio a los costados.
     Lo usan el recuadro del hero, el boton Empezar y las secciones de
     abajo, para que todo termine en la misma linea vertical. */
  --ancho-diapo: min(78vw, 1500px);
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* clip y NO hidden. Los dos evitan el scroll horizontal que provocan las
     franjas de 100vw, pero hidden convierte al body en contenedor de scroll
     (overflow-y pasa a auto) y eso rompe el position:sticky de la barra de
     arriba: quedaba declarada sticky y se iba igual con el scroll. clip
     recorta sin crear contenedor. */
  overflow-x: clip;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
  gap: 10px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--primary-dark);
}
.brand-icon { width: 32px; height: 32px; }

.topnav { display: flex; gap: 8px; }

.navlink {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 1rem;
  cursor: pointer;
}
.navlink[aria-current="page"] {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 24px 18px 60px;
  min-height: 60vh;
}

.footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: 20px;
}

/* --- Steps / cards --- */
.step h1 {
  font-size: 1.6rem;
  margin-bottom: 6px;
  color: var(--primary-dark);
}
.step p.lead {
  color: var(--muted);
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 1.05rem;
}

.progress {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
}
.progress span {
  height: 6px;
  flex: 1;
  border-radius: 3px;
  background: var(--border);
}
.progress span.done { background: var(--primary); }

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  cursor: pointer;
  text-align: left;
  font-size: 1.05rem;
  color: var(--text);
  transition: border-color .15s, transform .1s;
}
.choice-card:hover, .choice-card:focus-visible {
  border-color: var(--primary);
  transform: translateY(-2px);
}
.choice-card .icon { font-size: 2.2rem; }
.choice-card .icon .silueta { width: 68px; color: var(--primary); }
.choice-card .title { font-weight: 700; }
.choice-card .desc { color: var(--muted); font-size: 0.9rem; }

/* Paso 1 del recomendador. Con 14 categorias la grilla de 3 columnas ya no
   entraba en una pantalla y habia que scrollear para ver la mitad de las
   opciones. Cuatro columnas, tarjetas mas bajas y descripcion recortada a
   dos lineas para que todas midan igual y la fila no se desparejen. */
.choice-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
  gap: 12px;
}
/* Con el paso 1 al ancho de la portada entran siete columnas, o sea las 14
   categorias en dos filas justas, sin ninguna suelta al final. Y como sobra
   lugar, las tarjetas recuperan algo del aire que les habiamos sacado. */
.step-ancho .choice-grid--compact {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}
.step-ancho .choice-grid--compact .choice-card { padding: 15px 16px; }
.step-ancho .choice-grid--compact .choice-card .icon { font-size: 1.8rem; }
.step-ancho .choice-grid--compact .choice-card .icon .silueta { width: 56px; }
.step-ancho .choice-grid--compact .choice-card .title { font-size: 1rem; }
.step-ancho .choice-grid--compact .choice-card .desc { font-size: .82rem; }
.choice-grid--compact .choice-card {
  padding: 12px 14px;
  gap: 3px;
  font-size: 1rem;
}
.choice-grid--compact .choice-card .icon { font-size: 1.5rem; }
.choice-grid--compact .choice-card .icon .silueta { width: 46px; }
.choice-grid--compact .choice-card .title { font-size: 0.95rem; line-height: 1.25; }
.choice-grid--compact .choice-card .desc {
  font-size: 0.78rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
@media (max-width: 560px) {
  .choice-grid--compact { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

.back-row {
  margin-top: 28px;
}

.btn {
  display: inline-block;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font-size: 1rem;
  cursor: pointer;
  font-weight: 600;
}
.btn-secondary {
  background: transparent;
  color: var(--muted);
  border: 2px solid var(--border);
}
.btn-primary {
  background: var(--primary);
  color: #fff;
}

/* --- Results --- */
.result-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
}
.result-card .badge {
  display: inline-block;
  background: var(--primary);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.result-card.role-local .badge { background: var(--accent); }
.result-card.role-free .badge { background: #4a7fb5; }

.result-card h3 { margin: 0 0 6px; font-size: 1.25rem; }
.result-card .meta { color: var(--muted); font-size: 0.92rem; margin-bottom: 10px; }
.result-card .desc { margin-bottom: 14px; }
.result-card a.btn-primary { text-decoration: none; }

.note-box {
  background: #fff7ec;
  border: 1px solid #f0d9b5;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.92rem;
  color: #6b4a1f;
  margin-bottom: 20px;
}

/* --- Novedades / benchmarks --- */
.news-section {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--border);
}
.news-section h2 {
  color: var(--primary-dark);
  margin-bottom: 4px;
}
.news-section .lead { margin-top: 0; }

.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.news-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.news-card .news-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 10px;
}
.news-card .news-tag {
  background: #eaf2ee;
  color: var(--primary-dark);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .02em;
}
.news-card .news-date { color: var(--muted); font-size: 0.8rem; }
.news-card h3 { margin: 0; font-size: 1.1rem; }
.news-card p { margin: 0; color: var(--muted); font-size: 0.92rem; }
/* El "qué cambia para vos" es lo que la tarjeta viene a decir: va en su
   propio recuadro, con el texto a color pleno y no en gris. */
.news-card .news-paravos {
  color: var(--text);
  background: #fff7ec;
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  padding: 10px 12px;
}
.news-card .news-actions {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}
.news-card .news-actions a { color: var(--primary-dark); font-weight: 600; font-size: 0.88rem; }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }

/* Etiqueta "Novedad" en fichas del catálogo y en resultados. */
.novedad {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  vertical-align: middle;
  white-space: nowrap;
}
.catalog-item .novedad { margin-left: 0; margin-bottom: 6px; align-self: flex-start; }

/* La ficha a la que se llega desde una novedad. Tres pulsos lentos y
   marcados: tiene que verse por AnyDesk. */
.catalog-item.is-destacada {
  animation: fichaDestacada 1.4s ease-in-out 3;
  border-color: var(--accent);
}
@keyframes fichaDestacada {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214, 140, 69, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(214, 140, 69, .55); }
}
@media (prefers-reduced-motion: reduce) {
  .catalog-item.is-destacada { animation: none; box-shadow: 0 0 0 4px rgba(214, 140, 69, .55); }
}

/* --- Filtro de categorías (catálogo) --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 22px 0 32px;
}
.filter-pill {
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.filter-pill:hover {
  border-color: var(--primary);
  transform: translateY(-1px);
}
.filter-pill.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* --- Catalog view --- */
.catalog-section h2 {
  color: var(--primary-dark);
  margin-top: 30px;
  margin-bottom: 12px;
}
.catalog-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}
.catalog-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.catalog-media {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
}
.catalog-media .catalog-icon {
  font-size: 3rem;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.25));
}
.catalog-media .catalog-icon .silueta { width: 112px; color: #fff; }
.catalog-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.catalog-item .catalog-tag {
  display: inline-block;
  color: #4a7fb5;
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  margin-bottom: 6px;
}
.catalog-item h4 { margin: 0 0 6px; font-size: 1.05rem; }
.catalog-item .tags { font-size: 0.8rem; color: var(--muted); margin-bottom: 8px; }
/* El blurb va recortado a 4 lineas: sin esto una ficha larga estira toda la
   fila de la grilla y las tarjetas quedan de alturas distintas. */
.catalog-item .catalog-blurb {
  margin: 0 0 8px;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  overflow: hidden;
}
.catalog-item a { color: var(--primary-dark); font-weight: 600; margin-top: auto; }

.collapsible summary {
  cursor: pointer;
  color: var(--primary-dark);
  font-weight: 600;
  margin: 10px 0;
}

/* --- Animaciones dinámicas --- */
.step { animation: stepFadeIn .7s ease both; }
@keyframes stepFadeIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .step { animation: none; }
}

@media (max-width: 480px) {
  html, body { font-size: 16.5px; }
  .topbar { padding: 10px 14px; }
}

/* --- Integración con la librería de componentes (ui.css) --- */

/* StickyHeader: la topbar arranca plana y gana sombra al scrollear */
.topbar.is-stuck {
  box-shadow: 0 4px 16px rgba(27, 67, 50, .10);
  padding-top: 10px;
  padding-bottom: 10px;
}

/* HoverCard: elevación con el verde de la marca, más contenida que la de fábrica */
.ui-hover-card {
  --ui-hover-lift: -4px;
  --ui-hover-shadow: 0 10px 24px rgba(27, 67, 50, .14);
}
.catalog-item { --ui-hover-lift: -6px; }

/* BackToTop en color de marca */
.ui-backtotop {
  --ui-backtotop-bg: var(--primary-dark);
  --ui-backtotop-fg: #fff;
}

/* LogoMarquee: franja de herramientas del catálogo en la pantalla inicial */
.tools-strip {
  margin: 34px 0 8px;
  padding-top: 26px;
  border-top: 1px solid var(--border);
}
.tools-strip .strip-label {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tools-strip .marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: .92rem;
  font-weight: 600;
  color: var(--primary-dark);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
}

@media (max-width: 480px) {
  .ui-backtotop { right: 14px; bottom: 14px; }
}

/* --- Hero de la pantalla inicial --- */
.hero {
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 10px 0 4px;
}
.hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 2.6rem);
  line-height: 1.12;
  margin: 0 0 12px;
  color: var(--primary-dark);
}
.hero .lead {
  font-size: 1.06rem;
  color: var(--muted);
  max-width: 54ch;
  margin: 0 0 22px;
}
.btn-lg { padding: 15px 34px; font-size: 1.08rem; }
/* Debajo de las franjas, alineada con el boton que quedo arriba. */
.hero-note { color: var(--muted); font-size: .85rem; margin: 18px 0 0; text-align: right; }

.scroll-cue {
  text-align: center;
  color: var(--muted);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .09em;
}
.scroll-cue span {
  display: block;
  font-size: 1.25rem;
  animation: cueBounce 1.9s ease-in-out infinite;
}
@keyframes cueBounce {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(7px); opacity: 1; }
}

/* --- Maqueta animada del asistente (ciclo de 12s) --- */
.hero-mock {
  border-radius: 22px;
  padding: 16px;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary) 45%, #52b788);
  box-shadow: 0 18px 44px rgba(27, 67, 50, .22);
  animation: mockFloat 7s ease-in-out infinite;
}
@keyframes mockFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}

/* Grid en vez de alto fijo: las dos pantallas comparten la misma celda,
   así la ventana toma el alto de la más alta y nada se corta si un texto
   envuelve en pantallas angostas. */
.mock-window {
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 300px;
  background: var(--surface);
  border-radius: 15px;
  overflow: hidden;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px;
  border-bottom: 1px solid var(--border);
  background: #f7f7f4;
}
.mock-dot { width: 9px; height: 9px; border-radius: 50%; background: #dcdcd4; }
.mock-title { margin-left: 10px; font-size: .74rem; color: var(--muted); letter-spacing: .02em; }

.mock-screen {
  grid-row: 2;
  grid-column: 1;
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.mock-q { margin: 0 0 4px; font-weight: 700; color: var(--primary-dark); font-size: .98rem; }
.mock-more { margin: 2px 0 0; color: var(--muted); font-size: .8rem; }

.mock-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: .9rem;
  background: var(--surface);
  color: var(--text);
}
.mock-chip span { font-size: 1.1rem; }

.mock-res {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 4px 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 9px 13px;
  background: var(--surface);
}
.mock-res strong { font-size: .92rem; }
.mock-res em { grid-column: 2; font-style: normal; font-size: .76rem; color: var(--muted); }
.mock-badge {
  grid-row: span 2;
  align-self: center;
  background: var(--primary);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.mock-badge.is-free { background: #4a7fb5; }
.mock-badge.is-local { background: var(--accent); }

/* Las dos pantallas se turnan sobre el mismo ciclo de 12s */
.mock-ask { animation: screenAsk 12s ease-in-out infinite; }
.mock-answer { animation: screenAnswer 12s ease-in-out infinite; }
@keyframes screenAsk {
  0% { opacity: 0; transform: translateY(10px); }
  5%, 30% { opacity: 1; transform: none; }
  36%, 100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes screenAnswer {
  0%, 35% { opacity: 0; transform: translateY(10px); }
  42%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-10px); }
}

/* El escalonado va en los porcentajes, no en animation-delay: con loop
   infinito un delay desincronizaría cada elemento del ciclo general. */
.mock-chip, .mock-more { animation: chipIn 12s ease-out infinite; }
.mock-more { animation-name: chipInLate; }
.mock-chip.chip-1 { animation-name: chipPick; }
.mock-chip.chip-3 { animation-name: chipInLate; }
@keyframes chipIn {
  0%, 3% { opacity: 0; transform: translateY(10px); }
  9%, 100% { opacity: 1; transform: none; }
}
@keyframes chipInLate {
  0%, 6% { opacity: 0; transform: translateY(10px); }
  12%, 100% { opacity: 1; transform: none; }
}
@keyframes chipPick {
  0% { opacity: 0; transform: translateY(10px); }
  6%, 21% { opacity: 1; transform: none; background: var(--surface); border-color: var(--border); color: var(--text); }
  26% { background: var(--primary); border-color: var(--primary); color: #fff; transform: scale(1.03); }
  30%, 100% { opacity: 1; background: var(--primary); border-color: var(--primary); color: #fff; transform: none; }
}

.mock-res { animation: resIn 12s ease-out infinite; }
.mock-res.res-2 { animation-name: resInMid; }
.mock-res.res-3 { animation-name: resInLate; }
@keyframes resIn {
  0%, 40% { opacity: 0; transform: translateY(12px); }
  46%, 100% { opacity: 1; transform: none; }
}
@keyframes resInMid {
  0%, 44% { opacity: 0; transform: translateY(12px); }
  50%, 100% { opacity: 1; transform: none; }
}
@keyframes resInLate {
  0%, 48% { opacity: 0; transform: translateY(12px); }
  54%, 100% { opacity: 1; transform: none; }
}

/* Sin movimiento: se muestra la pantalla de resultados, quieta */
@media (prefers-reduced-motion: reduce) {
  .hero-mock, .scroll-cue span,
  .mock-screen, .mock-chip, .mock-more, .mock-res { animation: none; }
  .mock-ask { display: none; }
  .mock-answer { opacity: 1; transform: none; }
}

/* --- Destacadas en la portada (patrón de la referencia: pills + grid) --- */
/* El catalogo completo tambien usa el ancho de la portada: con la columna
   de 780px eran tres tarjetas por fila y 62 herramientas se hacian
   interminables de scrollear. */
.step-ancho {
  width: var(--ancho-diapo);
  max-width: none;
  margin-left: calc((100% - var(--ancho-diapo)) / 2);
}
/* El texto no se estira con el contenedor: a 1500px de ancho la bajada
   quedaba en un solo renglon larguisimo. El limite de 54ch existia solo
   para el hero. */
.step-ancho > .lead { max-width: 54ch; }

/* Las tres secciones de la portada van al ancho de la diapo, no al de la
   columna: terminan en la misma linea vertical que el Empezar y que el
   recuadro del hero. El margen negativo las saca de la columna por los dos
   lados; es la misma cuenta que usa el hero. */
.tops-section,
.perfil-section,
.news-section,
.tools-strip {
  width: var(--ancho-diapo);
  max-width: none;
  margin-left: calc((100% - var(--ancho-diapo)) / 2);
}

.tops-section {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}
.tops-section h2 {
  color: var(--primary-dark);
  margin: 0 0 4px;
  font-size: 1.5rem;
}
.tops-section .lead { margin-top: 0; margin-bottom: 4px; }
.tops-section .filter-bar { margin-top: 18px; }

/* La cinta "Recomendada" sobre el banner de la tarjeta */
.catalog-media { position: relative; }
.top-flag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, .92);
  color: var(--primary-dark);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 4px 9px;
  border-radius: 999px;
}

/* Filtrado en el lugar: las que no entran se van con fundido y escala.
   La transición propia pisa a la de .ui-hover-card, y le suma el opacity. */
.tops-grid .catalog-item {
  /* .2s para coincidir con la espera de applyTopFilter antes de reacomodar */
  transition: opacity .2s ease, transform .2s ease, box-shadow .22s ease-out;
}
.tops-grid .catalog-item.is-filtered-out {
  opacity: 0;
  transform: scale(.94);
  pointer-events: none;
}
/* .catalog-item es display:flex y le gana al [hidden] del navegador */
.catalog-item[hidden] { display: none; }

.tops-empty {
  color: var(--muted);
  font-size: .95rem;
  padding: 18px 0;
}

@media (prefers-reduced-motion: reduce) {
  .tops-grid .catalog-item { transition: none; }
}

.tops-cta { margin-top: 22px; }
.tops-cta .btn { transition: border-color .2s ease, color .2s ease; }
.tops-cta .btn:hover { border-color: var(--primary); color: var(--primary-dark); }

/* --- HoverGlow sobre nuestras tarjetas ---
   El blanco por defecto de la librería no se ve sobre el cuerpo blanco de
   la tarjeta, así que acá el foco va teñido con el verde de la marca. */
.catalog-item.ui-glow-card {
  --ui-glow-color: rgba(45, 106, 79, .14);
  --ui-glow-size: 220px;
}

/* --- Perfiles: barras de valoración en carrusel --- */
.perfil-section {
  margin-top: 46px;
  padding-top: 34px;
  border-top: 1px solid var(--border);
}
.perfil-section h2 { color: var(--primary-dark); margin: 0 0 4px; font-size: 1.5rem; }
.perfil-section .lead { margin-top: 0; margin-bottom: 22px; }

.perfil-carrusel {
  position: relative;
  --ui-dot-active: var(--primary);
  --ui-btn-border: var(--border);
}

.perfil-slide {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
}

.perfil-cat {
  display: inline-block;
  color: #4a7fb5;
  font-weight: 700;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.perfil-datos h3 { margin: 0 0 8px; font-size: 1.35rem; color: var(--primary-dark); }
.perfil-resumen { margin: 0 0 20px; color: var(--muted); font-size: .95rem; }

.perfil-barras { display: grid; gap: 16px; color: var(--primary); }
.perfil-barras .ui-progress { --ui-progress-track: #e6ece9; }
.perfil-eje .ui-progress-row { color: var(--text); font-size: .9rem; }
.perfil-eje .ui-progress-row span { cursor: help; }

.perfil-link {
  display: inline-block;
  margin-top: 18px;
  color: var(--primary-dark);
  font-weight: 600;
  font-size: .92rem;
}

.perfil-arte {
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 30px rgba(27, 67, 50, .16);
}
.perfil-icono { font-size: 4.2rem; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .28)); }
.perfil-icono .silueta { width: 180px; color: #fff; }

/* En angosto, flechas y puntitos van juntos en una fila debajo */
.perfil-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
}
.perfil-flecha { --ui-btn-bg: var(--surface); }

@media (min-width: 700px) {
  .perfil-slide {
    grid-template-columns: 1.15fr .85fr;
    padding: 0 46px;
  }
  /* En ancho, flanqueando el bloque como en la referencia */
  .perfil-flecha {
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    z-index: 3;
  }
  .perfil-flecha-izq { left: 0; }
  .perfil-flecha-der { right: 0; }
  .perfil-flecha:hover { transform: translateY(-50%) scale(1.08); }
}

.perfil-aviso {
  margin-top: 22px;
  color: var(--muted);
  font-size: .8rem;
  font-style: italic;
}

/* --- En celular las grillas de tarjetas se deslizan de costado ---
   Con una sola columna, el catálogo eran 34 tarjetas apiladas. Cada
   categoría pasa a ser una fila que se arrastra con el dedo, y la tarjeta
   siguiente asoma para que se note que hay más. */
@media (max-width: 640px) {
  .catalog-list {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 76%;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 2px;
    /* overflow-x recorta también en vertical: el padding le da aire a la
       sombra de las tarjetas para que no quede cortada. */
    padding: 4px 2px 14px;
    overscroll-behavior-x: contain;
  }
  .catalog-list .catalog-item { scroll-snap-align: start; }

  /* Una fila sola no necesita asomar tanto */
  .tops-grid { grid-auto-columns: 82%; }
}

/* ---------- Diapositiva 1: hero a pantalla completa ---------- */
/* La portada arranca como una sola pantalla: titulo a la izquierda, Empezar
   abajo a la derecha, y de fondo las franjas animadas. Lo demas queda abajo,
   a un scroll de distancia. */
.hero-slide {
  /* Alto util: la ventana menos la barra de arriba (74px). Todo lo de la
     diapo se mide contra esto, asi el resultado es el mismo en cualquier
     monitor y el corte del recuadro deja de depender de la suerte. */
  --alto: calc(100svh - 74px);
  /* El hero no arranca pegado al header: <main> lo separa 42px. Sin
     descontarlo, el 70% se mide desde el lugar equivocado y la banda
     terminaba al 75% de la pantalla en vez del 70%. */
  --desfase: 42px;
  position: relative;
  min-height: 0;
  justify-content: flex-start;
  gap: 0;
  padding: 0;
}
/* La banda de franjas: 70% del alto util. En una pantalla FHD son unos
   595px de alto por 1920 de ancho, o sea 3,2:1 — proporcion de cine. */
.hero-top {
  position: relative;
  height: calc(var(--alto) * .7 - var(--desfase));
  padding-top: clamp(20px, 7%, 76px);
}
.hero-slide .hero-copy { position: relative; z-index: 1; }
/* El Empezar clavado al 65% del alto util: como la banda llega al 70%,
   queda bien abajo, pisando las ultimas franjas. */
.hero-slide .hero-cta {
  position: absolute;
  top: calc(var(--alto) * .65 - var(--desfase));
  /* Negativo: saca el boton de la columna de 780px hasta el borde derecho
     del recuadro de abajo, para que los dos terminen en la misma linea. */
  right: calc((100% - var(--ancho-diapo)) / 2);
  transform: translateY(-50%);
  z-index: 1;
}

/* El Empezar abajo a la derecha, como pidio el diseno. En pantallas
   angostas vuelve a la izquierda: contra el borde derecho de un celular
   queda incomodo para el pulgar. */
.hero-slide .hero-cta { align-self: flex-end; text-align: right; }
.hero-slide .hero-note { margin: 12px 0 0; }

/* Un velo detras del texto: las franjas pasan por abajo y sin esto el
   titulo pierde contraste justo cuando una banda oscura le pasa atras. */
.hero-slide .hero-copy::before {
  content: "";
  position: absolute;
  inset: -30px -50px;
  background: linear-gradient(90deg,
              var(--bg) 0%, var(--bg) 55%, rgba(250, 249, 246, .7) 80%, transparent 100%);
  /* El desenfoque es lo que hace que no se vea el rectangulo: sin esto el
     velo corta con un borde recto arriba y abajo sobre las franjas. */
  filter: blur(22px);
  z-index: -1;
}

/* ---------- Franjas ---------- */
/* Van a sangre: el contenido esta dentro de un contenedor de 780px, asi que
   la capa se estira a todo el ancho de la ventana. */
.franjas {
  position: absolute;
  /* Sube los 42px que <main> separa el hero del header: sin esto quedaba
     una franja de fondo crema entre la barra de arriba y la primera
     banda. Abajo no cambia, asi que el 70% se sigue midiendo igual. */
  top: calc(var(--desfase) * -1);
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
/* Sin aire entre bandas: las siete se reparten el alto del bloque del
   mensaje, asi que quedan finas sin necesidad de fijarles una altura. */
.franja {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: transform .18s ease, filter .18s ease;
}
.franja::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--f1), var(--f2));
  opacity: .16;
}
/* Separacion grande entre repeticiones: se ven dos o tres frases por
   pantalla en vez de cinco. El track sigue teniendo cuatro copias porque
   ui-marquee-scroll corre -50% del track duplicado: con menos copias el
   loop deja un hueco vacio en pantallas anchas. */
.franja-cinta { width: 100%; --ui-marquee-gap: 320px; }
.franja-frase {
  font-size: clamp(.9rem, 1.7vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--primary-dark);
  opacity: .28;
  white-space: nowrap;
  user-select: none;
}

/* Las lineas que cruzan toda la banda: mas separadas y mas tenues que las
   de la frase, porque cubren una superficie mucho mas grande. */
.franjas.is-glitching {
  --ui-glitch-linea: rgba(27, 67, 50, .16);
  --ui-glitch-hueco: 6px;
}
/* Los bloques van bastante transparentes: a color pleno tapan las frases y
   el hero pasa a ser el efecto en vez del mensaje.

   Sin mix-blend-mode. Lo probe con multiply y la pestana quedo sin
   responder, pero no llegue a confirmar que la causa fuera esa. Queda
   afuera porque la transparencia sola alcanza y no vale la pena arriesgar:
   un blend obliga a recomponer todo lo que tiene debajo, y debajo hay
   siete marquees animados. */
.franjas .ui-glitch-bloques { opacity: .3; }

/* La sacudida, la separacion de color y las lineas finas las pone el
   componente 12 de la libreria (UI.glitch). Aca solo lo que es propio del
   hero: al 28% de opacidad la frase sacudida casi no se veia. */
.franja-frase.is-glitching {
  opacity: .6;
  --ui-glitch-linea: rgba(27, 67, 50, .42);
  --ui-glitch-hueco: 4px;
}

/* ---------- El recuadro que asoma ---------- */
/* Arranca despues del "Segui bajando", ya pasado el 70% de la pantalla, y
   sigue mas alla del borde. Es a proposito: es la senal de que hay mas. */
.hero-slide .scroll-cue { margin-top: 24px; }
.hero-asomo { margin: 24px 0 0; }
.hero-asomo .hero-mock {
  width: var(--ancho-diapo);
  max-width: none;
  /* Con margin:0 auto no alcanza: cuando el hijo es mas ancho que el padre
     los margenes auto resuelven a 0 y el recuadro se va todo para la
     derecha en vez de centrarse. El margen negativo lo saca de la columna
     por los dos lados, y hace que termine en la misma linea que el boton,
     que usa exactamente la misma cuenta. */
  margin-left: calc((100% - var(--ancho-diapo)) / 2);
}
/* La nota tambien se corre, si no queda suelta en el medio. */
.hero-slide .hero-note {
  margin-right: calc((100% - var(--ancho-diapo)) / 2);
}

@media (max-width: 900px) {
  /* En pantallas angostas no hay costados que llenar: todo vuelve a la
     columna del sitio. */
  :root { --ancho-diapo: 100%; }
}

@media (max-width: 640px) {
  /* En celular la banda no puede comerse el 70%: el titulo ocupa mucho mas
     alto y el boton clavado al 65% se le encimaria. Vuelve al flujo, pero
     sigue alineado a la derecha como en la computadora: lo habia puesto a
     la izquierda pensando en el pulgar y el usuario lo prefiere derecha. */
  .hero-top { height: auto; padding-bottom: 28px; }
  .hero-slide .hero-cta {
    position: static;
    transform: none;
    margin-top: 26px;
    text-align: right;
  }
  .hero-slide .hero-note { text-align: right; margin-right: 0; }
}

/* Sin movimiento: las frases quedan quietas y el glitch no arranca
   (arrancarGlitch() ya consulta UI.prefersReducedMotion). */
@media (prefers-reduced-motion: reduce) {
  .franja { transition: none; }
  .franja-frase.is-glitching { opacity: .28; }
}

/* ---------- Modo avanzado ---------- */
/* Debajo del Empezar y alineada con él: cambia lo que hace ese botón, así
   que tiene que verse antes de apretarlo. */
.avanzado {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  font-size: .82rem;
  color: var(--muted);
  cursor: pointer;
  position: relative;
  z-index: 1;
}
.hero-slide .avanzado { margin-right: calc((100% - var(--ancho-diapo)) / 2); }
.avanzado input {
  width: 17px;
  height: 17px;
  accent-color: var(--primary);
  cursor: pointer;
  flex: none;
}
.avanzado:hover { color: var(--text); }

/* La etiqueta de "en qué gana" en la pantalla de resultados. */
.result-card .gana {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(45, 106, 79, .10);
  color: var(--primary-dark);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
}

@media (max-width: 640px) {
  .hero-slide .avanzado { margin-right: 0; }
}


/* --- Siluetas por categoría --- */
/* Dibujos de trazo, sin color propio: toman `currentColor` del lugar donde
   caen. En una tarjeta van blancos sobre el degradé; en el paso 1, verdes
   sobre el fondo blanco. El trazo NO se escala con el tamaño (el viewBox es
   el mismo para todas), así que una silueta chica se ve más gruesa a
   propósito: a 112 px de ancho un trazo fino se pierde contra el degradé. */
.silueta {
  display: block;
  height: auto;
  max-width: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Cabezas de nota, puntos del gráfico y el puntero del mouse: son macizos. */
.silueta .lleno { fill: currentColor; stroke: none; }
.silueta-vacia { font-size: 3rem; }

@media (max-width: 480px) {
  .catalog-media .catalog-icon .silueta { width: 96px; }
  .perfil-icono .silueta { width: 140px; }
}