/* =========================================================
   ESCRITORIO JURÍDICO VIELMA & ASOCIADOS
   Hoja de estilos principal
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  --ox:#5E1E17;          /* burdeos de la tarjeta */
  --ox-900:#3F110C;      /* burdeos profundo (hover) */
  --ox-100:rgba(94,30,23,.07);
  --arena:#D3CEB2;       /* beige de la tarjeta */
  --arena-200:#E8E4D3;
  --arena-50:#F3F1E7;
  --papel:#FBFAF6;
  --tinta:#241F1C;
  --gris:#5F5852;
  --gris-200:#A9A199;
  --bronce:#8C7A4E;
  --blanco:#FFFFFF;

  --display:"Marcellus",Georgia,"Times New Roman",serif;
  --texto:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  --max:1180px;
  --pad:clamp(1.25rem,5vw,3rem);
  --sec:clamp(4.5rem,10vw,7.5rem);
  --linea:1px solid rgba(94,30,23,.16);
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papel);
  color:var(--tinta);
  font-family:var(--texto);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{font-family:var(--display);font-weight:400;line-height:1.14;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.4rem,1.6rem + 3.4vw,4.15rem)}
h2{font-size:clamp(1.9rem,1.4rem + 2.1vw,2.9rem)}
h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.55rem)}
p{margin:0 0 1.05em}
a{color:var(--ox);text-decoration:none}
img{max-width:100%;display:block;height:auto}
ul{margin:0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:2px}

.contenedor{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.seccion{padding-block:var(--sec)}
.seccion--arena{background:var(--arena-50);border-block:var(--linea)}
.seccion--ox{background:var(--ox);color:var(--arena-200)}

/* ---------- 3. Piezas tipográficas ---------- */
.rotulo{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--ox);margin:0 0 1.15rem;
  display:flex;align-items:center;gap:.85rem;
}
.rotulo::before{content:"";width:2.2rem;height:1px;background:var(--ox);opacity:.55;flex:none}
.seccion--ox .rotulo{color:var(--arena)}
.seccion--ox .rotulo::before{background:var(--arena)}

.entrada{max-width:56ch}
.entrada p{color:var(--gris);font-size:1.08em}
.seccion--ox .entrada p{color:rgba(233,229,214,.82)}
.seccion--ox h2{color:var(--arena-200)}

.filete{height:1px;background:rgba(94,30,23,.16);border:0;margin:0}

/* ---------- 4. Botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--texto);font-size:.82rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  padding:1.05rem 2rem;border:1px solid var(--ox);border-radius:1px;
  background:var(--ox);color:var(--arena-50);cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);
}
.btn:hover{background:var(--ox-900);border-color:var(--ox-900)}
.btn--linea{background:transparent;color:var(--ox)}
.btn--linea:hover{background:var(--ox);color:var(--arena-50)}
.btn--claro{background:var(--arena);border-color:var(--arena);color:var(--ox)}
.btn--claro:hover{background:var(--blanco);border-color:var(--blanco);color:var(--ox)}
.btn--bloque{width:100%}
.acciones{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2.2rem}

/* ---------- 5. Encabezado ---------- */
.encabezado{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,246,.94);backdrop-filter:blur(10px);
  border-bottom:var(--linea);
}
.encabezado__fila{display:flex;align-items:center;gap:1.5rem;min-height:84px}
.marca{display:flex;align-items:center;gap:.9rem;margin-right:auto;line-height:1.15}
.marca__logo{width:52px;height:52px;flex:none}
.marca__logo img{width:100%;height:100%;object-fit:contain}
.marca__nombre{font-family:var(--display);font-size:1.12rem;color:var(--ox);display:block}
.marca__bajada{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gris-200);display:block}

.nav{display:flex;align-items:center;gap:1.85rem}
.nav a{
  font-size:.79rem;letter-spacing:.11em;text-transform:uppercase;font-weight:600;
  color:var(--tinta);padding-block:.4rem;position:relative;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--ox);
  transition:width .35s var(--ease);
}
.nav a:hover::after,.nav a[aria-current="true"]::after{width:100%}

.idioma{display:flex;align-items:center;gap:.4rem;border-left:var(--linea);padding-left:1.25rem}
.idioma button{
  font-family:var(--texto);font-size:.74rem;font-weight:700;letter-spacing:.1em;
  background:none;border:0;padding:.35rem .45rem;color:var(--gris-200);cursor:pointer;
  transition:color .3s var(--ease);
}
.idioma button[aria-pressed="true"]{color:var(--ox);text-decoration:underline;text-underline-offset:5px}
.idioma span{color:var(--gris-200);font-size:.7rem}

.hamburguesa{display:none;background:none;border:1px solid rgba(94,30,23,.2);border-radius:1px;padding:.6rem;cursor:pointer}
.hamburguesa span{display:block;width:20px;height:1.5px;background:var(--ox);margin:4px 0;transition:transform .3s var(--ease),opacity .3s var(--ease)}
.encabezado.abierto .hamburguesa span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.encabezado.abierto .hamburguesa span:nth-child(2){opacity:0}
.encabezado.abierto .hamburguesa span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ---------- 6. Portada ---------- */
.portada{padding-block:clamp(3rem,7vw,5.5rem) clamp(3rem,6vw,5rem);overflow:hidden}
.portada__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5rem);align-items:center}
.portada h1{margin-bottom:1.6rem}
.portada h1 em{font-style:normal;color:var(--ox)}
.portada__lede{font-size:clamp(1.05rem,1rem + .35vw,1.22rem);color:var(--gris);max-width:46ch}

/* marco grabado — elemento distintivo */
.marco{position:relative;isolation:isolate}
.marco::after{
  content:"";position:absolute;inset:14px -14px -14px 14px;border:1px solid rgba(94,30,23,.45);
  z-index:-1;pointer-events:none;
}
.marco__foto{aspect-ratio:4/5;background:var(--arena-200);overflow:hidden}
.marco__foto img{width:100%;height:100%;object-fit:cover}
.placa{
  position:absolute;left:-18px;bottom:26px;background:var(--ox);color:var(--arena);
  padding:.85rem 1.35rem;max-width:78%;box-shadow:0 12px 30px rgba(36,31,28,.18);
}
.placa strong{display:block;font-family:var(--display);font-size:1rem;letter-spacing:.03em;font-weight:400}
.placa span{display:block;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;opacity:.72;margin-top:.2rem}

/* banda de datos */
.banda{border-block:var(--linea);background:var(--blanco)}
.banda__grid{display:grid;grid-template-columns:repeat(4,1fr)}
.banda__dato{padding:2.1rem 1.5rem;border-right:var(--linea)}
.banda__dato:last-child{border-right:0}
.banda__dato b{display:block;font-family:var(--display);font-size:1.75rem;color:var(--ox);line-height:1}
.banda__dato span{display:block;font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;color:var(--gris);margin-top:.55rem}

/* ---------- 7. Áreas de práctica ---------- */
.areas{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(94,30,23,.16);
  border:var(--linea);margin-top:3.2rem}
.area{background:var(--papel);padding:2.4rem 1.9rem 2.6rem;transition:background .4s var(--ease)}
.area:hover{background:var(--blanco)}
.area__icono{width:34px;height:34px;color:var(--ox);margin-bottom:1.5rem}
.area__icono svg{width:100%;height:100%;display:block}
.area h3{margin-bottom:.7rem}
.area p{color:var(--gris);font-size:.96rem;margin:0}
.area__lista{margin-top:1.2rem;display:flex;flex-wrap:wrap;gap:.4rem}
.area__lista li{
  font-size:.72rem;letter-spacing:.04em;color:var(--ox);
  border:1px solid rgba(94,30,23,.22);padding:.28rem .6rem;border-radius:1px;
}

