/* ==========================================================================
   Relaciones Abiertas — Rediseño
   Este archivo se carga DESPUÉS de custom/styles.css y solo lo complementa.
   No depende de cambios en el HTML: todo apunta a clases/IDs que ya existen.
   ========================================================================== */

:root{
	/* Paleta — basada en la marca existente (#8b2b8b) */
	--color-primary: #8b2b8b;
	--color-primary-dark: #5c1c60;
	--color-primary-light: #b0479f;
	--color-primary-tint: #f7eef8;
	--color-secondary: #b013dd;

	--color-ink: #2a2230;
	--color-body: #4a414f;
	--color-muted: #8a8291;
	--color-border: #e8e1ec;
	--color-bg: #faf8fb;
	--color-bg-alt: #f2eaf5;
	--color-white: #ffffff;

	/* Tipografía */
	--font-display: 'Bebas Neue', sans-serif;
	--font-bold: 'GothamBold', 'gothamblackregular', sans-serif;
	--font-body: 'gothambookregular', 'Helvetica Neue', Arial, sans-serif;

	/* Espaciado */
	--space-1: .5rem;
	--space-2: 1rem;
	--space-3: 1.75rem;
	--space-4: 3rem;
	--space-5: 5rem;

	/* Forma */
	--radius-sm: 10px;
	--radius-md: 18px;
	--radius-lg: 28px;
	--radius-pill: 999px;

	/* Sombra */
	--shadow-sm: 0 2px 10px rgba(42,15,45,.08);
	--shadow-md: 0 12px 30px rgba(42,15,45,.14);
	--shadow-lg: 0 24px 60px rgba(42,15,45,.18);
}

/* ==========================================================================
   Base
   ========================================================================== */

*{ box-sizing: border-box; }

html{
	scroll-behavior: smooth;
	/* Evita que Android/iOS agranden el texto por su cuenta en columnas
	   angostas — sin esto, el tamaño real en el celular puede no coincidir
	   con lo que se ve en el modo "mobile" del devtools de escritorio. */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body{
	background-color: var(--color-bg);
	color: var(--color-body);
	font-family: var(--font-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

::selection{
	background: var(--color-primary);
	color: var(--color-white);
}

a{ transition: color .2s ease, opacity .2s ease, background-color .2s ease, transform .2s ease; }

.container{
	max-width: 1180px;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

/* Páginas de artículo "sueltas" (header.inside las distingue del home, que
   usa header sin esa clase): el .container general queda muy ancho para
   una sola columna de texto — acuerdos-en-las-relaciones-abiertas-...,
   4-preguntas-frecuentes-..., etc. Lo bajamos a la misma medida que ya usa
   .texto-sin-galeria/h1.titulo-central, para que TODO el bloque (breadcrumbs,
   título, imagen, texto) quede en una columna de lectura consistente. */
header.inside + .articulo > .container{
	max-width: 768px;
}

img{ max-width: 100%; }

/* ==========================================================================
   Header
   ========================================================================== */

#header{
	background-color: var(--color-white);
	box-shadow: var(--shadow-sm);
}

#header .top{
	background-color: var(--color-primary-dark);
}

#header .top .redes .icon,
#header .top .optIcons .icon{
	opacity: .9;
}
#header .top .redes .icon:hover,
#header .top .optIcons .icon:hover{
	opacity: 1;
	transform: translateY(-1px);
}

#header .top p{
	color: rgba(255,255,255,.85);
	font-family: var(--font-body);
	font-size: .85rem;
	letter-spacing: .02em;
}

/* No tocamos font-size/letter-spacing/display acá: header .options a ya
   trae eso resuelto en custom/styles.css (línea ~3004) para que el menú
   entre en una sola línea con las etiquetas largas ("Nuestro libro: la
   revolución sexoafectiva", etc.) — duplicarlo con otros valores rompía el
   ajuste y hacía que los ítems se superpongan en vez de acomodarse. Sólo
   sumamos color/hover, que no cambian el ancho de cada ítem. */
header .options a, header .options p{
	color: var(--color-ink);
	position: relative;
}

header .options a:hover, header .options p:hover{
	color: var(--color-primary);
}

header .options > li > a::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--color-primary);
	transition: width .25s ease;
}
header .options > li > a:hover::after{
	width: 100%;
}

header .iniciarSesion{
	border: 1px solid rgba(255,255,255,.6);
	border-radius: var(--radius-pill);
	padding: 4px 14px !important;
	font-size: .8rem !important;
}
header .iniciarSesion:hover{
	background: rgba(255,255,255,.12);
}

/* ==========================================================================
   Destacados / productos
   ========================================================================== */

#destacados{
	padding: var(--space-5) 0 var(--space-4);
}

#destacados h2{
	font-family: var(--font-display);
	font-size: clamp(1.9rem, 3.4vw, 2.8rem);
	color: var(--color-ink);
	text-align: center;
	max-width: 760px;
	margin: 0 auto var(--space-4);
	line-height: 1.15;
}

.listadoProductos{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: var(--space-3);
}

.listadoProductos a.producto{
	/* styles.min.css (remoto) le pone width:25% + float a este mismo selector;
	   lo neutralizamos para que funcione como celda de grid */
	width: 100% !important;
	float: none !important;
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}

.listadoProductos a.producto:hover{
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.listadoProductos .imagen.cuadrada{
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--color-bg-alt);
}

