/* ==========================================================================
   RDN · La Revista Red de Negocios · Sistema de diseño v1
   Concepto: "Una palabra en rojo". Igual que el logotipo (RED en rojo, el resto
   en tinta), cada titular lleva una sola palabra en rojo (.t-red). Titulares
   condensados enormes, filetes de tinta, folios y cintillos de portada.

   ÍNDICE
   1. Variables (colores, tipografía, espaciado, radios, líneas, sombras)
   2. Reset y base
   3. Tipografía editorial (display, kicker, bajada, pie de foto, prosa)
   4. Retícula y utilidades
   5. Iconos, cintillo, rúbrica, folio, lema
   6. Botones, enlaces, insignias
   7. Cabecera, navegación, buscador, pie de página, banner de vista previa
   8. Héroes
   9. Tarjetas (artículo, video, edición, evento, producto, plan)
  10. Calificación, avatar, perfil, publicación, caja de publicar
  11. Pestañas, fichas, búsqueda, directorio, mapa
  12. Formularios
  13. Modal, panel lateral, toast, avisos
  14. Tablas, tarifas, paginación, migas de pan
  15. Animación (una sola secuencia de entrada) y preferencias de usuario
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   Un solo tema claro. Todo color vive aquí; no se usan colores sueltos abajo.
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marca */
  --red: #DB0632;          /* rojo del logotipo. Blanco sobre él: 5.1:1 (AA) */
  --red-deep: #A8042A;     /* texto rojo sobre blanco, hover, errores: 7.7:1 */
  --red-tint: #FCEBEE;     /* fondo de aviso, selección, hover suave */
  --ink: #1D1D1B;          /* negro tinta del logotipo */

  /* Neutros con matiz hacia el rojo (papel) */
  --paper: #FFFFFF;
  --paper-2: #F5F2F2;
  --paper-3: #E8E3E3;
  --rule-soft: #D5CECE;
  --ink-soft: #3D3939;     /* texto secundario: 11.4:1 sobre blanco */
  --ink-mute: #615B5B;     /* metadatos: 6.7:1 sobre blanco, 6.0:1 sobre paper-2 */

  /* Neutros con matiz hacia el azul (mapas, soportes, avisos informativos) */
  --steel: #E7ECF1;
  --steel-2: #C8D2DC;
  --steel-ink: #27384A;

  /* Amarillo: SOLO estrellas y sección amarilla del directorio */
  --yellow: #FFC928;
  --yellow-soft: #FFF3C0;
  --yellow-ink: #6E4B00;   /* texto sobre amarillo suave: 6.9:1 */
  --star: #B07400;         /* encendida, rellena: 3.93:1 sobre blanco (antes #F5A800, 2:1) */
  --star-off: #767070;     /* apagada, solo contorno: 4.86:1 sobre blanco; el estado se distingue por forma, no solo por color */
  --star-outline: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6l2.9 6.1 6.7.8-4.9 4.6 1.3 6.6L12 17.3l-6 3.4 1.3-6.6-4.9-4.6 6.7-.8z' fill='none' stroke='%23000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  --star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.2 6.7 7.3.9-5.4 5 1.4 7.3L12 18.1l-6.5 3.6 1.4-7.3-5.4-5 7.3-.9z'/%3E%3C/svg%3E");

  /* Semánticos */
  --ok: #0D7A45;
  --ok-tint: #E2F3E9;
  --err: var(--red-deep);
  --err-tint: var(--red-tint);
  --info: #24506F;
  --info-tint: #E5EDF3;

  /* Asignación semántica */
  --bg: var(--paper);
  --fg: var(--ink);
  --fg-2: var(--ink-soft);
  --fg-mute: var(--ink-mute);
  --focus: var(--ink);

  /* Tipografía (solo Google Fonts; con pilas de respaldo) */
  --font-display: "Anton", "League Gothic", Impact, "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --font-head: "Barlow Condensed", "Roboto Condensed", "Arial Narrow", "Helvetica Neue Condensed", sans-serif;
  --font-ui: "Barlow", "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-text: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;

  /* Escala tipográfica (fluida, móvil primero) */
  --fs-xs: 0.75rem;                                   /* 12 */
  --fs-sm: 0.875rem;                                  /* 14 */
  --fs-base: 1rem;                                    /* 16 */
  --fs-md: 1.125rem;                                  /* 18 */
  --fs-lg: 1.375rem;                                  /* 22 */
  --fs-xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);  /* 26 → 36 */
  --fs-2xl: clamp(2.125rem, 1.4rem + 3vw, 3.75rem);   /* 34 → 60 */
  --fs-3xl: clamp(2.75rem, 1.2rem + 6.5vw, 6rem);     /* 44 → 96 */
  --fs-4xl: clamp(3rem, 0.9rem + 11vw, 9.5rem);       /* 48 → 152 */

  /* Espaciado: base de 4 px */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --gap: 16px;
  --section: clamp(2.5rem, 2rem + 4vw, 5.5rem);
  --maxw: 1360px;
  --measure: 66ch;

  /* Radios: casi todo es recto, como papel impreso. Solo fichas y avatares redondean */
  --r-0: 0;
  --r-1: 2px;
  --r-2: 4px;
  --r-pill: 999px;
  --r-round: 50%;

  /* Líneas (filetes) */
  --line: 1px solid var(--ink);
  --line-2: 2px solid var(--ink);
  --line-4: 4px solid var(--ink);
  --line-soft: 1px solid var(--rule-soft);

  /* Sombras mínimas */
  --shadow-paper: 0 1px 1px rgb(29 29 27 / 0.14), 0 12px 20px -14px rgb(29 29 27 / 0.55);
  --shadow-pop: 0 14px 30px -10px rgb(29 29 27 / 0.38);

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 140ms;
  --t-med: 260ms;

  /* Capas */
  --z-header: 50;
  --z-toast: 90;

  --header-h: 60px;
}

@media (min-width: 768px) {
  :root { --gap: 24px; --header-h: 68px; }
}
@media (min-width: 1200px) {
  :root { --gap: 32px; --header-h: 76px; }
}

/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: none;      /* evita que Barlow convierta -- en raya larga */
  font-feature-settings: "calt" 0, "liga" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* red de seguridad: nunca scroll horizontal de página */
}
body.is-locked { overflow: hidden; }

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
table { border-collapse: collapse; width: 100%; }
code, kbd, pre { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 0.88em; }
hr { border: 0; border-top: var(--line); margin: var(--sp-8) 0; }
[hidden] { display: none !important; }
::selection { background: var(--red); color: #fff; }

/* Foco de teclado visible en todo (claro sobre fondos oscuros con .on-ink) */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.on-ink, .on-red { --focus: #fff; }

/* Texto solo para lector de pantalla */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Enlace para saltar al contenido (lo inyecta shell.js) */
.skip-link {
  position: absolute;
  left: 16px; top: -100px;
  z-index: 200;
  padding: var(--sp-3) var(--sp-4);
  background: var(--ink); color: #fff;
  font-weight: 600;
}
.skip-link:focus { top: 8px; }
/* Destino del salto: recibe el foco por código, sin recuadro alrededor de toda la página */
main[tabindex="-1"]:focus { outline: none; }

/* ==========================================================================
   3. TIPOGRAFÍA EDITORIAL
   .display  Titular gigante de portada (Anton, versalitas por mayúsculas)
   h1/.h1 .. h2/.h2  Anton en mayúsculas. h3/.h3 .. h5  Barlow Condensed
   .t-red    La palabra en rojo de cada titular. UNA por titular.
   .kicker   Antetítulo de sección (Barlow Condensed, mayúsculas, rojo)
   .dek      Bajada
   .byline   Crédito del autor y fecha
   .caption  Pie de foto con .credit
   .prose    Cuerpo de artículo en serif de lectura
   ========================================================================== */
.display, h1, .h1, h2, .h2 {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0.004em;
  overflow-wrap: break-word;
  hyphens: manual;
  text-wrap: balance;
  padding-top: 0.06em;     /* deja respirar las tildes de las mayúsculas */
}
.display { font-size: var(--fs-4xl); line-height: 0.95; }
h1, .h1 { font-size: var(--fs-3xl); line-height: 0.97; }
h2, .h2 { font-size: var(--fs-2xl); }

h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
h3, .h3 { font-size: var(--fs-xl); }
h4, .h4 { font-size: var(--fs-lg); }
h5, .h5 { font-size: var(--fs-md); }

.t-red { color: var(--red); }
.on-red .t-red { color: var(--ink); }           /* sobre rojo, la palabra clave pasa a tinta (solo tamaños grandes) */
.on-ink .t-red--lift { color: var(--red); }       /* sobre tinta, en titulares grandes, el rojo de marca (3.3:1 permitido para texto grande); sin tonos rosados */

.kicker {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}
.on-ink .kicker { color: #FF8CA0; }
.on-red .kicker { color: #fff; }

.dek {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: 1.45;
  color: var(--fg-2);
  max-width: 48ch;
}
.dek--lg { font-size: clamp(1.1875rem, 1rem + 0.9vw, 1.5rem); }
.on-ink .dek { color: #E4DEDE; }
.on-red .dek { color: #fff; }

.byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--fg-mute);
}
.byline strong { color: var(--fg); font-weight: 600; }

.meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--fg-mute);
}
/* Separador de nodo (el punto del lema), heredado del logotipo */
.meta > * + *::before,
.dot-sep > * + *::before {
  content: "\2022";
  margin-right: var(--sp-2);
  color: var(--red);
}

.caption {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--fg-2);
  padding-top: var(--sp-2);
  border-top: var(--line);
  margin-top: var(--sp-2);
}
.caption .credit {
  display: block;
  margin-top: 2px;
  font-family: var(--font-head);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-mute);
}

