/* Páginas de servicio, zona e índices (src/paginasSeo.js). Mismo suelo de
   hormigón claro, naranja de la marca y letra condensada que la portada. */

.skip-link{position:absolute;left:-9999px;top:0}
.skip-link:focus{left:12px;top:12px;z-index:100;background:var(--grafito);color:var(--losa);padding:10px 14px}

.pag-cabecera{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--suelo) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--junta)}
.pag-cabecera-fila{display:flex;align-items:center;gap:20px;min-height:68px}
.pag-marca{display:flex;align-items:center;gap:10px;margin-right:auto}
.pag-marca img{width:52px;height:auto;filter:brightness(.12)}
.pag-marca span{font-size:12px;line-height:1.15;font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.02em;color:var(--grafito-2)}
.pag-menu{display:flex;gap:22px;font-weight:650;font-stretch:88%;text-transform:uppercase;font-size:14px;letter-spacing:.03em}
.pag-menu a{padding:6px 0;border-bottom:2px solid transparent}
.pag-menu a:hover{border-color:var(--naranja)}
.pag-menu-movil{display:none;position:relative}
.pag-menu-movil summary{list-style:none;cursor:pointer;font-weight:700;text-transform:uppercase;font-size:14px;padding:8px 12px;border:1px solid var(--junta-2)}
.pag-menu-movil summary::-webkit-details-marker{display:none}
.pag-menu-movil nav{position:absolute;right:0;top:calc(100% + 8px);display:grid;gap:2px;background:var(--losa);border:1px solid var(--junta);box-shadow:var(--sombra);min-width:200px;padding:8px}
.pag-menu-movil nav a{padding:10px 12px;font-weight:650;text-transform:uppercase;font-size:14px}
.pag-cta-cabecera{white-space:nowrap}
@media (max-width:980px){.pag-menu{display:none}.pag-menu-movil{display:block}.pag-marca span{display:none}}
.pag-marca{flex-shrink:0}

.pag-migas{padding-top:22px;font-size:14px;color:var(--gris)}
.pag-migas ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pag-migas li+li::before{content:"/";margin-right:6px;color:var(--junta-2)}
.pag-migas a{text-decoration:underline;text-underline-offset:3px}

.pag-heroe{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(28px,5vw,64px) 0 clamp(36px,6vw,80px)}
.pag-heroe--zona,.pag-heroe:not(:has(.pag-heroe-foto)){grid-template-columns:minmax(0,1fr);max-width:980px;margin-left:max(var(--gutter),calc((100% - var(--max)) / 2))}
.pag-antetitulo{font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.08em;font-size:13px;color:var(--naranja-tinta);margin-bottom:14px}
.pag-heroe h1{font-weight:830;font-stretch:72%;text-transform:uppercase;font-size:clamp(36px,5vw,72px);line-height:.95;letter-spacing:-.005em}
.pag-intro{font-size:clamp(18px,1.6vw,21px);line-height:1.55;margin:20px 0 26px;color:var(--grafito-2);max-width:62ch}
.pag-heroe-foto{margin:0;aspect-ratio:4/3;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - var(--chaflan) * 3),calc(100% - var(--chaflan) * 3) 100%,0 100%);background:var(--losa-2)}
.pag-heroe-foto img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.pag-heroe{grid-template-columns:1fr}.pag-heroe-foto{order:-1}}

.pag-botones{display:flex;flex-wrap:wrap;gap:12px}
.pag .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;font-weight:750;font-stretch:88%;text-transform:uppercase;letter-spacing:.03em;font-size:15px;border:2px solid var(--grafito)}
.pag .btn-primary{background:var(--naranja);border-color:var(--naranja);color:var(--grafito)}
.pag .btn-primary:hover{background:var(--naranja-osc);border-color:var(--naranja-osc)}
.pag .btn-ghost{background:transparent}
.pag .btn-ghost:hover{background:var(--grafito);color:var(--losa)}

.pag-usos{padding:clamp(28px,4vw,48px) 0}
.pag-usos ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 24px;margin:18px 0 0;padding:0;list-style:none}
.pag-usos li{padding:12px 0 12px 28px;border-top:1px solid var(--junta);position:relative}
.pag-usos li::before{content:"";position:absolute;left:0;top:20px;width:14px;height:3px;background:var(--naranja)}

.pag h2{font-size:clamp(28px,3.4vw,46px)}
.pag-h2-chico{font-size:clamp(22px,2.4vw,30px)!important;margin-top:36px!important}
.pag-texto{display:grid;gap:clamp(28px,4vw,48px);padding:clamp(24px,4vw,48px) 0;max-width:860px;margin-left:max(var(--gutter),calc((100% - var(--max)) / 2))}
.pag-bloque h2{margin-bottom:14px}
.pag-bloque p{font-size:18px;line-height:1.65;color:var(--grafito-2);max-width:70ch}

.pag-faq{padding:clamp(28px,4vw,56px) 0;max-width:860px;margin-left:max(var(--gutter),calc((100% - var(--max)) / 2))}
.pag-faq h2,.pag-faq-portada h2{margin-bottom:18px}
.pag-faq details,.pag-faq-portada details{border-top:1px solid var(--junta-2);padding:4px 0}
.pag-faq details:last-child,.pag-faq-portada details:last-child{border-bottom:1px solid var(--junta-2)}
.pag-faq summary,.pag-faq-portada summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font-weight:720;font-stretch:90%;font-size:19px;position:relative}
.pag-faq summary::-webkit-details-marker,.pag-faq-portada summary::-webkit-details-marker{display:none}
.pag-faq summary::after,.pag-faq-portada summary::after{content:"+";position:absolute;right:6px;top:12px;font-size:26px;color:var(--naranja-tinta)}
.pag-faq details[open] summary::after,.pag-faq-portada details[open] summary::after{content:"–"}
.pag-faq details p,.pag-faq-portada details p{margin:0 0 18px;color:var(--grafito-2);max-width:70ch;font-size:17px}
.pag-faq-portada .container{max-width:980px}

