/* ══════════════════════════════════════════════════════════════
   Home institucional — Fenix Trading
   Se apoya en ../style.css: de ahí salen los tokens (--brand,
   --ink, --edge, --ch…), el body, la utilidad .cut y los .btn.
   Acá viven sólo las piezas que los formularios no tienen:
   navegación, hero, bloques de contenido y pie.
   ══════════════════════════════════════════════════════════════ */

.env { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }

/* La barra es pegajosa: sin esto, al llegar por un enlace con ancla el
   destino queda escondido detrás del menú. */
[id] { scroll-margin-top: 100px; }

/* ─── Navegación ─── */
/* Fondo sólido, sin backdrop-filter: ese filtro crea una raíz de fusión
   propia y anula el mix-blend-mode del logo, que aparecía dentro de un
   recuadro blanco. Con .88 de opacidad tampoco se ganaba casi nada. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: background .25s ease-out, border-color .25s ease-out, box-shadow .25s ease-out;
}
/* Al bajar aparece la línea + una sombra sutil para despegar la barra del contenido.
   Arriba del todo queda sin borde, integrada al fondo de la página. */
.nav--scrolled {
  border-bottom-color: var(--edge);
  box-shadow: 0 8px 24px -20px rgba(11, 27, 43, .45);
}

/* ─── Páginas con franja de color arriba: la barra se hace transparente y deja ver
   la franja (toma su color exacto), con logo/texto/botones en blanco. Al bajar
   (.nav--scrolled) vuelve a la barra clara normal. ─── */
body.nav-top-oscuro .nav { margin-bottom: -76px; } /* la franja pasa por detrás de la barra */
body.nav-top-oscuro .nav:not(.nav--scrolled) {
  background: transparent; border-bottom-color: transparent; box-shadow: none;
}
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__link { color: rgba(255, 255, 255, .85); }
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__link:hover,
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__item:hover .nav__link { color: #fff; }
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__logo img { filter: brightness(0) invert(1); }
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__burger { color: #fff; }
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__acc .btn--outline { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__acc .btn--outline:hover { background: rgba(255, 255, 255, .15); }
body.nav-top-oscuro .nav:not(.nav--scrolled) .nav__acc .btn--primary { background: #fff; color: var(--brand); border-color: #fff; }
.nav__in { display: flex; align-items: center; gap: 18px; height: 76px; }
.nav__logo { flex: none; display: block; }

/* El JPG del logo horizontal viene sobre un lienzo cuadrado de 600x600:
   el dibujo ocupa el 95% del ancho pero sólo el 15% del alto. Fijándole
   la altura quedaba diminuto, así que se le da la caja del dibujo y
   object-fit recorta el aire de arriba y abajo.
   multiply funde el fondo blanco del archivo con el gris de la página. */
.nav__logo img {
  width: 240px; height: 37px;
  object-fit: cover; object-position: center;
  display: block;
  transition: filter .25s ease-out;
}

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 9px;
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11.5px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  background: none; border: 0; cursor: pointer;
  transition: color .17s ease-out;
}
.nav__link:hover, .nav__item:hover .nav__link { color: var(--ink); }

/* Sección activa. Va por atributo en el <body> porque la navegación es
   un parcial compartido: el marcado es idéntico en todas las páginas. */
body[data-pagina="nosotros"]  .nav__link[data-sec="nosotros"],
body[data-pagina="fenixgo"]   .nav__link[data-sec="fenixgo"],
body[data-pagina="operar"]    .nav__link[data-sec="operar"],
body[data-pagina="amcs"]      .nav__link[data-sec="amcs"],
body[data-pagina="servicios"] .nav__link[data-sec="servicios"],
body[data-pagina="contacto"]  .nav__link[data-sec="contacto"] {
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--brand);
}
.nav__link svg { width: 10px; height: 10px; opacity: .55; }

/* Submenú: aparece al pasar por encima o al enfocar con teclado. */
.nav__sub {
  position: absolute; top: 100%; left: 0;
  min-width: 232px;
  padding: 8px;
  background: var(--panel);
  border: 1px solid var(--edge);
  box-shadow: 0 18px 40px -22px rgba(11, 27, 43, .38);
  opacity: 0; visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .17s ease-out, transform .17s ease-out, visibility .17s;
}
.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: none;
}
.nav__sub a {
  display: block;
  padding: 9px 12px;
  font-size: 13.5px; color: var(--muted); text-decoration: none;
  transition: background .15s ease-out, color .15s ease-out;
}
.nav__sub a:hover { background: var(--field); color: var(--brand); }

.nav__acc { display: flex; align-items: center; gap: 10px; flex: none; }
/* Los botones de la barra van más chicos que los CTA de página: con el
   tamaño completo el contenido pedía 1241px y el contenedor da 1176. */
.nav__acc .btn { height: 40px; padding: 0 16px; font-size: 11.5px; letter-spacing: .12em; }
.nav__lang {
  display: flex; gap: 2px;
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
}
.nav__lang a { color: var(--muted2); text-decoration: none; padding: 4px; }
.nav__lang a[aria-current] { color: var(--ink); }

.nav__burger { display: none; }
.nav__movil { display: none; }

/* ─── Hero ─── */
.hero { padding: 26px 0 140px; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: center; text-align: center; max-width: 1600px; }
.hero__kicker {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 20px;
}
.hero h1 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(40px, 7.4vw, 104px);
  font-weight: 700; line-height: .95; letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 24px;
}
.hero p {
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.6; color: var(--muted);
  margin: 0 auto 34px; max-width: 54ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 13px; justify-content: center; }
.hero__cta .btn { height: 52px; padding: 0 32px; font-size: 13px; }

/* Ilustración: velas + línea ascendente, el mismo motivo que usa la
   marca en sus piezas gráficas. */
.hero__art {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 34px 32px;
}
.hero__art svg { width: 100%; height: auto; display: block; }
.hero__art::after {
  content: "";
  position: absolute; right: -1px; bottom: -1px;
  width: 76px; height: 76px;
  background: var(--brand);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: .1;
}

/* ─── Franja de confianza ─── */
.trust { border-block: 1px solid var(--edge); background: var(--panel); }
.trust__in {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 44px;
  padding: 22px 32px;
}
.trust__i { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--muted); }
.trust__i svg { width: 19px; height: 19px; color: var(--brand); flex: none; }
.trust__i b { color: var(--ink); font-weight: 600; }

/* ─── Bloques de contenido ─── */
.bloques { padding: 40px 40px 20px; max-width: none; }
.bloque {
  display: grid; grid-template-columns: 1fr 1fr; gap: 54px; align-items: stretch;
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 40px 44px;
  margin-bottom: 22px;
}
/* Imágenes más bajas → el bloque es menos alto y el texto no se estira tanto. */
.bloque .lam { align-self: center; }
.bloque .lam--foto { max-height: 330px; }
.bloque .lam--logo { max-width: 58%; }
.bloque--inv .bloque__txt { order: 2; }
/* FenixGo (home): título más grande, con las letras "Go" en negro. */
.bloques .bloque:not(.bloque--inv) h2 { font-size: clamp(34px, 4vw, 54px); }
.fg-go { color: var(--ink); }
/* FenixGo (SOLO la página fenixgo.html): esa tarjeta de la foto del celular va más
   grande. Scopeado a la página para no agrandar "Informes mensuales" de la home,
   que usa la misma clase .bloque--inv. */
