/* ==========================================================================
   DESPACHO DE ABOGADO INDEPENDIENTE — HOJA DE ESTILOS
   Layout: cabecera fija · hero dividido (tesis + formulario rápido) ·
   rejilla de áreas · bloque biográfico · garantías y proceso · contacto · pie.
   PERSONALIZAR: cambia solo estas variables para ajustar la identidad.
   ========================================================================== */
:root{
  color-scheme: light;
  /* Color */
  --navy:      #13233b;   /* azul marino profundo: fondos de autoridad */
  --navy-2:    #1c3152;   /* marino algo más claro: superficies sobre marino */
  --charcoal:  #3a3f47;   /* gris marengo: texto principal */
  --slate:     #5d6573;   /* gris secundario: texto de apoyo */
  --paper:     #f7f5f0;   /* blanco roto: fondo general */
  --paper-2:   #efebe2;   /* blanco roto algo más oscuro: bandas alternas */
  --white:     #fffefb;
  --bronze:    #a8814a;   /* acento bronce tenue */
  --bronze-lt: #d2b383;   /* bronce sobre fondo marino */
  --line:      #ddd6c8;   /* filetes y bordes */
  --error:     #a3372b;
  --ok:        #2f6b4a;
  /* Tipografía */
  --f-display: "Libre Caslon Text", "Book Antiqua", Georgia, serif;
  --f-body:    "Mulish", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Escala tipográfica (1.25) */
  --t-xs: .78rem; --t-sm: .9rem; --t-base: 1.02rem; --t-md: 1.2rem;
  --t-lg: 1.55rem; --t-xl: clamp(1.9rem, 3.2vw, 2.5rem); --t-2xl: clamp(2.2rem, 5vw, 3.5rem);
  /* Medidas */
  --wrap: 1160px; --gutter: clamp(16px, 4vw, 40px); --radius: 3px;
  --header-h: 72px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important; animation:none!important} }
body{margin:0; background:var(--paper); color:var(--charcoal); font-family:var(--f-body); font-size:var(--t-base); line-height:1.65; -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--f-display); color:var(--navy); font-weight:400; line-height:1.18; margin:0; text-wrap:balance}
p{margin:0}
a{color:inherit}
img{max-width:100%; display:block}
:focus-visible{outline:2px solid var(--bronze); outline-offset:3px}
.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:16px; top:-60px; background:var(--navy); color:var(--white); padding:10px 14px; z-index:100; text-decoration:none}
.skip:focus{top:12px}

/* Etiqueta de sección con el signo de párrafo (§), propio de la redacción jurídica */
.eyebrow{display:inline-flex; align-items:center; gap:.55em; font-size:var(--t-xs); font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--bronze)}
.eyebrow::before{content:"§"; font-family:var(--f-display); font-size:1.35em; letter-spacing:0; font-weight:400}
.section{padding-block:clamp(64px, 9vw, 112px)}
.section-head{display:grid; gap:14px; max-width:640px; margin-bottom:clamp(36px, 5vw, 56px)}
.section-head h2{font-size:var(--t-xl)}
.section-head p{color:var(--slate)}

/* ---------- Botones ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.6em; font:600 var(--t-sm)/1 var(--f-body); letter-spacing:.04em; padding:15px 22px; border-radius:var(--radius); border:1px solid transparent; cursor:pointer; text-decoration:none; transition:background .2s, color .2s, border-color .2s, transform .2s}
.btn svg{width:17px; height:17px; flex:none}
.btn-primary{background:var(--bronze); color:var(--white)}
.btn-primary:hover{background:#946f3c; transform:translateY(-1px)}
.btn-ghost{border-color:currentColor; color:var(--navy); background:transparent}
.btn-ghost:hover{background:var(--navy); color:var(--white); border-color:var(--navy)}
.btn-light{border-color:rgba(255,254,251,.45); color:var(--white); background:transparent}
.btn-light:hover{border-color:var(--bronze-lt); color:var(--bronze-lt)}

/* ==========================================================================
   1. CABECERA
   ========================================================================== */
