/* ==================================================================
   CAFÉ BRUMA — Hoja de estilos
   ------------------------------------------------------------------
   Está ordenada de arriba hacia abajo igual que el sitio.
   Si querés cambiar colores o tamaños, tocá SOLO el bloque
   "VARIABLES" de acá abajo: todo el resto se actualiza solo.
   ================================================================== */


/* ==================================================================
   VARIABLES — la paleta y las medidas del sitio en un solo lugar
   ------------------------------------------------------------------
   LA PALETA ES CLARA (crema y terracota) porque así es el local:
   paredes claras, ladrillo a la vista, madera y la luz del ventanal.
   El número entre paréntesis es el contraste contra el fondo: la
   norma pide 4,5 y acá ninguno baja de 4,6.
   ================================================================== */
:root{

  /* --- Colores de fondo (crema cálido, como la carta impresa) --- */
  --fondo:        #FBF8F4;   /* fondo principal */
  --fondo-alt:    #F0E8DC;   /* fondo de las secciones alternas y tarjetas */

  /* --- Colores de texto --- */
  --texto:         #211D19;  /* texto de lectura (15,8:1) */
  --texto-2:       #5A5148;  /* texto secundario, fechas, notas (7,3:1) */
  --acento:        #8E3419;  /* títulos, precios y acentos de marca (7,5:1) */
  --acento-fuerte: #6E2711;  /* hover de los botones de acento (10,1:1) */
  --sobre-acento:  #FBF8F4;  /* texto crema arriba del terracota (7,5:1) */
  --estrella:      #925D0E;  /* dorado de las estrellas de puntaje (5,2:1) */

  /* --- Verde WhatsApp, solo para el botón flotante --- */
  --whatsapp:     #25D366;

  /* --- Gris cálido: SOLO para bordes, líneas y detalles. Nunca texto. --- */
  --piedra:       #A2968A;
  --linea:        rgba(33,29,25,.14);   /* líneas divisorias finas */
  --linea-fuerte: rgba(33,29,25,.30);   /* bordes de botones y tarjetas */

  /* --- Valores que dependen de si el tema es claro u oscuro.
         Están acá arriba para que cambiar de tema sea tocar
         un solo bloque y nada más. --- */
  --acento-suave:    rgba(142,52,25,.08);     /* fondo de avisos y hovers */
  --fondo-cabecera:  rgba(251,248,244,.92);   /* cabecera al bajar */
  --filtro-mapa:     saturate(.72) contrast(1.02);  /* el mapa combina con la página */
  --sombra:          0 8px 26px rgba(33,29,25,.18);
  --degrade-vacio:   linear-gradient(150deg, #EFE7DA 0%, #E3D9C9 100%); /* fotos que faltan */

  /* Texto que va ARRIBA de la foto del hero. Siempre claro, porque
     abajo tiene un velo oscuro. No cambia aunque cambie el tema. */
  --hero-texto:   #FBF8F4;

  /* --- Tipografías --- */
  --fuente-titulo: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --fuente-cuerpo: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* --- Medidas --- */
  --ancho-max:      1200px;  /* ancho máximo del contenido */
  --medida:         65ch;    /* ancho máximo de un párrafo (legibilidad) */
  --pad-contenedor: clamp(20px, 5vw, 48px);  /* aire lateral del contenido.
                                Los carruseles del celular lo usan en negativo
                                para llegar hasta el borde de la pantalla. */
  --alto-cabecera:  78px;
  --velo-hero:      .58;     /* opacidad del negro sobre la foto del hero,
                                para que el texto llegue a 7:1 aun sobre
                                fotos claras */
  --radio:          3px;
  --transicion:     .28s cubic-bezier(.4,0,.2,1);
}


/* ==================================================================
   RESET Y BASE
   ================================================================== */
*, *::before, *::after{ box-sizing: border-box; }

html{
  /* 112.5% de 16px = 18px de base en desktop */
  font-size: 112.5%;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body{
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;           /* 18px desktop / 17px mobile */
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;          /* evita barras horizontales sin romper el scroll suave */
}

/* Los paneles del menú que están apagados no se muestran */
[hidden]{ display: none !important; }

img, svg, iframe{ display: block; max-width: 100%; }
img{ height: auto; }

h1, h2, h3, h4{
  font-family: var(--fuente-titulo);
  line-height: 1.25;
  font-weight: 600;
  margin: 0;
}

p, ul, ol{ margin: 0; }
ul{ list-style: none; padding: 0; }
blockquote{ margin: 0; }

a{ color: inherit; }

button{ font: inherit; color: inherit; }

/* --- Foco visible en TODO lo que se puede tabular --- */
:focus-visible{
  outline: 2px solid var(--acento);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Texto solo para lectores de pantalla */
.oculto{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Link "saltar al contenido": aparece al navegar con teclado */
.saltar{
  position: absolute; left: 16px; top: -100px; z-index: 999;
  background: var(--acento); color: var(--sobre-acento);
  padding: 14px 20px; font-size: 17px; font-weight: 600;
  text-decoration: none; border-radius: var(--radio);
  transition: top var(--transicion);
}
.saltar:focus{ top: 16px; }


/* ==================================================================
   PIEZAS REUTILIZABLES
   ================================================================== */

/* Caja central de ancho máximo */
.contenedor{
  width: 100%;
  max-width: var(--ancho-max);
  margin-inline: auto;
  padding-inline: var(--pad-contenedor);
}

/* Secciones y sus fondos alternos */
.seccion{
  padding-block: clamp(76px, 9vw, 128px);
  /* Deja aire arriba para que la cabecera fija no tape el título al saltar */
  scroll-margin-top: calc(var(--alto-cabecera) + 12px);
}
.seccion--crema{ background: var(--fondo); }
.seccion--arena {
  background: var(--fondo-alt);
  border-block: 1px solid var(--linea);
}

/* Etiqueta chica arriba de cada título ("Nosotros", "La carta"...) */
.etiqueta{
  font-size: 1rem;              /* nunca menos de 16px */
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
}

/* Título grande de sección */
.titulo{
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.25;
  color: var(--acento);
  max-width: 18ch;
  margin-bottom: 28px;
}

/* Bloque de párrafos: máximo 65 caracteres de ancho, alineado a la izquierda */
.texto{ max-width: var(--medida); }
.texto p{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  text-align: left;
}
.texto p + p{ margin-top: 1.1em; }

/* Aviso discreto (por ejemplo: "precios a confirmar") */
.aviso{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 18px;
  font-size: 1rem;
  color: var(--texto-2);
  background: var(--acento-suave);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio);
}
.aviso svg{ flex-shrink: 0; color: var(--acento); }

/* Enlaces de texto */
.enlace{
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-fuerte);
  padding-bottom: 2px;
  transition: color var(--transicion), border-color var(--transicion);
}
.enlace:hover{ color: var(--acento); border-color: var(--acento); }

/* --- Botones: mínimo 48px de alto y texto de 17px --- */
.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 12px 28px;
  font-family: var(--fuente-cuerpo);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion),
              border-color var(--transicion);
}
.boton--primario{
  background: var(--acento);
  color: var(--sobre-acento);    /* crema sobre terracota = 7,5:1 */
}
.boton--primario:hover{ background: var(--acento-fuerte); }

