/* Manos de Oro: components for mdo.greenmaestro.com. Load after tokens.css.
   Mobile first. Square corners everywhere. No borders on cards, no shadows, no gradients,
   no hairlines, no " · " separators. The only line is la regla (2px sombra, horizontal). */

/* ================================================================== base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--sans); font-size: var(--t-body); line-height: var(--lh-body);
  font-variant-numeric: lining-nums;
}
img, svg, video { display: block; max-width: 100%; }
p { margin: 0 0 var(--s2); }
p:last-child { margin-bottom: 0; }
b, strong { font-weight: 700; }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: var(--w); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 3px; }

:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.on-ink :focus-visible, .alto :focus-visible { outline-color: var(--cal); }

.skip { position: absolute; left: var(--gutter); top: -100px; background: var(--ink); color: var(--on-ink); padding: var(--s1) var(--s2); z-index: 10; }
.skip:focus { top: var(--s1); }

/* the language switch keeps the current site's mechanism (lang.js sets html[data-l]) */
[data-lang] { display: none; }
html[data-l=es] [data-lang=es],
html[data-l=es_CA] [data-lang=es]:not([data-var=mx]),
html[data-l=es_CA] [data-lang=es_CA],
html[data-l=en] [data-lang=en] { display: revert; }

/* ================================================================== the page grid */
.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
main { padding: var(--s5) 0 var(--section-gap); }

/* a section: heading in columns 1–4, content in 5–12 on desktop; stacked on phones */
.seccion { margin-top: var(--section-gap); }
.seccion:first-child { margin-top: 0; }
.seccion > * + * { margin-top: var(--s2); }
.seccion .cuerpo { max-width: var(--text-max); }
/* spacing flows downward (margin-bottom) so hidden language twins never add space above the first visible block */
.seccion .cuerpo > * { margin-top: 0; margin-bottom: var(--s3); }
.seccion .cuerpo > p { margin-bottom: var(--s2); }
.seccion .cuerpo > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
  .seccion { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--col-gap); align-items: start; }
  .seccion > h2 { grid-column: 1 / span 4; margin-top: 0; }
  .seccion > .cuerpo { grid-column: 5 / span 8; margin-top: 0; }
  .seccion.ancha > .cuerpo { max-width: none; }
}

/* ================================================================== type */
.kicker {
  font-family: var(--sans); font-weight: 700; font-size: var(--t-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink);
  margin: 0 0 var(--s2); display: flex; flex-wrap: wrap; gap: 0 var(--s3);
}
h1, h2 { font-family: var(--serif); font-weight: 700; color: var(--ink); margin: 0; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: var(--lh-tight); letter-spacing: -0.005em; }
h2 { font-size: var(--t-h2); line-height: 1.15; }
h3 { font-family: var(--sans); font-weight: 700; font-size: var(--t-h3); line-height: 1.3; margin: 0 0 var(--s1); }
.lead { font-family: var(--serif); font-size: var(--t-lead); line-height: 1.35; margin: var(--s3) 0 0; max-width: 34em; }
.lead em, .lead i { font-style: italic; }
.nota { font-size: var(--t-small); color: var(--ink-2); line-height: 1.5; }
.cifra { font-family: var(--serif); font-weight: 700; font-size: var(--t-cifra); line-height: 1; color: var(--ink); font-variant-numeric: lining-nums; }

/* ================================================================== la regla */
.regla { border: 0; height: var(--w); background: var(--ink); margin: 0; }

/* ================================================================== la cabecera */
.cabecera { background: var(--ground); }
.cabecera .wrap > .fila {
  height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  border-bottom: var(--w) solid var(--ink);            /* la regla closes the head */
}
.marca { display: block; padding: var(--s1) 0; line-height: 0; }
.marca img { height: var(--wordmark-h); width: auto; }
.cabecera .derecha { display: flex; align-items: center; gap: var(--s4); }
.cabecera .derecha .oficio { display: none; }
@media (min-width: 640px) { .cabecera .derecha .oficio { display: inline-flex; } }

