/*
 * Hoja de estilos principal para la réplica de la página "Arte de la Rosa".
 * Definimos una paleta de colores, tipografías y componentes reutilizables
 * para aproximarnos al estilo original sin utilizar imágenes propietarias.
 */

/* Variables CSS para mantener coherencia en colores y tamaños */
:root {
  --font-primary: 'Roboto', sans-serif;
  --font-decorative: 'Cinzel', serif;
  --title-color-start: #8e0e00; /* rojo oscuro del degradado */
  --title-color-end: #d43020;   /* rojo claro del degradado */
  --accent-color: #004b3e;      /* verde profundo para barras y botones */
  --accent-color-light: #006c55;/* tono más claro para hovers */
  --text-color: #2c2c2c;
  --border-color: #e0e0e0;
  --card-bg: #ffffff;
  --contact-gradient-start: #4a1f16;
  --contact-gradient-end: #8b2d20;
}

/* Reset básico y tipografía global */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  font-family: var(--font-primary);
  color: var(--text-color);
  background-color: #fafafa;
  scroll-behavior: smooth;
}

/* Contenedor genérico para limitar el ancho de las secciones */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Encabezado fijo */
#header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #ffffff;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 0;
}

/* Logotipo con degradado de texto */
.logo {
  font-family: var(--font-decorative);
  font-size: 2rem;
  font-weight: 700;
  margin-left: 20px;
  background: linear-gradient(to right, var(--title-color-start), var(--title-color-end));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Navegación */
.nav {
  display: flex;
  gap: 1.5rem;
  margin-right: 20px;
  font-family: var(--font-decorative);
  font-size: 1.1rem;
  flex-wrap: wrap;
}

.nav a {
  text-decoration: none;
  color: #917c51;
  transition: color 0.2s ease;
}

.nav a:hover {
  color: var(--accent-color);
}

/* Ícono de carrito con contador */
.cart-icon {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 1.3rem;
  color: var(--accent-color);
  cursor: pointer;
}

/* Ajustes responsivos para la cabecera */
@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
  }
  .nav {
    width: 100%;
    justify-content: center;
    margin-top: 0.5rem;
    gap: 1rem;
  }
  .cart-icon {
    margin-left: auto;
    margin-top: 0.5rem;
  }
}

.cart-count {
  position: absolute;
  top: -0.4rem;
  right: -0.6rem;
  background-color: var(--accent-color);
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.65rem;
  width: 1.2rem;
  height: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sección de historia */
.story-section {
  width: 100%;
  padding: 3rem 1rem;
  text-align: center;
}
/* Estilo para la franja que acompaña el título de "Nuestra historia".
   Se ajusta a la anchura del contenedor en lugar de utilizar la altura
   de la ventana (vh), que provoca desplazamiento horizontal en móviles. */
#cenefa {
  width: 100%;
  background-color: #075555;
  color: #bea773;
  padding: 0.5rem;
  margin: 0 auto 1.5rem auto;
  border-radius: 8px;
  text-align: center;
  font-size: 1.5rem;
}
.story-section h2 {
  font-family: var(--font-decorative);
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--accent-color);
  border-bottom: px solid var(--accent-color);
  display: inline-block;
  padding-bottom: 0.3rem;
}

.story-section p {
  max-width: 800px;
  margin: 0 auto 2rem auto;
  line-height: 1.6;
  font-size: 1rem;
}

.story-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.story-images .placeholder {
  /* Elimina el alto fijo y permite que el contenedor se estire
     horizontalmente para aprovechar todo el ancho disponible. El
     aspecto visual se mantiene con un borde decorativo. */
  width: 100%;
  background-color: #070808;
  border: 2px dashed #060606;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 0.9rem;
  aspect-ratio: 4 / 3;
}

/* Las imágenes dentro de los contenedores de la historia ocupan todo
   el espacio disponible y conservan su proporción mediante object-fit. */
.story-images .placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Sección de productos */
.products-section {
  padding: 3rem 1rem;
}