body[data-pagina="fenixgo"] .bloque.bloque--inv { padding: 56px 60px; gap: 64px; }
body[data-pagina="fenixgo"] .bloque.bloque--inv h2 { font-size: clamp(34px, 4.2vw, 52px); margin: 0 0 30px; }
body[data-pagina="fenixgo"] .bloque.bloque--inv p { font-size: clamp(19px, 2vw, 24px); line-height: 1.6; margin: 0 0 34px; max-width: 46ch; }
body[data-pagina="fenixgo"] .bloque.bloque--inv .btn { font-size: 18px; padding: 15px 24px; white-space: nowrap; }
body[data-pagina="fenixgo"] .bloque.bloque--inv .bloque__cta { flex-wrap: nowrap; }
body[data-pagina="fenixgo"] .bloque.bloque--inv .lam--foto { max-height: 480px; }
/* FenixGo a todo el ancho de la página: las dos tarjetas + el texto grande (.inst)
   y la tarjeta de la foto del celular (.bloque--inv), alineadas con el mismo gutter. */
body[data-pagina="fenixgo"] .inst {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, 4vw, 60px);
  padding-right: clamp(16px, 4vw, 60px);
}
body[data-pagina="fenixgo"] .bloque.bloque--inv {
  margin-left: calc(50% - 50vw + clamp(16px, 4vw, 60px));
  margin-right: calc(50% - 50vw + clamp(16px, 4vw, 60px));
}
/* El texto ocupa todo el alto y se reparte: título arriba, bajada en el medio,
   botones abajo. */
.bloque__txt { display: flex; flex-direction: column; justify-content: space-between; }
.bloque__txt > :last-child { margin-bottom: 0; }
/* Un botón suelto (ej. "Acceder") no se estira: queda del ancho de su texto. */
.bloque__txt > .btn { align-self: flex-start; }
.bloque__n {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 14px;
}
.bloque h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700; line-height: 1.02; letter-spacing: -.012em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 26px;
}
.bloque p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 28px; max-width: 48ch; }

/* Lámina decorativa del bloque, sin foto. */
.lam {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--field);
  border: 1px solid var(--edge);
  display: grid; place-items: center;
  overflow: hidden;
}
.lam svg { width: 72%; height: auto; color: var(--brand); }
.lam::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,116,189,.06), transparent 58%);
}

/* ─── Cierre ─── */
.cierre { padding: 46px 0 96px; }
.cierre__in {
  background: var(--ink);
  color: #fff;
  padding: 62px 56px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 34px;
}
.cierre h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700; line-height: 1; letter-spacing: -.015em; text-transform: uppercase;
  margin: 0 0 12px;
}
.cierre p { margin: 0; color: rgba(255,255,255,.66); font-size: 16px; max-width: 44ch; }
.cierre .btn--primary { background: var(--brand); color: #fff; }

/* Cierre de la home: "Construí tu futuro financiero en 4 simples pasos". */
.pasos { padding: 64px 0 40px; }
.pasos__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  flex-wrap: wrap; gap: 28px; margin-bottom: 54px;
}
.pasos__t {
  font-family: "Space Grotesk", "Saira", sans-serif;
  font-size: clamp(30px, 4.2vw, 54px); font-weight: 700;
  line-height: 1.05; letter-spacing: -.01em; color: var(--ink); margin: 0;
}
.pasos__btn { flex: none; background: var(--brand); color: #fff; border-color: var(--brand); }
.pasos__btn:hover { background: var(--brand2); }
.pasos__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.paso { display: flex; align-items: flex-start; gap: 16px; }
.paso__n {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(38px, 3.6vw, 56px); font-weight: 700; line-height: .85;
  color: var(--brand); flex: none;
}
.paso__c h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 22px; font-weight: 700; line-height: 1.12;
  color: var(--brand); margin: 0 0 10px;
}
.paso__c p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 900px) { .pasos__grid { grid-template-columns: 1fr 1fr; gap: 34px; } }
@media (max-width: 560px) { .pasos__grid { grid-template-columns: 1fr; } }
.cierre .btn--primary:hover { background: var(--brand3); }

/* ══════════════════════════════════════════════════════════════
   PÁGINAS INTERNAS
   ══════════════════════════════════════════════════════════════ */

/* ─── Encabezado de página ─── */
.phead { padding: 60px 0 44px; border-bottom: 1px solid var(--edge); }
.phead__k {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11.5px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 16px;
}
.phead h1 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(34px, 4.6vw, 60px);
  font-weight: 700; line-height: .98; letter-spacing: -.018em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 18px;
}
.phead p { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0; max-width: 62ch; }

/* ─── Bloque de texto ─── */
.seccion { padding: 62px 0 0; }
.prosa {
  background: var(--panel); border: 1px solid var(--edge);
  padding: 40px 44px;
  margin-bottom: 20px;
}
.prosa h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 18px;
}
.prosa h2 + p { margin-top: 0; }
.prosa h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink); margin: 24px 0 8px;
}
.prosa p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; max-width: 72ch; }
.prosa p:last-child { margin-bottom: 0; }
.prosa strong { color: var(--ink); font-weight: 600; }
.prosa ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.prosa li {
  position: relative; padding-left: 22px; margin-bottom: 10px;
  font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 70ch;
}
.prosa li::before {
  content: ""; position: absolute; left: 0; top: 10px;
  width: 8px; height: 8px; background: var(--brand);
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px);
}

/* Dos columnas de texto cuando hay bastante que leer. */
.prosa--2 { columns: 2; column-gap: 46px; }
.prosa--2 h2 { column-span: all; }
.prosa--2 p { break-inside: avoid; }

/* ─── Título de sección (volanta + titular) ─── */
.titulo { margin: 0 0 26px; }
.titulo b {
  display: block;
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brand); margin-bottom: 10px;
}
.titulo h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--ink); margin: 0;
}

/* Cierre de "Nosotros": foto del equipo + logo + texto, estilo editorial. */
.nos-cierre {
  display: grid; grid-template-columns: 1.4fr .8fr; align-items: stretch;
  background: var(--panel); border: 1px solid var(--edge);
  overflow: hidden;
  /* Ocupa todo el ancho de la página (rompe el margen del contenedor), alineado
     con el mismo gutter que la grilla del equipo. */
  margin: 8px calc(50% - 50vw + clamp(16px, 4vw, 60px)) 24px;
}
.nos-cierre__foto {
  display: flex; align-items: stretch; justify-content: center;
  background: var(--panel); padding: clamp(24px, 3.2vw, 48px);
}
.nos-cierre__foto img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.nos-cierre__info {
  padding: clamp(24px, 3.2vw, 48px);
  display: flex; flex-direction: column; justify-content: center;
}
.nos-cierre__logo { width: 190px; max-width: 60%; height: auto; margin-bottom: 24px; }
.nos-cierre__info h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(24px, 3vw, 38px); font-weight: 800;
  line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 18px;
}
.nos-cierre__info p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }
.nos-cierre__info p:last-child { margin-bottom: 0; }
.nos-cierre__info strong { color: var(--ink); font-weight: 600; }
/* "Marco regulatorio" (la prosa de Nosotros) también a todo el ancho, alineada
   con el equipo y el cierre. Solo en esta página (prosa se usa en otras). */
body[data-pagina="nosotros"] .prosa {
  margin-left: calc(50% - 50vw + clamp(16px, 4vw, 60px));
  margin-right: calc(50% - 50vw + clamp(16px, 4vw, 60px));
}
@media (max-width: 820px) {
  .nos-cierre { grid-template-columns: 1fr; }
  .nos-cierre__foto { min-height: 260px; }
}

