@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Inter:wght@400;500&display=swap');
/*
Theme Name: Understrap Child
Theme URI: https://understrap.com
Template: understrap
Author: Howard Development & Consulting
Author URI: https://howarddc.com
Description: The renowned WordPress starter theme framework that combined Underscores and Bootstrap. Trusted by more than 100,000 developers for building handcrafted, custom WordPress sites.
Tags: one-column,two-columns,three-columns,left-sidebar,right-sidebar,custom-background,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,translation-ready,block-styles,wide-blocks,editor-style,threaded-comments,accessibility-ready
Version: 1.3.75
Updated: 2026-09-16
*/

/* ==========================================================================
   1. VARIABLES Y PALETA DE COLORES
   ========================================================================== */
:root {
  --color-azul-noche: #1C2373;
  --color-verde-esmeralda: #1FA971;
  --color-verde-hover: #178a5b;
  --color-blanco-hueso: #F7F3EA;
  --color-arena-clara: #E8DCC2;
  --color-arena-calido: #D8C690;
  --color-bronce: #A6874F;
  --color-texto: #2C2C2A;
  --color-subtexto: #5F5E5A;

  --font-heading: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

/* ==========================================================================
   2. ESTILOS GENERALES
   ========================================================================== */
* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background-color: var(--color-blanco-hueso) !important;
  color: var(--color-texto);
  line-height: 1.6;
}

h1, h2, h3, .entry-title, .navbar-brand, .site-logo {
  font-family: var(--font-heading);
  font-weight: 600;
}

/* ==========================================================================
   3. HEADER / NAVBAR
   ========================================================================== */
#wrapper-navbar {
  border-bottom: 3px solid var(--color-verde-esmeralda) !important;
}
.site-header, .navbar {
  background-color: var(--color-azul-noche) !important;
}
.site-logo, .navbar-brand {
  font-size: 26px;
  color: var(--color-blanco-hueso) !important;
}
.navbar .nav-link {
  font-size: 13px;
  letter-spacing: 0.3px;
  margin: 0 6px;
  color: var(--color-blanco-hueso) !important;
  transition: color 0.25s ease;
}
.navbar .nav-link:hover {
  color: var(--color-verde-esmeralda) !important;
}

/* ==========================================================================
   4. HERO SECTION
   ========================================================================== */
.hero-section {
  text-align: center;
  padding: 90px 24px 70px;
}
.kicker, .hero-kicker {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--color-verde-esmeralda) !important;
  margin-bottom: 18px;
}
.hero-title {
  font-size: 46px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-azul-noche) !important;
  margin-bottom: 22px;
}
.hero-subtitle {
  font-size: 16px;
  color: var(--color-subtexto);
  max-width: 460px;
  line-height: 1.7;
}

/* Hero con foto: texto a la derecha, foto anclada al piso del marco */
.hero-with-photo {
  display: flex;
  align-items: center;
  gap: 0;
  text-align: left;
  padding: 0;
  position: relative;
}
.hero-text {
  flex: 1;
  padding: 0 40px 0 460px;
  text-align: center;
}
.hero-with-photo .hero-subtitle {
  margin: 0 0 32px;
  max-width: none;
}
.hero-image {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 460px;
  display: flex;
  align-items: flex-end;
}
.hero-photo {
  width: 100%;
  height: auto;
  display: block;
}

/* Marco elegante alrededor de todo el hero */
.hero-framed {
  background-color: var(--color-arena-clara);
  border: 1px solid var(--color-bronce);
  border-radius: 4px;
  padding: 56px 0;
  margin: 48px 0;
  overflow: visible;
  position: relative;
  min-height: 540px;
}

@media (max-width: 768px) {
  .hero-with-photo {
    flex-direction: column;
    text-align: center;
    position: static;
  }
  .hero-text {
    padding: 40px 24px 0;
  }
  .hero-image {
    position: static;
    width: 100%;
    justify-content: center;
    margin-top: 24px;
  }
  .hero-framed {
    padding: 0 0 24px;
    min-height: auto;
  }
  .hero-title {
    font-size: 30px !important;
  }
  .services-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Botón CTA principal */
.btn-primary, .btn-cta, .wp-block-button__link {
  background-color: var(--color-verde-esmeralda) !important;
  border-color: var(--color-verde-esmeralda) !important;
  color: var(--color-blanco-hueso) !important;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  border-radius: 4px;
  box-shadow: 0 6px 18px rgba(31, 169, 113, 0.3) !important;
  transition: all 0.3s ease;
  text-decoration: none !important;
  display: inline-block;
}
.btn-primary:hover, .btn-cta:hover, .wp-block-button__link:hover {
  background-color: var(--color-verde-hover) !important;
  border-color: var(--color-verde-hover) !important;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(31, 169, 113, 0.4) !important;
}

/* ==========================================================================
   5. TARJETAS
   ========================================================================== */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-card {
  padding: 42px 32px;
  background-color: var(--color-arena-clara);
  border-top: 3px solid var(--color-bronce);
  border-radius: 4px;
  transition: background-color 0.35s ease;
}
.service-card:hover {
  background-color: var(--color-arena-calido);
}
.service-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--color-azul-noche);
  margin-bottom: 12px;
}
.card-link-green, .service-card a {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-verde-esmeralda) !important;
}

