/* Bajo el mar — fiesta infantil de sirena: cola que sale del agua, burbujas, algas y estrellas de
   mar. Va después de kit/base.css y kit/infantil.css. Solo var(--mi-*) / var(--k-*). */

.sr-hero {
  background:
    radial-gradient(46% 24% at 100% 20%, color-mix(in srgb, var(--k-accent) 26%, transparent), transparent 70%),
    linear-gradient(color-mix(in srgb, var(--k-secondary) 85%, var(--k-bg)), color-mix(in srgb, var(--k-secondary) 40%, var(--k-bg)) 70%, var(--k-bg));
}
.sr-hero > .sr-bubbles { position: absolute; width: 30px; opacity: .55; }
.sr-bubbles--a { top: 10%; left: 10%; }
.sr-bubbles--b { top: 30%; right: 8%; width: 22px; }
@media (prefers-reduced-motion: no-preference) {
  .sr-bubbles { animation: sr-rise 6s ease-in-out infinite; }
  .sr-bubbles--b { animation-delay: -3s; }
}
@keyframes sr-rise { 50% { translate: 0 -14px; } }
.sr-frame { position: relative; width: min(58vw, 250px); margin: .6rem auto 1.4rem; }
.sr-photo { position: relative; overflow: hidden; aspect-ratio: 1; border-radius: 50%; background: var(--k-soft);
  box-shadow: 0 0 0 8px var(--k-surface), 0 0 0 11px var(--k-primary), 0 0 0 16px color-mix(in srgb, var(--k-accent) 45%, var(--k-surface)), 0 26px 50px -30px rgba(0, 0, 0, .4); }
.sr-photo img { width: 100%; height: 100%; object-fit: cover; }
.sr-weed { position: absolute; left: -22%; bottom: -12%; width: 30%; --k-orn-3: var(--k-accent); }
.sr-tail { position: absolute; right: -24%; bottom: -14%; width: 46%; rotate: 14deg; --k-orn-2: var(--k-surface); }
@media (prefers-reduced-motion: no-preference) {
  .sr-tail { animation: sr-splash 4s ease-in-out infinite; transform-origin: 30% 100%; }
}
@keyframes sr-splash { 50% { rotate: 6deg; } }
.sr .fi-age { position: absolute; left: -12%; top: -4%; background: var(--k-accent); color: var(--fi-on-accent); }
.sr .fi-name { color: var(--k-primary); font-weight: 600; }
.sr .fi-age strong, .sr .fi-countdown strong { font-weight: 600; }
.sr-waves { height: 20px; background: var(--k-secondary); -webkit-mask: url(../kit/orn/religioso-ondas.svg) 0 0 / 60px 20px repeat-x; mask: url(../kit/orn/religioso-ondas.svg) 0 0 / 60px 20px repeat-x; }
.sr .fi-soft {
  background:
    radial-gradient(circle at 50% 0, transparent 9px, color-mix(in srgb, var(--k-secondary) 30%, transparent) 10px 11px, transparent 12px) 0 0 / 22px 14px,
    color-mix(in srgb, var(--k-secondary) 34%, var(--k-bg));
}
.sr .fi-welcome .k-divider { width: 64px; --k-orn-3: var(--k-accent); --k-orn-2: var(--k-surface); }
.sr .fi-card { box-shadow: 0 0 0 2px var(--k-secondary); }
.sr .fi-footer-orn { width: 72px; --k-orn-1: var(--k-primary); --k-orn-2: var(--k-secondary); }