/* ---------- 8. Sucesiones ---------- */
.sucesion__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);align-items:start}
.sucesion__lista{margin-top:.5rem;border-top:1px solid rgba(211,206,178,.25)}
.sucesion__lista li{
  display:flex;gap:1.1rem;padding:1.15rem 0;border-bottom:1px solid rgba(211,206,178,.25);
  color:rgba(233,229,214,.88);font-size:.98rem;
}
.sucesion__lista b{
  font-family:var(--display);font-weight:400;color:var(--arena);font-size:.95rem;
  min-width:1.6rem;opacity:.6;
}

/* ---------- 9. El escritorio ---------- */
.escritorio__grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,6vw,4.5rem);align-items:center}
.escritorio__foto{aspect-ratio:5/4;background:var(--arena-200);overflow:hidden;border:var(--linea)}
.escritorio__foto img{width:100%;height:100%;object-fit:cover}
.valores{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.6rem;padding-top:2.4rem;border-top:var(--linea)}
.valor h4{font-size:1.02rem;color:var(--ox);margin-bottom:.35rem}
.valor p{font-size:.93rem;color:var(--gris);margin:0}

/* ---------- 10. Equipo ---------- */
.equipo{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2rem,4vw,3rem);margin-top:3.2rem}
.persona__foto{aspect-ratio:4/5;background:var(--arena-200);overflow:hidden;margin-bottom:1.5rem;border:var(--linea)}
.persona__foto img{width:100%;height:100%;object-fit:cover;filter:grayscale(100%) contrast(1.02);transition:filter .55s var(--ease)}
.persona:hover .persona__foto img{filter:grayscale(0%)}
.persona h3{margin-bottom:.25rem}
.persona__cargo{font-size:.73rem;letter-spacing:.16em;text-transform:uppercase;color:var(--bronce);margin-bottom:.9rem}
.persona p{color:var(--gris);font-size:.96rem;margin:0}
.equipo__nota{margin-top:3rem;padding-top:2rem;border-top:var(--linea);color:var(--gris);max-width:60ch}

/* ---------- 11. Contacto ---------- */
.contacto__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,4.5rem)}
.campo{margin-bottom:1.35rem}
.campo label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ox);margin-bottom:.5rem}
.campo input,.campo select,.campo textarea{
  width:100%;font-family:var(--texto);font-size:1rem;color:var(--tinta);
  background:var(--blanco);border:var(--linea);border-radius:1px;padding:.9rem 1rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--ox);box-shadow:0 0 0 3px var(--ox-100);
}
.campo--error input,.campo--error select,.campo--error textarea{border-color:#B3261E}
.campo__error{display:none;font-size:.8rem;color:#B3261E;margin-top:.4rem}
.campo--error .campo__error{display:block}
.aviso{margin-top:1.2rem;padding:1rem 1.1rem;background:var(--arena-50);border-left:3px solid var(--ox);font-size:.92rem;display:none}
.aviso.visible{display:block}
.nota-legal{font-size:.82rem;color:var(--gris-200);margin-top:1.2rem}

.datos{border-top:var(--linea)}
.datos li{display:flex;gap:1.2rem;padding:1.3rem 0;border-bottom:var(--linea)}
.datos__etq{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gris-200);min-width:6.5rem;padding-top:.2rem}
.datos__val{font-size:1rem}
.datos__val a{border-bottom:1px solid rgba(94,30,23,.3)}
.datos__val small{display:block;color:var(--gris);font-size:.86rem}
.mapa{margin-top:2rem;aspect-ratio:16/9;background:var(--arena-200);border:var(--linea);overflow:hidden;position:relative}
.mapa img,.mapa iframe{width:100%;height:100%;display:block;border:0}
.mapa img{object-fit:cover}
@media (max-width:640px){.mapa{aspect-ratio:4/3}}

/* ---------- 12. Pie ---------- */
.pie{background:var(--ox);color:rgba(233,229,214,.75);padding-block:clamp(3.5rem,7vw,5rem) 2rem;font-size:.92rem}
.pie__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-bottom:3rem;border-bottom:1px solid rgba(211,206,178,.2)}
.pie h4{font-family:var(--display);color:var(--arena);font-size:1.05rem;margin-bottom:1.1rem}
.pie a{color:rgba(233,229,214,.75);transition:color .3s var(--ease)}
.pie a:hover{color:var(--arena)}
.pie li{padding:.32rem 0}
.pie__marca{font-family:var(--display);font-size:1.45rem;color:var(--arena);margin-bottom:.7rem;line-height:1.2}
.pie__base{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;padding-top:1.8rem;font-size:.8rem;color:rgba(233,229,214,.5)}

