/* ═══════════════════════════════════════════════════════════
   MercaMaquinarias · Portal de maquinaria y equipo pesado
   Tokens de la Guía de Marca v1.0 (2026)
   ═══════════════════════════════════════════════════════════ */

:root {
  /* Paleta de marca · MercaMaquinarias, guía v1.0.
     Los valores son EXACTAMENTE los de la guía; solo cambia el nombre
     del token. Se conservan los nombres de aquí porque están usados en
     3.500 líneas y renombrarlos no cambiaría un pixel:

       guía          aquí            valor
       --mm-noche    --azul          #071A2B
       --mm-ambar    --ambar         #F2A900
       --mm-ambar-2  --ambar-hondo   #C98A00
       --mm-hueso    --hueso         #F7F5EF
       --mm-neutro   --gris-neutro   #E7E6E0
       --mm-acero    --gris-acero    #60717D
       --mm-verde    --verde         #157A4B
       --mm-display  --display       Archivo 700-800
       --mm-texto    --cuerpo        Inter 400-600
       --mm-radio    --r-tarjeta / --r-pildora   16px / 999px  */
  --azul:        #071A2B;
  --blanco:      #FFFFFF;
  --ambar:       #F2A900;
  --ambar-hondo: #C98A00;
  --hueso:       #F7F5EF;
  --gris-neutro: #E7E6E0;
  --gris-acero:  #60717D;
  --verde:       #157A4B;

  /* Derivados */
  --azul-2:      #0C2438;   /* superficie elevada sobre azul noche */
  --linea:       #DEDCD4;   /* hairline sobre claro */
  --linea-suave: #ECEAE3;
  --linea-dark:  rgba(255, 255, 255, .13);
  --texto-claro: #A2B4C1;

  /* Tipografía */
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --cuerpo:  "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Ritmo del portal: denso, no editorial */
  --envoltura: 1280px;
  --pad: 16px;
  --gap: 14px;
  --r: 6px;

  /* Radios de la guía de marca de MercaMaquinarias: 16 px en tarjetas,
     999 px en píldoras. El botón usa 10 px, como en la guía.
     --r (6 px) se queda para los controles pequeños —campos, chips,
     miniaturas—: a 16 px un input de 36 px de alto parece una cápsula. */
  --r-tarjeta:  16px;
  --r-boton:    10px;
  --r-pildora:  999px;
}

/* ── Base ───────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Columna a la altura de la ventana con el contenido creciendo: en las
   páginas cortas —acceso, contacto, un catálogo sin resultados— el pie
   quedaba a media pantalla con una franja de fondo debajo, y eso se lee
   como una página que no terminó de cargar. */
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--hueso);
  color: var(--azul);
  font-family: var(--cuerpo);
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
body > main { flex: 1 0 auto; }
body > .pie { flex: none; }

img { max-width: 100%; display: block; }
/* Los botones y paneles del asistente traen su propio `display`, que
   por especificidad le gana a [hidden]. Sin esto, ocultar por atributo
   no surte efecto. */
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }

.num { font-variant-numeric: tabular-nums; }

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

.sprite { display: none; }

/* Todos los iconos comparten el trazo de 1.75 px de la guía. */
.ico, .fantasma {
  width: 18px; height: 18px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ambar); color: var(--azul);
  padding: 9px 16px; border-radius: var(--r);
  font-weight: 700; transition: top .18s ease;
}
.skip:focus { top: 12px; }

.envoltura {
  width: 100%;
  max-width: var(--envoltura);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.etiqueta {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gris-acero);
}

/* ── Cabecera ───────────────────────────────────────────── */

.cab { position: sticky; top: 0; z-index: 40; }

.cab__barra {
  background: var(--azul);
  border-bottom: 3px solid var(--ambar);
}

.cab__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  min-height: 58px;
  padding-block: 9px;
}

/* 32 px de alto = 190 px de ancho. La guía fija el ancho mínimo del
   lockup horizontal en 180 px; a los 25 px de antes medía 148 px. */
.cab__logo img { height: 32px; width: auto; }

.cab__nav { display: flex; align-items: center; gap: 21px; margin-right: auto; }
.cab__nav a {
  color: #D5DEE5;
  font-size: 13.5px;
  font-weight: 600;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.cab__nav a:hover { color: var(--blanco); border-bottom-color: var(--ambar); }
.cab__nav-cta { color: var(--ambar) !important; }

.cab__pulso {
  text-align: right;
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto-claro);
  white-space: nowrap;
}
.cab__pulso b { color: var(--ambar); font-weight: 700; }

.cab__toggle {
  display: none;
  width: 38px; height: 34px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--linea-dark);
  border-radius: var(--r);
  cursor: pointer;
}
.cab__toggle span { display: block; width: 16px; height: 1.75px; background: var(--blanco); border-radius: 2px; }

/* ── Rejilla de filas ───────────────────────────────────── */

main { padding-block: 16px 40px; }

.fila { display: grid; gap: var(--gap); margin-bottom: var(--gap); }
.fila--busqueda   { grid-template-columns: minmax(0, 1.05fr) minmax(0, .72fr) minmax(0, 1.35fr); }
.fila--dos        { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fila--tres       { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fila--resultados { grid-template-columns: 258px minmax(0, 1fr); align-items: start; }
.fila--resultados > .panel:first-child { display: flex; flex-direction: column; position: sticky; top: 74px; }
/* En la barra lateral no cabe la etiqueta al lado: va encima del campo. */
.fila--resultados .campo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
.fila--resultados .form { gap: 11px; }
.fila--resultados .form__pie { gap: 8px; }
.fila--resultados .form__pie .btn { flex: 1; padding-inline: 10px; }

/* ── Panel ──────────────────────────────────────────────── */

.panel {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  padding: 16px 18px 18px;
  margin-bottom: var(--gap);
}
.fila .panel { margin-bottom: 0; }

/* El primer término va en ámbar: es el marcador de sección del portal. */
.panel__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.014em;
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--linea-suave);
}
.panel__titulo em { font-style: normal; color: var(--ambar-hondo); }
.panel__titulo--limpio { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

.panel__cabeza {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 10px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linea-suave);
}
.panel__meta { font-size: 12.5px; color: var(--gris-acero); }

.panel__texto { font-size: 13.5px; line-height: 1.62; color: var(--texto-2, #33475A); }
.panel__texto b { font-weight: 700; color: var(--azul); }

/* ── Formulario de búsqueda ─────────────────────────────── */

/* Columna flexible para que el botón se ancle al pie del panel
   cuando la fila la estira otro panel más alto. */
.fila--busqueda > .panel { display: flex; flex-direction: column; }

.form { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.form__pie { margin-top: auto; }
.tipos__pie { margin-top: auto; }

.campo { display: grid; grid-template-columns: 88px minmax(0, 1fr); align-items: center; gap: 10px; }
.campo > label { font-size: 12.5px; font-weight: 600; color: var(--gris-acero); }

.rango { display: flex; align-items: center; gap: 7px; }
.rango span { font-size: 12px; color: var(--gris-acero); flex: none; }
.rango select { flex: 1; min-width: 0; }

select, .calc__campo input {
  width: 100%;
  height: 31px;
  padding: 0 8px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  font-family: var(--cuerpo);
  font-size: 12.5px;
  color: var(--azul);
}
select:hover, .calc__campo input:hover { border-color: #C9C6BC; }
select:focus, .calc__campo input:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(242, 169, 0, .2); }

.form__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.form__enlaces { display: grid; gap: 3px; }
.form__enlaces a { font-size: 12.5px; font-weight: 600; color: var(--ambar-hondo); }
.form__enlaces a:hover { text-decoration: underline; }

/* ── Botones ────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--r-boton);
  font-family: var(--cuerpo);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.btn .ico { width: 16px; height: 16px; }
.btn--ambar { background: var(--ambar); color: var(--azul); }
.btn--ambar:hover { background: var(--ambar-hondo); }
.btn--azul { background: var(--azul); color: var(--blanco); }
.btn--azul:hover { background: var(--azul-2); }
.btn--linea { background: transparent; color: var(--azul); border-color: var(--linea); }
.btn--linea:hover { background: var(--hueso); border-color: var(--ambar); }
.btn--bloque { width: 100%; height: 38px; margin-top: 14px; }
.btn--grande { height: 42px; padding: 0 24px; font-size: 14.5px; }

/* ── Tipos ──────────────────────────────────────────────── */

.tipos li + li { border-top: 1px solid var(--linea-suave); }
.tipos a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 4px;
  font-size: 13px;
  font-weight: 600;
  transition: color .15s ease;
}
.tipos a:hover { color: var(--ambar-hondo); }
.tipos b { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--gris-acero); }

.tipos__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(242, 169, 0, .12);
  color: var(--ambar-hondo);
}
.tipos__ico .ico { width: 19px; height: 19px; }

.tipos__todos a { justify-content: flex-end; color: var(--ambar-hondo); font-size: 12.5px; }

/* ── Destacados ─────────────────────────────────────────── */

/* La lista no tiene tope: crece con los equipos promovidos y
   scrollea dentro del panel para no estirar la fila. */
.panel--destacados { display: flex; flex-direction: column; }

.destacados {
  display: grid;
  gap: 8px;
  flex: 1;
  max-height: 396px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.destacados::-webkit-scrollbar { width: 7px; }
.destacados::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 4px; }

.dest {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 11px;
  padding: 8px;
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-tarjeta);
  transition: border-color .15s ease, background-color .15s ease;
}
.dest:hover { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }

.dest__foto {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--gris-neutro);
  border-radius: 4px;
  overflow: hidden;
  color: var(--gris-acero);
}
.dest__foto img { width: 100%; height: 100%; object-fit: cover; }

.dest__cuerpo { display: grid; align-content: center; gap: 2px; min-width: 0; }
.dest__nombre { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.dest__meta { font-size: 11px; color: var(--gris-acero); }
.dest__fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 3px; }
.dest__precio { font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: -.01em; }

.panel__pie { margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--linea-suave); }
.panel__cabeza--ajustada { margin-bottom: 12px; }
.panel__apunte { font-family: var(--cuerpo); font-size: 11.5px; font-weight: 500; color: var(--gris-acero); letter-spacing: 0; }
.panel__nota { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--gris-acero); }

.tipos__pie { padding-top: 9px; border-top: 1px solid var(--linea-suave); text-align: right; }
.tipos__pie a { font-size: 12.5px; font-weight: 600; color: var(--ambar-hondo); }
.tipos__pie a:hover { text-decoration: underline; }

/* Marca de esquina: destacado / verificado */
.marca-esq {
  position: absolute;
  top: 0; right: 0;
  z-index: 2;
  padding: 3px 9px;
  background: var(--ambar);
  color: var(--azul);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  border-bottom-left-radius: 5px;
}

.datos-linea {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-top: 12px;
  padding-top: 11px;
  border-top: 1px solid var(--linea-suave);
  font-size: 12.5px;
  color: var(--gris-acero);
}
.datos-linea li { display: flex; align-items: center; gap: 6px; }
.datos-linea .ico { width: 15px; height: 15px; color: var(--ambar-hondo); }

/* ── Calculadora ────────────────────────────────────────── */

.calc {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 14px;
}

.calc__campo { position: relative; }
.calc__prefijo {
  position: absolute;
  left: 9px; top: 50%;
  transform: translateY(-50%);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gris-acero);
  pointer-events: none;
}
.calc__campo input { height: 36px; padding-left: 40px; font-variant-numeric: tabular-nums; }
.calc select { height: 36px; }

.calc__salida {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 13px 15px;
  background: var(--hueso);
  border: 1px solid var(--linea-suave);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
}
.calc__salida strong {
  font-family: var(--display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.calc__nota { font-size: 11.5px; line-height: 1.5; color: var(--gris-acero); }

/* ── Listas y pastillas ─────────────────────────────────── */

.lista-punteada { margin-top: 12px; display: grid; gap: 7px; }
.lista-punteada a {
  display: flex;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--texto-2, #33475A);
}
.lista-punteada a::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 6px; height: 7px;
  background: var(--ambar);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.lista-punteada a:hover { color: var(--ambar-hondo); }

.pastilla {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.pastilla .ico { width: 12px; height: 12px; stroke-width: 2.6; }
/* El verde solo comunica confianza verificada. */
.pastilla--verde { background: rgba(21, 122, 75, .1); color: var(--verde); }

.nota-verificado {
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--linea-suave);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris-acero);
}
.nota-verificado .pastilla { margin-right: 7px; vertical-align: 1px; }

/* ── Espacios publicitarios ─────────────────────────────── */

.anuncio {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 96px;
  background: repeating-linear-gradient(135deg, #F2F0EA 0 10px, #EDEBE4 10px 20px);
  border: 1px dashed #CFCCC2;
  border-radius: var(--r-tarjeta);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9E9C93;
}
.anuncio--ancho { min-height: 90px; margin-bottom: var(--gap); }

/* Espacio de la columna de filtros. Acompaña el desplazamiento en las
   páginas largas de resultados sin llegar a tapar nada. */
.anuncio--columna {
  position: sticky; top: 78px;
  margin-top: var(--gap);
  min-height: 250px;
  text-align: center; line-height: 1.7;
}

/* ── Portada: héroe ─────────────────────────────────────────
   Ocupa el ancho completo sobre el azul de marca para separar la
   promesa del portal del catálogo que viene debajo. */

.heroe {
  background:
    radial-gradient(1200px 340px at 12% -40%, rgba(242, 169, 0, .16), transparent 62%),
    var(--azul);
  border-bottom: 3px solid var(--ambar);
  color: var(--blanco);
}
.heroe__inner { padding: clamp(30px, 5vw, 52px) var(--pad) clamp(24px, 3.4vw, 34px); }

.heroe__titulo {
  max-width: 20ch;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(27px, 4.1vw, 46px);
  line-height: 1.06;
  letter-spacing: -.026em;
}
.heroe__titulo em { font-style: normal; color: var(--ambar); display: block; }

.heroe__sub {
  max-width: 62ch;
  margin-top: 13px;
  font-size: clamp(13.5px, 1.2vw, 15.5px);
  line-height: 1.62;
  color: var(--texto-claro);
}

/* Búsqueda del héroe: texto libre primero, que es lo que la gente
   intenta antes que cualquier desplegable. */
.heroe__buscar {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.15fr) minmax(0, 1.15fr) auto;
  gap: 8px;
  margin-top: 22px;
  padding: 9px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--linea-dark);
  border-radius: 10px;
  backdrop-filter: blur(2px);
}
.heroe__buscar input, .heroe__buscar select {
  height: 44px;
  width: 100%;
  padding: 0 13px;
  background: var(--blanco);
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--cuerpo);
  font-size: 14px;
  color: var(--azul);
}
.heroe__buscar input::placeholder { color: #92A0AA; }
.heroe__buscar input:focus-visible, .heroe__buscar select:focus-visible {
  outline: 2px solid var(--ambar); outline-offset: 1px;
}
.heroe__buscar .btn { height: 44px; padding: 0 26px; font-size: 14px; }

/* Cifras del catálogo. Salen de /api/estadisticas: si no hay nada
   publicado, el bloque no se dibuja en lugar de anunciar ceros. */
.heroe__cifras {
  display: flex; flex-wrap: wrap; gap: 10px 30px;
  margin-top: 20px;
}
.heroe__cifras li { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--texto-claro); }
.heroe__cifras b {
  font-family: var(--display); font-weight: 800; font-size: 19px;
  color: var(--blanco); letter-spacing: -.015em;
}
.heroe__apertura a { color: var(--ambar); font-weight: 600; text-decoration: underline; }

@media (max-width: 900px) {
  .heroe__buscar { grid-template-columns: 1fr 1fr; }
  .heroe__buscar input { grid-column: 1 / -1; }
  .heroe__buscar .btn { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .heroe__buscar { grid-template-columns: 1fr; }
}

/* ── Marcas ─────────────────────────────────────────────── */

.panel--marcas { display: flex; align-items: center; gap: 20px; padding-block: 13px; }

.marcas__titulo {
  flex: none;
  font-family: var(--display);
  font-weight: 700;
  font-size: 17px;
  padding-right: 20px;
  border-right: 1px solid var(--linea-suave);
}

.marcas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  align-items: center;
}
.marcas a {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gris-acero);
  transition: color .15s ease;
}
.marcas a:hover { color: var(--ambar-hondo); }

/* ── Rejilla de anuncios ────────────────────────────────── */

.rejilla {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px 12px;
}
/* Dentro del panel de resultados, con el filtro al lado, caben cuatro. */
.rejilla--panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.aviso a { display: grid; gap: 2px; }

.aviso__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  margin-bottom: 7px;
  background: var(--gris-neutro);
  border-radius: 4px;
  overflow: hidden;
  color: var(--gris-acero);
  transition: box-shadow .15s ease;
}
.aviso__foto .fantasma { width: 42px; height: 42px; opacity: .34; stroke-width: 1.2; }
.aviso a:hover .aviso__foto { box-shadow: 0 0 0 2px var(--ambar); }

.aviso__nombre {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.32;
  transition: color .15s ease;
}
.aviso a:hover .aviso__nombre { color: var(--ambar-hondo); }

.aviso__specs { font-size: 11.5px; color: var(--gris-acero); }

.aviso__sitio {
  display: flex; align-items: center; gap: 4px;
  font-size: 11.5px; color: var(--gris-acero);
}
.aviso__sitio .ico { width: 12px; height: 12px; flex: none; opacity: .8; }

/* Cuántas fotografías trae el anuncio. Es la señal que más separa una
   publicación trabajada de una improvisada, así que va sobre la
   imagen y no perdida en la ficha. */
.aviso__fotos {
  position: absolute; right: 6px; bottom: 6px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px;
  background: rgba(7, 26, 43, .78);
  border-radius: 999px;
  font-size: 11px; font-weight: 600; color: var(--blanco);
}
.aviso__fotos .ico { width: 12px; height: 12px; stroke-width: 2; }

.aviso__pie { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: 2px; }

.aviso__precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: -.01em;
}
.aviso__ofertas { font-size: 11px; color: var(--verde); font-weight: 600; }

.aviso__vendedor {
  display: flex; align-items: center; gap: 4px;
  margin-top: 3px; padding-top: 5px;
  border-top: 1px solid var(--linea-suave);
  font-size: 11px; color: var(--gris-acero);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aviso__vendedor--particular { font-style: italic; }
.ico--sello { width: 12px; height: 12px; color: var(--verde); stroke-width: 2.4; flex: none; }

/* ── Pie de sección "ver todo" ─────────────────────────── */

.paginas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--linea-suave);
}

/* ── Dealers ────────────────────────────────────────────── */

.dealers { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.dealer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  height: 100%;
  padding: 14px;
  background: var(--hueso);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r-tarjeta);
  transition: border-color .15s ease, background-color .15s ease;
}
.dealer:hover { border-color: var(--ambar); background: var(--blanco); }

.dealer__sello {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  margin-bottom: 4px;
  border-radius: 7px;
  background: rgba(242, 169, 0, .14);
  color: var(--ambar-hondo);
}
.dealer__nombre { font-size: 13px; font-weight: 700; line-height: 1.3; }
.dealer__meta { font-size: 11.5px; color: var(--gris-acero); margin-bottom: 6px; }
/* El sello se ancla abajo para que no lo desalinee un nombre de dos líneas. */
.dealer .pastilla { margin-top: auto; }

.enlace-mas { font-size: 12.5px; font-weight: 600; color: var(--ambar-hondo); }
.enlace-mas:hover { text-decoration: underline; }

/* ── Pie ────────────────────────────────────────────────── */

.pie {
  background: var(--azul);
  color: var(--texto-claro);
  border-top: 3px solid var(--ambar);
  padding-block: 34px 30px;
}

.pie__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 36px;
}

.pie__logo { height: 32px; width: auto; margin-bottom: 14px; }
.pie__legal { font-size: 12.5px; font-weight: 600; color: var(--blanco); margin-bottom: 8px; }
.pie__texto { font-size: 12.5px; line-height: 1.6; max-width: 44ch; margin-bottom: 14px; }

.pie__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--blanco);
  margin-bottom: 11px;
}
.pie__titulo + .pie__lista { margin-bottom: 20px; }

.pie__lista { display: grid; gap: 8px; font-size: 12.5px; }
.pie__lista a { transition: color .15s ease; }
.pie__lista a:hover { color: var(--ambar); }
.pie__lista--marcada li { display: flex; gap: 7px; line-height: 1.5; }
.pie__lista--marcada li::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 6px; height: 7px;
  background: var(--ambar);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.pie__lista--marcada b { color: var(--blanco); font-weight: 600; }

.pie__sede { margin-top: 16px; font-size: 12px; color: var(--gris-acero); }

/* ── Realces y listas de servicio ───────────────────────── */

.form__pie--solo { justify-content: flex-end; }

.etiqueta--bloque { display: block; margin: 16px 0 8px; }

.realce {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 13px;
  padding: 11px 13px;
  background: rgba(242, 169, 0, .1);
  border: 1px solid rgba(242, 169, 0, .38);
  border-radius: var(--r);
  font-size: 13px;
  line-height: 1.5;
}
.realce .ico { margin-top: 1px; color: var(--ambar-hondo); width: 16px; height: 16px; }
.realce b { font-weight: 700; }

/* ── Oferta de lanzamiento (portada) ─────────────────────────
   Un anuncio, no una nota al pie. Es la razón por la que a alguien le
   compensa publicar hoy en vez de dentro de tres meses, y como renglón
   gris junto a los demás no la leía nadie.

   La caja va SIEMPRE en ámbar con tinta azul noche, en los dos temas.
   Los valores van literales y no por token a propósito: en oscuro,
   `--azul` pasa a ser #F7F5EF y `--blanco` a #0B0C0C —los roles se
   invierten— así que `color: var(--azul)` habría dejado texto casi
   blanco sobre ámbar al cambiar de tema. El ámbar de marca no se
   redefine, de modo que con la tinta fija el contraste es el mismo
   siempre: 10.4:1. */
.oferta {
  --oferta-tinta: #071A2B;

  position: relative;
  overflow: hidden;
  margin-top: 14px;
  padding: 18px 20px;
  border-radius: var(--r-tarjeta);
  background: linear-gradient(135deg, #E09C00 0%, var(--ambar) 45%, #FFCF63 100%);
  color: var(--oferta-tinta);
  box-shadow: 0 12px 30px rgba(242, 169, 0, .3);
}
.oferta[hidden] { display: none; }

/* Trama diagonal de cartel. Decorativa: por eso vive en un
   pseudoelemento y no intercepta el ratón. */
.oferta::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .13) 0 10px, transparent 10px 24px);
  pointer-events: none;
}
.oferta > * { position: relative; z-index: 1; }

.oferta__sello {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px;
  background: var(--oferta-tinta);
  color: var(--ambar);
  border-radius: var(--r-pildora);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.oferta__sello .ico { width: 13px; height: 13px; }

.oferta__titulo {
  margin-top: 11px;
  font-family: var(--display);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800; line-height: 1.02; letter-spacing: -.035em;
}
/* «sin costo» en su propia línea: es la palabra por la que se lee el
   anuncio, y en la misma línea se perdía dentro de la frase. */
.oferta__titulo em { display: block; font-style: normal; }

.oferta__texto { margin-top: 8px; max-width: 62ch; font-size: 13px; line-height: 1.5; }
.oferta__texto b { font-weight: 700; }

/* La fecha a un extremo y los días al otro: el renglón ocupa el ancho
   entero de la caja. El panel cambia de ancho según haya campaña en el
   bloque de al lado —media fila o fila entera—, así que se reparte con
   `space-between` en vez de con una media query contra la ventana, que
   no sabe nada del ancho real de este panel. */
.oferta__plazo {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 14px;
  margin-top: 15px; padding-top: 12px;
  border-top: 1px solid rgba(7, 26, 43, .22);
  font-size: 12.5px; font-weight: 600;
}

/* Los días que quedan, en píldora oscura: es el dato que mueve a
   actuar y tiene que verse antes que la fecha. */
.oferta__quedan {
  padding: 4px 11px;
  background: var(--oferta-tinta); color: var(--ambar);
  border-radius: var(--r-pildora);
  font-size: 11.5px; font-weight: 700;
  white-space: nowrap;
}
.oferta__quedan[hidden] { display: none; }

@media (max-width: 700px) {
  .oferta { padding: 16px; }
  .oferta__titulo { font-size: 26px; }
  .oferta__texto { font-size: 12.5px; }
}

/* Dato que todavía no está confirmado. Se marca, no se inventa. */
.pendiente {
  font-style: italic;
  color: var(--gris-acero);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

.lista-punteada--pasos li {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--texto-2, #33475A);
}
.lista-punteada--pasos li::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 6px; height: 7px;
  background: var(--ambar);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

.panel--servicio { display: flex; flex-direction: column; }
.panel--servicio .btn--bloque { margin-top: auto; }

.servicio__puntos { display: grid; gap: 8px; margin: 14px 0 4px; }
.servicio__puntos li { display: flex; gap: 9px; font-size: 13px; line-height: 1.5; color: var(--texto-2, #33475A); }
.servicio__puntos .ico { flex: none; margin-top: 1px; width: 15px; height: 15px; stroke-width: 2.4; color: var(--verde); }

.marcas__nota { margin-left: auto; font-size: 11.5px; color: var(--gris-acero); white-space: nowrap; }

/* ── Estados vacíos y chips de filtro ───────────────────── */

.chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.chip span { color: var(--gris-acero); font-weight: 400; }
.chip:hover { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
/* El nombre del filtro dentro del chip: sin él, "2019" y "Santiago"
   no dicen por qué campo se está filtrando. */
.chip__clave { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.chip--limpiar { background: var(--blanco); border-style: dashed; }

/* ── Paginación de resultados ───────────────────────────── */

.paginacion {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--linea-suave);
}
.paginacion:empty { display: none; border: 0; margin: 0; padding: 0; }

/* El elemento va como `paginacion__it` y no como `pagina`: esa clase ya
   existe más abajo para la cabecera de las páginas interiores, y usarla
   aquí le imponía `height: 32px` a todos los encabezados del sitio. */
.paginacion__it {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 32px; padding: 0 11px;
  background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--azul);
  transition: border-color .15s ease, background .15s ease;
}
.paginacion__it:hover { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.paginacion__it[aria-current="page"] {
  background: var(--azul); border-color: var(--azul); color: var(--blanco);
}
.paginacion__it--inerte, .paginacion__it--puntos {
  border-color: transparent; background: none; color: var(--gris-acero);
  opacity: .55; pointer-events: none;
}

/* Mientras llega la página no se deja la rejilla en blanco: se atenúa
   la anterior para que no parezca que la búsqueda falló. */
.rejilla[aria-busy="true"] { opacity: .45; transition: opacity .12s ease; }

.resumen__pagina { font-weight: 400; color: var(--gris-acero); }

.vacio { padding: 44px 20px; text-align: center; }
.vacio__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.015em;
  margin-bottom: 9px;
}
.vacio__texto { font-size: 13.5px; line-height: 1.6; color: var(--gris-acero); max-width: 52ch; margin: 0 auto 18px; }
.vacio__acciones { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
/* Un bloque vacío siempre ofrece la salida: quien llega y no encuentra
   nada tiene que saber qué hacer, no quedarse mirando un hueco. */
.vacio-min { padding: 20px 4px; font-size: 12.5px; line-height: 1.6; color: var(--gris-acero); }
.vacio-min a { font-weight: 600; color: var(--ambar-hondo); text-decoration: underline; }
.vacio-min--ancho { grid-column: 1 / -1; padding: 34px 20px; text-align: center; }

/* ── Encabezado de página interior ──────────────────────── */

.pagina {
  padding: 20px 0 18px;
  margin-bottom: var(--gap);
  border-bottom: 1px solid var(--linea);
}
.pagina__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(24px, 3.2vw, 32px);
  letter-spacing: -.022em;
  line-height: 1.1;
}
.pagina__titulo em { font-style: normal; color: var(--ambar-hondo); }
.pagina__sub { margin-top: 9px; max-width: 66ch; font-size: 14px; line-height: 1.6; color: var(--gris-acero); }

.miga { font-size: 12px; color: var(--gris-acero); margin-bottom: 12px; }
.miga a { font-weight: 600; }
.miga a:hover { color: var(--ambar-hondo); }

.barra-resultados {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--linea-suave);
}
.barra-resultados__cuenta { font-size: 13.5px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }

.orden {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.orden > span {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris-acero);
  white-space: nowrap;
}
.orden select { width: auto; min-width: 218px; }
.orden select:disabled { opacity: .5; cursor: not-allowed; }

/* ── Detalle del equipo ─────────────────────────────────── */

.detalle { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--gap); }

.detalle__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: var(--gris-neutro);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  color: var(--gris-acero);
}
.detalle__foto img { width: 100%; height: 100%; object-fit: cover; }

.fantasma--sm { width: 26px; height: 26px; opacity: .34; stroke-width: 1.3; }
.fantasma--xl { width: 120px; height: 120px; opacity: .28; stroke-width: 1; }

.detalle__panel {
  padding: 18px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.detalle__cat { font-size: 12.5px; color: var(--gris-acero); }
.detalle__titulo {
  font-family: var(--display);
  font-weight: 700;
  font-size: 23px;
  letter-spacing: -.018em;
  line-height: 1.15;
  margin: 4px 0 14px;
}
.detalle__precio {
  font-family: var(--display);
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -.022em;
  line-height: 1.15;
  margin-top: 3px;
}
.detalle__ofertas { font-size: 12.5px; color: var(--verde); font-weight: 600; margin-top: 4px; }
.detalle__dealer { margin-top: 12px; font-size: 12.5px; color: var(--gris-acero); }
.detalle__dealer a { font-weight: 600; color: var(--ambar-hondo); }

.ficha-tecnica { margin: 16px 0 0; border-top: 1px solid var(--linea-suave); }
.ficha-tecnica > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 13px;
}
.ficha-tecnica dt { color: var(--gris-acero); }
.ficha-tecnica dd { margin: 0; font-weight: 600; text-align: right; }
.ficha-tecnica dd a { color: var(--ambar-hondo); }

/* ── Tarjetas de categoría ──────────────────────────────── */

.categorias-todas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }

.cat-tarjeta {
  display: block;
  height: 100%;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cat-tarjeta:hover { border-color: var(--ambar); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(7, 26, 43, .07); }

.cat-tarjeta__foto {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 10;
  background: var(--gris-neutro);
  color: var(--gris-acero);
  overflow: hidden;
}
.cat-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.cat-tarjeta__foto .fantasma { width: 46px; height: 46px; opacity: .3; stroke-width: 1.2; }

.cat-tarjeta__ico {
  position: absolute;
  left: 10px; bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--ambar);
  color: var(--azul);
}
.cat-tarjeta__cuerpo { padding: 12px 14px 14px; }
.cat-tarjeta__nombre { display: block; font-family: var(--display); font-weight: 700; font-size: 15px; }
.cat-tarjeta__meta { display: block; margin-top: 2px; font-size: 11.5px; color: var(--gris-acero); }
.cat-tarjeta--vacia { opacity: .62; }

/* ── Financiadoras ──────────────────────────────────────── */

.financiadoras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

.fin {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.fin__cabeza { padding-bottom: 10px; margin-bottom: 11px; border-bottom: 1px solid var(--linea-suave); }
.fin__nombre { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.014em; margin-top: 3px; }
.fin__enfoque { font-size: 13px; line-height: 1.6; color: var(--texto-2, #33475A); margin-bottom: 13px; }
.fin__req { display: grid; gap: 5px; margin: 7px 0 14px; }
.fin__req li { display: flex; gap: 8px; font-size: 12.5px; color: var(--texto-2, #33475A); }
.fin__req li::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 6px; height: 7px;
  background: var(--ambar);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.fin__contacto { margin: auto 0 0; padding-top: 12px; border-top: 1px solid var(--linea-suave); }
.fin__contacto > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 12.5px; }
.fin__contacto dt { color: var(--gris-acero); }
.fin__contacto dd { margin: 0; font-weight: 600; text-align: right; }
.fin__contacto a { color: var(--ambar-hondo); }

/* ── Planes de publicación ──────────────────────────────── */

/* ── Mando de duración ──────────────────────────────────── */

.duracion {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  margin: 0;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--hueso);
}
.duracion__op { position: relative; }
.duracion__op input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.duracion__op span {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gris-acero);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.duracion__op b {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(21, 122, 75, .12);
  color: var(--verde);
  font-size: 10.5px;
  font-weight: 700;
}
.duracion__op input:checked + span { background: var(--azul); color: var(--blanco); }
.duracion__op input:checked + span b { background: var(--ambar); color: var(--azul); }
.duracion__op input:focus-visible + span { outline: 2px solid var(--ambar); outline-offset: 2px; }

/* ── Planes ─────────────────────────────────────────────── */

/* Son 5 tarjetas con precios normales y 4 durante la promoción
   (los dos Estándar van fusionados): auto-fit reparte ambos casos. */
.planes { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
.planes__nota {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--linea-suave);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--gris-acero);
  max-width: 88ch;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 22px 16px 18px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r-tarjeta);
}
.plan--destacado { border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(242, 169, 0, .16); }
.plan--oferta { border-color: var(--verde); box-shadow: 0 0 0 3px rgba(21, 122, 75, .12); }

.plan__cinta {
  position: absolute;
  top: -1px; right: -1px;
  padding: 3px 10px;
  background: var(--ambar);
  color: var(--azul);
  font-size: 10.5px;
  font-weight: 700;
  border-radius: 0 var(--r) 0 5px;
}
/* Verde solo cuando comunica el beneficio verificable de la oferta. */
.plan__cinta--oferta { background: var(--verde); color: var(--blanco); }

.plan__nombre { font-family: var(--display); font-weight: 700; font-size: 16px; line-height: 1.25; }
.plan__cuantas {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-acero);
}
.plan__precio { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.022em; margin-top: 10px; }
.plan__precio--gratis { color: var(--verde); }
.plan__tachado { font-size: 11.5px; color: var(--gris-acero); }
.plan__tachado s { text-decoration-thickness: 1.5px; }
.plan__hasta { font-size: 12px; color: var(--azul); margin-top: 2px; }
.plan__hasta b { font-weight: 700; }
.plan__periodo { font-size: 12px; color: var(--gris-acero); }

