/* Generado por tools/build.py desde tokens.json: no editar a mano. */
:root{
  --fondo:#F7F5F0;
  --tinta:#17131A;
  --tinta-suave:#6E676B;
  --filete:#DDD7D3;
  --uva:#63204F;
  --sobre-uva:#F7F5F0;
  --raspon:#5A8F2A;
  --envero-1:#8DAA45;
  --envero-2:#B9B04E;
  --envero-3:#C96C84;
  --envero-4:#8E2F5F;
  --envero-5:#63204F;
  --envero-6:#3B1537;
  --f-sans:"Figtree", "Segoe UI", system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;
  --f-mono:var(--f-sans);
  --t-nombre:600 30px/1 var(--f-sans);
  --ls-nombre:-0.025em;
  --t-titular-1:800 clamp(34px,6vw,54px)/1.02 var(--f-sans);
  --ls-titular-1:-0.025em;
  --t-titular-2:700 26px/1.15 var(--f-sans);
  --ls-titular-2:-0.01em;
  --t-titular-3:700 18px/1.25 var(--f-sans);
  --t-entradilla:400 19px/1.5 var(--f-sans);
  --t-cuerpo:400 16px/1.6 var(--f-sans);
  --t-nota:400 13px/1.45 var(--f-sans);
  --t-etiqueta:500 12px/1.2 var(--f-mono);
  --ls-etiqueta:0.08em;
  --t-dato:400 14px/1.4 var(--f-mono);
  --espacio-xs:8px;
  --espacio-s:12px;
  --espacio-m:20px;
  --espacio-l:24px;
  --espacio-xl:56px;
  --radio-s:6px;
  --radio-m:10px;
  --radio-l:12px;
  --radio-pastilla:999px;
}
/* Lo que va encima de esta línea lo escribe build.py desde marca/n3b/hoja-de-marca/tokens.json (tema claro). */
:root{
  --panel:color-mix(in srgb,var(--tinta) 5%,var(--fondo));
  --verde-suave:color-mix(in srgb,var(--raspon) 16%,var(--fondo));
  --verde-texto:color-mix(in srgb,var(--raspon) 70%,var(--tinta));
  --uva-suave:color-mix(in srgb,var(--uva) 7%,var(--fondo));
  --uva-borde:color-mix(in srgb,var(--uva) 28%,var(--fondo));
  --ambar:var(--envero-2);
  --ambar-texto:color-mix(in srgb,var(--envero-2) 50%,var(--tinta));
  --hoja:#fff;
  --tinta-suave-base:var(--tinta-suave);
  --ease-out:cubic-bezier(.23,1,.32,1);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fondo);color:var(--tinta);font:var(--t-cuerpo);-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
img{max-width:100%;height:auto}
a{color:var(--uva);text-underline-offset:3px;text-decoration-thickness:1px}
a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible{outline:2px solid var(--uva);outline-offset:2px}
h1,h2,h3,p{margin:0}
h1{font:var(--t-titular-1);letter-spacing:var(--ls-titular-1);text-wrap:balance}
.saltar{position:absolute;left:-9999px;top:8px;background:var(--uva);color:var(--sobre-uva);padding:8px 12px;border-radius:var(--radio-s);z-index:5}
.saltar:focus{left:12px}

/* Cabecera */
.cabecera{border-bottom:1px solid var(--filete)}
.cabecera-in{max-width:72rem;margin:0 auto;padding:14px var(--espacio-m);display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px}
.logo{display:block;flex:none}
.logo img{display:block;height:30px;width:auto}
.menu{display:flex;flex-wrap:wrap;align-items:center;gap:4px 22px;margin-left:auto;font:600 15px/1 var(--f-sans)}
.menu a{color:var(--tinta);text-decoration:none;padding:8px 0;border-bottom:2px solid transparent}
.menu a[aria-current="page"],.menu a[aria-current="true"]{border-bottom-color:var(--uva)}
.menu .menu-contacto{border:1px solid var(--tinta);border-radius:var(--radio-pastilla);padding:8px 14px}
@media (max-width:560px){
  .menu{margin-left:0;gap:4px 16px;font-size:14px}
}

/* Contenido */
main{max-width:46rem;margin:0 auto;padding:var(--espacio-l) var(--espacio-m) 0;display:grid;gap:var(--espacio-xl)}
main.ancha{max-width:72rem}
main.media{max-width:60rem}
/* Documentos y trámites: el panel «Tu bodega» a la derecha (Iñaki, 20-10). main lleva el interruptor de modo, el artículo y el panel */
main.con-lado{max-width:calc(46rem + 15rem + 48px);grid-template-columns:minmax(0,46rem) 15rem;column-gap:48px}
main.con-lado>*{grid-column:1}
main.con-lado>.lado{grid-column:2;grid-row:1;align-self:start;position:sticky;top:24px}
@media (max-width:1023.98px){
  main.con-lado{max-width:46rem;grid-template-columns:minmax(0,1fr)}
  main.con-lado>.lado{grid-column:1;grid-row:auto;order:-1;position:static}
}
.art{display:grid;gap:var(--espacio-l);min-width:0}
.migas{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);display:flex;flex-wrap:wrap;gap:4px 8px}
.migas a{color:var(--tinta-suave)}
.migas [aria-current]{color:var(--tinta)}
/* La flecha de volver al nivel de arriba (Iñaki, 20-10): al principio de la línea y, si hay margen, en él, a la izquierda */
.migas{position:relative;align-items:center}
.migas-volver{display:inline-grid;place-items:center;flex:none;width:32px;height:32px;margin:-6px 4px -6px -4px;border:1px solid var(--filete);
  border-radius:50%;background:var(--fondo);color:var(--tinta-suave)}
.migas-volver svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.migas-volver:hover{border-color:var(--uva);color:var(--uva)}}
.migas-volver:focus-visible{outline:2px solid var(--uva);outline-offset:2px}
@media (min-width:1240px){.migas-volver{position:absolute;left:-52px;top:50%;margin:0;transform:translateY(-50%)}}
.estado{justify-self:start;font:600 11px/1 var(--f-mono);padding:5px 8px;border-radius:var(--radio-pastilla);border:1px dashed var(--tinta-suave);color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.06em}
.respuesta{font:var(--t-entradilla)}
.respuesta-mas{font-size:16px}
.respuesta-mas b{font-weight:700}
.bloque-h{font:var(--t-titular-3);margin:0}
.seccion-h{font:var(--t-titular-2);letter-spacing:var(--ls-titular-2);margin:0 0 var(--espacio-s)}
.nota{font:var(--t-nota);color:var(--tinta-suave)}
.pc{display:inline-block;font:600 10.5px/1.2 var(--f-mono);padding:3px 7px;border-radius:var(--radio-pastilla);border:1px dashed var(--tinta-suave);color:var(--tinta-suave);max-width:100%;overflow-wrap:anywhere;vertical-align:1px}
.lista{margin:0;padding-left:20px;display:grid;gap:6px}

/* ¿Cuándo te toca? */
.cuando{display:grid;gap:var(--espacio-s);background:var(--panel);border-radius:var(--radio-m);padding:14px 16px}
.cuando-fila{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:8px 14px;align-items:center}
.cuando-lab{font-size:14px;line-height:1.3;display:grid;gap:2px}
.cuando-lab small{font:var(--t-nota);color:var(--tinta-suave)}
.meses{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;list-style:none;margin:0;padding:0}
.mes{display:grid;justify-items:center;gap:3px;font:500 10px/1 var(--f-mono);color:var(--tinta-suave);text-transform:uppercase}
.mes i{display:block;width:100%;max-width:26px;aspect-ratio:1;border-radius:var(--radio-pastilla);border:1.5px solid var(--filete)}
.mes.si i{background:var(--uva);border-color:var(--uva)}
.mes.si{color:var(--tinta);font-weight:700}
.cuando-nota{font:var(--t-nota);color:var(--tinta-suave);grid-column:2}
@media (max-width:640px){
  .cuando-fila{grid-template-columns:minmax(0,1fr)}
  .cuando-nota{grid-column:1}
}

/* Sobre los bloques de color, el texto secundario se oscurece un poco para llegar a AA (4,5:1) */
.corto,.cruces{--tinta-suave:color-mix(in srgb,var(--tinta-suave-base) 80%,var(--tinta))}

/* En corto */
.corto{display:grid;gap:10px;background:var(--verde-suave);border-left:4px solid var(--raspon);border-radius:var(--radio-m);padding:14px 16px;font-size:15px}
.corto-cab{font:var(--t-titular-3);color:var(--verde-texto)}
.corto dl,.organismo dl{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:8px 14px;margin:0}
.corto dt,.organismo dt{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);padding-top:3px}
.corto dd,.organismo dd{margin:0;min-width:0}
.corto dd ul{margin:0;padding-left:18px;display:grid;gap:4px}
@media (max-width:560px){
  .corto dl,.organismo dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .corto dd,.organismo dd{margin-bottom:8px}
}

/* Ojo y excepciones */
.ojo{display:grid;gap:8px}
.ojo .lista{font-size:15px}