/* ---------- 13. Marcador de imagen pendiente ---------- */
.hueco{
  width:100%;height:100%;min-height:180px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.4rem;text-align:center;padding:1.5rem;
  background:repeating-linear-gradient(45deg,var(--arena-200),var(--arena-200) 12px,var(--arena-50) 12px,var(--arena-50) 24px);
  border:1px dashed rgba(94,30,23,.35);color:var(--ox);
}
.hueco b{font-family:var(--texto);font-size:.82rem;font-weight:700;letter-spacing:.02em;word-break:break-all}
.hueco span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gris)}
.hueco em{font-style:normal;font-size:.68rem;color:var(--gris-200)}

/* ---------- 14. Animación de entrada ---------- */
.revelar{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.revelar.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .revelar{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 15. Adaptación a pantallas ---------- */
@media (max-width:1024px){
  .areas{grid-template-columns:repeat(2,1fr)}
  .banda__grid{grid-template-columns:repeat(2,1fr)}
  .banda__dato:nth-child(2){border-right:0}
  .banda__dato:nth-child(-n+2){border-bottom:var(--linea)}
}

@media (max-width:900px){
  .hamburguesa{display:block;order:3}
  .nav{
    position:fixed;inset:84px 0 auto;flex-direction:column;align-items:flex-start;gap:0;
    background:var(--papel);border-bottom:var(--linea);padding:1rem var(--pad) 2rem;
    transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease);
    max-height:calc(100vh - 84px);overflow-y:auto;
  }
  .encabezado.abierto .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{width:100%;padding:1rem 0;border-bottom:var(--linea);font-size:.9rem}
  .idioma{border-left:0;padding-left:0;margin-left:auto;order:2}
  .portada__grid,.sucesion__grid,.escritorio__grid,.contacto__grid{grid-template-columns:1fr}
  .portada__media{max-width:460px;margin-inline:auto;width:100%}
  .escritorio__grid > .escritorio__texto{order:2}
  .equipo{grid-template-columns:repeat(2,1fr)}
  .pie__grid{grid-template-columns:1fr 1fr}
  .pie__grid > :first-child{grid-column:1/-1}
}

@media (max-width:640px){
  .areas{grid-template-columns:1fr}
  .equipo{grid-template-columns:1fr}
  .valores{grid-template-columns:1fr;gap:1.4rem}
  .banda__grid{grid-template-columns:1fr}
  .banda__dato{border-right:0;border-bottom:var(--linea);padding:1.5rem 0}
  .banda__dato:last-child{border-bottom:0}
  .pie__grid{grid-template-columns:1fr;gap:2rem}
  .placa{left:0;max-width:88%}
  .marco::after{inset:10px -10px -10px 10px}
  .acciones .btn{width:100%}
  .datos li{flex-direction:column;gap:.3rem}
}

/* ---------- 16. Impresión ---------- */
@media print{
  .encabezado,.hamburguesa,.idioma,.acciones,form{display:none}
  body{background:#fff;color:#000}
}