/* Nexo Systems · hoja de estilos compartida (index.html y soluciones.html) */
:root {
  --white:  #ffffff;
  --cream:  #faf8f5;
  --card:   #f3f0eb;
  --sec-alt:#f6f3ee; /* crema de sección: tinte apenas más claro para que el óxido pase AA */
  --ink:    #1c1917;
  --ink-2:  #44403c;
  --muted:  #78716c;
  --border: #e2ddd8;
  --bdk:    #c9c4bc;
  --rust:   #b45309;
  --amber:  #d97706;
  --font-display: 'Playfair Display', Cambria, serif;
  --font-body: 'DM Sans', Calibri, system-ui, sans-serif;
  --wrap: 1160px;
  --gutter: 60px;
  --sec-y: 112px;
  --nav-h: 78px; /* JS lo ajusta a la altura real del nav */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  scroll-behavior: smooth;
  /* snap suave: sólo proximity; las secciones más altas que la pantalla se recorren libres */
  scroll-snap-type: y proximity;
  scroll-padding-top: var(--nav-h);
}
/* El punto de snap es el encabezado de cada sección (bloque corto), con margen igual al
   padding superior: la sección queda alineada bajo el nav. Así sólo hay imán cerca del
   inicio de cada sección y nunca en su final, y las secciones largas se leen libres. */
section:not(.hero) > .wrap > .sec-head { scroll-snap-align: start; scroll-margin-top: 32px; }
section[id] { scroll-margin-top: calc(32px - var(--sec-y)); } /* el salto por ancla cae en el mismo punto que el snap */
body {
  font-family: var(--font-body);
  background: var(--cream); color: var(--ink);
  line-height: 1.6; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ── */
section { padding: var(--sec-y) var(--gutter); }
.wrap { max-width: var(--wrap); margin: 0 auto; }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-card  { background: var(--sec-alt); }
.bg-ink   { background: var(--ink); }
.sec-head { margin-bottom: 56px; }

/* ── TIPOGRAFÍA COMPARTIDA ── */
/* Playfair: sólo h1 del hero y h2.display de cada sección */
h2.display {
  font-family: var(--font-display);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 700; color: var(--ink); line-height: 1.1;
  letter-spacing: -.01em; max-width: 720px;
}
h2.display em { font-style: italic; color: var(--rust); }

.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .2em;
  color: var(--rust); text-transform: uppercase;
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
}
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }

.num {
  display: block; font-size: 12px; font-weight: 600; letter-spacing: .18em;
  color: var(--rust); text-transform: uppercase; margin-bottom: 14px;
  font-variant-numeric: tabular-nums;
}
.t-title { font-size: 18px; font-weight: 600; line-height: 1.35; color: var(--ink); letter-spacing: -.005em; }
.t-desc  { font-size: 15px; line-height: 1.65; color: var(--muted); margin-top: 8px; }
.lead    { font-size: 18px; line-height: 1.7; color: var(--ink-2); max-width: 600px; margin-top: 20px; }

/* Barra ámbar vertical de anclaje */
.bar { border-left: 3px solid var(--amber); padding-left: 22px; }
.bar strong { color: var(--ink); font-weight: 600; }

/* ── TARJETAS (un solo estilo en toda la página) ── */
.cards {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--border); border: 1px solid var(--border);
}
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.card {
  background: var(--white); padding: 36px 32px 38px;
  position: relative; transition: background .25s;
  display: flex; flex-direction: column;
}
.card::after {
  content: ''; position: absolute; left: 32px; right: 32px; bottom: 0; height: 2px;
  background: var(--amber); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16,1,.3,1);
}
.card:hover::after { transform: scaleX(1); }

/* ── NAV ── */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  background: rgba(250,248,245,0.93);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  transition: background .3s;
}
.logo, .foot-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; background: var(--card); border: 1px solid var(--bdk);
  display: flex; align-items: center; justify-content: center;
}
/* Isotipo de la marca (logotipo, no texto) */
.logo-mark span { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--rust); }
.logo-text { display: flex; flex-direction: column; gap: 3px; }
.logo-text .brand { font-size: 17px; font-weight: 700; letter-spacing: .08em; color: var(--ink); text-transform: uppercase; line-height: 1; }
.logo-text .sub { font-size: 8.5px; letter-spacing: .28em; color: var(--muted); text-transform: uppercase; line-height: 1; }
.nav-links { display: flex; gap: 32px; list-style: none; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 14px; transition: color .2s; }
.nav-links a:hover { color: var(--ink); }

