/*
 * Landing pública de FASTIK (tanda 10.1, docs/specs/10.1-landing.md).
 *
 * Una sola hoja para las seis páginas. Sigue la página «05 — Landing» del
 * Figma (L01-L04): bandas carbón para cabecera, hero, demo y pie; hoja clara
 * con radio 24 para el contenido; la acción principal en lima.
 *
 * Un solo modo (§9.2): claro con bandas carbón, sin `prefers-color-scheme`.
 * Los contrastes de cada pareja texto/fondo están en §8.1 de la spec; los que
 * no están en esa tabla (#B9BBB4 sobre carbón, 9,6:1; #62645E sobre #E8E8E8,
 * 4,9:1) superan el 4,5:1 de 1.4.3. El lima nunca es texto ni foco sobre claro.
 *
 * Sin estilos en línea en el HTML ni asignados desde el JS (§5.4): el estado
 * visual lo cambian atributos (`hidden`, `aria-invalid`) y clases.
 */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/landing/fuentes/inter-latin-wght-normal-5.3.0.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;

  /* Marca (docs/MARCA.md §3) y los colores de la colección del Figma. */
  --lima: #d7ff00;
  --lima-pulsado: #c4eb00;
  --carbon: #111111;
  --carbon-superficie: #20211e;
  --hueso: #f7f7f5;
  --blanco: #ffffff;
  --niebla: #e8e8e8;
  --texto-suave: #62645e;
  --texto-inverso-suave: #b9bbb4;
  --borde-control: #8c8c8c;
  --error: #b4232c;

  --fuente: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --radio-control: 8px;
  --radio-tarjeta: 16px;
  --radio-hoja: 24px;

  --objetivo: 44px;
  --margen: 24px;
  --ancho-maximo: 1280px;
}