/* ─── Equipo ─── */
/* Título "Nuestro equipo": grande, centrado y con tipografía display (Syne). */
#equipo .titulo { text-align: center; margin-bottom: 40px; }
#equipo .titulo h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 800; letter-spacing: -.01em;
}
#equipo .titulo h2 { color: #000; }
#equipo .titulo h2 .eq-azul { color: var(--brand); }
.equipo {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px;
  /* Ocupa todo el ancho de la pantalla (rompe el margen del contenedor). */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: clamp(16px, 4vw, 60px);
  padding-right: clamp(16px, 4vw, 60px);
}
.equipo__p {
  background: var(--panel);
  border: 1px solid var(--edge);
  padding: 28px 26px;
  transition: border-color .18s ease-out;
}
.equipo__p:hover { border-color: var(--brand); }
/* Carta que se da vuelta al pasar el mouse: frente = foto, dorso = texto. */
.equipo__media { perspective: 1100px; margin-bottom: 20px; }
.equipo__flip {
  position: relative; width: 100%; aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.equipo__media:hover .equipo__flip,
.equipo__media:focus-within .equipo__flip { transform: rotateY(180deg); }
.equipo__cara {
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.equipo__cara--frente { background: var(--panel); }
.equipo__cara--dorso {
  transform: rotateY(180deg);
  background: var(--brand-soft); border: 1px solid var(--brand);
  color: #000; display: flex; flex-direction: column; justify-content: center;
  padding: 24px 26px; text-align: left;
}
.equipo__cara--dorso .equipo__cargo {
  font-family: "Saira", "Inter", sans-serif; font-weight: 700;
  font-size: 18px; margin: 0 0 10px; color: #000;
}
.equipo__cara--dorso p { font-size: 14.5px; line-height: 1.55; color: #000; margin: 0; }
.equipo__bullets { list-style: none; margin: 0; padding: 0; }
.equipo__bullets li {
  position: relative; padding-left: 16px; margin-bottom: 8px;
  font-size: 13px; line-height: 1.45; color: #000;
}
.equipo__bullets li:last-child { margin-bottom: 0; }
.equipo__bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 6px; height: 6px; background: var(--brand);
  clip-path: polygon(2px 0, 100% 0, 100% calc(100% - 2px), calc(100% - 2px) 100%, 0 100%, 0 2px);
}
.equipo__ini {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--brand-soft); color: var(--brand);
  font-family: "Saira", "Inter", sans-serif;
  font-size: 52px; font-weight: 700; letter-spacing: .04em;
}
.equipo__foto {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center top;
}
.equipo__foto--zoom { transform: scale(1.35) translateY(-15%); transform-origin: center 30%; }
@media (prefers-reduced-motion: reduce) {
  .equipo__flip { transition: none; }
}
.equipo__n {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 17px; font-weight: 600; letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 4px;
}
.equipo__r { font-size: 13.5px; color: var(--muted); margin: 0; }

/* ─── Tarifas ─── */
.tarifa {
  background: var(--panel); border: 1px solid var(--edge);
  padding: 34px 38px 30px;
  margin-bottom: 20px;
}
.tarifa__h {
  display: flex; align-items: baseline; gap: 14px;
  margin: 0 0 6px;
}
.tarifa__h b {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase;
  color: var(--brand);
}
.tarifa h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700; letter-spacing: -.008em; text-transform: uppercase;
  color: var(--brand); margin: 0 0 22px;
}
.tabla { width: 100%; border-collapse: collapse; }
.tabla th {
  padding: 0 14px 11px 0;
  border-bottom: 1.5px solid var(--ink);
  text-align: left;
  font-family: "Saira", "Inter", sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.tabla th:last-child, .tabla td:last-child { padding-right: 0; text-align: right; }
.tabla td {
  padding: 15px 14px 15px 0;
  border-bottom: 1px solid var(--edge);
  font-size: 15px; color: var(--muted); line-height: 1.5;
  vertical-align: top;
}
.tabla tr:last-child td { border-bottom: 0; padding-bottom: 0; }
.tabla td:first-child { color: var(--ink); font-weight: 500; }
.tabla .num {
  font-variant-numeric: tabular-nums;
  color: var(--ink); font-weight: 600;
  white-space: nowrap;
}
.tarifa__nota {
  margin: 22px 0 0; padding-top: 18px;
  border-top: 1px solid var(--edge);
  font-size: 13.5px; color: var(--muted2); line-height: 1.6;
}

/* ─── Fichas de instrumento ─── */
.inst { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 20px; }
.inst__f {
  background: var(--panel); border: 1px solid var(--edge);
  padding: 26px 28px;
  transition: border-color .18s ease-out;
}
.inst__f:hover { border-color: var(--brand); }
.inst__f h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 22px; font-weight: 700; letter-spacing: -.005em;
  color: var(--ink); margin: 0 0 12px;
}
.inst__f p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; }
/* Tarjeta a todo el ancho (ocupa las dos columnas). */
.inst__f--full { grid-column: 1 / -1; text-align: center; padding: 48px 34px; }
.inst__f--full p {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(28px, 4vw, 46px); font-weight: 800; line-height: 1.3;
  color: var(--ink);
}
.inst__f--full .azul { color: var(--brand); white-space: nowrap; }
/* FenixGo: títulos de los dos cuadrados en azul. */
body[data-pagina="fenixgo"] .inst__f h3 { color: var(--brand); }
/* FenixGo: al pasar el mouse por los 3 cuadrados (los dos chicos y el grande) →
   fondo celeste y letras blancas. */
body[data-pagina="fenixgo"] .inst__f { transition: border-color .18s ease-out, background .18s ease-out; }
body[data-pagina="fenixgo"] .inst__f h3,
body[data-pagina="fenixgo"] .inst__f p { transition: color .18s ease-out; }
body[data-pagina="fenixgo"] .inst__f:hover { background: var(--brand); border-color: var(--brand); }
body[data-pagina="fenixgo"] .inst__f:hover h3,
body[data-pagina="fenixgo"] .inst__f:hover p,
body[data-pagina="fenixgo"] .inst__f:hover .azul { color: #fff; }
.inst__f .mon {
  display: inline-block; margin-bottom: 12px;
  font-family: "Saira", "Inter", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--brand);
}

/* ─── Etiqueta de estado ─── */
.estado {
  display: inline-block; padding: 4px 10px;
  font-family: "Saira", "Inter", sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  white-space: nowrap;
}
.estado--on { background: rgba(63,158,106,.12); color: #2f7d52; }
.estado--off { background: var(--edge); color: var(--muted2); }
.estado--pronto { background: var(--brand-soft); color: var(--brand2); }

/* ─── Aviso de contenido pendiente ─── */
.pendiente {
  background: var(--panel);
  border: 1px solid var(--edge2);
  border-left: 3px solid var(--brand);
  padding: 26px 28px;
  margin-bottom: 20px;
}
.pendiente h2 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand2); margin: 0 0 12px;
}
.pendiente p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 12px; max-width: 70ch; }
.pendiente p:last-child { margin-bottom: 0; }

/* ─── Calculadora ─── */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.calc__panel { background: var(--panel); border: 1px solid var(--edge); padding: 32px 34px; }
.calc__tabs { display: flex; gap: 6px; margin-bottom: 26px; }
.calc__tab {
  padding: 9px 16px; border: 1px solid var(--edge2); background: var(--field);
  font-family: "Saira", "Inter", sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); cursor: pointer;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: background .16s ease-out, color .16s ease-out;
}
.calc__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }

.calc__res { background: var(--ink); color: #fff; padding: 32px 34px; }
.calc__res h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin: 0 0 8px;
}
.calc__total {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(32px, 4vw, 46px); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; margin: 0 0 26px;
}
.calc__fila {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-top: 1px solid rgba(255,255,255,.12);
  font-size: 14.5px;
}
.calc__fila span { color: rgba(255,255,255,.6); }
.calc__fila b { font-variant-numeric: tabular-nums; font-weight: 600; }
.calc__nota { margin: 22px 0 0; font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.45); }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  .calc__panel, .calc__res { padding: 24px 22px; }
}

/* ─── Contacto ─── */
.cont { display: grid; grid-template-columns: .85fr 1.15fr; gap: 20px; align-items: start; }
.cont__datos { background: var(--panel); border: 1px solid var(--edge); padding: 34px 32px; }
.dato { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--edge); }
.dato:first-of-type { padding-top: 0; }
.dato:last-of-type { border-bottom: 0; padding-bottom: 0; }
.dato svg { width: 19px; height: 19px; color: var(--brand); flex: none; margin-top: 2px; }
.dato h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--muted2); margin: 0 0 5px;
}
.dato p { margin: 0; font-size: 15.5px; color: var(--ink); line-height: 1.5; }
.dato a { color: var(--ink); text-decoration: none; }
.dato a:hover { color: var(--brand); }

