/* ═══════════════════════════════════════════════════════════════════════════
   meEdificio · Sistema de diseño
   «Invernadero botánico sobre papel crema»

   La autoridad visual es DESIGN.md, en la raíz del repo. Este archivo es esa
   especificación hecha CSS, y es el único sitio donde viven los tokens: antes
   cada página llevaba su propia copia en un <style> y por eso se separaban.
   Una página que no enlace esto no pertenece al sistema.

   TRES DECISIONES QUE CONVIENE DEJAR ESCRITAS.

   · **Sin sombras, nunca.** La profundidad se construye apilando superficies
     tintadas —crema → keylime → menta → salvia → pizarra—, no elevando cajas.
     Es lo que hace que esto parezca papel de acuarela y no vidrio.

   · **Los estados usan la capa de superficie, no colores nuevos.** El sistema
     prohíbe expresamente introducir tonos fuera de los verdes y la pizarra, y
     un formulario necesita distinguir un error de un aviso. Se resuelve con lo
     que el propio sistema prescribe: pizarra (el contrapunto frío) para lo que
     exige atención, keylime para lo resuelto, salvia para lo que solo advierte.
     Si algún día hace falta un rojo de verdad, es UN token y se declara aquí.

   · **Una sola serif y un solo peso.** Cormorant Garamond en 300 para todo
     titular; ponerla en negrita rompe el tono. Inter para absolutamente todo lo
     demás. Son las sustitutas que DESIGN.md nombra para Faire Octave y Suisse
     Intl, así que no hay que comprar licencias para que el sitio se vea como se
     tiene que ver.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tipografías, alojadas aquí ──
   No vienen de Google Fonts: la política de seguridad del servidor solo deja
   cargar fuentes y estilos del propio sitio, y con el enlace externo lo publicado
   se veía en Georgia y Arial sin que nadie lo notara en local. Inter es una
   fuente variable: un solo archivo cubre el 300, el 400 y el 600. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/fuentes/inter-latin.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300;font-display:swap;
  src:url("/fuentes/cormorant-garamond-300.woff2") format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300;font-display:swap;
  src:url("/fuentes/cormorant-garamond-300-italic.woff2") format("woff2")}

/* ── tokens ── */
:root{
  /* Colores. Forest Ink es el único oscuro saturado y no se usa de fondo. */
  --forest-ink:#0f3e17;
  --forest-shadow:#0c2f10;
  --sage-mist:#b1dbb8;
  --keylime-wash:#e1f4df;
  --mint-veil:#cfe7d3;
  --slate-hush:#b6ced5;
  --cream-paper:#fffefc;
  --charcoal:#222222;
  --border-mist:#efeeeb;

  /* El secundario se tiñe hacia la tinta del sistema en vez de ser gris: un
     gris sobre crema se ve lavado y no pertenece a la paleta. */
  --texto-suave:#5b6b5d;

  --serif:"Cormorant Garamond","Faire Octave",Georgia,"Times New Roman",serif;
  --sans:"Inter","Suisse Intl",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;

  /* Escala tipográfica de DESIGN.md. El tracking se aprieta al crecer. */
  --text-caption:10px;  --leading-caption:1.61;
  --text-body:14px;     --leading-body:1.5;
  --text-subheading:18px; --leading-subheading:1.3;
  --text-heading-sm:23px; --leading-heading-sm:1.5;
  --text-heading:40px;  --leading-heading:1.35;  --tracking-heading:-0.4px;
  --text-heading-lg:56px; --leading-heading-lg:1.2; --tracking-heading-lg:-1.68px;
  --text-display:74px;  --leading-display:1.05;  --tracking-display:-2.22px;

  --s4:4px; --s7:7px; --s9:9px; --s11:11px; --s14:14px; --s18:18px; --s21:21px;
  --s28:28px; --s35:35px; --s42:42px; --s49:49px; --s56:56px; --s70:70px;
  --s76:76px; --s99:99px; --s156:156px;

  --radio-nav:7px; --radio:14px; --radio-pill:999px;
  --ancho:1200px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--cream-paper);
  color:var(--charcoal);
  font-family:var(--sans);
  font-size:var(--text-body);
  line-height:var(--leading-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--forest-ink)}

/* ── tipografía ──
   Toda serif es 300 y nunca más. El tamaño fluye con clamp para que un titular
   de 74px no se salga de un teléfono. */
/* Cormorant trae números de estilo antiguo (suben y bajan); en coeficientes y
   cifras se piden alineados. */
