/* Paginas /alternatives (SEO de comparacion) · se carga despues de home.css y usa sus mismos tokens,
   asi que hereda modo claro/oscuro, tipografia y oro rosa. Solo agrega lo propio de estas paginas. */

/* Hero mas corto que el de la home: sin video, con el resplandor carmesi del emblema. */
.alt-hero { min-height: auto; padding: clamp(8rem, 16vw, 11rem) var(--gutter) clamp(4rem, 8vw, 6rem);
  background:
    radial-gradient(60% 80% at 100% 0%, rgba(181,18,59,.32), transparent 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(90,10,30,.45), transparent 65%),
    #08050a; }
.alt-hero .hero-grid { grid-template-columns: minmax(0, 1fr); }
.alt-hero h1 { font-size: clamp(2.6rem, 7vw, 5.4rem); max-width: 16ch; }
.crumbs { margin: 0 0 1.6rem; font-size: .85rem; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; border-bottom: 1px solid transparent; }
.crumbs a:hover { color: var(--rose); border-bottom-color: var(--rose); }

/* Por que LEVIATHAN: mismas filas que los privilegios de la home, en rejilla de dos o cuatro. */
.alt-why { margin-top: 2.5rem; }
@media (min-width: 1040px) { .alt-why { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.5rem; } }

/* Lo que dice el competidor: cada dato con su fuente y fecha. */
.alt-facts { margin: 2.5rem 0 0; display: grid; gap: 0; border-top: 1px solid var(--line); max-width: 56rem; }
.alt-facts > div { display: grid; gap: .5rem; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.alt-facts dt { font: 700 .68rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.alt-facts dd { margin: 0; color: var(--ink); }
.alt-facts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.alt-facts .src { color: var(--rose); font-size: .82rem; text-underline-offset: .2em; }
.alt-facts .when { color: var(--muted); font-size: .82rem; }
@media (min-width: 760px) { .alt-facts > div { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; } .alt-facts dt { padding-top: .3rem; } }

.alt-switch { list-style: none; margin: 1rem 0 0; padding: 0; max-width: 44rem; counter-reset: s; }
.alt-switch li { counter-increment: s; display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding: 1.1rem 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.alt-switch li::before { content: counter(s, upper-roman); font: italic 500 1.3rem/1.2 var(--serif); color: var(--rose); }

/* Preguntas frecuentes con <details>: sin JavaScript, accesibles con teclado. */
.alt-faq { max-width: 48rem; border-top: 1px solid var(--line); }
.alt-faq details { border-bottom: 1px solid var(--line); }
.alt-faq summary { cursor: pointer; list-style: none; padding: 1.3rem 2.5rem 1.3rem 0; position: relative; font: 600 1.35rem/1.3 var(--serif); }
.alt-faq summary::-webkit-details-marker { display: none; }
.alt-faq summary::after { content: "+"; position: absolute; right: .3rem; top: 1.1rem; font: 400 1.6rem/1 var(--sans); color: var(--rose); transition: transform .3s var(--ease); }
.alt-faq details[open] summary::after { transform: rotate(45deg); }
.alt-faq summary:focus-visible { outline: 2px solid var(--rose); outline-offset: 4px; border-radius: 4px; }
.alt-faq p { margin: 0 0 1.4rem; color: var(--muted); max-width: 42rem; }
.alt-disclaimer { margin: 3rem 0 0; font-size: .82rem; color: var(--muted); max-width: 48rem; }

/* Indice: una tarjeta por competidor con filo de oro rosa. */
.alt-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .alt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .alt-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.alt-card { display: grid; gap: .7rem; padding: 2rem 1.8rem; min-height: 11rem; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .3s var(--ease), transform .3s var(--ease); }
.alt-card:hover, .alt-card:focus-visible { border-color: var(--rose); transform: translateY(-2px); }
.alt-card-k { font: italic 500 1.05rem/1.2 var(--serif); color: var(--rose); }
.alt-card strong { font: 500 2.2rem/1 var(--serif); }
.alt-card-cta { align-self: end; font-size: .88rem; color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .alt-card, .alt-faq summary::after { transition: none; } }