/* ═══════════════════════════════════════════════════════════
   Solaria — portada: foto principal y categorías
   CSS propio, escrito a mano. No depende de Tailwind, así que
   se puede editar sin recompilar nada.
   ═══════════════════════════════════════════════════════════ */

/* ── Color que faltaba de la paleta oficial ───────────────── */
:root {
	--color-rosa-seco: #b36c60;   /* Dusty Rose */
	--color-ambar: #e8a33d;
	--color-terracota: #912c00;   /* el del paisaje de la marca */
}

/* ═══════════════════════════════════════════════════════════
   FOTO PRINCIPAL
   ═══════════════════════════════════════════════════════════ */

.portada {
	position: relative;
	min-height: min(86vh, 760px);
	display: grid;
	place-items: center;
	overflow: hidden;
	isolation: isolate;
	background: var(--color-brasa);
}

/* La foto. Si algún día se quita, debajo queda el cielo
   degradado y la portada se ve igual de bien. */
.portada__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 62%;
	z-index: -4;
}

/* Cielo de otoño en los colores de la marca. */
.portada__cielo {
	position: absolute;
	inset: 0;
	z-index: -5;
	background:
		radial-gradient(ellipse 120% 80% at 50% 115%, #c4551f 0%, transparent 60%),
		linear-gradient(178deg, #4a0f0a 0%, var(--color-brasa) 38%, #8f2410 72%, #b8481c 100%);
}

/* La foto ya no necesita tinte: el texto va sobre su propio
   panel crema, así que la fotografía se ve limpia. */

/* El sol de la marca, apenas insinuado. */
.portada__sol {
	position: absolute;
	top: 8%;
	right: 6%;
	width: clamp(190px, 30vw, 420px);
	opacity: .18;
	z-index: -2;
	pointer-events: none;
	animation: portada-sol 60s linear infinite;
}

@keyframes portada-sol {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.portada__sol { animation: none; }
}

/* Un velo muy leve, solo para que la foto no compita con el
   panel. La fotografía se sigue viendo entera. */
.portada::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom, rgb(30 6 4 / .12) 0%, transparent 35%, rgb(30 6 4 / .16) 100%);
}

/* ── Panel de texto ───────────────────────────────────────
   Recuadro crema translúcido, ajustado al texto. Va en
   terracota para que resalte sobre el crema. */
.portada__texto {
	position: relative;
	z-index: 1;
	text-align: center;
	max-width: 38rem;
	margin: 2rem 1.25rem;
	padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
	color: var(--color-terracota);
	background: rgb(253 248 240 / .82);
	backdrop-filter: blur(12px) saturate(1.08);
	-webkit-backdrop-filter: blur(12px) saturate(1.08);
	border: 1px solid rgb(145 44 0 / .16);
	box-shadow: 0 24px 60px -22px rgb(30 6 4 / .38);
}

/* Si el navegador no soporta el desenfoque, se compensa con
   un crema más sólido para no perder legibilidad. */
@supports not (backdrop-filter: blur(10px)) {
	.portada__texto { background: rgb(253 248 240 / .95); }
}

.portada__antetitulo {
	color: var(--color-terracota);
	opacity: .85;
	margin-bottom: 1rem;
}

.portada__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	line-height: .95;
	letter-spacing: .01em;
	font-size: clamp(2.8rem, 8vw, 5.5rem);
	margin: 0;
	color: var(--color-terracota);
}

.portada__bajada {
	font-family: var(--font-texto);
	font-size: clamp(1rem, 1.8vw, 1.2rem);
	line-height: 1.55;
	margin: 1.1rem auto 0;
	max-width: 34ch;
	color: var(--color-terracota);
	opacity: .9;
}

