/* ═══════════════════════════════════════════════════════════════
   Estilos de las páginas internas (/casos, /talleres).
   Tokens y reglas tomados de index.html — misma identidad.
   El index NO usa este archivo: mantiene su <style> propio intacto.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --papel:      #F3F4F1;
  --papel-alt:  #EAECE7;
  --tinta:      #101820;
  --tinta-2:    #4A5560;
  --linea:      #D3D7CE;
  --azul:       #003D82;
  --verde:      #0E9384;

  --texto: 42rem;
  --hoja:  60rem;
  --rotulo-col: 8.5rem;
  --paso: clamp(3.25rem, 8vw, 5.5rem);

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Menlo, Consolas, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--sans);
  font-size:clamp(1.05rem, 0.99rem + 0.3vw, 1.15rem);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

.hoja{ max-width:var(--hoja); margin-inline:auto; padding-inline:1.35rem; }
@media (min-width:48rem){ .hoja{ padding-inline:2.5rem; } }

h1,h2,h3{ margin:0; line-height:1.05; letter-spacing:-0.028em; font-weight:700; text-wrap:balance; }
h1{ font-size:clamp(2.6rem, 1.6rem + 6vw, 4.6rem); letter-spacing:-0.045em; max-width:18ch; }
h2{ font-size:clamp(1.55rem, 1.3rem + 1.4vw, 2.1rem); }
h3{ font-size:1.1rem; letter-spacing:-0.012em; line-height:1.25; }
p{ margin:0 0 1.05rem; max-width:var(--texto); text-wrap:pretty; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:650; }

a{ color:var(--azul); text-decoration-thickness:1px; text-underline-offset:0.18em; }
a:hover{ color:var(--tinta); }
:focus-visible{ outline:2px solid var(--azul); outline-offset:3px; }

.rotulo{
  font-family:var(--mono); font-size:0.7rem; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--tinta-2);
  margin:0;
}
.rotulo .n{ color:var(--tinta); }
.bajada{ font-size:clamp(1.15rem, 1.02rem + 0.55vw, 1.35rem); color:var(--tinta-2); line-height:1.5; max-width:36rem; }
.bajada strong{ color:var(--tinta); font-weight:600; }
.menor{ font-size:0.9rem; color:var(--tinta-2); }

.marca{
  font-style:normal;
  background-image:linear-gradient(var(--verde), var(--verde));
  background-repeat:no-repeat;
  background-size:100% 0.13em;
  background-position:0 100%;
  padding-bottom:0.06em;
}

/* ── Volver ─────────────────────────────────────────────────── */
.volver{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--tinta-2); text-decoration:none;
  display:inline-block; padding-block:1.75rem;
}
.volver:hover{ color:var(--tinta); }

/* ── Encabezado de página interna ───────────────────────────── */
.encabezado{ padding-block:clamp(1.5rem,5vw,3rem) var(--paso); }
.encabezado .rotulo{ margin-bottom:clamp(2rem,7vw,3.5rem); }
.encabezado .bajada{ margin-top:1.8rem; }

/* ── Secciones ──────────────────────────────────────────────── */
.seccion{ padding-block:var(--paso); border-top:1px solid var(--linea); }
.seccion > * + *{ margin-top:1.4rem; }
.seccion-cab{ margin-bottom:1.6rem; }
@media (min-width:56rem){
  .seccion{ display:grid; grid-template-columns:var(--rotulo-col) minmax(0,1fr); column-gap:3rem; }
  .seccion > *{ grid-column:2; }
  .seccion-cab{ grid-column:1; grid-row:1; margin:0; position:sticky; top:2.5rem; align-self:start; }
  .seccion .ancho{ grid-column:1 / -1; }
  .seccion-cab .rotulo .n{ display:block; margin-bottom:0.35rem; }
}

/* ── Ficha de caso / de taller ──────────────────────────────── */
.ficha{ border-top:1px solid var(--linea); padding-top:1.5rem; }
.ficha + .ficha{ margin-top:2.5rem; }
.ficha h3{ margin-bottom:1.1rem; max-width:30ch; }
.ficha dl{ margin:0; display:grid; gap:0.9rem 1.5rem; }
@media (min-width:40rem){ .ficha dl{ grid-template-columns:7.5rem minmax(0,1fr); } }
.ficha dt{
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--tinta-2); padding-top:0.28em;
}
.ficha dd{ margin:0; max-width:var(--texto); }

/* ── Hueco pendiente: mismo criterio que el bloque de demo del index ── */
.pendiente{
  border:1px dashed var(--linea); background:var(--papel-alt);
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.09em;
  color:var(--tinta-2); text-transform:uppercase; line-height:1.7;
  padding:0.85rem 1rem; margin:0; max-width:34rem;
}

/* ── Botón y cierre ─────────────────────────────────────────── */
.boton{
  display:inline-block; background:var(--tinta); color:var(--papel);
  font-size:1.02rem; font-weight:600; text-decoration:none; letter-spacing:-0.01em;
  padding:1.05rem 1.9rem; border-radius:1px;
  transition:background .12s ease;
}
.boton:hover{ background:var(--azul); color:var(--papel); }

.cierre{ padding-block:var(--paso) calc(var(--paso) + 1rem); border-top:1px solid var(--linea); }
.cierre h2{ max-width:26ch; }
.cierre p{ margin-top:1.4rem; }
.cierre .boton{ margin-top:2rem; }

.pie{
  border-top:1px solid var(--linea); padding-block:1.75rem 3rem;
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.1em;
  color:var(--tinta-2); text-transform:uppercase; line-height:1.8;
}