/* TallerOS — estilos compartidos (landing, alta publica, presupuesto y panel).
   Mobile-first. Sin dependencias ni fuentes externas.
   Prefijos: .wz- (formularios/pasos)  .lp- (landing)  .pn- (panel). */

:root {
  --marca: #1D4ED8;
  --marca-oscura: #1E3A8A;
  --marca-clara: #DBEAFE;
  --tinta: #0B1220;
  --tinta-suave: #55607A;
  --fondo: #F6F7FA;
  --papel: #FFFFFF;
  --borde: #DFE3EC;
  --borde-fuerte: #BBC3D4;
  --libre: #16A34A;
  --libre-suave: #DCFCE7;
  --reservada: #D97706;
  --reservada-suave: #FEF3C7;
  --en-uso: #DC2626;
  --en-uso-suave: #FEE2E2;
  --bloqueada: #64748B;
  --bloqueada-suave: #E2E8F0;
  --sombra: 0 1px 2px rgba(11, 18, 32, .06), 0 8px 24px rgba(11, 18, 32, .06);
  --radio: 14px;
  --radio-chico: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--tinta);
  background: var(--fondo);
  line-height: 1.5;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
a { color: var(--marca-oscura); }

:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 6px;
}

.oculto { display: none !important; }

.solo-lectores {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------- botones */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 48px; padding: .7rem 1.15rem;
  border: 1px solid transparent; border-radius: var(--radio-chico);
  background: var(--marca); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; text-align: center;
  transition: background .15s ease, transform .05s ease;
}

.btn:hover { background: var(--marca-oscura); }
.btn:active { transform: translateY(1px); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed;
}

.btn-secundario {
  background: var(--papel); color: var(--marca-oscura);
  border-color: var(--borde-fuerte);
}

.btn-secundario:hover { background: var(--marca-clara); }

.btn-fantasma {
  background: transparent; color: var(--tinta-suave);
  border-color: transparent; font-weight: 500;
}

.btn-fantasma:hover { background: var(--bloqueada-suave); }

.btn-chico { min-height: 40px; padding: .4rem .75rem; font-size: .9rem; }
.btn-bloque { width: 100%; }

/* ---------------------------------------------------------------- tarjetas y avisos */

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1rem;
  box-shadow: var(--sombra);
}

.aviso {
  border-radius: var(--radio-chico);
  padding: .75rem .9rem;
  border: 1px solid var(--borde-fuerte);
  background: var(--papel);
  margin: 0 0 1rem;
}

.aviso-error { border-color: #FCA5A5; background: #FEF2F2; color: #7F1D1D; }
.aviso-ok { border-color: #86EFAC; background: #F0FDF4; color: #14532D; }
.aviso-info { border-color: #7DD3FC; background: #F0F9FF; color: #0C4A6E; }
.aviso-atencion { border-color: #FCD34D; background: var(--reservada-suave); color: #78350F; }

.etiqueta {
  display: inline-block; padding: .15rem .5rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; letter-spacing: .01em;
  background: var(--marca-clara); color: var(--marca-oscura);
}

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--papel);
  font-size: .85rem; font-weight: 600; color: var(--tinta-suave);
}

.kpi-fila { display: flex; flex-wrap: wrap; gap: .5rem; }

.kpi {
  flex: 1 1 120px; min-width: 0;
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio-chico); padding: .6rem .75rem;
}

.kpi b { display: block; font-size: 1.4rem; line-height: 1.1; }
.kpi span { font-size: .82rem; color: var(--tinta-suave); }

/* ---------------------------------------------------------------- formularios */

.campo { margin: 0 0 .9rem; }
.campo label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.campo .ayuda { display: block; font-size: .82rem; color: var(--tinta-suave); margin-top: .25rem; }

.control {
  width: 100%; min-height: 48px; padding: .6rem .7rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--papel); color: var(--tinta); font: inherit;
}

select.control { appearance: none; background-image: none; }

.control[aria-invalid="true"] { border-color: var(--en-uso); }

