/* HH Abogados — propuesta v4 del sitio (17-oct-2026)
   Paleta del Brandbook HH (11-mar-2022): ink #141516 · crema #F2F1DD · coral #F26149 · taupe #68685C
   Tipografía: Jost (títulos, cercana a Visby CF) + Source Serif 4 (frases de convicción) + Inter (cuerpo). */
:root{
  --ink:#141516; --ink2:#1E1F20; --crema:#F2F1DD; --coral:#F26149; --taupe:#68685C;
  --fondo:#F8F7EC; --blanco:#FFFFFE; --linea:#DDD9C8; --linea-osc:#34352F;
  --ancho:1120px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--fondo);color:var(--ink);font-family:'Inter',-apple-system,sans-serif;font-size:17px;line-height:1.65}
h1,h2,h3,h4,.nav a,.btn,.kicker,.marca{font-family:'Jost',sans-serif}
.serif{font-family:'Source Serif 4',Georgia,serif}
img,svg{display:block;max-width:100%}
a{color:inherit}
.wrap{max-width:var(--ancho);margin:0 auto;padding:0 24px}
@media(max-width:600px){.wrap{padding:0 16px}}

/* ---------- Cabecera ---------- */
.cab{position:sticky;top:0;z-index:20;background:rgba(20,21,22,.97);color:var(--crema);border-bottom:1px solid var(--linea-osc)}
.cab .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;letter-spacing:.24em;font-weight:500;font-size:14px}
.marca img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:2px}
.nav a{text-decoration:none;font-size:13px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;color:#C9C7B4}
.nav a:hover,.nav a[aria-current]{color:var(--crema)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--coral)}
.nav .btn-nav{margin-left:10px;border:1px solid var(--coral);color:var(--crema);border-radius:2px}
.nav .btn-nav:hover{background:var(--coral);color:var(--ink)}
.menu-btn{display:none;background:none;border:0;color:var(--crema);font:500 13px 'Jost',sans-serif;letter-spacing:.14em;text-transform:uppercase;padding:10px 0;cursor:pointer}
@media(max-width:860px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--ink);border-bottom:1px solid var(--linea-osc);padding:8px 16px 16px}
  .nav.abierto{display:flex}
  .nav a{padding:14px 4px;border-bottom:1px solid var(--linea-osc)}
  .nav .btn-nav{margin:14px 0 0;text-align:center}
}

