:root{
  --tinta:#0a0a0a; --texto:#3a3a3a; --dato:#8c8c8c;
  --acento:#d6301f; --rejilla:#d8d8d4; --papel:#fff; --hueso:#f2f1ed;

  /* Medidas únicas. Todo margen y todo hueco sale de aquí: si un valor no está
     en esta lista, no se usa. Es lo que hace que el ritmo se note repetido. */
  --m1:8px; --m2:16px; --m3:32px; --m4:64px; --m5:96px;

  /* Escala de saltos grandes y declarados, sin tamaños intermedios. */
  --t-micro:11px; --t-dato:13px; --t-base:17px; --t-sub:24px;
  --t-h:clamp(28px,4.4vw,46px); --t-hero:clamp(38px,7.6vw,86px);

  --sans:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0; background:var(--papel); color:var(--texto);
  font:var(--t-base)/1.6 var(--sans); -webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--tinta); font-weight:700; line-height:1.04; letter-spacing:-.02em; margin:0}
p{overflow-wrap:break-word}
a{color:var(--tinta)}

.ew-env{max-width:1180px; margin:0 auto; padding:0 24px}

/* Etiqueta de columna izquierda: mono, versalitas y gris. Nunca en el acento,
   porque el acento tiene un solo trabajo y ya lo tiene asignado. */
.rot{font:500 var(--t-micro)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dato); margin:0}

