/* Storyfeel — public pricing page. Loaded only by pricing.html; legal.css supplies the
   theme variables, typography and .wrap/.brand/.langbar chrome. These rules mirror the
   in-app plan cards (styles.css .plan-*) closely enough to read as the same product, but
   are intentionally a separate file: the app's plans screen is a full-viewport overlay and
   this is a document page, so sharing the rules would mean fighting the layout in both. */

/* legal.css caps .wrap at 720px, which is right for a document and too narrow for three
   price cards — the third wrapped onto its own row, leaving a lopsided 2+1. Widen it here
   only. The prose blocks keep their own reading measure below. */
.wrap{max-width:1000px;}
/* ⚑ `.doc .xlate` va EN ESTA LISTA. Aquí .wrap mide 1000px y esta regla vuelve a centrar una
   columna de prosa de 720px; lo que no esté en la lista se queda a lo ancho de los 1000 y arranca
   ~140px a la izquierda del título. Ese, y no la sangría del filete, era el desfase visible de la
   nota de traducción. ⚑ No se ve por debajo de ~800px de ventana: ahí la columna ya no llega a
   720px, `margin:auto` vale 0 y todo coincide — comprobarlo en una ventana estrecha da un falso OK. */
.doc h1, .doc .updated, .doc .xlate, .price-intro, .price-note, .foot{max-width:720px; margin-left:auto; margin-right:auto;}
/* ⚑⚑ Los dibujos se cuelgan de ESTA caja, no de `.wrap`. `.wrap` mide 1000px aqui y ademas
   contiene la barra de arriba, asi que estrecharla para que el dibujo quedase pegado al texto
   habria estrechado tambien la cabecera. `.conilus` envuelve solo las cuatro secciones, y
   ponerla a 720 no cambia nada de lo que se ve —todo lo de dentro ya estaba a 720 y centrado—
   pero le da al dibujo un borde que coincide con la columna, en vez de 120px de aire muerto. */
.conilus{max-width:720px; margin-inline:auto;}

.price-intro{margin-bottom:26px;}
/* ⚑ `auto` on the sides, not 0. The rule above centres the prose column inside the wider
   wrap; a `margin:22px 0 0` shorthand here silently resets that and dropped the notes 93px
   left of the heading and the intro. Any shorthand margin below that rule has to keep auto. */
.price-note{font-size:0.875rem; color:var(--ink-soft); line-height:1.65; margin:22px auto 0;}

/* Explicit column counts rather than auto-fit: auto-fit picks whatever number happens to fit
   and leaves a lopsided last row.
   ⚑⚑ TRES COLUMNAS, NO CUATRO, PORQUE FUNDADORES YA NO ESTÁ EN LA FILA. Sube a una fila
   propia por encima —es la oferta que se quiere destacar— y abajo quedan exactamente tres
   tarjetas, que es justo lo que llena tres columnas. Antes eran cuatro en cuatro columnas, y
   cuando Fundadores estaba oculto (que es su estado por defecto, ver más abajo) quedaba un
   hueco vacío a la derecha. Ahora las tres de abajo llenan su fila esté Fundadores o no.
   ⚑ Y por eso el salto es 3 → 1 y no 3 → 2: con tres tarjetas, dos columnas dan siempre 2+1.
   Se aguantan las tres hasta 620px porque a ese ancho miden lo mismo que medían las cuatro
   en la maqueta anterior; por debajo, una sola. */
/* ⚑⚑ MISMO ANCHO QUE LA PROSA. `.wrap` mide aqui 1000px, pero los parrafos van en una
   columna de 720 centrada (la regla de arriba), y las tarjetas se salian de ella hasta el borde
   de la tarjeta: el texto empezaba y terminaba en un sitio y los precios en otro. Con el mismo
   tope se alinean por los dos lados.
   ⚑ `margin:26px auto 6px`, con `auto` a los lados y no 0 — es exactamente la trampa que este
   fichero ya tiene anotada dos veces: una abreviada con 0 aqui centra nada y manda la fila a la
   izquierda. */