/* ================================================================== language switch */
.lang { display: flex; }
.lang button {
  appearance: none; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font: 700 var(--t-label)/1 var(--sans); letter-spacing: 0.08em;
  min-width: 44px; min-height: var(--tap); padding: 0 var(--s1);
}
.lang button:hover { text-decoration: underline; text-decoration-thickness: var(--w); text-underline-offset: 0.3em; }
.lang button.on, .lang button[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); }

/* ================================================================== oficio chip: symbol + Spanish word, no box */
.oficio {
  display: inline-flex; align-items: center; gap: var(--s1);
  font-family: var(--sans); font-weight: 700; font-size: var(--t-label);
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); text-decoration: none;
}
.oficio img, .oficio svg { width: var(--icon); height: var(--icon); flex: none; }
.oficio .gloss { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
a.oficio:hover .palabra { text-decoration: underline; text-decoration-thickness: var(--w); text-underline-offset: 0.3em; }

/* the seven oficios as a grid (home, /equipo index) */
.oficios { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3) var(--s2); }
.oficios .oficio { flex-direction: column; align-items: flex-start; gap: var(--s1); }
.oficios .oficio img, .oficios .oficio svg { width: var(--icon-lg); height: var(--icon-lg); }
@media (min-width: 640px) { .oficios { grid-template-columns: repeat(4, 1fr); } }

/* ================================================================== buttons (square, solid, no outline) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s1);
  min-height: var(--tap); padding: var(--s1) var(--s3); border: 0; border-radius: 0; cursor: pointer;
  font: 700 var(--t-body)/1.2 var(--sans); text-decoration: none; text-align: center;
  background: var(--ink); color: var(--on-ink);
}
.btn:hover { text-decoration: underline; text-decoration-thickness: var(--w); text-underline-offset: 0.25em; }
.btn.segundo { background: var(--panel); color: var(--ink); }
.btn.ancho { width: 100%; }
.btn .meta { font-weight: 400; font-size: var(--t-small); opacity: 0.9; }
.btn[disabled] { background: var(--panel); color: var(--ink-2); cursor: not-allowed; text-decoration: none; }

/* ================================================================== cards: papel hondo, no outline */
.card { background: var(--panel); padding: var(--s3); }
.card > :last-child { margin-bottom: 0; }
.cards { display: grid; gap: var(--s2); }
@media (min-width: 640px) { .cards.tres { grid-template-columns: repeat(3, 1fr); } .cards.dos { grid-template-columns: 1fr 1fr; } }

/* a título card: la cifra, then the word (side by side on phones, stacked from 640px) */
.titulo { display: grid; grid-template-columns: var(--s8) 1fr; column-gap: var(--s2); align-items: baseline; }
.titulo .cifra { grid-row: span 2; }
@media (min-width: 640px) { .titulo { display: block; } .titulo .cifra { display: block; margin-bottom: var(--s2); } }
.titulo h3 { font-family: var(--serif); font-size: var(--t-h2); margin: 0 0 var(--s1); }
.titulo p { margin: 0; }

/* a linked card (module list, /equipo) */
a.card { display: block; color: var(--ink); text-decoration: none; }
a.card:hover h3 { text-decoration: underline; text-decoration-thickness: var(--w); text-underline-offset: 0.2em; }
.card.fila { display: flex; gap: var(--s2); align-items: center; }

/* numbered rules and numbers: Ibarra numerals, sombra */
.lista-cifras { list-style: none; counter-reset: c; margin: 0; padding: 0; }
.lista-cifras li { counter-increment: c; display: grid; grid-template-columns: var(--s4) 1fr; gap: var(--s2); padding: var(--s1) 0; }
.lista-cifras li::before { content: counter(c); font-family: var(--serif); font-weight: 700; font-size: 1.4em; line-height: 1.1; }

