/* Guía Guangzhou · hoja única, servida desde /css/gg-<hash>.css
   Orden: tipos · fichas de color · base · piezas · portada · interior ·
   directorio · contacto · pie · impresión.
   Móvil primero. Un solo tema claro. Los cortes van en em. */

@font-face{font-family:Fraunces;font-weight:400 700;font-style:normal;font-display:swap;src:url(/fuentes/fraunces-latin.woff2) format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Fraunces;font-weight:400 700;font-style:normal;font-display:swap;src:url(/fuentes/fraunces-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Public Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url(/fuentes/public-sans-latin.woff2) format("woff2");unicode-range:U+0-FF,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Public Sans";font-weight:400 700;font-style:normal;font-display:swap;src:url(/fuentes/public-sans-latin-ext.woff2) format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* · fichas de color · el acento vive en reglas y bordes, nunca en fondos · */
:root{
  --papel:#fff;
  --tinta:#15171a;
  --grafito:#4c5158;
  --carmin:#8c2f39;
  --carmin-hondo:#6b2129;
  --carmin-tenue:#f7eef0;
  --raya:#dfdcd6;
  --raya-suave:#eeece8;
  --verde:#25d366;
  --verde-hondo:#1cab52;
  --letra:"Public Sans",system-ui,"Segoe UI",Arial,sans-serif;
  --titulo:Fraunces,Georgia,"Times New Roman",serif;
  --ancho:74rem;
  --canal:1.25rem;
  --lectura:37rem;
}

/* · base · el reset va en :where() para que cualquier regla propia gane sin peso · */
*,::before,::after{box-sizing:border-box}
:where(body,h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote){margin:0}
:where(ul,ol){padding:0;list-style:none}
:where(img,svg){display:block;max-width:100%}
:where(button,input,select){font:inherit;color:inherit}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--letra);
  font-size:17px;
  line-height:1.7;
  text-rendering:optimizeLegibility;
  padding-bottom:4.25rem; /* sitio para la barra de acción móvil */
}
a{color:var(--carmin);text-underline-offset:.16em;text-decoration-thickness:.07em}
a:hover{color:var(--carmin-hondo)}
:focus-visible{outline:2px solid var(--carmin);outline-offset:2px}
strong{font-weight:650}
hr{border:0;border-top:1px solid var(--raya);margin:2rem 0}

h1,h2,h3{font-family:var(--titulo);font-weight:600;line-height:1.16;color:var(--tinta)}
h1{font-size:1.85rem;letter-spacing:-.012em}
h2{font-size:1.35rem;margin-top:2.4rem}
h3{font-family:var(--letra);font-weight:680;font-size:1.05rem;line-height:1.35;margin-top:1.6rem}
h4{font-family:var(--letra);font-weight:650;font-size:.95rem;margin:1.2rem 0 .2rem}

/* · el dispositivo de la casa: regla carmín pegada bajo cada H2 · */
.texto h2,.preguntas h2,.bloque-h{position:relative;padding-bottom:.5rem}
.texto h2::after,.preguntas h2::after,.bloque-h::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:var(--carmin)
}

