/* ═══════════════════════════════════════════════════════════════════════════
   BL · SECCIONES DE PÁGINA · el patrón editorial común a las páginas de la web
   ---------------------------------------------------------------------------
   Una sola fuente de verdad para el estilo de las páginas de contenido
   (sistemas constructivos, gamas, quiénes somos…). Se carga con:
       <link rel="stylesheet" href="/assets/bl-secciones.css">
   Usa los tokens de la marca (--ink, --gray, --line, --accent-deep, --pad,
   --hdr-h) que define el <style> de cada página, así que hereda el mismo
   sistema visual. Tipografía grande, mucho aire, imágenes a sangre SIN
   redondear y secciones numeradas.
   Cambiar el estilo de TODAS las páginas es cambiar este archivo.
   ═══════════════════════════════════════════════════════════════════════════ */

.sc{--sc-max:1180px}
.sc .wrap{width:100%;max-width:var(--sc-max);margin-inline:auto;padding-inline:var(--pad)}
.sc-eyebrow{font-size:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
.sc-eyebrow a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.sc-eyebrow a:hover{color:var(--ink)}

/* ── hero ── */
.sc-hero{padding-top:calc(var(--hdr-h,62px) + clamp(28px,6vh,70px))}
.sc-h1{margin-top:clamp(16px,2.4vh,26px);font-size:clamp(38px,6.4vw,86px);font-weight:500;
  line-height:1.02;letter-spacing:-.03em;color:var(--ink)}
.sc-hero-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
  flex-wrap:wrap;margin-top:clamp(22px,3vh,34px)}
.sc-lead{max-width:54ch;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--gray)}
.sc-more{display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:500;
  color:var(--ink);white-space:nowrap;transition:gap .25s}