.boton--secundario{
  background: transparent;
  color: var(--texto);
  border-color: var(--piedra);
}
.boton--secundario:hover{
  border-color: var(--acento);
  background: var(--acento-suave);
}


/* ==================================================================
   1. CABECERA FIJA
   ================================================================== */
.cabecera{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}

/* El fondo con desenfoque va en una capa aparte, no en la cabecera misma.
   Si el blur se aplicara directo a .cabecera, el menú desplegable del celular
   dejaría de ocupar toda la pantalla (así funciona backdrop-filter). */
.cabecera::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fondo-cabecera);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transicion);
}

/* Al bajar, JavaScript le agrega esta clase y la capa de fondo aparece */
.cabecera.esta-abajo::before,
.cabecera.menu-abierto::before{ opacity: 1; }

.cabecera.esta-abajo,
.cabecera.menu-abierto{ border-bottom-color: var(--linea); }

.cabecera__interior{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: var(--alto-cabecera);
}

/* --- Logo --- */
.logo{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex-shrink: 0;
}
/* El logo es una imagen PNG de 240px que se muestra a 40: el width/height
   del HTML es el del archivo, así que acá se fuerza el tamaño real de
   pantalla. El aspecto es cuadrado, no se deforma. */
.logo__marca{
  width: 40px; height: 40px;
  flex-shrink: 0;
  transition: opacity var(--transicion);
}
.logo:hover .logo__marca{ opacity: .78; }

