/* ==========================================================================
   Lumi Café — hoja de estilo única · rediseño "new age"
   Identidad DELIBERADAMENTE distinta de Doria Coffee:
     Doria = azul marino #182456 + dorado + Playfair/Cormorant SERIF, hero de 2
             columnas con tarjeta, cinta marquee, tono editorial clásico.
     Lumi  = hueso + tinta + coral + gradiente comunidad, Bricolage Grotesque
             (sans display contemporánea) + Poppins, hero a pantalla completa,
             tono joven / diverso / de barrio.
   ========================================================================== */

@import './fonts/fuentes.css';

:root {
  /* Color -------------------------------------------------------------- */
  --hueso: #faf5ef;        /* fondo principal */
  --hueso-2: #f1e8dc;      /* bloques alternos */
  --tinta: #17130e;        /* texto y superficies oscuras */
  --tinta-2: #211b14;      /* superficie oscura ligeramente más clara */
  --tinta-suave: #6a6156;  /* texto secundario */
  --coral: #e8613c;        /* acento de marca, vivo y juvenil */
  --coral-hover: #cf4f2d;
  --durazno: #f6b98a;      /* apoyo cálido */
  --crema-linea: #e7ddce;
  --blanco: #fffdfa;
  /* Gradiente "comunidad": guiño a la diversidad (café para todes), usado SOLO
     en detalles finos — el punto del wordmark, subrayados, la línea del hero. */
  --comunidad: linear-gradient(90deg, #e8613c 0%, #f2994a 30%, #e86a9e 62%, #9b6dd6 100%);

  /* Tipografía --------------------------------------------------------- */
  --texto: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Bricolage', 'Poppins', system-ui, sans-serif;

  /* Métrica ------------------------------------------------------------ */
  --ancho: 1220px;
  --radio: 26px;
  --radio-sm: 14px;
  --sombra: 0 2px 10px rgba(23, 19, 14, .06);
  --sombra-md: 0 18px 44px rgba(23, 19, 14, .13);
  --nav-alto: 76px;
}

/* Reset ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-alto) + 12px); }
body {
  margin: 0;
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--hueso);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 800; line-height: 1.02;
  letter-spacing: -.02em; margin: 0 0 .4em; text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 8vw, 6rem); }
h2 { font-size: clamp(2.1rem, 5vw, 3.6rem); }
h3 { font-size: 1.3rem; letter-spacing: -.01em; }
p { margin: 0 0 1em; }

/* Utilidades ------------------------------------------------------------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 26px; }
.seccion { padding: clamp(70px, 10vw, 132px) 0; }
.seccion--alt { background: var(--hueso-2); }
.seccion--tinta { background: var(--tinta); color: var(--hueso); }
.centro { text-align: center; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .76rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--coral); margin: 0 0 16px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; border-radius: 2px; background: var(--comunidad); }
.seccion--tinta .eyebrow { color: var(--durazno); }
.lead { font-size: 1.12rem; color: var(--tinta-suave); max-width: 60ch; }
.seccion--tinta .lead { color: #cabfb0; }

/* Botones ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 15px 30px; border-radius: 999px;
  font-family: var(--texto); font-size: .94rem; font-weight: 600;
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--principal { background: var(--coral); color: var(--blanco); }
.btn--principal:hover { background: var(--coral-hover); }
.btn--linea { border-color: currentColor; color: var(--tinta); }
.btn--linea:hover { background: var(--tinta); color: var(--hueso); border-color: var(--tinta); }
.btn--claro { background: var(--hueso); color: var(--tinta); }
.btn--claro:hover { background: var(--blanco); }
.seccion--tinta .btn--linea { color: var(--hueso); }
.seccion--tinta .btn--linea:hover { background: var(--hueso); color: var(--tinta); border-color: var(--hueso); }

/* Navegación -------------------------------------------------------------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-alto);
  display: flex; align-items: center;
  background: rgba(250, 245, 239, .82); backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow .28s ease, border-color .28s ease;
}
.nav.scrolled { box-shadow: var(--sombra); border-bottom-color: var(--crema-linea); }
/* .sobre-hero se conserva para páginas con hero oscuro; la home ya no lo usa */
.nav.sobre-hero:not(.scrolled) { background: transparent; backdrop-filter: none; color: var(--hueso); }
.nav.sobre-hero:not(.scrolled) .nav__enlaces a { color: var(--hueso); }
.nav.sobre-hero:not(.scrolled) .nav__marca img { filter: brightness(0) invert(1); }
.nav.sobre-hero:not(.scrolled) .nav__burger span,
.nav.sobre-hero:not(.scrolled) .nav__burger span::before,
.nav.sobre-hero:not(.scrolled) .nav__burger span::after { background: var(--hueso); }
.nav__interior { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.nav__marca { font-family: var(--display); font-size: 1.55rem; font-weight: 800; text-decoration: none; letter-spacing: -.03em; display: flex; align-items: center; }
.nav__marca span { color: var(--coral); }
.nav__logo { height: 26px; width: auto; display: block; }
.nav__logo--blanco { display: none; }
/* Sobre hero oscuro se muestra el logo blanco (páginas con .sobre-hero; la home ya no) */
.nav.sobre-hero:not(.scrolled) .nav__logo--negro { display: none; }
.nav.sobre-hero:not(.scrolled) .nav__logo--blanco { display: block; }
.nav__enlaces { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
/* Iconos de redes directos en la nav (seguir sin salir a buscar) */
.nav__redes { display: flex; align-items: center; gap: 12px; }
.nav__redes a { display: flex; color: var(--tinta-suave); transition: color .18s ease, transform .18s ease; }
.nav__redes a::after { display: none; }
.nav__redes a:hover { color: var(--coral); transform: translateY(-2px); }
.nav.sobre-hero:not(.scrolled) .nav__redes a { color: var(--hueso); }
.nav__enlaces a { font-size: .93rem; font-weight: 500; text-decoration: none; padding: 6px 0; position: relative; }
.nav__enlaces a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px; border-radius: 2px;
  background: var(--comunidad); transition: width .22s ease;
}
.nav__enlaces a:hover::after, .nav__enlaces a[aria-current="page"]::after { width: 100%; }
.nav__enlaces .btn::after { display: none; }
.nav__burger { display: none; background: none; border: 0; cursor: pointer; padding: 8px; width: 42px; height: 42px; align-items: center; justify-content: center; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--tinta); position: relative; transition: background .2s; }
.nav__burger span::before, .nav__burger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 2px; background: var(--tinta); transition: transform .25s ease; }
.nav__burger span::before { top: -7px; }
.nav__burger span::after { top: 7px; }
.nav__burger[aria-expanded="true"] span { background: transparent; }
.nav__burger[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* Hero CLARO y luminoso, fiel al feed de Lumi (NO oscuro tipo Caffenio, NO el
   hero-grid clásico de Doria). Texto grande + foto de producto en marco redondeado,
   con una mancha orgánica de color y stickers tiernos. --------------------- */
.hero { position: relative; overflow: hidden; background: var(--hueso); }
.hero__blob {
  position: absolute; top: -18%; right: -8%; width: 62vw; height: 62vw; max-width: 780px; max-height: 780px;
  background: radial-gradient(circle at 40% 40%, rgba(246,185,138,.5), rgba(246,185,138,0) 70%);
  border-radius: 50%; z-index: 0; pointer-events: none;
}
.hero__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(30px, 5vw, 64px); align-items: center;
  padding: calc(var(--nav-alto) + clamp(40px, 7vw, 84px)) 0 clamp(56px, 8vw, 104px);
}
.hero__claim { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: .92rem; color: var(--tinta-suave); margin: 0 0 20px; }
.hero__punto { width: 10px; height: 10px; border-radius: 50%; background: var(--comunidad); flex: none; }
.hero h1 { margin: 0; font-size: clamp(2.7rem, 6.4vw, 5.2rem); }
.hero h1 em { font-style: normal; background: var(--comunidad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__sub { font-size: clamp(1.05rem, 2.1vw, 1.28rem); max-width: 42ch; margin: 24px 0 0; color: var(--tinta-suave); }
.hero__acciones { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
.hero__claimcita { font-family: var(--display); font-weight: 500; font-style: italic; color: var(--coral); margin: 26px 0 0; font-size: 1.02rem; }

/* Figura: foto en "squircle", mancha detrás y dos stickers flotantes ------- */
.hero__figura { position: relative; justify-self: center; width: 100%; max-width: 440px; aspect-ratio: 1/1.1; }
.hero__mancha {
  position: absolute; inset: 6% -4% -6% 6%; z-index: 0;
  background: var(--comunidad); opacity: .92;
  border-radius: 62% 38% 44% 56% / 55% 46% 54% 45%;
  animation: burbujear 14s ease-in-out infinite;
}
@keyframes burbujear {
  0%,100% { border-radius: 62% 38% 44% 56% / 55% 46% 54% 45%; }
  50% { border-radius: 44% 56% 62% 38% / 46% 55% 45% 54%; }
}
.hero__foto {
  position: relative; z-index: 1; width: 100%; height: 100%; overflow: hidden;
  border-radius: 40% 40% 42% 42% / 20% 20% 8% 8%;
  box-shadow: var(--sombra-md); background: var(--hueso-2);
}
.hero__foto img { width: 100%; height: 100%; object-fit: cover; }
.hero__foto--vacia { display: flex; align-items: center; justify-content: center; }
.hero__foto--vacia span { font-family: var(--display); font-weight: 800; font-size: 3rem; color: var(--durazno); }
.hero__foto--vacia b { color: var(--coral); }
.hero__sticker {
  position: absolute; z-index: 2; top: 8%; left: -6%; background: var(--blanco); color: var(--tinta);
  border-radius: 18px; padding: 12px 16px; box-shadow: var(--sombra-md); text-align: center; transform: rotate(-7deg);
}
.hero__sticker strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.3rem; line-height: 1; }
.hero__sticker span { font-size: .72rem; color: var(--tinta-suave); }
.hero__chip {
  position: absolute; z-index: 2; bottom: 5%; right: -4%; background: var(--tinta); color: var(--hueso);
  border-radius: 999px; padding: 10px 18px; font-size: .84rem; font-weight: 600; box-shadow: var(--sombra-md); transform: rotate(5deg);
}

/* Franja de datos (barra horizontal, no las tarjetas de Doria) ------------- */
.tira { background: var(--tinta); color: var(--hueso); }
.tira__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.tira__item { padding: 30px 24px; border-left: 1px solid rgba(255,253,250,.1); }
.tira__item:first-child { border-left: 0; }
.tira__item strong { display: block; font-family: var(--display); font-weight: 800; font-size: 1.9rem; line-height: 1; }
.tira__item span { font-size: .82rem; color: #b7ac9c; }

/* Sección editorial de menú: números grandes en fila, no tarjetas ---------- */
.cats { margin-top: 50px; border-top: 1px solid var(--crema-linea); }
.cat {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px;
  padding: 26px 8px; border-bottom: 1px solid var(--crema-linea); text-decoration: none;
  transition: padding .22s ease, background .22s ease;
}
.cat:hover { padding-left: 22px; padding-right: 22px; background: var(--blanco); }
.cat__num { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--coral); font-variant-numeric: tabular-nums; }
.cat__nombre { font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.4rem); letter-spacing: -.02em; }
.cat__meta { font-size: .86rem; color: var(--tinta-suave); display: flex; align-items: center; gap: 16px; }
.cat__flecha { transition: transform .22s ease; }
.cat:hover .cat__flecha { transform: translateX(6px); }

/* Pilares (los 3 diferenciadores) — banda horizontal ---------------------- */
.pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 52px; }
.pilar { padding: 4px 0; }
.pilar__n { font-family: var(--display); font-weight: 800; font-size: 2.2rem; background: var(--comunidad); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; }
.pilar h3 { margin: 16px 0 .4em; }
.pilar p { font-size: .96rem; color: var(--tinta-suave); margin: 0; }
.seccion--tinta .pilar p { color: #cabfb0; }

/* Bloque de comunidad / diversidad (sección NUEVA, no existe en Doria) ----- */
.comuna__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 66px); align-items: center; }
.comuna__banda { height: 8px; border-radius: 8px; background: var(--comunidad); margin-bottom: 26px; width: 96px; }
.comuna__tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.comuna__tag { font-size: .86rem; font-weight: 500; padding: 9px 17px; border-radius: 999px; border: 1.5px solid rgba(255,253,250,.22); }
.comuna__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4/5; background: var(--tinta-2); box-shadow: var(--sombra-md); }
.comuna__foto img { width: 100%; height: 100%; object-fit: cover; }

