/* Skigate — hoja de estilos común */

:root{
  --fondo:#eef4f1;
  --fondo-alt:#dfeae5;
  --fondo-contraste:#1c2a28;
  --texto:#16211f;
  --texto-2:#5f7370;
  --texto-claro:#eef4f1;
  --acento:#2f6f63;
  --acento-2:#c25340;
  --serif:Georgia,'Times New Roman',serif;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --gap:24px;
}

*{box-sizing:border-box;}

html{-webkit-text-size-adjust:100%;}

body{
  margin:0;
  background:var(--fondo);
  color:var(--texto);
  font-family:var(--serif);
  font-size:18px;
  line-height:1.65;
  overflow-x:hidden;
}

/* ---------- rejilla base ---------- */

.wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 28px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:var(--gap);
}

/* ---------- tipografía ---------- */

h1,h2,h3{font-weight:400;margin:0;}

h1{
  font-size:clamp(2.4rem,6.2vw,4.3rem);
  line-height:1.04;
  letter-spacing:-0.015em;
}

h2{
  font-size:clamp(1.55rem,3vw,2.1rem);
  line-height:1.18;
  margin-bottom:.7em;
}

h3{
  font-style:italic;
  font-size:1.22rem;
  line-height:1.3;
  margin:2em 0 .5em;
  color:var(--texto);
}

p{margin:0 0 1.35em;}

p:last-child{margin-bottom:0;}

a{color:var(--acento);text-decoration:underline;text-underline-offset:3px;}

a:hover{text-decoration-thickness:2px;}

a:focus-visible,
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:3px;
}

strong{font-weight:700;}

.lead{
  font-size:1.12rem;
  color:var(--texto-2);
}

.pie{
  font-family:var(--serif);
  font-style:italic;
  font-size:.92rem;
  line-height:1.45;
  color:var(--texto-2);
  margin-top:.8em;
}

/* ---------- cabecera y navegación ---------- */

.cabecera{
  padding:26px 0 22px;
  border-bottom:1px solid rgba(47,111,99,.35);
}

.cabecera .wrap{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:14px 28px;
}

.marca{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.06em;
  color:var(--texto);
  text-decoration:none;
}

.marca:hover{color:var(--acento);}

.nav-lista{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:6px 22px;
  margin:0;
  padding:0;
  font-family:var(--sans);
  font-size:.8rem;
  letter-spacing:.04em;
}

.nav-lista a{
  color:var(--texto-2);
  text-decoration:none;
  padding-bottom:2px;
  border-bottom:1px solid transparent;
}

.nav-lista a:hover{color:var(--acento);border-bottom-color:var(--acento);}

.nav-lista a[aria-current="page"]{
  color:var(--texto);
  border-bottom-color:var(--acento-2);
}

/* ---------- portada: hero ---------- */

.hero{padding:74px 0 96px;}

.hero .grid{row-gap:0;}

.hero h1{grid-column:1 / 9;grid-row:1;}

.hero-entrada{
  grid-column:1 / 5;
  grid-row:2;
  margin-top:38px;
}

.hero-figura{
  grid-column:9 / 13;
  grid-row:1 / span 2;
  align-self:start;
  margin:0;
  margin-top:clamp(90px,13vw,190px);
  max-width:480px;
}

.hero-figura img,
figure img{
  display:block;
  width:100%;
  height:auto;
}

/* ---------- secciones ---------- */

.seccion{
  padding:96px 0;
  border-top:1px solid rgba(47,111,99,.35);
}

.seccion--alt{background:var(--fondo-alt);}

.num{
  grid-column:1 / 2;
  font-family:var(--sans);
  font-size:.78rem;
  letter-spacing:.12em;
  color:var(--acento-2);
  padding-top:.5em;
}

.col-estrecha{grid-column:3 / 9;}

.col-ancha{grid-column:3 / 11;}

.col-media{grid-column:2 / 9;}

.seccion .grid > .num + *{margin-top:0;}

/* separadores finos */

.linea{
  border:0;
  border-top:1px solid rgba(47,111,99,.4);
  margin:56px 0 0;
}

/* ---------- listas ---------- */

.lista-doble{
  grid-column:3 / 13;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,5fr));
  column-gap:56px;
  row-gap:0;
  list-style:none;
  margin:34px 0 0;
  padding:0;
}

.lista-doble li,
.lista-simple li{
  padding:14px 0 14px 26px;
  border-top:1px solid rgba(47,111,99,.3);
  position:relative;
  line-height:1.5;
}

.lista-doble li::before,
.lista-simple li::before{
  content:"—";
  position:absolute;
  left:0;
  color:var(--acento);
}

.lista-simple{
  list-style:none;
  margin:26px 0 0;
  padding:0;
}

.texto-lista{
  list-style:none;
  padding:0;
  margin:1.2em 0 0;
}

.texto-lista li{
  padding-left:26px;
  position:relative;
  margin-bottom:.7em;
  line-height:1.55;
}

