/**
 * CAP Abogados — hoja de estilos.
 *
 * Transcrita del mockup capabogados-mockup-unificado (1).html, líneas 34-124 y
 * 150-527. Se descartaron la sección 2 (sistema de vistas del prototipo) y la
 * sección 3 (marcadores de contenido pendiente y notas internas), que eran
 * andamiaje y no forman parte del diseño.
 *
 * No modificar valores visuales: este archivo es la referencia contra la que se
 * compara el sitio publicado.
 */

/* ==========================================================================
   0. TIPOGRAFÍAS AUTOALOJADAS (Cinzel y Montserrat, subconjunto latin)
   ========================================================================== */
@font-face{
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cinzel-400.woff2') format('woff2');
}

@font-face{
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/cinzel-500.woff2') format('woff2');
}

@font-face{
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/cinzel-600.woff2') format('woff2');
}

@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../fonts/montserrat-300.woff2') format('woff2');
}

@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-400.woff2') format('woff2');
}

@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat-500.woff2') format('woff2');
}

@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600.woff2') format('woff2');
}

@font-face{
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700.woff2') format('woff2');
}

  /* ==========================================================================
     1. TOKENS DE MARCA (conservados del mockup original)
     ========================================================================== */
  :root{
    --negro:#111111;
    --gris-osc:#5C5C5C;
    --gris-med:#8C8C8C;
    --gris-cla:#D9D9D9;
    --gris-hue:#F1F0EE;
    --blanco:#FFFFFF;
    --display: 'Cinzel', serif;
    --body: 'Montserrat', sans-serif;
    --maxw: 1280px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: var(--body);
    color: var(--negro);
    background: var(--blanco);
    line-height:1.6;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
  @media(min-width:768px){ .wrap{padding:0 40px;} }
  @media(min-width:1024px){ .wrap{padding:0 80px;} }

  .eyebrow{
    font-family:var(--body); font-size:11px; font-weight:600; letter-spacing:.25em;
    text-transform:uppercase; color:var(--gris-osc); margin-bottom:14px; display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:"◆"; font-size:8px; color:var(--gris-med);}
  h1,h2,h3{font-family:var(--display); font-weight:500; letter-spacing:.01em; color:var(--negro);}

  /* Botones (conservados; se añade .btn-light para tarjetas de fondo negro) */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
    padding:17px 34px; border-radius:3px; cursor:pointer; transition: all .2s ease; white-space:normal; text-align:center;
    border:1px solid transparent;
  }
  .btn-primary{ background:var(--negro); color:var(--blanco); border-color:var(--negro); }
  .btn-primary:hover{ background:var(--gris-osc); border-color:var(--gris-osc); }
  .btn-secondary{ background:transparent; color:var(--negro); border-color:var(--negro); }
  .btn-secondary:hover{ background:var(--negro); color:var(--blanco); }
  .btn-light{ background:var(--blanco); color:var(--negro); border-color:var(--blanco); }
  .btn-light:hover{ background:var(--gris-cla); border-color:var(--gris-cla); }
  .btn-outline-light{ background:transparent; color:var(--blanco); border-color:rgba(255,255,255,.5); }
  .btn-outline-light:hover{ background:var(--blanco); color:var(--negro); border-color:var(--blanco); }
  .btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
    outline:2px solid var(--negro); outline-offset:2px;
  }
  .link-underline{
    position:relative; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding-bottom:4px;
  }
  .link-underline::after{
    content:""; position:absolute; left:0; bottom:0; height:1px; width:0%; background:var(--negro); transition:width .25s ease;
  }
  .link-underline:hover::after{width:100%;}

  /* Placeholder de fotografía (conservado). El data-label indica la regla
     de imagen de la vertical según PDF §4. */
  .ph{
    position:relative; overflow:hidden; background:
      repeating-linear-gradient(135deg, #d7d5d0 0 2px, #e7e5e0 2px 4px);
    filter:grayscale(1);
  }
  .ph::after{
    content: attr(data-label);
    position:absolute; left:14px; bottom:14px; right:14px;
    font-family:var(--body); font-size:10px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--blanco); background:rgba(17,17,17,.72); padding:8px 12px; border-radius:2px;
  }

  /* Animación de aparición (conservada) */
  .reveal{ opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    .reveal{opacity:1; transform:none; transition:none;}
    .btn, .link-underline::after, .servicio-card, .caso-card{transition:none;}
  }

  /* ==========================================================================
     4. HEADER + NAVEGACIÓN
     ========================================================================== */
  header{
    position:sticky; top:0; z-index:50; background:var(--blanco);
    border-bottom:1px solid transparent; transition:border-color .25s ease;
  }
  header.scrolled{ border-bottom-color:var(--gris-cla); }
  .headbar{ display:flex; align-items:center; justify-content:space-between; height:84px; }
  .logo{ font-family:var(--display); font-size:26px; letter-spacing:.12em; }
  .logo small{ display:block; font-family:var(--body); font-size:8px; letter-spacing:.32em; color:var(--gris-osc); font-weight:600; margin-top:2px;}
  nav.desktop-nav{ display:none; gap:36px; align-items:center; }
  nav.desktop-nav a{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--negro); position:relative; padding:4px 0;}
  nav.desktop-nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--negro);transition:width .2s ease;}
  nav.desktop-nav a:hover::after{width:100%;}
  nav.desktop-nav a.active::after{width:100%;}
  .head-actions{ display:flex; align-items:center; gap:20px; }
  .menu-btn{ display:flex; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:6px; }
  .menu-btn span{ width:22px; height:1px; background:var(--negro); display:block; }
  @media(min-width:1024px){
    nav.desktop-nav{display:flex;}
    .menu-btn{display:none;}
  }
  .head-cta{ display:none; }
  @media(min-width:1024px){ .head-cta{display:inline-flex; padding:14px 24px; font-size:12px;} }

  /* Menú móvil desplegable */
  .mobile-nav{
    display:none; position:fixed; left:0; right:0; top:84px; bottom:0; z-index:49;
    background:var(--blanco); padding:32px 24px; flex-direction:column; gap:4px; overflow-y:auto;
  }
  .mobile-nav.open{ display:flex; }
  .mobile-nav a{
    font-size:16px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    padding:16px 0; border-bottom:1px solid var(--gris-cla);
  }
  .mobile-nav a.active{ color:var(--gris-osc); }
  .mobile-nav .btn{ margin-top:24px; }
  body.nav-open{ overflow:hidden; }

  /* ==========================================================================
     5. HERO (Home y verticales)
     ========================================================================== */
  .hero{ padding:56px 0 64px; }
  @media(min-width:1024px){ .hero{padding:88px 0 96px;} }
  .hero-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
  @media(min-width:1024px){ .hero-grid{ grid-template-columns:1.05fr .95fr; gap:64px; } }
  .hero h1{ font-size:34px; line-height:1.18; margin-bottom:22px; }
  @media(min-width:768px){ .hero h1{font-size:44px;} }
  @media(min-width:1024px){ .hero h1{font-size:52px; line-height:1.15;} }
  .hero p.lead{ font-size:16px; color:var(--gris-osc); max-width:520px; margin-bottom:34px; font-weight:400; }
  .hero-ctas{ display:flex; flex-direction:column; gap:14px; align-items:stretch; }
  @media(min-width:560px){ .hero-ctas{flex-direction:row; align-items:center;} }
  .hero-photo{ aspect-ratio:4/5; border-radius:4px; }
  @media(min-width:1024px){ .hero-photo{ aspect-ratio:5/6; } }
  .cta-note{ margin-top:14px; font-size:12px; color:var(--gris-med); }

  /* ==========================================================================
     6. SECCIONES GENÉRICAS
     ========================================================================== */
  section{ padding:64px 0; }
  @media(min-width:1024px){ section{ padding:104px 0; } }
  .section-head{ max-width:680px; margin-bottom:48px; }
  .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
  .section-head.center .eyebrow{ justify-content:center; }
  .section-head h2{ font-size:28px; line-height:1.25; }
  @media(min-width:1024px){ .section-head h2{ font-size:36px; } }
  .section-head p.sub{ margin-top:16px; font-size:15px; color:var(--gris-osc); }
  .bg-hue{ background:var(--gris-hue); }

  /* ==========================================================================
     7. HOME · BIFURCACIÓN (PDF §6.2) — Empresas dominante
     ========================================================================== */
  .bifurca{ display:grid; grid-template-columns:1fr; gap:22px; align-items:stretch; }
  @media(min-width:960px){ .bifurca{ grid-template-columns:1.35fr 1fr; gap:28px; } }
  .bi-card{
    border:1px solid var(--gris-cla); border-radius:6px; overflow:hidden;
    display:flex; flex-direction:column; background:var(--blanco);
    transition:transform .25s ease, border-color .25s ease;
  }
  .bi-card:hover{ transform:translateY(-4px); border-color:var(--gris-osc); }
  .bi-card .bi-photo{ aspect-ratio:16/7; }
  .bi-card .bi-body{ padding:32px 28px 36px; display:flex; flex-direction:column; flex:1; }
  @media(min-width:1024px){ .bi-card .bi-body{ padding:40px 40px 44px; } }
  .bi-card h3{ font-size:24px; margin-bottom:14px; }
  @media(min-width:1024px){ .bi-card h3{ font-size:28px; } }
  .bi-card p{ font-size:14.5px; color:var(--gris-osc); margin-bottom:26px; }
  .bi-card .btn{ margin-top:auto; align-self:flex-start; }
  /* Variante dominante (Empresas): fondo negro, mayor peso visual */
  .bi-card.dominant{ background:var(--negro); border-color:var(--negro); }
  .bi-card.dominant h3{ color:var(--blanco); }
  .bi-card.dominant p{ color:var(--gris-cla); }
  .bi-card.dominant .eyebrow{ color:var(--gris-cla); }
  .bi-card.dominant .eyebrow::before{ color:var(--gris-med); }
  @media(min-width:960px){ .bi-card.dominant .bi-photo{ aspect-ratio:16/8; } }

  /* ==========================================================================
     8. AUTORIDAD DE FIRMA (PDF §6.3) + contadores pendientes
     ========================================================================== */
  .auth-grid{ display:grid; grid-template-columns:1fr; gap:40px; align-items:center; }
  @media(min-width:960px){ .auth-grid{ grid-template-columns:1.05fr .95fr; gap:64px; } }
  .auth-photo{ aspect-ratio:4/3; border-radius:4px; }
  .auth-text p{ font-size:15px; color:var(--gris-osc); margin-bottom:18px; }
  .stats-row{
    display:grid; grid-template-columns:1fr; gap:18px; margin-top:36px;
    border-top:1px solid var(--gris-cla); padding-top:32px;
  }
  @media(min-width:640px){ .stats-row{ grid-template-columns:repeat(3,1fr); } }
  .stat .stat-num{ font-family:var(--display); font-size:26px; margin-bottom:6px; line-height:1.2; }
  .stat .stat-label{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-osc); font-weight:600; }

  /* ==========================================================================
     9. MARCO LEGAL (PDF §6.4) — tres tarjetas
     ========================================================================== */
  .leyes-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
  @media(min-width:900px){ .leyes-grid{ grid-template-columns:repeat(3,1fr); } }
  .ley-card{
    border:1px solid var(--gris-cla); border-radius:6px; padding:36px 28px; background:var(--blanco);
    transition:border-color .25s ease, transform .25s ease;
  }
  .ley-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); }
  .ley-num{ font-family:var(--display); font-size:34px; margin-bottom:6px; }
  .ley-sub{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gris-osc); margin-bottom:16px; }
  .ley-card p{ font-size:14px; color:var(--gris-osc); }

  /* ==========================================================================
     10. TARJETAS DE SERVICIO / RUTAS / CAMINOS (conservadas)
     ========================================================================== */
  .servicio-card{
    display:grid; grid-template-columns:1fr; border:1px solid var(--gris-cla); border-radius:6px; overflow:hidden;
    margin-bottom:28px; background:var(--blanco); transition:border-color .25s ease, transform .25s ease;
  }
  .servicio-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); }
  @media(min-width:768px){ .servicio-card{ grid-template-columns:.85fr 1.15fr; } }
  @media(min-width:768px){
    .servicio-card.flip{ grid-template-columns:1.15fr .85fr; }
    .servicio-card.flip .servicio-photo{ order:2; }
  }
  .servicio-photo{ aspect-ratio:4/3; }
  @media(min-width:768px){ .servicio-photo{ aspect-ratio:auto; height:100%; } }
  .servicio-body{ padding:32px 28px; display:flex; flex-direction:column; justify-content:center; }
  @media(min-width:1024px){ .servicio-body{ padding:48px; } }
  .servicio-body h3{ font-size:24px; margin-bottom:14px; }
  .servicio-body .quien{
    font-size:13.5px; color:var(--negro); background:var(--gris-hue);
    border-left:2px solid var(--negro); padding:12px 16px; border-radius:0 3px 3px 0; margin-bottom:18px;
  }
  .servicio-body .quien b{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; display:block; color:var(--gris-osc); margin-bottom:4px; }
  .servicio-body .logra-label{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600; color:var(--gris-osc); margin-bottom:8px; }
  .servicio-body ul{ margin:0 0 24px; display:flex; flex-direction:column; gap:9px; }
  .servicio-body li{ font-size:14px; color:var(--gris-osc); padding-left:18px; position:relative; }
  .servicio-body li::before{ content:"◆"; position:absolute; left:0; top:2px; font-size:7px; color:var(--gris-med); }

  /* ==========================================================================
     11. SÍNTOMAS DE CRISIS (PDF §7.2)
     ========================================================================== */
  .sintomas-list{ display:grid; grid-template-columns:1fr; gap:14px; max-width:820px; }
  @media(min-width:768px){ .sintomas-list{ grid-template-columns:1fr 1fr; } }
  .sintoma{
    display:flex; gap:14px; align-items:flex-start; border:1px solid var(--gris-cla);
    border-radius:6px; padding:20px 22px; font-size:14.5px; background:var(--blanco);
  }
  .sintoma::before{ content:"◆"; font-size:8px; color:var(--gris-med); margin-top:8px; flex-shrink:0; }

  /* ==========================================================================
     12. BENEFICIOS / DIFERENCIALES (conservado)
     ========================================================================== */
  .beneficios-grid{ display:grid; grid-template-columns:1fr; gap:36px; }
  @media(min-width:600px){ .beneficios-grid{ grid-template-columns:1fr 1fr; } }
  @media(min-width:1024px){ .beneficios-grid{ grid-template-columns:repeat(4,1fr); gap:32px; } }
  .beneficio-icon{
    width:44px; height:44px; border:1px solid var(--negro); border-radius:50%;
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
    font-family:var(--display); font-size:15px;
  }
  .beneficio h3{ font-family:var(--body); font-weight:600; font-size:16px; text-transform:none; margin-bottom:8px; letter-spacing:0; }
  .beneficio p{ font-size:14px; color:var(--gris-osc); }

  /* ==========================================================================
     13. PROCESO — TIMELINE (conservado; ampliado a 6 pasos)
     ========================================================================== */
  .timeline{ display:grid; grid-template-columns:1fr; gap:0; }
  @media(min-width:700px){ .timeline{ grid-template-columns:1fr 1fr; column-gap:32px; } }
  @media(min-width:1100px){ .timeline{ grid-template-columns:repeat(6,1fr); column-gap:0; } }
  .tl-step{ position:relative; padding:0 0 40px 44px; }
  .tl-step::before{
    content:""; position:absolute; left:15px; top:32px; bottom:0; width:1px; background:var(--gris-cla);
  }
  .tl-step:last-child::before{ display:none; }
  @media(min-width:700px) and (max-width:1099px){
    .tl-step::before{ display:none; }
  }
  @media(min-width:1100px){
    .tl-step{ padding:44px 20px 0 0; }
    .tl-step::before{ display:block; left:0; right:0; top:15px; bottom:auto; height:1px; width:auto; }
    .tl-step:last-child::before{ display:none; }
  }
  .tl-num{
    position:absolute; left:0; top:0; width:32px; height:32px; border:1px solid var(--negro); border-radius:50%;
    display:flex; align-items:center; justify-content:center; font-family:var(--display); font-size:13px; background:var(--blanco); z-index:2;
  }
  @media(min-width:1100px){ .tl-num{ position:static; margin-bottom:22px; } }
  .tl-step h3{ font-family:var(--body); font-weight:600; font-size:15px; margin-bottom:8px; letter-spacing:0; }
  .tl-step p{ font-size:13px; color:var(--gris-osc); }

  /* ==========================================================================
     14. CASOS (PDF §7.6) — plantillas con marcadores
     ========================================================================== */
  .casos-track{ display:grid; grid-template-columns:1fr; gap:20px; }
  @media(min-width:768px){ .casos-track{ grid-template-columns:repeat(3,1fr); } }
  .caso-card{ border:1px solid var(--gris-cla); border-radius:6px; padding:32px 26px; background:var(--blanco); transition:border-color .25s ease, transform .25s ease;}
  .caso-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); }
  .caso-num{ font-family:var(--display); font-size:22px; margin-bottom:14px; line-height:1.3; }
  .caso-tag{ font-size:11px; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--gris-osc); margin-bottom:10px; }
  .caso-card p{ font-size:14px; color:var(--gris-osc); }

  /* ==========================================================================
     15. TESTIMONIOS (PDF §8.5) — sección negra conservada
     ========================================================================== */
  .testi{ background:var(--negro); color:var(--blanco); }
  .testi .eyebrow{ color:var(--gris-cla); justify-content:center; }
  .testi .eyebrow::before{ color:var(--gris-med); }
  .testi-quote{ max-width:760px; margin:0 auto; text-align:center; }
  .testi-quote blockquote{ font-family:var(--display); font-weight:400; font-size:20px; line-height:1.5; margin-bottom:28px; }
  @media(min-width:1024px){ .testi-quote blockquote{ font-size:26px; } }
  .testi-meta{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--gris-cla); }
  .testi-dots{ display:flex; gap:8px; justify-content:center; margin-top:36px; }
  .testi-dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); }
  .testi-dots span.active{ background:var(--blanco); }

  /* ==========================================================================
     16. FINANCIACIÓN DE HONORARIOS (PDF §8.6)
     ========================================================================== */
  .financia{
    border:1px solid var(--gris-cla); border-radius:6px; background:var(--blanco);
    display:grid; grid-template-columns:1fr; overflow:hidden;
  }
  @media(min-width:900px){ .financia{ grid-template-columns:1.1fr .9fr; } }
  .financia-body{ padding:40px 30px; }
  @media(min-width:1024px){ .financia-body{ padding:56px; } }
  .financia-body h3{ font-size:26px; margin-bottom:14px; }
  .financia-body p{ font-size:15px; color:var(--gris-osc); margin-bottom:26px; }
  .financia-photo{ aspect-ratio:16/9; }
  @media(min-width:900px){ .financia-photo{ aspect-ratio:auto; height:100%; } }

  /* ==========================================================================
     17. FAQ (conservado; respuestas más largas)
     ========================================================================== */
  .faq-item{ border-bottom:1px solid var(--gris-cla); }
  .faq-q{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; }
  .faq-q h3{ font-family:var(--body); font-weight:500; font-size:15px; letter-spacing:0; }
  @media(min-width:1024px){ .faq-q h3{font-size:16px;} }
  .faq-plus{ width:20px; height:20px; position:relative; flex-shrink:0; }
  .faq-plus::before,.faq-plus::after{ content:""; position:absolute; background:var(--negro); transition:transform .25s ease; }
  .faq-plus::before{ left:0; top:50%; width:100%; height:1px; }
  .faq-plus::after{ top:0; left:50%; width:1px; height:100%; }
  .faq-item.open .faq-plus::after{ transform:scaleY(0); }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .faq-a p{ padding:0 0 24px; font-size:14px; color:var(--gris-osc); max-width:640px; }
  .faq-item.open .faq-a{ max-height:420px; }

  /* ==========================================================================
     18. RECURSOS / BLOG (PDF §5 y §6.5)
     ========================================================================== */
  .chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:32px; }
  .chip{
    font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
    border:1px solid var(--gris-cla); color:var(--gris-osc); padding:9px 16px; border-radius:20px;
    background:var(--blanco); cursor:pointer; transition:all .2s ease;
  }
  .chip.active, .chip:hover{ background:var(--negro); color:var(--blanco); border-color:var(--negro); }
  .blog-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
  @media(min-width:768px){ .blog-grid{ grid-template-columns:repeat(3,1fr); } }
  .blog-card{ border:1px solid var(--gris-cla); border-radius:6px; overflow:hidden; background:var(--blanco); transition:border-color .25s ease, transform .25s ease; }
  .blog-card:hover{ border-color:var(--gris-osc); transform:translateY(-4px); }
  .blog-photo{ aspect-ratio:16/9; }
  .blog-body{ padding:24px 22px 28px; }
  .blog-tag{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; color:var(--gris-osc); margin-bottom:10px; }
  .blog-body h3{ font-family:var(--body); font-weight:600; font-size:15.5px; letter-spacing:0; line-height:1.45; }
  .blog-card.hidden{ display:none; }

  /* ==========================================================================
     19. CTA FINAL + FORMULARIOS
     ========================================================================== */
  .cta-final{ background:var(--gris-hue); text-align:center; }
  .cta-final h2{ font-size:28px; margin-bottom:16px; }
  @media(min-width:1024px){ .cta-final h2{ font-size:38px; } }
  .cta-final p.cta-sub{ color:var(--gris-osc); margin-bottom:36px; font-size:14.5px; max-width:560px; margin-left:auto; margin-right:auto; }
  .cta-final.dark{ background:var(--negro); }
  .cta-final.dark h2{ color:var(--blanco); }
  .cta-final.dark p.cta-sub{ color:var(--gris-cla); }

  .form-card{
    background:var(--blanco); border:1px solid var(--gris-cla); border-radius:6px;
    padding:30px 24px; max-width:720px; margin:0 auto; text-align:left;
  }
  @media(min-width:768px){ .form-card{ padding:44px 48px; } }
  .form-card label.f-label{
    display:block; font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
    color:var(--gris-osc); margin-bottom:8px;
  }
  .f-row{ display:grid; grid-template-columns:1fr; gap:18px; margin-bottom:18px; }
  @media(min-width:640px){ .f-row.cols-2{ grid-template-columns:1fr 1fr; } }
  .form-card input[type=text], .form-card input[type=tel], .form-card input[type=email], .form-card textarea{
    width:100%; font-family:var(--body); font-size:14px; color:var(--negro);
    border:1px solid var(--gris-cla); border-radius:3px; padding:14px 16px; background:var(--blanco);
    transition:border-color .2s ease;
  }
  .form-card input:focus, .form-card textarea:focus{ border-color:var(--negro); outline:none; }
  .form-card textarea{ min-height:110px; resize:vertical; }

  /* Selector de perfil empresa / persona (PDF §9: enrutamiento de leads) */
  .seg{
    display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--negro);
    border-radius:3px; overflow:hidden; margin-bottom:4px;
  }
  .seg-opt{ position:relative; }
  .seg-opt input{ position:absolute; opacity:0; inset:0; cursor:pointer; }
  .seg-opt span{
    display:block; text-align:center; padding:14px 10px; font-size:12px; font-weight:600;
    letter-spacing:.1em; text-transform:uppercase; color:var(--negro); background:var(--blanco);
    transition:all .2s ease; cursor:pointer;
  }
  .seg-opt input:checked + span{ background:var(--negro); color:var(--blanco); }
  .seg-opt input:focus-visible + span{ outline:2px solid var(--negro); outline-offset:-3px; }
  .seg-hint{ font-size:12px; color:var(--gris-med); margin-bottom:18px; }

  .f-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--gris-osc); margin:6px 0 24px; }
  .f-consent input{ margin-top:3px; }
  .form-card .btn{ width:100%; }
  .form-ok{
    text-align:center; padding:28px 10px;
  }
  .form-ok h3{ font-family:var(--body); font-weight:600; font-size:17px; letter-spacing:0; margin-bottom:10px; }
  .form-ok p{ font-size:14px; color:var(--gris-osc); }

  /* Datos de contacto por vertical (vista Contacto) */
  .contact-cards{ display:grid; grid-template-columns:1fr; gap:20px; margin-top:48px; }
  @media(min-width:768px){ .contact-cards{ grid-template-columns:1fr 1fr; } }
  .contact-card{ border:1px solid var(--gris-cla); border-radius:6px; padding:30px 26px; background:var(--blanco); text-align:left; }
  .contact-card h3{ font-family:var(--body); font-weight:600; font-size:15px; letter-spacing:.04em; text-transform:uppercase; margin-bottom:16px; }
  .contact-card li{ font-size:14px; color:var(--gris-osc); margin-bottom:10px; }

  /* ==========================================================================
     20. FOOTER
     ========================================================================== */
  footer{ background:var(--blanco); border-top:1px solid var(--gris-cla); padding:64px 0 28px; }
  .foot-grid{ display:grid; grid-template-columns:1fr; gap:36px; margin-bottom:48px; }
  @media(min-width:768px){ .foot-grid{ grid-template-columns:1.4fr 1fr 1fr 1fr; gap:24px; } }
  .foot-brand .logo{ margin-bottom:14px; display:inline-block; }
  .foot-brand p{ font-size:13px; color:var(--gris-osc); max-width:250px; }
  .foot-col h5{ font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px; color:var(--gris-osc); }
  .foot-col li{ margin-bottom:11px; font-size:14px; }
  .foot-col a:hover{ color:var(--gris-osc); }
  .foot-bottom{ border-top:1px solid var(--gris-cla); padding-top:26px; display:flex; flex-direction:column; gap:16px; font-size:12px; color:var(--gris-med); }
  @media(min-width:768px){ .foot-bottom{ flex-direction:row; justify-content:space-between; align-items:center; } }
  .foot-social{ display:flex; gap:16px; }
  .foot-legal{ font-size:11.5px; color:var(--gris-med); max-width:820px; margin-top:18px; }

  /* ==========================================================================
     21. ELEMENTOS FLOTANTES (conservados)
     ========================================================================== */
  .wa-float{
    position:fixed; right:22px; bottom:96px; width:54px; height:54px; border-radius:50%; background:var(--negro);
    display:flex; align-items:center; justify-content:center; z-index:60; box-shadow:0 6px 20px rgba(0,0,0,.25); cursor:pointer;
  }
  @media(min-width:1024px){ .wa-float{ bottom:22px; } }
  .mobile-cta-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:55; background:var(--blanco); border-top:1px solid var(--gris-cla);
    display:flex; gap:10px; padding:12px 16px; box-shadow:0 -4px 16px rgba(0,0,0,.06);
  }
  .mobile-cta-bar .btn-primary{ flex:1; padding:14px; font-size:12px; }
  .mobile-cta-bar .wa-btn{ width:48px; height:48px; border:1px solid var(--negro); border-radius:3px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  @media(min-width:1024px){ .mobile-cta-bar{display:none;} }
  body{ padding-bottom:78px; }
  @media(min-width:1024px){ body{ padding-bottom:0; } }

  /* ==========================================================================
     22. AÑADIDOS DEL TEMA
     ========================================================================== */
  .cap-skip-link{
    position:absolute; left:8px; top:-48px; z-index:100; background:var(--negro); color:var(--blanco);
    padding:12px 18px; border-radius:3px; font-family:var(--body); font-size:13px; font-weight:600;
    text-decoration:none; transition:top .15s ease;
  }
  .cap-skip-link:focus{ top:8px; }

  /* --------------------------------------------------------------------------
     .reveal — NEUTRALIZACIÓN PROVISIONAL (la retira la fase 2)

     La sección 1 trae del mockup `.reveal{opacity:0; transform:translateY(22px)}`
     y `.reveal.in{opacity:1; transform:none}`. En el mockup, la clase `.in` la
     añadía un IntersectionObserver al entrar el bloque en pantalla. Este tema
     todavía no empaqueta JavaScript (la animación llega en la fase 2), así que
     sin esta regla TODO lo marcado con `.reveal` —que es casi todo el contenido
     de las cinco páginas— se serviría con opacidad 0: no sería «falta la
     animación», sería contenido invisible.

     Esta regla no toca las secciones 1-21: las anula desde la 22, que es donde
     el tema puede escribir. Cuando la fase 2 añada el observador, basta con
     BORRAR ESTE BLOQUE COMPLETO (y nada más): las plantillas ya traen las
     clases `.reveal` que el observador debe buscar, y `.reveal.in` sigue
     intacta en la sección 1 esperándolo. Se conserva la `transition` heredada
     para que el estado final sea idéntico al que producirá la animación.
     -------------------------------------------------------------------------- */
  .reveal{ opacity:1; transform:none; }

  /* --------------------------------------------------------------------------
     FAQ — el `.faq-q` es un <button> real y el <h3> lo envuelve

     Dos desviaciones de accesibilidad respecto del mockup (ver los docblocks de
     page-empresas.php y page-personas.php) obligan a completar aquí lo que el
     CSS del mockup daba por hecho:

     1) El mockup abría la pregunta con `<div class="faq-q">` y un listener de
        click. La plantilla usa `<button>`, y un `<button>` sin estilar hereda
        del navegador fondo gris, borde, tipografía del sistema y texto
        centrado. Las declaraciones de abajo le devuelven el aspecto del
        mockup: una fila transparente separada solo por el borde inferior de
        `.faq-item`. El resto (display:flex, gap, padding, cursor) ya se lo da
        `.faq-q` en la sección 17.

     2) El `<h3>` pasó de estar DENTRO del botón a ENVOLVERLO, porque el modelo
        de contenido de `<button>` es phrasing content y porque el nombre
        accesible de un botón aplana a sus descendientes (el h3 perdía su rol y
        la pregunta desaparecía del esquema de encabezados). Por eso la regla
        `.faq-q h3` de la sección 17 ya no encaja con nada: sus declaraciones se
        replican aquí sobre el h3 que envuelve, y el botón las hereda gracias a
        `font:inherit`.

     3) `.faq-plus` pasó de `<div>` a `<span>` por el mismo motivo (un `<div>`
        tampoco es válido dentro de un botón); recupera aquí su modo de caja de
        bloque, del que dependen su `width`/`height` y sus pseudoelementos.
     -------------------------------------------------------------------------- */
  .faq-q{
    width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left;
    -webkit-appearance:none; appearance:none;
  }
  /* El foco visible del mockup (sección 1) enumera `.btn, a, input, select,
     textarea`, pero no `button` suelto: sin esto, quitar el estilo del
     navegador se llevaría por delante también su anillo de foco. */
  .faq-q:focus-visible{ outline:2px solid var(--negro); outline-offset:2px; }
  .faq-item h3{ font-family:var(--body); font-weight:500; font-size:15px; letter-spacing:0; }
  @media(min-width:1024px){ .faq-item h3{ font-size:16px; } }
  .faq-plus{ display:block; }

  /* ==========================================================================
     23. FOTOGRAFÍAS
     Las fotografías se cargan desde Ajustes → CAP Abogados. El contenedor ya
     reserva su espacio con `aspect-ratio`, así que la imagen solo tiene que
     llenarlo. Cuando una casilla está vacía, la sección colapsa: las rejillas
     de dos columnas vuelven a una sola para que el texto no quede huérfano en
     la mitad de una composición pensada para dos.

     Los cinco huecos de `.hero-grid` y `.auth-grid` no son hijos directos de
     su rejilla: van dentro de un `<div class="reveal">` que queda fuera del
     condicional de PHP. Con la casilla vacía ese envoltorio sigue siendo el
     segundo hijo —vacío, de altura cero—, así que la rejilla mantiene dos
     filas y el `gap` dejaría una banda muerta entre el texto y el borde
     inferior. Por eso estas dos anulan también el `gap`; `.servicio-card` y
     `.financia` no lo necesitan, porque ahí el hueco sí es hijo directo y
     desaparece con él.

     No hacen falta anulaciones dentro de media queries: `.X.sin-foto` tiene
     dos clases y gana por especificidad a `.X`, que tiene una. Las consultas
     de medios no aportan especificidad, así que la regla base manda en
     cualquier ancho de ventana.
     ========================================================================== */
  .hero-photo img,
  .bi-photo img,
  .auth-photo img,
  .servicio-photo img,
  .financia-photo img{
    display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit;
  }
  .hero-grid.sin-foto{ grid-template-columns:1fr; gap:0; }
  .auth-grid.sin-foto{ grid-template-columns:1fr; gap:0; }
  .servicio-card.sin-foto{ grid-template-columns:1fr; }
  .financia.sin-foto{ grid-template-columns:1fr; }