:root{
  --tinta:#141210; --texto:#302c27; --volada:#8a8276;
  --bermellon:#b23a1f; --papel:#fbfaf6; --papel2:#f1ede2; --filete:#ddd7c9;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --cuerpo:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  /* el canal entre columnas crece con la pantalla: en papel el blanco manda */
  --canal:clamp(18px,2.4vw,34px);
}
*{box-sizing:border-box}
body{margin:0; background:var(--papel); color:var(--texto);
  font:400 16.5px/1.62 var(--cuerpo); -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display); font-variation-settings:"opsz" 144;
  color:var(--tinta); font-weight:600; line-height:1.03; letter-spacing:-.025em; margin:0;
  /* ningún titular de display puede sacar la página de la pantalla */
  overflow-wrap:break-word}
p{margin:0}
a{color:var(--tinta)}
.ew-env{max-width:1180px; margin:0 auto; padding:0 18px}

/* la retícula: tres columnas de margen y nueve de caja */
.rej{display:grid; grid-template-columns:repeat(12,1fr); column-gap:var(--canal)}
.rail{grid-column:1/4}
.caja{grid-column:4/13}

/* volada: versal pequeña muy espaciada, el rótulo de toda la página */
.volada{font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:600; color:var(--volada); margin:0}
.folio{font-family:var(--display); font-variation-settings:"opsz" 144; font-weight:400;
  font-size:30px; color:var(--bermellon); line-height:1; margin:0 0 8px}

/* ---- barra de estilos: un cintillo de sumario, no una barra de aplicación ---- */
.ew-barra{background:var(--papel2); border-bottom:1px solid var(--filete)}
.ew-barra .ew-env{display:flex; align-items:stretch; flex-wrap:wrap; padding:0 18px}
.ew-tit{display:flex; align-items:center; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; font-weight:700; color:var(--volada);
  padding:0 16px 0 0; border-right:1px solid var(--filete)}
.ew-barra nav{display:flex; flex:1; flex-wrap:wrap}
.ew-barra nav a{display:flex; align-items:baseline; gap:8px; text-decoration:none;
  color:var(--texto); padding:10px 14px; border-right:1px solid var(--filete)}
.ew-barra nav a b{font-family:var(--display); font-weight:500; font-size:14px}
.ew-barra nav a span{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--volada)}
.ew-barra nav a:hover{background:var(--papel)}
.ew-barra nav a.on{background:var(--tinta)}
.ew-barra nav a.on b,.ew-barra nav a.on span{color:var(--papel)}
.ew-guia{display:flex; align-items:center; padding-left:16px; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--bermellon); text-decoration:none}
.ew-guia:hover{text-decoration:underline}

/* ---- masthead: logotipo al centro, datos de edición a los lados ---- */
.cabecera{border-bottom:1px solid var(--filete)}
.mast{display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  gap:14px; padding-top:26px; padding-bottom:20px}
.mast-lado{font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--volada)}
.mast-lado.der{text-align:right}
.mast-lado a{text-decoration:none; border-bottom:1px solid var(--filete)}
.logotipo{font-family:var(--display); font-variation-settings:"opsz" 144; font-weight:600;
  font-size:clamp(32px,6.4vw,58px); letter-spacing:-.03em; color:var(--tinta);
  text-decoration:none; line-height:1; white-space:nowrap}
/* el cintillo bajo el masthead hace de dateline: dice dónde y cuándo abre */
.cintillo{display:flex; flex-wrap:wrap; gap:6px 22px; padding-top:9px; padding-bottom:9px;
  border-top:1px solid var(--filete); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--volada)}
.cintillo a{color:var(--tinta); text-decoration:none; border-bottom:1px solid var(--bermellon)}

/* ---- apertura: titular a nueve columnas y ficha colgada del filete derecho ---- */
.apertura{padding:clamp(34px,5vw,62px) 0 clamp(30px,4vw,54px); border-bottom:1px solid var(--filete)}
.apertura .volada{grid-column:1/13; margin-bottom:18px}
.titular{grid-column:1/10; grid-row:2;
  font-size:clamp(38px,7.6vw,92px); font-weight:500; letter-spacing:-.035em}
.ficha{grid-column:10/13; grid-row:2/4; align-self:end;
  border-left:1px solid var(--filete); padding-left:clamp(14px,1.6vw,22px)}
.ficha div{padding:10px 0; border-bottom:1px solid var(--filete)}
.ficha div:first-child{padding-top:0}
.ficha div:last-child{border-bottom:0}
.ficha b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--volada); font-weight:600; margin-bottom:3px}
.ficha span{font-size:14.5px; color:var(--texto)}
.entrada{grid-column:1/9; grid-row:3; padding-top:26px; margin-top:26px;
  border-top:1px solid var(--filete)}
