:root {
	--tinta: #1c140f;
	--tinta-suave: #2a1f18;
	--acento: #ff6b4a;
	--acento-oscuro: #e04e2e;
	--oro: #f2b705;
	--oro-oscuro: #c99304;
	--crema: #fdf8f3;
	--superficie: #ffffff;
	--texto: #211a16;
	--gris: #7a6f66;
	--borde: #ece2d6;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
	margin: 0;
	font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
	color: var(--texto);
	background: var(--crema);
	line-height: 1.6;
	padding-bottom: env(safe-area-inset-bottom, 0);
}
h1, h2, .marca span { font-family: "Fraunces", Georgia, serif; letter-spacing: -0.015em; }
a { -webkit-tap-highlight-color: transparent; }

/* Aparición al cargar y al hacer scroll (Intersection Observer en sitio.js) */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
[data-reveal].visible { opacity: 1; transform: translateY(0); }
@keyframes aparecer { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
main > article, main > h1 { animation: aparecer .45s cubic-bezier(.16,1,.3,1) both; }

.ancho { max-width: 1080px; margin: 0 auto; padding: 0 16px; }

.saltar-al-contenido {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: #fff; color: var(--acento-oscuro); padding: 10px 16px; border-radius: 0 0 8px 0;
}
.saltar-al-contenido:focus { left: 0; }

/* Encabezado: oscuro y moderno, con fondo esmerilado */
.cabecera {
	background: rgba(28,20,15,.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	color: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 1px solid rgba(255,255,255,.08);
}
.barra-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; }
.marca { color: #fff; font-weight: 700; font-size: 1.1rem; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.marca .bandera { border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(255,255,255,.3); }
.boton-menu, .boton-buscar {
	background: rgba(255,255,255,.08);
	border: none; color: #fff; font-size: 1.1rem; line-height: 1;
	width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
	display: flex; align-items: center; justify-content: center; flex-shrink: 0;
	transition: background .15s ease, transform .1s ease;
}
@media (hover: hover) and (pointer: fine) {
	.boton-menu:hover, .boton-buscar:hover { background: rgba(255,255,255,.18); }
}
.boton-menu:active, .boton-buscar:active { transform: scale(.93); }

/* Buscador desplegable */
.panel-busqueda {
	background: var(--tinta); border-top: 1px solid rgba(255,255,255,.1);
	overflow: hidden; max-height: 0; transition: max-height .25s ease;
}
.panel-busqueda:not([hidden]) { max-height: 70vh; }
.panel-busqueda .ancho { padding: 14px 16px; }
#campo-busqueda {
	width: 100%; padding: 13px 16px; font-size: 1rem; border-radius: 12px;
	border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.07); color: #fff;
}
#campo-busqueda::placeholder { color: rgba(255,255,255,.45); }
#campo-busqueda:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.resultados-busqueda { list-style: none; margin: 8px 0 0; padding: 0; max-height: 55vh; overflow-y: auto; }
.resultados-busqueda li { border-bottom: 1px solid rgba(255,255,255,.08); }
.resultados-busqueda a { display: block; padding: 11px 4px; color: #fff; text-decoration: none; }
.resultados-busqueda a:active { color: var(--acento); }
.resultados-busqueda .sin-resultados { padding: 10px 4px; color: rgba(255,255,255,.5); }

/* Menú de categorías (panel) */
.menu-categorias {
	position: fixed; inset: 0 18% 0 0; background: var(--superficie); z-index: 25; overflow-y: auto;
	box-shadow: 4px 0 30px rgba(0,0,0,.25);
	transform: translateX(-100%); transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.menu-categorias:not([hidden]) { transform: translateX(0); }
.menu-categorias .ancho { padding: 20px 22px 30px; display: flex; flex-direction: column; }
.menu-categorias a { color: var(--texto); text-decoration: none; padding: 11px 6px; border-bottom: 1px solid var(--borde); font-weight: 500; }
.menu-categorias a:active { color: var(--acento-oscuro); }
.titulo-menu { font-size: 0.76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); margin: 18px 0 2px; font-weight: 600; }
.fondo-menu { position: fixed; inset: 0; background: rgba(15,8,5,.5); z-index: 24; backdrop-filter: blur(2px); }
@media (min-width: 640px) { .menu-categorias { inset: 0 auto 0 0; width: 340px; } }

main { max-width: 780px; margin: 0 auto; padding: 24px 16px 100px; }
@media (min-width: 640px) { main { padding-bottom: 50px; } }

h1 { font-size: 1.7rem; line-height: 1.2; margin: 0.4em 0 0.3em; }
h2 { font-family: "Fraunces", Georgia, serif; font-size: 1.3rem; margin-top: 1.7em; letter-spacing: -0.01em; }

.migas { font-size: 0.85rem; color: var(--gris); margin-bottom: 0.2em; }
.migas a { color: var(--gris); }

.intro { font-size: 1.07rem; max-width: 65ch; }

.portada-receta { width: 100%; height: auto; border-radius: 16px; object-fit: cover; margin: 10px 0; box-shadow: 0 10px 30px rgba(28,20,15,.18); }

.calificacion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 14px; }
.calificacion-estrellas { display: flex; gap: 2px; }
.estrella {
	background: none; border: none; cursor: pointer; font-size: 1.6rem; line-height: 1;
	color: var(--borde); padding: 2px; transition: color .15s, transform .1s;
}
.estrella:hover:not(:disabled) { transform: scale(1.1); }
.estrella.llena, .estrella.previsualiza { color: var(--acento); }
.estrella:disabled { cursor: default; }
.calificacion-texto { font-size: 0.9rem; color: var(--gris); font-weight: 500; }

