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

/*
 * BoccaBell — saltos de pantalla.
 *
 * Solo min-width: el diseño base de style.css es el de móvil y aquí se va
 * ampliando. Los cortes responden al contenido, no a modelos de dispositivo
 * (DESIGN.md §4).
 *
 *   600px  el texto de las fichas ya admite dos columnas
 *   900px  cabe la navegación horizontal: desaparece el botón de menú
 *  1100px  la portada se parte 5/12 - 7/12
 */

/* 600px ···················································· dos columnas */

@media (min-width: 600px){

	:root{ --bb-margen: 32px; }

	h1{ font-size: 48px; }
	h2{ font-size: 36px; }

	.seccion{ padding-block: var(--e8); }

	.portada__imagen img{ height: 420px; }

	.clinicas{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.clinica__acciones{ flex-direction: row; flex-wrap: wrap; }
	.clinica__acciones .boton{ flex-grow: 1; width: auto; }

	.portada__acciones{ flex-direction: row; flex-wrap: wrap; }
	.portada__acciones .boton{ width: auto; }

	.equipo{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
	/* La plantilla completa lleva 5 personas: a tres columnas no queda huérfana */
	.equipo--completo{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.persona img{ height: 260px; }

	.galeria{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.galeria img{ height: 240px; }

	.proceso{ flex-direction: row; gap: var(--e6); }
	.paso{
		flex: 1 1 0;
		grid-template-columns: 1fr;
		gap: var(--e3);
		padding-top: var(--e5);
		border-top: 2px solid var(--bb-filete);
	}
	.paso__numero{ grid-row: auto; width: 40px; height: 40px; font-size: 19px; }
	.paso__titulo{ font-size: 23px; }
	.paso .marca-pendiente{ grid-column: auto; }

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

	/* Páginas interiores */
	.cabecera-pagina{ padding-block: var(--e6) var(--e7); }
	.cabecera-pagina h1{ font-size: 44px; }

	.imagen-ancha{ height: 360px; }

	.galeria--completa{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.galeria--completa img{ height: 300px; }

	.lista-posts--rejilla{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6) var(--e5); }
	.post__imagen img{ height: 220px; }

	.oferta{ flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e6); }

	.rejilla-404{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cta-cita__interior{ flex-direction: row; align-items: center; justify-content: space-between; gap: var(--e7); }
	.cta-cita__texto{ max-width: 520px; }
	.cta-cita__telefonos{ min-width: 260px; }

	.proceso--vertical{ flex-direction: column; }
	.proceso--vertical .paso{
		flex: none;
		grid-template-columns: 40px 1fr;
		align-items: start;
		gap: var(--e1) var(--e4);
		padding-top: 0;
		border-top: 0;
	}
	.proceso--vertical .paso__numero{ grid-row: 1 / 4; }
	.proceso--vertical .paso .marca-pendiente{ grid-column: 2; }
}

/* 900px ····················································· navegación */

@media (min-width: 900px){

	body{ padding-bottom: 0; }          /* ya no hay barra inferior */
	.barra-movil{ display: none; }

	.cabecera__interior{ min-height: 92px; gap: var(--e7); }
	.logo img{ height: 34px; }

	.boton-menu{ display: none; }

	/*
	 * Se deshace el offcanvas: la navegación vuelve a ser una barra horizontal
	 * y deja de depender del botón. Hay que revertir explícitamente todo lo
	 * que puso el modo panel (posición, transform, visibility), porque el
	 * mismo elemento sirve para los dos modos.
	 */
	.cabecera__interior{ flex-wrap: nowrap; }

	.nav-principal{ order: 0; width: auto; border-top: 0; }
	.js .nav-principal,
	.js .nav-principal.es-abierto{
		position: static;
		display: block;
		width: auto;
		flex-grow: 1;
		padding: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
		transform: none;
		visibility: visible;
	}
	.js .nav-principal__cabecera,
	.js .nav-principal__pie{ display: none; }
	.velo{ display: none; }

	.nav-principal__lista{
		flex-direction: row;
		gap: var(--e6);
		padding-block: 0;
	}
	.nav-enlace{ min-height: 44px; font-size: 17px; }

	.cabecera__acciones{ display: flex; align-items: center; gap: var(--e3); }

	.seccion__cabecera--con-enlace{
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: var(--e7);
		max-width: none;
	}
	.seccion__cabecera--con-enlace > div{ display: flex; flex-direction: column; gap: var(--e3); max-width: 620px; }
	.enlace-icono--fin{ flex-shrink: 0; }

	.clinica{ padding: var(--e6); gap: var(--e5); }

	/* Índice de tratamientos a tres columnas: título · texto · acción */
	.tratamiento{
		grid-template-columns: 280px 1fr auto;
		align-items: center;
		gap: var(--e6);
		padding-block: 26px;
	}
	.tratamiento__titulo{ font-size: 26px; }
	.tratamiento__texto{ font-size: 17px; }
	.tratamiento__flecha{ grid-row: auto; }

	.galeria img{ height: 340px; }

	.cita__rejilla{
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--e6);
	}
	.cita__texto{ grid-column: span 5; }
	.cita__rejilla .formulario{ grid-column: 7 / span 6; margin-top: 0; }

	.pie__interior{ flex-direction: row; gap: var(--e8); }
	.pie__marca{ width: 300px; flex-shrink: 0; }
	.pie__columnas{ flex-grow: 1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pie__columna a{ min-height: 34px; }

	/* Páginas interiores */
	.cabecera-pagina h1{ font-size: 52px; }
	.seccion--sin-borde{ padding-top: var(--e7); }

	/* Detalle con lateral: contenido 8/12, lateral 4/12 */
	.ficha{
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--e6);
		align-items: start;
	}
	.ficha__cuerpo{ grid-column: span 8; }
	.ficha__lateral{ grid-column: span 4; position: sticky; top: var(--e5); }
	.ficha__datos{ grid-column: span 5; }
	.ficha__datos + .ficha__cuerpo{ grid-column: 7 / span 6; }

	.imagen-ancha{ height: 440px; }

	.galeria--completa{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.galeria--completa img{ height: 420px; }

	.lista-posts--rejilla{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.prosa h2{ font-size: 32px; }
	.prosa p{ font-size: 18px; }
}

/* 1100px ······················································· portada */

@media (min-width: 1100px){

	:root{ --bb-margen: 40px; }

	/* Composición asimétrica 5/12 texto · 7/12 imagen (DESIGN.md §3.1) */
	.portada__rejilla{
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--e6);
		align-items: center;
	}
	.portada__texto{ grid-column: span 5; padding-block: var(--e8); }
	.portada__imagen{ grid-column: span 7; margin-top: 0; }
	.portada__imagen img{ height: 560px; border-radius: 8px; object-position: center 45%; }

	h1{ font-size: 62px; }
	h2{ font-size: 44px; }
	.entradilla{ font-size: 20px; }

	.persona img{ height: 360px; }

	.cabecera-pagina h1{ font-size: 60px; }
	.cta-cita h2{ font-size: 40px; }
}

/* 1320px ································· la escala más grande del H1 */

@media (min-width: 1320px){
	h1{ font-size: 66px; }
}