/* rediseno.css · Rediseño «sección alveolar» (octubre 2026)
   Se carga al final del <head> de todas las páginas, después de motion.css.
   Solo cambia el aspecto: no toca textos, enlaces, títulos ni datos estructurados.
   Motivo de la marca: el canto de una placa alveolar (una banda de hormigón con huecos redondos),
   que aparece al pie de la portada, bajo la cabecera de cada página y sobre el pie de página. */

/* ---------- 1. Tokens ---------- */
@property --r{syntax:'<length>'; inherits:false; initial-value:0px;}
:root{
  --grafito:#1E2326;      /* fondo oscuro, texto principal */
  --grafito-2:#272D31;
  --hormigon:#DADBD6;     /* bandas claras alternas */
  --hormigon-2:#C9CBC6;
  --papel:#E8E8E4;        /* fondo general */
  --blanco:#F3F3F0;
  --acero:#56626B;        /* texto secundario */
  --naranja:#EC6A1E;      /* el naranja de las naves de la fábrica: acción */
  --naranja-txt:#A6410B;  /* naranja legible sobre fondo claro (enlaces) */
  --slab-h:56px; --slab-r:15px; --slab-p:50px;
  /* Variables que ya usan las hojas anteriores */
  --concrete:var(--hormigon); --concrete-2:var(--hormigon-2); --paper:var(--papel);
  --ink:var(--grafito); --charcoal:var(--grafito); --steel:var(--acero); --oxide:var(--naranja-txt);
  --line:rgba(30,35,38,.16);
  --m-out:cubic-bezier(.23,1,.32,1);
}
@media(max-width:640px){:root{--slab-h:38px; --slab-r:10px; --slab-p:34px;}}
html body{background:var(--papel); color:var(--grafito);}
h1,h2,h3{letter-spacing:-.012em; text-wrap:balance;}
::selection{background:var(--naranja); color:var(--grafito);}
a:focus-visible,.btn:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--naranja); outline-offset:3px;}

/* Canto alveolar: banda maciza con huecos que dejan ver lo que hay detrás */
.rd-slab,
body.home .hero::after,
.top + main > .hero::after,
.foot::before, body.home footer::before{
  content:""; position:absolute; left:0; right:0; height:var(--slab-h); pointer-events:none;
  background:var(--grafito);
  --r:var(--slab-r);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .6px)) 50% 50% / var(--slab-p) 100% round no-repeat;
          mask:radial-gradient(circle at 50% 50%, transparent var(--r), #000 calc(var(--r) + .6px)) 50% 50% / var(--slab-p) 100% round no-repeat;
}

