/* ============================================================
   JM PROP — DISEÑO B · "Tema lateral" (v3 · variante CLARA)
   ------------------------------------------------------------
   Se carga DESPUÉS de style.css cuando el tema activo es
   "lateral" (ver jm_tema() en bootstrap.php). Todo scopeado a
   body.tema-lateral: no toca el diseño clásico.

   Perfil gráfico v3 — mucho menos negro:
   - Superficies claras: barra lateral blanca, botones blancos,
     panel de acceso blanco, servicios y QR sobre fondo hueso.
     El negro queda solo como chip detrás del logo (para que el
     neón siga brillando) y en los textos.
   - UNA sola tipografía en todo el sitio: Inter (corporativa y de
     lectura cómoda; reemplazó a Space Grotesk).
   - Acento: lima del logo + oliva para textos de marca.
   - Hover sin movimiento: borde y resplandor lima.
   - Escritorio (≥1080px): barra lateral fija, orden
     logo → menú → acceso (panel flotante al costado) → leyenda.
     El pie tradicional no se muestra ahí.

   Ver: ?tema=lateral · Volver: ?tema=clasico
   ============================================================ */

/* ============================================================
   PALETA DEL DISEÑO B — editá el # de cada color y cambia en toda
   la demo lateral de una vez (pisa a los de style.css).
   ============================================================ */
body.tema-lateral{
  --ink:#0E100B;        /* texto principal: un punto más negro, mejor lectura */
  --navy:#2A2E24;       /* verde carbón medio: fondos secundarios */
  --navy-dark:#101210;  /* casi negro: sidebar, barra móvil, pie, bandas del modal */
  --gold:#D9F53F;       /* lima del logo: destacados, acentos, hover */
  --gold-light:#E9FF6B; /* lima claro: hover de los botones lima */
  --gold-deep:#66700F;  /* oliva: eyebrows y textos de marca sobre fondo claro */
  --cream:#F8F7F2;      /* fondo general: hueso más atenuado, más claro */
  --paper:#FFFFFF;      /* fondo de tarjetas y formularios */
  --sage:#7C8A6A;       /* verde salvia: detalles secundarios */
  --line:#E3E0D2;       /* bordes y separadores finitos */
  --muted:#71755F;      /* gris verdoso: textos secundarios, etiquetas de
                           formularios (NOMBRE DE LA INMOBILIARIA...), bajadas */
  --radius:18px;        /* redondeo general de tarjetas */

  font-family:'Inter', system-ui, sans-serif;
  background:var(--cream);
}

body.tema-lateral *:not(i){
  font-family:'Inter', system-ui, sans-serif;
}
body.tema-lateral h1,
body.tema-lateral h2,
body.tema-lateral h3{font-weight:700; letter-spacing:-.01em;}
body.tema-lateral .eyebrow{font-weight:700; letter-spacing:.2em; font-size:.66rem;}
body.tema-lateral .prop-price{font-weight:700; letter-spacing:0;}

/* ============================================================
   HOVER SIN MOVIMIENTO
   ============================================================ */
body.tema-lateral .cta-btn:hover,
body.tema-lateral .cta-btn:focus-visible,
body.tema-lateral .cta-btn:active,
body.tema-lateral .slide-cta:hover,
body.tema-lateral .access-registro-btn:hover{
  transform:none;
}

/* ============================================================
   CABECERA: FONDO NEGRO (el sidebar y la barra móvil quedan carbón;
   el resto del sitio, claro)
   ============================================================ */
body.tema-lateral .site-header{
  background:var(--navy-dark);
  border-bottom:1px solid rgba(217,245,63,.14);
}
body.tema-lateral .main-nav a{
  border-radius:12px;
  /* Los accesos van en mayúsculas, igual que los botones grandes de
     la portada. Términos de uso queda como está. */
  text-transform:uppercase;
  font-weight:600;
}
body.tema-lateral .main-nav a.nav-destacado{color:var(--navy-dark);}

/* ============================================================
   MODAL DE ACCEDER: REDISEÑO COMPLETO
   Otro lenguaje, no solo otros colores: tarjeta hueso con borde
   tinta y sombra dura lima (desplazada, sin difuminar), títulos
   como bandas carbón, opciones como fichas con borde propio y
   los registros como botones carbón que se encienden en lima.
   El lima queda como acento, no como fondo. Vale para móvil y
   escritorio; la posición la maneja cada breakpoint como siempre.
   ============================================================ */
