/* ==========================================================================
   Página de redes sociales — solo la maqueta del hero.
   En el navegador, el calendario de la semana; en el móvil, una publicación.
   Reutiliza los marcos de web-service.css.
   ========================================================================== */

.rrss-panel{padding:16px 18px 14px;display:flex;flex-direction:column;gap:10px}

/* ---------- Calendario ---------- */
.rrss-week{
  display:grid;grid-template-columns:repeat(7,1fr);gap:5px;
  font-size:6.5px;letter-spacing:.08em;color:#8c8279;text-align:center;
}
.rrss-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.rrss-slot{
  min-height:74px;border-radius:4px;padding:5px 4px;
  border:1px dashed rgba(27,24,21,.16);background:transparent;
}
/* Los huecos con pieza: relleno, borde continuo y una franja de color arriba */
.rrss-slot--reel,.rrss-slot--post,.rrss-slot--story{
  border-style:solid;background:#fff;border-color:rgba(27,24,21,.14);
  border-top-width:3px;
}
.rrss-slot--reel{border-top-color:#e36539}
.rrss-slot--post{border-top-color:#1b1815}
.rrss-slot--story{border-top-color:#c9962e}
.rrss-slot__t{display:block;font-size:6.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#1b1815}
.rrss-slot__d{display:block;font-size:6px;line-height:1.4;color:#6f675f;margin-top:3px}

.rrss-foot{
  display:flex;align-items:center;gap:5px;
  border-top:1px solid rgba(27,24,21,.13);padding-top:9px;
}
.rrss-tag{
  font-size:6.5px;font-weight:600;letter-spacing:.04em;
  border-radius:999px;padding:3px 7px;color:#fff;
}
.rrss-tag--ig{background:#e36539}
.rrss-tag--tt{background:#1b1815}
.rrss-tag--li{background:#7d9fe4}
.rrss-foot__n{margin-left:auto;font-size:7px;color:#8c8279}

/* ---------- Móvil: la publicación ---------- */
.rrss-app__top{display:flex;align-items:center;gap:6px}
.rrss-app__av{
  width:17px;height:17px;border-radius:50%;
  background:linear-gradient(140deg,#e36539,#c9962e);
}
.rrss-app__name{font-size:8px;font-weight:600;color:#1b1815}
.rrss-app__media{
  position:relative;margin-top:9px;height:118px;border-radius:5px;
  background:linear-gradient(150deg,rgba(27,24,21,.16),rgba(227,101,57,.24));
  display:flex;align-items:center;justify-content:center;
}
.rrss-app__play{
  width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);
  display:flex;align-items:center;justify-content:center;
  font-size:9px;color:#1b1815;padding-left:2px;
}
.rrss-app__acts{
  display:flex;gap:9px;margin-top:8px;font-size:7px;color:#5f5952;
}
.rrss-app__acts>span:last-child{margin-left:auto}

@media (max-width:560px){
  .rrss-panel{padding:13px 14px 11px;gap:8px}
  .rrss-slot{min-height:58px}
  .rrss-app__media{height:96px}
}

/* ==========================================================================
   Tipos de contenido — mosaico de piezas
   La sección anterior ya es una rejilla de tres por dos con el mismo aspecto.
   Aquí las piezas se tratan como publicaciones: anchos desiguales, filete
   superior del color del formato (los mismos del calendario del hero) y la
   categoría en una pastilla.
   ========================================================================== */
.mix{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.9rem,1.5vw,1.3rem)}

.mix__c{
  position:relative;display:flex;flex-direction:column;
  border:1px solid rgba(27,24,21,.13);border-top-width:4px;
  border-radius:10px;padding:clamp(1.3rem,2vw,1.7rem);
  background:linear-gradient(158deg,rgba(255,255,255,.72),rgba(255,255,255,.3) 62%);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}
.mix__c:hover{transform:translateY(-4px);box-shadow:0 26px 46px -28px rgba(27,24,21,.3)}

/* Color del filete según el formato, igual que en el calendario */
.mix__c--reel{border-top-color:#e36539}
.mix__c--post{border-top-color:#1b1815}
.mix__c--story{border-top-color:#c9962e}

/* Anchos desiguales: dos filas de tres que no se leen como una retícula */
.mix__c--ancha{grid-column:span 5}
.mix__c--media{grid-column:span 4}
.mix__c--estrecha{grid-column:span 3}
.mix__c--tercio{grid-column:span 4}

.mix__chip{
  align-self:flex-start;
  font-size:.6875rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink);border:1px solid rgba(27,24,21,.18);
  border-radius:999px;padding:.34rem .8rem;line-height:1;
}
.mix__n{
  position:absolute;top:clamp(1.1rem,1.8vw,1.5rem);right:clamp(1.2rem,2vw,1.7rem);
  font-size:2.4rem;font-weight:500;line-height:1;letter-spacing:-.05em;
  color:rgba(27,24,21,.11);
}
.mix__c h3{
  margin:1.6rem 0 0;font-size:clamp(1.2rem,1.8vw,1.55rem);
  letter-spacing:-.04em;line-height:1.15;max-width:14ch;
}
.mix__c p{margin:.7rem 0 0;color:var(--gray);font-size:.9375rem;line-height:1.7}

@media (max-width:1000px){
  .mix{grid-template-columns:repeat(2,1fr)}
  .mix__c--ancha,.mix__c--media,.mix__c--estrecha,.mix__c--tercio{grid-column:auto}
  .mix__c--ancha{grid-column:1/-1}
}
@media (max-width:640px){
  .mix{grid-template-columns:1fr}
  .mix__c--ancha{grid-column:auto}
  .mix__n{font-size:2rem}
}