/* GRÚAS — componentes. Solo var(--…) de tokens.css; ningún color ni tamaño a mano (verificar.py #4).
   Móvil primero: las reglas base son las del teléfono en obra; las @media agrandan.
   Excepción documentada (DISENO-GRUAS.md §1): los dos puntos de quiebre, 48rem y 64rem, porque una
   media query no admite var(). */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--f-texto); font-size: var(--t0); line-height: var(--interlinea); font-weight: var(--peso-texto);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; text-decoration-thickness: var(--linea); text-underline-offset: var(--subrayado); }
a:hover { text-decoration-color: var(--acento); }
:focus-visible { outline: var(--linea-2) solid var(--foco); outline-offset: var(--e1); }
h1, h2, h3 { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo);
  line-height: var(--interlinea-titulo); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t3); }
h2 { font-size: var(--t3); }
h3 { font-size: var(--t2); }
p { margin: 0 0 var(--e4); }
p, li, dd { max-width: var(--prosa); }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; }
strong { font-weight: var(--peso-titulo); }
.visualmente-oculto { position: absolute; width: var(--linea); height: var(--linea); overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; }
.saltar:focus { position: static; width: auto; height: auto; clip: auto; display: block; padding: var(--e3); background: var(--amarillo); color: var(--sobre-amarillo); }
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e4); }
.mayus { font-size: var(--t-1); font-weight: var(--peso-medio); letter-spacing: var(--tracking-mayus);
  text-transform: uppercase; color: var(--acento); margin-bottom: var(--e2); }
.lead { font-size: var(--t1); color: var(--tinta-2); }

/* ---------- la franja del coche parado (filtro, en todas las páginas) ---------- */
.franja { margin: 0; max-width: none; padding: var(--e2) var(--e4); background: var(--oscuro-2); color: var(--sobre-oscuro-2);
  font-size: var(--t-1); text-align: center; }
.franja strong { color: var(--sobre-oscuro); }

/* ---------- botones ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: var(--e2);
  min-height: var(--alto-tocable); padding: var(--e2) var(--e5); border: var(--linea-2) solid transparent; border-radius: var(--r1);
  font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t1);
  text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background var(--transicion), border-color var(--transicion); }
.boton svg { width: var(--icono); height: var(--icono); flex: none; }
.boton--primario { background: var(--amarillo); color: var(--sobre-amarillo); border-color: var(--amarillo); }
.boton--primario:hover { border-color: var(--sobre-amarillo); }
.boton--claro { background: transparent; color: var(--sobre-oscuro); border-color: var(--sobre-oscuro-2); }
.boton--claro:hover { border-color: var(--sobre-oscuro); }
.boton--bloque { width: 100%; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e3); margin: var(--e5) 0 var(--e4); }

/* ---------- cabecera ---------- */
.cabecera { position: sticky; top: 0; z-index: var(--z-cabecera); background: var(--oscuro); color: var(--sobre-oscuro);
  border-bottom: var(--linea) solid var(--oscuro-2); }
.cabecera__fila { display: flex; align-items: center; gap: var(--e4); min-height: calc(var(--alto-tocable) + var(--e4)); position: relative; }
/* el logotipo (dirección A, generado por logo.py): la tinta sigue al color del texto; el acento es el amarillo.
   Sobre la cabecera y el pie oscuros sale en negativo. Protección: ½ H alrededor (manual de identidad §4). */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--sobre-oscuro); flex: none; margin: 0; }
.logo-svg { display: block; height: var(--logo-alto); width: auto; }
.l-tinta { fill: currentColor; }
.l-acento { fill: var(--amarillo); }
.logo--pie .logo-svg { height: var(--logo-alto-pie); }
.nav { display: none; }
.nav[data-abierto="true"] { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%;
  background: var(--oscuro); padding: var(--e2) var(--e4) var(--e4); border-bottom: var(--linea-2) solid var(--amarillo); }