body.tema-lateral .access-dropdown{
  background:#FBFAF2;
  border:2px solid var(--navy-dark);
  border-radius:18px;
  box-shadow:0 22px 55px rgba(20,22,12,.3);
}

/* Títulos como bandas carbón con texto lima */
body.tema-lateral .access-dropdown .access-head{
  background:var(--navy-dark);
  border-bottom:none;
  border-radius:12px;
  padding:.6rem .75rem .65rem;
  margin-bottom:.55rem;
}
body.tema-lateral .access-dropdown .access-head{text-align:center;}
body.tema-lateral .access-dropdown .access-head strong{color:var(--gold); font-size:1.15rem;}
body.tema-lateral .access-dropdown .access-head span{color:rgba(255,255,255,.72); font-size:.92rem; margin-top:.25rem;}

/* Opciones de ingreso: fichas con borde propio */
body.tema-lateral .access-item{
  background:#fff;
  border:1.5px solid rgba(16,18,16,.8);
  border-radius:12px;
  margin-bottom:.4rem;
  color:var(--navy-dark);
}
body.tema-lateral .access-item:hover{
  background:var(--cream);
  border-color:var(--navy-dark);
}
/* Fichas perfectamente simétricas: grilla de tres columnas
   (ícono | texto centrado | flecha). Las columnas laterales miden
   lo mismo, así el texto queda centrado idéntico en TODAS las
   fichas, con los íconos alineados en la misma vertical. */
body.tema-lateral .access-dropdown .access-item,
body.tema-lateral .access-dropdown .access-registro-btn{
  display:grid;
  grid-template-columns:46px 1fr 46px;
  align-items:center;
  text-align:center;
  gap:0;
  padding-left:.55rem; padding-right:.55rem;
}
body.tema-lateral .access-dropdown .access-item .access-ico,
body.tema-lateral .access-dropdown .access-registro-btn .access-ico{
  grid-column:1; justify-self:start;
}
body.tema-lateral .access-dropdown .access-item > span,
body.tema-lateral .access-dropdown .access-registro-btn > span{grid-column:2;}
body.tema-lateral .access-dropdown .access-flecha{display:none;}

body.tema-lateral .access-item strong{font-size:1.02rem; text-transform:uppercase;}
body.tema-lateral .access-item small{color:rgba(16,18,6,.68); font-size:.88rem;}
body.tema-lateral .salto-lateral{display:inline;}
body.tema-lateral .access-item .access-ico{
  background:var(--cream);
  border-color:rgba(16,18,16,.35);
}

body.tema-lateral .access-foot{
  border-top:2px dashed rgba(16,18,16,.28);
  margin-top:.7rem;
}

/* Registro: mismas fichas blancas que las opciones de arriba;
   al pasar, un claro suave (sin amarillo) */
body.tema-lateral .access-registro-btn{
  background:#fff;
  border:1.5px solid rgba(16,18,16,.8);
  border-radius:12px;
}
body.tema-lateral .access-registro-btn strong{color:var(--navy-dark); font-size:1.02rem; text-transform:uppercase;}
body.tema-lateral .access-registro-btn small{color:rgba(16,18,6,.68); font-size:.88rem;}
body.tema-lateral .access-registro-btn .access-ico{
  background:var(--cream);
  border-color:rgba(16,18,16,.35);
}
body.tema-lateral .access-registro-btn:hover{
  background:var(--cream);
  border-color:var(--navy-dark);
  box-shadow:none;
}

/* ============================================================
   ESCRITORIO: BARRA LATERAL BLANCA
   Orden: logo → menú → acceso → leyenda (pegada abajo).
   ============================================================ */