.listadoProductos .imagen.cuadrada img.centrar{
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.listadoProductos a .texto{
	padding: var(--space-2) var(--space-2) var(--space-3);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.listadoProductos a .nombreProducto{
	font-family: var(--font-bold);
	color: var(--color-ink);
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: var(--space-1);
	flex-grow: 1;
}

.listadoProductos a .precioProducto{
	color: var(--color-primary);
	font-family: var(--font-display);
	font-size: 1.3rem;
	letter-spacing: .02em;
	margin-bottom: var(--space-2);
}

.listadoProductos a .btn-call{
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-white) !important;
	font-family: var(--font-bold);
	font-size: .85rem;
	text-align: center;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	align-self: center;
}

.listadoProductos a.producto:hover .btn-call{
	background: var(--color-primary-dark);
}

/* ==========================================================================
   Artículos sin imagen (páginas de texto solo, como quienes-somos,
   cecilia-figlioli, juan-pablo-dorto, etc.)

   Bug del sitio: cuando .galeria/.imagenEpigrafe quedan vacíos, el JS del
   sitio le suma .texto-sin-galeria a .texto y .titulo-central al h1/h2 —
   pero custom/styles.css tiene DOS reglas con el mismo selector para el
   título: una la deja en 100% de ancho, y otra, adentro de un
   @media (min-width:1200px) más abajo en el archivo, la vuelve a pisar a
   60%. .texto en cambio siempre corre al 60%, sin condición. Resultado:
   en desktop el título y el cuerpo del texto quedan angostos con un hueco
   vacío al costado. Como esto carga después que todo lo anterior, con la
   misma especificidad alcanza para ganarles a las dos variantes.
   ========================================================================== */

.articulo .texto.texto-sin-galeria{
	width: 768px;
	max-width: 100%;
}

.articulo h1.titulo-central,
.articulo h2.titulo-central{
	width: 768px;
	max-width: 100%;
}

/* ==========================================================================
   Bloques de artículo (contenido largo en home)
   ========================================================================== */

section.articulo.enHome{
	/* styles.min.css (remoto) trae float:left en .articulo, y como nada
	   lo clarea, colapsa el alto y arrastra a .clientes/.contacto para arriba.
	   Sacamos el float en vez de clearearlo: acá no aporta nada, todo es
	   una sola columna apilada. */
	float: none !important;
	width: 100% !important;
	display: block;
	padding: var(--space-5) 0;
	margin-bottom: 0 !important;
}

section.articulo.enHome .container{
	max-width: 900px;
}

.articulo.enHome.la-revolucion-sexoafectiva{
	background: transparent;
}

/* Diferenciar "Quiénes somos" del resto de bloques del home */
.articulo.enHome.quienes-somos-home{
	background: var(--color-primary-tint);
}

/* Página completa "Quiénes somos y cómo trabajamos" — mismo tratamiento
   tonal que el teaser del home, para que se sienta continuidad al llegar
   desde el link "Conocé nuestra historia completa". No lleva la clase
   .enHome (el html de esta página no se puede tocar fuera de .texto, así
   que todo lo de acá abajo apunta a .articulo.quienes-somos a secas y a
   contenido anidado DENTRO de .texto — nada de secciones nuevas). */
.articulo.quienes-somos{
	background: var(--color-primary-tint);
}

/* Texto de la bio: un poco más chico que el default del sitio porque acá
   es un texto largo que se lee de corrido. strong/a/a:hover ya quedan
   cubiertos por la regla general .articulo .texto (ver más abajo), esta
   es la única excepción real para esta página. */
.articulo.quienes-somos .texto p{
	font-size: 1rem;
	line-height: 1.7;
}

.articulo.quienes-somos .texto::after{
	content: "";
	display: table;
	clear: both;
}

/* Foto de Cecilia y Juan Pablo: el editor del administrador no admite
   clases ni estilo inline adentro de "texto", sólo tags básicos (p, h2,
   ul/ol, blockquote, strong, a, img). Es el único <img> suelto de la bio,
   así que apuntamos directo al tag. */
.articulo.quienes-somos .texto img{
	float: left;
	width: 280px;
	height: 280px;
	object-fit: cover;
	border-radius: var(--radius-md);
	margin: 4px 28px 20px 0;
	box-shadow: var(--shadow-md);
}

@media (max-width: 600px){
	.articulo.quienes-somos .texto img{
		float: none;
		width: 100%;
		max-width: 280px;
		height: auto;
		aspect-ratio: 1 / 1;
		margin: 0 auto 20px;
		display: block;
	}
}

/* Los títulos "¿Qué necesitás hoy?" y "Lo que dicen..." arrancan siempre en
   línea nueva (sin quedar apretados contra la foto flotante) y llevan la
   misma tipografía Bebas Neue que el resto de los h2 del rediseño
   (#destacados, contacto, newsletter). El "¿Qué necesitás hoy?" además
   trae un <span style="color:#8e44ad"> propio del contenido original que
   pisa el color acá abajo — queda bien, es casi el mismo violeta. */
.articulo.quienes-somos .texto h2{
	clear: both;
	font-family: var(--font-display);
	color: var(--color-primary);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	margin: var(--space-4) 0 var(--space-3);
}

/* Link "Conocé nuestra historia completa": flecha generada por CSS,
   sin necesitar íconos ni tocar el texto enriquecido. */
section.articulo.enHome.quienes-somos-home .texto a{
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

section.articulo.enHome.quienes-somos-home .texto a::after{
	content: "→";
	display: inline-block;
	transition: transform .2s ease;
}

section.articulo.enHome.quienes-somos-home .texto a:hover::after{
	transform: translateX(4px);
}

/* h1 unificado para toda .articulo (home, quienes-somos y el resto de las
   páginas de artículo): pisa el 'gothamblackregular' de la línea 58 con la
   tipografía Bebas Neue del rediseño. Antes esto estaba duplicado en
   section.articulo.enHome h1 y .articulo.quienes-somos h1 por separado. */
.articulo h1{
	font-family: var(--font-display);
	color: var(--color-primary);
	font-size: clamp(1.8rem, 3vw, 2.5rem);
	line-height: 1.15;
	margin-bottom: var(--space-3);
}

.articulo .imagenEpigrafe{
	margin-bottom: var(--space-3);
}

.articulo .imagenEpigrafe img{
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

/* Tipografía de cuerpo unificada para toda .articulo .texto: antes esto
   vivía duplicado (con pequeñas diferencias) en section.articulo.enHome
   (teasers del home) y en .articulo.quienes-somos (página completa). Ahora
   es una sola regla general, así los artículos "sueltos" (4 preguntas
   frecuentes, acuerdos, cecilia-figlioli, etc.) también la heredan en vez
   de quedarse con el estilo legacy sin tocar. */
.articulo .texto p,
.articulo .texto li{
	color: var(--color-body) !important;
	font-size: 1rem;
	line-height: 1.75;
}

.articulo .texto p span[style]{
	color: inherit !important;
}

.articulo .texto strong{
	color: var(--color-ink);
	font-family: var(--font-bold);
}

.articulo .texto blockquote{
	margin: var(--space-3) 0;
	padding: var(--space-2) var(--space-3);
	border-left: 4px solid var(--color-primary);
	background: var(--color-primary-tint);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
}

.articulo .texto blockquote p{
	margin: 0;
}

.articulo .texto a{
	color: var(--color-primary);
	font-weight: bold;
	text-underline-offset: 3px;
}
.articulo .texto a:hover{
	color: var(--color-primary-dark);
}

/* Botones "Agendá tu acompañamiento" / "Más sobre nuestro acompañamiento",
   solo en el bloque "¿Querés explorar las no-monogamias...?" */
.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type,
.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type strong,
.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type em{
	color: #ffffff;
}

.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type:hover{
	background: var(--color-primary-dark);
}

.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type + a,
.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type + a strong{
	color: var(--color-muted);
}

/* Hover clásico del outline: se invierte a relleno sólido + texto blanco */
.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type + a:hover,
.articulo.queres-explorar-las-no-monogamias-y-no-sabes-como-hacerlo .texto a:first-of-type + a:hover strong{
	background: var(--color-primary);
	color: #ffffff;
}

/* Lista de "comprar en librería" del bloque del libro */
section.articulo.enHome .texto ul{
	list-style: none;
	margin: var(--space-3) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

section.articulo.enHome .texto ul li{
	flex: 1 1 calc(50% - var(--space-2));
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-2);
	text-align: center;
	box-shadow: var(--shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease;
}
.la-revolucion-sexoafectiva .texto ul li br{
	display: none;
}

section.articulo.enHome .texto ul li:hover{
	transform: translateY(-3px);
	box-shadow: var(--shadow-md);
}

section.articulo.enHome .texto ul li img{
	width: 120px !important;
	height: 64px !important;
	object-fit: contain;
	margin: 0 auto var(--space-1);
	display: block;
}

section.articulo.enHome .texto ul li a{
	display: block;
}

section.articulo.enHome .texto ul li strong{
	font-size: .82rem;
	line-height: 1.3;
	display: block;
	color: var(--color-ink);
}

/* Franja de números (Comunidad, Acompañamientos, etc.) dentro del bloque
   "Quiénes somos" del home. Prefijado con section.articulo.enHome para tener
   más especificidad que la regla genérica de .texto ul (la de las tarjetas
   de compra del libro) y así poder resetear su estilo de tarjeta. */
section.articulo.enHome.quienes-somos-home .texto ul{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: var(--space-4) 0 0;
	padding: var(--space-3) 0 0;
	border-top: 1px solid var(--color-border);
	gap: 0;
}

section.articulo.enHome.quienes-somos-home .texto ul li{
	flex: 1 1 50%;
	text-align: center;
	padding: 0 var(--space-3);
	margin-bottom: var(--space-3);
	background: transparent;
	border: none;
	border-right: 1px solid var(--color-border);
	border-radius: 0;
	box-shadow: none;
	line-height: 1.25;
}

section.articulo.enHome.quienes-somos-home .texto ul li:hover{
	transform: none;
	box-shadow: none;
}

section.articulo.enHome.quienes-somos-home .texto ul li:nth-child(even){
	border-right: none;
}

section.articulo.enHome.quienes-somos-home .texto ul li br{
	display: none;
}

section.articulo.enHome.quienes-somos-home .texto ul li strong{
	display: block;
	font-family: var(--font-display);
	font-size: 2.2rem;
	line-height: 1.1;
	color: var(--color-primary);
	margin-bottom: 4px;
}

@media (max-width: 767px){
	section.articulo.enHome.quienes-somos-home .texto ul li{
		flex: 1 1 45%;
		border-right: none;
		border-bottom: 1px solid var(--color-border);
		padding: var(--space-2) var(--space-1);
	}
	section.articulo.enHome.quienes-somos-home .texto ul li:nth-last-child(-n+2){
		border-bottom: none;
	}
}

/* Ocultar bloques de "articulos dependientes" cuando están vacíos (sin tocar el HTML) */
section#articulos.articulos.dependientes:has(.listado:empty),
section#articulos.articulos.dependientes:has(.listado > span:only-child){
	display: none;
}

/* ==========================================================================
   "¿Qué necesitás hoy?" — el editor del administrador no admite clases
   adentro de "texto" (sólo tags básicos: p, h2, ul/ol, blockquote, strong,
   a, img con style inline). Así que las 3 rutas van como un <ul> normal
   —el único <ul> de nivel superior en esta bio— y lo convertimos en
   tarjetas por CSS apuntando al tag, sin necesitar clases.
   ========================================================================== */

.articulo.quienes-somos .texto > ul{
	list-style: none;
	margin: var(--space-3) 0 var(--space-4);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	clear: both;
}

.articulo.quienes-somos .texto > ul > li{
	background: var(--color-white);
	border-radius: var(--radius-md);
	padding: var(--space-3);
	font-size: .9rem;
	line-height: 1.55;
	color: var(--color-body);
	/* .texto-sin-galeria trae text-align:justify heredado de custom/styles.css
	   (pensado para párrafos largos); en tarjetas cortas de 2-3 líneas genera
	   ríos de espacio feos, así que lo pisamos acá. */
	text-align: left;
	/* Grid estira las 3 tarjetas a la misma altura (align-items:stretch por
	   defecto). flex-column + margin-top:auto en el primer link (ver abajo)
	   empuja el/los link(s) al borde inferior sin importar cuántos haya. */
	display: flex;
	flex-direction: column;
}

.articulo.quienes-somos .texto > ul > li strong{
	display: block;
	/* GothamBold no trae glyphs de emoji: sin esta lista el navegador cae en
	   una fuente de sistema sin color (emoji en gris pálido). Con las fuentes
	   de emoji explícitas antes del genérico, el emoji se renderiza a color. */
	font-family: 'GothamBold', 'gothamblackregular', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;
	color: var(--color-ink);
	font-size: 1rem;
	margin-bottom: 6px;
}

.articulo.quienes-somos .texto > ul > li a{
	display: block;
	margin-top: 8px;
	color: var(--color-primary);
	font-weight: bold;
}
/* Empuja el primer link (y el/los que le siguen) al borde inferior de la
   tarjeta, sin importar si hay uno o dos links ni cuántas líneas tenga la
   descripción de cada tarjeta. */
.articulo.quienes-somos .texto > ul > li a:first-of-type{
	margin-top: auto;
}
.articulo.quienes-somos .texto > ul > li a:hover{
	color: var(--color-primary-dark);
}

/* ==========================================================================
   Testimonios — mismo criterio: los 5 van como <blockquote> sueltos (el
   único tag de cita que ofrece el editor). Estilo base acá abajo, para que
   se vean bien apiladas incluso si el JS no llega a correr. El script en
   footer_scripts los agrupa en un carrusel tiny-slider y ahí sí puede usar
   clases, porque las pone el JS en el DOM, no el editor de administrador.
   ========================================================================== */

.articulo.quienes-somos .texto blockquote{
	clear: both;
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	background: var(--color-primary-tint);
	border-left: 4px solid var(--color-primary);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
	color: var(--color-body);
	font-size: 1rem;
	line-height: 1.6;
}

.articulo.quienes-somos .texto blockquote strong{
	display: block;
	margin-top: var(--space-2);
	font-style: normal;
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--color-primary);
}

/* --- A partir de acá, sólo aplica si el JS de footer_scripts corrió y
   armó el carrusel (agrega .opiniones > .testimonials > .testimonials-track
   > .testimonio). Carrusel propio, liviano, sin depender de tiny-slider:
   la librería global del sitio (tns()) queda en un estado inconsistente en
   esta página porque el script del propio sitio ya intenta inicializarla
   contra ".testimonials" antes de que exista (ver más abajo, no se puede
   tocar ese script), y las llamadas siguientes terminan sin aplicar los
   anchos internos que necesita el carrusel. Por eso el track se mueve acá
   con un simple transform + transición. */

.articulo.quienes-somos .texto .opiniones{
	background: var(--color-white);
	padding: var(--space-4) var(--space-3);
	margin: var(--space-4) 0;
	border-radius: var(--radius-lg);
	clear: both;
}

.articulo.quienes-somos .texto .opiniones > h2{
	font-family: var(--font-display);
	color: var(--color-ink);
	text-align: center;
	font-size: clamp(1.25rem, 2vw, 1.6rem);
	max-width: 700px;
	margin: 0 auto var(--space-3);
}

.articulo.quienes-somos .texto .opiniones .testimonials{
	max-width: 700px;
	margin: 0 auto;
	overflow: hidden;
	position: relative;
	cursor: grab;
	touch-action: pan-y;
	user-select: none;
}

.articulo.quienes-somos .texto .opiniones .testimonials.dragging{
	cursor: grabbing;
}

.articulo.quienes-somos .texto .opiniones .testimonials-track{
	display: flex;
	transition: transform .4s ease;
}

.articulo.quienes-somos .texto .opiniones .testimonio{
	flex: 0 0 100%;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 0 var(--space-2);
}

/* Dentro del carrusel la cita queda centrada y sin la tarjetita con borde
   (eso era el tratamiento "apilado" de respaldo sin JS) */
.articulo.quienes-somos .texto .opiniones blockquote{
	background: none;
	border-left: none;
	padding: 0;
	margin: 0;
	font-size: 1rem;
}

.articulo.quienes-somos .texto .opiniones blockquote strong{
	display: inline-block;
	margin-top: var(--space-2);
	background: var(--color-primary-tint);
	padding: 6px 16px;
	border-radius: var(--radius-pill);
}

/* Dots de navegación (generados por el carrusel propio) */
.articulo.quienes-somos .texto .opiniones .testimonials-dots{
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: var(--space-3);
}

.articulo.quienes-somos .texto .opiniones .testimonials-dots button{
	width: 9px;
	height: 9px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: var(--color-border);
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}

.articulo.quienes-somos .texto .opiniones .testimonials-dots button.active{
	background: var(--color-primary);
	transform: scale(1.2);
}

/* ==========================================================================
   Perfiles del equipo (sección #articulos al pie de quienes-somos.html)

   #articulos.articulos es un componente compartido por varias páginas del
   sitio (home, listado de blog, etc.) con su propio tamaño pensado para
   tarjetas de artículos largos: foto cuadrada casi a ancho completo de
   columna (~560px en desktop) y textos grandes. Acá son solo 3 perfiles de
   equipo a modo de cierre, y a ese tamaño se comen la página. Como no se
   puede tocar el HTML de esta sección (queda fuera de .texto) pero si se
   puede agregar CSS, la escalamos hacia abajo apuntándola con el combinador
   de hermanos (~) para que el cambio quede sólo en esta página y no
   afecte el mismo componente en el resto del sitio. */

.articulo.quienes-somos ~ #articulos.articulos{
	padding: var(--space-4) 0;
}

/* Título agregado por JS (ver footer_scripts) — mismo tratamiento que los
   demás h2 de la página. */
.articulo.quienes-somos ~ #articulos .container > h2{
	font-family: var(--font-display);
	color: var(--color-primary);
	text-align: center;
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.15;
	margin: 0 0 var(--space-3);
}