.entradilla{font-size:clamp(17px,1.5vw,19.5px); line-height:1.55; max-width:68ch}
/* capitular: el gesto que dice «esto es un artículo» antes de leer una palabra */
.entradilla::first-letter{float:left; font-family:var(--display); font-variation-settings:"opsz" 144;
  font-weight:600; font-size:4.6em; line-height:.78; padding:4px 11px 0 0; color:var(--tinta)}
.acc{display:flex; gap:10px 18px; flex-wrap:wrap; align-items:center; margin-top:26px}
/* el botón es un bloque de tinta a escuadra: un rectángulo impreso, no un control */
.tel{display:inline-block; background:var(--tinta); color:var(--papel)!important;
  text-decoration:none; padding:13px 22px; font-size:12.5px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:600; white-space:nowrap}
.tel:hover{background:var(--bermellon)}
.enlace{font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  text-decoration:none; color:var(--tinta); border-bottom:2px solid var(--bermellon); padding-bottom:3px}
.enlace:hover{color:var(--bermellon)}

/* ---- secciones: el folio se queda pegado al margen mientras se lee ---- */
.seccion{padding:clamp(40px,5.5vw,76px) 0; border-bottom:1px solid var(--filete)}
.rail-pegado{position:sticky; top:16px; align-self:start}
.seccion h2{font-size:clamp(26px,3.6vw,44px); font-weight:500; max-width:17ch; margin-bottom:14px}
.sumario{font-size:16.5px; color:var(--volada); max-width:58ch; margin-bottom:30px}

/* listado de servicios: dos columnas de texto con el número colgando */
.listado{list-style:none; margin:0; padding:0; counter-reset:item;
  columns:2; column-gap:var(--canal)}
.listado li{counter-increment:item; break-inside:avoid; -webkit-column-break-inside:avoid;
  padding:16px 0 18px 46px; border-top:1px solid var(--filete); position:relative}
.listado li::before{content:counter(item,decimal-leading-zero); position:absolute; left:0; top:19px;
  font-size:11px; letter-spacing:.1em; font-weight:700; color:var(--bermellon)}
.listado h3{font-size:19.5px; font-weight:600; letter-spacing:-.01em; margin-bottom:5px}
.listado p{font-size:15px; line-height:1.55}

/* motivos: tres cifras enormes separadas por filete vertical */
.motivos{display:grid; grid-template-columns:repeat(3,1fr); column-gap:var(--canal);
  border-top:2px solid var(--tinta); padding-top:22px}
.motivo{padding-left:var(--canal); border-left:1px solid var(--filete)}
.motivo:first-child{padding-left:0; border-left:0}
.cifra{display:block; font-family:var(--display); font-variation-settings:"opsz" 144;
  font-weight:300; font-size:clamp(44px,5.6vw,74px); line-height:.9; color:var(--bermellon); margin-bottom:12px}
.motivo h3{font-size:19px; font-weight:600; margin-bottom:7px}
.motivo p{font-size:15px}

/* preguntas: impresas en dos columnas, sin desplegables */
.preguntas{columns:2; column-gap:var(--canal)}
.pregunta{break-inside:avoid; -webkit-column-break-inside:avoid;
  padding:15px 0 17px; border-top:1px solid var(--filete)}
.pregunta h3{font-size:18px; font-weight:600; line-height:1.2; margin-bottom:6px}
.pregunta p{font-size:15px; line-height:1.56}

/* dónde estamos: ficha técnica a la izquierda, nota recuadrada a la derecha */
.visita{display:grid; grid-template-columns:1.15fr 1fr; gap:var(--canal); align-items:start}
.datos{border-top:2px solid var(--tinta)}
.dato{padding:13px 0; border-bottom:1px solid var(--filete)}
.dato b{display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--volada); font-weight:600; margin-bottom:4px}
.dato span{font-size:16px; color:var(--tinta)}
.nota{background:var(--papel2); padding:clamp(20px,2.4vw,30px); border-top:2px solid var(--tinta)}
.nota h3{font-size:20px; font-weight:600; margin-bottom:10px}
.nota p{font-size:15.5px; margin-bottom:22px}

/* ---- colofón ---- */
.pie{padding:34px 0 46px}
.pie .ew-env{display:flex; justify-content:space-between; gap:12px 26px; flex-wrap:wrap;
  padding-top:16px; border-top:2px solid var(--tinta);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--volada)}