/* ==========================================================================
   6. FOOTER
   ========================================================================== */
.site-footer, footer.site-footer, footer {
  background-color: var(--color-azul-noche) !important;
  color: var(--color-blanco-hueso) !important;
  padding: 28px 32px;
  text-align: center;
  border-top: 2px solid var(--color-verde-esmeralda) !important;
}
.site-footer a, footer a {
  color: var(--color-blanco-hueso) !important;
}
.site-footer a:hover, footer a:hover {
  color: var(--color-arena-calido) !important;
}

/* ==========================================================================
   7. LINKS DEL SITIO REAL (posts, páginas, listado de blog)
   ========================================================================== */
a {
  text-decoration: none !important;
}

.entry-title,
.entry-title a,
.content-area a,
article a {
  color: var(--color-azul-noche) !important;
}
.entry-title a:hover,
.content-area a:hover,
article a:hover {
  color: var(--color-verde-esmeralda) !important;
}

.entry-footer,
.entry-footer a {
  color: var(--color-blanco-hueso) !important;
}
.entry-footer a:hover {
  color: var(--color-arena-calido) !important;
}

.entry-meta,
.entry-meta a {
  color: var(--color-bronce) !important;
}
.entry-meta a:hover {
  color: var(--color-azul-noche) !important;
}

.page-numbers {
  background-color: #6c757d !important;
  color: var(--color-blanco-hueso) !important;
  border: 1px solid #6c757d !important;
  padding: 0.375rem 0.75rem;
  border-radius: 0.25rem;
}
.page-numbers.current {
  background-color: var(--color-verde-esmeralda) !important;
  border-color: var(--color-verde-esmeralda) !important;
}
.page-numbers:hover {
  background-color: var(--color-azul-noche) !important;
  border-color: var(--color-azul-noche) !important;
  color: var(--color-blanco-hueso) !important;
}