/* ─── barra de estilos ─────────────────────────────────────────────── */
.ew-barra{background:var(--tinta); color:#fff; border-bottom:1px solid var(--tinta)}
.ew-barra .ew-env{display:flex; align-items:center; gap:var(--m3); flex-wrap:wrap; min-height:44px; padding-top:6px; padding-bottom:6px}
.ew-tit{font:500 var(--t-micro)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:#8c8c8c}
.ew-barra nav{display:flex; flex:1; flex-wrap:wrap}
.ew-barra nav a{display:flex; align-items:baseline; gap:8px; color:#c9c9c4; text-decoration:none;
  padding:6px 14px; border-left:1px solid #333}
.ew-barra nav a:last-child{border-right:1px solid #333}
.ew-barra nav a b{font:500 var(--t-dato)/1 var(--mono); color:#fff}
.ew-barra nav a span{font-size:var(--t-dato)}
.ew-barra nav a:hover{color:#fff; background:#1c1c1c}
.ew-barra nav a.on{background:#fff; color:var(--tinta)}
.ew-barra nav a.on b{color:var(--acento)}
.ew-guia{font:500 var(--t-dato)/1 var(--mono); color:var(--acento); text-decoration:none; letter-spacing:.04em}
.ew-guia:hover{text-decoration:underline}

/* ─── cabecera ─────────────────────────────────────────────────────── */
.cab{position:sticky; top:0; z-index:30; background:var(--papel); border-bottom:1px solid var(--tinta)}
.cab .ew-env{display:grid; grid-template-columns:4fr 5fr 3fr; align-items:stretch; min-height:72px}
/* Los filetes verticales de la cabecera son los mismos que luego bajan por toda
   la página: desde el primer centímetro se ve que hay una rejilla. */
.cab-celda{display:flex; align-items:center; border-left:1px solid var(--rejilla); padding:0 var(--m2)}
.cab-celda:first-child{border-left:0; padding-left:0}
.marca{text-decoration:none; line-height:1.1}
.marca b{display:block; font:700 var(--t-sub)/1 var(--sans); letter-spacing:-.03em; color:var(--tinta)}
.marca span{display:block; font:400 var(--t-micro)/1.4 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dato); margin-top:6px}
.cab nav{display:flex; gap:var(--m3); font-size:var(--t-dato)}
.cab nav a{color:var(--texto); text-decoration:none; border-bottom:1px solid transparent; padding-bottom:2px}
.cab nav a:hover{border-bottom-color:var(--tinta)}
.cab-celda.fin{justify-content:flex-end; padding-right:0}

/* Botón rectangular. Sin radio y sin sombra: en este estilo un botón es un
   rectángulo de tinta, no una pastilla. */
.btn{display:inline-block; background:var(--tinta); color:#fff!important; text-decoration:none;
  padding:14px 20px; font:500 var(--t-dato)/1 var(--mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.btn:hover{background:var(--acento)}
.btn-linea{display:inline-block; background:transparent; color:var(--tinta); text-decoration:none;
  padding:13px 20px; border:1px solid var(--tinta); font:500 var(--t-dato)/1 var(--mono); letter-spacing:.06em; text-transform:uppercase}
.btn-linea:hover{background:var(--tinta); color:#fff}

/* ─── portada ──────────────────────────────────────────────────────── */
.heroe{padding:var(--m5) 0 var(--m4); border-bottom:1px solid var(--tinta)}
.heroe-rej{display:grid; grid-template-columns:3fr 9fr; gap:var(--m3)}
.heroe-meta{display:flex; flex-direction:column; gap:var(--m2); border-top:3px solid var(--acento); padding-top:var(--m2)}
.heroe-meta div b{display:block; font:400 var(--t-micro)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dato); margin-bottom:5px}
.heroe-meta div span{font-size:var(--t-dato); color:var(--texto)}
.heroe-cuerpo{border-top:3px solid var(--tinta); padding-top:var(--m2); min-width:0}
.heroe h1{font-size:var(--t-hero); letter-spacing:-.045em; max-width:15ch; margin-bottom:var(--m3)}
.heroe .entrada{font-size:var(--t-sub); line-height:1.4; color:var(--texto); max-width:46ch; margin:0 0 var(--m3)}
.acc{display:flex; gap:var(--m2); flex-wrap:wrap; align-items:center}

/* Franja de datos: una tabla, no tres tarjetas. Las celdas comparten filete. */
.datos{display:grid; grid-template-columns:repeat(3,1fr); margin-top:var(--m4); border-top:1px solid var(--tinta)}
.datos div{border-left:1px solid var(--rejilla); padding:var(--m2) var(--m2) 0}
.datos div:first-child{border-left:0; padding-left:0}
.datos b{display:block; font:400 var(--t-micro)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dato); margin-bottom:8px}
.datos span{font-size:var(--t-dato); color:var(--tinta)}

/* ─── esqueleto de sección ─────────────────────────────────────────── */
section{padding:var(--m5) 0; border-bottom:1px solid var(--rejilla)}
section.hueso{background:var(--hueso)}
/* Cabecera de sección: número y rótulo pegados a la columna izquierda, titular
   y entradilla a la derecha. Se repite idéntica cuatro veces; esa repetición es
   la que hace que la página se lea como un documento y no como una web. */
.enc{display:grid; grid-template-columns:3fr 9fr; gap:var(--m3); border-top:2px solid var(--tinta); padding-top:var(--m2); margin-bottom:var(--m4)}
.enc-izq{display:flex; flex-direction:column; gap:var(--m1)}
.num{font:500 var(--t-sub)/1 var(--mono); color:var(--acento); letter-spacing:-.02em}
.enc h2{font-size:var(--t-h); max-width:20ch}
.enc .intro{font-size:var(--t-base); max-width:56ch; margin:var(--m2) 0 0; color:var(--texto)}

/* ─── 01 servicios ─────────────────────────────────────────────────── */
.servicios{border-top:1px solid var(--rejilla)}
.serv{display:grid; grid-template-columns:3fr 9fr; gap:var(--m3); border-bottom:1px solid var(--rejilla); padding:var(--m3) 0}
.serv-n{display:flex; gap:var(--m2); align-items:baseline}
.serv-n i{font:500 var(--t-dato)/1.2 var(--mono); color:var(--dato); font-style:normal}
.serv h3{font-size:var(--t-sub); letter-spacing:-.03em}
/* El filete que baja por el borde del texto cose las seis filas en una sola
   línea vertical continua: es la rejilla hecha visible. */
.serv p{margin:0; border-left:1px solid var(--rejilla); padding-left:var(--m3); max-width:62ch}

/* ─── 02 motivos ───────────────────────────────────────────────────── */
.motivos{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--tinta)}
.motivo{border-left:1px solid var(--rejilla); padding:var(--m3) var(--m3) 0 var(--m3)}
.motivo:first-child{border-left:0; padding-left:0}
.motivo i{display:block; font:500 var(--t-dato)/1 var(--mono); color:var(--acento); font-style:normal; margin-bottom:var(--m2)}
.motivo h3{font-size:var(--t-sub); margin-bottom:var(--m2)}
.motivo p{margin:0; font-size:var(--t-dato); line-height:1.65}

/* ─── 03 preguntas ─────────────────────────────────────────────────── */
.faq{border-top:1px solid var(--rejilla)}
details{border-bottom:1px solid var(--rejilla)}
summary{display:grid; grid-template-columns:3fr 9fr; gap:var(--m3); cursor:pointer; list-style:none;
  padding:var(--m3) 0; font-weight:700; color:var(--tinta); font-size:var(--t-base)}
summary::-webkit-details-marker{display:none}
summary i{font:500 var(--t-dato)/1.5 var(--mono); color:var(--dato); font-style:normal; font-weight:400}
summary span{border-left:1px solid var(--rejilla); padding-left:var(--m3)}
summary:hover span{color:var(--acento)}
details p{margin:0; padding:0 0 var(--m3) var(--m3); max-width:66ch; font-size:var(--t-dato); line-height:1.7;
  margin-left:calc(25% + var(--m2)); border-left:1px solid var(--rejilla)}

/* ─── 04 dónde estamos ─────────────────────────────────────────────── */
.visita{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--m4); border-top:1px solid var(--tinta); padding-top:var(--m3)}
.visita h3{font-size:var(--t-dato); font-family:var(--mono); font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dato); margin-bottom:var(--m2)}
/* Tabla de dos columnas con el mismo reparto que el resto de la página, para
   que la etiqueta caiga justo donde cae el rótulo de la sección. */
.fila{display:grid; grid-template-columns:110px 1fr; gap:var(--m2); border-bottom:1px solid var(--rejilla); padding:14px 0; font-size:var(--t-dato)}
.fila b{font:400 var(--t-micro)/1.7 var(--mono); letter-spacing:.14em; text-transform:uppercase; color:var(--dato)}
.fila span{color:var(--tinta)}
.visita p{margin:0 0 var(--m3); font-size:var(--t-dato); line-height:1.7; max-width:46ch}

/* ─── pie ──────────────────────────────────────────────────────────── */
.pie{border-top:1px solid var(--tinta); padding:var(--m3) 0 var(--m4)}
.pie .ew-env{display:grid; grid-template-columns:3fr 9fr; gap:var(--m3)}
.pie span{font:400 var(--t-micro)/1.8 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dato)}
.pie .pie-der{border-left:1px solid var(--rejilla); padding-left:var(--m3)}

/* ─── la guía, con la misma ropa que el resto ──────────────────────── */
.g-guia{background:var(--papel); border-top:4px solid var(--tinta); padding:var(--m5) 0}
.g-rot{font:500 var(--t-micro)/1 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--acento); margin:0 0 var(--m2)}
.g-h{font-size:var(--t-h); max-width:18ch}
.g-lema{font-size:var(--t-sub); line-height:1.4; max-width:44ch; margin:var(--m2) 0 var(--m5); color:var(--texto)}
/* Cada bloque es otra vez la pareja rótulo-izquierda / contenido-derecha: el h3
   cae en la primera columna y lo que venga detrás en la segunda. */
.g-bloque{display:grid; grid-template-columns:3fr 9fr; gap:var(--m3); border-top:1px solid var(--rejilla); padding:var(--m3) 0}
.g-bloque h3{font:500 var(--t-micro)/1.5 var(--mono); letter-spacing:.18em; text-transform:uppercase; color:var(--dato); font-weight:500}
.g-bloque > p{margin:0; max-width:62ch; font-size:var(--t-base)}
.g-colores{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rejilla)}
.g-color{border-left:1px solid var(--rejilla); padding:var(--m2)}
.g-color:nth-child(3n+1){border-left:0; padding-left:0}
.g-tono{display:block; height:72px; border:1px solid #0000001a; margin-bottom:var(--m2)}
.g-color b{display:block; font-size:var(--t-dato); color:var(--tinta)}
.g-color code{display:block; font:400 var(--t-micro)/1.8 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--dato)}
.g-color small{display:block; margin-top:8px; font-size:var(--t-dato); line-height:1.55}
.g-tipos{display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--rejilla)}
.g-tipo{border-left:1px solid var(--rejilla); padding:var(--m2)}
.g-tipo:first-child{border-left:0; padding-left:0}
.g-tipo b{display:block; font-size:var(--t-sub); color:var(--tinta); letter-spacing:-.03em; margin-bottom:var(--m2)}
.g-tipo p{margin:0; font-size:var(--t-dato); line-height:1.65}
/* Lista numerada a mano: el número en mono alinea con todas las demás cifras de
   la página, cosa que el bolo de un <ul> normal no hace. */
.g-lista{list-style:none; counter-reset:g; margin:0; padding:0; max-width:68ch}
.g-lista li{counter-increment:g; position:relative; padding:0 0 var(--m2) 48px; font-size:var(--t-base)}
.g-lista li::before{content:counter(g,decimal-leading-zero); position:absolute; left:0; top:4px;
  font:500 var(--t-dato)/1 var(--mono); color:var(--dato)}
.g-no li::before{color:var(--acento)}

/* ─── móvil: la rejilla colapsa a una columna y los filetes verticales
       pasan a ser horizontales; si no, a 390 px se sale de la pantalla. ── */
@media (max-width:860px){
  .cab .ew-env{grid-template-columns:1fr auto; min-height:64px}
  .cab-celda.med{display:none}
  .heroe-rej,.enc,.serv,summary,.pie .ew-env,.g-bloque{grid-template-columns:1fr; gap:var(--m2)}
  .heroe-meta{flex-direction:row; flex-wrap:wrap; gap:var(--m3)}
  .heroe{padding:var(--m4) 0 var(--m3)}
  section,.g-guia{padding:var(--m4) 0}
  .datos,.motivos,.visita,.g-colores,.g-tipos{grid-template-columns:1fr; gap:0}
  .datos div,.motivo,.g-color,.g-tipo{border-left:0; padding-left:0; padding-right:0;
    border-top:1px solid var(--rejilla); padding-top:var(--m2); padding-bottom:var(--m2)}
  .serv p,summary span,.pie .pie-der{border-left:0; padding-left:0}
  details p{margin-left:0; padding-left:var(--m2); border-left:2px solid var(--rejilla)}
  .visita{gap:var(--m3)}
  .g-colores,.g-tipos{border-top:0}
}