/* ==========================================================================
   Portada
   ========================================================================== */

/* --- Hero ----------------------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 70vh;
	min-height: 70dvh; /* en movil evita el salto de la barra del navegador */
	background-color: var(--hero-color, var(--c-terracota)); /* color del mes, desde la página */
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hero-fondo, none);
	background-repeat: no-repeat;
	background-position: top center;
	background-size: cover;
	pointer-events: none;
}
/* Patrón de corazoncitos blancos sobre todo el fondo. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/patron-corazones.svg");
	background-repeat: repeat;
	opacity: .6;
	pointer-events: none;
}

.hero__wrapper {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
	padding-block: 30px 40px;
	width: 100%;
}

/* Sobre el verde, todo el texto va en blanco. */
.hero__antetitulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-h2);
	font-weight: 400;
	line-height: var(--lh-h2);
	color: var(--c-blanco);
	text-align: center;
}

.hero__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-display-2);
	font-weight: 800;
	line-height: 1em;
	color: var(--c-blanco);
	text-transform: uppercase;
	text-align: center;
}

.hero__bajada {
	margin-top: 20px;
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-l);
	font-weight: 400;
	line-height: var(--lh-parrafo-l);
	color: var(--c-blanco);
	text-align: center;
}

/* Fondo claro (lo decide hero.php según el color del mes). */
.hero--claro .hero__antetitulo,
.hero--claro .hero__bajada { color: var(--c-negro); }
.hero--claro .hero__titulo { color: var(--c-terracota); }

.hero__boton { margin-top: 28px; }
.hero__texto { display: flex; flex-direction: column; align-items: center; }

.hero__imagen img { width: 100%; }

/* En escritorio la imagen sobresale del wrapper por la derecha y se apoya en
   el borde inferior del hero; el overflow del hero recorta lo que se sale. */
@media (min-width: 1025px) {
	.hero__wrapper { align-self: stretch; }

	.hero__imagen {
		align-self: end;
		margin-bottom: -40px; /* anula el padding inferior del wrapper */
	}

	.hero__imagen img {
		display: block;
		width: 118%;
		max-width: none;
	}
}

/* --- Productos destacados -------------------------------------------------- */
.destacados {
	--tema-acento:  var(--c-terracota);
	--tema-fondo:   var(--bg-terracota);
	--tema-circulo: var(--bg-terracota-20);
}

.destacados__wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 24px;
	align-items: stretch;
	padding-block: 70px;
}

/* Panel con el reclamo y el perrito. */
.destacados__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: var(--radio-card);
	background-color: var(--tema-fondo);
	/* Sin recorte: la vineta puede asomar fuera del panel. La foto se redondea
	   ella misma por las esquinas de abajo. */
}

.destacados__titulo {
	display: flex;
	flex-direction: column;
	padding: 34px 24px 0;
	text-align: center;
}

.destacados__titulo-suave {
	margin-top: 2px;
	font-family: var(--f-titulo);
	font-size: var(--fz-h4);
	font-weight: 400;
	line-height: 1;
	color: var(--c-negro);
}

.destacados__titulo-fuerte {
	font-family: var(--f-titulo);
	font-size: 64px;
	font-weight: 800;
	line-height: .95;
	color: var(--tema-acento);
	text-transform: uppercase;
}

.destacados__mascota-wrap {
	position: relative;
	margin-top: auto;
}
.destacados__mascota {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 0 0 var(--radio-card) var(--radio-card);
}

/* Vineta: aparece al pasar el raton por el perrito. */
.destacados__vineta {
	position: absolute;
	left: 50%;
	/* A la altura de los ojos; puede sobresalir del panel sin problema. */
	bottom: 52%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	max-width: 200px;
	padding: 12px 16px;
	border: 2px solid var(--tema-acento);
	border-radius: 18px 18px 18px 4px;
	background-color: var(--c-blanco);
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	line-height: 1.3;
	color: var(--c-negro);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 10px);
	transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
}

