/* ==========================================================================
   KM0 Canary Experience — cabecera y pie ÚNICOS de todo el sitio.

   Esta hoja la cargan TODAS las páginas (portada, subpáginas, fichas, legales
   y 404) después de su hoja de tema, para que la cabecera y el pie sean
   idénticos en todas. Antes había tres cabeceras distintas con menús
   diferentes; el marcado se genera en tools/layout.py y el aspecto está aquí.
   No definir estilos de header/footer en styles.css ni en pages.css.
   ========================================================================== */

.km0-shell{
  width:min(calc(100% - 2rem),var(--km0-ancho,80rem));
  margin-inline:auto;
}
.km0-sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}

/* Cabecera --------------------------------------------------------------- */
.km0-header{
  position:sticky;
  z-index:120;
  top:0;
  border-bottom:1px solid rgba(13,64,60,.12);
  background:rgba(244,246,245,.95);
  backdrop-filter:blur(18px);
  font-family:'Figtree','Segoe UI',system-ui,sans-serif;
}
.km0-header__inner{
  min-height:4.6rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
}
.km0-brand{display:flex;flex:0 0 auto;align-items:center;gap:.68rem;color:#101614;text-decoration:none}
.km0-brand img{width:2.6rem;height:2.6rem;border-radius:50%}
.km0-brand__name{display:flex;flex-direction:column;line-height:1}
.km0-brand__name strong{font-size:1rem;font-weight:600;letter-spacing:.2em}
.km0-brand__name span{margin-top:.26rem;color:#5F6B67;font-size:.53rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase}

.km0-nav{display:flex;align-items:center;gap:clamp(1rem,2.6vw,2rem)}
.km0-nav ul{display:flex;align-items:center;gap:clamp(.85rem,2.3vw,1.7rem);margin:0;padding:0;list-style:none}
.km0-nav a{color:#101614;font-size:.75rem;font-weight:600;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.km0-nav ul a{position:relative;display:block;padding-block:.7rem;white-space:nowrap}
.km0-nav ul a:hover,.km0-nav ul a[aria-current="page"]{color:#087C72}
.km0-nav ul a[aria-current="page"]::after{
  content:"";
  position:absolute;
  inset:auto 0 .35rem;
  height:2px;
  background:currentColor;
}
/* el selector lleva .km0-nav porque el botón vive dentro del nav y «.km0-nav a»
   le ganaba en especificidad: el texto salía oscuro sobre el verde oscuro */
.km0-button,
.km0-nav .km0-button{
  display:inline-flex;
  min-height:2.9rem;
  align-items:center;
  justify-content:center;
  gap:.65rem;
  padding:.8rem 1.25rem;
  border-radius:.5rem;
  background:#0D403C;
  color:#fff;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.1em;
  text-decoration:none;
  text-transform:uppercase;
  white-space:nowrap;
  transition:transform .25s ease,background .25s ease;
}
.km0-button::after{content:"→";font-size:1.05rem;line-height:1}
.km0-button:hover,.km0-nav .km0-button:hover{transform:translateY(-2px);background:#087C72;color:#fff}

/* Botón de menú: solo en móvil */
.km0-menu-toggle{
  display:none;
  width:2.9rem;
  height:2.9rem;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(13,64,60,.22);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.km0-menu-toggle__barras,
.km0-menu-toggle__barras::before,
.km0-menu-toggle__barras::after{
  display:block;
  width:1.1rem;
  height:1.5px;
  background:#0D403C;
  transition:transform .25s ease,opacity .2s ease;
}
.km0-menu-toggle__barras::before,
.km0-menu-toggle__barras::after{content:"";position:absolute}
.km0-menu-toggle__barras::before{transform:translateY(-.32rem)}
.km0-menu-toggle__barras::after{transform:translateY(.32rem)}
.km0-menu-toggle{position:relative}
.km0-header.is-open .km0-menu-toggle__barras{transform:rotate(45deg)}
.km0-header.is-open .km0-menu-toggle__barras::before{opacity:0}
.km0-header.is-open .km0-menu-toggle__barras::after{transform:rotate(-90deg)}

@media (max-width:70rem){   /* 1120px: por debajo, el menú horizontal no cabe */
  .km0-header__inner{position:relative}
  .km0-brand__name{display:none}
  .km0-menu-toggle{display:flex}
  .km0-nav{
    position:absolute;
    z-index:5;
    inset:calc(100% + .55rem) 0 auto;
    display:grid;
    gap:.5rem;
    padding:.9rem;
    border:1px solid rgba(13,64,60,.14);
    border-radius:.9rem;
    background:#fff;
    box-shadow:0 1.4rem 3rem -1rem rgba(13,64,60,.3);
    opacity:0;
    visibility:hidden;
    transform:translateY(-.5rem);
    transition:opacity .25s ease,transform .25s ease,visibility 0s linear .25s;
  }
  .km0-header.is-open .km0-nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .km0-nav ul{display:grid;gap:.45rem}
  .km0-nav ul a{
    display:block;
    min-height:2.75rem;
    padding:.65rem .85rem;
    border-left:5px solid transparent;
    border-radius:.6rem;
    font-size:.8rem;
    white-space:normal;
  }
  /* Un color por sección: la clienta pidió (30/07) que se entienda que son
     opciones seleccionables. Solo en móvil; en escritorio Robin lo rechazó. */
  .km0-nav ul li:nth-child(1) a{border-left-color:#3E7C59;background:rgba(62,124,89,.13)}
  .km0-nav ul li:nth-child(2) a{border-left-color:#E9B44C;background:rgba(233,180,76,.16)}
  .km0-nav ul li:nth-child(3) a{border-left-color:#B4592C;background:rgba(180,89,44,.13)}
  .km0-nav ul li:nth-child(4) a{border-left-color:#2F6D8C;background:rgba(47,109,140,.13)}
  .km0-nav ul a[aria-current="page"]::after{display:none}
  .km0-button{width:100%}
}

/* Pie -------------------------------------------------------------------- */
.km0-footer{
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
  background:#0D403C;
  color:rgba(255,255,255,.82);
  font-family:'Figtree','Segoe UI',system-ui,sans-serif;
  font-size:.9rem;
  line-height:1.6;
}
.km0-footer a{color:inherit;text-decoration:none}
.km0-footer a:hover{color:#F3C347}
.km0-footer__top{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:2.5rem;
  padding-bottom:2.5rem;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.km0-footer__brand{display:flex;align-items:center;gap:.8rem;color:#fff;font-size:1rem}
.km0-footer__brand img{width:3.2rem;height:3.2rem;border-radius:50%}
.km0-footer__intro{max-width:26rem;margin:1rem 0 0;color:rgba(255,255,255,.72)}
.km0-footer__nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem}
.km0-footer__nav h2{
  margin:0 0 .8rem;
  color:#F3C347;
  font-family:'Figtree','Segoe UI',system-ui,sans-serif;
  font-size:.6rem;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.km0-footer__nav ul{display:grid;gap:.5rem;margin:0;padding:0;list-style:none}
.km0-footer__nav address{font-style:normal}
/* el correo es una sola palabra de 213 px: sin esto desbordaba la columna del pie
   y provocaba scroll horizontal (medido a 1024 px) */
.km0-footer__nav > *{min-width:0}
.km0-footer address,.km0-footer address a,.km0-footer__nav a{overflow-wrap:anywhere}
.km0-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:.6rem;
  padding-top:1.6rem;
  color:rgba(255,255,255,.6);
  font-size:.78rem;
}
.km0-footer__registro{
  margin:1.2rem 0 0;
  color:rgba(255,255,255,.55);
  font-size:.72rem;
  line-height:1.55;
}
@media (min-width:60rem){
  .km0-footer__top{grid-template-columns:minmax(0,.9fr) minmax(0,1.5fr)}
}
/* objetivos táctiles cómodos en móvil, igual que en el resto del sitio */
@media (max-width:51rem){
  .km0-footer__nav a,.km0-footer address a{display:inline-flex;min-height:2.5rem;align-items:center}
}
/* pantallas grandes: el mismo ancho útil que el resto del contenido */
@media (min-width:100rem){ .km0-shell{--km0-ancho:88rem} }
@media (min-width:120rem){ .km0-shell{--km0-ancho:96rem} }
@media (min-width:160rem){ .km0-shell{--km0-ancho:112rem} }
@media (min-width:200rem){ .km0-shell{--km0-ancho:124rem} }
@media (min-width:240rem){ .km0-shell{--km0-ancho:134rem} }