/*
Theme Name:  ADF Contadores
Theme URI:   https://estudiocontableadf.com.ar
Description: Tema moderno para ADF Contadores — Estudio Contable para PyMEs y Autónomos
Author:      ADF Contadores
Version:     1.0.0
License:     GNU General Public License v2 or later
Text Domain: adfcontadores
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:      #0F1923;
  --bg2:     #141F2E;
  --bg3:     #192435;
  --card:    #1C2A3A;
  --border:  rgba(255,255,255,.08);
  --white:   #FFFFFF;
  --gray:    #7A8FA6;
  --teal:    #00C4A0;
  --teal-bg: rgba(0,196,160,.12);
  --amber:   #F0A500;
  --amber-bg:rgba(240,165,0,.12);
  --blue:    #4A90FF;
  --blue-bg: rgba(74,144,255,.12);
}

html { scroll-behavior: smooth; overflow-x: hidden; }
body { font-family: 'Outfit', sans-serif; background: var(--bg); color: var(--white); overflow-x: hidden; max-width: 100%; }

/* ── NAV ── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 6vw;
  background: rgba(15,25,35,.92); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.site-branding a { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--white); }
.logo-mark { width: 38px; height: 38px; background: var(--teal); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--bg); font-family: 'Fraunces', serif; font-weight: 800; font-size: .9rem; }
.logo-text { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.15rem; }
.logo-text span { color: var(--teal); }
.main-navigation ul { list-style: none; display: flex; gap: 2.2rem; align-items: center; }
.main-navigation a { color: rgba(255,255,255,.65); text-decoration: none; font-size: .88rem; font-weight: 500; transition: color .2s; }
.main-navigation a:hover { color: var(--teal); }
.main-navigation .nav-wa { background: var(--teal) !important; color: var(--bg) !important; padding: .55rem 1.2rem; border-radius: 6px; font-weight: 700 !important; display: flex !important; align-items: center; gap: .4rem; }
.main-navigation .nav-wa:hover { background: #00d9b2 !important; }

/* ── HERO ── */
#hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 4rem; padding: 8rem 6vw 5rem; background: var(--bg); position: relative; overflow: hidden; }
.glow { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; }
.glow.g1 { width: 500px; height: 500px; background: rgba(0,196,160,.12); top: -100px; right: -100px; }
.glow.g2 { width: 350px; height: 350px; background: rgba(74,144,255,.07); bottom: 0; left: 20%; }
.hero-left { position: relative; z-index: 1; }
.hero-tag { display: inline-flex; align-items: center; gap: .5rem; background: var(--teal-bg); color: var(--teal); border: 1px solid rgba(0,196,160,.25); padding: .4rem 1rem; border-radius: 99px; font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.6rem; animation: fadeUp .5s ease both; }
.pdot { width: 7px; height: 7px; background: var(--teal); border-radius: 50%; animation: pulse 1.5s infinite; }
#hero h1 { font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 4.5vw, 3.8rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.3rem; animation: fadeUp .5s .1s ease both; }
#hero h1 em { font-style: italic; color: var(--teal); }
.hero-sub { font-size: 1.05rem; color: var(--gray); line-height: 1.75; margin-bottom: 1.4rem; max-width: 480px; animation: fadeUp .5s .2s ease both; }
.trust-badges { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.2rem; animation: fadeUp .5s .25s ease both; }
.tbadge { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); padding: .45rem 1rem; border-radius: 8px; font-size: .82rem; font-weight: 600; color: rgba(255,255,255,.85); }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp .5s .3s ease both; }
.btn-main { background: var(--teal); color: var(--bg); padding: .9rem 2rem; border-radius: 8px; font-weight: 700; font-size: .95rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: background .2s, transform .15s; }
.btn-main:hover { background: #00d9b2; transform: translateY(-2px); }
.btn-out { background: transparent; color: var(--white); padding: .9rem 2rem; border-radius: 8px; border: 1px solid var(--border); font-weight: 600; font-size: .95rem; text-decoration: none; display: inline-flex; align-items: center; gap: .5rem; transition: border-color .2s, transform .15s; }
.btn-out:hover { border-color: var(--teal); color: var(--teal); transform: translateY(-2px); }
.hero-right { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 1.2rem; animation: fadeUp .5s .35s ease both; }
.hcard { background: var(--card); border-radius: 14px; padding: 1.5rem 1.8rem; border: 1px solid var(--border); }
.hcard.ac { background: var(--teal); border-color: var(--teal); }
.hcard.ac .hc-lbl { color: rgba(15,25,35,.7); }
.hcard.ac .hc-ttl { color: var(--bg); }
.hc-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .5rem; }
.hc-ico { font-size: 1.5rem; }
.hc-ttl { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 700; }
.hc-lbl { font-size: .82rem; color: var(--gray); line-height: 1.5; }
.live { display: inline-flex; align-items: center; gap: .4rem; background: rgba(15,25,35,.2); color: var(--bg); padding: .3rem .8rem; border-radius: 99px; font-size: .75rem; font-weight: 700; margin-top: .6rem; }