.datos-receta {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
	padding: 0;
	margin: 18px 0;
	font-size: 0.9rem;
}
.datos-receta li {
	white-space: nowrap; background: var(--superficie); border-radius: 999px; padding: 7px 14px;
	border: 1px solid var(--borde); font-weight: 500;
}

/* Ingredientes y pasos: marcables con un toque, para seguir la receta sin perder el hilo. */
.ingredientes, .preparacion { list-style: none; padding-left: 0; }
.ingredientes li { border-bottom: 1px dashed var(--borde); }
.preparacion { counter-reset: paso; }
.preparacion li { counter-increment: paso; }
.ingredientes li label, .preparacion li label {
	display: flex; align-items: flex-start; gap: 0.75em; cursor: pointer; padding: 0.55em 0;
	-webkit-tap-highlight-color: transparent;
}
.preparacion li label { padding: 0.3em 0 1em; align-items: flex-start; }
.preparacion input[type="checkbox"] { margin-top: 0.1em; }
.ingredientes input[type="checkbox"], .preparacion input[type="checkbox"] {
	appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer; flex-shrink: 0; position: relative;
	transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.ingredientes input[type="checkbox"]:active, .preparacion input[type="checkbox"]:active { transform: scale(.88); }

.ingredientes input[type="checkbox"] {
	width: 20px; height: 20px; margin-top: 0.15em;
	border: 2px solid var(--oro-oscuro); border-radius: 6px; background: #fff;
}
.ingredientes input[type="checkbox"]::before {
	content: ""; position: absolute; inset: 0; color: #fff; font-size: 13px; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
.ingredientes input[type="checkbox"]:checked { background: var(--oro-oscuro); }
.ingredientes input[type="checkbox"]:checked::before { content: "✓"; }
.ingredientes input:checked ~ span { opacity: .5; text-decoration: line-through; text-decoration-color: var(--gris); }

.preparacion input[type="checkbox"] {
	width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--acento); color: #fff;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.92rem;
	box-shadow: 0 3px 8px rgba(224,78,46,.35); border: none;
}
.preparacion input[type="checkbox"]::before { content: counter(paso); }
.preparacion input[type="checkbox"]:checked { background: var(--borde); box-shadow: none; color: var(--gris); }
.preparacion input[type="checkbox"]:checked::before { content: "✓"; color: var(--oro-oscuro); }
.preparacion input:checked ~ span { opacity: .55; text-decoration: line-through; text-decoration-color: var(--gris); }

.ingredientes span, .preparacion span { transition: opacity .2s ease; }
.foto-paso { width: 100%; height: auto; border-radius: 12px; margin: 8px 0 4px 2.9em; max-width: calc(100% - 2.9em); box-shadow: 0 6px 16px rgba(28,20,15,.12); }
@media (max-width: 480px) { .foto-paso { margin-left: 0; max-width: 100%; } }

.recomendacion, .sabias-que {
	background: var(--superficie);
	border-left: 4px solid var(--oro);
	border-radius: 10px;
	padding: 14px 16px;
	margin-top: 1.2em;
}

.grilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 12px; }
@media (min-width: 560px) { .grilla { grid-template-columns: repeat(3, 1fr); } }