.plan__ahorro {
  display: grid;
  gap: 1px;
  margin-top: 10px;
  padding: 7px 9px;
  background: rgba(21, 122, 75, .09);
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--verde);
}
.plan__ahorro span { font-weight: 500; color: var(--gris-acero); }
.plan__ahorro--par { background: rgba(242, 169, 0, .12); color: var(--ambar-hondo); }

/* Precio que regirá cuando la promo termine: se dice de frente. */
.plan__despues {
  display: grid;
  gap: 2px;
  margin-top: 10px;
  padding: 8px 9px;
  border: 1px dashed var(--linea);
  border-radius: 5px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--gris-acero);
}
.plan__despues b {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--azul);
  margin-bottom: 2px;
}

.plan__portada {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 10px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--texto-2, #33475A);
}
.plan__portada .ico { flex: none; margin-top: 1px; width: 14px; height: 14px; color: var(--ambar-hondo); }

.plan__incluye { display: grid; gap: 7px; margin: 14px 0 16px; }
.plan__incluye li { display: flex; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--texto-2, #33475A); }
.plan__incluye li::before {
  content: "";
  flex: none;
  margin-top: 6px;
  width: 6px; height: 7px;
  background: var(--ambar);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.plan .btn { margin-top: auto; }

/* ── Formularios de cotización ──────────────────────────── */

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.campos--uno { grid-template-columns: minmax(0, 1fr); }
/* `align-content: start` mantiene rótulo y campo pegados arriba. Sin
   esto, un campo con texto de ayuda debajo estira su fila y el campo
   vecino, que no lo tiene, queda descolgado unos píxeles. */
.campo-v { display: grid; gap: 5px; align-content: start; }
.campo-v--ancho { grid-column: 1 / -1; }
/* `.campo-v__rotulo` es un <label for> y hace de rótulo cuando el campo
   no puede ir envuelto en la etiqueta: un <label> dentro de otro
   <label> no es HTML válido, y el campo con casilla de «No aplica»
   lleva dos etiquetas. */
.campo-v > span,
.campo-v > .campo-v__rotulo { font-size: 12.5px; font-weight: 600; color: var(--gris-acero); }
.campo-v input, .campo-v textarea, .campo-v select {
  width: 100%;
  padding: 8px 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  font-family: var(--cuerpo);
  font-size: 13px;
  color: var(--azul);
}
.campo-v input { height: 36px; }
/* El select hereda height:31px de la regla global y aquí lleva 8px de
   padding arriba y abajo: sumado no cabe el texto y se cortaba por
   debajo. Se iguala al alto del input y se quita el padding vertical. */
.campo-v select { height: 36px; padding-block: 0; }
.campo-v textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.campo-v input:focus, .campo-v textarea:focus, .campo-v select:focus {
  outline: none; border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(242, 169, 0, .2);
}

/* Campo con salida: el dato a la izquierda y «No aplica» a la derecha,
   que lo apaga. La casilla no puede empujar al campo a otra línea en
   móvil, o deja de leerse como una sola pregunta. */
.campo-na { display: flex; align-items: center; gap: 10px; }
.campo-na > input:not([type="hidden"]) { flex: 1 1 auto; min-width: 0; }
.campo-na__op {
  display: flex; align-items: center; gap: 5px;
  flex: none;
  font-size: 12px; color: var(--gris-acero);
  white-space: nowrap;
  cursor: pointer;
}
/* Anula el `padding` y el borde que `.campo-v input` le pone a todo
   campo de texto: en una casilla sobran. */
.campo-na__op input {
  width: 15px; height: 15px;
  flex: none;
  padding: 0;
  border: 0;
  accent-color: var(--ambar-hondo);
}
.campo-v--inactivo > .campo-v__rotulo { opacity: .55; }
.campo-v--inactivo .campo-na > input:disabled { background: var(--hueso); color: var(--gris-neutro); }

.alquiler-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 6px; }

.alq {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.alq:hover { border-color: var(--ambar); }
.alq:has(input:checked) { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.alq input { width: 16px; height: 16px; accent-color: var(--ambar-hondo); }
.alq__ico {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  background: rgba(242, 169, 0, .12);
  color: var(--ambar-hondo);
}
.alq__nombre { display: block; font-size: 13px; font-weight: 600; }
.alq__detalle { display: block; font-size: 11.5px; color: var(--gris-acero); }

.resumen {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
}
.resumen__titulo { font-family: var(--display); font-weight: 700; font-size: 15px; margin-bottom: 10px; }
.resumen__lista > div { display: flex; justify-content: space-between; gap: 14px; padding: 5px 0; border-bottom: 1px solid var(--linea-suave); font-size: 12.5px; }
.resumen__lista dt { color: var(--gris-acero); }
.resumen__lista dd { margin: 0; font-weight: 600; text-align: right; }
.resumen__nota { margin-top: 12px; font-size: 12.5px; line-height: 1.6; color: var(--texto-2, #33475A); }
.resumen__nota a { font-weight: 700; color: var(--ambar-hondo); }

/* ── Mapa de seguimiento ────────────────────────────────── */

.panel--seguimiento .panel__cabeza { align-items: center; }

.rastreo {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}
.rastreo input {
  width: 190px;
  height: 36px;
  padding: 0 11px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 4px;
  font-family: var(--cuerpo);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  color: var(--azul);
}
.rastreo input:focus { outline: none; border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(242, 169, 0, .2); }

.mapa {
  position: relative;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}
.mapa__caja { display: block; }
.mapa__lienzo { display: block; width: 100%; height: auto; }

/* Rótulo de demostración. Va en ámbar: el verde de la marca solo
   comunica confianza verificada, y esto es justo lo contrario. */
.aviso-demo {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--ambar);
  color: var(--azul);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.aviso-demo .ico { width: 13px; height: 13px; stroke-width: 2.2; }

.mapa__pais { fill: var(--gris-neutro); stroke: #D2CFC5; stroke-width: 1.5; stroke-linejoin: round; }
.mapa__ref { fill: var(--gris-acero); opacity: .45; }
.mapa__ref-txt {
  fill: var(--gris-acero);
  font-family: var(--cuerpo);
  font-size: 15px;
  font-weight: 500;
  opacity: .8;
}

.mapa__ruta {
  fill: none;
  stroke: var(--gris-acero);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2 9;
  opacity: .7;
}
.mapa__recorrido {
  fill: none;
  stroke: var(--ambar);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mapa__parada { fill: var(--blanco); stroke: var(--gris-acero); stroke-width: 2.5; }
.mapa__parada--fin { fill: var(--azul); stroke: var(--blanco); stroke-width: 3; }

.mapa__punta {
  fill: var(--azul);
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  text-anchor: middle;
}

.mapa__halo { fill: var(--ambar); opacity: .22; }
.mapa__hex { fill: var(--ambar); stroke: var(--ambar); stroke-width: 3; stroke-linejoin: round; }
.mapa__hex-int { fill: var(--azul); stroke: var(--azul); stroke-width: 1.6; stroke-linejoin: round; }

@media (prefers-reduced-motion: no-preference) {
  .mapa__camion { transition: transform .8s ease-out; }
  .mapa__halo { animation: latido 2.4s ease-in-out infinite; }
}
@keyframes latido {
  0%, 100% { opacity: .22; r: 17; }
  50%      { opacity: .07; r: 25; }
}

/* ── Franja de estado del envío ─────────────────────────── */

.seguimiento {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: var(--gap);
  background: var(--linea-suave);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r);
  overflow: hidden;
}
.seguimiento__campo {
  display: grid;
  gap: 3px;
  align-content: start;
  padding: 12px 14px;
  background: var(--blanco);
}
.seguimiento__campo b { font-size: 13.5px; font-weight: 600; }
.seguimiento__vacio {
  grid-column: 1 / -1;
  padding: 22px 16px;
  background: var(--blanco);
  font-size: 13px;
  line-height: 1.6;
  color: var(--gris-acero);
  text-align: center;
}

.estado {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700 !important;
}
.estado::before {
  content: "";
  width: 8px; height: 9px;
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  background: currentColor;
}
.estado--ruta      { color: var(--ambar-hondo); }
.estado--cargando  { color: var(--gris-acero); }
.estado--entregado { color: var(--verde); }
.estado--sin       { color: var(--gris-acero); }

/* ── Camas de la flota ──────────────────────────────────── */

.camas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cama {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--hueso);
  border: 1px solid var(--linea-suave);
  border-radius: var(--r);
}
.cama__ico {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  border-radius: 8px;
  background: rgba(242, 169, 0, .13);
  color: var(--ambar-hondo);
}
.cama__ico .ico { width: 21px; height: 21px; }
.cama__nombre { display: block; font-size: 13.5px; font-weight: 700; }
.cama__detalle { display: block; font-size: 11.5px; color: var(--gris-acero); }
.cama__cap {
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  color: var(--azul);
  white-space: nowrap;
}

/* ── Bloques dentro de un formulario largo ──────────────── */

.bloque__titulo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linea-suave);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -.008em;
}
.bloque__titulo:first-child { margin-top: 4px; }
.bloque__titulo .ico { width: 17px; height: 17px; color: var(--ambar-hondo); }

.acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.acciones--pie { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea-suave); }

.form-largo { margin-top: 14px; }

.prosa { font-size: 13.5px; line-height: 1.68; color: var(--texto-2, #33475A); max-width: 70ch; }
.prosa a { font-weight: 600; color: var(--ambar-hondo); }
.prosa a:hover { text-decoration: underline; }
.prosa p + p { margin-top: 11px; }
.prosa h3 { font-family: var(--display); font-weight: 700; font-size: 16px; color: var(--azul); margin: 18px 0 7px; }

/* ═══════════════════════════════════════════════════════════
   Asistente de publicación
   ═══════════════════════════════════════════════════════════ */

.publicar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
  gap: var(--gap);
}

.publicar__principal { display: grid; gap: var(--gap); min-width: 0; }
.publicar__lado { display: grid; gap: var(--gap); position: sticky; top: 72px; }

.aviso-borrador {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--gap);
  padding: 11px 14px;
  background: var(--sup-calida, #FFFDF7);
  border: 1px solid var(--ambar);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
  font-size: 12.5px;
}
.aviso-borrador .ico { color: var(--ambar-hondo); }
.aviso-borrador span { flex: 1; min-width: 200px; }
.aviso-borrador .btn { height: 30px; padding: 0 12px; font-size: 12px; }

/* ── Barra de pasos ─────────────────────────────────────── */

.panel--pasos { padding-bottom: 12px; }

.pasos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

.pasos__btn {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r);
  text-align: left;
  color: var(--gris-acero);
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.pasos__btn:disabled { cursor: default; opacity: .55; }
.pasos__btn:not(:disabled):hover { background: var(--hueso); }

.pasos__num {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; flex: none;
  border-radius: 50%;
  background: var(--gris-neutro);
  color: var(--azul);
  font-size: 12px; font-weight: 700;
}

.pasos__cuerpo { display: grid; min-width: 0; }
.pasos__cuerpo b { font-size: 12.5px; font-weight: 700; color: var(--azul); }
.pasos__cuerpo span { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pasos__it--activo .pasos__btn { background: var(--sup-calida, #FFFDF7); border-color: var(--ambar); }
.pasos__it--activo .pasos__num { background: var(--ambar); }
.pasos__it--hecho .pasos__num { background: var(--verde); color: var(--blanco); }
.pasos__it--hecho .pasos__cuerpo b { color: var(--gris-acero); }

.progreso {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--linea-suave);
}
.progreso__barra {
  position: relative;
  flex: 1; height: 4px;
  background: var(--gris-neutro);
  border-radius: 99px;
  overflow: hidden;
}
.progreso__barra::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--avance, 16%);
  background: var(--ambar);
  transition: width .25s ease;
}
.progreso__texto { font-size: 11.5px; font-weight: 600; color: var(--gris-acero); white-space: nowrap; }

/* ── Cuerpo de cada paso ────────────────────────────────── */

.panel--formulario { display: grid; }
.paso { min-width: 0; }
.paso .campos { margin-top: 14px; }
.paso .panel__texto { margin-top: 6px; }

.paso__aviso {
  display: flex; align-items: flex-start; gap: 8px;
  margin-bottom: 14px;
  padding: 10px 13px;
  background: var(--sup-error, #FDF3F3);
  border: 1px solid #E8C4C4;
  border-left: 3px solid #B3261E;
  border-radius: var(--r);
  font-size: 12.5px;
  color: var(--texto-error, #7A1B15);
}
.paso__aviso .ico { color: #B3261E; margin-top: 1px; }

.campo-v--error input, .campo-v--error select, .campo-v--error textarea { border-color: #B3261E; }
.campo-v__error { font-size: 11.5px; font-weight: 600; color: #B3261E; }
.campo-v--inactivo > span { opacity: .55; }

.campo-doble { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px; }
.campo-doble input, .campo-doble select {
  width: 100%; height: 36px; padding: 0 10px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px;
  font-family: var(--cuerpo); font-size: 13px; color: var(--azul);
}

.campo-grupo { margin: 16px 0 0; padding: 0; border: 0; }
.campo-grupo legend { padding: 0; margin-bottom: 9px; }

/* Opciones grandes: modalidad de precio y forma de pago. */
.opcion {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px;
  margin-bottom: 8px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.opcion:hover { border-color: var(--ambar); }
.opcion:has(input:checked) { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); box-shadow: 0 0 0 2px rgba(242, 169, 0, .14); }
.opcion input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--ambar-hondo); }
.opcion__cuerpo { display: grid; gap: 2px; }
.opcion__nombre { font-size: 13px; font-weight: 700; }
.opcion__detalle { font-size: 11.5px; color: var(--gris-acero); }

.casillas { display: grid; gap: 9px; }
.casillas--pago { margin-top: 14px; }
.casilla { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.casilla input { width: 16px; height: 16px; margin-top: 1px; flex: none; accent-color: var(--ambar-hondo); }
.casilla--condiciones {
  margin-top: 18px; padding: 12px 14px;
  background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--r);
}
.casilla--condiciones a { font-weight: 700; color: var(--ambar-hondo); text-decoration: underline; }

.btn--chico { height: 32px; padding: 0 13px; font-size: 12.5px; margin-top: 10px; }

/* ── Fotografías ────────────────────────────────────────── */

.zona-fotos {
  display: grid; justify-items: center; gap: 5px;
  margin-top: 14px; padding: 26px 18px;
  background: var(--blanco);
  border: 2px dashed var(--linea);
  border-radius: var(--r);
  text-align: center;
  transition: border-color .15s ease, background-color .15s ease;
}
.zona-fotos--activa { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.zona-fotos--cargando { opacity: .6; pointer-events: none; }
.zona-fotos__ico { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--ambar-hondo); }
.zona-fotos__titulo { font-size: 13.5px; font-weight: 600; }
.zona-fotos__nota { font-size: 11.5px; color: var(--gris-acero); }
.zona-fotos__btn { margin-top: 8px; cursor: pointer; }

.contador-fotos { margin-top: 12px; font-size: 12.5px; color: var(--gris-acero); }
.cuenta-aviso { color: #B3261E; font-weight: 600; }

.fotos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.foto {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--gris-neutro);
}
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--portada { border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(242, 169, 0, .3); }
.foto--excedida img { filter: grayscale(1) opacity(.5); }

.foto__sello {
  position: absolute; top: 6px; left: 6px;
  padding: 2px 7px;
  background: var(--ambar); color: var(--azul);
  border-radius: 3px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.foto__sello--aviso { background: #B3261E; color: var(--blanco); }

.foto__mandos {
  position: absolute; inset: auto 0 0 0;
  display: flex; justify-content: center; gap: 4px;
  padding: 5px;
  background: linear-gradient(transparent, rgba(7, 26, 43, .82));
}
.foto__btn {
  display: flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: rgba(255, 255, 255, .92);
  border: 0; border-radius: 4px;
  color: var(--azul);
  font-size: 12px; line-height: 1;
  cursor: pointer;
}
.foto__btn:disabled { opacity: .35; cursor: default; }
.foto__btn:not(:disabled):hover { background: var(--ambar); }
.foto__btn--quitar:not(:disabled):hover { background: #B3261E; color: var(--blanco); }
.foto__btn .ico { width: 13px; height: 13px; }

/* ── Teléfonos ──────────────────────────────────────────── */

.telefonos { display: grid; gap: 8px; margin-top: 4px; }
.telefono {
  display: grid;
  grid-template-columns: auto minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1.2fr) auto;
  align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
}
.telefono__ico { display: flex; color: var(--ambar-hondo); }
.telefono__quitar {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent; border: 1px solid var(--linea); border-radius: 4px;
  color: var(--gris-acero); cursor: pointer;
}
.telefono__quitar:not(:disabled):hover { border-color: #B3261E; color: #B3261E; }
.telefono__quitar:disabled { opacity: .35; cursor: default; }
.telefono__quitar .ico { width: 14px; height: 14px; }

/* ── Planes seleccionables ──────────────────────────────── */

.planes-op {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.plan-op {
  display: grid; align-content: start;
  height: 100%;
  padding: 14px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.plan-op:hover { border-color: var(--ambar); }
.plan-op--sugerido { border-color: var(--ambar); }
.plan-op--elegido { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); box-shadow: 0 0 0 3px rgba(242, 169, 0, .18); }
.plan-op input { position: absolute; opacity: 0; pointer-events: none; }

/* El distintivo ocupa su propia fila y esa fila se reserva en todas
   las tarjetas, lleven distintivo o no: así el nombre, el precio y la
   lista de prestaciones quedan a la misma altura y se pueden comparar
   de un vistazo. El nombre reserva dos líneas por lo mismo. */
.plan-op { position: relative; }
.plan-op__cabeza { display: grid; justify-items: start; gap: 6px; }
.plan-op__nombre {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  line-height: 1.25; min-height: 2.5em;
}
.plan-op__hueco { height: 16px; }
.plan-op__cinta {
  padding: 2px 7px;
  background: var(--ambar); color: var(--azul);
  border-radius: 3px;
  font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.plan-op__cinta--promo { background: var(--verde); color: var(--blanco); }
.plan-op__cinta--membresia { background: var(--azul); color: var(--blanco); }
.plan-op--membresia { border-color: var(--azul-2); }
.plan-op--membresia.plan-op--elegido { border-color: var(--ambar); }
.plan-op__precio { font-family: var(--display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-top: 9px; }
.plan-op__periodo, .plan-op__cuantas { font-size: 11.5px; color: var(--gris-acero); }
.plan-op__extra { margin-top: 4px; font-size: 11px; line-height: 1.4; color: var(--verde); font-weight: 600; }
.plan-op__ahorro {
  justify-self: start;
  margin-top: 7px; padding: 2px 8px;
  background: rgba(21, 122, 75, .12);
  border-radius: 3px;
  font-size: 11px; font-weight: 700; color: var(--verde);
}
.plan-op__cuantas { margin-top: 6px; font-weight: 600; color: var(--azul); }
.plan-op__incluye { display: grid; gap: 5px; margin-top: 10px; }
.plan-op__incluye li { display: flex; gap: 6px; font-size: 11.5px; line-height: 1.45; color: var(--texto-2, #33475A); }
.plan-op__incluye .ico { width: 13px; height: 13px; flex: none; margin-top: 2px; color: var(--verde); }

/* ── Resumen del pedido y pago ──────────────────────────── */

.pedido__titulo { font-family: var(--display); font-weight: 700; font-size: 14.5px; margin-bottom: 10px; }
.pedido__lista > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: 12.5px;
}
.pedido__lista dt { color: var(--gris-acero); }
.pedido__lista dd { margin: 0; font-weight: 600; text-align: right; }
.pedido__total { border-bottom: 0 !important; padding-top: 9px !important; }
.pedido__total dt { font-weight: 700; color: var(--azul) !important; }
.pedido__total dd { font-family: var(--display); font-weight: 800; font-size: 17px; }
.pedido__vacio { display: flex; gap: 8px; font-size: 12px; color: var(--gris-acero); line-height: 1.5; }
.pedido__vacio .ico { flex: none; color: var(--ambar-hondo); }

.pedido--destacado {
  margin-top: 14px; padding: 14px 16px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
}

.marca-tarjeta { float: right; font-size: 11px; font-weight: 700; color: var(--ambar-hondo); }

.nota-segura {
  display: flex; align-items: flex-start; gap: 8px;
  margin-top: 14px; padding: 11px 13px;
  background: rgba(21, 122, 75, .07);
  border-radius: var(--r);
  font-size: 11.5px; line-height: 1.55; color: var(--texto-ok, #2C4A3C);
}
.nota-segura .ico { flex: none; width: 16px; height: 16px; color: var(--verde); }

.datos-banco { margin-top: 14px; padding: 12px 14px; background: var(--hueso); border-radius: var(--r); }

/* Aviso de cobro recurrente: la membresía tiene que decir en la misma
   pantalla del pago cuánto y cuándo se vuelve a cobrar. */
.nota-membresia {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 12px 14px;
  background: var(--sup-calida, #FFFDF7);
  border: 1px solid var(--ambar);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
  font-size: 12px; line-height: 1.6; color: var(--texto-2, #33475A);
}
.nota-membresia .ico { flex: none; width: 16px; height: 16px; margin-top: 2px; color: var(--ambar-hondo); }
.nota-membresia b { color: var(--azul); }
.nota-membresia #renovacionTexto { font-weight: 600; color: var(--azul); }

.botonera {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px; padding-top: 16px;
  border-top: 1px solid var(--linea-suave);
}
.btn--ocupado { opacity: .7; cursor: progress; }

/* ── Vista previa ───────────────────────────────────────── */

.panel--previa { background: var(--azul); border-color: var(--azul-2); color: var(--blanco); }
.vista-previa__rotulo {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 11px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: var(--texto-claro);
}
.vista-previa__rotulo .ico { width: 14px; height: 14px; color: var(--ambar); }
.aviso--previa { background: var(--blanco); border-radius: var(--r); overflow: hidden; padding-bottom: 10px; }
.aviso--previa .aviso__foto { display: block; position: relative; aspect-ratio: 4 / 3; background: var(--gris-neutro); }
.aviso--previa .aviso__foto img { width: 100%; height: 100%; object-fit: cover; }
.aviso--previa .fantasma { width: 42px; height: 42px; position: absolute; inset: 0; margin: auto; color: var(--gris-acero); }
.aviso--previa .aviso__nombre { display: block; padding: 9px 11px 0; font-size: 13px; font-weight: 700; color: var(--azul); }
.aviso--previa .aviso__specs { display: block; padding: 2px 11px 0; font-size: 11.5px; color: var(--gris-acero); }
.aviso--previa .aviso__precio { display: block; padding: 5px 11px 0; font-family: var(--display); font-weight: 800; font-size: 16px; color: var(--azul); }
.aviso--previa .pastilla { margin: 7px 0 0 11px; }
.vista-previa__nota { margin-top: 9px; font-size: 11.5px; color: var(--texto-claro); }

.pastilla--ambar { background: rgba(242, 169, 0, .16); color: var(--ambar-hondo); }

/* ── Confirmación ───────────────────────────────────────── */

.publicado { text-align: center; padding: 34px 26px; }
.publicado__sello {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 14px;
  background: var(--verde); color: var(--blanco);
  border-radius: 50%;
}
.publicado__sello .ico { width: 28px; height: 28px; }
.publicado__titulo { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; }
.publicado__texto { max-width: 56ch; margin: 8px auto 0; font-size: 13.5px; line-height: 1.62; color: var(--texto-2, #33475A); }
.publicado__datos { max-width: 420px; margin: 20px auto 0; text-align: left; }
.publicado__datos > div {
  display: flex; justify-content: space-between; gap: 14px;
  padding: 7px 0; border-bottom: 1px solid var(--linea-suave); font-size: 12.5px;
}
.publicado__datos dt { color: var(--gris-acero); }
.publicado__datos dd { margin: 0; font-weight: 600; }
.publicado__nota { max-width: 56ch; margin: 16px auto 0; font-size: 12.5px; line-height: 1.6; color: var(--gris-acero); }
.publicado .acciones { justify-content: center; }

/* ── Galería y contactos de la ficha ────────────────────── */

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin-top: 10px; }
.galeria__it {
  display: block; width: 100%; aspect-ratio: 4 / 3;
  padding: 0; background: none;
  border: 1px solid var(--linea); border-radius: 4px;
  overflow: hidden; cursor: pointer;
}
.galeria__it img { width: 100%; height: 100%; object-fit: cover; }
.galeria__it--activa { border-color: var(--ambar); box-shadow: 0 0 0 2px rgba(242, 169, 0, .25); }

.detalle__bloque { margin-top: 18px; }

/* Bloque de contacto de la ficha. Cada número muestra los canales que
   el anunciante habilitó, con WhatsApp como acción propia: es por
   donde entra la mayoría de las consultas en este mercado. */
.contactos { display: grid; gap: 8px; margin: 14px 0; }
.contactos__fila {
  display: grid; gap: 7px;
  padding: 10px 11px;
  background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--r);
}
.contactos__num b { display: block; font-size: 14.5px; letter-spacing: .01em; }
.contactos__nota { display: block; font-size: 11px; color: var(--gris-acero); }
.contactos__acciones { display: flex; gap: 7px; }

.contactos__it {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; padding: 0 12px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px;
  font-size: 12.5px; font-weight: 600; color: var(--azul);
  transition: border-color .15s ease, background .15s ease;
}
.contactos__it:hover { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.contactos__it .ico { width: 15px; height: 15px; color: var(--ambar-hondo); }
.contactos__it--whatsapp { border-color: rgba(21, 122, 75, .35); color: var(--verde); }
.contactos__it--whatsapp .ico { color: var(--verde); }
.contactos__it--whatsapp:hover { border-color: var(--verde); background: var(--sup-ok, #F2FAF6); }

/* Ubicación bajo el título de la ficha. */
.detalle__sitio {
  display: flex; align-items: center; gap: 5px;
  margin-top: 4px; font-size: 12.5px; color: var(--gris-acero);
}
.detalle__sitio .ico { width: 14px; height: 14px; }

/* Condiciones comerciales: permuta, ofertas, financiamiento. */
.detalle__condiciones { display: grid; gap: 5px; margin: 9px 0 4px; }
.detalle__condiciones li {
  display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; color: var(--azul);
}
.detalle__condiciones .ico { width: 14px; height: 14px; color: var(--verde); stroke-width: 2.4; flex: none; }

.detalle__aviso {
  margin-top: 12px; padding-top: 11px;
  border-top: 1px solid var(--linea-suave);
  font-size: 11.5px; line-height: 1.55; color: var(--gris-acero);
}

/* ═══════════════════════════════════════════════════════════
   Cuentas, panel y perfil de dealer
   ═══════════════════════════════════════════════════════════ */

/* ── Enlace de cuenta en la cabecera ────────────────────── */

/* Enlace de cuenta de la cabecera. Es un botón como los demás: misma
   altura, mismo radio y mismo borde que `.btn--linea`. La píldora que
   llevaba antes era la única forma redondeada del sitio y se leía como
   un componente de otro sistema. */
.cab__cuenta {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  margin-left: auto;
  height: 32px;
  padding: 0 13px;
  border: 1px solid var(--linea-dark);
  border-radius: var(--r);
  font-family: var(--cuerpo);
  font-size: 12.5px; font-weight: 600;
  color: var(--texto-claro);
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cab__cuenta:hover { background: var(--azul-2); color: var(--blanco); border-color: var(--ambar); }
.cab__cuenta .ico { width: 15px; height: 15px; }
.cab__cuenta--activa { color: var(--blanco); border-color: var(--linea-dark); }

/* ── Acceso ─────────────────────────────────────────────── */

.acceso { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.acceso__panel { padding: 22px 24px; }

.pestanas { display: flex; gap: 4px; margin: 16px 0 18px; padding: 3px; background: var(--hueso); border-radius: var(--r); }
.pestanas__op {
  flex: 1;
  padding: 8px 12px;
  background: transparent; border: 0; border-radius: 4px;
  font-size: 13px; font-weight: 600; color: var(--gris-acero);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.pestanas__op--activa { background: var(--blanco); color: var(--azul); box-shadow: 0 1px 3px rgba(7, 26, 43, .12); }

.acceso__aviso {
  margin-bottom: 14px; padding: 10px 13px;
  background: var(--sup-error, #FDF3F3); border: 1px solid #E8C4C4; border-left: 3px solid #B3261E;
  border-radius: var(--r); font-size: 12.5px; color: var(--texto-error, #7A1B15);
}
.acceso__legal { margin-top: 12px; font-size: 11.5px; color: var(--gris-acero); text-align: center; }
.acceso__legal a { font-weight: 600; color: var(--ambar-hondo); }
.acceso .btn--bloque { margin-top: 18px; }

.nota-rnc {
  display: flex; align-items: flex-start; gap: 9px;
  margin-top: 14px; padding: 11px 13px;
  background: rgba(7, 26, 43, .05); border-radius: var(--r);
  font-size: 11.5px; line-height: 1.55; color: var(--texto-2, #33475A);
}
.nota-rnc .ico { flex: none; width: 16px; height: 16px; color: var(--azul); }

.acceso__aviso--bien {
  background: rgba(21, 122, 75, .08); border-color: #B9D7C8;
  border-left-color: var(--verde); color: var(--texto-ok, #1B5638);
}

.acceso__enlace {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 14px; font-size: 12.5px; color: var(--gris-acero);
}
.enlace-plano {
  padding: 0; background: none; border: 0;
  font-size: 12.5px; font-weight: 600; color: var(--ambar-hondo);
  text-decoration: underline; cursor: pointer;
}
.enlace-plano:hover { color: var(--azul); }

/* Campo del código: dígitos grandes y separados, que es como se leen
   cuando se copian del correo. */
.codigo__intro { font-size: 13px; line-height: 1.6; color: var(--texto-2, #33475A); margin-bottom: 16px; }
.campo-v--codigo input {
  height: 54px;
  font-family: var(--display); font-size: 26px; font-weight: 700;
  letter-spacing: .34em; text-align: center;
  font-variant-numeric: tabular-nums;
}
.campo-v--codigo input::placeholder { color: var(--gris-neutro); letter-spacing: .34em; }

/* ── Sucursales en el panel ─────────────────────────────── */

.sucursales-admin { display: grid; gap: 9px; margin-top: 14px; }
.suc-admin {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 14px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
}
.suc-admin--principal { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.suc-admin__ico { display: flex; color: var(--ambar-hondo); }
.suc-admin__cuerpo { display: grid; gap: 2px; min-width: 0; }
.suc-admin__nombre { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.suc-admin__meta { font-size: 11.5px; color: var(--gris-acero); }
.suc-admin__acciones { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; }
.btn-tabla--quitar:hover { border-color: #B3261E; color: #B3261E; }

.form-sucursal {
  margin-top: 16px; padding: 16px 18px;
  background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--r);
}
.form-sucursal__titulo {
  font-family: var(--display); font-weight: 700; font-size: 14.5px;
  padding-bottom: 9px; margin-bottom: 4px;
  border-bottom: 1px solid var(--linea);
}
.form-sucursal .acciones { margin-top: 14px; }

.ventajas { display: grid; gap: 13px; margin-top: 14px; }
.ventajas li { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--texto-2, #33475A); }
.ventajas .ico { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--ambar-hondo); }
.ventajas b { color: var(--azul); }

/* ── Panel del anunciante ───────────────────────────────── */

.panel-cargando, .panel-vacio {
  padding: 44px 24px; text-align: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  color: var(--gris-acero); font-size: 13.5px;
}
.panel-vacio .vacio__titulo { font-family: var(--display); font-weight: 700; font-size: 20px; color: var(--azul); }
.panel-vacio .vacio__acciones { justify-content: center; }

.pagina--panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pagina__acciones { display: flex; gap: 8px; padding-bottom: 4px; }

.tarjetas-metrica {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap);
  margin-bottom: var(--gap);
}
.metrica {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 17px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
}
.metrica__ico {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: rgba(242, 169, 0, .12); color: var(--ambar-hondo);
  border-radius: 9px;
}
.metrica__cuerpo { display: grid; min-width: 0; }
.metrica__num { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.1; letter-spacing: -.02em; }
.metrica__rotulo { font-size: 12px; font-weight: 600; color: var(--azul); }
.metrica__detalle { font-size: 11px; color: var(--gris-acero); }

.plan-estado { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.plan-estado > div { padding: 11px 13px; background: var(--hueso); border-radius: var(--r); }
.plan-estado dt { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--gris-acero); }
.plan-estado dd { margin: 4px 0 0; font-size: 13.5px; font-weight: 600; }
.plan-estado a { color: var(--ambar-hondo); font-weight: 700; }

.pastilla--azul { background: rgba(7, 26, 43, .1); color: var(--azul); }

.filtros-panel { display: flex; gap: 5px; }
.filtro-panel {
  padding: 6px 12px;
  background: var(--hueso); border: 1px solid transparent; border-radius: 99px;
  font-size: 12px; font-weight: 600; color: var(--gris-acero); cursor: pointer;
}
.filtro-panel--activo { background: var(--azul); color: var(--blanco); }

.tabla-envoltura { overflow-x: auto; margin-top: 6px; }
.tabla-anuncios { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-anuncios th, .tabla-anuncios td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--linea-suave); }
.tabla-anuncios thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gris-acero); border-bottom: 1px solid var(--linea);
}
.tabla-anuncios .col-num { text-align: right; }
.tabla-anuncios tbody tr:hover { background: #FCFBF7; }

.celda-equipo { display: flex; align-items: center; gap: 11px; font-weight: 400; }
.celda-equipo__foto {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 40px; flex: none;
  background: var(--gris-neutro); border-radius: 4px; overflow: hidden; color: var(--gris-acero);
}
.celda-equipo__foto img { width: 100%; height: 100%; object-fit: cover; }
.celda-equipo__nombre { display: block; font-size: 13px; font-weight: 700; }
.celda-equipo__nombre:hover { color: var(--ambar-hondo); }
.celda-equipo__meta { display: block; font-size: 11.5px; color: var(--gris-acero); }

.estado { display: inline-block; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.estado--activo  { background: rgba(21, 122, 75, .12); color: var(--verde); }
.estado--pausado { background: rgba(242, 169, 0, .16); color: var(--ambar-hondo); }
.estado--vencido { background: rgba(96, 113, 125, .14); color: var(--gris-acero); }
.estado--vendido { background: rgba(7, 26, 43, .1); color: var(--azul); }

.vigencia { font-size: 12px; font-variant-numeric: tabular-nums; }
.vigencia--pronto { color: #B3261E; font-weight: 700; }
.vigencia--fin { color: var(--gris-acero); }
.vigencia--membresia { color: var(--verde); font-weight: 600; }

.col-acciones { text-align: right; white-space: nowrap; }
.btn-tabla {
  padding: 5px 10px; margin-left: 4px;
  background: transparent; border: 1px solid var(--linea); border-radius: 4px;
  font-size: 11.5px; font-weight: 600; color: var(--azul); cursor: pointer;
}
.btn-tabla:hover { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.btn-tabla--fuerte:hover { border-color: var(--verde); color: var(--verde); }
.btn-tabla:disabled { opacity: .5; cursor: progress; }

.tabla-vacia { padding: 26px 0; text-align: center; font-size: 13px; color: var(--gris-acero); }

.form-rnc { margin-top: 14px; }
.form-rnc .btn { margin-top: 14px; }

/* ── Identidad del anunciante en el asistente ───────────── */

.identidad {
  display: flex; align-items: flex-start; gap: 12px;
  margin-top: 14px; padding: 13px 15px;
  background: var(--hueso); border: 1px solid var(--linea); border-radius: var(--r);
  font-size: 12.5px; line-height: 1.55;
}
.identidad--dealer { background: var(--sup-calida, #FFFDF7); border-color: var(--ambar); }
.identidad--anonima { align-items: flex-start; color: var(--texto-2, #33475A); }
.identidad--anonima .ico { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--gris-acero); }
.identidad__sello {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none;
  background: var(--azul); color: var(--blanco); border-radius: 9px;
}
.identidad--dealer .identidad__sello { background: var(--ambar); color: var(--azul); }
.identidad__cuerpo { display: grid; gap: 2px; min-width: 0; }
.identidad__nombre { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 14px; }
.identidad__meta { font-size: 12px; color: var(--gris-acero); }
.identidad__nota { font-size: 11.5px; color: var(--texto-2, #33475A); }
.identidad a { font-weight: 700; color: var(--ambar-hondo); text-decoration: underline; }

.invitacion-dealer {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 14px; padding: 12px 14px;
  background: rgba(7, 26, 43, .05); border-radius: var(--r);
  font-size: 12px; line-height: 1.6; color: var(--texto-2, #33475A);
}
.invitacion-dealer .ico { flex: none; width: 17px; height: 17px; margin-top: 2px; color: var(--azul); }
.invitacion-dealer b { color: var(--azul); }
.invitacion-dealer a { font-weight: 700; color: var(--ambar-hondo); text-decoration: underline; }

/* ── Perfil público del dealer ──────────────────────────── */

.perfil {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start; gap: 18px;
  padding: 22px 24px; margin-bottom: var(--gap);
  background: var(--azul); color: var(--blanco);
  border-radius: var(--r);
  border-bottom: 3px solid var(--ambar);
}
.perfil__sello {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px;
  background: var(--ambar); color: var(--azul); border-radius: 12px;
}
.perfil__sello .ico { width: 30px; height: 30px; }
.perfil__nombre { font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.022em; }
.perfil__meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12.5px; color: var(--texto-claro);
}
.perfil__meta b { color: var(--blanco); }
.perfil__texto { margin-top: 11px; font-size: 13.5px; line-height: 1.62; color: #D5DEE5; max-width: 70ch; }
.perfil__categorias { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.perfil__categorias span {
  padding: 3px 10px; background: rgba(255, 255, 255, .1); border-radius: 99px;
  font-size: 11.5px; font-weight: 600;
}
.perfil__acciones { display: grid; gap: 7px; }
.perfil__acciones .btn--linea { color: var(--blanco); border-color: var(--linea-dark); }
.perfil__acciones .btn--linea:hover { background: var(--azul-2); border-color: var(--ambar); }

.sucursales { display: grid; gap: 8px; margin-top: 12px; }
.sucursal {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 11px;
  padding: 11px 13px;
  background: var(--hueso); border-radius: var(--r);
}
.sucursal__ico { display: flex; color: var(--ambar-hondo); }
.sucursal b { font-size: 13px; }
.sucursal__meta { display: block; font-size: 11.5px; color: var(--gris-acero); }
.sucursal__tel { font-size: 13px; font-weight: 700; color: var(--ambar-hondo); }

/* ── Adaptable ──────────────────────────────────────────── */

@media (max-width: 1180px) {
  .rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dealers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fila--busqueda { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fila--busqueda > .panel:last-child { grid-column: 1 / -1; }
  .fila--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fila--tres > .panel:last-child { grid-column: 1 / -1; }
  .destacados { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categorias-todas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rejilla--panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .planes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .cab__toggle { display: flex; }
  .cab__inner { flex-wrap: wrap; gap: 12px; }
  .cab__pulso { display: none; }
  .cab__nav {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 2px 0 6px;
    border-top: 1px solid var(--linea-dark);
  }
  .cab__nav.is-abierto { display: flex; }
  .cab__nav a { padding: 11px 2px; border-bottom: 1px solid var(--linea-dark); }
  .cab__nav a:hover { border-bottom-color: var(--linea-dark); }

  .fila--dos { grid-template-columns: minmax(0, 1fr); }
  .fila--tres { grid-template-columns: minmax(0, 1fr); }
    .seguimiento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .camas { grid-template-columns: minmax(0, 1fr); }
  .rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fila--resultados { grid-template-columns: minmax(0, 1fr); }
  .fila--resultados > .panel:first-child { position: static; }
  .rejilla--panel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .detalle { grid-template-columns: minmax(0, 1fr); }
  .financiadoras { grid-template-columns: minmax(0, 1fr); }
  .planes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .categorias-todas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .alquiler-lista { grid-template-columns: minmax(0, 1fr); }
  .publicar { grid-template-columns: minmax(0, 1fr); }
  .publicar__lado { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos__cuerpo span { display: none; }
  .acceso { grid-template-columns: minmax(0, 1fr); }
  .tarjetas-metrica { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .perfil { grid-template-columns: auto minmax(0, 1fr); }
  .perfil__acciones { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
}

@media (max-width: 640px) {
  .fila--busqueda { grid-template-columns: minmax(0, 1fr); }
  .fila--busqueda > .panel:last-child { grid-column: auto; }
  .rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dealers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calc { grid-template-columns: minmax(0, 1fr); }
  .campo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .panel--marcas { flex-direction: column; align-items: flex-start; gap: 10px; }
  .marcas__titulo { padding-right: 0; border-right: 0; }
  .pie__inner { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .form__pie { flex-direction: column; align-items: stretch; }
  .form__pie .btn { width: 100%; }
  .destacados { grid-template-columns: minmax(0, 1fr); }
  .categorias-todas { grid-template-columns: minmax(0, 1fr); }
  .rejilla--panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .orden { margin-left: 0; width: 100%; }
  .orden select { flex: 1; min-width: 0; }
  .seguimiento { grid-template-columns: minmax(0, 1fr); }
  .rastreo { margin-left: 0; width: 100%; }
  .rastreo input { flex: 1; width: auto; min-width: 0; }
  .planes { grid-template-columns: minmax(0, 1fr); }
  .panel__cabeza .duracion { width: 100%; justify-content: center; }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .marcas__nota { margin-left: 0; white-space: normal; }

  /* El asistente en móvil: los pasos se reducen al número y la
     botonera pasa a ocupar todo el ancho. */
  .publicar__lado { grid-template-columns: minmax(0, 1fr); }
  .pasos { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .pasos__btn { flex-direction: column; gap: 3px; padding: 7px 2px; justify-content: center; }
  .pasos__cuerpo { display: none; }
  .planes-op { grid-template-columns: minmax(0, 1fr); }
  .telefono { grid-template-columns: minmax(0, 1fr) auto; }
  .telefono__ico { display: none; }
  .telefono .campo-v:first-of-type { grid-column: 1; }
  .botonera { flex-direction: column-reverse; }
  .botonera .btn { width: 100%; }
  .fotos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campo-doble { grid-template-columns: minmax(0, 1fr); }

  .tarjetas-metrica { grid-template-columns: minmax(0, 1fr); }
  .plan-estado { grid-template-columns: minmax(0, 1fr); }
  .pagina--panel { flex-direction: column; align-items: stretch; }
  .pagina__acciones .btn { flex: 1; }
  .perfil { grid-template-columns: minmax(0, 1fr); }
  .sucursal { grid-template-columns: auto minmax(0, 1fr); }
  .sucursal__tel { grid-column: 2; }
  .cab__cuenta { margin-left: 0; }
  .suc-admin { grid-template-columns: auto minmax(0, 1fr); }
  .suc-admin__acciones { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════
   Solicitud de cuenta de empresa y revisión
   ═══════════════════════════════════════════════════════════ */

/* Bloques cortos con un título tenue. Sin cajas ni sombras: lo que
   ordena el formulario es el espacio entre grupos y una línea fina,
   no un marco alrededor de cada uno. */
.solicitud { margin-top: 18px; }

.solicitud__intro {
  margin: 0 0 18px;
  padding: 11px 13px;
  background: var(--hueso, #F7F5EF);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
  font-size: 12.5px; line-height: 1.6;
  color: var(--gris-acero, #33475A);
}

.solicitud__bloque {
  margin: 0 0 20px; padding: 0 0 18px;
  border: 0; border-bottom: 1px solid var(--linea-suave);
}
.solicitud__bloque:last-of-type { border-bottom: 0; padding-bottom: 4px; }

.solicitud__titulo {
  padding: 0; margin-bottom: 11px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ambar-hondo);
}

/* Ayuda bajo un campo: el sitio donde se explica que el RNC no se
   publica, justo donde se escribe. */
.campo-v__ayuda {
  display: block; margin-top: 4px;
  font-size: 11.5px; line-height: 1.5;
  color: var(--texto-claro, #60717D);
}

.pastilla--roja { background: rgba(179, 38, 30, .1); color: #B3261E; }

/* ── Cola de revisión ───────────────────────────────────── */

.revision__filtros { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }

.revision__vacio {
  padding: 34px 20px; text-align: center;
  font-size: 13.5px; color: var(--texto-claro, #60717D);
}

.solicitudes { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }

.sol {
  display: grid; gap: 3px;
  padding: 15px 17px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
}
.sol--aprobada { border-left-color: var(--verde); }
.sol--rechazada { border-left-color: #B3261E; }

.sol__cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }
.sol__nombre { font-family: var(--display); font-size: 15.5px; font-weight: 700; color: var(--azul); }
.sol__meta { font-size: 12.5px; color: var(--gris-acero, #33475A); }
.sol__fecha { margin-left: auto; font-size: 11.5px; color: var(--texto-claro, #60717D); }

.sol__acciones { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* Expediente desplegado. El RNC va en tabular para poder cotejarlo
   dígito a dígito contra el registro mercantil. */
.sol__detalle {
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--linea-suave);
}
.sol__datos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 11px 18px; margin: 0;
}
.sol__datos dt {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--texto-claro, #60717D);
}
.sol__datos dd { margin: 2px 0 0; font-size: 13.5px; color: var(--azul); }
.sol__datos dd.num { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.sol__reservado {
  margin-top: 12px; padding: 9px 12px;
  background: rgba(179, 38, 30, .05);
  border: 1px dashed rgba(179, 38, 30, .3);
  border-radius: var(--r);
  font-size: 11.5px; line-height: 1.55; color: var(--texto-error, #7A1B15);
}

.sol__motivo { margin-top: 11px; }
.sol__motivo textarea {
  width: 100%; min-height: 62px; padding: 9px 11px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 4px;
  font-family: var(--cuerpo); font-size: 13px; color: var(--azul); resize: vertical;
}

@media (max-width: 640px) {
  .sol__fecha { margin-left: 0; width: 100%; }
  .sol__acciones .btn { flex: 1 1 auto; }
}

/* Alta de un elemento de la flota. Plegado por defecto: la pantalla
   se usa mucho más para retirar y reordenar que para añadir. */
.flota-alta { margin-top: 18px; border-top: 1px solid var(--linea-suave); padding-top: 16px; }
.flota-alta__abrir {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--ambar-hondo);
}
.flota-alta__abrir::-webkit-details-marker { display: none; }
.flota-alta__abrir::before { content: '+ '; }
.flota-alta[open] .flota-alta__abrir::before { content: '− '; }
.flota-alta form { margin-top: 14px; }

/* Tren motriz: solo aparece en camiones y autobuses, así que se
   presenta como un bloque aparte para que no se lea como un campo
   más de la ficha técnica. */
.tren-motriz {
  padding: 14px 16px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
}
.tren-motriz__titulo {
  display: block; margin-bottom: 10px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ambar-hondo);
}

/* ═══════════════════════════════════════════════════════════
   Ilustración del héroe y espacios publicitarios
   ═══════════════════════════════════════════════════════════ */

/* El héroe pasa a ser marco de posicionamiento del plano. */
.heroe { position: relative; overflow: hidden; isolation: isolate; }

/* Plano técnico de fondo.
   Anclado abajo a la derecha, donde no hay texto. El degradado que
   lleva dentro lo apaga hacia la izquierda, así que el titular queda
   sobre azul plano y no pierde contraste. */
.heroe__plano {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(72%, 1000px);
  height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* El atributo `hidden` no basta en un <svg>: la regla del navegador que
   lo oculta apunta a elementos HTML, y el plano seguía dibujándose
   detrás de la fotografía. Se dice aquí y se acabó la duda. */
.heroe__plano[hidden] { display: none; }

/* Por debajo de 900 px el titular ocupa casi todo el ancho y el plano
   competiría con él. Se retira: es ambiente, no información. */
@media (max-width: 900px) {
  .heroe__plano { display: none; }
}

/* ── Espacios publicitarios ─────────────────────────────── */

/* Un espacio sin campaña lleva `hidden` y no ocupa nada. Estas reglas
   solo describen cómo se ve cuando SÍ hay algo. */
.pub[hidden] { display: none; }

/* Rotulado como publicidad. No es decoración: quien entra a una página
   de compraventa tiene derecho a saber qué es catálogo y qué está
   pagado, y decirlo protege la credibilidad de lo demás.

   El rótulo va FUERA del marco; el marco es el hijo. Dentro
   descuadraba la proporción reservada para la imagen. */
.pub::before {
  content: 'Publicidad';
  display: block;
  margin-bottom: 5px;
  font-family: var(--cuerpo);
  font-size: 10px; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  /* No es decoración: es la advertencia de que lo de abajo es un
     anuncio pagado, así que tiene que leerse. Con --texto-claro daba
     1.96 de contraste sobre el fondo de la página, menos de la mitad
     del mínimo. --gris-acero da 4.64. */
  color: var(--gris-acero);
}

.pub > a,
.pub > img {
  display: block;
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--gris-neutro);
}
.pub img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Banner horizontal, entre el héroe y la búsqueda avanzada.
   La proporción reserva el alto antes de que cargue la imagen, así la
   página no da un salto cuando aparece. */
.pub--superior { margin: clamp(16px, 2.4vw, 24px) 0 0; }
.pub--superior > a,
.pub--superior > img { aspect-ratio: 1216 / 160; max-height: 160px; }

/* Rascacielos laterales, formato 160×600.
   Solo aparecen cuando de verdad sobra margen a los lados del
   contenido: 1280 px de envoltura + 2×160 de banner + 2×40 de aire =
   1720. Por debajo no se muestran, porque estrechar el catálogo para
   colocar un banner es cambiar ventas por impresiones.

   Anclados al documento y no a la ventana: con `fixed` quedaban
   flotando sobre el héroe azul nada más cargar y se leían como un
   fallo de maquetación. app.js mide el alto del héroe y fija
   --pub-arranque, porque ese alto cambia con el ancho de la ventana. */
.pub--lateral {
  position: absolute;
  /* Del final del héroe al final de la página: así el riel tiene
     recorrido y el banner de dentro puede acompañar la lectura. */
  top: var(--pub-arranque, 560px);
  bottom: 40px;
  /* Se adapta al hueco que de verdad sobra. Con un ancho fijo de 160 px
     el riel solo aparecía por encima de 1720, y en un portátil de 1440
     o 1536 —que es casi todo el mundo— los lados quedaban vacíos sin
     nada que los ocupara. */
  width: clamp(120px, calc((100vw - var(--envoltura) - 72px) / 2), 160px);
  z-index: 5;
  /* El contenedor no intercepta el ratón; el enlace de dentro sí. */
  pointer-events: none;
}
.pub--lateral > a,
.pub--lateral > img {
  position: sticky;
  top: 90px;                       /* por debajo de la cabecera */
  pointer-events: auto;
  aspect-ratio: 160 / 600;
}

/* Pegados al borde de la envoltura, no al de la ventana: en una
   pantalla de 2560 px quedarían a medio metro del contenido. */
.pub--izq { left: calc(50% - var(--envoltura) / 2 - 16px); transform: translateX(-100%); }
.pub--der { left: calc(50% + var(--envoltura) / 2 + 16px); }

/* Por debajo de 1600 px no cabe un riel sin estrechar el catálogo, y
   cambiar ventas por impresiones es mal negocio. En móvil, fuera. */
@media (max-width: 1599px) {
  .pub--lateral { display: none; }
}

/* <main> es el marco de referencia de los rieles. */
main { position: relative; }

/* Vista previa de una campaña en el panel. Fondo a cuadros para que se
   note si la imagen trae transparencia donde no debe. */
.pub-previa {
  margin-top: 10px;
  padding: 8px;
  max-width: 340px;
  border: 1px solid var(--linea);
  border-radius: var(--r);
  background-color: var(--gris-neutro);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%),
    linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.05) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 7px 7px;
}
.pub-previa img { display: block; width: 100%; height: auto; border-radius: 3px; }

/* Tren motriz: solo aparece en camiones y autobuses, así que se
   presenta como bloque aparte para que no se lea como un campo más de
   la ficha técnica. */
.tren-motriz {
  padding: 14px 16px;
  background: var(--hueso);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--ambar);
  border-radius: var(--r);
}
.tren-motriz__titulo {
  display: block; margin-bottom: 10px;
  font-family: var(--display); font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--ambar-hondo);
}

/* Alta de un elemento de la flota. Plegado por defecto: la pantalla se
   usa mucho más para retirar y reordenar que para añadir. */
.flota-alta { margin-top: 18px; border-top: 1px solid var(--linea-suave); padding-top: 16px; }
.flota-alta__abrir {
  cursor: pointer; list-style: none;
  font-family: var(--display); font-size: 13px; font-weight: 700;
  color: var(--ambar-hondo);
}
.flota-alta__abrir::-webkit-details-marker { display: none; }
.flota-alta__abrir::before { content: '+ '; }
.flota-alta[open] .flota-alta__abrir::before { content: '− '; }
.flota-alta form { margin-top: 14px; }

/* ── Membresías del panel ───────────────────────────────────
   Lo que la cuenta tiene comprado. Una tarjeta por membresía, con la
   barra de cupos como el dato que se lee primero: es la respuesta a
   "¿puedo publicar otro equipo?". */
.membresias {
  display: grid; gap: 10px; margin-top: 14px;
  grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
}
.membresia {
  display: flex; flex-direction: column; gap: 7px;
  padding: 13px 15px;
  background: var(--hueso); border: 1px solid var(--linea-suave);
  border-radius: var(--r-tarjeta);
}
.membresia--llena { border-color: var(--linea); background: var(--blanco); }
.membresia__cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.membresia__nivel { font-family: var(--display); font-size: 15px; font-weight: 700; }
.membresia__vigencia { font-size: 11.5px; font-weight: 600; color: var(--gris-acero); }
.membresia__cupo { font-size: 13px; font-weight: 600; color: var(--azul); }

.cupos { display: block; height: 5px; border-radius: 99px; background: var(--gris-neutro); overflow: hidden; }
.cupos__barra { display: block; height: 100%; width: var(--uso, 0%); border-radius: 99px; background: var(--verde); }
.cupos__barra--lleno { background: var(--ambar-hondo); }

.membresia__gratis { font-size: 11.5px; font-weight: 700; color: var(--verde); }
.membresia__siguiente { font-size: 11.5px; color: var(--gris-acero); }
.membresia .btn { align-self: flex-start; margin-top: 2px; }

/* Selector de plan en la tabla: cambia el nivel de un equipo sin salir
   de la lista, que es donde el anunciante los está comparando. */
.plan-celda { display: block; }
.plan-celda__sel {
  width: 100%; min-width: 118px; padding: 5px 8px;
  font-family: var(--cuerpo); font-size: 12.5px; font-weight: 600;
  color: var(--azul); background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 7px; cursor: pointer;
}
.plan-celda__sel:disabled { opacity: .6; cursor: progress; }
.plan-celda__fijo { font-size: 12.5px; font-weight: 600; color: var(--gris-acero); }

.acceso__aviso--ok {
  color: var(--texto-ok, #14532D); background: rgba(21, 122, 75, .07);
  border-color: rgba(21, 122, 75, .25); border-left-color: var(--verde);
}

/* Bloque de media columna en la portada, donde estaba la calculadora
   de financiamiento. Se dimensiona para acompañar en altura al panel
   de al lado sin imponerle su tamaño: la proporción reserva el alto
   antes de que cargue la imagen, así la portada no salta.

   Al ser `.panel` además de `.pub`, hereda el fondo y el borde de los
   demás bloques: se lee como parte de la página y no como algo
   incrustado. */
.pub--bloque > a,
.pub--bloque > img { aspect-ratio: 6 / 5; max-height: 520px; }

/* Sin campaña vigente, el bloque queda oculto y la fila se encoge a
   una sola columna. Sin esto, «Publicación de equipos» se quedaba a
   media anchura con un vacío al lado, que se lee como algo que no
   cargó. */
.fila--dos:has(> .pub[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* Banner de catálogo (B · 970×90), encima de los resultados. */
.pub--catalogo { margin-bottom: var(--gap); }
.pub--catalogo > a,
.pub--catalogo > img { aspect-ratio: 970 / 90; max-width: 970px; max-height: 90px; }

/* Recuadro de la ficha (D · 300×250), en la columna del vendedor. */
.pub--ficha { margin: var(--gap) 0; }
.pub--ficha > a,
.pub--ficha > img { aspect-ratio: 300 / 250; max-width: 300px; }

/* Formatos de teléfono (F, G, H). El cuadro de la lista es un <li> de
   la rejilla, así que ocupa la fila entera en vez de media. */
.pub--movil-superior { margin-top: var(--gap); }
.pub--movil-cuadro   { margin: var(--gap) 0; }
.pub--movil-lista    { grid-column: 1 / -1; }

.pub--movil-superior > a,
.pub--movil-superior > img { aspect-ratio: 320 / 180; max-width: 320px; }
.pub--movil-cuadro > a,
.pub--movil-cuadro > img,
.pub--movil-lista > a,
.pub--movil-lista > img { aspect-ratio: 1 / 1; max-width: 336px; }

.pub--movil-superior,
.pub--movil-cuadro { margin-inline: auto; max-width: 336px; }

/* Un formato de teléfono no se enseña en escritorio ni aunque esté
   vendido: se compró para el celular, y estirado a 1216 px se ve como
   un error de maquetación. */
@media (min-width: 701px) {
  .pub--movil-superior,
  .pub--movil-cuadro,
  .pub--movil-lista { display: none; }
}

/* Y al revés. El banner de catálogo mide 970 px de ancho: en un
   teléfono de 390 no cabe, así que no se ofrece ahí. El superior y el
   bloque conservan el comportamiento que ya tenían para las campañas
   de verdad; lo que se retira en el teléfono es su RECUADRO DE
   MUESTRA, porque el tarifario los vende como formatos de escritorio y
   enseñarlos en el móvil prometería algo que no se está vendiendo. */
@media (max-width: 700px) {
  .pub--catalogo { display: none; }
  .pub--superior.pub--muestra,
  .pub--bloque.pub--muestra { display: none; }
}

/* ── Espacio publicitario libre ─────────────────────────────
   El hueco que todavía no se ha vendido. Se enseña al visitante: es la
   única forma de que un anunciante sepa que puede comprarlo. Con
   `?muestra=publicidad` añade la letra y la medida del tarifario, que
   son para enseñárselas a un anunciante. Ver assets/app.js. */

/* El rótulo «Publicidad» sobra encima de un recuadro que ya dice
   «Espacio publicitario»: repetiría la misma palabra dos veces. Y sería
   falso: todavía no hay nada pagado ahí. */
.pub--muestra::before { content: none; }

/* El selector va con `.pub >` a propósito. El recuadro es un <a>, así
   que la regla `.pub > a` de más arriba —borde gris, fondo neutro, la
   que enmarca los banners de verdad— le ganaba en especificidad y lo
   dejaba sin su borde ámbar. */
.pub > .pub-muestra,
.pub-muestra {
  /* Toma el ámbar del tema cuando exista (rama de interfaz clara) y,
     mientras tanto, el de la guía de marca. Así el recuadro no habrá
     que retocarlo cuando entre el tema oscuro. */
  --pub-acento: var(--app-accent, var(--ambar));

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;

  width: 100%;
  /* La proporción EXACTA del formato: lo que se ve en la pantalla es lo
     que se compra, no una aproximación. */
  max-width: calc(var(--pub-ancho) * 1px);
  aspect-ratio: var(--pub-ancho) / var(--pub-alto);
  margin-inline: auto;
  padding: 10px;

  border: 2px dashed var(--pub-acento);
  border-radius: var(--r);
  background: rgba(242, 169, 0, .08);
  text-align: center;

  /* El color NO se fija: se toma del tema. Por debajo de 700 px la piel
     móvil es oscura (--app-text es hueso claro) y en escritorio es
     clara (--azul). Con un azul fijo, «Espacio publicitario» quedaba
     azul marino sobre fondo casi negro, ilegible en el teléfono. */
  color: var(--app-text, var(--azul));

  /* Es un enlace: abre el correo. Sin subrayado porque el recuadro
     entero ya se lee como algo pulsable. */
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}

/* Que se note que se puede pulsar. Con `hover: none` —el teléfono— no se
   aplica: allí un estado de hover se queda pegado tras el toque. */
@media (hover: hover) {
  .pub > .pub-muestra:hover {
    background: rgba(242, 169, 0, .16);
    border-style: solid;
  }
}
.pub > .pub-muestra:focus-visible {
  outline: 2px solid var(--pub-acento);
  outline-offset: 3px;
}

/* Y cuando el recuadro cae sobre una superficie clara aunque el tema
   sea oscuro —la ficha del equipo en el teléfono, que conserva el
   panel blanco—, se vuelve al azul de marca. La clase la pone
   ajustarContraste() en app.js midiendo el fondo de verdad. */
.pub-muestra--claro { color: var(--azul); }
.pub-muestra--claro .pub-muestra__medida,
.pub-muestra--claro .pub-muestra__pie { color: var(--gris-acero); }

.pub-muestra__letra {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: var(--r-pildora);
  background: var(--pub-acento);
  color: var(--azul);
  font-family: var(--display); font-weight: 800; font-size: 13px;
  line-height: 1;
}

.pub-muestra__nombre { font-weight: 600; font-size: 13px; letter-spacing: -.01em; }
.pub-muestra__medida { font-size: 12px; color: var(--app-muted, var(--gris-acero)); }
.pub-muestra__pie    { font-size: 10.5px; color: var(--app-muted, var(--gris-acero)); line-height: 1.45; }

/* En el sitio público el recuadro solo tiene dos renglones —no salen ni
   la letra ni la medida del tarifario— y el que invita a anunciarse deja
   de ser un pie de nota: es la razón de existir de la caja. Se le da
   tamaño y el ámbar de marca. */
.pub-muestra:not(:has(.pub-muestra__letra)) .pub-muestra__pie {
  font-size: 12px;
  font-weight: 600;
  color: var(--ambar-hondo);
}

/* 90 px de alto no dan para cuatro renglones apilados: en el banner de
   catálogo el contenido se pone en fila. */
.pub--catalogo .pub-muestra {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 12px;
}

/* El riel mide 160 px de ancho, así que el correo no cabe en una línea.
   Antes se ocultaba; ahora no puede: es la invitación a anunciarse y sin
   ella el riel es un rectángulo mudo. Se deja partir —hay 600 px de
   alto de sobra— y se permite cortar la dirección por donde haga falta,
   que si no se desborda del recuadro. */
.pub--lateral .pub-muestra__pie {
  font-size: 11px;
  overflow-wrap: anywhere;
}

/* El recuadro del riel acompaña la lectura igual que lo haría el banner
   vendido, que es `sticky` por la regla de más arriba. */
.pub--lateral .pub-muestra { position: sticky; top: 90px; }

.muestra-barra {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2px 14px;
  min-height: 30px;
  padding: 6px 14px;

  background: var(--azul);
  border-bottom: 2px solid var(--ambar);
  color: var(--blanco);
  font-size: 11.5px; font-weight: 600;
  line-height: 1.35;
  letter-spacing: .04em;
  text-align: center;
}

.muestra-barra__salir {
  color: var(--ambar);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

/* En el teléfono el rótulo no cabe al lado del enlace y se parte en dos
   líneas. Se deja partir a propósito: acortarlo con CSS obligaba a
   escribir el texto dos veces y un lector de pantalla lo leía dos
   veces. El alto lo absorbe --muestra-alto. */
@media (max-width: 700px) {
  .muestra-barra { font-size: 10.5px; letter-spacing: 0; gap: 2px 10px; padding-inline: 10px; }
}

/* El alto real lo mide app.js y lo deja en --muestra-alto: el rótulo
   puede ocupar dos líneas según el ancho, y con un 30 px fijo la
   cabecera se montaba encima y cortaba el texto. Los 30 px son el
   respaldo para el primer pintado, antes de medir. */
.muestra-pub body { padding-top: var(--muestra-alto, 30px); }
.muestra-pub .cab { top: var(--muestra-alto, 30px); }

/* ── Fotografía del héroe ───────────────────────────────────
   Una máquina publicada de verdad, detrás del titular. Sustituye al
   plano técnico cuando hay catálogo; el plano se queda de respaldo.

   Todo el trabajo lo hace el VELO. Sin él, una foto clara deja el
   titular blanco ilegible y una oscura se come la máquina. El velo
   mantiene la izquierda en azul casi sólido —donde está el texto— y
   deja respirar la derecha, que es la misma composición del plano al
   que sustituye. */
.heroe__foto {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}
.heroe__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Un poco por encima del centro: en una foto de maquinaria el equipo
     suele estar en el tercio superior y el suelo ocupa el resto. */
  object-position: center 42%;
}
.heroe__foto::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(7, 26, 43, .97) 0%,
      rgba(7, 26, 43, .94) 30%,
      rgba(7, 26, 43, .72) 62%,
      rgba(7, 26, 43, .55) 100%),
    linear-gradient(180deg, rgba(7, 26, 43, .45), rgba(7, 26, 43, .8));
}

/* Por debajo de 900 px el titular ocupa todo el ancho, así que el velo
   deja de ser lateral y pasa a cubrir parejo. La foto sigue viéndose,
   pero el texto manda. */
@media (max-width: 900px) {
  .heroe__foto::after {
    background: linear-gradient(180deg, rgba(7, 26, 43, .84), rgba(7, 26, 43, .93));
  }
}

/* Ajuste de la fotografía de la portada, en /admin.html. */
.heroe-ajuste { display: grid; gap: 16px; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; margin-top: 14px; }
.heroe-ajuste__previa {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px; background: var(--hueso); border-radius: var(--r);
}
.heroe-ajuste__previa img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 7px; }
.heroe-ajuste__vacia {
  display: grid; place-items: center; aspect-ratio: 16 / 9;
  background: var(--azul); border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--texto-claro);
}
.heroe-ajuste__estado { font-size: 11.5px; color: var(--gris-acero); }

@media (max-width: 720px) { .heroe-ajuste { grid-template-columns: minmax(0, 1fr); } }

/* Editor de motor y transmisión, dentro de la tabla del panel. */
.tren-fila > td { background: var(--hueso); padding: 14px 12px; }
.tren-edita { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items: end; }
.tren-edita__pie { display: flex; align-items: center; gap: 10px; }
.tren-edita__aviso { font-size: 12px; font-weight: 600; color: var(--verde); }
.tren-edita__aviso--error { color: #B3261E; }

/* Un camión sin motor declarado se señala: en un cabezote es lo
   primero que pregunta el comprador. */
.btn-tabla--avisa { border-color: var(--ambar-hondo); color: var(--ambar-hondo); font-weight: 700; }

/* Eliminar un anuncio. Va en rojo y el último de la fila: es la única
   acción del panel que no se puede deshacer. */
.btn-tabla--borrar { color: #B3261E; border-color: rgba(179, 38, 30, .3); }
.btn-tabla--borrar:hover { background: var(--sup-error, #FDF3F3); border-color: #B3261E; }
.btn-tabla--borrar:disabled { opacity: .6; cursor: progress; }

/* Par de acciones al pie de cada bloque de servicio de la portada.
   La portada resume y la página de cada servicio desarrolla: por eso
   una acción directa (cotizar) y una de lectura (más información),
   en vez de un botón a ancho completo y un párrafo debajo. */
.servicio__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.servicio__acciones .btn { flex: 1 1 auto; min-width: 0; }

/* Tabla comparativa de la página de planes. */
.tabla-planes { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla-planes th, .tabla-planes td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linea-suave); }
.tabla-planes thead th { font-family: var(--display); font-size: 13px; font-weight: 700; background: var(--hueso); }
.tabla-planes thead th:first-child { font-family: var(--cuerpo); font-weight: 600; color: var(--gris-acero); }
.tabla-planes tbody th { font-weight: 600; }
.tabla-planes td { text-align: center; }
.tabla-planes__si { color: var(--verde); font-weight: 700; }
.tabla-planes__no { color: var(--gris-acero); }

.planes-op--pagina { margin-top: 14px; }
.compra-cupos--pagina { display: grid; gap: 16px; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; margin-top: 14px; }
@media (max-width: 720px) { .compra-cupos--pagina { grid-template-columns: minmax(0, 1fr); } }

/* Preguntas frecuentes de la página de planes. */
.faq { display: grid; gap: 12px; margin-top: 14px; }
.faq > div { padding: 12px 14px; background: var(--hueso); border-radius: var(--r); }
.faq dt { font-family: var(--display); font-size: 14px; font-weight: 700; }
.faq dd { margin: 5px 0 0; font-size: 13.5px; color: var(--gris-acero); }

.realce--aviso { border-left-color: var(--ambar-hondo); }
.pedido__nota { margin-top: 10px; font-size: 12px; color: var(--gris-acero); }
.pedido__nota a { color: var(--ambar-hondo); font-weight: 600; }

/* ── Filtros en móvil ───────────────────────────────────────
   En escritorio los filtros son la columna izquierda de siempre. En
   móvil se retiran detrás de un botón: antes se desplegaban enteros
   entre la búsqueda y los resultados, y el catálogo —que es a lo que
   se viene— quedaba dos pantallas más abajo.

   Panel lateral y no acordeón: el acordeón sigue empujando la página
   hacia abajo al abrirse, que es justo el problema. */
.filtros__abrir { display: none; }
.filtros__cerrar { display: none; }
.velo-filtros { display: none; }

.filtros__cuenta {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--ambar); border-radius: 99px;
  font-size: 11px; font-weight: 700; color: var(--azul);
}

@media (max-width: 860px) {
  .filtros__abrir { display: inline-flex; margin-top: 0; }
  .filtros__cerrar {
    display: inline-grid; place-items: center;
    width: 32px; height: 32px; flex: none;
    background: transparent; border: 1px solid var(--linea); border-radius: var(--r);
    font-size: 20px; line-height: 1; color: var(--azul); cursor: pointer;
  }
  .filtros__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

  /* El selector lleva :first-child a propósito. Más arriba hay dos
     reglas responsive sobre `.fila--resultados > .panel:first-child`
     —una lo pone sticky y otra static— con esa misma especificidad;
     sin igualarla, el panel se quedaba en el flujo y empujaba los
     resultados una pantalla hacia abajo, que es justo lo que se venía
     a arreglar. Al empatar, gana esta por ir después. */
  .fila--resultados > .panel--filtros:first-child {
    position: fixed;
    top: 0; bottom: 0; left: 0;
    width: min(88vw, 340px);
    z-index: 60;
    margin: 0;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateX(-100%);
    transition: transform .22s ease;
  }
  .fila--resultados > .panel--filtros:first-child.abierto { transform: translateX(0); }

  .velo-filtros {
    display: block;
    position: fixed; inset: 0;
    z-index: 55;
    background: rgba(7, 26, 43, .5);
  }

  /* Quien pidió menos movimiento no recibe el deslizamiento. */
  @media (prefers-reduced-motion: reduce) {
    .fila--resultados > .panel--filtros:first-child { transition: none; }
  }
}

/* Bloquea el fondo mientras hay un panel abierto encima. */
body.sin-scroll { overflow: hidden; }

/* ── Carrusel horizontal ────────────────────────────────────
   La rejilla de recientes crecía hacia abajo: dieciocho tarjetas en
   tres filas ocupaban media portada. En horizontal cabe el mismo
   inventario en un tercio del alto, y en el teléfono se arrastra con
   el dedo, que es el gesto que ya espera cualquiera.

   Sin JavaScript de por medio para desplazar: scroll nativo con
   scroll-snap. Las flechas son un añadido para el ratón, no el
   mecanismo. */
.carrusel { position: relative; }

.carrusel__pista {
  display: grid;
  /* .rejilla define seis columnas explícitas y las pistas explícitas
     mandan sobre grid-auto-columns: con ellas puestas, las tarjetas
     seguían repartiéndose en filas y del carrusel solo quedaba el
     nombre. Anularlas es lo que lo vuelve horizontal de verdad. */
  grid-template-columns: none;
  grid-auto-flow: column;
  /* Ancho DEFINIDO, no minmax(0, …). Con dieciocho columnas que no
     caben, un mínimo de cero deja que el navegador las encoja hasta el
     contenido —salían de 56 px— y el carrusel se quedaba en nada. */
  grid-auto-columns: 210px;
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  padding-bottom: 4px;
  /* La barra se oculta en escritorio porque están las flechas; en
     táctil el propio gesto ya dice que hay más a los lados. */
  scrollbar-width: thin;
  scrollbar-color: var(--linea) transparent;
}
.carrusel__pista > * { scroll-snap-align: start; }
.carrusel__pista::-webkit-scrollbar { height: 6px; }
.carrusel__pista::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 99px; }

/* Cuántas piezas se ven a la vez, por ancho de ventana. */
@media (min-width: 700px)  { .carrusel__pista { grid-auto-columns: calc((100% - 24px) / 3); } }
@media (min-width: 1000px) { .carrusel__pista { grid-auto-columns: calc((100% - 48px) / 5); } }
@media (min-width: 1280px) { .carrusel__pista { grid-auto-columns: calc((100% - 60px) / 6); } }

.carrusel__mandos { display: flex; gap: 6px; }
.carrusel__flecha {
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r);
  color: var(--azul); cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.carrusel__flecha:hover:not(:disabled) { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.carrusel__flecha:disabled { opacity: .35; cursor: default; }
.carrusel__flecha .ico { width: 15px; height: 15px; }
.carrusel__flecha--atras .ico { transform: rotate(180deg); }

/* En táctil sobran: se arrastra. Se apagan por ancho Y por falta de
   hover, porque un portátil con pantalla táctil tiene las dos cosas y
   ahí las flechas sí ayudan. */
@media (max-width: 860px) { .carrusel__mandos { display: none; } }
@media (hover: none) and (pointer: coarse) { .carrusel__mandos { display: none; } }

/* ── Mosaico de categorías ──────────────────────────────────
   Sustituye la lista de seis renglones grises de «Tipos con más
   equipos». Cada pieza enseña una máquina publicada de esa categoría,
   y la primera va a doble tamaño para que la rejilla tenga jerarquía
   en vez de ser seis cuadrados iguales. */
.mosaico {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.mosaico > li:first-child { grid-column: span 2; grid-row: span 2; }

.mosaico__pieza {
  position: relative;
  display: block;
  height: 100%;
  min-height: 116px;
  overflow: hidden;
  border-radius: var(--r);
  background: var(--azul);
  color: var(--blanco);
}
.mosaico__pieza img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.mosaico__pieza:hover img { transform: scale(1.05); }

/* Velo por debajo del texto: sin él, un nombre blanco sobre una foto
   clara no se lee. Solo en la mitad inferior, que es donde va. */
.mosaico__pieza::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 26, 43, .05) 30%, rgba(7, 26, 43, .82) 100%);
}
.mosaico__cuerpo {
  position: absolute; inset: auto 0 0 0;
  z-index: 1;
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  padding: 10px 12px;
}
.mosaico__nombre { font-family: var(--display); font-size: 14px; font-weight: 700; }
.mosaico > li:first-child .mosaico__nombre { font-size: 19px; }
.mosaico__total { font-size: 12px; font-weight: 600; color: var(--ambar); }

/* Categoría sin inventario todavía. No se esconde: enseñar el abanico
   dice de qué va el sitio, y la cifra dice dónde hay algo hoy. Va más
   apagada para que la vista se vaya primero a las que sí tienen. */
.mosaico__pieza--vacia { background: var(--hueso); }
.mosaico__pieza--vacia::after { background: none; }
.mosaico__pieza--vacia .mosaico__nombre { color: var(--azul); }
.mosaico__pieza--vacia .mosaico__total { color: var(--gris-acero); font-size: 11.5px; }

.mosaico__ico {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--gris-neutro);
}
.mosaico__ico .ico { width: 40%; max-width: 56px; height: auto; aspect-ratio: 1; }

@media (max-width: 860px) {
  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mosaico > li:first-child { grid-column: span 2; grid-row: auto; min-height: 150px; }
}

/* ── Banda oscura a todo el ancho ───────────────────────────
   Corta la sucesión de recuadros blancos. Los tres servicios propios
   —alquiler, transporte, importación— viven aquí: son lo que hace
   MercaMaquinarias además del catálogo, y en tres paneles blancos más se
   perdían entre los demás. */
.banda {
  margin: clamp(20px, 3vw, 34px) 0;
  padding: clamp(26px, 4vw, 44px) 0;
  background:
    radial-gradient(900px 300px at 82% 0%, rgba(242, 169, 0, .13), transparent 62%),
    var(--azul);
  color: var(--blanco);
}
.banda__titulo {
  font-family: var(--display);
  font-size: clamp(20px, 2.4vw, 27px);
  font-weight: 800;
  letter-spacing: -.02em;
}
.banda__titulo em { font-style: normal; color: var(--ambar); }
.banda__sub { max-width: 68ch; margin-top: 8px; font-size: 14px; color: var(--texto-claro); }

.banda__rejilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: clamp(18px, 2.4vw, 26px);
}
.banda__servicio {
  display: flex; flex-direction: column;
  padding: 18px;
  background: rgba(255, 255, 255, .045);
  border: 1px solid var(--linea-dark);
  border-radius: var(--r);
}
.banda__ico {
  display: grid; place-items: center;
  width: 38px; height: 38px; margin-bottom: 11px;
  background: rgba(242, 169, 0, .14); border-radius: var(--r);
  color: var(--ambar);
}
.banda__ico .ico { width: 20px; height: 20px; }
.banda__nombre { font-family: var(--display); font-size: 16px; font-weight: 700; }
.banda__texto { margin-top: 6px; font-size: 13.5px; line-height: 1.5; color: var(--texto-claro); flex: 1; }
.banda__acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.banda__acciones .btn--linea { color: var(--blanco); border-color: var(--linea-dark); }
.banda__acciones .btn--linea:hover { background: var(--azul-2); border-color: var(--ambar); }

@media (max-width: 860px) {
  .banda__rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* Cabecera de sección con los mandos del carrusel a la derecha. */
.panel__meta--mandos { display: flex; align-items: center; gap: 12px; }

/* Alto fijo de fila en el mosaico: sin él, la pieza grande estiraba la
   rejilla a casi quinientos píxeles y la portada crecía en vez de
   encogerse. */
.mosaico { grid-auto-rows: 128px; }
@media (max-width: 860px) { .mosaico { grid-auto-rows: 120px; } }

/* La búsqueda avanzada pasó a ancho completo, así que sus campos van
   en fila y no apilados: antes ocupaba una columna estrecha y ahora
   dejaba trescientos píxeles de aire a los lados de cada desplegable. */
#buscador { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
#buscador .campo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
#buscador .form__pie { grid-column: 1 / -1; }
@media (max-width: 900px) { #buscador { grid-template-columns: minmax(0, 1fr); } }

/* ── Ver la contraseña ──────────────────────────────────────
   El botón va DENTRO del campo, a la derecha, y el input reserva el
   hueco con padding: colocarlo al lado desalinearía la rejilla de
   campos y en móvil partiría la fila. */
.campo-v--clave { position: relative; }
.campo-v--clave input { padding-right: 42px; }

.ver-clave {
  position: absolute;
  right: 6px;
  bottom: 5px;
  display: grid; place-items: center;
  width: 30px; height: 30px;
  background: transparent; border: 0; border-radius: 5px;
  color: var(--gris-acero); cursor: pointer;
  transition: color .15s ease, background-color .15s ease;
}
.ver-clave:hover { color: var(--azul); background: var(--hueso); }
.ver-clave--activo { color: var(--ambar-hondo); }
.ver-clave .ico { width: 17px; height: 17px; }

/* Con la ayuda debajo del campo, el botón sube para no montarse. */
.campo-v--clave:has(.campo-v__ayuda) .ver-clave,
.campo-v--clave:has(.campo-v__error) .ver-clave { bottom: auto; top: 26px; }

/* ── Alquiler: elegir una función ───────────────────────────
   No se alquila una máquina concreta ni un tamaño: se alquila lo que
   el equipo hace, y nosotros asignamos la unidad. Por eso la ficha
   lleva VARIAS fotos de marcas distintas: una sola volvería a
   prometer ese modelo. */
.alq__galeria {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 3px;
  width: 132px;
  flex: none;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--gris-neutro);
}
.alq__galeria img { display: block; width: 100%; height: 74px; object-fit: cover; }
.alq__galeria .alq__ico { display: grid; place-items: center; height: 74px; color: var(--gris-acero); }

.alq__nota { display: block; margin-top: 4px; font-size: 11.5px; color: var(--gris-acero); }

@media (max-width: 700px) {
  .alq__galeria { width: 96px; }
  .alq__galeria img, .alq__galeria .alq__ico { height: 56px; }
}

/* Resultado de una solicitud enviada. */
.resumen__texto { margin: 0 0 12px; font-size: 14px; color: var(--gris-acero); }
.resumen__error {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 14px;
  background: var(--sup-error, #FDF3F3); border: 1px solid #E8C4C4; border-left: 3px solid #B3261E;
  border-radius: var(--r); font-size: 13.5px; color: var(--texto-error, #7A1B15);
}
.resumen__error .ico { flex: none; width: 17px; height: 17px; }

/* Galería de un tipo de equipo, en el panel de administración. */
.flota-fotos { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.flota-fotos img { width: 64px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid var(--linea); }
.sol__meta--aviso { color: var(--ambar-hondo); }

/* ═══════════════════════════════════════════════════════════
   Asistente de soporte (widget flotante)

   Se monta desde assets/chat.js sobre el <body>, así que no hereda
   nada del contenido ni lo empuja: todo va en `position: fixed`.

   z-index 70: por encima de la cabecera pegajosa (40) y del menú de
   móvil (55/60), por debajo del enlace de salto (100), que tiene que
   seguir siendo lo primero que alcanza el teclado.

   Nada de burbuja redonda ni degradado: el sitio no tiene un solo
   círculo y su radio es de 6 px en todas partes. El lanzador es una
   pieza de mobiliario más, en azul noche con el filo ámbar de la
   marca.
   ═══════════════════════════════════════════════════════════ */

.chat { position: fixed; right: 18px; bottom: 18px; z-index: 70; }

.chat__lanzador {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 18px;
  background: var(--azul);
  color: var(--blanco);
  border: 0;
  border-bottom: 3px solid var(--ambar);
  border-radius: var(--r);
  font-family: var(--display);
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(7, 26, 43, .28);
  transition: background-color .15s ease, transform .15s ease;
}
.chat__lanzador:hover { background: var(--azul-2); transform: translateY(-1px); }
.chat__lanzador:focus-visible { outline: 3px solid var(--ambar); outline-offset: 2px; }
.chat__lanzador svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: var(--ambar); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ── Panel ──────────────────────────────────────────────── */

.chat__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  display: flex; flex-direction: column;
  width: 370px; height: min(560px, calc(100vh - 120px));
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  box-shadow: 0 12px 40px rgba(7, 26, 43, .22);
  overflow: hidden;
  animation: chat-entra .16s ease-out;
}
.chat__panel[hidden] { display: none; }

@keyframes chat-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.chat__cab {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: var(--azul);
  border-bottom: 3px solid var(--ambar);
}
.chat__titulo {
  margin: 0;
  font-family: var(--display);
  font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--blanco);
}
.chat__sub { margin: 3px 0 0; font-size: 11.5px; color: var(--texto-claro); }

.chat__cerrar {
  flex: none;
  display: grid; place-items: center;
  width: 28px; height: 28px;
  background: none; border: 0; border-radius: 4px;
  color: var(--texto-claro);
  cursor: pointer;
}
.chat__cerrar:hover { background: rgba(255, 255, 255, .1); color: var(--blanco); }
.chat__cerrar:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; }
.chat__cerrar svg {
  width: 16px; height: 16px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round;
}

/* ── Mensajes ───────────────────────────────────────────── */

.chat__log {
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--hueso);
}

.chat__msg {
  max-width: 88%;
  padding: 10px 12px;
  border-radius: var(--r);
  font-size: 13.5px; line-height: 1.55;
  overflow-wrap: anywhere;
}
.chat__msg--bot {
  align-self: flex-start;
  background: var(--blanco);
  border: 1px solid var(--linea);
  color: var(--azul);
}
.chat__msg--usuario {
  align-self: flex-end;
  background: var(--azul);
  color: var(--blanco);
}
/* Cuando algo falla, el aviso se distingue del resto de respuestas:
   lleva los contactos y conviene que se vea que es otra cosa. */
.chat__msg--aviso { border-left: 3px solid var(--ambar); background: var(--sup-calida, #FFFDF7); }

/* El ámbar sobre blanco da 2.95:1 y no llega al mínimo de 4.5:1. Un
   enlace es justo lo que hay que poder leer para pulsarlo, así que el
   texto va en azul —17:1— y el ámbar se queda en el subrayado, que es
   decoración y no tiene que cumplir contraste. */
.chat__msg a {
  color: var(--azul);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--ambar);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}
.chat__msg a:hover { text-decoration-color: var(--ambar-hondo); }
/* Sobre el azul de la burbuja del usuario el ámbar sí contrasta. */
.chat__msg--usuario a { color: var(--ambar); text-decoration-color: currentColor; }
.chat__msg strong { font-weight: 700; }

/* Tres puntos mientras se espera. Sin esto la persona no sabe si
   mandó la pregunta o no pasó nada. */
.chat__puntos { display: inline-flex; gap: 4px; padding: 2px 0; }
.chat__puntos i {
  width: 6px; height: 6px;
  background: var(--gris-acero);
  border-radius: 50%;
  animation: chat-late 1.1s infinite ease-in-out;
}
.chat__puntos i:nth-child(2) { animation-delay: .18s; }
.chat__puntos i:nth-child(3) { animation-delay: .36s; }
@keyframes chat-late {
  0%, 60%, 100% { opacity: .28; transform: translateY(0); }
  30%           { opacity: 1;   transform: translateY(-3px); }
}

/* ── Preguntas sugeridas ────────────────────────────────── */

.chat__sug { display: flex; flex-wrap: wrap; gap: 6px; }
.chat__sug-it {
  padding: 7px 11px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: 100px;
  font-family: var(--cuerpo);
  font-size: 12px; font-weight: 600;
  color: var(--azul);
  cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.chat__sug-it:hover { border-color: var(--ambar); background: var(--sup-calida, #FFFDF7); }
.chat__sug-it:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; }

/* ── Escribir ───────────────────────────────────────────── */

.chat__pie {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px;
  background: var(--blanco);
  border-top: 1px solid var(--linea);
}
.chat__entrada {
  flex: 1;
  min-height: 38px; max-height: 120px;
  padding: 9px 11px;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  font-family: var(--cuerpo);
  font-size: 13.5px; line-height: 1.45;
  color: var(--azul);
  resize: none;
}
.chat__entrada:focus {
  outline: none; border-color: var(--ambar);
  box-shadow: 0 0 0 2px rgba(242, 169, 0, .2);
}
.chat__entrada:disabled { background: var(--hueso); }

.chat__enviar {
  flex: none;
  display: grid; place-items: center;
  width: 38px; height: 38px;
  background: var(--ambar);
  border: 0; border-radius: var(--r);
  color: var(--azul);
  cursor: pointer;
  transition: background-color .12s ease;
}
.chat__enviar:hover:not(:disabled) { background: var(--ambar-hondo); }
.chat__enviar:disabled { opacity: .45; cursor: default; }
.chat__enviar:focus-visible { outline: 3px solid var(--azul); outline-offset: 2px; }
.chat__enviar svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

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

/* ── Móvil ──────────────────────────────────────────────── */

/* En pantalla estrecha el panel deja de colgar del lanzador y pasa a
   ser una hoja anclada abajo: a 370 px de ancho fijo se saldría de un
   teléfono de 360. El lanzador pierde el texto y se queda en icono
   para no tapar contenido. */
@media (max-width: 560px) {
  .chat { right: 12px; bottom: 12px; }
  .chat__lanzador { padding: 12px; }
  .chat__lanzador-txt { display: none; }

  .chat__panel {
    position: fixed;
    right: 10px; left: 10px; bottom: 10px;
    width: auto;
    height: min(78vh, calc(100dvh - 90px));
  }
}

/* Quien pide menos movimiento no ve ni la entrada del panel ni los
   puntos saltando. */
@media (prefers-reduced-motion: reduce) {
  .chat__panel { animation: none; }
  .chat__lanzador { transition: none; }
  .chat__lanzador:hover { transform: none; }
  .chat__puntos i { animation: none; opacity: .5; }
}
/* ═══════════════════════════════════════════════════════════
   Piel «app» 2026 — la misma estética en móvil y escritorio.

   Tema claro por defecto; oscuro con el botón de la cabecera
   (assets/tema.js pone data-theme en <html>).

   El oscuro redefine los tokens de marca, así que las 3.500 líneas de
   arriba cambian solas: --blanco pasa a ser la superficie oscura y
   --azul el texto claro. Lo que va SOBRE FOTO se fija en blanco
   aparte, porque ahí el texto debe ser claro en los dos temas.
   ═══════════════════════════════════════════════════════════ */

:root,
:root[data-theme="light"] {
  --azul:        #141616;
  --azul-2:      #26292A;
  --hueso:       #F4F4F1;
  --linea:       #E2E2DC;
  --linea-suave: #ECECE7;
  --gris-acero:  #5F6364;

  --app-bg:      #F4F4F1;
  --app-card:    #FFFFFF;
  --app-soft:    #EEEEEA;
  --app-line:    #E2E2DC;
  --app-text:    #141616;
  --app-muted:   #5F6364;
  --app-accent:  #F2A900;
  --app-accent-texto: #9A6800;   /* ámbar legible sobre claro */
  --app-sombra:  0 10px 30px rgba(20, 22, 22, .07);
  --app-vidrio:  rgba(255, 255, 255, .88);
  --texto-2:     #3D4345;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --azul:        #F7F5EF;
  --azul-2:      #2E3030;
  --blanco:      #0B0C0C;
  --hueso:       #191A1A;
  --gris-neutro: #3A3C3C;
  --gris-acero:  #A8AAA9;
  --linea:       #363838;
  --linea-suave: #2A2B2B;
  --texto-claro: #A8AAA9;
  --ambar-hondo: #F2A900;
  --verde:       #3DBA7E;

  --app-bg:      #191A1A;
  --app-card:    #0B0C0C;
  --app-soft:    #252626;
  --app-line:    #363838;
  --app-text:    #F7F5EF;
  --app-muted:   #A8AAA9;
  --app-accent:  #F2A900;
  --app-accent-texto: #F2A900;
  --app-sombra:  0 14px 40px rgba(0, 0, 0, .35);
  --app-vidrio:  rgba(25, 26, 26, .9);
  --texto-2:     #C9CBCA;
  --sup-calida:  #141515;
  --sup-error:   #2A1413;
  --texto-error: #F3A29C;
  --sup-ok:      #10201A;
  --texto-ok:    #8FD9B4;
  color-scheme: dark;
}

html { background: var(--app-bg); }
body { background: var(--app-bg); color: var(--app-text); transition: background-color .2s ease, color .2s ease; }

/* Ámbar: los botones llevan texto oscuro en los dos temas. */
.btn--ambar, .btn--ambar:hover { color: #151515; }
.btn { border-radius: 13px; }
.btn--linea { background: var(--app-card); color: var(--app-text); border-color: var(--app-line); }
.btn--linea:hover { background: var(--app-soft); }
.panel__titulo em, .banda__titulo em, .heroe__titulo em { color: var(--app-accent-texto); }
.enlace-mas { color: var(--app-accent-texto); }

/* ── Cabecera ── */
.cab { background: var(--app-vidrio); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--app-line); }
.cab__barra { background: transparent; border: 0; }
.cab__inner { min-height: 68px; }
.cab__nav a { color: var(--app-muted); }
.cab__nav a:hover, .cab__nav a[aria-current="page"] { color: var(--app-text); border-bottom-color: var(--app-accent); }
.cab__nav-cta {
  padding: 8px 14px !important; border: 0 !important; border-radius: 999px;
  background: var(--app-accent); color: #151515 !important;
}
.cab__nav-cta:hover { filter: brightness(1.05); }
.cab__cuenta { color: var(--app-text); border-color: var(--app-line); }
.cab__cuenta:hover { background: var(--app-soft); color: var(--app-text); }
.cab__toggle { border-color: var(--app-line); background: var(--app-card); border-radius: 12px; }
.cab__toggle span { background: var(--app-text); }

.tema-toggle {
  display: inline-grid; place-items: center; flex: none;
  width: 38px; height: 38px; padding: 0;
  background: var(--app-card); color: var(--app-text);
  border: 1px solid var(--app-line); border-radius: 12px;
  cursor: pointer;
}
.tema-toggle:hover { background: var(--app-soft); }
.tema-toggle:focus-visible { outline: 2px solid var(--app-accent); outline-offset: 2px; }
.tema-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tema-toggle__sol { display: none; }
:root[data-theme="dark"] .tema-toggle__sol { display: block; }
:root[data-theme="dark"] .tema-toggle__luna { display: none; }

/* ── Héroe: sin foto, título grande, buscador en tarjeta ── */
.heroe { background: var(--app-bg); color: var(--app-text); border: 0; min-height: 0; }
.heroe__foto, .heroe__plano { display: none !important; }
.heroe__inner { padding-block: clamp(22px, 5vw, 64px) clamp(18px, 3vw, 34px); }
.heroe__saludo { margin: 0 0 16px; font: 500 clamp(24px, 3vw, 34px)/1.15 var(--cuerpo); letter-spacing: -.04em; }
.heroe__saludo[hidden] { display: none !important; }
.heroe__titulo { max-width: 16ch; font-size: clamp(32px, 5.4vw, 64px); line-height: 1.02; letter-spacing: -.05em; }
.heroe__titulo em { display: inline; }
.heroe__sub { color: var(--app-muted); max-width: 58ch; }
.heroe__buscar {
  max-width: 1040px; padding: 8px;
  background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 22px; box-shadow: var(--app-sombra); backdrop-filter: none;
}
.heroe__buscar input, .heroe__buscar select {
  background: var(--app-soft); color: var(--app-text); border: 1px solid transparent; border-radius: 15px;
}
.heroe__buscar input::placeholder { color: var(--app-muted); }
.heroe__buscar .btn { border-radius: 15px; }
.heroe__atajos { display: flex; gap: 8px; margin: 14px 0 0; overflow-x: auto; scrollbar-width: none; }
.heroe__atajos a {
  flex: 0 0 auto; padding: 9px 16px;
  background: var(--app-card); color: var(--app-text);
  border: 1px solid var(--app-line); border-radius: 999px;
  font-size: 13px; font-weight: 600;
}
.heroe__atajos a:hover { border-color: var(--app-accent); }
.heroe__cifras li { color: var(--app-muted); }
.heroe__cifras b { color: var(--app-text); }

/* La búsqueda avanzada se queda en el catálogo; en la portada basta el buscador del héroe. */
section[aria-labelledby="t-buscar"] { display: none; }

/* ── Paneles y tarjetas ── */
.panel {
  background: var(--app-card); color: var(--app-text);
  border: 1px solid var(--app-line); border-radius: 22px;
  box-shadow: var(--app-sombra);
}
.panel__titulo { letter-spacing: -.035em; }
.panel__meta, .panel__texto, .marcas__nota { color: var(--app-muted); }
.realce { background: rgba(242, 169, 0, .12); border-color: rgba(242, 169, 0, .45); color: var(--app-text); }
.aviso__foto { border-radius: 14px; }
.aviso a:hover .aviso__nombre { color: var(--app-accent-texto); }
.dealer { background: var(--app-soft); border-color: var(--app-line); border-radius: 16px; color: var(--app-text); }
.dealer:hover { background: var(--app-card); }

/* Campos */
.form input, .form select, .campo input, .campo select, textarea {
  background: var(--app-soft); border-color: var(--app-line); color: var(--app-text);
}

/* ── Categorías: fotos de estudio sobre negro en los dos temas ── */
.mosaico { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 16px; margin-top: 14px; }
.mosaico > li, .mosaico > li:first-child { grid-column: auto; grid-row: auto; }
.mosaico__pieza, .mosaico__pieza--vacia {
  position: relative; display: block; height: auto; aspect-ratio: 1 / 1; overflow: hidden; padding: 0;
  background: #050606; border: 0; border-radius: 22px;
}
.mosaico__pieza img { position: absolute; inset: 0 0 18%; width: 100%; height: 82%; object-fit: contain; transform: none; transition: transform .35s ease; }
.mosaico__pieza:hover img { transform: scale(1.04); }
.mosaico__pieza::after, .mosaico__pieza--vacia::after { content: ""; position: absolute; inset: auto 0 0; height: 36%; background: linear-gradient(transparent, rgba(0, 0, 0, .96)); }
.mosaico__cuerpo { position: absolute; inset: auto 10px 14px; z-index: 2; display: block; padding: 0; background: transparent; text-align: center; }
.mosaico__nombre, .mosaico > li:first-child .mosaico__nombre, .mosaico__pieza--vacia .mosaico__nombre {
  color: #FFFFFF; font-family: var(--display); font-size: clamp(14px, 1.5vw, 20px); font-weight: 800; line-height: 1.08; text-wrap: balance;
}
.mosaico__total { display: none; }
.mosaico__ico { display: none; }

/* ── Banda de servicios: tarjetas en vez de franja azul ── */
.banda { background: var(--app-bg); color: var(--app-text); border: 0; }
.banda__sub, .banda__texto { color: var(--app-muted); }
.banda__servicio {
  background: var(--app-card); border: 1px solid var(--app-line);
  border-radius: 22px; box-shadow: var(--app-sombra);
}
.banda__ico { background: rgba(242, 169, 0, .14); color: var(--app-accent-texto); border-radius: 12px; }
.banda__acciones .btn--linea { color: var(--app-text); border-color: var(--app-line); }
.banda__acciones .btn--linea:hover { background: var(--app-soft); }

/* ── Pie ── */
.pie { background: var(--app-card); color: var(--app-muted); border-top: 1px solid var(--app-line); }
.pie__legal, .pie__titulo, .pie__lista--marcada b { color: var(--app-text); }
.pie__texto, .pie__lista a, .pie__sede { color: var(--app-muted); }
.pie__lista a:hover { color: var(--app-accent-texto); }

/* Texto sobre fotografía: siempre claro. */
.aviso__fotos, .foto__sello { color: #FFFFFF; }

/* ── Transporte: servicio pausado ───────────────────────────
   Se oculta sin borrar la página ni el código. Para reactivarlo,
   quitar este bloque y la redirección de assets/app.js. */
a[href^="transporte.html"],
li:has(> a[href^="transporte.html"]),
.banda__servicio:has(a[href^="transporte.html"]) { display: none !important; }
.banda__rejilla:has(a[href^="transporte.html"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ═══ Escritorio y tableta ═══ */
.nav-movil { display: none; }

@media (min-width: 701px) and (max-width: 980px) {
  .mosaico { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 701px) {
  .cab__inner { gap: 20px; }
  .tema-toggle { order: 3; }
}

/* ═══ Móvil ═══ */
@media (max-width: 700px) {
  body { padding-bottom: 94px; }
  .envoltura { width: 100%; padding-inline: 18px; }
  .cab { position: sticky; top: 0; z-index: 60; }
  .cab__inner { min-height: 64px; padding: 10px 18px; gap: 10px; }
  .cab__logo { width: 158px; }
  .tema-toggle { margin-left: auto; }
  .tema-toggle + .cab__toggle { margin-left: 0; }
  .cab__nav { background: var(--app-card); border: 1px solid var(--app-line); border-radius: 18px; box-shadow: var(--app-sombra); }
  .cab__nav a { color: var(--app-text); border-color: var(--app-line); }

  .heroe__inner { padding: 12px 18px 22px; }
  .heroe__titulo { font-size: clamp(30px, 9vw, 42px); line-height: 1.04; letter-spacing: -.055em; max-width: 11ch; margin-bottom: 14px; }
  .heroe__sub { font-size: 14px; line-height: 1.55; max-width: 42ch; margin-bottom: 20px; }
  .heroe__buscar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .heroe__buscar input { grid-column: 1 / -1; height: 50px; font-size: 16px; }
  .heroe__buscar select { height: 42px; border-radius: 12px; font-size: 12px; }
  .heroe__buscar .btn { grid-column: 1 / -1; height: 48px; border-radius: 14px; font-size: 15px; }
  .heroe__cifras { margin-top: 14px; }

  .panel { margin-block: 14px; padding: 17px 14px; box-shadow: none; }
  .panel__titulo, .marcas__titulo { font-size: 22px; }

  .mosaico { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mosaico__pieza, .mosaico__pieza--vacia { aspect-ratio: 4 / 5; border-radius: 18px; }
  .mosaico__cuerpo { inset: auto 8px 12px; }
  .mosaico__nombre, .mosaico > li:first-child .mosaico__nombre, .mosaico__pieza--vacia .mosaico__nombre { font-size: 14px; }

  .carrusel { margin: 0; padding: 0; overflow: visible; }
  .carrusel__pista { display: grid; grid-template-columns: 1fr; grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; overflow: visible; padding: 0; }
  .aviso a { grid-template-columns: 118px minmax(0, 1fr); grid-template-rows: auto; column-gap: 12px; padding: 10px; }
  .aviso__foto { grid-column: 1; grid-row: 1 / 7; width: 118px; height: 112px; aspect-ratio: auto; border-radius: 12px; }
  .aviso__nombre, .aviso__specs, .aviso__sitio, .aviso__pie, .aviso__vendedor { grid-column: 2; }

  .banda { margin: 26px 0 12px; padding: 28px 0; }
  .banda__titulo { font-size: 25px; }
  .banda__rejilla, .banda__rejilla:has(a[href^="transporte.html"]) { grid-template-columns: 1fr; gap: 10px; }
  .banda__servicio { padding: 16px; border-radius: 16px; box-shadow: none; }
  .banda__ico { display: none; }
  .banda__nombre { font-size: 16px; }
  .banda__texto { font-size: 13px; }

  .pie { padding-bottom: 25px; }

  .nav-movil {
    position: fixed; display: grid; grid-template-columns: repeat(5, 1fr);
    left: max(14px, env(safe-area-inset-left)); right: max(14px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom)); z-index: 100;
    min-height: 68px; padding: 6px;
    background: var(--app-vidrio); border: 1px solid var(--app-line); border-radius: 24px;
    box-shadow: var(--app-sombra); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .nav-movil a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; color: var(--app-text); border-radius: 18px; font-size: 10px; font-weight: 600; }
  .nav-movil svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .nav-movil a:nth-child(3) { color: #151515; background: var(--app-accent); margin: -15px 3px 4px; border: 5px solid var(--app-bg); border-radius: 22px; }
  .nav-movil .is-activo:not(:nth-child(3)) { background: var(--app-soft); color: var(--app-text); }
}