/* ─────────────────────────────────────────────── */
/*  Textura global en todo el body                */
/* ─────────────────────────────────────────────── */
body {
  /* color base vino + textura diagmonds */
  background-color: #fc342d !important;
  background-image: url("/assets/img/diagmonds.png") !important;
  background-repeat: repeat !important;
  background-size: auto !important; /* o cover si prefieres */
}

/* Aseguramos que el main sea transparente */
/* (o cualquier wrapper de contenido que uses) */
main,
.texture-bg {
  background: transparent !important;
}

/* El header y footer siguen con su fondo sólido */
header,
footer.footer-gradient {
  background-color: var(--color-vino) !important;
  /* o en el footer: background: linear-gradient(...) !important; */
  background-image: none !important;
}



/* ───────────────────────────────────────────── */
/*  Textura global aplicada al body             */
/* ───────────────────────────────────────────── */
body {
  background-color: #fc342d;                  /* tu vino base */
  background-image: url("/assets/img/diagmonds.png");
  background-repeat: repeat;
  background-size: auto;                      /* o cover si prefieres */
}

/* Asegúrate de que el footer no herede color liso */
footer.footer-gradient {
  background-color: transparent !important;
}

/* === FORZAR TEXTO AMARILLO EN TODO EL CONTENIDO TEXTURIZADO === */
.texture-bg,
.texture-bg h1,
.texture-bg h2,
.texture-bg h3,
.texture-bg p,
.texture-bg a,
.texture-bg span,
.texture-bg label {
  color: var(--color-amarillo) !important;
}

/* 1) Eliminamos cualquier textura global en body/main */

/* 2) Solo estos bloques con .texture-bg llevarán la textura */
.texture-bg {
  width: 100%;
  background-color: #fc342d; /* tu color vino base */
  background-image: url("/assets/img/diagmonds.png");
  background-repeat: repeat;
  background-size: auto;
}

/* 4) Carrusel de vídeos */
.video-carousel-container {
  overflow: hidden;
  margin: 2rem auto;
  width: 260px !important;
  position: relative;
}
.video-carousel {
  display: flex;
  gap: 1rem;
  transition: transform 0.5s ease-in-out;
}
.video-carousel video {
  flex: 0 0 260px;
  height: 146px;
  border-radius: 0.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  object-fit: cover;
}

/* === MINIATURAS DE GALERÍA AJUSTADAS === */
.gallery-section img {
  flex: 0 0 auto;
  width: 200px;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}

/* 5) Animación galería */
.animate-scrollLoop {
  will-change: transform;
  animation: scrollLoop 40s linear infinite;
}
@keyframes scrollLoop {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* 6) Scroll suave */
html {
  scroll-behavior: smooth;
}

