/* ==========================================================================
   RutaVial Motor — hoja de estilo única
   Los colores están MEDIDOS del logo que mandó Benigno, no elegidos a ojo:
   fondo #000815, dorados de #B48037 a #FCD97F, granate del filete interior.
   ========================================================================== */

:root {
  --tinta:      #050B18;
  --tinta-2:    #0A1428;
  --tinta-3:    #0F1D36;
  --tinta-4:    #16294a;

  --oro:        #D8A94F;
  --oro-claro:  #F2D48A;
  --oro-oscuro: #9C6F2C;
  --granate:    #7E1116;

  --texto:      #EEF1F7;
  --suave:      #94A2BA;
  /* #6B7893 daba 4.43:1 sobre el fondo y 4.14:1 sobre los paneles: por debajo de
     AA (4.5). Con #7C89A3 sube a 5.59 y 5.22 y sigue leyéndose como texto terciario. */
  --tenue:      #7C89A3;

  --verde:      #25D366;
  --linea:      rgba(216, 169, 79, .18);
  --linea-2:    rgba(216, 169, 79, .32);

  --display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --cuerpo:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1160px;
  --radio: 14px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--tinta);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--oro); color: var(--tinta); }

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

/* --- Tipografía ---------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.005em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.4rem, 6.4vw, 4.3rem); text-transform: uppercase; }
h2 { font-size: clamp(1.85rem, 4.2vw, 2.9rem); text-transform: uppercase; }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); }
h4 { font-size: 1.08rem; }

p { text-wrap: pretty; }
strong { font-weight: 650; color: #fff; }
em { font-style: italic; }

.oro { color: var(--oro-claro); }

.antetitulo {
  font-family: var(--display);
  font-size: .95rem;
  font-weight: 600;
  /* .22em se salía de la pantalla en móvil con textos largos como
     "COMPRAVENTA DE VEHÍCULOS · ASTURIAS". Escalado al ancho disponible. */
  letter-spacing: clamp(.1em, .6vw, .22em);
  text-transform: uppercase;
  color: var(--oro);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem .7rem;
  margin-bottom: 1rem;
}
.antetitulo::before {
  content: '';
  width: 26px;
  height: 2px;
  background: linear-gradient(90deg, var(--oro), transparent);
  flex: none;
}

.entradilla {
  font-size: clamp(1.05rem, 2.1vw, 1.22rem);
  color: #C6CFDF;
  line-height: 1.62;
  max-width: 62ch;
}

/* --- Estructura ---------------------------------------------------------- */

.contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: 20px;
}

section { padding-block: clamp(3.4rem, 8vw, 6rem); }
.seccion-alt { background: var(--tinta-2); border-block: 1px solid var(--linea); }

.cabecera-seccion { max-width: 60ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.cabecera-seccion p { color: var(--suave); margin-top: .85rem; }

.rejilla { display: grid; gap: 1.1rem; }
@media (min-width: 700px) {
  .r-2 { grid-template-columns: repeat(2, 1fr); }
  .r-3 { grid-template-columns: repeat(3, 1fr); }
  .r-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .r-4 { grid-template-columns: repeat(4, 1fr); }
}

/* --- Filete dorado, el gesto que viene del hexágono del logo -------------- */

.filete {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--linea-2) 20%, var(--linea-2) 80%, transparent);
  border: 0;
}

/* --- Botones ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-family: var(--cuerpo);
  font-size: 1rem;
  font-weight: 650;
  line-height: 1;
  padding: 1.05rem 1.7rem;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  text-align: center;
  /* break-word, NO anywhere: `anywhere` entra en el cálculo del tamaño mínimo y
     partía "WhatsApp" en "Wha / tsAp / p" aunque hubiera sitio de sobra. */
  overflow-wrap: break-word;
}
/* Los SVG en línea no traen ancho ni alto: sin esto el navegador les da un tamaño
   arbitrario o los colapsa a cero, y los iconos desaparecen de los botones. */
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn svg:not([stroke]) { fill: currentColor; }