.ancho{width:100%;max-width:var(--ancho);margin-inline:auto;padding-inline:var(--canal)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{position:absolute;left:-999px;top:0;background:var(--tinta);color:#fff;padding:.6rem 1rem;z-index:40}
.saltar:focus{left:0}
.cifra{font-variant-numeric:tabular-nums;white-space:nowrap}
.zh{font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",var(--letra);overflow-wrap:break-word}

/* · botones · */
.boton{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-weight:650;font-size:.95rem;line-height:1.2;text-decoration:none;
  padding:.72rem 1.15rem;border:1px solid transparent;border-radius:3px;cursor:pointer
}
.boton svg{width:1.1em;height:1.1em;fill:currentColor;flex:none}
.verde{background:var(--verde);color:#fff;border-color:var(--verde)}
.verde:hover{background:var(--verde-hondo);border-color:var(--verde-hondo);color:#fff}
.reserva{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.reserva:hover{background:#000;border-color:var(--carmin);color:#fff}
.hueco{background:transparent;color:var(--tinta);border-color:var(--raya)}
.hueco:hover{border-color:var(--tinta);color:var(--tinta)}
.chico{padding:.45rem .8rem;font-size:.85rem}

/* · cabecera · */
.cabecera{border-bottom:1px solid var(--raya);background:var(--papel)}
.cabecera-fila{display:flex;align-items:center;gap:.9rem;min-height:3.9rem}
.marca{display:inline-flex;align-items:center;gap:.55rem;color:var(--tinta);text-decoration:none;font-weight:700;font-size:1rem;letter-spacing:-.01em;margin-right:auto}
.marca svg{width:26px;height:26px}
.rutas{display:none}
.rutas ul{display:flex;gap:1.15rem;align-items:center}
.rutas a{color:var(--tinta);text-decoration:none;font-size:.92rem;font-weight:550;padding-block:.35rem;border-bottom:2px solid transparent}
.rutas a:hover{border-bottom-color:var(--raya)}
.rutas a[aria-current]{border-bottom-color:var(--carmin)}
.verde-cabecera{display:none}

.menu{position:relative}
.menu>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .7rem;border:1px solid var(--raya);border-radius:3px;font-size:.88rem;font-weight:600}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none}
.menu[open]>summary{border-color:var(--tinta)}
.menu-lista{position:absolute;right:0;top:calc(100% + .5rem);z-index:30;background:var(--papel);border:1px solid var(--raya);min-width:14rem;padding:.35rem 0;box-shadow:0 12px 28px rgba(21,23,26,.13)}
.menu-lista a{display:block;padding:.6rem 1rem;color:var(--tinta);text-decoration:none;font-size:.95rem}
.menu-lista a:hover{background:var(--carmin-tenue)}
.menu-lista a[aria-current]{box-shadow:inset 3px 0 0 var(--carmin);font-weight:650}

/* · bloque de título de las páginas interiores · */
.titular{border-bottom:1px solid var(--raya);padding-block:1.5rem 1.4rem}
.migas{font-size:.82rem;color:var(--grafito);margin-bottom:.7rem}
.migas ol{display:flex;flex-wrap:wrap;gap:.3rem}
.migas li+li::before{content:"/";margin-right:.3rem;color:var(--raya)}
.migas a{color:var(--grafito)}
.sello{margin-top:.75rem;font-size:.82rem;color:var(--grafito)}

/* · bloque previo a las dos columnas (entrada del directorio, tabla de mercados) · */
.previo{padding-top:1.9rem}
.previo .franja-tabla{margin-top:.6rem}

/* · rejilla de dos columnas · */
.reja{display:block;padding-block:1.9rem 2.6rem}
.principal{max-width:var(--lectura)}
.entrada{font-size:1.12rem;line-height:1.62;color:var(--tinta);margin-bottom:1.4rem}
.entrada p+p{margin-top:.7rem}
.texto p,.texto ul,.texto ol,.texto dl{margin-top:1rem}
.texto ul li,.texto ol li{position:relative;padding-left:1.1rem;margin-top:.35rem}
.texto ul li::before{content:"";position:absolute;left:.15rem;top:.72em;width:.32rem;height:.32rem;background:var(--carmin)}
.texto ol{counter-reset:paso}
.texto ol li{counter-increment:paso}
.texto ol li::before{content:counter(paso) ".";position:absolute;left:0;color:var(--carmin);font-weight:700;font-size:.88em}
.texto blockquote{border-left:3px solid var(--carmin);padding-left:1rem;color:var(--grafito);margin-top:1.2rem}

/* tablas del cuerpo */
.tabla-ancha{overflow-x:auto;margin-top:1.3rem;border:1px solid var(--raya)}
table{border-collapse:collapse;width:100%;font-size:.93rem}
th,td{text-align:left;padding:.6rem .8rem;border-bottom:1px solid var(--raya-suave);vertical-align:top}
thead th{background:#faf9f7;font-weight:680;border-bottom:2px solid var(--carmin);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}

/* · lateral · */
.lateral{margin-top:2.6rem;display:grid;gap:1.1rem}
.tarjeta{border:1px solid var(--raya);border-top:2px solid var(--carmin);padding:1.05rem 1.1rem 1.2rem}
.tarjeta-h{font-family:var(--letra);font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--carmin);margin:0 0 .6rem}
.tarjeta p{font-size:.92rem;line-height:1.6}
.tarjeta p+p{margin-top:.55rem}
.tarjeta .boton{width:100%;margin-top:.85rem}
.tarifa{font-family:var(--titulo);font-size:1.3rem;font-weight:600;line-height:1.2;color:var(--tinta)}
.tarjeta .tarifa{font-size:1.45rem;line-height:1.2}
.tarifa small{white-space:nowrap;font-family:var(--letra);font-size:.6em;font-weight:500;color:var(--grafito)}
.tarjeta .tarifa small{display:block;margin-top:.15rem}
.tarifa-pie{font-size:.82rem;color:var(--grafito);margin-top:.15rem}
.tarjeta .pasos-cortos+.tarifa-pie{margin-top:.8rem}
.pasos-cortos{counter-reset:corto;margin-top:.8rem}
.pasos-cortos li{position:relative;padding-left:1.5rem;font-size:.88rem;line-height:1.55;color:var(--grafito);margin-top:.5rem;counter-increment:corto}
.pasos-cortos li::before{content:counter(corto);position:absolute;left:0;top:.05rem;width:1.05rem;height:1.05rem;border:1px solid var(--carmin);color:var(--carmin);font-size:.7rem;font-weight:700;display:grid;place-items:center}
.lista-lateral li{border-top:1px solid var(--raya-suave);padding-block:.5rem}
.lista-lateral li:first-child{border-top:0}
.lista-lateral a{font-size:.9rem;line-height:1.45;display:block}
.datos-rapidos dt{font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grafito);margin-top:.7rem}
.datos-rapidos dt:first-child{margin-top:0}
.datos-rapidos dd{font-size:.89rem;line-height:1.5;margin-top:.1rem}

/* · preguntas: planas, sin plegar · */
.preguntas{margin-top:2.8rem}
.pregunta{margin-top:1.5rem}
.pregunta h3{margin-top:0;font-size:1.02rem}
.pregunta>div>p{margin-top:.45rem;color:var(--grafito)}
.pregunta>div>ul,.pregunta>div>ol{margin-top:.5rem}
.pregunta>div>ul li{position:relative;padding-left:1rem;margin-top:.3rem;color:var(--grafito)}
.pregunta>div>ul li::before{content:"";position:absolute;left:.1rem;top:.7em;width:.28rem;height:.28rem;background:var(--raya)}

/* · cierre de página · */
.cierre{border-top:1px solid var(--raya);padding-block:1.6rem}
.cierre-caja{display:grid;gap:.85rem}
.cierre h2{font-size:1.18rem;margin:0;font-family:var(--titulo)}
.cierre p{font-size:.95rem;color:var(--grafito);max-width:46ch}
.cierre-acciones{display:flex;flex-wrap:wrap;gap:.6rem}

/* · portada · */
.portada{padding-block:2rem 2.4rem;border-bottom:1px solid var(--raya)}
.portada-reja{display:grid;gap:1.8rem}
.portada h1{font-size:2rem;line-height:1.1}
.portada-entrada{margin-top:1rem;font-size:1.08rem;line-height:1.62;color:var(--grafito)}
.portada-acciones{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.3rem}
.portada-nota{margin-top:1rem;font-size:.85rem;color:var(--grafito)}
.lamina{margin:0;border:1px solid var(--raya);padding:.5rem;background:var(--papel)}
.lamina img{width:100%;height:auto}
.lamina figcaption{font-size:.79rem;line-height:1.45;color:var(--grafito);padding:.55rem .2rem 0;border-top:1px solid var(--raya-suave);margin-top:.5rem}

.franja{padding-block:2.4rem;border-bottom:1px solid var(--raya)}
.franja-h{font-family:var(--titulo);font-size:1.45rem;font-weight:600;margin-bottom:1.3rem;position:relative;padding-bottom:.5rem}
.franja-h::after{content:"";position:absolute;left:0;bottom:0;width:3.2rem;height:3px;background:var(--carmin)}
.servicios{display:grid;gap:1.5rem}
.servicio{border-top:3px solid var(--carmin);padding-top:.9rem}
.servicio h3{margin-top:0;font-size:1.06rem}
.servicio p{font-size:.94rem;color:var(--grafito);margin-top:.45rem}
.servicio a{display:inline-block;margin-top:.6rem;font-size:.9rem;font-weight:600}
.franja-pie{margin-top:1.4rem;font-size:.92rem}

.pasos{display:grid;gap:1.3rem;counter-reset:etapa}
.paso{counter-increment:etapa;padding-left:2.6rem;position:relative}
.paso::before{content:counter(etapa);position:absolute;left:0;top:-.15rem;font-family:var(--titulo);font-size:1.6rem;font-weight:600;color:var(--carmin);line-height:1}
.paso h3{margin-top:0;font-size:1rem}
.paso p{font-size:.93rem;color:var(--grafito);margin-top:.3rem}

/* · directorio · filtros sólo con CSS · */
.directorio{display:block;padding-block:1.8rem 2.6rem}
.cribas{border:1px solid var(--raya);padding:1rem 1.05rem 1.15rem;margin-bottom:1.5rem}
.cribas-h{margin:0 0 .35rem;font-family:var(--letra);font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--carmin)}
.cribas-nota{font-size:.82rem;color:var(--grafito);margin-bottom:.9rem}
.criba{border:0;padding:0;margin:0 0 1rem}
.criba legend{font-size:.85rem;font-weight:700;padding:0;margin-bottom:.35rem}
.criba input{position:absolute;opacity:0;width:1px;height:1px}
.criba label{display:block;font-size:.87rem;line-height:1.45;padding:.24rem 0 .24rem 1.5rem;position:relative;cursor:pointer;color:var(--grafito)}
.criba label::before{content:"";position:absolute;left:0;top:.42em;width:.85rem;height:.85rem;border:1px solid var(--raya);border-radius:50%}
.criba input:checked+label{color:var(--tinta);font-weight:650}
.criba input:checked+label::before{border-color:var(--carmin);border-width:.27rem}
.criba input:focus-visible+label::before{outline:2px solid var(--carmin);outline-offset:2px}
.criba .cuenta{color:#767b82;font-weight:400}
@media (max-width:61.99em){
  .criba label{display:inline-block;padding:.22rem .6rem .22rem 1.45rem;margin:0 .3rem .35rem 0;border:1px solid var(--raya-suave);border-radius:3px}
  .criba label::before{left:.4rem}
  .criba input:checked+label{border-color:var(--carmin)}
}

.resumen-lista{font-size:.9rem;color:var(--grafito);margin-bottom:.8rem}
.resultados{border-top:1px solid var(--raya)}
.fila{display:grid;gap:.55rem;padding:1.05rem 0;border-bottom:1px solid var(--raya)}
.fila-quien h3{margin:0;font-size:1.03rem;font-family:var(--letra);font-weight:680}
.fila-quien h3 a{color:var(--tinta);text-decoration:none}
.fila-quien h3 a:hover{color:var(--carmin);text-decoration:underline}
.referencia{font-size:.82rem;color:var(--grafito);margin-top:.1rem}
.distintivos{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.4rem}
.distintivo{font-size:.72rem;font-weight:650;letter-spacing:.02em;padding:.12rem .45rem;border:1px solid var(--raya);color:var(--grafito)}
.distintivo-oro{border-color:var(--carmin);color:var(--carmin)}
.fila-que p{font-size:.9rem;line-height:1.55;color:var(--grafito)}
.fila-que p+p{margin-top:.25rem}
.fila-que .oficio{color:var(--tinta)}
.fila-precio{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem}
.fila-precio .tarifa{font-size:1.05rem}
.fila-precio .boton{flex:none}
.ver-ficha{font-size:.88rem;font-weight:600}

/* · ficha de intérprete · */
.expediente dl{display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem .9rem;margin-top:1rem;font-size:.93rem}
.expediente dt{font-weight:650;color:var(--grafito);margin-top:.6rem}
.expediente dd{border-bottom:1px solid var(--raya-suave);padding-bottom:.35rem}
.trayecto li{position:relative;padding-left:1.1rem;margin-top:.5rem;font-size:.94rem;line-height:1.6}
.trayecto li::before{content:"";position:absolute;left:0;top:.7em;width:.4rem;height:1px;background:var(--carmin)}
.nota-sobria{margin-top:1.4rem;font-size:.9rem;color:var(--grafito);border-left:2px solid var(--raya);padding-left:.9rem}

/* · tabla producto → mercado · */
.rejilla-mercados td:first-child{font-weight:650}
@media (max-width:47.99em){
  .franja-tabla .tabla-ancha{border:0;overflow:visible}
  .rejilla-mercados thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .rejilla-mercados,.rejilla-mercados tbody,.rejilla-mercados tr,.rejilla-mercados td{display:block;width:100%}
  .rejilla-mercados tr{border-top:1px solid var(--raya);padding-block:.8rem}
  .rejilla-mercados tr:last-child{border-bottom:1px solid var(--raya)}
  .rejilla-mercados td{border:0;padding:.12rem 0;max-width:none!important;min-width:0!important}
  .rejilla-mercados td::before{content:attr(data-rotulo);display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grafito);margin-top:.35rem}
  .rejilla-mercados td:first-child::before{margin-top:0}
  .rejilla-mercados td:nth-child(2) a{font-size:1.02rem}
}
.rejilla-mercados a{font-weight:600}

/* · listas de páginas de un hub y medidas de lectura · */
.medida{max-width:46rem}
.hijos{margin-top:2.6rem}
.lista-paginas{border-top:1px solid var(--raya);margin-top:1.1rem}
.lista-paginas li{border-bottom:1px solid var(--raya);padding:.8rem 0}
.lista-paginas li a{font-weight:650;font-size:1rem;text-decoration:none}
.lista-paginas li a:hover{text-decoration:underline}
.lista-paginas li span{display:block;font-size:.9rem;color:var(--grafito);margin-top:.2rem;line-height:1.55}
.casos-bloque,.sedes-bloque{margin-top:2.4rem}
.franja-tabla{padding-bottom:2.4rem}
.franja-tabla .bloque-h{font-family:var(--titulo);font-size:1.45rem;font-weight:600}
.rejilla-mercados td:first-child{max-width:18rem}
.rejilla-mercados td:nth-child(2){min-width:11rem}
.listado{min-width:0}

/* · etiquetas · */
.etiquetas{display:flex;flex-wrap:wrap;gap:.3rem;margin-top:.45rem}
.etiqueta{font-size:.75rem;color:var(--grafito);border:1px solid var(--raya);padding:.1rem .45rem}

/* · casos y sedes (visa, consulados) · */
.casos{margin-top:1.8rem;display:grid;gap:1.1rem}
.caso{border:1px solid var(--raya);border-left:3px solid var(--carmin);padding:.95rem 1.05rem}
.caso h3{margin-top:0;font-size:1rem}
.caso-etiqueta{font-size:.76rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--grafito);margin-top:.6rem}
.caso p{font-size:.92rem;margin-top:.4rem;color:var(--grafito)}
.caso p.regla{color:var(--tinta)}
.sede{border-top:1px solid var(--raya);padding-top:1.1rem;margin-top:1.4rem}
.sede h3{margin-top:0}
.sede-pais{display:block;font-size:1.02rem}
.sede-nombre{display:block;font-size:.85rem;font-weight:500;color:var(--grafito);margin-top:.1rem}
.sede dl,.hoja dl{display:grid;grid-template-columns:minmax(0,1fr);gap:.1rem .9rem;margin-top:.7rem;font-size:.9rem}
.sede dt,.hoja dt{font-weight:650;color:var(--grafito);margin-top:.6rem}
.sede dd,.hoja dd{border-bottom:1px solid var(--raya-suave);padding-bottom:.4rem}
.hoja{margin-top:2rem}
.aparte{margin-top:1.5rem;border-left:3px solid var(--carmin);padding-left:1rem}
.aparte-h{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--carmin)}
.aparte p{font-size:.94rem;margin-top:.3rem}

/* · copiar · */
.copiar-fila{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:.7rem}
.copiar{background:transparent;border:1px solid var(--raya);padding:.35rem .7rem;font-size:.82rem;font-weight:600;cursor:pointer;border-radius:3px}
a.copiar{color:var(--tinta);text-decoration:none;display:inline-block}
.copiar:hover{border-color:var(--tinta)}
.copiar[data-hecho]{border-color:var(--carmin);color:var(--carmin)}
.aviso-copia{font-size:.8rem;color:var(--grafito)}
.plantilla{margin-top:1.6rem;border:1px solid var(--raya);padding:1rem 1.05rem}
.plantilla h3{margin-top:0}
.molde{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.88rem;line-height:1.7;background:#faf9f7;border:1px solid var(--raya-suave);padding:.7rem .85rem;margin-top:.6rem}

/* · contacto · */
.canales{margin-top:1.6rem;display:grid;gap:1.4rem}
.canal{border:1px solid var(--raya);border-top:2px solid var(--carmin);padding:1rem 1.05rem 1.15rem}
.canal-fila{display:flex;align-items:flex-start;gap:.75rem;text-decoration:none;color:var(--tinta)}
.canal-fila svg{width:22px;height:22px;fill:var(--carmin);flex:none;margin-top:.2rem}
.canal-nombre{font-weight:680;font-size:1rem}
.canal-valor{display:block;font-size:.95rem;margin-top:.1rem}
.canal-pie{display:block;font-size:.84rem;color:var(--grafito);margin-top:.25rem;line-height:1.5}
.marbete{display:inline-block;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--carmin);border:1px solid var(--carmin);padding:0 .35rem;margin-left:.4rem;vertical-align:.1em}
.codigo{display:block;width:180px;margin-top:.9rem;border:1px solid var(--raya);padding:.35rem}
.codigo-pie{font-size:.8rem;color:var(--grafito);margin-top:.4rem;line-height:1.5}
.si-dedo{display:block}
.si-raton{display:none}
@media (hover:hover) and (pointer:fine){.si-dedo{display:none}.si-raton{display:block}}

/* · barra de acción móvil · */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:.5rem .75rem calc(.5rem + env(safe-area-inset-bottom));background:var(--papel);border-top:1px solid var(--raya)}
.barra .boton{width:100%}
.llamar{background:var(--tinta);color:#fff;border-color:var(--tinta)}
.llamar:hover{background:#000;color:#fff}

/* · pie compacto · */
.pie{border-top:1px solid var(--raya);padding-block:1.6rem 2rem;font-size:.86rem;color:var(--grafito)}
.pie-marca{font-weight:700;color:var(--tinta);font-size:.95rem}
.pie p{margin-top:.4rem;max-width:62ch}
.pie-enlaces{margin-top:.9rem;display:flex;flex-wrap:wrap;gap:.2rem .9rem}
.pie-enlaces a{color:var(--grafito);font-size:.85rem}
.pie-legal{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--raya-suave);font-size:.8rem}

/* · 404 · */
.perdida{padding-block:3rem 4rem}
.perdida h1{font-size:1.9rem}
.perdida p{margin-top:.9rem;color:var(--grafito);max-width:52ch}
.perdida ul{margin-top:1.4rem;border-top:1px solid var(--raya)}
.perdida li{border-bottom:1px solid var(--raya)}
.perdida li a{display:block;padding:.75rem 0;font-weight:600;text-decoration:none}
.perdida li a span{display:block;font-weight:400;font-size:.88rem;color:var(--grafito);margin-top:.15rem}

/* · 34em: la portada se parte, los servicios van en fila · */
@media (min-width:34em){
  .portada-reja{grid-template-columns:1.1fr .9fr;align-items:center;gap:2.2rem}
  .servicios{grid-template-columns:repeat(3,1fr);gap:1.6rem}
  .pasos{grid-template-columns:repeat(3,1fr)}
  .fila{grid-template-columns:1fr auto;align-items:start;column-gap:1.6rem}
  .fila-que{grid-column:1}
  .fila-precio{grid-column:2;grid-row:1/3;flex-direction:column;align-items:flex-end;text-align:right;gap:.45rem}
  .canales{grid-template-columns:repeat(2,1fr)}
}

/* · 48em: cabecera completa, sin barra inferior · */
@media (min-width:48em){
  .expediente dl,.sede dl,.hoja dl{grid-template-columns:minmax(0,10.5rem) minmax(0,1fr);gap:.35rem .9rem}
  .expediente dt,.sede dt,.hoja dt{margin-top:0}
  body{padding-bottom:0;font-size:17px}
  h1{font-size:2.6rem}
  h2{font-size:1.75rem;margin-top:2.8rem}
  .portada h1{font-size:2.75rem}
  .franja-h{font-size:1.75rem}
  .menu{display:none}
  .rutas{display:block}
  .verde-cabecera{display:inline-flex}
  .barra{display:none}
  .titular{padding-block:2.2rem 1.8rem}
  .reja{padding-block:2.6rem 3.4rem}
  .cierre-caja{grid-template-columns:1fr auto;align-items:center;gap:1.6rem}
  .cierre-acciones{justify-content:flex-end}
  .pie-legal{display:flex;justify-content:space-between;gap:1.5rem}
}

/* · 62em: lateral pegajoso y filtros al costado del directorio · */
@media (min-width:62em){
  .reja{display:grid;grid-template-columns:minmax(0,1fr) 20.5rem;gap:3.2rem;align-items:start}
  .lateral{margin-top:0;position:sticky;top:1.5rem}
  .directorio{display:grid;grid-template-columns:15.5rem minmax(0,1fr);gap:2.6rem;align-items:start}
  .cribas{margin-bottom:0;position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow-y:auto}
  .fila{grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto;column-gap:1.8rem}
  .fila-que{grid-column:2;grid-row:1}
  .fila-precio{grid-column:3;grid-row:1}
}

/* · los filtros · un radio por grupo, así los grupos se cruzan con Y ·
   Cada regla activa esconde lo que no cumple ese grupo; la unión de las
   reglas activas deja sólo las filas que cumplen todos. Sin JavaScript. */
.directorio:has(#g-h:checked) .fila:not(.f-hom),
.directorio:has(#g-m:checked) .fila:not(.f-muj),
.directorio:has(#e-1:checked) .fila:not(.f-e1),
.directorio:has(#e-2:checked) .fila:not(.f-e2),
.directorio:has(#e-3:checked) .fila:not(.f-e3),
.directorio:has(#e-4:checked) .fila:not(.f-e4),
.directorio:has(#d-1:checked) .fila:not(.f-d1),
.directorio:has(#d-2:checked) .fila:not(.f-d2),
.directorio:has(#d-3:checked) .fila:not(.f-d3),
.directorio:has(#s-1:checked) .fila:not(.f-s1),
.directorio:has(#s-2:checked) .fila:not(.f-s2),
.directorio:has(#s-3:checked) .fila:not(.f-s3),
.directorio:has(#s-4:checked) .fila:not(.f-s4),
.directorio:has(#s-5:checked) .fila:not(.f-s5),
.directorio:has(#s-6:checked) .fila:not(.f-s6),
.directorio:has(#s-7:checked) .fila:not(.f-s7),
.directorio:has(#s-8:checked) .fila:not(.f-s8),
.directorio:has(#s-9:checked) .fila:not(.f-s9),
.directorio:has(#s-10:checked) .fila:not(.f-s10),
.directorio:has(#s-11:checked) .fila:not(.f-s11),
.directorio:has(#s-12:checked) .fila:not(.f-s12),
.directorio:has(#s-13:checked) .fila:not(.f-s13),
.directorio:has(#s-14:checked) .fila:not(.f-s14),
.directorio:has(#s-15:checked) .fila:not(.f-s15),
.directorio:has(#s-16:checked) .fila:not(.f-s16){display:none}

@media print{
  .cabecera,.barra,.cierre,.lateral,.cribas,.saltar{display:none}
  body{padding:0;font-size:11pt}
  a{color:inherit;text-decoration:none}
}