/* Con qué se cruza: el documento en el centro y sus vecinos a un salto */
.cruces{display:grid;gap:12px;background:var(--uva-suave);border:1px solid var(--uva-borde);border-radius:var(--radio-m);padding:14px 16px}
.cruces .bloque-h{color:var(--uva)}
.igual{--k:var(--uva)}
.compara{--k:var(--ambar)}
.alimenta{--k:var(--raspon)}
.nb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,8rem) minmax(0,1fr);column-gap:34px;row-gap:8px;align-items:center}
.nb.sin-izq{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}
.nb.sin-der{grid-template-columns:minmax(0,1fr) minmax(0,8rem)}
.nb-cab{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-suave);align-self:end;grid-row:1}
.nb-cab.izq{grid-column:1}
.nb-cab.der{grid-column:3}
.nb-centro{grid-column:2;grid-row:2 / span var(--filas,1);align-self:stretch;background:var(--uva);color:var(--sobre-uva);border-radius:var(--radio-l);padding:12px 10px;display:grid;gap:4px;align-content:center;text-align:center}
.nb-centro b{font:800 19px/1.05 var(--f-sans);letter-spacing:-.01em}
.nb-centro span{font:500 10.5px/1.35 var(--f-mono)}
.nb-v{position:relative;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-m);padding:8px 10px;display:grid;gap:2px;font-size:13px;line-height:1.35;transition:opacity 160ms var(--ease-out)}
.nb-v b{font:700 14px/1.25 var(--f-sans)}
.nb-v b a{color:var(--tinta)}
.nb-v .que{color:var(--tinta-suave)}
.nb-v .tipo{font:600 10.5px/1.3 var(--f-mono);color:var(--k)}
.nb-v.compara .tipo{color:var(--ambar-texto)}
.nb-v .nb-pc{font:500 10.5px/1.3 var(--f-mono);color:var(--tinta-suave)}
.nb-v .nb-norma ul{font-size:12px}
.nb-v::after{content:"";position:absolute;top:50%;width:34px;border-top:2px solid var(--k)}
.nb-v.compara::after{border-top-style:dashed}
.nb-izq{grid-column:1}
.nb-izq::after{left:100%}
.nb-der{grid-column:3}
.nb-der::after{right:100%}
.nb.sin-izq .nb-centro{grid-column:1}
.nb.sin-izq .nb-der,.nb.sin-izq .nb-cab.der{grid-column:2}
.nb .f2{grid-row:2}.nb .f3{grid-row:3}.nb .f4{grid-row:4}.nb .f5{grid-row:5}.nb .f6{grid-row:6}.nb .f7{grid-row:7}
.nb-v.alimenta::before{content:"";position:absolute;top:calc(50% - 4px);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid var(--k)}
.nb-der.alimenta::before{right:100%}
.nb-izq.alimenta::before{left:calc(100% + 26px)}
.nb-ley{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--tinta-suave);margin:0;padding:0;list-style:none}
.nb-ley li{display:flex;align-items:center;gap:6px}
.nb-ley i{display:inline-block;width:22px;border-top:2px solid var(--k)}
.nb-ley .compara i{border-top-style:dashed}
.nb-ley .alimenta i{position:relative}
.nb-ley .alimenta i::after{content:"";position:absolute;right:-2px;top:-6px;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid var(--k)}
.ej{display:grid;gap:10px;border-top:1px solid var(--uva-borde);padding-top:12px}
.ej-h{font:700 14.5px/1.3 var(--f-sans);display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.ej-h span{font:500 10.5px/1.3 var(--f-mono);color:var(--tinta-suave)}
.ej-fila{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:stretch;gap:6px}
.ej-c{background:var(--hoja);border:1px dashed var(--ambar);border-radius:var(--radio-m);padding:9px 11px;display:grid;gap:3px;font-size:13px;line-height:1.35;color:var(--tinta-suave)}
.ej-c .k{font:500 10.5px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase}
.ej-c b{font:800 22px/1.1 var(--f-sans);color:var(--tinta);font-variant-numeric:tabular-nums}
.ej-eq{display:grid;place-items:center;font:800 22px/1 var(--f-sans);color:var(--ambar-texto)}
.ej-ok{font-size:14.5px;font-weight:600}
.ej-no{font-size:14px;color:var(--tinta-suave)}
@media (max-width:600px){
  .nb,.nb.sin-izq,.nb.sin-der{grid-template-columns:minmax(0,1fr)}
  .nb > *,.nb.sin-izq > *{grid-column:1 !important;grid-row:auto !important}
  .nb-centro{padding:10px}
  .nb-cab{margin-top:4px}
  .nb-v::after,.nb-v.alimenta::before{display:none}
  .nb-v{border-left:4px solid var(--k)}
  .nb-v.compara{border-left-style:dashed}
  .ej-fila{grid-template-columns:minmax(0,1fr)}
  .ej-eq{height:22px}
}

/* Dónde vale */
.donde{font-size:14.5px;color:var(--tinta-suave)}

/* Perfil del Calendario: marca lo que te toca. Lo que no es de tu Comunidad ni de tu DO lo oculta la barra «Tu bodega» (tu-bodega.css) */
.perfil-enlace{font:var(--t-nota);margin-top:calc(var(--espacio-l) * -.6)}
.perfil-enlace a{color:var(--tinta-suave)}
.perfil-banda{background:var(--uva);color:var(--sobre-uva);border-radius:var(--radio-m);padding:10px 14px;font-size:15px;line-height:1.45}
.perfil-banda a{color:var(--sobre-uva)}
.cuando-fila{border-radius:var(--radio-s);transition:opacity 160ms var(--ease-out)}
.cuando-fila.mio{background:var(--hoja);box-shadow:0 0 0 2px var(--uva);padding:6px 8px;margin:0 -8px}
.cuando-fila.atenuada > :not(.motivo),.nb-v.no-toca > :not(.motivo){opacity:.4}
.cuando-fila .motivo{grid-column:1 / -1}
.tuyo{font:600 10px/1 var(--f-mono);background:var(--uva);color:var(--sobre-uva);border-radius:var(--radio-pastilla);padding:3px 6px;margin-left:6px;vertical-align:1px;white-space:nowrap}
.tarjeta .tuyo{font-size:10px;color:var(--sobre-uva)}
.motivo{display:block;font:500 12.5px/1.35 var(--f-sans);color:var(--uva)}
.respuesta.no-toca,.respuesta-mas.no-toca,.ficha.no-toca .ficha-t{color:var(--tinta-suave)}
.respuesta.no-toca .motivo,.respuesta.depende .motivo{margin-top:6px;font-size:14px}
.ficha-chips:empty{display:none}

/* La norma, revisión y GrapeIQ */
.norma{display:grid;gap:6px}
.norma ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:14.5px;color:var(--tinta-suave)}
.norma a{color:var(--tinta)}
/* La norma de tu Comunidad o tu DO en una página de la UE o de España: solo con el filtro (tu-bodega.css y tu-bodega.js) */
.norma-tuya{font-weight:600;color:var(--uva)}
.revision{display:flex;flex-wrap:wrap;gap:6px 16px;font:500 12.5px/1.45 var(--f-mono);color:var(--tinta-suave);border-top:1px solid var(--filete);padding-top:12px}
.revision a{color:var(--tinta-suave)}
.revision .para-ti{color:var(--uva);font-weight:600}
/* «Con GrapeIQ» (Iñaki, 20-10, diseño A de Documentation/web-nueva/propuesta-con-grapeiq/): el morado claro, con «Con», el logo
   y un icono pulsable que lleva a la página de GrapeIQ. En «Al detalle», un bloque al pie; en «Fácil», la última fila (.facil-giq) */
.giq{display:grid;gap:8px;padding:16px 20px 18px;background:color-mix(in srgb,var(--uva) 8%,var(--fondo));border:1px solid var(--uva-borde);
  border-radius:var(--radio-m);font-size:16px;line-height:1.45}
.giq p{margin:0}
.giq-cab{display:flex;align-items:center;gap:10px;color:var(--uva);margin-bottom:2px}
.giq-tit{font-weight:700;font-size:17.5px;line-height:1.35;color:var(--tinta);text-wrap:pretty}
.giq-con{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase}
.giq-marca{display:flex;align-items:center;gap:10px}
.giq-logo{color:var(--tinta)}
.giq-logo svg{display:block;width:118px;height:auto}
.giq-ir{display:inline-grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--uva-borde);
  background:var(--hoja);color:var(--uva);transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease}
.giq-ir:focus-visible{outline:2px solid var(--uva);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.giq-ir:hover{background:var(--uva);border-color:var(--uva);color:var(--sobre-uva)}}
.giq-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:560px){
  .giq{padding:14px 16px}
  .giq-logo svg{width:100px}
}
/* Marca «llegará» (/lenguaje): la única. Tinta suave y borde fino, nunca con fecha; lo que ya existe va sin marca */
.pastilla{display:inline-block;font:600 11px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;padding:4px 7px 3px;border-radius:var(--radio-pastilla);max-width:100%;overflow-wrap:anywhere;vertical-align:.12em;margin-right:4px}
.pastilla.luego{border:1px solid color-mix(in srgb,var(--tinta) 30%,transparent);color:var(--tinta-suave)}

/* Portada */
.portada-cab{display:grid;gap:14px;max-width:46rem;padding-top:var(--espacio-s)}
.antetitulo{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--uva)}
.entradilla{font:var(--t-entradilla);color:var(--tinta-suave);max-width:60ch}
.buscador{display:grid;gap:8px;max-width:40rem;position:relative}
.buscador-l{font:var(--t-titular-3)}
.buscador input{font:400 17px/1.3 var(--f-sans);color:var(--tinta);background:var(--hoja);border:1.5px solid var(--tinta-suave);border-radius:var(--radio-m);padding:12px 14px;width:100%;min-width:0}
.resultados{list-style:none;margin:0;padding:6px 0;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-m);display:grid}
.resultados[hidden]{display:none}
.resultados li{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:8px 14px}
.resultados li + li{border-top:1px solid var(--filete)}
.resultados span{font:var(--t-nota);color:var(--tinta-suave)}
/* Con el filtro: debajo de lo tuyo, lo de otras Comunidades y DO, con su cabecera */
.resultados .resultados-grupo{background:var(--panel);padding-block:7px;margin-top:4px}
.resultados .resultados-grupo-t{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave)}
.puertas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:var(--espacio-s)}
.puerta{display:grid;gap:6px;align-content:start;background:var(--hoja);border:1px solid var(--filete);border-left:4px solid var(--uva);border-radius:var(--radio-l);padding:16px 18px;color:var(--tinta);text-decoration:none;transition:transform 160ms var(--ease-out)}
a.puerta:hover{transform:translateY(-2px)}
a.puerta:active{transform:scale(.98)}
.puerta q{font:var(--t-titular-3);quotes:"«" "»"}
.puerta span{font-size:14.5px;color:var(--tinta-suave)}
/* Territorios: un solo mapa con dos capas, Comunidades y DO (mapa.js; el dibujo sale de contenido/mapa-ccaa.svg y de
   mapa-do.svg), en lugar de las tarjetas. En el móvil, uno debajo de otro: el botón de las capas, el mapa, los nombres y el
   crédito. En pantalla ancha, a todo el ancho: el botón y los nombres en una columna, como el índice de un atlas, y el mapa a
   su derecha. Sin JavaScript se ven las dos listas y solo la capa de las Comunidades. Con un filtro de una sola Comunidad,
   solo su silueta; su nombre y «Ver las 17» pasan a la izquierda. */
.mapa-bloque{background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-l);padding:16px 18px 14px}
.mapa{display:grid;gap:12px;min-width:0}
.mapa-listas{display:grid;gap:var(--espacio-s);align-content:start}
.mapa-lista{display:grid;gap:6px;align-content:start}
.mapa-lista .sub-h{margin:0}
@media (min-width:760px){
  .mapa-bloque{padding:28px 32px 20px}
  .mapa{grid-template-columns:max-content minmax(0,32rem);grid-template-rows:auto auto 1fr auto;
    grid-template-areas:"capas lienzo" "listas lienzo" "pie lienzo" ". credito";justify-content:center;column-gap:clamp(32px,7vw,104px);row-gap:16px}
  .mapa-capas{grid-area:capas}
  .mapa-lienzo{grid-area:lienzo}
  .mapa-listas{grid-area:listas}
  .mapa-pie{grid-area:pie;align-self:start;flex-direction:column;align-items:flex-start}
  .mapa-bloque .mapa-nombres{display:block;font-size:15px;line-height:1.85}
  .mapa-credito{grid-area:credito}
}
.mapa [hidden]{display:none!important}

/* El botón de las capas: dos mitades; la elegida, en uva */
.mapa-capas{justify-self:start;display:inline-flex;gap:2px;padding:3px;border:1px solid var(--filete);border-radius:var(--radio-pastilla);background:var(--fondo)}
.mapa-capas button{min-height:32px;padding:5px 16px;border:0;border-radius:var(--radio-pastilla);background:none;font:600 14px/1.2 var(--f-sans);color:var(--tinta-suave);cursor:pointer;transition:background-color 160ms var(--ease-out),color 160ms var(--ease-out)}
.mapa-capas button[aria-pressed="true"]{background:var(--uva);color:var(--sobre-uva)}
.mapa-capas button:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){.mapa-capas button[aria-pressed="false"]:hover{color:var(--tinta)}}
@media (pointer:coarse){.mapa-capas button{min-height:44px}}
.mapa-js .mapa-lista[data-mapa-capa="do"],.mapa-js.mapa-modo-do .mapa-lista[data-mapa-capa="ccaa"]{display:none}
.mapa-js.mapa-modo-do .mapa-lista[data-mapa-capa="do"]{display:grid}

.mapa-lienzo{position:relative}
.mapa-ccaa{display:block;width:100%;height:auto;overflow:visible}
.mapa-ccaa path,.mapa-ccaa circle{vector-effect:non-scaling-stroke}
/* El gris va también en cada enlace: si solo se hereda del grupo, Chrome y Brave pintan en negro las Comunidades ya visitadas */
.mapa-regiones,.mapa-regiones a{fill:color-mix(in srgb,var(--tinta) 14%,var(--hoja));stroke:var(--hoja);stroke-width:1;stroke-linejoin:round}
.mapa-ccaa a{cursor:pointer;outline:none}
.mapa-ccaa a path{transition:fill 140ms var(--ease-out),fill-opacity 140ms var(--ease-out)}
/* Con territorios aún sin publicar (.mapa-parcial), lo publicado lleva un tinte de uva y lo demás (.mapa-pronto) se queda en
   gris y sin enlace: al pasar, solo oscurece un poco y la etiqueta dice «Pronto» */
.mapa-parcial .mapa-regiones a path{fill:color-mix(in srgb,var(--uva) 24%,var(--hoja))}
.mapa-pronto{cursor:default}
.mapa-pronto path{transition:fill 140ms var(--ease-out),fill-opacity 140ms var(--ease-out)}
.mapa-regiones .mapa-pronto.mapa-activa path{fill:color-mix(in srgb,var(--tinta) 26%,var(--hoja))}
@media (hover:hover) and (pointer:fine){.mapa-regiones .mapa-pronto:hover path{fill:color-mix(in srgb,var(--tinta) 26%,var(--hoja))}}
.mapa-modo-do .mapa-regiones .mapa-pronto{pointer-events:none}
.mapa-silueta .mapa-pronto{display:none}
.mapa-regiones a.mapa-mia path{fill:color-mix(in srgb,var(--uva) 38%,var(--hoja))}
.mapa-regiones a.mapa-activa path{fill:var(--uva)}
@media (hover:hover) and (pointer:fine){.mapa-regiones a:hover path{fill:var(--uva)}}
.mapa-recuadro{fill:none;stroke:var(--filete);stroke-width:1}
.mapa-sin-enlace{stroke:none}

/* La capa DO: las zonas en uva claro sobre el gris; al pasar, en uva. La solapada (Cava) solo sale al elegirla en la lista
   o con el filtro (.mapa-solapada) */
.mapa-dos{display:none}
.mapa-modo-do .mapa-dos{display:inline}
.mapa-modo-do .mapa-regiones a{pointer-events:none;cursor:default}
.mapa-modo-do .mapa-regiones a path{fill:color-mix(in srgb,var(--tinta) 14%,var(--hoja))}
.mapa-zona{fill:var(--uva);fill-opacity:.5;stroke:var(--uva);stroke-width:1;stroke-linejoin:round}
.mapa-parte{fill:url(#rayado-mapa);stroke:var(--uva);stroke-width:1}
.mapa-punto{fill:var(--uva);stroke:var(--hoja);stroke-width:1.5}
.mapa-dos a.mapa-activa .mapa-zona{fill-opacity:1}
@media (hover:hover) and (pointer:fine){.mapa-dos a:hover .mapa-zona{fill-opacity:1}}
.mapa-bloque:not(.mapa-solapada) .mapa-dos a[data-solapada]:not(.mapa-activa){display:none}
.mapa-dos .mapa-pronto .mapa-zona,.mapa-dos .mapa-pronto .mapa-parte{fill:var(--tinta);fill-opacity:.16;stroke:color-mix(in srgb,var(--tinta) 32%,var(--hoja))}
.mapa-dos .mapa-pronto .mapa-parte{fill-opacity:.07}
.mapa-dos .mapa-pronto .mapa-punto{fill:var(--tinta-suave)}
.mapa-dos .mapa-pronto.mapa-activa .mapa-zona{fill-opacity:.32}
@media (hover:hover) and (pointer:fine){.mapa-dos .mapa-pronto:hover .mapa-zona{fill-opacity:.32}}

.mapa-etiqueta{position:absolute;z-index:1;pointer-events:none;white-space:nowrap;transform:translate(calc(-50% + var(--mapa-desvio,0px)),calc(-100% - 8px));
  padding:6px 10px;border-radius:var(--radio-s);background:var(--tinta);color:var(--fondo);font:600 14px/1 var(--f-sans);box-shadow:0 4px 14px color-mix(in srgb,var(--tinta) 18%,transparent)}
.mapa-etiqueta-abajo{transform:translate(calc(-50% + var(--mapa-desvio,0px)),8px)}
.mapa-etiqueta-pronto{background:var(--tinta-suave)}
.mapa-etiqueta-pronto span{margin-left:8px;padding-left:8px;border-left:1px solid color-mix(in srgb,var(--fondo) 45%,transparent);font-weight:400}
/* Lo que aún no se publica, en una línea debajo de los nombres. «Ver las 17» la vuelve a enseñar, como a los nombres */
.mapa-pronto-l{margin:0;max-width:17rem;font:400 13px/1.5 var(--f-sans);color:var(--tinta-suave)}
.mapa-pronto-l b{font-weight:600}
.mapa-todas .mapa-lista[data-mapa-capa="ccaa"] .mapa-pronto-l{display:block!important}
.mapa-nombres{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 12px;font-size:14px;line-height:1.55}
.mapa-nombres a{color:var(--tinta-suave);text-decoration-color:color-mix(in srgb,var(--tinta-suave) 45%,transparent)}
@media (hover:hover) and (pointer:fine){.mapa-nombres a:hover{color:var(--uva);text-decoration-color:currentColor}}
.mapa-lista .tb-vacia{font-size:14px}
.mapa-credito{font:400 12px/1.45 var(--f-sans);color:var(--tinta-suave)}
.mapa-credito a{color:inherit}
.mapa-silueta .mapa-ccaa{height:clamp(170px,46vw,280px)}
.mapa-silueta .mapa-regiones a:not(.mapa-mia),.mapa-silueta .mapa-sin-enlace,.mapa-silueta .mapa-recuadro,.mapa-silueta .mapa-lista[data-mapa-capa="ccaa"]{display:none}
.mapa-silueta .mapa-regiones{stroke:none}
/* Los nombres llevan data-filtro, para que la barra cuente lo oculto; «Ver las 17» vuelve a enseñar las 17 Comunidades */
.mapa-todas .mapa-lista[data-mapa-capa="ccaa"] li[data-filtro]{display:list-item!important}
.mapa-silueta .mapa-regiones a.mapa-mia path{fill:var(--uva)}
.mapa-pie{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 14px}
.mapa-tuya{font:var(--t-titular-3);color:var(--uva)}
.mapa-ver{padding:6px 0;border:0;background:none;font:600 14px/1.3 var(--f-sans);color:var(--uva);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;cursor:pointer}
@media (pointer:coarse){.mapa-ver{min-height:44px}}

/* La zona de producción de una DO, en su página: su zona de cerca, lo que entra solo en parte y su silueta en cada Comunidad */
.zona{display:grid;gap:var(--espacio-s);min-width:0}
.zona-intro{max-width:46rem}
.zona-figura{margin:0;display:grid;gap:10px;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-l);padding:12px}
.zona-svg{display:block;width:100%;height:auto;max-height:72vh}
.zona-svg path,.zona-svg circle{vector-effect:non-scaling-stroke}
.zona-fondo{fill:color-mix(in srgb,var(--tinta) 14%,var(--hoja));stroke:var(--hoja);stroke-width:1;stroke-linejoin:round}
.zona-zona{fill:var(--uva);fill-opacity:.55;stroke:var(--uva);stroke-width:1;stroke-linejoin:round}
.zona-parte{fill:url(#rayado-zona);stroke:var(--uva);stroke-width:1}
.zona-punto{fill:var(--uva);stroke:var(--hoja);stroke-width:1.5}
.zona-leyenda{display:flex;flex-wrap:wrap;gap:4px 16px;font:var(--t-nota);color:var(--tinta-suave)}
.zona-leyenda span::before{content:"";display:inline-block;width:14px;height:10px;margin-right:6px;vertical-align:-1px;border:1px solid var(--uva);border-radius:2px}
.zona-leyenda .zl-zona::before{background:color-mix(in srgb,var(--uva) 55%,var(--hoja))}
.zona-leyenda .zl-parte::before{background:repeating-linear-gradient(45deg,var(--uva) 0 2px,var(--hoja) 2px 5px)}
.zona-leyenda .zl-punto::before{width:10px;height:10px;border-radius:50%;background:var(--uva)}
.zona .sub-h{margin:var(--espacio-s) 0 0}
.zona-partes{margin:0;padding-left:1.2em;display:grid;gap:6px;font-size:15px;max-width:46rem}
.zona-partes q{color:var(--tinta-suave);font-size:14px;quotes:"«" "»"}
.zona-siluetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.5rem),1fr));gap:12px}
.zona-siluetas li{display:grid;gap:6px;align-content:start;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-m);padding:10px}
.zona-silueta{display:block;width:100%;height:96px}
.zona-siluetas span{font:var(--t-nota);color:var(--tinta-suave)}
.zona-siluetas b{color:var(--tinta);font-weight:600}
.zona-credito{font:400 12px/1.45 var(--f-sans);color:var(--tinta-suave)}
.zona-credito a{color:inherit}
/* La silueta de cada Comunidad, junto al título de su página */
.titulo-terr{display:flex;align-items:center;gap:clamp(12px,2.4vw,20px)}
.titulo-terr h1{min-width:0}
.silueta{flex:none;width:clamp(44px,8vw,76px);height:clamp(44px,8vw,76px);fill:var(--uva)}
.tarjetas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));gap:var(--espacio-s)}
.tarjeta{height:100%;display:grid;gap:6px;align-content:start;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-l);padding:14px 16px;color:var(--tinta);text-decoration:none;transition:transform 160ms var(--ease-out)}
.tarjeta:hover{transform:translateY(-2px)}
.tarjeta b{font:var(--t-titular-3)}
.tarjeta span{font-size:14.5px;color:var(--tinta-suave)}
.tarjeta small{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave)}
.sub-h{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);margin:var(--espacio-s) 0 0}
.revision-portada{font:var(--t-nota);color:var(--tinta-suave)}
.revision-portada a{color:var(--tinta-suave)}