/* ── BOTONES ── */
.btn {
  display: inline-block; padding: 15px 30px;
  font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  text-decoration: none; transition: background .2s, color .2s, border-color .2s, transform .2s;
}
.btn-a { background: var(--ink); color: var(--cream); }
.btn-a:hover { background: var(--ink-2); transform: translateY(-1px); }
.btn-b { border: 1px solid var(--bdk); color: var(--ink-2); }
.btn-b:hover { border-color: var(--ink); color: var(--ink); }
.cta-band .btn { padding: 13px 26px; }
.btn-white { background: var(--white); color: var(--rust); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.btn-white:hover { background: var(--cream); }
.nav-cta { padding: 10px 22px; }

/* ── TRANSICIONES ──
   Todo estado oculto vive bajo .js (se agrega en <head> sólo si el usuario no pidió
   movimiento reducido): sin JS o con reduced-motion el contenido se ve tal cual.
   Sólo se animan transform, opacity y clip-path. */
:root { --ease: cubic-bezier(.16,1,.3,1); }

/* Contenido: cascada corta y suave */
.js .s-fade {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js .s-fade.visible { opacity: 1; transform: none; }

/* Eyebrow: la raya se dibuja */
.js .sec-head .eyebrow::before { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); transition-delay: calc(var(--d, 0s) + .15s); }
.js .sec-head .eyebrow.visible::before { transform: none; }

/* Títulos: cada línea sube desde detrás de una máscara; la frase en itálica llega al final */
.ln { display: block; }
.js .lines .ln { overflow: hidden; padding: .06em .12em .14em 0; margin: -.06em -.12em -.14em 0; }
.js .lines .ln > span { display: block; transform: translateY(110%); transition: transform 1.15s var(--ease); }
.js .lines .ln:nth-child(2) > span { transition-delay: calc(var(--d, 0s) + .1s); }
.js .lines .ln:nth-child(3) > span { transition-delay: calc(var(--d, 0s) + .2s); }
.js .lines .ln:nth-child(4) > span { transition-delay: calc(var(--d, 0s) + .3s); }
.js .lines .ln:first-child > span { transition-delay: var(--d, 0s); }
.js .lines.visible .ln > span { transform: none; }
.js h2.lines em { display: inline-block; opacity: 0; transform: translateY(.28em); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--d, 0s) + .55s); }
.js h2.lines.visible em { opacity: 1; transform: none; }

/* Cambio de fondo entre secciones: cada sección entra con el color de la anterior
   y lo funde al suyo (~700 ms) cuando cruza el último quinto de la pantalla. */
section { position: relative; }
section > .wrap { position: relative; z-index: 1; }
.js section[data-prev]::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--prev); opacity: 1; transition: opacity .75s ease;
}
.js section[data-prev].in::before { opacity: 0; }
.js section[data-prev].in.instant::before { transition: none; }
/* portada */
#problema   { --prev: var(--white); }
#contexto   { --prev: var(--sec-alt); }
#como       { --prev: var(--cream); }
#porque     { --prev: var(--cream); }
#clientes   { --prev: var(--ink); }
/* soluciones */
#base       { --prev: var(--white); }
#equipo     { --prev: var(--sec-alt); }
#memoria    { --prev: var(--cream); }
#como .estrato:nth-child(2) { background: var(--cream); }

/* La ruta: el edificio se construye desde los cimientos; la barra ámbar crece con él */
.js .build::before { transform: scaleY(0); transform-origin: bottom; transition: transform 1.4s var(--ease); }
.js .build > li { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
.js .build > li:nth-child(1) { transition-delay: var(--d, 0s); }
.js .build > li:nth-child(2) { transition-delay: calc(var(--d, 0s) + .22s); }
.js .build > li:nth-child(3) { transition-delay: calc(var(--d, 0s) + .44s); }
.js .build.visible::before { transform: none; }
.js .build.visible > li { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .typing i, .chat[open] { animation: none !important; }
  .js .s-fade, .js .lines .ln > span, .js h2.lines em, .js .build > li { opacity: 1; transform: none; transition: none; }
  .js .sec-head .eyebrow::before, .js .build::before { transform: none; transition: none; }
  .js section[data-prev]::before { display: none; }
}

/* ── HERO ── */
.hero {
  min-height: 100vh; padding: 150px var(--gutter) 88px;
  background: var(--white); border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
.hero::after {
  content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 34%;
  background: var(--cream);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; width: 100%; }
.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(44px, 6.2vw, 84px);
  font-weight: 700; line-height: 1.04; letter-spacing: -.015em;
  color: var(--ink); max-width: 820px;
}
.hero h1 em { font-style: italic; color: var(--rust); }
.hero-sub { margin: 32px 0 40px; max-width: 600px; }
.hero-sub p { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px; }
.props {
  display: grid; grid-template-columns: repeat(3, minmax(0, 240px)); gap: 48px;
  border-top: 1px solid var(--border); padding-top: 32px; list-style: none;
}
.props .t-desc { font-size: 14px; margin-top: 4px; }

/* ── LA RUTA ── */
.estratos {
  list-style: none; display: flex; flex-direction: column-reverse; gap: 12px;
  position: relative; padding-left: 40px;
}
/* barra ámbar: ancla vertical del edificio */
.estratos::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--amber);
}
.estrato {
  position: relative;
  display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start;
  background: var(--white); border: 1px solid var(--border);
  padding: 34px 40px;
}
/* marcador sobre la barra */
.estrato::before {
  content: ''; position: absolute; left: -45px; top: 38px;
  width: 13px; height: 13px; background: var(--white);
  border: 3px solid var(--amber); border-radius: 50%;
}
.estrato:nth-child(2) { margin-right: 6%; background: var(--sec-alt); }
.estrato:nth-child(2) .t-desc { color: var(--ink-2); }
.estrato:nth-child(3) { margin-right: 12%; }
.estrato .t-desc { margin-top: 0; }
/* 01 — los cimientos: la capa pesada */
.estrato.base {
  background: var(--ink); border-color: var(--ink);
  padding: 48px 40px 50px;
}
.estrato.base::before { background: var(--amber); border-color: var(--amber); top: 52px; }
.estrato.base .num { color: var(--amber); }
.estrato.base .t-title { color: var(--cream); }
.estrato.base .kicker { color: rgba(250,248,245,.6); }
.estrato.base .t-desc { color: rgba(250,248,245,.78); }
.estrato-areas {
  font-size: 13.5px; line-height: 1.8; color: rgba(250,248,245,.55);
  margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(250,248,245,.14);
}

