/*
 * EL MARCO DE HATCHI.
 *
 * Los valores no son de mi cosecha: se leyeron del DOM ya renderizado de hatchi.eu.
 *
 *   pie      → fondo rgb(245,239,230), texto rgb(45,31,20), padding 64px 0 32px
 *   cabecera → 81 px de alto, fondo transparente, borde inferior 1px rgb(240,230,216)
 *   menú     → rgb(74,40,25) · «Descargar App» en rgb(247,168,79)
 *
 * El objetivo es que quien baje desde su cartilla se encuentre el mismo pie que en la web, con los
 * mismos enlaces y en el mismo orden. Que esto no parezca otra empresa, porque no lo es.
 */

.marco-cabecera {
  position: sticky; top: 0; z-index: 40;
  height: 81px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--papel) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.marco-dentro {
  width: 100%; max-width: 1220px; margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; gap: 20px;
}
.marco-logo { display: flex; align-items: center; flex: none; }
.marco-logo img { width: 46px; height: auto; display: block; }
.marco-menu { display: flex; gap: 26px; margin-left: 8px; flex: 1; }
.marco-menu a {
  color: var(--tierra); text-decoration: none; font-weight: 500; font-size: .98rem;
  white-space: nowrap;
}
.marco-menu a:hover { color: var(--ambar-hondo); }
.marco-reservar {
  flex: none; background: var(--tinta); color: var(--papel);
  padding: 11px 20px; border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: .93rem; white-space: nowrap;
}
.marco-reservar:hover { filter: brightness(1.15); }

@media (max-width: 640px) {
  /* En un móvil no caben el menú y el botón. Manda el botón: es lo que da dinero. El menú
     entero sigue estando abajo, en el pie, así que no se pierde nada. */
  .marco-menu { display: none; }
  .marco-dentro { padding: 0 16px; }
}

/* ── El pie ───────────────────────────────────────────────────────────────────────────── */
.marco-pie {
  margin-top: 56px; padding: 56px 0 28px;
  background: var(--ambar-fondo);       /* = #F5EFE6, el mismo de hatchi.eu */
  border-top: 1px solid var(--borde);
  color: var(--tinta);
}
.pie-rejilla {
  display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px;
  align-items: start;
}
@media (max-width: 980px) { .pie-rejilla { grid-template-columns: 1fr 1fr; gap: 28px; } }
@media (max-width: 560px) { .pie-rejilla { grid-template-columns: 1fr; gap: 24px; } }

.pie-col h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tierra); margin: 0 0 12px;
}
.pie-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.pie-col a { color: var(--tinta); text-decoration: none; font-size: .9rem; }
.pie-col a:hover { color: var(--ambar-hondo); text-decoration: underline; }
.pie-todos { color: var(--ambar-hondo) !important; font-weight: 600; }

.pie-nombre {
  display: flex; align-items: center; gap: 10px; text-decoration: none;
  color: var(--tinta); font-weight: 700; font-size: 1.12rem; margin-bottom: 12px;
}
.pie-nombre img { width: 34px; height: auto; }
.pie-lema { margin: 0; color: var(--tinta-suave); font-size: .88rem; max-width: 42ch; line-height: 1.6; }
.pie-redes { display: flex; gap: 10px; margin-top: 16px; }
.red {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--tarjeta); border: 1px solid var(--borde); color: var(--tierra);
}
.red:hover { color: var(--ambar-hondo); border-color: var(--ambar); }
.red svg { fill: currentColor; }

.pie-abajo {
  margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--borde);
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: .82rem; color: var(--tinta-suave);
}
.pie-abajo a { color: var(--ambar-hondo); text-decoration: none; font-weight: 600; }
.pie-abajo a:hover { text-decoration: underline; }

/* Con cabecera propia, la pantalla ya no necesita su cabecerita interna. */
.envoltorio { padding-top: 26px; }