/* ===================================================================
   Lo comun de las paginas de municipio. Sale tal cual de una pagina ya
   publicada (ciudad/huesca.html) para que las nuevas se vean exactamente
   igual que las 81 de siempre; aquellas lo siguen llevando dentro.
   =================================================================== */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Share Tech Mono";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/share-tech-mono-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
:root{
  --bg:#000;
  --surface:#120d09;
  --surface-2:#0d0a08;
  --panel:#fff;
  --panel-line:#eceae8;
  --line:rgba(255,255,255,.08);
  --line-soft:rgba(255,255,255,.06);
  --accent:#f97316;
  --accent-soft:#fdba74;
  --accent-ink:#1a0900;
  --blue:#162556;
  --text:#f7f4f0;
  --muted:#ab9d8f;
  --dim:#867868;    /* 4,9:1 sobre negro: es texto de 10 a 13px, tiene que leerse */
  --faint:#7f7a72;  /* idem para el copyright, que estaba en 2,7:1 */
  --sans:"Archivo","Helvetica Neue",Arial,sans-serif;
  --mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(16px,4vw,24px);
  --gap-section:clamp(56px,10vw,120px);
  --hero-img:url('../img/fondo-ciudad.webp');
  color-scheme:dark;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;overflow-x:clip;}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;overflow-x:clip;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;}
h1,h2,h3{text-wrap:balance;font-family:var(--sans);}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

/* ---------- layout ---------- */
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--pad);}

/* ---------- type scale ---------- */
.eyebrow{font-size:12.5px;text-transform:uppercase;letter-spacing:.14em;color:var(--accent-soft);font-weight:700;}
.h1{font-size:clamp(32px,6.4vw,68px);font-weight:800;letter-spacing:-.01em;line-height:1.04;margin:0 0 20px;}
.h2{font-size:clamp(26px,4.2vw,38px);font-weight:800;letter-spacing:-.005em;margin:0 0 10px;}
.lede{font-size:clamp(14.5px,1.4vw,15px);color:var(--muted);margin:0;}
.label{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);}

/* ---------- background ---------- */
.bg-fixed{
  position:fixed;inset:0;z-index:-1;
  background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.85) 70%,#000 100%),var(--hero-img) center 38% / cover no-repeat #000;
}