@media (min-width: 1024px) {
  :root {
    --margen: 48px;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--hueso);
  color: var(--carbon);
  font-family: var(--fuente);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

h1,
h2,
h3,
p,
ul,
ol,
figure {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* `hidden` manda sobre cualquier `display` de las clases (formulario, éxito). */
[hidden] {
  display: none !important;
}

/* Ninguna palabra se parte dentro de sí misma (§9.1, F1). */
h1,
h2,
h3,
p,
li,
label {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* --- Foco (§8.2): lima sobre carbón, carbón sobre claro --------------------- */

:focus-visible {
  outline: 2px solid var(--carbon);
  outline-offset: 2px;
}

.carbon :focus-visible {
  outline-color: var(--lima);
}

main:focus {
  outline: none;
}

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Enlace de salto (§1.2): invisible hasta que recibe el foco ------------- */

.salto {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-width: var(--objetivo);
  min-height: var(--objetivo);
  padding: 0 16px;
  border-radius: var(--radio-control);
  background: var(--lima);
  color: var(--carbon);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.salto:focus {
  transform: none;
}

.salto:focus-visible {
  outline-color: var(--carbon);
  box-shadow: 0 0 0 4px var(--lima);
}

/* --- Estructura ------------------------------------------------------------ */

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho-maximo) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.carbon {
  background: var(--carbon);
  color: var(--blanco);
}

/* --- Botones y enlaces de acción ------------------------------------------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  padding: 16px 24px;
  border: 0;
  border-radius: var(--radio-control);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton--principal {
  background: var(--lima);
  color: var(--carbon);
}

.boton--principal:hover {
  background: var(--lima-pulsado);
}

.boton[disabled],
.boton[aria-disabled='true'] {
  cursor: not-allowed;
}

.boton[disabled] {
  background: var(--niebla);
  color: var(--texto-suave);
}

.enlace-accion {
  display: inline-flex;
  align-items: center;
  min-width: var(--objetivo);
  min-height: var(--objetivo);
  font-weight: 600;
  text-decoration: none;
}

.enlace-accion:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Un enlace dentro de un párrafo también mide 44 de alto (§8.3): el relleno
   agranda la zona táctil y el margen negativo lo devuelve, así que la línea
   no se separa de las demás. */
.enlace-texto {
  display: inline-block;
  padding-block: 12px;
  margin-block: -12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Cabecera (Nav del Figma) ---------------------------------------------- */

.cabecera__fila {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 68px;
  padding-block: 12px;
}

.marca {
  display: inline-flex;
  align-items: center;
  min-height: var(--objetivo);
  margin-right: auto;
}

.marca img {
  width: 118px;
  height: auto;
}

.secciones,
.cabecera__demo {
  display: none;
}

.secciones ul {
  display: flex;
  gap: 8px;
}

.secciones a,
.entrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--objetivo);
  min-height: var(--objetivo);
  padding-inline: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-decoration: none;
  white-space: nowrap;
}

.secciones a:hover,
.entrar:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Selector de idioma «ES · EN» (§2.1). */
.idioma {
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: var(--texto-inverso-suave);
}

.idioma li {
  display: flex;
  align-items: center;
}

.idioma li + li::before {
  content: '·';
  padding-inline: 4px;
}

.idioma a {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-width: var(--objetivo);
  min-height: var(--objetivo);
  text-decoration: none;
}

.idioma a:hover {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* En móvil el Figma (L02) solo enseña el idioma al que se cambia. */
.cabecera .idioma__actual {
  display: none;
}

.cabecera .idioma li + li::before {
  content: none;
}

@media (min-width: 768px) {
  .cabecera__fila {
    gap: 16px;
    min-height: 88px;
    padding-block: 16px;
  }

  .marca img {
    width: 157px;
  }

  .secciones,
  .cabecera__demo {
    display: flex;
  }

  .cabecera .idioma__actual {
    display: flex;
  }

  .cabecera .idioma li + li::before {
    content: '·';
  }
}

@media (min-width: 1024px) {
  .cabecera__fila {
    gap: 24px;
    min-height: 120px;
    padding-block: 32px;
  }
}

/* --- Hero ------------------------------------------------------------------ */

.hero {
  /* La hoja siguiente sube 24 px sobre el hero para dibujar sus esquinas. */
  padding: 24px 0 calc(56px + var(--radio-hoja));
}

.hero__rejilla {
  display: grid;
  gap: 40px;
}

.hero__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.antetitulo {
  color: var(--lima);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1rem;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 620px;
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.acento::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 20px;
  background: var(--lima);
}

.entradilla {
  color: var(--texto-inverso-suave);
  max-width: 560px;
}

.hero__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  width: 100%;
}

.hero__acciones .boton {
  flex: 1 1 100%;
}

.hero__acciones .enlace-accion {
  display: none;
}

.hero__video {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radio-hoja);
  background: var(--carbon-superficie);
}

.hero__video video {
  grid-column: 1 / -1;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--carbon);
}