.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.grilla-3 { display: grid; grid-template-columns: 1fr; gap: .75rem; }

/* Opciones tipo "pastilla" (duracion, vehiculo, dia). */
.opciones { display: flex; flex-wrap: wrap; gap: .5rem; }

.opcion {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .55rem .85rem;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: var(--papel); color: var(--tinta);
  font: inherit; font-weight: 600; cursor: pointer;
}

.opcion small { display: block; font-weight: 500; color: var(--tinta-suave); }

.opcion[aria-pressed="true"] {
  border-color: var(--marca); background: var(--marca-clara); color: var(--marca-oscura);
  box-shadow: inset 0 0 0 1px var(--marca);
}

.opcion[disabled] { opacity: .45; cursor: not-allowed; }
.opcion[disabled] small { color: inherit; }

/* ---------------------------------------------------------------- mapa de cocheras */

.mapa-envoltorio { overflow-x: auto; padding-bottom: .25rem; }

.mapa {
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  background: #EFF3F3;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 10px;
}

.mapa-cochera {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  aspect-ratio: 1 / 1.6;
  min-width: 0;
  padding: 3px 2px;
  border: 2px solid var(--borde-fuerte);
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: clamp(.58rem, 2.3vw, .8rem);
  font-weight: 700;
  cursor: default;
  overflow: hidden;
}

.mapa-cochera .codigo { font-size: 1em; letter-spacing: -.01em; white-space: nowrap; }
.mapa-cochera .tipo { font-size: .72em; font-weight: 600; opacity: .75; white-space: nowrap; }

/* Marca de orientacion: una franja en el borde que da al pasillo. */
.mapa-cochera::after {
  content: ""; position: absolute; background: currentColor; opacity: .35;
}
.mapa-cochera[data-orientacion="norte"]::after { inset: 0 0 auto; height: 3px; }
.mapa-cochera[data-orientacion="sur"]::after { inset: auto 0 0; height: 3px; }
.mapa-cochera[data-orientacion="este"]::after { inset: 0 0 0 auto; width: 3px; }
.mapa-cochera[data-orientacion="oeste"]::after { inset: 0 auto 0 0; width: 3px; }

