/*
*
*  * EENDA
*  * Marketing, Desarrollo & Consulting
*  * www.eenda.com
*  * © 2026
*
*/

/*
 * BoccaBell — front.
 *
 * MOBILE-FIRST: todo lo que hay en este archivo es el diseño a 360-390 px.
 * Los saltos de pantalla están en responsive.css, siempre con min-width.
 * Nada de Bootstrap en el front: para lo poco que hace falta no compensa el
 * peso frente al presupuesto de DESIGN.md §9.
 */

/* TOKENS ................................................................... */

:root{
	/*
	 * Color.
	 *
	 * --bb-marca es el turquesa del logotipo original (logo-boccabell.svg),
	 * #0099AB, NO el #31A1B0 que se veía en el CSS de la web vieja.
	 *
	 * Sobre blanco da 3,42:1: sirve para el imagotipo, el arco, los filetes y
	 * titulares grandes, pero NO para texto normal. Por eso los botones y los
	 * enlaces se rellenan con --bb-accion (#00727F, 5,66:1 sobre blanco).
	 */
	--bb-marca:        #0099AB;
	--bb-accion:       #00727F;
	--bb-accion-hover: #005A65;
	--bb-agua:         #E8F4F6;

	--bb-tinta:        #0B2026;  /* titulares y pie. 16,8:1 sobre blanco */
	--bb-texto:        #323232;  /* texto corrido.   12,8:1 */
	--bb-apagado:      #5F686C;  /* secundario.       5,7:1 */

	--bb-blanco:       #FFFFFF;
	--bb-arena:        #F6F4F1;  /* neutro cálido: acompaña la madera de las clínicas */
	--bb-filete:       #E4E0D9;
	--bb-borde-campo:  #C9C3B9;

	--bb-error:        #A8232B;
	--bb-pend-fondo:   #FDF3E2;
	--bb-pend-filete:  #EBD7B0;
	--bb-pend-texto:   #7A4A00;

	/* Tipografía */
	--bb-display: 'Fraunces', Georgia, 'Times New Roman', serif;
	--bb-texto-familia: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Escala de espacio de DESIGN.md §3.3 */
	--e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px; --e5: 24px;
	--e6: 32px; --e7: 48px; --e8: 64px; --e9: 96px;

	--bb-radio: 6px;
	--bb-ancho: 1240px;
	--bb-margen: 24px;
}

/* BASE ..................................................................... */

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; }