.site-header{position:sticky; top:env(safe-area-inset-top, 0px); z-index:50; background:rgba(247,245,240,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.nav{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:var(--header-h)}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--navy)}
.brand-mark{width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--bronze); color:var(--bronze); font-family:var(--f-display); font-size:1.05rem; letter-spacing:.04em}
.brand-text{display:grid; line-height:1.15}
/* Logotipo inspirado en la placa de la calle: nombre en versalitas y "ABOGADO" espaciado */
.brand-name{font-family:var(--f-display); font-weight:700; font-variant:small-caps; font-size:1.18rem; letter-spacing:.01em}
.brand-role{font-size:var(--t-xs); font-weight:700; letter-spacing:.3em; text-transform:uppercase; color:var(--slate)}
.menu{display:flex; align-items:center; gap:clamp(16px, 2.4vw, 32px); list-style:none; margin:0; padding:0}
.menu a{text-decoration:none; font-size:var(--t-sm); font-weight:600; color:var(--charcoal); position:relative; padding-block:6px}
.menu a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--bronze); transform:scaleX(0); transform-origin:left; transition:transform .25s}
.menu a:hover::after, .menu a[aria-current="true"]::after{transform:scaleX(1)}
.nav-cta{display:flex; align-items:center; gap:12px}
.nav-toggle{display:none; width:44px; height:44px; border:1px solid var(--line); background:transparent; border-radius:var(--radius); cursor:pointer; color:var(--navy)}
.nav-toggle span{display:block; width:20px; height:1.5px; background:currentColor; margin:5px auto; transition:transform .25s, opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width: 960px){
  .nav-toggle{display:block}
  .nav-cta .btn{display:none}
  .menu{position:absolute; left:0; right:0; top:100%; flex-direction:column; align-items:stretch; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px var(--gutter) 20px}
  .menu[data-open="false"]{display:none}
  .menu a{display:block; padding:14px 0; border-bottom:1px solid var(--line); font-size:var(--t-base)}
  .menu a::after{display:none}
  .menu .menu-cta{display:block; margin-top:16px}
  .menu .menu-cta a{border:0; text-align:center; color:var(--white)}
}
@media (min-width: 961px){ .menu .menu-cta{display:none} }

/* ==========================================================================
   2. HERO
   ========================================================================== */
.hero{background:var(--navy); color:#d9dde5; position:relative; overflow:hidden}
.hero::before{ /* Filete vertical bronce, como el margen de un escrito */
  content:""; position:absolute; top:0; bottom:0; left:max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)) - 22px); width:1px; background:linear-gradient(var(--bronze), transparent 85%); opacity:.5}
.hero-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(32px, 6vw, 80px); align-items:center; padding-block:clamp(56px, 8vw, 104px)}
.hero-copy{display:grid; gap:24px; min-width:0}
.hero .eyebrow{color:var(--bronze-lt)}
.hero h1{color:var(--white); font-size:var(--t-2xl); letter-spacing:-.01em}
.hero h1 em{color:var(--bronze-lt); font-style:italic}
.hero-sub{font-size:var(--t-md); max-width:34em; color:#c4cad6}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px}
.hero-phone{font-family:var(--f-display); font-size:var(--t-md); color:var(--white); text-decoration:none; display:inline-flex; align-items:center; gap:10px}
.hero-phone small{display:block; font:600 var(--t-xs)/1.3 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--bronze-lt)}

