/* comparaciones.css — SOLO lo que nace en `/comparaciones` y en la página de una
   comparación.
   ────────────────────────────────────────────────────────────────────────────
   `landing.css` se carga antes y trae los tokens, la letra, la barra, los
   botones, los huecos y el pie: nada de eso se copia aquí. Esta hoja es corta a
   propósito, y la landing NO la carga — no puede romperse por nada de lo que se
   escriba en este archivo. Es el mismo trato que `nosotros.css`.

   ⚠ AQUÍ SÍ HAY CARTAS DESDE EL 2026-09-03, y este archivo decía lo contrario
     esa misma mañana. No es que el estilo cambiara de opinión: cambió la cosa.
     `CLAUDE.md` acota que «es carta lo que es UNA COSA QUE SE ABRE O SE CLICA»,
     y hasta ese día las comparaciones eran bloques de lectura sin destino —
     encartonarlas habría sido el «bordes por todos lados» que
     `DIRECCION_DISENO.md` prohíbe—. Ahora cada una tiene su propia página y la
     carta entera es el enlace, así que la carta dice la verdad: esto se clica.
     El Director pidió las dos cosas en la misma frase y encajan.

   ⚠ LO QUE ESTA HOJA INVENTA SE LLAMA `carta*`, `lado*` Y `contraste*`. NO
     `tarjeta`, que ya es de los planes en `landing.css`, ni `plan*`, ni `comparar`
     a secas. Es la cicatriz del 2026-09-01 en la app del cliente: se hereda la
     paleta de la landing, no su espacio de nombres, y un nombre repetido se
     estila desde dos hojas a la vez. */

.comparaciones { padding-block: clamp(56px, 7vw, 104px) clamp(72px, 8vw, 120px); }

/* DOS COLUMNAS Y NO TRES. Con tres, cada carta queda a ~330 px y el gancho cae
   en cuatro renglones flacos. `auto-fit` con mínimo de 340 px las baja sola a
   una en pantalla angosta, sin una media query. */
.comparaciones__reja {
  margin-top: clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: clamp(20px, 2vw, 28px);
  list-style: none;
  text-align: left;
}

/* LA CARTA. La que `DIRECCION_DISENO.md` autoriza en su sección de precios y
   con sus palabras: «fondo blanco, borde fino gris, bordes redondeados, sin
   sombras fuertes». Al pasar el cursor se oscurece el filete y sube dos
   píxeles — nada de sombra, que es lo prohibido. */
.carta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--curva);
  transition: border-color .18s ease, transform .18s ease;
}
.carta:hover { border-color: var(--tinta-suave); transform: translateY(-2px); }
.carta:focus-within { border-color: var(--marca); }

/* El <a> ocupa la carta entera para que el área clicable sea la carta y no el
   renglón del título. `flex` en columna para que el gancho quede abajo aunque
   los títulos midan distinto. */
.carta__liga {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(22px, 2.2vw, 30px);
  color: inherit;
  text-decoration: none;
}
.carta__liga:focus-visible { outline: none; }

.carta__marcas {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* LOS DOS LOGOS, DEL MISMO ALTO. El nuestro va como máscara sobre
   `currentColor` —igual que en la barra— para que sea tinta y no una imagen de
   color; el ajeno va como <img> intacto, que es la única forma de uso nominativo
   que no se discute. Por eso son dos reglas y no una. */
.carta__logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 9px;
}
/* ⚠ ES LA «a» DE LA BARRA —`a-negrita.png`— Y NO `simbolo.svg`. Lo cazó el
   Director el 2026-09-03: *«pon el logo que está en la barra en las
   comparaciones, el que está es el delgado viejo»*. `simbolo.svg` es el
   símbolo de marca con el asta recta y la panza cerrada que la barra dejó de
   usar el 2026-08-28 (ver `.marca__simbolo` en `landing.css`); aquí se había
   colado porque es el único logo vectorial del repo. El mismo archivo que la
   barra, para que la marca no cambie al navegar.

   ⚠ Y VA AL 82 %, NO AL 100, y es corrección óptica, no capricho: los diez
   ajenos son iconos de app —su dibujo viene ya con aire adentro de un círculo
   o un cuadrado redondeado— y el nuestro es la letra pelona, en negro sólido.
   A la misma caja, la «a» pesa el doble. El 82 % le pone por fuera el aire que
   ellos traen por dentro. */
.carta__logo--nuestro {
  color: var(--tinta);
  background-color: currentColor;
  border-radius: 0;
  -webkit-mask: url(/static/landing/logo/a-negrita.png) no-repeat center / 82%;
          mask: url(/static/landing/logo/a-negrita.png) no-repeat center / 82%;
}
.carta__vs {
  font-size: 15px;
  font-weight: 500;
  color: var(--tinta-suave);
}