body{
	margin: 0;
	background: var(--bb-blanco);
	color: var(--bb-texto);
	font-family: var(--bb-texto-familia);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	/* Hueco para la barra inferior fija de móvil + área segura del dispositivo */
	padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3{
	margin: 0;
	font-family: var(--bb-display);
	font-weight: 500;
	font-optical-sizing: auto;
	color: var(--bb-tinta);
	letter-spacing: -0.015em;
	line-height: 1.12;
}

h1{ font-size: 40px; }
h2{ font-size: 30px; }
h3{ font-size: 24px; }

p{ margin: 0; }
ul, ol, dl, dd{ margin: 0; padding: 0; }
ul, ol{ list-style: none; }

img, picture, svg{ display: block; max-width: 100%; }
img{ height: auto; }

a{
	color: var(--bb-accion);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover{ color: var(--bb-tinta); }

button{ font: inherit; cursor: pointer; }
input, select, textarea{ font: inherit; color: var(--bb-texto); }

:focus-visible{
	outline: 3px solid var(--bb-accion);
	outline-offset: 2px;
	border-radius: var(--bb-radio);
}

/* Enlace de salto: visible solo al tabular */
.saltar{
	position: absolute;
	left: -9999px;
	top: var(--e2);
	z-index: 100;
	padding: var(--e3) var(--e4);
	background: var(--bb-tinta);
	color: var(--bb-blanco);
	border-radius: var(--bb-radio);
	text-decoration: none;
}
.saltar:focus{ left: var(--e2); color: var(--bb-blanco); }

.contenedor{
	width: 100%;
	max-width: var(--bb-ancho);
	margin-inline: auto;
	padding-inline: var(--bb-margen);
}

/* PIEZAS COMUNES ........................................................... */

.antetitulo{
	display: flex;
	align-items: center;
	gap: var(--e3);
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-accion);
}
.arco{ flex-shrink: 0; }

.entradilla{ font-size: 18px; color: var(--bb-apagado); }
.entrada{ color: var(--bb-apagado); }
.nota{ font-size: 14px; color: var(--bb-apagado); }

.seccion{ padding-block: var(--e7); }
.seccion--arena{ background: var(--bb-arena); }
.seccion--agua{ background: var(--bb-agua); }

.seccion__cabecera{
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	margin-bottom: var(--e5);
	max-width: 620px;
}

.aviso{
	margin-top: var(--e5);
	font-size: 14px;
	line-height: 1.5;
	color: var(--bb-apagado);
}

.marca-pendiente{
	display: inline-block;
	padding: 3px 8px;
	background: var(--bb-pend-fondo);
	border: 1px solid var(--bb-pend-filete);
	border-radius: 4px;
	color: var(--bb-pend-texto);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.enlace-icono{
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	min-height: 44px;
	font-weight: 600;
	text-decoration: none;
}
.enlace-icono span{ text-decoration: underline; text-underline-offset: 3px; }

/* BOTONES .................................................................. */

.boton{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--e2);
	min-height: 52px;          /* objetivo táctil holgado (DESIGN.md §4) */
	padding-inline: var(--e5);
	border: 0;
	border-radius: var(--bb-radio);
	font-weight: 600;
	font-size: 17px;
	text-align: center;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease;
}
.boton--bloque{ width: 100%; }
.boton--compacto{ min-height: 44px; font-size: 16px; padding-inline: var(--e4); }

.boton--principal{ background: var(--bb-accion); color: var(--bb-blanco); }
.boton--principal:hover{ background: var(--bb-accion-hover); color: var(--bb-blanco); }

.boton--secundario{
	background: var(--bb-blanco);
	color: var(--bb-tinta);
	border: 1.5px solid var(--bb-borde-campo);
}
.boton--secundario:hover{ border-color: var(--bb-tinta); color: var(--bb-tinta); }

/* CABECERA ................................................................. */

.cabecera{
	background: var(--bb-blanco);
	border-bottom: 1px solid var(--bb-filete);
}
.cabecera__interior{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	min-height: 68px;
}
.logo img{ height: 26px; width: auto; }

.boton-menu{
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	min-height: 44px;
	padding-inline: var(--e3);
	background: var(--bb-blanco);
	border: 1.5px solid var(--bb-borde-campo);
	border-radius: var(--bb-radio);
	color: var(--bb-tinta);
	font-weight: 600;
	font-size: 15px;
}

/*
 * MENÚ.
 *
 * Sin JavaScript la navegación se queda desplegada bajo la cabecera y sigue
 * siendo usable: por eso .cabecera__interior envuelve y el <nav> ocupa toda
 * la fila. Solo cuando el <html> lleva la clase "js" (la pone un script
 * inline en el <head>, antes de pintar) se convierte en panel offcanvas.
 */
.nav-principal{
	order: 3;
	width: 100%;
	border-top: 1px solid var(--bb-filete);
}

.nav-principal__lista{
	display: flex;
	flex-direction: column;
	gap: var(--e1);
	padding-block: var(--e3);
}

.nav-enlace{
	display: flex;
	align-items: center;
	min-height: 48px;
	color: var(--bb-tinta);
	font-weight: 600;
	text-decoration: none;
}
.nav-enlace.es-activo{ color: var(--bb-accion); }

/* OFFCANVAS (móvil, con JS) ................................................ */

/*
 * El panel entra por la derecha. Cerrado usa visibility: hidden, no solo
 * transform: así queda fuera del orden de tabulación y un lector de pantalla
 * no lo recorre. Con transform a secas seguiría siendo enfocable fuera de
 * pantalla.
 */
.js .nav-principal{
	position: fixed;
	inset: 0 0 0 auto;
	z-index: 60;
	display: flex;
	flex-direction: column;
	width: min(86vw, 360px);
	padding: var(--e4) var(--e5);
	padding-bottom: calc(var(--e5) + env(safe-area-inset-bottom, 0px));
	background: var(--bb-blanco);
	border-top: 0;
	box-shadow: -12px 0 32px rgba(11, 32, 38, 0.18);
	overflow-y: auto;
	overscroll-behavior: contain;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 220ms ease, visibility 220ms ease;
}
.js .nav-principal.es-abierto{ transform: translateX(0); visibility: visible; }

/* Cabecera y pie del panel: solo existen en modo offcanvas */
.nav-principal__cabecera,
.nav-principal__pie{ display: none; }

.js .nav-principal__cabecera{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--e4);
	padding-bottom: var(--e4);
	border-bottom: 1px solid var(--bb-filete);
}
.js .nav-principal__cabecera img{ height: 26px; width: auto; }