.badges{display:grid; grid-template-columns:repeat(3, 1fr); gap:0; border-top:1px solid rgba(210,179,131,.3); margin-top:12px}
.badge{padding:18px 16px 0 0; display:grid; gap:4px}
.badge + .badge{padding-left:16px; border-left:1px solid rgba(210,179,131,.3)}
.badge strong{font-family:var(--f-display); font-weight:400; font-size:var(--t-lg); color:var(--white); line-height:1.1}
.badge span{font-size:var(--t-xs); letter-spacing:.06em; color:#aeb6c4}

/* Formulario rápido */
.quick{background:var(--white); color:var(--charcoal); border-radius:var(--radius); padding:clamp(24px, 3vw, 34px); box-shadow:0 30px 60px -30px rgba(0,0,0,.55); border-top:3px solid var(--bronze); min-width:0}
.quick h2{font-size:var(--t-lg)}
.quick > p{color:var(--slate); font-size:var(--t-sm); margin-top:6px}
.quick form{display:grid; gap:14px; margin-top:20px}

/* ---------- Campos de formulario (compartidos) ---------- */
.field{display:grid; gap:6px; min-width:0}
.field label{font-size:var(--t-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--navy)}
.field input, .field select, .field textarea{width:100%; font:inherit; font-size:var(--t-base); color:var(--charcoal); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; transition:border-color .2s, background .2s}
.field textarea{min-height:130px; resize:vertical}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--bronze); background:var(--white); box-shadow:0 0 0 3px rgba(168,129,74,.18)}
.field [aria-invalid="true"]{border-color:var(--error)}
.err{font-size:var(--t-xs); color:var(--error); min-height:0}
.err:empty{display:none}
.check{display:flex; gap:10px; align-items:flex-start; font-size:var(--t-sm); color:var(--slate)}
.check input{width:18px; height:18px; margin-top:3px; accent-color:var(--navy); flex:none}
.check a{color:var(--navy)}
.form-note{font-size:var(--t-xs); color:var(--slate)}
.form-fail{padding:16px; background:#f8ecea; border-left:3px solid var(--error); color:#6e241c; font-size:var(--t-sm)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.btn:disabled{opacity:.6; cursor:wait}
.form-ok{display:flex; gap:12px; padding:16px; background:#eef4ef; border-left:3px solid var(--ok); color:#24402f; font-size:var(--t-sm)}

/* ==========================================================================
   3. ÁREAS DE PRÁCTICA
   ========================================================================== */
.areas{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line)}
.area{display:grid; grid-template-rows:auto auto 1fr auto; gap:14px; padding:clamp(24px, 3vw, 36px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--paper); transition:background .25s}
.area:hover{background:var(--white)}
.area-icon{width:46px; height:46px; color:var(--bronze); transition:transform .3s}
.area:hover .area-icon{transform:translateY(-3px)}
.area h3{font-size:var(--t-md)}
.area p{color:var(--slate); font-size:var(--t-sm)}
.area-more{justify-self:start; display:inline-flex; align-items:center; gap:8px; background:none; border:0; padding:6px 0; font:700 var(--t-xs)/1 var(--f-body); letter-spacing:.12em; text-transform:uppercase; color:var(--navy); cursor:pointer; border-bottom:1px solid var(--bronze)}
.area-more svg{width:14px; height:14px; transition:transform .2s}
.area-more:hover svg{transform:translateX(4px)}

/* Área destacada (desahucios): ocupa toda la fila */
.area.area-featured{grid-column:1 / -1; grid-template-columns:auto minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows:auto; column-gap:clamp(20px, 4vw, 48px); align-items:start; background:var(--navy)}
.area.area-featured:hover{background:var(--navy-2)}
.area-featured .area-icon{width:56px; height:56px; color:var(--bronze-lt)}
.area-featured h3{color:var(--white); font-size:var(--t-lg)}
.area-featured p{color:#c4cad6; font-size:var(--t-base)}
.area-featured .area-more{color:var(--white); border-color:var(--bronze-lt)}
.feat-main{display:grid; gap:14px; min-width:0}
.feat-tag{font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-lt)}
.feat-actions{display:flex; flex-wrap:wrap; align-items:center; gap:20px; margin-top:6px}
.feat-list{list-style:none; margin:0; padding:0; display:grid; border-top:1px solid rgba(210,179,131,.3); min-width:0}
.feat-list li{display:flex; gap:12px; padding:12px 0; border-bottom:1px solid rgba(210,179,131,.3); color:#e3e6ec; font-size:var(--t-sm)}
.feat-list li::before{content:"§"; font-family:var(--f-display); color:var(--bronze-lt)}
@media (max-width: 900px){ .area.area-featured{grid-template-columns:1fr; row-gap:18px} }
.quick textarea{min-height:96px}

/* Modal "Saber más" */
dialog{border:0; padding:0; border-radius:var(--radius); width:min(620px, calc(100% - 32px)); max-height:calc(100% - 48px); background:var(--white); color:var(--charcoal); box-shadow:0 40px 80px -30px rgba(10,20,35,.6)}
dialog::backdrop{background:rgba(19,35,59,.6)}
.modal{display:grid; gap:16px; padding:clamp(24px, 4vw, 40px); border-top:3px solid var(--bronze)}
.modal h3{font-size:var(--t-lg)}
.modal ul{margin:0; padding-left:1.1em; display:grid; gap:6px; color:var(--slate)}
.modal .ref{font-size:var(--t-xs); color:var(--slate); border-top:1px solid var(--line); padding-top:12px}
.modal-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:6px}

/* ==========================================================================
   4. SOBRE EL ABOGADO
   ========================================================================== */
.about{background:var(--paper-2)}
.about-grid{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:clamp(32px, 6vw, 88px); align-items:start}
.about-side{display:grid; gap:28px; min-width:0}
/* Tarjeta de visita (proporción real 85 × 55 mm), basada en la placa del despacho.
   Anverso marfil delante y reverso marino detrás, ligeramente girado. */
.bcard-stack{position:relative; container-type:inline-size; padding-block:5% 7%; max-width:100%}
.bcard{aspect-ratio:85/55; border-radius:5px; max-width:100%}
.bcard-back{position:absolute; top:2%; right:0; width:90%; background:var(--navy); transform:rotate(4.5deg); display:grid; place-items:center; box-shadow:0 20px 34px -24px rgba(19,35,59,.7)}
.bcard-back::after{content:""; position:absolute; inset:3.2cqw; border:1px solid rgba(210,179,131,.45); border-radius:2px}
.bcard-mono{font-family:var(--f-display); font-size:11cqw; letter-spacing:.06em; color:var(--bronze-lt)}
.bcard-front{position:relative; z-index:1; width:90%; background:var(--white); border:1px solid var(--line); box-shadow:0 26px 40px -26px rgba(19,35,59,.55); overflow:hidden;
  display:grid; grid-template-rows:1fr auto auto auto 1fr auto; justify-items:center; text-align:center; padding:4cqw 5.5cqw 4.2cqw; transition:transform .35s}
.bcard-stack:hover .bcard-front{transform:translateY(-3px) rotate(-.6deg)}
.bcard-front::after{content:""; position:absolute; inset:2.6cqw; border:1px solid rgba(168,129,74,.55); border-radius:2px; pointer-events:none}
.bcard-mark{position:absolute; left:50%; top:46%; width:34cqw; height:34cqw; transform:translate(-50%, -50%); color:var(--navy); opacity:.07}
.bcard-name{grid-row:2; position:relative; font-family:var(--f-display); font-weight:700; font-variant:small-caps; font-size:6.4cqw; line-height:1.1; letter-spacing:.01em; color:var(--navy)}
.bcard-role{grid-row:3; position:relative; margin-top:2.4cqw; font-weight:700; font-size:3.3cqw; letter-spacing:.55em; margin-right:-.55em; text-transform:uppercase; color:var(--navy)}
.bcard-rule{grid-row:4; width:9cqw; height:1px; margin-top:3cqw; background:var(--bronze)}
.bcard-foot{grid-row:6; position:relative; width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:4px 12px; font-size:max(11px, 2.4cqw); line-height:1.45; color:var(--charcoal); text-align:left; font-variant-numeric:tabular-nums}
.bcard-foot span:last-child{text-align:right}
.bcard-tel{display:inline-flex; align-items:center; gap:.5em; font-weight:700; color:var(--navy)}
.bcard-tel svg{width:1.2em; height:1.2em; color:var(--bronze)}
@media (prefers-reduced-motion: reduce){ .bcard-stack:hover .bcard-front{transform:none} }
@container (max-width: 440px){
  .bcard-foot{flex-direction:column; align-items:center; text-align:center}
  .bcard-foot span:last-child{text-align:center}
  .bcard-mark{top:38%}
}
@media (max-width: 900px){ .about-copy{order:-1} .about-side{max-width:520px} }
.about-copy{display:grid; gap:20px; min-width:0}
.about-copy h2{font-size:var(--t-xl)}
.about-copy p{color:var(--charcoal); max-width:36em}
.credentials{display:grid; gap:0; margin:8px 0 0; padding:0; list-style:none; border-top:1px solid var(--line)}
.credentials li{display:grid; grid-template-columns:7.5rem 1fr; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); font-size:var(--t-sm)}
.credentials b{color:var(--navy); font-weight:700; font-variant-numeric:tabular-nums}
blockquote{margin:12px 0 0; padding:0 0 0 24px; border-left:2px solid var(--bronze); font-family:var(--f-display); font-style:italic; font-size:var(--t-lg); line-height:1.4; color:var(--navy)}
blockquote cite{display:block; margin-top:10px; font:600 var(--t-xs)/1.4 var(--f-body); font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze)}