.sc-more svg{width:18px;height:18px}
.sc-more:hover{gap:14px}
.sc-hero-img{margin-top:clamp(28px,5vh,52px);overflow:hidden;aspect-ratio:16/9;background:#101010}

/* ── HERO CON FOTO DE FONDO ────────────────────────────────────────────────
   Mismo planteamiento que el de la home: la foto ocupa todo el hero, un velo
   la oscurece para que el texto se lea, y el título, el texto y el botón van
   abajo a la izquierda.

   No mide 100svh a propósito: se queda en el 86% para que asome una franja de
   la sección siguiente y se vea que la página continúa hacia abajo.

   :has() acota el tratamiento a los heros que TIENEN foto. Los de solo texto
   (promotores, quiénes somos) se quedan como estaban, y un navegador sin
   :has() también los deja en claro, que es una caída elegante. */
.sc-hero:has(.sc-hero-img){position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:flex-end;
  min-height:min(86svh,880px);
  padding-top:calc(var(--hdr-h,62px) + clamp(30px,6vh,70px));
  padding-bottom:clamp(38px,6.5vh,72px);
  color:#fff}
.sc-hero:has(.sc-hero-img)>.wrap{width:100%}

/* la foto deja de ser un bloque en el flujo y pasa a ser el fondo */
.sc-hero:has(.sc-hero-img) .sc-hero-img{position:absolute;inset:0;z-index:-2;
  margin:0;width:100%;height:100%;aspect-ratio:auto;background:#101010}
.sc-hero:has(.sc-hero-img) .sc-hero-img img{width:100%;height:100%;object-fit:cover}

/* el velo: oscurece arriba (para la barra blanca del header), por la izquierda
   (donde va el texto) y por abajo (para el pie del bloque) */
.sc-hero:has(.sc-hero-img)::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(11,11,11,.42) 0,rgba(11,11,11,0) 26%),
    linear-gradient(74deg,rgba(9,9,9,.82) 0,rgba(9,9,9,.34) 46%,rgba(9,9,9,0) 70%),
    linear-gradient(0deg,rgba(9,9,9,.8) 0,rgba(9,9,9,.26) 32%,rgba(9,9,9,0) 54%)}

.sc-hero:has(.sc-hero-img) .sc-eyebrow{color:rgba(255,255,255,.74)}
.sc-hero:has(.sc-hero-img) .sc-eyebrow a:hover{color:#fff}
.sc-hero:has(.sc-hero-img) .sc-h1{color:#fff;max-width:19ch;
  text-shadow:0 1px 22px rgba(0,0,0,.4)}
.sc-hero:has(.sc-hero-img) .sc-h1.largo{max-width:26ch}
/* Con foto de fondo, el pie deja de repartir texto y enlace a los lados:
   todo se apila abajo a la izquierda, texto y debajo su boton. */
.sc-hero:has(.sc-hero-img) .sc-hero-foot{flex-direction:column;align-items:flex-start;
  gap:clamp(18px,2.4vh,26px)}
.sc-hero:has(.sc-hero-img) .sc-lead{color:rgba(255,255,255,.9);max-width:52ch;
  text-shadow:0 1px 16px rgba(0,0,0,.45)}
.sc-hero:has(.sc-hero-img) .sc-more{color:#fff}
/* el botón, en su versión de fondo oscuro */
.sc-hero:has(.sc-hero-img) .sc-btn{margin-top:0;border-color:rgba(255,255,255,.6);color:#fff}
.sc-hero:has(.sc-hero-img) .sc-btn:hover{background:#fff;color:var(--ink);border-color:#fff}

@media(max-width:700px){
  .sc-hero:has(.sc-hero-img){min-height:min(80svh,700px)}
  .sc-hero:has(.sc-hero-img) .sc-h1{max-width:none}
}


.sc-hero-img img{width:100%;height:100%;object-fit:cover}

/* ── por qué + stats (solo índice) ── */
.sc-why{padding:clamp(56px,10vh,120px) 0 clamp(40px,7vh,80px)}
.sc-why-in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:start}
/* 44 px como máximo (antes 56): en las páginas de H1 largo (50 px) los títulos de sección quedaban por encima del propio H1 */
.sc-h2{font-size:clamp(24px,3.1vw,44px);font-weight:500;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.sc-h2.center{text-align:center}
.sc-why-txt p{font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:var(--gray)}
.sc-why-txt p+p{margin-top:16px}
.sc-why-claim{font-weight:500;color:var(--ink)!important}
.sc-stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,7vh,72px);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sc-stat{padding:clamp(24px,3vw,34px) clamp(18px,2vw,26px) clamp(24px,3vw,34px) 0}
.sc-stat+.sc-stat{border-left:1px solid var(--line);padding-left:clamp(18px,2vw,26px)}
.sc-stat b{display:block;font-size:clamp(26px,2.8vw,38px);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.sc-stat span{display:block;margin-top:10px;font-size:15px;line-height:1.45;color:var(--gray)}

/* ── los tres sistemas (índice) ── */
.sc-list{padding:clamp(30px,5vh,60px) 0 clamp(56px,10vh,120px)}
.sc-list-head{text-align:center;max-width:760px;margin-inline:auto;padding-bottom:clamp(30px,5vh,60px)}
.sc-sub{margin-top:16px;font-size:clamp(16px,1.3vw,19px);line-height:1.55;color:var(--gray)}
.sc-sys{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:center;
  padding:clamp(34px,5vh,60px) 0;border-top:1px solid var(--line);color:var(--ink)}
.sc-sys:last-child{border-bottom:1px solid var(--line)}
.sc-sys.rev .sc-sys-txt{order:2}
.sc-num{display:block;font-size:clamp(15px,1.2vw,17px);font-weight:600;letter-spacing:.05em;color:var(--gray)}
.sc-sys h3{margin-top:12px;font-size:clamp(28px,3.6vw,46px);font-weight:500;letter-spacing:-.02em;line-height:1.05}
.sc-sys-claim{margin-top:14px;font-size:clamp(18px,1.6vw,23px);font-weight:500;color:var(--ink);line-height:1.3}
.sc-sys-txt>p:not(.sc-sys-claim){margin-top:14px;font-size:clamp(16px,1.2vw,18px);line-height:1.65;color:var(--gray);max-width:46ch}
.sc-go{display:inline-flex;align-items:center;gap:9px;margin-top:24px;font-size:17px;font-weight:500;color:var(--ink);transition:gap .25s}
.sc-go svg{width:19px;height:19px}
.sc-sys:hover .sc-go{gap:15px}
.sc-sys-img{overflow:hidden;aspect-ratio:4/3;background:#101010}
.sc-sys-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sc-sys:hover .sc-sys-img img{transform:scale(1.03)}

/* ── subpágina: intro a dos columnas ── */
.sc-intro{padding:clamp(50px,9vh,110px) 0}
.sc-intro-in{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,80px);align-items:start}
.sc-intro-in h2{font-size:clamp(26px,3vw,40px);font-weight:500;line-height:1.1;letter-spacing:-.02em}
.sc-intro-txt p{font-size:clamp(16px,1.3vw,19px);line-height:1.7;color:var(--gray)}
.sc-intro-txt p+p{margin-top:18px}

/* ── subpágina: ventajas ── */
.sc-feats{background:var(--paper);padding:clamp(50px,9vh,110px) 0}
.sc-feats-head{max-width:640px;margin-bottom:clamp(34px,5vh,56px)}
.sc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2px,.2vw,2px);background:var(--line);
  border:1px solid var(--line)}
.sc-feat{background:var(--paper);padding:clamp(26px,3.4vw,44px)}
.sc-feat b{display:block;font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.sc-feat p{margin-top:12px;font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--gray)}

/* ── subpágina: banda "para quién" con imagen ── */
.sc-para{position:relative;min-height:clamp(360px,60vh,560px);display:flex;align-items:flex-end;
  color:#fff;overflow:hidden;background:#101010}
.sc-para img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.sc-para::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(16,16,16,.82) 0%,rgba(16,16,16,.5) 50%,rgba(16,16,16,.2) 100%)}
.sc-para .wrap{position:relative;z-index:2;padding-block:clamp(40px,7vh,72px)}
.sc-para p.k{font-size:15px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75)}
.sc-para p.t{margin-top:16px;max-width:22ch;font-size:clamp(26px,3.6vw,46px);font-weight:500;line-height:1.12;letter-spacing:-.02em}

/* ── subpágina: los otros sistemas ── */
.sc-herm{padding:clamp(50px,9vh,100px) 0}
.sc-herm-head{margin-bottom:clamp(26px,4vh,40px)}
.sc-herm-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,26px)}
.sc-herm-card{display:block;position:relative;overflow:hidden;aspect-ratio:16/11;background:#101010;color:#fff}
.sc-herm-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.sc-herm-card:hover img{transform:scale(1.04)}
.sc-herm-card::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(0deg,rgba(16,16,16,.78) 0%,rgba(16,16,16,.15) 60%,rgba(16,16,16,.05) 100%)}
.sc-herm-card .in{position:absolute;left:0;bottom:0;z-index:2;padding:clamp(20px,2.4vw,30px)}
.sc-herm-card .in b{display:block;font-size:clamp(21px,2.2vw,28px);font-weight:500;letter-spacing:-.01em}
.sc-herm-card .in span{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:16px;color:rgba(255,255,255,.85)}
.sc-herm-card .in span svg{width:17px;height:17px}

