/* Estilos base provisorios, mobile first (RNF-01). La identidad gráfica final sale del prototipo aprobado. */
:root { --fondo: #fbfaf8; --texto: #1f2a28; --suave: #5e6b68; --linea: #e2e6e4; --acento: #0b6e69; --alerta: #b3261e; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, "Segoe UI", sans-serif; background: var(--fondo); color: var(--texto); }
a { color: var(--acento); }
.barra { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linea); background: #fff; }
.barra nav { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.marca { font-weight: 700; text-decoration: none; font-size: 1.15rem; }
main { max-width: 960px; margin: 0 auto; padding: 16px; }
.pie { padding: 24px 16px; color: var(--suave); font-size: .9rem; border-top: 1px solid var(--linea); text-align: center; }
.hero { padding: 24px 0; }
.boton { display: inline-block; background: var(--acento); color: #fff; padding: 10px 16px; border-radius: 8px; text-decoration: none; border: 0; font: inherit; cursor: pointer; }
.boton.sec { background: transparent; color: var(--acento); border: 1px solid var(--acento); }
.enlinea { display: inline; } .enlace { background: none; border: 0; color: var(--acento); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }
.grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.tarjeta { background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 12px; }
.tarjeta img, .ficha img { width: 100%; border-radius: 8px; }
.tarjeta h3 { font-size: 1rem; margin: 8px 0 0; }
.sinfoto { aspect-ratio: 1; display: grid; place-items: center; background: var(--linea); color: var(--suave); border-radius: 8px; }
.precio { font-weight: 700; font-variant-numeric: tabular-nums; }
.categorias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.categorias a { padding: 4px 10px; border: 1px solid var(--linea); border-radius: 999px; text-decoration: none; }
.categorias a.activa { background: var(--acento); color: #fff; }
input[type=search] { width: 100%; padding: 10px; margin-bottom: 16px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
.ficha { display: grid; gap: 24px; } @media (min-width: 700px) { .ficha { grid-template-columns: 1fr 1fr; } }
table { width: 100%; border-collapse: collapse; } td, th { padding: 8px; border-bottom: 1px solid var(--linea); text-align: left; }
input[type=number] { width: 4.5em; padding: 6px; }
.agotado { color: var(--alerta); font-weight: 600; }
.aviso { padding: 10px 14px; border-radius: 8px; background: #e6f2f1; } .aviso.error, .aviso.warning { background: #fbe3e1; }
.nota { color: var(--suave); font-size: .9rem; }
.formulario input:not([type=radio]) { width: 100%; padding: 8px; font: inherit; }
.deshabilitado { color: var(--suave); } .pronto { font-size: .8rem; background: var(--linea); padding: 2px 8px; border-radius: 6px; }
.contacto { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }