/* Café Quiz + Carta — estilos */
.cafe-carta,
.cafe-quiz,
.cafe-lightbox{
	--cq-negro:#111111;        /* negro, texto y acento */
	--cq-tinta:#111111;        /* texto principal */
	--cq-papel:#f5f5f5;        /* gris muy claro, fondo de contenedores */
	--cq-crema:#e2e2e2;        /* gris claro, bordes y líneas */
	--cq-oliva:#111111;        /* acento = negro puro */
	--cq-oliva-hi:#3d3d3d;
	--cq-cobre:#111111;        /* precios en negro */
	--cq-gris:#6b6b6b;         /* gris medio, texto secundario */
	--cq-gris-osc:#3d3d3d;     /* gris oscuro */
	--cq-radio:6px;            /* radio base de esquinas */
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--cq-tinta);
	max-width: 960px;
	margin: 0 auto;
}
.cafe-lightbox{ max-width:none; }

/* ---------- CARTA ---------- */
.cafe-carta__filtros{
	display:flex; flex-wrap:wrap; gap:.5rem;
	position:sticky; top:0; z-index:5;
	padding:.75rem 0; margin-bottom:1rem;
	background:var(--cq-papel);
	border-bottom:1px solid var(--cq-crema);
}
.cafe-chip{
	border:1px solid var(--cq-crema);
	background:transparent; color:var(--cq-gris);
	padding:.4rem .9rem; border-radius:999px;
	font-size:.85rem; cursor:pointer; transition:all .15s ease;
}
.cafe-chip:hover{ color:var(--cq-tinta); border-color:var(--cq-oliva); }
.cafe-chip.is-active{ background:var(--cq-oliva); color:#fff; border-color:var(--cq-oliva); }

.cafe-carta__seccion{ margin:0 0 2.5rem; }
.cafe-carta__titulo{
	font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--cq-gris); margin:0 0 1rem;
	padding-bottom:.4rem; border-bottom:1px solid var(--cq-crema);
}
.cafe-carta__items{ display:grid; gap:1rem; }
@media(min-width:640px){ .cafe-carta__items{ grid-template-columns:1fr 1fr; } }

.cafe-item{ display:flex; gap:.9rem; align-items:flex-start; }
.cafe-item__foto{
	flex:0 0 76px; width:76px; height:76px; border-radius:var(--cq-radio);
	background-size:cover; background-position:center; background-color:var(--cq-crema);
}
.cafe-item__cuerpo{ flex:1; min-width:0; }
.cafe-item__cabecera{
	display:flex; align-items:baseline; gap:.6rem;
	border-bottom:1px dotted #d8ccbb; padding-bottom:.15rem;
}
.cafe-item__nombre{ font-size:1rem; font-weight:600; margin:0; flex:1; }
.cafe-item__healthy{ color:var(--cq-gris-osc); font-size:.7rem; vertical-align:middle; }
.cafe-item__precio{ color:var(--cq-cobre); font-weight:700; white-space:nowrap; }
.cafe-item__desc{ font-size:.85rem; color:var(--cq-gris); margin:.35rem 0 0; line-height:1.45; }
.cafe-item__extras{ font-size:.75rem; color:var(--cq-gris); margin:.3rem 0 0; font-style:italic; }

/* ---------- QUIZ ---------- */
.cafe-quiz{
	background:var(--cq-papel);
	border:1px solid var(--cq-crema);
	border-radius:var(--cq-radio);
	padding:2rem 1.5rem;
}
.cafe-quiz__paso{ display:none; }
.cafe-quiz__paso.is-active{ display:block; animation:cq-in .25s ease; }
@keyframes cq-in{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }

.cafe-quiz__num{
	font-size:.85rem; font-weight:700; letter-spacing:.08em;
	color:var(--cq-negro); margin:0 0 .4rem; text-align:left;
}
.cafe-quiz__pregunta{
	font-size:1.4rem; font-weight:600; text-align:left;
	margin:0 0 1.5rem; line-height:1.3;
}
.cafe-quiz__ops{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:flex-start; }
.cafe-quiz__op{
	flex:1 1 auto; min-width:120px; max-width:220px;
	border:1.5px solid var(--cq-crema); background:#fff;
	padding:1rem 1.25rem; border-radius:var(--cq-radio);
	font-size:1rem; color:var(--cq-tinta); cursor:pointer;
	transition:all .15s ease;
}
.cafe-quiz__op:hover{ border-color:var(--cq-oliva); background:#fff; transform:translateY(-2px); }
.cafe-quiz__op.is-picked{ border-color:var(--cq-oliva); background:var(--cq-oliva); color:#fff; }

.cafe-quiz__nav{ display:flex; align-items:center; gap:1rem; margin-top:2rem; }
.cafe-quiz__atras{
	flex:0 0 auto; background:transparent; border:none;
	color:var(--cq-gris); cursor:pointer; font-size:.9rem;
	padding:.3rem .2rem; transition:color .15s ease;
}
.cafe-quiz__atras:hover{ color:var(--cq-tinta); }
.cafe-quiz__atras[hidden]{ display:none; }
.cafe-quiz__paso-label{ flex:0 0 auto; font-size:.8rem; color:var(--cq-gris); white-space:nowrap; }
.cafe-quiz__progreso{ flex:1; height:4px; background:var(--cq-crema); border-radius:999px; overflow:hidden; }
.cafe-quiz__barra{ display:block; height:100%; background:var(--cq-oliva); transition:width .3s ease; }

/* Resultado */
.cafe-quiz__resultado{ text-align:center; }
.cafe-quiz__res-titulo{ font-size:1.5rem; margin:0 0 1.5rem; }
.cafe-quiz__res-grid{ text-align:left; }

/* Secciones "Para comer" / "Para beber" */
.cafe-res-seccion{ margin:0 0 1.75rem; }
.cafe-res-seccion__titulo{
	font-size:.8rem; letter-spacing:.14em; text-transform:uppercase;
	color:var(--cq-gris); margin:0 0 1rem;
	padding-bottom:.4rem; border-bottom:1px solid var(--cq-crema);
}
.cafe-res-seccion__items{ display:grid; gap:1rem; }
@media(min-width:640px){ .cafe-res-seccion__items{ grid-template-columns:1fr 1fr; } }

/* Item horizontal, mismo formato que la carta */
.cafe-res-item{ display:flex; gap:.9rem; align-items:flex-start; }
.cafe-res__foto{
	flex:0 0 76px; width:76px; height:76px; border-radius:var(--cq-radio);
	background-size:cover; background-position:center; background-color:var(--cq-crema);
}
.cafe-res__foto--vacia{ background-color:var(--cq-crema); }
.cafe-res-item__cuerpo{ flex:1; min-width:0; }
.cafe-res-item__cabecera{
	display:flex; align-items:baseline; gap:.6rem;
	border-bottom:1px dotted #d8ccbb; padding-bottom:.15rem;
}
.cafe-res-item__nombre{ font-size:1rem; font-weight:600; margin:0; flex:1; }
.cafe-res__precio{ color:var(--cq-cobre); font-weight:700; white-space:nowrap; }
.cafe-res__desc{ font-size:.85rem; color:var(--cq-gris); margin:.35rem 0 0; line-height:1.45; }
.cafe-res__motivo{
	font-size:.78rem; color:var(--cq-gris-osc);
	background:#ececec; border-radius:var(--cq-radio);
	padding:.35rem .55rem; margin:.4rem 0 0; line-height:1.35;
}
.cafe-res__extras{ font-size:.72rem; color:var(--cq-gris); font-style:italic; margin:.3rem 0 0; }

.cafe-quiz__aviso{
	background:#e8e8e8; color:var(--cq-cobre);
	border-radius:var(--cq-radio); padding:.7rem 1rem; margin:0 0 1.25rem;
	font-size:.85rem; line-height:1.45; text-align:left;
}
.cafe-quiz__aviso[hidden]{ display:none; }

.cafe-quiz__acciones{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.25rem; }
.cafe-quiz__acciones button{
	background:#fff; border:1.5px solid var(--cq-crema);
	color:var(--cq-tinta); padding:.55rem 1.1rem; border-radius:999px;
	cursor:pointer; font-size:.85rem; transition:all .15s ease;
}
.cafe-quiz__acciones button:hover{ border-color:var(--cq-oliva); }
.cafe-quiz__acciones button[hidden]{ display:none; }

.cafe-quiz__reset{
	margin-top:1.75rem; background:transparent; border:1.5px solid var(--cq-crema);
	color:var(--cq-gris); padding:.7rem 1.5rem; border-radius:999px;
	cursor:pointer; font-size:.9rem; transition:all .15s ease;
}
.cafe-quiz__reset:hover{ border-color:var(--cq-oliva); color:var(--cq-tinta); }

.cafe-quiz__vacio{ text-align:center; color:var(--cq-gris); }

@media(prefers-reduced-motion:reduce){
	.cafe-quiz__paso.is-active{ animation:none; }
	.cafe-quiz__op:hover{ transform:none; }
}

/* ---------- Fotos clicables + Lightbox ---------- */
.cafe-item__foto[data-full],
.cafe-res__foto[data-full]{ cursor:zoom-in; }
.cafe-item__foto[data-full]:focus-visible,
.cafe-res__foto[data-full]:focus-visible{ outline:2px solid var(--cq-oliva); outline-offset:2px; }

.cafe-lightbox{
	position:fixed; inset:0; z-index:9999;
	display:flex; align-items:center; justify-content:center;
	padding:5vw;
}
.cafe-lightbox[hidden]{ display:none; }
.cafe-lightbox__fondo{
	position:absolute; inset:0; background:rgba(20,16,14,.82);
	cursor:zoom-out; animation:cq-fade .2s ease;
}
@keyframes cq-fade{ from{opacity:0;} to{opacity:1;} }
.cafe-lightbox__marco{
	position:relative; margin:0; max-width:800px;
	display:flex; flex-direction:column; align-items:center;
	animation:cq-pop .2s ease;
	pointer-events:none; /* deja pasar clics al fondo salvo en la imagen/botón */
}
@keyframes cq-pop{ from{opacity:0; transform:scale(.96);} to{opacity:1; transform:none;} }
.cafe-lightbox__wrap{
	position:relative; width:fit-content; max-width:100%;
	pointer-events:auto; /* la imagen y su botón sí reciben clics */
}
.cafe-lightbox__img{
	display:block; max-width:100%; max-height:80vh; width:auto; height:auto;
	border-radius:var(--cq-radio); box-shadow:0 20px 60px rgba(0,0,0,.4);
	background:#fff;
}
.cafe-lightbox__pie{
	color:#fff; font-size:.95rem; margin-top:.9rem; text-align:center;
	font-family:ui-sans-serif,system-ui,sans-serif;
	pointer-events:none;
}
.cafe-lightbox__cerrar{
	position:absolute; top:10px; right:10px;
	width:38px; height:38px; border-radius:50%;
	background:rgba(255,255,255,.92); border:none; color:var(--cq-tinta);
	font-size:1.5rem; line-height:1; cursor:pointer;
	box-shadow:0 2px 10px rgba(0,0,0,.35);
	display:flex; align-items:center; justify-content:center;
	pointer-events:auto; z-index:2;
}
.cafe-lightbox__cerrar:hover{ background:#fff; }