/* Zona de programadores: portada, ejemplos de código, calculadora y errores. Mismas variables que el resto del sitio. */
.zona [hidden] { display: none !important; }

.portada-api { padding-block: var(--e-5); border-bottom: 1px solid var(--linea); }
.portada-api__fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--e-4); align-items: start; }
.portada-api h1 { font-size: var(--t-5); line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin-bottom: var(--e-2); max-width: 15ch; }
.portada-api__texto { color: var(--tinta-2); font-size: 1.1875rem; max-width: 40ch; margin-bottom: var(--e-3); }
.portada-api__codigo { min-width: 0; }
@media (max-width: 860px) { .portada-api__fila { grid-template-columns: minmax(0, 1fr); } }

/* Bloques de código: papel blanco, borde fino y línea verde azulada. Nombres en azul marino y valores en verde azulado. */
.zona pre.codigo { margin: 0 0 var(--e-2); border-radius: 0 var(--radio) var(--radio) 0; border-left-width: 4px; white-space: pre; max-width: 100%; }
.zona pre.codigo code { font-family: var(--fuente-codigo); font-size: inherit; }
.zona pre.codigo .k { color: var(--navy); font-weight: 500; }
.zona pre.codigo .v { color: var(--teal-texto); }
.par { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px var(--e-2); font: 500 0.875rem var(--fuente-titulos); color: var(--tinta-2); margin-bottom: 6px; }
.lenguajes { display: inline-flex; flex-wrap: wrap; gap: 0 var(--e-2); }
.lenguajes a { font: 400 0.875rem var(--fuente-codigo); color: var(--teal-texto); text-decoration: none; padding: 10px 2px; min-height: 44px; display: inline-flex; align-items: center; }
.lenguajes a.on { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.lenguajes a:hover { text-decoration: underline; }
.copiar { font: 500 0.875rem var(--fuente-titulos); color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: var(--radio); padding: 6px 12px; min-height: 44px; cursor: pointer; }
.copiar:hover { background: #002a540f; }
.zona .meta code, .zona .prosa code, .zona td code, .zona th code, .zona dt code { background: var(--tinte); padding: 1px 5px; border-radius: 4px; font-size: 0.875em; }

/* Calculadora de precio */
.calculadora { align-items: center; margin-block: var(--e-3); }
.calculadora input[type="range"] { width: 100%; accent-color: var(--teal); height: 44px; }
.total { font: 600 clamp(2.5rem, 6vw, 3.75rem)/1 var(--fuente-titulos); color: var(--navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.total output { font: inherit; }
.total small { font: 400 1.125rem var(--fuente-texto); color: var(--tinta-2); letter-spacing: 0; }
.escalones summary { cursor: pointer; color: var(--teal-texto); min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
.escalones table { max-width: 28rem; margin-top: var(--e-1); }

.estado-sat { color: var(--tinta-2); margin-top: var(--e-2); }