/* ============================================================
   global.css — Reset, variables, tipografía, utilidades
   ============================================================ */

/* --- Variables -------------------------------------------- */
:root {
  --color-primary:    #c0625b;   /* rosa-coral principal */
  --color-primary-d:  #a04f49;   /* hover/activo */
  --color-secondary:  #f4a7b9;   /* rosa suave acento */
  --color-bg:         #fdfaf8;   /* crema muy claro */
  --color-surface:    #ffffff;
  --color-border:     #ede3e0;
  --color-text:       #2d1f1e;
  --color-muted:      #8a7470;
  --color-success:    #4caf7d;
  --color-warning:    #f0a500;
  --color-danger:     #d94040;

  --font-sans:  'Nunito', 'Segoe UI', Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;
  --radius-xl:  32px;

  --shadow-sm:  0 1px 4px rgba(0,0,0,.07);
  --shadow-md:  0 4px 16px rgba(0,0,0,.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,.13);

  --transition: .2s ease;
  --max-width:  1200px;
  --nav-height: 68px;
}

/* --- Reset ------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-sans);
  background:  var(--color-bg);
  color:       var(--color-text);
  line-height: 1.6;
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

img  { display: block; max-width: 100%; height: auto; }
a    { color: var(--color-primary); text-decoration: none; }
a:hover { color: var(--color-primary-d); }
ul, ol { list-style: none; }

/* --- Tipografía ------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-serif);
  line-height: 1.2;
  color: var(--color-text);
}
h1 { font-size: clamp(1.75rem, 4vw, 2.8rem); }
h2 { font-size: clamp(1.4rem,  3vw, 2.1rem); }
h3 { font-size: clamp(1.1rem,  2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin-bottom: .75rem; }

/* --- Layout ------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

main { flex: 1; padding-top: var(--nav-height); }

.section { padding-block: 4rem; }
.section--sm { padding-block: 2rem; }

/* --- Grid utilitaria --------------------------------------- */
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* --- Flex utilitaria --------------------------------------- */
.flex { display: flex; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: .5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }

/* --- Texto ------------------------------------------------- */
.text-center  { text-align: center; }
.text-muted   { color: var(--color-muted); font-size: .9rem; }
.text-primary { color: var(--color-primary); }
.font-serif   { font-family: var(--font-serif); }
.fw-bold      { font-weight: 700; }

/* --- Precio ----------------------------------------------- */
.precio         { font-weight: 700; color: var(--color-primary); font-size: 1.15rem; }
.precio-tachado { text-decoration: line-through; color: var(--color-muted); font-size: .9rem; }
.badge-oferta   { background: var(--color-danger); color: #fff; font-size: .7rem;
                  padding: 2px 7px; border-radius: 99px; font-weight: 700; }

/* --- Alertas ---------------------------------------------- */
.alert {
  padding: .85rem 1.2rem;
  border-radius: var(--radius-md);
  border-left: 4px solid;
  margin-bottom: 1rem;
  font-size: .92rem;
}
.alert-success { background: #eafaf1; border-color: var(--color-success); color: #1e6640; }
.alert-danger  { background: #fdeaea; border-color: var(--color-danger);  color: #7a1f1f; }
.alert-warning { background: #fff8e1; border-color: var(--color-warning); color: #7a5a00; }

/* --- Spinner ---------------------------------------------- */
.spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 2rem auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Divisor ---------------------------------------------- */
.divider { border: none; border-top: 1px solid var(--color-border); margin-block: 1.5rem; }

/* --- Breadcrumb ------------------------------------------- */
.breadcrumb { display: flex; gap: .5rem; font-size: .85rem; color: var(--color-muted); flex-wrap: wrap; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb span::before { content: '/'; margin-right: .5rem; }

/* --- Paginación ------------------------------------------- */
.pagination { display: flex; gap: .4rem; justify-content: center; margin-top: 2rem; flex-wrap: wrap; }
.pagination a, .pagination span {
  padding: .4rem .85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: .9rem;
  color: var(--color-text);
  transition: background var(--transition);
}
.pagination a:hover   { background: var(--color-secondary); border-color: var(--color-secondary); }
.pagination .active   { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .disabled { color: var(--color-muted); pointer-events: none; }

/* --- Vacío ------------------------------------------------- */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--color-muted); }
.empty-state .icon { font-size: 3rem; margin-bottom: 1rem; }

/* --- Header ----------------------------------------------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  height: var(--nav-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.site-header .container { height: 100%; }

.nav-logo {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--color-primary);
  font-weight: 700;
  letter-spacing: -.5px;
}
.nav-logo span { color: var(--color-text); }

.nav-links { display: flex; gap: 1.75rem; align-items: center; }
.nav-links a {
  font-size: .95rem;
  font-weight: 600;
  color: var(--color-text);
  transition: color var(--transition);
}
.nav-links a:hover { color: var(--color-primary); }

.nav-cart {
  position: relative;
  background: var(--color-primary);
  color: #fff !important;
  padding: .5rem 1.1rem;
  border-radius: var(--radius-xl);
  font-size: .9rem;
}
.nav-cart:hover { background: var(--color-primary-d) !important; color: #fff !important; }
.cart-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--color-text); color: #fff;
  font-size: .68rem; font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

/* --- Footer ----------------------------------------------- */
.site-footer {
  background: var(--color-text);
  color: #c9b8b5;
  padding: 2.5rem 0 1.5rem;
  font-size: .9rem;
  margin-top: auto;
}
.site-footer a { color: #c9b8b5; }
.site-footer a:hover { color: #fff; }
.footer-copy { text-align: center; margin-top: 1.5rem; font-size: .8rem; color: #7a6a67; }