.cont__form { background: var(--panel); border: 1px solid var(--edge); padding: 34px 36px 36px; }
.cont__form-titulo {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 18px; font-weight: 600; line-height: 1.45; letter-spacing: -.005em;
  color: var(--brand); margin: 0 0 22px;
}
.cont__form .field { margin-bottom: 18px; }
.cont__form textarea {
  width: 100%; min-height: 130px; padding: 13px 14px;
  font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--field); border: 1px solid var(--edge2); border-radius: 0;
  outline: none; resize: vertical;
  transition: border-color .17s ease-out, box-shadow .17s ease-out, background .17s ease-out;
}
.cont__form textarea:hover { border-color: var(--edge3); }
.cont__form textarea:focus { background: #fff; border-color: var(--brand); box-shadow: inset 3px 0 0 var(--brand); }
.acepto { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 22px; font-size: 14px; color: var(--muted); cursor: pointer; }
.acepto input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--brand); flex: none; }
.acepto a { color: var(--brand); }

@media (max-width: 900px) {
  .equipo { grid-template-columns: repeat(2, 1fr); }
  .cont { grid-template-columns: 1fr; }
  .prosa--2 { columns: 1; }
  .prosa, .tarifa, .cont__datos, .cont__form { padding: 26px 22px; }
}
@media (max-width: 620px) {
  .equipo { grid-template-columns: 1fr; }
  .inst { grid-template-columns: 1fr; }
  .phead { padding: 38px 0 32px; }
  .seccion { padding-top: 40px; }
  /* La tabla no se comprime más: se desliza en su propio marco. */
  .tarifa__scroll { overflow-x: auto; }
  .tabla { min-width: 420px; }
}

/* ─── Pie ─── */
.pie { background: var(--panel); border-top: 1px solid var(--edge); padding: 62px 0 0; }
.pie__cols {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
  padding-bottom: 48px;
}
/* Mismo recorte que en la barra. */
.pie__logo img {
  width: 250px; height: 40px;
  object-fit: cover; object-position: center;
  display: block;
  mix-blend-mode: multiply;
  margin-bottom: 18px;
}
.pie__dir { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0 0 18px; }
.pie h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 10.5px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink); margin: 0 0 16px;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a { font-size: 14px; color: var(--muted); text-decoration: none; transition: color .16s ease-out; }
.pie a:hover { color: var(--brand); }

.pie__redes { display: flex; gap: 8px; }
.pie__redes a {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--edge2);
  color: var(--muted);
  transition: border-color .17s ease-out, color .17s ease-out, background .17s ease-out;
}
.pie__redes a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.pie__redes svg { width: 17px; height: 17px; }

.pie__legal {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--edge);
  font-size: 12.5px; color: var(--muted2);
}
.pie__legal a { font-size: 12.5px; }

/* ══════════════════════════════════════════════════════════════
   MOVIMIENTO
   Las curvas del navegador son flojas; estas son las del sistema.
   ══════════════════════════════════════════════════════════════ */
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ─── Aparición al entrar en pantalla ───
   Con transform + opacity, no con clip-path: los paneles ya usan
   clip-path para el chaflán y una cosa pisaría a la otra. */
.rev, .rev--hijos > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
}
.rev.visible, .rev--hijos.visible > * { opacity: 1; transform: none; }

/* Escalonado: nada entra todo junto. */
.rev--hijos.visible > :nth-child(2) { transition-delay: 70ms; }
.rev--hijos.visible > :nth-child(3) { transition-delay: 140ms; }
.rev--hijos.visible > :nth-child(4) { transition-delay: 210ms; }

/* ─── Gráfico del hero ───
   Es la pieza que explica la propuesta: las velas crecen y la línea
   de tendencia se dibuja hasta la flecha. Por eso dura más que una
   animación de interfaz: acá el movimiento cuenta algo. */
.graf .vela {
  transform: scaleY(0);
  transform-box: fill-box;         /* el origen se mide sobre la vela misma */
  transform-origin: 50% 100%;
  transition: transform 520ms var(--ease-out);
}
.hero__art.visible .graf .vela { transform: none; }
.hero__art.visible .graf .vela:nth-child(1) { transition-delay: 150ms; }
.hero__art.visible .graf .vela:nth-child(2) { transition-delay: 195ms; }
.hero__art.visible .graf .vela:nth-child(3) { transition-delay: 240ms; }
.hero__art.visible .graf .vela:nth-child(4) { transition-delay: 285ms; }
.hero__art.visible .graf .vela:nth-child(5) { transition-delay: 330ms; }
.hero__art.visible .graf .vela:nth-child(6) { transition-delay: 375ms; }
.hero__art.visible .graf .vela:nth-child(7) { transition-delay: 420ms; }
.hero__art.visible .graf .vela:nth-child(8) { transition-delay: 465ms; }

/* ease-in-out y no ease-out: el trazo recorre la pantalla, no entra.
   Con ease-out arrancaba disparado y la línea se dibujaba sobre el
   espacio donde las velas todavía no habían crecido. */
.graf__linea {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  transition: stroke-dashoffset 850ms var(--ease-in-out) 600ms;
}
.hero__art.visible .graf__linea { stroke-dashoffset: 0; }

.graf__flecha {
  opacity: 0;
  transition: opacity 260ms var(--ease-out) 1410ms;
}
.hero__art.visible .graf__flecha { opacity: 1; }

/* ─── Respuesta al presionar ───
   Feedback, no decoración: dura poco y no se ve venir. */
.btn { transition-property: background, color, box-shadow, transform; }
.btn:active { transform: scale(0.97); }

/* El desplazamiento de la flecha sólo con mouse: en táctil el hover
   se dispara solo al tocar. */
@media (hover: hover) and (pointer: fine) {
  .pie__redes a:hover { transform: translateY(-2px); }
  .pie__redes a { transition-property: border-color, color, background, transform; }
}

/* ─── Menos movimiento ───
   Se conservan los fundidos (ayudan a entender que algo entró) y se
   quita todo desplazamiento. El gráfico va directo a su estado final. */
@media (prefers-reduced-motion: reduce) {
  .rev, .rev--hijos > * { transform: none; transition: opacity 240ms ease; }
  .rev--hijos.visible > * { transition-delay: 0ms; }
  .graf .vela { transform: none; transition: none; }
  .graf__linea { stroke-dashoffset: 0; transition: none; }
  .graf__flecha { opacity: 1; transition: none; }
  .btn:active { transform: none; }
  .pie__redes a:hover { transform: none; }
}

/* ─── Responsive ─── */
@media (max-width: 1040px) {
  .hero__in { grid-template-columns: 1fr; gap: 44px; }
  .hero__art { order: -1; }
  .pie__cols { grid-template-columns: 1fr 1fr; gap: 36px; }
}
/* El logo horizontal ocupa ~220px contra los ~74 del cuadrado anterior.
   Medido: la barra completa (logo + 6 secciones + idioma + 2 botones)
   recién entra a partir de 1200px; por debajo pasa a menú desplegable. */
