/* estilos-layout.css — estructura, grid, cabecera, pie, breakpoints */

.contenedor{
  max-width:var(--max-content);
  margin:0 auto;
  padding:0 var(--gutter);
}
@media (max-width:600px){
  .contenedor{padding:0 var(--gutter-mobile);}
}

/* Cabecera */
.cabecera{
  background:var(--color-bg-dark);
  color:var(--color-text-ondark);
  padding:14px 0;
}
.cabecera .contenedor{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.marca{
  font-family:var(--font-heading);
  font-size:var(--fs-22);
  color:var(--color-text-ondark);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
}
.marca:hover{color:var(--color-accent-terracotta);}
.badge-18{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:2.4em;
  padding:2px 8px;
  border:2px solid var(--color-accent-terracotta);
  border-radius:6px;
  font-size:var(--fs-14);
  font-weight:600;
  color:var(--color-accent-terracotta);
  letter-spacing:0.02em;
}
.nav-principal{
  display:flex;
  flex-wrap:wrap;
  gap:4px 18px;
}
.nav-principal a{
  color:var(--color-text-ondark);
  text-decoration:none;
  font-size:var(--fs-14);
  font-weight:600;
  padding:6px 2px;
  border-bottom:2px solid transparent;
}
.nav-principal a:hover,
.nav-principal a[aria-current="page"]{
  border-bottom-color:var(--color-accent-brass);
  color:var(--color-accent-terracotta);
}
.nav-toggle{
  display:none;
  background:transparent;
  border:2px solid var(--color-text-ondark);
  color:var(--color-text-ondark);
  border-radius:var(--radius-sm);
  padding:6px 10px;
}
@media (max-width:900px){
  .nav-toggle{display:inline-flex;align-items:center;gap:6px;}
  .nav-principal{
    flex-basis:100%;
    display:none;
    flex-direction:column;
    gap:10px;
    padding-top:10px;
    border-top:1px solid rgba(234,243,241,0.2);
  }
  .nav-principal.abierta{display:flex;}
}

/* Migas de pan */
.migas{
  font-size:var(--fs-12);
  padding:12px 0;
  color:var(--color-text-onlight);
}
.migas ol{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:4px;
}
.migas li:not(:last-child)::after{content:"›";margin-left:6px;color:var(--color-accent-brass);}
.migas a{color:var(--color-text-onlight);}

/* Hero */
.hero{
  background:linear-gradient(180deg,var(--color-bg-dark) 0%, #0E3843 100%);
  color:var(--color-text-ondark);
  padding:48px 0 40px;
  position:relative;
  overflow:hidden;
}
.hero h1{color:var(--color-text-ondark);max-width:22ch;}
.hero .lead{
  font-size:var(--fs-18);
  max-width:60ch;
  color:var(--color-text-ondark);
  opacity:0.92;
}
.hero-ola{
  display:block;
  width:100%;
  height:auto;
  margin-top:24px;
}

/* Secciones */
main{display:block;}
.seccion{padding:40px 0;}
.seccion--estrecha{padding:28px 0;}
.seccion-alt{background:var(--color-surface-dark);color:var(--color-text-ondark);}
.seccion-alt h2, .seccion-alt h3{color:var(--color-text-ondark);}

/* Grillas de tarjetas */
.grilla-tarjetas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:20px;
  margin-top:24px;
}
.grilla-2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:20px;
}

/* Pie de página */
.pie{
  background:var(--color-bg-dark);
  color:var(--color-text-ondark);
  padding:36px 0 24px;
  margin-top:48px;
}
.pie a{color:var(--color-accent-terracotta);}
.pie-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:24px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(234,243,241,0.15);
}
.pie-grid h4{color:var(--color-text-ondark);font-size:var(--fs-16);}
.pie-grid ul{list-style:none;padding:0;margin:0;}
.pie-grid li{margin-bottom:6px;}
.pie-base{
  padding-top:18px;
  font-size:var(--fs-12);
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  opacity:0.85;
}

@media (max-width:600px){
  .hero{padding:32px 0 28px;}
  h1{font-size:var(--fs-28);}
  .seccion{padding:28px 0;}
}