/**
 * base.css
 * -------------------------------------------------------------------------
 * Estilos que se comparten en TODAS las páginas: colores, tipografía,
 * botones y un "reset" básico. Cada página además carga su propio archivo
 * .css con los estilos que solo le pertenecen a ella (por ejemplo
 * catalogo.css solo trae estilos del catálogo).
 *
 * Paleta "nude" cálida y sofisticada: fondo marfil (no blanco puro), texto
 * café muy oscuro (no negro puro), un acento dorado/terracota para darle
 * carácter y vida, y los botones oscuros que se "invierten" al pasar el
 * mouse, tal como en la maqueta original, pero con colores más ricos.
 * -------------------------------------------------------------------------
 */

:root {
  /* ----- Colores de marca ----- */
  --color-fondo: #fbf6f1;          /* Marfil cálido, no blanco puro */
  --color-texto: #2a211c;          /* Café muy oscuro, no negro puro */
  --color-crema: #f1e1d0;          /* Acento cálido más profundo, usado en el footer */
  --color-borde: #e3d2c2;          /* Bordes cálidos (arena), en vez de gris frío */
  --color-negro-calido: #241b15;   /* Para botones principales, en vez de #000 */

  /* Acento vívido: un dorado/terracota sofisticado que le da vida a la
     paleta nude sin perder elegancia. Se usa con moderación: en enlaces
     activos, selección de color, insignias y detalles pequeños. */
  --color-acento: #b3733c;
  --color-acento-oscuro: #8c5a2e;
  --color-acento-suave: #f3e6d8;

  --color-sombra: rgba(60, 40, 20, 0.15);        /* Sombra suave para tarjetas */
  --color-sombra-fuerte: rgba(60, 40, 20, 0.28);  /* Sombra para menús/popups */

  /* ----- Tipografía ----- */
  /* Fuente "display": para el logo y títulos grandes, con look artesanal */
  --fuente-titulos: 'Courier New', Courier, monospace;
  /* Fuente para texto normal: más fácil de leer en párrafos largos */
  --fuente-texto: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* ----- Medidas reutilizables ----- */
  --radio-borde: 10px;
  --transicion-suave: 0.3s ease-in-out;
  --ancho-maximo: 1200px;
}

/* Reset simple: quitamos los márgenes que el navegador pone por defecto */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-fondo);
  color: var(--color-texto);
  font-family: var(--fuente-texto);
  font-size: 16px;
  line-height: 1.5;
  /* Dejamos espacio arriba porque el header queda "fijo" (flotando) */
  padding-top: 90px;
}

h1, h2, h3 {
  font-family: var(--fuente-titulos);
  font-weight: normal;
  margin: 0 0 16px 0;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

/* Contenedor centrado que usamos en varias páginas para no repetir código */
.contenedor {
  width: 100%;
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 20px;
}

/* ----- Botones ----- */
/* Botón principal: fondo negro, texto blanco. Al pasar el mouse se invierte.
   Esto imita el botón "Más productos" de la maqueta original. */
.boton-primario {
  display: inline-block;
  background-color: var(--color-negro-calido);
  color: #ffffff;
  border: 1px solid var(--color-negro-calido);
  border-radius: 4px;
  padding: 12px 24px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion-suave), color var(--transicion-suave);
  text-align: center;
}

.boton-primario:hover {
  background-color: var(--color-fondo);
  color: var(--color-negro-calido);
}

/* Botón secundario: solo borde, para acciones menos importantes */
.boton-secundario {
  display: inline-block;
  background-color: transparent;
  color: #000000;
  border: 1px solid var(--color-borde);
  border-radius: 4px;
  padding: 12px 24px;
  font-family: var(--fuente-texto);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion-suave);
  text-align: center;
}

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

/* Detalle de acento: subrayado/realce dorado para elementos que queremos
   destacar sin usar un botón completo (precios, insignias, enlaces activos). */
.texto-acento {
  color: var(--color-acento-oscuro);
}

/* Mensaje pequeño de error, usado en formularios */
.mensaje-error {
  color: #b00020;
  font-size: 14px;
  margin-top: 6px;
}

/* Mensaje pequeño de éxito */
.mensaje-exito {
  color: #1e7d32;
  font-size: 14px;
  margin-top: 6px;
}

/* Clase para ocultar elementos sin borrarlos del HTML */
.oculto {
  display: none !important;
}

/* Oculta un elemento SOLO visualmente (lectores de pantalla y buscadores
   igual lo "ven"), a diferencia de ".oculto" que lo esconde por completo.
   Se usa en encabezados <h1> de respaldo que existen para SEO/accesibilidad
   mientras el contenido real todavía está cargando por JavaScript. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}