/* Botón sólido en terracota: contrasta con el panel crema. */
.boton-contorno {
	display: inline-block;
	margin-top: 2rem;
	padding: .95rem 2.6rem;
	border: 1px solid var(--color-terracota);
	background: var(--color-terracota);
	color: var(--color-birch);
	text-decoration: none;
	transition: background-color .4s cubic-bezier(.16,1,.3,1),
	            color .4s cubic-bezier(.16,1,.3,1);
}

.boton-contorno:hover,
.boton-contorno:focus-visible {
	background: transparent;
	color: var(--color-terracota);
}

/* Flechitas y puntos del carrusel de la referencia: aquí se
   quedan como indicador estático hasta que haya varias fotos. */
.portada__puntos {
	position: absolute;
	bottom: 2.2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: .7rem;
	z-index: 2;
}

.portada__punto {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	border: 1px solid rgb(244 212 166 / .7);
	background: transparent;
	padding: 0;
}

.portada__punto[aria-current="true"] {
	background: var(--color-birch);
	width: 9px;
	height: 9px;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORÍAS
   ═══════════════════════════════════════════════════════════ */

.categorias {
	padding-block: clamp(3.5rem, 8vw, 6rem);
	background: var(--color-crema);
}

.categorias__intro {
	text-align: center;
	max-width: 44rem;
	margin: 0 auto clamp(2.5rem, 5vw, 4rem);
}

.categorias__antetitulo {
	color: var(--color-baya);
	display: block;
	margin-bottom: 1rem;
}

.categorias__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(2.1rem, 5.5vw, 3.4rem);
	line-height: 1.05;
	color: var(--color-brasa);
	margin: 0;
}

.categorias__bajada {
	font-family: var(--font-texto);
	color: var(--color-tinta);
	opacity: .85;
	line-height: 1.6;
	margin: 1.1rem auto 0;
	max-width: 46ch;
}

.categorias__rejilla {
	display: grid;
	gap: 1.15rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.categorias__rejilla { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.categorias__rejilla { grid-template-columns: repeat(3, 1fr); }
}

.categoria {
	position: relative;
	display: block;
	overflow: hidden;
	text-decoration: none;
	aspect-ratio: 4 / 5;
	isolation: isolate;
	background: var(--color-brasa);
}

@media (min-width: 1024px) {
	.categoria { aspect-ratio: 3 / 4; }
}

.categoria__foto {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
	transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}

.categoria:hover .categoria__foto,
.categoria:focus-visible .categoria__foto {
	transform: scale(1.06);
}

/* Fondo de marca mientras no hay foto: cada categoría con su
   propio tono de la paleta, más el sol al fondo. */
.categoria__fondo {
	position: absolute;
	inset: 0;
	z-index: -3;
	background-color: var(--tono, #66140e);
	background-image:
		radial-gradient(circle at 72% 22%, rgb(255 255 255 / .12) 0%, transparent 52%),
		linear-gradient(200deg, rgb(255 255 255 / .07) 0%, rgb(0 0 0 / .28) 100%);
}

.categoria__marca {
	position: absolute;
	right: -14%;
	top: 6%;
	width: 78%;
	opacity: .17;
	z-index: -2;
	pointer-events: none;
	transition: transform 1.4s cubic-bezier(.16,1,.3,1);
}

.categoria:hover .categoria__marca {
	transform: rotate(22deg) scale(1.05);
}

.categoria::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgb(30 6 4 / .78) 0%, rgb(30 6 4 / .28) 42%, transparent 72%);
}

.categoria__texto {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 1.6rem 1.5rem 1.7rem;
	color: var(--color-birch);
}

.categoria__nombre {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.65rem, 3.2vw, 2.3rem);
	line-height: 1.05;
	margin: 0;
	color: var(--color-birch);
}

.categoria__nota {
	font-family: var(--font-texto);
	font-size: .875rem;
	line-height: 1.45;
	margin: .5rem 0 0;
	opacity: .8;
	max-width: 30ch;
}