h1,h2,h3,.serif{font-variant-numeric:lining-nums;
  font-family:var(--serif);
  font-weight:300;
  color:var(--forest-ink);
  margin:0;
  text-wrap:balance;
}
h1{font-size:clamp(40px,7vw,var(--text-display));line-height:var(--leading-display);
   letter-spacing:var(--tracking-display)}
h2{font-size:clamp(28px,4.5vw,var(--text-heading));line-height:var(--leading-heading);
   letter-spacing:var(--tracking-heading)}
h3{font-size:var(--text-heading-sm);line-height:var(--leading-heading-sm)}
p{margin:0 0 var(--s14)}
.sub{font-size:var(--text-subheading);line-height:var(--leading-subheading);
     color:var(--charcoal);max-width:62ch}

/* El único uso de versalitas del sistema: el rótulo de sección. En ningún otro
   sitio se pone 0.08em de tracking. */
.eyebrow{
  font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--forest-ink);margin:0 0 var(--s11);
}

/* ── estructura ── */
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 var(--s28)}
.wrap.estrecho{max-width:860px}
.seccion{padding:var(--s76) 0}
.topbar{border-bottom:1px solid var(--border-mist);background:var(--cream-paper)}
.nav{display:flex;align-items:center;gap:var(--s28);height:76px}
.brand{display:flex;align-items:center;gap:var(--s11);text-decoration:none;color:var(--forest-ink)}
/* El logotipo es 3:1 y lleva dentro la marca Y la palabra, así que su altura
   manda sobre el tamaño al que se lee «meEdificio». A 30px la palabra no se
   leía. La barra tiene 76px: 46 caben con aire y dejan la palabra legible. */
.brand img{height:46px;display:block}
@media (max-width:640px){.brand img{height:38px}}
.nav .miga{margin-left:auto;font-size:var(--text-body);color:var(--charcoal);text-decoration:none;
  border-radius:var(--radio-nav);padding:var(--s7) var(--s11)}
.nav .miga:hover{background:var(--keylime-wash)}
footer{border-top:1px solid var(--border-mist);margin-top:var(--s99);
  padding:var(--s42) 0 var(--s56);color:var(--texto-suave);font-size:13px}
footer a{color:var(--forest-ink)}

/* ── superficies ──
   El orden importa: crema → keylime → menta → salvia → pizarra. Nunca sombra. */
.panel{border-radius:var(--radio);padding:var(--s42);box-shadow:none}
.panel.keylime{background:var(--keylime-wash)}
.panel.menta{background:var(--mint-veil)}
.panel.salvia{background:var(--sage-mist)}
.panel.pizarra{background:var(--slate-hush)}
.panel.papel{background:var(--cream-paper)}
.panel.compacto{padding:var(--s28)}

/* ── botones ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s9);
  background:var(--forest-ink);color:var(--cream-paper);
  border:0;border-radius:var(--radio);padding:var(--s14) var(--s21);
  font-family:var(--sans);font-size:var(--text-body);font-weight:400;
  cursor:pointer;text-decoration:none;transition:background .15s ease;
}
.btn:hover{background:var(--forest-shadow)}
.btn:disabled{opacity:.45;cursor:default}
.btn.grande{padding:var(--s28) var(--s42);font-size:var(--text-subheading);width:100%}
.btn.mini{padding:var(--s9) var(--s14);font-size:13px}
/* La secundaria es tinta sobre crema con filete: el sistema no tiene un segundo
   relleno, y dos rellenos competirían por la misma atención. */
.btn.secundario{background:transparent;color:var(--forest-ink);
  border:1px solid var(--forest-ink)}
.btn.secundario:hover{background:var(--keylime-wash)}
.btn.peligro{background:transparent;color:var(--forest-ink);
  border:1px solid var(--slate-hush)}
.btn.peligro:hover{background:var(--slate-hush)}
.fila-btn{display:flex;gap:var(--s14);flex-wrap:wrap;align-items:center}

/* ── etiquetas ── */
.chip{
  display:inline-flex;align-items:center;background:var(--cream-paper);
  color:var(--forest-ink);border-radius:var(--radio-pill);
  padding:var(--s9) var(--s14);font-size:13px;white-space:nowrap;
}
.chip:empty{display:none}
.chip.ok{background:var(--keylime-wash)}
.chip.atencion{background:var(--sage-mist)}
.chip.critico{background:var(--slate-hush)}
.chip.neutro{background:var(--border-mist);color:var(--texto-suave)}

/* ── campos ──
   Sobre crema, el filete tiene que verse: 1px de tinta al 35 % da el contraste
   de contorno sin gritar. El foco se marca con la tinta entera. */