/* ==========================================================================
   5. POR QUÉ ELEGIRNOS
   ========================================================================== */
.why-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 3vw, 36px)}
.why{display:grid; gap:10px; align-content:start; padding-top:20px; border-top:1px solid var(--navy)}
.why svg{width:28px; height:28px; color:var(--bronze)}
.why h3{font-size:var(--t-md)}
.why p{font-size:var(--t-sm); color:var(--slate)}

.process{margin-top:clamp(56px, 7vw, 88px); background:var(--navy); color:#c9cfda; border-radius:var(--radius); padding:clamp(28px, 4vw, 48px)}
.process h3{color:var(--white); font-size:var(--t-lg); margin-bottom:28px}
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:clamp(20px, 3vw, 32px); counter-reset:step}
.steps li{counter-increment:step; display:grid; gap:8px; align-content:start; font-size:var(--t-sm)}
.steps li::before{content:counter(step, decimal-leading-zero); font-family:var(--f-display); font-size:var(--t-xl); color:var(--bronze-lt); line-height:1}
.steps strong{color:var(--white); font-weight:600; font-size:var(--t-base)}

/* ==========================================================================
   6. CASOS
   ========================================================================== */
.cases{background:var(--white); border-block:1px solid var(--line)}
.case-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:clamp(18px, 2.5vw, 28px)}
.case{display:grid; grid-template-rows:auto auto 1fr auto; gap:12px; padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:var(--paper); transition:transform .25s, box-shadow .25s, border-color .25s}
.case:hover{transform:translateY(-4px); box-shadow:0 22px 40px -28px rgba(19,35,59,.5); border-color:var(--bronze)}
.case-tag{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--bronze)}
.case h3{font-size:var(--t-md)}
.case p{font-size:var(--t-sm); color:var(--slate)}
.case-result{display:flex; justify-content:space-between; gap:12px; padding-top:14px; border-top:1px solid var(--line); font-size:var(--t-sm)}
.case-result b{color:var(--navy)}
.sample{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:3px 7px; border:1px dashed var(--bronze); color:var(--bronze); border-radius:2px; vertical-align:middle}
/* Segunda opinión: tarjeta diferenciada dentro de la rejilla de áreas */
.area.area-second{background:var(--paper-2)}
.area.area-second:hover{background:var(--white)}
.area-second h3{font-style:italic}
.area-second p{color:var(--charcoal)}