/* ---------- 2. Botones ---------- */
html body .btn,html body .btn-primary{background:var(--naranja); color:var(--grafito); border:2px solid var(--naranja); border-radius:2px; font-weight:600; box-shadow:none; filter:none;}
html body .btn.alt,html body .btn-secondary{background:transparent; color:inherit; border:2px solid currentColor;}
@media (hover:hover) and (pointer:fine){
  html body .btn:hover,html body .btn-primary:hover{background:#F47F38; border-color:#F47F38; box-shadow:none; filter:none; transform:none;}
  html body .btn.alt:hover,html body .btn-secondary:hover{background:rgba(127,127,127,.14); border-color:currentColor;}
}

/* ---------- 3. Cabeceras (portada, páginas y legales) ---------- */
body.home header,.top,body > header:has(.back){
  background:var(--grafito); color:var(--blanco); border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.home header .nav > a:first-child img{height:56px !important;}
body.home .navlinks a,.top .topnav a{color:#C3C8CB; opacity:1;}
body.home .navlinks a:hover,.top .topnav a:hover{color:#fff;}
.top .topnav a[aria-current="page"]{color:var(--naranja); box-shadow:inset 0 -2px 0 var(--naranja);}
body > header a.back{color:var(--blanco);}
body.home .nav-toggle,.top .topnav-toggle{color:var(--blanco); border-color:rgba(255,255,255,.22);}
.top .logo img{height:46px;}
@media(max-width:980px){
  body.home .navlinks{background:var(--grafito); border-bottom-color:rgba(255,255,255,.1);}
  body.home .navlinks a{border-top-color:rgba(255,255,255,.1); color:var(--blanco);}
}
@media(max-width:900px){
  .top .topnav{background:var(--grafito); border-bottom-color:rgba(255,255,255,.1);}
  .top .topnav a{border-top-color:rgba(255,255,255,.1); color:var(--blanco);}
  html:not(.js) .top .topnav{background:none;}
}
@media(max-width:980px){body.home header .nav > a:first-child img{height:46px !important;}}

/* ---------- 4. Portada: cabecera a pantalla completa ---------- */
body.home .hero{align-items:stretch; background:var(--grafito);}
body.home .hero .hero-photo::after{background:
  linear-gradient(0deg, rgba(18,22,25,.1) 0, rgba(18,22,25,.1) var(--slab-h), rgba(18,22,25,.88) var(--slab-h), rgba(18,22,25,.5) 34%, rgba(18,22,25,0) 64%),
  linear-gradient(90deg, rgba(18,22,25,.6) 0%, rgba(18,22,25,0) 58%);}
body.home .hero .hero-photo img{object-position:50% 70%;}
body.home .hero .hero-inner{display:flex; flex-direction:column; justify-content:flex-end; text-align:left;
  max-width:1240px; width:100%; margin:0 auto; padding-top:48px; padding-bottom:calc(var(--slab-h) + clamp(36px,6vh,72px));}
body.home .hero .hero-copy{flex:0 0 auto; display:block; max-width:none; margin:0;}
body.home .hero h1{font-size:clamp(2.5rem,5.4vw,5.2rem); line-height:.95; letter-spacing:-.02em; max-width:21ch; margin:0; text-shadow:none; color:#fff;}
body.home .hero .cta-row{justify-content:flex-start; margin:clamp(24px,4vh,40px) 0 0; padding-right:0; flex-wrap:wrap; gap:12px;}
body.home .hero .cta-row .btn{flex:0 0 auto; width:auto; min-height:52px; padding:14px 28px; font-size:1rem; white-space:nowrap; display:inline-flex; align-items:center;}
body.home .hero .btn-secondary{background:rgba(18,22,25,.35); color:#fff; border-color:rgba(255,255,255,.7);}
body.home .hero::after{bottom:-1px; z-index:1; background:var(--hormigon);}
@media(max-width:640px){
  body.home .hero .hero-photo img{object-position:78% 50%;}
  body.home .hero h1{font-size:clamp(2.3rem,11vw,3.3rem); max-width:none;}
  body.home .hero .cta-row{flex-wrap:nowrap; padding-right:64px;}
  body.home .hero .cta-row .btn{flex:1 1 0; padding:12px 10px; font-size:.92rem; justify-content:center; white-space:normal; text-align:center; line-height:1.15;}
}
@media(max-height:520px) and (orientation:landscape){
  body.home .hero h1{font-size:clamp(1.6rem,5vw,2.4rem);}
  body.home .hero .hero-inner{padding-bottom:calc(var(--slab-h) + 16px);}
}

/* ---------- 5. Portada: secciones ---------- */
body.home .wrap{max-width:1240px;}
body.home .section{padding:clamp(64px,9vw,128px) 0;}
body.home .section-head{max-width:none; margin-bottom:clamp(32px,4vw,56px);}
body.home .section-head h2,body.home .contact-intro h2,body.home .catalogo h2{font-size:clamp(2rem,4.2vw,3.5rem); line-height:1; max-width:17ch;}
body.home .section-head p,body.home .contact-intro p{font-size:1.06rem; color:var(--acero); max-width:52ch; margin-top:16px;}
body.home .eyebrow,.content .eyebrow{display:flex; align-items:center; gap:10px; text-transform:none; letter-spacing:0; font-size:.95rem; font-weight:600; color:var(--acero); margin-bottom:14px;}
body.home .eyebrow::before{content:""; width:12px; height:12px; border-radius:50%; border:3px solid var(--naranja); flex-shrink:0;}

/* Ritmo de fondos */
body.home .catalogo,body.home #servicios,body.home #zonas{background:var(--hormigon); border:0;}
body.home #soluciones,body.home #productos,body.home #soluciones-info,body.home #calidad,body.home #faq,body.home #empleo,body.home #contacto{background:var(--papel);}
body.home #productos,body.home #calidad{border-top:1px solid var(--line);}

/* Disposición en dos columnas: título fijo a la izquierda, contenido a la derecha */
@media(min-width:1000px){
  body.home #soluciones .wrap,body.home #productos .wrap,body.home #servicios .wrap,body.home #faq .wrap{
    display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:0 clamp(48px,6vw,96px); align-items:start;}
  body.home #soluciones .section-head,body.home #productos .section-head,body.home #servicios .section-head,body.home #faq .section-head{
    position:sticky; top:calc(var(--hdr,80px) + 40px); margin-bottom:0;}
}

/* Catálogo */
body.home .catalogo-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr); gap:clamp(40px,6vw,96px); align-items:stretch;}
body.home .catalogo h2{margin-bottom:18px !important;}
body.home .catalogo p{color:var(--acero) !important; font-size:1.06rem; max-width:46ch;}
body.home .catalogo-list{gap:0; border-top:2px solid var(--grafito);}
body.home .catalogo-list a{display:flex; align-items:center; justify-content:space-between; gap:20px; background:none; border:0; border-bottom:1px solid var(--line); border-radius:0;
  padding:22px 4px; font-family:'Archivo Narrow',sans-serif; font-weight:700; font-size:clamp(1.3rem,2.2vw,1.85rem); line-height:1.1; color:var(--grafito);}
body.home .catalogo-list a::after{content:""; width:44px; height:44px; flex-shrink:0; border-radius:50%; background:var(--grafito);
  -webkit-mask:none; mask:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3F3F0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px; transition:background-color .2s var(--m-out), translate .22s var(--m-out);}
@media (hover:hover) and (pointer:fine){
  body.home .catalogo-list a:hover{background:none; color:var(--naranja-txt);}
  body.home .catalogo-list a:hover::after{background-color:var(--naranja); translate:6px 0;}
}
body.home .catalogo-panel{border-radius:2px; border:0; aspect-ratio:auto; min-height:420px;}
@media(max-width:800px){body.home .catalogo-panel{aspect-ratio:4/3; min-height:0;}}
body.home .catalogo-panel .panel-text b{font-size:clamp(1.4rem,2vw,1.8rem); line-height:1.1;}

/* Tres disciplinas y servicios: filas */
body.home .services,body.home .services-2{display:block; background:none; border:0; border-top:2px solid var(--grafito);}
body.home .service,body.home .service-2{display:grid; grid-template-columns:56px minmax(0,1fr); gap:4px 24px; background:none; padding:28px 0 30px; border-bottom:1px solid var(--line);}
body.home .service svg,body.home .service-2 svg{grid-row:1 / span 3; width:40px; height:40px; margin:4px 0 0;}
body.home .service h3,body.home .service-2 h3{font-size:clamp(1.4rem,2vw,1.75rem); margin:0 0 6px;}
body.home .service p,body.home .service-2 p{font-size:1rem; color:var(--acero); margin:0; max-width:56ch;}
body.home .service-2 a{margin-top:12px; justify-self:start; color:var(--naranja-txt);}

/* Productos (acordeón) */
body.home .product-accordion{border-top:2px solid var(--grafito);}
body.home .product-item summary{padding:24px 2px;}
body.home .product-item summary .p-label{font-size:clamp(1.25rem,1.9vw,1.6rem); line-height:1.1;}
body.home .product-item summary .p-label small{font-size:.92rem; margin-top:4px;}
body.home .toggle-icon{width:40px; height:40px; border-radius:50%; border:2px solid var(--grafito); transition:background-color .2s var(--m-out);}
body.home .toggle-icon::before{left:11px; top:17px; background:var(--grafito);}
body.home .toggle-icon::after{left:17px; top:11px; background:var(--grafito);}
body.home .product-item[open] .toggle-icon{background:var(--naranja); border-color:var(--naranja);}

/* Proceso: banda oscura con un raíl que se completa al bajar */
body.home #proceso{background:var(--grafito); color:var(--blanco); border:0;}
body.home #proceso .section-head h2{color:#fff;}
body.home #proceso .section-head p{color:#AEB5BA;}
body.home .steps{position:relative; counter-reset:paso; gap:clamp(20px,3vw,40px); padding-top:40px;}
body.home .steps::before,body.home .steps::after{content:""; position:absolute; left:0; right:0; top:11px; height:2px; background:rgba(255,255,255,.16);}
body.home .steps::after{background:var(--naranja); transform-origin:0 50%;}
body.home .step{border:0; padding:0; counter-increment:paso; position:relative;}
body.home .step::before{content:counter(paso,decimal-leading-zero); display:block; font:700 clamp(3rem,6vw,5.2rem)/.9 'Archivo Narrow',sans-serif; color:var(--naranja); letter-spacing:-.03em; margin-bottom:18px;}
body.home .step::after{content:""; position:absolute; top:-40px; left:0; width:24px; height:24px; border-radius:50%; background:var(--grafito); border:3px solid var(--naranja); box-sizing:border-box;}
body.home .step b{font-size:1.4rem; color:#fff; margin-bottom:8px;}
body.home .step p{font-size:.98rem; color:#AEB5BA;}
@media(max-width:800px){body.home .steps::before,body.home .steps::after{display:none;} body.home .step::after{display:none;} body.home .steps{padding-top:0;}}

/* Fichas de soluciones: paneles altos */
body.home .seo-grid.five.solu-links{gap:12px;}
body.home .solu-card{display:flex; flex-direction:column; min-height:280px; padding:24px 22px 22px; background:var(--hormigon); border:0; border-radius:2px; color:var(--grafito);
  transition:background-color .28s var(--m-out), color .28s var(--m-out), translate .25s var(--m-out);}
body.home .solu-card b{font-size:clamp(1.4rem,1.8vw,1.75rem); line-height:1.05; margin-bottom:12px;}
body.home .solu-card span{font-size:.94rem; color:var(--acero); transition:color .28s var(--m-out);}
body.home .solu-card em{margin-top:auto; padding-top:24px; font-style:normal; font-weight:600; color:var(--naranja-txt); transition:color .28s var(--m-out);}
@media (hover:hover) and (pointer:fine){
  body.home .solu-card:hover{background:var(--grafito); color:#fff; translate:0 -4px;}
  body.home .solu-card:hover b{color:#fff;}
  body.home .solu-card:hover span{color:#AEB5BA;}
  body.home .solu-card:hover em{color:var(--naranja);}
}

/* Calidad */
body.home #calidad .seo-grid{gap:clamp(20px,3vw,40px);}
body.home #calidad .seo-card{border-top:2px solid var(--grafito); padding-top:22px;}
body.home #calidad .seo-card b{font-size:1.5rem; line-height:1.1; margin-bottom:10px;}
body.home #calidad .seo-card p{font-size:1rem;}

/* Zonas: tablero tipográfico */
body.home #zonas .seo-grid.five{display:block; border-top:2px solid var(--grafito);}
body.home #zonas .seo-card{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px; align-items:center; gap:16px; border-top:0; border-bottom:1px solid var(--line); padding:20px 2px;}
body.home #zonas .seo-card b{font-size:clamp(1.6rem,3.6vw,3rem); line-height:1; margin:0; transition:color .2s var(--m-out), translate .25s var(--m-out);}
body.home #zonas .seo-card span{font-size:1rem; color:var(--acero);}
body.home #zonas .seo-card::after{content:""; width:44px; height:44px; border-radius:50%; border:2px solid var(--grafito);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2326' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
  box-sizing:border-box; transition:background-color .2s var(--m-out), border-color .2s var(--m-out);}
@media (hover:hover) and (pointer:fine){
  body.home #zonas .seo-card:hover b{color:var(--naranja-txt); translate:8px 0;}
  body.home #zonas .seo-card:hover::after{background-color:var(--naranja); border-color:var(--naranja);}
}
@media(max-width:640px){body.home #zonas .seo-card{grid-template-columns:minmax(0,1fr) 40px; gap:4px 12px;} body.home #zonas .seo-card span{grid-column:1; grid-row:2;} body.home #zonas .seo-card::after{grid-column:2; grid-row:1 / span 2; width:40px; height:40px;}}
body.home .seo-note{font-size:1.06rem; margin-top:32px;}

/* Preguntas frecuentes */
body.home .faq,.content .faq{max-width:none; border-top:2px solid var(--grafito);}
body.home .faq details:first-child,.content .faq details:first-child{border-top:0;}
body.home .faq summary,.content .faq summary{font-size:clamp(1.12rem,1.5vw,1.3rem); padding:22px 56px 22px 0;}
body.home .faq summary::after,.content .faq summary::after{content:""; top:50%; right:0; width:36px; height:36px; margin-top:-18px; border-radius:50%; border:2px solid var(--grafito); box-sizing:border-box;
  background:linear-gradient(var(--grafito),var(--grafito)) center/12px 2px no-repeat, linear-gradient(var(--grafito),var(--grafito)) center/2px 12px no-repeat; transition:transform .25s var(--m-out), background-color .2s var(--m-out);}
body.home .faq details[open] summary::after,.content .faq details[open] summary::after{content:""; transform:rotate(45deg); background-color:var(--naranja); border-color:var(--naranja);}
body.home .faq details p{font-size:1.02rem;}

/* Empleo */
body.home #empleo.banner{padding:0;}
body.home .banner-inner{border:0; border-radius:2px; overflow:hidden; background:var(--hormigon);}
body.home .banner-text h2{font-size:clamp(1.8rem,3.2vw,2.6rem); line-height:1.02;}

/* Contacto */
body.home #contacto{padding-bottom:calc(clamp(64px,9vw,128px) + var(--slab-h));}
body.home .contact-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(40px,6vw,96px);}
body.home .contact-info dl{display:block; font-size:1.02rem; border-top:2px solid var(--grafito); padding-top:24px;}
body.home .contact-info dt{font-size:.9rem; margin-bottom:2px;}
body.home .contact-info dd{margin:0 0 18px; overflow-wrap:anywhere;}
body.home .contact-info dd a{color:var(--grafito);}
body.home .contact-info dd:nth-of-type(2) a{font:700 clamp(1.8rem,3vw,2.4rem)/1 'Archivo Narrow',sans-serif; text-decoration:none; letter-spacing:-.01em;}
body.home #contactForm{background:var(--blanco); padding:clamp(22px,3vw,40px); border-radius:2px;}
body.home #contactForm input,body.home #contactForm textarea,body.home .call-modal input,body.home .call-modal textarea,body.home .call-modal select{background:#fff; border:1px solid var(--hormigon-2); border-radius:2px;}
body.home #contactForm input:focus,body.home #contactForm textarea:focus{outline:2px solid var(--naranja); outline-offset:1px; border-color:var(--naranja);}
body.home #contactForm button[type=submit]{width:100%; min-height:54px; font-size:1.02rem;}
@media(max-width:800px){body.home .contact-grid{grid-template-columns:1fr;} body.home .catalogo-grid{grid-template-columns:1fr;}}

/* Pie de la portada */
body.home footer{position:relative; background:var(--grafito); color:#C3C8CB; border:0;}
body.home footer::before{top:calc(-1 * var(--slab-h) + 1px);}
body.home .footer-certs{border-bottom-color:rgba(255,255,255,.1);}
body.home .footer-certs .cert-group span{text-transform:none; letter-spacing:0; color:#AEB5BA; font-size:.95rem;}
body.home .cert-pill{border-color:rgba(255,255,255,.22); color:var(--blanco);}
body.home .cert-pill img{filter:invert(1);}
body.home .footer-seo a,body.home .footer-bottom,body.home .footer-links a{color:#C3C8CB;}
body.home .footer-seo a:hover,body.home .footer-links a:hover{color:var(--naranja);}
body.home .footer-seo{border-color:rgba(255,255,255,.1);}

/* ---------- 6. Páginas interiores ---------- */
.top .wrap,.top + main .wrap,.foot .wrap{max-width:1240px;}
.top + main > .hero{position:relative; background:var(--grafito); padding:clamp(40px,6vw,88px) 0 clamp(48px,6vw,88px); margin-bottom:var(--slab-h);}
.top + main > .hero::after{bottom:calc(-1 * var(--slab-h) + 1px);}
.hero-in{grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(32px,5vw,72px); align-items:end;}
.hero-txt h1{font-size:clamp(2.3rem,5vw,4.4rem); line-height:.98; letter-spacing:-.02em; color:#fff;}
.hero .lead{font-size:1.1rem; color:#C3C8CB; opacity:1;}
.hero .crumbs{color:#AEB5BA; opacity:1;} .hero .crumbs a{color:#C3C8CB;}
.hero .btn.alt{color:var(--blanco);}
.hero-img img{border:0; border-radius:2px; box-shadow:none;}
.hero-cap{color:#AEB5BA;}

.content{max-width:820px; padding-top:clamp(24px,4vw,48px); padding-bottom:clamp(56px,8vw,112px);}
.content > p,.content > ul,.content > ol{font-size:1.04rem;}
.content p,.content ul{color:#2A3035;}
.content h2{font-size:clamp(1.75rem,3.2vw,2.5rem); line-height:1.02; margin:clamp(48px,6vw,80px) 0 16px;}
/* Marca de título: una pequeña placa con tres alveolos */
.content h2::before{width:46px; height:14px; margin-bottom:16px; background:var(--naranja); border-radius:1px;
  -webkit-mask:radial-gradient(circle, transparent 4px, #000 4.6px) 0 0 / 15.33px 14px repeat-x;
          mask:radial-gradient(circle, transparent 4px, #000 4.6px) 0 0 / 15.33px 14px repeat-x;}
.content h3{font-size:1.4rem;}
.content a{color:var(--naranja-txt);}

/* Bloques que salen de la columna de texto */
.content > .gal,.content > .obra-grid,.content > .rel{margin-left:calc(50% - min(596px, 50vw - 24px)); margin-right:calc(50% - min(596px, 50vw - 24px));}
@media(max-width:560px){.content > .gal,.content > .obra-grid,.content > .rel{margin-left:calc(50% - 50vw + 20px); margin-right:calc(50% - 50vw + 20px);}}

/* Tablas */
.tbl{border-top:2px solid var(--grafito);}
.tbl table{font-size:.98rem;}
.tbl th,.tbl td{border:0; border-bottom:1px solid var(--line); padding:14px 14px;}
.tbl th{background:transparent; font-family:'Archivo Narrow',sans-serif; font-size:1.02rem; color:var(--acero); font-weight:600;}
.tbl tbody tr:nth-child(odd) td{background:rgba(255,255,255,.45);}
.tbl td:first-child{font-weight:600;}

/* Galería */
.gal{gap:10px;}
.gal figure{overflow:hidden; border-radius:2px;}
.gal figure img{transition:transform .6s var(--m-out);}
@media (hover:hover) and (pointer:fine){.gal figure:hover img{transform:scale(1.04);}}

/* Tarjetas de obra y de otras soluciones */
.obra-card,.rel-card{background:var(--hormigon); border:0; border-radius:2px; box-shadow:none;}
.obra-card{border-top:0;}
.obra-card img{transition:transform .6s var(--m-out);}
.obra-card b{font-size:1.2rem; padding:16px 18px 6px;} .obra-card span{padding:0 18px 18px;}
.rel-card{border-top:0; padding:22px 22px 24px; min-height:150px;}
.rel-card b{font-size:1.45rem; line-height:1.05; margin-bottom:8px;}
@media (hover:hover) and (pointer:fine){
  .obra-card:hover,.rel-card:hover{background:var(--grafito); color:#fff; transform:translateY(-4px); box-shadow:none; border-color:transparent;}
  .obra-card:hover b,.rel-card:hover b{color:#fff;}
  .obra-card:hover span,.rel-card:hover span{color:#AEB5BA;}
  .obra-card:hover img{transform:scale(1.04);}
}
.content .lista-obras{border-top:2px solid var(--grafito);}
.content .lista-obras li{border-bottom-color:var(--line);}
.content .lista-obras a{font-size:1.05rem; color:var(--grafito); padding:16px 4px;}

/* Llamada a la acción: banda naranja */
.cta{background:var(--naranja); color:var(--grafito); border:0; padding:clamp(56px,8vw,104px) 0 calc(clamp(56px,8vw,104px) + var(--slab-h)); text-align:left;}
.cta h2{font-size:clamp(2.2rem,5.4vw,4.4rem); line-height:.96; max-width:16ch; margin-bottom:16px;}
.cta p{color:var(--grafito); font-size:1.1rem; max-width:52ch; margin-bottom:28px;}
.cta .cta-row{justify-content:flex-start;}
html body .cta .btn{background:var(--grafito); border-color:var(--grafito); color:var(--blanco);}
html body .cta .btn.alt{background:transparent; color:var(--grafito); border-color:var(--grafito);}
@media (hover:hover) and (pointer:fine){html body .cta .btn:hover{background:#000; border-color:#000;} html body .cta .btn.alt:hover{background:rgba(30,35,38,.1); border-color:var(--grafito);}}

/* Pie de las páginas interiores */
.foot{position:relative; background:var(--grafito); color:#C3C8CB; padding-top:clamp(40px,5vw,64px);}
.foot::before{top:calc(-1 * var(--slab-h) + 1px); background:var(--grafito);}
.cta + .foot,.cta ~ .foot{margin-top:0;}
.foot a{color:var(--blanco);}
.foot a:hover{color:var(--naranja);}

/* ---------- 7. Movimiento ---------- */
@keyframes rd-punch{from{--r:0px;}}
@keyframes rd-rail{from{transform:scaleX(0);} to{transform:scaleX(1);}}
@keyframes rd-drift{from{transform:scale(1.02) translateY(0);} to{transform:scale(1.1) translateY(4%);}}
@media (prefers-reduced-motion:no-preference){
  /* Los alveolos se abren al cargar: el único momento orquestado de la página */
  body.home .hero::after{animation:rd-punch 1s var(--m-out) .45s both;}
  .top + main > .hero::after{animation:rd-punch .9s var(--m-out) .25s both;}
  body.home .hero h1{animation:m-rise .7s var(--m-out) 60ms both;}
  @supports (animation-timeline:scroll()){
    body.home .hero .hero-photo img{animation:m-settle 1.6s var(--m-out) both, rd-drift linear both; animation-timeline:auto, scroll(root); animation-range:normal, 0 100vh;}
    body.home .steps::after{animation:rd-rail linear both; animation-timeline:view(); animation-range:entry 10% cover 45%;}
  }
}

/* ---------- 8. Ajustes ---------- */
.content a.rel-card,.content a.obra-card{color:var(--grafito);}
@media(max-width:900px){.hero-in{grid-template-columns:1fr; align-items:start;}}
@media(min-width:901px) and (max-width:1300px){.top .topnav{gap:4px 16px; font-size:.86rem;}}

/* Portada: titular en la zona del cielo, botones alineados bajo él (9-oct-2026) */
body.home .hero .hero-inner{justify-content:flex-start; padding-top:clamp(36px,7vh,88px); padding-bottom:calc(var(--slab-h) + 24px);}
body.home .hero h1{max-width:24ch; font-size:clamp(2.2rem,4.6vw,4.6rem); line-height:.98;}
body.home .hero .hero-photo::after{background:
  linear-gradient(180deg, rgba(18,22,25,.62) 0%, rgba(18,22,25,.3) 34%, rgba(18,22,25,0) 56%),
  linear-gradient(0deg, rgba(18,22,25,.1) 0, rgba(18,22,25,.1) var(--slab-h), rgba(18,22,25,.35) var(--slab-h), rgba(18,22,25,0) 22%);}
body.home .hero .cta-row{display:grid; grid-template-columns:repeat(2,minmax(0,220px)); gap:12px; margin:clamp(20px,3.5vh,32px) 0 0; padding-right:0;}
body.home .hero .cta-row .btn{width:100%; min-height:52px; justify-content:center; text-align:center; box-sizing:border-box;}
@media(max-width:640px){
  body.home .hero h1{font-size:clamp(2rem,9vw,2.8rem); max-width:none;}
  body.home .hero .cta-row{grid-template-columns:repeat(2,minmax(0,1fr));}
  body.home .hero .hero-photo img{object-position:78% 75%;}
}
@media(min-width:641px){
  body.home .hero h1{max-width:30ch; font-size:clamp(2.2rem,min(4.3vw,7.6vh),4.4rem);}
  body.home .hero .hero-inner{padding-top:clamp(28px,6vh,80px);}
}
/* Titular más grande arriba; botones abajo y centrados (9-oct-2026) */
body.home .hero .hero-inner{justify-content:stretch;}
body.home .hero .hero-copy{flex:1 1 auto; display:flex; flex-direction:column;}
body.home .hero .cta-row{margin:auto auto 0; padding-top:24px; justify-content:center;}
@media(min-width:641px){
  body.home .hero h1{max-width:28ch; font-size:clamp(2.6rem,min(5.6vw,9.6vh),5.8rem); line-height:.95;}
}
@media(max-width:640px){body.home .hero h1{font-size:clamp(2.3rem,10.5vw,3.2rem);} body.home .hero .cta-row{width:100%;}}
@media(max-width:640px){body.home .hero .hero-inner{padding-bottom:calc(var(--slab-h) + 56px);}}
/* Móvil: botones más pequeños y más abajo; foto encuadrada a la derecha para ver la nave entera (9-oct-2026) */
@media(max-width:640px){
  body.home .hero .hero-inner{padding-bottom:calc(var(--slab-h) + 44px);}
  body.home .hero .cta-row{width:auto; grid-template-columns:repeat(2,auto); gap:10px;}
  body.home .hero .cta-row .btn{min-height:42px; padding:9px 16px; font-size:.86rem; white-space:nowrap; width:auto;}
  body.home .hero .hero-photo img{object-position:86% 70%;}
}
@media(max-width:640px) and (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){body.home .hero .hero-photo img{transform-origin:86% 70%;}}
}