/* ==========================================================================
   Xcelll: capa común del rediseño 2026-11 (todas las páginas menos la portada,
   que usa hero-fx.css). Se carga DESPUÉS de styles.css / tools.css y solo
   reestiliza clases que ya existen; el JS (js/xcelll-ui.js) añade los
   detalles animados.

   1. Antetítulos sin caja        6. Consejos en tarjetas numeradas
   2. Titulares                   7. Preguntas frecuentes
   3. Hero de las herramientas    8. "Más herramientas" en bandas en X
   4. "Cómo funciona" en tinta     9. Guías y páginas de texto
   5. Tarjetas                   10. Movimiento reducido
   ========================================================================== */

/* 1. Antetítulos y etiquetas: texto, sin pastilla ------------------------------- */
.eyebrow {
  display: block;
  margin: 0 auto 16px;
  padding: 0;
  border: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  font: 800 .8rem/1.3 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  animation: rise .6s var(--ease) both;
}
.eyebrow .pulse { display: none; }
.guide-tag {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  border-radius: 0;
  background: none;
  font: 800 .72rem/1.2 var(--display);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* 2. Titulares ---------------------------------------------------------------- */
h1, h2, h3 { letter-spacing: -.03em; }
h2 { font-weight: 800; }
.section h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.05; }

/* 3. Hero de las páginas de herramienta ----------------------------------------- */
.hero { padding-top: 64px; }
.hero h1 {
  font-size: clamp(2.4rem, 5.4vw, 4.3rem);
  line-height: 1.02;
  letter-spacing: -.04em;
  max-width: 17ch;
}
/* La palabra clave va dentro de una "celda seleccionada" de Excel, como en la portada */
.hero h1 .hl {
  position: relative;
  display: inline-block;
  padding: 0 .16em;
  margin: 0 .02em;
  border-radius: .08em;
  background: color-mix(in srgb, var(--g-400) 9%, transparent);
  box-shadow: inset 0 0 0 .055em var(--g-500);
  color: var(--ink);
  -webkit-text-fill-color: currentColor;
  white-space: nowrap;
}
.hero h1 .hl::after {
  content: "";
  position: absolute;
  left: auto; right: -.075em; bottom: -.075em;
  width: .15em; height: .15em;
  border-radius: 0;
  background: var(--g-500);
  box-shadow: 0 0 0 .035em var(--bg);
  opacity: 1;
  transform: none;
  animation: none;
  z-index: 1;
}
.hero .subtitle { font-size: 1.1rem; }
.hero .privacy-badge { margin-top: 18px; font-size: .9rem; }

