/* fn-dibujos.css — los dibujitos y las fotos «polaroid» de la página de registro (Alemyr 2026-10-18: «más niña… de
   repente lleva una línea y aparece una estrellita de éxito… tipo dibujito… más divertido, más acogedor»).
   Estado por omisión = YA DIBUJADO (sin JS, con «menos movimiento» o en un lector de pantalla). Sólo con
   html.fn-mueve (sitio.js) la línea empieza vacía y se traza al entrar a la pantalla (.visto). */

/* ── la línea a mano bajo la frase y la estrellita de éxito ── */
.fn-subrayado { position: relative; display: inline-block; padding-bottom: .28em; white-space: normal; }
.fn-trazo { position: absolute; left: 0; bottom: -.05em; width: 100%; height: .42em; overflow: visible; }
.fn-trazo path { fill: none; stroke: var(--fn-amarillo); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; }
.fn-acento-claro .fn-trazo path { stroke: var(--fn-amarillo); }
/* En el remate y el cierre cada frase va en su renglón (span block en sitio.css): la línea mide lo que mide la frase. */
.fn-remate p .fn-subrayado, .fn-cierre p .fn-subrayado { display: table; margin-inline: auto; }
.fn-estrella { position: absolute; right: -1.1em; top: -.15em; width: .85em; height: .85em; overflow: visible; }
.fn-estrella path { fill: var(--fn-amarillo); stroke: var(--fn-naranja); stroke-width: 1.2; stroke-linejoin: round; }

/* ── chispas junto a la foto del héroe ── */
.fn-heroe-foto { position: relative; }
.fn-chispas { position: absolute; top: -18px; left: -26px; width: 92px; height: 92px; z-index: 2; pointer-events: none; }
.fn-chispa { fill: var(--fn-amarillo); stroke: var(--fn-naranja); stroke-width: 1.5; stroke-linejoin: round; }
.fn-chispa.c2 { fill: var(--fn-turquesa); stroke: none; }
.fn-chispa.c3 { fill: var(--fn-lima); stroke: none; }

