/*
 * Portada. Solo se carga en la página de inicio.
 * Usa las variables y las piezas de serv.css.
 */

/* Portada: presentación */

/* El texto y el ojo, en una rejilla centrada de 1600px como mucho (en pantallas muy anchas no se separan hacia los
   bordes) y centrados en vertical: sin hueco vacío bajo el texto. El título va siempre en dos líneas y su tamaño
   crece con la pantalla; el ojo se apoya en la colina blanca del fondo (alta como 1/6 del ancho: su SVG es de
   1440 × 240). */
.inicio-presentacion {
	--colina: calc(100vw / 6);
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: center;
	column-gap: clamp(24px, 4vw, 96px);
	margin-bottom: -1px;
	padding: clamp(40px, 5vw, 96px) max(8.47vw, (100vw - 1600px) / 2) calc(var(--colina) * 0.5);
	/* La colina mide 1/6 del ancho y su alto sale con decimales: según el navegador y el zoom, asomaba debajo una
	   línea de fondo oscuro (se veía gris). Una franja de 3px del color de la colina al pie la tapa siempre. */
	/* Con zoom no entero (90 %, 125 %, 150 %…) el redondeo dejaba asomar el azul noche del fondo en la última fila de
	   píxeles: una línea oscura sobre «Colaboradores de la web» (Jandro, 17-10-2026). Ahora el color de base es el
	   claro y el azul noche es una capa que acaba 6px antes del borde, ya bajo la colina: no queda nada oscuro que
	   pueda asomar. */
	background:
		url("../../../../descargasWP/Hill-.svg") bottom center / 100% auto no-repeat,
		linear-gradient(var(--noche), var(--noche)) top / 100% calc(100% - 6px) no-repeat,
		var(--fondo);
}

.inicio-presentacion__texto {
	padding: 0 0 calc(var(--colina) * 0.35);
}

.inicio-presentacion h1 {
	margin: 0 0 clamp(16px, 1.6vw, 28px);
	color: var(--fondo);
	font: 700 clamp(44px, 4.8vw, 88px) / 1.06 Roboto, sans-serif;
	letter-spacing: -0.02em;
}

.inicio-presentacion p {
	max-width: 34em;
	margin: 0 0 clamp(24px, 2.4vw, 40px);
	padding: 0;
	color: #c3c7d3;
	font: 400 clamp(17px, 1.25vw, 22px) / 1.5 Roboto, sans-serif;
}

.inicio-presentacion__ojo {
	min-width: 0;
	/* Hacia abajo, hasta la colina: la sombra del ojo cae en lo blanco */
	margin-bottom: calc(var(--colina) * -0.42);
}

/* Sin la barra de carga gris del visor 3D (Jandro, 17-10-2026): el ojo aparece cuando está listo. Solo se oculta;
   la carga es la misma, así que no afecta al rendimiento. */
.inicio-presentacion model-viewer::part(default-progress-bar) {
	display: none;
}

.inicio-presentacion__ojo {
	position: relative;
}

/* La imagen del ojo (assets/ojo-portada.webp) y, con ratón, el visor 3D encima: aparece cuando está listo */
.inicio-presentacion__ojo-imagen,
.inicio-presentacion model-viewer {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
}

.inicio-presentacion model-viewer {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.inicio-presentacion model-viewer.is-listo {
	opacity: 1;
}

.inicio-presentacion__ojo-imagen.is-oculta {
	visibility: hidden;
}

/* Portada: colaboradores. Un título pequeño centrado, entre dos líneas suaves, y cada logotipo en su tarjeta blanca
   (todos del mismo tamaño visible: partes/colaboradores.php); al pasar el ratón, la tarjeta se eleva. */

.inicio-colaboradores {
	padding: clamp(24px, 4vw, 56px) 0 clamp(40px, 5vw, 72px);
	background: var(--fondo);
}

.inicio-colaboradores .contenedor {
	padding: 0 20px;
}

.inicio-colaboradores h2 {
	display: flex;
	align-items: center;
	gap: 20px;
	margin: 0 0 28px;
	color: #6b7280;
	font: 500 13px/1.2 Roboto, sans-serif;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.inicio-colaboradores h2::before,
.inicio-colaboradores h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #e3e5ea;
}

.inicio-colaboradores .colaboradores {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	height: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.inicio-colaboradores .colaboradores li {
	padding: 0;
}

.inicio-colaboradores .colaboradores a {
	display: grid;
	place-items: center;
	height: 128px;
	border: 1px solid #eceef2;
	border-radius: var(--radio-l);
	padding: 20px;
	background: var(--blanco);
	box-shadow: 0 1px 2px rgba(15, 20, 40, 0.04);
	transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.inicio-colaboradores .colaboradores a:hover {
	border-color: #dfe3ea;
	box-shadow: 0 14px 30px -14px rgba(37, 43, 66, 0.25);
	transform: translateY(-3px);
}

.inicio-colaboradores .colaboradores img {
	max-width: 100%;
	height: auto;
	max-height: none;
}

@media (max-width: 767px) {
	.inicio-colaboradores .colaboradores {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.inicio-colaboradores .colaboradores a {
		height: 104px;
		padding: 16px;
	}

	/* Los logotipos, al 75 %: guardan entre ellos el mismo tamaño visible */
	.inicio-colaboradores .colaboradores img {
		width: calc(var(--ancho) * 0.75);
	}
}

/* Portada: destacados. El carrusel (Slider Revolution) está diseñado a 1024 × 600 y sin ampliar las imágenes: a todo
   el ancho, en pantallas grandes quedaban franjas negras a los lados. Se centra a su ancho, con el título alineado
   encima, esquinas redondeadas y una sombra suave. */

.inicio-destacados {
	padding: clamp(40px, 5vw, 80px) 20px;
	background: #fcfcfc;
}

.inicio-destacados > * {
	max-width: 1024px;
	margin-inline: auto;
}

.inicio-destacados .titulo-seccion {
	margin-bottom: 24px;
	padding: 0;
}

.inicio-destacados :is(sr7-module, rs-module-wrap) {
	overflow: hidden;
	border-radius: var(--radio-l);
	box-shadow: 0 24px 50px -28px rgba(37, 43, 66, 0.45);
}

/* Flechas fuera del carrusel (las de Slider Revolution, dentro, tapaban el contenido al pasar el ratón): a los lados,
   centradas en vertical; sin sitio a los lados, debajo y en el centro */
.inicio-destacados__carrusel {
	position: relative;
}

.inicio-destacados sr7-arrow {
	display: none !important;
}

.inicio-destacados__flecha {
	position: absolute;
	top: 50%;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid #e3e6eb;
	border-radius: 50%;
	padding: 0;
	background: var(--blanco);
	box-shadow: 0 6px 18px -8px rgba(37, 43, 66, 0.3);
	color: var(--noche);
	cursor: pointer;
	translate: 0 -50%;
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.inicio-destacados__flecha .icono {
	width: 22px;
	height: 22px;
}

.inicio-destacados__flecha:hover {
	border-color: var(--azul);
	background: var(--azul);
	color: var(--blanco);
}

.inicio-destacados__flecha:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(19, 175, 249, 0.35);
}

.inicio-destacados__flecha--anterior {
	right: calc(100% + 24px);
}

.inicio-destacados__flecha--siguiente {
	left: calc(100% + 24px);
}

@media (max-width: 1220px) {
	.inicio-destacados__carrusel {
		padding-bottom: 72px;
	}

	.inicio-destacados__flecha {
		top: auto;
		bottom: 0;
		width: 48px;
		height: 48px;
		translate: none;
	}

	.inicio-destacados__flecha--anterior {
		right: calc(50% + 6px);
	}

	.inicio-destacados__flecha--siguiente {
		left: calc(50% + 6px);
	}
}

/* Portada: objetivos */

/* Mismos márgenes a los lados que los listados de abajo y, como ellos, centrado a 1280px como mucho; el hueco entre
   tarjetas va en la rejilla (antes, un margen en cada tarjeta que las metía 18px hacia dentro) */
.inicio-objetivos {
	padding: 10px calc(8.47% + 10px) 98px;
	background: var(--noche);
}

.inicio-objetivos > * {
	max-width: 1280px;
	margin-inline: auto;
}

.inicio-objetivos h2 {
	padding: 64px 0 84px;
	color: var(--fondo-claro);
	font: 700 30px/35px Roboto, sans-serif;
	text-align: center;
}

.inicio-objetivos__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.inicio-objetivos__lista li {
	margin: 0;
	border-radius: 8px;
	padding: 50px;
	background: var(--fondo-claro);
	color: var(--texto);
}

.inicio-objetivos__lista .icono {
	display: block;
	width: auto;
	height: 32px;
	margin: 0 0 23px;
	color: #252c41;
}

.inicio-objetivos__lista h3 {
	margin-bottom: 5px;
	color: var(--noche);
	font: 600 21px/25px Roboto, sans-serif;
}

/* Portada: hazte socio. El ojo a la izquierda y el texto a su lado, en blanco; el conjunto, centrado en la página
   (Jandro, 16-10-2026: antes quedaba desplazado a la izquierda). */

.inicio-hazte-socio {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5%;
	background: var(--blanco);
}

.inicio-hazte-socio > img {
	flex: 0 0 auto;
	width: 170px;
	height: 170px;
	margin: 20px 40px 20px 0;
}

.inicio-hazte-socio > div {
	padding: 20px;
}

.inicio-hazte-socio h2 {
	height: 63px;
	margin-bottom: 20px;
	color: var(--acento);
	font: 600 40px/82px Roboto, sans-serif;
}

.inicio-hazte-socio p {
	margin-bottom: 20px;
	color: var(--texto);
	font: 400 18px/23px Roboto, sans-serif;
}

/* Portada: listados de eventos y de artículos */

/* Un gris algo más marcado que el resto de fondos: contrasta con el blanco de «Hazte socio» (Jandro, 16-10-2026) */
.inicio-listado {
	--fondo-listado: #f1f2f4;
	padding: calc(3% + 10px) calc(8.47% + 10px);
	background: var(--fondo-listado);
}

.inicio-listado .titulo-seccion {
	padding: 10px;
	margin-bottom: 35px;
}

/* Los listados, centrados a 1280px como mucho (como Objetivos) */
.inicio-listado > * {
	max-width: 1280px;
	margin-inline: auto;
}

/* Tarjetas del blog en la portada: más aire arriba y abajo en el texto (Jandro). Solo aquí: la misma tarjeta se usa
   en los listados del resto de la web. */
.inicio-listado .tarjeta-articulo__titulo {
	padding: 28px 28px 10px;
}

.inicio-listado .tarjeta-articulo__resumen {
	padding: 0 28px 30px;
}

.inicio-listado__ver-mas {
	padding: 10px 28px 10px 10px;
	text-align: right;
}

.inicio-listado__ver-mas .boton {
	background: var(--fondo-listado);
}

.inicio-listado__ver-mas .boton:hover {
	background: var(--acento);
}

/* Portada: guías y área de pacientes. Dos tarjetas de igual alto sobre el azul noche, en el mismo marco que el resto
   de la portada (márgenes de los listados, 1280px como mucho). Las guías llevan su icono de colores (el de todas las
   guías de la web) y el botón azul con flecha; el área de pacientes, sus enlaces como filas. */

.inicio-guias {
	padding: clamp(56px, 6vw, 96px) calc(8.47% + 10px);
	background: var(--noche);
	color: var(--fondo);
}

.inicio-guias .contenedor {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	max-width: 1280px;
	margin-inline: auto;
	padding: 0;
}

.inicio-guias__columna {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	border: 1px solid rgba(255, 255, 255, 0.09);
	border-radius: var(--radio-l);
	padding: clamp(28px, 3.4vw, 48px);
	background: rgba(255, 255, 255, 0.04);
}

.inicio-guias__icono {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 0 24px;
	object-fit: contain;
}

/* El de las guías, algo más grande (Jandro); el de pacientes baja lo mismo para que los títulos sigan alineados */
.inicio-guias__columna:first-child .inicio-guias__icono {
	width: auto;
	height: 84px;
}

.inicio-guias__columna:last-child .inicio-guias__icono {
	margin-top: 20px;
}

.inicio-guias h2 {
	margin: 0 0 14px;
	color: var(--blanco);
	font: 700 clamp(22px, 2vw, 28px) / 1.2 Roboto, sans-serif;
}

.inicio-guias p {
	margin: 0 0 28px;
	color: rgba(255, 255, 255, 0.72);
	font: 400 17px/1.65 Roboto, sans-serif;
}

.inicio-guias__boton {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-top: auto;
	border-radius: var(--radio-boton);
	padding: 14px 24px;
	background: var(--azul);
	color: var(--blanco);
	font: 600 15px/1 Roboto, sans-serif;
	transition: background-color var(--transicion);
}

.inicio-guias__boton .icono {
	width: 18px;
	height: 18px;
	transition: transform var(--transicion);
}

.inicio-guias__boton:hover {
	background: var(--azul-hondo);
	color: var(--blanco);
}

.inicio-guias__boton:hover .icono,
.inicio-guias__enlaces a:hover .icono {
	transform: translateX(3px);
}

.inicio-guias__enlaces {
	width: 100%;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.inicio-guias__enlaces li {
	margin: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inicio-guias__enlaces li:first-child {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.inicio-guias__enlaces a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 4px;
	color: var(--blanco);
	font: 500 18px/1.3 Roboto, sans-serif;
	transition: color var(--transicion);
}

.inicio-guias__enlaces .icono {
	flex: none;
	width: 20px;
	height: 20px;
	margin-left: auto;
	color: var(--azul);
	transition: transform var(--transicion);
}

.inicio-guias__enlaces a:hover {
	color: var(--azul);
}

.inicio-guias__pdf {
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 6px;
	padding: 2px 6px;
	color: rgba(255, 255, 255, 0.7);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

@media (max-width: 860px) {
	.inicio-guias .contenedor {
		grid-template-columns: minmax(0, 1fr);
		gap: 16px;
	}
}

/* En el móvil, los mismos márgenes que los listados */
@media (max-width: 767px) {
	.inicio-guias {
		padding-right: 22px;
		padding-left: 22px;
	}
}

@media (max-width: 1024px) {
	/* Uno encima del otro: el texto y, debajo, el ojo sobre la colina */
	.inicio-presentacion {
		grid-template-columns: minmax(0, 1fr);
		padding-bottom: calc(var(--colina) * 0.3);
	}

	.inicio-presentacion__texto {
		padding-bottom: 0;
	}

	.inicio-presentacion__ojo {
		width: min(100%, 600px);
		margin: 0 auto calc(var(--colina) * -0.3);
	}

	.inicio-presentacion h1 {
		font-size: clamp(40px, 7vw, 72px);
	}

	.inicio-objetivos__lista {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 767px) {
	/* En el móvil, el título se parte donde quepa */
	.inicio-presentacion h1 br {
		display: none;
	}

	.inicio-presentacion {
		padding: 40px 8.47% 0;
		background-position: bottom left, top;
		background-size: cover, 100% calc(100% - 6px);
	}


	.inicio-destacados,
	.inicio-listado {
		padding-right: 20px;
		padding-left: 20px;
	}

	.inicio-objetivos {
		padding-right: 20px;
		padding-left: 20px;
	}

	.inicio-objetivos__lista {
		grid-template-columns: 1fr;
	}

	.inicio-objetivos__lista {
		gap: 16px;
	}

	.inicio-hazte-socio {
		flex-direction: column;
		align-items: center;
		padding: 40px 20px;
		text-align: center;
	}

	.inicio-hazte-socio > img {
		margin: 0 0 10px;
	}

	.inicio-hazte-socio h2 {
		height: auto;
		font-size: 30px;
		line-height: 38px;
	}




	.inicio-listado__ver-mas {
		padding-right: 10px;
		text-align: center;
	}


	.inicio-presentacion {
		padding: 0 8.47%;
	}

	.inicio-presentacion__texto {
		padding: 40px 0 0;
	}

	.inicio-presentacion p {
		padding: 0;
	}

	.inicio-presentacion__ojo {
		margin: 19px 0 4px;
		padding: 0;
	}

	.inicio-destacados {
		padding-right: 16px;
		padding-left: 16px;
	}

	.inicio-objetivos {
		padding-right: 22px;
		padding-left: 22px;
	}

	.inicio-objetivos h2 {
		padding: 64px 0 20px;
		text-align: left;
	}

	.inicio-objetivos__lista li {
		padding: 40px;
	}

	.inicio-hazte-socio {
		padding: 47px 20px 40px;
	}

	.inicio-hazte-socio > img {
		margin: 20px 0;
	}

	.inicio-hazte-socio > div {
		padding: 20px 0;
	}

	.inicio-hazte-socio h2 {
		margin-bottom: 1px;
		font-size: 32px;
		line-height: 53px;
	}





	.inicio-listado {
		padding-right: 22px;
		padding-left: 22px;
	}

}