.nav a { color: var(--sobre-oscuro); text-decoration: none; font-family: var(--f-display); font-stretch: var(--estrecho);
  font-weight: var(--peso-titulo); text-transform: uppercase; font-size: var(--t1); padding: var(--e3) 0;
  border-bottom: var(--linea-2) solid transparent; }
.nav a[aria-current="page"], .nav a:hover { border-bottom-color: var(--amarillo); }
.cabecera__menu { margin-left: auto; min-height: var(--alto-tocable); min-width: var(--alto-tocable); padding: 0 var(--e3);
  background: transparent; color: var(--sobre-oscuro); border: var(--linea) solid var(--sobre-oscuro-2); border-radius: var(--r1);
  font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); text-transform: uppercase; }
.cabecera__cta { display: none; }

/* ---------- héroe de portada: la foto real en duotono de marca, el nombre enorme, y la placa ---------- */
.heroe { background: var(--oscuro); color: var(--sobre-oscuro); display: grid; }
.heroe__foto { position: relative; margin: 0; min-height: var(--foto-alto-movil); background: var(--amarillo); overflow: hidden; isolation: isolate; order: -1; }
.heroe__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--foto-foco, 50% 50%);
  filter: grayscale(1) contrast(1.25); mix-blend-mode: multiply; }
.heroe__foto::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, var(--oscuro) 0%, transparent 70%); }
.heroe__marca-bloque { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 0 var(--e6) var(--e5); }
.heroe__logo { display: block; width: 100%; max-width: var(--marca-heroe); height: auto; color: var(--sobre-oscuro); }
.heroe__lema { margin: var(--e6) 0 0; max-width: none; font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo);
  font-size: var(--t2); text-transform: uppercase; color: var(--amarillo); }
.heroe__texto { padding-top: var(--e5); padding-bottom: var(--e6); }
.heroe .mayus { color: var(--amarillo); }
.heroe__titulo { font-size: var(--t4); max-width: var(--titular); margin-bottom: var(--e4); }
.heroe__precio { font-size: var(--t1); color: var(--sobre-oscuro); margin: var(--e4) 0 0; }
.heroe__precio strong { color: var(--amarillo); }
.heroe__filtro { font-size: var(--t-1); color: var(--sobre-oscuro-2); margin: 0; }
.heroe__filtro strong { color: var(--sobre-oscuro); }
.sellos { list-style: none; margin: 0 0 var(--e4); padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.sellos li { max-width: none; font-size: var(--t-1); font-weight: var(--peso-titulo); text-transform: uppercase; letter-spacing: var(--tracking-mayus);
  border: var(--linea) solid var(--sobre-oscuro-2); color: var(--sobre-oscuro); border-radius: var(--r1); padding: var(--e1) var(--e2); letter-spacing: normal; }
.sellos--claro li { border-color: var(--acero); color: var(--tinta); }

/* ---------- LA PLACA de capacidad ---------- */
.placa { background: var(--superficie); color: var(--tinta); border: var(--linea-2) solid var(--tinta);
  border-top: var(--linea-3) solid var(--amarillo); border-radius: var(--r2); padding: var(--e4); max-width: var(--prosa); }
.placa__titulo { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t2);
  text-transform: uppercase; margin: 0 0 var(--e2); }
.placa__cifras { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin: 0; }
.placa__cifra { border-top: var(--linea) solid var(--linea-color); padding-top: var(--e2); display: grid; grid-template-rows: 1fr auto; gap: var(--e1); }
.placa__cifra dt { font-size: var(--t-1); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: var(--tracking-mayus); color: var(--tinta-2); }
.placa__cifra dd { margin: 0; line-height: var(--interlinea-titulo); font-variant-numeric: tabular-nums; }
.placa__numero { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t-cifra); }
.placa__unidad { font-weight: var(--peso-medio); font-size: var(--t1); }
.placa__ficha { font-size: var(--t-1); color: var(--tinta-2); margin: var(--e3) 0 0; }
.placa--compacta .placa__numero { font-size: var(--t4); }
.placa--compacta .placa__titulo { font-size: var(--t1); }

