/* ============================================================
   redesign.css — Capa de reskin 2026 · tema dx-frumboli
   Sistema de diseño: ver mockups/DESIGN-SYSTEM.md
   ------------------------------------------------------------
   IMPORTANTE: esta hoja CARGA DESPUÉS del CSS legacy
   (normalize → foundation → style.css → mobile) y solo
   SOBREESCRIBE. NO hace resets destructivos (no toca
   box-sizing global ni margin/padding universales) para no
   romper las páginas todavía no migradas.
   El CSS específico de cada página se agrega por etapas al
   final de este archivo, scopeado por su clase de contenedor.
   ============================================================ */

/* ── TOKENS — Paleta B (definitiva) ── */
:root {
  --bg:    #FAF7F2;   /* fondo / lienzo */
  --surf:  #E7E1D8;   /* superficie / bloques alternos */
  --topo:  #A89B8C;   /* neutro, separadores, placeholders */
  --vino:  #6E2A35;   /* acento (con cuentagotas) */
  --negro: #14110F;   /* texto principal / titulares */
  --body:  #4A4540;   /* texto de cuerpo */
  --bd:    #E3DCD2;   /* borde suave */
  --bd2:   #EFEAE2;   /* borde suave alternativo */
  --nav-h: 64px;      /* alto canónico de la nav fija (desktop). Mobile: ver @860 */
}

/* ── TIPOGRAFÍA GLOBAL (reskin) ── */
body {
  font-family: 'Inter', sans-serif;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Archivo', sans-serif;
  color: var(--negro);
}

a { color: inherit; }
a:hover { color: var(--vino); }

/* ── ÁTOMOS REUTILIZABLES (clases nuevas del rediseño) ──
   Sin efecto hasta que el markup las use; seguras de cargar globalmente. */

/* Antetítulo / kicker */
.kick {
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vino);
}

/* Título de sección */
.sec {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 16px;
  color: var(--negro);
  letter-spacing: -.005em;
}

/* Separador fino */
.rule { height: 1px; background: var(--topo); border: 0; margin: 8px 0 13px; }

/* Botón principal */
.btn-vino {
  display: inline-block;
  background: var(--vino);
  color: #FAF7F2;
  text-align: center;
  padding: 14px 22px;
  border-radius: 3px;
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .15s ease;
}
.btn-vino:hover { background: #5c222c; color: #fff; }

/* ============================================================
   ETAPA 2 — SHELL GLOBAL (nav + footer)
   ============================================================ */

/* Ocultar la barra de navegación legacy (off-canvas tab-bar negra).
   El menú slide-in mobile (.left-off-canvas-menu) se conserva y se reutiliza. */
.main-header { display: none !important; }

/* ── NAV PRINCIPAL (rediseño) ── */
.redesign-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  max-width: 1200px;          /* alinea la nav con el contenido a 1200 */
  margin: 0 auto;
  height: var(--nav-h);       /* alto fijo → el offset de contenido es exacto */
  padding: 0 40px;
  box-sizing: border-box;
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  position: relative;         /* fija (position:fixed) solo en páginas .rd-page → más abajo */
  z-index: 30;
}

/* ── Nav FIJA en páginas rediseñadas ──
   No se puede usar position:sticky: el ancestro .off-canvas-wrap{overflow:hidden}
   de Foundation crea un contexto de scroll que ANULA sticky. Se usa position:fixed:
   el .inner-wrap en estado base NO tiene transform, así que fixed se ancla al viewport.
   Al abrir el off-canvas, .inner-wrap se transforma y la nav acompaña el slide (deseado).
   Scopeado a body:has(.rd-page) → las páginas aún no migradas conservan la nav en flujo. */
body:has(.rd-page) .redesign-nav {
  position: fixed;
  top: 0; left: 0; right: 0;   /* + margin:0 auto + max-width:1200 → centrada */
}
/* Empuja el contenido para que no quede bajo la nav fija. #container es el ancestro
   común a todos los templates; la banda del offset queda cubierta por la nav (crema 1200)
   y a los lados muestra el fondo off-page → mismo "marco" que el resto. */
body:has(.rd-page) #container { padding-top: var(--nav-h); }
/* Con admin bar de WP (editora logueada) la nav fija arranca bajo la barra.
   OJO: WP solo deja la admin bar FIJA en >782px; en ≤782 la pasa a position:absolute
   (scrollea con la página) → ahí la nav debe ir a top:0, si no queda un hueco arriba. */
@media screen and (min-width: 783px) {
  body.admin-bar:has(.rd-page) .redesign-nav { top: 32px; }
}
/* Barra de búsqueda (toggle de la lupa): vive en el flujo ANTES de #container, o sea
   arranca en top:0 → al abrirla con slideDown() quedaba TAPADA por la nav fija (z-index:30).
   En páginas .rd-page la fijamos pegada debajo de la nav y por encima de ella. */
body:has(.rd-page) .mobile-search-bar {
  position: fixed;
  top: var(--nav-h); left: 0; right: 0;
  z-index: 40;                 /* sobre la nav (30) */
  background: var(--bg);
  border-bottom: 1px solid var(--bd);
  box-sizing: border-box;
}
@media screen and (min-width: 783px) {
  body.admin-bar:has(.rd-page) .mobile-search-bar { top: calc(var(--nav-h) + 32px); }
}
.redesign-nav .rn-logo { line-height: 0; }
/* El logo del tema (frumboli-logo.png) es blanco (era para la barra negra legacy) → lo
   forzamos a negro para la nav clara. Cuando el usuario suba un logo negro definitivo por FTP
   reemplazando ese archivo, esto sigue funcionando (negro→negro). */
.redesign-nav .rn-logo img { height: 30px; width: auto; display: block; filter: brightness(0); }
.redesign-nav .rn-links { margin-left: auto; }   /* empuja links + búsqueda a la derecha */

.redesign-nav .rn-burger { display: none; }   /* solo mobile */

.redesign-nav .rn-links .rn-menu {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.redesign-nav .rn-links .rn-menu li { margin: 0; }
.redesign-nav .rn-links .rn-menu a {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--negro);
  text-decoration: none;
}
.redesign-nav .rn-links .rn-menu a:hover,
.redesign-nav .rn-links .rn-menu .current-menu-item > a {
  color: var(--vino);
}

.redesign-nav .rn-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--negro);
  flex-shrink: 0;
}
.redesign-nav .rn-search svg { width: 17px; height: 17px; }

/* Nav — Mobile (≤860px): hamburguesa + logo + búsqueda; links al off-canvas.
   Breakpoint unificado con el resto del rediseño (antes ≤768, descalzado del
   colapso de contenido a ≤860). El alto mobile se baja a 54px vía --nav-h para
   que el offset de #container siga el cambio. */
@media only screen and (max-width: 860px) {
  :root { --nav-h: 54px; }
  .redesign-nav { padding: 0 20px; justify-content: space-between; }
  .redesign-nav .rn-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 4px;
    cursor: pointer;
  }
  .redesign-nav .rn-burger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--negro);
    border-radius: 1px;
  }
  .redesign-nav .rn-links { display: none; }
  .redesign-nav .rn-logo img { height: 28px; }
}

/* ── Off-canvas (menú slide-in mobile) — reskin de paleta ── */
.left-off-canvas-menu { background: var(--negro); }
.left-off-canvas-menu .off-canvas-list a {
  font-family: 'Inter', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  color: var(--bg);
}
.left-off-canvas-menu .off-canvas-list a:hover { color: var(--topo); }

/* Pisar los restos de la paleta vieja del menú legacy (mobile.css):
   divisor gris #5f5f5f y el ítem activo rojo #e4003a. El acento sobre el fondo casi
   negro del drawer usa el vino aclarado #8C4F5A (mismo de los botones) por contraste. */
.left-off-canvas-menu .off-canvas-list li a { border-bottom-color: rgba(250,247,242,.12); }
.left-off-canvas-menu .off-canvas-list li a:hover,
.left-off-canvas-menu .off-canvas-list li a:focus { background: rgba(250,247,242,.05); }
.left-off-canvas-menu .off-canvas-list li.current_page_item a,
.left-off-canvas-menu .off-canvas-list li.current-menu-item a { color: #8C4F5A; }

/* Redes sociales al pie del drawer → neutro de marca (topo), blanco al hover */
.left-off-canvas-menu .social-media a { color: var(--topo); }
.left-off-canvas-menu .social-media a:hover { color: var(--bg); }

/* ── Off-canvas como DRAWER FIJO (mobile, páginas rediseñadas) ──
   Problema del mecanismo legacy de Foundation: el menú es position:absolute anclado
   al tope del wrapper y la PÁGINA ENTERA se desliza para revelarlo (transform en
   .inner-wrap). En una página larga ya scrolleada, los ítems quedan arriba fuera de
   pantalla y se ve el tope de la página sobre el negro.
   Fix: el menú pasa a position:fixed y se desliza ÉL sobre la página (drawer); la
   página NO se mueve. Se reusa el mismo markup y el toggle .left-off-canvas-toggle
   (Foundation sigue alternando la clase .move-right; acá solo redefinimos qué hace). */
@media only screen and (max-width: 860px) {
  /* la página no se empuja: el drawer va por encima */
  body:has(.rd-page) .move-right > .inner-wrap { transform: none !important; }

  body:has(.rd-page) .left-off-canvas-menu {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 16rem; max-width: 82vw;
    transform: translateX(-100%);
    transition: transform .28s ease;
    z-index: 1000;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  body:has(.rd-page) .off-canvas-wrap.move-right .left-off-canvas-menu {
    transform: translateX(0);
  }

  /* Overlay de cierre: Foundation inyecta <a class="exit-off-canvas"> en el DOM.
     OJO: está presente SIEMPRE (no solo al abrir) → hay que mostrarlo SOLO con
     .move-right, si no tapa toda la página y se come los toques. */
  body:has(.rd-page) .off-canvas-wrap.move-right .exit-off-canvas {
    position: fixed; inset: 0;
    z-index: 999;
    background: rgba(20,17,15,.5);
    display: block;
  }
}

/* ── FOOTER GLOBAL — rediseño REDUCIDO (2 columnas, ancho del body) ──
   footer.php: ① Marca (logo + dirección + social, todo bajo el logo) ·
   ② Secciones (links a hubs, incluye Contacto). El fondo negro se enmarca a 1200 en
   páginas .rd-page (ver sección off-page); el contenido se centra al ancho del body. */
.main-footer { background: var(--negro); color: #FAF7F2; }

/* Anula el padding legacy de .inner-footer (3.5rem 2rem) para no duplicar con .ft-inner */
.main-footer #inner-footer,
.main-footer .inner-footer { padding: 0; max-width: none; }

.main-footer .ft-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 56px 50px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 48px;
}

/* ① Marca: logo + dirección + redes, apiladas bajo el logo */
.ft-brand { max-width: 380px; }
.ft-logo { display: inline-block; line-height: 0; }
.ft-logo img { height: 28px; width: auto; display: block; }  /* logo del tema ya es blanco → sin filtro sobre el footer oscuro */

.ft-brand .ft-address { margin-top: 20px; }

/* Dirección */
.ft-address { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--topo); line-height: 1.75; }

/* Redes sociales — bajo la dirección */
.ft-social { display: flex; gap: 16px; margin-top: 22px; }
.ft-social a { color: var(--topo); font-size: 17px; line-height: 1; text-decoration: none; }
.ft-social a:hover { color: #FAF7F2; }

/* ② Secciones (links sin título; Contacto es uno más).
   Vive en el sector derecho pero con los ítems alineados a la IZQUIERDA y separada
   del borde (margin-right) → no pegada al margen, mejor lectura. */
.ft-sections { text-align: left; margin-right: 6rem; }
.ft-col-links { font-family: 'Inter', sans-serif; font-size: 14px; }
.ft-col-links a {
  display: block;
  color: var(--topo);
  text-decoration: none;
  line-height: 1.5;
  padding: 6px 0;
}
.ft-col-links a:hover { color: #FAF7F2; }

/* ── Tablet ≤860: Marca | Secciones lado a lado; ítems siempre a la izquierda ── */
@media only screen and (max-width: 860px) {
  .main-footer .ft-inner {
    padding: 44px 32px 38px;
    gap: 32px;
  }
  .ft-sections { margin-right: 0; }
}

/* ── Phone ≤600: se MANTIENE lado a lado (marca izq · secciones der, ítems a la
   izquierda). No se apila: así no queda hueco vertical y la dirección entra en una
   línea porque en flex la marca toma el ancho que necesita. Solo se ajusta el padding. */
@media only screen and (max-width: 600px) {
  .main-footer .ft-inner {
    padding: 36px 22px 32px;
    gap: 20px;
  }
}

/* ── NEWSLETTER STICKY (#subscribe-box) — reskin Paleta B ──
   El markup y la posición fija vienen de un widget guardado en la base de datos
   (no en archivos), así que acá SOLO repintamos por CSS. No conozco todas las clases
   internas → uso selectores genéricos scopeados a #subscribe-box + !important donde el
   estilo viejo pega fuerte (rosa #fc0046 del botón, Oswald). NO se toca posición. */

/* Visibilidad: el sticky se muestra SOLO en la zona editorial (Magazine + Prensa +
   Videos, sus subcategorías y notas). La clase `rd-editorial` la pone bones.php
   (rd_is_editorial_zone). En el resto del sitio se oculta acá. Esto reemplaza al
   plugin de widget-visibility y al mu-plugin de parche en producción. */
body:not(.rd-editorial) #subscribe-box { display: none !important; }

/* Base: el widget trae tamaños enormes heredados → los reseteo a una escala sana */
#subscribe-box { font-family: 'Inter', sans-serif !important; font-size: 13px !important; line-height: 1.5 !important; }

/* Barra header / tab colapsado ("✉ SUSCRIBETE … X").
   nowrap + tamaño chico para que el título entre completo en el tab cerrado. */
#subscribe-box h2 {
  background: var(--negro) !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #FAF7F2 !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 13px 16px !important;
}
/* El "X" / cerrar dentro del header: que no se vea como botón vino */
#subscribe-box h2 a,
#subscribe-box h2 .close,
#subscribe-box h2 span {
  color: #FAF7F2 !important;
  background: none !important;
  font-size: 13px !important;
}

/* Titular del cuerpo ("Las últimas tendencias…") — antes gigante/serif */
#subscribe-box h1, #subscribe-box h3, #subscribe-box h4 {
  font-family: 'Archivo', sans-serif !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.25 !important;
  letter-spacing: .005em !important;
  color: var(--negro) !important;
  margin: 0 0 14px !important;
}
#subscribe-box p {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--body) !important;
  margin: 0 0 14px !important;
}

/* Campos NOMBRE / E-MAIL → look de input del sistema */
#subscribe-box input[type="text"],
#subscribe-box input[type="email"] {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  background: #fff !important;
  border: 1px solid var(--topo) !important;
  border-radius: 2px !important;
  color: var(--negro) !important;
  height: auto !important;
  padding: 10px 12px !important;
  box-shadow: none !important;
}
#subscribe-box input::placeholder { color: var(--topo); }

/* Botón "SUSCRIBETE" enviar (era rosa #fc0046) → vino.
   OJO: el botón real es un <button> SIN type="submit" → hay que agarrar `button` a secas
   (no `button[type=submit]`). :not(.close) excluye el botón de cerrar. */
#subscribe-box input[type="submit"],
#subscribe-box input[type="button"],
#subscribe-box button:not(.close),
#subscribe-box a.button:not(.close),
#subscribe-box .button:not(.close) {
  background: var(--vino) !important;
  border-color: var(--vino) !important;
  color: #FAF7F2 !important;
  font-family: 'Archivo', sans-serif !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .16em !important;
  border-radius: 3px !important;
  padding: 12px 16px !important;
  height: auto !important;
}

