/* Secciones comunes de las plantillas infantiles (cumpleaños de niños y niñas).
   Va después de kit/base.css; cada diseño pone su portada y su carácter en css/app.css. */

.fi {
  --k-radius: 26px;
  --fi-on-accent: var(--mi-color-acento-on, #1c1c1c);
  --k-orn-1: var(--k-primary); --k-orn-2: var(--k-secondary); --k-orn-3: var(--k-accent);
}
.fi .k-orn { color: var(--k-text); }
.fi h2 { font-weight: 700; }
.fi:not(.fi--orn) .fi-orn { display: none; }

/* Portada */
.fi-hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: clamp(32px, 7vw, 56px) var(--k-gap) clamp(44px, 9vw, 80px); overflow: hidden; text-align: center; }
.fi-hero > * { position: relative; }
.fi-name { margin: .2rem 0 0; font-size: clamp(3rem, 15vw, 5.6rem); font-weight: 700; line-height: 1; }
.fi-when { display: grid; gap: .1rem; margin: 0; font-size: 1.05rem; font-weight: 600; }
.fi-when span { color: var(--k-muted); font-size: .95rem; font-weight: 400; }
.fi-age { display: grid; place-content: center; width: 92px; height: 92px; margin: 0; border-radius: 50%; background: var(--k-primary); color: var(--k-on-primary); font: 700 .7rem/1 var(--k-font-body); letter-spacing: .14em; text-transform: uppercase; box-shadow: 0 0 0 5px var(--k-surface), 0 12px 24px -12px rgba(0, 0, 0, .45); }
.fi-age strong { display: block; margin-top: 2px; font: 700 2.7rem/1 var(--k-font-title); letter-spacing: 0; text-transform: none; }
.fi-countdown > div { background: var(--k-surface); box-shadow: 0 0 0 2px var(--k-secondary); border-radius: 18px; }
.fi-countdown strong { font-family: var(--k-font-title); font-weight: 700; }

/* Bienvenida */
.fi-welcome .k-divider { width: 84px; }
.fi-message { margin: 0 auto; max-width: 28em; font-size: clamp(1.15rem, 4.4vw, 1.35rem); line-height: 1.55; }
.fi-parents { display: grid; gap: .3rem; margin: 1.4rem 0 0; font-weight: 700; font-size: 1.1rem; }
.fi-parents .k-eyebrow { margin: 0; }

/* Tarjetas, qué traer */
.fi-soft { background: color-mix(in srgb, var(--k-secondary) 34%, var(--k-bg)); }
.fi-card h3 { font-family: var(--k-font-body); font-size: 1.3rem; font-weight: 700; }
.fi-note { color: var(--k-muted); }
.fi-bring { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 0; padding: 0; list-style: none; }
.fi-bring li { display: inline-flex; align-items: center; gap: .5rem; padding: .6rem 1.1rem; border-radius: 999px; background: var(--k-surface); box-shadow: 0 0 0 2px var(--k-secondary); font-weight: 700; }
.fi-bring li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--k-accent); }
.fi-dress { font-size: clamp(1.8rem, 7vw, 2.6rem); }

/* Regalos, confirmación, compartir, pie */
.fi .fi-sobres { background: var(--k-primary); color: var(--k-on-primary); }
.fi-sobres h3 { margin: 0 0 .4rem; font-family: var(--k-font-body); font-size: 1.3rem; font-weight: 700; }
.fi-sobres p { margin: 0; }
.fi-rsvp { text-align: left; }
.fi-ask { margin: 1.2rem 0 0; }
.fi-share { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.fi-footer { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.fi-footer-orn { display: block; width: 84px; }
.fi-footer .k-quote { font-family: var(--k-font-title); font-style: normal; font-size: 1.35rem; color: var(--k-text); }