/* Maquetas de plantillas para Firma Legal Boutique.
   Colores, tipografías y medidas leídos de su web el 2026-11-13
   (assets/index-BG30c-UP.css): no se inventa paleta. */
:root{
  --cream:#faf7f4; --parchment:#f5f0eb; --linen:#ede7df; --sand:#d9cfc4;
  --umber:#775f47; --taupe:#6b5a49; --bark:#5c4a38; --espresso:#2e2118;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
  --ancho:1180px; --texto:680px; --hueco:clamp(56px,7vw,104px);
}
*{box-sizing:border-box}
html{background:var(--parchment);scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-weight:300;color:var(--bark);font-size:16px;line-height:1.75}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--espresso);line-height:1.15;margin:0}
h1{font-size:clamp(34px,4.6vw,56px);font-weight:300}
h2{font-size:clamp(26px,2.8vw,34px)}
h3{font-size:22px}
p{margin:0 0 1.1em}
.caja{max-width:var(--ancho);margin:0 auto;padding:0 24px}
.seccion{padding:var(--hueco) 0}
.clara{background:var(--cream)} .lino{background:var(--linen)}
.oscura{background:var(--espresso);color:var(--sand)}
.oscura h1,.oscura h2,.oscura h3{color:var(--cream)}
.raya{width:48px;height:1px;background:var(--umber);margin:26px 0}
.oscura .raya{background:var(--sand);opacity:.5}
.sobre{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);margin:0 0 14px}
.oscura .sobre{color:var(--sand)}

/* Aviso de maqueta: no forma parte del diseño */
.maqueta{background:#fff8d6;color:#5a4a00;font:400 13px/1.5 var(--sans);padding:10px 24px;border-bottom:1px solid #e6d98a}
.maqueta a{margin-right:14px}
.nota{display:inline-block;background:#fff8d6;color:#5a4a00;font:400 11px/1.4 var(--sans);letter-spacing:.04em;padding:3px 8px;margin:0 0 10px;border:1px dashed #cdbb55}
.porescribir{color:var(--umber);font-style:italic}

/* Cabecera y pie, como los de su web */
.cab{background:var(--parchment);border-bottom:1px solid var(--sand)}
.cab .caja{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px}
.logo{font-family:var(--serif);font-size:30px;font-weight:300;letter-spacing:.14em;color:var(--espresso);text-decoration:none}
.cab nav{display:flex;gap:28px;align-items:center}
.cab nav a{font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;color:var(--taupe);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.cab nav a:hover,.cab nav a[aria-current]{color:var(--espresso);border-color:var(--umber)}
.pie{background:var(--espresso);color:var(--sand);padding:56px 0;font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.pie .logo{color:var(--cream)}

/* Botones y enlaces de acción */
.boton{display:inline-block;background:var(--umber);color:var(--cream);font:400 11px/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;text-decoration:none;padding:17px 30px;border:1px solid var(--umber);transition:background .25s,color .25s}
.boton:hover{background:var(--espresso);border-color:var(--espresso)}
.boton:focus-visible,.enlace:focus-visible,a:focus-visible{outline:2px solid var(--umber);outline-offset:3px}
.boton.hueco{background:transparent;color:var(--umber)}
.boton.hueco:hover{background:var(--umber);color:var(--cream)}
.oscura .boton{background:var(--cream);border-color:var(--cream);color:var(--espresso)}
.oscura .boton:hover{background:var(--sand);border-color:var(--sand)}
.enlace{font-size:11px;letter-spacing:.2em;text-transform:uppercase;text-decoration:none;color:var(--umber);border-bottom:1px solid var(--umber);padding-bottom:6px;transition:color .2s,border-color .2s}
.enlace:hover{color:var(--espresso);border-color:var(--espresso)}
.oscura .enlace{color:var(--sand);border-color:var(--sand)}
.acciones{display:flex;flex-wrap:wrap;gap:22px;align-items:center;margin-top:30px}

/* Pasos numerados y listas, como en su web */
.pasos{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--sand)}
.pasos li{display:flex;gap:26px;padding:24px 0;border-bottom:1px solid var(--sand)}
.pasos .n{font-family:var(--serif);font-size:30px;line-height:1;color:var(--sand);min-width:38px}
.pasos h3{margin-bottom:6px}
.puntos{list-style:none;margin:20px 0;padding:0}
.puntos li{padding:9px 0 9px 22px;position:relative}
.puntos li::before{content:"";position:absolute;left:0;top:1.25em;width:8px;height:1px;background:var(--umber)}

/* Preguntas frecuentes */
.faq{border-top:1px solid var(--sand);margin-top:28px}
.faq details{border-bottom:1px solid var(--sand)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:22px 0;font-family:var(--serif);font-size:22px;color:var(--espresso)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--sans);font-weight:300;color:var(--umber);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{max-width:var(--texto);padding-bottom:20px}

/* Fuentes y fecha */
.fuentes{font-size:12.5px;line-height:1.6;border-top:1px solid var(--sand);padding-top:20px;margin-top:48px;color:var(--taupe)}

/* Quién lleva el asunto / caja de autor */
.autora{display:grid;grid-template-columns:132px 1fr;gap:32px;align-items:start}
.autora img{width:132px;height:164px;object-fit:cover;filter:saturate(.9)}
.autora .nombre{font-family:var(--serif);font-size:28px;color:var(--espresso);line-height:1.1;margin:0 0 4px}
.autora .cargo{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--umber);margin:0 0 14px}
.datos{display:flex;flex-wrap:wrap;gap:8px 26px;margin:14px 0 0;padding:0;list-style:none;font-size:13px}
.datos li{border-left:1px solid var(--umber);padding-left:10px}

@media (max-width:860px){
  .cab nav a:not(.boton){display:none}
  .autora{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Ajustes tras revisar las capturas (2026-11-13) */
.cab nav a.boton{color:var(--cream);padding:14px 22px;border:1px solid var(--umber)}
.cab nav a.boton:hover{color:var(--cream);border-color:var(--espresso)}
.oscura .ficha .boton{background:var(--umber);border-color:var(--umber);color:var(--cream)}
.oscura .ficha .boton:hover{background:var(--espresso);border-color:var(--espresso)}
.oscura .porescribir{color:var(--sand)}