.kicker { font-size: 14px; color: var(--muted); margin-top: 4px; }
.cierre { margin-top: 48px; max-width: 680px; }
.cierre p { font-size: 18px; line-height: 1.7; color: var(--ink-2); }

/* Lista compacta: raya ámbar corta, título y una línea. Sin cajas. */
.items { list-style: none; display: grid; gap: 28px 48px; }
.items.c3 { grid-template-columns: repeat(3, 1fr); }
.items li::before { content: ''; display: block; width: 24px; height: 2px; background: var(--amber); margin-bottom: 18px; }
.items p { font-size: 15px; line-height: 1.65; color: var(--muted); margin-top: 8px; }

/* ── TU EQUIPO DIGITAL ── */
#equipo { --muted: #6c6560; } /* gris un tono más oscuro sobre el tinte de sección (AA) */
.equipo-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; align-items: stretch; }
.retrato { border-radius: 50%; overflow: hidden; flex-shrink: 0; background: var(--card); }
.retrato svg { display: block; width: 100%; height: 100%; }
.perfil {
  background: var(--white); border: 1px solid var(--border);
  padding: 32px; display: grid; grid-template-columns: 96px 1fr; gap: 26px; align-items: start;
  position: relative;
}
.perfil .retrato { width: 96px; height: 96px; }
.perfil-body { display: flex; flex-direction: column; align-items: flex-start; }
.rol { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--rust); margin-top: 6px; }
.perfil .t-desc { margin-top: 14px; }
.perfil-tags { font-size: 13px; color: var(--muted); margin-top: 14px; }
.perfil-btn { margin-top: 24px; cursor: pointer; border: none; font-family: var(--font-body); }
.perfil--destacado {
  background: var(--ink); border-color: var(--ink);
  grid-template-columns: 1fr; gap: 30px; padding: 48px 48px 50px; align-content: start;
}
.perfil--destacado .retrato { width: 168px; height: 168px; box-shadow: 0 0 0 6px rgba(217,119,6,.9); }
.equipo-grid--dos { grid-template-columns: 1.15fr 1fr; }
.perfil-badge {
  position: absolute; top: 18px; right: 18px;
  background: var(--amber); color: var(--ink); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; padding: 6px 10px;
}
.perfil-acciones { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
.perfil-acciones .perfil-btn { margin-top: 0; }
.perfil--destacado .t-title { color: var(--cream); }
.perfil--destacado .rol { color: var(--amber); }
.perfil--destacado .t-desc { color: rgba(250,248,245,.78); font-size: 17px; line-height: 1.7; max-width: 460px; }
.perfil--destacado .perfil-tags { color: rgba(250,248,245,.6); }
.btn-light { background: var(--cream); color: var(--ink); }
.btn-light:hover { background: var(--white); transform: translateY(-1px); }
.equipo-nota { font-size: 13px; color: var(--muted); margin-top: 22px; }

/* ── CHAT (diálogo modal) ── */
html.chat-open { overflow: hidden; }
.chat {
  width: min(460px, calc(100vw - 32px)); height: min(700px, calc(100dvh - 48px));
  max-width: none; max-height: none; margin: auto; padding: 0; border: none;
  background: var(--cream); color: var(--ink); box-shadow: 0 30px 80px rgba(28,25,23,.35);
  font-family: var(--font-body);
}
.chat[open] { display: flex; flex-direction: column; }
.chat::backdrop { background: rgba(28,25,23,.55); }
.chat-head { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--white); border-bottom: 1px solid var(--border); }
.chat-head .retrato { width: 52px; height: 52px; }
.chat-who { flex: 1; min-width: 0; }
.chat-who .t-title { font-size: 16px; }
.chat-role { font-size: 13px; color: var(--ink-2); }
.chat-tag { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rust); margin-top: 2px; }
.chat-close { width: 40px; height: 40px; border: 1px solid var(--border); background: var(--white); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.chat-close:hover { border-color: var(--ink); }
.chat-log { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 12px 15px; font-size: 15px; line-height: 1.55; border-radius: 12px; overflow-wrap: anywhere; }
.msg.bot { align-self: flex-start; background: var(--white); border: 1px solid var(--border); border-bottom-left-radius: 3px; }
.msg.user { align-self: flex-end; background: var(--ink); color: var(--cream); border-bottom-right-radius: 3px; }
.msg p + p, .msg p + ul, .msg ul + p { margin-top: 8px; }
.msg ul { list-style: none; }
.msg li { position: relative; padding-left: 16px; margin-top: 5px; }
.msg li::before { content: ''; position: absolute; left: 0; top: .72em; width: 7px; height: 2px; background: var(--amber); }
.msg.cta { background: var(--rust); border-color: var(--rust); }
.msg.cta a { color: var(--white); font-weight: 600; text-decoration: none; }
.msg.cta a:hover { text-decoration: underline; }
.typing { display: inline-flex; gap: 4px; padding: 4px 0; }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; }
.js .typing i { animation: blink 1.2s infinite ease-in-out; }
.js .typing i:nth-child(2) { animation-delay: .15s; }
.js .typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: .9; } }
.chat-sugs { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); background: var(--cream); }
.chat-sugs:empty { display: none; }
.sug { font-family: var(--font-body); font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--bdk); padding: 8px 14px; border-radius: 999px; cursor: pointer; text-align: left; }
.sug:hover { border-color: var(--rust); color: var(--rust); }
.sug:disabled { opacity: .5; cursor: default; }
.chat-input { display: flex; gap: 8px; padding: 12px 18px 16px; background: var(--white); border-top: 1px solid var(--border); }
.chat-input input { flex: 1; min-width: 0; font-family: var(--font-body); font-size: 14px; padding: 11px 12px; border: 1px solid var(--border); background: var(--cream); color: var(--muted); }
.chat-input button { width: 44px; border: none; background: var(--card); color: var(--muted); font-size: 16px; }
.js .chat[open] { animation: chatIn .35s var(--ease); }
@keyframes chatIn { from { opacity: 0; transform: translateY(14px); } }

