/* ===== Base compartida — web móvil TerraTech ===== */
@font-face{
  font-family:'Batica Sans';
  src:url('assets/fonts/BaticaSans-Regular.woff2') format('woff2'),
      url('assets/fonts/BaticaSans-Regular.woff') format('woff');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Batica Sans';
  src:url('assets/fonts/BaticaSans-Bold.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}
:root{
  --verde-oscuro:#01302b;
  --verde-fondo:#043120;
  --verde-claro-bg:#f3faef;
  --amarillo:#f4df57;
  --amarillo-90:rgba(244,223,87,.9);
  --blanco-suave:#f8f9f9;
  --texto-claro:#eaf4f0;
  --texto-footer:rgba(234,244,240,.8);
  --borde-chip:#c2cfcd;
  --hoja-clara:#7BC250;
  --hoja-media:#0D7233;
  --hoja-oscura:#043120;
  --grad-boton:linear-gradient(90deg,#93cc70 0%,#7bc250 100%);
  --font:'Outfit',sans-serif;
  --display:'Batica Sans','Outfit',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:#dfe3e0;color:#111;display:flex;justify-content:center}
.app{width:100%;max-width:430px;min-height:100vh;background:#fff;position:relative;overflow-x:hidden;box-shadow:0 0 60px rgba(0,0,0,.12)}

/* header frosted con espacio superior */
.topbar{position:relative;z-index:40;padding-top:calc(40px + env(safe-area-inset-top));background:transparent}
.appbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 26px}
.appbar .logo{height:34px;display:block}
.appbar .right{display:flex;align-items:center;gap:16px;color:var(--verde-fondo)}
.appbar .icon{width:23px;height:23px;display:block}
.burger{display:flex;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:2px}
.burger span{width:27px;height:2px;background:var(--verde-fondo);border-radius:2px;transition:transform .3s,opacity .3s} /* mismo grosor que el trazo de la lupa */
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* menú: panel blanco flotante redondeado */
.mmenu{position:absolute;left:16px;right:16px;top:100%;margin-top:6px;z-index:60;background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:25px;box-shadow:0 6px 24px rgba(0,0,0,.12);display:flex;flex-direction:column;padding:20px 28px}
.mmenu[hidden]{display:none}
.mmenu a{font-family:var(--font);font-weight:400;font-size:16.3px;letter-spacing:-.4075px;line-height:1.4;color:#000;text-decoration:none;text-align:center;padding:14px 0}
.mmenu a.active{color:#F9BD23}
.mmenu .mlang{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:6px;padding-top:14px;border-top:1px solid rgba(194,207,205,.5)}
/* los enlaces del selector van dentro de .mmenu, asi que necesitan el mismo
   peso de selector (.mmenu a) para poder pisarle color y espaciado */
.mmenu .mlang a{font-size:16.3px;letter-spacing:-.4075px;font-weight:400;color:#9aa5a1;padding:6px 10px;border-radius:9px}
.mmenu .mlang a.is-active{font-weight:500;color:#0d7233}

/* chip (esquinas asimétricas) */
.chip{display:inline-flex;align-items:center;justify-content:center;font-weight:400;background:var(--blanco-suave);border:1px solid var(--borde-chip);border-radius:18px 0 18px 0;padding:8px 19px;font-family:var(--display);font-size:14px;color:var(--verde-oscuro);letter-spacing:-.12px}

/* botones */
.btn-yellow{display:inline-block;background:var(--amarillo);color:var(--verde-oscuro);font-size:13px;font-weight:400;padding:10px 26px;border-radius:13px;text-decoration:none;letter-spacing:-.3px;border:0;cursor:pointer}
.btn-green{display:inline-block;background:var(--hoja-clara);color:#fff;font-size:12px;font-weight:400;padding:8px 20px;border-radius:13px;text-decoration:none;letter-spacing:-.3px}

/* footer */
.foot{background:var(--verde-fondo);color:var(--texto-footer);padding:38px 30px 30px}
.foot .company{font-family:var(--display);font-weight:400;font-size:20px;color:var(--amarillo-90);letter-spacing:-.36px}
.foot .tag{font-size:13px;font-weight:500;margin-top:6px;line-height:1.4;color:var(--texto-footer);max-width:230px}
.foot .social{display:flex;gap:16px;margin:22px 0}
.foot .social a{width:20px;height:20px;color:#fff;text-decoration:none;display:flex;align-items:center;justify-content:center}
.foot .social a img{width:100%;height:100%;display:block}
.foot .col{margin-bottom:20px}
.foot .foot-title{color:var(--amarillo-90);font-size:14px;font-weight:600;margin-bottom:8px;letter-spacing:-.08px}
.foot .addr{font-size:13px;line-height:1.5;font-weight:500}
.foot a.link{display:block;color:rgba(243,250,239,.8);text-decoration:underline;font-size:13px;font-weight:500;padding:3px 0}
.foot a.link.q-link{text-decoration:none}
.foot a.link.q-link span{text-decoration:underline;text-underline-position:from-font}
.foot .cols2{display:flex;gap:44px}
.foot .cols2 .col{margin-bottom:0}
.foot .divider{border-top:1px solid rgba(243,250,239,.26);margin-top:6px;padding-top:16px;font-size:11px;font-weight:300;opacity:.65}
/* footer claro (subpáginas, igual que el desktop) */
.foot.light{background:#fff;color:rgba(0,0,0,.6);border-top:1px solid rgba(0,0,0,.08)}
.foot.light .company{color:#000}
.foot.light .tag{color:rgba(0,0,0,.6)}
.foot.light .social a{color:rgba(0,0,0,.55)}
.foot.light .foot-title{color:#000}
.foot.light .addr{color:rgba(0,0,0,.6)}
.foot.light a.link{color:rgba(0,0,0,.6)}
.foot.light .divider{border-top-color:rgba(0,0,0,.15);opacity:.5}