/* ==========================================================
   CobranzaOnline · Intervención "y ahora… CON INTERESES"
   Campaña lanzamiento interés por mora
   ========================================================== */
/* Fuente a mano autohospedada (carpeta fonts/). Ajusta la ruta según el pipeline de assets. */
@font-face{
  font-family: "Reenie Beanie";
  src: url("../fonts/reenie-beanie-latin-400-normal.woff2") format("woff2"),
       url("../fonts/reenie-beanie-latin-400-normal.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root{
  --co-lapiz: #4B4F58;      /* grafito del texto a mano */
  --co-rojo: #D0202E;       /* rojo de flecha y círculo */
  --co-destacador: rgba(198,241,96,0.9); /* verde destacador */
  /* Ajustes finos de posición de la nota (desktop) */
  --co-nota-right: 76px;    /* distancia desde el borde derecho del bloque de texto */
  --co-nota-top: 17px;      /* distancia bajo el final del bloque (debajo de los botones) */
  --co-flecha-alto: 210px;  /* alto de la flecha: súbelo o bájalo para que la punta llegue al círculo */
}

/* 1. El contenedor del texto del hero debe ser la referencia.
   El margen deja espacio para la nota, que va en posición absoluta. */
.co-hero-texto{ position: relative; margin-bottom: 150px; }

/* 2. Círculo alrededor de "facturas impagas" */
.co-circulo{ position: relative; white-space: nowrap; }
.co-circulo__svg{
  position: absolute;
  left: -10px; right: -31px; top: -6px; bottom: -17px;
  width: calc(100% + 30px); height: calc(100% + 20px);
  overflow: visible; pointer-events: none;
}

/* 3. Nota escrita a mano */
.co-nota{
  position: absolute;
  right: var(--co-nota-right);
  top: calc(100% + var(--co-nota-top));
  margin: 0;
  font-family: "Reenie Beanie", "Comic Sans MS", cursive;
  font-size: 60px; line-height: 1; font-weight: 400;
  color: var(--co-lapiz);
  white-space: nowrap;
  transform: rotate(-3deg);
  transform-origin: right center;
  pointer-events: none;
}
.co-nota__destacado{
  padding: 0 6px; margin: 0 -6px;
  white-space: nowrap;
  background: linear-gradient(180deg, transparent 30%, var(--co-destacador) 30%, var(--co-destacador) 92%, transparent 92%);
  border-radius: 6px 10px 8px 4px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* Flecha: nace donde termina "INTERESES" y sube hasta el círculo.
   El ancho lo ajusta un script para que la punta llegue al borde del círculo. */
.co-nota__flecha{
  position: absolute;
  right: var(--co-flecha-right, -90px);
  top: calc(30px - var(--co-flecha-alto) * 0.95);
  width: var(--co-flecha-ancho, 260px); height: var(--co-flecha-alto);
  overflow: visible;
}

/* En desktop "facturas impagas" sigue en la misma frase. */
@media (min-width: 992px){
  .co-salto{ display: none; }
}

/* La curva corta solo se usa bajo 992px. */
.co-nota__curva--corta{ display: none; }

/* 4. Bajo 992px "facturas impagas" baja a su propia línea, centrada,
   y una flecha más corta sube desde la nota hasta la base del círculo. */
@media (max-width: 991px){
  .co-hero-texto{
    display: flex;
    flex-direction: column;
    margin-bottom: 48px;
  }
  .co-hero-texto > .d-grid{ order: 2; }
  .co-nota{
    position: relative;
    right: auto;
    top: auto;
    order: 1;
    display: block;
    margin: 4px auto 14px;
    text-align: center;
    font-size: 42px;
    white-space: nowrap;
    transform: rotate(-2deg);
    transform-origin: center;
  }
  .co-circulo__svg{
    position: absolute;
    left: -22px; right: -31px; top: -6px; bottom: -17px;
    width: calc(100% + 53px); height: calc(100% + 20px);
    overflow: visible; pointer-events: none;
  }
  .co-nota__curva{ display: none; }
  .co-nota__curva--corta{ display: block; }
}

@media (max-width: 420px){
  .co-nota{ font-size: 34px; }
}

/* Accesibilidad: el texto a mano se lee igual por lectores de pantalla */
@media (prefers-reduced-motion: reduce){ .co-nota{ transform: none; } }