/* ── SECCIÓN BASE ── */
.site-section { padding: 6rem 6vw; }
.stag { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: .7rem; }
.stitle { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 800; line-height: 1.2; margin-bottom: .9rem; }
.ssub { color: var(--gray); font-size: 1rem; line-height: 1.7; max-width: 520px; }

/* ── TABS SERVICIOS ── */
#servicios { background: var(--bg2); }
.tabs { display: flex; gap: 1rem; margin: 2.5rem 0 2rem; flex-wrap: wrap; }
.tbtn { padding: .65rem 1.4rem; border-radius: 8px; border: 1px solid var(--border); background: transparent; color: var(--gray); font-family: 'Outfit', sans-serif; font-size: .88rem; font-weight: 600; cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: .5rem; }
.tbtn:hover { border-color: var(--teal); color: var(--teal); }
.tbtn.on { background: var(--teal); color: var(--bg); border-color: var(--teal); }
.tpanel { display: none; }
.tpanel.on { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.3rem; }
.sc { background: var(--card); border-radius: 14px; padding: 1.8rem; border: 1px solid var(--border); transition: border-color .25s, transform .25s; }
.sc:hover { border-color: var(--teal); transform: translateY(-4px); }
.si { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: 1.1rem; }
.si.t { background: var(--teal-bg); color: var(--teal); }
.si.a { background: var(--amber-bg); color: var(--amber); }
.si.b { background: var(--blue-bg);  color: var(--blue); }
.sc h3 { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem; }
.sc p { font-size: .855rem; color: var(--gray); line-height: 1.65; }
.pill { display: inline-block; margin-top: .9rem; font-size: .73rem; font-weight: 700; padding: .28rem .7rem; border-radius: 99px; }
.pill.t { background: var(--teal-bg); color: var(--teal); }
.pill.a { background: var(--amber-bg); color: var(--amber); }
.pill.b { background: var(--blue-bg);  color: var(--blue); }

/* ── DIFERENCIAL ── */
#diferencial { background: var(--bg3); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.ditems { display: flex; flex-direction: column; gap: 1.1rem; }
.di { display: flex; align-items: flex-start; gap: 1rem; background: var(--card); border-radius: 12px; padding: 1.2rem 1.4rem; border: 1px solid var(--border); transition: border-color .2s; }
.di:hover { border-color: rgba(0,196,160,.3); }
.diico { font-size: 1.4rem; flex-shrink: 0; }
.di h4 { font-size: .93rem; font-weight: 700; margin-bottom: .2rem; }
.di p  { font-size: .82rem; color: var(--gray); line-height: 1.5; }

/* ── NOSOTROS ── */
#nosotros { background: var(--bg2); display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }
.sgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sbox { background: var(--card); border-radius: 14px; padding: 1.5rem; border: 1px solid var(--border); text-align: center; }
.sbox.ft { grid-column: span 2; background: var(--teal); border-color: var(--teal); }
.sbox.ft .sn { color: var(--bg); }
.sbox.ft .sl { color: rgba(15,25,35,.65); }
.sn { font-family: 'Fraunces', serif; font-size: 2.2rem; font-weight: 800; color: var(--teal); }
.sl { font-size: .78rem; color: var(--gray); text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; }
.ntext ul { list-style: none; display: flex; flex-direction: column; gap: .85rem; margin-top: 1.8rem; }
.ntext li { display: flex; align-items: flex-start; gap: .75rem; color: rgba(255,255,255,.75); font-size: .95rem; line-height: 1.5; }
.ck { color: var(--teal); flex-shrink: 0; }

/* ── CONTACTO ── */
#contacto { background: var(--bg); }
.cwrap { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: start; }
.ch { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; border-radius: 10px; background: var(--card); border: 1px solid var(--border); margin-bottom: 1rem; text-decoration: none; color: var(--white); transition: border-color .2s, transform .15s; }
.ch:hover { border-color: rgba(0,196,160,.4); transform: translateX(4px); }
.chico { font-size: 1.4rem; width: 40px; text-align: center; }
.chlbl { font-size: .72rem; color: var(--gray); text-transform: uppercase; letter-spacing: .06em; }
.chval { font-size: .92rem; font-weight: 600; }