/* ============================================================
   LIENZO / FONDO "OFF-PAGE" (solo páginas rediseñadas)
   En los mockups: body #d9d2c8 (off-page) + .page 1200 crema → marco.
   Acá lo replicamos scopeado con :has(.rd-page): el body toma el greige
   SOLO en páginas que ya tienen el contenedor .rd-page (no afecta las no
   migradas, que siguen en crema), y el lienzo .rd-page pinta --bg encima.
   :has() tiene soporte universal en navegadores 2026; si faltara, degrada
   a sin-marco (no rompe nada).
   ============================================================ */
body:has(.rd-page) { background: #d9d2c8; }
.rd-page { background: var(--bg); }          /* lienzo crema (1200, centrado vía .content-frame) */

/* El contenido pega contra el footer (como el mockup). Legacy: .main-footer{margin-top:1.5rem}
   dejaba ver una banda del fondo off-page entre el crema y el footer oscuro.
   Además: el footer se ENMARCA al ancho del sitio (1200, centrado) igual que la
   columna de contenido → la banda negra queda dentro del marco, con el fondo off-page
   #d9d2c8 a los lados (no full-width). Solo en páginas .rd-page (las enmarcadas). */
body:has(.rd-page) .main-footer { margin: 0 auto; max-width: 1200px; }

/* ============================================================
   ETAPA 3 — DETALLE DE CONVERSIÓN  (clase compartida .rd-detail)
   Molde común de las páginas "single" del embudo con hero + 2 columnas
   (contenido / form sticky + mapa) + relacionados + sticky CTA mobile.
   Lo usan: single-class.php (curso) y spost-servicios.php (servicio).
   Cualquier divergencia por página va scopeada bajo .rd-single-class /
   .rd-spost-servicios (hoy no hay; son visualmente idénticas).
   ============================================================ */

/* Ancho del rediseño: 1200px SOLO en páginas .rd-page (no toca .content-frame global → Magazine queda en 940). */
.rd-page.content-frame { max-width: 1200px; }

/* mobile.css legacy mete padding:.4rem horizontal en .content-frame ≤1025px (≤64.063em)
   → inset lateral del lienzo en tablet/mobile. En el rediseño el hero/facts van a sangre
   completa (como el mockup); los bloques internos ya traen su propio padding horizontal. */
.rd-page.content-frame { padding-left: 0; padding-right: 0; }
.rd-detail article { max-width: 1200px; margin: 0 auto; }

/* El hero pega contra el nav (sin gap). Legacy: .content-frame { padding-top:.5rem }
   metía 8px de fondo crema arriba del hero; en el mockup ese espacio no existe. */
.rd-detail.content-frame { padding-top: 0; }

/* ── HERO ── */
.rd-detail .rd-hero {
  position: relative;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 60px 50px 64px;
  overflow: hidden;
  background: var(--negro) center 30% / cover no-repeat;
  isolation: isolate;
}
.rd-detail .rd-hero-overlay {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right,
    rgba(0,0,0,.66) 0%, rgba(0,0,0,.5) 18%, rgba(0,0,0,.18) 34%, rgba(0,0,0,0) 46%);
}
.rd-detail .rd-hero-content { position: relative; z-index: 3; }
.rd-detail .rd-hero .kick { color: #D8B7AE; margin-bottom: 14px; }
.rd-detail .rd-hero h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 52px; line-height: 1.04; letter-spacing: -.015em;
  color: #FAF7F2; max-width: 62%; margin: 0;
}

/* ── FACTS STRIP ── */
.rd-detail .rd-facts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--bg); border-bottom: 1px solid rgba(0,0,0,.12);
}
.rd-detail .rd-fact {
  padding: 22px 32px; border-right: 1px solid rgba(0,0,0,.12);
  display: flex; flex-direction: column; gap: 6px;
}
.rd-detail .rd-fact:last-child { border-right: none; }
.rd-detail .rd-fact-label {
  font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--body);
}
.rd-detail .rd-fact-value {
  font-family: 'Archivo', sans-serif; font-size: 19px; font-weight: 700;
  text-transform: uppercase; letter-spacing: -.01em; color: var(--negro); line-height: 1.1;
}

/* ── BODY: 2 columnas ── */
.rd-detail .rd-body {
  display: grid; grid-template-columns: 1.6fr 1fr; gap: 44px; padding: 52px 40px;
  align-items: start;
}
.rd-detail .rd-aside { position: sticky; top: calc(var(--nav-h) + 20px); }

/* ── CONTENIDO DEL EDITOR (the_content) reestilizado ──
   IMPORTANTE: targetea el markup REAL del editor (ver código fuente de dev), NO el del
   mockup. Convención de edición (ver guía): lead = primer <h2>; subtítulos de sección =
   <h3> o <h4> (hoy son <h4><strong>); bajadas = <p>; listas con viñeta = <ul> normal;
   tabla de horarios = <table>; imagen de cuerpo = <img> insertada en el punto deseado. */

/* Base: forzar Inter en todo el contenido (evita heredar fuentes legacy del tema) */
.rd-detail .rd-content .entry-content,
.rd-detail .rd-content .entry-content p,
.rd-detail .rd-content .entry-content li,
.rd-detail .rd-content .entry-content td,
.rd-detail .rd-content .entry-content strong,
.rd-detail .rd-content .entry-content span {
  font-family: 'Inter', sans-serif;
}

/* Lead / bajada inicial (primer h2 del contenido) */
.rd-detail .rd-content .entry-content > h2:first-child {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 13px; letter-spacing: .03em;
  line-height: 1.5; text-transform: uppercase; color: var(--body); margin: 0 0 26px;
}

/* Subtítulos de sección — el contenido real usa <h4><strong>; cubrimos h3 y h4 */
.rd-detail .rd-content .entry-content h3,
.rd-detail .rd-content .entry-content h4 {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--negro);
  margin: 34px 0 0; padding-bottom: 10px; border-bottom: 1px solid var(--topo);
}
.rd-detail .rd-content .entry-content h3 strong,
.rd-detail .rd-content .entry-content h4 strong { font-weight: 600; }
/* Matar los <br> sueltos que el editor deja dentro de los encabezados */
.rd-detail .rd-content .entry-content h3 br,
.rd-detail .rd-content .entry-content h4 br { display: none; }

.rd-detail .rd-content .entry-content p {
  font-size: 14px; line-height: 1.72; color: var(--body); margin: 14px 0 0;
}
.rd-detail .rd-content .entry-content p:empty { display: none; margin: 0; } /* <p></p> vacíos */

/* Viñetas — solo en <ul> normales, NO en los block-grid de Foundation (diploma, etc.) */
.rd-detail .rd-content .entry-content ul:not([class*="block-grid"]) { list-style: none; margin: 12px 0 0; padding: 0; }
.rd-detail .rd-content .entry-content ul:not([class*="block-grid"]) > li {
  position: relative; padding-left: 16px; margin: 8px 0;
  font-size: 13.5px; line-height: 1.6; color: var(--body);
}
.rd-detail .rd-content .entry-content ul:not([class*="block-grid"]) > li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--vino);
}

/* Neutralizar los block-grid de Foundation dentro del contenido (ej. diploma "Que recibirás") */
.rd-detail .rd-content .entry-content ul[class*="block-grid"] { list-style: none; margin: 18px 0 0; padding: 0; }
.rd-detail .rd-content .entry-content ul[class*="block-grid"] > li {
  float: none; width: auto; margin: 0; padding: 0; display: block;
}
.rd-detail .rd-content .entry-content ul[class*="block-grid"] > li > img {
  display: block; max-width: 300px; height: auto; margin: 0 0 14px; border-radius: 2px;
}

.rd-detail .rd-content .entry-content img { border-radius: 2px; height: auto; max-width: 100%; }

/* Tabla de horarios — !important para vencer los anchos/aligns inline que mete el editor */
.rd-detail .rd-content .entry-content table {
  width: 100% !important; height: auto !important; margin-top: 16px; border: 1px solid var(--bd);
  border-radius: 2px; border-collapse: collapse; overflow: hidden; table-layout: auto;
}
.rd-detail .rd-content .entry-content th,
.rd-detail .rd-content .entry-content td {
  width: auto !important; height: auto !important; text-align: left !important;
}
.rd-detail .rd-content .entry-content th {
  background: var(--surf); font-family: 'Inter', sans-serif; font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--topo);
  font-weight: 600; padding: 10px 14px;
}
.rd-detail .rd-content .entry-content td {
  font-size: 13.5px; color: var(--body); padding: 11px 14px; border-top: 1px solid var(--bd2);
}

/* ── ASIDE: FORMULARIO (estiliza el output de form-booking) ── */
.rd-detail .rd-form-section {
  background: var(--surf); border-radius: 3px; padding: 26px 24px;
}
.rd-detail .rd-form-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
  text-transform: uppercase; letter-spacing: -.005em; color: var(--vino); line-height: 1.15;
}
.rd-detail .rd-form-badge {
  display: inline-block; margin: 5px 0 17px; font-weight: 500; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--vino);
}
.rd-detail .rd-form-section .form-wrapper,
.rd-detail .rd-form-section .form { margin: 0; }
.rd-detail .rd-form-section .form-row { margin-bottom: 9px; }
.rd-detail .rd-form-section input[type="text"],
.rd-detail .rd-form-section input[type="email"],
.rd-detail .rd-form-section input[type="tel"],
.rd-detail .rd-form-section textarea {
  width: 100%; background: #fff; border: 1px solid var(--topo); border-radius: 2px;
  padding: 11px 13px; font-family: 'Inter', sans-serif; font-size: 13px; color: var(--negro);
}
.rd-detail .rd-form-section textarea { min-height: 72px; resize: vertical; }
.rd-detail .rd-form-section button.submit {
  width: 100%; background: #8C4F5A; color: #FAF7F2; border: none; cursor: pointer;
  padding: 14px; border-radius: 3px; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase; margin-top: 4px;
}
.rd-detail .rd-form-section button.submit:hover { background: #784351; }

/* ── ASIDE: UBICACIÓN (mapa + panel overlay con logo y datos, como en producción) ── */
.rd-detail .rd-location {
  margin-top: 18px; background: #fff; border: 1px solid var(--bd);
  border-radius: 2px; padding: 18px 20px;
}
.rd-detail .rd-location-label {
  font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--negro); margin-bottom: 12px;
}
.rd-detail .rd-map { position: relative; border-radius: 2px; overflow: hidden; line-height: 0; }
.rd-detail .rd-map iframe { width: 100%; height: 420px; border: 0; display: block; }
.rd-detail .rd-map-panel {
  position: absolute; top: 16px; left: 16px; right: 16px; z-index: 2;
  background: #fff; padding: 16px 18px; border-radius: 2px;
  box-shadow: 0 4px 14px rgba(0,0,0,.18); line-height: normal;
}
.rd-detail .rd-map-logo img { width: 128px; height: auto; display: block; margin-bottom: 10px; }
.rd-detail .rd-map-address { font-size: 12.5px; line-height: 1.5; color: var(--body); }

/* ── ASIDE: CTA "VER MÁS CURSOS" ── */
.rd-detail .rd-allcourses {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  background: var(--surf); padding: 22px 20px; margin-top: 16px; border-radius: 3px;
  text-decoration: none;
}
.rd-detail .rd-allcourses .ac-k {
  font-weight: 500; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--vino);
}
.rd-detail .rd-allcourses .ac-t {
  font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 17px; color: var(--vino); letter-spacing: -.005em; line-height: 1.15;
}
.rd-detail .rd-allcourses .ac-btn {
  background: #8C4F5A; color: #FAF7F2; padding: 12px 20px; border-radius: 3px;
  font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px;
}
.rd-detail .rd-allcourses .ac-btn svg { width: 13px; height: 13px; }

/* ── RELACIONADOS (salida de get_custom_footer, restyleada como cards) ──
   El markup es Foundation block-grid, en DOS bloques:
   · Combos (post_related): ul.medium-block-grid-2 (outer, 2 por fila) → li.post-medium
     → ul.medium-block-grid-2 ANIDADA (foto | texto, horizontal).
   · 3 últimos (related): ul.medium-block-grid-3 → li.post-small (header antes que foto).
   Se reconstruye con CSS Grid; !important para ganarle a Foundation/legacy sin depender
   de especificidad, y #content (id) para reforzar.
   CAUSA RAÍZ del escalonado (resuelta): al pasar el <ul> a display:grid, los ::before/::after
   del clearfix de Foundation se vuelven CELDAS del grid y descolocan los ítems → se eliminan
   más abajo. (NO era el float; los grid items lo ignoran.) */
.rd-detail .rd-related { padding: 10px 40px 52px; }
.rd-detail .rd-related-inner { border-top: 1px solid var(--bd); padding-top: 28px; }
.rd-detail .rd-related-inner > .sec { margin-bottom: 22px; }
.rd-detail .rd-related .hr-dotted { display: none; }
.rd-detail .rd-related .featured-posts + .featured-posts { margin-top: 30px; }

#content.rd-detail .rd-related ul.medium-block-grid-2,
#content.rd-detail .rd-related ul.medium-block-grid-3 {
  display: grid !important; gap: 30px 28px !important; margin: 0 !important;
  padding: 0 !important; list-style: none !important;
}
#content.rd-detail .rd-related ul.medium-block-grid-3 { grid-template-columns: repeat(3, 1fr) !important; }
#content.rd-detail .rd-related ul.medium-block-grid-2 { grid-template-columns: repeat(2, 1fr) !important; margin-bottom: 30px !important; }

#content.rd-detail .rd-related ul.medium-block-grid-2 > li,
#content.rd-detail .rd-related ul.medium-block-grid-3 > li {
  display: block !important; float: none !important; width: auto !important;
  height: auto !important; min-height: 0 !important; margin: 0 !important;
  padding: 0 !important; list-style: none !important;
}

/* CAUSA DEL ESCALONADO: Foundation agrega ::before/::after (clearfix) a cada
   block-grid. Al volver el <ul> display:grid, esos pseudo-elementos se vuelven
   CELDAS del grid y descolocan los ítems reales (foto/texto) en diagonal.
   Hay que sacarlos del flujo del grid. */
#content.rd-detail .rd-related ul.medium-block-grid-2::before,
#content.rd-detail .rd-related ul.medium-block-grid-2::after,
#content.rd-detail .rd-related ul.medium-block-grid-3::before,
#content.rd-detail .rd-related ul.medium-block-grid-3::after {
  content: none !important; display: none !important;
}

/* 3 últimos: el markup trae header antes que imagen → flex column + order sube la imagen */
#content.rd-detail .rd-related ul.medium-block-grid-3 > li { display: flex !important; flex-direction: column; }
#content.rd-detail .rd-related ul.medium-block-grid-3 > li .post-pic { order: -1; }

/* Combos: la ul ANIDADA = horizontal (foto izq + texto der), como en producción */
#content.rd-detail .rd-related li.post-medium > ul.medium-block-grid-2 {
  display: grid !important; grid-template-columns: 104px 1fr !important;
  gap: 16px !important; align-items: start !important; margin: 0 !important;
}

#content.rd-detail .rd-related .post-pic { line-height: 0; }
#content.rd-detail .rd-related .post-pic img {
  width: 100% !important; height: 220px !important; object-fit: cover; border-radius: 2px; display: block;
}
/* Fila de 3 relacionados: al ser apaisadas, encuadrar un poco más arriba (no al tope)
   para que los rostros no queden cortados por el centro. */
#content.rd-detail .rd-related ul.medium-block-grid-3 .post-pic img { object-position: 50% 28%; }
#content.rd-detail .rd-related .post-category {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vino); margin-top: 16px; margin-bottom: 8px;
}
#content.rd-detail .rd-related .post-title {
  display: block; height: auto !important; overflow: visible !important; padding: 0;
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px;
  line-height: 1.18; letter-spacing: -.01em; text-transform: uppercase; color: var(--negro);
  margin-bottom: 9px; text-decoration: none;
}
#content.rd-detail .rd-related .post-excerpt { font-size: 13px; line-height: 1.62; color: var(--body); }
#content.rd-detail .rd-related .post-excerpt p { margin: 0; }