.js .nav-principal__pie{
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	margin-top: auto;          /* empuja el bloque al fondo del panel */
	padding-top: var(--e5);
	border-top: 1px solid var(--bb-filete);
}
.nav-principal__titulo{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-apagado);
}

/* Un número por clínica, con su nombre debajo: nunca un teléfono genérico */
.telefono-sede{
	display: flex;
	align-items: center;
	gap: var(--e3);
	min-height: 52px;
	padding-inline: var(--e4);
	background: var(--bb-agua);
	border-radius: var(--bb-radio);
	color: var(--bb-tinta);
	text-decoration: none;
}
.telefono-sede strong{ display: block; font-size: 17px; font-weight: 600; }
.telefono-sede small{ display: block; font-size: 14px; color: var(--bb-apagado); }
.telefono-sede:hover{ color: var(--bb-tinta); background: #D9EDF0; }

.boton-cerrar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;       /* alinea el icono con el margen óptico */
	background: none;
	border: 0;
	border-radius: var(--bb-radio);
	color: var(--bb-tinta);
}

.velo{
	position: fixed;
	inset: 0;
	z-index: 55;
	background: rgba(11, 32, 38, 0.55);
	opacity: 0;
	visibility: hidden;
	transition: opacity 220ms ease, visibility 220ms ease;
}
.con-menu .velo{ opacity: 1; visibility: visible; }

/* Con el panel abierto la página de detrás no se desplaza */
.con-menu{ overflow: hidden; }

.cabecera__acciones{ display: none; }

/* Desplegable "Llamar" de la cabecera (solo escritorio, ver responsive.css) */

.llamar{ position: relative; }

.llamar__boton{
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	min-height: 44px;
	padding-inline: var(--e4);
	background: var(--bb-blanco);
	border: 1.5px solid var(--bb-borde-campo);
	border-radius: var(--bb-radio);
	color: var(--bb-tinta);
	font-weight: 600;
	font-size: 16px;
	cursor: pointer;
	list-style: none;          /* quita el triángulo del <summary> */
}
.llamar__boton::-webkit-details-marker{ display: none; }
.llamar__boton:hover{ border-color: var(--bb-tinta); }
.llamar[open] .llamar__flecha{ transform: rotate(180deg); }
.llamar__flecha{ transition: transform 180ms ease; }

.llamar__panel{
	position: absolute;
	top: calc(100% + var(--e2));
	right: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--e1);
	width: 280px;
	padding: var(--e4);
	background: var(--bb-blanco);
	border: 1px solid var(--bb-filete);
	border-radius: 8px;
	box-shadow: 0 12px 28px rgba(11, 32, 38, 0.14);
}
.llamar__titulo{
	margin-bottom: var(--e2);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-apagado);
}
.llamar__opcion{
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--e3) var(--e3);
	border-radius: var(--bb-radio);
	color: var(--bb-tinta);
	text-decoration: none;
}
.llamar__opcion strong{ font-size: 15px; font-weight: 600; }
.llamar__opcion span{ font-size: 17px; color: var(--bb-accion); font-weight: 600; }
.llamar__opcion:hover{ background: var(--bb-agua); color: var(--bb-tinta); }

/* PORTADA .................................................................. */

.portada__texto{
	display: flex;
	flex-direction: column;
	gap: var(--e5);
	padding-block: var(--e6) 0;
}
.portada__acciones{ display: flex; flex-direction: column; gap: var(--e3); }
.portada__acciones .boton{ width: 100%; }

.portada__imagen{ margin-top: var(--e6); }
.portada__imagen img{
	width: 100%;
	height: 320px;
	object-fit: cover;
	object-position: center 42%;
	background: var(--bb-arena);
}

/* CLÍNICAS ................................................................. */

.clinicas{ display: grid; gap: var(--e5); }

.clinica{
	display: flex;
	flex-direction: column;
	gap: var(--e4);
	padding: var(--e5);
	background: var(--bb-blanco);
	border: 1px solid var(--bb-filete);
	border-radius: 8px;
}
.clinica__direccion{ color: var(--bb-apagado); font-size: 16px; }

.horario{ display: flex; flex-direction: column; }
.horario__fila{
	display: flex;
	justify-content: space-between;
	gap: var(--e4);
	padding-block: 7px;
	border-top: 1px solid var(--bb-filete);
}
.horario__fila dt{ font-size: 15px; color: var(--bb-apagado); }
.horario__fila dd{ font-size: 15px; font-weight: 600; color: var(--bb-tinta); text-align: right; }

.clinica__acciones{ display: flex; flex-direction: column; gap: var(--e3); }

/* TRATAMIENTOS ............................................................. */

/*
 * Índice editorial, no tarjetas: títulos, una línea y un filete (DESIGN.md
 * §3.1). Cada fila es un enlace entero para que el objetivo táctil sea grande.
 */
.tratamiento{
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: var(--e1) var(--e4);
	padding-block: 18px;
	border-bottom: 1px solid var(--bb-filete);
	color: inherit;
	text-decoration: none;
}
.tratamientos li:last-child .tratamiento{ border-bottom: 0; }

.tratamiento__titulo{
	font-family: var(--bb-display);
	font-size: 21px;
	font-weight: 500;
	color: var(--bb-tinta);
	line-height: 1.2;
}
.tratamiento__texto{ font-size: 15px; color: var(--bb-apagado); line-height: 1.5; }
.tratamiento__flecha{ grid-row: 1 / 3; align-self: center; color: var(--bb-accion); }
.tratamiento:hover .tratamiento__titulo{ color: var(--bb-accion); }

/* EQUIPO ................................................................... */

.equipo{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e5) var(--e4); }

.persona img{
	width: 100%;
	height: 205px;
	object-fit: cover;
	object-position: center 20%;
	border-radius: var(--bb-radio);
	background: var(--bb-arena);
	margin-bottom: var(--e3);
}
.persona__nombre{ font-family: var(--bb-display); font-size: 18px; color: var(--bb-tinta); }
.persona__cargo{ font-size: 14px; color: var(--bb-apagado); }

/* PROCESO .................................................................. */

.proceso{ display: flex; flex-direction: column; gap: var(--e5); }

.paso{
	display: grid;
	grid-template-columns: 36px 1fr;
	align-items: start;
	gap: var(--e1) var(--e4);
}
.paso__numero{
	grid-row: 1 / 4;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--bb-agua);
	color: var(--bb-accion);
	font-family: var(--bb-display);
	font-size: 18px;
}
.paso__titulo{ font-family: var(--bb-display); font-size: 19px; color: var(--bb-tinta); }
.paso__texto{ font-size: 16px; color: var(--bb-apagado); }
.paso .marca-pendiente{ grid-column: 2; margin-top: var(--e1); justify-self: start; }

/* INSTALACIONES ............................................................ */

.galeria{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
.galeria figure{ margin: 0; }
.galeria img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: var(--bb-radio);
	background: var(--bb-blanco);
}
.galeria figcaption{ margin-top: var(--e2); font-size: 14px; color: var(--bb-apagado); }

/* CITA ..................................................................... */

