@font-face {
      font-family: 'Maxwell';
      src: url('../fonts/maxwell.ttf') format('truetype');
    }
    @font-face {
      font-family: 'Poppins';
      src: url('../fonts/poppins-light.otf') format('opentype');
      font-weight: 300;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --gold: #D5B17E;
      --cream: #E8D5A3;
      --beige: #C8A96E;
      --dark-brown: #4C352E;
      --mid-brown: #3D2010;
      --red-section: #8B3A3A;
      --white: #FAF7F2;
    }
    html { scroll-behavior: smooth; }
    body { font-family: 'Poppins', Georgia, serif; font-weight: 300; background: var(--white); color: var(--dark-brown); overflow-x: hidden; }

    /* HERO */
    .hero { position: relative; width: 100%; height: 100vh; min-height: 580px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
    .hero-bg { position: absolute; inset: 0; background-image: url('../img/hero.jpg'); background-size: cover; background-position: center top; filter: brightness(0.52); transform: scale(1.05); transition: transform 10s ease; }
    .hero:hover .hero-bg { transform: scale(1.0); }
    .hero-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(20,8,2,0.15) 0%, rgba(20,8,2,0.4) 45%, rgba(20,8,2,0.82) 100%); }
    .hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; animation: fadeUp 1.3s ease forwards; padding: 0 20px; }

    .logo-gold { width: clamp(200px, 28.6vw, 350px); margin-bottom: 28px; }
    .hero-title-img { width: clamp(364px, 100vw, 1350px); max-width: 98vw; }

    .hero-social { position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; gap: 22px; align-items: center; }
    .hero-social a { opacity: 0.85; transition: opacity 0.3s, transform 0.3s; text-decoration: none; display: flex; }
    .hero-social a:hover { opacity: 1; transform: translateY(-3px); }
    .hero-social img { width: 22px; height: 22px; object-fit: contain; }

    /* Form dentro de contacto */
    .contacto-form form { display: flex; flex-direction: column; gap: 11px; }

    /* FILOSOFIA */
    .filosofia { background: var(--beige); padding: 64px 24px; text-align: center; }
    .filosofia-title-img { height: clamp(55px, 8vw, 180px); margin-bottom: 22px; }
    .filosofia p { max-width: 780px; margin: 0 auto; font-size: 16px; color: var(--mid-brown); line-height: 1.85; font-size:20px; margin-top: -40px; padding-bottom: 20px;}

    /* GRID COLLAGE */
    .grid-collage { width: 100%; height: 320px; overflow: hidden; }
    .grid-collage img { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; transition: transform 8s ease; }
    .grid-collage:hover img { transform: scale(1.03); }

    /* MARCA */
    .marca { background: var(--beige); display: grid; grid-template-columns: 0.8fr 1.2fr; min-height: 460px; }
    .marca-text { padding: 60px 52px 60px 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 20px; }
    .logo-brown { width: clamp(130px, 20vw, 220px); margin-bottom: 4px; }
    .marca-title-img { width: clamp(200px, 38vw, 480px); }
    .marca-divider { width: 250px; height: 2px; background: var(--dark-brown); opacity: 0.4; margin: 0 auto; }
    .marca p { font-size: 20px; color: var(--mid-brown); line-height: 1.8; max-width: 620px; text-align: center; }
    .marca-image { overflow: hidden; }
    .marca-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 8s ease;padding: 50px; }
    .marca-image:hover img { transform: scale(1.04); }

    /* CATEGORIAS */
    .categorias { background: var(--red-section); padding: 60px 40px; }
    .categorias-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; max-width: 1440px; margin: 0 auto; }
    .categoria-item { display: flex; flex-direction: column; align-items: center; gap: 18px; }
    .categoria-img { width: 100%; aspect-ratio: 1; overflow: hidden; border-radius: 3px; }
    .categoria-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
    .categoria-item:hover .categoria-img img { transform: scale(1.09); }
    .categoria-name { font-family: 'Poppins', serif; color: var(--gold); font-size: clamp(0.68rem, 1.5vw, 1.5rem); letter-spacing: 0.22em; text-transform: uppercase; text-align: center; line-height: 1.6; font-weight: 300; }

    /* CONTACTO */
    .contacto-wrap { background: var(--white); padding: 80px 40px; }
    .contacto-title-img { display: block; margin: 0 auto 48px; height: clamp(120px, 2.5vw, 30px); }
    .contacto-inner { display: grid; grid-template-columns: 0.8fr 1.4fr; gap: 72px; max-width: 1280px; margin: 0 auto; align-items: start; }
    .contacto-info { display: flex; flex-direction: column; gap: 20px; }
    .contacto-info-item { display: flex; align-items: flex-start; gap: 13px; font-size: 1.2rem; color: #555; line-height: 1.5; }
    .contacto-info-item svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; fill: #2A1A0E; }
    .contacto-form { display: flex; flex-direction: column; gap: 11px; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
    .contacto-form input, .contacto-form textarea { width: 100%; box-shadow: 1px 1px 20px #ccc; padding: 14px 13px; border: 1px solid #ddd; background: #fafafa; font-family: 'Poppins', sans-serif; font-size: 0.8rem; color: var(--dark-brown); outline: none; transition: border-color 0.3s; resize: none; border-radius: 2px; }
    .contacto-form input:focus, .contacto-form textarea:focus { border-color: var(--gold); }
    .contacto-form textarea { height: 106px; }
    .btn-enviar { background: var(--mid-brown); color: var(--cream); font-family: 'Poppins', sans-serif; font-size: 0.8rem; letter-spacing: 0.14em; padding: 12px 30px; border: none; cursor: pointer; transition: background 0.3s; align-self: flex-start; border-radius: 2px; }
    .btn-enviar:hover { background: var(--dark-brown); }

    /* FOOTER */
    footer { background: var(--dark-brown); padding: 52px 24px 36px; display: flex; flex-direction: column; align-items: center; gap: 24px; }
    .footer-logo-img { width: clamp(160px, 24vw, 300px); margin-bottom: 40px}
    .footer-divider { width: 220px; height: 2px; background: var(--gold); opacity: 0.35; }
    .footer-social { display: flex; gap: 22px; align-items: center; }
    .footer-social a { opacity: 0.65; transition: opacity 0.3s; display: flex; }
    .footer-social a:hover { opacity: 1; }
    .footer-social img { width: 30px; height: 30px; object-fit: color:#D5B17E; }

    @keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }

    /* ── TABLET (hasta 1024px) ── */
    @media (max-width: 1024px) {
      .logo-gold { width: 220px; }
      .hero-title-img { width: 90vw; max-width: 860px; }
      .hero-social { margin-top: 12vh; }

      .filosofia { padding: 52px 32px; }
      .filosofia-title-img { height: 70px; }
      .filosofia p { font-size: 17px; }

      .marca { grid-template-columns: 1fr 1fr; min-height: 400px; }
      .marca-text { padding: 48px 36px; }
      .logo-brown { width: 150px; }
      .marca-title-img { width: 90%; }
      .marca p { font-size: 15px; }

      .categorias { padding: 52px 32px; }
      .categoria-name { font-size: 1rem; }

      .contacto-wrap { padding: 72px 32px; }
      .contacto-inner { gap: 48px; max-width: 800px; }
      .contacto-title-img { height: 36px; }
    }

    /* ── TABLET / MÓVIL GRANDE (hasta 768px) ── */
    @media (max-width: 768px) {
      /* Hero */
      .hero { min-height: 100svh; }
      .logo-gold { width: 160px; margin-bottom: 16px; }
      .hero-title-img { width: 95vw; max-width: 95vw; }
      .hero-social { margin-top: 8vh; gap: 28px; }
      .hero-social img { width: 26px; height: 26px; }

      /* Filosofia */
      .filosofia { padding: 44px 24px; }
      .filosofia-title-img { height: 50px; margin-bottom: 20px; }
      .filosofia p { font-size: 15px; max-width: 100%; }

      /* Grid collage */
      .grid-collage { height: 220px; }

      /* Marca: texto arriba, imagen abajo */
      .marca { grid-template-columns: 1fr; display: flex; flex-direction: column; }
      .marca-text { order: 1; padding: 44px 28px; width: 100%; }
      .marca-image { order: 2; width: 100%; height: 300px; }
      .marca-image img { width: 100%; height: 100%; object-fit: cover; }
      .logo-brown { width: 130px; }
      .marca-title-img { width: 85vw; max-width: 380px; }
      .marca p { font-size: 15px; max-width: 100%; }
      .marca-divider { width: 180px; }

      /* Categorias */
      .categorias { padding: 44px 16px; }
      .categorias-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 100%; }
      .categoria-name { font-size: 0.9rem; letter-spacing: 0.12em; }

      /* Contacto */
      .contacto-wrap { padding: 52px 24px; }
      .contacto-title-img { height: 36px; margin-bottom: 36px; }
      .contacto-inner { grid-template-columns: 1fr; gap: 32px; max-width: 100%; }
      .contacto-info-item { font-size: 1rem; }
      .form-row { grid-template-columns: 1fr; }
      .btn-enviar { width: 100%; text-align: center; }

      /* Footer */
      .footer-logo-img { width: 180px; }
      .footer-social img { width: 26px; height: 26px; object-fit: contain; }
    }

    /* ── MÓVIL (hasta 480px) ── */
    @media (max-width: 480px) {
      /* Hero */
      .logo-gold { width: 140px; margin-bottom: 14px; }
      .hero-title-img { width: 98vw; max-width: 98vw; }
      .hero-social { margin-top: 6vh; gap: 22px; }
      .hero-social img { width: 24px; height: 24px; }

      /* Filosofia */
      .filosofia { padding: 36px 20px; }
      .filosofia-title-img { height: 40px; margin-bottom: 16px; }
      .filosofia p { font-size: 14px; }

      /* Grid collage */
      .grid-collage { height: 180px; }

      /* Marca */
      .marca-image { height: 250px; }
      .marca-text { padding: 36px 20px; gap: 14px; }
      .logo-brown { width: 110px; }
      .marca-title-img { width: 92vw; }
      .marca p { font-size: 14px; }

      /* Categorias */
      .categorias { padding: 36px 12px; }
      .categorias-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
      .categoria-name { font-size: 0.8rem; letter-spacing: 0.1em; }

      /* Contacto */
      .contacto-wrap { padding: 40px 20px; }
      .contacto-title-img { height: 30px; margin-bottom: 28px; }
      .contacto-info-item { font-size: 0.9rem; }
      .contacto-form input, .contacto-form textarea { font-size: 0.85rem; padding: 12px; }
      .btn-enviar { font-size: 0.85rem; padding: 13px; }

      /* Footer */
      .footer-logo-img { width: 140px; }
      .footer-social img { width: 22px; height: 22px; object-fit: contain; }
    }