/* Ícono JPL al lado del nombre del sitio */
.navbar-brand {
  display: flex !important;
  align-items: center;
  gap: 10px;
}
.navbar-brand::before {
  content: "";
  display: inline-block;
  width: 56px;
  height: 56px;
  background-image: url('https://jplbio.com/wp-content/uploads/2026/08/LOGO_NEW-11.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
/* ==========================================================================
   8. HEADER — LOGO MÁS GRANDE Y REDES SOCIALES
   Pegar al FINAL de style.css (después de la sección 7), reemplazando
   COMPLETO cualquier versión anterior de esta sección 8 que hayas pegado
   antes (medallón sobresaliente, arco verde, etc. — todo eso se saca).

   Diseño simple, como al principio: el logo (sin círculo ni fondo, solo
   el isotipo) va al lado izquierdo del nombre, ambos en la misma línea,
   sin sobresalir del header. La línea verde de abajo queda tal cual
   estaba en el tema original (derecha, sin cortes ni arcos) porque ya
   no hay nada que la tape ni que la interrumpa.
   ========================================================================== */

:root {
  --jpl-logo-size: 56px;   /* tamaño del isotipo. Bajalo/subilo a gusto */
}

/* --- Achica el "aire" propio del header, sin tocar el tamaño del logo.
       Bootstrap le pone padding arriba/abajo tanto a .navbar (8px) como
       a .navbar-brand (5px) — eso es lo que hace que la barra azul sea
       más alta de lo necesario. Lo llevamos a un mínimo prolijo: el
       logo (--jpl-logo-size) sigue mandando en la altura real, esto
       solo saca el sobrante. --- */
.navbar {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* --- Nombre más grande + logo al lado, en una sola fila.
       display:flex + gap hace que el círculo (::before) y el texto del
       nombre queden uno al lado del otro, centrados verticalmente entre
       sí — sin necesidad de posicionamiento absoluto ni de tocar la
       línea verde del header. --- */
.navbar-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  font-size: 26px !important;   /* antes 38px */
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* --- Isotipo suelto, sin círculo ni fondo azul detrás: se ve directamente
       la marca (ya es clara/blanca, por eso se recorta bien sobre el
       azul de la barra). Al ser un pseudo-elemento SIN position:absolute,
       el navegador lo trata como un elemento más de la fila (gracias al
       display:flex de arriba), así que no hace falta calcular nada de
       posición: siempre queda prolijo al lado del nombre.
       background-size: contain (en vez de un % chico) hace que la marca
       ocupe todo el espacio disponible, sin "aire" vacío alrededor. --- */
.navbar-brand::before {
  content: "" !important;
  display: block !important;
  flex-shrink: 0 !important;   /* que no se achique si el nombre es largo */
  width: var(--jpl-logo-size) !important;
  height: var(--jpl-logo-size) !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url('https://jplbio.com/wp-content/uploads/2026/08/LOGO_NEW-11.png') !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* --- Iconos de redes sociales, integrados al final del menú ---
       display: flex !important y flex-direction: row !important por las
       dudas de que alguna regla del tema/Bootstrap pise el contenedor.
       Además cada <a> es inline-flex: así, aunque el contenedor fallara,
       los iconos igual se acomodan en fila (nunca apilados). --- */
.jpl-social-icons {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  gap: 16px;
  margin-left: 20px;
  padding-left: 20px;
  border-left: 1px solid rgba(247, 243, 234, 0.35);
  list-style: none;
}
.jpl-social-icons a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  color: var(--color-blanco-hueso);
  opacity: 0.9;
  transition: color 0.25s ease, opacity 0.25s ease;
}
.jpl-social-icons a:hover,
.jpl-social-icons a:focus-visible {
  color: var(--color-verde-esmeralda);
  opacity: 1;
}
.jpl-social-icons svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}

/* --- Mobile: nombre y logo un poco más chicos --- */
@media (max-width: 768px) {
  .navbar-brand {
    font-size: 22px !important;
    gap: 10px !important;
  }
  .navbar-brand::before {
    width: 54px !important;
    height: 54px !important;
  }
  /* Los iconos quedan siempre visibles (no dependen de abrir el menú),
     así que en su propia línea les damos ancho completo, los centramos
     y les sacamos el separador vertical (ya no tiene nada a su izquierda). */
  .jpl-social-icons {
    width: 100% !important;
    justify-content: center !important;
    border-left: none !important;
    margin-left: 0 !important;
    padding: 8px 0 12px !important;
    gap: 18px !important;
  }
}

/* Configuración de los iconos en las cajas */
.service-title-icon {
  width: 40px;
  height: 40px;
  margin-right: 10px;
  vertical-align: -12px;
  color: #1C2373;
}

/* Configuración del encabezado para móviles */
@media (max-width: 768px) {
  #main-nav .container {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    padding-top: 8px;
    padding-left: 70px; /* espacio reservado para el logo */
  }

  #main-nav .navbar-brand {
    justify-content: flex-start;
    margin: 0;
  }

  #main-nav .navbar-brand::before {
    position: absolute;
    left: 0;
    top: 4px;
    width: 56px !important;
    height: 90px !important; /* que cubra nombre + íconos */
  }

  #main-nav .navbar-toggler {
    position: absolute;
    top: 4px;
    right: 0;
  }

  #main-nav .jpl-social-icons {
    justify-content: flex-start !important;
    width: 100% !important;
    margin-top: 8px;
    margin-left: 0 !important;
  }
}

/* ==========================================================================
   9. OCULTAR TÍTULO AUTOMÁTICO DUPLICADO EN "A TENER EN CUENTA"
   La página ya trae su propio encabezado diseñado (BIODESPROGRAMACIÓN +
   "A tener en cuenta") dentro del contenido. Al completar el campo Título
   nativo de WordPress (necesario para SEO), el tema agrega un .entry-title
   automático arriba — esto lo oculta SOLO en esta página (post ID 1546),
   sin tocar el .entry-title de las demás páginas/entradas del sitio.
   ========================================================================== */
body.page-id-1546 .entry-title {
  display: none !important;
}