@media (min-width:1080px){

  body.tema-lateral{padding-left:292px;}

  body.tema-lateral .site-header{
    position:fixed; top:0; left:0; bottom:0;
    width:292px;
    border-bottom:none;
    border-right:1px solid rgba(217,245,63,.16);
    overflow-y:auto;
    /* Sin barra de desplazamiento a la vista: si en una pantalla muy
       baja algo no entra, se puede scrollear igual (rueda/dedo) pero
       la barra no se dibuja. */
    scrollbar-width:none;
  }
  body.tema-lateral .site-header::-webkit-scrollbar{display:none;}

  body.tema-lateral .header-inner{
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    min-height:100%;
    max-width:none;
    /* Compacto a propósito: la barra completa (logo, menú, botones,
       redes y leyenda) tiene que entrar en el alto de una pantalla
       común SIN scroll interno. */
    padding:.9rem .9rem .8rem;
    gap:.7rem;
  }

  body.tema-lateral .logo{order:1; justify-content:center;}
  body.tema-lateral .logo-img{height:72px;}

  /* --- Menú vertical --- */
  body.tema-lateral .main-nav{
    order:2;
    position:static; transform:none;
    opacity:1; visibility:visible; pointer-events:auto;
    flex-direction:column;
    background:transparent; border:none; border-radius:0;
    padding:0; gap:.12rem;
    overflow:visible;
  }
  /* El link de Términos, igual que cualquier otro ítem (en el clásico
     va más chico y apagado; acá no) */
  body.tema-lateral .main-nav .nav-terminos{
    font-size:1rem;
    opacity:1;
    font-weight:inherit;
  }
  body.tema-lateral .main-nav a{
    justify-content:flex-start;
    text-align:left;
    white-space:normal;
    font-size:1rem;
    line-height:1.25;
    min-height:0;
    padding:.44rem .8rem;
    border:none;
    border-left:3px solid transparent;
    border-radius:0 12px 12px 0;
    color:rgba(255,255,255,.85);
    background:transparent;
  }
  body.tema-lateral .main-nav a:hover,
  body.tema-lateral .main-nav a.active-link{
    border-left-color:var(--gold);
    background:rgba(217,245,63,.12);
    color:#fff;
  }
  body.tema-lateral .main-nav a.nav-destacado{
    margin-top:.3rem;
    border:none;
    border-radius:14px;
    background:var(--gold);
    color:var(--navy-dark);
    justify-content:center;
    text-align:center;
    font-weight:700;
    padding:.58rem .9rem;
  }
  body.tema-lateral .main-nav a.nav-destacado:hover,
  body.tema-lateral .main-nav a.nav-destacado.active-link{
    background:var(--gold-light);
    color:var(--navy-dark);
    box-shadow:0 0 0 3px rgba(217,245,63,.35);
  }

  /* --- Acceso: entre el menú y la leyenda --- */
  body.tema-lateral .header-tools{
    order:3;
    margin-top:.15rem;
    flex-direction:column;
    align-items:stretch;
  }
  body.tema-lateral .access-menu{width:100%; position:static;}
  body.tema-lateral .access-trigger{
    width:100%;
    justify-content:center;
    padding:.5rem .8rem;
    border-radius:12px;
    font-size:.92rem;
  }

  /* Panel de acceso: flota al costado de la barra, a media altura,
     BLANCO como el resto (misma funcionalidad de siempre). */
  body.tema-lateral .access-dropdown{
    position:fixed;
    left:304px; right:auto;
    top:50%; bottom:auto;
    width:344px;
    max-height:calc(100vh - 2rem);
    overflow-y:auto;
    transform:translateY(-50%) translateX(-6px);
    padding:.55rem;
  }
  body.tema-lateral .access-menu.open .access-dropdown{
    transform:translateY(-50%) translateX(0);
  }

  /* Contacto: mismo ancho, alto y forma que ACCEDER, abajo del acceso */
  body.tema-lateral .contacto-btn{
    width:100%;
    margin-top:.35rem;
    padding:.5rem .8rem;
    border-radius:12px;
    font-size:.92rem;
    justify-content:center;
  }
  /* Los dos botones de la barra, exactamente con la misma altura */
  body.tema-lateral .access-trigger,
  body.tema-lateral .contacto-btn{min-height:42px; box-sizing:border-box;}

  /* --- Redes sociales, arriba de la leyenda, en sus colores reales --- */
  body.tema-lateral .sidebar-redes{
    display:flex;
    order:4;
    margin-top:auto;
    padding-top:.6rem;
    justify-content:center;
    gap:.55rem;
  }
  body.tema-lateral .sidebar-redes a,
  body.tema-lateral .sidebar-redes span{
    width:33px; height:33px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:#fff;
    font-size:1rem;
    transition:box-shadow .15s ease;
  }
  body.tema-lateral .sidebar-redes a:hover{box-shadow:0 0 0 3px rgba(217,245,63,.35);}
  body.tema-lateral .sidebar-redes .red-mail i{color:#EA4335;}
  body.tema-lateral .sidebar-redes .red-youtube i{color:#FF0000;}
  body.tema-lateral .sidebar-redes .red-instagram i{
    background:radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%);
    -webkit-background-clip:text; background-clip:text;
    color:transparent;
  }
  body.tema-lateral .sidebar-redes .red-facebook i{color:#1877F2;}
  body.tema-lateral .sidebar-redes .is-pendiente{opacity:.4; cursor:default;}

  /* La leyenda queda pegada a las redes (las redes empujan al fondo) */
  body.tema-lateral .sidebar-leyenda{margin-top:0 !important;}

  /* --- Leyenda del pie, pegada abajo de la barra --- */
  body.tema-lateral .sidebar-leyenda{
    display:block;
    order:4;
    margin-top:auto;
    padding-top:.65rem;
    border-top:1px solid rgba(255,255,255,.12);
    font-size:.68rem;
    line-height:1.4;
    text-align:center;
    color:var(--gold);
  }

  /* --- Pantallas bajas: la barra se comprime en dos escalones para
         seguir entrando completa sin scroll interno --- */
  @media (max-height:800px){
    body.tema-lateral .header-inner{padding:.7rem .8rem .6rem; gap:.5rem;}
    body.tema-lateral .logo-img{height:58px;}
    body.tema-lateral .main-nav a{font-size:.93rem; padding:.34rem .75rem;}
    body.tema-lateral .main-nav a.nav-destacado{padding:.48rem .8rem;}
    body.tema-lateral .access-trigger,
    body.tema-lateral .contacto-btn{min-height:38px; padding:.42rem .7rem;}
    body.tema-lateral .sidebar-redes a,
    body.tema-lateral .sidebar-redes span{width:29px; height:29px; font-size:.9rem;}
    body.tema-lateral .sidebar-leyenda{font-size:.62rem; padding-top:.5rem;}
  }
  @media (max-height:700px){
    body.tema-lateral .logo-img{height:46px;}
    body.tema-lateral .main-nav a{font-size:.86rem; padding:.26rem .7rem;}
    body.tema-lateral .main-nav a.nav-destacado{padding:.4rem .7rem; margin-top:.2rem;}
    body.tema-lateral .access-trigger,
    body.tema-lateral .contacto-btn{min-height:34px; font-size:.84rem;}
    /* En pantallas muy bajas la leyenda es lo único que se resigna */
    body.tema-lateral .sidebar-leyenda{display:none;}
    body.tema-lateral .sidebar-redes{padding-bottom:.2rem;}
  }

  /* El pie tradicional no se muestra en este diseño */
  body.tema-lateral footer{display:none;}

  /* --- Filtros FIJOS, flotando centrados en la pantalla ---
     El panel no acompaña el scroll: queda clavado a media altura de
     la ventana, con el mismo aire arriba que abajo. La grilla del
     listado le sigue reservando su columna de 260px, así que nada
     queda tapado. Si la pantalla es más baja que el panel, el panel
     scrollea por dentro pero SIN barra visible. */
  /* --- Filtros flotantes, centrados en la pantalla ---
     Pegajosos DENTRO de su columna: mientras recorrés el listado el
     panel te acompaña clavado a media altura de la ventana, con el
     mismo aire arriba que abajo — pero nunca se sale de su sección,
     así que jamás pisa el slider ni los botones de arriba. Si la
     pantalla es más baja que el panel, scrollea por dentro sin
     barra visible. */
  body.tema-lateral .listing-section .filters{
    position:sticky;
    top:max(16px, calc((100vh - min(660px, 100vh - 32px)) / 2));
    max-height:calc(100vh - 32px);
    overflow-y:auto;
    scrollbar-width:none;
    align-self:start;
  }
  body.tema-lateral .listing-section .filters::-webkit-scrollbar{display:none;}
}

/* ============================================================
   CABECERAS DE SECCIONES INTERIORES
   Altas (como en el clásico: hasta ~470px) para que las fotos y
   los perfiles personalizados de las inmobiliarias luzcan.
   ============================================================ */
body.tema-lateral .page-hero h1{font-size:clamp(1.45rem, 4.2vw, 2.1rem);}
body.tema-lateral .page-hero p{font-size:clamp(.9rem, 2.5vw, 1rem); margin-top:.4rem;}
body.tema-lateral .page-hero .eyebrow{font-size:.74rem;}

/* ============================================================
   BOTONERA DEL HOME (CTA)
   Reposo: FONDO NEGRO con letra e íconos AMARILLOS (como el
   logo). Hover: exactamente al revés — fondo amarillo con letra
   e íconos negros. Sin movimiento.
   En móvil van DOS botones por fila (ver .cta-grid abajo).
   ============================================================ */
body.tema-lateral .cta-btn{
  background:var(--navy-dark);
  border-radius:20px;
  border:1.5px solid rgba(217,245,63,.4);
  box-shadow:0 8px 20px rgba(15,16,12,.2);
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
body.tema-lateral .cta-btn::before{display:none;}

/* Íconos amarillos: los SVG por trazo, los PNG blancos con un filtro
   que los lleva al lima del logo. */
body.tema-lateral .cta-ico{transition:filter .2s ease;}
body.tema-lateral .cta-ico svg{stroke:var(--gold);}
body.tema-lateral .cta-ico img{
  filter:brightness(0) invert(88%) sepia(59%) saturate(1300%) hue-rotate(15deg) brightness(104%) contrast(102%);
}
body.tema-lateral .cta-label{
  color:var(--gold);
  font-weight:700;
  letter-spacing:.04em;
  transition:color .2s ease;
}
body.tema-lateral .cta-btn:hover,
body.tema-lateral .cta-btn:focus-visible{
  background:var(--gold);
  border-color:var(--navy-dark);
  box-shadow:0 0 0 3px rgba(217,245,63,.35), 0 10px 24px rgba(45,54,15,.25);
}
body.tema-lateral .cta-btn:hover .cta-ico svg,
body.tema-lateral .cta-btn:focus-visible .cta-ico svg{stroke:var(--navy-dark);}
body.tema-lateral .cta-btn:hover .cta-ico img,
body.tema-lateral .cta-btn:focus-visible .cta-ico img{filter:brightness(0);}
body.tema-lateral .cta-btn:hover .cta-label,
body.tema-lateral .cta-btn:focus-visible .cta-label{color:var(--navy-dark);}

/* Móvil: dos botones por fila (en vez de uno debajo del otro) */
body.tema-lateral .cta-grid{grid-template-columns:1fr 1fr; gap:.6rem;}

/* Móvil: el orden de la portada pasa a ser menú → botones → slider.
   El body se vuelve columna flexible y se adelantan esas tres piezas
   con órdenes negativos; el resto sigue en su orden natural. */
@media (max-width:639px){
  body.tema-lateral{display:flex; flex-direction:column;}
  body.tema-lateral .site-header{order:-3;}
  body.tema-lateral .cta-section{order:-2; width:100%;}
  body.tema-lateral .hero-slider{order:-1;}
}
@media (max-width:639px){
  body.tema-lateral .cta-btn{padding:.9rem .5rem; min-height:0;}
  body.tema-lateral .cta-ico{height:30px;}
  body.tema-lateral .cta-ico svg{height:26px;}
  body.tema-lateral .cta-ico img{height:30px;}
  body.tema-lateral .cta-label{font-size:.82rem;}
}
@media (min-width:860px){
  body.tema-lateral .cta-grid{grid-template-columns:repeat(3,1fr); gap:.9rem;}
}

/* ============================================================
   SLIDER
   ============================================================ */
body.tema-lateral .slide-cta{
  background:var(--gold);
  color:var(--navy-dark);
  border-radius:999px;
  font-weight:700;
  transition:background .16s ease, box-shadow .16s ease;
}
body.tema-lateral .slide-cta:hover{
  background:var(--gold-light);
  filter:none;
  box-shadow:0 0 0 4px rgba(217,245,63,.32);
}
body.tema-lateral .slide-arrow{
  border-radius:12px;
  background:rgba(255,255,255,.85);
  border-color:rgba(255,255,255,.9);
  color:var(--ink);
}
body.tema-lateral .slide-arrow:hover{
  background:#fff;
  border-color:var(--gold-deep);
}

/* ============================================================
   SERVICIOS: SECCIÓN Y PÁGINA CLARAS (antes bloques negros)
   ============================================================ */
body.tema-lateral .services-page-section{background:var(--cream);}
body.tema-lateral .marquee-services{
  background:var(--cream);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
body.tema-lateral .marquee-services .section-head h2{color:var(--ink);}
body.tema-lateral .marquee-services .section-head .eyebrow{color:var(--gold-deep);}
body.tema-lateral .service-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:16px;
}
body.tema-lateral .service-media{background:var(--cream);}
body.tema-lateral .service-body h3{color:var(--ink);}
body.tema-lateral .service-by{color:var(--muted);}

/* ============================================================
   TARJETAS, CHIPS Y BOTONES
   ============================================================ */
/* Tarjetas de propiedades y servicios: textos más grandes */
body.tema-lateral .prop-body h3{font-size:1rem; min-height:2.7em;}
body.tema-lateral .prop-loc{font-size:.84rem;}
body.tema-lateral .prop-price{font-size:1.02rem;}
body.tema-lateral .prop-pub{font-size:.82rem;}
body.tema-lateral .service-body h3{font-size:1rem; min-height:2.7em;}
body.tema-lateral .service-by{font-size:.84rem;}
@media (min-width:860px){
  body.tema-lateral .prop-body h3{font-size:.98rem;}
  body.tema-lateral .prop-loc{font-size:.82rem;}
  body.tema-lateral .prop-price{font-size:1rem;}
}

/* Filtros: botones (chips) y panel flotante con letra más grande */
body.tema-lateral .type-chip-row .type-chip{font-size:.9rem; padding:.55rem .9rem;}
body.tema-lateral .filter-group label{font-size:.82rem;}
body.tema-lateral .filter-group select,
body.tema-lateral .filter-group input{font-size:.95rem;}
body.tema-lateral .filters .apply-btn{font-size:.95rem;}
body.tema-lateral .filters-toggle{font-size:.95rem;}
body.tema-lateral .search-row input,
body.tema-lateral .search-box input{font-size:.95rem;}
body.tema-lateral .results-count{font-size:.9rem;}

body.tema-lateral .prop-card{border-radius:16px;}
body.tema-lateral .prop-card:hover,
body.tema-lateral .service-card:hover{
  border-color:var(--gold-deep);
  box-shadow:0 0 0 3px rgba(217,245,63,.28);
}
body.tema-lateral .type-chip{border-radius:999px;}
body.tema-lateral .type-chip.active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--ink);
}
body.tema-lateral .filters{border-radius:16px;}
body.tema-lateral .load-more{border-radius:999px;}
body.tema-lateral .load-more:hover{
  background:rgba(217,245,63,.2);
  color:var(--ink);
  box-shadow:0 0 0 3px rgba(217,245,63,.3);
}

/* ============================================================
   BLOQUE QR: TARJETA CLARA
   ============================================================ */
body.tema-lateral .qr-card{
  background:var(--paper);
  color:var(--ink);
  border:2px solid #C9C29B;
}
body.tema-lateral .qr-codigo{
  background:var(--cream);
  border:1px solid var(--line);
}
body.tema-lateral .qr-texto .eyebrow{color:var(--gold-deep);}
body.tema-lateral .qr-texto h2{color:var(--ink);}
body.tema-lateral .qr-texto p{color:var(--muted);}
body.tema-lateral .qr-btn{border-radius:999px;}
body.tema-lateral .qr-btn:hover{
  filter:none;
  box-shadow:0 0 0 4px rgba(217,245,63,.3);
}
body.tema-lateral .qr-btn--ghost{
  border-color:var(--line);
  color:var(--ink);
}
body.tema-lateral .qr-btn--ghost:hover{
  background:rgba(217,245,63,.16);
  border-color:var(--gold-deep);
}

/* ============================================================
   PIE (solo móvil/tablet): CLARO
   ============================================================ */
body.tema-lateral footer{
  background:var(--navy-dark);
  border-top:1px solid rgba(217,245,63,.16);
}