/* Los números de teléfono nunca se parten. */
.btn-tel { white-space: nowrap; }
/* Solo donde de verdad hay una cadena larga sin espacios (correos). */
.btn-email { overflow-wrap: anywhere; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-oro {
  background: linear-gradient(160deg, var(--oro-claro), var(--oro) 55%, var(--oro-oscuro));
  color: #1A1305;
  box-shadow: 0 8px 26px rgba(216, 169, 79, .22);
}
.btn-oro:hover { box-shadow: 0 12px 34px rgba(216, 169, 79, .34); }

.btn-linea {
  border-color: var(--linea-2);
  color: var(--oro-claro);
  background: rgba(216, 169, 79, .05);
}
.btn-linea:hover { border-color: var(--oro); background: rgba(216, 169, 79, .12); }

.btn-wa { background: var(--verde); color: #04310F; }
.btn-wa:hover { box-shadow: 0 12px 30px rgba(37, 211, 102, .3); }

.btn-grupo { display: flex; flex-wrap: wrap; gap: .8rem; }
.btn-bloque { width: 100%; }

/* --- Cabecera ------------------------------------------------------------ */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(5, 11, 24, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
/* La cabecera necesita más ancho que el resto del sitio: con los 1160px del contenedor
   general, logo + 7 enlaces + teléfono + CTA sumaban 1353px y se salían. */
.cabecera .contenedor { max-width: 1340px; }
.cabecera-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 72px;
}

.logo { display: flex; align-items: center; gap: .7rem; flex: none; }
.logo img { height: 46px; width: auto; }
.logo-txt { display: flex; flex-direction: column; line-height: 1; }
.logo-txt b {
  font-family: var(--display);
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: linear-gradient(170deg, var(--oro-claro), var(--oro) 60%, var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.logo-txt span {
  font-size: .6rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-top: .22rem;
}

.nav-principal { display: none; }
@media (min-width: 1060px) {
  .nav-principal { display: flex; align-items: center; gap: 1.15rem; }
  .nav-principal a {
    font-size: .9rem;
    font-weight: 500;
    color: var(--suave);
    transition: color .18s;
    white-space: nowrap;
  }
  .nav-principal a:hover, .nav-principal a[aria-current] { color: var(--oro-claro); }
}

/* La fila de acciones es flex SIEMPRE. Cuando solo lo era a partir de 1060px, en móvil
   el div se comportaba como bloque y el botón y la hamburguesa se apilaban rompiendo
   la cabecera. */
.cabecera-acciones { display: flex; align-items: center; gap: .5rem; flex: none; }
/* min-height 44px: área de toque mínima recomendada. */
.cabecera-acciones .btn { padding: .72rem 1.15rem; font-size: .92rem; min-height: 44px; }

/* Por debajo de 560px no cabe logo + CTA + hamburguesa. El CTA se cae de la cabecera
   (sigue estando arriba del menú desplegable y en la barra fija inferior). */
/* Scope a .cabecera-acciones, no a .cabecera: el menú desplegable también vive dentro
   de la cabecera y su CTA sí tiene que verse en móvil. */
.cabecera-acciones .btn-oro { display: none; }
@media (min-width: 560px) { .cabecera-acciones .btn-oro { display: inline-flex; } }
.cabecera-acciones .btn-tel { display: none; }
@media (min-width: 1300px) { .cabecera-acciones .btn-tel { display: inline-flex; } }

.abrir-menu {
  background: none;
  border: 1px solid var(--linea-2);
  border-radius: 8px;
  width: 46px;
  height: 44px;
  display: grid;
  place-items: center;
  gap: 4px;
  cursor: pointer;
  flex: none;
}
.abrir-menu span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--oro);
  border-radius: 2px;
}
/* Este media query TIENE que ir después de la regla base de .abrir-menu: si va antes,
   el `display:grid` de arriba lo pisa por orden de cascada y el botón se queda visible
   en escritorio, desbordando la cabecera. */
@media (min-width: 1060px) {
  .abrir-menu { display: none; }
}

/* Menú móvil */
.nav-movil {
  display: none;
  border-top: 1px solid var(--linea);
  padding: 1rem 0 1.6rem;
  background: var(--tinta-2);
}
.nav-movil.abierto { display: block; }
.nav-movil a {
  display: block;
  padding: .82rem .2rem;
  font-size: 1.05rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  color: var(--texto);
}
.nav-movil a:last-of-type { border-bottom: 0; }
.nav-movil .btn { margin-top: 1rem; }
@media (min-width: 1060px) { .nav-movil, .nav-movil.abierto { display: none; } }

/* --- Hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}
/* Sin salirse por los lados: con `inset: … -20%` el pseudoelemento medía el 140% del
   hero y, aunque overflow:hidden lo recortaba, ensuciaba cualquier medición de desborde. */
.hero::before {
  content: '';
  position: absolute;
  inset: -30% 0 auto 0;
  height: 130%;
  background:
    radial-gradient(ellipse 50% 42% at 72% 22%, rgba(216, 169, 79, .16), transparent 66%),
    radial-gradient(ellipse 44% 40% at 12% 88%, rgba(126, 17, 22, .16), transparent 68%);
  pointer-events: none;
}
/* Las estrías doradas del logo, convertidas en fondo */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    104deg,
    transparent 0 60px,
    rgba(216, 169, 79, .045) 60px 61px,
    transparent 61px 122px
  );
  pointer-events: none;
}
.hero > * { position: relative; z-index: 2; }

.hero-rejilla { display: grid; gap: 2.6rem; align-items: center; }
/* min-width:0 es imprescindible: por defecto un hijo de grid vale `min-width:auto`,
   así que el max-width de 430px del logo forzaba una columna de 430px y en móvil
   recortaba el titular y el párrafo por la derecha. */
.hero-rejilla > * { min-width: 0; }
@media (min-width: 940px) {
  .hero-rejilla { grid-template-columns: 1.08fr .92fr; gap: 3.4rem; }
}
.hero h1 { margin-bottom: 1.15rem; }
.hero .entradilla { margin-bottom: 1.9rem; }

.hero-medallas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.9rem;
}
.medalla {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--oro-claro);
  background: rgba(216, 169, 79, .07);
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: .45rem .95rem;
}
.medalla svg { width: 15px; height: 15px; flex: none; }

/* `width:100%` es obligatorio: el `max-width:430px` de aquí SUSTITUYE al `max-width:100%`
   global de img, así que sin él la imagen se plantaba en 430px y desbordaba en móvil. */
.hero-logo {
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .6));
  margin-inline: auto;
  width: 100%;
  max-width: 430px;
  height: auto;
}

/* --- Tarjetas ------------------------------------------------------------ */

.tarjeta {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem 1.5rem;
  transition: border-color .22s ease, transform .22s ease;
}
.tarjeta:hover { border-color: var(--linea-2); transform: translateY(-3px); }
.tarjeta h3 { margin-bottom: .6rem; }
.tarjeta p { color: var(--suave); font-size: .97rem; }

.tarjeta-icono {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: rgba(216, 169, 79, .1);
  border: 1px solid var(--linea);
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
  color: var(--oro);
}
.tarjeta-icono svg { width: 22px; height: 22px; }

/* --- Las dos vías de venta ----------------------------------------------- */

.vias { display: grid; gap: 1.2rem; }
@media (min-width: 880px) {
  .vias { grid-template-columns: 1fr 1fr; }
  /* Cuando solo hay una vía de venta, la tarjeta no se queda a media página. */
  .vias--una { grid-template-columns: 1fr; max-width: 760px; }
}

.via {
  position: relative;
  border: 1px solid var(--linea-2);
  border-radius: 18px;
  padding: 2rem 1.7rem 1.7rem;
  background: linear-gradient(168deg, rgba(216, 169, 79, .09), var(--tinta-2) 58%);
  display: flex;
  flex-direction: column;
}
.via--b { background: linear-gradient(168deg, rgba(126, 17, 22, .16), var(--tinta-2) 58%); }