/* Contacto por mensaje (sin teléfono) ------------------------------------- */
.contacto__msg { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.contacto__msg .btn { padding: 10px 18px; font-size: .88rem; gap: 9px; }
.contacto__msg .btn svg { width: 17px; height: 17px; }

/* Síguenos: banner de promos + muro social -------------------------------- */
.promo {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 30px; align-items: center;
  background: var(--tinta); color: var(--hueso); border-radius: var(--radio);
  padding: clamp(28px, 4vw, 46px); position: relative; overflow: hidden;
}
.promo::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--comunidad); }
.promo__texto { display: flex; gap: 20px; align-items: flex-start; }
.promo__icono { flex: none; width: 54px; height: 54px; border-radius: 16px; background: var(--comunidad); color: var(--blanco); display: flex; align-items: center; justify-content: center; }
.promo__texto h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin: 6px 0 .4em; }
.promo__texto .eyebrow { color: var(--durazno); }
.promo__texto .lead { color: #cabfb0; font-size: 1rem; }
.promo__redes { display: flex; flex-direction: column; gap: 11px; }
.promo__btn { justify-content: flex-start; gap: 12px; }
.promo__btn svg { width: 19px; height: 19px; }

.muro { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 26px; }
.muro__post { position: relative; aspect-ratio: 1/1; border-radius: var(--radio-sm); overflow: hidden; background: var(--hueso-2); display: block; }
.muro__post img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.muro__post:hover img { transform: scale(1.07); }
.muro__ig { position: absolute; top: 10px; right: 10px; color: #fff; opacity: 0; transition: opacity .2s ease; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.muro__post::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,19,14,.15), transparent 40%); opacity: 0; transition: opacity .2s ease; }
.muro__post:hover .muro__ig, .muro__post:hover::after { opacity: 1; }
.muro__pie { text-align: center; margin-top: 22px; }
.muro__pie a { color: var(--coral); text-decoration: none; font-weight: 600; }
.muro__pie a:hover { text-decoration: underline; }

/* Botón para ampliar (galería y muro): reset + lupa al pasar --------------- */
.zoom { display: block; width: 100%; height: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; position: relative; }
.zoom::before {
  content: ''; position: absolute; z-index: 2; top: 10px; left: 10px; width: 30px; height: 30px;
  border-radius: 50%; background: rgba(23,19,14,.55) no-repeat center /
    16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3M11 8v6M8 11h6'/%3E%3C/svg%3E");
  opacity: 0; transition: opacity .2s ease;
}
.zoom:hover::before, .zoom:focus-visible::before { opacity: 1; }

/* Galería (mosaico) ------------------------------------------------------- */
.galeria { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px; gap: 16px; margin-top: 46px; }
.galeria__foto { margin: 0; border-radius: var(--radio-sm); overflow: hidden; background: var(--hueso-2); }
.galeria__foto:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.galeria__foto:nth-child(4) { grid-row: span 2; }
.galeria__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.galeria__foto:hover img { transform: scale(1.05); }

/* Lightbox (preview individual) ------------------------------------------- */
.lightbox {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  background: rgba(15,12,8,.9); backdrop-filter: blur(4px); padding: clamp(16px, 4vw, 48px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.lightbox.abierto { opacity: 1; visibility: visible; }
.lightbox__fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox__img { max-width: 90vw; max-height: 78vh; border-radius: var(--radio-sm); box-shadow: 0 20px 60px rgba(0,0,0,.5); background: var(--tinta-2); transform: scale(.96); transition: transform .25s ease; }
.lightbox.abierto .lightbox__img { transform: scale(1); }
.lightbox__cap { color: #e7ddce; font-size: .9rem; text-align: center; max-width: 60ch; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.lightbox__cap a { color: var(--durazno); font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.lightbox__cap a:hover { text-decoration: underline; }
.lightbox__cap a svg { width: 16px; height: 16px; }
.lb-btn {
  position: absolute; z-index: 2; background: rgba(255,253,250,.12); border: 0; color: #fff; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  transition: background .18s ease; font-size: 0;
}
.lb-btn:hover { background: rgba(255,253,250,.28); }
.lb-btn svg { width: 22px; height: 22px; }
.lb-cerrar { top: 18px; right: 18px; }
.lb-prev { left: clamp(8px, 3vw, 28px); top: 50%; transform: translateY(-50%); }
.lb-next { right: clamp(8px, 3vw, 28px); top: 50%; transform: translateY(-50%); }
@media (max-width: 560px) {
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
  .lightbox__img { max-height: 70vh; }
}

/* Sala de juntas ---------------------------------------------------------- */
.juntas__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 62px); align-items: center; }
.juntas__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 5/4; background: var(--tinta-2); box-shadow: var(--sombra-md); }
.juntas__foto img { width: 100%; height: 100%; object-fit: cover; }
.juntas__lista { list-style: none; margin: 26px 0 0; padding: 0; }
.juntas__lista li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: .98rem; }
.juntas__lista li::before { content: ''; position: absolute; left: 0; top: .5em; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); }

