/* ==========================================================================
   ESPACIO REFORMADO, S.L. — espareform.click
   Hoja de estilos principal
   ========================================================================== */

:root{
  --ink:#0d1b2a;
  --ink-2:#13293d;
  --steel:#52657b;
  --line:#dfe4ea;
  --bg:#ffffff;
  --bg-soft:#f4f6f8;
  --bg-dark:#0d1b2a;
  --accent:#e8a317;
  --accent-dark:#c98a0b;
  --accent-soft:#fdf4e1;
  --ok:#1f7a53;
  --err:#b3261e;
  --radius:10px;
  --radius-lg:16px;
  --shadow:0 1px 2px rgba(13,27,42,.06), 0 8px 24px rgba(13,27,42,.07);
  --shadow-sm:0 1px 3px rgba(13,27,42,.08);
  --wrap:1160px;
  --font:"Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--bg);
  overflow-x:hidden;
}

img{max-width:100%; height:auto; display:block}

a{color:var(--ink); text-decoration:underline; text-underline-offset:3px}
a:hover{color:var(--accent-dark)}

h1,h2,h3,h4{
  color:var(--ink);
  line-height:1.2;
  margin:0 0 .6em;
  font-weight:700;
  letter-spacing:-.015em;
}
h1{font-size:clamp(2rem,4.2vw,3rem)}
h2{font-size:clamp(1.5rem,2.8vw,2.1rem)}
h3{font-size:1.18rem}
h4{font-size:1.02rem}
p{margin:0 0 1.1em}
ul,ol{margin:0 0 1.1em; padding-left:1.25em}
li{margin-bottom:.45em}
small{font-size:.86rem}
hr{border:0; border-top:1px solid var(--line); margin:2.5rem 0}

.wrap{width:100%; max-width:var(--wrap); margin:0 auto; padding:0 22px}
.narrow{max-width:820px}

.section{padding:72px 0}
.section--soft{background:var(--bg-soft)}
.section--tight{padding:48px 0}

.eyebrow{
  display:inline-block;
  font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent-dark);
  margin-bottom:.8rem;
}
.lead{font-size:1.1rem; color:var(--steel)}
.muted{color:var(--steel)}
.center{text-align:center}

/* ---------- Skip link ---------- */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--accent); color:var(--ink);
  padding:12px 18px; font-weight:700; border-radius:0 0 var(--radius) 0;
}
.skip:focus{left:0}

:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

/* ---------- Barra superior ---------- */
.topbar{
  background:var(--ink);
  color:#c9d4e0;
  font-size:.85rem;
}
.topbar .wrap{
  display:flex; flex-wrap:wrap; gap:8px 26px;
  align-items:center; justify-content:flex-end;
  min-height:40px;
}
.topbar a{color:#fff; text-decoration:none}
.topbar a:hover{color:var(--accent)}
.topbar .tb-item{display:inline-flex; align-items:center; gap:7px}

/* ---------- Cabecera ---------- */
.header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(160%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:78px;
}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none}
.brand__mark{
  width:42px; height:42px; flex:0 0 42px;
  border-radius:9px; background:var(--ink);
  display:grid; place-items:center;
}
.brand__mark span{
  color:var(--accent); font-weight:800; font-size:1.05rem; letter-spacing:-.04em;
}
.brand__name{display:flex; flex-direction:column; line-height:1.15}
.brand__name b{color:var(--ink); font-size:1.02rem; letter-spacing:-.01em}
.brand__name small{color:var(--steel); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase}

.nav{display:flex; align-items:center; gap:4px}
.nav a{
  text-decoration:none; color:var(--ink-2);
  padding:10px 14px; border-radius:8px;
  font-size:.96rem; font-weight:600;
}
.nav a:hover{background:var(--bg-soft); color:var(--ink)}
.nav a[aria-current="page"]{color:var(--accent-dark); background:var(--accent-soft)}

.nav-toggle{
  display:none; border:1px solid var(--line); background:#fff;
  width:46px; height:44px; border-radius:9px; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav-toggle span{
  display:block; width:20px; height:2px; background:var(--ink);
  position:relative;
}
.nav-toggle span::before,.nav-toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink);
}
.nav-toggle span::before{top:-6px}
.nav-toggle span::after{top:6px}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:var(--radius);
  font-weight:700; font-size:.97rem; text-decoration:none;
  border:1.5px solid transparent; cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--accent); color:var(--ink); border-color:var(--accent)}