/* Combo horizontal: foto chica cuadrada + título más compacto que los 3-últimos */
#content.rd-detail .rd-related li.post-medium .post-pic img {
  width: 104px !important; height: 104px !important;
}
#content.rd-detail .rd-related li.post-medium .post-category { margin-top: 0; }
#content.rd-detail .rd-related li.post-medium .post-title { font-size: 15px; }

/* ── STICKY CTA (solo mobile) ── */
.sticky-cta { display: none; }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-detail .rd-body { grid-template-columns: 1fr; gap: 32px; padding: 40px; }
  .rd-detail .rd-aside { position: static; }
  .rd-detail .rd-hero h1 { max-width: 100%; font-size: 42px; }
  #content.rd-detail .rd-related ul.medium-block-grid-3 { grid-template-columns: 1fr 1fr !important; }
  #content.rd-detail .rd-related ul.medium-block-grid-2 { grid-template-columns: 1fr !important; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-detail .rd-hero { min-height: 300px; padding: 40px 20px 32px; }
  .rd-detail .rd-hero h1 { font-size: 34px; }
  .rd-detail .rd-fact { padding: 14px 16px; }
  .rd-detail .rd-fact-value { font-size: 14px; }
  .rd-detail .rd-body { padding: 28px 20px; gap: 26px; }
  .rd-detail .rd-related { padding: 0 20px 40px; }
  #content.rd-detail .rd-related ul.medium-block-grid-3 { grid-template-columns: 1fr !important; gap: 28px; }

  .sticky-cta {
    display: block; position: fixed; bottom: 20px; left: 16px; right: 16px;
    z-index: 100; pointer-events: none; transition: opacity .25s ease;
  }
  .sticky-cta.sticky-cta--hidden { opacity: 0; pointer-events: none; }
  .sticky-cta a {
    display: block; pointer-events: auto; background: #8C4F5A; color: #FAF7F2;
    text-align: center; padding: 13px 16px; border-radius: 6px; font-family: 'Inter', sans-serif;
    font-weight: 500; font-size: 13px; text-decoration: none; box-shadow: 0 6px 24px rgba(0,0,0,.28);
  }
}

/* ============================================================
   ETAPA 4 — page-school  (todo scopeado bajo .rd-school)
   Mockup: mockup-page-school.html
   Estructura: HERO split (destacada + título) → bloque editorial
   (the_content) → grilla de cursos (CPT class).
   ============================================================ */

/* El contenedor toma el ancho 1200 del rediseño (vía .rd-page.content-frame, ya global)
   y el hero pega contra la nav (anula el padding-top de .content-frame legacy). */
.rd-school.content-frame { padding-top: 0; }
.rd-school article { max-width: 1200px; margin: 0 auto; }

/* ── HERO SPLIT (desktop): imagen izq 44% + panel de texto der ── */
.rd-school .rd-hero {
  display: flex;
  min-height: 460px;
  border-bottom: 1px solid var(--bd);
}
.rd-school .rd-hero-img {
  width: 44%; flex-shrink: 0; overflow: hidden; line-height: 0;
  background: var(--surf);   /* fallback si el curso no tiene imagen destacada */
}
.rd-school .rd-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block;
}
.rd-school .rd-hero-text {
  flex: 1; background: var(--bg);
  padding: 52px 56px;
  display: flex; flex-direction: column; justify-content: center;
}
.rd-school .rd-hero h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 46px; line-height: .92; letter-spacing: -.03em; color: var(--negro); margin: 0 0 22px;
}
/* 1ª parte del título (antes del divisor) en topo, tamaño menor */
.rd-school .rd-hero h1 .rd-hero-pre {
  display: block; font-weight: 700; font-size: 34px; line-height: 1;
  letter-spacing: -.02em; color: var(--topo); margin-bottom: 4px;
}

/* Bio del hero = the_content (cuerpo WPBakery). Tipografía de bajada. */
.rd-school .rd-hero-bio,
.rd-school .rd-hero-bio p,
.rd-school .rd-hero-bio li,
.rd-school .rd-hero-bio strong { font-family: 'Inter', sans-serif; }
.rd-school .rd-hero-bio p { font-size: 13.5px; line-height: 1.75; color: var(--body); margin: 0 0 12px; }
.rd-school .rd-hero-bio p:last-child { margin-bottom: 0; }
.rd-school .rd-hero-bio p:empty { display: none; margin: 0; }
.rd-school .rd-hero-bio strong { font-weight: 600; color: var(--negro); }
/* Si el cuerpo trae un titular (ej. "Conviértete en…") se modera para el hero */
.rd-school .rd-hero-bio h1,
.rd-school .rd-hero-bio h2,
.rd-school .rd-hero-bio h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 17px; line-height: 1.12; letter-spacing: -.01em; color: var(--negro); margin: 0 0 12px;
}

/* ── BLOQUE "NUESTROS CURSOS" (Panel Especial + foto del Panel lateral) ── */
.rd-school .rd-courses-banner {
  display: flex; justify-content: center; align-items: center; gap: 64px;
  background: var(--surf); padding: 56px 60px;
  border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
}
.rd-school .rd-courses-banner-text { flex: 0 1 460px; }
.rd-school .rd-courses-banner .kick { display: block; margin-bottom: 10px; }
.rd-school .rd-courses-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 42px; line-height: .92; letter-spacing: -.03em; color: var(--negro); margin: 0;
}
.rd-school .rd-courses-banner .rule { margin: 14px 0; }

/* special_content (bullets) reestilizado como "facts" del mockup */
.rd-school .rd-courses-content,
.rd-school .rd-courses-content p,
.rd-school .rd-courses-content li,
.rd-school .rd-courses-content strong { font-family: 'Inter', sans-serif; }
.rd-school .rd-courses-content p { font-size: 13.5px; line-height: 1.72; color: var(--body); margin: 0 0 12px; }
.rd-school .rd-courses-content strong { font-weight: 700; color: var(--negro); }
.rd-school .rd-courses-content ul:not([class*="block-grid"]) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rd-school .rd-courses-content ul:not([class*="block-grid"]) > li {
  position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.55; color: var(--body);
}
.rd-school .rd-courses-content ul:not([class*="block-grid"]) > li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--vino);
}

/* Foto del bloque (meta custom-sidebar; suele venir como <p><img></p>) */
.rd-school .rd-courses-banner-photo { flex: 0 0 auto; line-height: 0; }
.rd-school .rd-courses-banner-photo p { margin: 0; }
/* Tamaño igual al mockup (max 320×420). !important para vencer un posible width/max-width
   INLINE que el editor de WP le pone a la imagen al insertarla (eso le gana a la especificidad). */
#content.rd-school .rd-courses-banner-photo img {
  display: block !important; width: auto !important; height: auto !important;
  max-width: 320px !important; max-height: 420px !important; border-radius: 2px;
}

/* ── Galería de la banda (meta _rd_banda_gallery): 1 foto estática o 2+ slider ──
   Marco SIEMPRE retrato vía aspect-ratio (no alto fijo): así no se vuelve apaisado
   en mobile al estirarse a todo el ancho. Las fotos LLENAN el marco (cover) para que
   el slider no salte entre imágenes de distinto alto. Todos los slides van absolute
   inset:0 (sirve para 1 foto o N) → el de 1 foto llena el marco igual.
   !important vence el width/height:auto + max 320×420 de la regla de arriba. */
#content.rd-school .rd-banda {
  position: relative; flex: 0 0 auto; line-height: 0;
  width: 320px; aspect-ratio: 32 / 42; border-radius: 2px; overflow: hidden;
}
#content.rd-school .rd-banda .rd-banda-slide {
  margin: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
#content.rd-school .rd-banda img {
  display: block !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover; border-radius: 2px;
}
/* En modo slider las fotos hacen cross-fade (la activa por encima) */
#content.rd-school .rd-banda-slider .rd-banda-slide { opacity: 0; transition: opacity .8s ease; }
#content.rd-school .rd-banda-slider .rd-banda-slide.is-active { opacity: 1; }
/* Dots */
#content.rd-school .rd-banda-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 7px; line-height: 0;
}
#content.rd-school .rd-banda-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #fff; background: rgba(255,255,255,.35);
  transition: background .2s ease;
}
#content.rd-school .rd-banda-dot.is-active { background: #fff; }

/* ── GRILLA DE CURSOS ── */
.rd-school .rd-courses-wrap { padding: 48px 40px 68px; }
.rd-school .rd-courses-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}

/* ── CARD ── */
.rd-school .rd-card {
  background: #fff; border: 1px solid var(--bd); border-radius: 2px;
  overflow: hidden; display: flex; flex-direction: column;
}
.rd-school .rd-card-img { display: block; height: 200px; overflow: hidden; flex-shrink: 0; line-height: 0; background: var(--surf); }
.rd-school .rd-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.rd-school .rd-card-body { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1; }
.rd-school .rd-card-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 14px; text-transform: uppercase;
  color: var(--negro); letter-spacing: -.005em; line-height: 1.2; margin: 0 0 11px;
}
/* font/letter-spacing: inherit → el <a> hereda EXACTO del h3 y no toma nada del `a` legacy
   (sin esto, una regla legacy sobre `a` pisa alguna prop y el título renderea distinto al mockup) */
.rd-school .rd-card-title a { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; }
.rd-school .rd-card-title a:hover { color: var(--vino); }

/* Extracto: el template traduce cada emoji a una fila con ícono SVG; '----' a divisor;
   líneas sin emoji a descripción. Acá solo el estilo de esas piezas. */
.rd-school .rd-card-excerpt {
  font-family: 'Inter', sans-serif; color: var(--body); flex: 1; margin-bottom: 14px;
}
.rd-school .rd-card-excerpt a { color: var(--vino); text-decoration: none; }
/* Fila de dato: ícono fino vino + texto (igual que el mockup) */
.rd-school .rd-card-meta-row {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 11.5px; line-height: 1.4; color: var(--body); margin: 0 0 5px;
}
.rd-school .rd-card-meta-row svg {
  width: 12px; height: 12px; stroke: var(--vino); fill: none; stroke-width: 1.8;
  flex-shrink: 0; margin-top: 1px;
}
/* Descripción (línea sin emoji) */
.rd-school .rd-card-line { font-size: 12.5px; line-height: 1.6; color: var(--body); margin: 0; }

.rd-school .rd-card-rule { height: 1px; background: var(--bd); border: 0; margin: 12px 0 14px; }
.rd-school .rd-card-cta {
  display: inline-block; align-self: center;
  background: transparent; color: #8C4F5A; text-align: center; padding: 9px 20px;
  border-radius: 3px; font-family: 'Archivo', sans-serif; font-weight: 500; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; text-decoration: none; border: 1.5px solid #8C4F5A;
  transition: background .15s ease, color .15s ease;
}
.rd-school .rd-card-cta:hover { background: #8C4F5A; color: #FAF7F2; }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-school .rd-hero { flex-direction: column; min-height: 0; }
  .rd-school .rd-hero-img { width: 100%; height: 300px; }
  .rd-school .rd-hero-text { padding: 36px 28px; }
  .rd-school .rd-hero h1 { font-size: 40px; }
  .rd-school .rd-hero h1 .rd-hero-pre { font-size: 28px; }
  .rd-school .rd-courses-banner { flex-direction: column; gap: 28px; padding: 40px 28px; }
  .rd-school .rd-courses-banner-text { flex: none; width: 100%; }
  .rd-school .rd-courses-banner-photo { order: -1; align-self: center; }
  #content.rd-school .rd-courses-banner-photo img { max-width: 460px !important; max-height: none !important; }
  #content.rd-school .rd-banda { width: 100%; max-width: 360px; }
  .rd-school .rd-courses-title { font-size: 36px; }
  .rd-school .rd-courses-wrap { padding: 32px 28px 52px; }
  .rd-school .rd-courses-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-school .rd-hero-img { height: 240px; }
  .rd-school .rd-hero-text { padding: 28px 20px; }
  .rd-school .rd-hero h1 { font-size: 32px; }
  .rd-school .rd-hero h1 .rd-hero-pre { font-size: 22px; }
  .rd-school .rd-courses-banner { padding: 32px 20px; gap: 24px; }
  #content.rd-school .rd-courses-banner-photo img { max-width: 100% !important; }
  #content.rd-school .rd-banda { max-width: 440px; }
  .rd-school .rd-courses-title { font-size: 30px; }
  .rd-school .rd-courses-wrap { padding: 24px 20px 48px; }
  .rd-school .rd-courses-grid { grid-template-columns: 1fr; gap: 16px; }
  .rd-school .rd-card-img { height: auto; aspect-ratio: 5 / 3.5; }
}

/* ============================================================
   ETAPA 5 — home  (todo scopeado bajo .rd-home)
   Mockup: mockup-home.html. Contenido editable desde el panel "Home"
   (opción rd_home, ver bones.php). Estructura: hero rotativo → bandas
   Escuela/Servicios/Bettina → bloque Magazine. Nav/footer = globales.
   Clases con prefijo rd- para no colisionar con el .magazine/.services legacy.
   ============================================================ */

/* Lienzo 1200 (vía .rd-page.content-frame, global) y hero pegado al nav. */
.rd-home.content-frame { padding-top: 0; }