.via-etiqueta {
  font-family: var(--display);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .7rem;
}
.via--b .via-etiqueta { color: #E4838A; }
.via h3 { font-size: clamp(1.5rem, 3.2vw, 2rem); text-transform: uppercase; margin-bottom: .7rem; }
.via > p { color: #C6CFDF; margin-bottom: 1.3rem; }

.via-datos {
  display: flex;
  gap: 1.6rem;
  padding: .9rem 0 1.2rem;
  border-block: 1px solid var(--linea);
  margin-bottom: 1.2rem;
}
.via-dato span {
  display: block;
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tenue);
  margin-bottom: .28rem;
}
.via-dato b { font-family: var(--display); font-size: 1.16rem; font-weight: 600; color: var(--oro-claro); }
.via--b .via-dato b { color: #EFA7AC; }

/* --- Listas con marca ---------------------------------------------------- */

.lista-marcada { list-style: none; display: flex; flex-direction: column; gap: .72rem; }
.lista-marcada li {
  position: relative;
  padding-left: 1.7rem;
  color: #C2CBDC;
  font-size: .97rem;
  line-height: 1.55;
}
.lista-marcada li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--oro);
  transform: rotate(45deg);
  border-radius: 1px;
}

/* --- Proceso numerado ---------------------------------------------------- */

.pasos { display: grid; gap: 1.1rem; counter-reset: paso; }
@media (min-width: 780px) { .pasos { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .pasos { grid-template-columns: repeat(4, 1fr); } }

.paso {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.6rem 1.4rem;
  position: relative;
  overflow: hidden;
}
.paso-n {
  font-family: var(--display);
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.4px var(--linea-2);
  margin-bottom: .5rem;
}
.paso h3 { margin-bottom: .55rem; }
.paso p { color: var(--suave); font-size: .95rem; }
.paso-tiempo {
  display: inline-block;
  margin-top: .95rem;
  font-size: .76rem;
  font-weight: 650;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--oro);
  background: rgba(216, 169, 79, .09);
  border-radius: 5px;
  padding: .28rem .6rem;
}

/* --- Franja de cifras ---------------------------------------------------- */

.cifras { display: grid; gap: 1rem; }
@media (min-width: 620px) { .cifras { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .cifras { grid-template-columns: repeat(4, 1fr); } }
.cifra {
  text-align: center;
  padding: 1.5rem 1rem;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--tinta-2);
}
.cifra b {
  display: block;
  font-family: var(--display);
  font-size: clamp(2.3rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  background: linear-gradient(170deg, var(--oro-claro), var(--oro-oscuro));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin-bottom: .4rem;
}
.cifra span { font-size: .87rem; color: var(--suave); }

/* --- FAQ (acordeón nativo) ----------------------------------------------- */

.faq-grupo + .faq-grupo { margin-top: 2.4rem; }
.faq-grupo > h3 {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1rem;
}
.faq {
  border: 1px solid var(--linea);
  border-radius: 11px;
  background: var(--tinta-2);
  margin-bottom: .7rem;
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.15rem 1.3rem;
  font-weight: 600;
  font-size: 1.02rem;
  position: relative;
  transition: color .18s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--oro-claro); }
.faq summary::after {
  content: '';
  position: absolute;
  right: 1.3rem;
  top: 1.5rem;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--oro);
  border-bottom: 2px solid var(--oro);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.faq[open] summary::after { transform: rotate(-135deg); top: 1.72rem; }
.faq-cuerpo { padding: 0 1.3rem 1.3rem; color: var(--suave); font-size: .98rem; }

/* --- Formulario ---------------------------------------------------------- */

.form-caja {
  background: var(--tinta-2);
  border: 1px solid var(--linea-2);
  border-radius: 18px;
  padding: clamp(1.5rem, 4vw, 2.4rem);
}
.campos { display: grid; gap: 1rem; }
@media (min-width: 640px) { .campos { grid-template-columns: 1fr 1fr; } .campo-ancho { grid-column: 1 / -1; } }

