/*
  La portada, encima de `pagina.css` (rediseño del 30/09/2026).

  ── QUÉ HAY AQUÍ Y QUÉ NO ────────────────────────────────────────────────────

  `pagina.css` es la hoja de TODAS las páginas públicas: la ayuda, lo legal, el
  estado, la comparación. Esto es solo de la portada, y por eso vive aparte: el
  rediseño no le mueve nada a las otras veinticinco, y ellas no descargan lo
  que no usan. Los tokens (colores, espacios, radios) siguen siendo los de
  `pagina.css`; aquí solo se añaden los que la portada necesita y las demás no.

  Todo va dentro de `@media screen`. La página impresa es el documento de una
  hoja que ya está medido (criterio 8 de `e2e/criterios.test.ts`), y su hoja
  es la de `pagina.css`: que un relleno de aquí se colara en el papel es
  justo lo que pasaba dos a dos hojas.

  ── LA DIRECCIÓN ─────────────────────────────────────────────────────────────

  Blanco, negro y el rojo de la marca, y nada más de color. El rojo se gasta
  en tres sitios: la acción principal, la palabra en cursiva del titular y los
  iconos. Una banda negra para el asistente y el cierre, que son los dos
  momentos en que la página cambia de tono. Titulares en Geist, la letra de
  la consola; una sola cursiva de Instrument Serif, en el titular.

  Los rellenos de sección y las separaciones de rejilla son múltiplos de 8
  (criterio 4) y el contraste de cada texto está medido contra su fondo
  opaco (criterio 5): por eso cada banda oscura tiene `background-color`
  sólido, aunque encima lleve un degradado.
*/