/* Visítanos --------------------------------------------------------------- */
.visita__grid { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(30px, 5vw, 56px); align-items: start; }
.dato { display: flex; gap: 15px; margin-bottom: 26px; }
.dato__icono { flex: 0 0 22px; color: var(--coral); padding-top: 3px; }
.dato h3 { font-family: var(--texto); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--tinta-suave); margin: 0 0 4px; }
.dato p { margin: 0; font-size: 1rem; }
.dato a { color: var(--coral); text-decoration: none; font-weight: 500; }
.dato a:hover { text-decoration: underline; }
.mapa { border: 0; width: 100%; aspect-ratio: 4/3; border-radius: var(--radio); box-shadow: var(--sombra); }
.insignias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.insignia { font-size: .78rem; font-weight: 500; padding: 6px 14px; border-radius: 999px; background: var(--hueso-2); border: 1px solid var(--crema-linea); color: var(--tinta-suave); }

/* Redes ------------------------------------------------------------------- */
.redes { display: flex; gap: 12px; }
.redes a {
  width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--crema-linea); color: var(--tinta);
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.redes a:hover { transform: translateY(-3px); background: var(--coral); color: var(--blanco); border-color: var(--coral); }

/* Pie NUEVO — fondo oscuro, iconos SIEMPRE claros (arregla el bug de iconos
   invisibles: antes .redes a heredaba color tinta sobre el pie oscuro) ------ */