/* ── cierre CTA (común) ──
   (21-09) Como .cta-bar: sin la banda negra a todo lo ancho, que pesaba demasiado. Una caja
   blanca con un filete fino, alineada con el contenido; el texto en tinta y el botón verde. */
.sc-cta{color:var(--ink);padding:clamp(44px,8vh,96px) 0;text-align:center}
.sc .sc-cta>.wrap{width:calc(100% - 2 * var(--pad,20px));max-width:calc(var(--sc-max) - 2 * var(--pad,20px));
  padding:clamp(34px,5vw,64px) clamp(22px,4vw,56px);background:#fff;border:1px solid var(--line)}
.sc-cta h2{font-size:clamp(24px,2.8vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
.sc-cta p{max-width:52ch;margin:14px auto 0;font-size:clamp(16px,1.3vw,19px);line-height:1.6;color:var(--gray)}
/* Botón fino con borde. Antes era blanco sobre fondo blanco y no se distinguía.
   Al pasar por encima se rellena de negro, como el .cta-solid de la home. */
.sc-btn{display:inline-flex;align-items:center;gap:9px;margin-top:clamp(26px,3.6vh,36px);
  background:transparent;color:var(--ink);border:1px solid #2a2a2a;border-radius:10px;
  padding:10px 21px;font-size:16px;font-weight:500;line-height:1.25;
  transition:background .25s,color .25s,border-color .25s}
.sc-btn svg{width:17px;height:17px}
.sc-btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

@media(max-width:820px){
  .sc-why-in{grid-template-columns:1fr;gap:24px}
  .sc-stats{grid-template-columns:1fr 1fr}
  .sc-stat:nth-child(3){border-left:0;padding-left:0}
  .sc-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .sc-sys,.sc-sys.rev .sc-sys-txt{grid-template-columns:1fr;order:0}
  .sc-sys-img{order:-1}
  .sc-intro-in{grid-template-columns:1fr;gap:20px}
  .sc-grid{grid-template-columns:1fr}
  .sc-herm-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .sc-stats{grid-template-columns:1fr}
  .sc-stat+.sc-stat{border-left:0;padding-left:0;border-top:1px solid var(--line)}
  .sc-stat:nth-child(-n+2){border-bottom:0}
}
@media(prefers-reduced-motion:reduce){
  .sc-sys:hover .sc-sys-img img,.sc-herm-card:hover img{transform:none}
}
/* ═══════════════════════════════════════════════════════════════════════════
   BLOQUES DE PÁGINA LARGA · tabla comparativa, pasos, barra de llamada y FAQ.
   Los usan la hub de sistemas constructivos y las fichas de cada sistema.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── tabla comparativa ── */
.cmp-sec{background:var(--paper);padding:clamp(50px,9vh,110px) 0}
.cmp-wrap{overflow-x:auto;border:1px solid var(--line);background:#fff;margin-top:clamp(26px,4vh,42px)}
.cmp-tabla{width:100%;border-collapse:collapse;min-width:720px;font-size:clamp(14px,1.05vw,16px)}
.cmp-tabla th,.cmp-tabla td{text-align:left;padding:clamp(13px,1.5vw,18px);border-bottom:1px solid var(--line);vertical-align:top}
.cmp-tabla thead th{font-weight:500;color:var(--ink);border-bottom:1.5px solid var(--ink);vertical-align:bottom}
.cmp-tabla thead th span{display:block;margin-top:4px;font-size:12px;font-weight:400;color:var(--gray)}
.cmp-tabla thead th .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.cmp-tabla tbody th{font-weight:500;color:var(--ink);width:21%}
.cmp-tabla tbody td{color:var(--gray)}
.cmp-tabla tbody tr:last-child th,.cmp-tabla tbody tr:last-child td{border-bottom:0}
.cmp-nota{margin-top:16px;font-size:14px;line-height:1.55;color:var(--gray);max-width:80ch}

/* ── pasos numerados ── */
.pasos{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px);margin-top:clamp(24px,3.6vh,38px)}
.paso{border-top:2px solid var(--ink);padding-top:16px}
.paso b{display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--gray)}
.paso h4{margin-top:8px;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.paso p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--gray)}
@media(max-width:900px){.pasos{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pasos{grid-template-columns:1fr}}

/* ── barra de llamada intermedia ──
   (21-09) Sin el bloque negro, que pesaba demasiado: caja blanca con un filete fino
   y claro, texto en tinta, y el botón verde, que es lo que tiene que destacar. */
.cta-bar{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;margin-top:clamp(30px,5vh,50px);padding:clamp(24px,3.4vw,38px);background:#fff;color:var(--ink);
  border:1px solid var(--line)}
.cta-bar b{display:block;font-size:clamp(19px,1.9vw,25px);font-weight:500;letter-spacing:-.01em}
.cta-bar p{margin-top:8px;max-width:58ch;font-size:clamp(15px,1.15vw,17px);line-height:1.55;color:var(--gray)}
.cta-bar .sc-btn{margin-top:0;flex-shrink:0}
@media(max-width:820px){.cta-bar{flex-direction:column;align-items:flex-start}}

/* ── FAQ · acordeón nativo, sin JS ── */
.faq-sec{padding:clamp(50px,9vh,110px) 0}
.faq-list{margin-top:clamp(26px,4vh,42px);border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:clamp(20px,2.4vw,26px) 0;cursor:pointer;list-style:none;
  font-size:clamp(17px,1.5vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.faq-item summary::-webkit-details-marker{display:none}
/* La cascara trae .faq-list summary:hover en verde con la misma especificidad.
   Gana este por orden de carga, pero lo dejo explicito para que no se rompa. */
.faq-list .faq-item summary:hover,.faq-item summary:hover{color:var(--ink)}
/* el mismo signo pequeño y gris que la página /faq, no un + grande dibujado */
.faq-item summary::after{content:"+";font-family:var(--sans);font-size:20px;font-weight:400;
  color:var(--gray-2);flex-shrink:0;line-height:1;transition:color .25s}
.faq-item[open] summary::after{content:"−";color:var(--ink)}
.faq-body{padding:0 0 clamp(20px,2.4vw,26px);max-width:80ch}
.faq-body p{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--gray)}


/* el mismo botón, pero como <button> (los que abren el asistente Buildy) */
button.sc-btn{border:0;font:inherit;cursor:pointer}

/* ── lista editorial numerada · alternativa a las cajas, sin fondo ── */
.lista-num{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,5vw,70px);margin-top:clamp(24px,3.6vh,40px)}
.lista-num .it{display:flex;gap:clamp(14px,1.6vw,20px);padding:clamp(18px,2.2vw,24px) 0;border-bottom:1px solid var(--line)}
.lista-num .it>b{flex-shrink:0;min-width:26px;padding-top:5px;font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--gray)}
.lista-num .it h4{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.lista-num .it p{margin-top:7px;font-size:15px;line-height:1.6;color:var(--gray)}
@media(max-width:820px){.lista-num{grid-template-columns:1fr}}

/* ── lista de comprobación · para «lo que sí puedes exigir» ── */
.check-list{margin-top:clamp(24px,3.6vh,40px);border:1px solid var(--line);background:#fff;
  padding:clamp(22px,3vw,36px);max-width:940px;list-style:none}
.check-list li{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-bottom:1px solid var(--line)}
.check-list li:first-child{padding-top:0}
.check-list li:last-child{border-bottom:0;padding-bottom:0}
.check-list svg{width:20px;height:20px;flex-shrink:0;margin-top:2px;stroke:var(--ink);fill:none;stroke-width:2}
.check-list b{display:block;font-size:clamp(16px,1.25vw,18px);font-weight:500;color:var(--ink)}
.check-list span{display:block;margin-top:4px;font-size:15px;line-height:1.55;color:var(--gray)}

/* ═══════════════════════════════════════════════════════════════════════════
   LANDINGS · tres piezas que faltaban para las páginas de captación.
   Son variantes de lo que ya hay, no un bloque nuevo: la rejilla de dos pasa
   a tres, la ficha admite un precio y aparece la cita. Así las landings no
   traen un lenguaje visual propio.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── la rejilla, de tres en tres ── */
.sc-grid.tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.sc-grid.tres{grid-template-columns:1fr}}

/* ── el precio dentro de una ficha ── */
.sc-feat .eur{display:block;margin-top:16px;font-size:clamp(22px,2.2vw,30px);
  font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.sc-feat .eur small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--gray)}

