/* Página de los anfitriones (/anfitriones/). Se carga después de blog.css,
   fl3.css y com.css (botones, títulos, animaciones de entrada). */
.anf { --anf-shadow: 0 30px 70px -28px rgba(0, 0, 0, .85); }
.anf img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anf-ico { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.anf-arrow { width: 1.05em; height: 1.05em; }

/* instagram */
.anf-ig {
  display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 999px; text-decoration: none;
  background: linear-gradient(135deg, rgba(254, 80, 0, .18), rgba(235, 1, 89, .2), rgba(145, 0, 203, .22));
  border: 1px solid rgba(255, 192, 216, .3); color: #fff !important; font-weight: 700; font-size: .95rem; transition: transform .2s ease, background .2s ease;
}
.anf-ig:hover { transform: translateY(-2px); background: linear-gradient(135deg, #FE5000, #EB0159, #9100CB); }
.anf-ig .anf-ico { width: 1.15rem; height: 1.15rem; }

/* portada */
.anf-hero { padding: clamp(3rem, 7vw, 5rem) 0 clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.anf-hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.anf-hero .com-h1 em { white-space: nowrap; }
.anf-lead { margin: 0 0 1.2rem; font-size: 1.15rem; line-height: 1.7; color: var(--lx-body); max-width: 600px; }
.anf-lead strong { color: var(--lx-text); }
.anf-quote { margin: 0; padding-left: 1rem; border-left: 3px solid #EB0159; font: 600 1.05rem/1.5 'Manrope', sans-serif; color: var(--lx-pink); }
.anf-hero__media { position: relative; }
.anf-hero__main { margin: 0; aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; transform: rotate(2deg); box-shadow: 0 40px 90px -35px rgba(235, 1, 89, .6); border: 1px solid rgba(255, 192, 216, .25); }
.anf-hero__seal {
  position: absolute; left: -1.5rem; bottom: 2rem; width: 124px; height: 124px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--lx-grad); color: #fff; transform: rotate(-10deg); box-shadow: 0 0 40px rgba(235, 1, 89, .5);
  font: 600 .66rem/1.25 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase;
}
.anf-hero__seal strong { font: 800 2.2rem/1 'Epilogue', sans-serif; letter-spacing: 0; }

/* Lu y Leo */
.anf-hosts { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.anf-host {
  display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border-radius: 26px; box-shadow: var(--anf-shadow);
  background: linear-gradient(165deg, rgba(43, 20, 57, .95), rgba(26, 8, 37, .95)) padding-box,
              linear-gradient(165deg, rgba(255, 192, 216, .3), rgba(145, 0, 203, .1) 50%, rgba(235, 1, 89, .35)) border-box;
  border: 1px solid transparent;
}
.anf-host__img { position: relative; margin: 0; min-height: 100%; }
.anf-host__role {
  position: absolute; left: .9rem; bottom: .9rem; display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .8rem; border-radius: 999px;
  background: var(--lx-grad); color: #fff; font: 700 .72rem/1 'Space Grotesk', sans-serif; letter-spacing: .1em; text-transform: uppercase;
}
.anf-host__body { padding: 1.8rem 1.6rem; display: flex; flex-direction: column; gap: .3rem; }
.anf-host h3 { margin: 0 0 .5rem; font: 800 2.6rem/1 'Epilogue', sans-serif; letter-spacing: -.04em; background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.anf-host__body > p:not(.fl3-eyebrow) { margin: 0 0 1rem; line-height: 1.65; color: var(--lx-body); }
.anf-host .fl3-eyebrow { margin: 0; }
.anf-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.anf-tags span { padding: .35rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .08); font-size: .8rem; font-weight: 600; color: var(--lx-text); }
.anf-host .anf-ig { align-self: flex-start; margin-top: auto; }

/* línea de tiempo */
.anf-story { background: linear-gradient(180deg, transparent, rgba(145, 0, 203, .12) 50%, transparent); }
.anf-timeline { list-style: none; position: relative; max-width: 900px; margin: 0 auto; padding: 0; }
.anf-timeline::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, transparent, #EB0159 8%, #9100CB 92%, transparent); }
.anf-step { position: relative; width: 50%; padding: 0 2.6rem 1.8rem 0; }
.anf-step:nth-child(even) { margin-left: 50%; padding: 0 0 1.8rem 2.6rem; }
.anf-step__dot { position: absolute; top: 1.4rem; right: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--lx-grad); box-shadow: 0 0 0 5px #1d0a29, 0 0 20px rgba(235, 1, 89, .7); }
.anf-step:nth-child(even) .anf-step__dot { right: auto; left: -9px; }
.anf-step__card { padding: 1.4rem 1.5rem; border-radius: 20px; background: var(--lx-card); border: 1px solid var(--lx-line); box-shadow: 0 20px 50px -30px rgba(0, 0, 0, .9); }
.anf-step__card small { display: inline-block; margin-bottom: .55rem; padding: .3rem .7rem; border-radius: 999px; background: var(--lx-grad); color: #fff; font: 700 .72rem/1 'Space Grotesk', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.anf-step__card h3 { margin: 0 0 .4rem; font: 800 1.2rem/1.25 'Epilogue', sans-serif; color: var(--lx-text); }
.anf-step__card p { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--lx-muted); }
.anf-step__card figure { margin: 1rem 0 0; aspect-ratio: 16 / 10; border-radius: 14px; overflow: hidden; }

/* mensaje */
.anf-letter { position: relative; padding: clamp(2rem, 5vw, 3.2rem); border-radius: 28px; text-align: left; overflow: hidden;
  background: radial-gradient(circle at 100% 0, rgba(254, 80, 0, .25), transparent 50%), linear-gradient(140deg, rgba(145, 0, 203, .35), rgba(235, 1, 89, .3));
  border: 1px solid rgba(255, 192, 216, .3); box-shadow: 0 40px 90px -40px rgba(235, 1, 89, .7); }
.anf-letter__mark { position: absolute; top: -1.5rem; right: 1.5rem; font: 800 11rem/1 'Epilogue', sans-serif; color: rgba(255, 255, 255, .1); }
.anf-letter__text { position: relative; margin: 0 0 1rem; font-size: 1.15rem; line-height: 1.75; color: #fff; }
.anf-letter__text strong { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 192, 216, .6); text-underline-offset: 4px; }
.anf-letter__sign { margin: 1.4rem 0 0; font: 700 1.1rem/1 'Space Grotesk', sans-serif; color: var(--lx-pink); }

/* beneficios */
.anf-bens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.anf-bens li { display: flex; flex-direction: column; gap: .9rem; padding: 1.6rem 1.3rem; border-radius: 22px; background: var(--lx-card); border: 1px solid var(--lx-line); transition: transform .3s ease, border-color .3s ease; }
.anf-bens li:hover { transform: translateY(-5px); border-color: rgba(255, 61, 139, .45); }
.anf-ben__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--lx-grad); color: #fff; box-shadow: 0 12px 26px -10px rgba(235, 1, 89, .7); }
.anf-ben__ico .anf-ico { width: 26px; height: 26px; }
.anf-bens h3 { margin: 0 0 .35rem; font: 800 1.1rem/1.25 'Epilogue', sans-serif; color: var(--lx-text); }
.anf-bens p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--lx-muted); }

/* galería */
.anf-gal { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.anf-gal__item { margin: 0; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; box-shadow: var(--anf-shadow); }
.anf-gal__item img { transition: transform .7s ease; }
.anf-gal__item:hover img { transform: scale(1.05); }

.anf-final { text-align: center; }
.anf-igs { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: 1.5rem 0 .5rem; }

/* responsive */
@media (max-width: 1100px) {
  .anf-bens { grid-template-columns: repeat(3, 1fr); }
  .anf-hosts { grid-template-columns: 1fr; max-width: 760px; margin: 0 auto; }
}
@media (max-width: 860px) {
  .anf-hero__grid { grid-template-columns: 1fr; }
  .anf-hero__media { max-width: 420px; margin: 0 auto; width: 100%; }
  .anf-gal { grid-template-columns: repeat(2, 1fr); }
  .anf-bens { grid-template-columns: repeat(2, 1fr); }
  .anf-timeline::before { left: 9px; }
  .anf-step, .anf-step:nth-child(even) { width: auto; margin-left: 0; padding: 0 0 1.4rem 2.4rem; }
  .anf-step__dot, .anf-step:nth-child(even) .anf-step__dot { left: 0; right: auto; }
}
@media (max-width: 640px) {
  .anf-host { grid-template-columns: 1fr; }
  .anf-host__img { aspect-ratio: 4 / 4.2; }
  .anf-bens { grid-template-columns: 1fr; }
  .anf-hero__seal { width: 100px; height: 100px; left: -.3rem; }
  .anf-hero__seal strong { font-size: 1.8rem; }
  .anf .fl3-hero__actions .fl3-btn { flex: 1 1 100%; }
  .anf-hero .com-h1 em { white-space: normal; }
}