/* ── Botones (pill con flecha) ── */
.rd-home .rd-btn {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .15em; text-transform: uppercase; padding: 13px 26px;
  border-radius: 3px; text-decoration: none; display: inline-flex;
  align-items: center; gap: 9px; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.rd-home .rd-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rd-home .rd-btn-fill { background: var(--vino); color: #FAF7F2; border: 1.5px solid var(--vino); }
.rd-home .rd-btn-fill:hover { background: #5c222c; color: #fff; }
.rd-home .rd-btn-out { background: transparent; color: #8C4F5A; border: 1.5px solid #8C4F5A; }
.rd-home .rd-btn-out:hover { background: #8C4F5A; color: #FAF7F2; }

/* ── Section header (Servicios) ── */
.rd-home .rd-sec-head { margin-bottom: 30px; }
.rd-home .rd-sec-head .kick { display: block; margin-bottom: 9px; }
.rd-home .rd-sec-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 38px;
  line-height: .95; letter-spacing: -.03em; text-transform: uppercase; color: var(--negro); margin: 0;
}

/* ── ① HERO ── */
.rd-home .rd-hero {
  position: relative; min-height: 560px; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 64px 56px 118px; overflow: hidden;
  background-color: var(--negro); isolation: isolate; border-bottom: 1px solid var(--bd);
}
.rd-home .rd-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right,
    rgba(14,11,10,.62) 0%, rgba(14,11,10,.52) 15%, rgba(14,11,10,.28) 28%,
    rgba(14,11,10,.06) 38%, rgba(14,11,10,0) 40%);
}
.rd-home .rd-hero-photo { position: absolute; inset: 0; z-index: 1; background-size: cover; background-position: 60% 28%; }
.rd-home .rd-hero-content { position: relative; z-index: 3; max-width: 640px; }
.rd-home .rd-hero-h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 50px; line-height: .94; letter-spacing: -.03em; color: #FAF7F2;
  margin: 0 0 20px; min-height: calc(50px * .94 * 2);
}
.rd-home .rotator { display: inline-block; }
.rd-home .rotator .word { display: inline-block; opacity: 0; filter: blur(9px); transform: translateY(16px); }
.rd-home .rotator.is-in .word {
  opacity: 1; filter: blur(0); transform: translateY(0);
  transition: opacity .75s cubic-bezier(.2,.65,.2,1), filter .75s cubic-bezier(.2,.65,.2,1), transform .75s cubic-bezier(.2,.65,.2,1);
  transition-delay: var(--d, 0s);
}
.rd-home .rotator.is-out .word {
  opacity: 0; filter: blur(7px); transform: translateY(-11px);
  transition: opacity .9s cubic-bezier(.4,0,.6,1), filter .9s cubic-bezier(.4,0,.6,1), transform .9s cubic-bezier(.4,0,.6,1);
  transition-delay: var(--d, 0s);
}
.rd-home .rd-hero-sub {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.6;
  color: rgba(250,247,242,.82); max-width: 560px; margin: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rd-home .rotator .word, .rd-home .rotator.is-out .word { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── ② / ④ Bandas split (Escuela / Bettina) ── */
.rd-home .rd-split { display: flex; align-items: stretch; border-bottom: 1px solid var(--bd); }
.rd-home .rd-split.is-surf { background: var(--surf); }
.rd-home .rd-split.is-rev { flex-direction: row-reverse; }
.rd-home .rd-split-img { width: 46%; flex-shrink: 0; overflow: hidden; line-height: 0; background: var(--surf); }
.rd-home .rd-split-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-home .rd-split-text { flex: 1; padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.rd-home .rd-split-kick { display: block; margin-bottom: 12px; }
.rd-home .rd-split-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 40px; line-height: .94;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--negro); margin: 0 0 18px;
}
.rd-home .rd-split-lead {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.72; color: var(--body);
  margin: 0 0 22px; max-width: 460px;
}
.rd-home .rd-split-facts { display: flex; flex-direction: column; gap: 6px; margin-bottom: 30px; }
.rd-home .rd-split-facts .li { margin: 0; font-size: 13.5px; line-height: 1.72; font-family: 'Inter', sans-serif; font-weight: 400; color: var(--body); }
.rd-home .rd-split-facts .li strong { font-weight: 700; color: var(--negro); }
.rd-home .rd-split-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Escuela: encuadre del rostro + banda más baja (foto más angosta) en desktop */
.rd-home .rd-split.is-escuela .rd-split-img img { object-position: center 22%; }
@media (min-width: 861px) {
  .rd-home .rd-split.is-escuela .rd-split-img { width: 34%; }
  .rd-home .rd-split.is-escuela .rd-split-text { padding: 44px 60px; }
  .rd-home .rd-split.is-escuela .rd-split-lead { max-width: 620px; }
  .rd-home .rd-split.is-escuela .rd-split-facts { margin-bottom: 26px; }
}

/* ── ③ Servicios ── */
.rd-home .rd-services { position: relative; background: var(--bg); padding: 68px 56px; border-bottom: 1px solid var(--bd); overflow: hidden; }
.rd-home .rd-services-f { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); height: 440px; width: auto; z-index: 0; pointer-events: none; user-select: none; opacity: .07; }
.rd-home .rd-services-inner { position: relative; z-index: 1; }
.rd-home .rd-services-lead { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.72; color: var(--body); max-width: 540px; margin: -14px 0 30px; }
.rd-home .rd-services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; max-width: 780px; margin-bottom: 32px; }
.rd-home .rd-service-item {
  display: flex; align-items: center; gap: 13px; padding: 16px 0; border-top: 1px solid var(--bd);
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--negro);
}
.rd-home .rd-service-item .rd-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--vino); flex-shrink: 0; }

/* ── ⑤ Magazine ── */
.rd-home .rd-magazine { padding: 68px 56px 24px; background: var(--bg); }
/* Magazine como primer bloque visible: sin header (logo), el top de 68px sobra → aire moderado. */
.rd-home .rd-magazine.rd-mag-nohead { padding-top: 36px; }
.rd-home .rd-mag-head { display: flex; justify-content: center; align-items: center; text-align: center; margin-bottom: 30px; }
.rd-home .rd-mag-brand { display: flex; flex-direction: column; align-items: center; }
.rd-home .rd-mag-logo { width: 340px; max-width: 70%; height: auto; display: block; }
.rd-home .rd-mag-sub { font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--vino); margin-top: -2px; }

.rd-home .rd-mag-feat { display: flex; align-items: stretch; border: 1px solid var(--bd); border-radius: 2px; overflow: hidden; margin-bottom: 44px; background: #fff; text-decoration: none; }
.rd-home .rd-mag-feat-img { width: 56%; flex-shrink: 0; overflow: hidden; line-height: 0; min-height: 380px; }
.rd-home .rd-mag-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rd-home .rd-mag-feat-text { flex: 1; padding: 48px; display: flex; flex-direction: column; justify-content: center; }
.rd-home .rd-mag-cat { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--vino); margin-bottom: 14px; }
.rd-home .rd-mag-feat-title { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.02; letter-spacing: -.025em; text-transform: uppercase; color: var(--negro); margin: 0 0 18px; }
.rd-home .rd-mag-feat-excerpt { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7; color: var(--body); margin: 0 0 26px; max-width: 420px; }
.rd-home .rd-mag-read { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--vino); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.rd-home .rd-mag-read svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rd-home .rd-mag-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 28px; }
.rd-home .rd-mag-card { display: flex; flex-direction: column; text-decoration: none; }
.rd-home .rd-mag-card-img { height: 220px; border-radius: 2px; overflow: hidden; line-height: 0; }
.rd-home .rd-mag-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rd-home .rd-mag-card:hover .rd-mag-card-img img { transform: scale(1.04); }
.rd-home .rd-mag-card .rd-mag-cat { margin-top: 16px; margin-bottom: 8px; }
.rd-home .rd-mag-card-title { font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.18; letter-spacing: -.01em; text-transform: uppercase; color: var(--negro); margin: 0 0 9px; }
.rd-home .rd-mag-card:hover .rd-mag-card-title { color: var(--vino); }
.rd-home .rd-mag-card-excerpt { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.62; color: var(--body); margin: 0; }

.rd-home .rd-mag-promo { justify-content: flex-start; background: var(--surf); border-radius: 2px; padding: 40px 34px; }
.rd-home .rd-mag-promo-logo { width: 135px; max-width: 100%; height: auto; display: block; margin-bottom: 14px; }
.rd-home .rd-mag-promo .rd-mag-read { margin-bottom: 40px; }
.rd-home .rd-mag-promo .rd-mag-card-title { font-size: 24px; line-height: 1.05; margin: 0; }

.rd-home .rd-mag-allcta { text-align: center; padding: 48px 0 8px; }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-home .rd-hero { min-height: 440px; padding: 48px 32px 92px; }
  .rd-home .rd-hero-h1 { font-size: 40px; min-height: calc(40px * .94 * 2); }
  .rd-home .rd-hero-sub { font-size: 13.5px; }

  .rd-home .rd-split, .rd-home .rd-split.is-rev { flex-direction: column; }
  .rd-home .rd-split-img { width: 100%; height: 300px; }
  .rd-home .rd-split-text { padding: 44px 32px; }
  .rd-home .rd-split-title { font-size: 34px; }
  /* Escuela: texto primero, foto después (evita foto pegada al hero) */
  .rd-home .rd-split.is-escuela .rd-split-text { order: 1; }
  .rd-home .rd-split.is-escuela .rd-split-img  { order: 2; }

  .rd-home .rd-services { padding: 52px 32px; }
  .rd-home .rd-services-f { height: 320px; right: -30px; }
  .rd-home .rd-sec-title { font-size: 32px; }

  .rd-home .rd-magazine { padding: 52px 32px 16px; }
  .rd-home .rd-magazine.rd-mag-nohead { padding-top: 28px; }
  .rd-home .rd-mag-feat { flex-direction: column; }
  .rd-home .rd-mag-feat-img { width: 100%; height: 280px; min-height: 0; }
  .rd-home .rd-mag-feat-text { padding: 36px 32px; }
  .rd-home .rd-mag-feat-title { font-size: 30px; }
  .rd-home .rd-mag-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; }
  .rd-home .rd-mag-card-img { height: 200px; }
  .rd-home .rd-mag-logo { width: 260px; max-width: 80%; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-home .rd-hero { min-height: 480px; padding: 0 20px 44px; }
  .rd-home .rd-hero::after {
    background: linear-gradient(to bottom, rgba(14,11,10,0) 0%, rgba(14,11,10,.06) 28%, rgba(14,11,10,.30) 55%, rgba(14,11,10,.86) 100%);
  }
  .rd-home .rd-hero-photo { background-position: 64% 22%; }
  .rd-home .rd-hero-content { max-width: 100%; }
  .rd-home .rd-hero-h1 { font-size: 34px; line-height: .96; margin-bottom: 14px; min-height: calc(34px * .96 * 2); }
  .rd-home .rd-hero-sub { font-size: 13px; }

  .rd-home .rd-split-img { height: auto; aspect-ratio: 5 / 3.5; }
  .rd-home .rd-split-text { padding: 36px 20px; }
  .rd-home .rd-split-title { font-size: 30px; }
  .rd-home .rd-split-lead { font-size: 13px; }

  .rd-home .rd-services { padding: 40px 20px; }
  .rd-home .rd-services-f { display: none; }
  .rd-home .rd-services-lead { font-size: 13px; margin: -8px 0 24px; }
  .rd-home .rd-services-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 26px; }
  .rd-home .rd-service-item { font-size: 14.5px; padding: 14px 0; }
  .rd-home .rd-sec-head { margin-bottom: 24px; }
  .rd-home .rd-sec-title { font-size: 28px; }

  .rd-home .rd-magazine { padding: 40px 20px 8px; }
  .rd-home .rd-magazine.rd-mag-nohead { padding-top: 20px; }
  .rd-home .rd-mag-feat-img { height: 220px; }
  .rd-home .rd-mag-feat-text { padding: 28px 20px 30px; }
  .rd-home .rd-mag-feat-title { font-size: 26px; }
  .rd-home .rd-mag-feat-excerpt { font-size: 13px; margin-bottom: 20px; }
  .rd-home .rd-mag-grid { grid-template-columns: 1fr; gap: 28px; }
  .rd-home .rd-mag-card-img { height: 220px; }
  .rd-home .rd-mag-card-title { font-size: 17px; }
  .rd-home .rd-mag-promo { padding: 30px 24px; }
  .rd-home .rd-mag-allcta { padding: 36px 0 4px; }
  .rd-home .rd-mag-logo { width: 220px; max-width: 86%; }
}

/* ============================================================
   ETAPA 6 — page-services  (todo scopeado bajo .rd-services)
   Mockup: mockup-page-services.html. GEMELA de page-school (ETAPA 4).
   Estructura: HERO (split desktop / oscuro mobile) → banda "Nuestros
   Servicios" (Panel Especial + foto opcional) → grilla de la categoría
   `servicios`. Cards SIN íconos (Extracto = descripción plana).
   ⚠ El home usa `.rd-services-grid/-lead/-inner/-f` DENTRO de su banda
   `.rd-services` → acá se usan wrappers `.rd-svc-*` para no pisarlos.
   Las cards reusan `.rd-card*` (solo school las usa; ambos scopeados).
   ============================================================ */

/* Lienzo 1200 (vía .rd-page.content-frame, global) y hero pegado al nav. */
.rd-services.content-frame { padding-top: 0; }
.rd-services article { max-width: 1200px; margin: 0 auto; }

/* ── HERO SPLIT (desktop): imagen izq 44% + panel de texto der ── */
.rd-services .rd-hero {
  display: flex;
  min-height: 480px;
  border-bottom: 1px solid var(--bd);
}
.rd-services .rd-hero-img {
  width: 44%; flex-shrink: 0; overflow: hidden; line-height: 0;
  background: var(--surf);   /* fallback si no hay imagen destacada */
}
.rd-services .rd-hero-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 22%; display: block;
}
.rd-services .rd-hero-text {
  flex: 1; background: var(--bg);
  padding: 52px 60px 52px 52px;
  display: flex; flex-direction: column; justify-content: center;
}
.rd-services .rd-hero-pre {
  display: block; font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 34px;
  line-height: 1; letter-spacing: -.02em; text-transform: uppercase; color: var(--topo); margin-bottom: 6px;
}
.rd-services .rd-hero-h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 46px; line-height: .91;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--negro); margin: 0 0 24px;
}

/* Bio del hero = the_content. 1er encabezado del cuerpo = tagline vino (con regla debajo
   vía border-bottom, robusto ante el wrap de WPBakery); los párrafos = cuerpo. */
.rd-services .rd-hero-bio,
.rd-services .rd-hero-bio p,
.rd-services .rd-hero-bio li,
.rd-services .rd-hero-bio strong { font-family: 'Inter', sans-serif; }
.rd-services .rd-hero-bio h1,
.rd-services .rd-hero-bio h2,
.rd-services .rd-hero-bio h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--vino); text-transform: none;
  margin: 0 0 20px; padding-bottom: 20px; border-bottom: 1px solid var(--bd);
}
.rd-services .rd-hero-bio p { font-size: 13.5px; line-height: 1.75; color: var(--body); margin: 0 0 13px; }
.rd-services .rd-hero-bio p:last-child { margin-bottom: 0; }
.rd-services .rd-hero-bio p:empty { display: none; margin: 0; }
.rd-services .rd-hero-bio strong { font-weight: 600; color: var(--negro); }

/* ── HERO OSCURO + INTRO (mobile/tablet): ocultos en desktop, se muestran ≤860 ── */
.rd-services .rd-hero-m {
  display: none; position: relative; min-height: 420px; flex-direction: column;
  justify-content: flex-end; align-items: flex-start; padding: 52px 50px 64px;
  overflow: hidden; background-color: var(--negro); isolation: isolate;
}
.rd-services .rd-hero-m::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to right,
    rgba(14,11,10,.88) 0%, rgba(14,11,10,.78) 20%, rgba(14,11,10,.50) 40%,
    rgba(14,11,10,.14) 56%, transparent 70%);
}
.rd-services .rd-hero-m-photo { position: absolute; inset: 0; background-size: cover; background-position: center 18%; z-index: 1; }
.rd-services .rd-hero-m-content { position: relative; z-index: 3; max-width: 62%; }
.rd-services .rd-hero-m .rd-hero-pre {
  font-weight: 600; font-size: 22px; letter-spacing: .04em;
  color: rgba(250,247,242,.68); margin-bottom: 6px;
}
.rd-services .rd-hero-m h1 {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 58px; line-height: .95; letter-spacing: -.025em; color: #FAF7F2; margin: 0;
}
.rd-services .rd-intro { display: none; padding: 52px 40px 48px; border-bottom: 1px solid var(--bd); }
.rd-services .rd-intro h1,
.rd-services .rd-intro h2,
.rd-services .rd-intro h3 {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.32;
  letter-spacing: -.01em; color: var(--vino); text-transform: none; margin: 0 0 16px;
}
.rd-services .rd-intro p { font-family: 'Inter', sans-serif; font-size: 13.5px; line-height: 1.75; color: var(--body); margin: 0 0 11px; }
.rd-services .rd-intro p:last-child { margin-bottom: 0; }
.rd-services .rd-intro p:empty { display: none; }
.rd-services .rd-intro strong { font-weight: 600; color: var(--negro); }

/* ── BANDA "NUESTROS SERVICIOS" (Panel Especial + foto opcional del Panel lateral) ── */
.rd-services .rd-svc-banner {
  display: flex; justify-content: center; align-items: center; gap: 64px;
  background: var(--surf); padding: 56px 60px;
  border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
}
.rd-services .rd-svc-banner-text { flex: 0 1 460px; }
/* Sin foto → columna de texto centrada (bullets siguen a la izq para lectura) */
.rd-services .rd-svc-banner.is-textonly .rd-svc-banner-text { flex: 0 1 600px; text-align: center; }
.rd-services .rd-svc-banner.is-textonly .rd-svc-banner-content { text-align: left; max-width: 480px; margin: 0 auto; }
.rd-services .rd-svc-banner .kick { display: block; margin-bottom: 10px; }
.rd-services .rd-svc-banner-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 42px; line-height: .92;
  letter-spacing: -.03em; text-transform: uppercase; color: var(--negro); margin: 0;
}
.rd-services .rd-svc-banner .rule { margin: 14px 0; }

