/* ==========================================================================
   Defensa Experta — home minimalista tipo "documento" (2025)
   Se carga solo desde landing_focus.html. No afecta a otras vistas.
   Sube especificidad con "html body" para ganarle al tema oscuro de base_dark.
   ========================================================================== */

html body{
  --ink:#15191e;
  --muted:#6b7280;
  --paper:#fbfbf8;
  --line:#e7e6df;
  --accent:#b5540e;
  --ok:#0f7a4d;
  --maxw:640px;

  font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  scroll-behavior:smooth;
}
html{scroll-padding-top:8px}

/* ---- reset de contenedores del layout base ---- */
html body .wrap{max-width:none; padding:0}
html body main{min-height:0}

/* ---- barra de progreso de lectura ---- */
.readbar{position:fixed; left:0; top:0; height:2px; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:var(--accent); z-index:60; transition:transform .1s linear}

/* ---- header (markup viene de base_dark.html) ---- */
html body header{
  position:static;
  background:var(--paper);
  border:0; border-bottom:1px solid var(--line); border-radius:0;
  box-shadow:none; margin:0; padding:16px 22px; align-items:center;
}
html body .brand b{font-size:14px; letter-spacing:.02em; color:var(--ink); font-weight:600}
html body .brand small{font-size:11.5px; color:var(--muted)}
html body .top-cta{display:flex; gap:14px; align-items:center}
html body .top-cta .btn[data-evt="form_top"]{display:none}
html body .top-cta .btn{border:0; background:none; padding:0; min-height:0; border-radius:0;
  font-weight:600; font-size:13.5px; color:var(--ink); text-transform:none}
html body .top-cta .btn:hover{background:none; color:var(--accent)}
html body .top-cta .btn.ok{color:var(--ok)}
html body .main-nav,
html body .phone-quick,
html body #stickyBar{display:none !important}

/* ---- páginas del "documento" ---- */
.page{
  display:flex; flex-direction:column; justify-content:flex-start;
  padding:88px 22px 72px;
  border-top:1px solid var(--line);
  position:relative;
}
.page:first-of-type{border-top:0; padding-top:60px}
.page > .inner{width:100%; max-width:var(--maxw); margin:0 auto}
.folio{
  position:absolute; top:34px; right:22px;
  font-size:11px; letter-spacing:.18em; color:var(--muted); font-weight:600;
}
.folio b{color:var(--accent)}

/* ---- tipografía ---- */
.kicker{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:700; margin:0 0 20px}
html body h1{
  font-family:"Fraunces","Georgia",serif; font-weight:430;
  font-size:clamp(34px,7vw,58px); line-height:1.08; letter-spacing:-.015em;
  margin:0 0 22px; color:var(--ink);
}
html body h2{
  font-family:"Fraunces","Georgia",serif; font-weight:430;
  font-size:clamp(26px,4.4vw,36px); line-height:1.15; letter-spacing:-.01em;
  margin:0 0 26px; color:var(--ink);
}
.lead{font-size:clamp(16px,2.2vw,18px); color:var(--muted); margin:0 0 30px; max-width:52ch}
.fine{font-size:12.5px; color:var(--muted); margin:22px 0 0; max-width:48ch}
html body a{color:var(--accent); text-decoration:none}
html body a:hover{text-decoration:underline}