/* ── la cita ──────────────────────────────────────────────────────────────
   Misma caja que .sc-feat (mismo fondo y mismo aire) para que caiga sobre el
   mismo filo de la rejilla. La firma se va abajo con margin-top:auto y así
   las tres quedan alineadas aunque el texto mida distinto. */
.sc-op{background:var(--paper);padding:clamp(26px,3.4vw,44px);display:flex;flex-direction:column}
.sc-op .est{font-size:13px;letter-spacing:.3em;color:var(--ink)}
.sc-op blockquote{margin-top:16px;font-size:clamp(16px,1.25vw,18px);line-height:1.6;color:var(--ink)}
.sc-op cite{display:block;margin-top:auto;padding-top:22px;font-style:normal;font-size:14px;color:var(--gray)}

/* ── los pasos, de tres en tres ── */
.pasos.tres{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.pasos.tres{grid-template-columns:1fr}}

/* El titular de una ficha como encabezado real. En las páginas de sistemas es
   un <b> porque allí no encabeza nada; en una landing sí, y un buscador (o un
   lector de pantalla) necesita el <h3>. Mismo aspecto, distinta etiqueta. */
.sc-feat h3{font-size:clamp(19px,1.8vw,24px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}

/* Un paso dentro de una sección encabezada por <h2> tiene que ser <h3>: con
   <h4> el índice del documento salta un nivel y un lector de pantalla anuncia
   una sección que no existe. Las páginas de sistemas ya usan <h4> y se quedan
   como están; las landings usan <h3> y aquí tiene el mismo aspecto. */
.paso h3{margin-top:8px;font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}

/* La comparativa lleva min-width:720px porque compara tres columnas y por
   debajo de eso no se entiende: en el móvil se arrastra de lado a propósito.
   El extracto del CPQ solo tiene concepto e importe, así que cabe en un
   teléfono y arrastrarlo sería una molestia gratuita. */
.cmp-tabla.dos{min-width:0}

/* La marca de la gama más elegida, en la landing de gamas. Filo fino y letra
   menuda: señala sin gritar. Las etiquetas de venta se quitaron de las
   tarjetas del catálogo, no de aquí.

   Va fuera del flujo, en la esquina, porque dentro empujaba el título de su
   ficha y dejaba los tres desalineados: dos arriba y el marcado más abajo,
   que es justo lo contrario de lo que se quiere destacar. */
.sc-feat{position:relative}
.sc-feat .flag{position:absolute;top:clamp(22px,2.6vw,32px);right:clamp(22px,2.6vw,32px);
  padding:5px 11px;border-radius:999px;border:1px solid var(--ink);
  font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink)}
