/* ==========================================================================
   Afinado general del sitio: menos tosco, igual de RED DE NEGOCIOS.
   Sin cambiar la estructura de ninguna página: solo esquinas, líneas, sombras, escala de los
   titulares y botones. Se queda lo que identifica a la revista: el rojo, el negro tinta, Anton en
   los titulares, las etiquetas condensadas en mayúsculas y "una palabra en rojo".
   Qué cambia:
     · Esquinas suaves (antes todo era recto como papel impreso) y botones tipo píldora.
     · Los filetes de 3–4 px pasan a 2 px; las cajas con marco negro pasan a marco fino o sombra suave.
     · Titulares gigantes un paso más chicos y con mejor ritmo; más aire entre secciones.
     · Sombras suaves en lugar de la sombra dura desplazada.
   Lo carga shell.js al final del <head> (antes de red-app.css y tarifas.css), salvo en el
   comparador de opciones/, que no se toca.
   ========================================================================== */
:root {
  /* Esquinas y sombras */
  --r-1: 8px;
  --r-2: 14px;
  --shadow-paper: 0 1px 2px rgb(29 29 27 / .06), 0 12px 28px -16px rgb(29 29 27 / .30);
  --shadow-pop: 0 20px 44px -18px rgb(29 29 27 / .38);

  /* Filetes: el negro se queda, pero más fino */
  --line-2: 1.5px solid var(--ink);
  --line-4: 2px solid var(--ink);
  --line-soft: 1px solid #E4DEDC;

  /* Escala de los titulares: un paso más chica arriba */
  --fs-2xl: clamp(2rem, 1.45rem + 2.4vw, 3.3rem);
  --fs-3xl: clamp(2.5rem, 1.3rem + 4.6vw, 4.6rem);
  --fs-4xl: clamp(2.75rem, 1.1rem + 8vw, 7rem);

  /* Más aire entre secciones */
  --section: clamp(3rem, 2.2rem + 4.6vw, 6.25rem);
}

/* ---- Titulares: mejor ritmo, sin renglones sueltos ---- */
h1, h2, h3 { text-wrap: balance; }
.display, h1, h2 { line-height: 1.02; }

/* ---- Botones: píldora, sombra suave al pasar el cursor ---- */
.btn { border-radius: 999px; letter-spacing: .03em; }
.btn--secondary { border-width: 1.5px; }
.btn--primary:hover, .btn--network:hover { box-shadow: 0 12px 22px -12px rgb(168 4 42 / .7); transform: translateY(-1px); }
.btn--dark:hover { box-shadow: 0 12px 22px -12px rgb(29 29 27 / .6); transform: translateY(-1px); }
.btn--secondary:hover, .btn--white:hover { box-shadow: 0 12px 22px -14px rgb(29 29 27 / .5); transform: translateY(-1px); }
.on-ink .btn--primary:hover, .on-ink .btn--network:hover, .band--ink .btn--primary:hover { box-shadow: 0 12px 24px -12px rgb(0 0 0 / .8); }
.btn:active { box-shadow: none; transform: translateY(0); }

/* ---- Campos, fichas e insignias ---- */
.input, .select, .textarea, input[type="text"], input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="url"], input[type="number"], select, textarea { border-radius: 10px; }
.badge, .chip, .tag { border-radius: 999px; }

/* ---- Cajas con marco negro grueso: marco fino y esquinas ---- */
.searchbar { border-width: 2px; border-radius: 18px; overflow: hidden; }
.vid-search { border-width: 2px; border-radius: 18px; overflow: hidden; }
.vid-reg { border-width: 2px; border-radius: var(--r-2); }
.card-plan { border-radius: 18px; }
.card-plan--featured { border-width: 2px; }
.mb-table-wrap { border-radius: var(--r-2); overflow: hidden; }
.mb-kit { border-radius: 12px; }
.mb-tar { border-top-width: 2px; }

/* ---- Imágenes y portadas: esquinas y sombra suave ---- */
.card-article__media, .card-video__media, .card-edition__cover, .media, .cover, .figure img { border-radius: var(--r-1); overflow: hidden; }
.card-edition__cover img, .cover img { border-radius: var(--r-1); }
.cover, .cover--flat { box-shadow: 0 2px 4px rgb(29 29 27 / .10), 0 18px 30px -18px rgb(29 29 27 / .5); }
.cover--flat { box-shadow: none; }

