:root {
   --gold: #C9922A;
   --gold-light: #E8B84B;
   --cream: #F5F0E8;
   --dark: #1A1208;
   --text: #3D2B0A;
   --white: #FDFAF4;
   --gray: #7A6A52;
 }

 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }

 html {
   scroll-behavior: smooth;
 }

 body {
   background: var(--cream);
   color: var(--text);
   font-family: 'DM Sans', sans-serif;
   overflow-x: hidden;
 }

/*----------------- cabezera de la pagina -----------------------*/
 header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 100;
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 18px 60px;
   background: rgba(26, 18, 8, 0.92);
   backdrop-filter: blur(10px);
   border-bottom: 1px solid rgba(201, 146, 42, 0.3);
 }

 .logo {
   font-family: 'Playfair Display', serif;
   font-style: italic;
   font-size: 1.5rem;
   color: var(--gold-light);
   letter-spacing: 0.02em;
 }

 nav {
   display: flex;
   gap: 32px;
   list-style: none;
 }

 nav a {
   text-decoration: none;
   color: rgba(245, 240, 232, 0.75);
   font-size: 0.78rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   font-weight: 500;
   transition: color 0.25s;
 }

 nav a:hover {
   color: var(--gold-light);
 }

 /* ── ------------------cuerpo de la pagina ── */
 .hero {
   height: 100vh;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
   background-image: url("imagenes/fondo_Romanita.png");
   background-size: cover;
   background-position: center;
 }

 @keyframes heroScale {
   to {
     transform: scale(1);
     opacity: 0.5;
   }
 }

 .hero-content {
   margin-top: -60px;
   position: relative;
   text-align: center;
   animation: heroFadeIn 1.4s ease 0.3s both;
 }

 @keyframes heroFadeIn {
   from {
     opacity: 0;
     transform: translateY(30px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .hero-content h1 {
   font-family: 'Playfair Display', serif;
   font-style: italic;
   font-size: clamp(3.5rem, 9vw, 7rem);
   color: var(--gold-light);
   line-height: 0.95;
   text-shadow: 0 4px 30px rgba(0, 0, 0, 0.7);
   -webkit-text-stroke: 1px rgba(201, 146, 42, 0.4);
 }

 .hero-sub {
   margin-top: 18px;
   font-size: 0.90rem;
   /*poniendo negrita*/
   font-weight: bold;
   letter-spacing: 0.35em;
   text-transform: uppercase;
   color: rgba(0, 0, 0, 0.7);
 }

 .scroll-hint {
   position: absolute;
   bottom: 36px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
   color: rgba(0, 0, 0, 0.5);
   font-size: 0.7rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   animation: bounce 2s ease infinite;
   font-weight: bold;
 }

 .scroll-hint::after {
   content: '';
   width: 1px;
   height: 40px;
   background: linear-gradient(to bottom, var(--dark), transparent);
 }

 @keyframes bounce {

   0%,
   100% {
     transform: translateX(-50%) translateY(0);
   }

   50% {
     transform: translateX(-50%) translateY(6px);
   }
 }

 /* ── SECTION COMMONS ── */
 section {
   padding: 100px 60px;
   scroll-margin-top: 20em;
 }

 .section-label {
   font-size: 0.72rem;
   letter-spacing: 0.3em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 8px;
 }

 .section-title {
   font-family: 'Playfair Display', serif;
   font-size: clamp(2rem, 4vw, 3.2rem);
   color: var(--dark);
   margin-bottom: 60px;
   position: relative;
 }

 .section-title::after {
   content: '';
   display: block;
   width: 60px;
   height: 2px;
   background: var(--gold);
   margin-top: 16px;
 }

 /* ── CARTA SECTION ── */
 #carta {
   background: var(--white);
 }

 .carta-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 16px;
 }

 /* Entrance animation */
 .carta-item {

   background: var(--cream);
   border: 1px solid rgba(201, 146, 42, 0.2);
   border-radius: 2px;
   padding: 28px 20px;

   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 80%; 
   box-sizing: border-box;

   cursor: pointer;
   font-size: 0.75rem;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--text);
   font-weight: 500;
   transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
   opacity: 0;
   transform: translateY(40px);
  

 }
 .carta-grid a{
  text-decoration: none;
  display: inline-block;
 }

 .carta-item.visible {
   animation: slideUp 0.55s ease forwards;
 }

 /* creamos una animación para poder hacer un efecto de deslizamiento */
 @keyframes slideUp {
   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .carta-item:hover {
   transform: scale(1.06) translateY(-3px);
   box-shadow: 0 12px 40px rgba(201, 146, 42, 0.18);
   background: var(--gold);
   color: var(--white);
 }
/*quitando todo lo que pueda afectar a los div que estan dentro de la eticketa a*/
a{
  text-decoration: none;
  color: inherit;
  margin: 0;
  padding: 0;
  width: auto;
  height: auto;

}
 /* ── MENU SECTIONS ── */
 #menu {
   background: var(--cream);
 }

 .category-block {
   margin-bottom: 80px;
   scroll-margin-top: 120px;

 }

 .category-title {
   font-family: 'Playfair Display', serif;
   font-size: 1.6rem;
   color: var(--dark);
   margin-bottom: 32px;
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(201, 146, 42, 0.3);
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .category-title span {
   font-size: 0.7rem;
   letter-spacing: 0.2em;
   text-transform: uppercase;
   color: var(--gold);
   font-family: 'DM Sans', sans-serif;
   font-weight: 400;
 }

 /* ── CAROUSEL ── */
 .carousel-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   gap: 0;
 }

 .carousel-btn {
   flex-shrink: 0;
   width: 46px;
   height: 46px;
   border-radius: 50%;
   border: 1.5px solid rgba(201, 146, 42, 0.5);
   background: var(--white);
   color: var(--gold);
   font-size: 1.1rem;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.2s;
   z-index: 2;
   box-shadow: 0 2px 12px rgba(26, 18, 8, 0.08);
 }

 .carousel-btn:hover {
   background: var(--gold);
   color: var(--white);
   border-color: var(--gold);
   transform: scale(1.08);
 }

 .carousel-btn:disabled {
   opacity: 0.3;
   cursor: default;
   transform: none;
 }

 .carousel-track-outer {
   overflow: hidden;
   flex: 1;
   margin: 0 16px;
   position: relative;
 }

 .products-grid {
   display: flex;
   gap: 24px;
   transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   will-change: transform;
 }

 .product-card {
   background: var(--white);
   border-radius: 3px;
   overflow: visible;
   border: 1px solid rgba(201, 146, 42, 0.15);
   transition: transform 0.35s ease, box-shadow 0.35s ease;
   cursor: pointer;
   flex: 0 0 calc(25% - 18px);
   min-width: 200px;


 }

 .product-card:hover {
   transform: scale(1.1);
   box-shadow: 0 16px 48px rgba(26, 18, 8, 0.14);
 }

 .product-img {
   width: 100%;
   height: 180px;
   object-fit: cover;
   background: #D9CFC0;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gray);
   font-size: 0.72rem;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   position: relative;
   overflow: visible;
 }

 .product-img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.4s ease;
 }

 .product-card:hover .product-img img {
   transform: scale(1.08);
 }

 .img-placeholder {
   width: 100%;
   height: 180px;
   background: linear-gradient(135deg, #D9CFC0 0%, #C4B89A 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   color: rgba(122, 106, 82, 0.6);
   font-size: 0.68rem;
   letter-spacing: 0.15em;
   text-transform: uppercase;
 }

 /*-------media queries para las imagenes de los carruceles----------------*/
 @media (max-width: 1200px) {
   .img-placeholder {
     height: 140px;
   }
 }

 @media (max-width: 900px) {
   .product-card { /* ajustamos el tamaño de las tarjetas para que se vean bien en pantallas más pequeñas */
     flex: 0 0 calc(50% - 12px);
   }
 }

 @media (max-width: 560px) {
   .product-card {
     flex: 0 0 calc(100% - 0px);
   }
 }

 .product-info {
   padding: 18px 20px 20px;
 }

 .product-name {
   font-family: 'Playfair Display', serif;
   font-size: 1rem;
   color: var(--dark);
   margin-bottom: 6px;
 }

 .product-desc {
   font-size: 0.78rem;
   color: var(--gray);
   line-height: 1.5;
   margin-bottom: 14px;
   font-family: 'Cormorant Garamond', serif;
   font-size: 0.9rem;
 }

 .product-price {
   font-size: 0.8rem;
   font-weight: 500;
   color: var(--gold);
   letter-spacing: 0.05em;
 }
 /*-------------------efecto de zoom cuando se seleccione un producto-------------*/

 #overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

#overlay .product-card {
  transform: scale(1.50); /* agranda un 15% */
  transition: transform 0.5s ease;
}
#overlay .img-placeholder {
    height: 260px; /* alarga la imagen */
}