.carta__titulo {
  margin-top: 20px;
  font-size: clamp(19px, 1.6vw, 22px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
/* «vs.» en gris y sin negrita: es el gozne entre los dos nombres, no un tercer
   nombre. En tinta y en bold competiría con los dos que sí importan. */
.carta__gris,
.comparacion__gris { font-weight: 500; color: var(--tinta-suave); }

.carta__gancho {
  margin-top: 9px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-wrap: pretty;
}

.comparaciones__salida {
  margin-top: clamp(64px, 7vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.comparaciones__cierre {
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
  letter-spacing: -0.011em;
  color: var(--tinta);
}
/* `.puerta__nota` viene de `landing.css` y allá va debajo de un botón dentro de
   `.puerta`, que le da su margen. Aquí el `gap` del flex ya separa, así que se
   le quita el suyo para que no se sumen. */
.comparaciones__salida .puerta__nota,
.comparacion__salida .puerta__nota { margin-top: 0; }


/* ── LA PÁGINA DE UNA COMPARACIÓN ────────────────────────────────────────────
   Alineada a la izquierda y no centrada, al revés que el directorio: aquí hay
   párrafos que se leen seguidos, y un párrafo centrado obliga al ojo a buscar
   dónde empieza cada renglón. El directorio son rótulos cortos y sí se centra. */
.comparacion { padding-block: clamp(48px, 6vw, 88px) clamp(72px, 8vw, 120px); }

.comparacion__marcas {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(24px, 2.5vw, 34px);
}
.comparacion__logo {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: contain;
  border-radius: 12px;
}
/* La misma «a» de la barra que en la carta, por la misma razón (arriba). */
.comparacion__logo--nuestro {
  color: var(--tinta);
  background-color: currentColor;
  border-radius: 0;
  -webkit-mask: url(/static/landing/logo/a-negrita.png) no-repeat center / 82%;
          mask: url(/static/landing/logo/a-negrita.png) no-repeat center / 82%;
}
.comparacion__vs {
  font-size: 17px;
  font-weight: 500;
  color: var(--tinta-suave);
}

/* LOS DOS LADOS. Dos columnas parejas: el suyo y el nuestro miden lo mismo,
   porque una comparación en la que nuestro lado es el doble de ancho se lee
   como folleto. Lo que los distingue es el color de la letra, no el tamaño. */
.comparacion__lados {
  margin-top: clamp(40px, 4.5vw, 64px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(28px, 3vw, 48px);
}
.lado { padding-top: 22px; border-top: 1px solid var(--linea); }
/* El filete del nuestro va en tinta: es la única marca de que ese lado es el
   nuestro. Sin fondo de color — `DIRECCION_DISENO.md` no lo autoriza. */
.lado--nuestro { border-top-color: var(--tinta); }
.lado__titulo {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--tinta-suave);
}
.lado--nuestro .lado__titulo { color: var(--tinta); }
.lado__texto {
  margin-top: 12px;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.6;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.lado--nuestro .lado__texto { color: var(--tinta); }

/* LAS CUATRO CAPACIDADES. Renglones separados por un filete fino y sin viñeta:
   `DIRECCION_DISENO.md` quiere líneas que organicen y no decoren, y una
   viñeta aquí sería un tercer color de tinta compitiendo con el gris y el
   negro que ya distinguen los dos lados. El lado nuestro va en tinta por la
   misma regla que su párrafo. */
.lado__lista {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.lado__capacidad {
  padding: 10px 0;
  border-top: 1px solid var(--linea);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-wrap: pretty;
}
.lado--nuestro .lado__capacidad { color: var(--tinta); }

/* LAS TRES DIFERENCIAS. Tres columnas en pantalla ancha, una debajo de otra en
   angosta. `dt` es el rótulo y los dos `dd` son las dos lecturas. */
.contrastes {
  margin-top: clamp(48px, 5vw, 76px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 2.5vw, 40px);
}
.contraste { padding-top: 20px; border-top: 1px solid var(--linea); }
.contraste__que {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--tinta);
}
.contraste__suyo,
.contraste__nuestro {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
  text-wrap: pretty;
}
.contraste__suyo    { color: var(--tinta-suave); }
.contraste__nuestro { color: var(--tinta); }
/* De quién es cada renglón, en versalitas chicas encima. Es lo que evita tener
   que escribir «ChatGPT: …» dentro de la frase, que se leería como diálogo. */
.contraste__quien {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.comparacion__salida {
  margin-top: clamp(64px, 7vw, 104px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* LA VUELTA AL ÍNDICE. Enlace de texto y no botón: hay un botón a diez píxeles
   —la demo— y dos botones seguidos compiten en vez de jerarquizar. Este es la
   salida secundaria y se ve como lo que es. */
.comparacion__volver {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta-suave);
  text-decoration: none;
  transition: color .18s ease;
}
.comparacion__volver:hover { color: var(--marca); }
.comparacion__volver .flecha { width: 17px; height: 17px; }