/* Piel Canela — estilos principales (actualizado)
   Incluye: menú móvil funcional, tarjetas raciones móviles y testimonios/estadísticas visuales.
   Fecha: 2026-01-23
*/

:root{
  --bg:#ffffff;
  --muted:#6b7280;
  --accent:#2b2f36;
  --primary:#2e3a47;
  --primary-cta:#2d3748;
  --radius:12px;
  --card-bg:#f7f8f9;
  --container-width:1100px;
  --quote-color:#e9e9ea;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset y global */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--primary);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
.container{max-width:var(--container-width);margin:0 auto;padding:30px}

/* Header / Nav */
.site-nav{background:transparent;padding:10px 0;position:relative;z-index:50}
.nav-top{padding:6px 0}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding-top:6px}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:56px;border-radius:50%;display:block;object-fit:contain}
.nav-links{list-style:none;display:flex;gap:28px;margin:0;padding:0;align-items:center}
.nav-links a{text-decoration:none;color:var(--muted);font-weight:500;padding:8px 6px;border-radius:6px}
.nav-links a:hover{color:var(--accent);background:rgba(45,55,72,0.03)}

.nav-toggle{
  display:none;
  background:transparent;border:0;padding:8px;border-radius:8px;cursor:pointer;
  align-items:center;justify-content:center;
}
.nav-toggle:focus{outline:2px solid rgba(45,55,72,0.12);}

/* HERO */
.hero{align-items:center;gap:30px;margin-top:20px;display:grid;grid-template-columns:1fr 420px}
.hero .hero-text h1{font-size:48px;margin:0 0 16px}
.hero .hero-text p{color:var(--muted);max-width:640px}
.hero-actions{display:flex;gap:12px;align-items:center}

/* BOTONES */
.btn{display:inline-block;padding:12px 18px;border-radius:8px;text-decoration:none;line-height:1}
.btn.primary{background:var(--primary-cta);color:white}
.btn.outline{background:transparent;border:1px solid var(--primary-cta);color:var(--primary-cta)}

