:root{
      --bg:#fffaf6;
      --cafe:#4a2c2a;
      --marron:#6b3f2f;
      --crema:#f6efe6;
      --verde:#2f5f3b;
      --acento:#c07a2f;
      --dorado:#c79b45;
      --muted:#7b7b7b;
    }
    @font-face {
  font-family: 'cafe';
  src: url('../font/Coffee Break.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
body {
  overflow-x: hidden;
}
    *{box-sizing:border-box}
    html,body{height:100%;margin:0;background:var(--bg);font-family:Inter,system-ui,Arial,sans-serif;color:var(--cafe);-webkit-font-smoothing:antialiased}
    a{color:inherit}
    .wrap{max-width:1200px;margin:0 auto;padding:40px 20px}

    /* --- HERO PRODUCTO --- */
    header#hero{
      position:relative; overflow:hidden; height:78vh; min-height:520px; display:flex; align-items:center;
      background:linear-gradient(180deg, rgba(250,247,244,0.9), var(--bg));
      border-bottom:1px solid rgba(74,44,42,0.04);
    }
    .hero-inner{display:grid;grid-template-columns:1fr 520px;gap:40px;align-items:center;width:100%;max-width:1200px;margin:0 auto;padding:40px 20px}
    .hero-copy h1{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,48px);line-height:1.02;margin:0 0 12px;color:var(--marron)}
    .hero-copy p{color:var(--muted);font-size:1.05rem;margin-bottom:18px}
    .hero-cta{display:flex;gap:12px}
    .btn{background:linear-gradient(180deg,var(--acento),#9b4b12);color:#fff;padding:12px 18px;border-radius:12px;border:none;cursor:pointer;font-weight:700}
    .btn-ghost{background:transparent;border:2px solid var(--marron);padding:10px 16px;border-radius:12px;cursor:pointer}
    .hero-visual{position:relative;display:flex;align-items:center;justify-content:center;perspective:1600px}
    .hero-img{
      width:420px;height:420px;border-radius:20px;object-fit:cover;box-shadow:0 30px 60px rgba(74,44,42,0.12);transform-origin:center center;
      background-size:cover;background-position:center center;
    }
    /* parallax overlay glow */
    .hero-glow{position:absolute;inset:10px;border-radius:22px;pointer-events:none;mix-blend-mode:soft-light}

    /* --- FEATURES (cards tilt) --- */
    section#features{padding:80px 0;background:transparent}
    .features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
    .feature-card{
      background:linear-gradient(180deg,#fff,var(--crema));padding:22px;border-radius:16px;box-shadow:0 18px 30px rgba(74,44,42,0.06);
      transform-style:preserve-3d;cursor:pointer;min-height:180px;display:flex;flex-direction:column;gap:12px;
      transition:transform .25s ease,box-shadow .25s ease;
    }
    .feature-card h3{margin:0;font-size:1.05rem;color:var(--marron)}
    .feature-card p{margin:0;color:var(--muted);font-size:.95rem}
    .feature-cta{margin-top:auto;display:flex;gap:8px;align-items:center}

    /* --- TESTIMONIALS (swiper) --- */
    section#testimonials{padding:80px 0;background:linear-gradient(180deg,#fff8f2,#fff)}
    .testi-wrap{display:flex;gap:30px;align-items:center;flex-direction:column}
    .swiper-slide{display:flex;align-items:center;gap:16px;flex-direction:column;text-align:center;padding:24px;background:#fff;border-radius:14px;box-shadow:0 10px 30px rgba(74,44,42,0.06)}
    .quote{font-size:1rem;color:var(--marron);line-height:1.5}
    .author{font-weight:700;color:var(--muted);margin-top:12px}

    /* --- SENSORY EXPERIENCE (particles + keywords) --- */
    section#sensory{  position:relative;padding:90px 0;overflow:hidden;background:linear-gradient(180deg,#fefdfc,#fff8f2)}
    #particles-sensory{position:absolute;inset:0;z-index:0}
    .sensory-inner{  visibility: hidden;height: 0px;position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:18px}
    .bean-visual{width:260px;height:0px;border-radius:18px;background-image: url('https://images.unsplash.com/photo-1604908177522-3f08dbb3d6a2?q=80&w=1200&auto=format&fit=crop&ixlib=rb-4.0.3&s=2d1b3b4159f5d2b6e54b4a2b3f5b6e0f'); background-size:cover;background-position:center;box-shadow:0 30px 50px rgba(74,44,42,0.12);display:flex;align-items:center;justify-content:center;position:relative;overflow:visible}
    .glow-ring{  visibility: hidden;height: 0px;position:absolute;inset:-16px;border-radius:22px;filter:blur(24px);opacity:0.6}
    .keywords{  visibility: hidden;height: 0px;position:relative;width:100%;max-width:900px;height:180px;margin-top:6px;display:block}
    .kw{  visibility: hidden;height: 0px;position:absolute;background:rgba(255,255,255,0.95);padding:8px 12px;border-radius:999px;font-weight:600;color:var(--marron);box-shadow:0 10px 20px rgba(74,44,42,0.06);cursor:pointer;user-select:none;transition:transform .18s ease,box-shadow .18s}
    .kw:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 20px 40px rgba(74,44,42,0.12)}
    /* small overlay card for clicked keyword */
    .kw-card{position:fixed;right:20px;bottom:20px;background:#fff;padding:16px;border-radius:12px;box-shadow:0 20px 40px rgba(0,0,0,0.12);max-width:320px;display:none;z-index:999}
    .kw-card h4{margin:0 0 8px;font-family:'Playfair Display',serif;color:var(--marron)}
    .kw-card p{margin:0;color:var(--muted);font-size:.95rem}

    /* contact placeholder */
    #contacto{padding:60px 0;text-align:center}
    .contact-card{display:inline-block;padding:18px 22px;background:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(74,44,42,0.06);}

    /* RESPONSIVE */
    @media(max-width:980px){
      .hero-inner{grid-template-columns:1fr}
      .hero-visual{order:-1;margin-bottom:12px}
      .hero-img{width:320px;height:320px}
      .bean-visual{width:200px;height:200px}
    }
    @media(max-width:560px){
      .hero-img{width:260px;height:260px}
      .bean-visual{width:160px;height:160px}
    }

/*MODEL VIEWER*/
model-viewer {
  width: 40%;
  height: 500px;
  margin: auto;
  background: url(./bgtaza3.png);
  background-position:bottom ;
  background-size: cover;
  background-repeat: no-repeat;
}

@media (max-width: 992px) {
  model-viewer {
    width: 85%;
    height: 900px;
    order: 1;
  }
}
.columna2 {

  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: auto;
  margin-top: 10px;
}

@media (max-width: 992px) {
  .columna2 {
    flex-direction: column;
  }
}
.columna2 h1 {
  width: 50%;
  margin: auto;
  text-align: center;
  margin: 10px;
  font-family: 'cafe';
  font-size: 125px;
    background: linear-gradient(90deg, #845332, #5e3a1c); /* degradado café */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (max-width: 992px) {
  .columna2 h1 {
    font-size: 60px;
    width: 100%;
  }
}
#taza3d{
  width: 100%;
  border-radius: 20px;
  height: 800px;
  background:#eee3d1;
}
/*MODEL VIEWER*/
/* Card3D */

.wrapper {
  width: 100%;          /* ocupa todo el ancho de la columna */
  max-width: 400px;     /* pero no más grande que 400px */
  aspect-ratio: 1 / 1;  /* fuerza que sea cuadrado */
  perspective: 1200px;
  margin: 0 auto;       /* centra dentro de la columna */
}

    .card {
      position: relative;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      overflow: hidden;
      transform-style: preserve-3d;
      transition: transform 0.25s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .card img {
      max-width: 90%;
      max-height: 90%;
      object-fit: contain;
      position: absolute;
      transition: transform 0.25s ease, filter 0.25s ease;
      pointer-events: none;
    }
    
/*END card3D*/