.campo label {
  display: block;
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: .42rem;
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  background: var(--tinta);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 9px;
  color: var(--texto);
  font-family: inherit;
  font-size: 1rem;
  padding: .85rem 1rem;
  transition: border-color .18s;
}
.campo textarea { min-height: 110px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--oro);
}
.campo select { appearance: none; background-image: none; }

/* Trampa antispam: fuera de la vista pero sin display:none, que algunos bots detectan. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-estado {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: 9px;
  font-size: .93rem;
  font-weight: 600;
}
.form-estado.ok { background: rgba(37, 211, 102, .12); border: 1px solid rgba(37, 211, 102, .35); color: #7BE7A6; }
.form-estado.mal { background: rgba(126, 17, 22, .18); border: 1px solid rgba(228, 131, 138, .35); color: #E4838A; }

.form-legal {
  font-size: .82rem;
  color: var(--tenue);
  line-height: 1.55;
  margin-top: 1rem;
}
.form-legal a { color: var(--oro); text-decoration: underline; }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; margin-top: 1.2rem; }
.form-consent input { width: 18px; height: 18px; flex: none; margin-top: .2rem; accent-color: var(--oro); }
.form-consent label { font-size: .85rem; color: var(--suave); text-transform: none; letter-spacing: 0; font-weight: 400; }

/* --- Bloque CTA ---------------------------------------------------------- */

.cta {
  border: 1px solid var(--linea-2);
  border-radius: 20px;
  padding: clamp(2rem, 5vw, 3.2rem);
  background:
    radial-gradient(ellipse 80% 100% at 50% 0%, rgba(216, 169, 79, .14), transparent 70%),
    var(--tinta-2);
  text-align: center;
}
.cta h2 { margin-bottom: .9rem; }
.cta p { color: var(--suave); max-width: 54ch; margin: 0 auto 1.7rem; }
.cta .btn-grupo { justify-content: center; }

/* --- Migas de pan -------------------------------------------------------- */

.migas {
  font-size: .84rem;
  color: var(--tenue);
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--linea);
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; }
.migas a { color: var(--suave); }
.migas a:hover { color: var(--oro); }
.migas li + li::before { content: '/'; margin-right: .45rem; color: rgba(255, 255, 255, .18); }
.migas [aria-current] { color: var(--oro-claro); }

/* --- Artículo ------------------------------------------------------------ */

