/*
 * Carmelo Monte — paleta de colores, tipografía y estilos de menú
 * Extraído del sitio real (carmelomonte.com) para reutilizar en el sitio nuevo.
 */

:root {
  /* Marca */
  --cm-accent: #8b7355;       /* bronce/taupe — color principal de marca (links, subrayados, iconos) */
  --cm-accent-light: #c9a96e; /* dorado claro — detalles, líneas decorativas */
  --cm-accent-soft: #c9b99a;  /* variante suave — bullets de slider, detalles hero */

  /* Texto */
  --cm-text: #2b2b2b;         /* texto principal / títulos */
  --cm-text-muted: #666666;   /* texto secundario */
  --cm-text-mute-2: #888888;  /* texto terciario */
  --cm-text-mute-3: #aaaaaa;  /* texto auxiliar */
  --cm-text-mute-4: #bbbbbb;  /* texto muy tenue */

  /* Fondos */
  --cm-bg: #ffffff;
  --cm-bg-soft: #f8f7f5;      /* fondo crema — secciones alternadas, footer */

  /* Bordes */
  --cm-border: #e5e3df;
  --cm-border-soft: #ddd7cf;

  /* WhatsApp flotante */
  --cm-whatsapp: #00c758;
  --cm-whatsapp-hover: #00a544;

  /* Tipografía */
  --cm-font: Inter, "Inter Fallback", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

body {
  font-family: var(--cm-font);
  color: var(--cm-text);
  background: var(--cm-bg);
}

/* ===== Menú principal ===== */
header {
  background: var(--cm-bg);
  border-bottom: 1px solid var(--cm-border);
}

header nav a,
header nav button {
  color: var(--cm-text);
  font-weight: 500;
  transition: color 0.3s ease;
}

header nav a:hover,
header nav button:hover,
header nav a.is-active {
  color: var(--cm-accent);
}

/* subrayado animado al hacer hover (igual que el original) */
header nav a span.cm-underline {
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 2px;
  width: 0;
  background: var(--cm-accent);
  transition: width 0.3s ease;
}
header nav a:hover span.cm-underline {
  width: 100%;
}

/* Dropdown "Quienes Somos" */
.cm-dropdown {
  position: relative;
}
.cm-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.5rem;
  min-width: 220px;
  background: var(--cm-bg);
  border: 1px solid var(--cm-border);
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 0.5rem;
  z-index: 60;
}
.cm-dropdown.is-open .cm-dropdown-menu {
  display: block;
}
.cm-dropdown-menu a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: var(--cm-text);
}
.cm-dropdown-menu a:hover {
  background: var(--cm-bg-soft);
  color: var(--cm-accent);
}

/* Menú móvil */
.cm-mobile-menu.is-open {
  transform: translateX(0) !important;
}

/* Botón flotante de WhatsApp */
.whatsapp-float {
  background-color: var(--cm-whatsapp);
}
.whatsapp-float:hover {
  background-color: var(--cm-whatsapp-hover);
}

/* Footer */
footer {
  background: var(--cm-bg-soft);
  border-top: 1px solid var(--cm-border);
  color: var(--cm-text-muted);
}