/* special_content (bullets) reestilizado como "facts" del mockup */
.rd-services .rd-svc-banner-content,
.rd-services .rd-svc-banner-content p,
.rd-services .rd-svc-banner-content li,
.rd-services .rd-svc-banner-content strong { font-family: 'Inter', sans-serif; }
.rd-services .rd-svc-banner-content p { font-size: 13.5px; line-height: 1.72; color: var(--body); margin: 0 0 12px; }
.rd-services .rd-svc-banner-content strong { font-weight: 700; color: var(--negro); }
.rd-services .rd-svc-banner-content ul:not([class*="block-grid"]) { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.rd-services .rd-svc-banner-content ul:not([class*="block-grid"]) > li {
  position: relative; padding-left: 16px; font-size: 13.5px; line-height: 1.55; color: var(--body);
}
.rd-services .rd-svc-banner-content ul:not([class*="block-grid"]) > li::before {
  content: ''; position: absolute; left: 0; top: 7px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--vino);
}

/* Foto del bloque (meta custom-sidebar; suele venir como <p><img></p>) */
.rd-services .rd-svc-banner-photo { flex: 0 0 auto; line-height: 0; }
.rd-services .rd-svc-banner-photo p { margin: 0; }
/* !important para vencer el width/max-width INLINE que el editor le pone a la imagen */
#content.rd-services .rd-svc-banner-photo img {
  display: block !important; width: auto !important; height: auto !important;
  max-width: 320px !important; max-height: 420px !important; border-radius: 2px;
}

/* ── Galería de la banda (gemelo de §10.8 school): 1 foto estática o 2+ slider ──
   Marco SIEMPRE retrato vía aspect-ratio (no alto fijo) → no apaisa en mobile. Va
   DESPUÉS de la regla .rd-svc-banner-photo img de arriba para ganar por orden de
   fuente (misma especificidad, ambas con !important). */
#content.rd-services .rd-banda {
  position: relative; flex: 0 0 auto; line-height: 0;
  width: 320px; aspect-ratio: 32 / 42; border-radius: 2px; overflow: hidden;
}
#content.rd-services .rd-banda .rd-banda-slide {
  margin: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
#content.rd-services .rd-banda img {
  display: block !important; width: 100% !important; height: 100% !important;
  max-width: none !important; max-height: none !important;
  object-fit: cover; border-radius: 2px;
}
#content.rd-services .rd-banda-slider .rd-banda-slide { opacity: 0; transition: opacity .8s ease; }
#content.rd-services .rd-banda-slider .rd-banda-slide.is-active { opacity: 1; }
#content.rd-services .rd-banda-dots {
  position: absolute; left: 0; right: 0; bottom: 12px; z-index: 2;
  display: flex; justify-content: center; gap: 7px; line-height: 0;
}
#content.rd-services .rd-banda-dot {
  width: 7px; height: 7px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid #fff; background: rgba(255,255,255,.35); transition: background .2s ease;
}
#content.rd-services .rd-banda-dot.is-active { background: #fff; }

/* ── GRILLA DE SERVICIOS ── */
.rd-services .rd-svc-wrap { padding: 48px 40px 68px; }
.rd-services .rd-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* ── CARD (título + extracto + CTA; sin íconos) ── */
.rd-services .rd-card {
  background: #fff; border: 1px solid var(--bd); border-radius: 2px;
  overflow: hidden; display: flex; flex-direction: column;
}
.rd-services .rd-card-img { display: block; height: 230px; overflow: hidden; flex-shrink: 0; line-height: 0; background: var(--surf); }
.rd-services .rd-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.rd-services .rd-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.rd-services .rd-card-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 15px; text-transform: uppercase;
  color: var(--negro); letter-spacing: -.005em; line-height: 1.2; margin: 0 0 13px;
}
/* font/letter-spacing: inherit → el <a> hereda EXACTO del h3 y no toma nada del `a` legacy */
.rd-services .rd-card-title a { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; }
.rd-services .rd-card-title a:hover { color: var(--vino); }
.rd-services .rd-card-rule { height: 1px; background: var(--bd); border: 0; margin: 0 0 13px; }
/* padding:0 anula el `p { padding-bottom:.5rem }` legacy que se colaba en la descripción */
.rd-services .rd-card-desc { font-family: 'Inter', sans-serif; font-size: 12.5px; line-height: 1.65; color: var(--body); flex: 1; margin: 0 0 18px; padding: 0; }
.rd-services .rd-card-cta {
  display: inline-block; align-self: center; background: transparent; color: #8C4F5A;
  text-align: center; padding: 9px 20px; border-radius: 3px; font-family: 'Archivo', sans-serif;
  font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none; border: 1.5px solid #8C4F5A; margin-top: auto;
  transition: background .15s ease, color .15s ease;
}
.rd-services .rd-card-cta:hover { background: #8C4F5A; color: #FAF7F2; }

/* ═══ TABLET (≤860px): swap a hero oscuro + intro, grilla 2-col ═══ */
@media only screen and (max-width: 860px) {
  .rd-services .rd-hero { display: none; }
  .rd-services .rd-hero-m { display: flex; min-height: 340px; padding: 44px 32px 56px; }
  .rd-services .rd-hero-m .rd-hero-pre { font-size: 21px; }
  .rd-services .rd-hero-m h1 { font-size: 52px; }
  .rd-services .rd-intro { display: block; padding: 40px 24px 36px; }
  .rd-services .rd-intro h1, .rd-services .rd-intro h2, .rd-services .rd-intro h3 { font-size: 21px; }

  .rd-services .rd-svc-banner { flex-direction: column; gap: 28px; padding: 40px 28px; }
  .rd-services .rd-svc-banner-text,
  .rd-services .rd-svc-banner.is-textonly .rd-svc-banner-text { flex: none; width: 100%; }
  .rd-services .rd-svc-banner-photo { order: -1; align-self: center; }
  #content.rd-services .rd-svc-banner-photo img { max-width: 460px !important; max-height: none !important; }
  #content.rd-services .rd-banda { width: 100%; max-width: 360px; }
  .rd-services .rd-svc-banner-title { font-size: 36px; }

  .rd-services .rd-svc-wrap { padding: 32px 28px 52px; }
  .rd-services .rd-svc-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-services .rd-hero-m { min-height: 280px; padding: 36px 20px 48px; }
  .rd-services .rd-hero-m::after {
    background:
      linear-gradient(to right, rgba(14,11,10,.80) 0%, rgba(14,11,10,.38) 26%, rgba(14,11,10,.04) 50%, transparent 66%),
      linear-gradient(to top, rgba(14,11,10,.48) 0%, rgba(14,11,10,.06) 32%, transparent 50%);
  }
  .rd-services .rd-hero-m-photo { background-position: 50% 15%; }
  .rd-services .rd-hero-m-content { max-width: 78%; }
  .rd-services .rd-hero-m .rd-hero-pre { font-size: 17px; letter-spacing: .05em; }
  .rd-services .rd-hero-m h1 { font-size: 36px; letter-spacing: -.02em; }

  .rd-services .rd-intro { padding: 28px 20px 26px; }
  .rd-services .rd-intro h1, .rd-services .rd-intro h2, .rd-services .rd-intro h3 { font-size: 18px; line-height: 1.28; }

  .rd-services .rd-svc-banner { padding: 32px 20px; gap: 24px; }
  #content.rd-services .rd-svc-banner-photo img { max-width: 100% !important; }
  #content.rd-services .rd-banda { max-width: 440px; }
  .rd-services .rd-svc-banner-title { font-size: 30px; }

  .rd-services .rd-svc-wrap { padding: 24px 20px 48px; }
  .rd-services .rd-svc-grid { grid-template-columns: 1fr; gap: 16px; }
  .rd-services .rd-card-img { height: auto; aspect-ratio: 5 / 3.5; }
}


/* ============================================================
   ETAPA 7 — page-magazine  (todo scopeado bajo .rd-magazine)
   Mockup: mockup-page-magazine.html. Página principal del Magazine.
   Clases con prefijo rd-mz-* para NO chocar con el bloque .rd-mag-*
   del home (ETAPA 5, scope .rd-home). Newsletter del mockup omitido
   (lo cubre el sticky #subscribe-box); footer = global (ETAPA 2).
   NOTA: el submenú NO es sticky a propósito → el .off-canvas-wrap{
   overflow:hidden} de Foundation anula position:sticky (misma razón
   por la que la nav global usa fixed). Queda como barra en flujo.
   ============================================================ */

/* ── Masthead: logo Beauty File + "Magazine" ── */
.rd-magazine .rd-mz-masthead { text-align: center; padding: 18px 40px 32px; }
.rd-magazine .rd-mz-logo { width: 320px; max-width: 70%; height: auto; display: inline-block; }
.rd-magazine .rd-mz-sub {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px;
  letter-spacing: .26em; text-transform: uppercase; color: var(--vino); margin-top: 2px;
}

/* ── Submenú de categorías (en flujo) ── */
.rd-magazine .rd-mz-nav { border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.rd-magazine .rd-mz-nav-inner {
  display: flex; align-items: center; justify-content: center; gap: 34px;
  padding: 0 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.rd-magazine .rd-mz-nav-inner::-webkit-scrollbar { display: none; }
.rd-magazine .rd-mz-nav a {
  position: relative; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase; color: var(--negro); text-decoration: none;
  padding: 17px 0; white-space: nowrap; flex-shrink: 0;
}
.rd-magazine .rd-mz-nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--vino); transform: scaleX(0); transition: transform .25s ease;
}
.rd-magazine .rd-mz-nav a:hover { color: var(--vino); }
.rd-magazine .rd-mz-nav a:hover::after,
.rd-magazine .rd-mz-nav a.is-active::after { transform: scaleX(1); }
.rd-magazine .rd-mz-nav a.is-active { color: var(--vino); }

/* Dropdown condensado (solo mobile) */
.rd-magazine .rd-mz-dd { display: none; position: relative; padding: 15px 20px; text-align: left; }
.rd-magazine .rd-mz-dd-toggle {
  display: inline-flex; align-items: center; gap: 9px; background: transparent; border: none;
  padding: 3px 2px; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--vino);
}
.rd-magazine .rd-mz-dd-toggle span { padding-bottom: 5px; border-bottom: 2px solid var(--vino); }
.rd-magazine .rd-mz-dd-caret { width: 14px; height: 14px; stroke: var(--vino); fill: none; transition: transform .25s ease; flex-shrink: 0; }
.rd-magazine .rd-mz-dd.is-open .rd-mz-dd-caret { transform: rotate(180deg); }
.rd-magazine .rd-mz-dd-panel {
  position: absolute; top: calc(100% - 2px); left: 20px; min-width: 232px; background: #fff;
  border: 1px solid var(--bd); border-radius: 8px; box-shadow: 0 16px 34px rgba(20,17,15,.16);
  padding: 7px; z-index: 30; opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.rd-magazine .rd-mz-dd.is-open .rd-mz-dd-panel { opacity: 1; visibility: visible; }
.rd-magazine .rd-mz-dd-panel a {
  display: block; padding: 11px 16px; border-radius: 5px; text-align: left;
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--negro); text-decoration: none;
}
.rd-magazine .rd-mz-dd-panel a:hover { background: var(--bg); }
.rd-magazine .rd-mz-dd-panel a.is-active { color: var(--vino); font-weight: 600; }

/* ── Kicker de categoría compartido (feature / side / card) ── */
.rd-magazine .rd-mz-cat {
  display: block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 10px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--vino);
}

/* ── Cabecera editorial: destacada + 2 secundarias ── */
.rd-magazine .rd-mz-top { padding: 26px 40px 0; }
.rd-magazine .rd-mz-top-grid { display: grid; grid-template-columns: 1.85fr 1fr; gap: 38px; }

.rd-magazine .rd-mz-feature { display: flex; flex-direction: column; text-decoration: none; }
/* La foto del #1 crece para acercarse al alto de la columna derecha (las dos celdas del
   grid se estiran al mismo alto), con piso de 540px y TOPE de 585px para no empujar el
   título de la nota fuera de pantalla. No empareja al 100% a propósito: prioriza que el
   título del destacado quede visible sin scroll. */
.rd-magazine .rd-mz-feature-img { flex: 1 0 540px; min-height: 540px; max-height: 585px; border-radius: 2px; overflow: hidden; line-height: 0; }
.rd-magazine .rd-mz-feature-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.rd-magazine .rd-mz-feature:hover .rd-mz-feature-img img { transform: scale(1.03); }
.rd-magazine .rd-mz-feature .rd-mz-cat { margin: 20px 0 11px; }
.rd-magazine .rd-mz-feature-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 34px; line-height: 1.02;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--negro); margin-bottom: 14px;
}
.rd-magazine .rd-mz-feature:hover .rd-mz-feature-title { color: var(--vino); }
.rd-magazine .rd-mz-feature-excerpt {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7; color: var(--body);
  max-width: 560px; margin-bottom: 18px;
}
.rd-magazine .rd-mz-read {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--vino); text-decoration: none; display: inline-flex;
  align-items: center; gap: 8px;
}
.rd-magazine .rd-mz-read svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.rd-magazine .rd-mz-side { display: flex; flex-direction: column; gap: 30px; }
.rd-magazine .rd-mz-side-card { display: flex; flex-direction: column; text-decoration: none; }
/* Sin línea ni padding extra entre las laterales: solo el gap de la columna (evita el
   espacio doble gap+padding que desbalanceaba con la columna del #1). */
.rd-magazine .rd-mz-side-card + .rd-mz-side-card { border-top: none; padding-top: 0; }
.rd-magazine .rd-mz-side-img { height: 260px; border-radius: 2px; overflow: hidden; line-height: 0; }
/* Crop apaisado (ancho y bajo): sesgar el encuadre hacia arriba para no comer las
   caras (mismo patrón que los relacionados, RELEVAMIENTO §9.3). */
.rd-magazine .rd-mz-side-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; transition: transform .5s ease; }
.rd-magazine .rd-mz-side-card:hover .rd-mz-side-img img { transform: scale(1.04); }
.rd-magazine .rd-mz-side-card .rd-mz-cat { margin: 16px 0 8px; }
.rd-magazine .rd-mz-side-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; line-height: 1.12;
  letter-spacing: -.015em; text-transform: uppercase; color: var(--negro); margin-bottom: 9px;
}
.rd-magazine .rd-mz-side-card:hover .rd-mz-side-title { color: var(--vino); }
.rd-magazine .rd-mz-side-excerpt {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.62; color: var(--body);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ── Grilla "Lo último" ── */
.rd-magazine .rd-mz-section { padding: 34px 40px 72px; }
.rd-magazine .rd-mz-section-head { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.rd-magazine .rd-mz-section-head h2 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 22px; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--negro); flex-shrink: 0;
}
.rd-magazine .rd-mz-line { flex: 1; height: 1px; background: var(--bd); }

.rd-magazine .rd-mz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; }
.rd-magazine .rd-mz-card { display: flex; flex-direction: column; text-decoration: none; }
.rd-magazine .rd-mz-card-img { height: 230px; border-radius: 2px; overflow: hidden; line-height: 0; }
.rd-magazine .rd-mz-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.rd-magazine .rd-mz-card:hover .rd-mz-card-img img { transform: scale(1.04); }
.rd-magazine .rd-mz-card .rd-mz-cat { margin: 16px 0 8px; }
.rd-magazine .rd-mz-card-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.18;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--negro); margin-bottom: 9px;
}
.rd-magazine .rd-mz-card:hover .rd-mz-card-title { color: var(--vino); }
.rd-magazine .rd-mz-card-excerpt { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.62; color: var(--body); }

/* ── CTA "Ver más notas" ── */
.rd-magazine .rd-mz-allcta { text-align: center; padding: 48px 0 0; }
.rd-magazine .rd-mz-btn {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; padding: 13px 26px; border-radius: 3px; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; color: #8C4F5A; border: 1.5px solid #8C4F5A; transition: background .2s ease, color .2s ease;
}
.rd-magazine .rd-mz-btn:hover { background: #8C4F5A; color: #FAF7F2; }
.rd-magazine .rd-mz-btn svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rd-magazine .rd-mz-btn.is-loading { opacity: .55; pointer-events: none; }

/* Estado vacío de una página de categoría (category.php) sin notas */
.rd-magazine .rd-mz-empty {
  font-family: 'Inter', sans-serif; font-size: 15px; color: var(--body);
  text-align: center; padding: 40px 0 24px;
}

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-magazine .rd-mz-masthead { padding: 42px 24px 36px; }
  .rd-magazine .rd-mz-nav-inner { justify-content: flex-start; padding: 0 24px; gap: 28px; }

  .rd-magazine .rd-mz-top { padding: 22px 24px 0; }
  .rd-magazine .rd-mz-top-grid { grid-template-columns: 1fr; gap: 36px; }
  .rd-magazine .rd-mz-feature-img { flex: none; min-height: 0; height: 380px; }
  .rd-magazine .rd-mz-feature-title { font-size: 30px; }
  .rd-magazine .rd-mz-side { flex-direction: row; gap: 24px; }
  .rd-magazine .rd-mz-side-card { flex: 1; }
  .rd-magazine .rd-mz-side-card + .rd-mz-side-card { border-top: none; padding-top: 0; }
  .rd-magazine .rd-mz-side-img { height: 180px; }

  .rd-magazine .rd-mz-section { padding: 32px 24px 60px; }
  .rd-magazine .rd-mz-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .rd-magazine .rd-mz-card-img { height: 210px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-magazine .rd-mz-masthead { padding: 34px 20px 30px; }
  .rd-magazine .rd-mz-logo { width: 220px; max-width: 80%; }

  .rd-magazine .rd-mz-nav { border-bottom: none; }
  .rd-magazine .rd-mz-nav-inner { display: none; }
  .rd-magazine .rd-mz-dd { display: block; }

  .rd-magazine .rd-mz-top { padding: 20px 20px 0; }
  .rd-magazine .rd-mz-top-grid { gap: 32px; }
  .rd-magazine .rd-mz-feature-img { height: 300px; }
  .rd-magazine .rd-mz-feature .rd-mz-cat { margin: 16px 0 9px; }
  .rd-magazine .rd-mz-feature-title { font-size: 27px; }
  .rd-magazine .rd-mz-feature-excerpt { font-size: 13px; }
  .rd-magazine .rd-mz-side { flex-direction: column; gap: 28px; }
  .rd-magazine .rd-mz-side-card + .rd-mz-side-card { border-top: none; padding-top: 0; }
  /* destacadas 2 y 3 apiladas full-width: misma proporción que las cards de "Lo último" */
  .rd-magazine .rd-mz-side-img { height: auto; aspect-ratio: 3 / 2; }
  .rd-magazine .rd-mz-side-title { font-size: 19px; }

  .rd-magazine .rd-mz-section { padding: 28px 20px 52px; }
  .rd-magazine .rd-mz-section-head h2 { font-size: 20px; }
  .rd-magazine .rd-mz-grid { grid-template-columns: 1fr; gap: 30px; }
  /* 1 columna full-width: alto fijo se ve recortado → proporción de desktop (≈3/2) vía aspect-ratio.
     Excluye Videos (cards con overlay de play) y Prensa (cards de logo), que no lo pidieron. */
  .rd-magazine:not(.rd-videos):not(.rd-prensa) .rd-mz-card-img { height: auto; aspect-ratio: 3 / 2; }
  .rd-magazine .rd-mz-card-title { font-size: 17px; }
  .rd-magazine .rd-mz-allcta { padding: 40px 0 0; }
}


/* ============================================================
   ETAPA 8 — spost-magazine (NOTA interna). Scope .rd-note.
   Reskin de the_content (WPBakery) apuntando al markup REAL de las notas, para que
   TODA nota ya publicada levante el nuevo look. Mismo lenguaje visual que los cursos
   (.rd-detail) con los valores espejados. La nota TAMBIÉN lleva `.rd-magazine` en
   #content → hereda masthead/submenú (ETAPA 7) y reusa .rd-mz-grid / .rd-mz-btn en
   "Sigue leyendo". Mockup: mockup-spost-magazine.html (referencia, no literal).
   ============================================================ */

/* ── Contenedor del artículo (cabecera + cuerpo) ── */
.rd-note .rd-note-article { max-width: 1120px; margin: 0 auto; padding: 30px 40px 8px; }

/* ── Base: Inter + Paleta B en todo el contenido (override de Lato/inline del editor) ── */
.rd-note .entry-content,
.rd-note .entry-content p,
.rd-note .entry-content li,
.rd-note .entry-content td,
.rd-note .entry-content span,
.rd-note .entry-content strong,
.rd-note .entry-content a { font-family: 'Inter', sans-serif; }

/* Override de fuentes inline del editor: Oswald → Archivo (titulado), Lato → Inter */
.rd-note .entry-content [style*="Oswald"],
.rd-note .entry-content [style*="oswald"] { font-family: 'Archivo', sans-serif !important; }
.rd-note .entry-content [style*="Lato"],
.rd-note .entry-content [style*="lato"] { font-family: 'Inter', sans-serif !important; }

/* ── Cabecera: kicker (categoría) + título (h1.body) + bajada (blockquote h2) ── */
#content.rd-note .entry-content .title { margin: 0 0 14px; }
#content.rd-note .entry-content .title .head { margin: 0 0 10px; }
#content.rd-note .entry-content .title ul.post-categories { list-style: none; margin: 0; padding: 0; }
#content.rd-note .entry-content .title ul.post-categories li { display: inline; }
#content.rd-note .entry-content .title ul.post-categories a {
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vino); text-decoration: none;
}
#content.rd-note .entry-content h1.body {
  font-family: 'Archivo', sans-serif !important; font-weight: 800; font-size: 38px;
  line-height: 1.04; letter-spacing: -.025em; text-transform: uppercase; color: var(--negro);
  margin: 6px 0 14px !important; padding: 0 !important; border: none !important;
}
/* Bajada / standfirst (el editor la marca como blockquote > h2) */
.rd-note .entry-content blockquote:not(.interview-quote):not(.school-quote):not(.backstage-quote) {
  margin: 0 0 20px; padding: 0; border: none; background: none; quotes: none; font-style: normal;
}
.rd-note .entry-content blockquote h2 {
  font-family: 'Inter', sans-serif !important; font-weight: 400; font-size: 18px; line-height: 1.5;
  letter-spacing: 0; text-transform: none; color: var(--negro); margin: 0;
}

/* Pull-quotes legacy por categoría (interview-quote / school-quote / backstage-quote):
   el tema viejo les pone color de texto rosa #e4003a. Reskin: SOLO el texto pasa a vino.
   Las comillas son imágenes (quote-*.png) y se CONSERVAN tal cual (layout legacy intacto):
   el usuario reemplazará esos PNG por versiones en el color nuevo. NO tocar fondo/imágenes. */
.rd-note .entry-content blockquote.interview-quote,
.rd-note .entry-content blockquote.interview-quote *,
.rd-note .entry-content blockquote.school-quote,
.rd-note .entry-content blockquote.school-quote *,
.rd-note .entry-content blockquote.backstage-quote,
.rd-note .entry-content blockquote.backstage-quote * {
  color: var(--vino) !important;
}

/* ── Subtítulos de sección: el editor los marca con <strong style="font-family:Oswald"> ──
   Archivo + mayúsculas, SIN línea (la editora pone líneas a mano si las necesita).
   color negro !important para ganarle al color inline: algunas notas lo traen en negro y
   otras en el rosa viejo de marca → todos quedan negros y uniformes. */
.rd-note .entry-content strong[style*="Oswald" i] {
  font-family: 'Archivo', sans-serif !important; font-weight: 700; font-size: 19px !important;
  line-height: 1.15; letter-spacing: -.005em; text-transform: uppercase; color: var(--negro) !important;
}

/* ── Rosa viejo de marca (familia: #fc0046 #fe0046 #ff0046 #fc0036 #fc3366 #ff3366 #ff0066
   #e4003a #f40c57 #f01d4f) que las notas viejas traen INLINE en el contenido → acento vino.
   Cubre cualquier elemento del cuerpo (texto, testimonios, links, <span> coloreados). El
   subtítulo Oswald de arriba es MÁS específico, así que queda negro aunque el editor lo haya
   pintado de rosa. Familia relevada barriendo notas de las 5 categorías (jun 2026). ── */
.rd-note .entry-content [style*="fc0046" i],
.rd-note .entry-content [style*="fe0046" i],
.rd-note .entry-content [style*="ff0046" i],
.rd-note .entry-content [style*="fc0036" i],
.rd-note .entry-content [style*="fc3366" i],
.rd-note .entry-content [style*="ff3366" i],
.rd-note .entry-content [style*="ff0066" i],
.rd-note .entry-content [style*="e4003a" i],
.rd-note .entry-content [style*="e4003b" i],
.rd-note .entry-content [style*="f40c57" i],
.rd-note .entry-content [style*="f01d4f" i] { color: var(--vino) !important; }

/* ── Rosa que NO viene inline sino en el CUSTOM CSS de WPBakery (bloques <style> inyectados
   por nota, con !important) → no lo agarra el catch-all de [style]; se vence por selector +
   !important + más especificidad. Dos formas observadas en las notas:
     · `.vc_custom_XXX { border-*-color: #fc3366 !important }` → borde punteado rosa de las
        cajas "Beauty File recomienda" (fondo gris). Recoloreo SOLO el borde → vino (no toco
        fondo ni layout). Afecta solo a elementos vc_custom que tengan borde visible.
     · `.entry-content blockquote p { color: #fc0046 }` → texto de quotes/bajadas → vino. ── */
.rd-note .entry-content [class*="vc_custom_"] {
  border-top-color: var(--vino) !important;
  border-right-color: var(--vino) !important;
  border-bottom-color: var(--vino) !important;
  border-left-color: var(--vino) !important;
}
.rd-note .entry-content blockquote p { color: var(--vino) !important; }

/* ── Cuerpo: párrafos, negritas, links ── */
.rd-note .entry-content p { font-size: 14.5px; line-height: 1.72; color: var(--body); margin: 0 0 14px; }
.rd-note .entry-content p:empty { display: none; margin: 0; }
.rd-note .entry-content strong { color: var(--negro); font-weight: 600; }
.rd-note .entry-content a { color: var(--vino) !important; text-decoration: underline; }
.rd-note .entry-content a:hover { color: var(--negro) !important; }

/* Listas con viñeta vino (solo <ul> normales, NO los block-grid de Foundation) */
.rd-note .entry-content ul:not([class*="block-grid"]) { list-style: none; margin: 6px 0 16px; padding: 0; }
.rd-note .entry-content ul:not([class*="block-grid"]) > li {
  position: relative; padding-left: 18px; margin: 7px 0;
  font-size: 14.5px; line-height: 1.55; color: var(--body);
}
.rd-note .entry-content ul:not([class*="block-grid"]) > li::before {
  content: ''; position: absolute; left: 0; top: 9px; width: 5px; height: 5px;
  background: var(--vino); border-radius: 50%;
}

/* ── Imágenes y galerías WPBakery (nivoSlider / single image) ── */
.rd-note .entry-content img { border-radius: 2px; height: auto; max-width: 100%; }
.rd-note .entry-content .wpb_gallery_slides .nivoSlider { border-radius: 2px; overflow: hidden; }
.rd-note .entry-content .vc_single_image-wrapper { display: block; }
.rd-note .entry-content .vc_box_border_grey { border: none !important; }
.rd-note .entry-content .wpb_single_image .vc_figure { margin: 0; }

/* ── Tablas (mismo trato que cursos; !important vence anchos/aligns inline del editor) ── */
.rd-note .entry-content table {
  width: 100% !important; height: auto !important; margin: 16px 0; border: 1px solid var(--bd);
  border-radius: 2px; border-collapse: collapse; overflow: hidden; table-layout: auto;
}
.rd-note .entry-content th, .rd-note .entry-content td { width: auto !important; height: auto !important; text-align: left !important; }
.rd-note .entry-content th {
  background: var(--surf); font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--topo); font-weight: 600; padding: 10px 14px;
}
.rd-note .entry-content td { font-size: 13.5px; color: var(--body); padding: 11px 14px; border-top: 1px solid var(--bd2); }

/* ── "Beauty File recomienda" / productos (.producto): cards limpias on-brand ── */
.rd-note .entry-content .wpb_text_column b,
.rd-note .entry-content .wpb_text_column strong { color: var(--negro); }
.rd-note .entry-content .producto .vc_figure { justify-content: center; }

/* ════════════ RELACIONADOS (rd_note_related) ════════════ */
/* Encabezado compartido de ambos bloques */
.rd-note .rd-note-relhead { text-align: center; margin: 0 auto 30px; }
.rd-note .rd-note-relhead .kick { color: var(--vino); display: block; margin-bottom: 9px; }
.rd-note .rd-note-relhead h2 {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; line-height: .98;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--negro); margin: 0;
}

/* ── "Sigue formándote" (cursos del combo) — banda surface, 2 columnas ── */
.rd-note .rd-note-courses {
  background: var(--surf); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd);
  padding: 56px 40px; margin-top: 56px;
}
.rd-note .rd-note-courses-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 880px; margin: 0 auto;
}

/* Cards de curso — espejo de las de Escuela (.rd-school .rd-card*) */
.rd-note .rd-card { background: #fff; border: 1px solid var(--bd); border-radius: 2px; overflow: hidden; display: flex; flex-direction: column; }
.rd-note .rd-card-img { display: block; height: 220px; overflow: hidden; flex-shrink: 0; line-height: 0; background: var(--surf); }
.rd-note .rd-card-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; }
.rd-note .rd-card-body { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.rd-note .rd-card-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase;
  color: var(--negro); letter-spacing: -.005em; line-height: 1.2; margin: 0 0 12px;
}
.rd-note .rd-card-title a { color: inherit; text-decoration: none; font: inherit; letter-spacing: inherit; }
.rd-note .rd-card-title a:hover { color: var(--vino); }
.rd-note .rd-card-excerpt { font-family: 'Inter', sans-serif; color: var(--body); flex: 1; margin-bottom: 16px; }
.rd-note .rd-card-meta-row {
  display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; color: var(--body); margin: 0 0 6px;
}
.rd-note .rd-card-meta-row svg { width: 13px; height: 13px; stroke: var(--vino); fill: none; stroke-width: 1.8; flex-shrink: 0; margin-top: 1px; }
.rd-note .rd-card-line { font-size: 13px; line-height: 1.6; color: var(--body); margin: 0; }
.rd-note .rd-card-rule { height: 1px; background: var(--bd); border: 0; margin: 0 0 13px; }
.rd-note .rd-card-cta {
  display: inline-block; align-self: flex-start; background: transparent; color: #8C4F5A;
  padding: 11px 22px; border-radius: 3px; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  border: 1.5px solid #8C4F5A; margin-top: auto; transition: background .15s ease, color .15s ease;
}
.rd-note .rd-card-cta:hover { background: #8C4F5A; color: #FAF7F2; }

/* ── "Sigue leyendo" (notas) — reusa .rd-mz-grid/.rd-mz-card de ETAPA 7 (hereda .rd-magazine) ── */
.rd-note .rd-note-magazine { max-width: 1120px; margin: 0 auto; padding: 56px 40px 64px; }
.rd-note .rd-note-allcta { text-align: center; padding: 44px 0 0; }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-note .rd-note-article { padding: 24px 28px 8px; }
  #content.rd-note .entry-content h1.body { font-size: 31px; }
  .rd-note .rd-note-courses { padding: 48px 28px; margin-top: 48px; }
  .rd-note .rd-note-magazine { padding: 48px 28px 56px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-note .rd-note-article { padding: 20px 20px 8px; }
  #content.rd-note .entry-content h1.body { font-size: 27px; }
  .rd-note .entry-content p,
  .rd-note .entry-content ul:not([class*="block-grid"]) > li { font-size: 15px; }
  .rd-note .entry-content blockquote h2 { font-size: 16.5px; }
  .rd-note .entry-content p strong[style*="Oswald"] { font-size: 18px !important; }

  .rd-note .rd-note-courses { padding: 40px 20px; margin-top: 40px; }
  .rd-note .rd-note-courses-grid { grid-template-columns: 1fr; gap: 18px; }
  .rd-note .rd-card-img { height: 200px; }
  .rd-note .rd-note-magazine { padding: 40px 20px 48px; }
  .rd-note .rd-note-relhead h2 { font-size: 26px; }
}


/* ============================================================
   ETAPA 9 — page-contact (Contacto). Scope .rd-contact.
   Reskin del template de Contacto reproduciendo mockup-page-contact.html con los
   mecanismos reales del tema (form custom + AJAX intactos, _featured_post, opciones
   contact-address/contact-tel). Header + facts strip + 2-col (form/promo) + mapa.
   Breakpoints ≤860 (1 col) / ≤600 (mobile). El shell (nav/footer/off-page) lo da .rd-page.
   ============================================================ */

/* ── HEADER ── */
.rd-contact .rd-head {
  position: relative; overflow: hidden;
  padding: 60px 40px 46px; border-bottom: 1px solid var(--bd);
}
.rd-contact .rd-head-inner { position: relative; z-index: 2; max-width: 660px; }
.rd-contact .rd-head-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 56px; line-height: 1.02; letter-spacing: -.02em; color: var(--negro); margin: 0;
}
.rd-contact .rd-head-intro { margin-top: 18px; }
.rd-contact .rd-head-intro p {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.72; color: var(--body);
  max-width: 540px; margin: 0 0 12px;
}
/* 1er párrafo = lead acentuado (Archivo, vino) */
.rd-contact .rd-head-intro p:first-child {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 21px; line-height: 1.34;
  letter-spacing: -.01em; color: var(--vino); max-width: 560px; margin-bottom: 14px;
}
.rd-contact .rd-head-watermark {
  position: absolute; right: 18%; top: 50%; transform: translateY(-50%);
  height: 240px; width: auto; opacity: .05; z-index: 1; pointer-events: none;
}