/* =========================================================================
   REDISEÑO ARTÍCULOS — "Órganos y Emociones"
   jplbio.com — pegar UNA sola vez, es compartido por todos los artículos

   DÓNDE PEGARLO (elegí una opción, con cualquiera alcanza):
   a) Apariencia > Personalizar > CSS adicional (Additional CSS) — la más
      simple y segura, WordPress nunca filtra este panel.
   b) Al final de assets/css/estilos.css del theme JPLBioChild (mismo
      archivo donde ya vive .btn-agendar-sesion), vía Administrador de
      Archivos de Hostinger. Si el sitio está detrás de Cloudflare, subí
      cambiando el número de versión en el header del style.css para forzar
      que se sirva la versión nueva (mismo truco que ya usaste antes).

   NO lo pegues dentro de un bloque HTML personalizado de un artículo:
   WordPress descarta las etiquetas <style>/<script> del contenido de los
   posts si el rol no tiene la capacidad unfiltered_html (el mismo problema
   que tuviste con la página Índice).
   ========================================================================= */

/* Fondo de la página vs. margen — SOLO en la vista de un artículo individual.
   El body del sitio entero ya usa Blanco Hueso como fondo general (viene del
   theme, var(--color-blanco-hueso)), por eso las cajas destacadas de más
   abajo, al ponerlas también en Blanco Hueso, se perdían: quedaba todo del
   mismo color. Para recuperar contraste sin salirnos de la paleta, en un
   artículo el margen exterior pasa a Arena Clara y el bloque central de
   lectura (#content.container — ya envuelve título, imagen, texto y
   comentarios) queda en Blanco Hueso, como una "hoja" sobre el margen.
   Se scopea con "body.single" para no tocar ninguna otra plantilla del
   sitio (páginas, listado del blog, home). */
body.single{
  background:#E8DCC2 !important;
}
body.single #content.container{
  background:#F7F3EA;
  padding:32px 28px;
  border-radius:16px;
}

/* Categoría como "subtítulo" en píldora, debajo del título.
   Se escribe con el prefijo ".entry-content" y todos los estados de link
   (:link/:visited/:hover/:active) a propósito: el tema ya trae su propia
   regla ".entry-content a" / ".entry-content a:hover" que, al tener más
   especificidad que una clase sola, le ganaba a .om-badge y hacía que
   cambiara de color al pasar el mouse o si ya estaba visitado. */
.entry-content .om-badge,
.entry-content .om-badge:link,
.entry-content .om-badge:visited,
.entry-content .om-badge:hover,
.entry-content .om-badge:active{
  display:inline-block;
  font-family:'Inter',sans-serif;
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#1FA971 !important;
  background:#EAF6F0;
  border:1px solid #BFE7D6;
  border-radius:999px;
  padding:6px 16px;
  text-decoration:none !important;
  margin:8px 0 22px;
}

/* Píldora de categoría reubicada arriba a la derecha — pedido de Jorge
   para achicar el espacio en blanco que quedaba arriba de cada artículo,
   cuando la píldora ocupaba su propia fila entera debajo del autor.

   NO se tocó el HTML de ningún artículo: .om-badge sigue siendo el primer
   elemento de .entry-content. Lo que se hace acá es sacarlo del flujo
   normal (position:absolute) y anclarlo arriba a la derecha, que es
   chrome del tema (título + "Posted by jplbio"), así que esta regla va
   acá y no en el HTML de cada artículo.

   Regla base (celus/tablet, hasta 991px): la píldora queda en el mismo
   renglón que "Posted by jplbio" — con "top:-46px" anclado a
   .entry-content, que siempre arranca justo debajo de .entry-header
   completo, así que cae sobre esa línea sin importar si el título ocupa
   una, dos o tres líneas.

   Jorge pidió que en vez de eso vaya en el renglón del título. Probé esa
   versión en el sitio: en pantallas grandes queda perfecto (hay lugar de
   sobra a la derecha del título), pero en mobile y tablet angosto la
   píldora tapa el final de los títulos largos (ej. "Esclerosis Lateral
   Amiotrófica (E.L.A.)" — la palabra "(E.L.A.)" quedaba tapada hasta los
   ~990px de ancho). Por eso queda así, en dos niveles: abajo de 992px
   (el breakpoint "lg" que ya usa el theme) se deja en el renglón del
   autor, que siempre tiene lugar de sobra; de 992px para arriba pasa al
   renglón del título, como pediste. Si preferís que vaya siempre en el
   renglón del título aunque tape títulos largos en mobile, avisame y
   saco el breakpoint. */