/* ---------- cabeza de página ---------- */
.cabeza { background: var(--oscuro); color: var(--sobre-oscuro); padding: var(--e4) 0 var(--e6); }
.cabeza .mayus { color: var(--amarillo); }
.cabeza h1 { max-width: var(--titular); font-size: var(--t4); }
.cabeza .lead { color: var(--sobre-oscuro-2); margin: var(--e4) 0 0; }
.migas { font-size: var(--t-1); color: var(--sobre-oscuro-2); margin-bottom: var(--e4); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--e2); }
.migas li { max-width: none; }
.migas li + li::before { content: "/"; margin-right: var(--e2); }
.migas a { color: var(--sobre-oscuro); }

/* ---------- columnas: prosa + panel ---------- */
.columnas { display: grid; gap: var(--e6); padding-top: var(--e6); padding-bottom: var(--e7); }
.columnas > * { min-width: 0; }   /* un hijo de rejilla no encoge por debajo de su contenido: la tabla se desplaza dentro */
.prosa > * + * { margin-top: var(--e4); }
.prosa h2 { font-size: var(--t3); margin-top: var(--e7); }
.prosa h3 { font-size: var(--t2); margin-top: var(--e6); }
.prosa h2 + *, .prosa h3 + * { margin-top: var(--e3); }
.prosa ul, .prosa ol { padding-left: var(--e5); }
.prosa li + li { margin-top: var(--e2); }
.prosa a { color: var(--tinta); text-decoration-color: var(--acento); }
.prosa blockquote { margin: 0; padding: var(--e3) var(--e4); border-left: var(--linea-3) solid var(--amarillo); background: var(--superficie); }
.prosa blockquote p { margin: 0; }
.prosa hr { border: 0; border-top: var(--linea) solid var(--linea-color); }

/* tablas: se desplazan DENTRO de su caja */
.tabla { position: relative; overflow-x: auto; border: var(--linea) solid var(--linea-color); border-radius: var(--r2); background: var(--superficie); }
.tabla table { min-width: 100%; }
.tabla th { text-align: left; padding: var(--e3); font-size: var(--t-1); font-weight: var(--peso-medio); text-transform: uppercase;
  letter-spacing: var(--tracking-mayus); color: var(--tinta-2); border-bottom: var(--linea-2) solid var(--linea-color); vertical-align: bottom; }
.tabla td { padding: var(--e3); border-bottom: var(--linea) solid var(--linea-color); vertical-align: top; font-variant-numeric: tabular-nums; }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:nth-child(even) { background: var(--fondo); }

/* figuras (foto propia con pie y fecha) */
.figura { margin: 0; }
.figura img { width: 100%; border-radius: var(--r2); background: var(--superficie-2); }
.figura figcaption { font-size: var(--t-1); color: var(--tinta-2); margin-top: var(--e2); max-width: var(--prosa); }
.figura--vertical img { max-height: var(--foto-alto); width: auto; }
.figura__fecha { color: var(--tinta-2); }

/* el cálculo con sus supuestos a la vista (tiempos, pesos, costos): nunca un número sin su cuenta */
.calculo { background: var(--superficie); border: var(--linea) solid var(--linea-color); border-left: var(--linea-3) solid var(--amarillo);
  border-radius: var(--r2); padding: var(--e4); }
.calculo > * + * { margin-top: var(--e3); }
.calculo p { margin: 0; }
.calculo__etiqueta { display: inline-block; font-size: var(--t-1); font-weight: var(--peso-titulo); text-transform: uppercase;
  letter-spacing: var(--tracking-mayus); background: var(--amarillo); color: var(--sobre-amarillo); padding: 0 var(--e2); border-radius: var(--r1); }
.calculo ol, .calculo ul { margin: 0; }

.aviso { background: var(--acento-suave); color: var(--tinta); border-left: var(--linea-3) solid var(--amarillo); padding: var(--e3) var(--e4); border-radius: var(--r1); }
.aviso p { margin: 0; }
.si { color: var(--si); font-weight: var(--peso-titulo); }
.no { color: var(--no); font-weight: var(--peso-titulo); }

