/* Cuadrado Advocats - styles.css (fix2) */
:root{
  --brand: #e17a23;
  --brand-2: #2b2f33;
  --bg: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #0ea5e9;
  --hero-overlay: .70; /* opacidad del velo blanco 0..1 */
}
html{scroll-behavior:smooth}
body{margin:0;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";color:var(--text);background:var(--bg);line-height:1.6}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid #eee;z-index:10}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.logo img{height:40px;width:auto}
.menu a{margin:0 10px;font-weight:600;color:var(--brand-2)}
.menu a.cta{padding:8px 12px;border-radius:10px;background:var(--brand);color:#fff}
/* Héroe con imagen de fondo y velo blanco */
.hero{
  padding:56px 0 24px;
  background-image:
    linear-gradient(rgba(255,255,255,var(--hero-overlay)), rgba(255,255,255,var(--hero-overlay))),
    url('/assets/img/hero.jpg');
  background-size:cover;
  background-position:center;
}
.hero h1{font-size:clamp(28px,4vw,44px);margin:0 0 8px;color:var(--brand-2)}
.hero p{margin:0 0 18px;color:var(--muted)}
.badges{display:flex;gap:12px;flex-wrap:wrap}
.badge{padding:6px 10px;border:1px solid #eee;border-radius:999px;color:var(--brand-2);font-size:14px;background:#fff}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.card{border:1px solid #eee;border-radius:14px;padding:18px;background:#fff}
.card h3{margin-top:0;color:var(--brand-2)}
.card p{color:var(--muted)}
.footer{margin-top:48px;border-top:1px solid #eee;padding:24px 0;color:#6b7280;font-size:14px}
.section{padding:32px 0}
.h1, h1{font-size:clamp(26px,3.6vw,40px)}
.h2, h2{font-size:clamp(22px,3vw,28px)}
.h3, h3{font-size:clamp(18px,2.4vw,22px)}
ul.cols{columns:2;gap:24px}
.callout{border-left:4px solid var(--brand);padding:10px 14px;background:#fff7f0;border-radius:6px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border:1px solid #eee;padding:10px;text-align:left}
.form{display:grid;gap:12px;max-width:640px}
input,textarea,select{width:100%;padding:10px 12px;border-radius:10px;border:1px solid #e5e7eb;font:inherit}
button{padding:10px 14px;border-radius:10px;border:0;background:var(--brand);color:#fff;font-weight:700;cursor:pointer}
button.secondary{background:var(--brand-2)}
.kicker{text-transform:uppercase;letter-spacing:.04em;font-size:13px;color:var(--muted)}
.meta{color:var(--muted);font-size:14px}
.banner{padding:10px;background:#111;color:#fff}
.team-photo{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
/* Accesibilidad: texto solo para lectores de pantalla */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
@media(max-width:800px){
  .grid-3{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  ul.cols{columns:1}
}