/* ── flecha a mano que apunta al botón (sólo donde hay espacio) ── */
.fn-boton-fila { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fn-flecha { width: 70px; height: 46px; overflow: visible; transform: scaleX(1); }
.fn-flecha path { fill: none; stroke: var(--fn-turquesa-fuerte); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; }
@media (max-width: 600px) { .fn-flecha { display: none; } }

/* ── estrellitas junto a los títulos centrados (imagen de fondo: no ensucia el texto) ── */
.fn h2.fn-centro { position: relative; padding-inline: 1.6rem; }
.fn h2.fn-centro::after { content: ""; display: inline-block; width: 1.05rem; height: 1.05rem; margin-left: .45rem; vertical-align: super;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.5l2.6 6.1 6.6.6-5 4.4 1.5 6.5L12 16.7l-5.7 3.4 1.5-6.5-5-4.4 6.6-.6z' fill='%23F3BF4B' stroke='%23FF651F' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ── «Así se vive»: fotos tipo polaroid con cinta ── */
.fn-polaroids { list-style: none; padding: 0; margin: 1.75rem 0 1.25rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem 1rem; }
@media (min-width: 760px) { .fn-polaroids { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.75rem; } }
.fn-polaroid { position: relative; background: #fff; padding: .55rem .55rem 1.6rem; border-radius: 4px; box-shadow: 0 6px 18px rgba(21, 54, 81, .16);
  transform: rotate(-2.5deg); transition: transform .25s ease; }
.fn-polaroid:nth-child(even) { transform: rotate(2deg); }
.fn-polaroid:nth-child(3n) { transform: rotate(-1deg); }
.fn-polaroid::before { content: ""; position: absolute; top: -.7rem; left: 50%; width: 4.2rem; height: 1.4rem; transform: translateX(-50%) rotate(-4deg);
  background: rgba(243, 191, 75, .72); border-radius: 2px; }
.fn-polaroid:nth-child(even)::before { background: rgba(53, 169, 183, .55); transform: translateX(-50%) rotate(5deg); }
.fn-polaroid:nth-child(3n)::before { background: rgba(165, 206, 54, .65); }
.fn-polaroid a { display: block; }
.fn-polaroid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.fn-polaroid:hover, .fn-polaroid:focus-within { transform: rotate(0) scale(1.03); z-index: 1; }

/* ── «Tu facilitadora»: <picture> es contents en sitio.css; aquí la foto ocupa SU columna ── */
.fn-facilitadora picture { display: block; }

/* ── el movimiento, sólo si se puede ── */
@media (prefers-reduced-motion: no-preference) {
  html.fn-mueve [data-dibujo]:not(.visto) .fn-trazo path { stroke-dashoffset: 1; }
  html.fn-mueve [data-dibujo]:not(.visto) .fn-estrella,
  html.fn-mueve [data-dibujo]:not(.visto) .fn-chispa { transform: scale(0); }
  html.fn-mueve [data-dibujo] .fn-trazo path { transition: stroke-dashoffset .9s cubic-bezier(.6, .1, .3, 1); }
  html.fn-mueve [data-dibujo] .fn-estrella { transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) .85s; }
  html.fn-mueve [data-dibujo] .fn-chispa { transform-box: fill-box; transform-origin: center; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
  html.fn-mueve [data-dibujo] .fn-chispa.c2 { transition-delay: .15s; }
  html.fn-mueve [data-dibujo] .fn-chispa.c3 { transition-delay: .3s; }
  html.fn-mueve .fn-chispa.c1 { animation: fn-titila 3.2s ease-in-out 1.5s infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes fn-titila { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .fn-polaroid { transition: none; } }
@media (max-width: 899px) { .fn-boton-fila { justify-content: center; } }
/* En el teléfono la frase del remate y del cierre ocupa todo el ancho: la estrellita se queda adentro, al final de la línea. */
@media (max-width: 600px) { .fn-remate .fn-estrella, .fn-cierre .fn-estrella { top: auto; bottom: -.75em; right: -.1em; } }

/* Relojes (020): texto que dice cuánto falta. Sin segundos, sin animación, sin rojo de alarma. */
.fn-reloj { font-weight: 700; color: var(--fn-turquesa-texto); margin: .5rem 0; }
.fn-reloj-heroe { color: var(--fn-turquesa-texto); white-space: nowrap; }
.fn-reloj-cupos { color: var(--fn-naranja-texto); }

/* Cajitas DÍAS · HORAS · MIN (021). Sin segundos, sin parpadeo, sin rojo de alarma. */
.fn-cajitas { margin: 1rem 0; }
.fn-cajitas-titulo { font-family: var(--fuente-titulo); font-weight: 800; color: var(--fn-turquesa-texto); margin: 0 0 .45rem; font-size: 1rem; }
.fn-cajitas-fila { display: flex; gap: .55rem; }
.fn-caja { display: flex; flex-direction: column; align-items: center; min-width: 4.4rem; padding: .55rem .5rem .45rem; background: #fff;
  border: 2px solid var(--fn-turquesa); border-radius: 14px; box-shadow: 0 3px 0 var(--fn-amarillo); }
.fn-caja b { font-family: var(--fuente-titulo); font-size: 1.85rem; line-height: 1; color: var(--fn-marino); font-variant-numeric: tabular-nums; }
.fn-caja small { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--fn-tinta-suave); margin-top: .25rem; }
.fn-cajitas-pie { color: var(--fn-tinta-suave); font-size: .9375rem; margin: .45rem 0 0; }
.fn-heroe .fn-cajitas { margin-top: 1.25rem; }
@media (max-width: 899px) { .fn-heroe .fn-cajitas-fila { justify-content: center; } }