/* panel lateral */
.panel { background: var(--superficie); border: var(--linea) solid var(--linea-color); border-radius: var(--r2); padding: var(--e4);
  align-self: start; display: grid; gap: var(--e3); }
.panel .placa { border-width: var(--linea); padding: var(--e3); }
.panel__precio { margin: 0; font-size: var(--t1); }
.panel__precio strong { font-family: var(--f-display); font-stretch: var(--estrecho); font-size: var(--t3); }
.panel__desde { font-size: var(--t-1); text-transform: uppercase; letter-spacing: var(--tracking-mayus); color: var(--tinta-2); }
.panel__nota { margin: 0; font-size: var(--t-1); color: var(--tinta-2); }
.panel__enlace { font-weight: var(--peso-medio); color: var(--tinta); text-decoration-color: var(--acento); }
.panel__filtro { margin: 0; font-size: var(--t-1); font-weight: var(--peso-medio); color: var(--tinta-2); border-top: var(--linea) solid var(--linea-color); padding-top: var(--e3); }

/* tarjetas (hijas del hub, relacionadas, usos) */
.tarjetas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ancho-tarjeta)), 1fr)); }
.prosa .tarjetas { padding: 0; }
.tarjetas li, .prosa .tarjetas li { margin: 0; max-width: none; }
.tarjeta__enlace { display: flex; flex-direction: column; gap: var(--e1); height: 100%; padding: var(--e4); background: var(--superficie);
  border: var(--linea) solid var(--linea-color); border-top: var(--linea-2) solid var(--tinta); border-radius: var(--r2); text-decoration: none; color: var(--tinta);
  transition: border-color var(--transicion); }
.tarjeta__enlace:hover { border-top-color: var(--amarillo); border-color: var(--acero); }
.tarjeta__seccion { font-size: var(--t-1); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: var(--tracking-mayus); color: var(--acento); }
.tarjeta__titulo { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t2); line-height: var(--interlinea-titulo); }
.tarjeta__texto { font-size: var(--t-1); color: var(--tinta-2); }
.tarjeta__ir { margin-top: auto; padding-top: var(--e2); font-weight: var(--peso-titulo); font-size: var(--t-1); }

.sigue { background: var(--superficie-2); padding: var(--e6) 0 var(--e7); }
.sigue__titulo { margin-bottom: var(--e4); }

/* secciones de portada */
.seccion { padding: var(--e7) 0; }
.seccion--superficie { background: var(--superficie); }
.seccion h2 { margin-bottom: var(--e3); max-width: var(--titular); }
.seccion .lead { margin-bottom: var(--e5); }
.seccion__mas { margin: var(--e5) 0 0; font-weight: var(--peso-titulo); }
.seccion__mas a { text-decoration-color: var(--acento); }
.dos { display: grid; gap: var(--e6); align-items: center; }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); counter-reset: paso; }
.pasos li { counter-increment: paso; background: var(--superficie); border: var(--linea) solid var(--linea-color); border-radius: var(--r2); padding: var(--e4); max-width: none; }
.pasos li::before { content: counter(paso); display: block; font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo);
  font-size: var(--t4); line-height: var(--interlinea-titulo); color: var(--acento); margin-bottom: var(--e2); }
.pasos h3 { margin-bottom: var(--e2); }
.pasos p { margin: 0; color: var(--tinta-2); }
.galeria { display: grid; gap: var(--e4); }
.cierre { background: var(--oscuro); color: var(--sobre-oscuro); padding: var(--e8) 0; }
.cierre h2 { font-size: var(--t4); max-width: var(--titular); margin-bottom: var(--e3); }
.cierre .lead { color: var(--sobre-oscuro-2); }
.cierre__filtro { margin: var(--e4) 0 0; font-size: var(--t-1); color: var(--sobre-oscuro-2); }