.formulario{ display: flex; flex-direction: column; gap: var(--e5); margin-top: var(--e5); }
.campo{ display: flex; flex-direction: column; gap: var(--e2); border: 0; padding: 0; margin: 0; }

.etiqueta{
	display: block;
	padding: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--bb-tinta);
}
.opcional{ font-weight: 400; color: var(--bb-apagado); }

.control{
	width: 100%;
	min-height: 52px;
	padding-inline: 14px;
	background: var(--bb-blanco);
	border: 1px solid var(--bb-borde-campo);
	border-radius: var(--bb-radio);
}
.control:invalid:not(:placeholder-shown){ border-color: var(--bb-error); border-width: 2px; }

.ayuda{ font-size: 14px; color: var(--bb-apagado); }

.radio-clinica{
	display: flex;
	align-items: center;
	gap: var(--e3);
	min-height: 52px;
	padding-inline: var(--e4);
	background: var(--bb-blanco);
	border: 1px solid var(--bb-borde-campo);
	border-radius: var(--bb-radio);
	cursor: pointer;
}
.radio-clinica input{ width: 20px; height: 20px; accent-color: var(--bb-accion); }
.radio-clinica span{ font-size: 16px; color: var(--bb-tinta); }
.radio-clinica strong{ display: block; font-weight: 600; }
.radio-clinica small{ display: block; font-size: 14px; color: var(--bb-apagado); }
.radio-clinica:has(input:checked){ border-color: var(--bb-accion); box-shadow: inset 0 0 0 1px var(--bb-accion); }

.consentimiento{
	display: flex;
	align-items: start;
	gap: var(--e3);
	font-size: 14px;
	line-height: 1.5;
}
.consentimiento input{ width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; accent-color: var(--bb-accion); }

.caja-telefonos{
	display: flex;
	flex-direction: column;
	gap: var(--e2);
	margin-top: var(--e5);
	padding: var(--e5);
	background: var(--bb-agua);
	border-radius: 8px;
}
.caja-telefonos p{ color: var(--bb-tinta); }
.caja-telefonos a{ font-weight: 600; min-height: 32px; }

/* PIE ...................................................................... */

