/*
Theme Name: Zona de Bajas Emisiones
Theme URI: https://www.zonadebajasemisiones.com
Author: Zona de Bajas Emisiones
Description: Tema a medida para zonadebajasemisiones.com. Fichas de ZBE por ciudad, comprobador de etiqueta ambiental y contenido informativo, optimizado para SEO y monetizado con Google AdSense. Sistema de diseño Expressive (IBM Plex Mono, colores vivos, tarjetas con sombra dura).
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: zbe
*/

:root{
  --primary:#DB2777; --primary-ink:#FFFFFF; --primary-bg:#FBE0EC;
  --secondary:#2563EB; --secondary-tx:#1E40AF; --secondary-bg:#DBE7FE;
  --success:#16A34A; --success-tx:#15803D; --success-bg:#DCFCE3;
  --warning:#D97706; --warning-tx:#92400E; --warning-bg:#FEF1D6;
  --danger:#DC2626; --danger-tx:#B91C1C; --danger-bg:#FDE1E1;
  --surface:#FFFFFF; --text:#111827; --text-soft:#4B5262; --text-faint:#6B7280;
  --line:#111827;
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px; --sp-32:32px;
}
*{box-sizing:border-box; line-height:1.5;}
button, input, select, textarea{ font-family:inherit; line-height:inherit; }
html{scroll-behavior:smooth; background:#FFFFFF; color-scheme:light;}
body{
  margin:0; background:#FFFFFF; color:var(--text);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{ color:inherit; }
img{ max-width:100%; height:auto; display:block; }
.wrap{ max-width:900px; margin:0 auto; padding:0 24px; }
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff;
  padding:12px 20px; z-index:100; font-weight:700; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* ---- utility bar / site header ---- */
.site-header{ border-bottom:3px solid var(--line); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; min-height:64px; padding-top:var(--sp-12); padding-bottom:var(--sp-12); font-size:12.5px; flex-wrap:wrap; gap:12px; }
.site-logo{ font-weight:800; font-size:16px; text-decoration:none; display:flex; align-items:center; gap:8px; }
.site-logo .dot{ width:10px; height:10px; border-radius:50%; background:var(--primary); display:inline-block; }
.main-nav ul{ list-style:none; display:flex; gap:20px; margin:0; padding:0; flex-wrap:wrap; }
.main-nav a{ text-decoration:none; color:var(--text-soft); font-weight:600; font-size:12.5px; transition:color .15s ease; }
.main-nav a:hover, .main-nav a[aria-current="page"]{ color:var(--primary); }

.main-nav li{ position:relative; }
.main-nav > ul > li > a{ text-transform:uppercase; letter-spacing:.04em; }
.main-nav .menu-item-has-children > a::after{ content:' ▾'; font-size:10px; }
.main-nav .sub-menu{
  display:none; position:absolute; top:100%; right:0; margin-top:0; padding-top:12px;
  background:transparent; z-index:20; flex-direction:column; gap:0; min-width:200px;
}
.main-nav .sub-menu::before{
  content:''; position:absolute; top:0; left:0; right:0; bottom:0;
  background:var(--surface); border:3px solid var(--line); border-radius:10px;
  box-shadow:4px 4px 0 var(--line); margin-top:12px; z-index:-1;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children.is-open > .sub-menu{ display:flex; }
.main-nav .sub-menu li{ width:100%; padding:0 8px; }
.main-nav .sub-menu li:first-child{ padding-top:8px; }
.main-nav .sub-menu li:last-child{ padding-bottom:8px; }
.main-nav .sub-menu a{ display:block; padding:9px 12px; border-radius:6px; font-size:12.5px; }
.main-nav .sub-menu a:hover{ background:var(--secondary-bg); color:var(--secondary-tx); }
.main-nav .sub-menu li:last-child a{ border-top:1px solid var(--line); margin-top:6px; padding-top:12px; }
.breadcrumbs{ font-size:12.5px; color:var(--text-soft); }
.breadcrumbs a{ text-decoration:none; color:var(--text-soft); font-weight:500; }
.breadcrumbs a:hover{ color:var(--primary); }
.breadcrumbs span{ margin:0 8px; color:#D1D5DB; }
.updated-badge{ font-size:12.5px; color:var(--text-faint); font-weight:500; }

/* ---- hero block ---- */
.hero{ padding:56px 0 40px; }
.hero-block{
  background:var(--primary); color:var(--primary-ink);
  border:3px solid var(--line); border-radius:16px;
  padding:40px 36px; box-shadow:8px 8px 0 var(--line);
}
.hero h1{ font-size:clamp(32px,5.5vw,50px); line-height:1.15; font-weight:800; letter-spacing:-0.01em; margin:0 0 var(--sp-16); text-wrap:balance; font-family:inherit; }
.hero p{ font-size:16px; max-width:60ch; opacity:.94; font-weight:400; margin:0; }

/* ---- quick facts strip ---- */
.facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-12); margin-top:-24px; padding:0 8px; position:relative; z-index:2; }
.fact{ background:var(--surface); border:3px solid var(--line); border-radius:12px; padding:var(--sp-16); box-shadow:4px 4px 0 var(--line); }
.fact:nth-child(2){ transform:translateY(6px); }
.fact:nth-child(4){ transform:translateY(-4px); }
.fact .k{ font-size:12.5px; text-transform:uppercase; font-weight:700; letter-spacing:.06em; color:var(--text-faint); margin-bottom:var(--sp-8); }
.fact .v{ font-size:16px; font-weight:700; }
.fact.f-danger{ background:var(--danger-bg); }
.fact.f-danger .k, .fact.f-danger .v{ color:var(--danger-tx); }

/* ---- generic section ---- */
.zbe-section{ padding-top:64px; padding-bottom:48px; }
.zbe-section > .eyebrow{
  display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
  color:var(--surface); background:var(--text); padding:4px 12px; border-radius:6px; margin-bottom:var(--sp-16);
}
.zbe-section h2{ font-size:clamp(26px,3.4vw,36px); font-weight:800; letter-spacing:-0.01em; margin:0 0 var(--sp-24); font-family:inherit; }
.zbe-section h2 mark{ background:var(--primary-bg); color:var(--text); padding:0 8px; border-radius:6px; }
.prose{ font-size:16px; color:var(--text-soft); max-width:70ch; }
.prose p{ margin:0 0 var(--sp-16); }
.prose h2, .prose h3{ color:var(--text); margin:var(--sp-32) 0 var(--sp-12); }
.prose ul, .prose ol{ padding-left:22px; }
.prose li{ margin-bottom:8px; }

/* ---- map ---- */
.map-box{ border:3px solid var(--line); border-radius:16px; background:var(--surface); overflow:hidden; padding:var(--sp-16); box-shadow:6px 6px 0 var(--line); }
.map-box-real{ padding:0; }
.map-box-real iframe{ width:100%; height:420px; border:0; display:block; }
.map-source-note{ font-size:12.5px; color:var(--text-faint); margin-top:var(--sp-12); }
.map-source-note a{ color:var(--secondary-tx); font-weight:600; text-decoration:none; }
.map-source-note a:hover{ text-decoration:underline; }
.map-legend{ display:flex; flex-wrap:wrap; gap:var(--sp-24); margin-top:var(--sp-24); font-size:12.5px; font-weight:500; }
.map-legend span{ display:flex; align-items:center; gap:9px; }
.map-legend i{ width:14px; height:14px; border-radius:4px; border:2px solid var(--line); flex:none; }

/* ---- label compatibility grid ---- */
.labels-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-12); }
.label-card{
  border:3px solid var(--line); border-radius:14px; background:var(--surface);
  text-align:center; padding:var(--sp-24) 8px;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
  box-shadow:4px 4px 0 var(--line);
}
.label-card:hover{ transform:translate(-2px,-4px); box-shadow:6px 8px 0 var(--line); }
.disc{
  width:48px; height:48px; border-radius:50%; margin:0 auto var(--sp-12);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:12.5px; color:#5A6068; background:#F3F4F6; border:3px solid var(--line);
}
.disc.cero{ background:var(--secondary); color:#fff; }
.disc.eco{ background:var(--secondary); border-color:var(--success); color:#fff; }
.disc.c{ background:var(--success); color:var(--text); }
.disc.b{ background:var(--warning); color:var(--text); }
.disc.none{ background:#fff; border:3px dashed #9CA3AF; color:var(--text-faint); }
.label-card .name{ font-weight:700; font-size:12.5px; margin-bottom:var(--sp-8); }
.label-card .status{ font-size:12.5px; font-weight:800; letter-spacing:.03em; padding:4px 10px; border-radius:999px; display:inline-block; text-transform:uppercase; }
.status{ font-size:12.5px; font-weight:800; letter-spacing:.03em; padding:4px 10px; border-radius:999px; display:inline-block; text-transform:uppercase; }
.status.ok{ background:var(--success-bg); color:var(--success-tx); }
.status.limited{ background:var(--warning-bg); color:var(--warning-tx); }
.status.no{ background:transparent; color:var(--danger); padding:4px 0; font-weight:800; }
.labels-note{ font-size:12.5px; color:var(--text-faint); margin-top:var(--sp-16); font-weight:500; }

/* ---- info rows ---- */
.info-rows{ display:flex; flex-direction:column; border:3px solid var(--line); border-radius:14px; overflow:hidden; }
.info-row{ display:grid; grid-template-columns:200px 1fr; gap:var(--sp-24); padding:var(--sp-24); border-top:2px solid var(--line); }
.info-row:first-child{ border-top:none; }
.info-row:nth-child(even){ background:#FAFAFA; }
.info-row .k{ font-weight:800; font-size:16px; }
.info-row .v{ color:var(--text-soft); font-size:16px; }
.info-row .v .flag{ display:inline-block; margin-top:var(--sp-8); font-size:12.5px; font-weight:700; color:var(--danger-tx); background:var(--danger-bg); padding:4px 10px; border-radius:999px; }

/* ---- fine callout ---- */
.fine-box{ border:3px solid var(--line); border-radius:16px; background:var(--warning-bg); padding:var(--sp-32); display:flex; align-items:center; gap:var(--sp-32); box-shadow:8px 8px 0 var(--line); flex-wrap:wrap; }
.fine-box .amount{ font-size:56px; font-weight:800; color:var(--text); line-height:1; white-space:nowrap; }
.fine-box .amount span{ font-size:12.5px; font-weight:700; display:block; margin-top:var(--sp-8); color:var(--warning-tx); text-transform:uppercase; letter-spacing:.04em; }
.fine-box .text{ font-size:16px; color:var(--text-soft); font-weight:500; max-width:52ch; }
.fine-box .text strong{ display:block; font-size:16px; margin-bottom:var(--sp-8); color:var(--text); font-weight:800; }
.fine-box .flag{ display:inline-block; margin-top:var(--sp-12); font-size:12.5px; font-weight:700; color:var(--danger-tx); background:#fff; border:2px solid var(--danger-tx); padding:4px 10px; border-radius:999px; }

/* ---- faq (no schema — Google retired FAQ rich results in May 2026; kept as plain content for users/AI answer engines) ---- */
.faq-item{ border-radius:12px; overflow:hidden; margin-bottom:var(--sp-12); border:2px solid #E5E7EB; }
.faq-item[open]{ border-color:var(--primary); }
.faq-q{
  width:100%; text-align:left; background:#FAFAFA; border:none; cursor:pointer;
  padding:var(--sp-16) var(--sp-24); font-family:inherit; font-weight:700; font-size:16px;
  color:var(--text); display:flex; justify-content:space-between; align-items:center; gap:var(--sp-16);
}
.faq-q:hover{ background:#F3F4F6; }
.faq-q .icon{ font-weight:800; color:var(--primary); font-size:22px; transition:transform .25s cubic-bezier(.16,1,.3,1); flex:none; }
.faq-item[open] .faq-q .icon{ transform:rotate(45deg); }
.faq-a{ padding:var(--sp-16) var(--sp-24) var(--sp-24); color:var(--text-soft); font-size:16px; max-width:62ch; background:#fff; }

/* ---- related / city grid ---- */
.related-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-12); }
.related-card{
  border:3px solid var(--line); border-radius:12px; padding:var(--sp-16) var(--sp-24);
  text-decoration:none; display:block; background:var(--surface);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
  box-shadow:4px 4px 0 var(--line);
}
.related-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--primary); }
.related-card .tag2{ font-size:12.5px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; color:var(--secondary-tx); margin-bottom:var(--sp-8); display:block; }
.related-card .title{ font-weight:700; font-size:16px; }

.city-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-16); }
.city-card{
  border:3px solid var(--line); border-radius:14px; padding:var(--sp-24);
  text-decoration:none; display:block; background:var(--surface);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease;
  box-shadow:4px 4px 0 var(--line);
}
.city-card:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--primary); }
.city-card .name{ font-weight:800; font-size:22px; margin-bottom:var(--sp-8); }
.city-card .status-chip{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; }
.city-card .status-chip::before{ content:''; width:7px; height:7px; border-radius:50%; }
.city-card .status-chip.activa{ color:var(--success-tx); }
.city-card .status-chip.activa::before{ background:var(--success); }
.city-card .status-chip.parcial{ color:var(--warning-tx); }
.city-card .status-chip.parcial::before{ background:var(--warning); }
.city-card .status-chip.en_tramite{ color:var(--text-faint); }
.city-card .status-chip.en_tramite::before{ background:#9CA3AF; }
.city-card-more{ border-style:dashed; background:var(--paper); display:flex; flex-direction:column; justify-content:center; }
.city-card-more .name{ color:var(--secondary-tx); }

/* ---- comprobador form ---- */
.form-card{ background:var(--surface); border:3px solid var(--line); border-radius:16px; padding:32px; margin-top:-24px; position:relative; z-index:2; box-shadow:6px 6px 0 var(--line); }
.field{ margin-bottom:var(--sp-24); }
.field:last-of-type{ margin-bottom:0; }
.field label{ display:block; font-size:12.5px; font-weight:800; letter-spacing:.02em; margin-bottom:var(--sp-8); color:var(--text-soft); }
.field select{
  width:100%; font-family:inherit; font-size:16px; font-weight:600; color:var(--text); line-height:1.5;
  padding:13px 40px 13px 16px; border:3px solid var(--line); border-radius:10px; background:#fff;
  appearance:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23111827' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.field select:focus{ outline:3px solid var(--secondary); outline-offset:1px; }
.btn{
  width:100%; font-family:inherit; font-size:16px; font-weight:800; letter-spacing:.02em; line-height:1.5;
  color:#fff; background:var(--text); border:3px solid var(--line); border-radius:10px;
  padding:15px 20px; cursor:pointer; margin-top:var(--sp-8);
  box-shadow:4px 4px 0 var(--primary); transition:transform .15s cubic-bezier(.16,1,.3,1), box-shadow .15s cubic-bezier(.16,1,.3,1);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--primary); }
.btn:active{ transform:translate(0,0); box-shadow:2px 2px 0 var(--primary); }
.btn:focus-visible{ outline:3px solid var(--secondary); outline-offset:2px; }

.result{ margin-top:var(--sp-24); display:none; }
.result.show{ display:block; }
.result-banner{ border:3px solid var(--line); border-radius:14px; padding:24px 26px; display:flex; align-items:center; gap:20px; margin-bottom:var(--sp-16); flex-wrap:wrap; }
.result-banner .disc{ width:56px; height:56px; font-size:16px; }
.result-banner .rtext strong{ display:block; font-size:22px; font-weight:800; margin-bottom:4px; }
.result-banner .rtext span{ font-size:16px; color:var(--text-soft); font-weight:500; }
.result-banner.ok{ background:var(--success-bg); }
.result-banner.limited{ background:var(--warning-bg); }
.result-banner.no{ background:var(--danger-bg); }
.compare{ border:3px solid var(--line); border-radius:14px; overflow:hidden; }
.compare-row{ display:grid; grid-template-columns:1fr auto; gap:12px 16px; align-items:center; padding:16px 20px; border-top:2px solid #E5E7EB; }
.compare-row:first-child{ border-top:none; }
.compare-row .city{ font-weight:700; font-size:16px; text-decoration:none; }
.compare-row a.city:hover{ color:var(--primary); }
.compare-row .verdict{ font-size:12.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase; padding:5px 12px; border-radius:999px; white-space:normal; text-align:center; line-height:1.4; }
.verdict.ok{ background:var(--success-bg); color:var(--success-tx); }
.verdict.limited{ background:var(--warning-bg); color:var(--warning-tx); }
.verdict.no{ background:var(--danger-bg); color:var(--danger-tx); }
.note{ font-size:12.5px; color:var(--text-faint); font-weight:500; margin-top:var(--sp-16); }

/* ---- AdSense slots ---- */
.ad-slot{ margin:48px 0; text-align:center; }
.ad-slot .ad-label{ font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-faint); font-weight:700; margin-bottom:8px; }
.ad-slot .ad-frame{ border:1px dashed #D1D5DB; border-radius:8px; min-height:100px; display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:12.5px; background:#FCFCFC; }

/* ---- footer ---- */
.site-footer{ padding:var(--sp-32) 0 64px; color:var(--text-faint); font-size:12.5px; border-top:3px solid var(--line); margin-top:56px; font-weight:500; }
.site-footer .wrap{ padding-top:var(--sp-32); }
.footer-cols{ display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-16); margin-top:var(--sp-24); }
.footer-col-title{ display:block; font-size:12.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--text); margin-bottom:var(--sp-8); }
.footer-links{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.footer-links a{ text-decoration:none; color:var(--text-faint); font-weight:600; }
.footer-links a:hover{ color:var(--primary); }
@media (max-width:360px){ .footer-cols{ grid-template-columns:1fr; } }

@media (max-width:760px){
  .wrap{ padding-left:28px; padding-right:28px; }
  .facts{ grid-template-columns:1fr 1fr; }
  .map-box-real iframe{ height:300px; }
  .fact:nth-child(n){ transform:none !important; }
  .labels-grid{ grid-template-columns:repeat(3,1fr); }
  .label-card{ transform:none !important; }
  .info-row{ grid-template-columns:1fr; gap:var(--sp-8); }
  .fine-box{ flex-direction:column; align-items:flex-start; }
  .related-grid{ grid-template-columns:1fr; }
  .city-grid{ grid-template-columns:1fr 1fr; }
  .compare-row{ grid-template-columns:1fr; justify-items:start; gap:8px; }
  .compare-row .verdict{ text-align:left; }
}
@media (max-width:480px){
  .city-grid{ grid-template-columns:1fr; }
  .hero-block{ padding:28px 24px; }
  .form-card{ padding:24px; }
}