.prose {
  font-family: var(--font-text);
  font-size: var(--fs-md);
  line-height: 1.7;
  max-width: var(--measure);
  font-optical-sizing: auto;
}
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3 { margin-top: 1.8em; }
.prose h2 { font-size: var(--fs-xl); }
.prose a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:hover { color: var(--red-deep); }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose ol { list-style: decimal; padding-left: 1.4em; }
.prose li + li { margin-top: 0.4em; }
/* Capitular de revista: opcional en el primer párrafo */
.prose--dropcap > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-size: 4.6em;
  line-height: 0.8;
  padding: 0.06em 0.1em 0 0;
  color: var(--red);
}

/* Cita destacada */
.pull {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xl);
  line-height: 1.1;
  padding: var(--sp-4) 0;
  border-top: var(--line-4);
  border-bottom: var(--line);
  text-wrap: balance;
}
.pull cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-style: normal;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red-deep);
}

/* Cifra de revista: dato grande con rótulo (se usa en tira de cifras) */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--line-4); }
.facts > div { padding: var(--sp-4) var(--sp-3) var(--sp-4) 0; border-bottom: var(--line); }
.facts dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); order: 2; }
.facts dd { font-family: var(--font-display); font-size: var(--fs-2xl); line-height: 1; order: 1; }
.facts > div { display: flex; flex-direction: column; gap: var(--sp-1); }
@media (min-width: 768px) {
  .facts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .facts > div { border-bottom: 0; border-right: var(--line); padding-left: var(--sp-4); }
  .facts > div:first-child { padding-left: 0; }
  .facts > div:last-child { border-right: 0; }
}

/* ==========================================================================
   4. RETÍCULA Y UTILIDADES
   .wrap        Contenedor externo con márgenes seguros (mínimo 16 px)
   .wrap--read  Columna de lectura
   .section     Bloque vertical con aire
   .band        Franja de fondo (--paper-2, --ink, --red)
   .grid        Columnas iguales: .grid--2 .grid--3 .grid--4
   .grid-12     Retícula de 12 columnas con .s-N (span) y .st-N (inicio) desde 900 px
   ========================================================================== */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 768px) {
  .wrap {
    padding-left: max(32px, env(safe-area-inset-left, 0px));
    padding-right: max(32px, env(safe-area-inset-right, 0px));
  }
}
@media (min-width: 1200px) {
  .wrap {
    padding-left: max(48px, env(safe-area-inset-left, 0px));
    padding-right: max(48px, env(safe-area-inset-right, 0px));
  }
}
.wrap--read { max-width: calc(var(--measure) + 96px); }
.wrap--wide { max-width: 1600px; }

.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--tight { padding-top: calc(var(--section) * 0.5); padding-bottom: calc(var(--section) * 0.5); }

.band { background: var(--paper-2); }
.band--ink { background: var(--ink); color: #fff; }
.band--red { background: var(--red); color: #fff; }
.band--tint { background: var(--red-tint); }
.band--ink, .band--red { --focus: #fff; }

.grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.grid > * { min-width: 0; }
@media (min-width: 640px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.grid--rows { row-gap: var(--sp-8); }

.grid-12 { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.grid-12 > * { min-width: 0; }
@media (min-width: 900px) {
  .grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .s-3 { --span: 3; } .s-4 { --span: 4; } .s-5 { --span: 5; } .s-6 { --span: 6; }
  .s-7 { --span: 7; } .s-8 { --span: 8; } .s-9 { --span: 9; } .s-10 { --span: 10; } .s-12 { --span: 12; }
  .grid-12 > :is(.s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-12) { grid-column: var(--start, auto) / span var(--span, 1); }
  .st-2 { --start: 2; } .st-3 { --start: 3; } .st-6 { --start: 6; }
  .st-7 { --start: 7; } .st-8 { --start: 8; } .st-9 { --start: 9; }
  .align-end { align-self: end; }
  .sticky-col { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
}

/* Utilidades de pila y fila */
.stack > * + * { margin-top: var(--stack, var(--sp-4)); }
.stack--sm { --stack: var(--sp-2); }
.stack--lg { --stack: var(--sp-8); }
.stack > .rating { display: flex; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.mt-0 { margin-top: 0 !important; } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); } .mt-8 { margin-top: var(--sp-8); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.txt-mute { color: var(--fg-mute); }
.txt-sm { font-size: var(--fs-sm); }
.txt-right { text-align: right; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.nowrap { white-space: nowrap; }

/* Proporciones de imagen */
.ratio { position: relative; display: block; overflow: hidden; background: var(--paper-3); aspect-ratio: var(--ar, 3 / 2); }
.ratio > img, .ratio > video, .ratio > .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ratio--16x9 { --ar: 16 / 9; } .ratio--3x2 { --ar: 3 / 2; } .ratio--4x3 { --ar: 4 / 3; }
.ratio--1x1 { --ar: 1 / 1; } .ratio--3x4 { --ar: 3 / 4; } .ratio--2x1 { --ar: 2 / 1; } .ratio--3x1 { --ar: 3 / 1; }

/* Marcador de foto (solo para maquetas y styleguide). Líneas diagonales de papel */
.ph {
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: var(--sp-3);
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgb(29 29 27 / 0.07) 11px 12px),
    var(--steel);
  color: var(--steel-ink);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Duotono rojo y tinta para fotos de baja calidad o fondos de perfil.
   <span class="duo"><img ...></span>  (la imagen se vuelve gris y se tiñe de rojo) */
.duo { position: relative; display: block; overflow: hidden; background: var(--red); isolation: isolate; }
.duo > img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; }
.duo--ink { background: var(--ink); }
.duo--ink > img { mix-blend-mode: normal; filter: grayscale(1) contrast(1.1) brightness(0.8); }

/* ==========================================================================
   5. ICONOS, CINTILLO, RÚBRICA, FOLIO, LEMA
   ========================================================================== */

/* .icon  SVG del sprite que inyecta shell.js:
   <svg class="icon" aria-hidden="true"><use href="#i-search"/></svg>
   Tamaños: .icon--sm .icon--lg */
.icon {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vertical-align: -0.2em;
}
.icon--sm { width: 1em; height: 1em; }
.icon--lg { width: 1.75em; height: 1.75em; }
.icon--fill { fill: currentColor; stroke: none; }

/* .cintillo  Tira de portada (como el "PRÓXIMAMENTE" de las portadas).
   <p class="cintillo">Próximamente</p>   Variantes: --ink --paper --left */
.cintillo {
  display: block;
  padding: 7px 16px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: 1.2;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  text-align: center;
}
.cintillo--ink { background: var(--ink); }
.cintillo--paper { background: var(--paper-2); color: var(--ink); }
.cintillo--left { text-align: left; }

/* .rubric  Filete grueso con kicker y folio, abre cada sección
   <div class="rubric"><span class="kicker">Artículos</span><span class="folio">Pág. 24</span></div> */
.rubric {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-4);
  padding-top: var(--sp-2);
  border-top: var(--line-4);
}
.rubric--red { border-top-color: var(--red); }
.on-ink .rubric { border-top-color: #fff; }

/* .folio  Número de página / edición con filete corto delante */
.folio {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-mute);
}
.folio::before { content: ""; width: 20px; height: 2px; background: currentColor; }
.on-ink .folio { color: #CFC8C8; }

/* .section-head  Cabecera de bloque: rúbrica + título + enlace "ver todo"
   <header class="section-head"><div class="rubric">…</div>
     <div class="section-head__row"><h2>Lo más <span class="t-red">leído</span></h2><a class="btn btn--text" href="#">Ver todo</a></div></header> */
.section-head { margin-bottom: var(--sp-6); }
.section-head__row {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-3);
}
.section-head .dek { margin-top: var(--sp-3); }

/* .motto  Lema "Conecta • Colabora • Crece" (el punto es el nodo del logotipo)
   <p class="motto"><span>Conecta</span><span>Colabora</span><span>Crece</span></p>   Variante: --xl (Anton) */
.motto {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-3);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-base);
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.motto > span { display: inline-flex; align-items: center; gap: var(--sp-3); }
.motto > span + span::before { content: "\2022"; color: var(--red); font-size: 1.3em; letter-spacing: 0; line-height: 0; }
.motto--xl {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 1rem + 7.5vw, 6.5rem);
  letter-spacing: 0.01em;
  line-height: 0.95;
  gap: 0 var(--sp-4);
}

/* ==========================================================================
   6. BOTONES, ENLACES, INSIGNIAS
   .btn  + --primary (rojo) --dark (tinta) --secondary (contorno) --white
         --text (solo texto con filete) --network (CTA Red de Emprendedores)
         tamaños --sm --lg, --block. Iconos: <svg class="icon">
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px;
  padding: 0.7rem 1.25rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  border: 2px solid var(--ink);
  border-radius: var(--r-1);
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px); }
.btn .icon { transition: transform var(--t-fast) var(--ease); }
.btn:hover .icon--go { transform: translateX(3px); }

.btn--primary, .btn--network { background: var(--red); border-color: var(--red); color: #fff; }
.btn--primary:hover, .btn--network:hover { background: var(--red-deep); border-color: var(--red-deep); }
.btn--dark { background: var(--ink); color: #fff; }
.btn--dark:hover { background: var(--red); border-color: var(--red); }
.btn--secondary:hover { background: var(--ink); color: #fff; }
.btn--white { background: #fff; border-color: #fff; color: var(--ink); }
.btn--white:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.on-ink .btn--secondary, .on-red .btn--secondary { border-color: #fff; color: #fff; }
.on-ink .btn--secondary:hover, .on-red .btn--secondary:hover { background: #fff; color: var(--ink); }
.on-red .btn--primary { background: var(--ink); border-color: var(--ink); }
.on-red .btn--primary:hover { background: #fff; border-color: #fff; color: var(--ink); }

.btn--sm { min-height: 40px; padding: 0.5rem 0.9rem; font-size: 0.9375rem; }
.btn--lg { min-height: 56px; padding: 0.95rem 1.75rem; font-size: 1.25rem; }
.btn--block { width: 100%; }

.btn--text {
  position: relative;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.btn--text::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 8px;
  height: 2px; background: var(--red);
  transform-origin: left;
  transition: transform var(--t-med) var(--ease), background-color var(--t-fast);
}
.btn--text:hover::after { background: var(--ink); }
.on-ink .btn--text { color: #fff; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }

/* Botón de icono cuadrado (44 px de zona táctil) */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px;
  color: inherit;
  border-radius: var(--r-1);
  transition: background-color var(--t-fast);
}
.icon-btn:hover { background: var(--paper-2); }
.icon-btn .icon { width: 24px; height: 24px; }

/* Botón de reproducir (se usa dentro de .card-video y héroes de video) */
.play-btn {
  display: inline-grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: var(--r-round);
  background: var(--red);
  color: #fff;
  border: 3px solid #fff;
  transition: transform var(--t-med) var(--ease), background-color var(--t-fast);
}
.play-btn .icon { width: 26px; height: 26px; margin-left: 3px; }

/* .link  Enlace de texto subrayado con filete rojo */
.link {
  text-decoration: underline;
  text-decoration-color: var(--red);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}
.link:hover { color: var(--red-deep); }
.on-ink .link:hover { color: #fff; text-decoration-color: #fff; }

/* .badge  Insignias cuadradas, como sellos.
   <span class="badge badge--sponsored">Patrocinado</span>
   Variantes: --sponsored --example --verified --new --ink --float (sobre imagen) */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 2px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-xs);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
}
.badge .icon { width: 13px; height: 13px; stroke-width: 3; }
.badge--sponsored { background: var(--paper); border-color: var(--ink); }
.badge--example { background: var(--red-tint); color: var(--red-deep); border: 1px dashed var(--red-deep); }
.badge--verified { background: var(--ok-tint); color: var(--ok); border-color: var(--ok); }
.badge--new { background: var(--red); border-color: var(--red); color: #fff; }
.badge--ink { background: var(--ink); color: #fff; }
.badge--float { position: absolute; top: var(--sp-3); left: var(--sp-3); z-index: 2; }

/* ==========================================================================
   7. CABECERA, NAVEGACIÓN, BUSCADOR, PIE, BANNER DE VISTA PREVIA
   shell.js inyecta todo esto en #rdn-header y #rdn-footer.
   #rdn-header usa display: contents para que la barra pueda ser sticky.
   ========================================================================== */
#rdn-header { display: contents; }
#rdn-footer { display: block; }

/* .preview-banner  Aviso de vista previa del rediseño */
.preview-banner { background: var(--ink); color: #fff; font-size: var(--fs-sm); line-height: 1.3; }
.preview-banner__in { display: flex; align-items: center; gap: var(--sp-3); padding-top: 6px; padding-bottom: 6px; }
.preview-banner__tag {
  flex: none;
  padding: 3px 8px 2px;
  background: var(--red); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: 0.14em; text-transform: uppercase;
}
.preview-banner p { flex: 1; min-width: 0; }
.preview-banner a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.preview-banner__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: -8px; color: #fff; }
.preview-banner__close:hover { background: rgb(255 255 255 / 0.14); }
.preview-banner { --focus: #fff; }

/* .site-header__top  Tira superior estilo cabeza de página de revista (solo escritorio) */
.site-header__top { display: none; background: var(--ink); color: #D9D2D2; --focus: #fff; }
.site-header__top .wrap { display: flex; justify-content: space-between; gap: var(--sp-4); padding-top: 6px; padding-bottom: 6px; }
.site-header__top p, .site-header__top a {
  font-family: var(--font-head); font-weight: 600; font-size: var(--fs-xs);
  letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: inherit;
}
.site-header__top a { color: #fff; }
.site-header__top a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* .site-header  Barra principal pegajosa */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--paper);
  border-bottom: var(--line-2);
}
.site-header__row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--header-h); }
.brand { flex: 0 1 auto; min-width: 0; display: block; line-height: 0; }
.brand img { width: 180px; height: auto; max-width: 100%; }
@media (max-width: 359px) {
  .site-header__row { gap: 4px; }
  .brand img { width: 120px; }
}
.site-header__tools { margin-left: auto; display: flex; align-items: center; }

/* .cart-link + .cart-count  Carrito con contador */
.cart-link { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; text-decoration: none; }
.cart-link .icon { width: 24px; height: 24px; }
.cart-count {
  position: absolute; top: 3px; right: -1px;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--red); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: 0.8125rem; line-height: 20px;
  text-align: center;
}
.cart-count[data-count="0"] { background: var(--ink); }

/* .nav-toggle  Hamburguesa (solo móvil/tableta) */
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

/* .site-nav  Panel móvil por defecto; barra horizontal desde 1080 px */
.site-nav {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column;
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  padding: var(--sp-2) max(16px, env(safe-area-inset-right, 0px)) var(--sp-8) max(16px, env(safe-area-inset-left, 0px));
  background: var(--paper);
  border-bottom: var(--line-4);
  box-shadow: var(--shadow-pop);
}
.site-header[data-open="true"] .site-nav { display: flex; }

.nav { display: flex; flex-direction: column; }
.nav__item { position: relative; display: flex; flex-wrap: wrap; align-items: center; border-bottom: var(--line-soft); }
.nav__link {
  flex: 1; min-width: 0;
  display: flex; align-items: center;
  min-height: 56px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.75rem;
  letter-spacing: 0.03em; text-transform: uppercase;
  text-decoration: none;
}
.nav__link[aria-current="page"], .nav__item.is-active > .nav__link { color: var(--red-deep); }
.nav__more { display: grid; place-items: center; width: 56px; height: 56px; }
.nav__more .icon { transition: transform var(--t-fast) var(--ease); }
.nav__item.is-open > .nav__more .icon { transform: rotate(180deg); }
.nav__sub { display: none; width: 100%; padding: 0 0 var(--sp-3) var(--sp-4); }
.nav__item.is-open > .nav__sub { display: block; }
.nav__sub a {
  display: block; padding: 10px 0;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--ink-soft);
}
.nav__sub a small { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--fg-mute); }
.nav__sub a:hover, .nav__sub a[aria-current="page"] { color: var(--red-deep); }