.pie{
	padding-block: var(--e7) var(--e5);
	background: var(--bb-tinta);
	color: #CFDDE0;
}
.pie__interior{ display: flex; flex-direction: column; gap: var(--e6); }
.pie__marca{ display: flex; flex-direction: column; gap: var(--e4); }
.pie__marca img{ height: 28px; width: auto; }
.pie__marca p{ font-size: 15px; color: #9FB6BB; line-height: 1.55; }

.pie__columnas{ display: grid; gap: var(--e5); }
.pie__titulo{
	margin-bottom: var(--e3);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #6E8A90;
}
.pie__columna a{
	display: flex;
	align-items: center;
	min-height: 40px;
	color: #CFDDE0;
	font-size: 16px;
	text-decoration: none;
}
.pie__columna a:hover{ color: var(--bb-blanco); text-decoration: underline; }

.pie__legal{
	margin-top: var(--e5);
	padding-top: var(--e5);
	border-top: 1px solid #1E3840;
	font-size: 13px;
	color: #6E8A90;
}

/* BARRA INFERIOR (MÓVIL) ................................................... */

.barra-movil{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 50;
	display: flex;
	gap: var(--e3);
	padding: var(--e3) var(--bb-margen);
	padding-bottom: calc(var(--e3) + env(safe-area-inset-bottom, 0px));
	background: var(--bb-blanco);
	border-top: 1px solid var(--bb-filete);
	box-shadow: 0 -6px 20px rgba(11, 32, 38, 0.08);
}
.barra-movil .boton{ min-height: 48px; font-size: 16px; }
.barra-movil .boton--principal{ flex-grow: 1; }

/* PÁGINAS INTERIORES ....................................................... */

.contenedor--lectura{ max-width: 760px; }
.seccion--sin-borde{ padding-top: var(--e6); }

.cabecera-pagina{
	display: flex;
	flex-direction: column;
	padding-block: var(--e5) var(--e6);
	background: var(--bb-arena);
}
.cabecera-pagina .contenedor{ display: flex; flex-direction: column; gap: var(--e3); }
.cabecera-pagina h1{ font-size: 34px; }
.cabecera-pagina--articulo{ background: var(--bb-blanco); padding-bottom: var(--e5); }

/* Migas de pan */
.migas{ margin-bottom: var(--e2); }
.migas ol{ display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.migas li{ display: flex; align-items: center; gap: var(--e2); font-size: 14px; color: var(--bb-apagado); }
.migas li + li::before{ content: "/"; color: var(--bb-borde-campo); }
.migas a{ color: var(--bb-apagado); text-decoration: none; }
.migas a:hover{ color: var(--bb-accion); text-decoration: underline; }
.migas [aria-current]{ color: var(--bb-tinta); font-weight: 600; }

/* TEXTO LARGO DEL EDITOR ................................................... */

/*
 * Lo que escribe el editor llega con sus propias etiquetas, así que se estila
 * por descendencia. Medida corta a propósito: 65 caracteres por línea.
 */
.prosa{ max-width: 65ch; }
.prosa > * + *{ margin-top: var(--e4); }
.prosa h2{ margin-top: var(--e7); font-size: 28px; }
.prosa h3{ margin-top: var(--e6); font-size: 22px; }
.prosa h2:first-child, .prosa h3:first-child{ margin-top: 0; }
.prosa p{ line-height: 1.7; }
.prosa strong{ color: var(--bb-tinta); }
.prosa ul{ list-style: none; display: flex; flex-direction: column; gap: var(--e2); }
.prosa ul li{ position: relative; padding-left: var(--e5); line-height: 1.7; }
.prosa ul li::before{
	content: "";
	position: absolute;
	left: 0;
	top: 12px;
	width: 10px;
	height: 2px;
	background: var(--bb-marca);
}
.prosa ol{ list-style: decimal; padding-left: var(--e5); display: flex; flex-direction: column; gap: var(--e2); }
.prosa img{ border-radius: var(--bb-radio); }
.prosa--entradilla p{ font-size: 19px; color: var(--bb-apagado); }
.prosa--legal{ max-width: none; }
.prosa--legal h2{ font-size: 24px; }
.prosa--legal h3{ font-size: 19px; }

.aviso-bloque{
	padding: var(--e4);
	background: var(--bb-pend-fondo);
	border: 1px solid var(--bb-pend-filete);
	border-radius: var(--bb-radio);
	font-size: 15px;
	line-height: 1.55;
}

.imagen-ancha{
	width: 100%;
	height: 240px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--bb-arena);
}

.imagen-ausente{
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	background: var(--bb-arena);
	border: 1px dashed var(--bb-borde-campo);
	border-radius: var(--bb-radio);
	color: var(--bb-apagado);
	font-size: 14px;
}

/* FICHA (detalle con lateral) .............................................. */

.ficha{ display: flex; flex-direction: column; gap: var(--e6); }
.ficha__cuerpo{ display: flex; flex-direction: column; gap: var(--e5); }
.ficha__lateral{ display: flex; flex-direction: column; gap: var(--e4); }

.tarjeta-lateral,
.bloque-pendiente{
	display: flex;
	flex-direction: column;
	gap: var(--e3);
	align-items: flex-start;
	padding: var(--e5);
	border-radius: 8px;
}
.tarjeta-lateral{ background: var(--bb-agua); }
.bloque-pendiente{ background: var(--bb-pend-fondo); border: 1px solid var(--bb-pend-filete); }
.tarjeta-lateral p, .bloque-pendiente p{ font-size: 15px; line-height: 1.55; }

.clinica__etiqueta{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bb-apagado);
}
.clinica__titulo{ font-size: 24px; }
.clinica--ficha{ gap: var(--e5); }
.clinica__bloque{ display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }

.lista-enlaces{ display: flex; flex-direction: column; }
.lista-enlaces a{
	display: flex;
	align-items: center;
	min-height: 44px;
	color: var(--bb-tinta);
	font-size: 16px;
	text-decoration: none;
	border-bottom: 1px solid var(--bb-filete);
}
.lista-enlaces li:last-child a{ border-bottom: 0; }
.lista-enlaces a:hover{ color: var(--bb-accion); }