/* ── POR QUÉ NEXO (oscuro) ── */
.bg-ink .eyebrow { color: var(--amber); }
.bg-ink h2.display { color: var(--cream); }
.bg-ink h2.display em { color: var(--amber); }
.bg-ink .num { color: var(--amber); }
.bg-ink .t-title { color: var(--cream); }
.bg-ink .t-desc { color: rgba(250,248,245,.62); }
.porque-lead { font-size: 20px; line-height: 1.6; color: var(--cream); font-weight: 500; }
.bio-role { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--amber); margin-top: 4px; }
.bg-ink .card { background: none; padding: 0; }
.bg-ink .card::after { display: none; }


/* ── CLIENTES ── */
.logo-wall { grid-template-columns: repeat(5, 1fr); }
.cliente { align-items: center; text-align: center; padding: 44px 22px 34px; }
.logo-slot {
  height: 96px; width: 100%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 28px;
}
.logo-slot img {
  max-height: 100%; max-width: 180px; width: 100%; object-fit: contain;
  filter: grayscale(100%); opacity: .55; transition: filter .3s, opacity .3s;
}
.cliente:hover .logo-slot img { filter: grayscale(0%); opacity: 1; }
/* Logotipo de C3 (única excepción tipográfica: es un logo) */
.wordmark {
  font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1.15;
  color: var(--bdk); transition: color .3s;
}
.cliente:hover .wordmark { color: var(--ink); }
.cliente .num { width: 100%; padding-top: 18px; border-top: 1px solid var(--border); margin-bottom: 8px; letter-spacing: .14em; font-size: 11px; }
.cliente .t-desc { font-size: 14px; margin-top: 0; }
.clientes-nota { margin-top: 40px; max-width: 680px; }
.clientes-nota p { font-size: 16px; line-height: 1.7; color: var(--muted); }
.clientes-nota strong { color: var(--ink); font-weight: 600; }
.clientes-nota .n { color: var(--rust); font-weight: 700; }

/* ── CTA BAND ── */
.cta-band { background: var(--rust); padding: 30px var(--gutter); }
.cta-band .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap; }
.cta-band p { font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.3; color: var(--white); max-width: 760px; letter-spacing: -.01em; }

/* ── CONTACTO ── */
.contacto-wrap { display: grid; grid-template-columns: 1fr 1.15fr; gap: 72px; align-items: start; }
.contacto-intro { font-size: 18px; line-height: 1.7; color: var(--ink-2); }
.contacto-intro strong { color: var(--ink); font-weight: 600; }
.promesas { list-style: none; margin-top: 32px; border-top: 1px solid var(--border); }
.promesa { display: flex; gap: 14px; font-size: 15px; line-height: 1.6; color: var(--ink-2); padding: 16px 0; border-bottom: 1px solid var(--border); }
.prom-icon { color: var(--rust); font-weight: 700; flex-shrink: 0; }
.form-box { background: var(--white); padding: 40px; border: 1px solid var(--border); }
.form-box .t-desc { font-size: 14px; margin: 4px 0 28px; }
.fg { margin-bottom: 16px; }
.fg label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.fg input, .fg textarea, .fg select { width: 100%; background: var(--cream); border: 1px solid var(--bdk); color: var(--ink); padding: 12px 14px; font-size: 15px; font-family: var(--font-body); outline: none; transition: border-color .2s; -webkit-appearance: none; border-radius: 0; }
.fg input:focus, .fg textarea:focus, .fg select:focus { border-color: var(--rust); }
.fg textarea { resize: vertical; min-height: 96px; }
.fg select {
  padding-right: 40px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2378716c' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
.submit-btn { width: 100%; border: none; cursor: pointer; font-family: var(--font-body); margin-top: 8px; }

/* ── FOOTER ── */
footer { background: var(--ink); padding: 44px var(--gutter); }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px 32px; }
.foot-mark { width: 28px; height: 28px; background: var(--card); display: flex; align-items: center; justify-content: center; }
.foot-mark span { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--rust); }
.foot-brand { display: flex; flex-direction: column; gap: 3px; }
.foot-brand .b { font-size: 14px; font-weight: 700; color: var(--cream); letter-spacing: .08em; text-transform: uppercase; line-height: 1; }
.foot-brand .s { font-size: 8px; color: rgba(250,248,245,.5); letter-spacing: .25em; text-transform: uppercase; line-height: 1; }
.foot-tag { font-size: 13px; color: rgba(250,248,245,.6); }
.foot-contact { font-size: 13px; color: rgba(250,248,245,.6); line-height: 1.8; }
.foot-contact a { color: inherit; text-decoration: none; }
.foot-contact a:hover { color: var(--cream); }
.foot-copy { font-size: 12px; color: rgba(250,248,245,.55); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .cards:not(.logo-wall) { grid-template-columns: 1fr 1fr; }
  .cards.c3 { grid-template-columns: repeat(3, 1fr); }
  .estrato { grid-template-columns: 220px 1fr; gap: 32px; }
}
@media (max-width: 960px) {
  :root { --gutter: 24px; --sec-y: 80px; }
  nav { padding: 16px var(--gutter); }
  .nav-links { display: none; }
  .hero { padding: 120px var(--gutter) 64px; min-height: auto; }
  .hero::after { display: none; }
  .props { grid-template-columns: 1fr; gap: 20px; }
  .cards.c3 { grid-template-columns: 1fr; }
  .contacto-wrap { grid-template-columns: 1fr; gap: 48px; }
  .items.c3 { grid-template-columns: 1fr; gap: 32px; }
  .equipo-grid { grid-template-columns: 1fr; }
  .logo-wall { grid-template-columns: 1fr 1fr; }
  .logo-wall .cliente:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .estrato { grid-template-columns: 1fr; gap: 14px; }
  .estrato:nth-child(2), .estrato:nth-child(3) { margin-right: 0; }
  .sec-head { margin-bottom: 40px; }
  .cta-band { padding: 28px var(--gutter); }
}
@media (max-width: 600px) {
  .cards:not(.logo-wall) { grid-template-columns: 1fr; }
  .perfil { grid-template-columns: 72px 1fr; gap: 18px; padding: 26px 22px; }
  .perfil-acciones .btn { padding: 12px 16px; font-size: 12px; }
  .perfil .retrato { width: 72px; height: 72px; }
  .perfil-btn { padding: 12px 16px; font-size: 12px; white-space: nowrap; }
  .perfil--destacado { grid-template-columns: 1fr; padding: 34px 24px 36px; gap: 24px; }
  .perfil--destacado .retrato { width: 128px; height: 128px; }
  .chat { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; margin: 0; }
  .cliente { padding: 36px 18px 28px; }
  .logo-slot { height: 72px; }
  .card { padding: 30px 24px 32px; }
  .card::after { left: 24px; right: 24px; }
  .estratos { padding-left: 26px; }
  .estrato, .estrato.base { padding: 28px 24px 30px; }
  .estrato::before { left: -31px; top: 32px; }
  .estrato.base::before { top: 32px; }
  .form-box { padding: 28px 22px; }
  .nav-cta { padding: 9px 14px; font-size: 11px; }
  .logo-text .brand { font-size: 15px; }
}
@media (max-width: 520px) {
  .btn-white { white-space: normal; flex-shrink: 1; }
  .ctas .btn, .btn-white { width: 100%; text-align: center; padding: 15px 18px; }
  .hero-sub p, .lead, .cierre p, .contacto-intro { font-size: 17px; }
}

/* ══════════════════════════════════════════════════════════════════
   NAV de dos páginas
   ══════════════════════════════════════════════════════════════════ */
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--amber); padding-bottom: 4px; }

/* ══════════════════════════════════════════════════════════════════
   HERO DEL PEZ (portada)
   El estado base de todo el escenario ES el cuadro final: sin JS o con
   movimiento reducido se ve la escena terminada y ambas frases.
   ══════════════════════════════════════════════════════════════════ */
.hero-pez { justify-content: center; padding-top: 128px; }
.hero-pez::after { display: none; }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr);
  column-gap: 48px; row-gap: 0; align-items: center;
}
.hero-copy { min-width: 0; }
.hero-pez h1 { font-size: clamp(40px, 4.1vw, 56px); max-width: none; }
.hero-pez .hero-sub { margin: 28px 0 34px; }
.hero-pez .hero-sub p { font-size: 17px; }
.hero-pez .ctas { margin-bottom: 0; }
.hero-pez .props { grid-column: 1 / -1; margin-top: 56px; }

.pez { position: relative; margin: 0; background: var(--cream); border: 1px solid var(--border); aspect-ratio: 640 / 400; overflow: hidden; }
.pez-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pz-caps { position: absolute; top: 22px; left: 26px; right: 26px; z-index: 1; }
.pz-cap { font-size: 19px; font-weight: 500; line-height: 1.35; letter-spacing: -.005em; }
.pz-cap + .pz-cap { margin-top: 4px; }
.pz-cap1 { color: var(--muted); }
.pz-cap2 { color: var(--ink); }
.pz-cap2 strong { color: var(--rust); font-weight: 600; }
.pz-replay {
  display: none; position: absolute; right: 12px; bottom: 10px; z-index: 1;
  font: 500 12.5px var(--font-body); color: var(--ink-2); background: rgba(250,248,245,.9);
  border: 1px solid var(--border); padding: 6px 10px; cursor: pointer;
}
.pz-replay:hover { color: var(--ink); border-color: var(--bdk); }
.js .pz-replay { display: inline-block; }

/* Cuadro final (estado base) */
.pz-big   { transform: translate(250px, 262px) scale(.8); }
.pz-ink   { opacity: 0; }
.pz-prey  { opacity: 0; transform: translate(196px, 251px) scale(.4); }
.pz-bubbles { opacity: 0; }
.pz-agil  { transform: translate(505px, 205px) scale(1.15); }
.pz-trail { opacity: 0; }
.pz-halo  { opacity: .16; }