.texto-lista li::before{
  content:"·";
  position:absolute;
  left:6px;
  color:var(--acento-2);
  font-size:1.4em;
  line-height:1;
}

/* ---------- sección de contraste ---------- */

.contraste{
  background:var(--fondo-contraste);
  color:var(--texto-claro);
  padding:104px 0;
  border-top:0;
}

.contraste h2,
.contraste h3{color:var(--texto-claro);}

.contraste .num{color:var(--acento-2);}

.contraste a{color:#8fc9bd;}

.contraste .pie{color:#a9bfba;}

.contraste .lista-simple li{border-top-color:rgba(238,244,241,.22);}

.contraste .lista-simple li::before{color:#8fc9bd;}

.figura-detalle{
  grid-column:2 / 7;
  margin:0;
  max-width:430px;
}

.contraste-texto{grid-column:8 / 13;}

/* ---------- página interior ---------- */

.pagina{padding:70px 0 30px;}

.pagina h1{
  grid-column:1 / 10;
  font-size:clamp(2rem,4.6vw,3.1rem);
}

.pagina .entradilla{
  grid-column:1 / 7;
  margin-top:30px;
}

.bloque{
  padding:60px 0;
  border-top:1px solid rgba(47,111,99,.35);
}

.bloque--alt{background:var(--fondo-alt);}

/* About: columna de texto a la derecha, etiquetas a la izquierda */

.sobre-texto{grid-column:6 / 13;}

.etiquetas{
  grid-column:1 / 5;
  list-style:none;
  margin:.4em 0 0;
  padding:0;
  font-family:var(--sans);
  font-size:.82rem;
  letter-spacing:.03em;
  color:var(--texto-2);
}

.etiquetas li{
  padding:12px 0;
  border-top:1px solid rgba(194,83,64,.5);
}

.etiquetas li:last-child{border-bottom:1px solid rgba(194,83,64,.5);}

/* ---------- pie ---------- */

.pie-sitio{
  background:var(--fondo-contraste);
  color:var(--texto-claro);
  padding:70px 0 54px;
  margin-top:0;
}

.pie-sitio .wrap{
  display:grid;
  grid-template-columns:5fr 3fr 4fr;
  column-gap:var(--gap);
  row-gap:34px;
  align-items:start;
}

.pie-nombre{
  font-size:2rem;
  line-height:1.1;
  margin:0 0 .5em;
}

.pie-desc{
  font-size:.95rem;
  color:#a9bfba;
  max-width:34ch;
  margin:0;
}

.pie-nav{
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--sans);
  font-size:.85rem;
  line-height:2.1;
}

.pie-nav a,
.pie-sitio a{color:var(--texto-claro);text-decoration:none;border-bottom:1px solid rgba(238,244,241,.35);}

.pie-nav a:hover,
.pie-sitio a:hover{border-bottom-color:var(--acento-2);}

.pie-contacto{
  font-size:.98rem;
  line-height:1.7;
}

.pie-contacto .etiqueta{
  display:block;
  font-family:var(--sans);
  font-size:.75rem;
  letter-spacing:.12em;
  color:#a9bfba;
  margin-bottom:8px;
}

.pie-legal{
  grid-column:1 / -1;
  border-top:1px solid rgba(238,244,241,.22);
  padding-top:22px;
  font-family:var(--sans);
  font-size:.75rem;
  color:#a9bfba;
}

.pie-sitio .pie-legal a{color:#a9bfba;}

/* ---------- adaptación ---------- */

@media (max-width:900px){
  .hero{padding:52px 0 56px;}
  .hero h1{grid-column:1 / 13;}
  .hero-entrada{grid-column:1 / 13;grid-row:2;margin-top:28px;}
  .hero-figura{
    grid-column:1 / 13;
    grid-row:3;
    margin-top:44px;
    max-width:100%;
  }
  .seccion{padding:56px 0;}
  .contraste{padding:60px 0;}
  .num{grid-column:1 / 13;padding-top:0;margin-bottom:14px;}
  .col-estrecha,.col-ancha,.col-media,
  .lista-doble,.figura-detalle,.contraste-texto,
  .sobre-texto,.etiquetas,
  .pagina h1,.pagina .entradilla{grid-column:1 / 13;}
  .lista-doble{grid-template-columns:1fr;column-gap:0;margin-top:26px;}
  .figura-detalle{max-width:100%;margin-bottom:42px;}
  .etiquetas{margin-bottom:34px;}
  .bloque{padding:46px 0;}
  .pagina{padding:46px 0 20px;}
  .linea{margin-top:40px;}
  .pie-sitio .wrap{grid-template-columns:1fr;}
}

@media (max-width:620px){
  body{font-size:17px;}
  .wrap{padding:0 20px;}
  .cabecera .wrap{flex-direction:column;align-items:flex-start;}
  .nav-lista{gap:6px 18px;}
  .pie-nombre{font-size:1.7rem;}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;}
}