/* ============================================================
   Tejareus Tejados Reus — style.css
   Estilo: técnico e industrial · retícula visible · alto contraste
   Paleta única del proyecto (anti-huella: nada de terracota)
   ============================================================ */

/* ── 1. TOKENS ───────────────────────────────────────────── */
:root{
  --color-primary:      #2C4A63;
  --color-primary-dark: #1E3547;
  --color-primary-soft: #E8EDF2;
  --color-accent:       #E08A1E;
  --color-accent-dark:  #C4741A;
  --color-text:         #1F2A33;
  --color-muted:        #5C6B78;
  --color-border:       #D5DDE4;
  --color-border-form:  #8A96A2;  /* borde de campo — 3.02:1, cumple el mínimo gráfico */
  --color-bg:           #FFFFFF;
  --color-bg-soft:      #F5F7F9;
  --color-on-dark:      #DCE4EB;  /* texto sobre azul oscuro */
  --color-on-dark-soft: #B9C7D3;  /* secundario sobre azul oscuro */
  --color-on-dark-mut:  #9FB0BE;  /* terciario sobre azul oscuro */
  --color-ok:           #1E7A4C;
  --color-error:        #A32020;

  --font-body:    'Archivo', 'fallback-archivo', system-ui, -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', 'fallback-barlow', 'Archivo', system-ui, sans-serif;

  --container: 1180px;
  --gutter: 20px;
  --radius: 2px;              /* industrial: esquinas casi vivas */
  --rule: 3px solid var(--color-accent);
  --shadow: 0 1px 3px rgba(31,42,51,.10), 0 8px 24px rgba(31,42,51,.06);

  --header-top-h: 34px;
  --header-main-h: 76px;
}

/* Fallbacks métricos: eliminan el salto al cargar las webfonts */
@font-face{
  font-family:'fallback-archivo'; src:local('Arial');
  size-adjust:100%; ascent-override:98%; descent-override:26%; line-gap-override:0%;
}
@font-face{
  font-family:'fallback-barlow'; src:local('Arial Narrow'), local('Arial');
  size-adjust:88%; ascent-override:104%; descent-override:24%; line-gap-override:0%;
}