/* ================================================================== questions (FAQ) */
.preguntas { display: grid; gap: var(--s1); }
.preguntas details, .seccion .preguntas > details { background: var(--panel); margin: 0; }
.preguntas summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; gap: var(--s2); align-items: baseline;
  padding: var(--s2) var(--s3); min-height: var(--tap); font-weight: 700;
}
.preguntas summary::-webkit-details-marker { display: none; }
.preguntas summary::after { content: "+"; font-family: var(--serif); font-weight: 700; font-size: 1.4em; line-height: 1; }
.preguntas details[open] summary::after { content: "\2212"; }
.preguntas details > :not(summary) { padding: 0 var(--s3) var(--s3); margin: 0; }

/* ================================================================== el alto: grana field, cal text. The only grana on an everyday page */
.alto { background: var(--stop); color: var(--cal); padding: var(--s3); }
.alto .alto-titulo {
  display: block; font-family: var(--sans); font-weight: 800; font-size: var(--t-label);
  letter-spacing: var(--track-label); text-transform: uppercase; margin: 0 0 var(--s1);
}
.alto p { margin: 0; font-weight: 700; }
.alto a { color: var(--cal); }

/* ================================================================== media */
.video { width: 100%; aspect-ratio: 16 / 9; background: var(--ink); object-fit: contain; border: 0; }
.foto { width: 100%; height: auto; border: 0; }            /* real, consented; square corners, no frame */
figure { margin: 0; }
figcaption { font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s1); }

/* the "take it to the job" block: thumbnail + downloads */
.descarga { display: grid; grid-template-columns: 96px 1fr; gap: var(--s3); align-items: start; }
.descarga img { width: 96px; height: auto; background: var(--panel); }
.descarga ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.descarga a { font-weight: 700; }
.descarga .meta { display: block; font-size: var(--t-small); color: var(--ink-2); font-weight: 400; }

/* ================================================================== forms (Maestro code on /estudio) */
label { display: block; font-weight: 700; margin-bottom: var(--s1); }
input[type=text], input:not([type]) {
  width: 100%; min-height: var(--tap); padding: var(--s1) var(--s2); border: 0; border-radius: 0;
  border-bottom: var(--w) solid var(--ink); background: var(--cal); color: var(--ink);
  font: 700 var(--t-body)/1.2 var(--sans); letter-spacing: 0.06em; text-transform: uppercase;
}
.campo { display: flex; gap: var(--s1); flex-wrap: wrap; }
.campo input { flex: 1 1 12rem; width: auto; }

/* ================================================================== verify (/verify/<serial>) */
.veredicto { margin-top: var(--s4); }
.veredicto .estado {
  font-family: var(--serif); font-weight: 700; font-size: var(--t-verdict); line-height: 1;
  letter-spacing: var(--track-verdict); text-transform: uppercase; margin: 0;
}
.veredicto .porque { font-size: var(--t-body); margin: var(--s2) 0 0; max-width: var(--text-max); }

/* VÁLIDA: paper, sombra verdict between two reglas, the grana seal beside it (the seal = SEALED) */
.veredicto.valida { border-top: var(--w) solid var(--ink); border-bottom: var(--w) solid var(--ink); padding: var(--s4) 0; }
.veredicto.valida .sello-fila { display: grid; grid-template-columns: 1fr; gap: var(--s3); align-items: center; }
.veredicto.valida .sello { width: 160px; height: 160px; }      /* never below 160px on screen */
@media (min-width: 640px) {
  .veredicto.valida .sello-fila { grid-template-columns: 1fr 200px; }
  .veredicto.valida .sello { width: 200px; height: 200px; justify-self: end; }
}

/* NO VÁLIDA: el alto */
.veredicto.no-valida { background: var(--stop); color: var(--cal); padding: var(--s4) var(--s3); }
.veredicto.no-valida a { color: var(--cal); }