.pie { background: var(--tinta); color: #a99e8e; padding: clamp(56px, 8vw, 88px) 0 30px; font-size: .93rem; }
.pie__top { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.pie__marca { font-family: var(--display); font-size: 1.9rem; font-weight: 800; color: var(--hueso); letter-spacing: -.03em; margin-bottom: 14px; }
.pie__marca span { color: var(--coral); }
.pie__banda { height: 6px; width: 120px; border-radius: 6px; background: var(--comunidad); margin: 22px 0; }
.pie h4 { font-family: var(--texto); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--hueso); margin: 0 0 15px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: 10px; }
.pie a { text-decoration: none; }
.pie a:hover { color: var(--hueso); }
.pie .redes a { border-color: rgba(255,253,250,.2); color: var(--hueso); }
.pie .redes a:hover { background: var(--coral); border-color: var(--coral); color: var(--blanco); }
.pie__base { margin-top: 46px; padding-top: 22px; border-top: 1px solid rgba(255,253,250,.12); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: .82rem; }

/* Miga de pan ------------------------------------------------------------- */
.miga { padding-top: calc(var(--nav-alto) + 40px); font-size: .86rem; color: var(--tinta-suave); }
.miga a { color: var(--coral); text-decoration: none; }
.miga a:hover { text-decoration: underline; }

/* Carta (páginas de menú) ------------------------------------------------- */
.carta { margin-top: 40px; }
.carta__grupo + .carta__grupo { margin-top: 56px; }
.carta__cab { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 0 4px 14px; border-bottom: 2px solid var(--tinta); }
.carta__cab h2, .carta__cab h3 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); font-family: var(--display); font-weight: 800; letter-spacing: -.02em; }
.carta__tamanos { display: flex; gap: 26px; font-size: .74rem; font-weight: 600; letter-spacing: .06em; color: var(--tinta-suave); }
.carta__tamanos span { width: 58px; text-align: right; }
.carta__items { list-style: none; margin: 0; padding: 0; }
.carta__item { display: flex; align-items: baseline; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--crema-linea); }
.carta__item:last-child { border-bottom: 0; }
.carta__nombre { font-weight: 500; font-size: 1rem; }
.carta__detalle { display: block; font-size: .82rem; color: var(--tinta-suave); font-weight: 400; margin-top: 2px; }
.carta__guia { flex: 1; border-bottom: 1px dotted var(--crema-linea); transform: translateY(-4px); min-width: 18px; }
.carta__precios { display: flex; gap: 26px; }
.carta__precio { width: 58px; text-align: right; font-weight: 600; font-size: .97rem; font-variant-numeric: tabular-nums; }
.carta__precio--vacio { color: var(--crema-linea); }
.carta__nota { font-size: .84rem; color: var(--tinta-suave); margin-top: 24px; }

