/* wordmark.css — El wordmark "regulación": anillos + Cormorant minúsculas.
   Fuente: Regulacion Wordmark.dc.html (rebranding 2026).

   DOS variantes (regla dura del brandbook — nunca se mezclan):
   .ara-wordmark        FIJA (1a) — un solo tono, verde nopal/mar. Para TODO
                         encabezado, pie de página, firma, favicon, impresión.
   .ara-wordmark-viva   VIVA (1c) — las 5 vocales de "regulación" (e·u·a·i·ó)
                         se encienden en secuencia y vuelven al verde. SOLO
                         splash, onboarding, login o estados de carga — nunca
                         fija en un encabezado. Se apaga con
                         prefers-reduced-motion (queda como la fija).

   Uso viva: envolver cada vocal con <span class="v-e">, <span class="v-u">, etc.
   El helper wordmark-vivo.js hace el envolvido automático a partir del texto. */

.ara-wordmark {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  color: var(--mar, #1F3A4A);
  text-transform: lowercase;
  letter-spacing: .01em;
}

.ara-wordmark-viva {
  font-family: var(--serif, "Cormorant Garamond", serif);
  font-weight: 400;
  text-transform: lowercase;
  letter-spacing: .01em;
}
/* 8-ago-2026 (Adán, tras verlo publicado): la letra se "perdía" al cambiar de color —
   sin nada que ancle su forma, un relleno claro sobre fondo claro (o viceversa) se
   volvía casi invisible a media transición. Un contorno delgado y FIJO en el tono
   base resuelve esto solo: el borde nunca anima, solo el relleno — la letra se sigue
   viendo aunque su color esté cruzando por un tono de bajo contraste. */
.ara-wordmark-viva .v-e, .ara-wordmark-viva .v-u, .ara-wordmark-viva .v-a,
.ara-wordmark-viva .v-i, .ara-wordmark-viva .v-o {
  color: var(--mar, #1F3A4A);
  -webkit-text-stroke: .25px var(--mar, #1F3A4A);
  text-stroke: .25px var(--mar, #1F3A4A);
}

@keyframes ara-v-e { 0%, 74%, 100% { color: var(--mar, #1F3A4A); } 20%, 62% { color: #F3B38D; } }
@keyframes ara-v-u { 0%, 74%, 100% { color: var(--mar, #1F3A4A); } 20%, 62% { color: #9ED7CE; } }
@keyframes ara-v-a { 0%, 74%, 100% { color: var(--mar, #1F3A4A); } 20%, 62% { color: #C16F4A; } }
@keyframes ara-v-i { 0%, 74%, 100% { color: var(--mar, #1F3A4A); } 20%, 62% { color: #F1D477; } }
@keyframes ara-v-o { 0%, 74%, 100% { color: var(--mar, #1F3A4A); } 20%, 62% { color: #C8BDE7; } }

  .ara-wordmark-viva.ara-animar .v-e { animation: ara-v-e 7s ease-in-out infinite; }
  .ara-wordmark-viva.ara-animar .v-u { animation: ara-v-u 7s ease-in-out infinite; }
  .ara-wordmark-viva.ara-animar .v-a { animation: ara-v-a 7s ease-in-out infinite; }
  .ara-wordmark-viva.ara-animar .v-i { animation: ara-v-i 7s ease-in-out infinite; }
  .ara-wordmark-viva.ara-animar .v-o { animation: ara-v-o 7s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .ara-wordmark-viva.ara-animar .v-e, .ara-wordmark-viva.ara-animar .v-u, .ara-wordmark-viva.ara-animar .v-a, .ara-wordmark-viva.ara-animar .v-i, .ara-wordmark-viva.ara-animar .v-o { animation: none; }
}

/* ── Turno 2 (aprobado por Adán, 8-ago) — variante 2b "Las capas restantes": los
   anillos TAMBIÉN cambian de color, entrando medio compás después que las vocales
   (mismos 7s, misma curva, mismo retorno al verde). rB1=exterior/energía,
   rB2=medio/acción, rB3=interior/descanso. -c = sobre fondo oscuro (parte de crema).
   Vive en splash, onboarding, LOGIN y HEADER — nunca en favicon/impresión/tamaños
   chicos (ahí el isotipo va sólido, sin animación; ver .ara-anillos-viva). */
@keyframes ara-rB1  { 0%, 74%, 100% { fill: var(--mar, #2F4B3A); } 20%, 62% { fill: #F3B38D; } }
@keyframes ara-rB2  { 0%, 74%, 100% { fill: var(--mar, #2F4B3A); } 20%, 62% { fill: #C16F4A; } }
@keyframes ara-rB3  { 0%, 74%, 100% { fill: var(--mar, #2F4B3A); } 20%, 62% { fill: #C8BDE7; } }
@keyframes ara-rB1c { 0%, 74%, 100% { fill: #F6F1E7; } 20%, 62% { fill: #F3B38D; } }
@keyframes ara-rB2c { 0%, 74%, 100% { fill: #F6F1E7; } 20%, 62% { fill: #C16F4A; } }
@keyframes ara-rB3c { 0%, 74%, 100% { fill: #F6F1E7; } 20%, 62% { fill: #C8BDE7; } }
  .ara-anillos-viva.ara-animar .rb1 { animation: ara-rB1 7s ease-in-out infinite; }
  .ara-anillos-viva.ara-animar .rb2 { animation: ara-rB2 7s ease-in-out infinite; }
  .ara-anillos-viva.ara-animar .rb3 { animation: ara-rB3 7s ease-in-out infinite; }
  .ara-anillos-viva.ara-animar.ara-sobre-oscuro .rb1 { animation-name: ara-rB1c; }
  .ara-anillos-viva.ara-animar.ara-sobre-oscuro .rb2 { animation-name: ara-rB2c; }
  .ara-anillos-viva.ara-animar.ara-sobre-oscuro .rb3 { animation-name: ara-rB3c; }
@media (prefers-reduced-motion: reduce) {
  .ara-anillos-viva.ara-animar .rb1 { animation: none; }
  .ara-anillos-viva.ara-animar .rb2 { animation: none; }
  .ara-anillos-viva.ara-animar .rb3 { animation: none; }
  .ara-anillos-viva.ara-animar.ara-sobre-oscuro .rb1 { animation: none; }
  .ara-anillos-viva.ara-animar.ara-sobre-oscuro .rb2 { animation: none; }
  .ara-anillos-viva.ara-animar.ara-sobre-oscuro .rb3 { animation: none; }
}
.ara-anillos-viva:not(.ara-animar) .rb1, .ara-anillos-viva:not(.ara-animar) .rb2, .ara-anillos-viva:not(.ara-animar) .rb3 { fill: var(--mar, #2F4B3A); }
.ara-anillos-viva.ara-sobre-oscuro:not(.ara-animar) .rb1, .ara-anillos-viva.ara-sobre-oscuro:not(.ara-animar) .rb2, .ara-anillos-viva.ara-sobre-oscuro:not(.ara-animar) .rb3 { fill: #F6F1E7; }