body.single .entry-content{
  position:relative;
}
body.single .entry-content .om-badge,
body.single .entry-content .om-badge:link,
body.single .entry-content .om-badge:visited,
body.single .entry-content .om-badge:hover,
body.single .entry-content .om-badge:active{
  position:absolute;
  top:-46px;
  right:0;
  margin:0 !important;
}
@media (min-width:992px){
  body.single .entry-content{
    position:static;
  }
  body.single article{
    position:relative;
  }
  body.single .entry-content .om-badge,
  body.single .entry-content .om-badge:link,
  body.single .entry-content .om-badge:visited,
  body.single .entry-content .om-badge:hover,
  body.single .entry-content .om-badge:active{
    top:0;
  }
}

/* Tipografía base del cuerpo del artículo */
.om-body{
  font-family:'Inter',sans-serif;
  font-size:17.5px;
  line-height:1.85;
  color:#332E27;
}
.om-body p{ margin:0 0 22px; }

/* Subtítulo propio del artículo (algunos, como Dismenorrea, traen un H2
   original antes de la imagen, ej. "Menstruación dolorosa") — se le da la
   tipografía de título del sitio para que combine con el resto del
   diseño, en vez de quedar con el estilo H2 genérico del tema. */
.om-subheading{
  clear:both;
  font-family:'Cormorant Garamond',serif;
  font-size:26px;
  font-weight:600;
  color:#1C2373;
  margin:0 0 18px;
  line-height:1.3;
}

/* Imagen cuadrada incrustada, sin marco. A propósito NO tiene overflow:auto
   ni clearfix propio: así el/los párrafos que siguen (no solo el primero)
   se acomodan a la derecha de la imagen mientras haya lugar, con su salto
   de párrafo normal en el medio — recién se corta cuando el texto es más
   alto que la imagen, o donde se pone .om-clear / un bloque .om-highlight. */
.om-image-wrap{ margin-bottom:4px; }
.om-image-wrap img{
  float:left;
  width:260px;
  height:260px;
  object-fit:cover;
  display:block;
  border-radius:4px;
  margin:4px 22px 14px 0;
}
.om-clear{ clear:both; }
/* Mobile: la imagen cuadrada de .om-image-wrap (260px) flotando en un
   viewport angosto deja muy poco lugar al lado para el texto — apenas
   entra una palabra corta por línea antes de que el párrafo siga abajo.
   Se saca el float en <768px y la imagen pasa a ir arriba, centrada, con
   el párrafo debajo a ancho completo — mismo criterio ya usado en
   .hero-image para el mismo breakpoint. */
@media (max-width: 768px) {
  .om-image-wrap img{
    float: none;
    width: 220px;
    height: 220px;
    margin: 0 auto 18px;
    display: block;
  }
}



/* Bloques destacados (mirada de la Biodesprogramación / conclusión).
   clear:both para que siempre arranquen a ancho completo, nunca al lado
   de la imagen flotante de más arriba. */
.om-highlight{
  clear:both;
  margin:32px 0;
  border-radius:2px 12px 12px 2px;
  padding:26px 28px;
  font-size:19px;
  line-height:1.8;
}
.om-highlight p{ margin:0 0 14px; }
.om-highlight p:last-child{ margin-bottom:0; }
.om-highlight--bio{
  background:#F7F3EA;
  border-left:4px solid #1FA971;
  color:#1C2373;
}
.om-highlight--conclusion{
  background:#F7F3EA;
  border-left:4px solid #A6874F;
  color:#1C2373;
}

/* Video de YouTube incrustado dentro del cuerpo de un artículo (ej. Depresión).
   Mismo tamaño y estilo que el video ya usado en la página "Origen de la
   Biodesprogramación" (ancho máx. 560px, centrado, proporción 16:9 responsive,
   esquinas redondeadas y sombra suave), para que ambos se vean iguales. */