/* El section trae la clase "mb-3" de Bootstrap (margin-bottom:1rem
   !important) — no se puede sacar la clase del HTML, así que se pisa acá. */
.articulo.quienes-somos{
	margin-bottom: 0 !important;
}

.articulo.quienes-somos ~ #articulos .listado{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-3);
	/* Mismo ancho que .texto (ver regla general .texto.texto-sin-galeria)
	   para que quede alineado con el bloque de arriba. */
	width: 768px;
	max-width: 100%;
	margin: 0 auto;
	padding-bottom: 0;
}

.articulo.quienes-somos ~ #articulos .articulo_item{
	width: 100%;
	margin: 0;
	float: none;
	padding: 1rem .5rem;
}

.articulo.quienes-somos ~ #articulos .articulo_item .imagen{
	aspect-ratio: 1;
	max-width: 160px;
	margin: 0 auto;
	border-radius: var(--radius-pill);
}

.articulo.quienes-somos ~ #articulos .articulo_item .imagen img{
	border-radius: var(--radius-pill);
}

.articulo.quienes-somos ~ #articulos .articulo_item .texto{
	padding: var(--space-2) 0 0;
	text-align: center;
}

/* Un script global del sitio saca el h2 y el p.fecha de adentro de .texto y
   los pone antes de la foto (por eso el nombre queda arriba de la imagen,
   no abajo como en el HTML original). El margen entre nombre y foto va acá. */
