/* Porción 3D · base compartida (menú, panel, landing) · paleta Aguacate: verde hoja + mango */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Figtree:wght@400;500;600;700&display=swap');

:root {
  --fondo: #F6F3EA;
  --fondo-2: #ECE8DA;
  --tarjeta: #FFFFFF;
  --tinta: #13261C;
  --tinta-2: #56685D;
  --linea: #DCD8C8;
  --marca: #2E7D50;          /* verde hoja: botones y acentos */
  --marca-2: #22603D;
  --mango: #F2B33D;          /* acento cálido: 3D, destacados */
  --tinta-mango: #2B1D04;    /* texto sobre mango */
  --tierra: #8A5A2B;
  --sombra: 0 10px 30px rgba(15, 40, 25, .10);
  --radio: 18px;
  --titulos: 'Bricolage Grotesque', system-ui, sans-serif;
  --texto: 'Figtree', system-ui, sans-serif;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --fondo: #0F1F18; --fondo-2: #15291F; --tarjeta: #1A3328; --tinta: #EEF3EC; --tinta-2: #A8BFB0;
  --linea: #27443A; --sombra: 0 10px 30px rgba(0, 0, 0, .35); color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0F1F18; --fondo-2: #15291F; --tarjeta: #1A3328; --tinta: #EEF3EC; --tinta-2: #A8BFB0;
    --linea: #27443A; --sombra: 0 10px 30px rgba(0, 0, 0, .35); color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--tinta); font: 16px/1.5 var(--texto); }
h1, h2, h3 { font-family: var(--titulos); line-height: 1.08; margin: 0; letter-spacing: -.02em; }
a { color: inherit; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  border: 0; border-radius: 999px; padding: .8em 1.4em; cursor: pointer; text-decoration: none;
  background: var(--marca); color: #fff; font-weight: 700; transition: transform .15s, background .15s;
}
.boton:hover { background: var(--marca-2); }
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton.claro { background: var(--tarjeta); color: var(--tinta); border: 1px solid var(--linea); }
.boton.claro:hover { background: var(--fondo-2); }
.boton.chico { padding: .5em 1em; font-size: .9rem; }

.campo { display: grid; gap: .35em; font-size: .9rem; font-weight: 600; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: .7em .9em; border-radius: 12px; border: 1px solid var(--linea);
  background: var(--tarjeta); font-weight: 400; font-size: 1rem;
}
.campo small { font-weight: 400; color: var(--tinta-2); }

.aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 140%); z-index: 100;
  background: var(--tinta); color: var(--fondo); padding: .8em 1.2em; border-radius: 14px;
  font-weight: 600; max-width: calc(100% - 32px); transition: transform .3s; box-shadow: var(--sombra);
}
.aviso.visible { transform: translate(-50%, 0); }
.aviso.error { background: #B91C1C; color: #fff; }

.oculto { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }