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

/* aviso superior */
.com-promo {
  display: flex; align-items: center; justify-content: center; gap: .7rem; flex-wrap: wrap;
  padding: .75rem 1.25rem; text-align: center; text-decoration: none; font-size: .9rem; color: #fff !important;
  background: linear-gradient(90deg, rgba(145, 0, 203, .35), rgba(235, 1, 89, .35)); border-bottom: 1px solid rgba(255, 192, 216, .15);
}
.com-promo__cta { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; color: var(--lx-pink); }

/* portada */
.com-hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem); position: relative; overflow: hidden; }
.com-hero::before {
  content: ''; position: absolute; inset: -20% -10% auto auto; width: 70%; height: 120%; z-index: -1;
  background: radial-gradient(closest-side, rgba(235, 1, 89, .22), transparent 70%);
}
.com-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.com-h1 {
  margin: 0 0 1.3rem; color: var(--lx-text);
  font: 800 clamp(3rem, 8.5vw, 6.2rem)/.92 'Epilogue', sans-serif; letter-spacing: -.05em;
}
.com-h1 em { font-style: normal; background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.com-hero__lead { font-size: 1.18rem; line-height: 1.65; color: var(--lx-body); margin: 0 0 1rem; max-width: 560px; }
.com-hero__lead strong { color: var(--lx-text); }
.com-hero__sub { color: var(--lx-muted); line-height: 1.7; margin: 0; max-width: 540px; }

.com-collage { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; grid-template-rows: 1fr 1fr; gap: .9rem; height: clamp(420px, 46vw, 560px); }
.com-collage figure { margin: 0; border-radius: 22px; overflow: hidden; box-shadow: var(--com-shadow); position: relative; }
.com-collage figure::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 60px rgba(0, 0, 0, .55); border-radius: inherit; }
.com-collage__a { grid-row: 1 / 3; }
.com-collage__b { transform: translateY(1.5rem); }
.com-collage__c { transform: translateY(1.5rem); }
.com-collage__seal {
  position: absolute; left: 50%; bottom: -1.2rem; transform: translateX(-60%) rotate(-8deg);
  width: 118px; height: 118px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--lx-grad); color: #fff; font: 800 2rem/1 'Epilogue', sans-serif; box-shadow: 0 0 40px rgba(235, 1, 89, .5);
}
.com-collage__seal small { display: block; margin-top: .3rem; font: 600 .62rem/1.25 'Space Grotesk', sans-serif; letter-spacing: .12em; text-transform: uppercase; }