/* preguntas frecuentes */
.faq { border: var(--linea) solid var(--linea-color); border-radius: var(--r1); background: var(--superficie); padding: 0 var(--e4); }
.prosa .faq + .faq { margin-top: var(--e2); }
.faq summary { cursor: pointer; padding: var(--e3) 0; font-weight: var(--peso-titulo); list-style: none; display: flex; justify-content: space-between; gap: var(--e3); min-height: var(--alto-tocable); align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--acento); font-size: var(--t2); flex: none; }
.faq[open] summary::after { content: "–"; }
.faq p { color: var(--tinta-2); }

/* fuentes */
.fuentes__titulo { font-size: var(--t2); }
.fuentes { font-size: var(--t-1); color: var(--tinta-2); overflow-wrap: anywhere; }
.fuentes a { color: var(--tinta-2); }

/* cotizador: arma el mensaje de WhatsApp, no envía nada a ningún servidor */
.cotizador { background: var(--superficie); border: var(--linea) solid var(--linea-color); border-top: var(--linea-3) solid var(--amarillo); border-radius: var(--r2); padding: var(--e4); }
.cotizador__campos { display: grid; gap: var(--e3); }
.campo { display: grid; gap: var(--e1); font-size: var(--t-1); font-weight: var(--peso-medio); color: var(--tinta-2); }
.campo input, .campo textarea, .campo select { min-height: var(--alto-tocable); border: var(--linea) solid var(--acero); border-radius: var(--r1);
  background: var(--fondo); color: var(--tinta); padding: var(--e2) var(--e3); font: inherit; font-size: var(--t0); width: 100%; }
.cotizador .boton { margin-top: var(--e4); }
.cotizador__nota { font-size: var(--t-1); color: var(--tinta-2); margin: var(--e3) 0 0; }

/* pie */
.pie { background: var(--oscuro); color: var(--sobre-oscuro-2); padding: var(--e7) 0 var(--e8); font-size: var(--t-1); }
.pie__rejilla { display: grid; gap: var(--e6); }
.pie__titulo { font-size: var(--t1); color: var(--sobre-oscuro); margin-bottom: var(--e3); }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e2); }
.pie a { color: var(--sobre-oscuro); }
.pie address { font-style: normal; line-height: var(--interlinea); }
.pie__filtro { color: var(--sobre-oscuro); font-weight: var(--peso-medio); }
.pie__legal { margin-top: var(--e6); padding-top: var(--e4); border-top: var(--linea) solid var(--oscuro-2); display: flex; flex-wrap: wrap; gap: var(--e4); justify-content: space-between; align-items: center; }
.tema { background: transparent; color: var(--sobre-oscuro-2); border: var(--linea) solid var(--oscuro-2); border-radius: var(--r1); padding: var(--e1) var(--e3); min-height: var(--alto-tocable); cursor: pointer; }

/* WhatsApp flotante (solo teléfono) */
.flotante-wa { position: fixed; right: var(--e4); bottom: var(--e4); z-index: var(--z-flotante); box-shadow: var(--sombra); }