/* con la marca en la esquina, el título no puede llegar hasta ella */
.sc-feat:has(.flag) h3{padding-right:130px}

/* ═══════════════════════════════════════════════════════════════════════════
   MIGAS DE PAN · las mismas del catálogo y las fichas, para las páginas de
   contenido. Van encima del H1 y repiten lo que dice el BreadcrumbList.
   ═══════════════════════════════════════════════════════════════════════════ */
.migas{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:18px;
  font-family:var(--sans);font-size:13px;letter-spacing:.02em;color:var(--gray)}
.migas a{color:var(--gray);text-decoration:none;transition:color .2s;padding-block:3px}
.migas a:hover{color:var(--ink)}
.migas [aria-current]{color:var(--ink);font-weight:500}
.mg-s{opacity:.5}
/* sobre la foto del hero, en claro */
.sc-hero:has(.sc-hero-img) .migas,.sc-hero:has(.sc-hero-img) .migas a{color:rgba(255,255,255,.74)}
.sc-hero:has(.sc-hero-img) .migas a:hover,.sc-hero:has(.sc-hero-img) .migas [aria-current]{color:#fff}

/* Los mismos bloques con encabezado real: en una lista de comprobación o en
   la lista numerada, cuando cada punto es un apartado, va un <h3>. */
.check-list h3{display:block;font-size:clamp(16px,1.25vw,18px);font-weight:500;color:var(--ink)}
.lista-num .it h3{font-size:clamp(17px,1.4vw,20px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}
.lista-num .it p.lema{margin-top:4px;color:var(--ink);font-weight:500}
.lista-num .it a,.check-list a,.faq-body a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.faq-body p+p,.faq-body p+ul,.faq-body ul+p{margin-top:12px}
.faq-body ul{padding-left:20px;list-style:disc}
.sc-op cite a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.faq-body li{font-size:clamp(15px,1.2vw,17px);line-height:1.7;color:var(--gray)}


/* ═══════════════════════════════════════════════════════════════════════════
   LA LLAMADA, ARRIBA (21-09) · el bloque de CTA que cerraba las páginas
   editoriales sube justo debajo del hero: es lo que interesa convertir y ahí
   se ve. Es la misma pieza que .cta-bar (caja blanca con filete fino), dentro
   del ancho de la página y no a sangre.
   El botón de todas las llamadas va en el verde de la marca, como el de la
   cabecera: degradado difuso con un volumen suave y el texto en tinta.
   ═══════════════════════════════════════════════════════════════════════════ */
.sc-cta-top{padding:clamp(28px,4.5vh,48px) 0 0}
.sc-cta-top .cta-bar{margin-top:0}
.cta-bar h2{font-size:clamp(19px,1.9vw,25px);font-weight:500;letter-spacing:-.01em;line-height:1.2;color:var(--ink)}
.cta-bar .sc-btn,.sc-cta .sc-btn,.sc-btn.verde{
  background:radial-gradient(130% 160% at 18% 0%,#D6E76A 0%,rgba(214,231,106,0) 58%),
    radial-gradient(110% 150% at 88% 115%,#87A300 0%,rgba(135,163,0,0) 62%),#A8B800;
  border-color:#9CAF00;color:#101010;font-weight:600;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.45),inset 0 -2px 4px rgba(56,84,0,.18),0 3px 10px -4px rgba(72,110,0,.45)}
.cta-bar .sc-btn:hover,.sc-cta .sc-btn:hover,.sc-btn.verde:hover{background:#D6E76A;border-color:#D6E76A;color:#101010}
.sc-hero:has(.sc-hero-img) .sc-btn.verde{border-color:#9CAF00;color:#101010}
.sc-hero:has(.sc-hero-img) .sc-btn.verde:hover{background:#D6E76A;border-color:#D6E76A;color:#101010}
.cta-bar .sc-btn svg,.sc-cta .sc-btn svg,.sc-btn.verde svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.cta-bar .sc-btn:hover svg,.sc-cta .sc-btn:hover svg,.sc-btn.verde:hover svg{transform:translateX(3px)}
/* en móvil la barra se apila: el botón a todo el ancho y centrado, así los textos largos
   («Pide tu presupuesto sin compromiso») no quedan como un botón partido de cualquier manera */
@media(max-width:820px){.cta-bar .sc-btn{width:100%;justify-content:center;text-align:center}}

/* Ritmo de fondos (21-09): una sección gris que sigue a otra gris pasa a blanco. Sin esto, las
   fichas de sistemas encadenaban hasta seis secciones grises y se leían como una losa. */
.sc .sc-claro{background:transparent}

/* Columna del título con imagen (21-09): en las secciones .sc-why de texto largo el título se
   quedaba solo arriba y la columna, vacía. El título y la foto acompañan mientras se lee. */
.sc-why-l{position:sticky;top:calc(var(--hdr-h,62px) + 28px)}
.sc-why-img{margin:clamp(22px,3vh,32px) 0 0;overflow:hidden;aspect-ratio:3/2;background:#101010}
.sc-why-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:820px){.sc-why-l{position:static}}

/* ── Fotos del mapa en móvil (21-09) ──
   Los heros y las bandas a sangre llevan en móvil una foto vertical del mapa (<picture> con
   <source media="(max-width: 700px)">): ahí el hueco es vertical y se ve la casa entera. En
   escritorio siguen los renders apaisados. El <picture> no pinta caja: la imagen se coloca
   como si fuera hija directa del hueco. */
.sc-hero-img>picture,.sc-para>picture{display:contents}