/* ---------- header ---------- */
.brandbar{background:var(--accent);padding:clamp(12px,3vw,20px) 0;display:flex;justify-content:center;position:relative;z-index:40;}
.brandbar .disc{
  width:clamp(76px,18vw,110px);aspect-ratio:1;border-radius:999px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:#fff;
}
.brandbar img{width:70%;height:auto;object-fit:contain;}
.nav{background:var(--panel);border-bottom:1px solid var(--panel-line);padding:12px var(--pad);position:relative;z-index:40;}
.nav-inner{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.nav-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;}
.nav-right{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.nav-link{display:inline-flex;align-items:center;font:600 14px/1 var(--sans);padding:11px 14px;border-radius:100px;color:#44403c;}
.nav-link:hover{background:#f5f5f4;color:#1c1310;}
.nav-link,.nav-drop{position:relative;}
.nav-link[aria-current]{color:#1c1310;font-weight:700;}
.nav-link[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:3px;background:var(--accent);border-radius:3px 3px 0 0;
}
/* Comunidades y Servicios son dos cosas en el mismo sitio: el NOMBRE, que
   lleva a su pagina, y la FLECHA, que abre el desplegable. Antes el
   conjunto era un boton y desde la cabecera no se podia llegar al mapa de
   comunidades ni al indice de servicios.
   En escritorio el panel se abre solo al pasar por encima de la pastilla
   entera, asi que el nombre queda libre para navegar; con el dedo no hay
   "pasar por encima", y por eso cada cosa tiene su zona. */
.nav-drop{display:inline-flex;align-items:center;border-radius:100px;}
.nav-drop .nav-link{padding-right:5px;}
/* la raya de la pagina actual va bajo la pastilla entera --nombre y
   flecha--, como en el resto; bajo el nombre solo quedaba descentrada */
.nav-drop .nav-link[aria-current]::after{display:none;}
.nav-drop:has(> .nav-link[aria-current])::after{
  content:"";position:absolute;left:0;right:0;bottom:-12px;height:3px;background:var(--accent);border-radius:3px 3px 0 0;
}
.nav-drop .nav-link:hover{background:transparent;}
.nav-drop:hover,.nav-drop.abierto{background:#f5f5f4;}
.nav-drop:hover .nav-link,.nav-drop.abierto .nav-link{color:#1c1310;}
.nav-caret{
  display:inline-flex;align-items:center;padding:11px 12px 11px 3px;
  border:0;background:transparent;color:#44403c;cursor:pointer;border-radius:100px;
}
.nav-cta{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font:700 14px/1 var(--sans);padding:12px 20px;border-radius:100px;
  background:var(--accent);color:var(--accent-ink);white-space:nowrap;
}
.nav-cta:hover{filter:brightness(1.08);}
.nav-now{font-size:13.5px;color:#78716c;}
.caret{transition:transform .2s ease;flex:none;}
.nav-caret[aria-expanded="true"] .caret{transform:rotate(180deg);}
/* el icono solo existe en movil, donde los cinco enlaces no caben */
.nav-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  width:44px;height:44px;padding:0;flex:none;cursor:pointer;
  border:1px solid var(--panel-line);border-radius:13px;background:#fff;
}
.nav-burger span{display:block;width:18px;height:2px;border-radius:2px;background:#1c1310;
  transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .16s ease;}
.nav.open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav.open .nav-burger span:nth-child(2){opacity:0;}
.nav.open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.menu-panel{display:none;position:absolute;top:100%;left:0;right:0;background:var(--panel);box-shadow:0 30px 50px -28px rgba(28,17,8,.6);z-index:20;}
.menu-panel.open{display:block;}
/* El menu ensena las comunidades y nada mas. Las ciudades salieron el
   04/10/2026: con un municipio por pagina, siete nombres por comunidad
   ya no eran un indice sino una muestra. */
.menu-grid{max-width:1240px;margin:0 auto;display:grid;}
.region-list{padding:18px 20px 20px;display:grid;gap:4px 14px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
.region-link{
  display:block;width:100%;text-align:left;padding:9px 11px;border-radius:9px;
  font:600 13.5px/1.3 var(--sans);color:#44403c;
}
.region-link:hover{background:#fff4ea;color:#9a3412;}

.menu-foot{
  max-width:1240px;margin:0 auto;padding:14px 20px 18px;border-top:1px solid var(--panel-line);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:#78716c;
}
.menu-foot a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#c2410c;}

/* el desplegable de Servicios: tres columnas por lo que viene buscando
   quien lo abre, no por como esta organizada la app */
.svc-grid{
  max-width:1240px;margin:0 auto;padding:26px 0 22px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:8px 34px;
}
.svc-cap{
  display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;color:#c2410c;padding:0 16px;margin-bottom:6px;
}
.svc-item{display:block;padding:11px 16px;border-radius:12px;}
.svc-item b{display:block;font-size:14.5px;font-weight:700;color:#1c1310;margin-bottom:2px;}
.svc-item span{display:block;font-size:12.5px;line-height:1.45;color:#78716c;}
.svc-item:hover{background:#fff4ea;}
.svc-item:hover b{color:#9a3412;}
.svc-foot{
  grid-column:1/-1;margin-top:12px;padding:16px 16px 0;border-top:1px solid var(--panel-line);
  display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:12.5px;color:#78716c;
}
.svc-foot a{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#c2410c;}
/* ---------- hero ---------- */
/* Sin fondo propio: el unico fondo real es la imagen fija de .bg-fixed. */
.hero{
  background:transparent;
  padding:clamp(72px,15vw,232px) 0 clamp(48px,7vw,104px);
}
.crumbs{font-size:12.5px;color:var(--dim);margin:0 0 18px;}
.crumbs a:hover{color:var(--accent-soft);}
.hero-sub{font-style:italic;font-size:clamp(16px,2vw,19px);color:var(--accent-soft);margin:0 0 24px;max-width:44ch;}
.updated{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:#a8a29e;margin-bottom:26px;}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}

.glow{
  border-radius:16px;
  box-shadow:0 0 0 1px rgba(249,115,22,.95),0 0 0 7px rgba(249,115,22,.09),
             0 0 0 8px rgba(249,115,22,.4),0 0 34px rgba(249,115,22,.28),
             0 34px 70px -22px rgba(0,0,0,.9);
}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(249,115,22,.3);overflow:hidden;}
.stat{background:var(--surface);padding:18px 20px;}
.stat .label{display:block;margin-bottom:8px;}
.stat .val{font-family:var(--mono);font-size:clamp(22px,3vw,26px);font-weight:700;font-variant-numeric:tabular-nums;}
.stat .val.hi{color:var(--accent);}
.stat .unit{font-size:13px;font-weight:500;color:var(--muted);}

/* ---------- main ---------- */
main{max-width:1240px;margin:0 auto;padding:0 var(--pad) 90px;}
.rule-dashed{border-top:1px dashed rgba(249,115,22,.55);}

.fuel-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 18px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.fuel{
  font:600 13px/1 var(--sans);padding:9px 16px;border-radius:100px;white-space:nowrap;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);color:var(--muted);cursor:pointer;
}
.fuel[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:700;}
table{width:100%;border-collapse:collapse;}
th,td{text-align:left;padding:13px 10px;}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);font-weight:600;border-bottom:1px solid var(--line);}
td{border-bottom:1px solid var(--line);font-size:14px;}
tbody tr:hover{background:rgba(255,255,255,.03);}
tr.best{background:rgba(249,115,22,.06);}
.st-name{font-weight:700;}
.st-addr{color:var(--dim);font-size:12px;margin-top:2px;}
.price{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap;}
.badge{
  display:inline-block;margin-left:8px;font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:100px;background:var(--accent);color:#000;
}

.btn-primary{
  position:relative;display:inline-flex;align-items:center;gap:9px;font-size:14.5px;font-weight:700;
  padding:16px 28px;border-radius:100px;background:var(--accent);color:var(--accent-ink);
  overflow:hidden;isolation:isolate;
}
.btn-primary::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s ease;
  background:linear-gradient(100deg,#fb923c,#f97316 40%,#fdba74);
}
.btn-primary:hover::after{opacity:1;}
.btn-ghost .store-sm{font-size:10px;color:#a8a29e;display:block;}
.btn-ghost .store-lg{font-size:14.5px;font-weight:700;}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.btn-row{margin-top:24px;}

/* acompana al scroll dentro de su propia seccion; el limite lo pone .lead-grid */
.aside{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(20px,3vw,26px);position:sticky;top:24px;
}
.aside h3{font-size:19px;font-weight:800;margin:10px 0 14px;}
.aside p{font-size:14.5px;color:var(--muted);margin:0 0 16px;}
.aside p:last-child{margin-bottom:0;}
.aside strong{color:var(--text);}

@keyframes revealImg{from{opacity:0;transform:translateY(26px) scale(.985);filter:blur(6px);}to{opacity:1;transform:none;filter:none;}}
img[data-reveal]{animation:revealImg .75s cubic-bezier(.2,.7,.2,1) both;}

/* ---------- las cuatro herramientas, dibujadas ---------- */
/* Las capturas de la app se fueron: en su sitio va el objeto de cada
   herramienta, vivo y con los datos de la propia ciudad. Su hoja entera esta
   en ciu-demos.css y su motor en ciu-demos.js; aqui quedan solo las reglas de
   la figura y su pie, que son de la pagina y no de los disenos. */
.inst{position:relative;text-align:left;}
@keyframes cdVivo{0%{box-shadow:0 0 0 0 rgba(249,115,22,.55);}70%,100%{box-shadow:0 0 0 9px rgba(249,115,22,0);}}
.led .off{fill:rgba(255,255,255,.05);}
.cdv-res.ok .cdv-res-v,.cdv-res.ok .cdv-res-n{color:var(--ok);text-shadow:0 0 18px rgba(74,222,128,.35);}
#cvr-gauge{display:block;width:100%;max-width:380px;height:auto;overflow:visible;}
@keyframes tkImprime{from{transform:rotate(1.8deg) translateY(-10px);opacity:.55;}}
.tk-tot.ok b{color:#15803d;}
#cvr-svg{display:block;width:100%;height:auto;touch-action:none;cursor:ew-resize;overflow:visible;}
.cz-aviso.no{border-color:rgba(248,113,113,.55);background:rgba(48,12,12,.72);}
.cz-aviso.si{border-color:rgba(74,222,128,.45);background:rgba(8,32,18,.72);}
@keyframes czSalta{from{transform:translateY(16px) scale(.96);opacity:.3;}}
.cz-aviso.no b{color:#fecaca;}
.cz-aviso.si b{color:#bbf7d0;}
.cz-aviso:not(.no) .cz-multa{opacity:.35;}
#cz-dial{display:block;width:100%;height:100%;touch-action:none;cursor:grab;overflow:visible;}
#cz-dial:active{cursor:grabbing;}
.cz-reloj-c span.fuera{color:var(--ok);}
@keyframes cfChispa{from{box-shadow:0 0 0 0 #fdba74,0 0 0 0 #f97316,0 0 0 0 #fdba74,0 0 0 0 #f97316,0 0 0 0 #fdba74,0 0 0 0 #f97316;}
  to{box-shadow:0 -18px 0 -1px transparent,16px -9px 0 -1px transparent,16px 9px 0 -1px transparent,0 18px 0 -1px transparent,-16px 9px 0 -1px transparent,-16px -9px 0 -1px transparent;}}
@keyframes cfTilin{20%{transform:rotate(20deg);}40%{transform:rotate(-16deg);}60%{transform:rotate(10deg);}80%{transform:rotate(-5deg);}}
.ca-noti.entra{animation:caNoti .6s cubic-bezier(.3,1.4,.5,1);}
@keyframes caNoti{from{transform:translateY(-14px) scale(.96);opacity:0;}}
.cvj-cifra.ok b{color:var(--ok);text-shadow:0 0 24px rgba(74,222,128,.35);}
#cvj-gauge{display:block;width:100%;height:auto;overflow:visible;}
.cvj-pueblo.baja{top:34px;}
@media (max-width:640px){
  .cvj-pueblo.menor{display:none;}
  .cvj-pueblo.baja{top:0;}
}
.cd-zbe-sin .cz-aviso.no .cz-multa{opacity:1;}

/* ---------- faq ---------- */
.faq{padding:var(--gap-section) 0;border-top:1px solid var(--line);}
.faq h2{margin-bottom:36px;max-width:60ch;}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px clamp(32px,5vw,56px);}
.faq-grid h3{font-size:17.5px;font-weight:700;margin:0 0 10px;}
.faq-grid p{font-size:15px;color:var(--muted);margin:0;max-width:60ch;}
.showcase .btn-row{justify-content:center;margin-top:32px;}

.nearby{margin-top:var(--gap-section);text-align:center;}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px;}
.chip{font-size:13px;color:var(--muted);border:1px solid rgba(255,255,255,.1);padding:8px 14px;border-radius:100px;}
.chip:hover{color:var(--text);border-color:#4a3c2c;}

.cta{padding:var(--gap-section) 0 0;text-align:center;}
.cta p{font-size:15px;color:var(--muted);max-width:56ch;margin:0 auto;}
.cta .btn-row{justify-content:center;margin-top:26px;}

/* ---------- footer ---------- */
.footer{background:var(--bg);border-top:1px solid #1c1613;}
.footer-top{max-width:1180px;margin:0 auto;padding:clamp(40px,6vw,64px) var(--pad) 32px;display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;}
.store{display:inline-flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid #2a221b;border-radius:12px;padding:10px 18px;}
.store:hover{border-color:#4a3c2c;background:#12100c;}
.store-sm{font-size:10px;color:#a8a29e;}
.store-lg{font-size:14.5px;font-weight:700;color:var(--text);}
.footer-logo{display:flex;align-items:center;justify-content:center;}
.footer-logo img{width:130px;height:auto;object-fit:contain;}
/* La columna derecha del pie: las cinco secciones del header, en el mismo
   orden y sin desplegables. Antes eran las diecisiete comunidades, y las
   diecisiete apuntaban a "#" -- un muro de enlaces muertos que ademas
   repetia lo que el desplegable del header ya hace bien. */
.footer-secs{text-align:left;}
.footer-secs .label{display:block;letter-spacing:.08em;margin-bottom:14px;}
.sec-links{display:grid;justify-items:start;gap:9px;font-size:13.5px;}
/* la descarga se va a la derecha, y el boton con ella: es inline-flex, asi
   que lo unico que hace falta es alinear el texto de su columna */
.footer-store{text-align:right;}
.sec-links a{color:#a8a29e;}
.sec-links a:hover{color:var(--text);}
/* la de ahora se marca con aria-current, que ademas la anuncia un lector de
   pantalla; no hay una clase aparte que mantener sincronizada */
.sec-links a[aria-current]{color:var(--accent-soft);font-weight:600;}
.footer-bottom{max-width:1180px;margin:0 auto;padding:0 var(--pad) 32px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12.5px;}
.footer-bottom .copy{color:var(--faint);}
.footlinks{display:flex;gap:20px;flex-wrap:wrap;color:#8a8078;}
.footlink:hover{color:var(--accent);}

/* ---------- aviso de descarga ---------- */
/* Sale UNA VEZ POR VISITA, no una vez por pagina: la diferencia la hace el
   motor con sessionStorage. Lo de aqui es la maqueta.

   El fondo es el mapa con sus gasolineras, y encima un degradado que lo
   apaga por la izquierda, que es justo donde va el texto: una foto entera
   de fondo con letras encima no se lee, y bajarle la opacidad a toda por
   igual deja el mapa en una mancha gris. Asi el mapa se reconoce a la
   derecha --debajo de los aparatos-- y el texto tiene su negro. */
.pop{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:var(--pad);}
.pop[hidden]{display:none;}
.pop-velo{
  position:absolute;inset:0;background:rgba(0,0,0,.74);
  opacity:0;transition:opacity .3s ease;
}
.pop.abre .pop-velo{opacity:1;}
.pop-caja{
  position:relative;width:min(1020px,100%);
  max-height:calc(100vh - var(--pad) * 2);max-height:calc(100dvh - var(--pad) * 2);
  overflow:hidden;border-radius:26px;border:1px solid rgba(249,115,22,.3);
  background:var(--surface-2);
  box-shadow:0 40px 120px -30px #000,0 0 90px -40px rgba(249,115,22,.55);
  opacity:0;transform:translateY(16px) scale(.985);
  transition:opacity .34s ease,transform .34s cubic-bezier(.2,.7,.2,1);
}
.pop.abre .pop-caja{opacity:1;transform:none;}
.pop-mapa{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;}
.pop-caja::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(100deg,#060403 16%,rgba(6,4,3,.9) 38%,rgba(6,4,3,.5) 58%,rgba(6,4,3,.2) 82%,rgba(6,4,3,.34)),
    radial-gradient(120% 110% at 0% 0%,rgba(249,115,22,.17),transparent 58%);
}
.pop-cuerpo{
  position:relative;z-index:2;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(18px,3vw,36px);align-items:center;padding:clamp(24px,3.2vw,42px);
}
.pop-x{
  position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  display:grid;place-items:center;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.45);color:#e7e0d8;
  transition:background .2s ease,color .2s ease;
}
.pop-x:hover{background:rgba(0,0,0,.75);color:#fff;}

.pop-marca{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-soft);
}
.pop-tit{
  font-size:clamp(25px,3.3vw,40px);font-weight:900;letter-spacing:-.03em;
  line-height:1.06;margin:13px 0 0;color:var(--text);
}
.pop-sub{font-size:clamp(14.5px,1.5vw,16.5px);line-height:1.6;color:var(--muted);margin:14px 0 0;max-width:42ch;}
.pop-btns{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:clamp(20px,2.6vw,30px);}
.pop-play{
  display:inline-flex;align-items:center;gap:11px;padding:12px 22px;border-radius:100px;
  background:var(--accent);color:var(--accent-ink);
  box-shadow:0 14px 34px -14px rgba(249,115,22,.9);
}
.pop-play:hover{filter:brightness(1.08);}
.pop-play .store-sm{display:block;font-size:10px;color:rgba(26,9,0,.72);}
.pop-play .store-lg{display:block;font-size:15px;font-weight:800;color:var(--accent-ink);}
/* el "no" no se disfraza de boton: es la salida, y tiene que verse sin
   competir con la descarga, que es a lo que viene el aviso */
.pop-no{
  border:0;background:transparent;color:var(--dim);cursor:pointer;
  font:600 13.5px/1 var(--sans);padding:12px 4px;
  text-decoration:underline;text-underline-offset:3px;
}
.pop-no:hover{color:var(--text);}

/* La imagen de "Imagen Pop Up/Pop Up.png", TAL CUAL: el movil y el
   ordenador ya vienen en ella, con la app en las dos pantallas. Aqui no se
   dibuja nada alrededor --ni marco, ni bisel, ni giro--; lo unico que se
   decide es el tamano. Y con tope en 507 px, que es lo que mide el fichero:
   estirarla mas la emborronaria. */
.pop-aparatos{display:flex;justify-content:center;align-items:center;}
.pop-imagen{display:block;width:100%;max-width:507px;height:auto;}

@media (prefers-reduced-motion:reduce){
  .pop-velo,.pop-caja{transition:none;}
  .pop-caja{transform:none;}
}
@media (max-width:820px){
  /* en vertical el aviso se lee de arriba abajo: primero lo que es, luego
     el boton, y el telefono debajo, mas pequeno: el mensaje y el boton
     tienen que caber sin tener que desplazar el aviso. */
  .pop-cuerpo{grid-template-columns:1fr;gap:20px;}
  .pop-caja::after{background:
    linear-gradient(180deg,#070503 34%,rgba(7,5,3,.8) 62%,rgba(7,5,3,.5)),
    radial-gradient(120% 70% at 0% 0%,rgba(249,115,22,.16),transparent 60%);}
  .pop-sub{max-width:none;}
  .pop-imagen{max-width:min(420px,100%);}
}
@media (max-width:640px){
  .pop{padding:12px;}
  .pop-caja{border-radius:20px;}
  .pop-cuerpo{padding:20px 18px 22px;}
  .pop-tit{font-size:clamp(23px,6.6vw,30px);}
  .pop-sub{font-size:14.5px;}
  .pop-btns{margin-top:20px;gap:6px 14px;}
  .pop-play{padding:12px 20px;}
  .pop-x{top:8px;right:8px;width:34px;height:34px;}
}
/* pantalla de movil tumbada, o muy baja: el aviso no puede pedir mas alto
   del que hay, asi que los aparatos se van y se queda el mensaje */
@media (max-height:560px){
  .pop-aparatos{display:none;}
  .pop-cuerpo{grid-template-columns:1fr;}
}
/* la landing lleva pie tras el main, no tras una seccion de cierre */
.footer{margin-top:var(--gap-section);}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  /* apilado no hay hueco al lado que seguir: el sticky solo estorbaria */
  .aside{position:static;}
  /* redundante con el breadcrumb del hero: es lo primero que se sacrifica */
  .nav-now{display:none;}
  .nav-link,.nav-caret{padding:11px 11px;}
  .nav-links{gap:2px;}
}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr;justify-items:center;text-align:center;gap:28px;}
  .footer-secs{text-align:center;}
  .sec-links{justify-items:center;}
  .footer-store{text-align:center;}
  .footer-bottom{justify-content:center;text-align:center;}
  .footlinks{justify-content:center;}
}
@media (max-width:760px){
  .faq-grid{grid-template-columns:1fr;}
  .menu-panel{
    position:static;max-height:none;overflow:visible;box-shadow:none;
    background:transparent;z-index:auto;
    margin:0 0 8px 14px;padding-left:12px;border-left:2px solid #eee7e0;
  }
  .menu-grid{grid-template-columns:1fr;min-height:0;max-height:none;overflow:visible;}
  .svc-grid{grid-template-columns:1fr;gap:2px 0;max-height:none;overflow:visible;padding:4px 0 6px;}
  .svc-item,.svc-cap{padding-inline:2px;}
  .svc-cap{margin-top:10px;}
  .svc-foot{flex-direction:column;align-items:flex-start;gap:10px;}
  /* Con el dedo, el desplegable de Comunidades ES la lista de las
     diecinueve: dos columnas de enlaces y a su pagina. */
  .region-list{padding:12px 14px 16px;grid-template-columns:1fr 1fr;gap:6px;}
  .region-link{width:auto;padding:10px 12px;border:1px solid var(--panel-line);}
  /* una sola fila: el icono abre el menu, y a la derecha se queda lo
     unico que de verdad se pulsa desde el movil */
  .nav{position:sticky;top:0;z-index:60;padding-block:10px;}
  .nav-inner{flex-direction:row;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;}
  .nav-burger{display:flex;}
  .nav-links{
    display:none;position:absolute;left:0;right:0;top:100%;z-index:45;
    flex-direction:column;align-items:stretch;gap:2px;flex-wrap:nowrap;
    background:var(--panel);border-bottom:1px solid var(--panel-line);
    padding:10px var(--pad) 16px;box-shadow:0 22px 44px -22px rgba(0,0,0,.5);
    max-height:calc(100vh - 66px);max-height:calc(100dvh - 66px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  }
  .nav.open .nav-links{display:flex;}
  .nav-link{
    display:flex;width:100%;justify-content:flex-start;align-items:center;gap:0;
    padding:13px 14px;font-size:15px;border-radius:12px;
  }
  /* en el cajon la pastilla ocupa la fila entera: el nombre se lleva todo
     el ancho --que es lo que se pulsa para ir-- y la flecha se queda en el
     borde derecho, con sitio de sobra para el dedo */
  .nav-drop{width:100%;}
  .nav-drop .nav-link{flex:1;width:auto;padding-right:8px;}
  .nav-caret{margin-left:auto;padding:13px 14px;}
  .nav-link[aria-current]::after,
  .nav-drop:has(> .nav-link[aria-current])::after{display:none;}
  .nav-link[aria-current]{background:#fff4ea;color:#9a3412;}
  .nav-right{width:auto;flex:none;gap:0;}
  /* en el cajon sobra ancho: el nombre va entero */
  .nav-links .nav-long{display:inline;}
  .nav-cta{width:auto;padding:12px 16px;font-size:13.5px;white-space:nowrap;}
}
@media (max-width:480px){
  .nav-long{display:none;}
}
@media (max-width:640px){
  .stats{grid-template-columns:1fr;}
  .h1{line-height:1.08;}
  main{padding-bottom:64px;}
  .btn-primary,.btn-ghost{width:auto!important;justify-content:center;}
  .btn-primary{padding:13px 20px;font-size:13.5px;gap:7px;}
  .nav-cta{padding:11px 15px;font-size:13px;}
}
@media (max-width:560px){
  th,td{padding:12px 6px;}
  .st-name{display:flex;flex-direction:column;align-items:flex-start;gap:4px;}
  .badge{margin-left:0;}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;}
  img[data-reveal]{animation:none;}
}