@media (max-width: 1200px) {
  .nav__links { display: none; }
  .nav__burger {
    display: grid; place-items: center;
    width: 42px; height: 42px; margin-left: auto;
    background: none; border: 1px solid var(--edge2); cursor: pointer; color: var(--ink);
    border-radius: 10px;
  }
  .nav__burger svg { width: 20px; height: 20px; }
  /* Menú desplegado en pantallas chicas. */
  .nav__links[data-abierto] {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    margin: 0;
    padding: 10px 20px 22px;
    background: var(--panel);
    border-bottom: 1px solid var(--edge);
    max-height: 76vh; overflow-y: auto;
  }
  .nav__links[data-abierto] .nav__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    border: 0; box-shadow: none; padding: 0 0 6px 13px; min-width: 0;
  }
  /* En la barra se queda sólo la acción principal: es la conversión y
     conviene tenerla siempre a mano. El idioma y "Ingresar" pasan al menú. */
  .nav__in { gap: 14px; }
  .nav__acc .btn--outline, .nav__acc .nav__lang { display: none; }
  .nav__links[data-abierto] .nav__movil {
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
    margin-top: 16px; padding-top: 18px;
    border-top: 1px solid var(--edge);
  }
  .nav__movil .btn { justify-content: center; }
  .nav__movil .nav__lang { justify-content: center; padding-top: 6px; }
  .bloque { grid-template-columns: 1fr; gap: 30px; padding: 32px 26px; }
  .bloque--inv .bloque__txt { order: 0; }
  body[data-pagina="fenixgo"] .bloque.bloque--inv .bloque__cta { flex-wrap: wrap; }
  .lam { order: -1; }
}
@media (max-width: 620px) {
  .env { padding: 0 18px; }
  .hero { padding: 46px 0 54px; }
  .hero__art { padding: 20px 18px; }
  .bloques { padding: 54px 18px 10px; }
  .servicios .env { padding: 0 18px; }
  .cierre__in { padding: 38px 24px; }
  .pie__cols { grid-template-columns: 1fr; }
  .trust__in { padding: 20px 18px; gap: 14px; }
  .nav__in { height: 66px; }
  .nav__logo img { width: 180px; height: 28px; }
  /* Con el logo horizontal, la barra se queda sin aire: se achica la
     acción para que entren logo + botón + menú sin desbordar. */
  .nav__acc .btn { height: 40px; padding: 0 14px; font-size: 11px; letter-spacing: .1em; }
  .pie__logo img { width: 210px; height: 34px; }
  /* Apilados quedaban de anchos distintos según el largo del texto. */
  .hero__cta { flex-direction: column; align-items: stretch; }
  .hero__cta .btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   Explorador de AMCs (amcs.html + amcs.js)
   ══════════════════════════════════════════════════════════════ */

/* Hero azul — sobrio: solo el título, centrado. Franja alta con entrada + brillo constante. */
.amcs-hero {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  min-height: 120vh;
  display: flex; align-items: center;
  padding: 96px 0;
  text-align: center;
}
.amcs-hero h1 {
  margin: 0 auto; max-width: none;
  font-family: Saira, sans-serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(32px, 5vw, 56px);
  /* Brillo que recorre las letras: un reflejo celeste nítido sobre el blanco, en loop. */
  background: linear-gradient(100deg, #ffffff 44%, #58b0ea 50%, #ffffff 56%);
  background-size: 280% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  opacity: 0;
  animation: amcsSubir .8s var(--ease-out) forwards, amcsBrillo 8s ease-in-out .6s infinite;
}
@keyframes amcsSubir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes amcsBrillo { from { background-position: 140% 0; } to { background-position: -140% 0; } }
@media (prefers-reduced-motion: reduce) {
  .amcs-hero h1 { animation: none; opacity: 1; -webkit-text-fill-color: #fff; color: #fff; }
}

/* Contenedor + tabs */
.amcs-exp { padding: 36px 32px 56px; }
.amcs-tabs {
  display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px;
}
.amcs-tab {
  flex: 1 1 auto; min-width: 150px; cursor: pointer;
  background: var(--panel); color: var(--ink2); border: 1px solid var(--edge2);
  font-family: Saira, sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .01em;
  padding: 14px 16px; transition: all .18s var(--ease-out);
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}
.amcs-tab:hover { border-color: var(--brand3); color: var(--brand); }
.amcs-tab[aria-selected="true"] {
  background: var(--brand); color: #fff; border-color: var(--brand);
}

/* Panel del fondo */
.amcs-panel { display: block; }
.amcs-cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--edge);
}
.amcs-k {
  display: block; font-family: Saira, sans-serif; text-transform: uppercase;
  letter-spacing: .18em; font-size: 12px; font-weight: 600; color: var(--muted2); margin-bottom: 6px;
}
.amcs-nom { margin: 0; font-family: Saira, sans-serif; font-weight: 800; font-size: 26px; color: var(--brand); }
.amcs-cab__meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.amcs-perfil b { color: var(--ink); }
.amcs-resumen { margin: 16px 0 22px; font-size: 16px; color: var(--ink2); max-width: 80ch; }

/* Grilla composición + rendimiento */
.amcs-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; }
.amcs-card {
  background: var(--panel); border: 1px solid var(--edge); padding: 20px 22px;
  clip-path: polygon(var(--ch) 0, 100% 0, 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, 0 100%, 0 var(--ch));
}

/* Encabezado de la tarjeta con el toggle de vistas de composición */
.amcs-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 6px; }
.amcs-cvistas { display: inline-flex; gap: 3px; background: var(--field); border: 1px solid var(--edge); padding: 3px; }
.amcs-cvista {
  cursor: pointer; background: transparent; border: 0;
  font-family: Saira, sans-serif; font-weight: 600; font-size: 12.5px; letter-spacing: .01em;
  color: var(--muted); padding: 6px 12px; white-space: nowrap; transition: color .15s var(--ease-out), background .15s var(--ease-out);
}
.amcs-cvista:hover { color: var(--brand); }
.amcs-cvista.is-on { background: var(--panel); color: var(--brand); box-shadow: 0 1px 2px rgba(0,0,0,.1); }

/* Composición: donut + leyenda */
.amcs-comp { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 12px; }
.amcs-donut { width: 168px; height: 168px; flex: none; }
.amcs-leyenda { flex: 1; min-width: 190px; display: flex; flex-direction: column; gap: 8px; }
.amcs-leg__row { display: flex; align-items: center; gap: 10px; font-size: 14px; border-bottom: 1px solid var(--field); padding-bottom: 7px; }
.amcs-leg__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.amcs-leg__lbl { color: var(--ink2); }
.amcs-leg__pct { margin-left: auto; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Rendimiento: chips + gráfico + tabla */
.amcs-chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 16px; }
.amcs-chip {
  font-family: Saira, sans-serif; font-weight: 600; font-size: 13px; color: var(--brand2);
  background: var(--brand-soft); border: 1px solid var(--edge); padding: 6px 12px;
}
.amcs-linea { width: 100%; height: auto; display: block; }
.amcs-axis { fill: var(--muted2); font-size: 11px; font-family: Inter, sans-serif; }
.amcs-rend-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.amcs-ejeY-label { font-size: 11.5px; color: var(--muted2); margin: 0 0 4px; font-family: Inter, sans-serif; }
.amcs-dl { flex: 0 0 auto; }
.amcs-dl span { font-size: 12px; }
.amcs-guia { stroke: var(--edge); stroke-width: 1; opacity: .6; vector-effect: non-scaling-stroke; }
.amcs-anual { overflow-x: auto; margin-top: 12px; }
.amcs-anual table { width: 100%; border-collapse: collapse; font-size: 13px; }
.amcs-anual th, .amcs-anual td { padding: 8px 10px; text-align: right; border-top: 1px solid var(--edge); white-space: nowrap; }
.amcs-anual th:first-child, .amcs-anual td:first-child { text-align: left; color: var(--muted); font-weight: 600; }
.amcs-anual thead th { color: var(--muted2); font-weight: 600; border-top: 0; }
.amcs-anual .num { font-variant-numeric: tabular-nums; color: var(--ink); }
.amcs-anual .neg { color: var(--error); }
.amcs-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--muted2); }
.amcs-pronto {
  margin-top: 18px; background: var(--field); border: 1px dashed var(--edge2);
  padding: 22px; font-size: 15px; color: var(--muted);
}

