/* ---------- comunidad ---------- */
.opr-px-comunidad .opr-px-co-miercoles{
  display:inline-flex !important; align-items:center !important; gap:12px !important; flex-wrap:wrap !important;
  padding:9px 9px 9px 16px !important; border-radius:999px !important; background:var(--p100) !important;
  margin-bottom:clamp(28px,3.4vw,40px) !important;
}
.opr-px-comunidad .opr-px-co-dia{font-size:.875rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--tinta) !important}
.opr-px-comunidad .opr-px-co-rueda{
  padding:7px 15px !important; border-radius:999px !important; background:var(--superficie) !important; box-shadow:var(--sombra-s) !important;
  font-size:.875rem !important; font-weight:600 !important; color:var(--suave) !important;
  transition:opacity .3s ease !important;
}
.opr-px-comunidad .opr-px-co-rueda.es-cambiando{opacity:0 !important}

@media (max-width:560px){
  /* una píldora dentro de otra, partida en dos líneas, se ve como un error.
     En estrecho pasa a ser una caja con esquinas normales. */
  .opr-px-comunidad .opr-px-co-miercoles{
    display:flex !important; flex-direction:column !important; align-items:flex-start !important; gap:8px !important;
    border-radius:var(--radio-s) !important; padding:12px 14px !important;
  }
  .opr-px-comunidad .opr-px-co-rueda{width:100% !important}
}

.opr-px-comunidad .opr-px-co-rejilla{
  display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:clamp(14px,1.8vw,22px) !important;
}
@media (max-width:900px){ .opr-px-comunidad .opr-px-co-rejilla{grid-template-columns:1fr !important} }

.opr-px-comunidad .opr-px-co-carta{
  display:flex !important; flex-direction:column !important; padding:26px 24px 22px !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.opr-px-comunidad .opr-px-co-carta:hover{transform:translateY(-3px) !important; box-shadow:var(--sombra) !important}
.opr-px-comunidad .opr-px-co-icono{
  width:42px !important; height:42px !important; border-radius:12px !important; display:grid !important; place-items:center !important;
  background:var(--p100) !important; color:var(--p700) !important; margin-bottom:16px !important;
}
.opr-px-comunidad .opr-px-co-icono svg{width:20px !important; height:20px !important}

/* Los dos iconos van con el color de su marca, no con el de la sección.
   Es la misma excepción que el morado de Nutrisarmi: no es decoración, es la
   marca de otro. El degradado de Instagram es su logotipo, no un adorno. */
.opr-px-comunidad .opr-px-co-icono.es-telegram{background:#2AABEE !important; color:#fff !important}
.opr-px-comunidad .opr-px-co-icono.es-instagram{
  background:linear-gradient(45deg,#F9CE34 4%,#EE2A7B 48%,#6228D7 96%) !important; color:#fff !important;
}
.opr-px-comunidad .opr-px-co-tit{font-size:1.1875rem !important; font-weight:800 !important; letter-spacing:-.024em !important; line-height:1.18 !important}
.opr-px-comunidad .opr-px-co-txt{margin-top:9px !important; font-size:.90625rem !important; line-height:1.55 !important; color:var(--suave) !important; text-wrap:pretty !important; flex:1 !important}
.opr-px-comunidad .opr-px-co-ir{
  display:inline-flex !important; align-items:center !important; gap:7px !important; margin-top:18px !important;
  font-size:.875rem !important; font-weight:700 !important; letter-spacing:-.012em !important; color:var(--tinta) !important;
}
.opr-px-comunidad .opr-px-co-ir svg{width:15px !important; height:15px !important; transition:transform .18s ease !important}
.opr-px-comunidad .opr-px-co-carta:hover .opr-px-co-ir svg{transform:translateX(3px) !important}