/* App de Dale. Tokens de la marca según docs/DIRECCION-ARTISTICA.md (v3). Mobile-first. */
:root {
  color-scheme: light;
  --papel: #fbfbf8;
  --grafito: #1f2328;
  --grafito-suave: #50565f;
  --carbonico: #2b3da6;
  --carbonico-oscuro: #1f2e85;
  --carbonico-noche: #18226b;
  --carbonico-tinte: #eef1fa;
  --sobre-azul: #dce3ff;
  --renglon: #ccd5ec;
  --verde-si: #4be08f;
  --verde-tinta: #13804a;
  --error: #b42318;

  --fuente: "Archivo", system-ui, -apple-system, sans-serif;
  --t-chico: 0.9375rem;
  --t-texto: 1.0625rem;
  --t-medio: 1.3125rem;
  --t-grande: 1.75rem;

  --margen: 1rem;
  --radio: 6px;
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: var(--t-texto);
  line-height: 1.5;
  color: var(--grafito);
  background: var(--papel);
}

h1,
p {
  margin: 0;
}

[hidden] {
  display: none !important;
}

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

/* Barra superior con la marca */
.barra {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: max(0.75rem, env(safe-area-inset-top)) var(--margen) 0.75rem;
  background: var(--carbonico);
  color: #fff;
}

.barra :focus-visible {
  outline-color: #fff;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.logo__marca {
  width: 2rem;
  height: 2rem;
  flex: none;
}

.logo__burbuja {
  fill: var(--verde-si);
}

.logo__tilde {
  fill: none;
  stroke: var(--grafito);
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.logo__nombre {
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1;
}

.barra__salir {
  min-height: 44px;
  padding: 0 0.75rem;
  border: 2px solid rgb(255 255 255 / 0.6);
  border-radius: var(--radio);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: var(--t-chico);
  font-weight: 600;
  cursor: pointer;
}

/* Pantallas */
.pantalla {
  max-width: 36rem;
  margin: 0 auto;
  padding: 1.5rem var(--margen) 3rem;
}

.pantalla h1 {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1.15;
}

.cargando {
  color: var(--grafito-suave);
}

.tarjeta {
  display: grid;
  gap: 1rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border: 1px solid var(--renglon);
  border-radius: 10px;
  background: #fff;
}

.vacio {
  display: grid;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 1.5rem 1.25rem;
  border: 2px dashed var(--renglon);
  border-radius: 10px;
}

.nota {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.error {
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--error);
}

.error:empty {
  display: none;
}

/* Formularios */
.campo {
  display: grid;
  gap: 0.375rem;
}

.campo label {
  font-weight: 600;
  font-size: var(--t-chico);
}

.campo input {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--grafito-suave);
  border-radius: var(--radio);
  background: #fff;
  color: var(--grafito);
  font: inherit;
}

.campo input:focus-visible {
  border-color: var(--carbonico);
}

#codigo {
  font-size: var(--t-medio);
  letter-spacing: 0.2em;
  font-variant-numeric: tabular-nums;
}

/* Botones */
.boton {
  min-height: 48px;
  padding: 0.625rem 1.25rem;
  border: 2px solid var(--carbonico);
  border-radius: var(--radio);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.boton--principal {
  background: var(--carbonico);
  color: #fff;
}

.boton--principal:hover {
  background: var(--carbonico-oscuro);
  border-color: var(--carbonico-oscuro);
}

.boton:disabled {
  opacity: 0.6;
  cursor: progress;
}

.enlace {
  justify-self: start;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--carbonico);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.logo {
  color: inherit;
  text-decoration: none;
}

h2 {
  margin: 0;
}

/* Inicio: accesos a Mi negocio y Mis precios */
.accesos {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.acceso {
  display: grid;
  gap: 0.125rem;
  padding: 1rem 1.25rem;
  border: 2px solid var(--renglon);
  border-radius: 10px;
  background: #fff;
  color: var(--grafito);
  text-decoration: none;
}

.acceso:hover {
  border-color: var(--carbonico);
}

.acceso__titulo {
  font-weight: 700;
  font-size: var(--t-medio);
  font-stretch: 112%;
  color: var(--carbonico);
}

.acceso__detalle {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.nota--pie {
  margin-top: 2rem;
}

.volver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-bottom: 0.25rem;
  color: var(--carbonico);
  font-weight: 600;
  text-underline-offset: 0.2em;
}

.volver::before {
  content: "‹";
  margin-right: 0.375rem;
  font-size: 1.4em;
  line-height: 1;
}

.tarjeta__titulo {
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 112%;
}

.estado {
  font-size: var(--t-chico);
  font-weight: 600;
  color: var(--verde-tinta);
}

.estado:empty {
  display: none;
}

/* Campos extra */
.campo select,
.campo textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--grafito-suave);
  border-radius: var(--radio);
  background: #fff;
  color: var(--grafito);
  font: inherit;
}

