/* Jorge Montagna · portfolio
   Sistema: coral y petróleo, Recursive, esquinas rectas, sombras duras. */

:root {
  --coral: #EA7556;
  --coral-suave: #FBE3DC;
  --petroleo: #29869E;
  --petroleo-profundo: #1E6577;
  --petroleo-texto: #1E6577;
  --fondo: #FFFFFF;
  --fondo-elevado: #F5F5F4;
  --superficie: #FFFFFF;
  --texto: #141414;
  --texto-suave: #5A5A5A;
  --linea: #E2E2E0;
  --sobre-coral: #141414;
  --sobre-petroleo: #FFFFFF;
  --foco: #1E6577;
  --sombra-ficha: 6px 6px 0 #29869E;
  --sombra-ficha-activa: 3px 3px 0 #29869E;
  --sombra-boton: 4px 4px 0 #141414;
  --sombra-boton-activa: 2px 2px 0 #141414;
  --sombra-numero: 2px 2px 0 #141414;
  --font: "Recursive", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ancho: 1200px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --coral-suave: #3A221B; --petroleo-texto: #5FB3C9; --foco: #5FB3C9;
    --fondo: #141414; --fondo-elevado: #1E1E1E; --superficie: #1E1E1E;
    --texto: #F2F2F2; --texto-suave: #B0B0B0; --linea: #2E2E2E;
    --sombra-boton: 4px 4px 0 #29869E; --sombra-boton-activa: 2px 2px 0 #29869E; --sombra-numero: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --coral-suave: #3A221B; --petroleo-texto: #5FB3C9; --foco: #5FB3C9;
  --fondo: #141414; --fondo-elevado: #1E1E1E; --superficie: #1E1E1E;
  --texto: #F2F2F2; --texto-suave: #B0B0B0; --linea: #2E2E2E;
  --sombra-boton: 4px 4px 0 #29869E; --sombra-boton-activa: 2px 2px 0 #29869E; --sombra-numero: none;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font-family: var(--font); font-variation-settings: "CASL" 0, "MONO" 0;
  font-size: 17px; line-height: 1.6;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.12; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
.salto { position: absolute; left: -9999px; }
.salto:focus { left: 16px; top: 16px; z-index: 50; background: var(--fondo); padding: 8px 12px; }

.envoltura {
  max-width: var(--ancho); margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 700px) { .envoltura { padding-left: 32px; padding-right: 32px; } }
@media (min-width: 1100px) { .envoltura { padding-left: 64px; padding-right: 64px; } }

/* Voces de Recursive */
.mono { font-variation-settings: "MONO" 1; }
.manual { font-variation-settings: "CASL" 1, "MONO" 0; }
.rotulo {
  font-size: 12px; line-height: 1.2; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: "MONO" 1; color: var(--petroleo-texto);
}
.firma {
  font-weight: 850; letter-spacing: -.02em; line-height: .95;
  font-variation-settings: "CASL" 0, "MONO" 0, "slnt" 0;
  transition: font-variation-settings .5s cubic-bezier(.2,.7,.2,1);
}
.firma:hover, .firma-zona:hover .firma { font-variation-settings: "CASL" 0, "MONO" 0, "slnt" -12; }

/* Barra */
.barra { border-bottom: 1px solid var(--linea); background: var(--fondo); }
.barra .envoltura { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-block: 10px; }
.barra .marca { font-size: 20px; text-decoration: none; }
.barra nav { display: flex; align-items: center; gap: 4px 20px; flex-wrap: wrap; }
.barra nav a { font-size: 13px; font-weight: 600; letter-spacing: .03em; text-decoration: none; font-variation-settings: "MONO" 1; padding: 6px 0; }
.barra nav a:hover { text-decoration: underline; text-decoration-color: var(--coral); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.tema {
  width: 40px; height: 40px; display: inline-grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--texto); border: 2px solid var(--texto); border-radius: 0;
}
.tema svg { width: 18px; height: 18px; }
.tema .luna { display: none; }
:root[data-theme="dark"] .tema .sol { display: none; }
:root[data-theme="dark"] .tema .luna { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tema .sol { display: none; }
  :root:not([data-theme="light"]) .tema .luna { display: block; }
}

/* Apertura */
.apertura { background: var(--coral); color: var(--sobre-coral); position: relative; }
.apertura .envoltura { padding-block: 64px 80px; display: grid; gap: 28px; }
.apertura .rotulo { color: var(--sobre-coral); }
.apertura h1 { font-size: clamp(56px, 8vw, 100px); }
.apertura .mensaje { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; font-weight: 800; letter-spacing: -.015em; max-width: 20ch; }
.apertura .bajada-apertura { font-size: 18px; line-height: 1.55; max-width: 44ch; }
.apertura .acciones { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; }
.apertura .bloque-nombre, .apertura .bloque-mensaje { display: grid; gap: 24px; align-content: end; }
@media (min-width: 1000px) {
  .apertura .envoltura { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; align-items: end; padding-block: 88px 96px; }
  .apertura .bloque-mensaje { padding-bottom: 10px; }
}
.etiqueta {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--petroleo-profundo); color: var(--sobre-petroleo);
  font-size: 13px; line-height: 1; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  font-variation-settings: "MONO" 1; padding: 12px 16px; transform: rotate(-2deg); transition: transform .3s ease;
}
.etiqueta:hover { transform: rotate(0deg); }
.apertura .etiqueta { position: absolute; left: max(16px, env(safe-area-inset-left, 0px)); bottom: -20px; z-index: 2; }
@media (min-width: 700px) { .apertura .etiqueta { left: 32px; } }
@media (min-width: 1100px) { .apertura .etiqueta { left: max(64px, calc((100vw - var(--ancho)) / 2 + 64px)); } }