.hero__video figcaption {
  color: var(--texto-inverso-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.video__control {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 20px 8px 16px;
  border: 0;
  border-radius: 999px;
  background: var(--lima);
  color: var(--carbon);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  cursor: pointer;
}

.video__control:hover {
  background: var(--lima-pulsado);
}

.video__control[hidden] {
  display: none;
}

/* Icono dibujado con CSS: dos barras mientras se reproduce (la acción es
   pausar) y un triángulo en pausa (la acción es reproducir). */
.video__control::before {
  content: '';
  flex: none;
  width: 14px;
  height: 16px;
  margin-left: 4px;
  background:
    linear-gradient(var(--carbon), var(--carbon)) left / 5px 100% no-repeat,
    linear-gradient(var(--carbon), var(--carbon)) right / 5px 100% no-repeat;
}

.video__control[data-estado='pausado']::before {
  background: var(--carbon);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

@media (min-width: 768px) {
  .hero {
    padding-block: 48px calc(80px + var(--radio-hoja));
  }

  .hero__acciones .boton {
    flex: 0 0 auto;
    min-width: 220px;
  }

  .hero__acciones .enlace-accion {
    display: inline-flex;
    font-size: 1rem;
  }

  .hero__video {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
  }

  .video__control[hidden] + figcaption {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1024px) {
  .hero {
    padding-block: 64px calc(120px + var(--radio-hoja));
  }

  .hero__rejilla {
    grid-template-columns: minmax(0, 656fr) minmax(0, 560fr);
    align-items: center;
    gap: 64px;
  }

  .hero__texto {
    gap: 24px;
  }

  .hero h1 {
    font-size: 3.5rem;
    line-height: 4rem;
  }

  .acento::after {
    margin-top: 24px;
  }

  .hero__acciones {
    padding-top: 16px;
  }

  .hero__video {
    padding: 24px;
  }
}

/* --- Secciones claras ------------------------------------------------------ */

.seccion {
  padding-block: 48px;
}

.seccion h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.seccion__encabezado {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin-bottom: 24px;
}

.seccion__intro {
  max-width: 680px;
  color: var(--texto-suave);
}

.hoja {
  position: relative;
  margin-top: calc(-1 * var(--radio-hoja));
  border-radius: var(--radio-hoja) var(--radio-hoja) 0 0;
  background: var(--hueso);
}

.tarjetas {
  display: grid;
  gap: 16px;
}

.tarjeta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--niebla);
  border-radius: var(--radio-tarjeta);
  background: var(--blanco);
}

.tarjeta h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.tarjeta p {
  color: var(--texto-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

/* Cómo funciona */
.como-funciona {
  padding-top: 24px;
}

.pasos {
  display: grid;
}

.paso {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 4px;
  padding-block: 16px;
  border-top: 1px solid var(--niebla);
}

.paso__numero {
  display: flex;
  grid-row: span 2;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--lima);
  color: var(--carbon);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.paso h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.paso p {
  color: var(--texto-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.cifras {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  padding: 24px;
  border-radius: var(--radio-hoja);
}

.cifras h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.cifras p,
.cifras__lista span {
  color: var(--texto-inverso-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.cifras__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cifras__lista {
  display: grid;
  gap: 16px;
}

.cifras__lista li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cifras .cifra {
  color: var(--lima);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
  white-space: nowrap;
}

/* Para quién */
.para-quien {
  background: var(--niebla);
}

.roles {
  display: grid;
  gap: 16px;
}

.rol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  border: 1px solid var(--niebla);
  border-radius: var(--radio-hoja);
  background: var(--blanco);
  overflow: hidden;
}

.rol h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.rol ul {
  color: var(--texto-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.rol li {
  position: relative;
  padding-left: 16px;
}

.rol li::before {
  content: '•';
  position: absolute;
  left: 4px;
}

/* Las pantallas de la app solo en escritorio, como en L01 (en L02 no están). */
.rol__pantalla {
  display: none;
}

.origen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
  padding: 8px 0 0 20px;
  border-left: 4px solid var(--lima);
}

.origen h3 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
}

.origen p,
.aviso-idioma {
  color: var(--texto-suave);
}

.aviso-idioma {
  margin-top: 24px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .seccion {
    padding-block: 64px;
  }

  .seccion h2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .seccion__encabezado {
    gap: 12px;
    margin-bottom: 40px;
  }

  .tarjetas,
  .pasos,
  .roles {
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
  }

  .tarjetas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .roles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tarjeta {
    gap: 12px;
    padding: 32px;
  }

  .tarjeta h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .tarjeta p,
  .paso p,
  .rol ul {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .paso {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-block: 24px 0;
    border-top: 2px solid var(--carbon);
  }

  .paso__numero {
    width: 40px;
    height: 40px;
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .paso h3 {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }

  .cifras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 48px;
    margin-top: 40px;
    padding: 40px 48px;
  }

  .cifras__lista {
    display: contents;
  }

  .cifras .cifra {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .rol {
    gap: 12px;
    padding: 40px 40px 0;
  }

  .rol h3 {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .rol ul {
    padding-bottom: 40px;
  }
}

@media (min-width: 1024px) {
  .seccion {
    padding-block: 96px;
  }

  .hoja {
    padding-bottom: 64px;
  }

  .como-funciona {
    padding-block: 64px 96px;
  }

  .rol ul {
    padding-bottom: 12px;
  }

  .rol__pantalla {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 300px;
    padding-top: 24px;
    overflow: hidden;
  }

  .rol__pantalla img {
    border: 1px solid var(--niebla);
    border-radius: 24px 24px 0 0;
  }

  .rol__pantalla--movil img {
    width: 234px;
  }

  .rol__pantalla--escritorio img {
    width: 475px;
    border-radius: 16px 16px 0 0;
  }

  .origen {
    margin-top: 40px;
    padding-top: 16px;
  }
}

/* --- Demo (W40: carbón a un lado, formulario en la hoja clara) -------------- */

.demo {
  padding-block: 56px;
}

.demo__rejilla {
  display: grid;
  gap: 24px;
}

.demo__texto {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo__texto h2 {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2rem;
}

.demo__texto p {
  max-width: 480px;
  color: var(--texto-inverso-suave);
}

.demo__texto .acento::after {
  display: none;
}

.demo__hoja {
  padding: 24px;
  border-radius: var(--radio-hoja);
  background: var(--hueso);
  color: var(--carbon);
}

.demo__hoja :focus-visible {
  outline-color: var(--carbon);
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.formulario__instruccion,
.formulario__privacidad,
.campo__ayuda {
  color: var(--texto-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.campo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.campo label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.campo input,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-control);
  background: var(--blanco);
  color: var(--carbon);
  font: inherit;
  font-size: 1rem;
  line-height: 1.5rem;
}

.campo textarea {
  min-height: 112px;
  resize: vertical;
}

.campo [aria-invalid='true'] {
  border: 2px solid var(--error);
  padding: 10px 15px;
}

.campo__error,
.formulario__alerta {
  color: var(--error);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
}

.campo__error:empty,
.formulario__alerta:empty {
  display: none;
}

.trampa {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formulario .boton {
  width: 100%;
}

.exito {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exito h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.demo noscript p {
  margin-top: 16px;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

@media (min-width: 768px) {
  .demo {
    padding-block: 80px;
  }

  .demo__hoja {
    padding: 40px;
  }

  .formulario {
    gap: 20px;
  }

  .demo__texto h2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }

  .demo__texto {
    gap: 24px;
  }

  .demo__texto .acento::after {
    display: block;
    margin-top: 24px;
  }
}

@media (min-width: 1024px) {
  .demo {
    padding-block: 120px;
  }

  .demo__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
    align-items: center;
    gap: 80px;
  }
}

/* --- Páginas legales ------------------------------------------------------- */

.legal {
  padding-block: 40px 64px;
}

.legal h1 {
  font-size: 2rem;
  font-weight: 700;
  line-height: 2.5rem;
}

.legal__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 720px;
}

.legal__cuerpo h2 {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

.legal__cuerpo p,
.legal__cuerpo li {
  color: var(--texto-suave);
}

.legal__cuerpo ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 20px;
  list-style: disc;
}

.legal__aviso {
  padding: 16px;
  border-left: 4px solid var(--carbon);
  background: var(--blanco);
  color: var(--carbon);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

[data-pendiente] {
  font-style: italic;
}

@media (min-width: 1024px) {
  .legal {
    padding-block: 64px 96px;
  }
}

/* --- Pie ------------------------------------------------------------------- */

.pie {
  border-top: 1px solid var(--carbon-superficie);
}

.pie__fila {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding-block: 32px 40px;
  color: var(--texto-inverso-suave);
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.pie .marca img {
  width: 118px;
}

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  column-gap: 12px;
}

.pie__enlaces a,
.pie__contacto {
  display: inline-flex;
  align-items: center;
  min-width: var(--objetivo);
  min-height: var(--objetivo);
  text-decoration: none;
}

.pie__enlaces a:hover,
.pie__contacto:hover {
  color: var(--blanco);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 12px;
}

.pie .idioma {
  font-weight: 400;
}

/* En móvil el Figma (L02) pone «© 2026 FASTIK · ES · EN» en una línea. */
.pie__legal p {
  order: -1;
}

@media (min-width: 1024px) {
  .pie__fila {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding-block: 32px 40px;
  }

  .pie .marca {
    margin-right: 0;
  }

  .pie .marca img {
    width: 131px;
  }

  .pie__lema {
    margin-right: auto;
  }

  .pie__legal p {
    order: 0;
  }

  .pie__enlaces,
  .pie__legal {
    column-gap: 32px;
  }
}