.mapa-cochera[data-estado="libre"] {
  border-color: var(--libre); background: var(--libre-suave); color: #14532D;
}
.mapa-cochera[data-estado="libre"][data-seleccionable="1"] { cursor: pointer; }
.mapa-cochera[data-estado="libre"][data-seleccionable="1"]:hover { background: #BBF7D0; }

.mapa-cochera[data-estado="libre"][aria-pressed="true"] {
  border-color: var(--marca-oscura); border-width: 3px;
  background: var(--marca); color: #fff;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .25);
}

.mapa-cochera[data-estado="reservada"] {
  border-color: var(--reservada); background: var(--reservada-suave); color: #78350F;
}

.mapa-cochera[data-estado="en_uso"] {
  border-color: var(--en-uso); background: var(--en-uso-suave); color: #7F1D1D;
}

.mapa-cochera[data-estado="bloqueada"] {
  border-color: var(--bloqueada); color: #334155; cursor: not-allowed;
  background-color: var(--bloqueada-suave);
  background-image: repeating-linear-gradient(45deg,
    rgba(100, 116, 139, .35) 0 4px, transparent 4px 8px);
}

.mapa-cochera[data-estado="fuera_de_servicio"] {
  border-color: var(--bloqueada); color: #334155; cursor: not-allowed;
  background: var(--bloqueada-suave);
}

.mapa-cochera[data-estado="fuera_de_servicio"]::before {
  content: "\00D7"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; opacity: .45;
}
.mapa-cochera[data-estado="fuera_de_servicio"] .codigo,
.mapa-cochera[data-estado="fuera_de_servicio"] .tipo { visibility: hidden; }

.leyenda { display: flex; flex-wrap: wrap; gap: .4rem .8rem; margin-top: .6rem; font-size: .82rem; }

.leyenda span { display: inline-flex; align-items: center; gap: .35rem; color: var(--tinta-suave); }

.leyenda i {
  width: 14px; height: 14px; border-radius: 4px; border: 2px solid var(--borde-fuerte);
  display: inline-block;
}
.leyenda i[data-estado="libre"] { border-color: var(--libre); background: var(--libre-suave); }
.leyenda i[data-estado="reservada"] { border-color: var(--reservada); background: var(--reservada-suave); }
.leyenda i[data-estado="en_uso"] { border-color: var(--en-uso); background: var(--en-uso-suave); }
.leyenda i[data-estado="bloqueada"] {
  border-color: var(--bloqueada); background-color: var(--bloqueada-suave);
  background-image: repeating-linear-gradient(45deg, rgba(100, 116, 139, .35) 0 3px, transparent 3px 6px);
}
.leyenda i[data-estado="fuera_de_servicio"] { border-color: var(--bloqueada); background: var(--bloqueada-suave); }

/* ---------------------------------------------------------------- presupuesto publico */

.pz-encabezado {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem;
}

.pz-encabezado h1 { font-size: 1.4rem; margin: .2rem 0 .25rem; }

.pz-estado {
  display: inline-block; padding: .35rem .7rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; white-space: nowrap;
  background: var(--bloqueada-suave); color: #334155;
  border: 1px solid var(--borde-fuerte);
}

.pz-estado[data-color="ambar"] { background: var(--reservada-suave); color: #78350F; border-color: #FCD34D; }
.pz-estado[data-color="azul"] { background: var(--marca-clara); color: var(--marca-oscura); border-color: #93C5FD; }
.pz-estado[data-color="naranja"] { background: #FFEDD5; color: #7C2D12; border-color: #FDBA74; }
.pz-estado[data-color="verde"] { background: var(--libre-suave); color: #14532D; border-color: #86EFAC; }
.pz-estado[data-color="rojo"] { background: var(--en-uso-suave); color: #7F1D1D; border-color: #FCA5A5; }
.pz-estado[data-color="tenue"] { background: var(--bloqueada-suave); color: #475569; }

.pz-datos h2, .pz-tabla-envoltorio + h2 { margin-top: 0; }

.pz-descripcion { margin: .5rem 0 0; font-style: italic; color: var(--tinta-suave); }

.pz-tabla-envoltorio { overflow-x: auto; }

.pz-tabla { min-width: 480px; }
.pz-num { text-align: right; white-space: nowrap; }

.pz-totales {
  display: grid; grid-template-columns: 1fr auto; gap: .3rem 1rem;
  margin: 1rem 0 0; padding-top: .75rem; border-top: 1px solid var(--borde);
  font-size: .95rem;
}
.pz-totales dt { color: var(--tinta-suave); }
.pz-totales dd { margin: 0; text-align: right; font-weight: 600; }
.pz-totales .pz-total-final {
  font-size: 1.15rem; font-weight: 800; color: var(--tinta);
  border-top: 1px solid var(--borde); padding-top: .5rem; margin-top: .25rem;
}

.pz-acciones { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .75rem; }
.pz-acciones .btn { flex: 1 1 220px; }

.pz-aprobar { background: var(--libre); }
.pz-aprobar:hover { background: #14532D; }

.pz-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem; }
.pz-fotos figure { margin: 0; }
.pz-fotos img { width: 100%; border-radius: var(--radio-chico); border: 1px solid var(--borde); display: block; }
.pz-fotos figcaption { font-size: .8rem; color: var(--tinta-suave); margin-top: .25rem; }

@media print {
  .wz-cabecera, .wz-pie, .pz-acciones, #pz-seccion-decision { display: none !important; }
  .tarjeta { box-shadow: none; border-color: #ccc; }
  body { background: #fff; }
}

/* ---------------------------------------------------------------- wizard */

.wz-app {
  display: flex; flex-direction: column; min-height: 100vh;
  background: var(--fondo);
}

.wz-cabecera {
  position: sticky; top: 0; z-index: 5;
  background: var(--papel); border-bottom: 1px solid var(--borde);
  padding: .6rem 1rem .5rem;
}

.wz-cabecera-interior {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  max-width: 900px; margin: 0 auto;
}

.wz-marca {
  display: flex; align-items: center; gap: .5rem;
  margin: 0; font-weight: 700; font-size: 1rem; color: var(--tinta);
}

.wz-logo { display: inline-flex; color: var(--marca); }

.wz-direccion {
  max-width: 900px; margin: .15rem auto 0;
  font-size: .82rem; color: var(--tinta-suave);
}

.wz-principal {
  flex: 1; width: 100%; max-width: 900px;
  margin: 0 auto; padding: 1rem 1rem 2rem;
}

.wz-principal h1 { font-size: 1.5rem; margin-top: .25rem; }
.wz-principal h2 { font-size: 1.25rem; margin-top: .25rem; }

.wz-bajada { color: var(--tinta-suave); font-size: .95rem; }

.wz-pasos {
  display: flex; gap: .35rem; list-style: none; margin: 0 0 1rem; padding: 0;
  font-size: .78rem; color: var(--tinta-suave); flex-wrap: wrap;
}

.wz-pasos li {
  display: flex; align-items: center; gap: .3rem;
  padding: .25rem .55rem; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--papel);
}

.wz-pasos li span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--bloqueada-suave); color: var(--tinta-suave);
  font-weight: 700; font-size: .7rem;
}

.wz-pasos li.activo {
  border-color: var(--marca); background: var(--marca-clara); color: var(--marca-oscura); font-weight: 700;
}
.wz-pasos li.activo span { background: var(--marca); color: #fff; }

.wz-rotulo { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; }

.wz-subtitulo { font-size: 1.02rem; margin: 1.25rem 0 .6rem; }

fieldset { border: none; padding: 0; margin: 0 0 .9rem; }
fieldset legend { padding: 0; }

.wz-opcional { font-weight: 400; color: var(--tinta-suave); font-size: .82rem; }

.wz-resumen-paso { color: var(--tinta-suave); font-size: .92rem; margin-bottom: .75rem; }

.wz-acciones { display: flex; gap: .6rem; margin-top: 1rem; }
.wz-acciones .btn { flex: 1; }

.wz-elegida {
  margin: .75rem 0 0; padding: .5rem .7rem;
  background: var(--marca-clara); color: var(--marca-oscura);
  border-radius: var(--radio-chico); font-weight: 600; font-size: .9rem;
}

.wz-detalle { display: grid; grid-template-columns: minmax(110px, 40%) 1fr; gap: .35rem .75rem; margin: 0 0 1rem; }
.wz-detalle dt { color: var(--tinta-suave); font-size: .85rem; }
.wz-detalle dd { margin: 0; font-weight: 600; }

.wz-confirmacion .aviso { font-weight: 600; }

.wz-codigo {
  display: grid; gap: .2rem; margin: 0 0 1rem;
  padding: .75rem; border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-chico); background: #F8FAFA;
}

.wz-codigo span { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); }
.wz-codigo code { font-size: 1.05rem; font-weight: 700; word-break: break-all; }
.wz-codigo small { color: var(--tinta-suave); font-size: .8rem; }

.wz-pie {
  border-top: 1px solid var(--borde); background: var(--papel);
  padding: 1rem; text-align: center; color: var(--tinta-suave); font-size: .85rem;
}
.wz-pie p { margin: 0 0 .25rem; }
.wz-pie-marca { font-size: .8rem; }

@media (min-width: 720px) {
  .wz-acciones .btn { flex: 0 1 auto; min-width: 160px; }
  .wz-acciones { justify-content: flex-end; }
  .wz-principal h1 { font-size: 1.8rem; }
}

/* ---------------------------------------------------------------- landing */

.lp-app { background: var(--papel); }

.lp-contenedor { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 1rem; }

.lp-cabecera {
  position: sticky; top: 0; z-index: 6;
  background: rgba(255, 255, 255, .95);
  border-bottom: 1px solid var(--borde);
  backdrop-filter: blur(6px);
}

.lp-cabecera-interior {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding-top: .6rem; padding-bottom: .6rem; flex-wrap: wrap;
}

.lp-marca {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0; font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em;
}

.lp-logo { display: inline-flex; color: var(--marca); }

.lp-marca-sub {
  font-size: .72rem; font-weight: 500; color: var(--tinta-suave);
  border-left: 1px solid var(--borde-fuerte); padding-left: .5rem;
}

.lp-nav { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: .92rem; }
.lp-nav a { text-decoration: none; color: var(--tinta-suave); font-weight: 600; }
.lp-nav a:hover { color: var(--marca-oscura); }
.lp-nav a.btn { color: #fff; }

.lp-hero {
  padding: 2.5rem 0 2rem;
  background:
    radial-gradient(1200px 400px at 15% -10%, var(--marca-clara), transparent 60%),
    linear-gradient(180deg, #FBFDFD, var(--papel));
  border-bottom: 1px solid var(--borde);
}

.lp-hero-grilla { display: grid; gap: 2rem; align-items: center; }

.lp-hero h1 { font-size: 2rem; letter-spacing: -.02em; margin-bottom: .5rem; }

.lp-bajada { color: var(--tinta-suave); font-size: 1.05rem; max-width: 46ch; }

.lp-acciones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.25rem 0 .75rem; }

.lp-nota { font-size: .85rem; color: var(--tinta-suave); }

.lp-mock {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); overflow: hidden;
}

.lp-mock-encabezado {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .6rem .8rem; border-bottom: 1px solid var(--borde);
  font-size: .85rem; font-weight: 600;
}

.lp-mock-hora { color: var(--tinta-suave); font-weight: 500; }

.lp-mock-mapa {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px;
  padding: .8rem; background: #EFF3F3;
}

.lp-mock-mapa span {
  aspect-ratio: 3 / 4.5; border-radius: 6px;
  border: 2px solid var(--borde-fuerte); background: var(--papel);
}

.lp-mock-mapa span[data-estado="libre"] { border-color: var(--libre); background: var(--libre-suave); }
.lp-mock-mapa span[data-estado="reservada"] { border-color: var(--reservada); background: var(--reservada-suave); }
.lp-mock-mapa span[data-estado="en_uso"] { border-color: var(--en-uso); background: var(--en-uso-suave); }
.lp-mock-mapa span[data-estado="bloqueada"] {
  border-color: var(--bloqueada); background-color: var(--bloqueada-suave);
  background-image: repeating-linear-gradient(45deg, rgba(100, 116, 139, .35) 0 3px, transparent 3px 6px);
}
.lp-mock-mapa span[data-estado="fuera_de_servicio"] { border-color: var(--bloqueada); background: var(--bloqueada-suave); }

/* Mock del tablero del taller (landing) */
.lp-mock-tablero {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  padding: .8rem; background: #EFF2F8;
}

.lp-mock-columna { display: grid; gap: 5px; align-content: start; }

.lp-mock-titulo {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-suave); padding-bottom: 2px;
}

.lp-mock-columna[data-color="ambar"] .lp-mock-titulo { color: #B45309; }
.lp-mock-columna[data-color="azul"] .lp-mock-titulo { color: var(--marca); }
.lp-mock-columna[data-color="verde"] .lp-mock-titulo { color: #15803D; }

.lp-mock-orden {
  display: grid; gap: 1px;
  background: var(--papel); border: 2px solid var(--borde-fuerte); border-left-width: 5px;
  border-radius: 8px; padding: 5px 6px; font-size: .7rem; line-height: 1.25;
}

.lp-mock-columna[data-color="ambar"] .lp-mock-orden { border-left-color: var(--reservada); }
.lp-mock-columna[data-color="azul"] .lp-mock-orden { border-left-color: var(--marca); }
.lp-mock-columna[data-color="verde"] .lp-mock-orden { border-left-color: var(--libre); }

.lp-mock-orden b { font-size: .72rem; }
.lp-mock-orden i { font-style: normal; color: var(--tinta-suave); font-size: .66rem; }

.lp-mock-pie {
  padding: .6rem .8rem; font-size: .85rem; color: var(--tinta-suave);
  border-top: 1px solid var(--borde); background: var(--papel);
}
.lp-mock-pie strong { color: var(--marca-oscura); }

.lp-seccion { padding: 2.5rem 0; }
.lp-seccion-alt { background: var(--fondo); }
.lp-seccion h2 { font-size: 1.5rem; letter-spacing: -.01em; }
.lp-seccion > .lp-contenedor > .lp-bajada { margin-bottom: 1.25rem; }

.lp-tres, .lp-cuatro { display: grid; gap: 1rem; margin-top: 1.25rem; }

.lp-paso h3, .lp-feature h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.lp-paso p, .lp-feature p { margin: 0; color: var(--tinta-suave); font-size: .93rem; }

.lp-demo { display: grid; gap: 1.5rem; align-items: start; }
.lp-credenciales h3 { font-size: 1rem; }
.lp-credenciales dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .75rem; margin: 0 0 .5rem; font-size: .92rem; }
.lp-credenciales dt { color: var(--tinta-suave); }
.lp-credenciales dd { margin: 0; font-weight: 600; }
.lp-credenciales code { background: var(--fondo); padding: .1rem .35rem; border-radius: 6px; font-size: .9rem; }

.lp-faq { display: grid; gap: .5rem; margin-top: 1.25rem; }

.lp-faq details {
  background: var(--papel); border: 1px solid var(--borde);
  border-radius: var(--radio-chico); padding: .8rem 1rem;
}

.lp-faq summary { cursor: pointer; font-weight: 700; }
.lp-faq details[open] summary { margin-bottom: .5rem; }
.lp-faq p { margin: 0; color: var(--tinta-suave); font-size: .94rem; }

.lp-cierre {
  background: var(--marca-oscura); color: #EAF7F5; padding: 2.5rem 0; text-align: center;
}
.lp-cierre h2 { color: #fff; }
.lp-cierre p { max-width: 60ch; margin: 0 auto 1.25rem; color: #CBE9E5; }

.btn-inverso { background: #fff; color: var(--marca-oscura); }
.btn-inverso:hover { background: var(--marca-clara); }

.lp-pie { background: var(--tinta); color: #A9BFBC; padding: 1.5rem 0; font-size: .88rem; }
.lp-pie p { margin: 0 0 .25rem; }
.lp-pie a { color: #fff; }

@media (min-width: 860px) {
  .lp-tres { grid-template-columns: repeat(3, 1fr); }
  .lp-cuatro { grid-template-columns: repeat(3, 1fr); }
  .lp-hero-grilla { grid-template-columns: 1.1fr .9fr; }
  .lp-hero h1 { font-size: 2.6rem; }
  .lp-demo { grid-template-columns: 1.4fr 1fr; }
  .lp-seccion { padding: 3.5rem 0; }
  .lp-seccion h2 { font-size: 1.9rem; }
}

/* ---------------------------------------------------------------- tabla simple */

.tabla { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabla th, .tabla td { text-align: left; padding: .55rem .5rem; border-bottom: 1px solid var(--borde); }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
.tabla tbody tr:hover { background: #F3F7F7; }

@media (min-width: 720px) {
  .grilla-3 { grid-template-columns: repeat(3, 1fr); }
  .mapa-cochera { font-size: .78em; }
}

@media (max-width: 480px) {
  .mapa { gap: 4px; padding: 6px; }
  /* En celular la celda queda angosta: se muestra solo el codigo. */
  .mapa-cochera .tipo { display: none; }
  .mapa-cochera { aspect-ratio: 1 / 1.15; font-size: .62rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}