.articulo { max-width: 74ch; margin-inline: auto; }
.articulo-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  align-items: center;
  font-size: .84rem;
  color: var(--tenue);
  margin-bottom: 1.4rem;
}
.etiqueta-cat {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  background: rgba(216, 169, 79, .09);
  border: 1px solid var(--linea);
  border-radius: 5px;
  padding: .22rem .6rem;
}
.articulo h1 { margin-bottom: 1.2rem; text-transform: none; }
.articulo-cuerpo h2 {
  font-size: clamp(1.45rem, 3.2vw, 1.95rem);
  text-transform: none;
  margin: 2.6rem 0 .9rem;
  color: var(--oro-claro);
}
.articulo-cuerpo p { margin-bottom: 1.05rem; color: #C6CFDF; }
.articulo-cuerpo a { color: var(--oro-claro); text-decoration: underline; text-underline-offset: 3px; }
.articulo-cuerpo ul,
.articulo-cuerpo ol { margin: 0 0 1.3rem 1.25rem; display: flex; flex-direction: column; gap: .55rem; }
.articulo-cuerpo li { color: #C6CFDF; padding-left: .3rem; }
.articulo-cuerpo li::marker { color: var(--oro); font-weight: 700; }

.nota {
  border-left: 3px solid var(--oro);
  background: rgba(216, 169, 79, .07);
  border-radius: 0 11px 11px 0;
  padding: 1.15rem 1.3rem;
  margin: 2rem 0;
  color: #D6DEEC;
  font-size: .99rem;
}

/* --- Tarjeta de artículo ------------------------------------------------- */

.post {
  display: flex;
  flex-direction: column;
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: 1.5rem 1.4rem;
  transition: border-color .22s, transform .22s;
  height: 100%;
}
.post:hover { border-color: var(--linea-2); transform: translateY(-3px); }
.post h3 { margin: .85rem 0 .6rem; font-family: var(--cuerpo); font-size: 1.12rem; font-weight: 650; line-height: 1.35; }
.post p { color: var(--suave); font-size: .93rem; flex: 1; }
.post-pie { margin-top: 1.1rem; font-size: .85rem; color: var(--oro); font-weight: 600; }

/* --- Zonas --------------------------------------------------------------- */

.zonas-lista { display: grid; gap: .7rem; }
@media (min-width: 640px) { .zonas-lista { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .zonas-lista { grid-template-columns: repeat(3, 1fr); } }
.zona-enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--tinta-2);
  padding: 1rem 1.2rem;
  font-weight: 600;
  transition: border-color .2s, background .2s;
}
.zona-enlace:hover { border-color: var(--oro); background: rgba(216, 169, 79, .07); }
.zona-enlace span { color: var(--oro); font-size: 1.15rem; line-height: 1; }

.barrios { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.barrio {
  font-size: .84rem;
  color: var(--suave);
  border: 1px solid var(--linea);
  border-radius: 99px;
  padding: .32rem .8rem;
  background: rgba(255, 255, 255, .02);
}

/* --- Estado vacío -------------------------------------------------------- */

.vacio {
  border: 1px dashed var(--linea-2);
  border-radius: 18px;
  padding: clamp(2.2rem, 6vw, 3.4rem) 1.5rem;
  text-align: center;
  background: rgba(216, 169, 79, .035);
}
.vacio h3 { margin-bottom: .8rem; }
.vacio p { color: var(--suave); max-width: 50ch; margin: 0 auto 1.6rem; }

/* --- Pie ----------------------------------------------------------------- */

.pie {
  background: var(--tinta-2);
  border-top: 1px solid var(--linea);
  padding-block: 3.4rem 2rem;
  margin-top: 2rem;
}
.pie-rejilla { display: grid; gap: 2.2rem; }
@media (min-width: 760px) { .pie-rejilla { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.pie h4 {
  font-family: var(--display);
  font-size: .92rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: 1rem;
}
.pie ul { list-style: none; display: flex; flex-direction: column; gap: .58rem; }
.pie a { color: var(--suave); font-size: .93rem; }
.pie a:hover { color: var(--oro-claro); }
.pie-marca p { color: var(--tenue); font-size: .92rem; margin-top: .9rem; max-width: 34ch; }
.pie-redes { display: flex; gap: .6rem; margin-top: 1.2rem; }
.pie-redes a {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--linea);
  display: grid;
  place-items: center;
  color: var(--suave);
  transition: color .2s, border-color .2s, background .2s;
}
.pie-redes a:hover { color: var(--oro-claro); border-color: var(--oro); background: rgba(216, 169, 79, .08); }
.pie-redes svg { width: 19px; height: 19px; }
.pie-legal {
  margin-top: 2.6rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.4rem;
  justify-content: space-between;
  font-size: .84rem;
  color: var(--tenue);
}

/* --- Flotante de WhatsApp ------------------------------------------------ */

.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 80;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--verde);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  transition: transform .2s;
}
.wa-flotante:hover { transform: scale(1.07); }
.wa-flotante svg { width: 30px; height: 30px; fill: #04310F; }
@media (min-width: 760px) { .wa-flotante { right: 24px; bottom: 24px; } }

/* Barra fija en móvil: la conversión de este negocio pasa por el teléfono */
.barra-movil {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 85;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--linea);
  border-top: 1px solid var(--linea-2);
}
.barra-movil a {
  background: var(--tinta-2);
  padding: .95rem .6rem;
  text-align: center;
  font-size: .92rem;
  font-weight: 650;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
}
.barra-movil a:first-child { color: var(--oro-claro); }
.barra-movil a:last-child { color: var(--verde); }
.barra-movil svg { width: 17px; height: 17px; }
@media (min-width: 760px) { .barra-movil { display: none; } }
@media (max-width: 759px) {
  body { padding-bottom: 56px; }
  .wa-flotante { bottom: 70px; }
}

/* --- Panel interno de leads ---------------------------------------------- */

.panel-cab {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--linea);
}
.panel-cab .btn { padding: .7rem 1.1rem; font-size: .9rem; }
.panel-resumen {
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  text-transform: uppercase;
}