.campo textarea {
  resize: vertical;
}

.campo select:focus-visible,
.campo textarea:focus-visible {
  border-color: var(--carbonico);
}

.campo-fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.acciones-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.boton--secundario {
  background: transparent;
  color: var(--carbonico);
}

.boton--archivo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.boton--archivo:focus-within {
  outline: 3px solid var(--carbonico);
  outline-offset: 2px;
}

.enlace--peligro {
  color: var(--error);
}

/* Logo del negocio */
.logo-carga {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-carga__vista {
  display: grid;
  place-items: center;
  width: 5.5rem;
  height: 5.5rem;
  flex: none;
  border: 2px dashed var(--renglon);
  border-radius: 10px;
  background: var(--papel);
  overflow: hidden;
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.logo-carga__vista img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-carga__acciones {
  display: grid;
  gap: 0.25rem;
  justify-items: start;
}

/* Lista de precios */
.lista-precios {
  display: grid;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.precio-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--renglon);
}

.precio-item__descripcion {
  font-weight: 600;
}

.precio-item__monto {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
  font-variant-numeric: tabular-nums;
}

.precio-item__acciones {
  display: flex;
  gap: 1rem;
  flex: none;
}

/* ---------- F2: presupuestos ---------- */
.encabezado {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.encabezado .boton {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.lista-presu {
  display: grid;
  gap: 0.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

.presu-item {
  display: grid;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--renglon);
  border-radius: 10px;
  background: #fff;
  color: var(--grafito);
  text-decoration: none;
}

.presu-item:hover {
  border-color: var(--carbonico);
}

.presu-item__fila {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.presu-item__titulo {
  font-weight: 700;
}

.presu-item__detalle {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.presu-item__total {
  font-weight: 700;
  color: var(--grafito);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Estados: texto siempre presente, el color acompaña */
.estado-chip {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  background: #eceef2;
  color: var(--grafito);
}

.estado-chip--enviado,
.estado-chip--visto {
  background: var(--carbonico-tinte);
  color: var(--carbonico-oscuro);
}

.estado-chip--aceptado {
  background: #d9f2e3;
  color: #0f6b3d;
}

.estado-chip--cambios {
  background: #fff1d6;
  color: #7a4b00;
}

.estado-chip--rechazado,
.estado-chip--vencido {
  background: #fde4e1;
  color: #8f1d14;
}

/* Mi negocio: portada del PDF */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: 44px;
  font-size: var(--t-chico);
}

.casilla input {
  width: 1.375rem;
  height: 1.375rem;
  margin: 0.125rem 0 0;
  accent-color: var(--carbonico);
  flex: none;
}

.colores {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.color-opcion {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.25rem;
  min-width: 44px;
  font-size: 0.8125rem;
  color: var(--grafito-suave);
}

.color-opcion input {
  position: absolute;
  opacity: 0;
}

.color-opcion span {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--renglon);
}

.color-opcion input:checked + span {
  box-shadow: 0 0 0 3px var(--grafito);
}

.color-opcion input:focus-visible + span {
  outline: 3px solid var(--carbonico);
  outline-offset: 3px;
}

/* Editor */
.grupo {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.grupo legend {
  padding: 0;
  margin-bottom: 0.5rem;
  font-weight: 800;
  font-stretch: 112%;
  font-size: var(--t-medio);
}

.partidas {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: partida;
}

.partida {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--renglon);
  border-radius: var(--radio);
  background: var(--papel);
}

.partida .campo--descripcion {
  grid-column: 1 / -1;
}

.partida__quitar {
  align-self: end;
  justify-self: end;
}

.totales {
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  background: var(--carbonico-tinte);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Detalle */
.acciones-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1rem 0;
}

.acciones-detalle .boton {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.boton--whatsapp {
  border-color: var(--verde-tinta);
  background: var(--verde-tinta);
  color: #fff;
}

.comentario {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid #b26b00;
  background: #fff8ea;
}

/* La hoja (talonario) */
.hoja {
  position: relative;
  padding: 1.75rem 1.25rem 1.25rem;
  background: #fff;
  box-shadow: 0 1px 0 #cfd3da, 0 2px 4px rgb(31 35 40 / 0.14);
}

.hoja::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 10px;
  background: radial-gradient(circle at 7px 0, var(--papel) 3.5px, transparent 4px) 0 0 / 14px 10px repeat-x;
}

.hoja__cabecera {
  display: grid;
  gap: 0.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--carbonico);
}

.hoja__emisor {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hoja__logo {
  width: 3.5rem;
  height: 3.5rem;
  object-fit: contain;
}

.hoja__negocio {
  font-weight: 700;
}

.hoja__dato,
.hoja__trabajo {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.hoja__titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: var(--t-medio);
  font-weight: 700;
  font-stretch: 112%;
  color: var(--carbonico);
}

.hoja__numero {
  font-size: var(--t-chico);
  font-weight: 600;
  font-stretch: 100%;
  font-variant-numeric: tabular-nums;
}

.hoja__cliente {
  margin-top: 0.25rem;
  font-weight: 600;
}

.hoja__partidas {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.hoja__partidas td,
.hoja__partidas th {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--renglon);
  vertical-align: top;
  text-align: left;
  font-weight: 400;
}

.hoja__partidas td:last-child {
  padding-left: 1rem;
  text-align: right;
  white-space: nowrap;
}

.hoja__detalle {
  display: block;
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.hoja__partidas tfoot th,
.hoja__partidas tfoot td {
  border-bottom: 0;
}

.hoja__subtotal th,
.hoja__subtotal td {
  font-size: var(--t-chico);
  padding: 0.25rem 0;
}

.hoja__total th,
.hoja__total td {
  padding-top: 0.75rem;
  font-size: var(--t-medio);
  font-weight: 700 !important;
}

.hoja__rubro th {
  padding-top: 0.875rem;
  font-weight: 700 !important;
  color: var(--carbonico);
}

.hoja__subtotal-rubro th,
.hoja__subtotal-rubro td {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.hoja__subtotal-rubro td {
  font-weight: 600;
}

/* Portada opcional: solo al imprimir o guardar como PDF. */
.hoja__portada {
  display: none;
}

.hoja__validez {
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

.hoja__condiciones {
  margin-top: 1rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--renglon);
  font-size: var(--t-chico);
  white-space: pre-line;
}

.sello {
  position: absolute;
  top: 4.5rem;
  right: 1rem;
  display: grid;
  justify-items: center;
  padding: 0.25rem 0.75rem;
  border: 3px solid var(--verde-tinta);
  border-radius: 8px;
  outline: 1px solid var(--verde-tinta);
  outline-offset: 2px;
  background: rgb(255 255 255 / 0.9);
  color: var(--verde-tinta);
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 125%;
  line-height: 1.1;
  transform: rotate(-10deg);
}

.sello small {
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 100%;
}

/* Página del cliente */
.cuerpo-cliente {
  background: var(--carbonico-tinte);
}

.respuesta {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-radius: 10px;
  background: #fff;
}

.respuesta__titulo {
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 112%;
}

.respuesta__botones {
  display: grid;
  gap: 0.5rem;
}

.boton--aceptar {
  border-color: var(--verde-tinta);
  background: var(--verde-tinta);
  color: #fff;
  font-size: var(--t-medio);
}

.resultado {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: #fff;
  font-weight: 600;
}

.pie-cliente {
  padding: 1rem var(--margen) 2rem;
  text-align: center;
  font-size: var(--t-chico);
  color: var(--grafito-suave);
}

/* PDF: al imprimir queda solo la hoja */
@media print {
  @page {
    margin: 12mm;
  }
  body,
  .cuerpo-cliente {
    background: #fff;
  }
  .barra,
  .volver,
  .acciones-detalle,
  .respuesta,
  .resultado,
  .estado,
  .comentario,
  .pie-cliente,
  [data-detalle-estado] {
    display: none !important;
  }
  .pantalla {
    max-width: none;
    padding: 0;
  }
  .hoja {
    box-shadow: none;
  }
  .hoja::before {
    display: none;
  }
  .hoja__portada {
    --marca: var(--carbonico);
    display: flex;
    flex-direction: column;
    min-height: 235mm; /* entra en A4 y en carta, con los márgenes de 12 mm */
    break-after: page;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
  .portada__banda {
    display: grid;
    align-content: start;
    gap: 0.5rem;
    min-height: 95mm;
    padding: 16mm 14mm;
    background: var(--marca);
    color: #fff;
  }
  .portada__logo {
    width: 22mm;
    height: 22mm;
    object-fit: contain;
    padding: 2mm;
    border-radius: 4px;
    background: #fff;
  }
  .portada__negocio {
    font-size: 26pt;
    font-weight: 700;
    line-height: 1.1;
  }
  .portada__cuerpo {
    display: grid;
    gap: 2mm;
    padding: 18mm 14mm;
  }
  .portada__titulo {
    font-size: 34pt;
    font-weight: 700;
    color: var(--marca);
  }
  .portada__numero,
  .portada__trabajo,
  .portada__etiqueta,
  .portada__dato-suave {
    color: var(--grafito-suave);
  }
  .portada__numero {
    margin-bottom: 8mm;
    font-weight: 700;
  }
  .portada__cliente {
    font-size: 18pt;
    font-weight: 700;
  }
  .portada__trabajo {
    margin-bottom: 8mm;
    font-size: 14pt;
  }
  .portada__total {
    font-size: 28pt;
    font-weight: 700;
  }
}

/* Dictado con IA */
.dictado {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: 10px;
  background: var(--carbonico-tinte);
}

.dictado label {
  font-weight: 700;
}

.dictado textarea {
  width: 100%;
  min-height: 5.5rem;
  padding: 0.5rem 0.75rem;
  border: 2px solid var(--grafito-suave);
  border-radius: var(--radio);
  background: #fff;
  color: var(--grafito);
  font: inherit;
  resize: vertical;
}

.dictado textarea:focus-visible {
  border-color: var(--carbonico);
}

/* ---------- F4: seguimiento ---------- */
.resumen-mes {
  display: grid;
  margin-top: 1rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  background: var(--carbonico);
  color: #fff;
}

.resumen-mes__etiqueta {
  font-size: var(--t-chico);
  color: var(--sobre-azul);
}

.resumen-mes__monto {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}

.resumen-mes__cuenta {
  font-size: var(--t-chico);
  color: var(--sobre-azul);
}

.subtitulo {
  margin-top: 1.75rem;
  font-size: var(--t-medio);
  font-weight: 800;
  font-stretch: 112%;
}

.bloque-seguimiento .nota {
  margin-top: 0.125rem;
}

.lista-seguimiento {
  display: grid;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}

.seguimiento-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 2px solid #f0d9a8;
  border-radius: 10px;
  background: #fff8ea;
}

.bloque-seguimiento--vencidos .seguimiento-item {
  border-color: #f3c7c1;
  background: #fff3f1;
}

.seguimiento-item__texto {
  display: grid;
  min-width: 0;
  color: var(--grafito);
  text-decoration: none;
}

.boton--chico {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.375rem 0.875rem;
  font-size: var(--t-chico);
  text-decoration: none;
}

/* ---------- F5: acceso y pase ---------- */
.aviso-acceso {
  margin-top: 1rem;
  padding: 0.625rem 1rem;
  border-radius: var(--radio);
  background: var(--carbonico-tinte);
  font-size: var(--t-chico);
}

.aviso-acceso a {
  color: var(--carbonico);
  font-weight: 700;
  text-underline-offset: 0.2em;
}

.aviso-acceso--ok {
  background: #d9f2e3;
  color: #0f6b3d;
}

.aviso-acceso--fin {
  background: #fff1d6;
  color: #7a4b00;
}

.bajada-app {
  margin-top: 0.5rem;
  color: var(--grafito-suave);
}

.pases {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

@media (min-width: 30rem) {
  .pases {
    grid-template-columns: 1fr 1fr;
  }
}

.pase {
  display: grid;
  gap: 0.25rem;
  padding: 1.25rem;
  border: 2px solid var(--renglon);
  border-radius: 10px;
  background: #fff;
}

.pase--destacado {
  border-color: var(--carbonico);
}

.pase__titulo {
  font-size: var(--t-texto);
  font-weight: 700;
}

.pase__monto {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
}

.pase .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
  text-decoration: none;
}

.pase .boton[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.aviso-email {
  margin-top: 1.25rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--carbonico);
  background: #fff;
}

/* ---------- W1: conectar WhatsApp ---------- */
.whatsapp .boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.whatsapp__codigo {
  display: grid;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--radio);
  background: #d9f2e3;
}

.whatsapp__mensaje {
  font-size: var(--t-grande);
  font-weight: 800;
  font-stretch: 112%;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  user-select: all;
}