.plans{
  display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px; align-items:stretch; margin:26px auto 6px; max-width:720px;
}
/* ⚑ Fundadores ocupa el ancho entero de la rejilla pero NO se estira hasta los bordes: se
   centra con un ancho mayor que el de una columna. Estirada de lado a lado, la tarjeta se
   queda con el precio y el botón perdidos en medio de mucho blanco —está maquetada en
   vertical, para una columna estrecha—. Centrada y más ancha destaca sin desarmarse. */
.plan.launch{ grid-column:1 / -1; justify-self:center; width:min(100%, 430px); }
.plan{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
  padding:26px 22px 22px; box-shadow:var(--card-shadow);
}
.plan.featured{border-color:var(--rose-deep); border-width:2px;}
.plan .tagline{font-size:0.875rem; color:var(--ink-soft); margin:0 0 18px; flex:1;}
.plan h3{font-family:var(--font-display); font-size:1.25rem; margin:0 0 6px;}
.badge{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  /* mismos tokens que el botón: es texto pequeño en mayúsculas, el caso que MÁS contraste pide */
  background:var(--cta-bg); color:var(--cta-ink); border-radius:999px;
  padding:4px 13px; font-size:0.6875rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; white-space:nowrap;
}
.plan.launch .badge{background:var(--ink);}
.amount{font-family:var(--font-display); font-size:2rem; font-weight:700; line-height:1;}
.period{font-size:0.875rem; color:var(--ink-soft); margin-left:3px;}
.permonth{font-size:0.8125rem; color:var(--ink-faint); margin:6px 0 14px;}
.seats{font-size:0.8125rem; font-weight:600; color:var(--ink); margin:0 0 14px;}
.plan .cta{
  display:block; text-align:center; text-decoration:none;
  border-radius:12px; padding:12px 16px; font-weight:700; font-size:0.9375rem;
  background:var(--rose-tint,#f3e6e8); color:var(--rose-deep); border:1px solid var(--line);
}
/* --cta-bg/--cta-ink, no --rose-deep/#fff: mismo motivo que el botón del encabezado — el acento
   es el color de los enlaces y en Clásico, Romance y Cozy no llega a 4.5:1 con blanco encima. */
.plan.featured .cta{background:var(--cta-bg); color:var(--cta-ink); border-color:var(--cta-bg);}
.plan.launch .cta{background:var(--ink); color:var(--surface); border-color:var(--ink);}

/* Hidden until the seat count is known, and left hidden if it cannot be read — the same
   fail-closed rule as the app. A capped offer shown without a live count can oversell. */
.plan.launch[hidden]{display:none;}

@media(max-width:620px){
  .plans{grid-template-columns:1fr;}
  /* ⚑ En una sola columna el tope de 430px deja a Fundadores MAS ESTRECHA que las otras tres
     —medido: 430 frente a 466 a 560px de ancho— y eso no se lee como enfasis sino como un fallo
     de maquetacion. Apiladas, todas miden lo mismo; lo que la destaca ahi es ir la primera. */
  .plan.launch{ width:100%; }
}

/* ⚑ El dibujo del hombre se apoya cerca del pie de la CAJA DE CONTENIDO, no de la fila de
   planes. Por eso cuelga de `.conilus` —que aqui mide lo mismo que la tarjeta blanca— y no de
   una tarjeta de precio: el porcentaje tiene que medirse contra la caja que se nombra.
   ⚑ Al colgar de `.conilus` recupera la colocacion normal de `.ilus` (20px de hueco y el ancho
   con `50%`), asi que aqui solo hace falta decir la altura. Y basta UNA copia para los cuatro
   idiomas, porque solo hay una seccion visible a la vez.
   ⚑ 5% de la ALTURA de la caja, no pixeles: la pagina mide distinto en cada idioma y asi el
   dibujo queda a la misma distancia proporcional del pie en todos. */
@media (min-width:1300px){
  .conilus > .ilus.ilus-el{ top:auto; bottom:5%; }
}