/* Skål · pantalla del cliente. Primero celular; a partir de 46rem se abre en dos columnas. */

main, .portada__interior, .caminos, .herramientas, .pie, .avisos-pagina, .barra-modo { width: min(100% - 2 * var(--pad), var(--ancho)); margin-inline: auto; }

/* ---------- Portada ---------- */
.portada { padding-top: max(1.5rem, env(safe-area-inset-top)); position: relative; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.portada__interior { text-align: center; padding: 1rem 0 1.5rem; }
.portada__logo { display: block; margin: 0 auto 0.75rem; width: min(78%, 22rem); height: auto; }
.portada__sobre { font-family: var(--f-titulo); font-size: 0.9rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--oro-claro); }
.portada__nombre { font-size: clamp(4rem, 22vw, 8rem); letter-spacing: 0.12em; padding-left: 0.12em; line-height: 1; margin: 0.15em 0 0.2em; color: var(--texto); text-shadow: 0 3px 0 var(--sangre); }
.portada__frase { max-width: 30rem; margin: 0 auto; font-size: 1.05rem; color: var(--texto); }
.portada__horario { margin-top: 0.75rem; font-size: 0.9rem; color: var(--texto-suave); }
.portada--corta .portada__interior { padding-bottom: 1rem; }
.portada--corta .portada__frase { display: none; }
.portada--corta .portada__logo { width: min(48%, 11rem); }

/* ---------- Tres caminos ---------- */
.caminos { padding: 1.75rem 0 1.5rem; }
.caminos__titulo { font-size: 1.15rem; text-align: center; margin-bottom: 1rem; color: var(--oro-claro); }
.caminos__lista { border-top: 1px solid var(--linea-fuerte); }
.camino {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; width: 100%; min-height: 4.75rem;
  padding: 0.8rem 0.25rem; background: none; border: 0; border-bottom: 1px solid var(--linea-fuerte); text-align: left; color: var(--texto);
}
.camino:hover:not([disabled]), .camino:focus-visible { background: var(--superficie); }
.camino__runa { width: 2.1rem; height: 2.1rem; color: var(--brasa-clara); }
.camino__texto { display: grid; gap: 0.1rem; }
.camino__nombre { font-family: var(--f-titulo); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.05em; }
.camino__sub { color: var(--texto-suave); font-size: 0.92rem; line-height: 1.35; }
.camino__flecha { width: 1.6rem; height: 1.6rem; color: var(--oro-claro); transition: transform 0.15s; }
.camino:hover:not([disabled]) .camino__flecha { transform: translateX(4px); }
.camino[disabled] { cursor: not-allowed; }
.camino[disabled] .camino__nombre, .camino[disabled] .camino__runa, .camino[disabled] .camino__flecha { color: var(--texto-suave); }
.caminos__ver { text-align: center; margin-top: 1rem; }
.caminos__ver a { display: inline-flex; align-items: center; min-height: var(--tap); }