/* 4. "Cómo funciona" en fondo tinta, con riel y logo ------------------------------ */
#como-funciona {
  --cf-ink-2: #a9c1b5;
  margin: 56px 12px 0;
  padding: 92px 0;
  border-radius: 40px;
  background:
    radial-gradient(60% 50% at 85% 20%, rgba(60, 207, 142, .16), transparent 70%),
    radial-gradient(50% 40% at 10% 90%, rgba(182, 243, 106, .10), transparent 70%),
    #0b1a13;
  color: #eef8f2;
  overflow: clip;
}
@media (prefers-color-scheme: dark) { #como-funciona { background-color: #030c08; box-shadow: inset 0 0 0 1px #1a2e24; } }
#como-funciona > .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; }
#como-funciona h2 { color: #fff; text-align: left; margin: 0; max-width: 14ch; position: sticky; top: 120px; }
#como-funciona h2::before {
  content: "Cómo funciona";
  display: block;
  margin-bottom: 14px;
  font: 800 .8rem/1 var(--display);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--lime);
}
#como-funciona .steps {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  margin: 0;
  padding-left: 0;
}
#como-funciona .steps::before { display: none; }
#como-funciona .steps li {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 14px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  opacity: .4;
  transition: opacity .5s var(--ease);
}
#como-funciona .steps li:hover { transform: none; box-shadow: none; }
#como-funciona .steps li.is-on { opacity: 1; }
#como-funciona .step-n {
  grid-row: 1 / span 2;
  align-self: start;
  width: auto; height: auto;
  margin: 0;
  border-radius: 0;
  background: linear-gradient(90deg, var(--lime) 0 50%, transparent 50% 100%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(255, 255, 255, .55);
  box-shadow: none;
  font: 800 3.6rem/.9 var(--display);
  letter-spacing: -.04em;
  transition: background-position .75s cubic-bezier(.65, 0, .35, 1), -webkit-text-stroke-color .45s;
}
#como-funciona .steps li.is-on .step-n { background-position: 0 0; -webkit-text-stroke-color: var(--lime); }
#como-funciona .steps h3 { margin: 4px 0 6px; color: #fff; font-size: 1.4rem; }
#como-funciona .steps p { color: var(--cf-ink-2); max-width: 46ch; }
#como-funciona .steps a { color: var(--lime); }
/* Riel y logo (los crea el JS) */
.ux-rail {
  position: absolute;
  left: -46px;
  top: var(--rail-top, 26px);
  height: var(--rail-h, 0px);
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .12);
}
.ux-rail-fill {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--logo-y, 0px) + 1px);
  border-radius: 2px;
  background: linear-gradient(180deg, transparent, var(--g-400) 30%, var(--lime));
  box-shadow: 0 0 12px var(--g-400);
}
.ux-logo {
  position: absolute;
  left: 1px; top: 0;
  width: 42px; height: 42px;
  margin: -21px 0 0 -21px;
  transform: translateY(var(--logo-y, 0px));
  filter: drop-shadow(0 10px 18px rgba(14, 138, 87, .55));
}
.ux-logo svg { display: block; width: 100%; height: 100%; }
.ux-logo path { fill: none; stroke: #fff; stroke-width: 5.2; stroke-linecap: round; stroke-dasharray: 1; }
.ux-logo::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 17px;
  border: 2px solid var(--lime);
  opacity: 0;
  animation: ux-halo 2.4s ease-out infinite;
}
@keyframes ux-halo { 0% { transform: scale(.8); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } }
.ux-logo.is-flip svg { animation: ux-flip .9s cubic-bezier(.34, 1.56, .64, 1); }
.ux-logo.is-flip path:nth-of-type(1) { animation: ux-draw .7s .15s ease-out both; }
.ux-logo.is-flip path:nth-of-type(2) { animation: ux-draw .7s .3s ease-out both; }
@keyframes ux-flip { from { transform: rotateY(0) scale(.85); } to { transform: rotateY(360deg) scale(1); } }
@keyframes ux-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* 5. Tarjetas ------------------------------------------------------------------- */
.cards { gap: 18px; }
.card, .cards .card:first-child {
  padding: 24px 22px;
  border-radius: 24px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: color-mix(in srgb, var(--g-400) 50%, var(--line)); }