/* SECCIONES */
.tag{display:inline-flex;align-items:center;background:#f1f3f5;color:var(--muted);padding:8px 12px;border-radius:8px;font-weight:600;gap:8px}
.essence,.specialties,.strengths,.testimonials{padding:40px 0}

/* CARDS */
.cards{display:grid;gap:18px}
.card{background:var(--card-bg);padding:18px;border-radius:12px;overflow:hidden;box-shadow:0 2px 6px rgba(15,15,15,0.02)}
.feature-icon{width:56px;height:56px;border-radius:50%;background:#3a3f49;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:10px}

/* IMAGENES - comportamiento general */
img{max-width:100%;height:auto;display:block;object-fit:cover;border-radius:8px}

/* RACIONES: tarjetas estilo móvil (imagen arriba, contenido abajo, bordes redondeados) */
.menu-grid { margin: 0; padding: 0; }
.menu-item.card{
  background:#fff;
  border-radius:14px;
  padding:0;
  overflow:hidden;
  border:1px solid #eeeff1;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.menu-item.card img {
  width:100%;
  height:180px;
  object-fit:cover;
  display:block;
  border-bottom:1px solid #f1f2f4;
}
.menu-item.card .price { padding: 0 16px 18px; font-weight:700; color:var(--accent); }
.menu-item.card h3, .menu-item.card p { padding: 12px 16px 0 16px; margin:0; color:var(--muted); }

/* Ajustes para ciertos listados grandes */
.menu-grid.four-col { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.menu-grid.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.menu-grid.two-col { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }

/* HERO image constraints */
.hero-image img { width:100%; max-height:560px; height:100%; object-fit:cover; border-radius:12px; }

/* --- TESTIMONIOS & ESTADÍSTICAS (pegar en style.css) --- */

/* Contenedor de testimonios */
.testimonials {
  padding: 48px 0;
  background: linear-gradient(180deg, rgba(250,250,250,0.6), rgba(255,255,255,0));
}

/* Título */
.testimonials > h2 {
  font-size: 32px;
  margin-bottom: 20px;
  color: var(--accent);
}

/* Grid de testimonios: 3 columnas en desktop, se apilan en móvil */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 28px;
}

/* Caja testimonial */
.testimonial-card {
  background: #fff;
  border-radius: 10px;
  padding: 22px;
  border: 1px solid #e7e8ea;
  position: relative;
  box-shadow: 0 6px 18px rgba(15,15,15,0.02);
  overflow: visible;
  min-height: 140px;
}

/* Comillas decorativas grandes (usar pseudo elementos para estética) */
.testimonial-card::before {
  content: "“";
  position: absolute;
  left: 12px;
  top: -8px;
  font-size: 44px;
  color: var(--muted);
  opacity: 0.12;
}
.testimonial-card::after {
  content: "”";
  position: absolute;
  right: 12px;
  bottom: -10px;
  font-size: 44px;
  color: var(--muted);
  opacity: 0.12;
}

/* Texto y autor dentro de la tarjeta */
.testimonial-card .quote {
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 12px 0;
  font-size: 0.98rem;
}
.testimonial-card .author {
  color: var(--accent);
  font-weight: 700;
  margin-top: 8px;
}

/* Estadísticas: centradas y con números grandes */
.testimonial-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 8px;
}

/* Caja de stat */
.stat-box {
  background: linear-gradient(180deg,#fff,#fbfbfb);
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  border: 1px solid #f0f1f3;
  box-shadow: 0 6px 18px rgba(15,15,15,0.02);
}

/* Número grande */
.stat-number {
  font-size: 48px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 6px;
}

/* Titulo y subtitulo */
.stat-title { font-weight:700; color:var(--accent); margin-bottom:6px; }
.stat-sub { color:var(--muted); font-size:0.95rem; }

/* ----------------- RESPONSIVE ----------------- */
@media (max-width: 1024px) {
  .testimonials-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .testimonial-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 720px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
  .testimonial-stats {
    grid-template-columns: 1fr;
  }
  .testimonial-card::before, .testimonial-card::after {
    font-size: 36px;
    opacity: 0.08;
  }
  .stat-number { font-size: 40px; }
}

/* --- End testimonials section --- */

/* Stat card (small box) */
.stat-box {
  background: linear-gradient(180deg,#fff,#fbfbfb);
  padding:18px;
  border-radius:10px;
  text-align:center;
  border:1px solid #f0f1f3;
}
.stat-number {
  font-size:48px;
  font-weight:700;
  color:var(--accent);
  margin-bottom:6px;
}
.stat-title { font-weight:700; color:var(--accent); margin-bottom:6px; }
.stat-sub { color:var(--muted); font-size:0.95rem; }

/* Utilities y spacing */
h1,h2,h3,h4 { color:var(--accent); margin:0 0 12px; font-weight:700; }
p { margin:0 0 16px; color:var(--muted); }

/* FOOTER */
.site-footer { background:#fbfbfb; padding:28px 0; margin-top:40px; border-top:1px solid #eee; }
.footer-grid { display:grid; grid-template-columns:1fr 1fr auto; gap:16px; align-items:start; }

/* Responsivo: móvil */
@media (max-width:900px) {
  .container{padding:18px}
  .hero{grid-template-columns:1fr}
  .hero .hero-text h1{font-size:36px}
  .hero-image img { max-height:360px; }

  /* Mostrar botón hamburguesa */
  .nav-toggle{display:flex}
  .nav-links {
    display:flex;
    flex-direction:column;
    gap:0;
    margin:0;
    padding:8px;
    background:var(--bg);
    border-radius:8px;
    box-shadow: 0 8px 24px rgba(34,41,47,0.06);
    overflow:hidden;
    max-height:0;
    transition: max-height 320ms ease, padding 220ms ease;
  }
  .site-nav.open .nav-links { max-height:420px; padding:12px; }

  /* Menu grid adaptativo */
  .menu-grid.four-col, .menu-grid.three-col, .menu-grid.two-col {
    grid-template-columns:1fr;
  }
  .menu-item.card img { height:200px; }

  /* testimonial layout stack */
  .testimonials-grid { grid-template-columns:1fr; gap:14px; }
  .testimonial-stats { grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
  .stat-number { font-size:40px; }
}

/* Responsivo intermedio */
@media (max-width:1100px) {
  .hero{grid-template-columns:1fr 360px}
  .menu-grid .menu-item img { height:190px; }
}

/* Transiciones */
img, .card, .menu-item { transition: transform 200ms ease, box-shadow 200ms ease; }
.menu-item:hover img, .card:hover img { transform: scale(1.02); }

/* Fallback: si la imagen no existe, fondo suave */
.menu-item img[alt], .card img[alt] { background: linear-gradient(180deg,#f8fafb,#f3f5f7); }

/* Fin de fichero */