@media (max-width: 860px) {
  .amcs-grid { grid-template-columns: 1fr; }
  .amcs-tab { flex-basis: calc(50% - 5px); }
}

/* ══════════════════════════════════════════════════════════════
   Hero de Nosotros (nosotros.html) — azul distinto + degradé en movimiento
   ══════════════════════════════════════════════════════════════ */
.nos-hero {
  min-height: 120vh;
  display: flex; align-items: center;
  padding: 96px 0;
  text-align: center;
  color: #fff;
  /* Azul distinto al de AMCS, en degradé animado con más contraste (movimiento notorio). */
  background: linear-gradient(120deg, #073b66, #2a92d4, #0a4f8a, #2a92d4, #073b66);
  background-size: 320% 320%;
  animation: nosGrad 11s ease-in-out infinite;
}
.nos-hero h1 {
  margin: 0 auto; max-width: 22ch;
  font-family: Saira, sans-serif; font-weight: 700; line-height: 1.1;
  font-size: clamp(30px, 4.8vw, 52px);
  opacity: 0; animation: amcsSubir .8s var(--ease-out) forwards;
}
@keyframes nosGrad {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .nos-hero { animation: none; }
  .nos-hero h1 { animation: none; opacity: 1; }
}

/* Franja celeste de FenixGo (full-width) con solo el título */
.fg-hero {
  min-height: 120vh;
  display: flex; align-items: center;
  padding: 96px 0;
  text-align: center;
  color: #fff;
  /* Celeste (más claro que AMCS/Nosotros). */
  background: linear-gradient(135deg, #38a8e6, #0f74b6);
}
.fg-hero h1 {
  margin: 0 auto;
  font-family: Saira, sans-serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(32px, 5vw, 56px);
  opacity: 0; animation: amcsSubir .8s var(--ease-out) forwards;
}
/* Movimiento en ola: cada letra sube y baja con un desfasaje según su posición. */
.fg-w { display: inline-block; }
.fg-w--sg { font-family: "Space Grotesk", sans-serif; }
.fg-l { display: inline-block; animation: fgOla 2.6s ease-in-out infinite; animation-delay: calc(.8s + var(--i) * .06s); }
@keyframes fgOla {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .fg-hero h1 { animation: none; opacity: 1; }
  .fg-l { animation: none; }
}

/* Video a pantalla completa, apenas termina la franja azul. */
.fg-video {
  width: 100%;
  height: 100vh;
  background: #000;
  overflow: hidden;
  position: relative;
  /* Línea blanca fina que separa la franja del video. */
  border-top: 2px solid #fff;
}
.fg-video video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
@media (max-width: 720px) {
  .fg-video { height: 70vh; }
}

/* Franja azul debajo del video, con el contenido del cartel "FenixGo Trader". */
.fg-banda {
  min-height: 85vh;
  display: flex;
  padding: 96px 0;
  color: #fff;
  background: linear-gradient(135deg, #38a8e6, #0f74b6);
  /* Línea blanca fina que separa el video de la franja. */
  border-top: 2px solid #fff;
  position: relative;
  overflow: hidden;
}
/* Luces flotantes detrás del texto (bokeh sutil, estilo del video). */
.fg-banda::before {
  content: "";
  position: absolute; inset: -12% -6%;
  background:
    radial-gradient(220px 220px at 18% 40%, rgba(255,255,255,.18), transparent 70%),
    radial-gradient(180px 180px at 38% 26%, rgba(150,210,255,.22), transparent 70%),
    radial-gradient(280px 280px at 10% 68%, rgba(90,160,230,.20), transparent 70%),
    radial-gradient(160px 160px at 30% 60%, rgba(255,255,255,.12), transparent 70%);
  animation: fgFlota 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
@keyframes fgFlota {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(3%, -3%) scale(1.08); }
}
/* Texto arriba-izquierda, botón abajo-derecha. */
.fg-banda__in {
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; z-index: 1;
}
.fg-banda__txt { text-align: left; max-width: 760px; }
.fg-banda h2 {
  margin: 0 0 18px;
  font-family: Saira, sans-serif; font-weight: 700; line-height: 1.15;
  font-size: clamp(28px, 4vw, 46px);
  color: #fff;
}
.fg-banda p {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;
  color: rgba(255, 255, 255, .92);
}
/* Contenedor del botón: acá van los halos (el .btn tiene clip-path y recorta
   sus propias sombras, por eso la animación va en el contenedor). */
.fg-banda__cta {
  align-self: flex-end;
  position: relative; z-index: 1;
  display: inline-block;
}
.btn--banda { background: #fff; color: var(--brand); border-color: #fff; position: relative; z-index: 1; }
.btn--banda:hover { background: rgba(255, 255, 255, .88); }
/* Dos "soles" de rayos alrededor del botón, centrados en él, girando opuesto. */
.fg-sol {
  position: absolute; top: 50%; left: 50%;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  /* Rayos: cuñas blancas finas repetidas alrededor del centro. */
  background: repeating-conic-gradient(#fff 0deg 0.8deg, transparent 0.8deg 8deg);
  /* Máscara radial: deja solo la banda exterior → rayitos de sol. */
  -webkit-mask: radial-gradient(closest-side, transparent 82%, #000 85%, #000 99%, transparent 100%);
          mask: radial-gradient(closest-side, transparent 82%, #000 85%, #000 99%, transparent 100%);
  opacity: .45;
}
.fg-sol--g { width: 520px; height: 520px; margin: -260px 0 0 -260px; animation: fgGira 46s linear infinite; }
.fg-sol--p { width: 340px; height: 340px; margin: -170px 0 0 -170px; animation: fgGira 34s linear infinite reverse; }
@keyframes fgGira { to { transform: rotate(360deg); } }
/* Líneas blancas onduladas que fluyen infinitamente (abajo a la izquierda). */
/* Cubren todo el ancho del texto y arrancan desde el borde inferior de la
   franja (el -96px compensa el padding inferior de la franja). */
.fg-olas {
  position: absolute; left: 0; bottom: -96px;
  width: 100%; max-width: 760px; height: 190px;
  overflow: hidden; pointer-events: none;
  z-index: 0;
  /* Las líneas se desvanecen hacia arriba en vez de cortarse de golpe. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 45%);
}
.fg-olas svg { width: 100%; height: 100%; display: block; }
.fg-olas__g {
  fill: none; stroke: #fff; stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .82;
  /* Todas con la misma velocidad y fase: se mueven sincronizadas, para el
     mismo lado y al mismo tiempo. El trazo es periódico (una onda cada 80u);
     al bajar 80u el loop es continuo. */
  animation: fgOlaFlow 1.5s linear infinite;
}
/* Líneas punteadas en los puntos intermedios: oscilan subiendo y bajando,
   en fase alternada (una sube mientras la de al lado baja). */
.fg-punteadas {
  fill: none; stroke: #fff; stroke-width: 4;
  stroke-dasharray: 12 10; stroke-linecap: round;
  opacity: 1;
}
/* Flujo continuo (sin oscilar): las impares suben infinito, las pares bajan.
   Se anima el dashoffset (dasharray 12+10=22 → un ciclo = 22, loop sin cortes). */
.fg-punteadas use { animation: fgPuntoSube 1s linear infinite; }
.fg-punteadas use:nth-child(even) { animation-name: fgPuntoBaja; }
@keyframes fgPuntoSube { to { stroke-dashoffset: -22; } }
@keyframes fgPuntoBaja { to { stroke-dashoffset: 22; } }
.fg-banda__txt { position: relative; z-index: 1; }
@keyframes fgOlaFlow { to { transform: translateY(80px); } }
@media (max-width: 720px) {
  /* En celular: texto y botón juntos arriba; las líneas fluyen limpias abajo. */
  .fg-banda { min-height: 78vh; padding: 64px 0 90px; }
  .fg-banda__in { justify-content: flex-start; gap: 30px; }
  .fg-banda__cta { align-self: flex-start; }
  /* Los "soles" son más anchos que la pantalla y se enciman con las líneas:
     en móvil se ocultan y el botón queda limpio. */
  .fg-sol { display: none; }
  .fg-olas { height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-banda::before { animation: none; }
  .fg-olas__g, .fg-punteadas use, .fg-sol { animation: none; }
}

/* Más aire entre "Nuestro equipo" y la sección siguiente (Marco regulatorio) */
#equipo { margin-bottom: 52px; }

/* "ideal" en caligrafía dentro del título de AMCs */
.amcs-hero h1 em {
  font-family: "Dancing Script", cursive;
  font-style: normal; font-weight: 700;
  font-size: 1.2em; line-height: 1;
  padding: 0 .04em;
}

/* Palabra "hueca" (contorno) en el título de Nosotros */
.nos-hero h1 .hueca {
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.5px #fff;
  text-stroke: 1.5px #fff;
}

/* Video dentro de la lámina del bloque (FenixGo Trader) */
.lam--video { background: #000; }
.lam--video video { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }

/* Bloque FenixGo Trader: título azul + video más ancho + entra/sale al scrollear */
.bloque h2.azul { color: var(--brand); }
.lam--video {
  opacity: 0; transform: translateY(48px) scale(.96);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.lam--video.en-vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lam--video { opacity: 1; transform: none; transition: none; }
}

/* Foto (celular) dentro de la lámina del bloque móvil */
.lam--foto img { width: 100%; height: 100%; object-fit: contain; display: block; padding: 18px; position: relative; z-index: 1; }

/* La foto del celular entra/sale deslizándose desde el costado (izquierda) al scrollear */
.lam--foto {
  opacity: 0; transform: translateX(-90px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.lam--foto.en-vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lam--foto { opacity: 1; transform: none; transition: none; }
}

/* Integrar la foto del celular con el fondo (sin caja gris, borde ni velo) */
.lam--foto { background: transparent; border: 0; }
.lam--foto::before { content: none; }
.lam--foto img { padding: 0; }

/* Home: cabecera (hero) con fondo azul y texto en blanco */
.hero {
  position: relative;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
}
/* OPCIÓN 1: grilla de líneas finas que se desplaza en diagonal. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  animation: heroGrid 9s linear infinite;
}
@keyframes heroGrid {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 46px 46px, 46px 46px; }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }
/* El contenido del hero queda por encima de la aurora. */
.hero__top, .hero__in { position: relative; z-index: 1; }
/* La barra pasa transparente por encima del hero azul: le damos aire arriba
   para que el contenido no quede debajo de la barra. */
body.nav-top-oscuro .hero { padding-top: 156px; }
.hero__kicker { color: rgba(255, 255, 255, .82); }
.hero h1 { color: #fff; }
.hero p { color: rgba(255, 255, 255, .9); }

/* La línea del hero y el logo se animan por SVG (SMIL) para quedar sincronizados. */
/* Dejar que el logo (en el borde derecho del gráfico) sobresalga sin recortarse. */
.graf { overflow: visible; }


/* Bloque FenixGo de la home: título en azul oscuro, kicker en celeste */
.bloque h2.azul-oscuro { color: var(--brand2); }
.bloque p.bloque__n--celeste { color: var(--ink); }

/* Imagen del newsletter (cuadrada, fondo azul oscuro propio): recuadro cuadrado, se ve completa */
.lam--logo { border: 0; aspect-ratio: 1 / 1; max-width: 78%; margin: 0 auto; overflow: visible; }
.lam--logo img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; z-index: 1; }
/* (Sin cuadrados de acento en las esquinas de la imagen.) */
.lam--logo::before { content: none; }
/* Mismo efecto que la foto de la app: entra/sale deslizándose al scrollear */
.lam--logo {
  opacity: 0; transform: translateX(-90px);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.lam--logo.en-vista { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .lam--logo { opacity: 1; transform: none; transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   Cabecera azul de Costos y servicios (costos-servicios.html)
   ══════════════════════════════════════════════════════════════ */
.cs-hero {
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  min-height: 116vh;
  display: flex; align-items: center;
  padding: 84px 0;
  text-align: center;
  position: relative; overflow: hidden;
}
.cs-hero .env { position: relative; z-index: 2; } /* texto por encima de las estrellas */
/* Cielo de estrellas que titilan en la franja */
.cs-star {
  position: absolute; z-index: 1; border-radius: 50%;
  background: #fff; pointer-events: none; opacity: .3;
  box-shadow: 0 0 4px rgba(255,255,255,.6);
  animation: csTitilar 3s ease-in-out infinite;
}
@keyframes csTitilar {
  0%, 100% { opacity: .12; }
  50% { opacity: .95; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-star { animation: none; opacity: .5; }
}
/* Estrella fugaz que cruza cada tanto */
.cs-fugaz {
  position: absolute; z-index: 1; height: 2px; width: 130px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.95));
  border-radius: 2px; pointer-events: none;
  filter: drop-shadow(0 0 6px rgba(255,255,255,.75));
  animation: csFugaz 1.1s ease-in forwards;
}
@keyframes csFugaz {
  0% { opacity: 0; transform: rotate(var(--ang, 20deg)) translateX(-60px); }
  12% { opacity: 1; }
  100% { opacity: 0; transform: rotate(var(--ang, 20deg)) translateX(420px); }
}
.cs-hero h1 {
  margin: 0 auto 14px; max-width: 22ch;
  font-family: Saira, sans-serif; font-weight: 700;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06;
  opacity: 0; animation: amcsSubir .8s var(--ease-out) forwards;
}
.cs-hero p {
  margin: 0 auto; max-width: 48ch;
  font-size: 18px; color: rgba(255, 255, 255, .9);
  opacity: 0; animation: amcsSubir .8s var(--ease-out) .12s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .cs-hero h1, .cs-hero p { animation: none; opacity: 1; }
}

/* Título de página en azul (calculadoras) */
.phead h1.azul { color: var(--brand); }
.phead h1.azul-oscuro { color: var(--brand2); }
.phead__k.celeste { color: var(--brand3); }

/* Título del hero: "crecer" en Space Grotesk con letras que crecen; el resto en Saira */
.hero__crece .w { display: inline-block; font-family: "Space Grotesk", sans-serif; }
/* La bajada (párrafo debajo del título) también en Space Grotesk */
.hero__crece + p { font-family: "Space Grotesk", sans-serif; }
.hero__crece .l { display: inline-block; vertical-align: baseline; }

/* Tagline centrado en la parte de arriba del hero de la home */
.hero p.hero__top {
  text-align: center; max-width: none; margin: 0 auto 22px;
  font-family: "Saira", sans-serif; text-transform: uppercase;
  font-size: 13px; font-weight: 700; letter-spacing: .28em;
  color: rgba(255, 255, 255, .82);
}

/* ══════════════════════════════════════════════════════════════
   Cabecera azul de las páginas de Servicios (mercado local / internacional)
   ══════════════════════════════════════════════════════════════ */
.mk-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  min-height: 120vh;
  display: flex; align-items: center;
  padding: 168px 0;
  text-align: center;
}
.mk-hero .env { position: relative; z-index: 1; }

/* Lluvia de caracteres/formas al azar: cada uno cae girando en bucle. */
.mk-drop {
  position: absolute; top: -14%;
  color: #ffffff;
  font-family: "Saira", "Inter", sans-serif; font-weight: 700; line-height: 1;
  text-shadow: 0 0 6px rgba(255, 255, 255, .55);
  user-select: none; white-space: nowrap;
  animation: mkCaer linear infinite;
  will-change: transform;
}
@keyframes mkCaer {
  0%   { transform: translateY(-20vh) rotate(0deg); opacity: 0; }
  8%   { opacity: 1; }
  92%  { opacity: 1; }
  100% { transform: translateY(140vh) rotate(160deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-drop { display: none; }
}
.mk-hero h1 {
  margin: 0 auto 14px; max-width: 22ch;
  font-family: Saira, sans-serif; font-weight: 700;
  font-size: clamp(30px, 4.6vw, 52px); line-height: 1.06;
  opacity: 0; animation: amcsSubir .8s var(--ease-out) forwards;
}
.mk-hero p {
  margin: 0 auto; max-width: 52ch;
  font-size: 18px; color: rgba(255, 255, 255, .9);
  opacity: 0; animation: amcsSubir .8s var(--ease-out) .12s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .mk-hero h1, .mk-hero p { animation: none; opacity: 1; }
}

/* Campo trampa antispam del formulario de contacto: fuera de la vista pero
   accesible para los bots que rellenan todo. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ─── Información relevante: lista de documentos publicados ─── */
.cont__lado { display: flex; flex-direction: column; gap: 14px; }
.dato__cta { width: 100%; justify-content: center; }
.docs__estado { color: var(--muted); font-size: 15px; padding: 8px 0 24px; }
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.docs__i {
  display: flex; align-items: center; gap: 18px;
  background: var(--panel); border: 1px solid var(--edge); padding: 20px 22px;
}
.docs__ico { flex: none; width: 40px; height: 40px; color: var(--brand); }
.docs__ico svg { width: 100%; height: 100%; }
.docs__txt { flex: 1; min-width: 0; }
.docs__txt h3 { font-family: "Saira", "Inter", sans-serif; font-size: 17px; margin: 0 0 4px; color: var(--ink); }
.docs__meta { font-size: 13px; color: var(--muted); margin: 0; text-transform: capitalize; }
.docs__i .btn { flex: none; }
@media (max-width: 620px) {
  .docs__i { flex-wrap: wrap; }
  .docs__i .btn { width: 100%; justify-content: center; }
}

/* ─── Claim: franja llamativa debajo del hero ─── */
.claim {
  position: relative; overflow: hidden;
  background: linear-gradient(120deg, var(--brand2), var(--ink));
  padding: 130px 0;
  text-align: center;
}
/* Brillo que cruza la franja cada tanto. */
.claim::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.22) 50%, transparent 62%);
  transform: translateX(-100%);
  animation: claimBrillo 6s ease-in-out 1.2s infinite;
}
.claim .env { position: relative; z-index: 1; }
.claim__txt {
  margin: 0;
  font-family: "Saira", "Inter", sans-serif;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; line-height: 1.15;
  font-size: clamp(20px, 3.1vw, 36px);
  color: #fff;
}
.claim__linea { display: block; }
/* La segunda línea (BCU) se separa con una línea divisoria y se lee como una
   credencial aparte: un poco más chica y espaciada. */
.claim__linea + .claim__linea {
  margin-top: .8em;
  font-size: .8em; letter-spacing: .12em;
  color: rgba(255, 255, 255, .92);
}
.claim__linea + .claim__linea::before {
  content: ""; display: block;
  width: 64px; height: 2px; margin: 0 auto .8em;
  background: rgba(255, 255, 255, .4);
}
.claim__hl { color: #dff1ff; font-size: 1.55em; font-weight: 800; }
.claim__num { display: inline-block; min-width: 1.4ch; text-align: right; font-variant-numeric: tabular-nums; }
.claim__sep { color: rgba(255,255,255,.55); margin: 0 .35em; }
.claim__txt b { color: #dff1ff; font-weight: 700; }
@keyframes claimBrillo {
  0%   { transform: translateX(-100%); }
  22%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .claim::before { animation: none; } }

/* ─── Nuestros servicios ─── */
.servicios { padding: 84px 0 4px; }
/* "Nuestros servicios" ocupa todo el ancho de la página (sin el tope de 1240px). */
.servicios .env { max-width: none; padding: 0 40px; }
.servicios__k {
  font-family: "Saira", "Inter", sans-serif;
  font-size: clamp(30px, 4.4vw, 52px); font-weight: 700;
  letter-spacing: -.01em; text-transform: uppercase; line-height: 1.02;
  color: var(--ink); margin: 0 0 32px;
}
.servicios__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.serv {
  position: relative;
  background: var(--panel); border: 1px solid var(--edge);
  padding: 34px 30px 32px;
  transition: transform .18s ease-out, box-shadow .18s ease-out, border-color .18s ease-out, background .18s ease-out;
}
.serv:hover {
  transform: translateY(-4px);
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: 0 20px 40px -26px rgba(0, 116, 189, .5);
}
.serv h3 {
  font-family: "Saira", "Inter", sans-serif;
  font-size: 19px; font-weight: 700; letter-spacing: -.005em;
  color: var(--brand); margin: 0 0 12px;
  transition: color .18s ease-out;
}
.serv p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; transition: color .18s ease-out; }
/* Al pasar el mouse: fondo celeste y letras blancas. */
.serv:hover h3, .serv:hover p { color: #fff; }

@media (max-width: 860px) {
  .servicios__grid { grid-template-columns: 1fr; }
}

/* Grupo de botones dentro de un bloque de contenido. */
.bloque__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ─── Cabecera azul de la página de Contacto (mismo estilo que el resto) ─── */
.ct-hero {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  color: #fff;
  min-height: 120vh;
  display: flex; align-items: center;
  padding: 96px 0;
  text-align: center;
}
/* Red de nodos que se conectan (animación de "contactar"), dibujada en canvas. */
.ct-hero .ct-red { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ct-hero .env { position: relative; z-index: 1; }
.ct-hero h1 {
  margin: 0 auto 14px; max-width: 20ch;
  font-family: "Saira", sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: clamp(34px, 5vw, 58px); line-height: 1.06;
  opacity: 0; animation: amcsSubir .8s var(--ease-out) forwards;
}
.ct-hero p {
  margin: 0 auto; max-width: 48ch;
  font-size: 18px; color: rgba(255, 255, 255, .9);
  opacity: 0; animation: amcsSubir .8s var(--ease-out) .12s forwards;
}
@media (prefers-reduced-motion: reduce) {
  .ct-hero::before { animation: none; }
  .ct-hero h1, .ct-hero p { animation: none; opacity: 1; }
}

/* ─── Página de Reclamos: formulario + texto a dos columnas ─── */
.cont--reclamo { grid-template-columns: 1fr 1fr; align-items: start; }
.reclamo__h { font-family: "Saira", "Inter", sans-serif; color: var(--brand); font-size: 18px; font-weight: 700; margin: 0 0 20px; }
.reclamo__texto { display: flex; flex-direction: column; gap: 18px; padding-top: 4px; }
.reclamo__texto p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
@media (max-width: 780px) { .cont--reclamo { grid-template-columns: 1fr; } }

/* ── Accesibilidad: textos de contenido bastante más grandes para lectura cómoda ── */
.phead p { font-size: 21px; }
.bloque p { font-size: 20px; line-height: 1.6; }
.cierre p { font-size: 20px; }
.prosa p { font-size: 20px; line-height: 1.7; }
.prosa li { font-size: 20px; }
.nos-cierre__info p { font-size: 20px; line-height: 1.65; }
.serv p { font-size: 19px; }
.inst__f:not(.inst__f--full) p { font-size: 21px; line-height: 1.6; }
.dato p { font-size: 19px; }
.dato h3 { font-size: 14px; }
.reclamo__texto p { font-size: 19px; }
.amcs-resumen { font-size: 20px; }
.amcs-anual table { font-size: 16px; }
.amcs-cab__meta { font-size: 16.5px; }
.amcs-leg__row { font-size: 16px; }
.equipo__r { font-size: 16.5px; }
.equipo__cara--dorso p { font-size: 17px; }
.equipo__bullets li { font-size: 16px; }
.field label { font-size: 16px; }
.field__hint { font-size: 15px; }
.field input[type="text"], .field input[type="email"], .field select { font-size: 18px; }
.cont__form textarea { font-size: 18px; }