.site-nav__cta { margin-top: var(--sp-6); width: 100%; min-height: 52px; }
.site-nav__contact { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--fg-mute); }
.site-nav__contact a { color: var(--ink); }

@media (min-width: 768px) {
  .brand img { width: 201px; }
}

@media (min-width: 1080px) {
  .site-header__top { display: block; }
  .brand img { width: 233px; }
  .nav-toggle { display: none; }
  .site-header__tools { margin-left: 0; }
  .site-nav {
    display: flex; position: static; flex: 1;
    flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-6);
    max-height: none; overflow: visible;
    margin-left: var(--sp-6); padding: 0;
    background: none; border: 0; box-shadow: none;
  }
  .nav { flex-direction: row; gap: 2px; }
  .nav__item { border: 0; flex-wrap: nowrap; }
  .nav__link {
    flex: none; position: relative;
    min-height: var(--header-h);
    padding: 0 10px;
    font-size: 1.1875rem; letter-spacing: 0.08em;
  }
  .nav__link::after {
    content: ""; position: absolute; left: 10px; right: 10px; bottom: calc(50% - 20px);
    height: 3px; background: var(--red);
    transform: scaleX(0); transform-origin: left;
    transition: transform var(--t-med) var(--ease);
  }
  .nav__link:hover::after, .nav__link[aria-current="page"]::after, .nav__item.is-active > .nav__link::after { transform: scaleX(1); }
  .nav__item:has(> .nav__more) > .nav__link { padding-right: 0; }
  .nav__item:has(> .nav__more) > .nav__link::after { right: 0; }
  .nav__more { width: 28px; height: 44px; margin-left: 0; margin-right: 2px; }
  .nav__sub {
    position: absolute; top: 100%; left: 0;
    width: auto; min-width: 270px;
    padding: var(--sp-2) 0;
    background: var(--paper);
    border: var(--line-2);
    box-shadow: var(--shadow-pop);
  }
  .nav__sub a { padding: 10px 20px; color: var(--ink); }
  .nav__sub a:hover, .nav__sub a[aria-current="page"] { background: var(--paper-2); }
  .nav__item.is-open > .nav__sub { display: block; }
  .site-nav__cta { margin: 0; width: auto; min-height: 44px; }
  .site-nav__contact { display: none; }
}
@media (min-width: 1080px) and (hover: hover) {
  .nav__item:hover > .nav__sub, .nav__item:focus-within > .nav__sub { display: block; }
}
/* Esc descarta el submenú abierto por cursor o foco (shell.js añade .is-dismissed) */
@media (min-width: 1080px) {
  .nav__item.is-dismissed > .nav__sub { display: none !important; }
}

