:root{
  --bg:#eff3f6; --panel:#ffffffcc;
  --text:#1c2228; --muted:#5b646e; --line:#d8dee4;
  --accent:#3c6ea6; --ink:#0e1b25; --shadow:0 16px 40px rgba(0,0,0,.08);

  /* Sidebar oscuro */
  --sb-bg:#0b1320; --sb-bg2:#0f1a2b; --sb-line:rgba(255,255,255,.08);
  --sb-text:#c7d0db; --sb-ink:#e7eef7; --sb-active:#ffffff;
}

html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:15px/1.6 "Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

/* ───── Topbar móvil ───── */
.topbar{
  position:sticky; top:0; z-index:1000;
  display:none; align-items:center; gap:10px;
  height:56px; padding:0 14px;
  background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));
  border-bottom:1px solid var(--sb-line)
}
.topbrand{color:#eaf1fa; font-weight:700}
.burger{
  width:38px; height:38px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--sb-line);
  border-radius:10px; cursor:pointer
}
.burger span{display:block; width:18px; height:2px; background:#eaf1fa; margin:2px 0}

/* ───── Layout ───── */
.layout{display:grid; grid-template-columns:270px 1fr; min-height:100dvh}

/* ───── Sidebar ───── */
.sidebar{
  position:sticky; top:0; align-self:start; height:100dvh;
  border-right:1px solid var(--sb-line);
  background:linear-gradient(180deg,var(--sb-bg),var(--sb-bg2));
  box-shadow:inset -2px 0 6px rgba(0,0,0,.15);
  color:var(--sb-text)
}
.sidebar-inner{padding:28px 18px; height:100%; display:flex; flex-direction:column}
.brand{font-weight:800; letter-spacing:.2px; margin-bottom:8px; color:var(--sb-ink); font-size:18px}
.role{color:rgba(231,238,247,.75); font-size:13.5px; margin-bottom:18px}
.nav{display:flex; flex-direction:column; gap:6px; margin-top:12px}
.nav a{
  display:block; padding:10px 12px; border-radius:10px; text-decoration:none;
  color:var(--sb-text); border:1px solid transparent; transition:all .18s ease
}
.nav a:hover{background:rgba(255,255,255,.06); border-color:var(--sb-line); color:var(--sb-active); transform:translateX(2px)}
.nav a.active{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); color:var(--sb-active); font-weight:600}
.contact-mini{margin-top:auto; padding-top:16px; border-top:1px dashed var(--sb-line); font-size:13.5px}
.contact-mini a{color:inherit; text-decoration:none}

/* Overlay mobile */
.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.28);
  z-index:900;
}

/* ───── Content ───── */
.content{padding:36px}
.container{max-width:1120px; margin:0 auto}

/* ───── Hero con áreas (desktop) ───── */
.hero{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-areas:
    "title photo"
    "chips photo"
    "lead  photo";
  gap:34px; align-items:center
}
.hero-title{
  grid-area:title;
  font-family:"Playfair Display",serif;
  font-size:54px; line-height:1.12;
  margin:0 0 14px; color:var(--ink); letter-spacing:.2px
}
.portrait-wrap{ grid-area: photo; display:flex; justify-content:center; }
.portrait{
  display:block; width:90%; height:auto;
  max-height:380px; object-fit:contain; object-position:center;
  border-radius:18px; box-shadow:0 14px 40px rgba(0,0,0,.18)
}
.chips{ grid-area:chips; display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 16px }
.chip{
  padding:8px 12px; border:1px solid var(--line); border-radius:999px;
  background:#f5f7fa; color:#2b3947; font-size:13.5px;
  text-decoration:none; display:inline-flex; align-items:center; gap:6px;
}
.lead{ grid-area:lead; color:var(--muted); font-size:16px; line-height:1.7; margin-top:6px }

/* Secciones / tarjetas */
.section{scroll-margin-top:24px; margin-top:44px}
.card{ background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:26px 28px; box-shadow:var(--shadow) }
.glassy{backdrop-filter:blur(10px) saturate(1.18)}
h2{
  font-size:22px; line-height:1.2; margin:0 0 14px; color:var(--ink); font-weight:800;
  letter-spacing:.2px; position:relative
}
h2::after{ content:""; display:block; width:42px; height:3px; border-radius:3px; background:var(--accent); margin-top:8px; opacity:.7 }