/* ---------- Botones ---------- */
.btn{display:inline-block;text-decoration:none;font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:15px 26px;border-radius:2px;border:1px solid transparent;transition:.15s}
.btn-coral{background:var(--coral);color:var(--ink)}
.btn-coral:hover{background:#ff7a63}
.btn-linea{border-color:currentColor}
.btn-linea:hover{background:rgba(242,241,221,.08)}
.btn-ink{background:var(--ink);color:var(--crema)}
.btn-ink:hover{background:#2a2b2c}
.acciones{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Héroe ---------- */
.heroe{background:var(--ink);color:var(--crema);position:relative;overflow:hidden}
.heroe .wrap{position:relative;padding-top:104px;padding-bottom:112px}
.heroe .haches{position:absolute;right:-40px;bottom:-60px;height:520px;width:auto;opacity:.06;pointer-events:none}
.kicker{font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--coral);font-weight:600;margin-bottom:22px}
.heroe h1{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:clamp(34px,5.6vw,64px);line-height:1.08;letter-spacing:-.01em;max-width:21ch}
.heroe h1 em{font-style:italic;color:#fff}
.heroe .bajada{margin-top:28px;max-width:56ch;font-size:19px;color:#C9C7B4}
.heroe .acciones{margin-top:40px}
.heroe-pie{border-top:1px solid var(--linea-osc);margin-top:72px;padding-top:22px;display:flex;flex-wrap:wrap;gap:8px 28px;font-size:14px;color:#9C9A88;letter-spacing:.04em}
.heroe-pie b{color:var(--crema);font-weight:500}
@media(max-width:600px){.heroe .wrap{padding-top:64px;padding-bottom:72px}.heroe .bajada{font-size:17px}.heroe .haches{height:340px;right:-60px}}

/* Encabezado de páginas interiores */
.portada{background:var(--ink);color:var(--crema)}
.portada .wrap{padding-top:80px;padding-bottom:72px}
.portada h1{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:clamp(32px,4.6vw,52px);line-height:1.1;max-width:20ch}
.portada p{margin-top:20px;max-width:60ch;color:#C9C7B4;font-size:18px}

/* ---------- Secciones ---------- */
.sec{padding:96px 0}
.sec-crema{background:var(--crema)}
.sec-blanca{background:var(--blanco)}
.sec-osc{background:var(--ink);color:var(--crema)}
.sec h2{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:clamp(28px,3.6vw,42px);line-height:1.15;max-width:22ch}
.sec .intro{margin-top:18px;max-width:62ch;color:var(--taupe);font-size:18px}
.sec-osc .intro{color:#C9C7B4}
@media(max-width:600px){.sec{padding:64px 0}}

/* Situaciones (home) */
.situaciones{margin-top:52px;display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.sit{background:var(--blanco);padding:32px 28px 28px;text-decoration:none;display:flex;flex-direction:column;gap:14px;transition:background .15s}
.sit:hover{background:#FDFCF4}
.sit q{font-family:'Source Serif 4',Georgia,serif;font-size:21px;line-height:1.35;quotes:"“" "”"}
.sit p{color:var(--taupe);font-size:15.5px;flex:1}
.sit .area{font:600 12px 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--linea);padding-top:14px}
.sit .area::after{content:"→";color:var(--coral);font-size:16px;letter-spacing:0}
@media(max-width:900px){.situaciones{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.situaciones{grid-template-columns:1fr}.sit q{font-size:19px}}

/* Resultados */
.resultados{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.res{border-top:2px solid var(--coral);padding-top:24px}
.res .cuando{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
.res h3{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:26px;line-height:1.25;margin:12px 0}
.res p{color:#C9C7B4;font-size:16px}
.nota-secreto{margin-top:44px;font-size:14px;color:#9C9A88;max-width:70ch}
@media(max-width:760px){.resultados{grid-template-columns:1fr}}

/* Socios */
.socios{margin-top:52px;display:grid;grid-template-columns:1fr 1fr;gap:28px}
.socio{background:var(--blanco);border:1px solid var(--linea);display:grid;grid-template-columns:132px 1fr;gap:24px;padding:28px}
.foto{width:132px;height:164px;background:var(--crema);border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;font:500 34px 'Source Serif 4',Georgia,serif;color:var(--taupe);position:relative}
.foto small{position:absolute;bottom:6px;left:0;right:0;text-align:center;font:500 9px 'Inter',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#9C9A88}
.socio .cargo{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--coral)}
.socio h3{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:25px;line-height:1.2;margin:6px 0 12px}
.socio p{font-size:15.5px;color:#3c3d3a}
.socio .cedula{margin-top:12px;font-size:13px;color:var(--taupe)}
@media(max-width:900px){.socios{grid-template-columns:1fr}}
@media(max-width:520px){.socio{grid-template-columns:1fr}.foto{width:112px;height:140px}}

.equipo{margin-top:40px;border-top:1px solid var(--linea);padding-top:26px;display:grid;grid-template-columns:200px 1fr;gap:20px}
.equipo h4{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);padding-top:4px}
.equipo ul{list-style:none;display:flex;flex-wrap:wrap;gap:10px 30px;font-size:17px}
@media(max-width:700px){.equipo{grid-template-columns:1fr}}

/* Tecnología */
.tec{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:start}
.tec ul{list-style:none;border-top:1px solid var(--linea)}
.tec li{padding:20px 0;border-bottom:1px solid var(--linea);display:grid;grid-template-columns:34px 1fr;gap:12px}
.tec li b{display:block;font:500 18px 'Jost',sans-serif;margin-bottom:2px}
.tec li span.n{font:600 13px 'Jost',sans-serif;color:var(--coral);padding-top:4px}
.tec li p{color:var(--taupe);font-size:15.5px}
@media(max-width:860px){.tec{grid-template-columns:1fr;gap:36px}}
.enlace{display:inline-block;margin-top:26px;font:500 14px 'Jost',sans-serif;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--coral);padding-bottom:3px}

/* Cierre / llamado */
.cierre .wrap{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:end}
.cierre h2{max-width:16ch}
.oficinas{list-style:none;display:grid;gap:18px;font-size:15.5px;color:#C9C7B4}
.oficinas b{display:block;color:var(--crema);font:500 15px 'Jost',sans-serif;letter-spacing:.06em}
@media(max-width:860px){.cierre .wrap{grid-template-columns:1fr;gap:40px}}

/* ---------- Áreas (página Qué resolvemos) ---------- */
.indice{display:flex;flex-wrap:wrap;gap:8px;margin-top:36px}
.indice a{font:500 13px 'Jost',sans-serif;letter-spacing:.06em;text-decoration:none;border:1px solid var(--linea-osc);color:#C9C7B4;padding:8px 14px;border-radius:2px}
.indice a:hover{border-color:var(--coral);color:var(--crema)}
.area-bloque{display:grid;grid-template-columns:300px 1fr;gap:56px;padding:64px 0;border-bottom:1px solid var(--linea);scroll-margin-top:80px}
.area-bloque:last-child{border-bottom:0}
.area-bloque .num{font:600 13px 'Jost',sans-serif;letter-spacing:.2em;color:var(--coral)}
.area-bloque h2{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:32px;line-height:1.15;margin-top:10px}
.area-bloque .gancho{margin-top:14px;font-family:'Source Serif 4',Georgia,serif;font-style:italic;font-size:19px;color:var(--taupe)}
.area-bloque .cuerpo p{font-size:17px;max-width:64ch}
.area-bloque .cuando{margin-top:24px;background:var(--blanco);border:1px solid var(--linea);padding:22px 24px}
.area-bloque .cuando h4{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:10px}
.area-bloque .cuando ul{list-style:none;display:grid;gap:8px}
.area-bloque .cuando li{padding-left:20px;position:relative;font-size:16px}
.area-bloque .cuando li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:2px;background:var(--coral)}
@media(max-width:860px){.area-bloque{grid-template-columns:1fr;gap:20px;padding:48px 0}}

/* ---------- Despacho ---------- */
.texto-largo{max-width:68ch}
.texto-largo p+p{margin-top:18px}
.compromiso{margin-top:56px;border-left:3px solid var(--coral);padding:6px 0 6px 28px;font-family:'Source Serif 4',Georgia,serif;font-size:23px;line-height:1.45;max-width:46ch}
.valores{margin-top:22px;font-size:15px;color:var(--taupe);letter-spacing:.04em}

/* ---------- IA ---------- */
.entregables{margin-top:44px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--linea);border:1px solid var(--linea)}
.entregables div{background:var(--blanco);padding:26px 24px}
.entregables b{display:block;font:500 18px 'Jost',sans-serif;margin-bottom:6px}
.entregables p{color:var(--taupe);font-size:15.5px}

/* ---------- Contacto ---------- */
.contacto-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:56px;align-items:start}
.datos{display:grid;gap:26px}
.datos h4{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:4px}
.datos a{text-decoration:none;font:500 22px 'Jost',sans-serif}
.datos p{font-size:16px}
.marco-form{background:var(--blanco);border:1px solid var(--linea);padding:6px}
.marco-form iframe{width:100%;height:1400px;border:0;display:block}
.aviso-corto{margin-top:18px;font-size:13px;color:var(--taupe)}
@media(max-width:860px){.contacto-grid{grid-template-columns:1fr;gap:40px}}
@media(max-width:420px){.marco-form iframe{height:1600px}}

/* ---------- Pie ---------- */
.pie{background:#0E0F10;color:#9C9A88;font-size:14px}
.pie .wrap{padding-top:56px;padding-bottom:40px}
.pie-sup{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px;padding-bottom:32px;border-bottom:1px solid var(--linea-osc)}
.pie-sup img{height:56px;width:auto}
.pie-sup .contacto a{color:var(--crema);text-decoration:none;white-space:nowrap;font:500 17px 'Jost',sans-serif}
.pie-sup .contacto{display:grid;gap:6px;text-align:right}
.pie-inf{padding-top:22px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}
.pie-inf a{text-decoration:none;margin-right:18px}
.pie-inf a:hover{color:var(--crema)}
.legal42{margin-top:18px;font-size:12.5px;color:#76756a;max-width:90ch}
@media(max-width:600px){.pie-sup .contacto{text-align:left}}

/* Botón flotante de WhatsApp */
.wa{position:fixed;right:20px;bottom:20px;z-index:30;background:#25D366;color:#0b2b17;text-decoration:none;font:600 14px 'Jost',sans-serif;letter-spacing:.06em;padding:13px 18px;border-radius:40px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
@media(max-width:600px){.wa{right:12px;bottom:12px;padding:12px 15px}}

/* Marcas de la propuesta (solo maqueta; se quitan al montar) */
.pc{background:#FFE45C;color:#141516;padding:0 4px;border-radius:2px;font-size:.85em;font-family:'Inter',sans-serif;font-style:normal;font-weight:600}
.banda-propuesta{background:#FFE45C;color:#141516;font:600 13px 'Inter',sans-serif;text-align:center;padding:8px 16px}

/* ---------- Fichas del equipo (mismo formato para todos; orden de Octavio 17-oct) ---------- */
.fichas{margin-top:40px;display:grid;grid-template-columns:1fr 1fr;gap:20px}
.ficha{background:var(--blanco);border:1px solid var(--linea);display:grid;grid-template-columns:84px 1fr;gap:20px;padding:24px}
.ficha .foto{width:84px;height:104px;font-size:26px}
.ficha .cargo{font:600 11.5px 'Jost',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.ficha h3{font-family:'Source Serif 4',Georgia,serif;font-weight:500;font-size:22px;line-height:1.2;margin:6px 0 10px}
.ficha p{font-size:15.5px;color:#3c3d3a}
.ficha .cedula{margin-top:10px;font-size:13px;color:var(--taupe);line-height:1.5}
.fichas-cortas{grid-template-columns:repeat(4,1fr);gap:16px}
.fichas-cortas .ficha{grid-template-columns:1fr;padding:20px}
.fichas-cortas .foto{width:64px;height:78px;font-size:21px}
.fichas-cortas h3{font-size:19px}
.fichas-cortas p{font-size:14.5px}
@media(max-width:1000px){.fichas-cortas{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.fichas{grid-template-columns:1fr}}
@media(max-width:520px){.ficha{grid-template-columns:64px 1fr;gap:14px;padding:18px}.ficha .foto{width:64px;height:78px;font-size:20px}
  .fichas-cortas{grid-template-columns:1fr}.fichas-cortas .ficha{grid-template-columns:64px 1fr}}

/* ---------- v4 versión 3 (17-oct): litigio estratégico ---------- */
.practica-cards .sit{gap:12px}
.practica-cards .area{border-top:0;padding-top:0;color:var(--coral)}
.practica-cards .area::after{content:""}
.practica-cards q{quotes:none;font-style:italic;color:var(--taupe);font-size:17px}
.practica-cards .sit p{color:var(--ink);font-size:15.5px}
.reps{grid-template-columns:1fr 1fr;gap:26px 40px}
.reps .res{padding-top:18px}
.reps .rep{font-family:'Source Serif 4',Georgia,serif;font-size:20px;line-height:1.4;color:var(--crema);margin-top:10px}
.socio p+p{margin-top:10px}
.grupo{margin-top:44px;border-top:1px solid var(--linea);padding-top:22px}
.grupo h4{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.renglones{list-style:none;display:grid;gap:0}
.renglones li{display:grid;grid-template-columns:280px 1fr;gap:4px 24px;padding:14px 0;border-bottom:1px solid var(--linea)}
.renglones b{font:500 17px 'Jost',sans-serif;grid-row:span 2}
.renglones .acargo{font-size:16px}
.renglones .form{font-size:13.5px;color:var(--taupe)}
.otras{margin-top:56px;background:var(--blanco);border:1px solid var(--linea);padding:28px 30px}
.otras h3{font:600 12px 'Jost',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:14px}
.otras ul{list-style:none;display:grid;gap:10px}
.otras li{font-size:16px}
@media(max-width:760px){.reps{grid-template-columns:1fr}.renglones li{grid-template-columns:1fr}.renglones b{grid-row:auto}}

/* Avisos legales */
.legal h2{display:none}
.legal p{font-size:16px;margin-top:14px}
.legal a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral)}