/* ---------- tableta ---------- */
@media (min-width: 48rem) {
  .contenedor { padding: 0 var(--e5); }
  .franja__extra { display: inline; }
  .grafico__desliza { display: none; }
  h1 { font-size: var(--t4); }
  .heroe__foto { min-height: var(--foto-alto); }
  .galeria { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(3, 1fr); }
  .pie__rejilla { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- escritorio ---------- */
@media (min-width: 64rem) {
  .nav { display: flex; gap: var(--e4); margin-left: auto; }
  .nav a { padding: var(--e2) var(--e1); }
  .cabecera__menu { display: none; }
  .cabecera__cta { display: inline-flex; }
  .flotante-wa { display: none; }
  .heroe { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .heroe__foto { order: 0; min-height: 100%; }
  .heroe__texto { width: auto; max-width: none; margin: 0; padding: var(--e6) var(--e7) var(--e7) max(var(--e5), calc((var(--ancho-ventana) - var(--ancho)) / 2 + var(--e5))); }
  .heroe__marca-bloque { padding: 0 var(--e7) var(--e6); }
  .heroe__lema { margin-top: var(--e7); }
  .columnas { grid-template-columns: minmax(0, 1fr) var(--ancho-panel); gap: var(--e7); }
  .panel { position: sticky; top: calc(var(--alto-tocable) + var(--e6)); }
  .dos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .galeria { grid-template-columns: repeat(3, 1fr); }
  .pie__rejilla { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
}

/* ---------- gráficos originales (SVG, colores solo por token) ---------- */
.grafico { margin: 0; }
.grafico__lienzo { position: relative; overflow-x: auto; }
.grafico--ancho .grafico__svg { min-width: var(--grafico-min); }
.grafico__desliza { font-size: var(--t-1); color: var(--tinta-2); margin: 0 0 var(--e2); }
.franja__extra { display: none; }
.grafico__svg { width: 100%; height: auto; }
.grafico__pie { font-size: var(--t-1); color: var(--tinta-2); margin-top: var(--e2); max-width: var(--prosa); }
.pictograma { display: grid; gap: var(--e4); }
.pictograma__cifra { display: flex; align-items: baseline; gap: var(--e3); flex-wrap: wrap; }
.pictograma__numero { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t-cifra); line-height: var(--interlinea-titulo); color: var(--acento); }
.pictograma__texto { max-width: var(--prosa); font-weight: var(--peso-medio); }
.pictograma__svg { max-width: var(--ancho-pictograma); }
.quien { display: grid; gap: var(--e4); }
.quien__col { background: var(--superficie); border: var(--linea) solid var(--linea-color); border-top: var(--linea-3) solid var(--amarillo); border-radius: var(--r2); padding: var(--e4); }
.quien__col--cliente { border-top-color: var(--tinta); }
.quien__col h3 { margin-bottom: var(--e2); }
.quien__col ul { margin: 0; padding-left: var(--e5); }
.servicios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e4); }
.servicios li { max-width: none; }
.servicio { display: flex; flex-direction: column; gap: var(--e2); height: 100%; padding: var(--e5); background: var(--superficie); border: var(--linea) solid var(--linea-color);
  border-top: var(--linea-3) solid var(--tinta); border-radius: var(--r2); text-decoration: none; color: var(--tinta); }
.servicio--estrella { border-top-color: var(--amarillo); background: var(--acento-suave); }
.servicio__titulo { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t3); line-height: var(--interlinea-titulo); }
.servicio__texto { color: var(--tinta-2); }
.servicio__ir { margin-top: auto; font-weight: var(--peso-titulo); }
@media (min-width: 48rem) {
  .quien { grid-template-columns: 1fr 1fr; }
  .servicios { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- ajustes: el nombre y el lema del héroe son bloques; la calculadora de tiempo ---------- */
.heroe__lema { display: block; line-height: var(--interlinea-titulo); }
.calculadora { background: var(--superficie); border: var(--linea) solid var(--linea-color); border-top: var(--linea-3) solid var(--amarillo); border-radius: var(--r2); padding: var(--e4); display: grid; gap: var(--e4); }
.calculadora fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.calculadora legend { font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); font-size: var(--t2); margin-bottom: var(--e2); padding: 0; }
.calculadora__resultado { display: block; font-weight: var(--peso-titulo); font-size: var(--t1); background: var(--acento-suave); color: var(--tinta); padding: var(--e3) var(--e4); border-left: var(--linea-3) solid var(--amarillo); border-radius: var(--r1); }
.calculadora__nota { font-size: var(--t-1); color: var(--tinta-2); margin: 0; }
.cotizador + .cotizador { margin-top: var(--e5); }
.cotizador__titulo { margin-bottom: var(--e3); }
@media (min-width: 48rem) {
  .calculadora { grid-template-columns: repeat(3, 1fr); }
  .calculadora__resultado, .calculadora__nota { grid-column: 1 / -1; }
}
/* la franja completa y el aviso de deslizar, según el ancho (al final: ganan a las reglas base de arriba) */
@media (min-width: 48rem) {
  .franja__extra { display: inline; }
  .grafico__desliza { display: none; }
}
.tabla th { letter-spacing: normal; text-transform: none; font-weight: var(--peso-titulo); font-size: var(--t-1); }

/* ---------- fichas técnicas (la grúa a escala y compañía): trazo fijo en px de pantalla, color solo por token ---------- */
.ficha * { vector-effect: non-scaling-stroke; }
.e-sombra { fill: var(--linea-color); }
.e-piso { stroke: var(--tinta); stroke-width: var(--g-px-grueso); }
.e-cota { fill: none; stroke: var(--tinta-2); stroke-width: var(--g-px-fino); }
.e-guia { fill: none; stroke: var(--acero); stroke-width: var(--g-px-fino); stroke-dasharray: var(--g-guion-px); }
.e-eje, .e-nota { fill: var(--tinta-2); font-family: var(--f-texto); }
.e-cota-texto { fill: var(--tinta); font-family: var(--f-texto); font-weight: var(--peso-medio); }
.e-cifra { fill: var(--tinta); font-family: var(--f-display); font-stretch: var(--estrecho); font-weight: var(--peso-titulo); }
.e-unidad { fill: var(--tinta-2); font-family: var(--f-texto); font-stretch: var(--normal); font-weight: var(--peso-medio); }
.e-fino { fill: none; stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-fino-oscuro { fill: none; stroke: var(--sobre-amarillo); stroke-width: var(--g-px-fino); }
.e-cuerpo { fill: var(--superficie); stroke: var(--tinta); stroke-width: var(--g-px); stroke-linejoin: round; }
.e-vidrio { fill: var(--linea-color); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-claro { fill: var(--superficie-2); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-chasis { fill: var(--oscuro-2); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-metal { fill: var(--acero); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-cama { fill: var(--superficie-2); stroke: var(--tinta); stroke-width: var(--g-px); }
.e-redila { fill: var(--tinta-2); }
.e-llanta { fill: var(--oscuro-2); stroke: var(--tinta); stroke-width: var(--g-px); }
.e-rin { fill: var(--acero); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-maza { fill: var(--superficie); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-grua { fill: var(--amarillo); stroke: var(--sobre-amarillo); stroke-width: var(--g-px); stroke-linejoin: round; }
.e-oscuro { fill: var(--sobre-amarillo); }
.e-perno { fill: var(--amarillo); }
.e-gancho { fill: var(--tinta); }
.e-cilindro { fill: var(--tinta-2); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-vastago { fill: var(--superficie); stroke: var(--tinta-2); stroke-width: var(--g-px-fino); }
.e-madera { fill: var(--acento); stroke: var(--tinta); stroke-width: var(--g-px-fino); }
.e-carga { fill: var(--superficie-2); stroke: var(--tinta); stroke-width: var(--g-px); }
.e-cable { fill: none; stroke: var(--tinta); stroke-width: var(--g-px); stroke-linecap: round; }
.e-eslinga { fill: none; stroke: var(--acento); stroke-width: var(--g-px-eslinga); stroke-linecap: round; }
.e-fantasma, .e-fantasma * { fill: none; stroke: var(--acero); stroke-width: var(--g-px); stroke-dasharray: var(--g-guion-px); }
.e-persona { fill: var(--tinta-2); }
.e-peligro { fill: var(--acento-suave); }
.e-linea-electrica { stroke: var(--no); stroke-width: var(--g-px-grueso); }
.e-acordonado { fill: none; stroke: var(--tinta); stroke-width: var(--g-px); stroke-dasharray: var(--g-guion-px); }
.e-cono { fill: var(--amarillo); stroke: var(--sobre-amarillo); stroke-width: var(--g-px-fino); }
.e-figura { fill: var(--acero); }
.e-figura--alcance { fill: var(--amarillo); }
.e-figura-contorno { fill: var(--sobre-amarillo); stroke: var(--sobre-amarillo); stroke-width: var(--g-trazo-figura); stroke-linejoin: round; }
.e-muestra { fill: var(--amarillo); stroke: var(--sobre-amarillo); stroke-width: var(--g-px); }
.grafico--plano .grafico__svg { max-width: var(--grafico-plano); min-width: var(--grafico-plano-min); }