/* ---------- Barra del modo elegido y avisos ---------- */
.barra-modo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block: 1rem 0; padding: 0.7rem 1rem; background: var(--superficie); border-left: 4px solid var(--brasa); }
.barra-modo__titulo { font-family: var(--f-titulo); font-weight: 700; letter-spacing: 0.05em; }
.barra-modo__detalle { font-size: 0.9rem; color: var(--texto-suave); }
.avisos-pagina { display: grid; gap: 0.5rem; }
.aviso { margin-top: 1rem; padding: 0.75rem 1rem; background: var(--superficie); border-left: 4px solid var(--oro); }
.aviso--error { border-left-color: var(--sangre); background: #2A1A18; }
.aviso:empty { display: none; }

/* ---------- Buscador y categorías ---------- */
.herramientas { position: sticky; top: 0; z-index: 20; padding: 0.75rem 0 0.25rem; background: var(--fondo); background-image: url("/img/grano.svg"); }
.herramientas::after { content: ""; position: absolute; inset: auto calc(-1 * var(--pad)) 0 calc(-1 * var(--pad)); border-bottom: 1px solid var(--linea); }
.buscador { position: relative; display: flex; align-items: center; }
.buscador__ico { position: absolute; left: 0.85rem; color: var(--texto-suave); pointer-events: none; }
.buscador__campo { width: 100%; min-height: var(--tap); padding: 0.5rem 3rem 0.5rem 2.8rem; background: var(--superficie); border: 2px solid var(--linea-fuerte); border-radius: 0; color: var(--texto); }
.buscador__campo::placeholder { color: var(--texto-suave); opacity: 1; }
.buscador__campo:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 2px var(--fondo), 0 0 0 4px var(--oro-claro); }
.buscador__campo::-webkit-search-cancel-button { display: none; }
.buscador__limpiar { position: absolute; right: 0; width: var(--tap); height: var(--tap); display: grid; place-items: center; background: none; border: 0; color: var(--texto); }
.cats { margin-top: 0.4rem; overflow-x: auto; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cats__lista { display: flex; gap: 0.25rem; width: max-content; }
.cat-link { display: flex; align-items: center; gap: 0.45rem; min-height: var(--tap); padding: 0 0.85rem; color: var(--texto-suave); text-decoration: none; font-family: var(--f-titulo); font-weight: 600; font-size: 0.88rem; letter-spacing: 0.07em; text-transform: uppercase; border-bottom: 3px solid transparent; white-space: nowrap; }
.cat-link:hover { color: var(--texto); }
.cat-link[aria-current="true"] { color: var(--texto); border-bottom-color: var(--brasa); }
.cat-link__runa { width: 1.1rem; height: 1.1rem; color: var(--oro-claro); }

/* ---------- Menú ---------- */
main { padding-bottom: 3rem; outline: none; scroll-margin-top: 7.5rem; }
.estado { padding: 3rem 0; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.estado__error { display: flex; gap: 0.4rem; align-items: center; justify-content: center; }
.vacio { padding: 2.5rem 0; text-align: center; color: var(--texto-suave); }
.categoria { padding-top: 2.5rem; scroll-margin-top: 7.5rem; }
.categoria__cab { display: flex; align-items: center; gap: 0.75rem; padding-bottom: 0.6rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--linea-fuerte); }
.categoria__cab h2 { font-size: clamp(1.5rem, 6vw, 2.1rem); }
.categoria__runa { width: 2rem; height: 2rem; color: var(--brasa-clara); }
.categoria__n { margin-left: auto; color: var(--texto-suave); font-size: 0.85rem; }

.plato__nombre { font-size: 1.15rem; letter-spacing: 0.03em; }
.plato__abrir { display: inline; padding: 0; background: none; border: 0; text-align: left; font: inherit; letter-spacing: inherit; color: var(--texto); }
.plato__abrir::after { content: ""; position: absolute; inset: 0; }   /* toda la fila/ficha abre el detalle */
.plato__abrir:focus-visible { outline-offset: 0; }
.plato__abrir:focus-visible::after { outline: 3px solid var(--oro-claro); outline-offset: -3px; }
.plato__desc { color: var(--texto-suave); font-size: 0.97rem; line-height: 1.45; }
.es-agotado .foto, .es-agotado .plato__desc { filter: grayscale(1); }
.es-agotado .plato__abrir { color: var(--texto-suave); }

.meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1rem; font-size: 0.88rem; color: var(--texto-suave); }
.meta__item { display: inline-flex; align-items: center; gap: 0.3rem; }
.meta__item .ico { width: 1em; height: 1em; }
.meta__estrella { color: var(--oro-claro); }
.meta__suave { color: var(--texto-suave); }
.etiquetas { display: inline-flex; flex-wrap: wrap; gap: 0.35rem; }

.foto { width: 100%; height: 100%; background: var(--superficie); overflow: hidden; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--vacia { display: grid; place-content: center; justify-items: center; gap: 0.5rem; border: 1px dashed var(--linea-fuerte); color: var(--oro); background-color: var(--superficie); background-image: url("/img/grano.svg"); }
.foto__runa { width: 2.6rem; height: 2.6rem; opacity: 0.55; }
.foto__leyenda { font-family: var(--f-titulo); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--texto-suave); }