/* Territorio: capas apiladas */
.capas-bloque{display:grid;gap:var(--espacio-s)}
.capas{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.capa{--c:var(--envero-6);margin-inline:calc(var(--sangria) * 1%);background:color-mix(in srgb,var(--c) 12%,var(--fondo));border-left:6px solid var(--c);border-radius:var(--radio-m);padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:baseline}
.capa a{color:var(--tinta);font:var(--t-titular-3);text-decoration-color:var(--filete)}
.capa .n{font:800 26px/1 var(--f-sans);font-variant-numeric:tabular-nums;color:var(--tinta)}
.capa .n small{font:var(--t-nota);color:var(--tinta-suave);margin-left:4px}
.capa .temas{grid-column:1 / -1}
.capa.propia{box-shadow:0 0 0 2px var(--uva) inset}
.temas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.temas li{font-size:13px;line-height:1.2;background:var(--hoja);border-radius:var(--radio-s);padding:5px 8px}
.temas li b{font-family:var(--f-mono);font-weight:500;color:var(--tinta-suave);margin-left:4px}
/* DO de varias comunidades: sus comunidades en la misma fila */
.capa-grupo{margin-inline:calc(var(--sangria) * 1%);display:grid;gap:6px}
.capa-grupo > p{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);margin:4px 0 0}
.capas-par{grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr))}
.capas-par .capa{margin-inline:0;align-content:start}
@media (max-width:560px){
  .capa,.capa-grupo{margin-inline:calc(var(--sangria) * .4%)}
  .capa-grupo .capa{margin-inline:0}
}

/* Territorio: organismo y capas */
.organismo{display:grid;gap:10px;background:var(--panel);border-radius:var(--radio-m);padding:14px 16px;font-size:15px}
.organismo dl{grid-template-columns:11rem minmax(0,1fr)}
.capa-sec{display:grid;gap:var(--espacio-s);scroll-margin-top:16px}
.capa-sec > h2{font:var(--t-titular-2);letter-spacing:var(--ls-titular-2);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.capa-sec > h2 span{font:var(--t-nota);color:var(--tinta-suave)}
.tema{display:grid;gap:6px}
.tema > h3{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);margin-top:8px}
.enlaces{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--filete)}
.enlaces li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 12px;padding:8px 0;border-bottom:1px solid var(--filete);font-size:15px}
.enlaces li span{font:var(--t-nota);color:var(--tinta-suave)}

/* Territorio por tareas (encargo de Iñaki, 20-10; segunda pasada, 20-10): el «Índice» en un recuadro morado claro, lo que cubre la
   página en pequeño y el botón al Calendario; el mapa de la zona como elemento visual a su lado, que desde 1240 px se come parte del
   margen derecho; cada tarea en un recuadro con contorno; «También te corresponde…» por ámbitos plegables. */
.terr-entradilla{margin-top:-8px}
.terr-cabeza{display:grid;gap:var(--espacio-m);align-items:start;min-width:0}
.terr-cabeza-l{display:grid;gap:var(--espacio-s);min-width:0}
@media (min-width:900px){.terr-cabeza.con-mapa{grid-template-columns:minmax(0,1fr) 13rem;column-gap:24px}}
@media (min-width:1240px){.terr-cabeza.con-mapa{grid-template-columns:minmax(0,1fr) 15.5rem;column-gap:28px;margin-right:-12.5rem}}
.terr-indice{display:grid;gap:8px;background:var(--uva-suave);border:1px solid var(--uva-borde);border-radius:var(--radio-l);padding:14px 18px 8px}
.terr-indice ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,16rem),1fr));column-gap:var(--espacio-m)}
.terr-indice li{border-top:1px solid var(--uva-borde)}
.terr-indice a{display:flex;align-items:center;gap:12px;min-height:44px;padding:8px 2px;font:600 15.5px/1.35 var(--f-sans);color:var(--tinta);text-decoration:none}
.terr-indice a::after{content:"";flex:none;width:7px;height:7px;margin-left:auto;border-right:2px solid var(--uva);border-bottom:2px solid var(--uva);transform:rotate(-45deg)}
.terr-indice .indice-aparte a,.terr-indice .indice-aparte ~ li a{font-weight:500;color:var(--uva)}
/* En una Comunidad, sus DO: un punto más, con los enlaces en línea */
.terr-indice .indice-do{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 2px 8px}
.terr-indice .indice-do span{font:500 12px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.terr-indice .indice-do p{margin:0;font:500 15.5px/1.6 var(--f-sans);color:var(--tinta-suave)}
.terr-indice .indice-do a{display:inline;min-height:0;padding:4px 0;text-decoration:underline;text-decoration-color:var(--uva-borde);text-underline-offset:3px}
.terr-indice .indice-do a::after{content:none}
@media (hover:hover) and (pointer:fine){.terr-indice a:hover{color:var(--uva)}}
.terr-indice a:focus-visible,.terr-cal-b:focus-visible,.tambien-ambito > summary:focus-visible,.terr-mapa-mas > summary:focus-visible{outline:2px solid var(--uva);outline-offset:2px;border-radius:4px}
.cobertura{display:grid;gap:6px;max-width:62ch;padding-left:12px;border-left:2px solid var(--filete)}
.cobertura p,.cobertura .detalle-idea{font:var(--t-nota);font-weight:400;color:var(--tinta-suave)}
.cobertura b{color:var(--tinta);font-weight:600}
/* En una Comunidad, lo que cubre la página es un dibujo (Iñaki, 20-10): a la izquierda, las capas que se suman, en cuadraditos
   apilados (la de la Comunidad encima); a la derecha, sus DO, cada una en su recuadro enlazado. En el móvil, una debajo de otra */
.cob-dibujo{gap:10px;max-width:none}
.cob-dibujo .cob-h{margin:0;font:600 14px/1.3 var(--f-sans);color:var(--tinta)}
.cob-cols{display:grid;gap:12px 28px;align-items:start}
@media (min-width:560px){.cob-cols{grid-template-columns:auto minmax(0,1fr)}}
.cob-col{display:grid;gap:6px;min-width:0}
.cob-dibujo .cob-t{margin:0;font:500 12px/1.3 var(--f-mono);letter-spacing:.04em;text-transform:uppercase;color:var(--tinta-suave)}
.cob-pila{list-style:none;margin:0;padding:0;display:grid}
.cob-capa{display:flex;align-items:center;gap:10px;font:500 14px/1.2 var(--f-sans);color:var(--tinta-suave)}
.cob-capa + .cob-capa{margin-top:2px}
.cob-capa i{flex:none;width:22px;height:22px;border-radius:5px;background:var(--c)}
.cob-capa.propia{font-weight:600;color:var(--tinta)}
.cob-do{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:6px}
.cob-do a{display:flex;align-items:center;min-height:44px;padding:6px 12px;border:1px solid var(--uva-borde);border-radius:var(--radio-s);
  background:var(--uva-suave);font:600 14px/1.25 var(--f-sans);color:var(--uva);text-decoration:none}
@media (hover:hover) and (pointer:fine){.cob-do a:hover{border-color:var(--uva)}}
.cob-do a:focus-visible{outline:2px solid var(--uva);outline-offset:2px}
.cob-dibujo > p:not(.cob-h){margin:0}
@media (max-width:559px){.cob-do{grid-template-columns:1fr 1fr}.cob-do a{min-height:40px}.cob-capa i{width:18px;height:18px}}
.terr-cal{margin:0}
.terr-cal-b{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:11px 20px;border-radius:var(--radio-pastilla);background:var(--uva);color:var(--sobre-uva);font:600 16px/1.25 var(--f-sans);text-decoration:none;transition:background-color 160ms var(--ease-out)}
.terr-cal-b svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
@media (hover:hover) and (pointer:fine){.terr-cal-b:hover{background:color-mix(in srgb,var(--uva) 86%,var(--tinta))}}
.terr-mapa{margin:0;display:grid;gap:8px;align-content:start;min-width:0}
.terr-mapa .zona-svg{max-height:260px;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-l);padding:6px;box-sizing:border-box}
.terr-mapa figcaption{display:grid;gap:4px}
.terr-mapa-t{font:600 14px/1.35 var(--f-sans);color:var(--tinta)}
.terr-mapa .zona-leyenda{font-size:12.5px}
.terr-mapa-mas{font:var(--t-nota);color:var(--tinta-suave)}
.terr-mapa-mas > summary{cursor:pointer;color:var(--uva);padding:4px 0;list-style-position:inside}
.terr-mapa-mas > div{display:grid;gap:8px;padding-top:6px}
.terr-mapa-mas .zona-partes{font-size:13.5px;padding-left:1.1em}
.terr-mapa-mas .zona-aviso{font-weight:500;color:var(--tinta)}
@media (max-width:899px){.terr-mapa{max-width:26rem}.terr-mapa .zona-svg{max-height:200px}}
.tarea{display:grid;gap:var(--espacio-s);scroll-margin-top:16px;min-width:0;border:1px solid var(--filete);border-radius:var(--radio-l);padding:18px 20px 4px}
.tarea > h2,.tambien > h2{font:var(--t-titular-2);letter-spacing:var(--ls-titular-2)}
.tarea > h2.no-toca{color:var(--tinta-suave)}
.tarea > h2 .motivo{margin-top:4px}
.tarea-intro p{color:var(--tinta-suave);max-width:62ch}
.tarea-intro .detalle-idea{font-weight:400}
.tarea .detalle-preguntas{margin-bottom:0}
.tarea .detalle-p:last-child{border-bottom:0}
@media (max-width:560px){.tarea{padding:14px 14px 2px}}
.tambien{display:grid;gap:var(--espacio-s);scroll-margin-top:16px}
.tambien-intro{color:var(--tinta-suave);max-width:62ch}
/* Una línea morada a la izquierda recorre los ámbitos, de «Viña» a «Reglas que valen siempre» (Iñaki, 20-10) */
.tambien-ambitos{display:grid;border-top:1px solid var(--filete);border-left:2px solid var(--uva);padding-left:16px}
@media (max-width:560px){.tambien-ambitos{padding-left:12px}}
.tambien-ambito{border-bottom:1px solid var(--filete)}
.tambien-ambito > summary{display:flex;align-items:center;gap:6px 16px;min-height:48px;padding:10px 2px;cursor:pointer;list-style:none}
.tambien-ambito > summary::-webkit-details-marker{display:none}
.tambien-ambito > summary::after{content:"";flex:none;width:9px;height:9px;margin-left:auto;border-right:2px solid var(--uva);border-bottom:2px solid var(--uva);transform:rotate(45deg) translateY(-3px);transition:transform 180ms var(--ease-out)}
.tambien-ambito[open] > summary::after{transform:rotate(-135deg) translateY(-2px)}
.tambien-t{flex:none;font:600 16px/1.35 var(--f-sans);color:var(--tinta)}
.tambien-que{min-width:0;font:var(--t-nota);color:var(--tinta-suave);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){.tambien-ambito > summary:hover .tambien-t{color:var(--uva)}}
@media (max-width:560px){.tambien-ambito > summary{flex-wrap:wrap}.tambien-que{order:3;flex-basis:100%;white-space:normal}}
.tambien-ambito .enlaces{border-top:0;margin:0 0 12px}
.tambien-ambito .enlaces li:last-child{border-bottom:0}
.tambien-ccaa{flex-basis:100%;font:var(--t-nota);color:var(--tinta-suave)}
.tambien-ccaa a{color:var(--tinta-suave)}
.tambien-pagina{font:var(--t-nota)}
@media (prefers-reduced-motion:reduce){.tambien-ambito > summary::after,.terr-cal-b{transition:none}}
.terr-fuentes{margin-bottom:0}