.articulo.quienes-somos ~ #articulos .articulo_item h2{
	font-family: var(--font-bold);
	font-size: 1rem;
	text-align: center;
	min-height: 0;
	margin: 0 0 var(--space-2);
}

.articulo.quienes-somos ~ #articulos .articulo_item p.fecha{
	display: none;
}

.articulo.quienes-somos ~ #articulos .articulo_item .copete{
	font-size: .85rem;
	line-height: 1.5;
	color: var(--color-muted);
	text-align: center;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Botón "Leer más" original: fondo violeta sólido, mayúsculas, borde.
   Acá lo bajamos a texto + flecha, como los links de "¿Qué necesitás
   hoy?", para que sea más sutil en una fila de perfiles. */
.articulo.quienes-somos ~ #articulos .articulo_item .btn-call{
	display: inline-block;
	float: none;
	background: none;
	border: none;
	border-radius: 0;
	margin: var(--space-2) auto 0;
	padding: 0;
	color: var(--color-primary);
	font-family: var(--font-body);
	font-size: .85rem;
	font-weight: bold;
	text-transform: none;
	transition: color .2s ease;
}

.articulo.quienes-somos ~ #articulos .articulo_item .btn-call::after{
	content: " →";
}

.articulo.quienes-somos ~ #articulos .articulo_item:hover .btn-call{
	color: var(--color-white);
	background: none;
}