.logo__texto{ display: block; }
.logo__nombre{
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: .26em;
  line-height: 1.15;
  color: var(--texto);
  white-space: nowrap;
}
.logo__bajada{
  display: block;
  font-family: var(--fuente-cuerpo);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--texto-2);
  white-space: nowrap;
  margin-top: 3px;
}

/* --- Navegación (desktop) --- */
.nav__lista{
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.4vw, 36px);
}
.nav__link{
  font-size: 1rem;
  font-weight: 500;
  color: var(--texto);
  text-decoration: none;
  padding: 10px 2px;
  position: relative;
  transition: color var(--transicion);
}
/* Subrayado fino que crece al pasar el mouse */
.nav__link::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 1px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transicion);
}
.nav__link:hover{ color: var(--acento); }
.nav__link:hover::after{ transform: scaleX(1); }

/* ------------------------------------------------------------------
   LA CABECERA ARRIBA DE TODO, EN COMPUTADORA
   ------------------------------------------------------------------
   Al entrar, la cabecera es transparente y atrás tiene el hero, que es
   oscuro. Como el resto del sitio es claro, el logo y los links son de
   color oscuro y ahí no se leerían. Entonces: mientras está arriba se
   pintan de crema, y apenas se baja (.esta-abajo, que aparece el fondo
   claro) vuelven a su color normal.

   Va con min-width porque en celular la cabecera SIEMPRE tiene fondo
   claro (ver el breakpoint de 768px), así que ahí no hace falta.
   ------------------------------------------------------------------ */
@media (min-width: 769px){
  .cabecera:not(.esta-abajo) .logo__nombre,
  .cabecera:not(.esta-abajo) .nav__link{ color: var(--hero-texto); }

  .cabecera:not(.esta-abajo) .logo__bajada{ color: rgba(251,248,244,.78); }

  .cabecera:not(.esta-abajo) .nav__link:hover{ color: var(--hero-texto); }
  .cabecera:not(.esta-abajo) .nav__link::after{ background: var(--hero-texto); }
}

/* Estos elementos del menú solo se muestran en mobile */
.nav .nav__cta-mobile,
.nav .redes--nav{ display: none; }

/* --- Botón hamburguesa (solo mobile) --- */
.hamburguesa{
  display: none;
  width: 48px; height: 48px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  cursor: pointer;
  flex-shrink: 0;
}
.hamburguesa__caja{
  display: block;
  width: 22px; height: 14px;
  position: relative;
}
.hamburguesa__linea{
  position: absolute; left: 0;
  width: 100%; height: 1.5px;
  background: var(--texto);
  border-radius: 2px;
  transition: transform var(--transicion), opacity var(--transicion), top var(--transicion);
}
.hamburguesa__linea:nth-child(1){ top: 0; }
.hamburguesa__linea:nth-child(2){ top: 6.25px; }
.hamburguesa__linea:nth-child(3){ top: 12.5px; }

/* Cuando el menú está abierto, las tres líneas se convierten en una X */
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(1){ top: 6.25px; transform: rotate(45deg); }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(2){ opacity: 0; }
.hamburguesa[aria-expanded="true"] .hamburguesa__linea:nth-child(3){ top: 6.25px; transform: rotate(-45deg); }


/* ==================================================================
   2. HERO — pantalla completa
   ================================================================== */