/* ---- Filetes de sección: más finos ---- */
.rubric { border-top-width: 1.5px; }
.rule { border-top-width: 2px; }

/* ---- Perfil: ubicación y "Cerca" (perfil-b.css) ---- */
.pb-ubi__panel { border-radius: 26px; padding: clamp(24px, 4vw, 56px); }
.pb-ubi__h { font-size: clamp(2.2rem, 1rem + 4.2vw, 4.6rem); line-height: .96; }
.pb-ubi__h--load { font-size: var(--fs-2xl); }
.pb-cerca__list { border-top: 0; display: grid; gap: 10px; }
.pb-cerca__li { border: 1px solid #E8E3E3; border-radius: 16px; background: #fff; overflow: hidden; transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.pb-cerca__li:hover { box-shadow: var(--shadow-paper); transform: translateY(-1px); }
.pb-cerca__a { padding: 16px 20px; }
.pb-cerca__a:hover { box-shadow: none; }
.pb-cerca__name { font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); }
.pb-empty { border: 1.5px dashed #CFC9C7; border-radius: 16px; }

/* ---- Membresías: tarjetas de planes y tabla ---- */
.mb-card { border-radius: 20px; border-color: #E4DEDC; background: #fff; box-shadow: var(--shadow-paper); }
.mb-card--recomendado { border-color: var(--red); border-radius: 20px; box-shadow: 0 2px 4px rgb(219 6 50 / .08), 0 22px 40px -22px rgb(219 6 50 / .55); }
.mb-card--directa { border-color: #E4DEDC; background: var(--paper-2); box-shadow: none; }
.mb-card--promo { border: 1px solid #E4DEDC; border-top: 5px solid var(--red); border-radius: 20px; overflow: hidden; }
.mb-tag { border-radius: 999px; padding: .3rem .7rem; }
.mb-promo { border-radius: 12px; overflow: hidden; }
.mb-kit { border-radius: 14px; }
.mb-prox { border-radius: 0; }
.mb-table-wrap { border-color: #E4DEDC; }

/* ---- Portada de la revista (pages-home-b.css) ---- */
.hb-btn { border-radius: 999px; border-width: 1.5px; padding-inline: 26px; transition: background-color .15s, color .15s, box-shadow .15s, transform .15s; }
.hb-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 22px -14px rgb(29 29 27 / .55); }
.hb-folio, .hb-gratis, .hb-tarifa__fallback { border-top-width: 2px; }
.hb-muro__label { border-top-width: 4px; }
.hb-muro__hint { border-left-width: 3px; }
.hb-cv img, .hb-cv { border-radius: 3px; }

/* ---- Cita destacada ---- */
.pull { border-top-width: 2px; }

/* Folio sobre rojo: blanco (el rosa daba 3.8:1) */
.on-red .folio, .band--red .folio { color: #fff; }
.card-plan { overflow: hidden; }


/* ==========================================================================
   Menos pesado (segunda pasada): pie, bandas de tinta, filetes y tabla de membresías
   ========================================================================== */
/* ---- Pie: el lema deja de ocupar media pantalla ---- */
.site-footer .motto--xl { font-size: clamp(1.75rem, 1rem + 3.4vw, 3.25rem); color: rgb(255 255 255 / .92); }
.site-footer { padding-top: var(--sp-10); }
.footer__top { padding-bottom: var(--sp-8); }

/* ---- Bandas de tinta como tarjetas, no como losas de borde a borde ---- */
.band--ink { margin-inline: clamp(8px, 2vw, 28px); border-radius: 26px; }
.rev-red-band { margin-inline: clamp(8px, 2vw, 28px); border-radius: 26px; }
.hb-page .rev-red-band .rev-red__logo { box-shadow: var(--shadow-paper); border-radius: var(--r-1); }

/* ---- Filetes y sombras duras a su medida ---- */
:root { --line-2: 1px solid var(--ink); --line-4: 1.5px solid var(--ink); }
.rubric { border-top-width: 1px; }
.facts { border-top-width: 2px; }
.hb-page .rev-news { border-top-width: 3px; }
.mb-card--promo { border-top-width: 4px; }
.hb-muro__label { border-top-width: 3px; }
.mb-tar, .hb-folio, .hb-gratis, .hb-tarifa__mod .mb-tar { border-top-width: 2px; }
.rev-pull { border-top-width: 2px; }
.mb-prox { border-radius: 14px; border-inline: 0; }
.hb-btn:hover, .hb-btn:focus-visible { box-shadow: 0 12px 22px -14px rgb(29 29 27 / .55); transform: translateY(-1px); }
.hb-btn--red:hover, .hb-btn--red:focus-visible { box-shadow: 0 12px 22px -12px rgb(168 4 42 / .7); }

/* ---- Tabla de membresías: cabecera de papel con filete, no un bloque de tinta ---- */
.mb-table thead th { background: var(--paper-2); color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.mb-table thead th .mb-tag:not(.mb-tag--rec) { color: var(--ink); }
.mb-table thead th.mb-col--recomendado { background: var(--red-tint); box-shadow: inset 0 3px 0 var(--red); }

/* ---- Botones un punto menos pesados ---- */
.btn { border-width: 1.5px; }
.btn--lg { min-height: 52px; font-size: 1.125rem; padding: .85rem 1.6rem; }
.card-plan--featured, .vid-reg { border-width: 1.5px; }
.mb-table thead th .mb-lanza-t { color: var(--red-deep); opacity: 1; }
.mb-table thead th small { opacity: 1; color: var(--ink-soft); }
.mb-table thead th .mb-mes { opacity: 1; color: var(--ink-soft); }

/* Tabla de tarifas de la portada de la revista: misma cabecera clara */
.hb-tarifa__mod .mb-table thead th { background: var(--paper-2); color: var(--ink); border-bottom: 1.5px solid var(--ink); }
.hb-tarifa__mod .mb-table thead th small, .hb-tarifa__mod .mb-table thead th .mb-mes { color: var(--ink-soft); }
.hb-tarifa__mod .mb-table thead th .mb-lanza-t { color: var(--red-deep); }
.hb-tarifa__mod .mb-table thead th.mb-col--recomendado { background: var(--red-tint); box-shadow: inset 0 4px 0 var(--red); }
.hb-page .rev-red-band .folio { color: #fff; }


/* ==========================================================================
   Tercera pasada: más suave (todo el sitio)
   La estructura y la marca no cambian: solo se baja la dureza de los trazos. El negro se queda para el texto,
   los botones llenos y los filetes que abren cada sección; los bordes de botones y campos pasan a un gris cálido
   y las líneas entre filas, a un gris claro. En fondos oscuros o rojos todo se queda en blanco, como antes.
   ========================================================================== */
:root { --trazo-suave: #CFCAC2; --trazo-fino: #E4DEDC; }

/* ---- Botón secundario: borde gris cálido; al pasar el cursor se llena de tinta ---- */
.btn--secondary { border-color: var(--trazo-suave); }
.btn--secondary:hover { border-color: var(--ink); }
.on-ink .btn--secondary, .on-red .btn--secondary, .red-move .btn--secondary { border-color: #fff; }

/* ---- Campos: borde fino y gris; al enfocar, tinta con su aro (rdn.css) ---- */
.input, .select, .textarea { border-width: 1.5px; border-color: var(--trazo-suave); }

/* ---- Filtros en píldora: borde gris; el seleccionado se queda negro y lleno ---- */
.chip { border-color: var(--trazo-suave); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-selected { border-color: var(--ink); }

/* ---- Listas tipo tabla (datos, preguntas, cifras, ficha): líneas claras entre filas ---- */
.com-faq details, .com-line, .com-data__row, .vid-statlist > div, .rev-facts > div { border-bottom-color: var(--trazo-fino); }
.on-ink .com-faq details, .on-ink .com-line, .on-ink .com-data__row, .on-ink .vid-statlist > div, .on-ink .rev-facts > div { border-bottom-color: rgb(255 255 255 / .25); }

/* ---- Etiqueta amarilla del directorio: redondeada y sin marco negro ---- */
.red-hero__tab { border: 0; border-radius: 0 0 12px 12px; box-shadow: 0 6px 14px -10px rgb(29 29 27 / .45); }

/* ---- Portada: la tira de "tinta y rojo" es de imprenta; en el celular solo estorba ---- */
@media (max-width: 720px) { .hb-tira { display: none; } }

/* ---- Portada: botones de contorno con el mismo trazo suave (el rojo lleno no cambia) ---- */
.hb-btn:not(.hb-btn--red) { border-color: var(--trazo-suave); }
.hb-btn:not(.hb-btn--red):hover, .hb-btn:not(.hb-btn--red):focus-visible { border-color: var(--hb-ink); }