.precio { font-family: var(--f-titulo); font-weight: 700; font-size: 1.1rem; color: var(--oro-claro); white-space: nowrap; }

/* Me gusta: un toque, 44 px mínimo */
.like { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-width: var(--tap); min-height: var(--tap); padding: 0 0.6rem; background: none; border: 1px solid var(--linea-fuerte); border-radius: 0; color: var(--texto); font-size: 0.95rem; }
.like:hover { border-color: var(--oro); }
.like--on { border-color: var(--brasa-clara); color: var(--brasa-clara); }
.like--on .like__ico { fill: currentColor; }

/* Destacados: ficha grande, foto a un lado */
.destacados { display: grid; gap: 2.25rem; margin-bottom: 1.75rem; }
.destacado { position: relative; display: grid; gap: 1rem; }
.destacado__foto { aspect-ratio: 4 / 3; margin: 0 3px 3px 0; }
.destacado__texto { display: grid; gap: 0.55rem; align-content: start; }
.destacado .plato__nombre { font-size: clamp(1.45rem, 5.5vw, 2rem); }
.destacado .plato__desc { font-size: 1.05rem; color: var(--texto); }
.destacado__pie { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid var(--linea-fuerte); }
.destacado .precio { font-size: 1.45rem; }

/* Lista limpia para el resto */
.lista { display: grid; }
.fila { position: relative; display: grid; grid-template-columns: 4.2rem 1fr auto; gap: 0.2rem 0.9rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--linea); }
.fila:first-child { padding-top: 0; }
.fila__foto { width: 4.2rem; height: 4.2rem; }
.fila__foto .foto__runa { width: 1.6rem; height: 1.6rem; }
.fila__cuerpo { display: grid; gap: 0.25rem; min-width: 0; }
.fila__datos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.8rem; }
.fila__lado { display: grid; justify-items: end; gap: 0.5rem; }

/* ---------- Pie ---------- */
.pie { padding: 1rem 0 7rem; text-align: center; color: var(--texto-suave); font-size: 0.92rem; }
.pie__marca { font-family: var(--f-titulo); font-weight: 700; letter-spacing: 0.3em; font-size: 1.4rem; color: var(--texto); margin: 1.25rem 0 0.5rem; }
.pie__datos { display: grid; gap: 0.25rem; }
.pie__nota { margin-top: 0.75rem; font-style: italic; }

