/* consultatuabogado.cl — Diseño moderno-formal
   Navy profundo + oro discreto (gravedad legal) sobre fondo claro y aireado.
   Titulares en serif elegante; UI en sans limpio. */

:root{
  --navy:#12233b; --navy-2:#1b355a; --navy-ink:#0e1b2e;
  --gold:#c2a35a; --gold-2:#e6cd8f; --gold-soft:#f4ecd9;
  --bg:#f5f8fc; --surface:#ffffff;
  --ink:#101d30; --slate:#5c6b80; --slate-2:#8494a6;
  --line:#e6ebf2; --line-2:#eef2f7;
  --ok:#1f7a52; --ok-bg:#e3f3ea;
  --info:#215d9c; --info-bg:#e6eff9;
  --warn:#8a5d0e; --warn-bg:#f8edd6;
  --danger:#a83236; --danger-bg:#f8e4e4;
  --r:16px; --r-sm:10px;
  --sh-sm:0 1px 2px rgba(16,29,48,.05);
  --sh:0 4px 18px rgba(16,29,48,.07);
  --sh-lg:0 18px 46px rgba(16,29,48,.14);
  --serif:"Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
main.wrap{padding-top:26px;padding-bottom:72px;min-height:60vh}
a{color:var(--navy-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);line-height:1.15;font-weight:600;letter-spacing:-.01em}
h1{font-size:2.1rem;margin:.1em 0 .5em}

/* ---------- Header ---------- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:60;box-shadow:var(--sh-sm)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;height:66px}
.brand{color:var(--navy);font-family:var(--serif);font-size:1.2rem;font-weight:700;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.brand:hover{text-decoration:none}
.brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:9px;
  background:linear-gradient(145deg,var(--navy-2),var(--navy));color:var(--gold-2);font-size:1.15rem;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 3px 8px rgba(18,35,59,.25)}
.topbar nav{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.topbar nav a{color:var(--slate);font-size:.93rem;font-weight:500}
.topbar nav a:hover{color:var(--navy);text-decoration:none}
.topbar .me{color:var(--slate-2);font-size:.85rem;border-left:1px solid var(--line);padding-left:16px}
.bell{position:relative;font-size:1.05rem}
.badge{position:absolute;top:-7px;right:-9px;background:var(--gold);color:var(--navy-ink);font-size:.66rem;font-weight:700;
  min-width:17px;height:17px;border-radius:9px;display:grid;place-items:center;padding:0 4px}

/* ---------- Botones ---------- */
.btn,.btn-ghost,.btn-danger,.btn-gold{display:inline-block;border:none;border-radius:var(--r-sm);padding:12px 20px;
  font:inherit;font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .12s,box-shadow .12s,background .15s;text-align:center}
.btn{background:var(--navy);color:#fff;box-shadow:0 4px 12px rgba(18,35,59,.18)}
.btn:hover{background:var(--navy-ink);text-decoration:none;transform:translateY(-1px);box-shadow:0 8px 18px rgba(18,35,59,.24)}
.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:var(--navy-ink);box-shadow:0 6px 16px rgba(194,163,90,.35)}
.btn-gold:hover{text-decoration:none;transform:translateY(-1px)}
.btn-ghost{background:var(--surface);color:var(--navy);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1.5px var(--gold);text-decoration:none}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{opacity:.92;text-decoration:none}
.btn-danger-sm{background:none;border:none;color:var(--danger);cursor:pointer;font:inherit;font-size:.85rem;text-decoration:underline}
.btn-block{display:block;width:100%}

/* ---------- Slider ---------- */
.slider{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-lg);margin:8px 0 30px;
  aspect-ratio:1200/440;background:var(--navy)}