/* ── FACTS STRIP ── */
.rd-contact .rd-facts {
  display: grid; grid-template-columns: 1.6fr 1fr;
  background: var(--bg); border-bottom: 1px solid var(--bd);
}
.rd-contact .rd-fact {
  padding: 22px 32px; border-right: 1px solid var(--bd);
  display: flex; flex-direction: column; gap: 7px;
}
.rd-contact .rd-fact:last-child { border-right: none; }
.rd-contact .rd-fact-label {
  font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: .18em;
  text-transform: uppercase; color: var(--body);
}
.rd-contact .rd-fact-value {
  font-family: 'Archivo', sans-serif; font-size: 18px; font-weight: 700; text-transform: uppercase;
  letter-spacing: -.01em; color: var(--negro); line-height: 1.15;
}
.rd-contact .rd-fact-value.small { font-size: 15px; }
.rd-contact .rd-fact-socials { display: flex; gap: 12px; margin-top: 2px; }
.rd-contact .rd-fact-socials a {
  width: 32px; height: 32px; border: 1px solid var(--topo); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: var(--negro); font-size: 14px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.rd-contact .rd-fact-socials a:hover { background: var(--vino); border-color: var(--vino); color: #FAF7F2; }

/* ── BODY (2 columnas) ── */
.rd-contact .rd-contact-body {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px; padding: 52px 40px 56px;
}

/* ── FORMULARIO ── */
.rd-contact .rd-form-section { background: var(--surf); border-radius: 3px; padding: 30px 30px 32px; }
.rd-contact .rd-form-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 19px; text-transform: uppercase;
  letter-spacing: -.005em; color: var(--vino); line-height: 1.15;
}
.rd-contact .rd-form-badge {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--vino); margin: 6px 0 20px; display: block;
}
/* Panel de confirmación de la página de gracias (contacto-ok) — reusa .rd-form-section.
   Todo el contenido centrado (título, badge, mensaje y botón). */
.rd-contact-ok .rd-form-section { text-align: center; }
.rd-contact-ok .rd-ok-text { margin: 4px 0 22px; }
.rd-contact-ok .rd-ok-text p {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.72; color: var(--body); margin: 0 0 12px;
  text-align: center !important;
}
.rd-contact-ok .rd-ok-text p:last-child { margin-bottom: 0; }
.rd-contact-ok .rd-form-section .btn-vino { text-decoration: none; }

.rd-contact .contactform { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.rd-contact .contactform .row { margin-bottom: 12px; }
.rd-contact .contactform .row.full,
.rd-contact .contactform .ajax-loader-confirm { grid-column: 1 / -1; }
.rd-contact .contactform input[type="text"],
.rd-contact .contactform select,
.rd-contact .contactform textarea {
  width: 100%; background: #fff; border: 1px solid var(--topo); border-radius: 2px;
  font-family: 'Inter', sans-serif; font-size: 13px; color: var(--negro);
}
.rd-contact .contactform input[type="text"],
.rd-contact .contactform select { height: 40px; padding: 0 13px; }
.rd-contact .contactform select { -webkit-appearance: none; appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A89B8C' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 34px;
}
.rd-contact .contactform textarea { padding: 10px 13px; height: 110px; resize: vertical; }
.rd-contact .contactform input::placeholder,
.rd-contact .contactform textarea::placeholder { color: var(--topo); opacity: 1; }
.rd-contact .contactform input.inputerror,
.rd-contact .contactform textarea.inputerror { border-color: var(--vino); }

/* Newsletter (checkbox) */
.rd-contact .contactform .row.newsletter { margin: 4px 0 18px; }
.rd-contact .contactform .row.newsletter label {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0;
}
.rd-contact .contactform .row.newsletter input { width: 17px; height: 17px; flex-shrink: 0; margin: 1px 0 0; }
.rd-contact .contactform .row.newsletter span {
  font-family: 'Inter', sans-serif; font-size: 12px; line-height: 1.45; color: var(--body);
}

/* Acciones: reCAPTCHA + botón */
.rd-contact .contactform .row.actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.rd-contact .btn-vino {
  background: #8C4F5A; color: #FAF7F2; border: none; cursor: pointer; width: auto;
  padding: 13px 26px; border-radius: 3px; font-family: 'Archivo', sans-serif; font-weight: 600;
  font-size: 12px; letter-spacing: .15em; text-transform: uppercase;
  display: inline-flex; align-items: center; transition: background .15s ease;
}
.rd-contact .btn-vino:hover { background: #784351; }
.rd-contact .contactform .ajax-loader-confirm {
  font-family: 'Inter', sans-serif; font-size: 12px; color: var(--body); margin-top: 10px;
}
.rd-contact .form-msg .error,
.rd-contact .form-msg .info { font-family: 'Inter', sans-serif; font-size: 13px; margin-bottom: 14px; }

/* ── ASIDE: promo (Escuela vía _featured_post) ── */
.rd-contact .rd-promo {
  display: block; background: #fff; border: 1px solid var(--bd); border-radius: 3px;
  overflow: hidden; text-decoration: none;
}
.rd-contact .rd-promo-img { height: 220px; line-height: 0; overflow: hidden; }
.rd-contact .rd-promo-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; display: block; transition: transform .5s ease; }
.rd-contact .rd-promo:hover .rd-promo-img img { transform: scale(1.04); }
.rd-contact .rd-promo-body { padding: 22px 24px 26px; }
.rd-contact .rd-promo-kick {
  font-family: 'Inter', sans-serif; font-weight: 500; font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vino); display: block; margin-bottom: 9px;
}
.rd-contact .rd-promo-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px;
  line-height: 1.2; letter-spacing: -.01em; color: var(--negro); margin: 0 0 11px;
}
.rd-contact .rd-promo-body p { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.68; color: var(--body); margin: 0; }
.rd-contact .rd-promo-link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-family: 'Inter', sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--vino); text-decoration: none; transition: gap .2s ease;
}
.rd-contact .rd-promo-link svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.rd-contact .rd-promo:hover .rd-promo-link { gap: 12px; }

/* ── MAPA ── */
.rd-contact .rd-map-band { position: relative; padding: 0 40px 56px; }
.rd-contact .rd-map-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; }
.rd-contact .rd-map-title {
  font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600; letter-spacing: .12em;
  color: var(--negro); text-transform: uppercase;
}
.rd-contact .rd-map-rule { flex: 1; height: 1px; background: var(--bd); }
.rd-contact .rd-map { position: relative; border-radius: 3px; overflow: hidden; height: 420px; border: 1px solid var(--bd); line-height: 0; }
.rd-contact .rd-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-contact .rd-head { padding: 48px 32px 38px; }
  .rd-contact .rd-head-title { font-size: 44px; }
  .rd-contact .rd-head-intro p:first-child { font-size: 19px; }
  .rd-contact .rd-contact-body { grid-template-columns: 1fr; gap: 34px; padding: 40px 32px 44px; }
  .rd-contact .rd-map-band { padding: 0 32px 44px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-contact .rd-head { padding: 36px 20px 28px; }
  .rd-contact .rd-head-title { font-size: 36px; }
  .rd-contact .rd-head-intro p:first-child { font-size: 17px; margin-bottom: 12px; }
  .rd-contact .rd-head-watermark { height: 180px; right: -60px; opacity: .045; }

  .rd-contact .rd-facts { grid-template-columns: 1fr; }
  .rd-contact .rd-fact { padding: 16px 20px; border-right: none; border-bottom: 1px solid var(--bd); }
  .rd-contact .rd-fact:last-child { border-bottom: none; }
  .rd-contact .rd-fact-value { font-size: 17px; }

  .rd-contact .rd-contact-body { grid-template-columns: 1fr; gap: 28px; padding: 30px 20px 36px; }

  .rd-contact .rd-form-section { padding: 24px 20px 26px; border-radius: 2px; }
  .rd-contact .contactform { grid-template-columns: 1fr; gap: 0; }
  .rd-contact .rd-form-title { font-size: 18px; }
  .rd-contact .btn-vino { width: 100%; justify-content: center; }

  .rd-contact .rd-promo-img { height: 200px; }

  .rd-contact .rd-map-band { padding: 0 20px 36px; }
  .rd-contact .rd-map { height: 300px; }
}

/* reCAPTCHA (304px fijo): escalar en pantallas muy angostas para que no desborde */
@media only screen and (max-width: 360px) {
  .rd-contact .g-recaptcha { transform: scale(.86); transform-origin: 0 0; }
}


/* ============================================================
   ETAPA 10 — page-portfolio (Portfolio). Scope .rd-portfolio.
   Reskin centrado en Bettina (mockup-page-portfolio.html): header + intro
   (tarjeta de artista + bio = [vc_column_text] reestilizado) + galería full-width
   (IDs parseados de [vc_gallery]). Shell (nav/footer/off-page) lo da .rd-page.
   Breakpoints ≤860 (1 col) / ≤600 (mobile).
   ============================================================ */

/* ── HEADER ── */
.rd-portfolio .rd-head {
  position: relative; overflow: hidden;
  padding: 58px 40px 44px; border-bottom: 1px solid var(--bd);
}
.rd-portfolio .rd-head-inner { position: relative; z-index: 2; }
.rd-portfolio .rd-head-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 56px; line-height: 1.02; letter-spacing: -.02em; color: var(--negro); margin: 0;
}
.rd-portfolio .rd-head-watermark {
  position: absolute; right: 16%; top: 50%; transform: translateY(-50%);
  height: 108px; width: auto; opacity: .05; z-index: 1; pointer-events: none;
}

/* ── INTRO ARTISTA (retrato + bio) ── */
.rd-portfolio .rd-intro {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px;
  padding: 52px 40px 46px; align-items: start;
}
.rd-portfolio .rd-artist-card {
  border: 1px solid var(--bd); border-radius: 3px; overflow: hidden; background: #fff;
}
.rd-portfolio .rd-artist-photo { line-height: 0; }
.rd-portfolio .rd-artist-photo img {
  width: 100%; height: auto; display: block; filter: grayscale(100%);
}
.rd-portfolio .rd-artist-caption { background: var(--surf); padding: 18px 22px 20px; text-align: center; }
.rd-portfolio .rd-artist-caption .kick { color: var(--vino); display: block; margin-bottom: 6px; }
.rd-portfolio .rd-artist-name {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 24px; letter-spacing: -.01em; color: var(--negro); line-height: 1;
}
.rd-portfolio .rd-artist-photo a { display: block; line-height: 0; }
.rd-portfolio .rd-artist-name a {
  color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none;
  transition: color .15s ease;
}
.rd-portfolio .rd-artist-name a:hover { color: var(--vino); }

.rd-portfolio .rd-artist-bio { padding-top: 4px; }
.rd-portfolio .rd-artist-bio p {
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.72; color: var(--body); margin: 0 0 13px;
}
.rd-portfolio .rd-artist-bio p:last-child { margin-bottom: 0; }
/* 1er párrafo = lead acentuado (Archivo, vino) */
.rd-portfolio .rd-artist-bio p:first-child {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.34;
  letter-spacing: -.01em; color: var(--vino); margin-bottom: 18px;
}
.rd-portfolio .rd-artist-bio strong { color: var(--negro); font-weight: 600; }

/* ── EQUIPO (staff) — grilla sin título; card = foto + nombre + rol + Instagram ── */
.rd-portfolio .rd-team-section { padding: 6px 40px 60px; border-top: 1px solid var(--bd); }
.rd-portfolio .rd-team-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 24px; padding-top: 44px;
}
.rd-portfolio .rd-team-card {
  background: #fff; border: 1px solid var(--bd); border-radius: 3px; overflow: hidden;
}
.rd-portfolio .rd-team-photo { line-height: 0; overflow: hidden; }
.rd-portfolio .rd-team-photo img {
  width: 100%; display: block; aspect-ratio: 1 / 1; object-fit: cover;
  filter: grayscale(100%); transition: filter .5s ease, transform .6s ease;
}
.rd-portfolio .rd-team-card:hover .rd-team-photo img { filter: grayscale(0); transform: scale(1.03); }
.rd-portfolio .rd-team-info { background: var(--surf); padding: 16px 18px 18px; text-align: center; }
.rd-portfolio .rd-team-name {
  font-family: 'Archivo', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: 18px; letter-spacing: -.01em; color: var(--negro); line-height: 1.1;
}
.rd-portfolio .rd-team-photo a { display: block; line-height: 0; }
.rd-portfolio .rd-team-name a {
  color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none;
  transition: color .15s ease;
}
.rd-portfolio .rd-team-name a:hover { color: var(--vino); }
.rd-portfolio .rd-team-role {
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .14em;
  text-transform: uppercase; color: var(--body); margin-top: 6px;
}
.rd-portfolio .rd-team-ig {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500;
  color: var(--vino); text-decoration: none; transition: color .15s ease;
}
.rd-portfolio .rd-team-ig i { font-size: 16px; line-height: 1; }
.rd-portfolio .rd-team-ig:hover { color: var(--negro); }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-portfolio .rd-head { padding: 46px 32px 36px; }
  .rd-portfolio .rd-head-title { font-size: 44px; }
  .rd-portfolio .rd-intro { grid-template-columns: 1fr; gap: 30px; padding: 40px 32px 38px; max-width: 620px; }
  .rd-portfolio .rd-team-section { padding: 6px 32px 48px; }
  .rd-portfolio .rd-team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 20px; padding-top: 34px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-portfolio .rd-head { padding: 36px 20px 28px; }
  .rd-portfolio .rd-head-title { font-size: 38px; }
  .rd-portfolio .rd-head-watermark { height: 80px; right: 10%; opacity: .045; }

  .rd-portfolio .rd-intro { padding: 30px 20px 32px; gap: 24px; }
  .rd-portfolio .rd-artist-name { font-size: 22px; }
  .rd-portfolio .rd-artist-bio p:first-child { font-size: 19px; }

  .rd-portfolio .rd-team-section { padding: 4px 20px 40px; }
  .rd-portfolio .rd-team-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; padding-top: 28px; }
  .rd-portfolio .rd-team-name { font-size: 15px; }
  .rd-portfolio .rd-team-role { font-size: 10px; letter-spacing: .12em; }
  .rd-portfolio .rd-team-ig { font-size: 12px; }
}


