/* Cabecera y pie de Patinetes Legales — se cargan en toda la web.
   Colores literales (no dependen de las variables de la landing). */

/* ===== MODO CLARO PARA TODAS LAS PAGINAS =====
   La portada (#plh) y la cabecera/pie llevan sus propios colores fijados
   con selectores mas especificos, asi que esto NO les afecta.
   Usamos "html body" para ganar a la cascada del tema aunque este cacheada. */
html body {
  background-color: #ffffff;
  color: #16181d;
}
html body h1, html body h2, html body h3,
html body h4, html body h5, html body h6 {
  color: #16181d;
}
html body a {
  color: #0e8048;
}
/* La portada (pagina de inicio / plantilla de portada) va sobre lienzo oscuro,
   para que no asomen franjas blancas entre cabecera, contenido y pie. */
html body.home,
html body.page-template-page-landing {
  background-color: #08090c;
}

.plh-nav *, .plh-foot * { box-sizing: border-box; }

/* ===================== CABECERA ===================== */
/* El contenedor <header> del tema es quien se ancla en toda la web. */
header.wp-block-template-part {
  position: sticky; top: 0; z-index: 1000;
}
.plh-nav {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(8,9,12,.72);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.plh-nav-inner { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 62px; display: flex; align-items: center; gap: 24px; }
.plh-logo { display: inline-flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; color: #f4f6fa; text-decoration: none; }
.plh-logo-mark { width: 27px; height: 27px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, #34d27e 0%, #27b86b 100%); box-shadow: 0 4px 14px rgba(52,210,126,.22); flex-shrink: 0; }
.plh-logo-mark svg { width: 16px; height: 16px; color: #07150d; }
.plh-logo b { font-weight: 600; }
.plh-logo span { color: #727885; font-weight: 500; }
.plh-nav-links { display: flex; align-items: center; gap: 28px; margin-left: 14px; }
.plh-nav-links a { font-size: 14px; color: #a7adba; font-weight: 500; transition: color .15s; text-decoration: none; }
.plh-nav-links a:hover { color: #f4f6fa; }
.plh-nav-cta { margin-left: auto; }
.plh-nav-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: #34d27e; color: #07150d; font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 980px; text-decoration: none;
  transition: transform .12s, box-shadow .2s, background .2s;
  box-shadow: 0 6px 18px rgba(52,210,126,.22);
}
.plh-nav-btn:hover { background: #45dd8a; box-shadow: 0 8px 24px rgba(52,210,126,.22); }
.plh-nav-btn:active { transform: scale(.97); }
.plh-nav-btn svg { width: 15px; height: 15px; }

/* --- Boton hamburguesa y menu movil --- */
.plh-nav-toggle {
  display: none;
  margin-left: 10px;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; color: #f4f6fa; cursor: pointer;
  flex-shrink: 0; padding: 0;
}
.plh-nav-toggle:hover { background: rgba(255,255,255,.06); }
.plh-nav-toggle svg { width: 22px; height: 22px; }
.plh-mobile-menu {
  display: none;
  flex-direction: column;
  padding: 6px 24px 14px;
  background: rgba(8,9,12,.97);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.plh-mobile-menu.is-open { display: flex; }
.plh-mobile-menu a {
  padding: 13px 2px; font-size: 16px; font-weight: 500;
  color: #d6dae2; text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.plh-mobile-menu a:last-child { border-bottom: 0; }
.plh-mobile-menu a:hover { color: #f4f6fa; }

@media (max-width: 820px) {
  .plh-nav-links { display: none; }
  .plh-nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .plh-nav-btn-text { display: none; }
  .plh-nav-btn { padding: 9px 12px; }
  .plh-nav-inner { gap: 10px; padding: 0 16px; }
  .plh-mobile-menu { padding-left: 16px; padding-right: 16px; }
}

/* ===================== PIE ===================== */
.plh-foot { background: #0d0f14; border-top: 1px solid rgba(255,255,255,.08); padding: 56px 0 48px; }
.plh-foot-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
.plh-foot-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 32px; margin-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }
.plh-foot-claim { font-size: 17px; color: #f4f6fa; font-weight: 500; letter-spacing: -.01em; max-width: 420px; }
.plh-foot p { font-size: 13px; color: #727885; line-height: 1.75; max-width: 720px; }
.plh-foot a { color: #a7adba; text-decoration: underline; text-underline-offset: 2px; }
.plh-foot a:hover { color: #f4f6fa; }
@media (max-width: 700px) { .plh-foot-top { flex-direction: column; align-items: flex-start; } }