/* ==========================================================================
   VEGAS DEL VERDE — pie.css  ·  cierre editorial del sitio
   Referencia de composición: _mockups-chatgpt/08-footer-cta.png.

   PARA EL ORQUESTADOR: este archivo es NUEVO. Hay que añadirlo a
   CSS_SECCIONES en herramientas/ensamblar.js (y su gemelo ensamblar.py)
   para que el <link> entre al <head>. Sugerencia: al final de la lista,
   después de ubicacion.css.

   El fondo carbón, el padding vertical y el color base de los enlaces del
   pie los sigue dando .pie-sitio en shell.css; aquí sólo viven las clases
   nuevas pie-final__*.

   Sólo tokens de tokens.css; ninguna variable local hizo falta.
   Animación: sólo transform/opacity, con duraciones que ya colapsan a 1ms
   bajo prefers-reduced-motion vía los tokens.
   ========================================================================== */

/* v12 · `.marca__nombre` (el nombre escrito aparte, en la fuente display,
   junto al símbolo dibujado a mano) se borró de aquí y de la cabecera: la
   cabecera pasó a usar el logotipo real (`.marca__logo`, shell.css), que ya
   trae el símbolo y la palabra en una sola imagen — pedido directo del
   cliente, «pon el logo de Vegas el original en la página». Este archivo
   deja de tener nada que vestir de la marca de cabecera. */

/* --------------------------------------------------------------------------
   0 bis. EL TELÓN — el pie deja de ser franja plana y cae hacia la sala.
   El degradado va del bosque hondo (donde termina la última sección) al
   --negro-escena del grading: el mismo par tonal de las sombras de las 160
   fotos. Sobrescribe el fondo plano que .pie-sitio hereda de shell.css sin
   tocar su padding ni sus enlaces.
   -------------------------------------------------------------------------- */
/* v13 · EL TELÓN SE RETIRA — pedido directo del cliente: «no quiere tonos
   oscuros en la página». El pie ya no cae hacia la sala: hereda la banda
   clara con trama de .pie-sitio (shell.css) y no pinta fondo propio, así
   que el papel botánico corre continuo hasta el final del documento. */

/* --------------------------------------------------------------------------
   1. CIERRE — antetítulo, titular serif grande, CTA final
   -------------------------------------------------------------------------- */
/* v23 · EL AIRE DEL CIERRE DEJA DE SER UNO SOLO. Las tres piezas —antetítulo,
   titular de --fs-hero y CTA— iban separadas por el mismo --esp-md, y un
   espaciado constante entre elementos de tres escalas distintas es el rasgo de
   plantilla más silencioso que hay: dice que las tres pesan lo mismo. Ahora el
   antetítulo se acerca a su titular (es su rótulo, --esp-sm) y el botón se
   aparta (es otra cosa, y se aparta con el margen de abajo). */
.pie-final__cierre {
  /* v34 · el cierre baja de --esp-3xl a --esp-2xl por abajo: entre el CTA
     final y la rejilla de columnas había 96 px de papel vacío. */
  padding-block: var(--esp-xl) var(--esp-2xl);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-sm);
}

/* v2 · El filete corto que iba antes del texto (`.pie-final__filete`) se
   quitó del marcado (_footer.html) — pedido directo del cliente sobre una
   captura de esta franja. Sin el <span> que lo dibujaba, sus reglas de
   abajo se retiran también: eran puramente suyas, nada más las reutilizaba. */
.pie-final__antetitulo {
  display: inline-flex;
  align-items: center;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-eyebrow);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-eyebrow);
  color: var(--verde-texto);
}

/* Titular editorial: serif fina, sin mayúsculas (regla: nada de uppercase
   en texto grande). Sube a --fs-hero: es el ÚLTIMO titular de la página y
   la tipografía es aquí la protagonista — no compite con --fs-portada, que
   sigue siendo exclusivo del hero. Entra renglón a renglón con el
   .reveal-texto compartido de base.css (marcado en _footer.html). */
.pie-final__titular {
  font-family: var(--fuente-display);
  font-size: var(--fs-hero);
  font-weight: var(--peso-display);
  font-variation-settings: var(--ejes-display);
  letter-spacing: var(--tracking-display);
  line-height: var(--alto-linea-apretado);
  color: var(--color-texto);
  max-width: var(--medida-corta);
}

/* CTA final LLENO: el último botón de la página gasta el coral pleno sobre
   el negro más hondo del sitio — máximo contraste cromático reservado para
   el cierre. Sólo transform en hover; la flecha lleva el suyo aparte. */