/* Ficha plegable */
.ficha{background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-m);scroll-margin-top:16px}
.ficha > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:6px 12px;align-items:start;padding:12px 14px}
.ficha > summary::-webkit-details-marker{display:none}
.ficha > summary::after{content:"";width:9px;height:9px;margin-top:6px;border-right:2px solid var(--tinta-suave);border-bottom:2px solid var(--tinta-suave);transform:rotate(45deg);transition:transform 160ms var(--ease-out)}
.ficha[open] > summary::after{transform:rotate(225deg)}
.ficha-t{font-weight:600;line-height:1.35}
.ficha-chips{grid-column:1;display:flex;flex-wrap:wrap;gap:4px 6px}
.chip{font:500 11.5px/1.2 var(--f-mono);background:var(--panel);color:var(--tinta-suave);border-radius:var(--radio-s);padding:4px 7px}
.ficha-c{display:grid;gap:var(--espacio-s);padding:0 14px 14px;border-top:1px solid var(--filete);padding-top:12px;font-size:15px}
.ficha-c .corto{font-size:14.5px}
.ficha-c .norma ul{font-size:13.5px}
.ficha-c h4{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);margin:0}

/* Operación: antes, durante y después */
.flujo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--espacio-s);counter-reset:paso}
.paso{--c:var(--envero-1);background:var(--hoja);border:1px solid var(--filete);border-top:5px solid var(--c);border-radius:var(--radio-m);padding:14px 16px;display:grid;gap:8px;align-content:start}
.paso:nth-child(2){--c:var(--envero-3)}
.paso:nth-child(3){--c:var(--envero-5)}
.paso h2{font:var(--t-titular-3)}
.paso ul{margin:0;padding-left:18px;display:grid;gap:8px;font-size:15px}
/* Las pastillas nunca se salen de su tarjeta: si el nombre no cabe en una línea, se parte en dos (max-width y sin nowrap) */
.ref{display:inline-block;font:500 11px/1.2 var(--f-mono);background:var(--panel);color:var(--tinta-suave);border-radius:var(--radio-s);padding:3px 6px;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.ref:hover{color:var(--uva)}
@media (max-width:760px){
  .flujo{grid-template-columns:minmax(0,1fr)}
}

/* Término */
.definicion{background:var(--uva-suave);border-left:4px solid var(--uva);border-radius:var(--radio-m);padding:14px 16px;font:var(--t-entradilla)}
.termino-sec{display:grid;gap:8px}
.termino-sec ul{margin:0;padding-left:20px;display:grid;gap:6px}
/* En una operación (la página ancha, por el flujo de tres pasos), la ficha fácil mide lo mismo que en un documento */
.art-ancha .facil{width:100%;max-width:46rem}

/* Portada: los términos, como un glosario (la palabra y su definición corta), en filas con filete */
.glosario{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr));column-gap:var(--espacio-l);border-top:1px solid var(--filete)}
.glosa{height:100%;box-sizing:border-box;display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:2px 14px;align-items:baseline;padding:11px 2px 12px;border-bottom:1px solid var(--filete);color:var(--tinta);text-decoration:none}
.glosa b{font-weight:700;font-size:16px;line-height:1.3;overflow-wrap:anywhere}
.glosa span{font-size:15px;line-height:1.4;color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.glosa:hover b{color:var(--uva)}}
@media (max-width:420px){.glosa{grid-template-columns:minmax(0,1fr)}}

/* Modo «Fácil» y «Al detalle» (modo.js). La página lleva las dos partes; modo.js pone data-modo-actual en <html> antes de pintar.
   Sin JavaScript no hay data-modo-actual: se ven las dos, primero la fácil, y el interruptor no sale. */
html[data-modo-actual="facil"] [data-modo="detalle"],
html[data-modo-actual="detalle"] [data-modo="facil"],
html:not([data-modo-actual]) .modo{display:none}
.modo-parte{display:grid;gap:var(--espacio-l);min-width:0}
.art-cab{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px}
.art-cab .migas{flex:1 1 15rem}
/* El interruptor, arriba a la derecha: el elegido en tinta y subrayado en uva, como el menú */
.modo{margin-left:auto;display:flex;align-items:center;gap:8px;font:600 14.5px/1 var(--f-sans)}
.modo-b{min-height:36px;padding:8px 1px 6px;border:0;border-bottom:2px solid transparent;background:none;color:var(--tinta-suave);font:inherit;cursor:pointer;
  transition:color 160ms ease,border-color 160ms ease,transform 160ms var(--ease-out)}
html[data-modo-actual="facil"] .modo-b[data-modo-elige="facil"],
html[data-modo-actual="detalle"] .modo-b[data-modo-elige="detalle"]{color:var(--tinta);border-bottom-color:var(--uva)}
.modo-b:active{transform:scale(.97)}
.modo-sep{color:var(--tinta-suave);font-weight:400}
/* El óvalo a mano alrededor de «Al detalle»: decorativo, por encima del botón y sin ocupar sitio (posición absoluta, sin eventos).
   Trazo fino en uva que no engorda al estirarse; el final de la vuelta, más fino. En «Al detalle» se funde: es el único
   movimiento, porque el óvalo se ve en cada página que se abre (emil-design-eng: lo que se ve a menudo no se anima). */
.modo-b{position:relative}
.modo-trazo{position:absolute;left:-7px;top:-3px;width:calc(100% + 16px);height:calc(100% + 6px);overflow:visible;pointer-events:none;
  fill:none;stroke:var(--uva);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;transition:opacity 160ms ease}
.modo-trazo path{vector-effect:non-scaling-stroke}
.modo-trazo .modo-trazo-fin{stroke-width:1.1px}
html[data-modo-actual="detalle"] .modo-trazo{opacity:0}
@media (hover:hover) and (pointer:fine){.modo-b:hover{color:var(--tinta)}}
@media (pointer:coarse){.modo-b{min-height:44px}}
/* En fácil, el título de la página sigue en el HTML para los lectores de pantalla y los buscadores; el que se ve es la palabra de la ficha */
html[data-modo-actual="facil"] .art-h1{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.art-h1:focus{outline:none}
.perfil-caja{display:grid;gap:8px;margin-top:calc(var(--espacio-l) * -.6)}
.perfil-caja .perfil-enlace{margin-top:0}
/* Al cambiar de modo, la parte que entra aparece sin salto (solo al cambiar, no al cargar la página) */
html[data-modo-cambia] [data-modo]{animation:modo-entra 220ms var(--ease-out)}
@keyframes modo-entra{from{opacity:0;transform:translateY(6px)}}

/* La ficha de la Wiki (/lenguaje): la ficha de diccionario en EB Garamond y cuatro preguntas, sobre una cuadrícula fina.
   Esquinas rectas y filetes de 1 px, como la ficha de CAE que eligió Iñaki. */
.facil{--f-serif:"EB Garamond",Georgia,"Times New Roman",serif;--rejilla:color-mix(in srgb,var(--tinta) 4.5%,transparent);--col:minmax(9rem,12.5rem);
  border:1px solid var(--filete);background-color:var(--fondo);
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);background-size:24px 24px}
.facil-q > div{display:grid;grid-template-columns:var(--col) minmax(0,1fr)}
/* La palabra va a la izquierda, en la columna de las preguntas (--colw, el ancho máximo de --col), si cabe. Si no cabe, va encima
   de su definición: la definición pide justo el resto de la fila, así que una palabra más ancha que la columna la manda a la
   línea de abajo (flex-wrap). Lo decide el ancho real de cada palabra, en cada pantalla, no una lista ni su número de letras.
   El filete entre las dos es una sombra de la definición: al apilarse cae sobre el borde de la ficha y no se ve. */