.products-section h2 {
  font-family: var(--font-decorative);
  font-size: 2rem;
  text-align: center;
  margin-bottom: 2rem;
  color: var(--accent-color);
  border-bottom: 4px solid var(--accent-color);
  display: inline-block;
  padding-bottom: 0.3rem;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* En pantallas angostas, los productos se apilan uno debajo de otro
   para evitar el desplazamiento horizontal y garantizar legibilidad. */
@media (max-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.product-card {
  background-color: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-card h3 {
  font-family: var(--font-decorative);
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  color: var(--accent-color);
  text-align: center;
}

/* Ajuste del contenedor de imagen de los productos. Se usa un ancho
   flexible con un máximo fijo para permitir que la tarjeta ocupe
   todo el ancho disponible en móviles. La altura se calcula con
   aspect-ratio para conservar la forma cuadrada. */
.product-image.placeholder {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 10%;
  background-color: #e6e6e6;
  border: 2px dashed #cccccc;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-size: 0.8rem;
}

/* Ajustamos la imagen interna para ocupar todo el espacio del
   contenedor sin deformarse. */
.product-image.placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.price {
  font-weight: 700;
  margin: 0.5rem 0;
}

.details {
  list-style: disc inside;
  margin: 0.5rem 0 1rem 0;
  padding-left: 0;
  font-size: 0.95rem;
  text-align: left;
}

.quantity-control {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.quantity-control button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  background-color: var(--accent-color);
  color: #ffffff;
  font-size: 1.2rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.quantity-control button:hover {
  background-color: var(--accent-color-light);
}

.quantity-control .quantity {
  min-width: 24px;
  text-align: center;
  font-size: 1.1rem;
  font-weight: 600;
}

.add-to-cart {
  margin-top: auto;
  width: 100%;
  padding: 0.6rem 0;
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.add-to-cart:hover {
  background-color: var(--accent-color-light);
}

/* Sección de contacto */
.contact-section {
  background: linear-gradient(45deg, #bea773, #004b3e);
  color: #ffffff;
  padding: 3rem 1rem 4rem;
  text-align: center;
  /* Aseguramos una altura mínima para que los íconos sean visibles */
  min-height: 260px;
}

.contact-content h2 {
  font-family: var(--font-decorative);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.contact-content p {
  margin: 0.3rem 0;
  font-size: 1rem;
}

.contact-content a {
  color: #ffffff;
  text-decoration: underline;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

.social-icons a {
  color: #ffffff;
  font-size: 1.5rem;
  transition: color 0.2s ease;
}

.social-icons a:hover {
  color: #ffe3d0;
}

/* Sección de suscripción */
.subscription-section {
  background-color: #f7f7f7;
  text-align: center;
  padding: 3rem 1rem;
}

.subscription-section h2 {
  font-family: var(--font-decorative);
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.subscription-section p {
  max-width: 600px;
  margin: 0 auto 1.5rem auto;
  font-size: 1rem;
  line-height: 1.5;
}

.braille-section {
  background: linear-gradient(135deg, rgba(190, 167, 115, 0.12), rgba(250, 250, 250, 0.96));
  padding: 4rem 1rem 3rem;
}

.braille-hero {
  background: linear-gradient(120deg, rgba(190, 167, 115, 0.2), rgba(0, 75, 62, 0.25));
  padding: 5rem 1rem 4rem;
  color: var(--text-color);
}

.braille-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  align-items: flex-start;
}

.braille-content {
  display: grid;
  gap: 2rem 3rem;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.braille-text {
  max-width: 520px;
}

.braille-tagline {
  font-family: var(--font-decorative);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-color);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

.braille-title {
  font-family: var(--font-decorative);
  font-size: 2.3rem;
  color: var(--title-color-start);
  margin-bottom: 1rem;
}

.braille-description {
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.braille-highlights {
  list-style: none;
  display: grid;
  gap: 0.8rem;
}

.braille-highlights li::before {
  content: "✶";
  color: var(--accent-color);
  margin-right: 0.6rem;
  font-size: 0.9rem;
}

.braille-gallery {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.braille-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  text-align: left;
}

.braille-photo {
  background-color: #f1ece4;
  border: 2px dashed rgba(145, 124, 81, 0.4);
  border-radius: 16px;
  padding: 0.5rem;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.braille-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.braille-item figcaption {
  font-size: 0.95rem;
  line-height: 1.5;
  color: #5b4a2f;
}

@media (max-width: 600px) {
  .braille-section {
    padding: 3rem 1rem 2.5rem;
  }

  .braille-title {
    font-size: 2rem;
  }
}

@media (max-width: 768px) {
  .braille-hero-content {
    align-items: center;
    text-align: center;
  }

  .braille-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .braille-gallery {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin: 0 auto;
  }
}

.upcoming-hero {
  background: linear-gradient(135deg, rgba(190, 167, 115, 0.22), rgba(0, 75, 62, 0.2));
  padding: 5rem 1rem 4rem;
  text-align: center;
  color: var(--text-color);
}

.upcoming-hero-content {
  display: grid;
  gap: 1rem;
  max-width: 720px;
}

.upcoming-section {
  background-color: #f7f4ee;
  padding: 4rem 1rem;
}

.upcoming-content {
  display: grid;
  gap: 2rem;
}

.upcoming-header h2 {
  font-family: var(--font-decorative);
  font-size: 2.2rem;
  color: var(--accent-color);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.upcoming-header p {
  max-width: 560px;
  line-height: 1.6;
}

.upcoming-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 2.5rem;
  box-shadow: 0 14px 36px rgba(0, 75, 62, 0.1);
  border: 1px solid rgba(145, 124, 81, 0.25);
  display: grid;
  gap: 1.5rem;
}

.upcoming-tagline {
  font-family: var(--font-decorative);
  font-size: 1.4rem;
  text-align: center;
  color: var(--title-color-start);
}

.upcoming-intro {
  text-align: center;
  font-size: 1.05rem;
  color: #5b4a2f;
}

.upcoming-details {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  padding: 1.25rem;
  background: rgba(190, 167, 115, 0.16);
  border-radius: 12px;
}

.upcoming-details div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  text-align: center;
}

.detail-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--accent-color);
}

.detail-value {
  font-size: 1rem;
  font-weight: 600;
  color: #3d2d1c;
}

.upcoming-card p:last-of-type {
  line-height: 1.7;
  text-align: center;
}

.past-event {
  opacity: 0.75;
  border-style: dashed;
  position: relative;
}

.past-event::after {
  content: "Evento realizado";
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  background: rgba(0, 75, 62, 0.85);
  color: #ffffff;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (max-width: 600px) {
  .upcoming-section {
    padding: 3rem 1rem;
  }

  .braille-hero {
    padding: 4rem 1.2rem 3rem;
  }

  .upcoming-hero {
    padding: 4rem 1.2rem 3rem;
  }

  .upcoming-card {
    padding: 2rem 1.5rem;
  }

  .upcoming-details {
    grid-template-columns: 1fr;
  }
}

.subscription-form {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.subscription-form input[type="email"] {
  padding: 0.6rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  width: 300px;
  max-width: 80%;
}

.subscription-form button {
  padding: 0.6rem 1.2rem;
  font-size: 1rem;
  background-color: var(--accent-color);
  color: #ffffff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.subscription-form button:hover {
  background-color: var(--accent-color-light);
}

@media (max-width: 600px) {
  .subscription-form {
    flex-direction: column;
  }
  .subscription-form input[type="email"] {
    width: 100%;
    max-width: none;
  }
  .subscription-form button {
    width: 100%;
    margin-top: 0.5rem;
  }
  .story-section {
    padding: 1.2rem 0.2rem;
    text-align: center;
  }
  /* Ajustes para la franja en pantallas pequeñas */
  #cenefa {
    font-size: 1.2rem;
    padding: 0.4rem 0.3rem;
    margin: 0 auto 1rem auto;
  }
  .story-section h2 {
    font-size: 1.1rem;
    padding-bottom: 0.15rem;
    margin-bottom: 0.7rem;
  }
  .story-section p {
    font-size: 0.92rem;
    margin-bottom: 0.7rem;
    padding: 0 0.2rem;
  }
  .story-images {
    grid-template-columns: 1fr;
    gap: 0.7rem;
    justify-items: center;
  }
  .story-images .placeholder {
    width: 90vw;
    max-width: 340px;
    height: 140px;
    margin: 0 auto 0.7rem auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story-images .placeholder img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px;
  }
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 600px) {
  .logo {
    font-size: 1.5rem;
  }
  .nav {
    gap: 1rem;
    font-size: 1rem;
  }
  .contact-content h2 {
    font-size: 1.6rem;
  }
}