/* ==========================================================================
   Red de Emprendedores en modo "app": más fresca y cercana, sin perder el toque de la revista.
   Qué cambia: fondo gris cálido con tarjetas blancas de esquinas redondas, filetes suaves en lugar
   de líneas negras gruesas, avatares redondos, botones tipo píldora, pestañas como chips,
   hojas (modales) que suben desde abajo y barra de navegación inferior en el celular.
   Qué se queda de la revista: el rojo y el logotipo, los titulares en Anton y las etiquetas
   condensadas en mayúsculas.
   Se carga solo en las páginas de /red (data-page="red…"), desde shell.js. Casi todo se logra
   redefiniendo los tokens de rdn.css bajo este selector; el resto son ajustes puntuales.
   ========================================================================== */
body[data-page^="red"] {
  /* Tokens: esquinas, líneas y sombras suaves */
  --r-1: 12px;
  --r-2: 16px;
  --line: 1px solid #E2DFD9;
  --line-2: 1px solid #D6D2CB;
  --line-4: 0 solid transparent;
  --line-soft: 1px solid #ECE9E4;
  --shadow-paper: 0 1px 2px rgb(29 29 27 / .06), 0 8px 24px -12px rgb(29 29 27 / .18);
  --lienzo: #F2F1EE;
  --tarjeta: #FFFFFF;
  --nav-h: 64px;
  background: var(--lienzo);
}