.om-video-box{ max-width:560px; margin:32px auto; clear:both; }
.om-video-box .om-video-ratio{
  position:relative;
  padding-bottom:56.25%;
  height:0;
  overflow:hidden;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(28,35,115,0.14);
}
.om-video-box .om-video-ratio iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* "RELACIONADO: ..." */
.om-relacionado{ font-size:16px; color:#5C5546; margin:28px 0 0; }
.om-relacionado a{ font-weight:600; }

/* "VARIANTES:" — título más grande para que se distinga del cuerpo, y
   viñetas propias en cada variante para diferenciarlas entre sí */
.om-variantes-label{
  font-size:17px;
  font-weight:700;
  letter-spacing:.04em;
  color:#1FA971;
  text-transform:uppercase;
  margin:30px 0 14px;
}

/* Cuando el propio label (ej. "HERIDA DE RECHAZO:" en el artículo "Las 5
   heridas de la infancia") es también un link a otro artículo — sin esto,
   la regla del tema ".entry-content a" le gana en especificidad y el
   label pasa a verse como un link celeste común en vez del bold verde de
   siempre. El subrayado sólo aparece en hover, como única señal de que
   es clickeable. */
.om-variantes-label a,
.om-variantes-label a:link,
.om-variantes-label a:visited,
.om-variantes-label a:active{
  color:inherit;
  text-decoration:none;
}
.om-variantes-label a:hover{
  text-decoration:underline;
}
.om-variantes-list{ clear:both; margin:0; padding:0; list-style:none; }
.om-variantes-list li{
  font-style:italic;
  margin-bottom:12px;
  padding-left:22px;
  position:relative;
}
.om-variantes-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1FA971;
}

/* Subtítulos DENTRO de "VARIANTES" (ej. "GRAN MAL:", "PEQUEÑO MAL:",
   "EPILEPSIA MIOCLÓNICA:" en Epilepsia) — el propio autor los usa para
   agrupar ciertas variantes en sub-categorías. En el HTML original de
   WordPress venían pegados, por error de formato, al final del ítem
   ANTERIOR mediante un <br> (ej. "...no podemos combatir.<br>GRAN MAL:"),
   cuando en realidad son el título del grupo de variantes que sigue. Se
   separan como su propio párrafo antes de ese grupo — no se tocó una sola
   palabra del texto, solo se reubicó. */
.om-variantes-sublabel{
  clear:both;
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.03em;
  color:#1C2373;
  margin:22px 0 10px;
}

/* Lista genérica dentro del cuerpo del artículo (por ejemplo una
   enumeración de síntomas o de funciones) — no toda lista es "VARIANTES"
   (eso es específicamente para lecturas de otros autores, por eso va en
   cursiva); para una lista común se usa esta, mismo puntito verde pero
   sin cursiva. */
.om-list{ clear:both; margin:18px 0 22px; padding:0; list-style:none; }
.om-list li{
  margin-bottom:10px;
  padding-left:22px;
  position:relative;
}
.om-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.65em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#1FA971;
}

/* Lista numerada a mano por el propio autor dentro del texto (ej. "1 –,
   2 –, 3 –" como en la fase del "gran mal" de Epilepsia) — mismo espaciado
   que .om-list pero SIN el puntito verde, porque el número ya viene escrito
   como parte del texto original y agregar la viñeta quedaría redundante. */