/* Secuencia (≈9 s, una sola línea de tiempo; luego se queda en el cuadro final) */
.pez.play .pz-big     { animation: pzBig 9s linear both; }
.pez.play .pz-gulp    { animation: pzGulp 9s linear both; }
.pez.play .pz-ink     { animation: pzInk 9s linear both; }
.pez.play .pz-prey    { animation: pzPrey 9s linear both; }
.pez.play .pz-bubbles { animation: pzBubbles 9s linear both; }
.pez.play .pz-agil    { animation: pzAgil 9s linear both; }
.pez.play .pz-trail   { animation: pzTrail 9s linear both; }
.pez.play .pz-halo    { animation: pzHalo 9s linear both; }
.pez.play .pz-cap1    { animation: pzCap1 9s linear both; }
.pez.play .pz-cap2    { animation: pzCap2 9s linear both; }
.pez.play .pz-replay  { animation: pzLate 9.4s linear both; }
.pez.paused, .pez.paused * { animation-play-state: paused !important; }

@keyframes pzBig {
  0%   { transform: translate(-190px, 250px) scale(1); }
  16%  { transform: translate(-55px, 245px) scale(1); }
  31%  { transform: translate(70px, 252px) scale(1); }
  42%  { transform: translate(135px, 247px) scale(1); }
  60%  { transform: translate(190px, 252px) scale(1); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  76%  { transform: translate(225px, 256px) scale(.96); animation-timing-function: cubic-bezier(.4,0,.2,1); }
  90%  { transform: translate(246px, 261px) scale(.82); }
  100% { transform: translate(250px, 262px) scale(.8); }
}
@keyframes pzGulp {
  0%, 31% { transform: scale(1, 1); }
  33.5%   { transform: scale(1.03, 1.08); }
  37%, 100% { transform: scale(1, 1); }
}
@keyframes pzInk { 0%, 72% { opacity: 1; } 88%, 100% { opacity: 0; } }
@keyframes pzPrey {
  0%    { opacity: 1; transform: translate(130px, 246px) scale(1); }
  15%   { transform: translate(158px, 250px) scale(1); }
  31%   { opacity: 1; transform: translate(186px, 249px) scale(1); }
  33.5% { opacity: 0; transform: translate(196px, 251px) scale(.4); }
  100%  { opacity: 0; transform: translate(196px, 251px) scale(.4); }
}
@keyframes pzBubbles {
  0%, 33% { opacity: 0; transform: translateY(0); }
  37%     { opacity: .7; }
  50%     { opacity: 0; transform: translateY(-46px); }
  100%    { opacity: 0; transform: translateY(-46px); }
}
@keyframes pzAgil {
  0%, 48% { transform: translate(-120px, 335px) rotate(-3deg) scale(.9); animation-timing-function: cubic-bezier(.3,0,.5,1); }
  58%  { transform: translate(150px, 330px) rotate(-2deg) scale(.9); animation-timing-function: linear; }
  66%  { transform: translate(330px, 314px) rotate(-24deg) scale(.95); }
  74%  { transform: translate(430px, 230px) rotate(-16deg) scale(1); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  84%  { transform: translate(488px, 206px) rotate(0deg) scale(1.08); animation-timing-function: ease-out; }
  100% { transform: translate(505px, 205px) rotate(0deg) scale(1.15); }
}
@keyframes pzTrail { 0%, 49% { opacity: 0; } 52% { opacity: .9; } 74% { opacity: .7; } 84%, 100% { opacity: 0; } }
@keyframes pzHalo  { 0%, 80% { opacity: 0; transform: scale(.6); } 100% { opacity: .16; transform: scale(1); } }
@keyframes pzCap1 {
  0%, 3% { opacity: 0; transform: translateY(10px); color: var(--ink); }
  9%     { opacity: 1; transform: none; color: var(--ink); }
  44%    { color: var(--ink); }
  52%, 100% { opacity: 1; transform: none; color: var(--muted); }
}
@keyframes pzCap2 { 0%, 45% { opacity: 0; transform: translateY(10px); } 53%, 100% { opacity: 1; transform: none; } }
@keyframes pzLate { 0%, 95% { opacity: 0; visibility: hidden; } 100% { opacity: 1; visibility: visible; } }

/* Texto del hero: entra mientras el pez rápido rebasa al lento (--intro) */
.hero-pez { --intro: 3s; }
.js .hero-pez.intro .hero-eyebrow { animation: pzUp .9s var(--ease) .15s both; }
.js .hero-pez.intro .pez { animation: pzFade .8s ease .1s both; }
.js .hero-pez.intro .hero-h1 .ln > span { animation: pzLine 1.1s var(--ease) both; animation-delay: var(--intro); }
.js .hero-pez.intro .hero-h1 .ln:nth-child(2) > span { animation-delay: calc(var(--intro) + .1s); }
.js .hero-pez.intro .hero-h1 .ln:nth-child(3) > span { animation-delay: calc(var(--intro) + .25s); }
.js .hero-pez.intro .hero-h1 .ln:nth-child(4) > span { animation-delay: calc(var(--intro) + .35s); }
.js .hero-pez.intro .hero-sub  { animation: pzUp 1s var(--ease) both; animation-delay: calc(var(--intro) + .8s); }
.js .hero-pez.intro .ctas      { animation: pzUp 1s var(--ease) both; animation-delay: calc(var(--intro) + 1.05s); }
.js .hero-pez.intro .props     { animation: pzUp 1s var(--ease) both; animation-delay: calc(var(--intro) + 1.3s); }
@keyframes pzLine { from { transform: translateY(110%); } to { transform: none; } }
@keyframes pzUp   { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes pzFade { from { opacity: 0; } to { opacity: 1; } }

/* ── Banda de enlace a Soluciones ── */
.teaser { display: block; background: var(--cream); border-top: 1px solid var(--border); padding: 30px var(--gutter); text-decoration: none; color: var(--ink); }
.teaser .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.teaser p { font-size: clamp(17px, 1.8vw, 21px); font-weight: 600; letter-spacing: -.005em; }
.teaser p strong { color: var(--rust); font-weight: 600; }
.teaser .teaser-arrow { flex-shrink: 0; width: 46px; height: 46px; border: 1px solid var(--bdk); display: grid; place-items: center; font-size: 20px; transition: background .2s, color .2s, border-color .2s, transform .2s; }
.teaser:hover .teaser-arrow { background: var(--ink); color: var(--cream); border-color: var(--ink); transform: translateX(3px); }
.teaser:focus-visible { outline: 2px solid var(--rust); outline-offset: -4px; }

/* ══════════════════════════════════════════════════════════════════
   SOLUCIONES
   ══════════════════════════════════════════════════════════════════ */
.hero-sol { min-height: 0; padding: 156px var(--gutter) 84px; }
.hero-sol::after { width: 30%; }
.hero-sol .lead { font-size: 19px; max-width: 560px; margin-top: 26px; }

.base-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.base-text { font-size: 19px; line-height: 1.65; color: var(--ink); }
.base-areas { font-size: 15px; line-height: 1.8; color: var(--ink-2); padding-top: 18px; border-top: 1px solid var(--border); }
.base-clientes { font-size: 15px; line-height: 1.7; color: var(--muted); margin-top: 18px; }
.base-clientes strong { color: var(--ink); font-weight: 600; }
.link-flecha { color: var(--rust); font-weight: 600; text-decoration: none; white-space: nowrap; }
.link-flecha:hover { text-decoration: underline; }
#base { --muted: #6c6560; }

/* ── MEMORIA (sección oscura) ── */
#memoria .lead { color: rgba(250,248,245,.78); max-width: 680px; }
.mem-diagrama { margin: 8px 0 64px; }
.mem-svg { display: block; width: 100%; height: auto; }
.mem-svg text { font-family: var(--font-body); }
.mem-svg--v { display: none; }
.mem-box { fill: rgba(255,255,255,.03); stroke: rgba(250,248,245,.22); stroke-width: 1.2; }
.mem-box--out { fill: rgba(217,119,6,.08); stroke: rgba(217,119,6,.55); }
.mem-t  { fill: var(--cream); font-size: 17px; font-weight: 600; }
.mem-s  { fill: rgba(250,248,245,.62); font-size: 13.5px; }
.mem-o  { fill: var(--cream); font-size: 15px; font-weight: 500; }
.mem-line { fill: none; stroke: rgba(250,248,245,.2); stroke-width: 1.4; }
.mem-dot  { fill: var(--amber); }
.mem-node-label { fill: var(--cream); font-size: 20px; font-weight: 600; }
.mem-node-sub { fill: rgba(250,248,245,.6); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
html:not(.js) .mem-dot, html:not(.js) .mem-pulse { display: none; }

.mem-caps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px 40px; }
.bg-ink .items li::before { background: var(--amber); }
.bg-ink .items p { color: rgba(250,248,245,.66); }
.mem-pie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: center; margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(250,248,245,.12); }
.mem-controles { color: rgba(250,248,245,.8); font-size: 16px; line-height: 1.7; }
.mem-acciones { display: flex; gap: 14px; flex-wrap: wrap; justify-content: flex-end; }
.btn-ghost-dark { border: 1px solid rgba(250,248,245,.35); color: var(--cream); background: none; cursor: pointer; font-family: var(--font-body); }
.btn-ghost-dark:hover { border-color: var(--cream); }

/* ── Footer: enlaces a ambas páginas ── */
.foot-nav { display: flex; gap: 20px; list-style: none; }
.foot-nav a { font-size: 13px; color: rgba(250,248,245,.75); text-decoration: none; }
.foot-nav a:hover { color: var(--cream); }

@media (max-width: 1100px) {
  .mem-caps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .nav-links { display: flex; gap: 18px; }
  .nav-links a { font-size: 13px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { display: contents; }
  .hero-eyebrow { order: 1; }
  .pez { order: 2; margin: 4px 0 30px; }
  .hero-h1 { order: 3; }
  .hero-pez .hero-sub { order: 4; }
  .hero-pez .ctas { order: 5; }
  .hero-pez .props { order: 6; margin-top: 44px; }
  .hero-pez { padding-top: 104px; }
  .base-grid { grid-template-columns: 1fr; gap: 28px; }
  .mem-svg--h { display: none; }
  .mem-svg--v { display: block; max-width: 420px; margin: 0 auto; }
  .mem-pie { grid-template-columns: 1fr; }
  .mem-acciones { justify-content: flex-start; }
  .hero-sol { padding: 116px var(--gutter) 64px; }
}
@media (max-width: 600px) {
  .pz-caps { top: 12px; left: 14px; right: 14px; }
  .pz-cap { font-size: 14.5px; }
  .pz-replay { font-size: 11.5px; padding: 4px 8px; right: 8px; bottom: 6px; }
  .mem-caps { grid-template-columns: 1fr; gap: 26px; }
  .teaser .teaser-arrow { width: 40px; height: 40px; }
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12.5px; }
}
@media (max-width: 420px) {
  /* nav compacto: las dos pestañas + botón caben en 375 px */
  nav { padding: 12px 16px; }
  .logo-text { display: none; }
  .nav-cta { padding: 9px 11px; font-size: 10.5px; letter-spacing: .04em; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 420px) { .cta-long { display: none; } }

/* Por qué Nexo · versión ejecutiva: cabe en una vista */
#porque { padding-top: 84px; padding-bottom: 84px; }
#porque .sec-head { margin-bottom: 0; }
.pq-head { display: grid; grid-template-columns: 1.05fr 1fr; gap: 72px; align-items: end; }
.pq-intro .porque-lead { font-size: 19px; line-height: 1.55; }
.pq-bio { margin-top: 22px; font-size: 14px; line-height: 1.6; color: rgba(250,248,245,.62); }
.pq-bio strong { color: var(--cream); font-weight: 600; margin-right: 8px; }
.pq-bio .bio-role { display: inline; margin: 0; font-size: 12px; }
.pq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; margin-top: 64px; }
.pq-item .num { display: block; margin-bottom: 14px; }
.pq-item .t-title { color: var(--cream); }
.pq-item .t-desc { margin-top: 8px; }
@media (max-width: 1100px) {
  .pq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
}
@media (max-width: 860px) {
  .pq-head { grid-template-columns: 1fr; gap: 28px; }
  #porque { padding-top: 72px; padding-bottom: 72px; }
  .pq-grid { margin-top: 44px; }
}
@media (max-width: 560px) {
  .pq-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ===== Aviso de privacidad ===== */
.legal { padding: 140px var(--gutter) 96px; }
.legal .wrap { max-width: 760px; }
.legal h1.display { margin-top: 16px; font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 52px); font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.01em; }
.legal-fecha { font-size: 14px; color: var(--muted); margin-top: 12px; }
.legal h2 { font-size: 20px; font-weight: 600; color: var(--ink); margin: 44px 0 12px; letter-spacing: -.005em; }
.legal p, .legal li { font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.legal p + p { margin-top: 12px; }
.legal ul { margin: 12px 0 12px 22px; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--rust); }
.legal strong { color: var(--ink); font-weight: 600; }
@media (max-width: 720px) { .legal { padding: 112px 20px 72px; } }

/* Nota de privacidad bajo el formulario */
.form-privacidad { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-top: 14px; }
.form-privacidad a { color: inherit; }

/* ===== Elena ===== */
.elena-hero-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; }
.elena-hero h1 { font-family: var(--font-display); font-size: clamp(36px, 5vw, 60px); line-height: 1.08; color: var(--ink); margin-top: 16px; }
.elena-hero h1 em { font-style: italic; color: var(--rust); }
.elena-hero .lead { margin-top: 20px; }
.elena-hero .ctas { margin: 32px 0 16px; }
.elena-plataformas { font-size: 14px; color: var(--muted); }
.elena-retrato { width: min(320px, 100%); justify-self: center; box-shadow: 0 0 0 8px rgba(217,119,6,.9); }
.elena-retrato svg { width: 100%; height: auto; }
.elena-ejemplo { margin-top: 40px; max-width: 760px; }
.elena-planes { grid-template-columns: repeat(2, 1fr); }
.elena-lista { margin: 14px 0 0 18px; }
.elena-lista li { font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.elena-pasos { list-style: none; counter-reset: paso; display: grid; gap: 18px; max-width: 760px; }
.elena-pasos li { counter-increment: paso; position: relative; padding-left: 56px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.elena-pasos li::before { content: counter(paso, decimal-leading-zero); position: absolute; left: 0; top: 0; font-weight: 700; color: var(--rust); }
.elena-faq details { border-top: 1px solid var(--border); padding: 18px 0; max-width: 760px; }
.elena-faq summary { cursor: pointer; font-weight: 600; color: var(--ink); font-size: 17px; }
.elena-faq details p { margin-top: 10px; color: var(--ink-2); line-height: 1.7; }
.elena-solicitud .form-box { max-width: 560px; }
@media (max-width: 860px) {
  .elena-hero-grid, .elena-planes { grid-template-columns: 1fr; }
  .elena-retrato { width: 200px; justify-self: start; }
}

/* Inicio: acceso a Elena bajo los botones del hero */
.hero-elena { margin: 22px 0 0; font-size: 15px; }
.hero-elena a { color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--amber, #D97706); padding-bottom: 2px; }
.hero-elena a:hover { color: var(--ink); }
.hero-pez .hero-elena { order: 5; }
.js .hero-pez.intro .hero-elena { animation: pzUp 1s var(--ease) both; animation-delay: calc(var(--intro) + 1.2s); }

/* ===== Logo "nexo." (oct-2026) ===== */
.logo-palabra, .foot-palabra { font-family: var(--font-body); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.logo-palabra { font-size: 28px; color: var(--ink); }
.foot-palabra { font-size: 24px; color: var(--cream); }
.logo-palabra i, .foot-palabra i { font-style: normal; color: var(--amber); }
@media (max-width: 420px) { .logo-palabra { font-size: 24px; } }