/* BLOG ..................................................................... */

.filtros{
	display: flex;
	flex-wrap: wrap;
	gap: var(--e2);
	margin-bottom: var(--e5);
	padding-bottom: var(--e5);
	border-bottom: 1px solid var(--bb-filete);
}
.filtro{
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: var(--e4);
	background: var(--bb-blanco);
	border: 1.5px solid var(--bb-filete);
	border-radius: 999px;
	color: var(--bb-tinta);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}
.filtro:hover{ border-color: var(--bb-borde-campo); color: var(--bb-tinta); }
.filtro.es-activo{ background: var(--bb-tinta); border-color: var(--bb-tinta); color: var(--bb-blanco); }

.lista-posts{ display: grid; gap: var(--e6); }
.post{ display: flex; flex-direction: column; gap: var(--e3); }
.post__imagen img{
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
	background: var(--bb-arena);
}
.post__cuerpo{ display: flex; flex-direction: column; gap: var(--e2); align-items: flex-start; }
.post__categoria{
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bb-accion);
	text-decoration: none;
}
.post__titulo{ font-size: 21px; }
.post__titulo a{ color: var(--bb-tinta); text-decoration: none; }
.post__titulo a:hover{ color: var(--bb-accion); }
.post__extracto{ font-size: 15px; color: var(--bb-apagado); line-height: 1.55; }
.post__fecha{ font-size: 14px; color: var(--bb-apagado); }

.articulo__meta{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--e3);
	font-size: 15px;
	color: var(--bb-apagado);
}

/* EMPLEO ................................................................... */

.ofertas{ display: flex; flex-direction: column; }
.oferta{
	display: flex;
	flex-direction: column;
	gap: var(--e4);
	align-items: flex-start;
	padding-block: var(--e5);
	border-bottom: 1px solid var(--bb-filete);
}
.ofertas li:first-child{ padding-top: 0; }
.oferta__titulo{ font-size: 24px; }
.oferta__titulo a{ color: var(--bb-tinta); text-decoration: none; }
.oferta__titulo a:hover{ color: var(--bb-accion); }
.oferta__texto{ margin-top: var(--e1); color: var(--bb-apagado); }

.vacio{
	padding: var(--e6);
	background: var(--bb-arena);
	border-radius: 8px;
	color: var(--bb-apagado);
	text-align: center;
}

/* 404 ...................................................................... */

.rejilla-404{ display: grid; gap: var(--e6); }
.rejilla-404 > div{ display: flex; flex-direction: column; gap: var(--e3); align-items: flex-start; }

/* CIERRE: CTA DE CITA ...................................................... */

.cta-cita{ padding-block: var(--e7); background: var(--bb-tinta); color: #CFDDE0; }
.cta-cita__interior{ display: flex; flex-direction: column; gap: var(--e6); }
.cta-cita__texto{ display: flex; flex-direction: column; gap: var(--e4); align-items: flex-start; }
.cta-cita h2{ color: var(--bb-blanco); font-size: 30px; }
.cta-cita p{ color: #9FB6BB; line-height: 1.6; }
.cta-cita .antetitulo{ color: var(--bb-marca); }
.cta-cita__telefonos{ display: flex; flex-direction: column; gap: var(--e3); }
.cta-cita .nav-principal__titulo{ display: block; color: #6E8A90; }
.cta-cita .telefono-sede{
	background: rgba(255, 255, 255, 0.06);
	color: var(--bb-blanco);
}
.cta-cita .telefono-sede small{ color: #9FB6BB; }
.cta-cita .telefono-sede:hover{ background: rgba(255, 255, 255, 0.12); color: var(--bb-blanco); }

.proceso--vertical{ flex-direction: column; gap: var(--e5); }

/* MOVIMIENTO ............................................................... */

@media (prefers-reduced-motion: reduce){
	*, *::before, *::after{
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}