@media (max-width: 767px){
	.articulo.quienes-somos ~ #articulos .listado{
		grid-template-columns: 1fr;
		max-width: 280px;
		margin: 0 auto;
	}
}

/* ==========================================================================
   Blog / listado de artículos (articulos.html)

   #articulos.articulos .listado .articulo_item es el mismo componente que
   usan los perfiles de equipo de arriba, pero acá custom/styles.css lo arma
   a 2 columnas con tarjetas enormes (48.75% de ancho, textos y padding
   grandes) — de ahí que los links se vean "pasados de tamaño". Lo pasamos a
   4 por fila con el mismo lenguaje visual que .listadoProductos del home
   (tarjeta blanca, imagen cuadrada, textos chicos, botón pill). El selector
   de acá tiene MENOS especificidad que ".articulo.quienes-somos ~
   #articulos..." de arriba, así que no toca los perfiles de equipo de
   quienes-somos.html. */

#articulos.articulos .listado{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
	width: auto;
	padding-bottom: 0;
}

#articulos.articulos .articulo_item{
	width: 100%;
	margin: 0;
	float: none;
	background: var(--color-white);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease;
}

#articulos.articulos .articulo_item:hover{
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

/* Un script global del sitio saca el h2 y el p.fecha de adentro de .texto
   y los reubica ANTES de .imagen (mismo comportamiento ya documentado más
   arriba para los perfiles de quienes-somos) — por eso quedan afuera del
   padding de .texto y necesitan el suyo propio acá. */
#articulos.articulos .articulo_item > :first-child{
	margin-top: var(--space-2);
}

/* Altura libre con tope: si la imagen es panorámica/cuadrada, el
   contenedor se adecua a su alto natural (igual que antes). Si es muy
   vertical, el "overflow:hidden" + max-height cortan el sobrante (desde
   abajo, sin JS ni object-fit) para que no desnivele la fila. */
#articulos.articulos .articulo_item .imagen{
	position: relative;
	max-height: 260px;
	overflow: hidden;
	border-radius: 0;
}

/* Reemplaza el truco viejo de ::after + padding-bottom:100% (pensado para
   forzar el cuadrado con position:absolute) — acá no hay ratio fijo, el
   contenedor toma la altura natural de la imagen (con el tope de arriba). */
#articulos.articulos .articulo_item .imagen::after{
	content: none;
}

#articulos.articulos .articulo_item .imagen img{
	position: static;
	transform: none;
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: initial;
	border-radius: 0;
}

#articulos.articulos .articulo_item .texto{
	width: 100%;
	padding: var(--space-2) var(--space-2) var(--space-3);
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

#articulos.articulos .articulo_item h2{
	font-family: var(--font-bold);
	color: var(--color-ink);
	font-size: 1rem;
	line-height: 1.3;
	min-height: 0;
	margin-bottom: var(--space-1);
	padding: 0 var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#articulos.articulos .articulo_item p.fecha{
	font-size: .8rem;
	min-height: 0;
	margin-bottom: var(--space-1);
	padding: 0 var(--space-2);
}

#articulos.articulos .articulo_item .copete{
	font-size: .85rem;
	line-height: 1.5;
	color: var(--color-muted);
	margin-bottom: var(--space-2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

#articulos.articulos .articulo_item .btn.btn-call{
	display: inline-block;
	align-self: flex-start;
	background: var(--color-primary);
	color: var(--color-white);
	font-family: var(--font-bold);
	font-size: .85rem;
	text-align: center;
	text-transform: none;
	border: none;
	padding: 10px 18px;
	border-radius: var(--radius-pill);
	margin-top: auto;
	transition: background .2s ease;
}

#articulos.articulos .articulo_item:hover .btn.btn-call{
	background: var(--color-primary-dark);
}

@media (max-width: 991px){
	#articulos.articulos .listado{
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px){
	#articulos.articulos .listado{
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Clientes / "También nos viste en"
   ========================================================================== */

section.clientes{
	background: var(--color-bg-alt);
	padding: var(--space-5) 0;
	margin-bottom: 0 !important;
}

section.clientes h3.lineasH{
	text-align: center;
	font-family: var(--font-display);
	letter-spacing: .06em;
	color: var(--color-muted);
	text-transform: uppercase;
	font-size: 1rem;
	margin-bottom: var(--space-3);
}

section.clientes .logos{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-3) var(--space-4);
}

section.clientes .logos span{
	display: flex;
	align-items: center;
	justify-content: center;
	height: 34px;
}

section.clientes .logos img{
	max-height: 100%;
	max-width: 110px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter .25s ease, opacity .25s ease;
}

section.clientes .logos span:hover img{
	filter: grayscale(0);
	opacity: 1;
}

/* ==========================================================================
   Contacto
   ========================================================================== */

section.contacto{
	background: var(--color-white);
	padding: var(--space-5) 0;
	margin-bottom: 0 !important;
}

section.contacto .container{
	max-width: 760px;
	background: var(--color-bg-alt);
	border-radius: var(--radius-lg);
	padding: var(--space-4);
}

section.contacto h2{
	font-family: var(--font-display);
	color: var(--color-ink);
	font-size: 2rem;
	text-align: center;
	margin-bottom: var(--space-3);
}

section.contacto label{
	font-family: var(--font-bold);
	font-size: .8rem;
	color: var(--color-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 4px;
	display: inline-block;
}

section.contacto .form-control,
section.contacto textarea{
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	background: var(--color-white);
	font-family: var(--font-body);
	color: var(--color-ink);
}

section.contacto textarea{
	/* Bootstrap trae .form-floating > .form-control con más especificidad
	   (2 clases vs 1) y pisa el height con 58px propios; forzamos con !important */
	line-height: 1.5 !important;
	height: calc(1.5em * 5 + 24px) !important;
}

section.contacto .form-control:focus,
section.contacto textarea:focus{
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(139,43,139,.15);
	outline: none;
}

section.contacto #boton_enviar{
	background: var(--color-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-bold);
	letter-spacing: .02em;
	padding: 12px 28px;
}
section.contacto #boton_enviar:hover{
	background: var(--color-primary-dark);
	color: #ffffff;
}