.om-list--plain{ clear:both; margin:18px 0 22px; padding:0; list-style:none; }
.om-list--plain li{ margin-bottom:10px; }
.om-list--plain-number{ color:#1FA971; font-weight:700; }

/* "IMPORTANTE: ..." — discreto */
.om-important{ font-size:14.5px; color:#8C8272; margin-top:26px; line-height:1.7; }

/* CTA final con botón — dos columnas (por orden, no por tabla): el texto
   a la izquierda y el botón a la derecha, en la misma línea. Esto es lo
   que más baja el alto de la caja, porque texto y botón ya no se apilan
   uno arriba del otro. En pantallas angostas (celular) se apilan solos,
   texto arriba centrado y botón abajo, para que no queden aplastados. */
.om-cta{
  margin-top:34px;
  background:#1C2373;
  border-radius:16px;
  padding:20px 28px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
}
.om-cta p{ font-size:17px; line-height:1.5; color:#F7F3EA; margin:0; text-align:center; }
.om-cta .btn-agendar-sesion{ justify-self:end; }
@media (max-width:560px){
  .om-cta{
    grid-template-columns:1fr;
    justify-items:center;
  }
  .om-cta .btn-agendar-sesion{ justify-self:center; }
}

/* El botón "CONTACTO" ya NO usa un estilo propio: reutiliza .btn-agendar-sesion,
   la misma clase que ya tenés en "Agendar sesión"/"Solicitar turno", para que
   todos los botones del sitio se vean exactamente igual. Si por algo esa clase
   no está disponible como global (solo la tenías en la página de sesiones),
   descomentá el bloque de más abajo como respaldo.
   Se agrega acá el color del ícono SVG (no es parte de esa clase) y se
   fuerza que el ícono y el texto queden en la misma línea, centrados: el
   ícono se estaba cayendo a una línea aparte arriba del texto. */
.om-cta .btn-agendar-sesion{
  display:inline-flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  line-height:1 !important;
  flex-shrink:0;
}
.om-cta .btn-agendar-sesion svg{
  display:inline-block !important;
  flex-shrink:0;
  vertical-align:middle;
}
.om-cta .btn-agendar-sesion svg path{ fill:#F7F3EA !important; }

/* Mismo bug de especificidad que ya resolvimos en .om-badge: la regla propia
   del tema ".entry-content a" / ".entry-content a:hover" le gana a una clase
   sola y puede volver a pisar el color de fondo/texto del botón al pasar el
   mouse o si el link ya fue visitado. Se fuerza acá, con prefijo
   ".entry-content" y los 4 estados, que el botón sea SIEMPRE verde con texto
   claro, sin importar el estado. */
.entry-content .om-cta .btn-agendar-sesion,
.entry-content .om-cta .btn-agendar-sesion:link,
.entry-content .om-cta .btn-agendar-sesion:visited,
.entry-content .om-cta .btn-agendar-sesion:hover,
.entry-content .om-cta .btn-agendar-sesion:active{
  background:#1FA971 !important;
  color:#F7F3EA !important;
  text-decoration:none !important;
}

/* Categoría y tags que el tema ya muestra automáticamente al pie del
   artículo (entry-footer) — se les da apariencia de chips sin duplicar
   contenido nuevo */
.entry-footer .cat-links a,
.entry-footer .tags-links a{
  display:inline-block;
  font-size:12px;
  color:#A6874F;
  background:#F3ECDC;
  border-radius:999px;
  padding:4px 11px;
  text-decoration:none;
  margin:2px 4px 2px 0;
}

/* Saca la aclaración "Los campos obligatorios están marcados con *" del
   formulario de comentarios: como es un solo campo ("Comentario"), esa
   referencia sobra. WordPress la separa en su propio <span> SOLO para un
   visitante sin sesión iniciada (que es como la va a ver el 99% de la
   gente que comenta) — por eso esto alcanza con CSS. A vos, cuando lo
   revisás con tu sesión de WordPress iniciada, el tema te muestra otra
   versión distinta ("Conectado como... Editá tu perfil. ¿Salir?") que
   trae esa misma frase pegada al final SIN un <span> propio, así que no
   se puede sacar solo con CSS — si te molesta también ahí (solo te pasa
   a vos, no a tus lectores), avisame y te paso un snippet chico de
   WPCode para sacarla también de esa versión. Afecta a todas las
   entradas del blog. */
.comment-notes .required-field-message{
  display:none !important;
}
/* El "*" también aparece pegado a la palabra "Comentario" del campo — se
   saca en todos lados con esta regla más general (esto sí cubre tanto la
   vista con sesión iniciada como sin iniciar, porque el campo "Comentario"
   usa el mismo <span class="required"> en los dos casos). */
.comment-form .required{
  display:none !important;
}

/* La frase "Los campos obligatorios están marcados con *" que ves VOS con
   tu sesión de WordPress iniciada (la que sigue "Conectado como... ¿Salir?")
   no se puede sacar con CSS porque el tema no la envuelve en su propio
   <span> ahí — necesita el snippet PHP que te mando aparte
   (4-snippet-WPCode-ocultar-requeridos.php). Sin ese snippet, solo el "*"
   desaparece (por la regla de arriba) pero el texto sigue. */

/* Fecha de publicación: sacamos "Posted on [fecha]" y dejamos solo
   "Posted by [autor]". El tema envuelve la fecha en su propio
   <span class="posted-on"> (separado del autor), así que se puede ocultar
   entera con CSS; la palabra "Posted" que falta se repone con ::before en
   el span del autor, sin tocar ninguna plantilla del tema. Afecta a todas
   las entradas del blog (listado y vista individual) — avisame si en
   realidad la querés sacar solo de la vista individual del artículo. */
.entry-meta .posted-on{
  display:none;
}
.entry-meta .byline::before{
  content:"Posted";
}

/* Saca la barra "‹ Anterior / Siguiente ›" que el tema agrega solo, debajo
   de cada artículo. Esto es chrome del tema (no del contenido del post),
   por eso no se puede sacar pegando HTML en el artículo — necesita esta
   regla global. Afecta a todas las entradas del blog. */
.post-navigation,
nav.navigation.post-navigation{
  display:none !important;
}

/* "Deja tu comentario" queda pegado a la caja de CTA — es el formulario de
   comentarios que agrega el tema solo, después del contenido del post, por
   eso el espacio se agrega acá y no en el HTML del artículo. Afecta a
   todas las entradas del blog. */
#comments.comments-area,
#respond.comment-respond{
  margin-top:40px;
}

/* =========================================================================
   ARTÍCULOS TIPO "GUÍA" con secciones numeradas + audio (ej. "Bajar de
   peso con Biodesprogramación"), la única categoría de Conceptos que trae
   pistas de audio y un índice con links ancla dentro del mismo artículo. */

/* Título de cada sección numerada ("1 – INTRODUCCIÓN", "2 – CREENCIAS",
   etc.). Lleva su propio id para que el índice pueda saltar a él. */
.om-section-title{
  font-size:20px;
  font-weight:800;
  letter-spacing:.02em;
  color:#1C2373;
  text-transform:uppercase;
  margin:48px 0 16px;
  padding-top:24px;
  border-top:2px solid #E4DDC9;
}
/* La primera sección va pegada al título/índice, sin el separador de arriba. */
.om-body > .om-section-title:first-of-type{
  margin-top:28px;
  padding-top:0;
  border-top:none;
}

/* Fila de audio: ícono de Spotify (link externo al episodio) + reproductor
   nativo <audio> con el archivo mp3 subido al propio sitio. */
.om-audio-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 22px;
}
.om-audio-row .om-spotify-icon{
  flex-shrink:0;
  display:inline-flex;
}
.om-audio-row .om-spotify-icon svg path{ fill:#1FA971; }
.om-audio-row audio{
  flex:1;
  min-width:0;
  height:40px;
}

/* NOTA: para el video de YouTube de "Bajar de peso" se usa la clase
   .om-video-box / .om-video-ratio ya existente más arriba (la misma de
   "Depresión" / "Origen de la Biodesprogramación"), no una clase nueva —
   así todos los videos incrustados del sitio quedan del mismo tamaño. */

/* Tabla comparativa (ej. "Afirmación cuántica": ejemplos en dos columnas,
   "CUÁNTICA" / "NO CUÁNTICA"). clear:both para que siempre arranque a
   ancho completo, nunca al lado de una imagen flotante; el wrapper con
   overflow-x:auto evita que rompa el layout en pantallas angostas si el
   contenido de alguna celda es largo. */
.om-table-wrap{ clear:both; margin:28px 0; overflow-x:auto; }
.om-table{
  width:100%;
  border-collapse:collapse;
  font-size:16px;
}
.om-table th{
  background:#1C2373;
  color:#F7F3EA;
  font-family:'Cormorant Garamond',serif;
  font-size:17px;
  font-weight:600;
  letter-spacing:.03em;
  padding:12px 16px;
  text-align:center;
}
.om-table td{
  padding:12px 16px;
  text-align:center;
  border-bottom:1px solid #E4DDC9;
}
.om-table tbody tr:nth-child(even) td{ background:#F7F3EA; }

/* Imagen de contenido incrustada en el cuerpo del artículo, con
   epígrafe/caption (ej. el genosociograma de "El árbol genealógico") —
   distinta de la imagen chica cuadrada de .om-image-wrap: esta va a ancho
   completo y centrada, respetando su propia proporción original, con el
   texto del epígrafe en chico y gris debajo. clear:both para que nunca
   quede al lado de la imagen flotante de arriba. */
.om-figure{ clear:both; margin:32px 0; text-align:center; }
.om-figure img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(28,35,115,0.10);
}
.om-figure figcaption{
  font-size:14px;
  color:#8C8272;
  margin-top:10px;
  line-height:1.6;
  font-style:italic;
}

/* Galería de varias imágenes en fila con un epígrafe compartido debajo
   (ej. las 3 fotos de "seres" con diseño natural en el artículo "Amor") —
   distinta de .om-figure (una sola imagen) y de .om-image-wrap (imagen
   chica flotante). clear:both para que nunca quede al lado de la imagen
   flotante de arriba; en mobile las imágenes se apilan solas por el
   flex-wrap. Las imágenes se muestran completas, sin recortar — cada una
   escala según su propia proporción original (mismo criterio que
   .om-figure), no se fuerza un alto ni un object-fit:cover. */
.om-gallery{ clear:both; margin:32px 0; }
.om-gallery-images{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.om-gallery-images img{
  flex:1 1 30%;
  min-width:140px;
  width:100%;
  height:auto;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(28,35,115,0.10);
}
.om-gallery-caption{
  font-size:14px;
  color:#8C8272;
  margin-top:10px;
  line-height:1.6;
  font-style:italic;
  text-align:center;
}