/* .header-search  Buscador desplegable bajo la barra */
.header-search { background: var(--paper-2); border-top: var(--line); padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
.header-search form { display: flex; gap: var(--sp-2); }
.header-search .input { flex: 1; min-width: 0; }

/* .site-footer  Pie de página sobre tinta */
.site-footer {
  margin-top: var(--section);
  background: var(--ink);
  color: #D9D2D2;
  --focus: #fff;
  padding-top: var(--sp-12);
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
}
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-footer .motto { color: #fff; }
.footer__top { padding-bottom: var(--sp-10); border-bottom: 1px solid rgb(255 255 255 / 0.28); }
.footer__grid { display: grid; gap: var(--sp-8) var(--gap); grid-template-columns: repeat(2, minmax(0, 1fr)); padding-top: var(--sp-10); }
.footer__grid > * { min-width: 0; }
.footer__brand { grid-column: 1 / -1; }
.footer__brand img { height: 40px; width: auto; margin-bottom: var(--sp-4); }
.footer__brand p { max-width: 38ch; font-size: var(--fs-sm); color: #CFC8C8; }
.footer__title {
  margin-bottom: var(--sp-3);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: 0.16em; text-transform: uppercase; color: #FF8CA0;
}
.footer__list li + li { margin-top: var(--sp-2); }
.footer__list a, .footer__list span { font-size: var(--fs-base); }
.footer__social { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4); }
.footer__social a { display: inline-block; padding-block: 4px; font-family: var(--font-head); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: var(--fs-sm); }
.footer__legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-6);
  margin-top: var(--sp-10); padding-top: var(--sp-4);
  border-top: 1px solid rgb(255 255 255 / 0.28);
  font-size: var(--fs-sm); color: #CFC8C8;
}
.footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); }
@media (min-width: 960px) {
  .footer__grid { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: auto; }
}

/* ==========================================================================
   8. HÉROES
   .hero-edition  Portada de edición: copy a la izquierda, portadas apiladas
   .hero-article  Cabeza de artículo: titular, ficha de autor y foto con pie
   .hero-section  Apertura de sección (--red, --ink)
   Todas aceptan .enter en el contenedor del copy para la secuencia de entrada.
   ========================================================================== */
.hero-edition { padding-bottom: var(--section); }
.hero-edition__in { padding-top: var(--sp-8); align-items: center; }
.hero-edition h1 { margin: var(--sp-3) 0 var(--sp-5); }
.hero-edition .dek { margin-bottom: var(--sp-6); }
.hero-edition__copy .row { gap: var(--sp-4) var(--sp-6); }

/* .cover  Portada de revista con filete y sombra de papel
   <img class="cover" src="…" alt="Portada de la edición 52">  Variante: --flat */
.cover {
  display: block; width: 100%; height: auto;
  background: var(--paper-3);
  border: 1px solid rgb(29 29 27 / 0.35);
  box-shadow: var(--shadow-paper), inset 5px 0 0 rgb(255 255 255 / 0.18);
}
.cover--flat { box-shadow: none; }
/* .cover-stack  Dos portadas escalonadas: la actual y la próxima */
.cover-stack { position: relative; padding-right: 24%; padding-bottom: 14%; }
.cover-stack > .cover-stack__next { position: absolute; right: 0; bottom: 0; width: 46%; }

.hero-article { padding-top: var(--sp-8); padding-bottom: var(--sp-8); align-items: start; row-gap: var(--sp-6); }
.hero-article__title { display: grid; gap: var(--sp-4); align-content: start; }
.hero-article__title .dek { max-width: 52ch; }
.hero-article__meta { display: grid; gap: var(--sp-3); align-content: start; border-top: var(--line); padding-top: var(--sp-3); font-size: var(--fs-sm); }
.hero-article__meta dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.hero-article__meta dd { font-weight: 600; margin-bottom: var(--sp-2); }
.hero-article__media .ratio { --ar: 3 / 2; }
@media (min-width: 900px) {
  .hero-article__meta { grid-column: span 3; }
  .hero-article__media { grid-column: span 9; }
  .hero-article__title { grid-column: span 10; }
}

.hero-section { padding-top: var(--sp-12); padding-bottom: var(--sp-10); background: var(--paper-2); border-bottom: var(--line-4); }
.hero-section .display { margin: var(--sp-3) 0 var(--sp-5); }
.hero-section__tools { margin-top: var(--sp-8); }
.hero-section--red { background: var(--red); color: #fff; border-bottom-color: var(--ink); --focus: #fff; }
.hero-section--red .kicker { color: #fff; }
.hero-section--ink { background: var(--ink); color: #fff; border-bottom-color: var(--red); --focus: #fff; }
@media (min-width: 900px) { .hero-section { padding-top: var(--sp-20); padding-bottom: var(--sp-12); } }

/* ==========================================================================
   9. TARJETAS
   Las tarjetas editoriales (artículo, video, edición, evento) NO llevan caja:
   se separan con aire y filetes. Solo producto y plan tienen caja con filete.
   Una tarjeta entera es clicable gracias al enlace del título (::after).
   ========================================================================== */

/* .price  Precio. <p class="price">$3,500 <small>al año</small></p>   Variantes: --lg, --free */
.price {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--fs-xl);
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: lining-nums;
}
.price small {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: 0;
  color: var(--fg-mute);
}
.price--lg { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-2xl); }
.price--was { font-weight: 600; font-size: var(--fs-base); color: var(--fg-mute); text-decoration: line-through; }

/* .card-article  Tarjeta de artículo. Variantes: --lead (grande), --row (miniatura a la izquierda)
   <article class="card-article">
     <a class="card-article__media ratio" href="#" tabindex="-1" aria-hidden="true"><img src alt=""></a>
     <div class="card-article__body"><p class="kicker">Finanzas</p>
       <h3 class="card-article__title"><a href="#">Título</a></h3>
       <p class="card-article__dek">Bajada</p><p class="byline">…</p></div></article> */
.card-article { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); }
.card-article__media { --ar: 3 / 2; }
.card-article__media img { transition: transform 600ms var(--ease); }
.card-article:hover .card-article__media img { transform: scale(1.03); }
.card-article__body { display: flex; flex-direction: column; gap: var(--sp-2); }
.card-article__title { font-size: var(--fs-xl); }
.card-article__title a { text-decoration: none; }
.card-article__title a::after { content: ""; position: absolute; inset: 0; }
.card-article:hover .card-article__title a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.card-article__dek { font-family: var(--font-text); font-size: var(--fs-base); line-height: 1.45; color: var(--fg-2); }
.card-article--lead .card-article__media { --ar: 4 / 3; }
.card-article--lead .card-article__title { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-2xl); line-height: 1; }
.card-article--lead .card-article__dek { font-size: var(--fs-md); }
.card-article--row { flex-direction: row; align-items: flex-start; gap: var(--sp-4); padding-top: var(--sp-3); border-top: var(--line); }
.card-article--row .card-article__media { flex: none; width: 96px; --ar: 1 / 1; }
.card-article--row .card-article__title { font-size: var(--fs-lg); }
@media (min-width: 640px) { .card-article--row .card-article__media { width: 128px; } }

/* .card-video  Tarjeta de video con botón de reproducir
   <article class="card-video"><div class="card-video__media ratio ratio--16x9"><img src alt="">
     <span class="play-btn card-video__play" aria-hidden="true"><svg class="icon icon--fill"><use href="#i-play"/></svg></span>
     <span class="card-video__time">12:40</span></div>
     <p class="kicker">Curso</p><h3 class="card-video__title"><a href="#">Título</a></h3><p class="meta">…</p></article> */
.card-video { position: relative; display: flex; flex-direction: column; gap: var(--sp-2); }
.card-video__media { background: var(--ink); }
.card-video__media img { opacity: 0.92; transition: opacity var(--t-med), transform 600ms var(--ease); }
.card-video:hover .card-video__media img { opacity: 1; transform: scale(1.03); }
.card-video__play { position: absolute; left: auto; top: var(--sp-2); right: var(--sp-2); z-index: 1; pointer-events: none; width: 40px; height: 40px; border-width: 2px; }
.card-video__play .icon { width: 16px; height: 16px; margin-left: 2px; }
/* Las miniaturas traen título y ponente impresos: el botón va pequeño en la esquina, nunca al centro. */
.card-video:hover .play-btn { transform: scale(1.08); background: var(--red-deep); }
.card-video__time {
  position: absolute; right: var(--sp-2); bottom: var(--sp-2); z-index: 1;
  padding: 2px 7px 1px;
  background: var(--ink); color: #fff;
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.06em;
}
.card-video__title { font-size: var(--fs-lg); }
.card-video__title a { text-decoration: none; }
.card-video__title a::after { content: ""; position: absolute; inset: 0; }
.card-video:hover .card-video__title a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* .card-edition  Portada de edición con título, precio y botón
   <article class="card-edition"><a class="card-edition__cover" href="#"><img class="cover" src alt="Portada …"></a>
     <div class="card-edition__body"><p class="kicker">Edición 52</p><h3>Título</h3><p class="price">Gratis</p>
     <a class="btn btn--dark btn--sm" href="#">Descargar</a></div></article>
   Con .cintillo dentro de __cover como rótulo ("Próximamente"). */
.card-edition { display: flex; flex-direction: column; gap: var(--sp-4); }
.card-edition__cover { position: relative; display: block; max-width: 340px; transition: transform var(--t-med) var(--ease); }
.card-edition:hover .card-edition__cover { transform: translateY(-4px); }
.card-edition__cover .cintillo { position: absolute; left: 0; right: 0; top: 0; padding: 5px 8px; font-size: var(--fs-xs); letter-spacing: 0.28em; }
.card-edition__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
.card-edition__body h3 { font-size: var(--fs-lg); }
.card-edition__body .btn { margin-top: var(--sp-2); }

/* .card-event  Evento en fila, con bloque de fecha
   <article class="card-event"><div class="card-event__date"><span class="card-event__day">14</span><span class="card-event__month">nov</span></div>
     <div class="card-event__body"><p class="kicker">Congreso</p><h3><a href="#">Título</a></h3><p class="meta"><span>Mérida</span><span>9:00 h</span></p></div>
     <div class="card-event__aside"><p class="price">$4,640</p><a class="btn btn--sm btn--dark" href="#">Reservar</a></div></article> */