/* ---------- Carrito flotante (B3 lo conecta) ---------- */
.carrito { position: fixed; z-index: 40; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; align-items: center; gap: 0.8rem; min-height: 3.4rem; padding: 0 1.1rem; width: min(100% - 2rem, 26rem); background: var(--brasa-btn); border: 2px solid var(--brasa-clara); color: var(--texto); box-shadow: 0 5px 0 rgba(0, 0, 0, 0.5); font-family: var(--f-titulo); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem; }
.carrito:hover { background: #8F3410; }
.carrito__texto { flex: 1; text-align: left; }
.carrito__n { min-width: 2rem; padding: 0.1rem 0.5rem; background: var(--texto); color: var(--fondo); text-align: center; font-size: 1rem; }

/* ---------- Detalle (hoja inferior en celular, ventana centrada en pantalla grande) ---------- */
.hoja { padding: 0; border: 0; background: var(--superficie); color: var(--texto); width: 100%; max-width: 40rem; max-height: 92vh; max-height: 92dvh; margin: auto auto 0; overflow: hidden; border-top: 3px solid var(--oro); }
.hoja::backdrop { background: rgba(10, 7, 5, 0.82); }
.detalle { position: relative; display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; }
.detalle__scroll { overflow-y: auto; overscroll-behavior: contain; }
.detalle__cerrar { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 3; padding: 0; width: var(--tap); background: var(--fondo); }
.detalle__foto { aspect-ratio: 16 / 10; margin: 1rem 1rem 0.4rem; }
.detalle__cuerpo { display: grid; gap: 1.1rem; padding: 1rem 1.25rem 1.5rem; }
.detalle__titulo { display: grid; gap: 0.35rem; }
.detalle__titulo h2 { font-size: clamp(1.5rem, 6vw, 2rem); }
.detalle__precio { font-family: var(--f-titulo); font-weight: 700; font-size: 1.4rem; color: var(--oro-claro); }
.detalle__desc { font-size: 1.08rem; }
.detalle__datos { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.detalle__alergenos { font-size: 0.92rem; color: var(--texto-suave); }
.detalle__sub { font-size: 1rem; color: var(--oro-claro); margin-bottom: 0.6rem; }
.cita { margin: 0 0 0.8rem; padding: 0.2rem 0 0.2rem 1rem; border-left: 3px solid var(--brasa); font-style: italic; }
.cita footer { margin-top: 0.2rem; font-style: normal; font-size: 0.88rem; color: var(--texto-suave); }
.detalle__pie { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; padding: 0.8rem 1.25rem max(0.8rem, env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea-fuerte); }

.detalle__pie .btn--primario { font-size: 0.88rem; letter-spacing: 0.03em; padding-inline: 0.5rem; }
.cantidad { display: flex; align-items: center; }
.cantidad__btn { padding: 0; width: var(--tap); }
.cantidad__n { min-width: 2.4rem; text-align: center; font-family: var(--f-titulo); font-weight: 700; font-size: 1.25rem; }

/* Formularios del detalle */
.campo { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.5rem; }
.campo__titulo { padding: 0; font-family: var(--f-titulo); font-weight: 700; letter-spacing: 0.05em; font-size: 1rem; }
.campo__aviso { font-family: var(--f-texto); font-weight: 400; letter-spacing: 0; color: var(--texto-suave); font-size: 0.9rem; }
.opciones { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.opcion { position: relative; }
.opcion__radio { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.opcion__caja { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0.4rem 1rem; border: 2px solid var(--linea-fuerte); background: var(--fondo); }
.opcion__radio:checked + .opcion__caja { border-color: var(--oro-claro); background: var(--superficie-alta); box-shadow: inset 0 -4px 0 var(--brasa); }
.opcion__radio:focus-visible + .opcion__caja { outline: 3px solid var(--oro-claro); outline-offset: 2px; }
.entrada { width: 100%; padding: 0.6rem 0.8rem; background: var(--fondo); border: 2px solid var(--linea-fuerte); border-radius: 0; resize: vertical; min-height: var(--tap); }
.entrada:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 2px var(--superficie), 0 0 0 4px var(--oro-claro); }
.campo__pie { display: flex; justify-content: space-between; gap: 1rem; }
.campo__error { color: #F0A8A0; font-size: 0.92rem; }
.campo__error:empty { display: none; }
.campo__contador { margin-left: auto; font-size: 0.82rem; color: var(--texto-suave); }

/* ---------- Pantallas grandes ---------- */
@media (min-width: 46rem) {
  .portada__interior { padding-top: 2rem; }
  .caminos__lista { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 0; gap: 1.25rem; }
  .camino { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 0.6rem; align-content: start; min-height: 11rem; padding: 1.25rem 0.25rem 1rem; border: 0; border-top: 4px solid var(--linea-fuerte); background: none; }
  .camino:hover:not([disabled]), .camino:focus-visible { background: none; border-top-color: var(--brasa); }
  .camino__flecha { justify-self: end; align-self: end; }
  .camino { height: 100%; }
  .destacado { grid-template-columns: 1.1fr 1fr; gap: 2rem; align-items: center; }
  .destacado--inverso .destacado__foto { order: 2; }
  .destacado__foto { aspect-ratio: 5 / 4; }
  .lista { grid-template-columns: 1fr 1fr; column-gap: 3rem; }
  .fila:first-child { padding-top: 1rem; }
  .hoja { margin: auto; border: 3px solid var(--oro); }
  .detalle__foto { aspect-ratio: 2 / 1; }
}
@media (min-width: 70rem) { .categoria { scroll-margin-top: 8rem; } }
@media (prefers-reduced-motion: reduce) { .camino__flecha { transition: none; } }

/* =====================================================================
   B3 · Pedido, seguimiento y reseña
   ===================================================================== */
.barra-modo__acciones { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- Panel del pedido (hoja inferior en celular) ---------- */
.hoja--panel { max-width: 44rem; }
.hoja--pregunta { max-width: 30rem; }
.panel { display: flex; flex-direction: column; max-height: 92vh; max-height: 92dvh; }
.panel__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0.8rem 0.8rem 1.25rem; border-bottom: 1px solid var(--linea-fuerte); background: var(--fondo); }
.panel__titulo { font-size: clamp(1.25rem, 5vw, 1.6rem); }
.panel__cerrar { padding: 0; width: var(--tap); }
.panel__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 1.25rem 1.5rem; display: grid; gap: 1.5rem; align-content: start; }
.panel__scroll > .aviso:first-child { margin-top: 0.75rem; }
.panel__pie { display: grid; gap: 0.6rem; padding: 0.8rem 1.25rem max(0.8rem, env(safe-area-inset-bottom)); background: var(--fondo); border-top: 1px solid var(--linea-fuerte); }
.panel__pago { text-align: center; font-size: 0.95rem; color: var(--texto-suave); font-style: italic; }

.bloque { display: grid; gap: 0.8rem; padding-top: 1rem; }
.bloque + .bloque { border-top: 1px solid var(--linea); }
.bloque__titulo { font-size: 1.05rem; color: var(--oro-claro); }
.bloque__ayuda { font-size: 0.92rem; color: var(--texto-suave); }

/* Líneas del pedido */
.lineas { display: grid; }
.linea { display: grid; grid-template-columns: 1fr auto; gap: 0.4rem 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linea); }
.linea:first-child { padding-top: 0.2rem; }
.linea__cuerpo { display: grid; gap: 0.15rem; min-width: 0; }
.linea__nombre { font-weight: 600; font-size: 1.05rem; }
.linea__det { font-size: 0.92rem; color: var(--texto-suave); }
.quien { font-size: 0.88rem; color: var(--musgo-claro); }
.linea > .precio { align-self: start; }
.linea__ctl { grid-column: 1 / -1; display: flex; align-items: center; gap: 0.25rem 1rem; flex-wrap: wrap; }
.linea__quitar { color: #F0A8A0; }
.linea--agotado { background: #2A1A18; margin-inline: -0.5rem; padding-inline: 0.5rem; }

/* Totales */
.totales { margin: 0; display: grid; gap: 0.3rem; }
.totales__fila { display: flex; justify-content: space-between; gap: 1rem; margin: 0; }
.totales__fila dt, .totales__fila dd { margin: 0; }
.totales__fila--grande { font-family: var(--f-titulo); font-weight: 700; font-size: 1.2rem; color: var(--oro-claro); padding-top: 0.3rem; border-top: 1px solid var(--linea-fuerte); }

.acciones { display: grid; gap: 0.6rem; grid-template-columns: 1fr 1fr; }
.acciones .btn { padding-inline: 0.5rem; font-size: 0.85rem; letter-spacing: 0.05em; }

/* Campos con error */
.campo--error .entrada { border-color: #F0A8A0; }
#panel .campo { margin-top: 0.4rem; }

/* ---------- Pregunta del nombre ---------- */
.pregunta { display: grid; gap: 1rem; padding: 1.5rem 1.25rem max(1.25rem, env(safe-area-inset-bottom)); }
.pregunta__titulo { font-size: 1.35rem; }
.pregunta__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* ---------- Seguimiento: línea de runas ---------- */
.seguimiento { display: grid; gap: 1rem; padding: 1.1rem 1rem 1rem; background: var(--fondo); border: 1px solid var(--linea-fuerte); border-top: 3px solid var(--oro); }
.seguimiento + .seguimiento { margin-top: 0.4rem; }
.seguimiento--cancelado { border-top-color: var(--sangre); }
.seguimiento__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.seguimiento__titulo { font-size: 1.1rem; }
.seguimiento__total { font-family: var(--f-titulo); font-weight: 700; color: var(--oro-claro); }
.seguimiento__texto { font-size: 1.15rem; line-height: 1.4; }
.seguimiento__items { display: grid; gap: 0.15rem; font-size: 0.92rem; color: var(--texto-suave); padding-top: 0.6rem; border-top: 1px dashed var(--linea-fuerte); }
.seguimiento__envio { font-size: 0.9rem; color: var(--texto-suave); }

.linea-runas { display: flex; margin: 0; padding: 0; list-style: none; }
.paso { flex: 1 1 0; position: relative; display: grid; justify-items: center; align-content: start; gap: 0.4rem; text-align: center; font-size: 0.8rem; line-height: 1.2; color: var(--texto-suave); min-width: 0; }
.paso::before { content: ""; position: absolute; top: 1.35rem; right: 50%; width: 100%; height: 3px; background: var(--linea-fuerte); }
.paso:first-child::before { display: none; }
.paso__runa { position: relative; z-index: 1; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; background: var(--fondo); border: 2px solid var(--linea-fuerte); }
.paso__ico { width: 1.5rem; height: 1.5rem; }
.paso__nombre { font-family: var(--f-titulo); font-weight: 600; letter-spacing: 0.04em; overflow-wrap: anywhere; padding-inline: 0.1rem; }
.paso--hecho { color: var(--texto); }
.paso--hecho::before, .paso--actual::before { background: var(--oro); }
.paso--hecho .paso__runa { border-color: var(--musgo-claro); color: var(--musgo-claro); }
.paso--actual { color: var(--texto); }
.paso--actual .paso__runa { border-color: var(--brasa-clara); background: var(--brasa-btn); color: var(--texto); box-shadow: 0 0 0 3px var(--fondo), 0 0 0 5px var(--brasa); }

.cuenta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.35rem; padding: 0.6rem 0.9rem; background: var(--superficie); border-left: 4px solid var(--brasa); }
.cuenta__n { font-family: var(--f-titulo); font-weight: 700; font-size: 2.2rem; line-height: 1; color: var(--oro-claro); }
.cuenta__u { font-family: var(--f-titulo); font-weight: 600; }
.cuenta__t { color: var(--texto-suave); }

@media (prefers-reduced-motion: no-preference) {
  .paso--actual .paso__runa { animation: late 2.4s ease-in-out infinite; }
  @keyframes late { 50% { box-shadow: 0 0 0 3px var(--fondo), 0 0 0 8px rgba(200, 80, 30, 0.35); } }
}

/* ---------- Reseña ---------- */
.resena { display: grid; gap: 0.8rem; padding: 1.1rem 1rem; background: var(--superficie); border: 1px solid var(--oro); }
.resena--lista { border-color: var(--musgo-claro); }
.resena__titulo { font-size: 1.15rem; color: var(--oro-claro); }
.estrellas { display: flex; gap: 0.1rem; border: 0; margin: 0; padding: 0; }
.estrella { position: relative; display: grid; place-items: center; width: 3.1rem; height: 3.1rem; color: #8A7A63; cursor: pointer; }
.estrella__radio { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.estrella__ico { width: 2.4rem; height: 2.4rem; }
.estrella--on { color: var(--oro-claro); }
.estrella:has(.estrella__radio:focus-visible) { outline: 3px solid var(--oro-claro); outline-offset: 2px; }
.resena__lectura { font-size: 0.95rem; color: var(--texto-suave); min-height: 1.5em; }

@media (min-width: 46rem) {
  .hoja--panel, .hoja--pregunta { margin: auto; border: 3px solid var(--oro); }
}
@media (max-width: 24rem) {
  .paso { font-size: 0.72rem; }
  .paso__runa { width: 2.4rem; height: 2.4rem; }
  .paso::before { top: 1.2rem; }
  .acciones { grid-template-columns: 1fr; }
}