.hero{
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Fondo de respaldo por si todavía no hay foto cargada.
     Es marrón oscuro a propósito: el texto del hero es claro y tiene
     que leerse igual aunque la foto no esté. */
  background: linear-gradient(160deg, #5C4636 0%, #8E3419 55%, #2E1B10 100%);
}

/* ------------------------------------------------------------------
   TEXTO DEL HERO
   El resto del sitio es claro, pero acá el texto va arriba de una foto
   con un velo oscuro encima, así que todo se invierte: crema sobre
   oscuro. Por eso el hero tiene sus propios colores y no usa los
   generales.
   ------------------------------------------------------------------ */
.hero .etiqueta{ color: var(--hero-texto); opacity: .9; }
.hero .boton--secundario{ color: var(--hero-texto); border-color: rgba(251,248,244,.55); }
.hero .boton--secundario:hover{
  border-color: var(--hero-texto);
  background: rgba(251,248,244,.14);
}
.hero__foto{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* QUÉ PARTE DE LA FOTO SE VE.
     La foto es vertical y el hero es horizontal, así que se recorta.
     El segundo valor es la altura: 0% muestra la parte de arriba,
     100% la de abajo. En 42% se ve el cuerpo de la máquina y el vapor.
     Movelo hasta que te guste el encuadre. */
  object-position: center 42%;
  z-index: 0;
}
/* Velo negro: sin él, el texto no llegaría al contraste mínimo */
.hero__velo{
  position: absolute; inset: 0;
  background: rgba(0,0,0,var(--velo-hero));
  z-index: 1;
}
.hero__contenido{
  position: relative;
  z-index: 2;
  padding-block: calc(var(--alto-cabecera) + 40px) 120px;
  text-align: left;
}
.hero__titulo{
  font-size: clamp(3rem, 9vw, 6.2rem);
  line-height: 1.05;
  color: var(--hero-texto);
  margin-bottom: 20px;
}
.hero__eslogan{
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.55;
  color: var(--hero-texto);
  max-width: 34ch;
  margin-bottom: 28px;
}
.hero__botones{
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Sello de puntaje de Google en el hero */
.sello{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 36px;
  padding: 10px 18px;
  background: rgba(18,16,14,.55);
  border: 1px solid rgba(251,248,244,.35);
  border-radius: 999px;
}
.sello__estrellas{
  font-size: 19px;
  line-height: 1;
  color: #F0C674;               /* dorado claro: es el color de las estrellas */
  letter-spacing: .12em;
}
/* La quinta estrella va apagada: el puntaje real es 4,3, no 5 */
.sello__media,
.puntaje__media{ opacity: .38; }

.sello__texto{
  font-size: 1rem;
  color: var(--hero-texto);
}
.sello__texto strong{
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--hero-texto);
}

/* Flechita animada al pie del hero */
.hero__flecha{
  position: absolute;
  left: 50%; bottom: 28px;
  z-index: 2;
  transform: translateX(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  color: var(--hero-texto);
  animation: flotar 2.6s ease-in-out infinite;
}
@keyframes flotar{
  0%,100%{ transform: translate(-50%, 0); }
  50%    { transform: translate(-50%, 8px); }
}


/* ==================================================================
   3. NOSOTROS — los tres pilares
   ================================================================== */
.pilares{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--linea);
}
.pilar__icono{
  display: block;
  color: var(--acento);
  margin-bottom: 22px;
}
.pilar__titulo{
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--acento);
  margin-bottom: 10px;
}
.pilar__texto{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  max-width: 34ch;
}


/* ==================================================================
   4. MENÚ CON PESTAÑAS
   ================================================================== */
.pestanas{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: clamp(36px, 4.5vw, 56px) 0 clamp(28px, 4vw, 44px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--linea);
}
.pestana{
  min-height: 48px;
  padding: 12px 26px;
  font-size: 17px;
  font-weight: 600;
  color: var(--texto-2);
  background: transparent;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  cursor: pointer;
  transition: color var(--transicion), border-color var(--transicion),
              background-color var(--transicion);
}
.pestana:hover{ color: var(--texto); border-color: var(--piedra); }

.pestana[aria-selected="true"]{
  color: var(--sobre-acento);
  background: var(--acento);
  border-color: var(--acento);
}

/* Subtítulo dentro de un panel del menú ("Calientes", "Tostones"...) */
.carta__grupo{
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 6px;
}
.carta__grupo + .carta__lista{ margin-bottom: 40px; }
.carta__lista + .carta__grupo{ margin-top: 12px; }

/* --- Lista de la carta: nombre · línea punteada · precio --- */
.carta__lista{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(40px, 6vw, 88px);
  row-gap: 4px;
}
.item{
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-bottom: 1px solid var(--linea);
}
.item__nombre{
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--texto);
  flex-shrink: 0;
}
/* La línea punteada que une el nombre con el precio */
.item__linea{
  flex: 1 1 auto;
  min-width: 20px;
  border-bottom: 1px dotted var(--piedra);
  transform: translateY(-4px);
}
.item__precio{
  font-size: 23px;              /* precios grandes: mínimo 22px */
  font-weight: 700;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Los ingredientes debajo del nombre (tostones, meriendas, box) */
.item__detalle{
  display: block;
  font-size: .82rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--texto-2);
  max-width: 44ch;
  margin-top: 2px;
}
/* Con detalle largo el nombre deja de ser rígido y el precio se alinea arriba */
.item__nombre:has(.item__detalle){ flex: 1 1 auto; }
.item:has(.item__detalle){ align-items: flex-start; }
.item:has(.item__detalle) .item__linea{ transform: translateY(-10px); }

/* Lista de una sola columna, para las meriendas y la box */
.carta__lista--simple{ grid-template-columns: 1fr; }
.item--ancho{ grid-column: 1 / -1; }

.aviso--encargue{ margin-top: 34px; }

/* Aclaración chica al pie de un panel de la carta (leches vegetales, etc.) */
.carta__nota{
  margin-top: 22px;
  font-size: .86rem;
  line-height: 1.6;
  color: var(--texto-2);
  font-style: italic;
}


/* ==================================================================
   5. RESEÑAS
   ================================================================== */

/* Resumen del puntaje */
.puntaje{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: clamp(28px, 3.5vw, 40px);
  padding: 24px 30px;
  background: var(--fondo-alt);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
}
.puntaje__nota{
  font-family: var(--fuente-titulo);
  font-size: 58px;
  font-weight: 700;
  line-height: 1;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
}
.puntaje__estrellas{
  font-size: 24px;
  line-height: 1.2;
  color: var(--estrella);
  letter-spacing: .14em;
}
.puntaje__texto{
  font-size: 1rem;
  color: var(--texto);
}
.puntaje__texto strong{ color: var(--texto); font-weight: 600; }

/* Grilla de tarjetas */
.resenas{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.2vw, 28px);
  margin-top: clamp(32px, 4vw, 48px);
}
.resena{
  display: flex;
  flex-direction: column;
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  padding: clamp(26px, 2.8vw, 34px);
  transition: border-color var(--transicion), transform var(--transicion);
}
.resena:hover{
  border-color: var(--linea-fuerte);
  transform: translateY(-4px);
}
.resena__estrellas{
  font-size: 20px;
  line-height: 1;
  color: var(--estrella);
  letter-spacing: .12em;
  margin-bottom: 18px;
}
.resena__texto p{
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--texto);
}
.resena__firma{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 20px;
}
.resena__texto{ flex: 1 1 auto; margin-bottom: 20px; }
.resena__autor{
  font-size: 1rem;
  font-weight: 600;
  color: var(--acento);
}
.resena__fecha{
  font-size: 1rem;
  color: var(--texto-2);
}

/* Última tarjeta: invitación a dejar reseña */
.resena--cta{
  justify-content: center;
  align-items: flex-start;
  background: transparent;
  border-style: dashed;
  border-color: var(--linea-fuerte);
}
.resena__invita{
  font-family: var(--fuente-titulo);
  font-size: 1.55rem;
  line-height: 1.25;
  color: var(--acento);
  margin-bottom: 10px;
}
.resena__texto-cta{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  margin-bottom: 24px;
}

/* Son tres reseñas: llenan justo la fila de tres y la tarjeta de
   invitación quedaría sola en la segunda, con un hueco al lado.
   Acá se estira a todo lo ancho y se acomoda en horizontal, así se
   lee como un cierre de la sección y no como algo que sobró.
   Abajo de 1200px la grilla pasa a dos columnas y la tarjeta cae
   justo al lado de la tercera reseña, así que ahí no hace falta. */
@media (min-width: 1201px){
  .resena--cta{
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 28px;
    row-gap: 4px;
    padding-block: clamp(22px, 2.2vw, 28px);
  }
  .resena--cta .resena__invita{ margin-bottom: 0; }
  .resena--cta .resena__texto-cta{ margin-bottom: 0; margin-right: auto; }
}


/* ==================================================================
   6. GALERÍA
   ------------------------------------------------------------------
   Cada celda tiene un fondo de respaldo con el nombre de la foto que
   va ahí. Cuando el archivo existe, la foto lo tapa por completo.
   ================================================================== */
/* Cuatro fotos en una fila. Las celdas son VERTICALES (4:5) porque las
   cuatro fotos originales son verticales: así se recortan casi nada. */
.galeria{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-top: clamp(44px, 5vw, 68px);
}
.galeria__celda{
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  aspect-ratio: 4 / 5;
  background: var(--degrade-vacio);
  transition: border-color var(--transicion);
}

/* Cartelito con el nombre de la foto pendiente (queda debajo de la foto) */
.galeria__celda::after{
  content: attr(data-etiqueta);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-align: center;
  color: var(--texto-2);
}
.galeria__celda img{
  position: relative;
  z-index: 1;                    /* tapa el cartelito cuando la foto carga */
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.4,0,.2,1);
}
.galeria__celda:hover{ border-color: var(--piedra); }
.galeria__celda:hover img{ transform: scale(1.06); }

.galeria__nota{
  margin-top: clamp(28px, 3vw, 40px);
  font-size: 1rem;
  color: var(--texto);
}

/* ------------------------------------------------------------------
   PISTA "DESLIZÁ PARA VER MÁS"
   En computadora la galería es una grilla y se ve entera, así que este
   cartelito no tiene sentido y queda oculto. Aparece solo en celular,
   donde la tira se corre de costado.
   ------------------------------------------------------------------ */
.desliza{
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--texto-2);
}
.desliza svg{ flex-shrink: 0; }


/* ==================================================================
   7. SUCURSALES
   ================================================================== */
.sucursales{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3vw, 40px);
  margin-top: clamp(44px, 5vw, 68px);
  align-items: start;
}
/* ------------------------------------------------------------------
   UNA SOLA DIRECCIÓN
   Bruma tiene un solo local. Una tarjeta sola estirada a lo ancho
   de la pantalla queda pobre, así que en computadora se parte en dos:
   el mapa de un lado y los datos del otro. En celular se apila.
   (Si algún día abren un segundo local, se le saca la clase
   "sucursales--una" al div y vuelven a quedar dos tarjetas.)
   ------------------------------------------------------------------ */
.sucursales--una{ grid-template-columns: 1fr; }
.sucursales--una .sucursal{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
}
.sucursales--una .sucursal__mapa{ height: 100%; }
.sucursales--una .sucursal__mapa iframe{
  height: 100%;
  min-height: 420px;
  border-bottom: 0;
  border-right: 1px solid var(--linea);
}

.sucursal{
  display: flex;
  flex-direction: column;
  background: var(--fondo-alt);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio);
  overflow: hidden;
}
.sucursal__mapa{ background: var(--fondo); }
.sucursal__mapa iframe{
  width: 100%;
  height: 300px;
  border: 0;
  border-bottom: 1px solid var(--linea);
  filter: var(--filtro-mapa);    /* el mapa combina con el resto de la página */
}
.sucursal__cuerpo{ padding: clamp(26px, 3vw, 38px); }
.sucursal__titulo{
  font-size: 1.85rem;
  line-height: 1.2;
  color: var(--acento);
  margin-bottom: 8px;
}
.sucursal__direccion{
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--texto);
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--linea);
}
.sucursal__acciones{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}
.sucursal__acciones .boton{ flex: 1 1 auto; }

/* Bloques de datos (teléfono, horarios) */
.dato + .dato{
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--linea);
}
.dato__titulo{
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 12px;
}
.dato__texto{
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--texto);
}
/* El teléfono se muestra grande porque es un número */
.dato__texto .enlace{ font-size: 22px; font-weight: 600; }

.horarios{ display: grid; gap: 12px; }
.horario{
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.horario__dia{
  font-size: 1rem;
  color: var(--texto);
  flex-shrink: 0;
}
.horario__linea{
  flex: 1 1 auto;
  min-width: 16px;
  border-bottom: 1px dotted var(--piedra);
  transform: translateY(-4px);
}
.horario__hora{
  font-size: 20px;
  font-weight: 600;
  color: var(--acento);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}


/* ==================================================================
   8. PIE DE PÁGINA
   ================================================================== */
.pie{
  background: var(--fondo-alt);
  border-top: 1px solid var(--linea);
  padding-top: clamp(56px, 6vw, 88px);
}
.pie__interior{
  display: grid;
  grid-template-columns: 1.3fr .7fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
}
.pie__eslogan{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
  max-width: 34ch;
  margin-top: 20px;
}
.pie__subtitulo{
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acento);
  margin-bottom: 18px;
}
.pie__lista{ display: grid; gap: 12px; }
.pie__lista .enlace,
.pie__texto{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto);
}
.pie__texto strong{ color: var(--acento); font-weight: 600; }
.pie__texto + .pie__texto{ margin-top: 14px; }
.pie__contacto .pie__texto .enlace{ font-size: 22px; font-weight: 600; }

/* --- Íconos de redes: 24px de dibujo, 44px de área clickeable --- */
.redes{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.red{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;     /* área táctil cómoda */
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: color var(--transicion), border-color var(--transicion),
              background-color var(--transicion);
}
.red svg{ width: 24px; height: 24px; }
.red:hover{
  color: var(--acento);
  border-color: var(--linea-fuerte);
  background: var(--acento-suave);
}

.pie__copy{
  font-size: 1rem;
  line-height: 1.7;
  color: var(--texto-2);
  padding-top: 26px;
  border-top: 1px solid var(--linea);
}

/* Aviso de que el sitio es una muestra de portafolio y no un local real.
   Va discreto: se lee si se busca, pero no compite con el contenido. */
.pie__demo{
  max-width: var(--medida);
  margin: 0;
  padding-block: 10px 26px;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--texto-2);
  opacity: .85;
}


/* ==================================================================
   BOTÓN FLOTANTE DE WHATSAPP
   ================================================================== */
.flotante{
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  color: #06301A;                /* verde muy oscuro sobre el verde WhatsApp: 9,2:1 */
  background: var(--whatsapp);
  border-radius: 50%;
  box-shadow: var(--sombra);
  /* Oculto hasta que se baja del hero (lo maneja script.js) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(14px) scale(.9);
  transition: opacity var(--transicion), transform var(--transicion),
              visibility var(--transicion), background-color var(--transicion);
}
.flotante.esta-visible{
  opacity: 1;
  visibility: visible;
  transform: none;
}
.flotante:hover{ background: #1FBE59; }


/* ==================================================================
   ANIMACIÓN DE APARICIÓN AL HACER SCROLL
   (solo si JavaScript está activo: si no, todo se ve normal)
   ================================================================== */
.js .revelar{
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}
.js .revelar.es-visible{
  opacity: 1;
  transform: none;
}


/* ==================================================================
   BREAKPOINT 1200px — pantallas medianas / notebooks
   ================================================================== */
@media (max-width: 1200px){
  .resenas{ grid-template-columns: repeat(2, 1fr); }
}


/* ==================================================================
   BREAKPOINT 980px — tablets
   ================================================================== */
@media (max-width: 980px){
  .carta__lista{ grid-template-columns: 1fr; }
  .sucursales{ grid-template-columns: 1fr; }

  /* La tarjeta única deja de estar partida en dos y se apila:
     primero el mapa, después los datos */
  .sucursales--una .sucursal{ grid-template-columns: 1fr; }
  .sucursales--una .sucursal__mapa iframe{
    height: 300px;
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--linea);
  }

  .pilares{ grid-template-columns: 1fr; gap: 40px; }
  .pilar__texto{ max-width: var(--medida); }
  .pie__interior{ grid-template-columns: 1fr 1fr; }
  .pie__marca{ grid-column: 1 / -1; }
}


/* ==================================================================
   BREAKPOINT 768px — celulares: menú hamburguesa
   ================================================================== */
