/*
 * El manifiesto (part/manifiesto.php): una carta. Una columna estrecha centrada (unos 68 caracteres por línea), títulos
 * en Chillax y texto en Satoshi, mucho aire y nada que distraiga de leer. Sin animaciones ni puntos que laten.
 */

/* Cabecera de carta (part/cabeza.php con 'carta'): el logo, el otro idioma y un solo botón. */
.top-carta .top-row { justify-content: space-between; }
.carta-acciones { display: flex; align-items: center; gap: 14px; }
.carta-idioma { display: flex; gap: 2px; padding: 3px; border-radius: var(--r-pill); border: 1px solid rgba(255, 255, 255, 0.14); }
.carta-idioma a { display: inline-grid; place-items: center; min-width: 38px; min-height: 32px; padding: 0 10px; border-radius: var(--r-pill);
	color: rgba(255, 255, 255, 0.62); font-size: var(--t-xs); font-weight: 700; letter-spacing: .04em; text-decoration: none; }
.carta-idioma a:hover { color: #fff; }
.carta-idioma a[aria-current="page"] { background: rgba(255, 255, 255, 0.1); color: #fff; }
.top-carta .btn { min-height: 40px; }
.top-carta .con-sesion-btn { display: none; }
.con-sesion .top-carta .sin-sesion { display: none; }
.con-sesion .top-carta .con-sesion-btn { display: inline-flex; }
@media (max-width: 520px) { .top-carta .btn { padding: 0 14px; font-size: var(--t-sm); } .top-carta .brand img { width: 118px; height: auto; } }

/* La carta: letra grande, sin cajas ni rayas, solo palabras (versión 4 de diez, elegida por Adiel el 2026-10-13), con el
   texto justificado en escritorio y partido por sílabas para que no queden huecos. --mf-acento, el ámbar de los textos destacados
   (elegido de cinco el mismo día). */
.mf { --mf-w: 46rem; --mf-acento: #FFBF00; padding: clamp(56px, 8vw, 120px) var(--gutter) clamp(72px, 9vw, 140px); color: rgba(255, 255, 255, 0.86); }
.mf > * { max-width: var(--mf-w); margin-inline: auto; }
.mf-head { margin-bottom: clamp(48px, 6vw, 80px); }
.mf-kicker { margin: 0 0 var(--s-4); color: var(--mf-acento); font-size: var(--t-sm); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.mf h1 { margin: 0; font-family: var(--f-head); font-size: clamp(56px, 9vw, 120px); line-height: 1.02; letter-spacing: -.01em; color: #fff; text-wrap: balance; }
.mf-sub { margin: var(--s-4) 0 0; font-size: clamp(19px, 1.7vw, 22px); font-style: italic; color: rgba(255, 255, 255, 0.6); }

.mf-body { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.6; color: #fff; }
.mf-body p { margin: 0 0 1.15em; }
/* Justificado solo en pantallas grandes: en la columna estrecha del móvil dejaba huecos anchos (Adiel, 2026-10-13). */
@media (min-width: 900px) { .mf-body p { text-align: justify; hyphens: auto; -webkit-hyphens: auto; } }
.mf-body strong { color: #fff; font-weight: 700; }
.mf-intro .mf-entrada { font-size: 1.12em; line-height: 1.55; }
.mf-body section { margin-top: clamp(52px, 6vw, 84px); scroll-margin-top: 96px; }
.mf-body h2 { margin: 0 0 var(--s-4); font-family: var(--f-head); font-size: clamp(34px, 3.6vw, 52px); line-height: 1.12; color: #fff; text-wrap: balance; }

/* Lo que cree un orquestador de experiencia: lo que se valora a la izquierda, lo que queda atrás a la derecha, más tenue. */
.mf-crees { list-style: none; margin: var(--s-5) 0; padding: 0; }
.mf-crees li { display: grid; gap: 2px; padding: 10px 0; line-height: 1.4; }
.mf-crees .mf-l { color: #fff; font-family: var(--f-head); font-weight: 600; font-size: 1.06em; }
.mf-crees .mf-por { color: var(--mf-acento); font-size: var(--t-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.mf-crees .mf-r { color: rgba(255, 255, 255, 0.45); }
@media (min-width: 760px) {
	.mf-crees li { grid-template-columns: minmax(0, 1fr) 7.5rem minmax(0, 1fr); align-items: baseline; gap: 16px; }
	.mf-crees .mf-por { text-align: center; }
}

/* A quien siente que ya no encaja: la sección que llega desde LinkedIn, con su primera frase en grande. */
.mf-body .mf-hook { margin-top: clamp(64px, 8vw, 104px); }
.mf-hook h2 { color: var(--mf-acento); font-size: clamp(20px, 1.8vw, 24px); }
.mf-body .mf-gancho { margin-bottom: .8em; font-family: var(--f-head); font-weight: 600; font-size: clamp(40px, 5vw, 68px); line-height: 1.08; color: #fff; text-align: left; hyphens: manual; text-wrap: balance; }

/* La firma, con presencia, con la firma a mano de Adiel encima (la de la nota del fundador, en blanco; pedido de Adiel,
   2026-10-13), y el único botón. */
.mf-firma { margin-top: clamp(56px, 7vw, 96px); padding-top: clamp(32px, 4vw, 48px); border-top: 1px solid rgba(255, 255, 255, 0.14); }
.mf-firma p { margin: 0; }
.mf-firma-mano { display: block; width: 180px; aspect-ratio: 454 / 161; margin: 0 0 var(--s-3) -6px; background: #fff;
	-webkit-mask: var(--firma) center / contain no-repeat; mask: var(--firma) center / contain no-repeat; }
.mf-firma-nombre { font-family: var(--f-head); font-weight: 600; font-size: clamp(30px, 3vw, 40px); line-height: 1.1; color: #fff; }
.mf-firma-rol { margin-top: 6px !important; font-size: var(--t-md); color: rgba(255, 255, 255, 0.72); }
.mf-firma-fecha { margin-top: 2px !important; font-size: var(--t-sm); color: rgba(255, 255, 255, 0.5); }
.mf-cta { margin-top: clamp(40px, 5vw, 64px); }
.mf-cta .con-sesion-btn { display: none; }
.con-sesion .mf-cta .sin-sesion { display: none; }
.con-sesion .mf-cta .con-sesion-btn { display: inline-flex; }

/* Pie de las páginas en inglés */
.foot-en { padding-top: var(--s-6); }