/*-------------------media queries de zoom cuando se seleccione un producto-------------*/

@media (max-width: 1280px) {
   #overlay .product-card {
     width: 40%;
     height: auto;
     position: fixed;

     transform: scale(1.60); /* agranda un 15% */
     transition: transform 0.5s ease;
   }
   #overlay .img-placeholder {
    height: 200px; /* alarga la imagen */
  }
 }


@media (max-width: 900px) {
   #overlay .product-card {
     width: 50%;
     height: auto;
     position: fixed;

     transform: scale(1.50); /* agranda un 15% */
     transition: transform 0.5s ease;
   }
   #overlay .img-placeholder {
    height: 200px; /* alarga la imagen */
  }
 }

@media (max-width: 600px) {
  #overlay .product-card {
    width: 80%;
    height: auto;
    position: fixed;

    transform: scale(1.0); /* agranda un 15% */
  transition: transform 0.5s ease;
  #overlay .img-placeholder {
    height: 200px; /* alarga la imagen */
  }

  }
}
 /* ── FOOTER ── */
 footer {
   background: var(--dark);
   color: var(--white);
   padding: 48px 60px;
   display: grid;
   grid-template-columns: auto 1px 1fr 1fr 1fr;
   gap: 0 48px;
   align-items: center;
 }

 .footer-logo {
   font-family: 'Playfair Display', serif;
   font-weight: 700;
   font-size: 1rem;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   line-height: 1.3;
   color: var(--white);
 }

 .footer-divider {
   background: rgba(201, 146, 42, 0.4);
   height: 80px;
   width: 1px;
 }

 .footer-col h4 {
   font-size: 0.65rem;
   letter-spacing: 0.25em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 10px;
 }

 .footer-col p {
   font-size: 0.82rem;
   color: rgba(245, 240, 232, 0.65);
   line-height: 1.6;
 }

 .footer-social {
   display: flex;
   gap: 16px;
   margin-top: 14px;
 }

 .footer-social a {
   color: rgba(245, 240, 232, 0.5);
   text-decoration: none;
   font-size: 1.1rem;
   transition: color 0.2s;
 }

 .footer-social a:hover {
   color: var(--gold-light);
 }

 /* ── RESPONSIVE ── */
 @media (max-width: 768px) {
   header {
     padding: 14px 24px;
   }

   nav {
     gap: 16px;
   }

   section {
     padding: 70px 24px;
   }

   footer {
     grid-template-columns: 1fr;
     gap: 32px;
     padding: 48px 24px;
   }

   .footer-divider {
     display: none;
   }
 }