/* Grids / items */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:22px}
.stack{display:flex; flex-direction:column; gap:12px} /* servicios en columna */
.item{margin-bottom:12px}
.item .top{display:flex; justify-content:space-between; gap:10px; align-items:baseline}
.item b{font-size:17px; color:var(--ink)}
.item span{color:var(--muted); font-size:13px; white-space:nowrap}
.meta{color:var(--muted); font-size:14.5px; margin:4px 0 6px}

/* Pills */
.badges{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 12px}
.pills-soft .badge{
  background:#ffffff; border:1px solid #d7dde4; color:#22303b;
  font-weight:500; font-size:13.5px; padding:8px 12px; border-radius:12px
}

/* Listas */
.list-clean{list-style:none; margin:0; padding:0}
.list-clean li{margin:8px 0}
.pubs a{color:inherit; text-decoration:underline; text-underline-offset:2px}

/* Reveal */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}

/* WhatsApp FAB */
.wsp-icon{width:40px; height:40px; object-fit:contain; display:block}
.fab{
  position:fixed; right:26px; bottom:26px; z-index:60;
  width:64px; height:64px; border-radius:50%;
  display:grid; place-items:center; background:none;
  box-shadow:0 10px 24px rgba(0,0,0,.2);
  transition:transform .15s ease
}
.fab:hover{transform:scale(1.08)}

/* ───── Responsive SOLO MOBILE ───── */
@media (max-width:980px){
  .layout{grid-template-columns:1fr}
  .topbar{display:flex}

  /* Sidebar deslizable + overlay */
  .sidebar{
    position:fixed; left:0; top:0; bottom:0;
    width:280px; height:100vh;
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:950;
  }
  .sidebar.open{transform:none}
  .backdrop[hidden]{display:none}
  .sidebar-inner{padding:18px 14px}

  .content{ padding:16px; }
  .container{ max-width: 100%; }

  /* HERO: nombre arriba, foto abajo, chips 2x2 centrados, texto centrado */
  .hero{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "chips"
      "lead";
    gap: 12px;
  }
  .hero-title{ font-size: 26px; line-height: 1.18; margin: 0 0 6px; text-align:center; }
  .portrait-wrap{ justify-self:center; }
  .portrait{
    width: 140px; height: auto; max-height: 160px;
    object-fit: contain; border-radius: 12px; box-shadow: 0 8px 18px rgba(0,0,0,.15);
  }
  .chips{
    display:grid; grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 8px; justify-items:center; margin: 6px 0 8px;
  }
  .chip{ font-size:12px; padding:6px 10px; width: max-content; }
  .lead{ text-align:center; font-size:14.5px; line-height:1.55; margin-top: 2px; }

  /* Todo en columna en las tarjetas (nada en paralelo) */
  .grid-2{ grid-template-columns:1fr; gap:14px; }
  .item .top{ flex-direction:column; align-items:flex-start; gap:2px; }

  /* Tarjetas algo más chicas */
  .card{ padding:16px 14px; border-radius:14px }
  h2{ font-size:18px; margin-bottom:10px }
  h2::after{ width:32px; height:2px; margin-top:6px }

  /* Anchors con topbar fija */
  .hero, .section{ scroll-margin-top: 70px; }

  /* FAB más chico */
  .fab{ right:16px; bottom:16px; width:56px; height:56px }
  .wsp-icon{ width:34px; height:34px }
}