@media (max-width: 768px){

  html{ font-size: 106.25%; }        /* 17px de base en mobile */

  :root{ --alto-cabecera: 68px; }

  /* Cabecera siempre con fondo para que el logo se lea sobre la foto */
  .cabecera{ border-bottom-color: var(--linea); }
  .cabecera::before{ opacity: 1; }

  .cabecera__cta{ display: none; }   /* el botón pasa adentro del menú */
  .hamburguesa{ display: inline-flex; }

  /* --- El menú desplegable ocupa toda la pantalla --- */
  .nav{
    position: fixed;
    top: var(--alto-cabecera);
    left: 0; right: 0; bottom: 0;
    background: var(--fondo);
    border-top: 1px solid var(--linea);
    padding: 32px clamp(20px, 5vw, 48px) 48px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    /* Oculto por defecto; JavaScript agrega .nav--abierto */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-12px);
    transition: opacity var(--transicion), transform var(--transicion), visibility var(--transicion);
  }
  .nav--abierto{
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .nav__lista{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__link{
    display: block;
    font-size: 1.3rem;
    padding: 18px 0;
    border-bottom: 1px solid var(--linea);
  }
  .nav__link::after{ display: none; }

  .nav .nav__cta-mobile{
    display: inline-flex;
    margin-top: 32px;
    width: 100%;
  }
  .nav .redes--nav{
    display: flex;
    margin-top: 28px;
  }

  /* ================================================================
     CARRUSELES EN CELULAR
     ----------------------------------------------------------------
     En vez de apilarse hacia abajo, las fotos, las reseñas y los tres
     pilares se corren de costado con el dedo. Se frenan solos en cada
     tarjeta (scroll-snap) y siempre asoma un pedazo de la siguiente,
     que es la señal de "acá se desliza". Todo con CSS, sin JavaScript.
     ================================================================ */
  .galeria,
  .resenas,
  .pilares{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;   /* no dispara el "atrás" del navegador */
    scroll-snap-type: x mandatory;
    /* Sangra hasta el borde de la pantalla y devuelve el aire por dentro,
       así la primera tarjeta arranca alineada con el título */
    margin-inline: calc(-1 * var(--pad-contenedor));
    padding-inline: var(--pad-contenedor);
    scroll-padding-inline: var(--pad-contenedor);
    /* La barra de scroll se esconde: la pista visual es el asomo */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .galeria::-webkit-scrollbar,
  .resenas::-webkit-scrollbar,
  .pilares::-webkit-scrollbar{ display: none; }

  /* Recién acá aparece el "Deslizá para ver más": es el único lugar
     donde el bloque efectivamente se desliza */
  .desliza{ display: inline-flex; }

  /* Si se navega con teclado, el carrusel se puede enfocar y mover con
     las flechas. script.js le pone el tabindex solo cuando hace falta. */
  .galeria:focus-visible,
  .resenas:focus-visible,
  .pilares:focus-visible{ outline-offset: 6px; }

  .galeria__celda,
  .resena,
  .pilar{ scroll-snap-align: start; }

  /* --- Galería: todas las celdas del mismo tamaño, como una tira de fotos.
         Las medidas van EXPLÍCITAS a propósito. Si se deja el ancho en
         "auto", el navegador tiene que deducirlo de la proporción, pero la
         foto de adentro mide 100% de la celda: se muerde la cola y algunos
         navegadores terminan achicando la celda a cero y la galería se ve
         vacía. Con ancho y alto fijos no puede pasar. --- */
  .galeria{ gap: 12px; }
  .galeria__celda{
    flex: 0 0 auto;
    /* Mismo 4:5 que en computadora: 64vw de ancho por 80vw de alto */
    width:  min(64vw, 280px);
    height: min(80vw, 350px);
    aspect-ratio: auto;
  }

  /* --- Reseñas y pilares: ancho porcentual, todas la misma altura --- */
  .resenas{ gap: 14px; align-items: stretch; }
  .resena{ flex: 0 0 84%; }
  .resena:hover{ transform: none; }   /* el hover no aporta nada al tacto */

  .pilares{ gap: 22px; }
  .pilar{ flex: 0 0 74%; }
  .pilar__texto{ max-width: 100%; }

  /* En celular la foto vertical llena la pantalla sin recortarse casi nada,
     así que se puede centrar el encuadre */
  .hero__foto{ object-position: center 50%; }
  .hero__contenido{ padding-block: calc(var(--alto-cabecera) + 48px) 110px; }
  .titulo{ max-width: 100%; }
  .pie__interior{ grid-template-columns: 1fr; gap: 40px; }
  .sucursal__mapa iframe{ height: 260px; }
  .flotante{ width: 54px; height: 54px; }
}


/* ==================================================================
   BREAKPOINT 380px — celulares chicos
   ================================================================== */
@media (max-width: 380px){
  .logo__nombre{ font-size: 1rem; letter-spacing: .18em; }
  .logo__bajada{ font-size: .58rem; letter-spacing: .22em; }
  .logo__marca{ width: 34px; height: 34px; }
  .logo{ gap: 10px; }

  .hero__botones{ flex-direction: column; align-items: stretch; }
  .hero__botones .boton{ width: 100%; }

  /* Los carruseles siguen activos; solo se agrandan un poco las tarjetas
     para que en pantallas chicas entren cómodas */
  .galeria__celda{ width: 72vw; height: 90vw; }
  .resena{ flex: 0 0 88%; }
  .pilar{ flex: 0 0 82%; }

  .item{ flex-wrap: wrap; row-gap: 2px; }
  .item__linea{ min-width: 12px; }

  .pestanas{ gap: 8px; }
  .pestana{ padding: 12px 18px; flex: 1 1 auto; }

  .puntaje{ padding: 20px; gap: 14px; }
  .puntaje__nota{ font-size: 48px; }

  .sucursal__acciones{ flex-direction: column; }
  .sucursal__acciones .boton{ width: 100%; }
}


/* ==================================================================
   ACCESIBILIDAD — respetar a quien pidió menos movimiento
   ================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .js .revelar{ opacity: 1; transform: none; }
}