/* Caso destacado (caso real) */
.case-feature{display:grid; grid-template-columns:minmax(0, .9fr) minmax(0, 1.3fr); gap:clamp(24px, 5vw, 64px); padding:clamp(24px, 4vw, 48px); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius)}
.case-lead{display:grid; gap:14px; align-content:start; min-width:0}
.case-lead h3{font-size:var(--t-lg)}
.case-outcome{font-family:var(--f-display); font-style:italic; font-size:var(--t-md); line-height:1.4; color:var(--bronze); padding-top:14px; border-top:1px solid var(--line)}
.case-facts{margin:0; display:grid; border-top:1px solid var(--line); min-width:0}
.case-facts > div{display:grid; grid-template-columns:8.5rem minmax(0,1fr); gap:16px; padding:16px 0; border-bottom:1px solid var(--line)}
.case-facts dt{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate); padding-top:3px}
.case-facts dd{margin:0; color:var(--charcoal)}
.case-facts .win dd{color:var(--navy); font-weight:700}
@media (max-width: 900px){ .case-feature{grid-template-columns:1fr} }

/* Carrusel de casos */
.carousel-track{position:relative; display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; overscroll-behavior-x:contain; scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:2px solid var(--bronze); outline-offset:4px}
.slide{scroll-snap-align:start; min-width:0}
.carousel-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:22px; flex-wrap:wrap}
.carousel-status{display:flex; align-items:center; gap:18px}
.carousel-count{font-size:var(--t-sm); color:var(--slate); font-variant-numeric:tabular-nums}
.carousel-count b{color:var(--navy)}
.dots{display:flex; gap:6px}
.dot{position:relative; width:32px; height:24px; padding:0; border:0; background:none; cursor:pointer}
.dot::before{content:""; position:absolute; left:0; right:0; top:50%; height:3px; margin-top:-1.5px; background:var(--line); transition:background .2s}
.dot:hover::before{background:var(--slate)}
.dot[aria-current="true"]::before{background:var(--bronze)}
.arrows{display:flex; gap:10px}
.arrow{width:50px; height:50px; display:grid; place-items:center; border:1px solid var(--navy); border-radius:50%; background:transparent; color:var(--navy); cursor:pointer; transition:background .2s, color .2s, opacity .2s}
.arrow svg{width:18px; height:18px}
.arrow-prev svg{transform:rotate(180deg)}
.arrow:hover:not(:disabled){background:var(--navy); color:var(--white)}
.arrow:disabled{opacity:.3; cursor:default}
@media (prefers-reduced-motion: reduce){ .carousel-track{scroll-behavior:auto} }
@media (max-width: 600px){ .case-facts > div{grid-template-columns:1fr; gap:4px} }
.cases-note{margin-top:22px; font-size:var(--t-xs); color:var(--slate); max-width:62em}