label{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--forest-ink);
  margin:var(--s28) 0 var(--s9)}
input[type=text],input[type=date],input[type=email],input[type=tel],textarea,select{
  width:100%;background:var(--cream-paper);
  border:1px solid color-mix(in srgb,var(--forest-ink) 35%,var(--cream-paper));
  border-radius:var(--radio);color:var(--charcoal);
  font-family:var(--sans);font-size:16px;padding:var(--s14);
}
textarea{min-height:150px;line-height:1.6;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--texto-suave)}
input:focus,textarea:focus,select:focus{outline:2px solid var(--forest-ink);
  outline-offset:1px;border-color:transparent}
.ayuda{color:var(--texto-suave);font-size:13px;margin:var(--s9) 0 0}
.ayuda b{color:var(--charcoal)}

/* ── avisos, sin inventar colores ──
   Pizarra es el contrapunto frío del sistema: lo que exige atención. Salvia
   advierte. Keylime dice que algo quedó resuelto. */
.error,.aviso,.nota-ok{border-radius:var(--radio);padding:var(--s14) var(--s18);
  margin-top:var(--s18);font-size:var(--text-body);color:var(--forest-ink)}
.error{background:var(--slate-hush)}
.aviso{background:var(--sage-mist)}
.nota-ok{background:var(--keylime-wash)}

/* ── la equis y el visto, dibujados ──
   Sin emoji y sin librería: dos barras rotadas y un ángulo. */
.marca-no,.marca-si{position:relative;display:inline-block;width:14px;height:14px;
  flex:0 0 auto;vertical-align:-2px}
.marca-no::before,.marca-no::after{content:"";position:absolute;left:1px;top:6px;
  width:12px;height:1.5px;background:var(--forest-ink);border-radius:2px}
.marca-no::before{transform:rotate(45deg)} .marca-no::after{transform:rotate(-45deg)}
.marca-si::before{content:"";position:absolute;left:1px;top:3px;width:11px;height:6px;
  border-left:1.5px solid var(--forest-ink);border-bottom:1.5px solid var(--forest-ink);
  transform:rotate(-45deg)}

/* ── tablas ── */
table{width:100%;border-collapse:collapse;font-size:var(--text-body)}
th{text-align:left;font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--forest-ink);
  border-bottom:1px solid var(--border-mist);padding:var(--s9) var(--s14) var(--s9) 0}
td{border-bottom:1px solid var(--border-mist);padding:var(--s11) var(--s14) var(--s11) 0;
  vertical-align:top}
.num{font-variant-numeric:lining-nums tabular-nums}

.oculto{display:none !important}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── las superficies que el navegador pone por su cuenta ── */
::selection{background:var(--sage-mist);color:var(--forest-ink)}
input,textarea{caret-color:var(--forest-ink)}
:is(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--forest-ink);outline-offset:2px}

@media (max-width:640px){
  .wrap{padding:0 var(--s18)}
  .seccion{padding:var(--s49) 0}
  .panel{padding:var(--s28)}
  .panel.compacto{padding:var(--s21)}
}


/* ── lo que se entrega al crear algo ──
   Las dos herramientas terminan igual: un QR, un enlace y una clave que no se
   puede recuperar. Vive en el sistema y no en la hoja de cada una porque es el
   mismo momento del mismo producto, y porque la caja de la clave tiene que
   verse igual de seria en las dos. */
.exito{background:var(--keylime-wash);border-radius:var(--radio);
  padding:var(--s42);margin-top:var(--s42)}
.exito h2{margin:0 0 var(--s7)}

.qr{background:var(--cream-paper);border-radius:var(--radio);padding:var(--s18);
  width:min(320px,100%);margin:var(--s21) auto;display:block}
.qr img{display:block;width:100%}
.enlace{font-family:var(--mono);font-size:14px;background:var(--cream-paper);
  border-radius:var(--radio);padding:var(--s14);word-break:break-all;text-align:center;
  margin:var(--s7) 0 0;color:var(--forest-ink)}
.clavecaja{background:var(--slate-hush);border-radius:var(--radio);
  padding:var(--s18);margin-top:var(--s28)}
.clavecaja b{color:var(--forest-ink)}
.clave{font-family:var(--mono);font-size:15px;word-break:break-all;
  background:var(--cream-paper);border-radius:var(--radio);padding:var(--s11) var(--s14);
  margin-top:var(--s9);color:var(--forest-ink)}
.huella{font-family:var(--mono);font-size:11px;color:var(--texto-suave);
  word-break:break-all;margin-top:var(--s14)}
.huella b{color:var(--charcoal)}