/* ---- Encabezado de la sección: compacto, a la izquierda ---- */
body[data-page^="red"] .red-hero { background: var(--tarjeta); border-bottom: var(--line); }
body[data-page^="red"] .red-hero__in { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
body[data-page^="red"] .red-hero__logo { max-width: 210px; height: auto; margin-bottom: var(--sp-2); }
body[data-page^="red"] .red-hero h1 { font-size: clamp(1.7rem, 1.2rem + 2.2vw, 2.6rem); line-height: 1.05; }
body[data-page^="red"] .red-hero .dek { font-size: var(--fs-base); line-height: 1.45; margin-top: var(--sp-2); }
@media (max-width: 767px) {
  body[data-page^="red"]:not([data-page="red"]) .red-hero .dek { display: none; }
}

/* ---- Pestañas de la sección como chips que se deslizan ---- */
body[data-page^="red"] .red-subnav { position: sticky; top: var(--header-h); z-index: 20; background: var(--tarjeta); border: 0; border-bottom: var(--line); box-shadow: 0 6px 12px -10px rgb(29 29 27 / .35); }
body[data-page^="red"] .red-subnav__list { gap: 8px; margin: 0; padding: 10px 0; }
body[data-page^="red"] .red-subnav__list a {
  border: 0; border-radius: 999px; padding: 8px 16px; min-height: 0; background: var(--lienzo); color: var(--ink-soft);
  font-size: .78rem; letter-spacing: .1em; white-space: nowrap;
}
body[data-page^="red"] .red-subnav__list a:hover { background: var(--paper-3); }
body[data-page^="red"] .red-subnav__list a[aria-current="page"] { background: var(--ink); color: #fff; border: 0; }

/* ---- Tarjetas ---- */
body[data-page^="red"] .red-post,
body[data-page^="red"] .red-composer,
body[data-page^="red"] .red-composer__lock,
body[data-page^="red"] .red-side__block,
body[data-page^="red"] .red-block,
body[data-page^="red"] .red-sec,
body[data-page^="red"] .red-sidebox,
body[data-page^="red"] .red-ratepanel,
body[data-page^="red"] .red-empty-card,
body[data-page^="red"] .red-filters,
body[data-page^="red"] .red-search,
body[data-page^="red"] .red-join,
body[data-page^="red"] .red-mypost {
  background: var(--tarjeta); border: 0; border-radius: var(--r-2); box-shadow: var(--shadow-paper);
}
body[data-page^="red"] .red-post { padding: var(--sp-4); }
body[data-page^="red"] .red-post + .red-post { margin-top: var(--sp-4); }
body[data-page^="red"] .red-composer { padding: var(--sp-4); margin-bottom: var(--sp-4); overflow: hidden; }
body[data-page^="red"] .red-block, body[data-page^="red"] .red-sec { padding: var(--sp-5); margin-bottom: var(--sp-4); }
body[data-page^="red"] .red-search { padding: var(--sp-4); }
body[data-page^="red"] .red-page { padding-top: var(--sp-4); }

/* ---- Avatares redondos ---- */
body[data-page^="red"] .avatar, body[data-page^="red"] .red-body .avatar { border-radius: 50%; font-family: var(--font-head); font-weight: 800; letter-spacing: .02em; }
body[data-page^="red"] .avatar img { border-radius: 50%; object-fit: cover; }

/* ---- Publicaciones ---- */
body[data-page^="red"] .red-post__who .post__name, body[data-page^="red"] .red-post .post__name { font-family: var(--font-ui); font-weight: 700; font-size: 1rem; letter-spacing: 0; text-transform: none; }
body[data-page^="red"] .red-post__type { background: var(--red-tint); color: var(--red-deep); padding: 2px 9px; border-radius: 999px; letter-spacing: .1em; }
body[data-page^="red"] .red-post__img img { border: 0; border-radius: var(--r-1); }
body[data-page^="red"] .red-post p, body[data-page^="red"] .post__text { font-size: 1.02rem; line-height: 1.55; }
body[data-page^="red"] .red-react { gap: 8px; }
body[data-page^="red"] .red-react__btn { border: 0; background: var(--lienzo); border-radius: 999px; padding: 8px 16px; font-weight: 700; transition: transform var(--t-fast) var(--ease), background var(--t-fast); }
body[data-page^="red"] .red-react__btn:hover { background: var(--red-tint); }
body[data-page^="red"] .red-react__btn:active { transform: scale(.94); }
body[data-page^="red"] .red-react__btn[aria-pressed="true"] { background: var(--red); color: #fff; }
body[data-page^="red"] .red-post__bar { border-top: var(--line-soft); }
body[data-page^="red"] .red-comment-form textarea, body[data-page^="red"] .red-comment-form input { border-radius: 999px; }

/* ---- Botones, campos y chips ---- */
body[data-page^="red"] .btn { border-radius: 999px; }
body[data-page^="red"] .btn--secondary { border: 1.5px solid #CFCAC2; background: var(--tarjeta); }
body[data-page^="red"] .btn--secondary:hover { border-color: var(--ink); background: var(--tarjeta); }
body[data-page^="red"] .chip { border-radius: 999px; border: 1.5px solid #D6D2CB; background: var(--tarjeta); }
body[data-page^="red"] .chip[aria-pressed="true"], body[data-page^="red"] .chip.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
body[data-page^="red"] .input, body[data-page^="red"] .select, body[data-page^="red"] .textarea,
body[data-page^="red"] input[type="text"], body[data-page^="red"] input[type="email"], body[data-page^="red"] input[type="password"],
body[data-page^="red"] input[type="search"], body[data-page^="red"] select, body[data-page^="red"] textarea {
  border: 1.5px solid #D6D2CB; border-radius: 12px; background: var(--tarjeta); box-shadow: none;
}
body[data-page^="red"] .input:focus, body[data-page^="red"] .select:focus, body[data-page^="red"] .textarea:focus,
body[data-page^="red"] input:focus, body[data-page^="red"] select:focus, body[data-page^="red"] textarea:focus {
  border-color: var(--red); outline: 3px solid rgb(219 6 50 / .18); outline-offset: 0;
}
body[data-page^="red"] .red-composer textarea { border: 0; background: var(--lienzo); border-radius: 16px; padding: 14px 16px; }
body[data-page^="red"] .red-composer__meta { padding-top: var(--sp-2); }

/* ---- Directorio: resultados como tarjetas ---- */
body[data-page^="red"] .red-dirgrid { gap: var(--sp-4); }
body[data-page^="red"] .red-results .card, body[data-page^="red"] .red-results article, body[data-page^="red"] .red-group article {
  background: var(--tarjeta); border: 0 !important; border-radius: var(--r-2); box-shadow: var(--shadow-paper); padding: var(--sp-4); margin-bottom: var(--sp-3);
}
body[data-page^="red"] .red-mapwrap, body[data-page^="red"] .red-mapbox { border-radius: var(--r-2); overflow: hidden; }

/* ---- Perfil: portada y tarjeta de calificación ---- */
body[data-page^="red"] .red-cover { border-radius: 0 0 var(--r-2) var(--r-2); }
body[data-page^="red"] .red-profile .avatar { border: 4px solid var(--tarjeta); box-shadow: var(--shadow-paper); }
body[data-page^="red"] .red-profile h1 { text-transform: none; font-family: var(--font-ui); font-weight: 800; letter-spacing: -.02em; }
body[data-page^="red"] .badge { border-radius: 999px; }

/* ---- Hojas (modales): suben desde abajo en el celular ---- */
body[data-page^="red"] dialog.modal, body[data-page^="red"] .modal { border: 0; border-radius: 20px; box-shadow: var(--shadow-pop); }
@media (max-width: 767px) {
  body[data-page^="red"] dialog.modal[open] {
    margin: auto 0 0; width: 100%; max-width: 100%; border-radius: 22px 22px 0 0; max-height: 92vh;
    animation: red-hoja .26s var(--ease);
  }
  body[data-page^="red"] dialog.modal::backdrop { background: rgb(20 20 18 / .55); }
}
@keyframes red-hoja { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body[data-page^="red"] dialog.modal[open] { animation: none; } }

/* ---- Barra de navegación inferior (celular) ---- */
.red-tabbar { display: none; }
@media (max-width: 859px) {
  body[data-page^="red"] { padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .red-tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    height: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: rgb(255 255 255 / .96); backdrop-filter: blur(10px); border-top: 1px solid #E2DFD9;
    box-shadow: 0 -8px 24px -16px rgb(29 29 27 / .35);
  }
  .red-tabbar a, .red-tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: var(--nav-h); padding: 6px 2px 4px; border: 0; background: none; color: var(--ink-mute); text-decoration: none; cursor: pointer;
    font-family: var(--font-head); font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; position: relative;
  }
  .red-tabbar .icon { width: 24px; height: 24px; }
  .red-tabbar [aria-current="page"] { color: var(--red); }
  .red-tabbar [aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--red); }
  .red-tabbar__mas { align-self: center; }
  .red-tabbar__mas span.ico { display: grid; place-items: center; width: 48px; height: 48px; margin-top: -14px; border-radius: 50%; background: var(--red); color: #fff; box-shadow: 0 8px 18px -6px rgb(219 6 50 / .7); }
  .red-tabbar__mas .icon { width: 26px; height: 26px; stroke-width: 2.4; }
  .red-tabbar__mas { color: var(--red); }
  .red-tabbar__n { position: absolute; top: 5px; left: calc(50% + 6px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 99px; background: var(--red); color: #fff; font: 800 .65rem/17px var(--font-ui); text-align: center; }
  .toast-host, .toasts { bottom: calc(var(--nav-h) + 12px) !important; }
}

/* ---- Cuadro de publicar: limpio, sin franja gris ---- */
body[data-page^="red"] .composer { border: 0; background: var(--tarjeta); }
body[data-page^="red"] .composer:focus-within { outline: none; }
body[data-page^="red"] .composer__row { padding: 0 0 var(--sp-3); }
body[data-page^="red"] .composer .composer__input { background: var(--lienzo); border-radius: 18px; padding: 14px 16px; min-height: 84px; }
body[data-page^="red"] .composer__bar { background: transparent; border: 0; border-top: var(--line-soft); padding: var(--sp-3) 0 0; }
body[data-page^="red"] .composer .select { border-radius: 999px; }

/* ---- Historias: tira de círculos con aro rojo arriba del muro ---- */
body[data-page^="red"] .red-historias { background: var(--tarjeta); border-radius: var(--r-2); box-shadow: var(--shadow-paper); padding: var(--sp-3) var(--sp-3) 0; margin-bottom: var(--sp-4); }
body[data-page^="red"] .rvd-strip { padding: 4px 4px var(--sp-3); gap: var(--sp-3); }
body[data-page^="red"] .rvd-ring__c { border: 0; padding: 3px; background: conic-gradient(from 210deg, #DB0632, #FF7A18, #DB0632); }
body[data-page^="red"] .rvd-ring.is-seen .rvd-ring__c { background: #D6D2CB; }
body[data-page^="red"] .rvd-ring__c .avatar, body[data-page^="red"] .rvd-ring__c img { border: 3px solid var(--tarjeta); }
body[data-page^="red"] .rvd-ring--add .rvd-ring__c { background: var(--lienzo); border: 2px dashed #B9B4AC; color: var(--red); }
body[data-page^="red"] .rvd-ring__n { font-weight: 600; font-size: .74rem; color: var(--ink-soft); }
body[data-page^="red"] .rvd-quiet { padding: 0 var(--sp-2) var(--sp-3); font-size: .85rem; }

/* ---- Publicación: encabezado compacto en una línea de datos ---- */
body[data-page^="red"] .post__head { align-items: flex-start; gap: 12px; }
body[data-page^="red"] .post__head .avatar { --av: 46px; width: 46px; height: 46px; flex: none; }
body[data-page^="red"] .red-post__who .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; margin-top: 3px; font-size: .8rem; line-height: 1.4; color: var(--ink-mute); }
body[data-page^="red"] .red-post__who .meta > * + *::before { content: "·"; color: #B9B4AC; margin: 0 7px; }
body[data-page^="red"] .red-post__who .meta > .red-post__type + *::before { content: none; margin: 0 0 0 7px; }
body[data-page^="red"] .red-post__who .meta > .red-post__type { margin-right: 0; }

/* ---- Avisos: tarjetas ---- */
body[data-page^="red"] .red-notif, body[data-page^="red"] .red-notifs > li, body[data-page^="red"] [data-notif-list] > * { border-radius: var(--r-1); }

/* ---- Más piezas que eran cajas rectas con filete negro ---- */
body[data-page^="red"] .red-level, body[data-page^="red"] .red-share, body[data-page^="red"] .red-danger, body[data-page^="red"] .red-mp-top,
body[data-page^="red"] .red-honest, body[data-page^="red"] .red-note, body[data-page^="red"] .notice, body[data-page^="red"] .red-hint-row,
body[data-page^="red"] .red-mapbox, body[data-page^="red"] .red-item, body[data-page^="red"] .rvd-card, body[data-page^="red"] .rvd-part, body[data-page^="red"] .rvd-tl__card {
  border-radius: var(--r-1);
}
body[data-page^="red"] .red-level, body[data-page^="red"] .red-share, body[data-page^="red"] .rvd-card, body[data-page^="red"] .rvd-tl__card {
  background: var(--tarjeta); border: 0; box-shadow: var(--shadow-paper);
}
body[data-page^="red"] .red-level, body[data-page^="red"] .red-share { padding: var(--sp-5); }
body[data-page^="red"] .rvd-tabs { border-bottom: var(--line); }
body[data-page^="red"] .rvd-tab { border-radius: 999px 999px 0 0; }
body[data-page^="red"] .rvd-tab[aria-selected="true"] { border-bottom: 3px solid var(--red); color: var(--ink); }
body[data-page^="red"] .red-notifs > li, body[data-page^="red"] .red-notif { background: var(--tarjeta); border: 0; border-radius: var(--r-1); box-shadow: var(--shadow-paper); margin-bottom: var(--sp-2); overflow: hidden; }
body[data-page^="red"] .red-bell__panel { border: 0; border-radius: var(--r-2); box-shadow: var(--shadow-pop); overflow: hidden; }

/* ---- Escritorio: contenido centrado y columnas con aire ---- */
@media (min-width: 860px) {
  body[data-page^="red"] .red-page { padding-top: var(--sp-6); }
  body[data-page^="red"] .red-cols--feed { gap: var(--sp-6); }
  body[data-page^="red"] .red-hero__in { display: flex; align-items: center; gap: var(--sp-6); }
  body[data-page^="red"] .red-hero__logo { margin-bottom: 0; }
}

/* ---- Nueva historia: colores redondos y vista previa grande ---- */
body[data-page^="red"] .rvd-swatches { gap: 12px; }
body[data-page^="red"] .rvd-swatch { width: 42px; height: 42px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px #CFCAC2; padding: 0; }
body[data-page^="red"] .rvd-swatch[aria-checked="true"], body[data-page^="red"] .rvd-swatch.is-on, body[data-page^="red"] .rvd-swatch:focus-visible { box-shadow: 0 0 0 3px var(--red); outline: none; }
body[data-page^="red"] .rvd-hprev { border-radius: 20px; min-height: 220px; font-size: 1.5rem; }
body[data-page^="red"] .rvd-tab { padding-inline: 16px; }

/* ---- Avisos push (red/notificaciones.html) ---- */
.red-push { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; background: var(--tarjeta); border: var(--line); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); box-shadow: var(--shadow-paper); }
.red-push[hidden] { display: none; }
.red-push__ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #FBE9E7; color: var(--red, #C8102E); }
.red-push__ico svg { width: 20px; height: 20px; }
.red-push__txt { flex: 1 1 240px; display: grid; gap: 2px; min-width: 0; }
.red-push__txt strong { font-weight: 700; }
.red-push__txt span { font-size: .9rem; color: var(--ink-mute, #5A5A55); line-height: 1.4; }
.red-push__act { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; }

/* ==========================================================================
   Arreglos y afinado de /red (secciones de la portada, muro y perfil)
   ========================================================================== */

/* Lo que es tinta sigue siendo tinta: las tarjetas blancas no le quitan el fondo ni el color */
body[data-page^="red"] .red-join { background: var(--ink); color: #fff; border-radius: var(--r-2); padding: var(--sp-6); box-shadow: var(--shadow-paper); }
body[data-page^="red"] #side-join { background: transparent; box-shadow: none; padding: 0; }
body[data-page^="red"] .red-join h2 { font-size: clamp(1.7rem, 1.3rem + 1vw, 2.2rem); }
body[data-page^="red"] .red-join p { color: #E4DEDE; font-size: .95rem; line-height: 1.5; }
body[data-page^="red"] .red-join .btn { justify-self: start; }
body[data-page^="red"] .on-ink .btn--secondary, body[data-page^="red"] .on-red .btn--secondary,
body[data-page^="red"] .band--ink .btn--secondary, body[data-page^="red"] .pb-ubi__panel .btn--secondary {
  background: transparent; border: 1.5px solid rgb(255 255 255 / .7); color: #fff;
}
body[data-page^="red"] .on-ink .btn--secondary:hover, body[data-page^="red"] .on-red .btn--secondary:hover,
body[data-page^="red"] .band--ink .btn--secondary:hover, body[data-page^="red"] .pb-ubi__panel .btn--secondary:hover {
  background: #fff; border-color: #fff; color: var(--ink);
}

/* ---- Portada: "Busca por giro" como fichas ---- */
body[data-page^="red"] .red-giros { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; align-content: start; }
body[data-page^="red"] .red-giros a {
  flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 12px; min-height: 84px; padding: 14px 16px;
  border: 1px solid #ECE8E4; border-radius: 16px; background: #FAF9F7; font-size: 1.12rem; line-height: 1.15;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast), background var(--t-fast);
}
body[data-page^="red"] .red-giros a:hover { background: #fff; border-color: var(--red); transform: translateY(-2px); box-shadow: var(--shadow-paper); }
body[data-page^="red"] .red-giros a:hover span { text-decoration: none; }
body[data-page^="red"] .red-giros a small { font-family: var(--font-ui); font-weight: 600; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-mute); }
body[data-page^="red"] .red-giros a:not(.is-empty) small { background: var(--red-tint); color: var(--red-deep); font-weight: 700; padding: 3px 10px; border-radius: 999px; }
body[data-page^="red"] .red-giros a.is-empty { color: var(--ink-soft); }

/* ---- Portada: "Cómo se usa la Red" en tres columnas, título arriba y concepto abajo ---- */
body[data-page^="red"] .red-how { border-top: 0; padding-top: var(--sp-8); padding-bottom: var(--sp-8); }
body[data-page^="red"] .red-how h2 { font-size: var(--fs-xl); }
body[data-page^="red"] .red-how__list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--sp-4); counter-reset: paso; }
body[data-page^="red"] .red-how__list > div, body[data-page^="red"] .red-how__list > div:first-child {
  counter-increment: paso; display: block; grid-template-columns: none; padding: var(--sp-6); border: 0;
  background: var(--tarjeta); border-radius: 20px; box-shadow: var(--shadow-paper);
}
body[data-page^="red"] .red-how__list dt {
  display: flex; align-items: center; gap: 12px; margin-bottom: var(--sp-3);
  font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); line-height: 1; letter-spacing: .01em;
}
body[data-page^="red"] .red-how__list dt::before {
  content: counter(paso, decimal-leading-zero); flex: none; font: 800 .75rem/1 var(--font-head); letter-spacing: .12em;
  color: var(--red-deep); background: var(--red-tint); padding: 6px 10px; border-radius: 999px;
}
body[data-page^="red"] .red-how__list dd { font-size: 1rem; line-height: 1.6; max-width: none; }

/* ---- Portada: "Esto apenas empieza" ---- */
body[data-page^="red"] .red-move { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
body[data-page^="red"] .red-move__grid { gap: var(--sp-4); align-items: stretch; }
body[data-page^="red"] .red-move__grid > div {
  display: flex; flex-direction: column; align-items: flex-start; padding: var(--sp-6) var(--sp-6) var(--sp-8);
  background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .12); border-radius: 22px;
}
body[data-page^="red"] .red-move__grid h3 { font-family: var(--font-head); font-weight: 800; font-size: 1.6rem; line-height: 1.05; text-transform: none; letter-spacing: 0; }
body[data-page^="red"] .red-move__grid p { color: #E4DEDE; font-size: .98rem; line-height: 1.55; max-width: 40ch; }
body[data-page^="red"] .red-move__grid .btn { margin-top: auto; }
body[data-page^="red"] .red-move__lead { background: linear-gradient(135deg, #DB0632 0%, #96041F 100%) !important; border-color: transparent !important; }
body[data-page^="red"] .red-move__lead h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3.2rem); text-transform: uppercase; line-height: .98; }
body[data-page^="red"] .red-move__lead p { color: #fff; font-size: 1.05rem; }
body[data-page^="red"] .red-move__lead p.cintillo { background: rgb(255 255 255 / .2); border-radius: 999px; padding: 5px 12px; max-width: none; font-size: .72rem; letter-spacing: .12em; }
@media (min-width: 900px) { body[data-page^="red"] .red-move__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 3.5fr) minmax(0, 3.5fr); align-items: stretch; } }

/* ---- Muro: columna lateral con aire, fija al bajar ---- */
body[data-page^="red"] .red-side__block { padding: var(--sp-5); margin-bottom: var(--sp-4); }
body[data-page^="red"] .red-side__block h2 { font-size: 1.7rem; line-height: 1; }
body[data-page^="red"] .red-side .rubric { margin-bottom: var(--sp-2); }
body[data-page^="red"] .red-cats { gap: 2px; margin-left: calc(var(--sp-3) * -1); margin-right: calc(var(--sp-3) * -1); }
body[data-page^="red"] .red-cats a { border: 0; border-radius: 12px; padding: 10px var(--sp-3); font-family: var(--font-ui); font-weight: 600; font-size: .95rem; transition: background var(--t-fast); }
body[data-page^="red"] .red-cats a:hover { background: var(--lienzo); }
body[data-page^="red"] .red-cats a span { background: var(--lienzo); color: var(--ink-soft); padding: 2px 9px; border-radius: 999px; font-size: .75rem; font-weight: 700; }
body[data-page^="red"] .red-mini__item { border-bottom: 0; padding: var(--sp-2) 0; }
@media (min-width: 860px) {
  body[data-page^="red"] .red-cols--feed { align-items: start; }
  body[data-page^="red"] .red-side { position: sticky; top: calc(var(--header-h) + 70px); }
}

/* ---- Muro: publicaciones con más presencia ---- */
body[data-page^="red"] .red-post { padding: var(--sp-5); transition: box-shadow var(--t-med) var(--ease); }
body[data-page^="red"] .red-post:hover { box-shadow: 0 2px 4px rgb(29 29 27 / .06), 0 18px 34px -18px rgb(29 29 27 / .34); }
body[data-page^="red"] .red-post p, body[data-page^="red"] .post__text { font-size: 1.05rem; line-height: 1.6; }
body[data-page^="red"] .red-composer, body[data-page^="red"] .composer { box-shadow: 0 2px 4px rgb(29 29 27 / .05), 0 16px 32px -20px rgb(29 29 27 / .3); }
body[data-page^="red"] .red-empty-card { padding: var(--sp-10) var(--sp-6); text-align: center; background: var(--tarjeta); border: 1.5px dashed #D6D2CB; box-shadow: none; }
body[data-page^="red"] .red-empty-card h2, body[data-page^="red"] .red-empty-card h3 { font-family: var(--font-ui); font-weight: 800; text-transform: none; font-size: 1.3rem; letter-spacing: -.01em; }

/* ==========================================================================
   Portada de la Red: titular más sereno, buscador limpio y mapa como tarjeta
   ========================================================================== */
body[data-page^="red"] .red-landing { border-bottom: 0; }
body[data-page^="red"] .red-landing__copy h1 { font-size: clamp(2.4rem, 1rem + 4.2vw, 4.4rem); line-height: .98; }
body[data-page^="red"] .red-landing__copy .dek { max-width: 34em; }

/* Buscador: dos campos sin cajas dentro de la caja */
body[data-page^="red"] .red-landing__copy .searchbar { border: 0; border-radius: 22px; box-shadow: var(--shadow-paper); }
body[data-page^="red"] .searchbar input, body[data-page^="red"] .searchbar__input {
  border: 0; border-radius: 0; background: transparent; box-shadow: none; padding-left: 0;
}
body[data-page^="red"] .searchbar input:focus { outline: none; box-shadow: none; }
body[data-page^="red"] .searchbar__field { border-radius: 0; transition: background var(--t-fast); }
body[data-page^="red"] .searchbar__field:focus-within { background: var(--red-tint); outline: none; }
body[data-page^="red"] .searchbar__field label { color: var(--ink-mute); }
body[data-page^="red"] .red-landing__copy .searchbar .searchbar__field,
body[data-page^="red"] .red-landing__copy .searchbar .red-locate { border-color: #EFEBE8; }
body[data-page^="red"] .red-landing__copy .searchbar .searchbar__submit { margin: 12px; border-radius: 999px; }
body[data-page^="red"] .red-locate { border-radius: 0; }

/* Mapa de la Red: tarjeta oscura con aire, no una pared negra */
.cm { --cm-rule: rgb(255 255 255 / .12); --cm-d0: #7E786D; --cm-d1: #ABA394; --cm-d2: #CDC4B2; }
.cm-e { fill: rgb(255 255 255 / .04); stroke: #6B665E; stroke-width: .7; }
.cm .cm-mapa .cm-e:hover { fill: rgb(255 255 255 / .1); stroke: #B7B0A4; }
.cm .cm-mapa .cm-e.cm-on { fill: rgb(219 6 50 / .2); stroke: #fff; }
.cm .cm-mapa .cm-e.cm-sel { fill: rgb(219 6 50 / .34); stroke: var(--cm-red); }
.cm-puntos circle { r: 1.3px; }
.cm-tag { border-radius: 999px; padding: 3px 9px 2px; }
.cm-btn { border-radius: 999px; border-width: 1.5px; padding: 0 22px; border-color: rgb(255 255 255 / .7); transition: background var(--t-fast), color var(--t-fast); }
.cm-leyenda { background: rgb(255 255 255 / .07); padding: 7px 14px; border-radius: 999px; }
body[data-page^="red"] .red-landing__mapa .cm {
  border-radius: 28px; padding: clamp(18px, 2.2vw, 28px); overflow: hidden; box-shadow: var(--shadow-pop);
  background: radial-gradient(130% 90% at 72% 0%, #3A3835 0%, #232220 48%, #1D1D1B 100%);
}
body[data-page^="red"] .red-landing__mapa .cm-cuerpo { gap: 16px; }
body[data-page^="red"] .red-landing__mapa .cm-panel {
  padding: 18px 20px 16px; border-radius: 20px; background: rgb(255 255 255 / .06); border: 1px solid rgb(255 255 255 / .09);
}
body[data-page^="red"] .red-landing__mapa .cm-nombre { font-size: clamp(2rem, 1.5rem + 1.2vw, 2.7rem); }
body[data-page^="red"] .red-landing__mapa .cm-perfiles { border-top-color: rgb(255 255 255 / .1); }
body[data-page^="red"] .red-landing__mapa .cm-perfiles li { padding: 9px 0; border-bottom-color: rgb(255 255 255 / .08); }
body[data-page^="red"] .red-landing__mapa .cm-perfiles li:last-child { border-bottom: 0; }
body[data-page^="red"] .red-landing__mapa .cm-pie { margin-top: 16px; }
body[data-page^="red"] .red-landing__mapa .cm-nota { margin-top: 12px; }
@media (min-width: 960px) {
  body[data-page^="red"] .red-landing__in { align-items: center; }
  body[data-page^="red"] .red-landing__mapa .cm-perfiles li:nth-child(n+3) { display: none; }
}
body[data-page^="red"] .red-landing__mapa .cm-nota { font-size: .78rem; opacity: .85; }
/* El contenedor del mapa tenía fondo de tinta cuadrado detrás de la tarjeta redonda */
body[data-page^="red"] .red-landing__mapa { border-radius: 28px; }
body[data-page^="red"] .red-landing__mapa:has(#p-mapa-c-hero.cm) { background: transparent; }

/* ==========================================================================
   Menos pesado (segunda pasada) en /red
   ========================================================================== */
body[data-page^="red"] { --lienzo: #F7F5F2; --shadow-paper: 0 1px 2px rgb(29 29 27 / .05), 0 10px 26px -16px rgb(29 29 27 / .16); }
body[data-page="red"] .red-alta-sec { background: var(--tarjeta); border-top: 0; }
body[data-page="red"] .red-how.band { background: transparent; border-top: 1px solid #E2DFD9; }

/* "Únete" de la subnavegación: la única pieza roja de la barra */
body[data-page^="red"] .red-subnav__list li[data-guest] a { background: var(--red); color: #fff; }
body[data-page^="red"] .red-subnav__list li[data-guest] a:hover { background: var(--red-deep); }

/* Directorio: tarjetas que invitan y avatares claros mientras llega la foto */
body[data-page^="red"] .red-results article.listing { transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
body[data-page^="red"] .red-results article.listing:hover { box-shadow: var(--shadow-pop); transform: translateY(-2px); }
body[data-page^="red"] .avatar:has(> img) { background: var(--paper-3); }
body[data-page^="red"] .listing .avatar { box-shadow: 0 0 0 3px var(--tarjeta), 0 0 0 4px #E4DEDC; }

/* Perfil: estados vacíos sin caja con sombra dentro de otra caja con sombra */
body[data-page^="red"] .red-sec .red-empty-card { box-shadow: none; background: var(--lienzo); border: 1px dashed #D6D2CB; padding: var(--sp-4); }
body[data-page^="red"] .red-sec .red-empty-card h3 { font-size: var(--fs-lg); color: var(--ink-soft); }

/* Muro de la portada y anuncios menos densos */
body[data-page="red"] #p-posts > p.dek { border: 1px solid #E2DFD9; border-radius: var(--r-2); background: var(--tarjeta); padding: var(--sp-4); }
body[data-page^="red"] .rvd-ad--busca, body[data-page^="red"] .rvd-ad--ofrezco { border-top-width: 4px; }
body[data-page^="red"] .rvd-part { border-left-width: 3px; }

/* ==========================================================================
   Contenido de las publicaciones: galería de fotos, video incrustado y documento
   ========================================================================== */
/* Caja para publicar: varias fotos, enlace de video y documento */
.red-composer__preview--multi { display: flex; flex-wrap: wrap; gap: 10px; width: auto; max-width: none; }
.red-composer__preview--multi figure { position: relative; margin: 0; width: 112px; }
.red-composer__preview--multi img { width: 112px; height: 112px; max-height: none; border: 0; border-radius: 12px; object-fit: cover; }
.red-composer__preview--multi button { right: -8px; top: -8px; width: 28px; height: 28px; }
.red-composer__video { margin: 0 var(--sp-4) var(--sp-4); }
#pub-doc { max-width: 220px; }

/* Galería: 1 foto grande; 2, 3 o 4 en cuadrícula */
.red-gallery { display: grid; gap: 6px; margin-top: var(--sp-3); border-radius: 14px; overflow: hidden; }
.red-gallery a { display: block; background: var(--paper-2, #F4F1EE); }
.red-gallery img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.red-gallery--1 img { max-height: 520px; height: auto; }
.red-gallery--2 { grid-template-columns: 1fr 1fr; }
.red-gallery--2 img, .red-gallery--3 img, .red-gallery--4 img { aspect-ratio: 1 / 1; }
.red-gallery--3 { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
.red-gallery--3 a:first-child { grid-row: 1 / span 2; }
.red-gallery--3 a:first-child img { aspect-ratio: auto; }
.red-gallery--4 { grid-template-columns: 1fr 1fr; }

/* Video: no carga nada del proveedor hasta que la persona toca «Ver video» */
.red-video { margin-top: var(--sp-3); }
.red-video--horizontal .red-video__play, .red-video--horizontal iframe { aspect-ratio: 16 / 9; }
.red-video--vertical .red-video__play, .red-video--vertical iframe { aspect-ratio: 9 / 14; max-width: 360px; }
.red-video__play { display: grid; place-content: center; justify-items: center; gap: 4px; width: 100%; padding: var(--sp-5); border: 0; border-radius: 14px; background: linear-gradient(135deg, #1D1D1B, #3b3b38); color: #fff; cursor: pointer; text-align: center; }
.red-video__play .icon { width: 44px; height: 44px; padding: 12px; border-radius: 50%; background: var(--red, #DB0632); }
.red-video__play span { font-weight: 700; font-size: 1.0625rem; }
.red-video__play small { color: rgb(255 255 255 / .75); font-size: .8125rem; }
.red-video__play:hover .icon, .red-video__play:focus-visible .icon { background: #fff; color: var(--red, #DB0632); }
.red-video iframe { display: block; width: 100%; border: 0; border-radius: 14px; background: #000; }
.red-video__link { display: inline-block; margin-top: 6px; font-size: .8125rem; color: var(--ink-soft, #4a4a47); }

/* Documento adjunto o del perfil */
.red-docs { display: grid; gap: 10px; }
.red-doc { display: flex; align-items: center; gap: 12px; margin-top: var(--sp-3); padding: 12px 14px; border: 1px solid #E4DEDC; border-radius: 14px; background: #fff; }
.red-docs .red-doc { margin-top: 0; }
.red-doc__ico { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 10px; background: var(--red-tint, #FDECEF); color: var(--red, #DB0632); }
.red-doc__ico .icon { width: 20px; height: 20px; }
.red-doc__txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.red-doc__txt strong { overflow-wrap: anywhere; }
.red-doc__txt small { color: var(--ink-mute, #615B5B); }
.red-doc__acts { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 520px) { .red-doc { flex-wrap: wrap; } .red-doc > .btn { margin-left: 52px; } }

/* ==========================================================================
   Mi perfil: secciones plegables más amables
   Icono en círculo suave + título en tipografía normal + una línea de ayuda; tarjetas más bajas.
   (Antes: títulos en Anton y mayúsculas a tamaño de portada, que pesaban en el celular.)
   ========================================================================== */
body[data-page^="red"] .red-sec { border-top: 0; margin-top: 0; padding: 0; margin-bottom: var(--sp-3); overflow: hidden; }
body[data-page^="red"] .red-sec > summary { justify-content: flex-start; gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4); transition: background-color var(--t-fast) var(--ease); }
body[data-page^="red"] .red-sec > summary:hover { background: #FBF9F6; }
body[data-page^="red"] .red-sec > summary > .icon { margin-left: auto; color: var(--ink-soft); }
body[data-page^="red"] .red-sec[open] > summary { border-bottom: 1px solid #EFEBE6; }
body[data-page^="red"] .red-sec > summary h2 { font-family: var(--font-ui); font-size: 1.0625rem; font-weight: 700; letter-spacing: 0; text-transform: none; line-height: 1.25; }
body[data-page^="red"] .red-sec__ico { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--red-tint, #FDE8EC); color: var(--red, #DB0632); display: grid; place-items: center; }
body[data-page^="red"] .red-sec__ico .icon { width: 20px; height: 20px; transform: none; }
body[data-page^="red"] .red-sec__txt { display: grid; gap: 2px; min-width: 0; }
body[data-page^="red"] .red-sec__txt small { font-size: .8125rem; line-height: 1.3; color: var(--ink-soft); font-weight: 400; }
body[data-page^="red"] .red-sec__body { padding: var(--sp-4); max-width: none; }
@media (min-width: 900px) { body[data-page^="red"] .red-sec__body { padding: var(--sp-5); } }
body[data-page^="red"] .red-sec:first-of-type { margin-top: var(--sp-4); }