/* ============================================================
   ETAPA 11 — Videos. Scope .rd-videos.
   Cubre page-videos (hub), scategory-videos (categorías) y spost-videos (single).
   La página lleva además .rd-magazine → HEREDA submenú + grilla + cards
   (.rd-mz-nav / .rd-mz-section / .rd-mz-grid / .rd-mz-card* / .rd-mz-btn) de
   ETAPA 7 con el mismo tamaño/estilo. Acá solo va lo PROPIO de Videos: el
   masthead de texto "Videos" (no logo Beauty File), el overlay de play sobre la
   miniatura, y el single (embed 16:9 + panel meta). El single además lleva
   .rd-detail → reusa el bloque .rd-related de ETAPA 3 para get_custom_footer().
   Breakpoints alineados a Magazine (≤860 / ≤600).
   ============================================================ */

/* ── Masthead tipográfico ── */
.rd-videos .rd-vd-masthead { text-align: center; padding: 42px 40px 30px; }
.rd-videos .rd-vd-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 48px; line-height: 1;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--negro); margin: 0;
}

/* ── Overlay de play sobre la miniatura ── */
.rd-videos .rd-mz-card-img { position: relative; }
.rd-videos .rd-vd-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 50%; background: rgba(110, 42, 53, .85);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  pointer-events: none; box-shadow: 0 6px 18px rgba(20, 17, 15, .28);
  transition: transform .25s ease, background .25s ease;
}
.rd-videos .rd-mz-card:hover .rd-vd-play { transform: translate(-50%, -50%) scale(1.08); background: var(--vino); }
.rd-videos .rd-vd-play svg { width: 22px; height: 22px; fill: #fff; margin-left: 3px; display: block; }

/* ── SINGLE (spost-videos): embed 16:9 (izq) + panel meta (der) ── */
.rd-videos .rd-vd-single {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 44px;
  padding: 28px 40px 14px; align-items: start;
}
.rd-videos .rd-vd-video {
  position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 2px;
  overflow: hidden; background: #000; line-height: 0;
}
.rd-videos .rd-vd-video iframe,
.rd-videos .rd-vd-video img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

.rd-videos .rd-vd-meta { padding-top: 4px; }
.rd-videos .rd-vd-meta .rd-mz-cat { margin-bottom: 11px; }
.rd-videos .rd-vd-headline {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.06;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--negro);
  padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--bd);
}
.rd-videos .rd-vd-desc { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.72; color: var(--body); }
.rd-videos .rd-vd-desc p { margin: 0 0 14px; }
.rd-videos .rd-vd-desc p:last-child { margin-bottom: 0; }
.rd-videos .rd-vd-desc a { color: var(--vino); }
.rd-videos .rd-vd-social { margin-top: 22px; }

/* "Más videos": misma sección/grilla que el hub, solo el padding superior se ajusta */
.rd-videos .rd-vd-more { padding-top: 22px; }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-videos .rd-vd-masthead { padding: 38px 24px 26px; }
  .rd-videos .rd-vd-title { font-size: 40px; }

  .rd-videos .rd-vd-single { grid-template-columns: 1fr; gap: 28px; padding: 22px 24px 10px; }
  .rd-videos .rd-vd-headline { font-size: 27px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-videos .rd-vd-masthead { padding: 32px 20px 24px; }
  .rd-videos .rd-vd-title { font-size: 32px; }
  .rd-videos .rd-vd-play { width: 52px; height: 52px; }
  .rd-videos .rd-vd-play svg { width: 20px; height: 20px; }

  .rd-videos .rd-vd-single { padding: 18px 20px 8px; gap: 22px; }
  .rd-videos .rd-vd-headline { font-size: 24px; padding-bottom: 14px; margin-bottom: 14px; }
}


/* ============================================================
   ETAPA 12 — Prensa. Scope .rd-prensa.
   Cubre page-prensa (hub) y, más adelante, spost-prensa (nota).
   SIN mockup. La página lleva además .rd-magazine → HEREDA de ETAPA 7
   la sección (.rd-mz-section / .rd-mz-section-head / .rd-mz-line) y la
   grilla (.rd-mz-grid, 3→2→1 col responsive) + el estado vacío
   (.rd-mz-empty). Acá solo va lo PROPIO de Prensa: el masthead de texto
   "Prensa" y la card de LOGO del medio (object-fit: contain, sin foto).
   Breakpoints alineados a Magazine (≤860 / ≤600).
   ============================================================ */

/* ── Masthead tipográfico ── */
.rd-prensa .rd-pr-masthead { text-align: center; padding: 42px 40px 30px; }
.rd-prensa .rd-pr-masthead-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 48px; line-height: 1;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--negro); margin: 0;
}

/* ── Nota individual (spost-prensa): cabecera con título + regla ──
   El título se renderiza en el template (las notas de prensa no lo traen en el
   cuerpo WPBakery). El cuerpo lo reskina .rd-note (ETAPA 8); "Más en prensa"
   reusa .rd-note-magazine/.rd-mz-grid/.rd-mz-btn (ETAPA 7+8). */
.rd-prensa .rd-pr-note-head { margin: 0 0 24px; padding-bottom: 18px; border-bottom: 1px solid var(--bd); }
.rd-prensa .rd-pr-note-title {
  font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 38px; line-height: 1.04;
  letter-spacing: -.025em; text-transform: uppercase; color: var(--negro); margin: 0;
}
/* Logo del medio bajo el título (Segunda imagen destacada). Acotado por alto;
   object-fit: contain para no deformar logos de proporciones distintas. Aire
   balanceado arriba (regla→logo, vía margin del head) y abajo (logo→texto). */
.rd-prensa .rd-pr-note-logo { height: 44px; margin: 0 0 22px; line-height: 0; }
.rd-prensa .rd-pr-note-logo img {
  max-height: 100%; max-width: 240px; width: auto; height: auto;
  object-fit: contain; display: block;
}

/* Relacionados "Sigue leyendo" (reusa .rd-note-magazine de ETAPA 8): banda con CORTE de
   color (superficie greige + regla arriba) para separarlo del cuerpo de la nota (que va
   sobre --bg). Sin esto la banda se confundía con la nota. Scopeado a .rd-prensa para no
   tocar Magazine/Videos (cerrados). max-width:none → banda full-width del marco. */
.rd-prensa .rd-note-magazine {
  background: var(--surf); border-top: 1px solid var(--bd);
  max-width: none; margin-top: 56px;
}

/* La grilla de prensa respira un poco más que la del Magazine (cards bajas) */
.rd-prensa .rd-pr-section .rd-mz-grid { gap: 44px 28px; }

/* Divisor entre filas (solo desktop): regla fina full-width que ocupa la fila
   completa del grid. Se oculta en ≤860 (ahí la grilla pasa a 2/1 col y el
   "cada 3 cards" del template dejaría de coincidir con el inicio de fila). */
.rd-prensa .rd-pr-rowsep { grid-column: 1 / -1; height: 1px; background: var(--bd); }

/* ── Card = logo del medio + título + extracto ── */
.rd-prensa .rd-pr-card { display: flex; flex-direction: column; text-decoration: none; }
.rd-prensa .rd-pr-logo {
  height: 46px; margin-bottom: 10px; line-height: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
.rd-prensa .rd-pr-logo img {
  max-height: 100%; max-width: 70%; width: auto; height: auto;
  object-fit: contain; display: block;
}
.rd-prensa .rd-pr-card-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 17px; line-height: 1.18;
  letter-spacing: -.01em; text-transform: uppercase; color: var(--negro); margin-bottom: 10px;
  transition: color .2s ease;
}
.rd-prensa .rd-pr-card:hover .rd-pr-card-title { color: var(--vino); }
.rd-prensa .rd-pr-excerpt {
  font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.62; color: var(--body); margin: 0;
}

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-prensa .rd-pr-masthead { padding: 38px 24px 26px; }
  .rd-prensa .rd-pr-masthead-title { font-size: 40px; }
  .rd-prensa .rd-pr-note-title { font-size: 31px; }
  .rd-prensa .rd-pr-section .rd-mz-grid { gap: 40px 24px; }
  .rd-prensa .rd-pr-rowsep { display: none; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-prensa .rd-pr-masthead { padding: 32px 20px 24px; }
  .rd-prensa .rd-pr-masthead-title { font-size: 32px; }
  .rd-prensa .rd-pr-note-title { font-size: 27px; }
  .rd-prensa .rd-pr-section .rd-mz-grid { gap: 34px; }
  .rd-prensa .rd-pr-card-title { font-size: 17px; }
}

/* ============================================================
   ETAPA 13 — LANDINGS (máscara de campaña). Scope .rd-landing.
   Una landing re-renderiza un post/curso YA cargado con el chrome de campaña y
   DESTAPA el precio. landingtpl-class_details.php (Curso) reusa el markup rd-* de
   single-class → HEREDA todo ETAPA 3 (.rd-detail) y, como lleva .rd-page, también
   el shell global (nav fija con color, offset, fondo off-page) de ETAPA 2.
   header-landing.php / footer-landing.php (reescritos) montan la nav nueva y QUITAN
   el footer (decisión usuario). Acá va SOLO lo propio de landing: el .price-panel
   y los bloques opcionales de copy de campaña.
   ============================================================ */

/* Nav de landing: SOLO el logo, centrado y sin link (modo campaña, header-landing.php).
   El logo mantiene el brightness(0) + alto de ETAPA 2 (sigue siendo .rn-logo). */
.redesign-nav--landing { justify-content: center; gap: 0; }
.redesign-nav--landing .rn-logo { cursor: default; }

/* Bloques opcionales de copy de campaña (metas header_content / footer_content) */
.rd-landing .rd-landing-extra {
  padding: 0 40px; max-width: 1200px; margin: 0 auto;
  font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7; color: var(--body);
}
.rd-landing .rd-landing-extra--top { padding-top: 34px; }
.rd-landing .rd-landing-extra--bottom { padding-bottom: 8px; }

/* ── BLOQUE ESCUELA "prestado" (landing-class2, school_header) ──
   Va ARRIBA del hero oscuro del curso. En desktop la foto del split de Escuela quedaba PEGADA
   a la cabecera del curso (foto contra foto). Los bloques se dejan pegados; lo que se hace es
   CONTENER la foto de Escuela dentro de su bloque, con aire crema alrededor (mismo recurso que
   la foto del bloque "Nuestros Cursos" de page-school) → la foto deja de tocar el borde y, por
   ende, el hero del curso. Solo aplica al school_header de landing (scope .rd-landing-shead). */
.rd-landing-shead .rd-hero-img img { border-radius: 2px; }
@media only screen and (min-width: 861px) {
  /* Foto de Escuela en landing: más CHICA y CENTRADA (vertical + horizontal) dentro de su
     columna → queda equilibrada con el texto (que va centrado), con aire crema alrededor.
     Se anula el width/height:100% del split (que la estiraba al borde) y se acota por
     max-height, dejando la foto en su aspecto natural. */
  .rd-landing-shead .rd-hero-img {
    background: var(--bg);
    box-sizing: border-box;
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .rd-landing-shead .rd-hero-img img {
    width: auto; height: auto;
    max-width: 100%; max-height: 300px;
  }
}

/* ── PRECIO (shortcode [price] → .price-panel, revelado por .landing-page) ──
   Se imprime DENTRO de .entry-content → NO se le pone CSS propio: hereda tal cual el
   estilo de cuerpo de ETAPA 3 (.rd-detail .rd-content .entry-content) → el <h4> "Precio:"
   queda IGUAL que los demás subtítulos (PROFESORAS / QUE RECIBIRÁS: en mayúsculas con la
   línea) y el <p> (MATRÍCULA/CUOTAS) como párrafo de cuerpo. La visibilidad la da la regla
   legacy .landing-page .price-panel{display:block !important}. */

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-landing .rd-landing-extra { padding-left: 24px; padding-right: 24px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-landing .rd-landing-extra { padding-left: 20px; padding-right: 20px; }
}

/* ============================================================
   ETAPA 14 — BÚSQUEDA INTERNA (search.php). Scope .rd-search.
   La página lleva además .rd-magazine → HEREDA de ETAPA 7 la sección
   (.rd-mz-section / .rd-mz-section-head / .rd-mz-line), la grilla
   (.rd-mz-grid) y las cards. Acá va SOLO lo propio: el masthead de la
   búsqueda (título + término) y la pantalla "sin resultados".
   ============================================================ */

/* ── Masthead: solo la frase "Mostrando N resultados para «término»" ── */
.rd-search .rd-search-masthead { text-align: center; padding: 46px 40px 22px; }
.rd-search .rd-search-sub {
  font-family: 'Inter', sans-serif; font-size: 22px; line-height: 1.4; color: var(--body);
}
.rd-search .rd-search-sub span { color: var(--vino); font-weight: 600; }

/* ── Grupos de resultados: un poco más apretados que la grilla del Magazine
   (acá se apilan varias secciones, una por tipo de contenido). ── */
.rd-search .rd-search-group { padding-top: 40px; padding-bottom: 22px; }

/* ── Sin resultados / sin término ── */
.rd-search .rd-search-empty { text-align: center; padding-top: 56px; padding-bottom: 72px; }
.rd-search .rd-search-empty-title {
  font-family: 'Archivo', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -.01em;
  text-transform: uppercase; color: var(--negro); margin-bottom: 26px;
}
/* Bajada opcional bajo el título (usada por 404.php). El título arriba conserva
   su margen (search.php lo usa sin bajada) → la subimos un poco con margin-top. */
.rd-search .rd-search-empty-lead {
  font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.55; color: var(--body);
  max-width: 460px; margin: -10px auto 26px;
}
.rd-search .rd-search-form {
  display: flex; justify-content: center; gap: 10px; max-width: 460px; margin: 0 auto;
}
.rd-search .rd-search-input {
  flex: 1; min-width: 0; height: 46px; padding: 0 16px; background: #fff;
  border: 1px solid var(--topo); border-radius: 2px; box-shadow: none;
  font-family: 'Inter', sans-serif; font-size: 14px; color: var(--negro); margin: 0;
  -webkit-appearance: none; appearance: none; box-sizing: border-box;
}
.rd-search .rd-search-input:focus { outline: none; border-color: var(--vino); }

/* ═══ TABLET (≤860px) ═══ */
@media only screen and (max-width: 860px) {
  .rd-search .rd-search-masthead { padding: 38px 24px 20px; }
  .rd-search .rd-search-sub { font-size: 20px; }
}

/* ═══ MOBILE (≤600px) ═══ */
@media only screen and (max-width: 600px) {
  .rd-search .rd-search-masthead { padding: 32px 20px 18px; }
  .rd-search .rd-search-sub { font-size: 18px; }
  .rd-search .rd-search-empty-title { font-size: 20px; }
  .rd-search .rd-search-form { flex-direction: column; }
  /* Foundation fuerza input[type=search]{height:2.3125rem} → en mobile el campo
     se ve fino. Forzamos altura cómoda (!important para ganarle sí o sí). */
  .rd-search .rd-search-input { width: 100%; height: 50px !important; }
  .rd-search .rd-search-form .btn-vino { width: 100%; justify-content: center; padding: 16px 22px; }
}