/* ---- botones ---- */
html body .btn{
  --b:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:0 22px; border-radius:2px;
  border:1px solid var(--b); background:transparent; color:var(--b);
  font-weight:600; font-size:14px; letter-spacing:.01em; text-decoration:none;
  transition:background .15s ease, color .15s ease, border-color .15s ease; transform:none;
}
html body .btn:hover{background:var(--ink); color:var(--paper); transform:none; text-decoration:none}
html body .btn.primary{background:var(--ink); color:var(--paper)}
html body .btn.primary:hover{background:transparent; color:var(--ink)}
html body .btn.ok,html body .btn.wa{--b:var(--ok); color:var(--ok)}
html body .btn.ok:hover,html body .btn.wa:hover{background:var(--ok); color:#fff}
html body .btn.block{width:100%}
.actions{display:flex; flex-wrap:wrap; gap:12px}

/* ---- listas tipo índice ---- */
.index{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.index li{
  padding:20px 0; border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:34px 1fr; gap:16px; align-items:baseline;
}
.index .n{font-size:12px; color:var(--accent); font-weight:700; letter-spacing:.1em}
.index h3{margin:0 0 4px; font-size:16px; font-weight:600; color:var(--ink)}
.index p{margin:0; font-size:14px; color:var(--muted)}

/* ---- ficha del estudio ---- */
.facts{list-style:none; margin:0; padding:0; border-top:1px solid var(--line)}
.facts li{padding:16px 0; border-bottom:1px solid var(--line); font-size:14.5px}
.facts b{display:block; font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; font-weight:700}

/* ---- formulario ---- */
.lead-card{border:1px solid var(--line); background:#fff; border-radius:3px}
.lead-card .lc-head{padding:20px 20px 0}
.lead-card .lc-head b{display:block; font-size:15px; color:var(--ink)}
.lead-card .lc-head span{font-size:13px; color:var(--muted)}
html body .lead-card form{padding:18px 20px 20px; display:grid; gap:14px}
html body .lead-card label{font-size:12px; font-weight:600; color:var(--ink); display:block; margin:0 0 6px; letter-spacing:.01em}
html body .lead-card input,
html body .lead-card textarea{
  width:100%; border:0; border-bottom:1px solid #cfcfc6; border-radius:0;
  padding:9px 2px; font:inherit; color:var(--ink); background:transparent;
}
html body .lead-card input:focus,
html body .lead-card textarea:focus{outline:none; border-bottom-color:var(--accent); box-shadow:0 1px 0 0 var(--accent)}
html body .lead-card textarea{min-height:70px; resize:vertical}
.fieldrow{display:grid; gap:14px; grid-template-columns:1fr}
.field-hint{font-size:11.5px; color:var(--muted); margin-top:4px}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}
.consent{display:flex; gap:9px; align-items:flex-start; font-size:12px; color:var(--muted)}
html body .consent input{width:auto; margin-top:3px; border-bottom:0}
.lc-alt{display:flex; gap:10px; flex-wrap:wrap}
.lc-alt .btn{flex:1; min-width:120px}
.lc-legal{font-size:11.5px; color:var(--muted); border-top:1px solid var(--line); padding:14px 20px}

/* ---- FAQ ---- */
.faq{border-top:1px solid var(--line); margin-top:14px}
details.q{border-bottom:1px solid var(--line)}
details.q summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:600; font-size:14.5px;
  display:flex; justify-content:space-between; gap:12px; color:var(--ink)}
details.q summary::-webkit-details-marker{display:none}
details.q summary::after{content:"+"; color:var(--accent)}
details.q[open] summary::after{content:"\2013"}
details.q p{margin:0 0 16px; color:var(--muted); font-size:14px}

/* ---- flash / cookie / footer del layout base ---- */
html body .flash{background:#fff; border:1px solid var(--line); color:var(--ink); border-radius:2px}
html body .cookie{
  left:0; right:0; bottom:0; max-width:none; margin:0; border:0; border-top:1px solid var(--line);
  border-radius:0; background:color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter:blur(6px);
  box-shadow:none; padding:14px 22px;
}
html body .cookie p{color:var(--muted); font-size:12px}
html body .cookie .btn{min-height:38px; font-size:13px}
html body .footer-bottom{color:var(--muted); font-size:12px; padding:40px 22px 60px; border-top:1px solid var(--line)}
html body .sep{display:none}
html body .footer-links{gap:14px}
html body .footer-links a{border:0; background:none; padding:0; border-radius:0; color:var(--muted); font-size:12px}
html body .footer-links a:hover{color:var(--accent)}
html body .toast{border-radius:2px}

/* ---- animaciones de entrada ---- */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1; transform:none}
.reveal.d1{transition-delay:.08s}
.reveal.d2{transition-delay:.16s}
.reveal.d3{transition-delay:.24s}
.reveal.d4{transition-delay:.32s}

@media (min-width:680px){
  .fieldrow.two{grid-template-columns:1fr 1fr}
  .page{padding:112px 22px 96px}
  .page:first-of-type{padding-top:84px}
}
@media (prefers-reduced-motion:reduce){
  html body,html{scroll-behavior:auto}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important}
  .readbar{display:none}
}