/* Roloi · web pública */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-ui);
  font-size: var(--t-m);
  line-height: 1.55;
}
a { color: var(--marino); text-decoration-color: var(--laton); text-underline-offset: 3px; }
a:hover { color: var(--marino-2); }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 500; color: var(--marino); line-height: 1.15; margin: 0 0 var(--e-2); }
h1 { font-size: var(--t-xxl); letter-spacing: -0.01em; }
h2 { font-size: var(--t-xl); }
h3 { font-size: var(--t-l); }
.dato { font-family: var(--fuente-datos); font-variant-numeric: tabular-nums; }
.contenedor { max-width: var(--ancho-lectura); margin: 0 auto; padding: 0 var(--e-3); }

/* Cabecera */
.cabecera { border-bottom: 1px solid var(--gris-1); background: var(--papel); }
.cabecera .contenedor { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); height: 4.5rem; }
.marca { display: inline-flex; align-items: center; }
.marca img { height: 36px; width: auto; display: block; }
.nav { display: flex; gap: var(--e-3); align-items: center; font-size: var(--t-s); }
.nav a { text-decoration: none; color: var(--tinta-2); }
.idiomas { display: inline-flex; border: 1px solid var(--gris-2); border-radius: var(--radio); overflow: hidden; }
.idiomas button { all: unset; cursor: pointer; padding: 0.25rem 0.6rem; font-size: var(--t-xs); letter-spacing: 0.08em; color: var(--tinta-2); }
.idiomas button[aria-current="true"] { background: var(--marino); color: var(--blanco); }

/* Portada */
.portada { padding: var(--e-8) 0 var(--e-6); }
.portada p.lema { font-size: var(--t-l); color: var(--tinta-2); max-width: 36rem; }
.filete { height: 1px; background: linear-gradient(90deg, var(--laton), transparent); margin: var(--e-4) 0; }
.pilares { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--e-3); margin-top: var(--e-4); }
.pilar { background: var(--blanco); border: 1px solid var(--gris-1); border-top: 2px solid var(--laton); border-radius: var(--radio); padding: var(--e-3); }
.pilar h3 { margin-bottom: var(--e-1); }
.pilar p { margin: 0; color: var(--tinta-2); font-size: var(--t-s); }

/* Ficha de unidad: hoja de características */
.ficha { padding: var(--e-6) 0; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--e-6); }
@media (max-width: 48rem) { .ficha { grid-template-columns: 1fr; } }
.ficha .codigo { font-family: var(--fuente-datos); color: var(--gris-3); letter-spacing: 0.08em; font-size: var(--t-s); }
.sello { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--laton); color: var(--marino); border-radius: 999px; padding: 0.3rem 0.9rem; font-size: var(--t-s); background: var(--blanco); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--e-1); }
.galeria img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--radio); border: 1px solid var(--gris-1); background: var(--blanco); }
.galeria img.principal { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
table.especificaciones { width: 100%; border-collapse: collapse; background: var(--blanco); border: 1px solid var(--gris-1); border-radius: var(--radio); overflow: hidden; font-size: var(--t-s); }
table.especificaciones th, table.especificaciones td { text-align: left; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--gris-1); vertical-align: top; }
table.especificaciones th { width: 38%; color: var(--tinta-2); font-weight: 500; }
table.especificaciones tr:last-child td, table.especificaciones tr:last-child th { border-bottom: 0; }
.ok { color: var(--ok); } .aviso { color: var(--aviso); }
.intervenciones { list-style: none; padding: 0; margin: 0; }
.intervenciones li { padding: var(--e-2) 0; border-bottom: 1px solid var(--gris-1); }
.intervenciones time { font-family: var(--fuente-datos); font-size: var(--t-xs); color: var(--gris-3); display: block; }
.nota { font-size: var(--t-s); color: var(--tinta-2); }

/* Pie */
.pie { border-top: 1px solid var(--gris-1); margin-top: var(--e-8); padding: var(--e-4) 0; font-size: var(--t-s); color: var(--gris-3); }
.pie .contenedor { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--e-2); }