.destacados__mascota-wrap:hover .destacados__vineta,
.destacados__mascota-wrap:focus-within .destacados__vineta {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.destacados__emoji {
	width: 28px;
	height: auto;
	flex: 0 0 auto;
}

/* El boton se apoya sobre la parte baja de la foto. */
.destacados__boton {
	position: absolute;
	left: 50%;
	bottom: 22px;
	z-index: 3;
	transform: translateX(-50%);
	white-space: nowrap;
}

.destacados__grid {
	display: grid;
	grid-template-columns: subgrid;
	grid-column: span 2;
	gap: 24px;
}
/* Respaldo para navegadores sin subgrid. */
@supports not (grid-template-columns: subgrid) {
	.destacados__grid { grid-template-columns: repeat(2, 1fr); }
}

/* De tablet hacia abajo el panel se reduce al titulo: sin tarjeta de fondo,
   sin foto y sin vineta (que ademas necesitaria un raton que no hay). */
@media (max-width: 1024px) {
	.destacados__wrapper { grid-template-columns: 1fr 1fr; }
	.destacados__panel   { grid-column: span 2; }
	.destacados__grid    { grid-column: span 2; }
	.destacados__titulo-fuerte { font-size: 48px; }

	.destacados__panel {
		background-color: transparent;
		border-radius: 0;
	}
	.destacados__titulo { padding: 0 0 4px; }
	.destacados__mascota-wrap { display: none; }

	/* Sin foto debajo, el boton deja de flotar. */
	.destacados__boton {
		position: static;
		transform: none;
		align-self: center;
		margin-top: 16px;
	}
}

@media (max-width: 767px) {
	.destacados__wrapper { grid-template-columns: 1fr; padding-top: 40px; }
	.destacados__panel,
	.destacados__grid    { grid-column: auto; }
	.destacados__grid    { grid-template-columns: 1fr; }

}

/* --- Equipo ---------------------------------------------------------------- */
.equipo__wrapper { padding-block: 70px; }

.equipo__cabecera {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 30px;
	text-align: center;
}

.equipo__titulo-suave {
	display: block;
	font-family: var(--f-titulo);
	font-size: var(--fz-h2);
	font-weight: 400;
	line-height: 1.1;
	color: var(--c-negro);
}

.equipo__titulo-fuerte {
	display: block;
	font-family: var(--f-titulo);
	font-size: 58px;
	font-weight: 800;
	line-height: 1;
	color: var(--c-terracota);
}

/* La franja de color arranca a media altura de las fotos. */
.equipo__lista {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	padding: 0 30px 40px;
}
.equipo__lista::before {
	content: "";
	position: absolute;
	inset: 28% 0 0;
	z-index: 0;
	border-radius: 32px;
	background-color: var(--bg-verde);
}

.card-equipo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.card-equipo__media { width: 100%; }
.card-equipo__media img {
	/* Sin recorte ni redondeo: la foto se ve entera y con su proporcion. */
	width: 100%;
	height: auto;
}

.card-equipo__cuerpo { padding-top: 18px; }

.card-equipo__nombre {
	font-family: var(--f-titulo);
	font-size: 25px;
	font-weight: 800;
	line-height: 1.1;
	color: var(--c-negro);
}

.card-equipo__cargo {
	margin-top: 6px;
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 400;
	line-height: 1.3;
	color: var(--c-texto);
}

/* Etiqueta blanca con el icono y el estado. */
.card-equipo__estado {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	/* 2px mas arriba que abajo, como el resto de pastillas: la Varta deja
	   hueco de sobra bajo la linea base. */
	padding: 10px 16px 6px;
	border-radius: 10px;
	background-color: var(--c-blanco);
	font-family: var(--f-texto);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: .4px;
}
.card-equipo__estado i { font-size: 15px; }

.card-equipo__estado--adoptado  { color: var(--c-terracota); }
.card-equipo__estado--rescatado { color: var(--c-terracota); }

@media (max-width: 1024px) {
	.equipo__lista { grid-template-columns: repeat(2, 1fr); gap: 30px 20px; padding-inline: 20px; }
	.equipo__lista::before { inset: 14% 0 0; }
	.equipo__titulo-fuerte { font-size: 46px; }
	.card-equipo__nombre { font-size: 21px; }
}

@media (max-width: 767px) {
	.equipo__wrapper { padding-block: 40px; }
	.equipo__titulo-fuerte { font-size: var(--fz-h3); }
	.equipo__lista { gap: 24px 16px; padding: 0 16px 28px; }
	.equipo__lista::before { inset: 10% 0 0; border-radius: var(--radio-card); }
	.card-equipo__nombre { font-size: 18px; }
	.card-equipo__cargo,
	.card-equipo__estado { font-size: 14px; }
}

/* --- Fila de categoria en carrusel ----------------------------------------- */
/* Cada fila puede ir en un color de la paleta: el acento tinta el icono y el
   texto, y el fondo es el que llevan el icono y los botones. Las tarjetas de
   producto que caen dentro tambien leen estas dos variables. */
.fila-cat {
	--tema-acento:  var(--c-terracota);
	--tema-fondo:   var(--bg-verde);
	--tema-circulo: var(--bg-verde-20);
}
.fila-cat--terracota {
	--tema-acento:  var(--c-terracota);
	--tema-fondo:   var(--bg-terracota);
	--tema-circulo: var(--bg-terracota-20);
}

.fila-cat__wrapper {
	padding-block: 60px;
}

.fila-cat__cabecera {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 24px;
}

.fila-cat__icono {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background-color: var(--tema-fondo);
	font-size: 22px;
	color: var(--tema-acento);
}

.fila-cat__titulo {
	font-family: var(--f-titulo);
	font-size: var(--fz-h3);
	font-weight: 800;
	line-height: 1.1em;
	color: var(--c-negro);
}
.fila-cat__titulo a:hover { color: var(--tema-acento); }

/* Titulo y contador comparten linea base, no el centro de la caja. */
.fila-cat__encabezado {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 4px 10px;
}

.fila-cat__total {
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 400;
	line-height: 1.2;
	color: var(--c-texto);
	white-space: nowrap;
}

/* "Ver todos" y las flechas se van juntos al extremo opuesto del titulo. */
.fila-cat__acciones {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.fila-cat__todos {
	display: inline-flex;
	align-items: center;
	/* 3px menos abajo que arriba: la Varta deja hueco de sobra bajo la linea
	   base y el texto se veia caido. Suman los mismos 44px de las flechas. */
	padding: 16px 22px 13px;
	border: 1px solid transparent;
	border-radius: 999px;
	background-color: var(--tema-acento);
	font-family: var(--f-texto);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	color: var(--c-blanco);
	white-space: nowrap;
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.fila-cat__todos:hover {
	border-color: var(--tema-acento);
	background-color: var(--tema-fondo);
	color: var(--tema-acento);
}

.fila-cat__controles {
	display: flex;
	gap: 10px;
}
.fila-cat__controles[hidden] { display: none; }

.fila-cat__flecha {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 50%;
	background-color: var(--tema-fondo);
	font-size: 20px;
	color: var(--tema-acento);
	cursor: pointer;
	transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}
.fila-cat__flecha:hover:not([disabled]) {
	border-color: var(--tema-acento);
	background-color: var(--tema-acento);
	color: var(--c-blanco);
}
.fila-cat__flecha[disabled] {
	opacity: .35;
	cursor: default;
}

/* La pista se arrastra sola; las flechas solo la empujan. */
.fila-cat__pista {
	--fila-cols: 3;
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	/* Hueco para que la tarjeta levantada al pasar el raton no se recorte. */
	padding-block: 6px;
	scrollbar-width: none;
}
.fila-cat__pista::-webkit-scrollbar { display: none; }

.fila-cat__item {
	flex: 0 0 calc((100% - (var(--fila-cols) - 1) * 24px) / var(--fila-cols));
	scroll-snap-align: start;
}

@media (max-width: 1024px) {
	.fila-cat__wrapper { padding-block: 44px; }
	.fila-cat__pista { --fila-cols: 2; }
}

@media (max-width: 767px) {
	.fila-cat__wrapper { padding-block: 36px; }
	/* Los cuatro elementos no caben en una linea: el titulo arriba y las
	   acciones debajo, alineadas a la izquierda. */
	.fila-cat__cabecera { flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
	.fila-cat__acciones { margin-left: 0; width: 100%; }
	.fila-cat__todos { padding: 13px 18px 11px; font-size: 14px; }
	.fila-cat__controles { margin-left: auto; }
	.fila-cat__icono { width: 38px; height: 38px; font-size: 18px; }
	.fila-cat__flecha { width: 38px; height: 38px; font-size: 17px; }
	/* Se asoma la siguiente tarjeta: asi se ve que la fila sigue. */
	.fila-cat__pista { --fila-cols: 1.15; gap: 16px; }
	.fila-cat__item { flex-basis: calc((100% - (var(--fila-cols) - 1) * 16px) / var(--fila-cols)); }
}

/* --- Garantías ------------------------------------------------------------- */
.garantias {
	border-top: 1px solid var(--c-borde-calido);
	border-bottom: 1px solid var(--c-borde-calido);
	background-color: var(--bg-amarillo);
}

.garantias__wrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	padding-block: 22px;
}

.garantia {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-inline: 24px;
}

/* Separadores entre bloques, como lineas finas. */
.garantia + .garantia {
	border-inline-start: 1px solid rgba(36, 36, 36, .12);
}

.garantia__icono {
	font-size: 40px;
	line-height: 1;
	color: var(--c-terracota);
	flex: 0 0 auto;
}

.garantia__titulo {
	font-family: var(--f-texto);
	font-size: var(--fz-parrafo-xs);
	font-weight: 700;
	line-height: 1.3;
	color: var(--c-negro);
}


/* En tablet se mantienen los tres en fila: solo se aprieta el espaciado. */
@media (max-width: 1024px) {
	.garantias__wrapper { padding-block: 18px; }
	.garantia { gap: 12px; padding-inline: 14px; }
	.garantia__icono { font-size: 32px; }
	.garantia__titulo { font-size: 14px; }
}

/* En movil: los tres en una fila, icono arriba y titulo debajo. */
@media (max-width: 767px) {
	.garantias__wrapper {
		grid-template-columns: repeat(3, 1fr);
		gap: 0;
		padding-block: 18px;
	}

	.garantia {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding-inline: 8px;
		text-align: center;
	}

	.garantia + .garantia {
		border-top: 0;
		padding-top: 0;
		border-inline-start: 1px solid rgba(36, 36, 36, .12);
	}

	.garantia__icono { font-size: 30px; }

	.garantia__titulo {
		font-size: 14px;
		line-height: 1.25;
	}

}

/* --- Responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.hero__wrapper        { grid-template-columns: 1fr; }
	.hero__imagen img     { display: block; max-width: 400px; margin-inline: auto; }
	.destacados__fila     { grid-template-columns: 1fr; }
	.destacados__grid--tres { grid-template-columns: repeat(2, 1fr); }
	.equipo__grid         { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
	/* Apilado, el contenido necesita mas alto del que darian 50vh. */
	.hero { min-height: 0; }

	.hero__wrapper { grid-template-columns: 1fr; padding-block: 40px; }

	/* El titular se adapta al ancho de la pantalla: "¡ORGULLOSAMENTE" mide
	   6,64em en Truculenta 800; dividir entre 7.5 deja un ~10 % de aire. */
	.hero__titulo { font-size: calc((100vw - 2 * var(--wrapper-pad)) / 7.5); }
	.hero__antetitulo { font-size: var(--fz-h4); }

	.destacados__wrapper,
	.equipo__wrapper { padding-block: 40px; }

	.destacados__grid--dos,
	.destacados__grid--tres { grid-template-columns: 1fr; }


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