/* Botones */
.boton {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  font-family: var(--font); font-size: 15px; line-height: 1; font-weight: 700; letter-spacing: .02em;
  font-variation-settings: "MONO" 1; padding: 14px 20px; text-decoration: none; cursor: pointer;
  border: 2px solid var(--texto); border-radius: 0; box-shadow: var(--sombra-boton);
  transition: transform .15s ease, box-shadow .15s ease;
}
.boton:hover { transform: translate(2px, 2px); box-shadow: var(--sombra-boton-activa); }
.boton:active { transform: translate(4px, 4px); box-shadow: none; }
.boton.primario { background: var(--coral); color: var(--sobre-coral); border-color: var(--sobre-coral); }
.boton.secundario { background: var(--fondo); color: var(--texto); }
.apertura .boton.primario { background: var(--texto); color: var(--fondo); border-color: var(--texto); box-shadow: 4px 4px 0 var(--fondo); }
.apertura .boton.secundario { background: transparent; color: var(--sobre-coral); border-color: var(--sobre-coral); box-shadow: 4px 4px 0 var(--sobre-coral); }
:root[data-theme="dark"] .apertura .boton.primario { background: #141414; color: #FFFFFF; border-color: #141414; box-shadow: 4px 4px 0 #FFFFFF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .apertura .boton.primario { background: #141414; color: #FFFFFF; border-color: #141414; box-shadow: 4px 4px 0 #FFFFFF; } }
.enlace { color: var(--petroleo-texto); font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.enlace:hover { text-decoration-color: var(--coral); }

/* Secciones */
.seccion { padding-block: 96px 0; }
.seccion-titulo { display: grid; gap: 12px; margin-bottom: 40px; }
.seccion-titulo h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; letter-spacing: -.015em; }
.seccion-titulo .rotulo { display: flex; align-items: center; gap: 12px; }
.seccion-titulo .rotulo::before { content: ""; width: 28px; height: 4px; background: var(--petroleo); }

/* Qué hago */
.oficio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 860px) { .oficio { grid-template-columns: 1fr; } }
.oficio article { border-top: 2px solid var(--texto); padding-top: 16px; display: grid; gap: 10px; align-content: start; }
.oficio h3 { font-size: 22px; font-weight: 800; }
.oficio p { color: var(--texto-suave); font-size: 16px; }