@media screen {
  :root {
    --titular: "Geist", var(--sans);
    --tinta: #0c0c0e;
    --tinta-borde: #27272a;
    --tinta-texto: #fafafa;
    --tinta-suave: #a1a1aa;
    --icono-fondo: color-mix(in srgb, var(--rojo) 8%, var(--fondo));
    --icono-borde: color-mix(in srgb, var(--rojo) 20%, transparent);
    --sombra-ventana:
      0 1px 2px rgb(12 12 14 / 6%), 0 32px 64px -24px rgb(12 12 14 / 32%);
  }
  @media (prefers-color-scheme: dark) {
    :root {
      /* En oscuro la página YA es negra: la banda sube un escalón para que
         se siga viendo que es otra cosa. */
      --tinta: #151518;
      --sombra-ventana:
        0 0 0 1px rgb(255 255 255 / 6%), 0 32px 64px -24px rgb(0 0 0 / 70%);
    }
  }

  /* ── La letra ─────────────────────────────────────────────────────────── */

  h1,
  h2,
  h3 {
    font-family: var(--titular);
    font-weight: 600;
  }
  h1 {
    font-size: clamp(2.5rem, 6.4vw, 4.75rem);
    letter-spacing: -0.045em;
    line-height: 1.02;
  }
  /* La firma: lo que la consola ve y un chat genérico no. */
  h1 em {
    font-family: var(--display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.08em;
    letter-spacing: -0.01em;
    color: var(--rojo-texto);
    padding-right: 0.04em;
  }
  h2 {
    font-size: clamp(1.875rem, 3.6vw, 2.75rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
  }
  h3 {
    font-size: 1.0625rem;
    letter-spacing: -0.015em;
    line-height: 1.3;
  }

  /* ── La cabecera ──────────────────────────────────────────────────────── */

  .cabecera {
    padding: 12px 0;
  }
  .cabecera-nav {
    display: none;
  }
  .cabecera-acciones {
    display: flex;
    align-items: center;
    gap: var(--e-1);
  }
  .cabecera .boton {
    min-height: 40px;
    padding: 0 var(--e-2);
    font-size: var(--t-sm);
  }
  .cabecera-probar {
    display: none;
  }
  @media (min-width: 640px) {
    .cabecera-probar {
      display: inline-flex;
    }
  }
  @media (min-width: 960px) {
    .cabecera-nav {
      display: flex;
      gap: 4px;
    }
    .cabecera-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 0 12px;
      border-radius: 8px;
      color: var(--texto-suave);
      font-size: var(--t-sm);
      font-weight: 500;
      text-decoration: none;
      transition:
        color 150ms ease,
        background-color 150ms ease;
    }
    .cabecera-nav a:hover {
      color: var(--texto);
      background: var(--fondo-alt);
    }
  }

  /* ── El titular y la consola en movimiento ────────────────────────────── */

  .portada {
    position: relative;
    overflow-x: clip;
    padding-top: var(--e-5);
    /* Debajo viene la franja de la prueba, que ya separa: con los 112 de
       siempre quedaba un hueco que se leía como el final de la página. */
    padding-bottom: var(--e-5);
  }
  @media (min-width: 768px) {
    .portada {
      padding-top: var(--e-6);
    }
  }
  /* La rejilla de puntos del fondo, que se desvanece hacia abajo: el papel
     milimetrado de quien dibuja una interfaz. Sin imagen: es un degradado,
     así que no se descarga nada (criterio 9). */
  .portada::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 720px;
    background-image: radial-gradient(
      circle at 1px 1px,
      color-mix(in srgb, var(--texto) 14%, transparent) 1px,
      transparent 0
    );
    background-size: 24px 24px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000 30%, transparent 75%);
    pointer-events: none;
  }
  .portada > .envoltura {
    position: relative;
  }
  .portada-texto {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .portada-texto h1 {
    max-width: 15ch;
  }
  .pastilla {
    display: inline-flex;
    align-items: center;
    gap: var(--e-1);
    margin-bottom: var(--e-3);
    padding: 6px 14px;
    border: 1px solid var(--borde);
    border-radius: 999px;
    background: var(--fondo);
    color: var(--texto-suave);
    font-size: var(--t-sm);
    font-weight: 500;
  }
  .pastilla::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--rojo);
  }
  .portada-sub {
    margin-top: var(--e-3);
    max-width: 56ch;
  }
  @media (max-width: 639px) {
    .portada-sub {
      font-size: 1.125rem;
    }
  }
  .portada .acciones {
    justify-content: center;
    margin-top: 40px;
  }
  .portada-nota {
    margin-top: var(--e-2);
  }

  /* La entrada, una vez: el texto y luego la ventana. `transform` y
     `opacity` y nada más; con «reducir movimiento» no dura nada (la regla
     global de `pagina.css`). */
  .portada-texto > *,
  .portada .demostracion {
    animation: sube 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .portada-texto > :nth-child(2) {
    animation-delay: 60ms;
  }
  .portada-texto > :nth-child(3) {
    animation-delay: 120ms;
  }
  .portada-texto > :nth-child(n + 4) {
    animation-delay: 180ms;
  }
  .portada .demostracion {
    animation-delay: 260ms;
  }
  @keyframes sube {
    from {
      opacity: 0;
      transform: translateY(16px);
    }
  }

  .portada .demostracion {
    position: relative;
    max-width: 1040px;
    margin: 64px auto 0;
  }
  /* El resplandor rojo detrás de la ventana: la única luz de la página. */
  .portada .demostracion::before {
    content: "";
    position: absolute;
    inset: -64px 8% auto;
    height: 70%;
    background: radial-gradient(
      closest-side,
      color-mix(in srgb, var(--rojo) 22%, transparent),
      transparent
    );
    filter: blur(24px);
    pointer-events: none;
  }
  .ventana {
    position: relative;
    border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
    border-radius: var(--radio-caja);
    background: var(--negro);
    box-shadow: var(--sombra-ventana);
    overflow: hidden;
  }
  .ventana-barra {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 var(--e-2);
    background: #141417;
    border-bottom: 1px solid var(--tinta-borde);
  }
  .ventana-puntos {
    display: flex;
    gap: 6px;
  }
  .ventana-puntos i {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #3f3f46;
  }
  .ventana-titulo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: var(--tinta-suave);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
  }
  /* Dentro de la ventana el vídeo no lleva marco propio: el marco es ella.
     `display` NO se toca aquí: lo decide `pagina.css` según el movimiento. */
  .ventana .demostracion-movimiento,
  .ventana .demostracion-quieta {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .portada .demostracion figcaption {
    max-width: 70ch;
    margin: var(--e-2) auto 0;
    text-align: center;
  }

  /* La ficha del visitante, flotando sobre la esquina del vídeo. */
  .ficha-flotante {
    display: none;
  }
  @media (min-width: 1024px) {
    .ficha-flotante {
      position: absolute;
      left: -24px;
      bottom: 96px;
      display: grid;
      gap: 12px;
      width: 304px;
      padding: var(--e-2);
      border: 1px solid var(--borde);
      border-radius: 14px;
      background: var(--fondo);
      box-shadow: 0 24px 48px -16px rgb(12 12 14 / 30%);
      animation: flota 6s ease-in-out 1s infinite alternate;
    }
    .ficha-flotante .consola-etiqueta {
      width: 56px;
    }
  }
  @media (min-width: 1280px) {
    .ficha-flotante {
      left: -56px;
    }
  }
  @keyframes flota {
    to {
      transform: translateY(-8px);
    }
  }

  /* ── La prueba ────────────────────────────────────────────────────────── */

  section.pruebas {
    padding: var(--e-5) 0;
    border-bottom: 1px solid var(--borde);
  }
  .pruebas-texto {
    margin: 0 auto var(--e-4);
    text-align: center;
  }
  .pruebas-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .pruebas-lista li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-align: center;
    font-size: var(--t-sm);
    line-height: 1.4;
  }
  .pruebas-lista strong {
    font-family: var(--titular);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    white-space: nowrap;
  }
  @media (min-width: 900px) {
    .pruebas-lista {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0;
    }
    .pruebas-lista li + li {
      border-left: 1px solid var(--borde);
    }
  }

  /* ── Bloques comunes ──────────────────────────────────────────────────── */

  .bloque-texto {
    display: grid;
    gap: var(--e-2);
    align-content: start;
  }
  .bloque-texto h2 {
    margin-bottom: var(--e-1);
  }
  .titulo-seccion {
    max-width: 22ch;
  }
  .titulo-seccion + .rejilla,
  .bloque-texto + .rejilla {
    margin-top: var(--e-5);
  }
  .rejilla-3 {
    gap: var(--e-3);
  }
  .rejilla-4 {
    gap: var(--e-3);
  }
  @media (min-width: 640px) {
    .rejilla-4 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  @media (min-width: 1024px) {
    .rejilla-4 {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }
  @media (min-width: 768px) {
    .rejilla-arriba {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
      gap: 64px;
      align-items: start;
    }
  }

  .icono {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--icono-borde);
    border-radius: 10px;
    background: var(--icono-fondo);
    color: var(--rojo-texto);
  }
  .caja {
    box-shadow: 0 1px 2px rgb(12 12 14 / 4%);
  }
  .caja h3 {
    margin-top: 20px;
  }
  .caja p {
    margin-top: var(--e-1);
  }

  /* Las funciones: sin tarjeta, una raya encima. Seis cajas con borde
     seguidas de cuatro más se leen como un formulario. */
  .funcion {
    padding-top: var(--e-3);
    border-top: 1px solid var(--borde);
  }
  .funcion h3 {
    margin-top: var(--e-2);
  }
  .funcion p {
    margin-top: var(--e-1);
  }
  .rejilla-funciones {
    row-gap: var(--e-5);
    column-gap: var(--e-4);
  }

  .consola {
    box-shadow: var(--sombra-ventana);
  }

  /* ── El asistente: la banda negra ─────────────────────────────────────── */

  .tinta {
    background-color: var(--tinta);
    background-image: radial-gradient(
      ellipse 60% 50% at 85% 20%,
      rgb(193 18 31 / 22%),
      transparent 70%
    );
    color: var(--tinta-texto);
  }
  @media (prefers-color-scheme: dark) {
    .tinta {
      border-block: 1px solid var(--tinta-borde);
    }
  }
  .tinta p {
    color: var(--tinta-suave);
  }
  /* Rojo de la marca en fondo claro (#vente, 07/10 daba 3,07:1 con el de
     fondo negro) y el claro solo sobre la tinta. */
  .antetitulo {
    color: var(--rojo);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }
  .reglas {
    display: grid;
    gap: 20px;
    margin: var(--e-2) 0 0;
    padding: 0;
    list-style: none;
  }
  .reglas li {
    display: flex;
    gap: var(--e-2);
    color: var(--tinta-suave);
    font-size: 0.9375rem;
    line-height: 1.55;
  }
  .reglas strong {
    display: block;
    color: var(--tinta-texto);
    font-weight: 600;
  }
  .tinta .icono {
    flex-shrink: 0;
    border-color: rgb(241 91 91 / 30%);
    background: rgb(241 91 91 / 10%);
    color: var(--rojo-sobre-negro);
  }

  /* El widget dibujado: claro siempre, porque es el retrato del widget tal
     como lo ve el visitante, no una parte de esta página. Colores fijos. */
  .widget-dibujo {
    justify-self: center;
    width: 100%;
    max-width: 400px;
    margin: 0;
    border-radius: 20px;
    background: #ffffff;
    color: #0c0c0e;
    overflow: hidden;
    box-shadow:
      0 0 0 1px rgb(255 255 255 / 8%),
      0 40px 80px -24px rgb(0 0 0 / 60%);
  }
  .widget-cabecera {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--e-2) 20px;
    background: #c1121f;
    color: #ffffff;
    font-size: var(--t-sm);
    line-height: 1.35;
  }
  .widget-cara {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 999px;
    background:
      radial-gradient(circle at 36% 46%, #0c0c0e 2.5px, transparent 3px),
      radial-gradient(circle at 64% 46%, #0c0c0e 2.5px, transparent 3px),
      #ffffff;
  }
  .widget-en-linea {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #ffe4e6;
    font-size: 12px;
  }
  .widget-en-linea::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #4ade80;
  }
  .widget-hilo {
    display: grid;
    gap: 12px;
    padding: 20px;
    background: #f7f7f8;
  }
  .widget-dibujo .globo {
    max-width: 88%;
    margin: 0;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: var(--t-sm);
    line-height: 1.5;
  }
  .widget-dibujo .globo-visitante {
    justify-self: end;
    border-bottom-right-radius: 4px;
    background: #0c0c0e;
    color: #fafafa;
  }
  .widget-dibujo .globo-asistente {
    display: grid;
    gap: 10px;
    justify-self: start;
    border: 1px solid #e4e4e7;
    border-bottom-left-radius: 4px;
    background: #ffffff;
  }
  .widget-dibujo .globo-asistente p {
    color: #0c0c0e;
  }
  .producto {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: var(--e-1);
    border: 1px solid #e4e4e7;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.35;
  }
  .producto-foto {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #e4e4e7, #c4c4cc);
  }
  .producto-ficha {
    margin-left: auto;
    color: #c1121f;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
  .widget-dibujo figcaption {
    padding: 10px 20px;
    border-top: 1px solid #e4e4e7;
    color: #52525b;
    font-size: 12px;
  }

  /* ── El personaje ─────────────────────────────────────────────────────── */

  .escenario {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--e-2);
    padding: var(--e-4) var(--e-2);
    border: 1px solid var(--borde);
    border-radius: 20px;
    background: var(--fondo-alt);
  }
  .postura {
    display: grid;
    justify-items: center;
    gap: 12px;
  }
  .postura svg {
    width: 100%;
    max-width: 112px;
    overflow: visible;
  }
  .postura .cuerpo {
    fill: var(--rojo);
  }
  .postura .ojo {
    fill: #ffffff;
  }
  .postura .boca {
    fill: none;
    stroke: #ffffff;
    stroke-width: 3.5;
    stroke-linecap: round;
  }
  .postura .brazo {
    fill: none;
    stroke: var(--rojo);
    stroke-width: 7;
    stroke-linecap: round;
  }
  .postura .zeta {
    fill: var(--texto-suave);
    font-family: var(--titular);
    font-size: 16px;
    font-weight: 700;
  }
  .postura .zeta-chica {
    font-size: 11px;
  }
  .postura-saluda svg {
    animation: saluda 2.4s ease-in-out infinite;
    transform-origin: 50% 90%;
  }
  .postura-duerme svg {
    animation: respira 3.2s ease-in-out infinite;
    transform-origin: 50% 90%;
  }
  @keyframes saluda {
    0%,
    60%,
    100% {
      transform: none;
    }
    20% {
      transform: translateY(-6px) rotate(-3deg);
    }
    40% {
      transform: translateY(0) rotate(2deg);
    }
  }
  @keyframes respira {
    50% {
      transform: scale(1.03, 0.97);
    }
  }

  .integracion h3 {
    margin-top: 20px;
  }

  /* Un enlace solo en su línea: el pulgar necesita algo más que la altura de
     la letra (en un teléfono medía 19 px, y el mínimo son 24). */
  .enlace-suelto a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    font-weight: 600;
  }

  /* ── El precio ────────────────────────────────────────────────────────── */

  /* El precio centrado: es el único sitio donde se comparan dos cosas, y
     dos tarjetas a la izquierda con media pantalla vacía a la derecha
     parecían una lista a medias. */
  #prix .bloque-texto {
    justify-items: center;
    max-width: 62ch;
    margin-inline: auto;
    text-align: center;
  }
  .planes,
  .plan-notas {
    margin-inline: auto;
  }
  .plan-accion {
    display: flex;
    justify-content: center;
  }
  .planes {
    gap: var(--e-3);
    align-items: stretch;
  }
  @media (min-width: 768px) {
    .planes {
      max-width: 880px;
    }
  }
  .plan h3 {
    margin-top: 0;
    color: var(--texto-suave);
    font-size: var(--t-base);
  }
  .plan-precio {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--e-1);
    margin-top: var(--e-2);
  }
  .caja .plan-precio {
    margin-top: var(--e-2);
  }
  .plan-precio strong {
    font-family: var(--titular);
    font-size: 2.75rem;
    font-weight: 600;
    letter-spacing: -0.045em;
    line-height: 1;
  }
  .plan-precio span {
    font-size: var(--t-sm);
  }
  .plan-lista {
    display: grid;
    gap: 12px;
    margin: var(--e-3) 0 0;
    padding: var(--e-3) 0 0;
    border-top: 1px solid var(--borde);
    list-style: none;
  }
  .plan-lista li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.9375rem;
  }
  .plan-lista svg {
    flex-shrink: 0;
    margin-top: 4px;
    color: var(--rojo-texto);
  }
  .plan-destacado,
  .plan-destacado:hover {
    border-color: var(--rojo);
    background: var(--tinta);
    color: var(--tinta-texto);
    box-shadow: 0 24px 48px -24px rgb(193 18 31 / 45%);
  }
  .plan-destacado h3 {
    color: var(--tinta-texto);
  }
  .plan-destacado .suave {
    color: var(--tinta-suave);
  }
  .plan-destacado .plan-lista {
    border-top-color: var(--tinta-borde);
  }
  .plan-destacado .plan-lista svg {
    color: var(--rojo-sobre-negro);
  }
  .plan-accion {
    margin-top: var(--e-4);
  }
  .plan-notas {
    margin-top: var(--e-5);
    max-width: 880px;
  }
  @media (min-width: 768px) {
    .plan-notas {
      gap: var(--e-4);
      align-items: start;
    }
  }

  /* ── Las preguntas ────────────────────────────────────────────────────── */

  .rejilla-arriba .preguntas {
    margin-top: 0;
    border-top: 1px solid var(--borde);
  }
  .pregunta summary {
    font-family: var(--titular);
    font-size: 1.0625rem;
    font-weight: 500;
  }

  /* ── El cierre ────────────────────────────────────────────────────────── */

  .cierre {
    position: relative;
    display: grid;
    justify-items: center;
    gap: var(--e-2);
    padding: 80px var(--e-3);
    border-radius: 24px;
    background-color: var(--tinta);
    background-image: radial-gradient(
      ellipse 50% 70% at 50% 0%,
      rgb(193 18 31 / 30%),
      transparent 70%
    );
    color: var(--tinta-texto);
    text-align: center;
    overflow: hidden;
  }
  @media (prefers-color-scheme: dark) {
    .cierre {
      border: 1px solid var(--tinta-borde);
    }
  }
  .cierre h2 {
    font-size: clamp(2rem, 4.5vw, 3.25rem);
  }
  .cierre p {
    color: var(--tinta-suave);
  }
  .tinta .antetitulo {
    color: var(--rojo-sobre-negro);
  }
  /* El secundario de pagina.css lleva el texto oscuro de la página: sobre la
     tinta del cierre quedaba invisible (1,00:1). */
  .cierre .boton-secundario {
    border-color: var(--tinta-borde);
    color: var(--tinta-texto);
  }
  .cierre .boton-secundario:hover {
    border-color: var(--tinta-suave);
  }
  .cierre .acciones {
    justify-content: center;
    margin-top: var(--e-1);
  }

  /* ── El boletín ───────────────────────────────────────────────────────── */

  .rejilla-arriba .boletin-forma {
    margin-top: 0;
  }

  /* ── El pie ───────────────────────────────────────────────────────────── */

  .pie {
    padding: 64px 0 var(--e-5);
  }
  .pie-fila {
    display: grid;
    gap: 40px;
    align-items: start;
  }
  @media (min-width: 768px) {
    .pie-fila {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    }
  }
  .pie-marca {
    display: grid;
    justify-items: start;
    gap: 12px;
  }
  .pie .marca {
    border-bottom: 0;
    color: var(--texto);
    font-size: var(--t-base);
  }
  .pie .marca::after {
    display: none;
  }
  .pie-enlaces {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--e-3);
  }
  @media (min-width: 560px) {
    .pie-enlaces {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .pie-columna {
    display: grid;
    gap: 4px;
    align-content: start;
    justify-items: start;
  }
  .pie-titulo {
    margin-bottom: var(--e-1);
    color: var(--texto);
    font-weight: 600;
  }
}