.lead {
  background: var(--tinta-2);
  border: 1px solid var(--linea);
  border-left: 3px solid var(--oro);
  border-radius: var(--radio);
  padding: 1.3rem 1.3rem 1.1rem;
  margin-bottom: 1rem;
}
.lead--hecho { border-left-color: rgba(255, 255, 255, .12); opacity: .62; }

.lead-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  margin-bottom: .6rem;
}
.lead-id { color: var(--oro); font-weight: 700; }
.lead-fecha { color: var(--tenue); }
.lead-marca {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--oro);
  background: rgba(216, 169, 79, .12);
  border-radius: 5px;
  padding: .25rem .55rem;
}
.lead-marca.hecho { color: var(--verde); background: rgba(37, 211, 102, .12); }

.lead h3 { font-family: var(--cuerpo); font-size: 1.15rem; font-weight: 650; margin-bottom: .3rem; }
.lead-coche { color: var(--oro-claro); font-size: .95rem; margin-bottom: .4rem; }
.lead-dato { color: var(--suave); font-size: .9rem; }
.lead-msg { color: var(--suave); font-size: .93rem; font-style: italic; margin-top: .5rem; }

.lead-acciones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.1rem; }
.lead-acciones .btn { padding: .65rem 1rem; font-size: .88rem; min-height: 44px; }
.lead-borrar { color: #E4838A; border-color: rgba(228, 131, 138, .3); }
.lead-borrar:hover { border-color: #E4838A; background: rgba(126, 17, 22, .15); }

/* --- Banner de cookies --------------------------------------------------- */

.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 95;
  padding: 1rem;
  background: rgba(5, 11, 24, .97);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--linea-2);
}
.cookies-caja {
  max-width: var(--ancho);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.cookies h2 {
  font-size: 1.15rem;
  margin-bottom: .4rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.cookies p { color: var(--suave); font-size: .92rem; line-height: 1.55; max-width: 78ch; }
.cookies a { color: var(--oro-claro); text-decoration: underline; }

/* Los dos botones miden lo mismo: rechazar no puede costar más que aceptar. */
.cookies-botones { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.cookies-botones .btn { padding: .9rem 1rem; min-height: 48px; }

@media (min-width: 760px) {
  .cookies-caja { flex-direction: row; align-items: center; justify-content: space-between; gap: 2rem; }
  /* Ancho idéntico también en escritorio: si "Rechazar" fuese más pequeño que
     "Aceptar", el banner dejaría de ser neutral. */
  .cookies-botones { grid-template-columns: repeat(2, minmax(150px, 1fr)); flex: none; }
  .cookies-botones .btn { padding: .9rem 1.6rem; }
}
/* Que no tape la barra fija de llamar/WhatsApp del móvil. */
@media (max-width: 759px) { .cookies { bottom: 56px; } }

/* --- Texto legal --------------------------------------------------------- */

.legal { max-width: 76ch; margin-inline: auto; }
.legal h2 { font-size: 1.5rem; text-transform: none; margin: 2.2rem 0 .8rem; color: var(--oro-claro); }
.legal h3 { font-size: 1.12rem; margin: 1.6rem 0 .6rem; }
.legal p, .legal li { color: var(--suave); font-size: .96rem; margin-bottom: .8rem; }
.legal ul, .legal ol { margin-left: 1.2rem; }
.legal a { color: var(--oro-claro); text-decoration: underline; }

/* --- Utilidades ---------------------------------------------------------- */

.centrado { text-align: center; }
.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.salto-contenido {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--oro); color: var(--tinta); padding: .8rem 1.2rem; font-weight: 650;
}
.salto-contenido:focus { left: 8px; top: 8px; }

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