/* ══════════════════════════════════════════════════════════════════════════════════════════════
   AIMA · «Hasta dónde llegamos» (19/10/2026) — la ventana del mapa de la zona. Va con aima-cobertura.js.
   Blanco de fondo, tinta, un solo rojo (el Vallès y el cuadrado imperfecto). Anton en el titular y en
   las cifras grandes, Cormorant en el complemento, Montserrat en lo demás.
   Escritorio: a la izquierda el texto (titular, lo que va contando el guion, el selector y la tabla de
   precios) y a la derecha el cartel. Móvil: titular, cartel y debajo lo demás.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */
.cob{--cob-tinta:#0B0B0D;--cob-rojo:#C1272D;--cob-h1:#3A3A3C;--cob-lejos:#BDBDC4;--cob-t2:#56565C;--cob-t3:#86868B;
  --cob-linea:rgba(11,11,13,.10);--cob-suave:#F5F5F7;
  --cob-facet:polygon(10% 16%,92% 0%,100% 55%,96% 92%,0% 96%);
  display:grid;gap:14px;min-width:0;color:var(--cob-tinta);
  font-family:var(--f-body,"Montserrat","Helvetica Neue",Arial,sans-serif);font-size:14px;line-height:1.5}
.cob *,.cob *::before,.cob *::after{box-sizing:border-box}
.cob .cob-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── la escena ── */
.cob-escena{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"cab" "mapa" "beat" "pack" "tabla" "otra";
  background:#fff;border:1px solid var(--cob-linea);border-radius:22px;overflow:hidden}
.cob-escena > *{min-width:0}
.cob-cab{grid-area:cab;padding:18px 18px 4px}
.cob-mapa{grid-area:mapa;position:relative;aspect-ratio:1/1;max-height:62vh;max-height:62dvh;width:100%;
  background:#fff;touch-action:manipulation}
.cob:not(.cob-js) .cob-mapa{display:none}
.cob-beat{grid-area:beat;padding:4px 18px 0;min-height:118px}
.cob-pack{grid-area:pack;padding:10px 18px 0}
.cob-tabla-w{grid-area:tabla;padding:14px 18px 0}
.cob-otra-w{grid-area:otra;padding:10px 18px 16px}
@media (min-width:820px){
  .cob-escena{grid-template-columns:minmax(290px,340px) minmax(0,1fr);
    grid-template-rows:auto auto auto auto 1fr;
    grid-template-areas:"cab mapa" "beat mapa" "pack mapa" "tabla mapa" "otra mapa"}
  .cob-cab{padding:26px 26px 6px}
  .cob-beat{padding:8px 26px 0;min-height:168px}
  .cob-pack{padding:12px 26px 0}
  .cob-tabla-w{padding:14px 26px 0}
  .cob-otra-w{padding:12px 26px 22px;align-self:end}
  .cob-mapa{aspect-ratio:auto;max-height:none;height:100%;min-height:calc(clamp(470px,64vh,600px) + var(--cob-reserva,0px));
    border-left:1px solid var(--cob-linea)}
}

/* el lienzo y la etiqueta del ratón */
.cob-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.cob-tip{position:absolute;left:0;top:0;z-index:2;max-width:250px;padding:8px 11px 9px;border-radius:10px;
  background:#fff;box-shadow:0 0 0 1px var(--cob-linea),0 10px 26px rgba(11,11,13,.14);pointer-events:none;
  font-size:12px;line-height:1.4;color:var(--cob-t2)}
.cob-tip[hidden]{display:none}
.cob-tip b{display:block;font-size:13px;font-weight:700;color:var(--cob-tinta)}
.cob-tip span{display:block}
.cob-tip .cob-tip-p{margin-top:2px;font-weight:600;color:var(--cob-tinta)}

/* ── el titular ── */
.cob .cob-ceja{display:flex;align-items:center;gap:9px;margin:0;font:600 10.5px/1.2 var(--f-body,"Montserrat",sans-serif);
  letter-spacing:.24em;text-transform:uppercase;color:var(--cob-t2)}
.cob-ceja i{flex:none;width:9px;height:8px;background:var(--cob-rojo);clip-path:var(--cob-facet)}
.cob .cob-h{margin:10px 0 0;font:400 clamp(30px,3.4vw,42px)/.98 var(--f-pack,"Anton","Impact",sans-serif);
  text-transform:uppercase;letter-spacing:.01em;color:var(--cob-tinta);text-wrap:balance}
.cob .cob-h em{font:italic 600 1.08em/1 var(--f-display,"Cormorant Garamond",Georgia,serif);text-transform:none;letter-spacing:0;color:var(--cob-rojo)}

/* ── lo que va contando el guion (y, al final, el pack elegido) ── */
.cob .cob-num{margin:0;font:400 76px/.92 var(--f-pack,"Anton","Impact",sans-serif);letter-spacing:.005em;text-transform:uppercase;color:var(--cob-tinta);
  font-variant-numeric:lining-nums tabular-nums}
.cob .cob-num.medio{font-size:52px}
.cob .cob-num.largo{font-size:40px}
.cob-num:empty{display:none}
.cob .cob-k{display:flex;align-items:center;gap:8px;margin:10px 0 0;font:600 10.5px/1.3 var(--f-body,"Montserrat",sans-serif);
  letter-spacing:.18em;text-transform:uppercase;color:var(--cob-t2)}
.cob-k::before{content:"";flex:none;width:10px;height:9px;background:var(--cob-z,var(--cob-rojo));clip-path:var(--cob-facet)}
.cob-k:empty{display:none}
.cob .cob-l{margin:6px 0 0;max-width:30em;font-size:13.5px;line-height:1.5;color:var(--cob-t2)}
.cob-beat[data-z="h"]{--cob-z:var(--cob-h1)}
.cob-beat[data-z="c"]{--cob-z:var(--cob-lejos)}
.cob-beat[data-z="0"]{--cob-z:var(--cob-tinta)}
/* cambia en tres golpes, como un cartel (no un fundido) */
.cob-beat.cob-entra > *{animation:cob-sube .3s steps(3,end) both}
.cob-beat.cob-entra .cob-k{animation-delay:.06s}
.cob-beat.cob-entra .cob-l{animation-delay:.12s}
@keyframes cob-sube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:819px){.cob .cob-num{font-size:60px}.cob .cob-num.medio{font-size:44px}.cob .cob-num.largo{font-size:34px}}

/* ── el selector de pack ── */
.cob-pack-in{display:inline-flex;gap:2px;padding:4px;border-radius:999px;background:rgba(11,11,13,.06);box-shadow:inset 0 0 0 1px var(--cob-linea)}
.cob-pack button{min-height:38px;padding:9px 16px;border:0;border-radius:999px;background:none;cursor:pointer;
  font:600 13px/1 var(--f-body,"Montserrat",sans-serif);color:var(--cob-t2);transition:background-color .2s,color .2s,box-shadow .2s}
.cob-pack button:hover{color:var(--cob-tinta)}
.cob-pack button[aria-pressed="true"]{background:#fff;color:var(--cob-tinta);box-shadow:0 3px 10px rgba(11,11,13,.12)}
.cob-pack button:focus-visible,.cob-otra:focus-visible,.cob-busca input:focus-visible,.cob-23 summary:focus-visible{outline:2px solid var(--cob-rojo);outline-offset:2px}
.cob-pack-t{display:block;margin:0 0 7px;font:600 10px/1.2 var(--f-body,"Montserrat",sans-serif);letter-spacing:.2em;text-transform:uppercase;color:var(--cob-t3)}

/* ── las tres zonas y lo que cuestan en el pack elegido (el otro pack queda en el HTML, oculto) ── */
.cob-zonas{margin:0;padding:0;list-style:none}
.cob-zonas li{position:relative;padding:10px 0 10px 18px;border-top:1px solid var(--cob-linea)}
.cob-zonas li:first-child{border-top:0;padding-top:2px}
.cob-zonas li > i{position:absolute;left:0;top:13px;width:10px;height:9px;clip-path:var(--cob-facet);background:var(--cob-rojo)}
.cob-zonas li:first-child > i{top:5px}
.cob-zonas .z-h > i{background:var(--cob-h1)}
.cob-zonas .z-c > i{background:var(--cob-lejos)}
.cob-zn{display:block;font:600 10px/1.35 var(--f-body,"Montserrat",sans-serif);letter-spacing:.14em;text-transform:uppercase;color:var(--cob-t2)}
.cob-zp{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:var(--cob-tinta)}
.cob-zp b{font-weight:700}
.cob-zp .no{color:var(--cob-t3)}
.cob[data-cob-activo="constancia"] .cob-zp [data-cob-col="escala"],
.cob[data-cob-activo="escala"] .cob-zp [data-cob-col="constancia"]{display:none}
/* la ventana se ensancha para el cartel */
#aima-mock .geo-pop:has(.cob){width:min(1180px,calc(100vw - 24px))}

/* ── otra vez ── */
.cob-otra{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:7px 14px 7px 11px;border:0;border-radius:999px;
  background:none;box-shadow:inset 0 0 0 1px var(--cob-linea);cursor:pointer;font:600 12.5px/1 var(--f-body,"Montserrat",sans-serif);color:var(--cob-tinta)}
.cob-otra:hover{background:rgba(11,11,13,.04)}
.cob-otra svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.cob-campo .ic{position:absolute;left:15px;top:50%;width:17px;height:17px;margin-top:-8.5px;fill:none;stroke:var(--cob-t2);stroke-width:1.6;pointer-events:none}
/* oculto pero ocupando su sitio: si apareciera al final, el cartel cambiaría de tamaño y daría un salto */
.cob-otra[hidden]{display:inline-flex;visibility:hidden}

/* ── debajo: el buscador, la letra pequeña y los 23 ── */
.cob-info{display:grid;gap:12px 22px;padding:2px 4px 2px}
@media (min-width:820px){.cob-info{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:start}}
.cob-busca[hidden]{display:none}
.cob-busca label{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:var(--cob-tinta)}
.cob-campo{position:relative}
.cob-busca input{width:100%;min-height:44px;padding:10px 16px 10px 42px;border:0;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px rgba(11,11,13,.18);font:500 14px/1.2 var(--f-body,"Montserrat",sans-serif);color:var(--cob-tinta);-webkit-appearance:none;appearance:none}
.cob-busca input::placeholder{color:var(--cob-t3)}
.cob-busca [role="listbox"]{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;padding:6px;list-style:none;
  border-radius:14px;background:#fff;box-shadow:0 0 0 1px var(--cob-linea),0 14px 32px rgba(11,11,13,.16);max-height:260px;overflow:auto}
.cob-busca [role="listbox"][hidden]{display:none}
.cob-busca [role="option"]{padding:9px 12px;border-radius:9px;cursor:pointer;font-size:13.5px}
.cob-busca [role="option"]:hover,.cob-busca [role="option"][aria-selected="true"]{background:var(--cob-suave)}
.cob-res{margin:9px 0 0;font-size:13px;line-height:1.5;color:var(--cob-tinta)}
.cob-res:empty{display:none}
.cob-nota{margin:0;font-size:12.5px;line-height:1.55;color:var(--cob-t2)}
.cob-nota a{font-weight:600;color:var(--cob-tinta);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.cob-23{grid-column:1/-1}
.cob-23 summary{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--cob-tinta);list-style:none}
.cob-23 summary::-webkit-details-marker{display:none}
.cob-23 summary::before{content:"";width:9px;height:8px;background:var(--cob-rojo);clip-path:var(--cob-facet)}
.cob-23 summary::after{content:"";width:6px;height:6px;margin-left:2px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.cob-23[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
.cob-23 ul{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.cob-23 li{padding:5px 10px;border-radius:999px;background:var(--cob-suave);font-size:12px;color:var(--cob-tinta)}

@media (prefers-reduced-motion:reduce){
  .cob-beat.cob-entra > *{animation:none}
  .cob-pack button,.cob-tabla td{transition:none}
}

/* ── Diseño gráfico (pack-identidad): la misma pieza dentro de su <dialog>, con un solo precio ── */
.mapa-zona:has(.cob){max-width:min(1180px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
.mapa-zona > .cob{padding-top:60px;padding-bottom:24px}
.cob-mas{margin:12px 0 0;font-size:12.5px;line-height:1.55;color:var(--cob-t2)}
.cob-mas b{color:var(--cob-tinta);font-weight:600}

/* ══ 19/10/2026 · 20:05 · El mundo: Diseño gráfico, Diseño web y Tecnologías se pueden hacer en remoto ══════════════
   El cartel sale de Cataluña hasta ver la Tierra entera. Lo de lejos se pinta con el cuadrado imperfecto hueco: en remoto,
   sin estar allí. Diseño web y Tecnologías abren la pieza en su propia ventana (.cob-dlg) desde una línea bajo las tarjetas. */
.cob-beat[data-z="m"] .cob-k::before,
.cob-zonas .z-m > i{clip-path:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 9'%3E%3Cpolygon points='1.52 1.88 8.65 .65 9.35 4.89 9 7.73 .65 8.04' fill='none' stroke='%2356565C' stroke-width='1.3'/%3E%3C/svg%3E") center/100% 100% no-repeat}
/* el selector de vista (Cataluña / el mundo) usa el mismo control que el de pack */
.cob-pack [data-cob-vista]{min-width:92px}

/* ── la ventana ── */
.cob-dlg{width:min(1180px,calc(100vw - 24px));max-width:min(1180px,calc(100vw - 24px));max-height:calc(100dvh - 24px);
  margin:auto;padding:0;border:0;border-radius:26px;background:#fff;color:#0B0B0D;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 90px -30px rgba(11,11,13,.6)}
.cob-dlg::backdrop{background:rgba(11,11,13,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.cob-dlg > .cob{padding:60px clamp(14px,2.6vw,30px) 24px}
.cob-dlg-x{position:absolute;top:14px;right:14px;z-index:3;width:38px;height:38px;padding:0;border:0;border-radius:50%;
  background:rgba(11,11,13,.05);color:#0B0B0D;font:400 22px/1 var(--f-body,"Montserrat","Helvetica Neue",Arial,sans-serif);cursor:pointer}
.cob-dlg-x:hover{background:rgba(11,11,13,.1)}
.cob-dlg-x:focus-visible{outline:2px solid #C1272D;outline-offset:2px}

/* ── la línea que la abre, debajo de las tarjetas ── */
.cob-linea{display:block;max-width:920px;margin:clamp(24px,3.2vw,38px) auto 0;padding:0 16px;text-align:center;text-wrap:balance;
  font:500 12.6px/1.6 var(--f-body,"Montserrat","Helvetica Neue",Arial,sans-serif);color:#56565C}
.cob-linea .ic{display:inline-block;width:17px;height:17px;margin-right:8px;vertical-align:-4px}
.cob-linea .cob-sep{margin:0 8px;color:#86868B}
.cob-linea button{-webkit-appearance:none;appearance:none;display:inline;margin:0;padding:0;border:0;background:none;cursor:pointer;
  font:600 12.6px/1.55 var(--f-body,"Montserrat","Helvetica Neue",Arial,sans-serif);color:#0B0B0D;white-space:nowrap;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s}
.cob-linea button:hover{text-decoration-color:#C1272D}
.cob-linea button:focus-visible{outline:2px solid #C1272D;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.cob-linea button{transition:none}}

/* ══ 19/10/2026 · 22:54 · El selector «Ver» sobre el mapa (Diseño gráfico, Diseño web y Tecnologías e IA) ═══════════════
   Bratney: «coloca el ver en el mapa de una forma llamativa pero que encaje». Es un rótulo negro, como las placas del
   cartel (1 HORA, EN REMOTO): «VER» y dos pestañas, cada una con su bombilla (el cuadrado imperfecto: roja la que se ve,
   hueca la otra); la que se ve es una ventana encendida, en blanco. En escritorio flota arriba del mapa y las vistas se
   encuadran por debajo de él (--cob-reserva, que lee el guion: así no tapa ni el Pirineo ni lo alto del globo); en el móvil
   va justo encima.
   Al abrir, se enciende con un parpadeo; al acabar el guion, la bombilla de la otra vista parpadea unas veces para avisar
   de que se puede pulsar. Con movimiento reducido, nada de eso. */
.cob[data-cob-mundo] .cob-escena{grid-template-areas:"cab" "ver" "mapa" "beat" "tabla" "otra"}
.cob .cob-ver{grid-area:ver;position:relative;z-index:3;display:flex;align-items:stretch;gap:3px;max-width:460px;margin:2px 18px 14px;padding:3px;
  background:#0B0B0D;color:#F2F2F0;box-shadow:4px 4px 0 rgba(11,11,13,.2)}
.cob-ver-t{display:flex;align-items:center;margin:0;padding:0 12px 0 11px;
  font:600 9.5px/1 var(--f-body,"Montserrat","Helvetica Neue",Arial,sans-serif);letter-spacing:.26em;text-transform:uppercase;color:rgba(242,242,240,.72)}
.cob-ver-in{display:flex;flex:1 1 auto;gap:3px;min-width:0}
.cob .cob-ver button{-webkit-appearance:none;appearance:none;flex:1 1 auto;min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:8px;align-items:center;min-height:42px;margin:0;padding:7px 14px 7px 12px;border:0;border-radius:0;background:none;
  color:#F2F2F0;text-align:left;cursor:pointer;box-shadow:none;transition:none}
.cob .cob-ver button:hover{background:rgba(242,242,240,.15);color:#F2F2F0}
.cob .cob-ver button[aria-pressed="true"]{background:#fff;color:#0B0B0D;cursor:default}
.cob-ver b{display:block;font:400 17px/1 var(--f-pack,"Anton","Impact","Arial Narrow Bold",sans-serif);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.cob-ver small{display:none;grid-column:2;margin-top:4px;font:600 10px/1.25 var(--f-body,"Montserrat","Helvetica Neue",Arial,sans-serif);
  letter-spacing:.01em;white-space:nowrap;color:rgba(242,242,240,.78)}
.cob .cob-ver button[aria-pressed="true"] small{color:#56565C}
.cob-lamp{grid-row:1 / span 2;position:relative;display:block;width:11px;height:10px;background:#F2F2F0;clip-path:var(--cob-facet)}
.cob-lamp::after{content:"";position:absolute;inset:2px 2.4px 2px 2px;background:#0B0B0D;clip-path:var(--cob-facet)}
.cob .cob-ver button:hover .cob-lamp::after{background:#2A2A2E}
.cob .cob-ver button[aria-pressed="true"] .cob-lamp{background:#C1272D}
.cob .cob-ver button[aria-pressed="true"] .cob-lamp::after{display:none}
.cob .cob-ver button:focus-visible{outline:2px solid #EC5A60;outline-offset:-4px}
.cob .cob-ver button[aria-pressed="true"]:focus-visible{outline-color:#C1272D}
@keyframes cob-lamp{0%,49%{background:#F2F2F0}50%,100%{background:#C1272D}}
@keyframes cob-enciende{0%,17%{opacity:.2}21%,40%{opacity:1}44%,52%{opacity:.35}56%,100%{opacity:1}}
.cob-js .cob-ver{animation:cob-enciende .8s steps(1,end) both}
.cob-pista .cob-ver button[aria-pressed="false"] .cob-lamp{animation:cob-lamp .9s steps(1,end) 4}
@media (prefers-reduced-motion:reduce){.cob-js .cob-ver,.cob-pista .cob-ver button .cob-lamp{animation:none}}
/* móvil estrecho: solo el nombre; el texto de debajo del mapa cuenta el resto */
@media (min-width:560px) and (max-width:819px){.cob-ver small{display:block}}
@media (min-width:820px){
  .cob[data-cob-mundo] .cob-escena{grid-template-areas:"cab mapa" "beat mapa" "pack mapa" "tabla mapa" "otra mapa"}
  .cob[data-cob-mundo] .cob-mapa{--cob-reserva:64px}
  .cob .cob-ver{grid-area:mapa;align-self:start;justify-self:center;max-width:none;margin:12px 0 0}
}
/* con el mapa ancho, cada pestaña dice también la condición */
@media (min-width:1100px){
  .cob-ver small{display:block}
  .cob[data-cob-mundo] .cob-mapa{--cob-reserva:76px}
}