/* Casos */
.casos { display: grid; gap: 72px; }
.caso-bloque { display: grid; gap: 18px; }
.caso-nombre { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; }
.caso-nombre .num { font-size: 20px; font-weight: 700; font-variation-settings: "MONO" 1; color: var(--petroleo-texto); }
.caso-nombre h3 { font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: .02em; font-variation-settings: "MONO" 1; color: var(--petroleo-texto); }
.caso-nombre .tipo { flex-basis: 100%; }
@media (min-width: 700px) { .caso-nombre .tipo { flex-basis: auto; } }
.caso {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); text-decoration: none; color: var(--texto);
  background: var(--superficie); border: 2px solid var(--texto); box-shadow: var(--sombra-ficha);
  transition: transform .2s ease, box-shadow .2s ease; margin-right: 6px;
}
.caso:hover { transform: translate(3px, 3px); box-shadow: var(--sombra-ficha-activa); }
@media (max-width: 860px) { .caso { grid-template-columns: 1fr; } }
.caso .visual { background: var(--fondo-elevado); border-right: 2px solid var(--texto); display: grid; place-items: center; padding: 28px; min-height: 320px; overflow: hidden; }
@media (max-width: 860px) { .caso .visual { border-right: 0; border-bottom: 2px solid var(--texto); } }
.caso .visual.coral { background: var(--coral-suave); }
.caso .telefonos { display: flex; gap: 16px; justify-content: center; align-items: flex-start; }
.caso .telefonos img { width: min(44%, 200px); border: 1.5px solid var(--texto); }
.caso .telefonos img + img { margin-top: 32px; }
.caso .pantalla { border: 1.5px solid var(--texto); }
.caso .texto { padding: 28px; display: grid; gap: 14px; align-content: start; }
.caso h4 { margin: 0; font-size: clamp(24px, 2.6vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; text-wrap: balance; }
.caso .bajada { color: var(--texto-suave); font-size: 16px; max-width: 46ch; }
.metricas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 6px; }
.metrica { border-top: 2px solid var(--texto); padding-top: 8px; display: grid; gap: 4px; }
.metrica b { font-size: 40px; line-height: 1; font-weight: 850; letter-spacing: -.01em; color: var(--coral); text-shadow: var(--sombra-numero); font-variation-settings: "CASL" 0, "MONO" 0; font-variant-numeric: tabular-nums; }
.metrica span { font-size: 13px; line-height: 1.45; color: var(--texto-suave); }
.ver { font-size: 14px; font-weight: 700; font-variation-settings: "MONO" 1; color: var(--petroleo-texto); display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; }
.caso:hover .ver { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Sobre mí */
.sobre { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .sobre { grid-template-columns: 1fr; } }
.sobre figure { margin: 0 6px 6px 0; border: 2px solid var(--texto); box-shadow: var(--sombra-ficha); max-width: 360px; }
.sobre .texto { display: grid; gap: 18px; max-width: 64ch; }
.sobre .texto p:first-child { font-size: 22px; line-height: 1.4; font-weight: 700; font-variation-settings: "CASL" .5; }

/* Contacto */
.contacto { margin-top: 96px; background: var(--fondo-elevado); border-top: 4px solid var(--petroleo); }
.contacto .envoltura { padding-block: 72px; display: grid; gap: 28px; }
.contacto h2 { font-size: clamp(28px, 4vw, 44px); font-weight: 850; letter-spacing: -.02em; max-width: 26ch; display: grid; gap: 14px; }
.contacto h2 span { display: block; }
.contacto .invitacion { font-size: clamp(20px, 2.4vw, 26px); font-weight: 700; }
.contacto .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.contacto .separador { width: 2px; height: 40px; background: var(--texto-suave); margin: 0 16px; }
@media (max-width: 600px) { .contacto .separador { flex-basis: 100%; width: 0; height: 0; margin: 0; } }
.contacto .datos { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; font-variation-settings: "MONO" 1; color: var(--texto-suave); }
.contacto .datos span { user-select: all; }

/* Pie */
.pie { border-top: 1px solid var(--linea); }
.pie .envoltura { padding-block: 32px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; align-items: center; font-size: 13px; color: var(--texto-suave); }
.pie .firma { font-size: 18px; color: var(--texto); }
.pie nav { display: flex; gap: 20px; flex-wrap: wrap; }
.pie nav a { color: var(--texto-suave); font-variation-settings: "MONO" 1; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .firma, .etiqueta, .caso, .boton { transition: none; }
}

/* ===== Páginas de caso ===== */
.caso-apertura { background: var(--fondo-elevado); border-bottom: 2px solid var(--texto); }
.caso-apertura .envoltura { padding-block: 56px 64px; display: grid; gap: 40px; }
@media (min-width: 1000px) { .caso-apertura .envoltura { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; } }
.caso-apertura .titulos { display: grid; gap: 18px; min-width: 0; }
.caso-apertura h1 { font-size: clamp(44px, 6vw, 80px); overflow-wrap: break-word; font-weight: 850; letter-spacing: -.025em; line-height: .95; }
.caso-apertura .subtitulo { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; font-weight: 800; letter-spacing: -.01em; max-width: 22ch; }
.caso-apertura .bajada { color: var(--texto-suave); max-width: 52ch; }
.volver { font-size: 13px; font-weight: 600; font-variation-settings: "MONO" 1; text-decoration: none; color: var(--petroleo-texto); }
.volver:hover { text-decoration: underline; text-underline-offset: 4px; }

.telefonos-fila { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.telefonos-fila img { width: min(30%, 210px); border: 1.5px solid var(--texto); background: var(--fondo); }
.telefonos-fila.escalonados img:nth-child(2) { margin-top: 40px; }
.telefonos-fila.escalonados img:nth-child(3) { margin-top: 80px; }
@media (max-width: 600px) { .telefonos-fila img { width: min(45%, 210px); } .telefonos-fila.escalonados img { margin-top: 0 !important; } }

.ficha-tecnica { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin: 0; border: 2px solid var(--texto); background: var(--superficie); }
@media (max-width: 860px) { .ficha-tecnica { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .ficha-tecnica { grid-template-columns: 1fr; } }
.ficha-tecnica div { padding: 16px 18px; border-right: 1px solid var(--linea); border-bottom: 1px solid var(--linea); display: grid; gap: 6px; align-content: start; }
.ficha-tecnica dt { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-variation-settings: "MONO" 1; color: var(--petroleo-texto); }
.ficha-tecnica dd { margin: 0; font-size: 15px; line-height: 1.5; }

.datos-caso { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; }

.bloque { padding-block: 72px 0; display: grid; gap: 28px; }
@media (min-width: 1000px) { .bloque { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; } }
.bloque > header { display: grid; gap: 10px; align-content: start; }
.bloque > header .rotulo { display: flex; align-items: center; gap: 10px; }
.bloque > header .rotulo::before { content: ""; width: 24px; height: 4px; background: var(--petroleo); }
.bloque > header h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -.015em; }
.bloque .cuerpo { display: grid; gap: 22px; max-width: 70ch; }
.bloque .cuerpo.ancho { max-width: none; }
.bloque .cuerpo p strong { font-weight: 700; }
.bloque .conclusion { font-size: 21px; line-height: 1.45; font-weight: 700; }
.bloque ul, .bloque ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; }

.momentos { display: grid; gap: 28px; counter-reset: momento; padding: 0; list-style: none; }
.momentos li { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
.momentos li::before { counter-increment: momento; content: counter(momento, decimal-leading-zero); font-size: 20px; font-weight: 800; font-variation-settings: "MONO" 1; color: var(--coral); text-shadow: var(--sombra-numero); }
.momentos h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }

.figura { margin: 0; display: grid; gap: 10px; }
.figura .marco { border: 2px solid var(--texto); box-shadow: var(--sombra-ficha); background: var(--fondo-elevado); margin-right: 6px; overflow: hidden; }
.figura .marco.relleno { padding: 24px; }
.figura figcaption { font-size: 14px; line-height: 1.5; color: var(--texto-suave); max-width: 70ch; }
.figura figcaption b { color: var(--texto); }

.iteracion { display: grid; gap: 10px; border: 2px solid var(--texto); background: var(--superficie); padding: 18px; }
.version { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; font-size: 16px; line-height: 1.45; }
.version b { font-size: 12px; font-weight: 700; text-align: center; padding: 6px 0; border-radius: 4px; font-variation-settings: "MONO" 1; }
.version.anterior b { background: var(--coral); color: var(--sobre-coral); }
.version.anterior span { color: var(--texto-suave); text-decoration: line-through; text-decoration-color: var(--coral); text-decoration-thickness: 2px; }
.version.nueva b { background: var(--petroleo-profundo); color: var(--sobre-petroleo); }
.version.nueva span { font-weight: 700; }

.cita { margin: 0; border-left: 4px solid var(--petroleo); padding: 4px 0 4px 20px; display: grid; gap: 10px; }
.cita p { font-size: 19px; line-height: 1.5; font-weight: 600; }
.cita cite { font-style: normal; font-size: 13px; color: var(--texto-suave); font-variation-settings: "MONO" 1; }

.siguiente { margin-top: 96px; background: var(--coral); color: var(--sobre-coral); }
.siguiente .envoltura { padding-block: 56px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 24px; }
.siguiente a.proximo { color: var(--sobre-coral); text-decoration: none; display: grid; gap: 8px; }
.siguiente .rotulo { color: var(--sobre-coral); }
.siguiente .proximo strong { font-size: clamp(36px, 6vw, 64px); font-weight: 850; letter-spacing: -.02em; line-height: 1; }
.siguiente a.proximo:hover strong { text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.siguiente .apoyo { display: flex; gap: 16px; flex-wrap: wrap; }
.siguiente .apoyo a { color: var(--sobre-coral); font-weight: 700; font-variation-settings: "MONO" 1; font-size: 14px; }

/* Ampliar imágenes */
.ampliar { display: block; position: relative; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.ampliar img { width: 100%; }
.ampliar-marca {
  position: absolute; right: 12px; bottom: 12px; background: var(--texto); color: var(--fondo);
  font-family: var(--font); font-size: 12px; font-weight: 700; font-variation-settings: "MONO" 1; padding: 6px 10px;
  opacity: .85; transition: opacity .2s ease;
}
.ampliar:hover .ampliar-marca, .ampliar:focus-visible .ampliar-marca { opacity: 1; }
.visor { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #141414; color: #FFFFFF; }
.visor::backdrop { background: rgba(20, 20, 20, .9); }
.visor[open] { display: flex; flex-direction: column; }
.visor-barra {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex: none;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px));
  font-family: var(--font); font-variation-settings: "MONO" 1; font-size: 13px; border-bottom: 1px solid #2E2E2E;
}
.visor-cerrar { font-family: var(--font); font-variation-settings: "MONO" 1; font-size: 14px; font-weight: 700; background: #EA7556; color: #141414; border: 2px solid #141414; padding: 10px 16px; cursor: pointer; min-height: 44px; }
.visor-lienzo { flex: 1; overflow: auto; display: grid; place-items: start center; padding: 16px; }
.visor-lienzo img { max-width: 100%; height: auto; cursor: zoom-in; background: #FFFFFF; }
.visor-lienzo.real img { max-width: none; cursor: zoom-out; }

/* Tablas, comparaciones y materiales */
.tabla-caja { overflow-x: auto; border: 2px solid var(--texto); background: var(--superficie); }
.tabla { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
.tabla th, .tabla td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla th { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-variation-settings: "MONO" 1; color: var(--petroleo-texto); border-bottom: 2px solid var(--texto); }
.tabla td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tr:last-child td { border-bottom: 0; }
.nota { font-size: 14px; color: var(--texto-suave); }
.par { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
@media (max-width: 760px) { .par { grid-template-columns: 1fr; } }
.par .figura .etiqueta-par { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; font-variation-settings: "MONO" 1; color: var(--petroleo-texto); }
.codigo { margin: 0; padding: 16px; overflow-x: auto; background: var(--fondo-elevado); border: 2px solid var(--texto); font-size: 14px; line-height: 1.6; font-family: var(--font); font-variation-settings: "MONO" 1; }
.materiales { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.material { display: grid; gap: 6px; padding: 16px; border: 2px solid var(--texto); text-decoration: none; color: var(--texto); background: var(--superficie); box-shadow: var(--sombra-boton); transition: transform .15s ease, box-shadow .15s ease; margin: 0 4px 4px 0; }
.material:hover { transform: translate(2px, 2px); box-shadow: var(--sombra-boton-activa); }
.material b { font-size: 16px; }
.material span { font-size: 14px; color: var(--texto-suave); }
.aviso { border: 2px dashed var(--texto-suave); padding: 14px 16px; font-size: 14px; color: var(--texto-suave); }

.figura .marco img, .figura .marco .ampliar { vertical-align: top; }

/* Retrato con sorpresa: la foto real y, al pasar el mouse o tocar, la caricatura */
.sobre figure.retrato { border: 0; box-shadow: none; margin: 0; max-width: 360px; display: grid; gap: 12px; }
.retrato-boton { position: relative; display: block; width: calc(100% - 6px); padding: 0; border: 2px solid var(--texto); box-shadow: var(--sombra-ficha); background: var(--fondo-elevado); cursor: pointer; overflow: hidden; }
.retrato-boton img { display: block; width: 100%; height: auto; }
.retrato-boton .caricatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.retrato-boton[aria-pressed="true"] .caricatura { opacity: 1; }
/* El efecto al pasar el mouse solo en equipos con mouse: en el celular el "hover" queda pegado después de tocar. */
@media (hover: hover) and (pointer: fine) { .retrato-boton:hover .caricatura { opacity: 1; } }
.retrato-pista { font-size: 13px; color: var(--texto-suave); font-variation-settings: "MONO" 1; }
@media (prefers-reduced-motion: reduce) { .retrato-boton .caricatura { transition: none; } }