/* 7) Botón “Participa Ahora” */
.btn-participa {
  background-color: var(--color-amarillo);
  color: #000 !important;
  font-size: 1.125rem;
  padding: 0.75rem 2rem;
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow:
    0 8px 16px rgba(0,0,0,0.8),
    0 0 8px rgba(250,204,21,0.7),
    0 0 16px rgba(250,204,21,0.5);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-participa:hover,
.btn-participa:focus {
  transform: scale(1.07);
  box-shadow:
    0 12px 24px rgba(0,0,0,0.9),
    0 0 12px rgba(250,204,21,0.9),
    0 0 24px rgba(250,204,21,0.7);
}

/* === OVERRIDE para que .btn-participa sea negro dentro de .texture-bg === */
.texture-bg .btn-participa {
  color: #000 !important;
}

/* ------------------------------------------------ */
/* FOOTER DEFINITIVO                                */
/* ------------------------------------------------ */

/* 1) Forzar texto amarillo */
.footer-gradient,
.footer-gradient * {
  color: var(--color-amarillo) !important;
}

/* 2) Fondo degradado vino a rojo */
.footer-gradient {
  background: linear-gradient(135deg, #ba2929 0%, #ba1e1e 100%);
  box-sizing: border-box;
  width: 100%;
  overflow-x: hidden;
}

/* 3) Container flex con wrap */
.footer-gradient .footer-container {
  display: flex;
  flex-wrap: wrap;      /* evita overflow */
  gap: 1rem;
  padding: 0 1rem;
  box-sizing: border-box;
}

/* 4) Columna izquierda: bloque único, pegado */
.footer-gradient .col-text {
  padding-left: 0 !important; /* pegado al borde */
  padding-right: 1rem !important;
  text-align: center !important;
  box-sizing: border-box;
}
.footer-gradient .col-text p {
  margin: 0 !important;
  line-height: 1.4 !important;
  font-size: 1rem !important;
  word-break: normal !important;
}

/* 5) Centro: copyright centrado */
.footer-gradient .col-copy {
  text-align: center !important;
  font-size: 1rem;
  font-weight: 500;
}

/* 6) Derecha: estilos de CTA y contador */
.footer-gradient .col-cta {
  padding-right: 0 !important; /* pegado al borde derecho */
  box-sizing: border-box;
}

/* 7) Botón largo completo */
.cta-btn-footer {
  background-color: var(--color-amarillo) !important;
  color: #000 !important;
  border: 3px solid var(--color-amarillo) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important; /* sin truncar */
  overflow: visible !important;
  text-overflow: unset !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s, filter 0.2s;
}
.cta-btn-footer:hover {
  filter: brightness(1.1) !important;
  transform: scale(1.03) !important;
}

/* 8) Contador justo debajo, mismo ancho aproximado */
.visits-btn-footer {
  background-color: var(--color-vino) !important;
  color: var(--color-amarillo) !important;
  border: 3px solid var(--color-amarillo) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* 9) Responsive: apilar y centrar en móvil */
@media (max-width: 767px) {
  .footer-gradient .footer-container {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: stretch !important;
  }
  .footer-gradient .col-text,
  .footer-gradient .col-copy,
  .footer-gradient .col-cta {
    flex-basis: 100% !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .cta-btn-footer,
  .visits-btn-footer {
    width: 100% !important;
    white-space: normal !important;
  }
}

/* ============================================= */
/*  Ajustes para evitar overflow en el footer    */
/* ============================================= */
.footer-gradient {
  box-sizing: border-box;      /* asegurar que padding no añada anchura */
  width: 100%;                 
  overflow-x: hidden;          /* corta cualquier sobrante horizontal */
}

/* Permitimos que las columnas bajen a la siguiente línea */
.footer-gradient .footer-container {
  display: flex;
  flex-wrap: wrap;             /* --- aquí el wrap --- */
  gap: 1rem;
  justify-content: space-between;
}

/* Columna texto: que crezca y encoja, sin anchura fija */
.footer-gradient .col-text {
  flex: 1 1 220px;             /* crece y encoge, mínimo 220px */
  max-width: 45%;              /* nunca más del 45% */
  padding-left: 0.25rem !important;
  padding-right: 1rem !important;
  text-align: left !important;
  box-sizing: border-box;
}

/* Cada <p> no rompe la pantalla */
.footer-gradient .col-text p {
  margin: 0 0 0.3rem !important;
  line-height: 1.3 !important;
  font-size: 1rem !important;
  word-break: break-word;      /* fuerza salto de palabra si hace falta */
}

/* Centro: ocupa su espacio justo */
.footer-gradient .col-copy {
  flex: 0 1 auto;              /* no crece, pero encoge si es necesario */
  width: 100%;
  max-width: 24%;
  text-align: center !important;
  box-sizing: border-box;
}

/* Derecha: igual al texto, pero alineado a la derecha */
.footer-gradient .col-cta {
  flex: 1 1 220px;             /* crece y encoge, mínimo 220px */
  max-width: 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
  padding-right: 0.5rem !important;
}

/* Botón Suscríbete: ancho automático, no fija 320px */
.cta-btn-footer {
  width: auto !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* Responsive móvil: text-center y full-width */
@media (max-width: 767px) {
  .footer-gradient .footer-container {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
  .footer-gradient .col-text,
  .footer-gradient .col-copy,
  .footer-gradient .col-cta {
    max-width: 100% !important;
    flex: 1 1 100% !important;
    text-align: center !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .cta-btn-footer,
  .visits-btn-footer {
    width: 100% !important;
    white-space: normal !important;
  }
}
/* ---------------------------------------------- */
/* FOOTER: fondo full-width y contenido centrado  */
/* ---------------------------------------------- */

/* 1) Forzar amarillo en TODO el footer */
.footer-gradient,
.footer-gradient * {
  color: var(--color-amarillo) !important;
}

/* 2) Fondo degradado vino → rojo */
.footer-gradient {
  background: linear-gradient(135deg, #7b1c1c 0%, #ba2929 100%);
  overflow-x: hidden;
}

/* 3) Contenedor interno “container” ya centra y tiene max-w-screen-xl */
/*    No necesita más reglas aquí. */

/* 4) Columnas flex */
.footer-gradient .flex {
  box-sizing: border-box;
}

/* IZQUIERDA: 4 párrafos alineados a la izquierda */
.footer-gradient .col-text {
  text-align: left !important;
}
.footer-gradient .col-text p {
  margin: 0 0 0.3rem 0 !important;
  line-height: 1.3 !important;
  font-size: 1rem !important;
}

/* CENTRO: copyright centrado */
.footer-gradient .col-copy {
  text-align: center !important;
  font-size: 1rem;
  font-weight: 500;
}

/* DERECHA: botón y contador */
.footer-gradient .col-cta {
  text-align: right; /* alineado a la derecha dentro del container */
}

/* Botón Suscríbete: ancho auto, sin truncar */
.cta-btn-footer {
  background-color: var(--color-amarillo) !important;
  color: var(--color-vino) !important;
  border: 3px solid var(--color-amarillo) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.2s ease, filter 0.2s ease;
}
.cta-btn-footer:hover {
  filter: brightness(1.1) !important;
  transform: scale(1.03) !important;
}

/* Contador justo debajo */
.visits-btn-footer {
  background-color: var(--color-vino) !important;
  color: var(--color-amarillo) !important;
  border: 3px solid var(--color-amarillo) !important;
  padding: 0.5rem 1rem !important;
  border-radius: 0.5rem !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Responsive: móvil apila y centra todo */
@media (max-width: 767px) {
  .footer-gradient .footer-container .flex {
    flex-direction: column !important;
    align-items: center !important;
  }
  .footer-gradient .col-text,
  .footer-gradient .col-copy,
  .footer-gradient .col-cta {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center !important;
  }
  .cta-btn-footer,
  .visits-btn-footer {
    width: auto !important;
  }
}

/* Centrar los párrafos dentro del bloque .col-text, 
   pero sin mover el bloque de su posición a la izquierda */
.footer-gradient .col-text {
  padding-left: 0 !important;    /* sigue pegado al borde */
  padding-right: 1rem !important;/* espacio a la derecha */
  text-align: center !important; /* ahora los <p> se centran */
}

/* Si quieres ajustar sólo los párrafos 2, 3 y 4, 
   y dejar el primero alineado a la izquierda, hazlo así: */
.footer-gradient .col-text p:not(:first-child) {
  text-align: center !important;
}

/* Wrapper que centra el botón y el contador */
.cta-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

/* Asegura que el texto de visitas sea negro */
.visits-btn-footer {
  color: #000 !important;
}

@media (max-width: 767px) {
  /* 1) Footer ultra-compacto */
  .footer-gradient {
    padding-top: 0.2rem !important;
    padding-bottom: 0.2rem !important;
  }

  /* 2) Solo dos párrafos muy pequeños */
  .footer-gradient .col-text p:nth-of-type(n+3) {
    display: none !important;
  }
  .footer-gradient .col-text p:nth-of-type(-n+2) {
    font-size: 0.85rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.1rem !important;
  }

  /* 3) Copyright compacto */
  .footer-gradient .col-copy span {
    font-size: 0.75rem !important;
    margin: 0.15rem 0 !important;
  }

  /* 4) Botón Suscríbete más pequeño */
  .cta-btn-footer {
    padding: 0.4rem 0.8rem !important;
    font-size: 0.8rem !important;
  }

  /* 5) Contador de visitas ajustado */
  .visits-btn-footer {
    padding: 0.25rem 0.6rem !important;
    font-size: 0.75rem !important;
  }

  /* 6) Menos espacio entre bloques */
  .footer-container {
    gap: 0.2rem !important;
  }
}

@media (max-width: 767px) {
  /* Oculta el bloque de texto y el contador de visitas */
  .footer-gradient .col-text,
  .footer-gradient .visits-btn-footer {
    display: none !important;
  }

  /* Asegura que copyright y CTA queden centrados */
  .footer-gradient .footer-container {
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  .footer-gradient .col-copy {
    width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  .cta-btn-footer {
    width: 100% !important;
  }
}

@media (max-width: 767px) {
  /* 1) Footer ultra compactado */
  .footer-gradient {
    padding: 0 !important;
  }

  /* 2) Contenedor en columna y centrado */
  .footer-gradient .footer-container {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    padding: 0 !important;
  }

  /* 3) Ocultar todo excepto copyright y botón */
  .footer-gradient .col-text,
  .footer-gradient .visits-btn-footer {
    display: none !important;
  }

  /* 4) Copyright compacto */
  .footer-gradient .col-copy {
    margin: 0.25rem 0 !important;
    font-size: 0.75rem !important;
    line-height: 1.2 !important;
  }

  /* 5) Botón centrado y compacto */
  .cta-btn-footer {
    display: block !important;
    width: 80% !important;             /* ocupa 80% del ancho */
    max-width: 280px !important;
    margin: 0.25rem auto !important;    /* centrado y gap arriba */
    padding: 0.4rem 0.8rem !important;  /* menos alto */
    font-size: 0.85rem !important;      /* texto más pequeño */
    white-space: nowrap !important;
  }
}

@media (max-width: 767px) {
  /* 1) Forzar que col-cta centre su contenido */
  .footer-gradient .col-cta {
    justify-content: center !important;
    align-items: center !important;
  }

  /* 2) Asegurar que el botón se centre con margin auto */
  .footer-gradient .cta-btn-footer {
    display: block !important;
    width: auto !important;
    margin: 0.3rem auto !important;
  }
}
/*--- opiniones--*/ 
@media (max-width: 767px) {
  /* 1) Ratio retrato: altura ~150% del ancho */
  .reviews-wrapper {
    padding-top: 150% !important; /* antes 56.25% o 75%, ahora más alto para portrait */
  }

  /* 2) ‘Borde’ interno más fino: inset del contenedor blanco */
  .reviews-wrapper > div {
    /* sustituye inset-4 (1rem) por inset 0.5rem */
    inset: 0.5rem !important;
  }

  /* 3) Escalar un poco el iframe */
  .reviews-wrapper iframe {
    transform: scale(0.9) !important;
    transform-origin: top center !important;
    /* para que no recorte, compensamos el scale ampliando dimensiones */
    width: 111.111% !important;  /* 1 / 0.9 */
    height: 111.111% !important;
  }
}

/* SECCION PRODUCTOS */ 

/* Ajuste: mostrar 2 columnas en móviles pequeños */
/* ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  #catalogo {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}