.pie-final__cta {
  display: inline-flex;
  align-items: center;
  /* v23 · el escalón que el gap uniforme del §1 ya no da: el botón se despega
     del titular porque no pertenece a su bloque de texto. */
  margin-block-start: var(--esp-md);
  gap: var(--esp-2xs);
  min-height: 2.75rem; /* 44px táctiles */
  padding: var(--esp-2xs) var(--esp-lg);
  background: var(--color-accion);
  border: 1px solid var(--color-accion-borde);
  box-shadow: var(--sombra-accion);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  font-weight: var(--peso-medio);
  text-transform: uppercase;
  letter-spacing: var(--track-boton);
  transition: transform var(--transicion-rapida);
}

.pie-sitio a.pie-final__cta {
  color: var(--color-accion-texto);
}

.pie-sitio a.pie-final__cta:hover {
  color: var(--color-accion-texto);
}

/* El levante sale de --esp-3xs (4px) a la mitad: ningún tamaño literal. */
.pie-final__cta:hover,
.pie-final__cta:focus-visible {
  transform: translateY(calc(var(--esp-3xs) / -2));
}

.pie-final__flecha {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform var(--transicion-rapida);
}

.pie-final__cta:hover .pie-final__flecha,
.pie-final__cta:focus-visible .pie-final__flecha {
  transform: translateX(0.3em);
}

/* --------------------------------------------------------------------------
   2. FILA DE MARCA — filete arriba; logo + nombre a un lado, acciones al otro
   -------------------------------------------------------------------------- */
.pie-final__fila {
  border-block-start: 1px solid var(--color-borde-suave);
  padding-block: var(--esp-xl);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.pie-final__marca {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-sm);
}

/* v30 · VUELVE EL LOCKUP DE DOS PARTES, y `.pie-final__logo` (la placa
   `logo-vegas-barra.png` de la v29, con símbolo y nombre horneados en un
   solo PNG) desaparece. Motivo: el cliente rechazó esa placa —y también la
   del header— por lo mismo, que el nombre viene DIBUJADO dentro de la
   imagen y no calza con el texto tipografiado que tiene al lado.
   Ahora el símbolo es `img/logo/simbolo-transparente.png` (recorte propio,
   sin letras, transparencia real) y el nombre lo pone el HTML.
   Se dimensiona por ALTO, no por ancho como la v28: el símbolo es apaisado
   (744×351) y por ancho crecería fuera de la fila. */
/* v40 · logo oficial completo (una sola imagen, ver .marca__logo en shell.css):
   apaisado 1,6:1, por alto. */
.pie-final__logo {
  display: block;
  width: auto;
  height: clamp(3.5rem, 3rem + 2vw, 5rem);
  flex: none;
  background: none;
}

/* La marca firma, no compite: baja de --fs-h3 a --fs-h4 para que la escala
   del pie tenga tres niveles limpios (titular hero → fila media → legal micro). */
/* v36 · El nombre es el wordmark VECTORIAL real (img/logo/wordmark-definitivo.svg),
   no texto en fuente: mismo criterio que .marca__nombre de la cabecera.
   Por alto, ≈ 0,42 × el símbolo (proporción del logo original). */
.pie-final__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-lg);
}

.pie-final__social {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2xs);
  min-height: 2.75rem;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
}

.pie-final__social .icono-traza {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
}

.pie-final__idioma {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-family: var(--fuente-titulo);
  font-size: var(--fs-pequeno);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.pie-sitio a.pie-final__idioma {
  color: var(--color-texto-suave);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. LEGAL Y CRÉDITOS
   -------------------------------------------------------------------------- */
/* v23 · La letra pequeña del pie toma el registro de .credito (base.css §5):
   interlineado propio de 1,45 y tracking a cero. Heredaba el interlineado del
   cuerpo, y a 12,8 px eso deja un canalón que despega cada línea de la de al
   lado. Y el filete respira más (--esp-lg → --esp-xl): es el corte entre la
   firma de la marca y el aviso legal, no un renglón más. */
.pie-final__legal {
  border-block-start: 1px solid var(--color-borde-suave);
  padding-block-start: var(--esp-xl);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--esp-sm) var(--gap);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--color-texto-suave);
}

.pie-final__legal-enlaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-sm) var(--esp-md);
}

.pie-sitio .pie-final__legal a {
  color: var(--color-texto-suave);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.pie-sitio .pie-final__legal a:hover {
  color: var(--verde-texto);
}

/* v23 · Mismo criterio que el bloque legal de arriba, y por el mismo
   diagnóstico del cliente sobre los créditos del muro de aves: el interlineado
   de párrafo (1,68) a cuerpo micro convierte tres líneas de crédito en tres
   líneas sueltas. 1,45 las vuelve a agrupar como un bloque. */
.pie-final__creditos {
  margin-block-start: var(--esp-lg);
  font-family: var(--fuente-titulo);
  font-size: var(--fs-micro);
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--color-texto-suave);
  max-width: var(--medida);
}