/* Aparición suave (solo con JS) ------------------------------------------- */
.js .revelar { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.js .revelar.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .revelar { opacity: 1; transform: none; } }

/* Responsive -------------------------------------------------------------- */
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; text-align: left; }
  .hero__figura { order: -1; max-width: 320px; justify-self: start; }
  .hero__blob { top: -10%; right: -30%; width: 90vw; height: 90vw; }
  .tira__grid { grid-template-columns: 1fr 1fr; }
  .tira__item:nth-child(3), .tira__item:nth-child(4) { border-top: 1px solid rgba(255,253,250,.1); }
  .tira__item:nth-child(3) { border-left: 0; }
  .pilares { grid-template-columns: 1fr; gap: 30px; }
  .comuna__grid, .juntas__grid, .visita__grid { grid-template-columns: 1fr; }
  .promo { grid-template-columns: 1fr; gap: 24px; }
  .promo__redes { flex-direction: row; flex-wrap: wrap; }
  .muro { grid-template-columns: repeat(3, 1fr); }
  .galeria { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; }
  .galeria__foto:nth-child(4) { grid-row: auto; }
  .pie__top { grid-template-columns: 1fr 1fr; }

  /* El nombre largo de categoría empujaba la meta fuera de pantalla: se apila */
  .cat { grid-template-columns: auto 1fr; row-gap: 4px; }
  .cat__meta { grid-column: 2; justify-content: flex-start; }

  .nav__burger { display: flex; }
  .nav__enlaces {
    position: fixed; inset: var(--nav-alto) 0 auto; flex-direction: column; align-items: stretch;
    gap: 0; background: var(--hueso); border-bottom: 1px solid var(--crema-linea);
    padding: 10px 26px 22px; box-shadow: var(--sombra-md); display: none;
  }
  .nav__enlaces.abierto { display: flex; }
  .nav.sobre-hero:not(.scrolled) .nav__enlaces.abierto a { color: var(--tinta); }
  .nav__enlaces li { border-bottom: 1px solid var(--crema-linea); }
  .nav__enlaces li:last-child { border-bottom: 0; padding-top: 14px; }
  .nav__enlaces a { display: block; padding: 14px 0; font-size: 1rem; }
  /* En el menú desplegable los iconos de redes van en fila, con color visible */
  .nav.sobre-hero:not(.scrolled) .nav__enlaces.abierto a { color: var(--tinta); }
  .nav__redes { gap: 20px; padding: 16px 0 6px; }
  .nav__redes a { color: var(--tinta); }
  .nav__redes a::after { display: none; }
}
@media (max-width: 560px) {
  .carta__cab { flex-direction: column; gap: 8px; }
  .carta__item { flex-wrap: wrap; }
  .carta__tamanos { gap: 14px; }
  .carta__tamanos span, .carta__precio { width: 46px; }
  .carta__precios { gap: 14px; }
  .galeria { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; }
  .galeria__foto:nth-child(1) { grid-column: span 2; }
  .pie__top { grid-template-columns: 1fr; }
}

/* Accesibilidad ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; border-radius: 4px; }
.saltar { position: absolute; left: -9999px; top: 0; background: var(--tinta); color: var(--hueso); padding: 12px 20px; z-index: 200; text-decoration: none; }
.saltar:focus { left: 0; }