.pag-relacionados{padding:clamp(24px,4vw,48px) 0}
.pag-relacionados>h2{margin-bottom:18px}
.pag-tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0;padding:0;list-style:none}
.pag-tarjetas a{display:grid;gap:8px;height:100%;padding:20px;background:var(--losa);border:1px solid var(--junta);transition:border-color .2s var(--ease-out),transform .2s var(--ease-out)}
.pag-tarjetas a:hover{border-color:var(--naranja);transform:translateY(-2px)}
.pag-tarjetas strong{font-weight:780;font-stretch:80%;text-transform:uppercase;font-size:20px;line-height:1.05}
.pag-tarjetas span{color:var(--gris);font-size:15px;line-height:1.45}
.pag-tarjetas--obras img{aspect-ratio:16/10;object-fit:cover;width:100%;margin:-20px -20px 6px;width:calc(100% + 40px);max-width:none}
.pag-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.pag-chips a{display:inline-block;padding:9px 16px;border:1px solid var(--junta-2);font-weight:650;font-size:15px}
.pag-chips a:hover{background:var(--grafito);color:var(--losa);border-color:var(--grafito)}

.pag-cierre{background:var(--grafito);color:var(--losa);padding:clamp(48px,7vw,96px) 0;margin-top:clamp(32px,5vw,64px)}
.pag-cierre h2{color:var(--losa);margin-bottom:14px}
.pag-cierre p{color:var(--junta);max-width:60ch;margin-bottom:24px}
.pag-cierre .btn-ghost{border-color:var(--losa);color:var(--losa)}
.pag-cierre .btn-ghost:hover{background:var(--losa);color:var(--grafito)}

.pag-contacto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);padding:clamp(16px,3vw,32px) 0 clamp(32px,5vw,64px)}
.pag-contacto address{font-style:normal;display:grid;gap:4px;margin:16px 0 24px}
.pag-contacto address a{text-decoration:underline;text-underline-offset:3px}
.pag-formulario{display:grid;gap:14px;background:var(--losa);border:1px solid var(--junta);padding:clamp(20px,3vw,32px)}
.pag-formulario label{display:grid;gap:6px;font-weight:650;font-size:15px}
.pag-formulario input,.pag-formulario textarea{border:1px solid var(--junta-2);background:#fff;padding:12px;font-size:16px;border-radius:0}
.pag-formulario-estado{min-height:1.4em;margin:0;font-weight:650}
.pag-formulario-estado[data-estado="error"]{color:#a3220f}
.pag-formulario-estado[data-estado="ok"]{color:#1d6b2f}
.pag-trampa{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
@media (max-width:900px){.pag-contacto{grid-template-columns:1fr}}

.pag-pie{background:var(--losa-2);padding:clamp(40px,6vw,72px) 0 24px;margin-top:0;font-size:15px}
.pag-pie-grilla{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.pag-pie address{font-style:normal;margin:12px 0}
.pag-pie a:hover{text-decoration:underline}
.pag-pie ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.pag-pie-marca,.pag-pie-titulo{font-weight:780;font-stretch:82%;text-transform:uppercase;letter-spacing:.02em;margin-bottom:10px}
.pag-pie-legal{border-top:1px solid var(--junta-2);margin-top:28px;padding-top:16px;color:var(--gris);font-size:13px}
@media (max-width:900px){.pag-pie-grilla{grid-template-columns:1fr}}

/* Portada: H1 descriptivo arriba del titular de marca y enlaces del pie. */
.hero-title{text-wrap:balance}
.hero-seo{font-weight:700;font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(12px,1.1vw,14px);line-height:1.35;color:var(--grafito-2);max-width:72ch;margin:0 0 18px}
.pag-pie-enlaces{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;padding:28px 0 8px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);margin-top:28px;font-size:15px}
.pag-pie-enlaces ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px 18px}
.pag-pie-enlaces a:hover{text-decoration:underline}
.servicio-texto h3 a,.equipment-info h3 a{text-decoration:none}
.servicio-texto h3 a:hover,.equipment-info h3 a:hover{text-decoration:underline;text-decoration-color:var(--naranja);text-underline-offset:4px}
.pag-parrafo{font-size:17px;color:var(--grafito-2);max-width:70ch;margin:0 0 16px}
.pag-enlace{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--naranja)}
.pag-tambien{font-size:15px;color:var(--grafito-2);max-width:70ch;margin:0 0 18px}
.pag-tambien strong{color:var(--grafito)}
.pag-tabla-marco{overflow-x:auto;-webkit-overflow-scrolling:touch}
.pag-tabla{width:100%;border-collapse:collapse;font-size:16px}
.pag-tabla caption{text-align:left;font-weight:700;padding:0 0 12px}
.pag-tabla th,.pag-tabla td{text-align:left;vertical-align:top;padding:12px 14px 12px 0;border-top:1px solid var(--junta)}
.pag-tabla thead th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--grafito-2);border-top:0}
.pag-tabla tbody th{white-space:nowrap;padding-right:24px}
.pag-tabla td{color:var(--grafito-2)}
@media (max-width:420px){.pag-cabecera-fila{gap:10px}.pag-cabecera .pag-cta-cabecera{padding-inline:14px;font-size:13px}}
@media (max-width:340px){.pag-cabecera .pag-cta-cabecera{padding-inline:10px;font-size:12px;letter-spacing:0}}