/* ── 2. RESET ────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:125px}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  margin:0; overflow-x:hidden; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--color-primary); text-decoration-thickness:1px; text-underline-offset:2px}
a:hover{color:var(--color-accent-dark)}
button{font:inherit}
:focus-visible{outline:3px solid var(--color-accent); outline-offset:2px}

h1,h2,h3,h4{
  font-family:var(--font-display); font-weight:700; line-height:1.12;
  letter-spacing:.005em; margin:0 0 .5em; color:var(--color-primary-dark);
  text-wrap:balance;
}
h1{font-size:clamp(2.1rem,5.2vw,3.35rem)}
h2{font-size:clamp(1.7rem,3.9vw,2.5rem)}
h3{font-size:clamp(1.2rem,2.3vw,1.45rem)}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter)}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--color-accent); color:#111; padding:12px 20px; font-weight:700;
}
.skip-link:focus{left:0}

/* ── 3. BOTONES ──────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  letter-spacing:.04em; text-transform:uppercase;
  padding:14px 26px; border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; text-decoration:none; transition:background .18s, color .18s, border-color .18s;
}
.btn--accent{background:var(--color-accent); color:#1A1207; border-color:var(--color-accent)}
.btn--accent:hover{background:var(--color-accent-dark); border-color:var(--color-accent-dark); color:#fff}
.btn--outline{background:transparent; color:var(--color-primary); border-color:var(--color-primary)}
.btn--outline:hover{background:var(--color-primary); color:#fff}
.btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.5)}
.btn--ghost:hover{background:rgba(255,255,255,.12); color:#fff}
.btn--block{width:100%}
/* respuesta al toque: en móvil no hay hover y sin feedback el usuario repulsa */
.btn:active{transform:translateY(1px) scale(.99)}
.btn--accent:active{background:var(--color-accent-dark); border-color:var(--color-accent-dark); color:#fff}
.btn--outline:active{background:var(--color-primary); color:#fff}
.btn:disabled,.btn[disabled]{
  opacity:.55; cursor:not-allowed; transform:none;
  background:var(--color-border); border-color:var(--color-border); color:var(--color-muted);
}

/* ── 4. HEADER ───────────────────────────────────────────── */
.site-header{position:sticky; top:0; z-index:100}

.header-top{background:var(--color-primary-dark); color:var(--color-on-dark); font-size:.9rem}
.header-top__inner{
  min-height:var(--header-top-h); display:flex; align-items:center;
  justify-content:space-between; gap:16px;
}
.header-top__claim{font-weight:600; letter-spacing:.01em}
.header-top__tel{color:var(--color-accent); font-weight:700; text-decoration:none; white-space:nowrap}
.header-top__tel:hover{text-decoration:underline; color:var(--color-accent)}

.header-main{background:var(--color-primary); border-bottom:var(--rule)}
.header-main__inner{
  min-height:var(--header-main-h); display:flex; align-items:center; gap:24px;
}
.logo{flex:0 0 auto; display:block}
.logo img{height:42px; width:auto}

.nav-desktop{display:none; margin-left:auto; align-items:center; gap:4px}
.nav-desktop > a,
.nav-dropdown__toggle{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-size:1.06rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase;
  color:#fff; background:none; border:0; cursor:pointer;
  padding:10px 14px; text-decoration:none; border-bottom:3px solid transparent;
}
.nav-desktop > a:hover,
.nav-dropdown__toggle:hover{color:var(--color-accent-soft); border-bottom-color:var(--color-accent-soft)}
.nav-desktop a[aria-current="page"]{color:var(--color-accent-soft); border-bottom-color:var(--color-accent-soft)}

.nav-dropdown{position:relative}
.chevron{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor}
.nav-dropdown__menu{
  position:absolute; top:100%; left:0; min-width:290px;
  background:#fff; border:1px solid var(--color-border); border-top:var(--rule);
  box-shadow:var(--shadow); padding:6px 0;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.nav-dropdown__menu a{
  display:block; padding:11px 18px; color:var(--color-text);
  text-decoration:none; font-size:.98rem; border-left:3px solid transparent;
}
.nav-dropdown__menu a:hover{background:var(--color-primary-soft); border-left-color:var(--color-accent); color:var(--color-primary-dark)}
.nav-dropdown__menu a[aria-current="page"]{border-left-color:var(--color-accent); font-weight:700}
.nav-dropdown.is-open .nav-dropdown__menu{opacity:1; visibility:visible; transform:translateY(0)}
/* el hover solo para ratón: en táctil se queda pegado tras el primer toque */
@media (hover:hover) and (pointer:fine){
  .nav-dropdown:hover .nav-dropdown__menu{opacity:1; visibility:visible; transform:translateY(0)}
}

.header-cta{display:none; flex:0 0 auto; padding:12px 20px; font-size:.98rem}

.burger{
  margin-left:auto; width:46px; height:46px; background:none; border:0;
  display:flex; flex-direction:column; justify-content:center; gap:6px; cursor:pointer; padding:0;
}
.burger span{display:block; height:3px; background:#fff; transition:transform .22s, opacity .22s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

.mobile-nav{
  display:grid; background:var(--color-primary-dark);
  max-height:0; overflow:hidden; transition:max-height .28s ease;
}
.mobile-nav.is-open{max-height:calc(100dvh - var(--header-top-h) - var(--header-main-h)); overflow-y:auto; -webkit-overflow-scrolling:touch}
.mobile-nav > a,
.mobile-dropdown__toggle{
  font-family:var(--font-display); font-size:1.12rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; color:#fff;
  padding:15px var(--gutter); text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:none; border-left:0; border-right:0; border-top:0;
  text-align:left; width:100%; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.mobile-nav a[aria-current="page"]{color:var(--color-accent)}
.mobile-dropdown__menu{max-height:0; overflow:hidden; transition:max-height .25s ease; background:rgba(0,0,0,.18)}
.mobile-dropdown.is-open .mobile-dropdown__menu{max-height:420px}
.mobile-dropdown__menu a{
  display:block; padding:13px var(--gutter) 13px calc(var(--gutter) + 16px);
  color:var(--color-on-dark); text-decoration:none; font-size:.98rem;
  border-bottom:1px solid rgba(255,255,255,.08); border-left:3px solid transparent;
}
.mobile-dropdown__menu a[aria-current="page"]{border-left-color:var(--color-accent); color:#fff; font-weight:700}
.mobile-cta{margin:16px var(--gutter) 20px}

@media (min-width:1000px){
  .nav-desktop{display:flex}
  .header-cta{display:inline-flex}
  .burger,.mobile-nav{display:none}
}

/* ── 5. SECCIONES ────────────────────────────────────────── */
main{display:block}
.section{padding:clamp(48px,7vw,84px) 0}
.section--soft{background:var(--color-bg-soft)}
.section--dark{background:var(--color-primary-dark); color:#DCE4EB}
.section--dark h2,.section--dark h3{color:#fff}

.section-label{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:.9rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent-text); margin-bottom:10px;
  padding-left:14px; border-left:var(--rule);
}
.section-head{max-width:760px; margin-bottom:40px}
.section-head--center{margin-inline:auto; text-align:center}
.section-head--center .section-label{border-left:0; border-bottom:var(--rule); padding:0 0 6px}
.lead{font-size:1.12rem; color:var(--color-muted)}

/* ── 6. HERO ─────────────────────────────────────────────── */
.hero{position:relative; background:var(--color-primary-dark); color:#fff; overflow:hidden}
.hero__media{position:absolute; inset:0}
.hero__media img{width:100%; height:100%; object-fit:cover; opacity:.34}
.hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(30,53,71,.94) 0%, rgba(30,53,71,.72) 55%, rgba(30,53,71,.45) 100%);
}
.hero__inner{position:relative; z-index:2; padding:clamp(52px,8vw,104px) 0; max-width:760px}
.hero h1{color:#fff; margin-bottom:.35em}
.hero__sub{font-size:clamp(1.05rem,1.9vw,1.22rem); color:var(--color-on-dark); max-width:62ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero__badges{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:34px;
  padding-top:24px; border-top:1px solid rgba(255,255,255,.22);
}
.hero__badge{
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  letter-spacing:.05em; text-transform:uppercase; color:#fff;
  display:flex; align-items:center; gap:9px;
}
.hero__badge::before{content:""; width:9px; height:9px; background:var(--color-accent); flex:0 0 auto}

/* ── 7. GRIDS Y TARJETAS ─────────────────────────────────── */
.grid{display:grid; gap:22px}
.grid--2{grid-template-columns:1fr}
.grid--3{grid-template-columns:1fr}
.grid--4{grid-template-columns:1fr}
@media (min-width:700px){
  .grid--2,.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1000px){
  .grid--3{grid-template-columns:repeat(3,1fr)}
  .grid--4{grid-template-columns:repeat(4,1fr)}
}

.card{
  background:#fff; border:1px solid var(--color-border); border-top:var(--rule);
  padding:26px 24px; display:flex; flex-direction:column; height:100%;
  transition:box-shadow .18s, transform .18s;
}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px)}
.card h3{margin-bottom:.4em}
.card p{color:var(--color-muted); font-size:1rem}
.card__link{
  margin-top:auto; padding-top:16px; font-family:var(--font-display); font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; font-size:.98rem;
  color:var(--color-primary); text-decoration:none; display:inline-flex; align-items:center; gap:8px;
}
.card__link::after{content:"→"; transition:transform .18s}
.card__link:hover{color:var(--color-accent-dark)}
.card__link:hover::after{transform:translateX(4px)}

.card--service{padding:0; border-top:1px solid var(--color-border)}
.card--service img{width:100%; aspect-ratio:3/2; object-fit:cover}
.card--service .card__body{padding:22px 24px 26px; display:flex; flex-direction:column; flex:1}

/* Numeradas: proceso */
.steps{counter-reset:step; display:grid; gap:2px; background:var(--color-border)}
@media (min-width:900px){.steps{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.step{background:#fff; padding:26px 22px; counter-increment:step; position:relative}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display); font-size:2.4rem; font-weight:700;
  color:var(--color-accent); line-height:1; display:block; margin-bottom:12px;
}
.step h3{font-size:1.14rem}
.step p{font-size:.98rem; color:var(--color-muted); margin:0}

/* ── 8. TABLA DE COSTE ───────────────────────────────────── */
.table-wrap{overflow-x:auto; border:1px solid var(--color-border)}
table.cost{width:100%; border-collapse:collapse; font-size:1rem; min-width:560px; background:#fff}
table.cost th,table.cost td{padding:14px 16px; text-align:left; border-bottom:1px solid var(--color-border)}
table.cost thead th{
  background:var(--color-primary); color:#fff; font-family:var(--font-display);
  letter-spacing:.05em; text-transform:uppercase; font-size:.95rem;
}
table.cost tbody tr:nth-child(even){background:var(--color-bg-soft)}
.nivel{
  display:inline-block; font-family:var(--font-display); font-weight:700;
  font-size:.86rem; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border:2px solid currentColor; white-space:nowrap;
}
.nivel--eco{color:#1E7A4C}
.nivel--mod{color:#8C5309}
.nivel--pre{color:#8A2B2B}

/* ── 9. FAQ ──────────────────────────────────────────────── */
.faq{border-top:1px solid var(--color-border)}
.faq__item{border-bottom:1px solid var(--color-border)}
.faq__q{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  padding:20px 44px 20px 0; position:relative;
  font-family:var(--font-display); font-weight:600; font-size:1.18rem;
  color:var(--color-primary-dark); line-height:1.3;
}
.faq__q::after{
  content:""; position:absolute; right:8px; top:50%; width:12px; height:12px;
  border-right:3px solid var(--color-accent); border-bottom:3px solid var(--color-accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s;
}
.faq__q[aria-expanded="true"]::after{transform:translateY(-25%) rotate(-135deg)}
.faq__a{overflow:hidden; max-height:0; transition:max-height .26s ease}
.faq__a > div{padding:0 0 22px; color:var(--color-muted); max-width:78ch}

/* ── 10. RESEÑAS ─────────────────────────────────────────── */
.review{background:#fff; border:1px solid var(--color-border); border-left:var(--rule); padding:24px}
.review__stars{color:var(--color-accent-text); letter-spacing:.14em; font-size:1.05rem}
.review__text{font-size:1rem; color:var(--color-text); margin:.7em 0 1em}
.review__meta{font-size:.92rem; color:var(--color-muted)}
.review__meta strong{color:var(--color-primary-dark); display:block; font-size:1rem}

/* ── 11. ZONAS ───────────────────────────────────────────── */
.zonas__group{margin-bottom:26px}
.zonas__group h3{font-size:1.1rem; margin-bottom:12px}
.zonas__list{display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0}
.zonas__list li{
  background:#fff; border:1px solid var(--color-border);
  padding:6px 13px; font-size:.95rem; color:var(--color-muted);
}

/* ── 12. CONTACTO ────────────────────────────────────────── */
.contact-section{scroll-margin-top:125px; background:var(--color-primary-soft); padding:clamp(48px,7vw,80px) 0; border-top:var(--rule)}
.contact-header{text-align:center; max-width:680px; margin:0 auto 40px}
.contact-grid{display:grid; gap:32px; align-items:start}
@media (min-width:900px){.contact-grid{grid-template-columns:1.2fr .8fr; gap:44px}}

.contact-form-wrap{background:#fff; border:1px solid var(--color-border); padding:clamp(22px,3vw,34px)}
.form-group{margin-bottom:18px}
.form-group label{
  display:block; font-weight:600; font-size:.97rem; margin-bottom:7px; color:var(--color-primary-dark);
}
.form-group input,.form-group select,.form-group textarea{
  width:100%; padding:13px 14px; font:inherit; font-size:1rem; color:var(--color-text);
  background:#fff; border:1px solid var(--color-border-form); border-radius:var(--radius);
  transition:border-color .15s, box-shadow .15s;
}
.form-group textarea{resize:vertical; min-height:118px}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none; border-color:var(--color-primary); box-shadow:0 0 0 3px rgba(44,74,99,.16);
}
.form-group input[aria-invalid="true"]{border-color:var(--color-error)}
.hp-field{position:absolute!important; left:-9999px!important; top:-9999px!important; width:1px; height:1px}

.captcha-group{
  background:var(--color-bg-soft); border:1px dashed var(--color-border);
  padding:16px 16px 18px; margin-bottom:18px;
}
.captcha-group label{color:var(--color-primary-dark)}
.captcha-group #captchaQuestion{font-family:var(--font-display); font-weight:700; letter-spacing:.04em}

.form-checkbox{margin:22px 0}
.checkbox-label{display:flex; gap:12px; align-items:flex-start; font-weight:400; position:relative}
.checkbox-label input{position:absolute; opacity:0; width:22px; height:22px; margin:0}
.checkbox-custom{
  flex:0 0 auto; width:22px; height:22px; margin-top:2px; background:#fff;
  border:2px solid var(--color-muted); border-radius:var(--radius); position:relative;
  cursor:pointer; display:block;
}
/* amplía el área táctil a 44x44 sin agrandar la casilla visible */
.checkbox-custom::before{
  content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:44px; height:44px;
}
.checkbox-label input:checked + .checkbox-custom{background:var(--color-primary); border-color:var(--color-primary)}
.checkbox-label input:checked + .checkbox-custom::after{
  content:""; position:absolute; left:6px; top:2px; width:6px; height:11px;
  border:solid #fff; border-width:0 3px 3px 0; transform:rotate(45deg);
}
.checkbox-label input:focus-visible + .checkbox-custom{outline:3px solid var(--color-accent); outline-offset:2px}
.checkbox-text{font-size:.93rem; color:var(--color-muted); line-height:1.5}

.form-message{margin-top:16px; padding:13px 15px; font-size:.97rem; border-left:4px solid}
.form-message.is-ok{background:#EAF5EF; border-color:var(--color-ok); color:#145635}
.form-message.is-error{background:#FBECEC; border-color:var(--color-error); color:#7E1919}

.contact-info-wrap{display:grid; gap:16px}
.contact-info-card{background:#fff; border:1px solid var(--color-border); padding:22px 24px}
.contact-info-card h3{font-size:1.06rem; margin-bottom:8px}
.contact-info-card--phone{background:var(--color-primary-dark); border-color:var(--color-primary-dark)}
.contact-info-card--phone h3{color:#fff}
.contact-phone{
  font-family:var(--font-display); font-size:1.9rem; font-weight:700;
  color:var(--color-accent); text-decoration:none; display:block; line-height:1.2;
}
.contact-phone:hover{color:#fff}
.contact-schedule{color:var(--color-on-dark-soft); font-size:.94rem; margin:8px 0 0}
.contact-urgent{color:var(--color-accent); font-size:.94rem; font-weight:600; margin:4px 0 0}
.contact-nap{font-style:normal; font-size:.97rem; color:var(--color-muted); line-height:1.6}
.contact-nap strong{color:var(--color-primary-dark); font-size:1rem}
.contact-zonas{font-size:.96rem; color:var(--color-muted); margin:0}

/* ── 13. FOOTER ──────────────────────────────────────────── */
.site-footer{background:var(--color-primary-dark); color:var(--color-on-dark-soft); padding:56px 0 0; font-size:.97rem}
.footer-grid{display:grid; gap:32px; padding-bottom:40px}
@media (min-width:760px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px}}
.footer-brand{display:flex; flex-direction:column; align-items:flex-start}
.footer-logo{display:block}
.footer-logo img{height:44px; width:auto}
.footer-claim{margin-top:16px; max-width:34ch; color:var(--color-on-dark-mut); font-size:.95rem}
.footer-col h3{
  font-size:1rem; letter-spacing:.11em; text-transform:uppercase;
  color:#fff; margin-bottom:16px; padding-bottom:8px;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.footer-col a{display:block; color:var(--color-on-dark-soft); text-decoration:none; padding:5px 0}
.footer-col a:hover{color:var(--color-accent)}
.footer-nap{font-style:normal; line-height:1.65; color:var(--color-on-dark-soft)}
.footer-nap strong{color:#fff; display:block; margin-bottom:4px}
.footer-nap a{display:inline; color:var(--color-accent); font-weight:700}
.footer-horario,.footer-urgencias{margin:10px 0 0; font-size:.92rem; color:var(--color-on-dark-mut)}
.footer-urgencias{color:var(--color-accent)}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.14); padding:20px 0;
  text-align:center; font-size:.9rem; color:var(--color-on-dark-mut);
}
.footer-bottom p{margin:0}

/* ── 14. COOKIE BANNER (sin CLS) ─────────────────────────── */
#cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:150;
  background:var(--color-primary-dark); color:var(--color-on-dark);
  border-top:var(--rule); padding:18px 0;
  transform:translateY(100%); transition:transform .25s ease; will-change:transform;
}
#cookie-banner.is-visible{transform:translateY(0)}
.cookie-inner{display:grid; gap:16px; align-items:center}
@media (min-width:820px){.cookie-inner{grid-template-columns:1fr auto}}
#cookieText{margin:0; font-size:.95rem; max-width:78ch}
#cookieText a{color:var(--color-accent)}
.cookie-actions{display:flex; gap:12px; flex-wrap:wrap}
.cookie-actions .btn{padding:11px 20px; font-size:.94rem}

/* ── 14b. BARRA FIJA DE LLAMADA (solo móvil) ───────────── */
.call-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:140;
  display:grid; grid-template-columns:1fr 1fr; gap:1px;
  background:var(--color-primary-dark);
  padding-bottom:env(safe-area-inset-bottom);   /* móviles con notch */
  box-shadow:0 -2px 12px rgba(31,42,51,.18);
}
.call-bar a{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:56px; padding:12px 10px; text-decoration:none;
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  letter-spacing:.03em; text-transform:uppercase;
}
.call-bar__tel{background:var(--color-accent); color:#1A1207}
.call-bar__tel:active{background:var(--color-accent-dark); color:#fff}
.call-bar__form{background:var(--color-primary-dark); color:#fff}
.call-bar__form:active{background:var(--color-primary)}
/* deja hueco para que la barra no tape el final del contenido */
body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
/* el banner de cookies se apoya encima de la barra, no la tapa */
#cookie-banner{bottom:calc(56px + env(safe-area-inset-bottom))}
@media (min-width:1000px){
  .call-bar{display:none}
  body{padding-bottom:0}
  #cookie-banner{bottom:0}
}

/* ── 15. BREADCRUMB ──────────────────────────────────────── */
.breadcrumb{background:var(--color-bg-soft); border-bottom:1px solid var(--color-border); font-size:.92rem}
.breadcrumb ol{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:12px 0}
.breadcrumb li{display:flex; align-items:center; gap:8px; color:var(--color-muted)}
.breadcrumb li+li::before{content:"›"; color:var(--color-border)}
.breadcrumb a{color:var(--color-primary); text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* ── 16. CONTENIDO EDITORIAL ─────────────────────────────── */
.prose{max-width:72ch}
.prose h2{margin-top:1.6em}
.prose h3{margin-top:1.5em; color:var(--color-primary)}
.prose ul{padding-left:0; list-style:none; margin:0 0 1.3em}
.prose ul li{position:relative; padding-left:26px; margin-bottom:9px}
.prose ul li::before{
  content:""; position:absolute; left:0; top:.62em;
  width:10px; height:3px; background:var(--color-accent);
}
.figure{margin:32px 0}
.figure img{width:100%; border:1px solid var(--color-border)}
.figure figcaption{font-size:.9rem; color:var(--color-muted); padding-top:8px}

.callout{
  background:var(--color-primary-soft); border-left:var(--rule);
  padding:22px 24px; margin:30px 0;
}
.callout h3{margin-top:0}

/* ── 17. CTA FINAL ───────────────────────────────────────── */
.cta-final{background:var(--color-primary); color:#fff; padding:clamp(44px,6vw,72px) 0; text-align:center}
.cta-final h2{color:#fff; max-width:22ch; margin-inline:auto}
.cta-final p{color:var(--color-on-dark); max-width:60ch; margin-inline:auto}
.cta-final .hero__actions{justify-content:center}

/* ── 18. UTILIDADES ──────────────────────────────────────── */
.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}
.text-center{text-align:center}

@media print{
  .site-header,.mobile-nav,#cookie-banner,.contact-form-wrap,.cta-final{display:none!important}
  body{font-size:11pt; color:#000}
}