/* ---------------------------------------------------------------------------
   Páginas de cada convenio (/alianzas-y-convenios/<convenio>/), oct-2026.

   Mismo lenguaje que la portada del sitio Marca: héroe sobre Arctic Mesh con
   el rombo y el sello circular, más dos piezas de Scrolltide pasadas al estilo
   claro:
   - Lime Metrics: tres tarjetas, cada una con su gráfico (dona, barra apilada
     o diagrama), hechos solo con CSS. Los números son los del convenio; la
     barra apilada de la Tarjeta Vecino dice que es un ejemplo.
   - Keelway: el titular de cuatro líneas que «cae al azul» en las que
     importan, aquí como los cuatro pasos para usar el convenio.
   Todo el texto viene escrito en el HTML; el CSS y marca.js solo animan. Con
   movimiento reducido, marca.css ya apaga las transiciones.
   Colores: solo los tokens de marca.css.
   --------------------------------------------------------------------------- */

/* ---------- héroe (copia del de la portada) ---------- */
.heroe { position: relative; overflow-x: clip; padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 6vw, 80px); }
.heroe__g { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
@media (min-width: 940px) { .heroe__g { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }
.heroe__h { font-size: clamp(30px, 3.9vw, 50px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--navy); margin-top: 14px; text-wrap: balance; }
.heroe__h em { font-style: normal; color: var(--magenta); }
.heroe__lema { font-size: clamp(19px, 1.9vw, 25px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; color: var(--navy); margin-top: 14px; text-wrap: balance; }
.heroe .rombo { animation: cv-flota 7s ease-in-out infinite; }
@keyframes cv-flota { 50% { transform: translateY(-10px); } }
@media (max-width: 939px) { .heroe .rombo { width: min(80%, 340px); } }
.heroe__sello { position: absolute; left: 2%; bottom: 6%; width: clamp(104px, 11vw, 132px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--magenta), var(--morado), var(--azul), var(--verde), var(--oro), var(--rojo), var(--magenta)); display: grid; place-items: center; box-shadow: var(--sombra); z-index: 2; }
.heroe__sello > span { width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--oro); color: var(--navy); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 12%; box-sizing: border-box; text-align: center; font-weight: 800; line-height: 1.05; font-size: clamp(9px, 0.9vw, 11px); }
.heroe__sello small { font-size: inherit; }
.heroe__sello b { display: block; font-size: clamp(22px, 2.6vw, 30px); line-height: 1; letter-spacing: -0.03em; }
.heroe__sello b.largo { font-size: clamp(15px, 1.6vw, 19px); }
/* Las migas del sitio son blancas porque van sobre una banda; aquí van sobre hielo. */
.cv-migas { color: var(--navy); }
.cv-migas a { color: var(--navy); }
/* El logo del aliado dentro del rombo, entero y sobre blanco. */
.cv-rombo .rombo__foto { background: var(--gris); display: grid; place-items: center; }
.cv-rombo .rombo__foto img { width: 56%; height: 56%; object-fit: contain; }
.cv-rombo .rombo__borde { background: var(--par, var(--verde)); }
.cv-socio { margin-top: 18px; font-size: 15px; }
.cv-socio a { font-weight: 700; color: var(--magenta); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Lime Metrics, en claro ---------- */
.cv-lm { display: grid; gap: clamp(14px, 2vw, 22px); }
@media (min-width: 900px) { .cv-lm { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cv-lm .tarjeta { display: flex; flex-direction: column; gap: 14px; padding-bottom: 34px; }
.cv-lm h3 { color: var(--navy); }
.cv-lm .tarjeta > p { margin-top: auto; color: var(--suave); font-size: 14.5px; }
.cv-viz { min-height: 150px; display: grid; place-items: center; }

/* Dona: el porcentaje del convenio, sin más. */
@property --cv-p { syntax: '<number>'; inherits: false; initial-value: 0; }
.cv-dona { --cv-p: 0; width: 148px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c, var(--magenta)) calc(var(--cv-p) * 1%), var(--linea) 0); transition: --cv-p 1.4s var(--ease) 0.2s; }
.visto .cv-dona, html:not(.js) .cv-dona { --cv-p: var(--v); }
.cv-dona > span { width: 74%; aspect-ratio: 1; border-radius: 50%; background: white; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.cv-dona b { font-size: 34px; font-weight: 800; letter-spacing: -0.04em; color: var(--navy); line-height: 1; }
.cv-dona small { font-size: 12.5px; font-weight: 700; color: var(--suave); margin-top: 4px; }

/* Barra apilada: cómo se suman los puntos (Tarjeta Vecino). */
.cv-suma { width: 100%; display: grid; gap: 12px; }
.cv-suma__barra { display: flex; height: 44px; border-radius: 4px; overflow: hidden; background: var(--linea); }
.cv-suma__barra span { flex: 0 0 auto; width: 0; background: var(--par); display: grid; place-items: center; color: white; font-weight: 800; font-size: 14px; transition: width 1s var(--ease); }
.cv-suma__barra span:nth-child(2) { transition-delay: 0.35s; }
.cv-suma__barra span:nth-child(3) { transition-delay: 0.6s; }
.visto .cv-suma__barra span, html:not(.js) .cv-suma__barra span { width: calc(var(--w) * 1%); }
.cv-suma__ley { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; font-weight: 700; color: var(--texto); }
.cv-suma__ley li { display: flex; align-items: center; gap: 6px; }
.cv-suma__ley i { width: 12px; height: 12px; border-radius: 2px; background: var(--par); }
.cv-suma__total { font-size: 28px; font-weight: 800; color: var(--navy); letter-spacing: -0.03em; }

/* Diagrama: el convenio y el descuento habitual, se queda el mayor. */
.cv-mayor { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 8px; align-items: stretch; text-align: center; font-weight: 800; font-size: 14.5px; }
.cv-mayor__a, .cv-mayor__b { padding: 14px 8px; border-radius: 4px; color: var(--navy); background: var(--gris); border-bottom: 4px solid var(--c, var(--magenta)); }
.cv-mayor__b { border-bottom-color: var(--azul); }
.cv-mayor__o { color: var(--suave); font-size: 13px; align-self: center; }
.cv-mayor__a, .cv-mayor__b { display: grid; place-items: center; }
.cv-mayor__flecha { grid-column: 1 / -1; justify-self: center; width: 26px; height: 26px; color: var(--suave); }
.cv-mayor__r { grid-column: 1 / -1; padding: 14px; border-radius: 4px; color: white; background: var(--par-mr); }

/* Chips: dónde vale. */
.cv-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cv-chips li { padding: 9px 14px; border-radius: 999px; background: var(--gris); border: 1px solid var(--linea); font-weight: 700; font-size: 14.5px; color: var(--navy); }

/* Sin cifra fija (acuerdo institucional, promoción variable). */
.cv-grande { font-size: clamp(30px, 3vw, 40px); font-weight: 800; letter-spacing: -0.04em; line-height: 1.05; text-align: center; background: var(--par-mr); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Keelway: cuatro líneas, las que importan caen al azul ---------- */
.kw { list-style: none; margin: clamp(18px, 3vw, 30px) 0 0; padding: 0; display: grid; gap: clamp(18px, 2.6vw, 30px); counter-reset: kw; }
.kw li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, 2vw, 26px); align-items: baseline; }
.kw__n { font-family: 'Pirulen Tesla', sans-serif; font-size: clamp(13px, 1.2vw, 16px); color: var(--suave); }
.kw__l { font-size: clamp(28px, 4.6vw, 60px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; color: var(--navy); text-wrap: balance; }
.kw li:nth-child(even) .kw__l { background: var(--par-an); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kw__d { grid-column: 2; margin-top: 8px; max-width: 60ch; font-size: 16px; color: var(--texto); }
.kw li[data-sube] { transition-delay: calc(var(--i, 0) * 0.08s); }

/* Detalles del sitio que aquí se notan: el «+» de las preguntas (sede.css lo
   pinta magenta sobre la caja magenta de marca.css) y la etiqueta del
   formulario, que la grilla estiraba a todo el ancho. */
.faq__i summary::after { color: white; }
.agenda__lado .etiqueta { justify-self: start; }

/* ---------- texto largo ---------- */
.prosa { max-width: 860px; margin-inline: auto; }
.prosa .titulo-2 { margin-top: clamp(30px, 4vw, 44px); }
.prosa .titulo-2:first-child { margin-top: 0; }
.prosa p, .prosa ul { margin-top: 12px; font-size: 16.5px; }
.prosa ul { padding-left: 22px; display: grid; gap: 6px; }
.prosa p a { color: var(--magenta); font-weight: 700; }
.prosa .indice { justify-content: flex-start; margin-top: 16px; }

/* ---------- celular en «sitio de escritorio» (~980×2100) ----------
   Ahí el navegador arma el diseño de escritorio en una pantalla angosta y
   todo sale chico. Se agranda con zoom (ninguna de estas secciones usa vh ni
   posiciones calculadas por JS) y se apila en una columna. */
@media (max-aspect-ratio: 3/5) and (min-width: 600px) {
  main, .pie { zoom: 1.55; }
  .heroe__g, .agenda, .cv-lm { grid-template-columns: minmax(0, 1fr) !important; }
  .heroe .rombo { width: min(80%, 340px); }
}