/* ==========================================================================
   7. CONTACTO
   ========================================================================== */
.contact-grid{display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(0, 1fr); gap:clamp(32px, 5vw, 64px); align-items:start}
.contact-form{display:grid; grid-template-columns:1fr 1fr; gap:18px; background:var(--white); padding:clamp(24px, 3.5vw, 40px); border:1px solid var(--line); border-radius:var(--radius); min-width:0}
.contact-form .full{grid-column:1 / -1}
.info{display:grid; gap:24px; min-width:0}
.info-list{list-style:none; margin:0; padding:0; display:grid; gap:0; border-top:1px solid var(--line)}
.info-list li{display:grid; grid-template-columns:28px 1fr; gap:14px; padding:16px 0; border-bottom:1px solid var(--line)}
.info-list svg{width:20px; height:20px; color:var(--bronze); margin-top:3px}
.info-list span{display:block; font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--slate)}
.info-list a, .info-list p{color:var(--navy); text-decoration:none; font-weight:600; overflow-wrap:anywhere}
.info-list a:hover{color:var(--bronze)}
.hours{font-variant-numeric:tabular-nums}
.map{position:relative; aspect-ratio:16/10; max-width:100%; border-radius:var(--radius); overflow:hidden; background:var(--paper-2); border:1px solid var(--line)}
.map svg{width:100%; height:100%}
.map-label{position:absolute; left:16px; bottom:16px; right:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--white); padding:10px 14px; border-radius:var(--radius); font-size:var(--t-sm); box-shadow:0 8px 20px -12px rgba(19,35,59,.4)}
.map-label a{color:var(--navy); font-weight:700; text-decoration:none; border-bottom:1px solid var(--bronze)}

/* ==========================================================================
   8. PIE
   ========================================================================== */
.site-footer{background:var(--navy); color:#aeb6c4; font-size:var(--t-sm)}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:32px; padding-block:56px 36px}
.site-footer .brand{color:var(--white)}
.site-footer .brand-role{color:#8f99aa}
.site-footer h4{font-family:var(--f-body); font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--bronze-lt); margin-bottom:14px}
.site-footer ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.site-footer a{text-decoration:none; color:#d4d9e1}
.site-footer a:hover{color:var(--bronze-lt)}
.footer-legal{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding-block:20px; border-top:1px solid rgba(210,179,131,.22); font-size:var(--t-xs)}
.linkedin{display:inline-flex; align-items:center; gap:8px}
.linkedin svg{width:18px; height:18px}
.legal-btn{background:none; border:0; padding:0; font:inherit; color:#d4d9e1; cursor:pointer; text-align:left}
.legal-btn:hover{color:var(--bronze-lt)}

/* Barra de llamada fija en móvil */
.call-bar{display:none}
@media (max-width: 640px){
  .call-bar{display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--navy); padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap:10px; box-shadow:0 -10px 24px -14px rgba(0,0,0,.5)}
  .call-bar .btn{padding:13px 10px}
  body{padding-bottom:72px}
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
  .areas{grid-template-columns:repeat(2, minmax(0,1fr))}
  .why-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 900px){
  .hero-grid, .about-grid, .contact-grid{grid-template-columns:1fr}
  .areas, .case-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .footer-grid > :first-child{grid-column:1 / -1}
}
@media (max-width: 600px){
  .areas, .case-grid, .why-grid, .steps{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .badges{grid-template-columns:1fr}
  .badge + .badge{padding-left:0; border-left:0; border-top:1px solid rgba(210,179,131,.2); padding-top:14px}
  .badge{padding:14px 0 0}
  .credentials li{grid-template-columns:1fr; gap:2px}
  .footer-grid{grid-template-columns:1fr}
  .brand-role{display:none}
}