.card-event {
  position: relative;
  display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4);
  padding: var(--sp-4) 0;
  border-top: var(--line-2);
}
.card-event__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 72px; min-height: 84px;
  background: var(--ink); color: #fff;
  text-align: center;
}
.card-event__day { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; }
.card-event__month { margin-top: 3px; font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.16em; text-transform: uppercase; color: #FF8CA0; }
.card-event__body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.card-event__body h3 a { text-decoration: none; }
.card-event__body h3 a::after { content: ""; position: absolute; inset: 0; }
.card-event:hover h3 a { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.card-event__aside { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); position: relative; z-index: 1; }
@media (min-width: 768px) {
  .card-event { grid-template-columns: 88px minmax(0, 1fr) auto; align-items: center; }
  .card-event__date { width: 88px; min-height: 96px; }
  .card-event__aside { grid-column: auto; flex-direction: column; align-items: flex-end; }
}

/* .card-product  Producto de tienda (con caja de filete)
   <article class="card-product"><div class="card-product__media ratio ratio--1x1"><span class="badge badge--new badge--float">Nuevo</span><img src alt=""></div>
     <div class="card-product__body"><p class="kicker">Curso</p><h3 class="card-product__title"><a href="#">Título</a></h3>
     <p class="card-product__desc">…</p><div class="card-product__foot"><p class="price">$1,200</p>
     <button class="btn btn--dark btn--sm" type="button"><svg class="icon"><use href="#i-cart"/></svg> Agregar</button></div></div></article> */
.card-product {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--paper);
  border: var(--line);
  transition: transform var(--t-med) var(--ease), border-color var(--t-fast);
}
.card-product:hover { transform: translateY(-3px); border-color: var(--red); }
.card-product__media { border-bottom: var(--line); }
.card-product__body { flex: 1; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); }
.card-product__title { font-size: var(--fs-lg); }
.card-product__title a { text-decoration: none; }
.card-product__title a::after { content: ""; position: absolute; inset: 0; }
.card-product__desc { font-size: var(--fs-sm); color: var(--fg-2); }
.card-product__foot { margin-top: auto; padding-top: var(--sp-3); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.card-product__foot .btn { position: relative; z-index: 1; }

/* .card-plan  Plan con precio (membresía, publicidad, podcast)
   <article class="card-plan card-plan--featured"><p class="cintillo card-plan__flag">Recomendado</p>
     <div class="card-plan__head"><p class="kicker">Membresía</p><h3 class="card-plan__name">Miembro</h3></div>
     <p class="price price--lg">$3,500 <small>al año</small></p>
     <ul class="check-list"><li>…</li></ul><a class="btn btn--primary btn--block" href="#">Quiero ser miembro</a>
     <p class="card-plan__note">Precio por confirmar</p></article> */
.card-plan {
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--paper);
  border: var(--line);
}
.card-plan--featured { border: 3px solid var(--red); padding-top: 0; }
.card-plan__flag { margin: 0 calc(var(--sp-6) * -1) 0; padding-top: 6px; padding-bottom: 6px; }
.card-plan--featured .card-plan__head { padding-top: var(--sp-2); }
.card-plan__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-xl); line-height: 1; }
.card-plan .price--lg small { display: block; margin-top: var(--sp-1); }
.card-plan .check-list { flex: 1; align-content: start; }
.card-plan__note { font-size: var(--fs-xs); color: var(--fg-mute); }

/* .check-list  Lista con palomita (máscara SVG, hereda color) */
.check-list { display: grid; gap: var(--sp-2); }
.check-list li { position: relative; padding-left: 28px; font-size: var(--fs-base); line-height: 1.4; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: 0.2em;
  width: 18px; height: 18px;
  background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5'%3E%3Cpath d='M3.5 12.5l5.5 5.5L20.5 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
  10. CALIFICACIÓN, AVATAR, PERFIL, PUBLICACIÓN, CAJA DE PUBLICAR
   ========================================================================== */

/* .stars  Calificación de solo lectura con medias estrellas y fracciones.
   <span class="stars" style="--rating:4.5" role="img" aria-label="4.5 de 5 estrellas"></span>
   Tamaño con --size (por defecto 1.1em). RDN.estrellas(4.5) devuelve este HTML. */
.stars {
  --rating: 0;
  --size: 1.1em;
  position: relative;
  display: inline-block;
  flex: none;
  width: calc(var(--size) * 5);
  height: var(--size);
  vertical-align: -0.18em;
}
/* Contorno completo debajo, relleno recortado al promedio encima */
.stars::before, .stars::after {
  content: ""; position: absolute; left: 0; top: 0; height: 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: 0 0; mask-position: 0 0;
  -webkit-mask-size: var(--size) var(--size); mask-size: var(--size) var(--size);
}
.stars::before { width: 100%; background: var(--star-off); -webkit-mask-image: var(--star-outline); mask-image: var(--star-outline); }
.stars::after { width: calc(var(--rating) / 5 * 100%); background: var(--star); -webkit-mask-image: var(--star-shape); mask-image: var(--star-shape); }
.stars--lg { --size: 1.6em; }
.stars--sm { --size: 0.95em; }

/* .rating  Estrellas + número + conteo
   <span class="rating"><span class="stars" …></span><strong class="rating__value">4.5</strong><span class="rating__count">(23 evaluaciones)</span></span> */
.rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-2); font-size: var(--fs-sm); line-height: 1.3; }
.rating__value { font-weight: 700; color: var(--fg); }
.rating__count { color: var(--fg-mute); }

/* .rate-input  Calificación interactiva (radios nativos; teclado con flechas)
   <fieldset class="rate-input"><legend>Tu calificación</legend>
     <div class="rate-input__stars"> (de 1 a 5, en ese orden en el DOM: la flecha derecha sube la nota) <input type="radio" name="r" id="r5" value="5"><label for="r5"><span class="sr-only">5 estrellas</span></label> … </div>
     <output class="rate-input__out">Sin calificar</output></fieldset>
   RDN.initRatings() actualiza el texto de salida. */
.rate-input { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sp-1); }
.rate-input legend { padding: 0; margin-bottom: var(--sp-1); font-weight: 600; font-size: var(--fs-sm); }
.rate-input__stars { display: inline-flex; flex-direction: row; justify-content: flex-start; width: max-content; max-width: 100%; }
.rate-input input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.rate-input label {
  --shape: var(--star-outline);
  position: relative; display: block;
  width: 44px; height: 44px;
  color: var(--star-off);
  cursor: pointer;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease);
}
.rate-input label::before {
  content: ""; position: absolute; inset: 5px;
  background: currentColor;
  -webkit-mask: var(--shape) center / contain no-repeat;
          mask: var(--shape) center / contain no-repeat;
}
/* Orden DOM 1 a 5: se enciende la estrella marcada y las anteriores (relleno) */
.rate-input input:checked + label,
.rate-input label:has(~ input:checked) { --shape: var(--star-shape); color: var(--star); }
/* Con el cursor encima solo se previsualiza el tramo señalado */
.rate-input__stars:hover label { --shape: var(--star-outline); color: var(--star-off); }
.rate-input__stars:hover label:hover,
.rate-input__stars:hover label:has(~ label:hover) { --shape: var(--star-shape); color: var(--star); }
.rate-input label:hover { transform: scale(1.08); }
.rate-input input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 1px; }
.rate-input__out { font-size: var(--fs-sm); color: var(--fg-mute); }

/* .avatar  Imagen o iniciales. Tamaños: --sm --lg --xl. Tonos: data-tone="1..5"
   <span class="avatar"><img src alt="Foto de María"></span>
   <span class="avatar" data-tone="2" aria-hidden="true">MH</span> */