/* ==========================================================================
   Newsletter
   ========================================================================== */

.newsletter{
	background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	padding: var(--space-4) 0;
}

.newsletter h2{
	color: var(--color-white);
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.6vw, 2.1rem);
	max-width: 640px;
	margin: 0 auto var(--space-1);
	line-height: 1.2;
}

.newsletter p{
	color: rgba(255,255,255,.85);
	margin-bottom: var(--space-3);
}

.newsletter input{
	border: none;
	border-radius: var(--radius-pill);
	padding: 12px 20px;
	min-width: 280px;
}

.newsletter button{
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-ink);
	color: var(--color-white);
	font-family: var(--font-bold);
	padding: 12px 24px;
	margin-left: var(--space-1);
}
.newsletter button:hover{
	background: #000;
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer{
	background: var(--color-ink);
	color: rgba(255,255,255,.75);
	padding: var(--space-4) 0 var(--space-2);
}

footer .redes a{
	color: var(--color-white);
	opacity: .85;
}
footer .redes a:hover{
	opacity: 1;
	color: var(--color-primary-light);
}

footer .links a, footer .links p a{
	color: rgba(255,255,255,.75);
	font-family: var(--font-body);
	font-size: .92rem;
}
footer .links a:hover, footer .links p a:hover{
	color: var(--color-white);
}

footer .footReg{
	border-top: 1px solid rgba(255,255,255,.12);
	margin-top: var(--space-3);
	padding-top: var(--space-2);
}
footer .footReg p{
	color: rgba(255,255,255,.5);
	font-size: .8rem;
}

/* ==========================================================================
   Buscador flotante y botón de WhatsApp
   ========================================================================== */

.buscando{
	background: rgba(42,34,48,.92);
}
.buscando h2{
	font-family: var(--font-display);
	color: var(--color-white);
}
.buscando input#busqueda{
	border-radius: var(--radius-pill);
	border: none;
	padding: 14px 20px;
}

a.float{
	box-shadow: var(--shadow-lg);
	transition: transform .2s ease;
}
a.float:hover{
	transform: scale(1.08);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px){
	#destacados{ padding: var(--space-4) 0 var(--space-3); }
	.listadoProductos{ grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-2); }
	section.articulo.enHome{ padding: var(--space-4) 0; }
	section.contacto .container{ padding: var(--space-3); border-radius: var(--radius-md); }
	.newsletter input{ min-width: 0; width: 100%; margin-bottom: var(--space-2); }
	.newsletter button{ margin-left: 0; width: 100%; }
	.articulo.quienes-somos .texto > ul{ grid-template-columns: 1fr; }
	.articulo.quienes-somos .texto blockquote{ font-size: .95rem; }
	.articulo.quienes-somos .texto .opiniones{ padding: var(--space-3) var(--space-2); }

	/* En el HTML, .imagenEpigrafe va DESPUÉS de .texto (por eso en mobile la
	   imagen terminaba al final, debajo de todo el cuerpo). Con flex + order
	   la reacomodamos justo debajo del h1 sin tocar el HTML. Los <span
	   class="clearfix"> ya no hacen falta con flex (no hay floats que
	   clarear) y se ocultan para que no dejen un hueco vacío en el orden. */
	header.inside + .articulo > .container{
		display: flex;
		flex-direction: column;
	}
	header.inside + .articulo > .container > .breadcrumbs{ order: 1; }
	header.inside + .articulo > .container > h1{ order: 2; }
	header.inside + .articulo > .container > .imagenEpigrafe{ order: 3; }
	header.inside + .articulo > .container > .autorShare{ order: 4; }
	header.inside + .articulo > .container > .texto{ order: 5; }
	header.inside + .articulo > .container > .galeria{ order: 6; }
	header.inside + .articulo > .container > .clearfix{ display: none; }
}

/* ==========================================================================
   Acompañamiento / Policlínica — llevarla al mismo lenguaje visual del
   rediseño (Bebas Neue + violeta de marca + tarjetas suaves) que ya tienen
   quienes-somos.html e index.html. Esta página nunca había recibido ese
   tratamiento: su H1 y el contenido de .textoCall seguían con la tipografía
   vieja (gothamblackregular) y sin la paleta de variables.

   El contenido real vive dentro de .policlinica .textoCall, cargado por el
   editor de administrador (sólo admite tags básicos: p, h2, h3, strong, em,
   a, span con color inline) — no se puede tocar el HTML, así que todo apunta
   a esos tags y a los colores inline ya existentes (#8e44ad y #000000).
   ========================================================================== */

/* Título "Acompañamiento": ya toma Bebas Neue + violeta de la regla
   genérica ".articulo h1" (más arriba en este mismo archivo). Lo único
   distinto acá es el margin-bottom: el h1 va pegado arriba de .policlinica
   (fondo con tinte), así que no necesita el aire que sí lleva antes de un
   cuerpo de texto normal. */
.articulo:has(+ .policlinica) > .container > h1{
	margin-bottom: 0;
}

.policlinica.conResponsables{
	background: var(--color-primary-tint);
	border-top: none;
}

.policlinica .caratula .container{
	max-width: 768px;
}

.policlinica.conResponsables .caratula{
	padding: var(--space-5) 0;
}

.policlinica .caratula .textoCall h2,
.policlinica .caratula .textoCall h3{
	font-family: var(--font-display);
	color: var(--color-primary);
	line-height: 1.15;
	margin: var(--space-4) 0 var(--space-2);
}

.policlinica .caratula .textoCall h2{
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	margin-top: 0;
}

.policlinica .caratula .textoCall h3{
	font-size: clamp(1.25rem, 2vw, 1.6rem);
}

.policlinica .caratula .textoCall p{
	font-size: 1rem;
	line-height: 1.7;
	color: var(--color-body);
}

/* El editor sólo permite <span style="color:...">: unificamos esos dos
   colores sueltos (#8e44ad / #000000) con la paleta de variables en vez de
   dejarlos como hex sueltos que no coinciden exacto con --color-primary. */
.policlinica .caratula .textoCall span[style*="8e44ad"]{
	color: var(--color-primary) !important;
}
.policlinica .caratula .textoCall span[style*="000000"]{
	color: inherit !important;
}

