/* --- index.html --- */
/* assets/css/main.css */
:root{
  --bg: #ffffff;
  --menu-bg: #000000;
  --accent-shadow: rgba(0,0,0,0.18);
  --radius: 14px;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  color:#111;
}

/* Center the content both horizontally and vertically */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2rem;
}

.stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2rem;
  width:100%;
  max-width:980px;
}

/* Floating animation */
@keyframes floatY{
  0%{transform:translateY(-14px)}
  50%{transform:translateY(14px)}
  100%{transform:translateY(-14px)}
}

.logo{
  width: 17em;
  height:auto;
  display:block;
  will-change:transform;
  animation:floatY 4s ease-in-out infinite;
}


.logo:hover{
 transition: 2s;
 scale: 1.1;

}


/* Menu container (black with yellow shadow) */
.menu{
  display:flex;
  flex-wrap:wrap;               /* permite que los items pasen a la siguiente fila */
  gap: 0.9em;
  align-items:center;
  justify-content:center;       /* centra siempre los items */
  margin: 0.9em 0;
  background:var(--menu-bg);
  padding: 0.8em;
  border-radius: calc(var(--radius) + 0.6em);
  box-shadow:
    0 0.6em 1.4em -0.4em rgba(0,0,0,.20),
    0 0.4em 1em 0 rgba(255,255,255,.06);
  will-change:transform;
  animation: floatY 4s ease-in-out infinite reverse;
}

.menu-item{
  color:#fff;
  text-decoration:none;
  padding: 0.9em 1.2em;        /* mayor área de toque */
  border-radius: 1em;
  font-weight:600;
  letter-spacing:0.2px;
  transition: transform 220ms ease, background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
  transform-origin:center;
  display:inline-block;
  min-width: 6.5em;            /* evita items demasiado pequeños */
  text-align: center;
  white-space: nowrap;         /* evita saltos de palabra */
}

/* Hover / focus state: scale, add shadow; rectangle grows and flips colors */
.menu-item:hover,
.menu-item:focus,
.menu-item.hover{
  transform:scale(1.06);
  background:#ffffff;
  color:#000000;
  box-shadow:0 12px 30px var(--accent-shadow);
  padding:12px 22px;
  outline:none;
}

/* Keyboard focus visible */
.menu-item:focus{
  box-shadow:0 12px 30px rgba(0,0,0,0.22), 0 0 0 3px rgba(255,223,0,0.15);
}

/* Make sure the entire menu remains visually centered on small screens */
@media (max-width:520px){
  .logo{width:180px}
  .menu{gap:0.5rem; padding:10px}
  .menu-item{padding:8px 12px; font-size:15px}
}

/* Subtle preference: reduce motion if user requests it */
@media (prefers-reduced-motion:reduce){
  .logo, .menu{animation:none}
  .menu-item{transition:none}
}

@media (max-width: 40em){
  .menu{
    padding: 0.6em;
    gap: 0.6em;
  }
  .menu-item{
    width: 100%;                /* ocupa toda la fila para toque cómodo */
    padding: 1.05em 1em;
    font-size: 1.05em;
    border-radius: 0.9em;
  }
}

/* --- tienda.html --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    padding: 20px;
}
.product-card {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    transform: scale(1.05);
}

/* --- contacto.html --- */
.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: white;
}
.logo img {
    animation: floatLogo 2s ease-in-out infinite;
}
.menu {
    background-color: black;
    animation: floatMenu 2s ease-in-out infinite;
    text-align: center;
}
.menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu li {
    display: inline;
    margin: 0 15px;
}
.menu a {
    color: white;
    text-decoration: none;
    transition: all 0.3s;
}
.menu a:hover {
    color: black;
    background-color: white;
    transform: scale(1.1);
}

@keyframes floatMenu {
    0% { transform: translateY(0); }
    50% { transform: translateY(10px); }
    100% { transform: translateY(0); }
}