/* ---- la guía, compuesta con la misma retícula que el pliego ---- */
.g-guia{background:var(--papel2); border-top:4px solid var(--tinta);
  padding:clamp(42px,5.5vw,76px) 0; counter-reset:bloque}
.g-rot{font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700;
  color:var(--bermellon); margin:0 0 14px}
.g-h{font-family:var(--display); font-variation-settings:"opsz" 144; color:var(--tinta);
  font-size:clamp(34px,5.4vw,66px); font-weight:500; letter-spacing:-.035em; line-height:1.02;
  margin:0 0 10px; overflow-wrap:break-word}
.g-lema{font-size:clamp(17px,1.5vw,19.5px); max-width:52ch; margin:0 0 40px; color:var(--texto)}
.g-bloque{display:grid; grid-template-columns:210px 1fr; gap:0 var(--canal);
  padding-top:20px; margin-bottom:34px; border-top:1px solid var(--filete)}
.g-bloque h3{font-family:var(--cuerpo); font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  font-weight:700; color:var(--tinta); line-height:1.4}
.g-bloque h3::before{counter-increment:bloque; content:counter(bloque,decimal-leading-zero);
  display:block; font-family:var(--display); font-variation-settings:"opsz" 144; font-weight:400;
  font-size:28px; letter-spacing:0; color:var(--bermellon); line-height:1; margin-bottom:8px}
.g-bloque > p{margin:0; max-width:64ch; font-size:16.5px}
.g-colores{display:grid; gap:var(--canal); grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.g-tono{display:block; height:76px; border:1px solid #0000001f; margin-bottom:10px}
.g-color b{display:block; font-family:var(--display); font-variation-settings:"opsz" 144;
  font-weight:600; color:var(--tinta); font-size:17px; letter-spacing:-.01em}
.g-color code{display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--volada); margin:3px 0 7px}
.g-color small{display:block; font-size:13.4px; line-height:1.5}
.g-tipos{display:grid; gap:var(--canal); grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g-tipo{padding-top:12px; border-top:1px solid var(--filete)}
.g-tipo b{display:block; font-family:var(--display); font-variation-settings:"opsz" 144;
  font-weight:600; color:var(--tinta); font-size:21px; letter-spacing:-.015em; margin-bottom:6px}
.g-tipo p{font-size:14.8px; line-height:1.55}
/* las reglas van numeradas y colgadas, igual que los servicios del pliego */
.g-lista{list-style:none; margin:0; padding:0; max-width:66ch; counter-reset:regla}
.g-lista li{counter-increment:regla; position:relative; padding:0 0 12px 44px; margin-bottom:12px;
  border-bottom:1px solid var(--filete); font-size:16.3px; line-height:1.55}
.g-lista li:last-child{border-bottom:0; margin-bottom:0}
.g-lista li::before{content:counter(regla,decimal-leading-zero); position:absolute; left:0; top:4px;
  font-size:11px; letter-spacing:.1em; font-weight:700; color:var(--bermellon)}
.g-no li::before{content:"\00d7"; font-size:16px; top:0; letter-spacing:0}

/* ---- móvil: la retícula de doce se deshace, el raíl pasa a ser un rótulo ---- */
@media (max-width:1000px){
  .preguntas,.listado{columns:1}
  .entradilla::first-letter{font-size:3.6em}
}
@media (max-width:860px){
  .rej{display:block}
  .rail,.caja,.titular,.ficha,.entrada,.apertura .volada{grid-column:auto; grid-row:auto}
  .rail-pegado{position:static}
  .rail{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
  .folio{font-size:22px; margin:0}
  .ficha{border-left:0; padding-left:0; margin-top:26px; border-top:1px solid var(--filete)}
  .ficha div:first-child{padding-top:10px}
  .entrada{padding-top:22px; margin-top:22px}
  .mast{grid-template-columns:1fr; justify-items:start; gap:10px; text-align:left}
  .mast-lado.der{text-align:left}
  .motivos{grid-template-columns:1fr; row-gap:26px}
  .motivo{padding-left:0; border-left:0; padding-top:18px; border-top:1px solid var(--filete)}
  .motivo:first-child{padding-top:0; border-top:0}
  .visita{grid-template-columns:1fr}
  .g-bloque{grid-template-columns:1fr; gap:14px}
  .g-bloque h3::before{display:inline-block; margin:0 10px 0 0; vertical-align:-2px; font-size:20px}
}
@media (max-width:430px){
  .logotipo{white-space:normal}
  .tel,.enlace{letter-spacing:.1em}
}