:root {
  --bg:#f7f9fb; --bg-soft:#ffffff; --txt:#0e1114; --muted:#4b5a66;
  --brand:#0bbf83; --brand-2:#00a6c7; --line:#e5ecf0; --shadow:0 8px 28px rgba(16,24,40,.08);
  --radius:14px; --maxw:1100px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0f10; --bg-soft:#12181b; --txt:#e9f1f5; --muted:#b8c5cc; --brand:#38d39f; --brand-2:#00bcd4; --line:#1a2327; --shadow:0 10px 30px rgba(0,0,0,.25); }
}
html[data-theme="light"] { --bg:#f7f9fb; --bg-soft:#ffffff; --txt:#0e1114; --muted:#4b5a66; --brand:#0bbf83; --brand-2:#00a6c7; --line:#e5ecf0; --shadow:0 8px 28px rgba(16,24,40,.08); }
html[data-theme="dark"]  { --bg:#0b0f10; --bg-soft:#12181b; --txt:#e9f1f5; --muted:#b8c5cc; --brand:#38d39f; --brand-2:#00bcd4; --line:#1a2327; --shadow:0 10px 30px rgba(0,0,0,.25); }

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif; color:var(--txt); background:var(--bg); line-height:1.55;}
a{color:var(--brand); text-decoration:none} a:hover{text-decoration:underline}
img{max-width:100%; display:block}

header{position:sticky; top:0; z-index:1000; background:color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);}
.nav{max-width:var(--maxw); margin:0 auto; padding:.6rem 1rem; display:flex; align-items:center; gap:1rem}
.brand{font-weight:700; letter-spacing:.2px; font-size:1.05rem; color:var(--txt); text-decoration:none}
.spacer{flex:1}
.menu{display:flex; gap:.6rem; flex-wrap:wrap}
.menu a{color:var(--txt); padding:.45rem .8rem; border-radius:10px; text-decoration:none; border:1px solid transparent;}
.menu a:hover{border-color:var(--line); background:color-mix(in srgb, var(--bg) 85%, #000 0%)}

.theme-toggle{display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); padding:.35rem .6rem; border-radius:999px; cursor:pointer; background:var(--bg-soft); box-shadow:var(--shadow); user-select:none;}
.theme-toggle .icon{font-size:1rem; line-height:1}
.theme-toggle .label{font-size:.85rem; color:var(--muted)}

.hero{max-width:var(--maxw); margin:0 auto; padding:3.5rem 1rem 2rem; display:grid; grid-template-columns:1.2fr .8fr; gap:2rem}
.hero h1{font-size:2.15rem; margin:.2rem 0 1rem}
.kicker{color:var(--brand-2); font-weight:700; letter-spacing:.3px; text-transform:uppercase; font-size:.85rem}
.lead{color:var(--muted); font-size:1.05rem}
.cta{display:flex; gap:.8rem; margin-top:1.4rem}
.btn{display:inline-block; padding:.8rem 1rem; border-radius:12px; border:1px solid var(--line); background:var(--bg-soft); color:var(--txt); text-decoration:none;}
.btn.primary{background:linear-gradient(135deg,var(--brand),var(--brand-2)); color:#031313; border:none; font-weight:700}
.panel{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem}

section{padding:2.4rem 1rem}
.wrap{max-width:var(--maxw); margin:0 auto}
h2{font-size:1.6rem; margin:0 0 .8rem}
.muted{color:var(--muted)}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}

.svc{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.card{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:1rem; box-shadow:var(--shadow)}
.badge{display:inline-block; font-size:.75rem; padding:.2rem .5rem; border-radius:999px; border:1px solid var(--line); color:var(--brand-2)}

.site{background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column}
.site header{position:static; background:color-mix(in srgb, var(--bg) 85%, #000 0%); border-bottom:1px solid var(--line)}
.site-title{padding:.7rem 1rem; font-weight:600}
.site .frame{aspect-ratio:16/10; display:grid; place-items:center; padding:1rem}
.frame .placeholder{color:var(--muted); font-size:.95rem; text-align:center}
.frame button{margin-top:.6rem; border:1px solid var(--line); background:var(--bg-soft); color:var(--txt); padding:.5rem .8rem; border-radius:10px; cursor:pointer}
iframe{width:100%; height:100%; border:0; border-top:1px solid var(--line)}

form{display:grid; gap:.8rem; background:var(--bg-soft); border:1px solid var(--line); padding:1rem; border-radius:var(--radius); box-shadow:var(--shadow)}
label{font-weight:600}
input, textarea{width:100%; padding:.75rem; border-radius:12px; border:1px solid var(--line); background:color-mix(in srgb, var(--bg) 92%, #000 0%); color:var(--txt)}
input:focus, textarea:focus{outline:2px solid var(--brand-2)}
.row{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.hint{font-size:.85rem; color:var(--muted)}
.ok{color:#1e9e74}
.error{color:#cf2e2e}

/* ===== Footer (actualizado) ===== */
footer{padding:2rem 1rem; border-top:1px solid var(--line); color:var(--muted); background:var(--bg)}
/* antes: .foot { grid-template-columns:2fr 1fr }  -> ahora 3 columnas para centrar AFIP */
.foot{
  max-width:var(--maxw); margin:0 auto;
  display:grid; gap:1rem;
  grid-template-columns:1fr auto 1fr;   /* izquierda | centro (AFIP) | derecha */
  align-items:center;
}
.small{font-size:.85rem}

/* nuevas zonas del footer */
.foot-left, .foot-right{display:flex; flex-direction:column; gap:.5rem;}
.foot-left .small{margin-top:2px; opacity:.9;}
.foot-center{display:grid; place-items:center;}

.afip-badge{max-width:90px; height:auto; display:block;}

/* botón de administración */
.admin-wrap{margin-top:.5rem;}
.btn-admin{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:.85rem; padding:.4rem .7rem;
  border-radius:6px; border:1px solid var(--line);
  color:var(--txt); background:var(--bg-soft);
  text-decoration:none; transition:all .2s ease;
}
.btn-admin:hover{background:var(--brand); color:#fff; border-color:var(--brand-2);}

/* redes (mantengo tu estilo y lo reutilizo) */
.social { margin-top:.6rem; display:flex; gap:.6rem; }
.social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%;
  background:var(--bg-soft); border:1px solid var(--line);
  color:var(--muted); font-size:14px; line-height:1; transition:all .2s ease;
}
.social a:hover{ background:var(--brand); color:#fff; border-color:var(--brand-2); }

/* FAB WhatsApp */
.wa-fab{position:fixed; right:18px; bottom:18px; z-index:1200; display:inline-flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:50%; background:#25D366; color:#083b23; border:none; box-shadow:0 10px 24px rgba(0,0,0,.25); cursor:pointer;}
.wa-fab:hover{transform:translateY(-1px)}
.wa-fab:active{transform:translateY(0)}
.wa-fab .wa-ico{width:26px; height:26px; display:block; object-fit:contain;}

/* ===== Responsivo ===== */
@media (max-width: 900px){
  .hero{grid-template-columns:1fr; padding-top:2.2rem}
  .svc{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .row{grid-template-columns:1fr}
}
@media (max-width:768px){
  .foot{grid-template-columns:1fr; text-align:center;}
  .foot-left, .foot-right{align-items:center;}
  .afip-badge{max-width:80px;}
}

/* Más aire entre columnas y anclar la derecha al borde */
.foot{
  /* antes: gap: 1rem;  -> mejor responsive */
  column-gap: clamp(28px, 6vw, 96px);
  grid-template-columns: 1fr minmax(120px, auto) 1fr; /* el centro no queda tan “estrecho” */
}

.foot-left  { justify-self: start; }
.foot-center{ justify-self: center; }
.foot-right { justify-self: end; text-align: right; }

/* opcional: si querés aún más separación en pantallas grandes */
@media (min-width: 1200px){
  .foot{ column-gap: clamp(40px, 8vw, 120px); }
}