:root {
  --marca-cacao: #3a2417;
  --marca-nuez: #7a4a2b;
  --marca-tostado: #b9784a;
  --marca-crema: #faf3e8;
  --marca-crema-2: #f2e6d3;
  --marca-oliva: #6b7a3f;
  --marca-texto: #2c2019;
  --font-titulo: 'Fraunces', Georgia, serif;
  --font-cuerpo: 'Inter', system-ui, -apple-system, sans-serif;
}

body {
  font-family: var(--font-cuerpo);
  color: var(--marca-texto);
  background: var(--marca-crema);
}

h1, h2, h3, h4, .font-titulo {
  font-family: var(--font-titulo);
}

.navbar-marca {
  background: var(--marca-cacao);
}
.navbar-marca .navbar-brand,
.navbar-marca .nav-link {
  color: var(--marca-crema) !important;
  font-family: var(--font-titulo);
  font-weight: 600;
}
/* En pantallas muy angostas, un nombre de marca largo no debe empujar el
   botón "Pedido" ni el hamburguesa a una segunda línea — se trunca con
   puntos suspensivos en vez de romper el layout. */
.navbar-marca .navbar-brand {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-marca .nav-link:hover {
  color: var(--marca-tostado) !important;
}

.btn-carrito {
  background: var(--marca-tostado);
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  padding: .5rem 1.1rem;
}
.btn-carrito:hover { background: var(--marca-nuez); color: #fff; }

.buscador-nav {
  background: rgba(250, 243, 232, .12);
  border-radius: 50px;
  overflow: hidden;
  width: 100%;
  transition: width .2s ease;
}
@media (min-width: 992px) {
  .buscador-nav { width: 9rem; }
  .buscador-nav:focus-within { width: 13rem; }
}
.buscador-nav .input-group-text {
  background: transparent;
  border: none;
  color: var(--marca-crema);
  padding-right: 0;
}
.buscador-nav .form-control {
  background: transparent;
  border: none;
  color: var(--marca-crema);
  box-shadow: none !important;
}
.buscador-nav .form-control::placeholder { color: rgba(250, 243, 232, .6); }
/* Bootstrap le pone fondo blanco a los inputs type=search en algunos navegadores */
.buscador-nav .form-control,
.buscador-nav .form-control:focus { background-color: transparent; }

.btn-marca {
  background: var(--marca-nuez);
  border: none;
  color: #fff;
  font-weight: 600;
}
.btn-marca:hover { background: var(--marca-cacao); color: #fff; }

.btn-outline-marca {
  border: 1px solid var(--marca-nuez);
  color: var(--marca-nuez);
  font-weight: 600;
  background: transparent;
}
.btn-outline-marca:hover { background: var(--marca-nuez); color: #fff; }

/* Contenido armado con el editor de páginas (admin/pagina_form.php) —
   ya viene sanitizado al guardar, así que se imprime tal cual. */
.contenido-pagina img, .resumen-pagina img { max-width: 100%; height: auto; border-radius: 6px; }
.contenido-pagina table, .resumen-pagina table { max-width: 100%; }
.resumen-pagina p:last-child { margin-bottom: 0; }

.hero {
  background: linear-gradient(135deg, var(--marca-cacao), var(--marca-nuez));
  color: var(--marca-crema);
  padding: 5rem 0 6rem;
  /* Centra el contenido verticalmente — sin efecto cuando el hero mide lo
     justo para su contenido (de siempre); importa recién cuando el alto
     del fondo (Configuración) fuerza un mínimo más alto. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-con-imagen {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.hero p.lead { color: #e9d9c4; }

.badge-oliva {
  background: var(--marca-oliva);
  color: #fff;
}

/* Zoom al pasar el mouse por una foto chica (ingredientes de "Armá tu
   Mix", foto de producto en la tarjeta). El popup queda oculto SIEMPRE
   por default (fuera de cualquier media query) — solo la regla que lo
   muestra en :hover vive adentro de @media (hover: hover), así en un
   dispositivo sin mouse real (celular) ese media query nunca aplica y
   el popup se queda oculto para siempre, en vez de quedar visible de
   entrada por no tener ningún display:none aplicándose. */
.hover-zoom { position: relative; }
.hover-zoom-popup {
  display: none;
  position: absolute;
  z-index: 20;
  /* Centrado sobre la propia imagen (como una lupa) — funciona igual
     sin importar en qué fila/columna de la grilla esté la tarjeta, a
     diferencia de anclarlo arriba o al costado (competía con el hero
     en la primera fila, o con la tarjeta vecina en la última columna). */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 220px;
  background: #fff;
  border: 1px solid var(--marca-crema-2);
  border-radius: .75rem;
  box-shadow: 0 12px 28px rgba(58, 36, 23, .25);
  padding: .75rem;
  text-align: left;
  pointer-events: none;
  /* Reset a propósito: se anida en contenedores con font-size propio
     (ej. .img-producto usa 2.5rem para el ícono de "sin foto") — sin
     esto el popup hereda ese tamaño y el texto queda gigante. */
  font-size: 1rem;
  line-height: 1.3;
  /* Un nombre/descripción largo (o sin espacios, tipo una palabra muy
     larga) se ajusta al ancho fijo del popup en vez de desbordarlo. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.hover-zoom-popup img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: .5rem;
  margin-bottom: .5rem;
  display: block;
}
.hover-zoom-popup .hover-zoom-nombre {
  font-family: var(--font-titulo);
  font-weight: 600;
  font-size: 1rem;
}
@media (hover: hover) {
  .hover-zoom:hover .hover-zoom-popup {
    display: block;
  }
}

/* Alto uniforme para que ninguna tarjeta de ingrediente ("Armá tu Mix")
   quede visualmente "chica" al lado de una "grande" por tener nombre o
   descripción más largos. Un min-height fijo no alcanza (una tarjeta con
   2 líneas de nombre + 2 de descripción lo supera igual) — en cambio
   .row de Bootstrap ya es flex con align-items:stretch por default, así
   que cada .col-sm-6 se estira solo a la altura de la fila; acá solo
   falta que la tarjeta ocupe el 100% de ese alto ya estirado.
   */
.tarjeta-ingrediente {
  height: 100%;
}

.tarjeta-producto {
  background: #fff;
  border: 1px solid var(--marca-crema-2);
  border-radius: 1rem;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
  height: 100%;
}
.tarjeta-producto:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(58, 36, 23, .12);
}
.tarjeta-producto .img-producto {
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--marca-crema-2), var(--marca-tostado) 140%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--marca-cacao);
  font-size: 2.5rem;
}
.tarjeta-producto .img-producto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.categoria-titulo {
  border-left: 5px solid var(--marca-tostado);
  padding-left: .75rem;
  margin: 2.5rem 0 1.5rem;
}

.select-presentacion {
  border-color: var(--marca-crema-2);
}

/* Ancho FIJO a propósito (no "auto"): el input adentro tiene
   flex-grow:1 (regla propia de Bootstrap para inputs dentro de un
   .input-group), y sin un ancho definido acá el navegador lo deja
   crecer sin límite — se ve gigante y rompe el resto de la fila
   (selector de presentación, botón Agregar). */
.cantidad-grupo {
  width: 6.5rem;
  flex: none;
}
.cantidad-grupo .btn {
  padding-left: .5rem;
  padding-right: .5rem;
}
/* Con los botones −/+ propios, las flechitas nativas del input number
   quedan redundantes (y ocupan espacio de más al lado). */
.sin-flechas::-webkit-inner-spin-button,
.sin-flechas::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.sin-flechas {
  -moz-appearance: textfield;
}

.footer-marca {
  background: var(--marca-cacao);
  color: var(--marca-crema);
}
/* Teléfono del footer más grande que el resto — es lo que se quiere que
   resalte de cara al cliente; los horarios de abajo quedan chicos
   (.small) a propósito, para no competir. */
.footer-telefono { font-size: 1.35rem; font-weight: 600; margin-top: .25rem; }
/* Fila de íconos de redes sociales del footer, debajo de "Seguinos en" */
.footer-redes { display: flex; gap: .6rem; flex-wrap: wrap; }
.footer-red-icono {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: var(--marca-crema);
  font-size: 1rem; transition: background .15s ease, color .15s ease;
}
.footer-red-icono:hover { background: var(--marca-tostado); color: var(--marca-cacao); }

.item-carrito {
  border-bottom: 1px solid var(--marca-crema-2);
  padding: .75rem 0;
}

.paso-checkout {
  background: #fff;
  border-radius: 1rem;
  border: 1px solid var(--marca-crema-2);
}

/* Botón flotante "volver arriba" — oculto por default (JS lo muestra
   recién después de bajar un poco, no todo el tiempo) y siempre con
   transición suave, nunca un salto brusco de aparición. */
.btn-volver-arriba {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1030;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--marca-nuez);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 6px 16px rgba(58, 36, 23, .3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s ease, transform .2s ease, background .15s ease;
}
.btn-volver-arriba.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.btn-volver-arriba:hover {
  background: var(--marca-cacao);
  color: #fff;
}
@media (prefers-reduced-motion: reduce) {
  .btn-volver-arriba { transition: opacity .2s ease; }
}

/* Honeypot anti-spam: oculto fuera de pantalla, nunca display:none (un bot
   con navegador headless lo detecta como truco demasiado fácil). */
.cf-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Botones de contacto del footer (WhatsApp/Telegram/email) — mismos colores
   e íconos que ya usa el sitio de Radio, pero inline en el footer, no
   flotantes. */
.btn-contacto {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  padding: 8px 14px 8px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  transition: transform .15s, box-shadow .15s;
}
.btn-contacto:hover {
  transform: translateY(-2px);
  color: #fff;
}
.btn-contacto svg,
.btn-contacto i {
  flex: none;
}
.btn-contacto-wa { background: #25D366; }
.btn-contacto-tg { background: #29a9eb; }
.btn-contacto-email { background: var(--marca-oliva); }