:root{
  /* Paleta principal — Manual de Identidad Corporativa v1.0, ap. 10 */
  --antracita:#2A2F32; --oro:#C7963F; --marfil:#F8F3F2; --negro:#000000; --blanco:#FFFFFF;
  /* Paleta de apoyo — ap. 11 */
  --champan:#E4C58F; --gris-medio:#6E7378; --gris-claro:#EFEBE8;
  /* Grises de texto derivados del gris medio, oscurecidos para cumplir WCAG 2.2 AA */
  --gris-texto:#5C6165;
  /* Tipografía — ap. 12, con las cadenas de sustitución web del manual */
  --display:'Century Gothic','Futura','Montserrat','Trebuchet MS',sans-serif;
  --texto:'Calibri','Segoe UI','Helvetica Neue',Arial,sans-serif;
  --serif:Georgia,'Times New Roman',serif;
  --pad:clamp(20px,5vw,64px); --sec:clamp(72px,8.5vw,140px); --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px}
body{margin:0;background:var(--marfil);color:var(--antracita);font-family:var(--texto);font-size:17.5px;line-height:1.55;-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{margin:0;line-height:1.12;font-weight:700}
p{margin:0}
img{display:block;max-width:100%;height:auto}
a{color:#7A5A21;text-decoration:none}
a:hover{color:var(--antracita)}
[data-on-dark] a{color:var(--oro)}
[data-on-dark] a:hover{color:var(--blanco)}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
input,textarea,button{font:inherit;color:inherit}
@media (max-width:1100px){[data-nav]{display:none!important}}
@media (max-width:700px){[data-hide-sm]{display:none!important}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes regla{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Boton dorado: antes era un handler de JS (hoverOro/outOro).
   !important porque el color base va en un style= en linea. */
.btn-oro{transition:background .18s ease}
.btn-oro:hover,.btn-oro:focus-visible{background:#D8AC5E!important}
/* Bloques que el runtime montaba y desmontaba (<sc-if>) y que ahora
   simplemente se ocultan. !important para ganar a un display= en linea. */
[hidden]{display:none!important}

/* ── Menú en móvil ────────────────────────────────────────────────────
   Por debajo de 1100px la navegación no cabe en la barra. En vez de
   ocultarla sin más, se pliega bajo la cabecera y se abre con el botón.
   El botón sólo existe en esa franja: en escritorio estorba.          */
@media (max-width:1100px){
  [data-menu-btn]{display:block!important}

  nav[data-nav]{
    display:none!important;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;
    gap:0!important;
    background:rgba(0,0,0,.97);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(199,150,63,.28);
    border-bottom:2px solid var(--oro);
    padding:6px var(--pad) 14px;
    max-height:calc(100vh - 74px);
    overflow-y:auto;
  }
  nav[data-nav][data-abierto]{display:flex!important}

  nav[data-nav] a{
    padding:15px 2px;
    font-size:13px;
    border-bottom:1px solid rgba(248,243,242,.1);
  }
  nav[data-nav] a:last-child{border-bottom:0}
}

/* El botón vive oculto salvo en la franja de arriba; `hidden` en el HTML
   lo mantiene fuera hasta que el CSS decide mostrarlo. */
[data-menu-btn]{display:none}
[data-menu-btn][data-abierto]{border-color:var(--oro);color:var(--oro)}

/* En pantallas estrechas la cabecera lleva logotipo, botón de menú, ES/EN y
   la llamada a la acción. Con el botón de menú nuevo ya no cabía todo y el
   botón dorado se salía por la derecha: aquí se aprieta lo justo. */
@media (max-width:640px){
  header > div{gap:10px!important}
  header a.btn-oro{
    font-size:11px!important;
    letter-spacing:.06em!important;
    padding:10px 12px!important;
  }
}

/* ── Rejillas de tarjetas ─────────────────────────────────────────────
   Las líneas finas entre tarjetas se pintaban con el fondo del contenedor
   asomando por el hueco de 1px. Funciona mientras todas las filas estén
   llenas; en cuanto sobra una celda —cinco servicios en filas de dos o de
   tres— ese hueco se ve como un rectángulo gris.

   Ahora la línea la dibuja cada tarjeta con una sombra de 1px, que no
   ocupa espacio. Las de al lado comparten esa línea a través del hueco,
   así que se ve igual, y las celdas vacías no pintan nada.            */
[data-rejilla] > *{box-shadow:0 0 0 1px #E3DEDB}
/* La misma idea sobre fondo negro, con la línea en oro. */
[data-rejilla="oro"] > *{box-shadow:0 0 0 1px rgba(199,150,63,.26)}