.avatar {
  --av: 44px;
  display: inline-grid; place-items: center;
  flex: none;
  width: var(--av); height: var(--av);
  border-radius: var(--r-round);
  overflow: hidden;
  background: var(--paper-3);
  color: var(--ink);
  font-family: var(--font-head); font-weight: 700;
  font-size: calc(var(--av) * 0.38);
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { --av: 32px; }
.avatar--lg { --av: 64px; }
.avatar--xl { --av: 112px; }
.avatar[data-tone="1"] { background: var(--ink); color: #fff; }
.avatar[data-tone="2"] { background: var(--red); color: #fff; }
.avatar[data-tone="3"] { background: var(--steel-ink); color: #fff; }
.avatar[data-tone="4"] { background: var(--paper-3); color: var(--ink); }
.avatar[data-tone="5"] { background: var(--red-tint); color: var(--red-deep); }
.avatar-group { display: inline-flex; }
.avatar-group .avatar { box-shadow: 0 0 0 2px var(--paper); }
.avatar-group .avatar + .avatar { margin-left: -10px; }

/* .profile-head  Cabecera de perfil: portada, foto, nombre, acciones y cifras
   <section class="profile-head"><div class="profile-head__cover"><span class="duo"><img src alt=""></span></div>
     <div class="profile-head__bar"><span class="avatar avatar--xl profile-head__avatar" data-tone="1">TM</span>
       <div class="profile-head__id"><h1 class="profile-head__name">Nombre</h1><p class="meta">…</p><p class="rating">…</p></div>
       <div class="profile-head__actions"><button class="btn btn--primary">Seguir</button>…</div></div>
     <dl class="profile-head__stats"><div><dt>Publicaciones</dt><dd>48</dd></div>…</dl></section> */
.profile-head { display: block; }
.profile-head__cover { position: relative; aspect-ratio: 2 / 1; max-height: 340px; width: 100%; overflow: hidden; background: var(--red); border-bottom: var(--line-4); }
.profile-head__cover .duo, .profile-head__cover img, .profile-head__cover .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.profile-head__bar { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); }
.profile-head__avatar { --av: 104px; margin-top: -64px; box-shadow: 0 0 0 5px var(--paper); position: relative; }
.profile-head__id { display: grid; gap: var(--sp-2); min-width: 0; }
.profile-head__name { font-size: var(--fs-2xl); line-height: 0.98; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.profile-head__name .badge { transform: translateY(-0.15em); }
.profile-head__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.profile-head__stats { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-8); margin-top: var(--sp-5); padding: var(--sp-3) 0; border-top: var(--line); border-bottom: var(--line); }
.profile-head__stats > div { display: flex; flex-direction: column-reverse; }
.profile-head__stats dt { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-mute); }
.profile-head__stats dd { font-family: var(--font-display); font-size: var(--fs-xl); line-height: 1.1; }
@media (min-width: 768px) {
  .profile-head__cover { aspect-ratio: 4 / 1; }
  .profile-head__bar { grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--sp-6); }
  .profile-head__avatar { --av: 144px; margin-top: -72px; margin-bottom: 4px; }
  .profile-head__actions { padding-bottom: var(--sp-2); }
}

/* .post  Publicación del muro
   <article class="post"><header class="post__head"><span class="avatar" data-tone="3">LP</span>
     <div class="post__who"><a class="post__name" href="#">Nombre</a><p class="meta"><span>Giro</span><span>Puebla</span><span>hace 2 h</span></p></div>
     <button class="icon-btn" type="button" aria-label="Más opciones"><svg class="icon"><use href="#i-more"/></svg></button></header>
     <div class="post__body"><p>Texto</p></div><figure class="post__media ratio ratio--16x9">…</figure>
     <p class="post__stats"><span>24 recomendaciones</span><span>6 comentarios</span></p>
     <div class="post__actions"><button class="post__action" type="button" aria-pressed="false"><svg class="icon"><use href="#i-thumb"/></svg>Recomendar</button>…</div></article> */
.post { padding-top: var(--sp-4); border-top: var(--line-2); background: var(--paper); }
.post__head { display: flex; align-items: center; gap: var(--sp-3); }
.post__who { flex: 1; min-width: 0; }
.post__name { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); line-height: 1.1; text-decoration: none; }
.post__name:hover { color: var(--red-deep); text-decoration: underline; }
.post__body { margin-top: var(--sp-3); font-size: var(--fs-md); line-height: 1.55; overflow-wrap: anywhere; }
.post__body > * + * { margin-top: var(--sp-3); }
.post__media { margin-top: var(--sp-3); }
.post__product { margin-top: var(--sp-3); display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); background: var(--paper-2); border: var(--line-soft); }
.post__stats { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--fg-mute); }
.post__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--sp-2); border-top: var(--line-soft); border-bottom: var(--line-soft); }
.post__action {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-2);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-base);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-soft);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.post__action:hover { background: var(--paper-2); color: var(--ink); }
.post__action[aria-pressed="true"] { color: var(--red-deep); }
.post__action[aria-pressed="true"] .icon { fill: rgb(219 6 50 / 0.18); }
.post--sponsored { background: var(--paper-2); padding-left: var(--sp-3); padding-right: var(--sp-3); }
@media (min-width: 640px) { .post__actions { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* .comments  Comentarios de una publicación */
.comments { display: grid; gap: var(--sp-3); padding: var(--sp-3) 0; }
.comment { display: flex; gap: var(--sp-3); align-items: flex-start; }
.comment__bubble { flex: 1; min-width: 0; padding: var(--sp-2) var(--sp-3); background: var(--paper-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.comment__bubble strong { display: block; font-family: var(--font-head); font-size: var(--fs-base); letter-spacing: 0.02em; }

/* .composer  Caja para publicar
   <form class="composer"><div class="composer__row"><span class="avatar">…</span><label class="sr-only" for="c1">Publicación</label>
     <textarea class="textarea composer__input" id="c1" placeholder="…"></textarea></div>
     <div class="composer__bar"><div class="composer__tools">(fichas .chip)</div><button class="btn btn--primary btn--sm">Publicar</button></div></form> */
.composer { border: var(--line-2); background: var(--paper); }
.composer__row { display: flex; gap: var(--sp-3); padding: var(--sp-4); }
.composer .composer__input { flex: 1; min-width: 0; min-height: 100px; border: 0; padding: var(--sp-2) 0; resize: vertical; background: none; font-size: var(--fs-md); }
.composer .composer__input:focus, .composer .composer__input:hover { outline: none; box-shadow: none; border: 0; }
.composer:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.composer__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper-2); border-top: var(--line-soft); }
.composer__tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ==========================================================================
  11. PESTAÑAS, FICHAS, BÚSQUEDA, DIRECTORIO, MAPA
   ========================================================================== */

/* .tabs  Pestañas (role="tablist"). RDN.initTabs() añade flechas y paneles.
   <div class="tabs" role="tablist" aria-label="Perfil"><button class="tab" role="tab" id="t1" aria-controls="p1" aria-selected="true">Publicaciones</button>…</div>
   <div class="tab-panel" role="tabpanel" id="p1" aria-labelledby="t1">…</div> */
.tabs {
  display: flex; gap: var(--sp-1);
  overflow-x: auto; overscroll-behavior-x: contain;
  border-bottom: var(--line-2);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: none;
  min-height: 48px; padding: 0 var(--sp-4);
  margin-bottom: -2px;
  font-family: var(--font-head); font-weight: 700; font-size: 1.125rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-mute);
  border-bottom: 4px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.tab:hover { color: var(--ink); }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--red); }
.tab-panel { padding-top: var(--sp-6); }
.tab-panel[hidden] { display: none; }

/* .chip  Ficha de filtro. Botón con aria-pressed, o enlace con aria-current.
   <button class="chip" type="button" aria-pressed="true">Alimentos</button>   Variante: --removable con icono de cerrar */
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 40px; padding: 0 var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-sm); line-height: 1;
  text-decoration: none; white-space: nowrap;
  color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.chip:hover { background: var(--paper-2); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-selected { background: var(--ink); color: #fff; }
.chip .icon { width: 1em; height: 1em; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip-row--scroll { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-2); scrollbar-width: thin; }

/* .searchbar  Búsqueda con selector de municipio y "Cerca de mí"
   <form class="searchbar" role="search">
     <div class="searchbar__field"><label for="q">¿Qué buscas?</label><input class="searchbar__input" id="q" type="search" placeholder="Contador, panadería, diseño…"></div>
     <div class="searchbar__field"><label for="mun">Municipio</label><select class="searchbar__input" id="mun">…</select></div>
     <button class="searchbar__locate" type="button"><svg class="icon"><use href="#i-locate"/></svg>Cerca de mí</button>
     <button class="btn btn--primary searchbar__submit" type="submit">Buscar</button></form> */
.searchbar {
  display: grid; grid-template-columns: minmax(0, 1fr);
  background: var(--paper);
  border: 3px solid var(--ink);
  color: var(--ink);
  --focus: var(--ink);
}
.searchbar__field { display: grid; gap: 2px; padding: var(--sp-2) var(--sp-4); border-bottom: var(--line); min-width: 0; }
.searchbar__field:focus-within { background: var(--red-tint); outline: 3px solid var(--ink); outline-offset: -3px; }
.searchbar__field label { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.searchbar__input {
  width: 100%; min-height: 32px; padding: 0;
  background: none; border: 0; outline: none;
  font-size: 1rem; font-weight: 500;
  appearance: none; -webkit-appearance: none; border-radius: 0;
}
select.searchbar__input { cursor: pointer; padding-right: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='3'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") right 2px center / 18px no-repeat; }
.searchbar__locate {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: var(--sp-2);
  min-height: 48px; padding: 0 var(--sp-4);
  border-bottom: var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink);
  transition: background-color var(--t-fast);
}
.searchbar__locate:hover { background: var(--paper-2); }
.searchbar__locate[aria-pressed="true"] { background: var(--ink); color: #fff; }
.searchbar__submit { border-radius: 0; min-height: 56px; }
@media (min-width: 900px) {
  .searchbar { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto; align-items: stretch; }
  .searchbar__field { border-bottom: 0; border-right: var(--line); padding: var(--sp-3) var(--sp-5); }
  .searchbar__locate { border-bottom: 0; border-right: var(--line); padding: 0 var(--sp-5); }
  .searchbar__submit { min-height: 0; padding: 0 var(--sp-8); font-size: 1.25rem; }
}

/* .listing  Resultado del directorio, estilo sección amarilla.
   Pestaña amarilla colgada del filete superior con la categoría; estrellas visibles.
   <article class="listing"><p class="listing__tab">Contabilidad y fiscal</p>
     <div class="listing__grid"><span class="avatar avatar--lg" data-tone="1">DM</span>
       <div class="listing__main"><h3 class="listing__name"><a href="#">Nombre</a></h3>
         <p class="rating">…</p><p class="listing__addr">Dirección · Municipio</p><p class="listing__desc">…</p></div>
       <div class="listing__aside"><p class="listing__dist">1.2 km</p><div class="listing__actions">…botones</div></div></div></article>
   Variante: .listing--sponsored (fondo amarillo suave + insignia Patrocinado) */
.listing { position: relative; padding: 44px 0 var(--sp-6); border-top: var(--line-2); }
.listing__tab {
  position: absolute; left: 0; top: -2px;
  max-width: 100%;
  padding: 5px var(--sp-4) 3px;
  background: var(--yellow); color: var(--ink);
  border: 2px solid var(--ink); border-top: 0;
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.25;
}
.listing__grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.listing__main { display: grid; gap: var(--sp-2); min-width: 0; }
.listing__name { font-size: var(--fs-xl); font-weight: 800; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); }
.listing__name a { text-decoration: none; }
.listing__name a:hover { text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.listing__addr { display: flex; align-items: flex-start; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-2); }
.listing__addr .icon { margin-top: 2px; color: var(--red-deep); }
.listing__desc { font-size: var(--fs-base); color: var(--fg-2); max-width: 62ch; }
.listing__aside { grid-column: 1 / -1; display: grid; gap: var(--sp-3); }
.listing__dist { font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-mute); }
.listing__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.listing--sponsored { background: var(--yellow-soft); padding-left: var(--sp-4); padding-right: var(--sp-4); }
.listing--sponsored .listing__tab { left: var(--sp-4); }
@media (min-width: 768px) {
  .listing__grid { grid-template-columns: auto minmax(0, 1fr) minmax(190px, auto); gap: var(--sp-6); }
  .listing__aside { grid-column: auto; justify-items: end; align-content: start; }
  .listing__actions { justify-content: flex-end; }
}

/* .map-box  Contenedor de mapa. Monta el mapa real dentro de .map-box__canvas.
   Los .map-pin son marcadores de ejemplo para maquetar (posición con --x y --y).
   <div class="map-box" role="region" aria-label="Mapa"><div class="map-box__canvas" id="mapa"></div>
     <span class="map-pin" style="--x:32%;--y:44%"><span class="map-pin__n">1</span></span></div> */
.map-box {
  position: relative;
  aspect-ratio: 4 / 3; min-height: 260px; width: 100%;
  overflow: hidden;
  background:
    repeating-linear-gradient(0deg, transparent 0 47px, rgb(39 56 74 / 0.12) 47px 48px),
    repeating-linear-gradient(90deg, transparent 0 47px, rgb(39 56 74 / 0.12) 47px 48px),
    var(--steel);
  border: var(--line-2);
}
.map-box__canvas { position: absolute; inset: 0; }
.map-box__note {
  position: absolute; left: var(--sp-2); bottom: var(--sp-2);
  padding: 2px 8px;
  background: var(--paper); border: var(--line);
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-xs); letter-spacing: 0.12em; text-transform: uppercase;
}
.map-box__controls { position: absolute; right: var(--sp-2); top: var(--sp-2); display: grid; gap: 2px; z-index: 2; }
.map-box__controls .icon-btn { background: var(--paper); border: var(--line); }
.map-pin {
  position: absolute; left: var(--x, 50%); top: var(--y, 50%);
  translate: -50% calc(-100% - 7px);
  display: grid; place-items: center;
  width: 30px; height: 30px;
  border-radius: var(--r-round);
  background: var(--red); color: #fff;
  border: 2px solid var(--paper);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-sm);
  z-index: 1;
}
.map-pin::after { content: ""; position: absolute; left: 50%; bottom: -9px; translate: -50% 0; border: 7px solid transparent; border-top: 9px solid var(--red); border-bottom: 0; }
.map-pin--active { background: var(--ink); }
.map-pin--active::after { border-top-color: var(--ink); }
@media (min-width: 900px) { .map-box { aspect-ratio: 16 / 10; } .map-box--tall { aspect-ratio: auto; height: 100%; min-height: 420px; } }

