/* ============================================================
   main.css — Fiori
   Variables globales, reset, tipografía, layout base,
   sistema de páginas, .card y .container
   ============================================================ */

/* ===== GOOGLE FONTS (referencia — ya incluida en index.html) =====
   <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;600;700&family=Lato:wght@300;400;700&display=swap" rel="stylesheet">
*/

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

/* ===== VARIABLES GLOBALES ===== */
:root {
  /* Colores */
  --red:        #d90a0a;
  --red-dark:   #a50808;
  --red-light:  #ff2a2a;
  --dark:       #111111;
  --dark2:      #1c1c1c;
  --gray:       #444;
  --gray-light: #888;
  --light:      #f2f2f2;
  --white:      #ffffff;
  --border:     #e0e0e0;

  /* Sombras */
  --shadow:    0 4px 20px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.16);

  /* Bordes redondeados */
  --radius:    12px;
  --radius-lg: 16px;
}

/* ===== TIPOGRAFÍA Y BODY BASE ===== */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: 'Lato', sans-serif;
  background: var(--light);
  color: var(--dark);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

body > footer {
  margin-top: auto;
}

/* ===== LAYOUT BASE ===== */
.container {
  padding: 28px 20px;
  max-width: 1000px;
  margin: 0 auto;
}

/* ===== SISTEMA DE PÁGINAS ===== */
.pagina {
  display: none;
  animation: fadeIn 0.28s ease;
}

.pagina.activa {
  display: flex;
  flex-direction: column;
  flex: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ===== CARDS ===== */
.card {
  background: var(--white);
  padding: 36px 44px;
  margin: 16px 0;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.card h2 {
  font-family: 'Oswald', sans-serif;
  color: var(--red);
  font-size: 2.1rem;
  margin-bottom: 18px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.card h2::after {
  content: '';
  flex: 1;
  height: 2px;
  background: linear-gradient(to right, var(--red), transparent);
  margin-left: 8px;
}

/* ===== OCULTAR PLACEHOLDERS Y BOTONES DE CARGA ===== */
/* Eliminar íconos/logos transparentes que se superponen a las imágenes */
.cat-placeholder           { display: none !important; }
.home-cat-crosshair        { display: none !important; }
.cat-icon-svg              { display: none !important; }

/* Eliminar todos los botones de agregar/cambiar imagen */
.home-cat-upload-btn       { display: none !important; }
.home-rev-upload-btn       { display: none !important; }
.dest-upload-btn           { display: none !important; }
.hero-img-upload           { display: none !important; }
.btn-cat-img               { display: none !important; }