.categoria__enlace {
	display: inline-block;
	margin-top: 1rem;
}
/* La aparición suave al bajar (`data-reveal`, con su retraso
   escalonado en --retraso) ya viene definida en Base.css y la
   mueve el observador que está al final del HTML. Aquí no se
   redefine para no pelear con ella. */


/* ═══════════════════════════════════════════════════════════
   SUBPÁGINAS DE CATEGORÍA
   ═══════════════════════════════════════════════════════════ */

/* Portada de sección: más baja que la de la portada, y en el
   color de la categoría hasta que haya foto. */
.portada--seccion {
	min-height: min(56vh, 480px);
	background: var(--tono, var(--color-brasa));
}

.portada--seccion .portada__cielo {
	background:
		radial-gradient(ellipse 95% 70% at 50% 112%, rgb(255 255 255 / .13) 0%, transparent 62%),
		linear-gradient(180deg, rgb(0 0 0 / .2) 0%, transparent 48%, rgb(0 0 0 / .3) 100%);
}

.portada--seccion .portada__texto { max-width: 40rem; }
.portada--seccion .portada__titulo { font-size: clamp(2.4rem, 6vw, 4.2rem); }

/* Rastro de navegación */
.miga {
	background: var(--color-crema);
	border-bottom: 1px solid rgb(102 20 14 / .08);
}

.miga__lista {
	display: flex;
	align-items: center;
	gap: .6rem;
	flex-wrap: wrap;
	padding-block: .95rem;
	margin: 0;
	list-style: none;
	color: var(--color-tinta);
}

.miga a { color: var(--color-terracota); text-decoration: none; }
.miga__sep { opacity: .4; }
.miga__actual { opacity: .65; }

/* Bloques de contenido */
.bloque { padding-block: clamp(3rem, 7vw, 5.5rem); }
.bloque--crema { background: var(--color-crema); }
.bloque--lino { background: var(--color-lino, #ede6dc); }

.bloque__cabeza {
	max-width: 44rem;
	margin: 0 auto clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.bloque__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.9rem, 4.5vw, 2.9rem);
	line-height: 1.1;
	color: var(--color-brasa);
	margin: 0;
}

.bloque__texto {
	font-family: var(--font-texto);
	color: var(--color-tinta);
	line-height: 1.65;
	margin: 1rem auto 0;
	max-width: 52ch;
}

/* Pasos */
.pasos {
	display: grid;
	gap: 1.75rem;
	grid-template-columns: 1fr;
	counter-reset: paso;
}

@media (min-width: 768px) {
	.pasos { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
}

.paso { counter-increment: paso; }

.paso__numero {
	font-family: var(--font-display);
	font-size: 2.4rem;
	line-height: 1;
	color: var(--color-terracota);
	opacity: .55;
	display: block;
	margin-bottom: .7rem;
}

.paso__numero:before { content: counter(paso, decimal-leading-zero); }

.paso__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: 1.4rem;
	color: var(--color-brasa);
	margin: 0 0 .5rem;
}

.paso__texto {
	font-family: var(--font-texto);
	color: var(--color-tinta);
	line-height: 1.6;
	margin: 0;
	opacity: .9;
}

/* Llamado final */
.cta {
	background: var(--color-brasa);
	color: var(--color-birch);
	text-align: center;
	padding-block: clamp(3rem, 7vw, 5rem);
}

.cta__titulo {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(1.8rem, 4.5vw, 2.8rem);
	color: var(--color-birch);
	margin: 0;
}

.cta__texto {
	font-family: var(--font-texto);
	color: var(--color-birch);
	opacity: .8;
	line-height: 1.6;
	margin: .9rem auto 0;
	max-width: 46ch;
}

.cta .boton-contorno {
	background: var(--color-birch);
	border-color: var(--color-birch);
	color: var(--color-brasa);
}

.cta .boton-contorno:hover,
.cta .boton-contorno:focus-visible {
	background: transparent;
	color: var(--color-birch);
}