.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none}
.slide.is-active{opacity:1;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:cover;display:block}
.slide-cap{position:absolute;inset:0;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(10,22,38,.78) 0%,rgba(10,22,38,.35) 45%,rgba(10,22,38,0) 72%)}
.slide-cap-in{padding:0 clamp(24px,5vw,60px);max-width:640px;color:#fff}
.slide-cap-in h2{color:#fff;font-size:clamp(1.5rem,3.6vw,2.7rem);margin:0 0 .3em;text-shadow:0 2px 12px rgba(0,0,0,.3)}
.slide-cap-in p{font-size:clamp(.95rem,1.6vw,1.15rem);color:#dbe4ef;margin:0 0 1.2em}
.slider-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border:none;
  border-radius:50%;background:rgba(255,255,255,.9);color:var(--navy);font-size:1.6rem;line-height:1;cursor:pointer;
  box-shadow:var(--sh);display:grid;place-items:center;transition:.15s}
.slider-nav:hover{background:#fff;transform:translateY(-50%) scale(1.06)}
.slider-nav.prev{left:16px}.slider-nav.next{right:16px}
.slider-dots{position:absolute;bottom:16px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:5}
.dot{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.5);cursor:pointer;padding:0;transition:.2s}
.dot.is-active{background:var(--gold-2);width:26px;border-radius:5px}

/* ---------- Pasos ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:6px 0 20px}
.step{display:flex;gap:14px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-sm)}
.step-n{flex:none;width:34px;height:34px;border-radius:9px;background:var(--gold-soft);color:var(--gold);
  font-family:var(--serif);font-weight:700;display:grid;place-items:center;font-size:1.1rem}
.step b{font-size:1rem}
.step p{margin:.15em 0 0;font-size:.88rem}

/* ---------- Títulos de sección ---------- */
.section-title{margin-top:46px;font-size:1.5rem;position:relative;padding-bottom:12px}
.section-title::after{content:"";position:absolute;left:0;bottom:0;width:46px;height:3px;background:var(--gold);border-radius:2px}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:10px}
.link-more{font-size:.9rem;font-weight:600;color:var(--gold)}
.link-more:hover{text-decoration:none;color:var(--navy)}

/* ---------- Tarjetas de abogado ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:22px;margin-top:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--sh-sm);transition:transform .16s,box-shadow .16s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.card-photo{aspect-ratio:16/10;background:linear-gradient(160deg,var(--navy-2),var(--navy-ink));overflow:hidden}
.card-photo img{width:100%;height:100%;object-fit:cover;display:block}
.card-photo.no-photo{display:grid;place-items:center}
.card-photo.no-photo span{font-family:var(--serif);font-size:3rem;color:var(--gold-2)}
.card-body{padding:18px 20px 20px}
.card-body h3{margin:0 0 8px;font-size:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.chip{background:var(--gold-soft);color:var(--gold);font-size:.74rem;font-weight:700;padding:4px 10px;border-radius:20px;letter-spacing:.01em}
.muted{color:var(--slate);font-size:.92rem}
.tags{color:var(--gold);font-size:.86rem;font-weight:600;margin:.2em 0}
.card-body .btn{margin-top:14px}

/* ---------- Categorías ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-top:20px}
.cat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-sm);transition:.15s}
.cat:hover{border-color:var(--gold);box-shadow:var(--sh)}
.cat h4{margin:0 0 6px;font-size:1.05rem}
.price{font-weight:700;color:var(--navy);font-variant-numeric:tabular-nums;margin:.6em 0 0;font-size:1.02rem}

/* ---------- Banda CTA ---------- */
.cta-band{margin-top:50px;background:linear-gradient(135deg,var(--navy),var(--navy-ink));color:#fff;
  border-radius:var(--r);padding:32px 38px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;box-shadow:var(--sh)}
.cta-band h2{color:#fff;margin:0 0 4px;font-size:1.5rem}
.cta-band p{margin:0;color:#c7d3e2}

/* ---------- Formularios ---------- */
.narrow{max-width:460px;margin:0 auto}
.card-form,.mini-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-sm);margin:14px 0}
label{display:block;font-size:.84rem;font-weight:600;color:var(--slate);margin:12px 0 5px}
input,select,textarea{width:100%;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r-sm);font:inherit;font-size:.95rem;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft)}
.card-form button,.mini-form button{margin-top:16px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.inline-form{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:14px 0}
.inline-form label{margin:0}
.inline-between{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px}
.perfil-foto{display:flex;align-items:center;gap:18px;margin-bottom:6px}
.perfil-foto img{width:76px;height:76px;border-radius:12px;object-fit:cover;border:1px solid var(--line)}
.foto-ph{width:76px;height:76px;border-radius:12px;background:var(--navy);color:var(--gold-2);font-family:var(--serif);font-size:1.8rem;display:grid;place-items:center}
.file-inline{margin:0;flex:1}

/* ---------- Agendar ---------- */
.agendar{max-width:760px}
.info-box{background:var(--gold-soft);border:1px solid #e6d6ac;border-radius:var(--r);padding:16px 20px;margin:16px 0}
.checklist{margin:.4em 0;padding-left:1.1em}.checklist li{margin:4px 0}
.slots{display:flex;flex-wrap:wrap;gap:10px;margin:8px 0 6px}
.slot{margin:0;cursor:pointer}
.slot input{position:absolute;opacity:0;width:0;height:0}
.slot span{display:inline-block;padding:10px 16px;border:1.5px solid var(--line);border-radius:var(--r-sm);font-weight:600;background:#fff;font-variant-numeric:tabular-nums}
.slot input:checked + span{background:var(--navy);color:#fff;border-color:var(--navy)}
.slot input:focus-visible + span{box-shadow:0 0 0 3px var(--gold-soft)}

/* ---------- Listas / filas ---------- */
.list{display:flex;flex-direction:column;gap:11px;margin:14px 0}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);padding:15px 18px;color:var(--ink);box-shadow:var(--sh-sm)}
a.row:hover{border-color:var(--gold);text-decoration:none;box-shadow:var(--sh)}
.row.unread{border-left:3px solid var(--gold)}
.row-left{display:flex;align-items:center;gap:14px}
.row-thumb{width:46px;height:46px;border-radius:9px;object-fit:cover;flex:none}
.row-thumb.no{background:var(--navy);color:var(--gold-2);font-family:var(--serif);font-size:1.3rem;display:grid;place-items:center}
.day h3{margin-bottom:8px}

/* ---------- Pills ---------- */
.pill{display:inline-block;padding:4px 12px;border-radius:20px;font-size:.77rem;font-weight:700;background:#eceff3;color:var(--slate);white-space:nowrap}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.muted{background:#eceff3;color:var(--slate)}

/* ---------- Detalle ---------- */
.detail{display:grid;grid-template-columns:1.6fr 1fr;gap:22px;margin-top:12px}
.detail-main,.detail-side,.block{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;box-shadow:var(--sh-sm)}
.detail-side h3:first-child{margin-top:0}
.block{margin-top:18px}
.transfer{background:var(--bg);border:1px dashed var(--gold);border-radius:var(--r-sm);padding:13px 16px;font-variant-numeric:tabular-nums}
.files{list-style:none;padding:0}.files li{padding:7px 0;border-bottom:1px solid var(--line)}
.back{display:inline-block;margin-bottom:10px;font-weight:600;color:var(--slate)}
.danger-zone{border-color:#eccccc}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ---------- Stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:16px;margin:18px 0}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;text-align:center;box-shadow:var(--sh-sm)}
.stat .num{display:block;font-family:var(--serif);font-size:2.1rem;color:var(--navy)}
.stat .lbl{color:var(--slate);font-size:.85rem}

/* ---------- Tabla ---------- */
.tabla{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:14px;box-shadow:var(--sh-sm)}
.tabla th,.tabla td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line);font-size:.92rem}
.tabla th{background:var(--navy);color:#fff;font-family:var(--sans);font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.tabla td{font-variant-numeric:tabular-nums}
.tabla tr:last-child td{border-bottom:none}

/* ---------- Banners admin ---------- */
.banner-admin{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.banner-item{display:grid;grid-template-columns:180px 1fr auto;gap:18px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--sh-sm)}
.banner-item img{width:100%;height:70px;object-fit:cover;border-radius:8px}
.banner-actions{display:flex;gap:8px}
.banner-actions form{margin:0}
.banner-actions .btn-ghost,.banner-actions .btn-danger{padding:9px 14px;font-size:.85rem}

/* ---------- Flash ---------- */
.flash{padding:13px 17px;border-radius:var(--r-sm);margin:14px 0;font-size:.93rem;font-weight:500}
.flash.ok{background:var(--ok-bg);color:var(--ok)}
.flash.err{background:var(--danger-bg);color:var(--danger)}
.flash.warn{background:var(--warn-bg);color:var(--warn)}
.flash a{color:inherit;text-decoration:underline}

/* ---------- Chat ---------- */
.chat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-height:300px;max-height:52vh;overflow-y:auto;margin:14px 0;display:flex;flex-direction:column;gap:10px;box-shadow:var(--sh-sm)}
.msg{max-width:82%;padding:11px 15px;border-radius:15px;font-size:.95rem;white-space:pre-wrap;line-height:1.5}
.msg.user{align-self:flex-end;background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:4px}
.chat-form{display:flex;gap:10px}.chat-form input{flex:1}
.typing{align-self:flex-start;color:var(--slate-2);font-style:italic;font-size:.9rem}

footer.wrap{color:var(--slate-2);font-size:.85rem;border-top:1px solid var(--line);padding-top:22px;margin-top:20px}

@media(max-width:820px){
  .detail,.two-col,.grid2,.steps{grid-template-columns:1fr}
  .banner-item{grid-template-columns:120px 1fr;grid-template-areas:"img meta" "act act"}
  .banner-item img{grid-area:img}.banner-meta{grid-area:meta}.banner-actions{grid-area:act}
  .topbar .me{display:none}
  .slide-cap{background:linear-gradient(90deg,rgba(10,22,38,.82),rgba(10,22,38,.5))}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}