/* ==========================================================================
  12. FORMULARIOS
   .field  etiqueta + control + ayuda + error. Estado de error: .field--error
   o aria-invalid="true" en el control. Usa 16 px para evitar el zoom de iOS.
   <div class="field"><label for="n">Nombre del negocio</label><input class="input" id="n">
     <p class="field__hint" id="n-h">…</p><p class="field__error" id="n-e" role="alert">…</p></div>
   ========================================================================== */
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field > label, .label { font-weight: 600; font-size: var(--fs-sm); line-height: 1.3; }
.field > label .req, .label .req { color: var(--red-deep); }
.field__hint { font-size: var(--fs-sm); color: var(--fg-mute); }
/* El alto del error se reserva siempre (visibility) para que al validar un campo no se corra el diseño
   y el primer toque en el control siguiente no se pierda. */
.field__error { display: flex; visibility: hidden; align-items: flex-start; gap: var(--sp-2); min-height: calc(var(--fs-sm) * 1.4); font-size: var(--fs-sm); line-height: 1.4; font-weight: 600; color: var(--err); }
.field__error .icon { margin-top: 2px; }
.field--error .field__error, .input[aria-invalid="true"] ~ .field__error { visibility: visible; }

.input, .textarea, .select {
  width: 100%; min-height: 48px;
  padding: 10px 14px;
  background: var(--paper);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: var(--r-1);
  font-size: 1rem; line-height: 1.4;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-mute); opacity: 1; }
.input:hover, .textarea:hover, .select:hover { border-color: var(--red-deep); }
.input:focus, .textarea:focus, .select:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.textarea { min-height: 120px; resize: vertical; }
.select {
  appearance: none; -webkit-appearance: none;
  padding-right: 44px;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1B' stroke-width='3'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E") right 14px center / 18px no-repeat;
}
.input[disabled], .textarea[disabled], .select[disabled] { background: var(--paper-2); color: var(--ink-mute); border-color: var(--rule-soft); cursor: not-allowed; }
.field--error .input, .field--error .textarea, .field--error .select,
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { border-color: var(--err); background-color: var(--err-tint); }

.form-grid { display: grid; gap: var(--sp-5) var(--sp-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .form-grid .span-all { grid-column: 1 / -1; } }
.fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: var(--sp-3); }
.fieldset > legend { padding: 0; margin-bottom: var(--sp-2); font-family: var(--font-head); font-weight: 700; font-size: var(--fs-lg); }

/* .check / .radio  Casilla o botón de radio con etiqueta (zona táctil de 44 px)
   <label class="check"><input type="checkbox"><span>Acepto los términos</span></label> */
.check, .radio { display: flex; align-items: flex-start; gap: var(--sp-3); min-height: 44px; padding: 10px 0; cursor: pointer; font-size: var(--fs-base); line-height: 1.35; }
.check input, .radio input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--red); cursor: pointer; }

/* .cat-picker  Selector de categorías (varias opciones tipo ficha)
   <fieldset class="fieldset cat-picker"><legend>Giro de tu negocio</legend><div class="cat-picker__list">
     <label class="cat"><input type="checkbox" name="giro" value="alimentos"><span>Alimentos y bebidas</span></label>…</div></fieldset> */
.cat-picker__list { display: grid; gap: var(--sp-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.cat { position: relative; display: block; }
.cat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cat span {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; padding: 8px var(--sp-3);
  border: 2px solid var(--ink);
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.cat span::before {
  content: ""; flex: none; width: 16px; height: 16px;
  border: 2px solid currentColor;
  background: transparent;
  transition: background-color var(--t-fast);
}
.cat:hover span { background: var(--paper-2); }
.cat input:checked + span { background: var(--ink); color: #fff; }
.cat input:checked + span::before { background: var(--red); border-color: #fff; }
.cat input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }

/* .upload  Carga de imagen con vista previa (RDN.initUploads())
   <div class="upload"><input class="upload__input" type="file" id="foto" accept="image/*" multiple>
     <label class="upload__drop" for="foto"><svg class="icon icon--lg"><use href="#i-image"/></svg><span><strong>Sube fotos de tu catálogo</strong><small>JPG o PNG, hasta 5 MB cada una</small></span></label>
     <ul class="upload__preview"></ul></div> */
.upload { display: grid; gap: var(--sp-3); }
.upload__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.upload__drop {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--paper-2);
  border: 2px dashed var(--ink);
  cursor: pointer;
  transition: background-color var(--t-fast);
}
.upload__drop:hover, .upload__drop.is-drag { background: var(--red-tint); }
.upload__drop strong { display: block; font-family: var(--font-head); font-size: var(--fs-lg); line-height: 1.1; }
.upload__drop small { display: block; font-size: var(--fs-sm); color: var(--fg-mute); }
.upload__input:focus-visible + .upload__drop { outline: 3px solid var(--focus); outline-offset: 3px; }
.upload__preview { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.upload__item { position: relative; width: 88px; height: 88px; border: var(--line); background: var(--paper-3); }
.upload__item img { width: 100%; height: 100%; object-fit: cover; }
.upload__remove { position: absolute; right: -10px; top: -10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-round); background: var(--ink); color: #fff; border: 2px solid var(--paper); }
.upload__remove .icon { width: 14px; height: 14px; stroke-width: 3; }
.upload__remove:hover { background: var(--red); }

/* ==========================================================================
  13. MODAL, PANEL LATERAL, TOAST, AVISOS (sin alert ni confirm)
   Usa <dialog>. Abrir: data-dialog-open="id". Cerrar: data-dialog-close.
   RDN.confirm({title, body}) devuelve una promesa; RDN.toast(texto, {type}).
   <dialog class="modal" id="m1" aria-labelledby="m1t"><div class="modal__box">
     <header class="modal__head"><h2 class="modal__title" id="m1t">Título</h2><button class="icon-btn" type="button" data-dialog-close aria-label="Cerrar"><svg class="icon"><use href="#i-close"/></svg></button></header>
     <div class="modal__body">…</div><footer class="modal__foot">…botones</footer></div></dialog>
   Variantes: .modal--sm (confirmaciones), .modal--drawer (panel lateral derecho)
   ========================================================================== */
.modal {
  padding: 0;
  width: min(600px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  margin: auto;
  background: var(--paper); color: var(--ink);
  border: var(--line-2);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  --focus: var(--ink);
}
.modal::backdrop { background: rgb(29 29 27 / 0.62); }
.modal:not([open]) { display: none; }
.modal[open] { animation: pop-in var(--t-med) var(--ease); }
.modal__box { display: flex; flex-direction: column; max-height: calc(100dvh - 36px); }
.modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-5) var(--sp-5) var(--sp-3); border-bottom: var(--line); }
.modal__title { font-size: var(--fs-xl); line-height: 1.08; }
.modal__body { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5); }
.modal__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); background: var(--paper-2); border-top: var(--line); }
.modal--sm { width: min(440px, calc(100vw - 32px)); }
.modal--drawer {
  width: min(460px, 100vw);
  height: 100dvh; max-height: none;
  margin: 0 0 0 auto;
  border-width: 0 0 0 2px;
}
.modal--drawer .modal__box { height: 100%; max-height: none; }
.modal--drawer[open] { animation: drawer-in 320ms var(--ease); }

/* .toast  Avisos breves. Los crea RDN.toast() dentro de .toast-region (aria-live) */
.toast-region {
  position: fixed; z-index: var(--z-toast);
  left: max(16px, env(safe-area-inset-left, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: grid; gap: var(--sp-2);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3) var(--sp-3) var(--sp-4);
  background: var(--ink); color: #fff;
  box-shadow: var(--shadow-pop);
  font-size: var(--fs-sm); line-height: 1.4; font-weight: 500;
  --focus: #fff;
  animation: toast-in var(--t-med) var(--ease);
}
.toast--ok { background: var(--ok); }
.toast--error { background: var(--red-deep); }
.toast .icon { margin-top: 1px; }
.toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast__close { display: grid; place-items: center; width: 28px; height: 28px; margin: -4px 0; color: inherit; }
.toast__close:hover { background: rgb(255 255 255 / 0.18); }
.toast__close .icon { width: 16px; height: 16px; }
@media (min-width: 640px) { .toast-region { left: auto; width: 400px; } }

/* .notice  Aviso dentro de la página. Variantes: --info --ok --error (por defecto: neutro)
   <div class="notice notice--ok" role="status"><svg class="icon"><use href="#i-check"/></svg><div><strong>Listo.</strong> Tu perfil quedó guardado.</div></div> */
.notice { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); background: var(--paper-2); border: 1px solid var(--ink); font-size: var(--fs-sm); line-height: 1.45; }
.notice .icon { margin-top: 1px; }
.notice strong { font-weight: 700; }
.notice--info { background: var(--info-tint); border-color: var(--info); color: #173A52; }
.notice--ok { background: var(--ok-tint); border-color: var(--ok); color: #0A5632; }
.notice--error { background: var(--err-tint); border-color: var(--red-deep); color: #7A0320; }

/* .empty  Estado vacío (sin resultados, sin publicaciones) */
.empty { display: grid; gap: var(--sp-3); justify-items: start; padding: var(--sp-8) var(--sp-6); background: var(--paper-2); border: 2px dashed var(--ink); }
.empty h3 { font-size: var(--fs-xl); }
.empty p { max-width: 46ch; color: var(--fg-2); }

/* ==========================================================================
  14. TABLAS, TARIFAS, PAGINACIÓN, MIGAS DE PAN
   ========================================================================== */

/* .table  Tabla de datos. Envolver en .table-wrap si es ancha.
   .table--stack apila filas en móvil: cada <td data-label="Pedido"> muestra su etiqueta. */
.table-wrap { max-width: 100%; overflow-x: auto; }
.table { font-size: var(--fs-sm); }
.table th, .table td { padding: 12px 14px; text-align: left; vertical-align: top; border-bottom: var(--line-soft); }
.table thead th {
  font-family: var(--font-head); font-weight: 700; font-size: var(--fs-sm);
  letter-spacing: 0.12em; text-transform: uppercase;
  border-bottom: var(--line-2); color: var(--ink);
  white-space: nowrap;
}
.table tbody tr:hover { background: var(--paper-2); }
.table .num, .table td.num { text-align: right; font-variant-numeric: tabular-nums lining-nums; }
@media (max-width: 639.98px) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: var(--sp-2) 0; border-top: var(--line-2); }
  .table--stack td { display: flex; justify-content: space-between; gap: var(--sp-4); padding: 6px 0; border: 0; text-align: right !important; }
  .table--stack td::before { content: attr(data-label); font-family: var(--font-head); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); text-align: left; }
}

/* .rate-table  Tabla de tarifas (publicidad, planes). Dos columnas: concepto y precio.
   <table class="rate-table"><caption class="sr-only">Tarifas de publicidad</caption><tbody>
     <tr class="rate-table__group"><th colspan="2" scope="colgroup">Portada</th></tr>
     <tr><th scope="row">Portada individual<span class="rate-table__size">20.5 × 27 cm</span></th><td class="num">$250,000</td></tr></tbody></table> */
.rate-table th, .rate-table td { padding: 12px 0; vertical-align: baseline; border-bottom: var(--line-soft); text-align: left; }
.rate-table tbody th { font-weight: 600; font-size: var(--fs-base); padding-right: var(--sp-4); }
.rate-table td { text-align: right; white-space: nowrap; font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg); font-variant-numeric: lining-nums; }
.rate-table__size { display: block; margin-top: 2px; font-weight: 400; font-size: var(--fs-sm); color: var(--fg-mute); }
.rate-table__group th {
  padding: var(--sp-8) 0 var(--sp-2);
  border-bottom: var(--line-2);
  font-family: var(--font-head); font-weight: 800; font-size: var(--fs-lg);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--red-deep);
}
.rate-table tbody tr:not(.rate-table__group):hover { background: var(--red-tint); }
.rate-table__note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--fg-mute); }

/* .pagination  <nav class="pagination" aria-label="Paginación"><ul><li><a class="pagination__link" href="#" aria-current="page">1</a></li>…</ul></nav> */
.pagination ul { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); }
.pagination__link, .pagination__gap {
  display: inline-grid; place-items: center; grid-auto-flow: column; gap: var(--sp-2);
  min-width: 44px; height: 44px; padding: 0 var(--sp-3);
  font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; letter-spacing: 0.06em;
  text-decoration: none;
  border: 1px solid transparent;
}
.pagination__link:hover { border-color: var(--ink); }
.pagination__link[aria-current="page"] { background: var(--ink); color: #fff; }
.pagination__link[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.pagination__text { display: none; text-transform: uppercase; }
@media (min-width: 640px) { .pagination__text { display: inline; } }

/* .breadcrumbs  <nav class="breadcrumbs" aria-label="Migas de pan"><ol><li><a href="#">Inicio</a></li><li aria-current="page">Directorio</li></ol></nav> */
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0; font-size: var(--fs-sm); color: var(--fg-mute); }
.breadcrumbs li + li::before { content: "/"; margin: 0 var(--sp-2); color: var(--red); font-weight: 700; }
.breadcrumbs a { display: inline-block; padding: 8px 0; color: var(--ink-soft); text-decoration: none; }
.breadcrumbs a:hover { color: var(--red-deep); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink); font-weight: 600; padding: 8px 0; }

/* .rule  Filetes sueltos */
.rule { border: 0; border-top: var(--line-4); margin: var(--sp-8) 0; }
.rule--thin { border-top: var(--line); }
.rule--soft { border-top: var(--line-soft); }

/* ==========================================================================
  15. ANIMACIÓN
   Una sola secuencia de entrada: los hijos directos de .enter suben y aparecen
   en cascada. Todo es visible en reposo (la animación solo parte de un estado
   inicial y termina en el estado normal; si no corre, nada queda oculto).
   ========================================================================== */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pop-in { from { opacity: 0; transform: translateY(10px) scale(0.985); } }
@keyframes drawer-in { from { transform: translateX(36px); opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }

.enter > * { animation: rise 720ms var(--ease) both; }
.enter > :nth-child(1) { animation-delay: 40ms; }
.enter > :nth-child(2) { animation-delay: 120ms; }
.enter > :nth-child(3) { animation-delay: 200ms; }
.enter > :nth-child(4) { animation-delay: 280ms; }
.enter > :nth-child(5) { animation-delay: 360ms; }
.enter > :nth-child(n+6) { animation-delay: 440ms; }
.enter-media { animation: rise 900ms var(--ease) 180ms both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .card-article:hover .card-article__media img,
  .card-video:hover .card-video__media img,
  .card-edition:hover .card-edition__cover,
  .card-product:hover { transform: none; }
}

/* ==========================================================================
  16. UTILIDADES AÑADIDAS EN LA REVISIÓN DE DISEÑO (octubre 2026)
   Solo se añade; ningún token anterior cambia de valor.
   ========================================================================== */
:root {
  --shadow-lift: 0 1px 1px rgb(29 29 27 / 0.2), 0 28px 34px -18px rgb(29 29 27 / 0.8);   /* portada levantada */
  --hard-red: 6px 6px 0 var(--red);                                                     /* sombra dura de imprenta */
  --hard-ink: 6px 6px 0 var(--ink);
}

/* Botón flotante "Comparar diseños" (lo inyecta shell.js con estilos en línea): se viste con la marca */
#rdn-comparar-fab {
  font-family: var(--font-head), "Arial Narrow", sans-serif !important;
  font-weight: 700 !important; font-size: 15px !important; line-height: 1 !important;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 13px 18px 12px !important;
  border: 2px solid #fff !important; border-radius: var(--r-1) !important;
  box-shadow: 5px 5px 0 var(--red) !important;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
#rdn-comparar-fab:hover, #rdn-comparar-fab:focus-visible { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--red) !important; }
#rdn-comparar-fab:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Botones del sistema: sombra dura al pasar el cursor (solo en los sólidos) */
.btn--primary:hover, .btn--network:hover, .btn--dark:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-1px, -1px); }
.btn--primary, .btn--network, .btn--dark { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
.on-ink .btn--primary:hover, .on-ink .btn--network:hover, .band--ink .btn--primary:hover { box-shadow: 4px 4px 0 #fff; }
.btn:active { box-shadow: none; }

/* Campos: el foco se ve como filete de tinta y fondo de papel 2 */
.input:focus, .textarea:focus, .select:focus { background-color: var(--paper); }
.input:hover:not(:focus), .textarea:hover:not(:focus), .select:hover:not(:focus) { background-color: var(--paper-2); }

/* Folio sobre rojo */
.on-red .folio { color: #FFD2DA; }
.on-red .rubric { border-top-color: #fff; }

@media (prefers-reduced-motion: reduce) {
  #rdn-comparar-fab:hover, .btn--primary:hover, .btn--network:hover, .btn--dark:hover { transform: none; }
}