/*
 * Irasi — taller de ruedas: grafito, acero y el rojo de la nave y del logotipo.
 * Young Serif para titulares y cifras; Inter para fichas técnicas e interfaz. Cotas de plano como gesto.
 */
:root {
  --rojo: #b3322a;
  --rojo-oscuro: #8f241e;
  --rojo-claro: #f7e3df;
  --grafito: #1c2329;
  --acero: #56636e;
  --aluminio: #e5e8ea;
  --papel: #f7f6f3;
  --blanco: #fff;
  --tinta: #1c2329;
  --tenue: #56636e;
  --linea: #d9dde0;
  --titular: "Young Serif", Georgia, serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --envoltorio: 74rem;

  --ancho-texto: 40rem;
  --ancho-amplio: 60rem;
  --radio: 4px;
  --color-texto: var(--tinta);
  --color-fondo: var(--papel);
  --color-suave: var(--aluminio);
  --color-borde: var(--linea);
  --color-acento: var(--rojo);
  --color-acento-texto: #fff;
  --color-tenue: var(--tenue);
  --fuente-texto: var(--texto);
  --fuente-titulos: var(--titular);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papel); color: var(--tinta); font: 400 1.0625rem/1.65 var(--texto); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; }
a { color: var(--rojo); text-underline-offset: .2em; }
a:hover { color: var(--rojo-oscuro); }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; }
h1, h2, h3 { text-wrap: balance; font-weight: 400; }
p { text-wrap: pretty; }
main:focus { outline: none; }
.envoltorio { width: min(100% - 2rem, var(--envoltorio)); margin-inline: auto; }
.icono { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.saltar { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--rojo); color: #fff; padding: .7rem 1rem; font-weight: 600; }
.saltar:focus { top: 1rem; }
.antetitulo { font: 600 .78rem/1.3 var(--texto); letter-spacing: .14em; text-transform: uppercase; color: var(--rojo); margin: 0 0 1rem; }

/* rueda dibujada */
.rueda-cubierta { fill: none; stroke: var(--grafito); stroke-width: 7; }
.rueda-llanta { fill: none; stroke: var(--acero); stroke-width: 2.2; }
.rueda-radios line { stroke: var(--acero); stroke-width: .7; }
.rueda-buje { fill: var(--grafito); }
.rueda-eje { fill: var(--rojo); }

/* ------------------------------------------------------------------ cabecera */
.cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); }
.cabecera-fila { display: flex; align-items: center; gap: 1rem 2rem; min-height: 5rem; flex-wrap: wrap; }
.marca { display: flex; align-items: center; gap: .8rem; color: var(--tinta); text-decoration: none; margin-right: auto; }
.marca:hover { color: var(--tinta); }
.marca-rueda { width: 2.9rem; height: 2.9rem; flex: none; }
.marca-rueda .rueda-cubierta { stroke-width: 9; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.1; }
.marca-nombre { font: 400 1.85rem/1 var(--titular); letter-spacing: .02em; text-transform: uppercase; }
.marca-lema { font: 500 .74rem/1.3 var(--texto); color: var(--tenue); margin-top: .2rem; }
.navegacion { display: flex; align-items: center; gap: 1.5rem; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; }
.menu a { display: block; padding: .6rem .8rem; color: var(--tinta); text-decoration: none; font: 500 .96rem/1.2 var(--texto); }
.menu a:hover { color: var(--rojo); }
.menu a[aria-current] { box-shadow: inset 0 -3px 0 var(--rojo); }
.cabecera-tel { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; background: var(--rojo); color: #fff; font: 600 1rem var(--texto); text-decoration: none; border-radius: var(--radio); font-variant-numeric: tabular-nums; min-height: 2.75rem; }
.cabecera-tel:hover { background: var(--rojo-oscuro); color: #fff; }
.menu-boton { display: none; }
@media (max-width: 52rem) {
  .menu-boton { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.75rem; padding: .4rem .9rem; border: 1px solid var(--grafito); background: none; color: var(--grafito); font: 600 .95rem var(--texto); cursor: pointer; border-radius: var(--radio); }
  .menu-boton .icono-cerrar, .menu-boton[aria-expanded="true"] .icono-abrir { display: none; }
  .menu-boton[aria-expanded="true"] .icono-cerrar { display: inline; }
  .navegacion { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem; padding-bottom: 1rem; }
  .navegacion.abierto { display: flex; }
  .menu { flex-direction: column; }
  .menu a { padding: .85rem 0; border-bottom: 1px solid var(--linea); }
  .cabecera-tel { justify-content: center; }
}
@media (max-width: 26rem) {
  .marca-lema { font-size: .66rem; max-width: 12rem; }
  .menu-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ------------------------------------------------------------------ portada */
.portada { background: var(--blanco); border-bottom: 1px solid var(--linea); overflow: hidden; }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; padding-block: clamp(2.5rem, 6vw, 5rem); }
.portada-titular { font: 400 clamp(2.6rem, 6vw, 4.6rem)/1.02 var(--titular); margin: 0 0 1.4rem; letter-spacing: -.01em; }
.portada-entradilla { font-size: clamp(1.08rem, 1.5vw, 1.22rem); line-height: 1.6; color: #39434b; margin: 0 0 2rem; max-width: 34rem; }
.portada-botones { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0; }
.boton { display: inline-flex; align-items: center; gap: .55rem; min-height: 3rem; padding: .7rem 1.35rem; background: var(--grafito); color: #fff; font: 600 1rem var(--texto); text-decoration: none; border-radius: var(--radio); border: 2px solid var(--grafito); font-variant-numeric: tabular-nums; }
.boton:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.boton:active, .cabecera-tel:active, .buscador button:active { transform: translateY(1px); }
.boton-claro { background: transparent; color: var(--grafito); }
.boton-claro:hover { background: var(--grafito); border-color: var(--grafito); }
.portada-rueda { position: relative; display: grid; place-items: center; padding: 1rem 0 3rem; }
.rueda-grande { width: min(100%, 27rem); aspect-ratio: 1; filter: drop-shadow(0 22px 26px rgba(28,35,41,.18)); }
.rueda-grande .rueda-radios { transform-origin: 50px 50px; animation: girar 60s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }
.cota { position: absolute; left: 50%; bottom: .2rem; transform: translateX(-50%); width: min(100%, 27rem); margin: 0; text-align: center; font: 600 .82rem var(--texto); letter-spacing: .08em; color: var(--rojo); }
.cota::before, .cota::after { content: ""; position: absolute; top: 50%; width: calc(50% - 3.6rem); border-top: 1px solid var(--rojo); }
.cota::before { left: 0; border-left: 1px solid var(--rojo); height: .8rem; transform: translateY(-.4rem); }
.cota::after { right: 0; border-right: 1px solid var(--rojo); height: .8rem; transform: translateY(-.4rem); }

/* secciones y catálogo */
.seccion { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.seccion-cabecera { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .5rem 3rem; align-items: end; margin-bottom: 2rem; padding-bottom: 1.2rem; border-bottom: 2px solid var(--grafito); }
.seccion-cabecera h2 { font: 400 clamp(1.9rem, 3.6vw, 2.7rem)/1.1 var(--titular); margin: 0; }
.seccion-cabecera p { margin: 0; color: var(--tenue); }
.catalogo-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: 1.5rem; }
.producto { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1rem 1rem 1.2rem; display: flex; flex-direction: column; gap: .3rem; transition: border-color .15s, box-shadow .15s; }
.producto:hover { border-color: var(--grafito); box-shadow: 0 14px 30px -22px rgba(28,35,41,.6); }
.producto:focus-within { outline: 3px solid var(--rojo); outline-offset: 2px; }
.producto-foto { display: block; aspect-ratio: 4 / 3; background: var(--aluminio); border-radius: 2px; overflow: hidden; margin-bottom: .6rem; }
.producto-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.producto-pulgadas { position: absolute; top: .6rem; right: .6rem; margin: 0; background: var(--blanco); padding: .15rem .6rem .1rem; border: 1px solid var(--grafito); border-radius: 2px; font: 400 1.6rem/1.1 var(--titular); color: var(--rojo); font-variant-numeric: lining-nums; }
.producto-pulgadas span { font-size: .8em; }
.producto-nombre { margin: 0; font: 400 1.3rem/1.2 var(--titular); }
.producto-nombre a { color: var(--tinta); text-decoration: none; }
.producto-nombre a::after { content: ""; position: absolute; inset: 0; }
.producto-nombre a:focus-visible { outline: none; }
.producto-medida { margin: 0; font-size: .92rem; color: var(--tenue); font-variant-numeric: tabular-nums; }
.producto-tipo { margin: .2rem 0 0; display: inline-flex; align-self: flex-start; font: 600 .74rem var(--texto); letter-spacing: .08em; text-transform: uppercase; color: var(--rojo); background: var(--rojo-claro); padding: .25rem .55rem; border-radius: 2px; }
.producto-texto { justify-content: center; }

/* empresa */
.seccion-empresa { background: var(--aluminio); }
.empresa-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: center; }
.seccion-empresa h2 { font: 400 clamp(1.9rem, 3.6vw, 2.7rem)/1.1 var(--titular); margin: 0 0 1.2rem; }
.empresa-texto { font-size: 1.08rem; }
.empresa-texto > * { margin-left: 0; }
.enlace-flecha { display: inline-flex; gap: .4rem; align-items: center; font-weight: 600; text-decoration: none; padding: .4rem 0; }
.empresa-foto { margin: 0; }
.empresa-foto img { width: 100%; display: block; border-radius: var(--radio); }
.empresa-foto figcaption { font-size: .85rem; color: var(--tenue); margin-top: .5rem; }

/* franja de llamada */
.llamada-franja { background: var(--grafito); color: #fff; padding-block: 2.2rem; }
.llamada-rejilla { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2.5rem; }
.llamada-texto { margin: 0 auto 0 0; font: 400 clamp(1.5rem, 3vw, 2.1rem)/1.15 var(--titular); }
.llamada-tel { display: inline-flex; align-items: center; gap: .7rem; color: #fff; font: 400 clamp(1.8rem, 4vw, 2.6rem)/1 var(--titular); text-decoration: none; font-variant-numeric: lining-nums tabular-nums; padding: .4rem 0; }
.llamada-tel .icono { color: var(--rojo); width: 1em; height: 1em; }
.llamada-tel:hover { color: #ffd9d2; }
.llamada-lugar { display: inline-flex; align-items: center; gap: .45rem; color: #dfe4e7; text-decoration: none; padding: .4rem 0; }
.llamada-lugar:hover { color: #fff; text-decoration: underline; }

/* ------------------------------------------------------------------ ficha de producto */
.migas { display: flex; flex-wrap: wrap; gap: .45rem; font-size: .88rem; color: var(--tenue); margin-bottom: 1.25rem; }
.migas a { color: var(--tenue); text-decoration: none; padding: .3rem 0; }
.migas a:hover { color: var(--rojo); text-decoration: underline; }
.ficha { padding-block: clamp(1.5rem, 4vw, 2.5rem) 2.5rem; }
.ficha-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 2rem 4rem; align-items: start; }
.ficha-fotos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.ficha-foto { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .5rem; }
.ficha-foto img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: contain; background: var(--blanco); }
.ficha-foto-principal { grid-column: 1 / -1; padding: 1rem; }
/* las fotos originales miden 400 px: no se amplían por encima de su tamaño real */
.ficha-foto-principal img { max-width: 400px; margin-inline: auto; }
.ficha-foto:not(.ficha-foto-principal) img { max-width: 400px; }
.producto-foto img { max-width: 400px; margin-inline: auto; }
.ficha-foto a { display: block; cursor: zoom-in; }
.ficha-pulgadas { margin: 0; font: 400 clamp(4rem, 9vw, 6.5rem)/.9 var(--titular); color: var(--rojo); font-variant-numeric: lining-nums; }
.ficha-pulgadas span { font-size: .7em; }
.ficha-titulo { font: 400 clamp(2rem, 4vw, 2.9rem)/1.08 var(--titular); margin: .6rem 0 .6rem; }
.ficha-tabla { margin: 1.6rem 0 0; border-top: 2px solid var(--grafito); }
.ficha-tabla > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--linea); }
.ficha-tabla dt { font: 600 .76rem/1.6 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); }
.ficha-tabla dd { margin: 0; font-variant-numeric: tabular-nums; }
.ficha-tabla ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.ficha-tabla li { padding-left: 1.1rem; position: relative; }
.ficha-tabla li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45rem; height: 2px; background: var(--rojo); }
.ficha-llamada { margin-top: 1.75rem; padding: 1.2rem 1.3rem; background: var(--rojo-claro); border-left: 4px solid var(--rojo); }
.ficha-llamada p { margin: 0 0 .75rem; font-weight: 500; }

/* consultas (comentarios) */
.consultas { padding-block: 1rem 2rem; }
.consultas-lista { max-width: 52rem; }
.consultas h2 { font: 400 1.6rem var(--titular); margin: 0 0 1rem; display: flex; gap: .6rem; align-items: baseline; }
.consultas h2 span { font: 600 .85rem var(--texto); color: #fff; background: var(--acero); padding: .1rem .5rem; border-radius: 999px; }
.consultas-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.consulta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: .9rem 1.1rem; }
.consulta-autor { margin: 0 0 .3rem; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .2rem .7rem; }
.consulta-autor time { color: var(--tenue); }
.consulta-texto { font-size: .98rem; }
.consulta-texto p { margin: 0 0 .4em; }
.consulta-texto p:last-child { margin: 0; }

/* ------------------------------------------------------------------ páginas */
.pagina-cabecera { background: var(--blanco); border-bottom: 1px solid var(--linea); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem); }
.pagina-titulo { font: 400 clamp(2.2rem, 5vw, 3.4rem)/1.05 var(--titular); margin: 0; }
.pagina-entradilla { margin: .9rem 0 0; color: var(--tenue); max-width: 40rem; font-size: 1.08rem; }
.pagina-cuerpo { padding-block: 2.5rem 3rem; }
.pagina-cuerpo.con-foto { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem 3rem; align-items: start; }
.pagina-cuerpo .contenido { font-size: 1.1rem; }
.pagina-cuerpo .contenido > * { margin-left: 0; }
.pagina-foto { margin: 0; }
.pagina-foto img { width: 100%; border-radius: var(--radio); display: block; }
.contenido figure.ir-mapa, .contenido .x-mapa { max-width: 46rem; border: 1px solid var(--linea); background: var(--blanco); padding: 2rem 1.5rem; border-radius: var(--radio); }
.ir-mapa figcaption span { font: 400 1.4rem var(--titular); }
.x-mapa button { background: var(--grafito); border-color: var(--grafito); min-height: 2.75rem; padding: .6em 1.2em; font-weight: 600; }
.x-mapa button:hover { background: var(--rojo); border-color: var(--rojo); }
.contenido figure.mapa iframe { aspect-ratio: 4 / 3; }
.error-rejilla { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2rem; align-items: center; }
.rueda-error { width: clamp(5rem, 14vw, 9rem); aspect-ratio: 1; transform: rotate(14deg); }
.buscador { display: flex; max-width: 32rem; margin-top: 1.2rem; border: 2px solid var(--grafito); border-radius: var(--radio); background: var(--blanco); }
.buscador input { flex: 1; min-width: 0; border: 0; background: transparent; font: 400 1.05rem var(--texto); padding: .75rem 1rem; }
.buscador input:focus { outline: none; }
.buscador:focus-within { outline: 3px solid var(--rojo); outline-offset: 2px; }
.buscador button { border: 0; background: var(--grafito); color: #fff; font: 600 1rem var(--texto); padding: 0 1.2rem; cursor: pointer; min-height: 2.9rem; }

/* ------------------------------------------------------------------ pie */
.pie { background: var(--blanco); border-top: 4px solid var(--rojo); }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2rem 3rem; padding-block: 2.5rem 1.5rem; }
.pie-rueda { width: 2.6rem; height: 2.6rem; }
.pie-nombre { font: 400 1.7rem/1 var(--titular); text-transform: uppercase; margin: .6rem 0 .5rem; }
.pie-marca p { margin: 0 0 .4rem; color: var(--tenue); }
.pie-contacto p { margin: 0 0 .4rem; }
.pie-contacto a { display: inline-flex; gap: .5rem; align-items: center; color: var(--tinta); text-decoration: none; padding: .35rem 0; }
.pie-contacto a:hover { color: var(--rojo); }
.pie-tel { font: 400 1.5rem var(--titular); font-variant-numeric: lining-nums; }
.menu-pie { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.menu-pie a { display: inline-block; padding: .35rem 0; color: var(--tinta); text-decoration: none; }
.menu-pie a:hover { color: var(--rojo); text-decoration: underline; }
.pie-final { margin: 0 auto; padding-block: 1rem 1.5rem; border-top: 1px solid var(--linea); font-size: .85rem; color: var(--tenue); }

/* ------------------------------------------------------------------ adaptación */
@media (max-width: 56rem) {
  .portada-rejilla, .empresa-rejilla, .ficha-rejilla, .pagina-cuerpo.con-foto { grid-template-columns: 1fr; }
  .portada-rueda { max-width: 20rem; margin-inline: auto; }
  .seccion-cabecera { grid-template-columns: 1fr; }
  .pie-rejilla { grid-template-columns: 1fr 1fr; }
  .pie-marca { grid-column: 1 / -1; }
}
@media (max-width: 34rem) {
  .ficha-tabla > div { grid-template-columns: 1fr; gap: .3rem; }
  .pie-rejilla { grid-template-columns: 1fr; }
  .error-rejilla { grid-template-columns: 1fr; }
  .llamada-texto { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) { .rueda-grande .rueda-radios { animation: none; } * { transition: none !important; } }
@media print { .cabecera, .pie, .llamada-franja, .buscador { display: none !important; } }

/* tabla de medidas del catálogo */
.tabla-medidas { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.tabla-titulo { font: 400 clamp(1.6rem, 3vw, 2.1rem)/1.1 var(--titular); margin: 0 0 1rem; }
.tabla-marco { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); }
.tabla-marco:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.tabla-medidas table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; font-variant-numeric: tabular-nums; }
.tabla-medidas th, .tabla-medidas td { text-align: left; padding: .75rem 1rem; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla-medidas thead th { font: 600 .74rem/1.3 var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--tenue); background: var(--aluminio); }
.tabla-medidas tbody th { font: 400 1.05rem/1.3 var(--titular); }
.tabla-medidas tbody th a { color: var(--tinta); text-decoration: none; }
.tabla-medidas tbody th a:hover { color: var(--rojo); text-decoration: underline; }
.tabla-medidas tbody tr:last-child > * { border-bottom: 0; }
.tabla-medidas tbody tr:hover { background: #fbf9f6; }
.tabla-pulgadas { font: 400 1.3rem/1 var(--titular); color: var(--rojo); white-space: nowrap; }

/* ficha: imprimir y vecinas */
.boton-imprimir { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; min-height: 2.75rem; padding: .55rem 1rem; border: 1px solid var(--grafito); border-radius: var(--radio); background: transparent; color: var(--grafito); font: 500 .92rem var(--texto); cursor: pointer; }
.boton-imprimir:hover { background: var(--grafito); color: #fff; }
.boton-imprimir:active { transform: translateY(1px); }
.ficha-tel-impresa { display: none; }
.vecinas { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-block: 0 2rem; }
.vecina { display: flex; flex-direction: column; gap: .3rem; padding: 1rem 1.2rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--blanco); text-decoration: none; color: var(--tinta); }
.vecina:hover { border-color: var(--grafito); color: var(--tinta); }
.vecina-sig { text-align: right; align-items: flex-end; }
.vecina-rotulo { display: inline-flex; gap: .35rem; align-items: center; font: 600 .74rem var(--texto); letter-spacing: .1em; text-transform: uppercase; color: var(--rojo); }
.vecina-titulo { font: 400 1.15rem/1.25 var(--titular); }
@media (max-width: 34rem) { .vecinas { grid-template-columns: 1fr; } .vecina-sig { text-align: left; align-items: flex-start; } }
@media print {
  .boton-imprimir, .ficha-llamada .boton, .ficha-llamada p:first-child, .vecinas, .consultas, .seccion, .migas { display: none !important; }
  .ficha-tel-impresa { display: block; font: 400 16pt var(--titular); margin: 0; }
  .ficha-llamada { background: none; border: 1px solid #999; }
  .ficha-rejilla { grid-template-columns: 1fr 1.2fr; gap: 1.5rem; }
  .ficha-pulgadas { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  body { background: #fff; }
}

/* =====================================================================================================
   Ronda 3 — sistema visual: escala tipográfica y de espacios, acabados y móvil
   ===================================================================================================== */
:root {
  /* escala tipográfica (razón ≈ 1,25) */
  --t-meta: .875rem;   /* solo etiquetas cortas en mayúsculas */
  --t-0: 1rem;
  --t-1: 1.125rem;
  --t-2: 1.375rem;
  --t-3: 1.75rem;
  --t-4: clamp(2rem, 4vw, 2.75rem);
  --t-5: clamp(2.5rem, 6vw, 4.5rem);
  /* espacios (múltiplos de 4 px) */
  --e-1: .25rem; --e-2: .5rem; --e-3: .75rem; --e-4: 1rem; --e-5: 1.5rem; --e-6: 2rem; --e-7: 3rem; --e-8: 4rem; --e-9: 6rem;
  --lateral: 1.25rem;
  --alto-cabecera: 4.5rem;
  accent-color: var(--rojo);
  scrollbar-color: var(--acero) var(--aluminio);
}
::selection { background: var(--rojo); color: #fff; }
a, button, .producto, .vecina, .boton, .cabecera-tel { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 3px; border-radius: 2px; }
.envoltorio { width: min(100% - 2 * var(--lateral), var(--envoltorio)); }
.antetitulo { font-size: var(--t-meta); letter-spacing: .12em; margin-bottom: var(--e-4); }
p, li, dd { hyphens: manual; }
.producto-nombre, .ficha-titulo, .pagina-titulo, .portada-titular { hyphens: manual; overflow-wrap: break-word; }

/* ritmo: mismas distancias entre bloques equivalentes */
.seccion { padding-block: var(--e-8); }
.seccion-cabecera { margin-bottom: var(--e-6); padding-bottom: var(--e-4); }
.catalogo-rejilla { gap: var(--e-5); }
.pagina-cabecera { padding-block: var(--e-6) var(--e-5); }
.pagina-cuerpo { padding-block: var(--e-7); }

/* migas con objetivos táctiles cómodos */
.migas { font-size: var(--t-0); gap: 0 var(--e-2); margin-bottom: var(--e-4); align-items: center; }
.migas a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .1rem; }
.migas [aria-current] { color: var(--tinta); }

/* tarjetas de producto: foto con tratamiento coherente, jerarquía clara */
.producto { padding: var(--e-3) var(--e-3) var(--e-5); gap: var(--e-1); }
.producto-foto { margin: 0 0 var(--e-3); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(28,35,41,.06); }
.producto-foto img { filter: saturate(.82) contrast(1.03); transition: filter .25s ease, transform .4s ease; }
.producto:hover .producto-foto img { filter: none; transform: scale(1.03); }
.producto-nombre { font-size: var(--t-2); padding-inline: var(--e-1); }
.producto-medida { font-size: var(--t-0); color: #39434b; padding-inline: var(--e-1); }
.producto-tipo { margin: var(--e-2) var(--e-1) 0; font-size: .8125rem; }
.producto:active { transform: translateY(1px); }
.ficha-foto img { filter: saturate(.85) contrast(1.03); }

/* textos de lectura y metadatos a tamaño legible */
.portada-entradilla, .pagina-entradilla, .pagina-cuerpo .contenido, .empresa-texto { font-size: var(--t-1); line-height: 1.65; }
.seccion-cabecera p, .consulta-texto, .ficha-tabla dd, .producto-texto .producto-medida { font-size: var(--t-0); }
.consulta-autor { font-size: .9375rem; }

/* ------------------------------------------------------------------ móvil */
@media (max-width: 52rem) {
  .cabecera { position: sticky; top: 0; z-index: 50; box-shadow: 0 1px 0 var(--linea); }
  .cabecera-fila { min-height: 3.75rem; padding-block: 0; gap: var(--e-3); flex-wrap: nowrap; }
  .marca-rueda { width: 2.3rem; height: 2.3rem; }
  .marca-nombre { font-size: 1.55rem; }
  .marca-lema { display: none; }
  .menu-boton { width: 2.75rem; height: 2.75rem; min-height: 0; padding: 0; justify-content: center; border-radius: 999px; }
  .menu-boton span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  /* panel a pantalla completa bajo la cabecera, con el fondo bloqueado */
  .navegacion { position: fixed; inset: 3.75rem 0 0 0; z-index: 49; background: var(--blanco); padding: var(--e-5) var(--lateral) calc(var(--e-6) + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; flex-direction: column; gap: var(--e-5); }
  .navegacion.abierto { display: flex; animation: aparecer .2s ease; }
  .menu a { font: 400 var(--t-3)/1.2 var(--titular); padding: var(--e-4) 0; min-height: 3.5rem; display: flex; align-items: center; }
  .cabecera-tel { font-size: var(--t-1); min-height: 3.25rem; }
  html.menu-abierto, html.menu-abierto body { overflow: hidden; }
}
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 40rem) {
  :root { --lateral: 1.25rem; }
  .seccion { padding-block: var(--e-7); }
  .portada-rejilla { padding-block: var(--e-6) var(--e-7); gap: var(--e-5); }
  .portada-titular { font-size: clamp(2.3rem, 10.5vw, 3rem); }

  .portada-botones .boton { width: 100%; justify-content: center; }
  .catalogo-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
  .producto { padding: var(--e-2) var(--e-2) var(--e-4); }
  .producto-nombre { font-size: var(--t-1); }
  .producto-pulgadas { font-size: 1.25rem; top: .4rem; right: .4rem; }
  .producto-tipo { font-size: .75rem; letter-spacing: .06em; }
  .producto-medida { font-size: .9375rem; }
  .ficha-pulgadas { font-size: 4.25rem; }
  .ficha-llamada .boton, .boton-imprimir { width: 100%; justify-content: center; }
  .llamada-rejilla { gap: var(--e-2) var(--e-5); }
  .llamada-tel { font-size: 2.1rem; }
  .pie-rejilla { gap: var(--e-5); padding-block: var(--e-6) var(--e-4); }
  .menu-pie a, .pie-contacto a { min-height: 2.75rem; display: inline-flex; align-items: center; }
}
@media (max-width: 22.5rem) {
  .catalogo-rejilla { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .navegacion.abierto { animation: none; } .producto:hover .producto-foto img { transform: none; } }
@media (max-width: 52rem) { .antetitulo { font-size: .9375rem; letter-spacing: .06em; } }
@media (max-width: 40rem) { .portada-rueda { max-width: 15rem; padding-bottom: 2.5rem; } }
@media (max-width: 60rem) { .marca-lema { display: none; } .antetitulo { font-size: .9375rem; letter-spacing: .06em; } }

/* =====================================================================================================
   Ronda 4 — portada con carácter: el taller, la nave a sangre, la escala de medidas y las consultas
   ===================================================================================================== */
.taller-pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); counter-reset: paso; }
.taller-paso figure { margin: 0; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: var(--e-3); height: 100%; display: flex; flex-direction: column; gap: var(--e-3); }
.taller-paso img { display: block; width: 100%; max-width: 300px; margin-inline: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.85) contrast(1.04); border-radius: 2px; }
.taller-paso:nth-child(2) img { aspect-ratio: 3 / 4; }
.taller-paso figcaption { display: flex; align-items: baseline; gap: var(--e-3); font: 400 var(--t-2)/1.2 var(--titular); padding: var(--e-1) var(--e-2) var(--e-2); }
.taller-num { font: 600 .875rem/1 var(--texto); letter-spacing: .1em; color: var(--rojo); }

.empresa-sangre { position: relative; isolation: isolate; min-height: clamp(26rem, 60vh, 38rem); display: flex; align-items: flex-end; color: #fff; background: var(--grafito); overflow: hidden; }
.empresa-sangre-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; z-index: -2; }
.empresa-sangre::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28,35,41,.1) 20%, rgba(28,35,41,.88) 85%); }
.empresa-sangre-texto { padding-block: var(--e-8) var(--e-7); }
.empresa-sangre .antetitulo { color: #ffd0c8; margin: 0 0 var(--e-3); }
.empresa-cita { margin: 0 0 var(--e-4); padding: 0; border: 0; max-width: 44rem; }
.empresa-cita p { margin: 0; font: 400 clamp(1.7rem, 3.6vw, 2.7rem)/1.15 var(--titular); text-wrap: balance; }
.empresa-lugar { display: flex; align-items: center; gap: var(--e-2); margin: 0 0 var(--e-5); font-size: var(--t-1); }
.boton-blanco { background: #fff; color: var(--grafito); border-color: #fff; }
.boton-blanco:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }

.medidas-escala { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; }
.medidas-escala li { flex: 1 1 0; min-width: 7rem; }
.medidas-escala a { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); text-decoration: none; color: var(--tinta); padding: var(--e-3); border-radius: var(--radio); }
.medidas-escala a:hover { background: var(--blanco); color: var(--rojo); }
.medida-circulo { display: block; width: calc(13rem * var(--d)); max-width: 100%; aspect-ratio: 1; }
.medida-rueda { width: 100%; height: 100%; display: block; }
.medida-num { font: 400 clamp(2rem, 4vw, 3rem)/1 var(--titular); color: var(--rojo); }
.medida-n { font-size: .9375rem; color: var(--tenue); }

.voces { background: var(--aluminio); padding-block: var(--e-8); }
.voces-rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-5); }
.voz { margin: 0; background: var(--blanco); border-radius: var(--radio); padding: var(--e-5); border-top: 4px solid var(--rojo); display: flex; flex-direction: column; justify-content: space-between; gap: var(--e-4); }
.voz blockquote { margin: 0; padding: 0; border: 0; }
.voz blockquote p { margin: 0; font: 400 var(--t-1)/1.5 var(--titular); }
.voz blockquote p::before { content: "«"; color: var(--rojo); }
.voz blockquote p::after { content: "»"; color: var(--rojo); }
.voz figcaption { font-size: .9375rem; color: var(--tenue); line-height: 1.5; }
.voz figcaption strong { color: var(--tinta); }
.voz figcaption a { display: inline-block; padding-block: .3rem; }

@media (max-width: 52rem) {
  .taller-pasos, .voces-rejilla { grid-template-columns: 1fr; }
  .taller-paso figure { flex-direction: row; align-items: center; }
  .taller-paso img { width: 7.5rem; flex: none; margin: 0; }
  .medidas-escala { justify-content: center; }
  .medidas-escala li { flex: 0 1 45%; }
  .medida-circulo { width: calc(9rem * var(--d)); }
  .empresa-sangre { min-height: 30rem; }
  .voces { padding-block: var(--e-7); }
}