.entrada{--colw:12.5rem;display:flex;flex-wrap:wrap}
.entrada > p{margin:0;padding:16px 22px;display:flex;align-items:center}
.entrada-palabra{flex:0 0 auto;min-width:var(--colw);max-width:100%}
.entrada-palabra dfn{min-width:0;overflow-wrap:anywhere}
.entrada > .entrada-def{flex:1 1 calc(100% - var(--colw) - 1px);min-width:0;box-shadow:-1px 0 0 var(--filete)}
.entrada-palabra dfn{font:700 clamp(30px,5vw,40px)/1.05 var(--f-serif);font-style:normal;letter-spacing:-.005em;color:var(--tinta)}
.entrada-def{font:400 clamp(19px,2.8vw,25px)/1.3 var(--f-serif);color:var(--tinta);text-wrap:pretty}
.entrada-def em{margin-right:.2em}
/* Una locución («Documento de acompañamiento», categoría «loc. sust.») va algo más pequeña */
.entrada-loc .entrada-palabra dfn{font-size:clamp(26px,4.2vw,34px);line-height:1.08}
.facil-q{margin:0}
.facil-q > div{border-top:1px solid var(--filete)}
.facil-q dt{padding:15px 22px;border-right:1px solid var(--filete);font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave)}
.facil-q dd{margin:0;padding:11px 22px 12px;display:grid;gap:6px;align-content:start;font-size:16px;line-height:1.45;min-width:0}
.facil-l{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.facil-l li{position:relative;padding-left:15px}
.facil-l li::before{content:"";position:absolute;left:1px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--uva);transition:background-color 160ms ease}
/* Con tu perfil del Calendario: la línea tuya lleva «Tú»; las otras, en gris */
[data-facil-perfil]{transition:color 160ms ease}
.facil-otra{color:var(--tinta-suave)}
.facil-l li.facil-otra::before{background:var(--filete)}
[data-facil-perfil] .tuyo{vertical-align:.12em}
/* Con el filtro «Tu bodega»: qué cambia tu Comunidad y tu DO, con el punto de la barra */
.facil-filtro{font-size:15px;line-height:1.4}
.facil-filtro::before{content:"";display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:var(--uva);vertical-align:.08em}
.facil-filtro b{font-weight:700}
.facil-mas{margin:0;padding:12px 22px 13px;border-top:1px solid var(--filete);font-size:15px;line-height:1.45;color:var(--tinta-suave)}
.facil-mas a{font-weight:600}
/* «Con GrapeIQ» en «Fácil»: la fila entera en morado claro, con el logo en la columna de la pregunta */
.facil-q > .facil-giq{background:color-mix(in srgb,var(--uva) 8%,var(--fondo));border-top:1px solid var(--uva-borde)}
.facil-giq dt{display:grid;align-content:start;gap:6px;border-right-color:var(--uva-borde);color:var(--uva)}
.facil-giq dd{padding-top:14px;padding-bottom:16px;gap:8px}
/* Móvil: la pregunta va en la misma línea que su respuesta, para que la ficha quepa en una pantalla */
@media (max-width:560px){
  .entrada > p{padding:14px 16px 0}
  .entrada-palabra{min-width:0}
  .entrada > .entrada-def{flex-basis:100%;padding:4px 16px 14px;box-shadow:none}
  .facil-q > div{display:block;padding:10px 16px 11px}
  /* La etiqueta mide menos que una línea de texto (21,45 px): si no, empuja también la segunda */
  .facil-q dt{float:left;margin:1px 9px 0 0;padding:0;border:0;line-height:20px}
  /* align-content:normal: con otro valor, el bloque se aparta de la etiqueta flotante en lugar de rodearla */
  .facil-q dd{display:block;align-content:normal;padding:0;font-size:15px;line-height:1.43}
  .facil-l{display:block}
  .facil-l li + li{margin-top:3px}
  .facil-q dd > * + *{margin-top:4px}
  .facil-mas{padding:10px 16px 11px;font-size:14.5px}
  .facil-giq dt{float:none;display:flex;align-items:center;gap:8px;margin:0 0 8px}
}

/* Franja B: la viña al final, sin texto encima. La foto es assets/franja.webp. */
.franja{position:relative;height:clamp(150px,26vw,260px);overflow:hidden;margin-top:var(--espacio-xl)}
.franja::before{content:"";position:absolute;inset:0;background:url("franja.webp") center/cover no-repeat;opacity:.42;filter:saturate(.8) blur(1px);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 75%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 35%,#000 75%,transparent)}

@media (prefers-reduced-motion:reduce){
  .puerta,.tarjeta,.ficha > summary::after,.nb-v,.cuando-fila,.modo-b,[data-facil-perfil],.facil-l li::before,.mapa-ccaa a path,.mapa-capas button{transition:none}
  .mapa-capas button:active{transform:none}
  a.puerta:hover,.tarjeta:hover,.modo-b:active{transform:none}
  html[data-modo-cambia] [data-modo]{animation:modo-funde 160ms linear}
}
@keyframes modo-funde{from{opacity:0}}

/* Portada (Iñaki, 19-10): primero la utilidad y que es gratis; la cobertura, después y en corto. Las operaciones van antes que
   los documentos, los documentos pesan menos, el mapa ocupa menos y los términos son una muestra con su glosario aparte. */
.portada-alcance{font:var(--t-nota);color:var(--tinta-suave);max-width:70ch}
/* «Hoy cubre» con la misma letra que la frase, solo en negrita: en versalitas espaciadas parecían dos fuentes (Raúl, 20-10) */
.portada-alcance span{font-weight:700;color:var(--tinta)}
.seccion-intro{margin:-6px 0 var(--espacio-s);color:var(--tinta-suave);max-width:62ch}
.puertas-nota{margin-top:10px;font:var(--t-nota);color:var(--tinta-suave)}
.puertas-nota a{color:var(--uva)}
.seccion-mas{margin-top:var(--espacio-s)}
.seccion-mas a{font-weight:600;color:var(--uva)}
/* La página «Territorios» (Iñaki, 20-10): el mapa de la portada y, debajo, la lista entera, en dos columnas si caben */
.territorios-listas{display:grid;gap:var(--espacio-l)}
@media (min-width:860px){.territorios-listas{grid-template-columns:1fr 1fr;column-gap:var(--espacio-xl)}}
.territorios-listas section{display:grid;gap:var(--espacio-s);align-content:start}
.territorios-listas .enlaces a{font-weight:600}
/* La página «Documentos y trámites» (Iñaki, 20-10): qué hay aquí, el catálogo por ámbitos (nombre, para qué sirve y, en segundo
   plano, de dónde viene) y «Con GrapeIQ», con los dos ejes y el paso al piloto. Sin cajas dentro del catálogo: lo ordenan los
   títulos de los ámbitos y los filetes */
.docs-indice{gap:var(--espacio-xl)}
.docs-intro{margin:0;max-width:60ch;font-size:16px;line-height:1.55;color:var(--tinta-suave)}
.docs-salto{margin:0}
.docs-salto a{font-weight:600;color:var(--uva)}
.docs-catalogo{columns:2 22rem;column-gap:var(--espacio-m)}
/* Cada ámbito, en su recuadro con contorno (Iñaki, 20-10, segunda pasada); el que más pesa, con fondo de uva claro */
.docs-ambito{break-inside:avoid;display:grid;gap:4px;margin-bottom:var(--espacio-m);padding:16px 18px 8px;border:1px solid var(--filete);
  border-radius:var(--radio-l);background:var(--hoja)}
.docs-ambito.destacado{background:var(--uva-suave);border-color:var(--uva-borde)}
.docs-ambito-h{margin:0 0 4px;font:600 19px/1.3 var(--f-sans);color:var(--tinta)}
.docs-lista{list-style:none;margin:0;padding:0}
.docs-lista li + li{border-top:1px solid var(--filete)}
.docs-ambito.destacado .docs-lista li + li{border-top-color:var(--uva-borde)}
.docs-e{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:baseline;padding:10px 0;color:inherit;text-decoration:none}
.docs-e b{font:600 17px/1.3 var(--f-sans);color:var(--tinta)}
.docs-e small{font:500 11.5px/1.3 var(--f-mono);letter-spacing:.03em;color:var(--tinta-suave);text-align:right}
.docs-frase{grid-column:1 / -1;font-size:15px;line-height:1.45;color:var(--tinta-suave)}
@media (hover:hover) and (pointer:fine){.docs-e:hover b{color:var(--uva)}}
.docs-e:focus-visible{outline:2px solid var(--uva);outline-offset:2px;border-radius:4px}
@media (max-width:559px){.docs-ambito{padding:14px 14px 6px}}
/* «Con GrapeIQ»: el titular, una línea y el dibujo de lo que entra y lo que sale (/lenguaje). En el escritorio, de izquierda a
   derecha; en el móvil, de arriba abajo */
.docs-giq{gap:14px;padding:22px 24px 24px}
.docs-giq-h{margin:0;font:700 24px/1.2 var(--f-sans);color:var(--tinta);text-wrap:balance}
.docs-giq-intro{font-size:16px;line-height:1.5}
.gd{display:grid;justify-items:center;gap:6px;margin:6px 0 4px}
.gd-entra{margin:0;padding:10px 14px;border:1px dashed color-mix(in srgb,var(--tinta) 35%,transparent);border-radius:var(--radio-m);
  background:var(--hoja);font:600 15px/1.3 var(--f-sans);text-align:center;max-width:12rem}
.gd-flecha{display:block;color:var(--uva-borde)}
.gd-flecha svg{display:block;width:40px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transform:rotate(90deg)}
.gd-racimo{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--hoja);border:1px solid var(--uva-borde)}
.gd-racimo svg{width:34px;height:auto}
.gd-salen{display:grid;gap:14px;width:100%}
.gd-eje{--eje:var(--uva);display:grid;gap:8px}
.gd-eje-02{--eje:var(--raspon)}
.docs-eje-cab{margin:0;font:700 15.5px/1.3 var(--f-sans);color:var(--tinta)}
.gd-cosas{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.5rem,1fr));gap:8px}
.gd-cosas li{display:flex;align-items:center;min-height:52px;padding:8px 12px;border:1px solid var(--uva-borde);border-left:4px solid var(--eje);
  border-radius:var(--radio-s);background:var(--hoja);font:400 14.5px/1.3 var(--f-sans);color:var(--tinta)}
@media (min-width:760px){
  .gd{grid-template-columns:10rem auto auto auto minmax(0,1fr);align-items:center;justify-items:stretch;column-gap:12px}
  .gd-flecha svg{transform:none}
  .gd-entra{max-width:none}
  .gd-cosas{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.docs-giq-botones{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:6px;padding-top:16px;border-top:1px solid var(--uva-borde)}
.docs-boton{display:inline-flex;align-items:center;min-height:48px;padding:11px 22px;border-radius:var(--radio-pastilla);background:var(--uva);
  color:var(--sobre-uva);font:600 16px/1.25 var(--f-sans);text-decoration:none;transition:background-color 160ms var(--ease-out)}
@media (hover:hover) and (pointer:fine){.docs-boton:hover{background:color-mix(in srgb,var(--uva) 86%,var(--tinta))}}
.docs-boton:focus-visible,.docs-giq-mas:focus-visible{outline:2px solid var(--uva);outline-offset:2px}
.docs-giq-mas{font-weight:600;color:var(--uva)}
@media (max-width:559px){.docs-giq{padding:18px 16px 20px}.docs-giq-h{font-size:21px}.gd-cosas{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){.docs-boton{transition:none}}
/* En el móvil, las migas no repiten la página en la que estás (es el título): suben a una sola línea */
@media (max-width:559px){.migas [aria-current],.migas .migas-sep:has(+ [aria-current]){display:none}}
/* Aquí la lista va entera debajo del mapa: el mapa no repite la suya, y el botón de las capas va encima del dibujo */
.territorios-indice .mapa-listas{display:none}
@media (min-width:760px){
  .territorios-indice .mapa{grid-template-columns:minmax(0,26rem);grid-template-rows:none;grid-template-areas:"capas" "lienzo" "pie" "credito"}
}
@media (min-width:760px){
  .mapa{grid-template-columns:max-content minmax(0,24rem)}
  .mapa-bloque .mapa-nombres{line-height:1.7}
}

/* «Al detalle» por preguntas (Iñaki, 19-10; SILICIE de prueba): una entrada breve y respuestas plegables. Cada una empieza por
   la idea práctica; después, pocos puntos o una tabla pequeña, y su norma al lado. Misma letra y tamaño que la ficha fácil. */
.detalle-intro{display:grid;gap:10px;max-width:62ch;margin:var(--espacio-s) 0 var(--espacio-m)}
.detalle-intro p{font:var(--t-entradilla);color:var(--tinta)}
.detalle-preguntas{display:grid;border-top:1px solid var(--filete);margin-bottom:var(--espacio-l)}
.detalle-p{border-bottom:1px solid var(--filete)}
.detalle-p>summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 2px;cursor:pointer;list-style:none;
  font:600 18px/1.35 var(--f-sans);color:var(--tinta)}
.detalle-p>summary::-webkit-details-marker{display:none}
.detalle-p>summary::after{content:"";flex:none;width:10px;height:10px;border-right:2px solid var(--uva);border-bottom:2px solid var(--uva);transform:rotate(45deg) translateY(-3px);transition:transform 180ms var(--ease-out)}
.detalle-p[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.detalle-q{flex:1 1 auto;min-width:0}
@media (hover:hover) and (pointer:fine){.detalle-p>summary:hover .detalle-q{color:var(--uva)}}
.detalle-p>summary:focus-visible{outline:2px solid var(--uva);outline-offset:2px;border-radius:4px}
/* El enlace a una ficha llega a su pregunta, abierta: el título queda por debajo de la barra fija «Tu bodega» (su hueco lo
   guarda tu-bodega.css con scroll-padding-top), con un poco de aire */
.detalle-p,.detalle-ancla{scroll-margin-top:16px}
.detalle-r{display:grid;gap:12px;padding:2px 2px 20px;max-width:66ch;min-width:0}
.detalle-idea{font-weight:500;color:var(--tinta)}
.detalle-p-texto{color:var(--tinta)}
.detalle-norma{font:var(--t-nota);color:var(--tinta-suave)}
.detalle-norma a{color:var(--tinta-suave)}
.detalle-r .lista li{padding-left:2px}
/* Lo que no es de tu perfil, en gris y con su motivo; el título de la pregunta sigue en tinta */
.detalle-r .no-toca,.detalle-r .depende{color:var(--tinta-suave)}
.detalle-r .no-toca .motivo,.detalle-r .depende .motivo,.detalle-q .motivo{margin-top:2px}
.detalle-q .motivo{font-weight:500}
/* Las tablas: la primera columna es la cabecera de su fila. Con tres columnas o más, en el móvil cada fila se apila y cada dato
   lleva delante el nombre de su columna (data-col), para que no haya que desplazar la tabla de lado. */
.detalle-tabla{overflow-x:auto;border:1px solid var(--filete);border-radius:var(--radio-s);background:var(--hoja)}
.detalle-tabla table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.45}
.detalle-tabla thead th{text-align:left;font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);padding:10px 12px;border-bottom:1px solid var(--filete);vertical-align:bottom}
.detalle-tabla tbody th,.detalle-tabla td{padding:10px 12px;vertical-align:top;text-align:left}
.detalle-tabla tbody th{font-weight:600;color:var(--tinta)}
.detalle-tabla tbody tr+tr>*{border-top:1px solid var(--filete)}
.detalle-tabla .motivo{margin-top:4px}
@media (max-width:560px){
  .detalle-apila{overflow:visible}
  .detalle-apila table,.detalle-apila tbody,.detalle-apila tbody tr,.detalle-apila tbody th,.detalle-apila tbody td{display:block}
  .detalle-apila thead{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .detalle-apila tbody tr{padding:11px 14px 12px}
  .detalle-apila tbody tr+tr{border-top:1px solid var(--filete)}
  .detalle-apila tbody tr+tr>*{border-top:0}
  .detalle-apila tbody th{padding:0 0 6px}
  .detalle-apila tbody td{padding:0}
  .detalle-apila tbody td+td{margin-top:6px}
  .detalle-apila td::before{content:attr(data-col);display:block;font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);margin-bottom:1px}
}
/* La relación va entre los dos datos y se lee como parte de la frase: «tiene que ser igual a», «se compara con», «se toma de».
   Mismo código que el diagrama de cruces: igual en uva, se compara con trazo discontinuo, se toma de en verde. */
.cruce-tipo{padding:1px 6px;border-radius:var(--radio-pastilla);font-weight:600;white-space:nowrap;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cruce-igual{background:color-mix(in srgb,var(--uva) 11%,var(--hoja));color:var(--uva)}
.cruce-compara{border:1px dashed color-mix(in srgb,var(--tinta) 38%,transparent);color:var(--tinta)}
.cruce-toma{background:var(--verde-suave);color:var(--verde-texto)}
/* Un ejemplo con datos inventados lo dice en su título */
.detalle-ej{display:inline-block;margin-left:8px;padding:2px 7px;border:1px dashed var(--ambar);border-radius:var(--radio-pastilla);font:500 10.5px/1.3 var(--f-mono);color:var(--ambar-texto);vertical-align:2px;white-space:nowrap}
@media print{.detalle-p>.detalle-r{display:grid!important}.detalle-p>summary::after{display:none}}
@media (prefers-reduced-motion:reduce){.detalle-p>summary::after{transition:none}}

/* Portada, segunda pasada (Iñaki, 19-10). Operaciones: un recorrido por la actividad de la bodega, sin el diagrama de la línea;
   lo que puede pasar en cualquier momento, aparte. O, para comparar, un mapa de acciones. */
.recorrido-ops{display:grid;gap:14px}
/* El hilo va de la uva verde al vino, con los colores del envero; cada tramo, un punto de su color y debajo su caja */
.ro-tramos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0 12px;position:relative}
.ro-tramos::before{content:"";position:absolute;left:27px;right:0;top:7px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--envero-1),var(--envero-2) 28%,var(--envero-3) 55%,var(--envero-4) 78%,var(--envero-5))}
.ro-tramo{position:relative;display:grid;grid-template-rows:auto 1fr;gap:14px}
.ro-punto{position:relative;z-index:1;width:18px;height:18px;margin-left:18px;border-radius:50%;background:var(--c);box-shadow:0 0 0 4px var(--fondo)}
.ro-caja{display:grid;gap:12px;align-content:start;padding:16px 16px 14px;background:var(--hoja);border:1px solid var(--filete);border-top:3px solid var(--c);border-radius:var(--radio-m)}
.ro-caja h3,.ro-aparte h3{margin:0;display:flex;align-items:center;gap:10px}
.ro-ico{flex:none;width:38px;height:38px;padding:7px;border-radius:10px;color:var(--tinta);background:color-mix(in srgb,var(--c) 20%,var(--hoja))}
.ro-caja h3 span{display:grid;font:700 17px/1.2 var(--f-sans);color:var(--tinta)}
.ro-caja h3 small{font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);color:var(--tinta-suave)}
.ro-caja ul,.ro-aparte ul,.accion ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ro-caja ul{gap:0;border-top:1px solid var(--filete)}
.ro-caja li+li{border-top:1px solid color-mix(in srgb,var(--filete) 60%,transparent)}
.ro-caja a{position:relative;display:block;padding:8px 0 8px 15px;font:500 15.5px/1.3 var(--f-sans);color:var(--tinta);text-decoration:none}
.ro-caja a::before{content:"";position:absolute;left:1px;top:calc(8px + .45em);width:6px;height:6px;border-radius:50%;background:var(--c)}
.ro-caja a:hover{color:var(--uva);text-decoration:underline;text-underline-offset:3px}
/* Lo que no va en el recorrido tiene otro tratamiento: una banda gris, con sus operaciones como fichas */
.ro-aparte{--c:var(--tinta);display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--tinta) 24%,transparent);border-radius:var(--radio-m);background:var(--panel)}
.ro-aparte .ro-ico{width:34px;height:34px;padding:6px;background:var(--hoja)}
.ro-aparte h3 span{max-width:17ch;font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave)}
.ro-aparte ul{display:flex;flex-wrap:wrap;gap:8px}
.ro-aparte a{display:inline-block;padding:7px 12px;border:1px solid var(--filete);border-radius:999px;background:var(--hoja);font:500 15px/1.2 var(--f-sans);color:var(--tinta);text-decoration:none}
.ro-aparte a:hover{border-color:var(--uva);color:var(--uva)}
.recorrido-ops a:focus-visible{outline:2px solid var(--uva);outline-offset:2px;border-radius:4px}
.acciones a{font:600 16px/1.3 var(--f-sans);color:var(--tinta);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--uva) 40%,transparent);text-underline-offset:3px}
.acciones a:hover{color:var(--uva);text-decoration-color:currentColor}
.ops-nota{margin-top:10px;font:var(--t-nota);color:var(--tinta-suave)}
@media (max-width:900px){
  /* En estrecho, el hilo baja por la izquierda */
  .ro-tramos{grid-template-columns:minmax(0,1fr);gap:12px;padding-left:34px}
  /* Un tramo de hilo por caja, del color de la suya al de la siguiente; empieza en el primer punto y acaba en el último */
  .ro-tramos::before{content:none}
  .ro-tramo:not(:last-child)::after{content:"";position:absolute;left:-27px;top:33px;width:4px;height:calc(100% + 12px);background:linear-gradient(var(--c),var(--n))}
  .ro-tramo{display:block}
  .ro-punto{position:absolute;left:-34px;top:24px;margin:0}
  .ro-caja{border-top-width:1px;border-left:3px solid var(--c)}
  .ro-aparte{flex-direction:column;align-items:flex-start}
  .ro-aparte h3 span{max-width:none}
}
.acciones{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr));gap:10px}
.accion{display:grid;gap:10px;align-content:start;padding:16px 18px;background:var(--hoja);border:1px solid var(--filete);border-radius:var(--radio-l)}
.accion h3{margin:0;font:700 19px/1.2 var(--f-sans);color:var(--uva)}
/* Documentos: cuatro accesos con nombre y una frase, sobre un fondo muy suave; el resto, al desplegar */
.docs-accesos{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:10px}
.doc-acceso{display:grid;gap:4px;align-content:start;height:100%;padding:14px 16px;border:1px solid transparent;border-radius:var(--radio-l);
  background:color-mix(in srgb,var(--tinta) 3.5%,var(--fondo));color:var(--tinta);text-decoration:none;transition:border-color 160ms var(--ease-out)}
.doc-acceso b{font:600 17px/1.25 var(--f-sans)}
.doc-acceso span{font-size:14.5px;line-height:1.4;color:var(--tinta-suave)}
.doc-acceso:hover{border-color:var(--filete)}
.doc-acceso:hover b{color:var(--uva)}
.docs-mas{margin-top:12px}
.docs-mas>summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;list-style:none;font-weight:600;color:var(--uva);text-decoration:underline;text-underline-offset:3px}
.docs-mas>summary::-webkit-details-marker{display:none}
.docs-mas>summary::after{content:"+";text-decoration:none}
.docs-mas[open]>summary::after{content:"–"}
.docs-mas[open]>summary{margin-bottom:8px}
.docs-mas>summary:focus-visible,.doc-acceso:focus-visible{outline:2px solid var(--uva);outline-offset:2px}
/* Términos: una página de diccionario (Iñaki, 19-10). Papel y retícula de las fichas; arriba, las palabras guía en mono;
   las entradas en dos columnas, la palabra en EB Garamond de peso medio (no negrita) y la definición entera, sin cortar */
.dicc{--f-serif:"EB Garamond",Georgia,"Times New Roman",serif;--rejilla:color-mix(in srgb,var(--tinta) 4.5%,transparent);
  border:1px solid var(--filete);background-color:var(--fondo);
  background-image:linear-gradient(var(--rejilla) 1px,transparent 1px),linear-gradient(90deg,var(--rejilla) 1px,transparent 1px);background-size:24px 24px}
.dicc-guia{display:flex;justify-content:space-between;gap:12px;padding:9px 24px;border-bottom:1px solid var(--filete);
  font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave)}
.dicc-rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.dicc-e{display:grid;grid-template-rows:auto 1fr auto;gap:10px;padding:22px 24px 16px;color:var(--tinta);text-decoration:none;transition:background-color 160ms var(--ease-out)}
.dicc-e:nth-child(odd){border-right:1px solid var(--filete)}
.dicc-e:nth-child(n+3){border-top:1px solid var(--filete)}
.dicc-cab{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--tinta) 14%,transparent)}
.dicc-cab dfn{font:500 30px/1.05 var(--f-serif);font-style:normal;letter-spacing:-.01em}
.dicc-cab em{font:italic 400 17px/1 var(--f-serif);color:var(--uva)}
.dicc-def{font:400 19px/1.42 var(--f-serif);text-wrap:pretty}
.dicc-ir{justify-self:start;font:var(--t-etiqueta);letter-spacing:var(--ls-etiqueta);text-transform:uppercase;color:var(--tinta-suave);transition:color 160ms ease}
.dicc-ir::after{content:" \2192"}
.dicc-e:hover{background-color:color-mix(in srgb,var(--uva) 5%,transparent)}
.dicc-e:hover dfn,.dicc-e:hover .dicc-ir{color:var(--uva)}
.dicc-e:focus-visible{outline:2px solid var(--uva);outline-offset:-3px}
@media (max-width:640px){
  .dicc-guia{padding:8px 16px}
  .dicc-rejilla{grid-template-columns:minmax(0,1fr)}
  .dicc-e{padding:18px 16px 14px}
  .dicc-e:nth-child(odd){border-right:0}
  .dicc-e:nth-child(n+2){border-top:1px solid var(--filete)}
  .dicc-cab dfn{font-size:27px}
  .dicc-def{font-size:18px}
}

/* Por dónde vas en las páginas de Comunidad y DO (Iñaki, 20-10), igual que en la página GrapeIQ de la web.
   Ancho (desde 1420 px): una raya por apartado y, más finas y metidas, las de los bloques de lo que añade el propio
   territorio; al pasar el ratón se abre el índice. Estrecho: una franja fina justo debajo de la barra «Tu bodega».
   Lo pinta wiki.js. */
.art[data-territorio] > section,.art[data-territorio] .tema{scroll-margin-top:80px}
/* En la página por tareas, el enlace a una ficha abre su pregunta: su título queda por debajo de la barra y de la franja */
.art[data-territorio] .detalle-p,.art[data-territorio] .detalle-ancla{scroll-margin-top:56px}
.recorrido{position:fixed;z-index:15;left:max(24px,calc((100vw - var(--sitio-ancho,72rem)) / 2 - 150px));top:50%;transform:translateY(-50%)}
.recorrido[hidden],.recorrido-movil[hidden]{display:none}
.recorrido-rayas{display:grid;gap:11px;padding:12px 16px 12px 0}
.recorrido-rayas i{display:block;width:var(--l);height:2px;border-radius:2px;background:color-mix(in srgb,var(--uva) 20%,var(--fondo));
  transition:width 220ms var(--ease-out),background-color 220ms var(--ease-out)}
.recorrido-rayas i.sub{height:1.5px;margin:-4px 0 -4px 10px}
.recorrido-rayas i.pasada{background:color-mix(in srgb,var(--uva) 45%,var(--fondo))}
.recorrido-rayas i.actual{width:calc(var(--l) + 12px);background:var(--uva)}
.recorrido-rayas i.sub.actual{width:calc(var(--l) + 8px)}
.recorrido-indice{position:absolute;left:-8px;top:50%;width:max-content;max-width:20rem;max-height:calc(100vh - 140px);overflow:auto;list-style:none;margin:0;padding:8px;
  background:var(--fondo);border:1px solid var(--filete);border-radius:var(--radio-s);box-shadow:0 10px 30px color-mix(in srgb,var(--tinta) 10%,transparent);
  opacity:0;pointer-events:none;transform:translate(-6px,-50%);transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out)}
.recorrido:hover .recorrido-indice,.recorrido:focus-within .recorrido-indice{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.recorrido-indice a{display:block;padding:6px 10px;border-radius:6px;font:500 14px/1.3 var(--f-sans);color:var(--tinta-suave);text-decoration:none}
.recorrido-indice .sub a{padding:4px 10px 4px 24px;font-size:13px}
.recorrido-indice a:hover{background:color-mix(in srgb,var(--uva) 7%,var(--fondo));color:var(--tinta)}
.recorrido-indice a[aria-current]{color:var(--uva);font-weight:700}
.recorrido-indice a:focus-visible{outline:2px solid var(--uva);outline-offset:1px}
/* La franja es siempre opaca: entra deslizándose desde debajo de la barra «Tu bodega», sin fundido. Con un fundido, mientras dura
   (o si el navegador lo frena, en segundo plano) deja ver el texto de debajo en transparencia */
.recorrido-movil{position:fixed;z-index:14;left:0;right:0;top:0;display:flex;align-items:center;gap:10px;height:38px;padding:0 16px;
  background:var(--fondo);border-bottom:1px solid var(--filete);pointer-events:none;visibility:hidden;transform:translateY(-100%);
  transition:transform 180ms var(--ease-out),visibility 0s linear 180ms}
.recorrido-movil.visible{visibility:visible;transform:none;transition:transform 180ms var(--ease-out),visibility 0s}
.recorrido-movil-n{flex:none;font:500 12px/1 var(--f-mono);color:var(--tinta-suave)}
.recorrido-movil-t{min-width:0;font:600 14px/1.2 var(--f-sans);color:var(--tinta);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recorrido-movil-barra{position:absolute;left:0;right:0;bottom:-1px;height:2px}
.recorrido-movil-barra span{display:block;height:100%;background:var(--uva);transform:scaleX(0);transform-origin:left}
@media (prefers-reduced-motion:reduce){.recorrido-rayas i,.recorrido-indice,.recorrido-movil{transition:none}}