/* cifras */
.com-stats { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--lx-line); border-radius: 24px; background: var(--lx-card); overflow: hidden; }
.com-stats li { padding: 1.6rem 1.25rem; text-align: center; }
.com-stats li + li { border-left: 1px solid var(--lx-line); }
.com-stats strong { display: block; font: 800 clamp(2rem, 4vw, 2.8rem)/1 'Epilogue', sans-serif; background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.com-stats span { display: block; margin-top: .5rem; font-size: .9rem; color: var(--lx-muted); }

/* beneficios */
.com-bens { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 300px; gap: 1rem; margin-bottom: 2.5rem; }
.com-ben {
  position: relative; overflow: hidden; border-radius: 24px; isolation: isolate; box-shadow: var(--com-shadow);
  border: 1px solid rgba(255, 192, 216, .12);
}
.com-ben--xl { grid-column: span 2; }
.com-ben > img { position: absolute; inset: 0; z-index: -2; filter: saturate(.85) brightness(.75); transition: transform .8s ease, filter .5s ease; }
.com-ben::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(26, 8, 37, .1) 0%, rgba(26, 8, 37, .55) 45%, rgba(20, 6, 29, .96) 100%);
}
.com-ben:hover > img { transform: scale(1.07); filter: saturate(1) brightness(.85); }
.com-ben__body { position: absolute; inset: auto 0 0; padding: 1.5rem; }
.com-ben__ico {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; margin-bottom: .9rem;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 192, 216, .3); color: var(--lx-pink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.com-ben__ico svg { width: 24px; height: 24px; }
.com-ben h3 { margin: 0 0 .45rem; font: 800 1.25rem/1.2 'Epilogue', sans-serif; color: #fff; }
.com-ben--xl h3 { font-size: 1.6rem; }
.com-ben p { margin: 0; font-size: .95rem; line-height: 1.55; color: rgba(248, 220, 255, .85); }

/* franja de cita */
.com-band { position: relative; padding: clamp(5rem, 11vw, 8rem) 0; text-align: center; isolation: isolate; overflow: hidden; }
.com-band__bg { position: absolute; inset: 0; z-index: -1; }
.com-band__bg img { filter: brightness(.45) saturate(1.1); }
.com-band__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1A0825, rgba(26, 8, 37, .35) 30%, rgba(26, 8, 37, .35) 70%, #1A0825); }
.com-band__quote { margin: 0; font: 800 clamp(1.8rem, 4.6vw, 3.2rem)/1.15 'Epilogue', sans-serif; letter-spacing: -.03em; color: #fff; }
.com-band__quote em { font-style: normal; background: var(--lx-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* por qué es diferente */
.com-why { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.com-why__img { position: relative; margin-bottom: 2rem; }
.com-why__img > img { border-radius: 24px; aspect-ratio: 4 / 3.4; box-shadow: var(--com-shadow); filter: brightness(.9); }
.com-why__mini { position: absolute; right: -1rem; bottom: -2.5rem; width: 46%; aspect-ratio: 1; margin: 0; border-radius: 20px; overflow: hidden; border: 4px solid var(--lx-bg); box-shadow: var(--com-shadow); }
.com-checks { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.com-checks li { position: relative; padding-left: 2.1rem; line-height: 1.6; color: var(--lx-body); }
.com-checks li::before {
  content: ''; position: absolute; left: 0; top: .3rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: var(--lx-grad);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12'/%3E%3C/svg%3E");
}
.com-checks li::after { content: ''; position: absolute; left: .42rem; top: .55rem; width: .35rem; height: .6rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.com-checks strong { color: var(--lx-text); }

/* testimonios con fondo */
.com-quotes { isolation: isolate; overflow: hidden; }
.com-quotes__bg { position: absolute; inset: 0; z-index: -1; }
.com-quotes__bg img { filter: brightness(.3) saturate(.9); }
.com-quotes__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #1A0825, rgba(26, 8, 37, .6) 25%, rgba(26, 8, 37, .6) 75%, #1A0825); }
.com-quotes .fl3-quote { background: rgba(35, 16, 48, .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

/* reglas */
.com-rules { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.com-rules__side { position: sticky; top: 100px; }
.com-rules__img { margin: 1.5rem 0 0; border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--com-shadow); }
.com-rules__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.com-rules__list li { display: flex; gap: 1rem; padding: 1.3rem; border-radius: 20px; background: var(--lx-card); border: 1px solid var(--lx-line); transition: border-color .25s ease, transform .25s ease; }
.com-rules__list li:hover { border-color: rgba(255, 61, 139, .4); transform: translateY(-3px); }
.com-rule__ico { flex: 0 0 auto; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: linear-gradient(135deg, rgba(235, 1, 89, .2), rgba(145, 0, 203, .2)); color: var(--lx-pink); }
.com-rule__ico svg { width: 22px; height: 22px; }
.com-rules__list h3 { margin: 0 0 .3rem; font: 700 1.05rem/1.25 'Epilogue', sans-serif; color: var(--lx-text); }
.com-rules__list p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--lx-muted); }

.com-faq-more { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; margin: 2rem 0 0; }
.com-faq-more a { display: inline-flex; align-items: center; gap: .4rem; color: var(--lx-pink); font-weight: 700; text-decoration: none; }
.com-faq-more a:hover { text-decoration: underline; }

/* cierre: la cerradura */
.com-final { position: relative; padding: clamp(6rem, 13vw, 10rem) 0; text-align: center; isolation: isolate; overflow: hidden; }
.com-final__bg { position: absolute; inset: 0; z-index: -1; }
.com-final__bg img { object-position: 50% 40%; filter: brightness(1.35) contrast(1.05); }
.com-final__bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 70% at 50% 45%, rgba(26, 8, 37, .05), rgba(26, 8, 37, .7) 75%), linear-gradient(180deg, #1A0825 0%, transparent 25%, transparent 75%, #1A0825 100%); }
.com-final .fl3-h2 { font-size: clamp(2.3rem, 6.5vw, 4.3rem); }
.com-scarcity { display: inline-block; margin: .5rem 0 0; padding: .7rem 1.2rem; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 192, 216, .25); font-size: .92rem; color: var(--lx-text); }

/* responsive */
@media (max-width: 1000px) {
  .com-bens { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 280px; }
  .com-rules__list { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .com-hero__grid, .com-why, .com-rules { grid-template-columns: 1fr; }
  .com-collage { height: 420px; }
  .com-rules__side { position: static; }
  .com-stats { grid-template-columns: repeat(2, 1fr); }
  .com-stats li:nth-child(3) { border-left: 0; }
  .com-stats li:nth-child(n+3) { border-top: 1px solid var(--lx-line); }
}
@media (max-width: 640px) {
  .com-bens { grid-template-columns: 1fr; grid-auto-rows: 300px; }
  .com-ben--xl { grid-column: auto; }
  .com-collage { height: 340px; gap: .6rem; }
  .com-collage__seal { width: 96px; height: 96px; font-size: 1.6rem; }
  .com-why__mini { right: .5rem; }
  .com-promo { font-size: .82rem; }
  .com-hero__actions .fl3-btn, .com .fl3-hero__actions .fl3-btn { flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .com-promo { gap: .3rem .6rem; padding: .6rem 1rem; }
  .com-promo .fl3-dot { display: none; }
}