.btn--primary:hover{background:var(--accent-dark); border-color:var(--accent-dark); color:var(--ink)}
.btn--ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--ink); color:var(--ink)}
.btn--light{background:#fff; color:var(--ink); border-color:#fff}
.btn--outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)}
.btn--outline-light:hover{color:#fff; border-color:#fff}
.btn-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.4rem}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(232,163,23,.20), transparent 60%),
    linear-gradient(160deg, #0d1b2a 0%, #13293d 60%, #1b3a56 100%);
  color:#e9eef4;
  padding:84px 0 92px;
  position:relative; overflow:hidden;
}
.hero::after{
  content:""; position:absolute; inset:0;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.6), transparent 70%);
  pointer-events:none;
}
.hero .wrap{position:relative; z-index:1}
.hero h1{color:#fff; max-width:17ch}
.hero p{color:#c5d2e0; font-size:1.12rem; max-width:62ch}
.hero .eyebrow{color:var(--accent)}

.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.hero-card{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius-lg);
  padding:28px;
}
.hero-card h2{color:#fff; font-size:1.12rem; margin-bottom:1rem}
.hero-card dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px; font-size:.93rem}
.hero-card dt{color:#93a6ba}
.hero-card dd{margin:0; color:#fff; font-weight:600}

/* ---------- Cabecera de página interior ---------- */
.pagehead{
  background:linear-gradient(160deg,#0d1b2a 0%,#16314a 100%);
  color:#e9eef4; padding:52px 0 56px;
}
.pagehead h1{color:#fff; margin-bottom:.35em}
.pagehead p{color:#c0cddb; max-width:68ch; margin:0}

.breadcrumb{font-size:.84rem; margin-bottom:1.1rem; color:#9fb0c2}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0}
.breadcrumb li{margin:0; display:flex; gap:8px; align-items:center}
.breadcrumb li+li::before{content:"›"; color:#6b7f94}
.breadcrumb a{color:#cfdae6}
.breadcrumb [aria-current]{color:var(--accent)}

/* ---------- Rejillas y tarjetas ---------- */
.grid{display:grid; gap:24px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.card{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px;
  box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:.5em}
.card p:last-child{margin-bottom:0}
.card--link{text-decoration:none; display:block; transition:border-color .15s, box-shadow .15s, transform .15s}
.card--link:hover{border-color:#c6cfda; box-shadow:var(--shadow); transform:translateY(-2px)}

.icon{
  width:46px; height:46px; border-radius:11px;
  background:var(--accent-soft); color:var(--accent-dark);
  display:grid; place-items:center; margin-bottom:16px;
}
.icon svg{width:24px; height:24px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}

.more{
  display:inline-flex; align-items:center; gap:7px;
  font-weight:700; color:var(--accent-dark); text-decoration:none; font-size:.94rem;
  margin-top:.4rem;
}
.more::after{content:"→"; transition:transform .15s}
.card--link:hover .more::after{transform:translateX(3px)}

/* lista de comprobación */
.checklist{list-style:none; padding:0; margin:0}
.checklist li{
  position:relative; padding-left:30px; margin-bottom:.7em;
}
.checklist li::before{
  content:""; position:absolute; left:0; top:.45em;
  width:16px; height:16px; border-radius:50%;
  background:var(--accent-soft);
  border:2px solid var(--accent);
}

/* etiquetas */
.tags{display:flex; flex-wrap:wrap; gap:9px; padding:0; margin:1.2rem 0 0; list-style:none}
.tags li{
  margin:0; font-size:.85rem; font-weight:600;
  background:var(--bg-soft); border:1px solid var(--line);
  color:var(--ink-2); padding:7px 13px; border-radius:100px;
}

/* pasos */
.steps{counter-reset:step; list-style:none; padding:0; margin:0; display:grid; gap:20px}
.steps li{
  counter-increment:step; position:relative; padding-left:62px; margin:0;
}
.steps li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute; left:0; top:0;
  width:44px; height:44px; border-radius:12px;
  background:var(--ink); color:var(--accent);
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
}
.steps h3{margin-bottom:.25em}
.steps p{margin:0; color:var(--steel)}

/* datos / tabla de reseñas */
.datatable{width:100%; border-collapse:collapse; font-size:.96rem}
.datatable th,.datatable td{
  text-align:left; padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top;
}
.datatable th{width:40%; color:var(--steel); font-weight:600}
.datatable td{font-weight:600; color:var(--ink)}
.datatable tr:last-child th,.datatable tr:last-child td{border-bottom:0}
.table-wrap{overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg)}

/* franja CTA */
.cta{
  background:linear-gradient(135deg,#0d1b2a,#1b3a56);
  color:#fff; border-radius:var(--radius-lg); padding:44px;
  display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between;
}
.cta h2{color:#fff; margin:0 0 .3em}
.cta p{color:#c0cddb; margin:0; max-width:56ch}

/* FAQ */
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:12px;
}
.faq summary{
  cursor:pointer; font-weight:700; color:var(--ink); list-style:none;
  display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-dark); font-size:1.4rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{margin-bottom:.7em}
.faq p:last-child{margin-bottom:0}

/* ---------- Formulario ---------- */
.form-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:start}
.formbox{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm);
}
.field{margin-bottom:18px}
.field label{display:block; font-weight:600; font-size:.92rem; margin-bottom:7px; color:var(--ink)}
.req{color:var(--err)}
.field input,.field select,.field textarea{
  width:100%; font:inherit; font-size:.97rem; color:var(--ink);
  padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--radius);
  background:#fff; transition:border-color .15s;
}
.field textarea{min-height:150px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.field .hint{font-size:.82rem; color:var(--steel); margin-top:6px; display:block}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:18px}
.check{display:flex; gap:11px; align-items:flex-start; font-size:.88rem; color:var(--steel); line-height:1.5}
.check input{width:18px; height:18px; flex:0 0 18px; margin-top:2px; accent-color:var(--accent-dark)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.alert{padding:15px 18px; border-radius:var(--radius); margin-bottom:22px; font-size:.94rem}
.alert--ok{background:#e8f5ef; border:1px solid #b9ded0; color:var(--ok)}
.alert--err{background:#fdeceb; border:1px solid #f3c6c3; color:var(--err)}

.infobox{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:28px;
}
.infobox h3{margin-top:0}
.infolist{list-style:none; padding:0; margin:0}
.infolist li{display:flex; gap:13px; margin-bottom:17px; align-items:flex-start}
.infolist li:last-child{margin-bottom:0}
.infolist svg{
  width:20px; height:20px; flex:0 0 20px; margin-top:3px;
  stroke:var(--accent-dark); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
}
.infolist b{display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--steel); font-weight:700}
.infolist a{text-decoration:none; font-weight:600}
.infolist a:hover{text-decoration:underline}

/* ---------- Contenido legal ---------- */
.legal{max-width:860px}
.legal h2{font-size:1.35rem; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line)}
.legal h2:first-of-type{border-top:0; padding-top:0; margin-top:1rem}
.legal h3{margin-top:1.6rem; font-size:1.05rem}
.legal ul{padding-left:1.2em}
.toc{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 26px; margin-bottom:2rem;
}
.toc h2{font-size:.82rem!important; text-transform:uppercase; letter-spacing:.1em; color:var(--steel); margin:0 0 .8em!important; border:0!important; padding:0!important}
.toc ol{margin:0; padding-left:1.2em; columns:2; column-gap:30px}
.toc li{margin-bottom:.4em; font-size:.92rem; break-inside:avoid}
.updated{font-size:.88rem; color:var(--steel); margin-bottom:1.6rem}

/* ---------- Pie ---------- */
.footer{background:var(--bg-dark); color:#9fb0c2; padding:64px 0 0; font-size:.93rem}
.footer a{color:#d7e0e9; text-decoration:none}
.footer a:hover{color:var(--accent)}
.footer h4{color:#fff; font-size:.82rem; text-transform:uppercase; letter-spacing:.11em; margin-bottom:1.1em}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:.6em}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
.footer .brand__name b{color:#fff}
.footer .brand__name small{color:#7e93a8}
.footer-about p{margin-top:1.2em; max-width:42ch; color:#9fb0c2}

.legalbox{
  margin-top:52px; padding:26px 0;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px 28px;
  font-size:.85rem;
}
.legalbox div b{display:block; color:#7e93a8; font-weight:700; text-transform:uppercase; letter-spacing:.07em; font-size:.72rem; margin-bottom:4px}
.legalbox div span{color:#e4eaf0}

.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:20px 0 26px; margin-top:0;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between;
  font-size:.84rem; color:#7e93a8;
}
.footer-bottom nav{display:flex; flex-wrap:wrap; gap:8px 20px}

/* ---------- Aviso de cookies ---------- */
.cookie{
  position:fixed; left:18px; right:18px; bottom:18px; z-index:150;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  box-shadow:0 12px 40px rgba(13,27,42,.22);
  padding:22px 24px; max-width:640px; margin:0 auto;
  display:none;
}
.cookie.is-open{display:block}
.cookie p{font-size:.9rem; margin-bottom:1rem; color:var(--steel)}
.cookie strong{color:var(--ink)}
.cookie .btn-row{margin:0}
.cookie .btn{padding:10px 18px; font-size:.9rem}

/* ---------- Utilidades ---------- */
.mt0{margin-top:0}
.mb0{margin-bottom:0}
.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}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr; gap:34px}
  .form-grid{grid-template-columns:1fr; gap:30px}
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr; gap:34px}
  .legalbox{grid-template-columns:1fr 1fr}
}

@media (max-width:760px){
  body{font-size:16px}
  .section{padding:54px 0}
  .nav-toggle{display:flex}
  .nav{
    position:absolute; top:100%; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line);
    flex-direction:column; align-items:stretch; gap:0;
    padding:10px 16px 18px; display:none;
    box-shadow:0 14px 30px rgba(13,27,42,.10);
  }
  .nav.is-open{display:flex}
  .nav a{padding:13px 12px; border-radius:8px}
  .header .wrap{position:relative; min-height:68px}
  .topbar .wrap{justify-content:center; font-size:.8rem; gap:6px 16px; padding-top:7px; padding-bottom:7px}
  .grid--2,.grid--3,.grid--4{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
  .cta{padding:30px; flex-direction:column; align-items:flex-start}
  .toc ol{columns:1}
  .footer-grid{grid-template-columns:1fr}
  .legalbox{grid-template-columns:1fr}
  .hero{padding:60px 0 66px}
  .formbox,.infobox{padding:24px}
}

@media print{
  .header,.topbar,.footer,.cookie,.btn-row,.nav-toggle{display:none!important}
  body{font-size:12pt}
}