.tarjeta {
	background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; overflow: hidden;
	display: flex; flex-direction: column; text-decoration: none; color: inherit;
	transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease;
}
@media (hover: hover) and (pointer: fine) {
	.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(28,20,15,.14); }
	.tarjeta:hover .foto { transform: scale(1.07); }
	.tarjeta:hover .titulo-tarjeta { color: var(--acento-oscuro); }
}
.tarjeta:active { transform: scale(.97); }
.tarjeta .foto { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.16,1,.3,1); }
.tarjeta .foto-vacia { display: flex; align-items: center; justify-content: center; background: var(--crema); font-size: 2rem; }
.tarjeta .cuerpo { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.tarjeta .titulo-tarjeta { font-size: 0.95rem; font-weight: 600; line-height: 1.3; transition: color .15s ease; }
.tarjeta .tiempo { font-size: 0.78rem; color: var(--gris); }

.grilla-categorias { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	background: var(--superficie); border: 1px solid var(--borde); border-radius: 999px; padding: 7px 15px;
	text-decoration: none; color: var(--texto); font-size: 0.9rem; font-weight: 500;
	transition: background .15s ease, color .15s ease, transform .1s ease;
}
@media (hover: hover) and (pointer: fine) {
	.chip:hover { background: var(--tinta); color: #fff; }
}
.chip:active { transform: scale(.95); }

/* Hero con foto real + efecto Ken Burns sutil (solo transform, GPU) */
.portada-hero {
	position: relative; overflow: hidden;
	text-align: center; padding: 72px 20px; margin: -24px -16px 24px; border-radius: 0 0 28px 28px;
	color: #fff; isolation: isolate;
}
.portada-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background-image: linear-gradient(165deg, rgba(20,12,8,.55), rgba(20,12,8,.82)), var(--foto-portada);
	background-size: cover; background-position: center 35%;
	animation: ken-burns 16s ease-in-out infinite alternate;
}
@keyframes ken-burns { from { transform: scale(1); } to { transform: scale(1.12); } }
.portada-hero h1 { font-size: 2.1rem; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.35); }
.portada-hero p { font-size: 1.05rem; max-width: 46em; margin-left: auto; margin-right: auto; opacity: .95; }

.indice { columns: 1; padding-left: 1.2em; }
@media (min-width: 560px) { .indice { columns: 2; } }
.indice li { break-inside: avoid; }

.pagina ol { padding-left: 1.3em; }
.pagina ol > li > strong:only-child { font-size: 1.05rem; }
.correo-contacto {
	display: inline-block; font-size: 1.1rem; font-weight: 700; color: #fff; background: var(--acento);
	border-radius: 12px; padding: 12px 20px; text-decoration: none; box-shadow: 0 8px 20px rgba(224,78,46,.3);
	transition: transform .1s ease;
}
.correo-contacto:active { transform: scale(.96); }

.paginacion { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; font-size: 0.92rem; }
.paginacion a { color: var(--acento-oscuro); text-decoration: none; font-weight: 600; }
.paginacion span { color: var(--gris); }

/* Barra inferior móvil, tipo app */
.nav-inferior {
	display: none;
}
@media (max-width: 639px) {
	.nav-inferior {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 22;
		background: rgba(28,20,15,.95); backdrop-filter: blur(10px);
		padding: 6px 10px calc(6px + env(safe-area-inset-bottom, 0));
		border-top: 1px solid rgba(255,255,255,.08);
	}
	.nav-inferior button, .nav-inferior a {
		flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
		background: none; border: none; color: rgba(255,255,255,.6); font-size: 0.68rem;
		text-decoration: none; padding: 6px 2px; border-radius: 10px; font-family: inherit;
	}
	.nav-inferior .icono { font-size: 1.25rem; line-height: 1; }
	.nav-inferior button:active, .nav-inferior a:active { transform: scale(.92); }
	.nav-inferior .activo { color: var(--acento); }
}

.pie { background: var(--tinta); color: rgba(255,255,255,.7); margin-top: 40px; }
.pie .ancho { padding: 24px 16px 30px; font-size: 0.85rem; }
.pie strong { color: #fff; }
.enlaces-pie { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 8px 0; }
.enlaces-pie a { color: rgba(255,255,255,.65); text-decoration: none; }
.enlaces-pie a:active { color: var(--acento); }