.card h3 { font-size: 1.22rem; }
.card-ic {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 16px;
  border-radius: 16px;
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .35), transparent 55%),
    linear-gradient(140deg, #3ccf8e, #0a6b44);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 12px 22px -12px rgba(10, 107, 68, .8);
  transition: transform .5s cubic-bezier(.34, 1.56, .64, 1);
}
.card-ic svg { color: #fff; stroke: currentColor; }
.card:hover .card-ic { transform: rotate(-8deg) scale(1.06); }

/* 6. Consejos en tarjetas numeradas (el JS agrupa los párrafos) -------------------- */
.ux-tips {
  counter-reset: tip;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  max-width: 1040px;
  margin: 34px auto 0;
}
.ux-tips > p {
  counter-increment: tip;
  position: relative;
  margin: 0;
  padding: 22px 22px 22px 78px;
  border-radius: 22px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
  color: var(--ink-2);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.ux-tips > p:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ux-tips > p::before {
  content: counter(tip, decimal-leading-zero);
  position: absolute;
  left: 20px; top: 18px;
  font: 800 1.9rem/1 var(--display);
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--g-500);
}
.ux-tips > p > strong:first-child { display: block; margin-bottom: 4px; color: var(--ink); font-family: var(--display); font-size: 1.08rem; }
.ux-tips > p:last-child:nth-child(odd) { grid-column: 1 / -1; }
.wrap.narrow.ux-wide { max-width: 1120px; }

/* 7. Preguntas frecuentes ---------------------------------------------------------- */
.fq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); gap: 56px; align-items: start; }
.fq-side { position: sticky; top: 110px; text-align: left; }
.section.fq .fq-side h2 { text-align: left; margin: 0 0 14px; max-width: 10ch; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.04em; }
.section.fq .fq-side h2 em { font-style: normal; }
.fq-mark {
  display: block;
  margin: -10px 0 -6px -6px;
  font: 800 clamp(7rem, 13vw, 11rem)/.85 var(--display);
  color: transparent;
  text-shadow:
    2px 0 0 var(--g-400), -2px 0 0 var(--g-400), 0 2px 0 var(--g-400), 0 -2px 0 var(--g-400),
    1.4px 1.4px 0 var(--g-400), -1.4px 1.4px 0 var(--g-400), 1.4px -1.4px 0 var(--g-400), -1.4px -1.4px 0 var(--g-400);
  -webkit-text-fill-color: var(--bg);
  animation: fq-tilt 6s ease-in-out infinite;
  transform-origin: 40% 80%;
}
@keyframes fq-tilt { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-6px); } }
.fq-more { margin: 0; color: var(--ink-2); font-weight: 600; }
.fq-more a { color: var(--accent); font-weight: 800; text-decoration: none; }
.fq-more a:hover { text-decoration: underline; }
.fq .faq { margin-top: 0; counter-reset: fq; }
.fq .faq details { counter-increment: fq; margin: 0 0 10px; border-radius: 18px; overflow: hidden; }
.fq .faq summary { display: flex; align-items: center; gap: 16px; padding: 18px 60px 18px 18px; font-size: 1.04rem; }
.fq .faq summary::before {
  content: counter(fq, decimal-leading-zero);
  flex: none;
  width: 2.1em;
  font: 800 1.35rem/1 var(--display);
  letter-spacing: -.03em;
  color: transparent;
  -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink) 40%, transparent);
  background: linear-gradient(90deg, var(--g-500) 0 50%, transparent 50% 100%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  transition: background-position .6s cubic-bezier(.65, 0, .35, 1), -webkit-text-stroke-color .3s;
}
.fq .faq details[open] summary::before { background-position: 0 0; -webkit-text-stroke-color: var(--g-500); }
.fq .faq summary:hover { background: color-mix(in srgb, var(--g-400) 7%, transparent); }
.fq .faq summary::after { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.fq .faq details[open] summary::after { transform: rotate(45deg); }
.fq .faq details p { padding: 0 22px 18px calc(18px + 2.1em * 1.35 + 16px); }

/* 8. "Más herramientas" en dos bandas que se cruzan en X ------------------------------ */
.tb { position: relative; overflow-x: clip; padding-bottom: 72px; }
.tb-head { text-align: center; }
.tb-kicker { margin: 0 0 10px; font: 800 .8rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.tb-cross { position: relative; margin: 34px 0 30px; padding: 40px 0; }
.tb-row { position: relative; width: 112vw; margin-left: -6vw; padding: 18px 0; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(5, 51, 33, .55); }
.tb-a { background: var(--lime); color: #0d1f17; transform: rotate(-3.2deg); z-index: 2; }
.tb-b { --tb-bg: #0b1a13; background: var(--tb-bg); color: var(--lime); transform: rotate(2.6deg); margin-top: 18px; z-index: 1; }
@media (prefers-color-scheme: dark) {
  .tb-b { --tb-bg: #0d3322; box-shadow: inset 0 2px 0 var(--lime), inset 0 -2px 0 var(--lime), 0 24px 50px -30px #000; }
}
.tb-track { display: flex; width: max-content; animation: tb-run 46s linear infinite; }
.tb-b .tb-track { animation-direction: reverse; animation-duration: 52s; }
.tb-row:hover .tb-track, .tb-row:focus-within .tb-track { animation-play-state: paused; }
@keyframes tb-run { to { transform: translateX(-50%); } }
.tb-set { display: flex; flex: none; }
.tb-item {
  display: inline-flex; align-items: center; gap: .42em; padding: 0 .42em;
  font: 800 clamp(2.1rem, 5.4vw, 4.6rem)/1 var(--display);
  letter-spacing: -.035em; text-transform: uppercase; white-space: nowrap; text-decoration: none; color: inherit;
}
.tb-a .tb-item span { transition: color .3s var(--ease); }
.tb-b .tb-item span {
  color: var(--tb-bg);
  text-shadow:
    1.5px 0 0 var(--lime), -1.5px 0 0 var(--lime), 0 1.5px 0 var(--lime), 0 -1.5px 0 var(--lime),
    1.1px 1.1px 0 var(--lime), -1.1px 1.1px 0 var(--lime), 1.1px -1.1px 0 var(--lime), -1.1px -1.1px 0 var(--lime);
  transition: color .3s var(--ease);
}
.tb-b .tb-item:hover span, .tb-b .tb-item:focus-visible span { color: var(--lime); }
.tb-a .tb-item:hover span, .tb-a .tb-item:focus-visible span { color: var(--g-700); }
.tb-item:focus-visible { outline: 3px solid currentColor; outline-offset: -3px; border-radius: 8px; }
.tb-x { flex: none; width: .5em; height: .5em; transition: transform .6s cubic-bezier(.34, 1.56, .64, 1); }
.tb-x rect { fill: currentColor; opacity: .14; }
.tb-x path { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; }
.tb-item:hover .tb-x, .tb-item:focus-visible .tb-x { transform: rotate(180deg) scale(1.15); }
.tb-foot { text-align: center; }
.tb-foot .lead { max-width: 52ch; margin: 0 auto 18px; color: var(--ink-2); }

/* 9. Guías y páginas de texto ------------------------------------------------------- */
.page-card h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); line-height: 1.03; letter-spacing: -.04em; }
.page-card h2 { position: relative; font-size: clamp(1.5rem, 2.8vw, 2rem); margin-top: 2em; padding-top: 18px; }
.page-card h2::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 4px; border-radius: 2px; background: var(--lime); }
.lead-left { font-size: 1.2rem; line-height: 1.6; }
/* Captura de la guía: flota inclinada y se endereza al entrar en pantalla */
.shot { perspective: 1400px; }
.shot img {
  border-radius: 18px;
  box-shadow: 0 2px 4px rgba(5, 51, 33, .06), 0 40px 80px -36px rgba(5, 51, 33, .55);
  transform: rotateX(10deg) rotateY(-8deg) scale(.96);
  transition: transform 1.1s cubic-bezier(.16, 1, .3, 1);
}
.shot.is-in img { transform: none; }
/* Pasos numerados en contorno que se rellenan */
.steps-list li { padding: 18px 18px 18px 74px; border-radius: 18px; }
.steps-list li::before {
  content: counter(st, decimal-leading-zero);
  left: 18px; top: 16px;
  width: auto; height: auto;
  border-radius: 0;
  background: linear-gradient(90deg, var(--g-500) 0 50%, transparent 50% 100%) 100% 0 / 200% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1.2px var(--g-500);
  box-shadow: none;
  font: 800 1.7rem/1 var(--display);
  letter-spacing: -.04em;
  display: block;
  transition: background-position .7s cubic-bezier(.65, 0, .35, 1);
}
.steps-list li.is-in::before { background-position: 0 0; }
/* Listas con ✓ lima */
.ticks li { padding-left: 38px; }
.ticks li::before {
  content: "✓";
  left: 0; top: .1em;
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--lime);
  color: #0b1a13;
  font-weight: 900;
  font-size: .78rem;
  border: 0;
  transform: none;
}
/* Recuadro final en fondo tinta */
.cta-box {
  margin-top: 2.6em;
  padding: 30px 30px;
  border: 0;
  border-radius: 28px;
  background:
    radial-gradient(60% 80% at 90% 0%, rgba(60, 207, 142, .22), transparent 70%),
    #0b1a13;
  color: #c3d6cc;
}
.cta-box p, .page-card .cta-box p { color: #c3d6cc; }
.cta-title, .page-card .cta-title { color: #fff !important; font-size: 1.5rem; letter-spacing: -.03em; }
.cta-box .btn-primary { background: var(--lime); color: #0b1a13; box-shadow: none; }
@media (prefers-color-scheme: dark) { .cta-box { background-color: #030c08; box-shadow: inset 0 0 0 1px #1a2e24; } }
.related { border-radius: 22px; background: var(--card); }
/* Riel lateral de lectura con el logo (lo crea el JS en pantallas anchas) */
.ux-read {
  position: fixed;
  left: max(24px, calc(50% - 560px));
  top: 120px;
  bottom: 80px;
  width: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 5;
}
.ux-read.is-on { opacity: 1; }
.ux-read .ux-rail-fill { height: calc(var(--logo-y, 0px) + 1px); }
.ux-read .ux-logo { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
@media (max-width: 1279px) { .ux-read { display: none; } }

/* Pantallas medianas y móviles */
@media (max-width: 899px) {
  .hero { padding-top: 36px; }
  #como-funciona { margin: 40px 8px 0; padding: 60px 0; border-radius: 28px; }
  #como-funciona > .wrap { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  #como-funciona h2 { position: static; }
  #como-funciona .steps { padding-left: 46px; gap: 26px; }
  #como-funciona .steps li { grid-template-columns: 62px minmax(0, 1fr); }
  #como-funciona .step-n { font-size: 2.6rem; }
  .ux-rail { left: 16px; }
  .ux-logo { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .ux-tips { grid-template-columns: minmax(0, 1fr); }
  .ux-tips > p:last-child:nth-child(odd) { grid-column: auto; }
  .fq-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .fq-side { position: static; text-align: center; }
  .section.fq .fq-side h2 { text-align: center; margin: 0 auto 10px; max-width: none; }
  .fq-mark { margin: 0 auto -10px; font-size: 6rem; }
  .fq .faq summary { gap: 10px; padding: 16px 52px 16px 14px; font-size: .98rem; }
  .fq .faq summary::before { font-size: 1.05rem; width: 1.9em; }
  .fq .faq details p { padding: 0 18px 16px 14px; }
  .tb-row { padding: 12px 0; }
  .tb-a { transform: rotate(-4deg); }
  .tb-b { transform: rotate(3.5deg); margin-top: 12px; }
  .tb-track { animation-duration: 34s; }
  .tb-b .tb-track { animation-duration: 38s; }
  .shot img { transform: none; }
}

/* 10. Movimiento reducido ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fq-mark, .ux-logo::before { animation: none; }
  .ux-logo.is-flip svg, .ux-logo.is-flip path { animation: none; }
  .shot img { transform: none; transition: none; }
  #como-funciona .steps li { opacity: 1; }
  .tb-track { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
  .tb-set { flex-wrap: wrap; justify-content: center; }
  .tb-set[aria-hidden="true"] { display: none; }
  .tb-a, .tb-b { transform: none; width: auto; margin-left: 0; }
  .tb-item { font-size: clamp(1.4rem, 3vw, 2.2rem); padding: .1em .4em; }
}

/* Ajustes tras revisar todas las páginas ------------------------------------------- */
h1 em, h2 em { font-style: normal; }
/* Índice de guías: dos columnas, para que los títulos no se partan */
.page-card .guide-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-card .guide-index .card h3 { font-size: 1.12rem; line-height: 1.2; }
@media (max-width: 640px) { .page-card .guide-index { grid-template-columns: minmax(0, 1fr); } }
/* Los títulos de las tarjetas no llevan la barrita de los subtítulos de las guías */
.page-card .card h2, .page-card .tool-tile h2, .page-card .guide-h, .page-card .soon h2 { padding-top: 0; }
.page-card .card h2::before, .page-card .tool-tile h2::before, .page-card .guide-h::before { display: none; }
/* "La más usada" también sin pastilla */
.tool-tile-main .guide-tag { background: none; color: var(--lime); padding: 0; }

/* ---- Arreglos de la auditoría (7-nov-2026) ---- */
@media (prefers-color-scheme: light) {
  .guide-tag, .tool-sec, .tb-kicker, .fq-more a, .soon-cta a { color: var(--g-700); }
  main p a:not(.btn):not([class]), main li a:not(.btn):not([class]) { color: var(--g-700); }
}
@media (hover: none), (max-width: 760px) {
  .fq-mark, .ux-logo, .ux-logo::before, .ux-logo::after { animation-iteration-count: 3 !important; }
}