/* Print */
footer{text-align:center; color:var(--muted); font-size:12.5px; padding:38px 0}
@page{size:A4; margin:12mm}
@media print{
  .sidebar,.fab,.topbar,.backdrop{display:none}
  .content{padding:0}
  .card{box-shadow:none}
  a{color:inherit; text-decoration:none}
}
/* ===== Ajustes finales SOLO MOBILE ===== */
@media (max-width:980px){

  /* 1) Foto un poco más grande */
  .portrait{
    width: 200px;
    max-height: 220px;
  }

  /* 2) Globitos parejos en 2×2, centrados y del mismo ancho */
  .chips{
    display: grid;
    grid-template-columns: 1fr 1fr;   /* dos columnas iguales */
    gap: 8px;
    justify-items: stretch;           /* que ocupen todo el ancho de su celda */
    margin: 8px 0 10px;
  }
  .chip{
    width: 100%;
    text-align: center;
    padding: 8px 10px;
    font-size: 12.5px;
    border-radius: 999px;
  }

  /* 3) Sidebar: comprimir top/bottom y recolocar textos */
  .sidebar-inner{
    padding: 12px 14px 12px;          /* menos alto arriba y abajo */
  }
  .brand{ margin-bottom: 0; }
  .role{
    margin-top: 10px;                 /* “Abogado — …” un toque más abajo */
    line-height: 1.3;
  }
  .nav{
    margin-top: 14px;                 /* el menú baja en conjunto */
    max-height: calc(100vh - 220px);
    overflow-y: auto;
  }
  .contact-mini{
    margin-top: auto;                 /* sigue anclado abajo */
    margin-bottom: 18px;              /* pero un poquito más arriba del borde */
    padding-top: 12px;
  }
}
/* === FIXS FINALES SOLO MOBILE (≤980px) === */
@media (max-width:980px){

  /* 1) Foto un poco más grande y centrada */
  .portrait{
    width: 160px;
    max-height: 180px;
    object-fit: contain;
  }

  /* 2) Globitos 2×2 iguales, centrados */
  .chips{
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr)); /* 2 columnas iguales */
    gap: 10px;
    justify-items: center;
    align-items: stretch;
    margin: 10px 0 12px;
  }
  .chips .chip{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;                 /* todos igual de anchos */
    min-height: 36px;            /* todos igual de altos */
    padding: 8px 10px;
    font-size: 12.5px;
    line-height: 1.25;
    white-space: nowrap;         /* evita dos líneas raras */
    border-radius: 999px;
    border: 1px solid var(--line);
    background: #f5f7fa;
    color: #2b3947;
    text-align: center;
  }

  /* 3) Sidebar móvil: compactar arriba/abajo y recolocar bloques */
  .sidebar-inner{
    padding: 10px 14px 10px;     /* menos alto total */
  }
  /* top block (brand + role): empujamos un poco hacia abajo
     sin que quede pegado al borde superior */
  .sidebar-inner > div:first-child{ padding-top: 6px; }

  .brand{ margin: 0 0 2px; font-size: 16px; }
  .role{
    margin: 12px 0 0;            /* “Abogado — …” MÁS ABAJO */
    line-height: 1.3;
    font-size: 12.5px;
    opacity: .9;
  }

  /* el menú también baja un poco respecto al header */
  .nav{
    margin-top: 12px;
    max-height: calc(100vh - 210px);  /* evita que tape el contacto */
    overflow-y: auto;
  }

  /* bloque de contacto: MÁS ARRIBA del borde inferior */
  .contact-mini{
    margin-top: auto;
    margin-bottom: 8px;          /* estaba muy abajo: lo subimos */
    padding-top: 10px;
    border-top: 1px dashed var(--sb-line);
    font-size: 13px;
  }
}
/* === MOBILE: sacar globitos y mostrar info simple === */
@media (max-width:980px){

  /* ocultamos los chips */
  .chips {
    display: none;
  }

  /* creamos un bloque nuevo con la info en texto plano */
  .hero-text-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-weight: 600;
    color: var(--ink);
    margin: 8px 0 12px;
    font-size: 14px;
  }

  /* formato base del hero */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}
/* === SOLO MOBILE: info sin globitos === */
@media (max-width: 980px) {

  /* ocultar chips */
  .chips {
    display: none !important;
  }

  /* mostrar bloque de texto plano */
  .hero-text-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    font-weight: 600;
    color: var(--ink);
    margin: 12px 0 14px;
    font-size: 14px;
  }
}

/* === DESKTOP: ocultar el bloque plano === */
@media (min-width: 981px) {
  .hero-text-mobile {
    display: none !important;
  }
}