/* REVOCADA: a sombra field, cal text, no seal */
.veredicto.revocada { background: var(--ink); color: var(--cal); padding: var(--s4) var(--s3); }
.veredicto.revocada a { color: var(--cal); }

/* the printed facts of a public carta */
.hechos { display: grid; grid-template-columns: 1fr; gap: var(--s2) var(--s4); margin: var(--s4) 0 0; }
.hechos div { display: grid; gap: 2px; }
.hechos dt {
  font-weight: 700; font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-2);
}
.hechos dd { margin: 0; font-size: var(--t-body); }
.hechos .nombre dd { font-family: var(--serif); font-weight: 700; font-size: var(--t-h2); line-height: 1.15; overflow-wrap: anywhere; }
@media (min-width: 640px) {
  .hechos { grid-template-columns: 1fr 1fr; }
  .hechos .nombre { grid-column: 1 / -1; }
}

/* ================================================================== el pie (+ colofón above it) */
.colofon { color: var(--ink-2); font-size: var(--t-small); padding: var(--s6) 0 var(--s4); }
.colofon nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-bottom: var(--s2); }
.colofon nav a { color: var(--ink); font-weight: 700; min-height: var(--tap); display: inline-flex; align-items: center; }
.colofon p { max-width: var(--text-max); }

.pie {
  border-top: var(--w) solid var(--ink);                    /* la regla opens the foot */
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s1) var(--s3);
  padding: var(--s2) 0 var(--s5);
  font-family: var(--sans); font-weight: 700; font-size: var(--t-label); letter-spacing: var(--track-label);
}
.pie .codigo { text-transform: uppercase; }
.pie a { text-decoration: none; letter-spacing: 0.04em; }
.pie a:hover { text-decoration: underline; }

/* ================================================================== print: the page is already ink on paper */
@media print {
  .lang, .skip, video { display: none !important; }
  body { background: #fff; }
}

/* ================================================================== page openings */
.seccion.inicio { display: block; padding: var(--s4) 0 0; }
.inicio h1 { font-size: var(--t-display); line-height: 1.02; max-width: 12em; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s5); }
@media (max-width: 479px) { .acciones .btn { flex: 1 1 100%; } }
.seccion.bloque-video { display: block; margin-top: var(--s5); }
.kicker .oficio { font-size: inherit; }
.solo-telefono { display: inline-flex; }
@media (min-width: 640px) { .solo-telefono { display: none; } }

/* status line under a module title (pilot, etc.): secondary text, never a grana box */
.estado-piloto {
  margin: var(--s2) 0 0; font-weight: 700; font-size: var(--t-small); color: var(--ink-2);
}

/* downloads: full-width secondary buttons, label left, size right */
.descargas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.descargas .btn { justify-content: space-between; text-align: left; padding: var(--s2) var(--s3); }
.descargas .btn .meta { font-weight: 400; color: var(--ink-2); white-space: nowrap; }

/* the verify page is one narrow column (8 of 12) */
.verificar > * { max-width: 800px; }
.verificar h1 { margin-bottom: 0; }
.cuerpo-verificar { margin-top: var(--s5); max-width: var(--text-max); }
.otra { margin-top: var(--s5); }
.otra .nota { margin-top: var(--s1); }
.serial { font-weight: 700; letter-spacing: 0.06em; }

/* NO VÁLIDA carries el alto's label above the verdict */
.veredicto.no-valida .alto-titulo {
  display: block; font-weight: 800; font-size: var(--t-label); letter-spacing: var(--track-label); text-transform: uppercase; margin-bottom: var(--s2);
}
.veredicto.no-valida .hechos dt, .veredicto.revocada .hechos dt { color: var(--cal); }
/* looking up / could not check: plain text on paper, no colour */
.veredicto.buscando { border-top: var(--w) solid var(--ink); padding-top: var(--s3); }
.veredicto.buscando .porque { margin-top: 0; }
.veredicto.buscando .btn { margin-top: var(--s2); }