/* ── CONTACTO NUEVO ── */
#contacto { background: var(--bg); }
.contact-center { max-width: 680px; margin: 0 auto; text-align: center; }
.contact-center .ssub { margin-left: auto; margin-right: auto; }
.wa-cta-big {
  display: flex; align-items: center; gap: 1.2rem;
  background: #25D366 !important; color: #fff !important;
  border-radius: 16px; padding: 1.4rem 2rem;
  text-decoration: none !important; margin-bottom: 2rem;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 4px 24px rgba(37,211,102,.4);
  position: relative; overflow: hidden;
}
.wa-cta-big:hover { transform: translateY(-3px); box-shadow: 0 8px 32px rgba(37,211,102,.55); color: #fff !important; }
.wa-cta-ico { font-size: 2.2rem; flex-shrink: 0; line-height: 1; }
.wa-cta-title { font-size: 1.15rem; font-weight: 700; text-align: left; color: #fff !important; }
.wa-cta-sub { font-size: .85rem; opacity: .9; text-align: left; margin-top: .2rem; color: #fff !important; }
.wa-cta-arrow { font-size: 1.4rem; margin-left: auto; flex-shrink: 0; color: #fff !important; }
.contact-channels { display: flex; flex-direction: column; gap: .8rem; }

@media (max-width: 600px) {
  .wa-cta-big { padding: 1.2rem 1.4rem; }
  .wa-cta-title { font-size: 1rem; }
}

/* ── FOOTER ── */
.site-footer { background: var(--bg2); border-top: 1px solid var(--border); padding: 2.5rem 6vw; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
.site-footer p { color: var(--gray); font-size: .8rem; }
.footer-nav ul { list-style: none; display: flex; gap: 1.5rem; }
.footer-nav a { color: var(--gray); text-decoration: none; font-size: .82rem; transition: color .2s; }
.footer-nav a:hover { color: var(--teal); }

/* ── WA FLOAT ── */
.wa-float {
  position: fixed; bottom: 1.8rem; right: 1.8rem; z-index: 200;
  background: #25D366; color: white; border-radius: 50px;
  padding: 0 1.4rem 0 1rem; height: 56px;
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; font-family: 'Outfit', sans-serif;
  font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform .2s, box-shadow .2s;
}
.wa-float:hover { transform: scale(1.05); box-shadow: 0 6px 28px rgba(37,211,102,.6); }
.wa-float::before {
  content: ''; position: absolute; inset: -4px; border-radius: 54px;
  background: rgba(37,211,102,.3); animation: wapulse 2s infinite; z-index: -1;
}
@keyframes wapulse {
  0%   { transform: scale(1);    opacity: .6; }
  70%  { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}

/* ── ANIMACIONES ── */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse  { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.5;transform:scale(1.4)} }
.reveal { opacity:0; transform:translateY(22px); transition:opacity .6s ease,transform .6s ease; }
.reveal.visible { opacity:1; transform:none; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  #hero, #diferencial, #nosotros, .cwrap { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-right { display: none; }
  .main-navigation { display: none; }
  .mobile-menu-btn { display: flex !important; }
  .tpanel.on { grid-template-columns: 1fr 1fr; }
  #hero { overflow: hidden; }
}
@media (max-width: 600px) {
  .tpanel.on { grid-template-columns: 1fr; }
  .sgrid { grid-template-columns: 1fr 1fr; }
  .site-section { padding: 4rem 5vw; }
  #hero { padding: 6rem 5vw 3rem; }
  #hero h1 { font-size: 2.2rem; }
  .hero-actions { flex-direction: column; }
  .btn-main, .btn-out { justify-content: center; }
  .site-footer { flex-direction: column; text-align: center; }
  .footer-nav ul { justify-content: center; flex-wrap: wrap; }
  .tabs { gap: .6rem; }
  .tbtn { font-size: .8rem; padding: .55rem 1rem; }
  .trust-badges { gap: .5rem; }
}
.mobile-menu-btn { display: none; background: none; border: 1px solid var(--border); border-radius: 6px; width: 40px; height: 40px; align-items: center; justify-content: center; font-size: 1.2rem; cursor: pointer; color: var(--white); }
.mobile-menu { display: none; position: fixed; inset: 0; z-index: 99; background: rgba(15,25,35,.98); flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
.mobile-menu.open { display: flex; }
.mobile-menu a { color: var(--white); text-decoration: none; font-family: 'Fraunces', serif; font-size: 1.5rem; font-weight: 700; }
.mobile-menu a:hover { color: var(--teal); }
.mobile-menu-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: var(--white); font-size: 1.8rem; cursor: pointer; }