/* Los "- Desarmar los celos", "- Apertura de la relación", etc. funcionan
   como subtítulos sueltos (span violeta + strong): un poco de aire arriba
   para que no queden pegados al párrafo anterior. */
.policlinica .caratula .textoCall p > span[style*="8e44ad"] > strong{
	display: inline-block;
	margin-top: var(--space-2);
}

.policlinica .caratula .textoCall strong{
	font-family: var(--font-bold);
	color: var(--color-ink);
}

.policlinica .caratula .textoCall a{
	color: var(--color-primary);
	font-weight: bold;
	text-decoration: none;
}
.policlinica .caratula .textoCall a:hover{
	color: var(--color-primary-dark);
}

/* Botones "Agendá tu acompañamiento" / "Agendar tu consulta": mismo pill
   sólido violeta que el resto del sitio, en vez del outline cuadrado y
   mayúsculas del estilo viejo (.policlinica .caratula .textoCall a, arriba
   en este mismo archivo). Se identifican por estructura (strong+em) o por
   el link de WhatsApp de agenda, sin depender de clases nuevas. */
.policlinica .caratula .textoCall p > a:has(strong),
.policlinica .caratula .textoCall p > a[href*="api.whatsapp.com/send"]{
	display: inline-block;
	float: none;
	clear: none;
	width: auto;
	border: none;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: #ffffff;
	padding: 12px 28px;
	margin-top: var(--space-2);
	text-align: center;
	text-transform: none;
	font-family: var(--font-bold);
}
.policlinica .caratula .textoCall p > a:has(strong):hover,
.policlinica .caratula .textoCall p > a[href*="api.whatsapp.com/send"]:hover{
	background: var(--color-primary-dark);
	color: #ffffff;
}
.policlinica .caratula .textoCall p > a:has(strong) strong,
.policlinica .caratula .textoCall p > a:has(strong) em{
	color: #ffffff;
	font-style: normal;
}

/* Chips de Cecilia / Juan Pablo dentro del bloque de agenda: mismo criterio
   "sin mayúsculas, avatar redondo" que las tarjetas de equipo del rediseño. */
.policlinica.conResponsables .caratula .textoCall .responsables a.responsable{
	text-transform: none;
	font-family: var(--font-bold);
	color: var(--color-ink);
}
.policlinica.conResponsables .caratula .textoCall .responsables a.responsable:hover{
	color: var(--color-primary);
}
.policlinica.conResponsables .caratula .textoCall .responsables a.responsable .imagen{
	border-radius: var(--radius-pill);
	border-color: var(--color-border);
}
.policlinica.conResponsables .caratula .textoCall .responsables a.responsable:hover .imagen{
	border-color: var(--color-primary);
}

/* Tarjetas de profesionales al pie de la página (#listaProfesionales):
   sombra difusa + esquinas redondeadas + sin mayúsculas, igual que el resto
   de tarjetas del rediseño, en vez del sombreado duro y el texto en
   mayúsculas del estilo viejo (reglas de arriba en este mismo archivo). */
#listaProfesionales{
	margin-top: var(--space-4);
}

.articulo ul#listaProfesionales li{
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease;
}

.articulo ul#listaProfesionales li:hover{
	background-color: var(--color-white);
	transform: translateY(-6px);
	box-shadow: var(--shadow-md);
}

.articulo ul#listaProfesionales li .imagen{
	border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.articulo ul#listaProfesionales li .datos p.nombre,
.articulo ul#listaProfesionales li .datos p.lugar{
	font-family: var(--font-bold);
	color: var(--color-primary);
	text-transform: none;
}

.articulo ul#listaProfesionales li a:hover .datos p.profesion,
.articulo ul#listaProfesionales li a:hover .datos p.nombre,
.articulo ul#listaProfesionales li a:hover .datos p.lugar,
.articulo ul#listaProfesionales li:hover .datos p{
	color: var(--color-primary-dark);
}

@media (max-width: 767px){
	.policlinica.conResponsables .caratula{ padding: var(--space-4) 0; }
	.policlinica .caratula .textoCall h2{ font-size: 1.5rem; }
	.policlinica .caratula .textoCall h3{ font-size: 1.25rem; }
}

/* ==========================================================================
   Producto / Curso — plantilla compartida por todas las páginas de
   productos y cursos (curso.html, producto-que-es-una-relacion-abierta.html,
   etc: section.producto con .carouselProducto + .datosProducto arriba, y
   más abajo un <section> nuevo con .descripcion para el cuerpo largo). Nunca
   había recibido el rediseño: el h1 seguía en gothamblackregular (regla
   vieja de la línea 58 de custom/styles.css) y .descripcion no tenía NINGÚN
   tratamiento (ni ancho de lectura, ni tipografía, ni blockquote) porque no
   vive dentro de .articulo.
   ========================================================================== */

section.producto{
	/* El framework remoto trae "section{margin-bottom:120px}" genérico —
	   deja un salto enorme antes de la sección de .descripcion. */
	padding: var(--space-4) 0;
	margin-bottom: 0;
}

section.producto h1{
	font-family: var(--font-display);
	color: var(--color-primary);
	font-size: clamp(1.8rem, 3vw, 2.3rem);
	line-height: 1.15;
	margin-bottom: var(--space-2);
}

.carouselProducto .carousel-inner{
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

.thumbs .thumb{
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.thumbs .thumb.active,
.thumbs .thumb:hover{
	box-shadow: 0 0 0 2px var(--color-primary);
}

.datosProducto .precio .precioOriginal{
	font-family: var(--font-display);
	color: var(--color-body);
	font-size: 1.6rem;
	letter-spacing: .02em;
}

.datosProducto .form-control{
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}
.datosProducto .form-control:focus{
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(139,43,139,.15);
	outline: none;
}

.producto .btn-call{
	background: var(--color-primary);
	color: #ffffff;
	border: none;
	border-radius: var(--radius-pill);
	font-family: var(--font-bold);
	text-transform: none;
	transition: background .2s ease;
}
.producto .btn-call:hover{
	background: var(--color-primary-dark);
	color: #ffffff;
}

/* Cuerpo largo debajo de la ficha de compra (h2/p/blockquote sueltos,
   mismo editor restringido que el resto del sitio): mismo ancho de lectura
   y misma tipografía que .articulo .texto, más arriba en este archivo. */
.descripcion{
	max-width: 768px;
	margin: 0 auto;
}

.descripcion h2{
	font-family: var(--font-display);
	color: var(--color-primary);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	line-height: 1.15;
	margin: var(--space-4) 0 var(--space-2);
}

.descripcion h2 span[style]{
	color: inherit !important;
}

.descripcion p,
.descripcion li{
	color: var(--color-body);
	font-size: 1rem;
	line-height: 1.75;
}

.descripcion strong{
	color: var(--color-ink);
	font-family: var(--font-bold);
}

.descripcion blockquote{
	margin: var(--space-3) 0;
	padding: var(--space-2) var(--space-3);
	border-left: 4px solid var(--color-primary);
	background: var(--color-primary-tint);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
}

.descripcion blockquote p{
	margin: 0;
}

/* El editor mete spans de color/fondo sueltos adentro de las citas (texto
   blanco sobre violeta sólido) — los neutralizamos para que hereden el
   tratamiento de tarjeta clara de arriba, en vez de pelearse con él. */
.descripcion blockquote span[style]{
	color: inherit !important;
	background: none !important;
}

.descripcion a{
	color: var(--color-primary);
	font-weight: bold;
	text-underline-offset: 3px;
}
.descripcion a:hover{
	color: var(--color-primary-dark);
}

@media (max-width: 767px){
	.carouselProducto, .datosProducto{ width: 100% !important; float: none !important; }
}

/* ==========================================================================
   Openguia (openguia.html) — a diferencia del resto de los .articulo, esta
   página nunca tuvo el contenido envuelto en .texto (los <p>/<h2> del editor
   quedan como hijos directos de .container), así que ninguna de las reglas
   tipográficas de ".articulo .texto" de arriba la alcanzaba. Se apunta con
   :not(:has(.texto)) para que sea automático si algún día se agrega .texto
   y no choque con el resto de artículos del sitio.
   ========================================================================== */

.articulo:not(:has(.texto)) > .container > p,
.articulo:not(:has(.texto)) > .container > li{
	color: var(--color-body);
	font-size: 1rem;
	line-height: 1.75;
}

.articulo:not(:has(.texto)) > .container > p strong{
	color: var(--color-ink);
	font-family: var(--font-bold);
}

.articulo:not(:has(.texto)) > .container > h2{
	font-family: var(--font-display);
	color: var(--color-primary);
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	line-height: 1.15;
	margin: var(--space-4) 0 var(--space-2);
}

.articulo:not(:has(.texto)) > .container > h2 span[style],
.articulo:not(:has(.texto)) > .container > p span[style]{
	color: inherit !important;
}

.articulo:not(:has(.texto)) > .container > p a{
	color: var(--color-primary);
	font-weight: bold;
	text-underline-offset: 3px;
}
.articulo:not(:has(.texto)) > .container > p a:hover{
	color: var(--color-primary-dark);
}

/* Botón "Sumate vos también a la Capacitación...": Bootstrap btn-success
   (verde) + btn-call, choca con la paleta del sitio. Mismo pill sólido
   violeta que el resto de los CTA del rediseño. */
.articulo .btn.btn-success.btn-call{
	display: inline-block;
	background: var(--color-primary);
	border: none;
	border-radius: var(--radius-pill);
	color: #ffffff;
	font-family: var(--font-bold);
	text-transform: none;
	padding: 14px 28px;
	margin-bottom: var(--space-3);
	transition: background .2s ease;
}
.articulo .btn.btn-success.btn-call:hover{
	background: var(--color-primary-dark);
	color: #ffffff;
}

/* Separador "profesionales": mismo criterio "etiqueta chica en mayúsculas"
   que "También nos viste en" (section.clientes h3.lineasH), en vez del
   bloque sólido violeta de ancho completo del estilo viejo. */
h3.profesionales{
	background: var(--color-primary-tint);
	color: var(--color-primary);
	font-family: var(--font-display);
	letter-spacing: .04em;
	border-radius: var(--radius-md);
	padding: var(--space-2);
	margin-bottom: var(--space-3);
}

/* Filtros Terapeutas/Medicina/Sin filtro: mismo pill + violeta de marca
   que el resto de los botones del rediseño, en vez del radio de 8px y los
   tres colores pastel sueltos por nth-child del estilo viejo. */
.filtros .btn.btn-ouline-call{
	border-radius: var(--radius-pill);
	border-color: var(--color-primary);
	color: var(--color-primary);
	font-family: var(--font-bold);
}
.filtros .btn.btn-ouline-call:hover,
.filtros .btn.btn-ouline-call.active,
.filtros .btn.btn-ouline-call:nth-child(2n):hover,
.filtros .btn.btn-ouline-call.active:nth-child(2n),
.filtros .btn.btn-ouline-call:nth-child(3n):hover,
.filtros .btn.btn-ouline-call.active:nth-child(3n),
.filtros .btn.btn-ouline-call:nth-child(4n):hover,
.filtros .btn.btn-ouline-call.active:nth-child(4n){
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #ffffff;
}
.filtros .btn > span{
	border-color: currentColor;
}

.introduccion p{
	color: var(--color-muted);
	font-size: 1rem;
	line-height: 1.6;
	text-align: center;
	max-width: 640px;
	margin: 0 auto var(--space-2);
}

/* ==========================================================================
   Podcast (podcast.html) — los episodios son <iframe> de Spotify sueltos
   dentro de <p> (a veces dos por párrafo) pegados a 80%/496px de ancho fijo,
   sin ningún tratamiento propio: quedaban amontonados y, cuando hay dos
   iframes en el mismo <p>, se superponen/desbordan. Son embeds, no se puede
   tocar el HTML — se apunta directo al tag, sin depender de clases nuevas.
   ========================================================================== */

.podcast .texto p:has(iframe){
	margin-bottom: var(--space-3);
}

.podcast .texto iframe{
	display: block;
	width: 100%;
	max-width: 100%;
	border: none;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
}

/* Cuando el editor metió dos iframes en el mismo párrafo (quedaban
   superpuestos): los apila con aire entre uno y otro. */
.podcast .texto iframe + iframe{
	margin-top: var(--space-2);
}

/* "Temporada 1" / "Temporada 2" son <h1> sueltos en medio del cuerpo (no el
   título real de la página, que es el primer <h1> arriba del todo) — un
   poco más chicos que el título y con una línea arriba para funcionar como
   separador entre tandas de episodios, en vez de repetir el mismo tamaño
   género h1 de portada. */
.podcast .texto h1{
	font-size: clamp(1.4rem, 2.4vw, 1.8rem);
	margin: var(--space-5) 0 var(--space-3);
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}