#disenadores .benito-logo-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.2em;
}
#disenadores .designer-logo {
  max-width: 324px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
#disenadores .benito-logo-title::after {
 content: "";
    display: block;
    width: 633px;
    height: 4px;
    margin: 0.7em auto 0 auto;
    background: var(--wine);
    border-radius: 2px;
    opacity: 0.65;
}
@media (max-width: 600px) {
  #disenadores-denisse .designer-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #disenadores-denisse .designer-card {
    display: flex;
    flex-direction: column;
    padding: 0.5em 0.2em;
    gap: 0;
    box-shadow: none;
    background: transparent;
  }
  #disenadores-denisse .designer-media-denisse {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
  }
  #disenadores-denisse .designer-image-full {
    max-width: 92vw;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.13);
    margin: 0 auto;
    display: block;
  }
  #disenadores-denisse .designer-body {
    padding: 0.2em 0.1em;
    width: 100%;
    box-sizing: border-box;
  }
  #disenadores-denisse .denisse-logo-title {
    margin-bottom: 1em;
  }
  #disenadores-denisse .designer-logo {
    max-width: 60vw;
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: block;
  }
  #disenadores-denisse .bio {
    font-size: 1.02rem;
    line-height: 1.6;
    text-align: justify;
    margin-bottom: 1em;
    padding: 0 0.2em;
  }
  #disenadores-denisse .works-denisse {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7em;
    justify-content: center;
    margin-top: 1em;
    width: 100%;
  }
  #disenadores-denisse .works-denisse .work-image {
    max-width: 44vw;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.10);
    margin: 0 auto;
    display: block;
  }
}

#disenadores .works .work-image {
  transition: transform 0.3s cubic-bezier(.4,1.4,.6,1);
  cursor: zoom-in;
  will-change: transform;
}
#disenadores .works .work-image:hover,
#disenadores .works .work-image:focus {
  transform: scale(1.18);
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

@media (pointer: coarse) {
  #disenadores .works .work-image:active {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
}
#disenadores-denisse .works-denisse .work-image {
  transition: transform 0.3s cubic-bezier(.4,1.4,.6,1);
  cursor: zoom-in;
  will-change: transform;
}
#disenadores-denisse .works-denisse .work-image:hover,
#disenadores-denisse .works-denisse .work-image:focus {
  transform: scale(1.18);
  z-index: 2;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}

@media (pointer: coarse) {
  #disenadores-denisse .works-denisse .work-image:active {
    transform: scale(1.18);
    z-index: 2;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  }
}
#disenadores-denisse .denisse-logo-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.2em;
}
#disenadores-denisse .designer-logo {
  max-width: 332px;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
}
#disenadores-denisse .denisse-logo-title::after {
 content: "";
    display: block;
    width: 633px;
    height: 4px;
    margin: 0.7em auto 0 auto;
    background: var(--wine);
    border-radius: 2px;
    opacity: 0.65;
}

.programa-list-destacada {
  color: #fff;
  font-size: 1.18rem;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.2em;
  list-style: disc inside;
}
.programa-list-destacada > li {
  margin-bottom: 0.7em;
  padding-left: 0.1em;
}

.programa-subitem {
  font-size: 1rem;
  color: #ffe066;
  background: rgba(255,255,255,0.07);
  border-radius: 8px;
  margin-left: 1.2em;
  margin-bottom: 0.5em;
  padding: 0.4em 0.8em;
  display: block;
}

@media (max-width: 600px) {
  .programa-subitem {
    font-size: 0.97rem;
    margin-left: 0.5em;
    padding: 0.35em 0.5em;
    border-radius: 6px;
    background: rgba(255,255,255,0.13);
  }
}
.programa-list-destacada ul {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  padding-left: 1.5em;
  list-style: circle inside;
}
.programa-nombre {
  font-weight: 700;
  color: #ffe066;
}
.programa-rol {
  font-style: italic;
  color: #fff;
  opacity: 0.85;
}
.info-programa .programa-texto {
  color: #fff;
  font-size: 1.13rem;
  line-height: 1.7;
  text-align: justify;
  margin: 0;
  padding: 0;
}
/* Programa del Evento - Sección Información */
.info-programa .programa-box {
  background: rgba(0,0,0,0.45);
  border: 3px solid #fff;
  border-radius: 18px;
  padding: 2.2rem 1.5rem 2rem 1.5rem;
  max-width: 673px;
  margin: 0 auto;
  color: #fff;
  box-shadow: 0 6px 32px rgba(0,0,0,0.18);
  text-align: justify;
}
@media (max-width: 600px) {
  .info-programa .programa-box {
    padding: 1.2rem 0.5rem 1.2rem 0.5rem;
    max-width: 98vw;
    border-width: 2px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.14);
    text-align: justify;
  }
}
.info-programa .info-title {
  color: #fff;
  text-align: center;
  margin-bottom: 1.2rem;
  font-size: 2rem;
  font-family: 'Montserrat', serif;
  font-weight: 700;
}
.info-programa .programa-list {
  color: #fff;
  font-size: 1.13rem;
  line-height: 1.7;
  margin: 0;
  padding-left: 1.2em;
}
.info-programa .programa-list ul {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  padding-left: 1.5em;
}
.info-programa .programa-img {
  display: block;
  margin: 0 auto 1.2rem auto;
  max-width: 450px;
  width: 100%;
}
@media (max-width: 600px) {
  .info-programa .programa-img {
    max-width: 92vw;
    margin: 0 auto 1rem auto;
    border-radius: 12px;
    padding: 0.3rem;
    display: block;
  }
}

/* Modal México Monumental estilo referencia */
.modal-content-red {
  background: transparent;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  min-height: 340px;
  max-width: 800px;
  max-height: 90vh;
  margin: auto;
  position: relative;
}
.modal-content-red .modal-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  border-radius: 12px;
  pointer-events: none;
}
.modal-content-red .modal-logo-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
  margin-bottom: 1.5rem;
}
.modal-content-red .modal-logo {
  max-width: 340px;
  width: 90vw;
  height: auto;
  display: block;
  margin: 0 auto;
}
.modal-content-red .modal-texto {
  position: relative;
  z-index: 2;
    color: #fff !important;
  font-family: 'Montserrat', sans-serif;
  text-align: justify;
  max-width: 1000px;
  overflow-y: auto;
}
.modal-content-red .modal-texto p {
  margin-bottom: 1.1rem;
  line-height: 1.6;
}
.modal-content-red .modal-close {
  position: fixed;
  top: 3vh;
  right: 6vw;
  z-index: 10001;
  background: none;
  border: none;
  font-size: 2.2rem;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  filter: drop-shadow(0 2px 8px #000a);
}
@media (max-width: 600px) {
  .modal-content-red .modal-logo { max-width: 220px; }
  .modal-content-red .modal-texto { font-size: 0.98rem; padding: 0 0.5rem; }
}
/* Modal de información adicional */
.btn-ver-mas {
  margin-top: 1.2rem;
  background: var(--wine, #6f0f1a);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 0.7rem 1.5rem;
  font-size: 1rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-ver-mas:hover {
  background: #a01d2a;
}
.modal-info {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1;
  color: #ffffff;
}
.modal-content {
  position: relative;
  z-index: 2;
  border-radius: 12px;
  max-width: 1080px;
  width: 90vw;
  padding: 2.5rem 2rem 2rem 2rem;
  font-family: 'Montserrat', sans-serif;
}
.modal-content h2 {
  margin-top: 0;
  font-family: 'Playfair Display', serif;
  color: var(--wine, #6f0f1a);
}
.modal-content ul {
  margin: 1rem 0 0 1.2rem;
  padding: 0;
}
.modal-content li {
  margin-bottom: 0.5rem;
  font-size: 1rem;
}
.modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 2rem;
  color: #a01d2a;
  cursor: pointer;
  z-index: 3;
  line-height: 1;
}
/* Patrocinadores */
.patrocinadores-section {
  position: relative;
  padding: 0;
  min-height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.patrocinadores-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.patrocinadores-fondo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.patrocinadores-content {
  position: relative;
  z-index: 2;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 3rem 1rem;
}
.patrocinadores-ref img {
  max-width: 1110px;
  width: 100%;
  height: auto;
  margin-bottom: 1.5rem;
}
.patrocinadores-logos img {
  max-width: 900px;
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 900px) {
  .patrocinadores-ref img { max-width: 90vw; }
  .patrocinadores-logos img { max-width: 98vw; }
}
/* Extraído de index.html sección Información */
.info-details {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
}

.info-block {
  /* background: rgba(0, 0, 0, 0); */
  padding: 2rem;
  border-radius: 8px;
  flex: 1;
  max-width: 500px;
}

.info-block h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: #f3e8c4;
}

.info-block p {
  text-align: justify;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.5rem;
}

.info-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-block li {
  text-align: justify;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  color: #fff;
  margin-bottom: 0.5rem;
}
:root{
  --wine:#6f0f1a; /* rojo vino */
  --gold:#c9a24a;
  --olive:#6b7a2e;
  --blue-gray:#9db0b7;
  --beige:#efe6d8;
  --header-height:72px;
}
*{box-sizing:border-box}
html{font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; font-size:16px; -webkit-font-smoothing:antialiased}
body{height:100%;margin:0;color:var(--text);background:var(--beige);font-family:inherit;line-height:1.55}

/* Justificar todo el texto por defecto */
p, li, .about-text, .modal-content, .modal-content-red .modal-texto, .info-block, .info-block p, .info-block ul, .info-block li, .sponsors-content .present-right, .sponsors-content .about-card, .designer-body, .designer-body p, .designer-body li, .section-valora .valora-text {
  text-align: justify !important;
}

/* Base typography: Montserrat for general UI, Playfair Display reserved for headings */
body, p, a, li, span, small, strong, em, button, input, textarea, select, .btn, .main-nav a {
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  font-weight: 400;
  color: var(--text);
}

/* Headings (typographic titles) use Playfair Display for a classic serif tone */
h1, h2, h3, h4, h5, h6, .section-title, .hero h1 {
  font-family: 'Playfair Display', serif;
}
.container{max-width:1140px;margin:0 auto;padding:1rem}
.containertimeline{max-width:960px;margin: auto;padding:1rem; margin-top: -40px; margin-bottom: -93px;}

/* Screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.site-header{position:fixed;top:0;left:0;right:0;z-index:100;
  /* stronger but still translucent background so ornaments remain visible */
  background: linear-gradient(180deg, rgba(10,6,6,0.72), rgba(10,6,6,0.45));
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Spacer to push content below the fixed header */
.top-spacer{width:100%;display:block}
@media (max-width:900px){
  :root{--header-height:64px}
}
@media (max-width:480px){
  :root{--header-height:56px}
}
.header-inner{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem}
.logo img{height:48px}
.main-nav{flex:1}
.main-nav ul{display:flex;justify-content:center;gap:1.25rem;list-style:none;margin:0;padding:0}
.main-nav a{color:#fff;text-decoration:none;font-weight:700;text-shadow:0 1px 0 rgba(0,0,0,0.4)}

/* Mobile nav open state */
.main-nav.open{position:fixed;top:var(--header-height);left:0;right:0;background:linear-gradient(180deg,rgba(10,6,6,0.95),rgba(10,6,6,0.92));padding:1rem 0}
.main-nav.open ul{flex-direction:column;align-items:center}
.main-nav.open a{padding:.5rem 0;display:block}
.actions{display:flex;align-items:center;gap:.75rem}
.btn{display:inline-block;padding:.6rem 1rem;border-radius:6px;text-decoration:none;font-weight:700}
.btn-primary{background:var(--wine);color:#fff;border:2px solid rgba(0,0,0,0.08)}
.btn-gold{background:linear-gradient(180deg,var(--gold),#b58f2f);color:#1b1206;border:2px solid rgba(0,0,0,0.12);}

/* Make sure ornament strip area under the fixed header is darkened for legibility */
.ornament-strip{width:100%;overflow:hidden;position:relative}
.ornament-strip::after{content:'';position:absolute;left:0;right:0;top:0;height:72px; /* approx header height */
  background:linear-gradient(180deg, rgba(10,6,6,0.75), rgba(10,6,6,0.0));pointer-events:none;z-index:5}
.ornament-strip img{width:100%;height:80px;object-fit:cover;display:block}
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .25rem;
}
.nav-toggle span{display:block;width:22px;height:2px;background:#fff;margin:4px 0}
.nav-toggle.open span{background:#f3e8c4}

/* Hero */
.hero{
  min-height:92vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  position:relative;
  padding-top:5rem;
}
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.hero-center-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}
.info-date {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.subtitle-banner {
  margin-top: 1.2rem;
  margin-bottom: 0;
  align-self: flex-start;
  position: relative;
  left: 0;
  max-width: 420px;
  background: #7b2b37;
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18);
  padding: 1.2rem 2.2rem 1.2rem 2.2rem;
  font-size: 1.15rem;
  font-family: 'Montserrat', serif;
  text-align: justify;
  line-height: 1.6;
  border-left: 0.3rem solid #c9a24a;
  border-right: 0.3rem solid #c9a24a;
}
.subtitle-banner .accent.left,
.subtitle-banner .accent.right {
  display: none;
}
.subtitle-inner p {
  margin: 0;
}
@media (max-width: 900px) {
  .hero { min-height: 70vh; }
  .subtitle-banner { max-width: 98vw; padding: 1rem 1rem; font-size: 1rem; }
}
.hero-pattern{
  position:absolute;
  inset:0;
  /* Background image: place the provided ornamental pattern in assets/hero-pattern.jpg (or .png/.webp) */
  background-image: linear-gradient(rgba(12,8,6,0.45), rgba(12,8,6,0.35)), url('../assets/img/fondorojo.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: saturate(0.95) contrast(0.95);
  opacity:1;
}
.hero-content{position:relative;padding:4rem 1rem;text-align:center}
.hero-logo-wrap{display:flex;justify-content:center;margin-bottom:1rem}
.hero-logo{width:68%;max-width:720px;height:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,0.35));}
.hero h1{font-family:'Playfair Display', serif;font-size:3.2rem;margin:.25rem 0}
.hero .lead{font-family:'Playfair Display',serif;font-size:1.25rem;letter-spacing:1px}
.hero .subtitle{max-width:720px;margin:1rem auto 1.5rem;color:rgba(255,255,255,0.9)}

/* Rectangular subtitle banner */
.subtitle-banner{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.25rem auto 1.75rem;max-width:350px;background:linear-gradient(180deg, rgba(111,15,26,0.92), rgba(111,15,26,0.85));border-radius:6px;padding:.75rem 1rem;box-shadow:0 14px 32px rgba(0,0,0,0.35);position:relative}
.subtitle-banner .subtitle-inner p{margin:0;color:#fff;font-family:'Playfair Display',serif;font-size:1.05rem;line-height:1.4;text-align:center;padding:0 0.5rem}
.subtitle-banner .accent{width:6px;height:52px;background:var(--gold);display:block;border-radius:3px}
.subtitle-banner .accent.left{margin-left:6px}
.subtitle-banner .accent.right{margin-right:6px}

@media (max-width:900px){
  .subtitle-banner{max-width:92%;padding:.6rem}
  .subtitle-banner .subtitle-inner p{font-size:.98rem}
  .subtitle-banner .accent{height:44px}
}

@media (max-width:480px){
  .subtitle-banner{flex-direction:column;gap:.6rem;padding:.6rem .8rem}
  .subtitle-banner .accent{width:36px;height:6px;border-radius:3px}
  .subtitle-banner .subtitle-inner p{font-size:.92rem}
}

/* Ornamental strip (full width) */
.ornament-strip{width:100%;overflow:hidden}
.ornament-strip img{width:100%;height:80px;object-fit:cover;display:block}


/* Sections */
.section{padding:4rem 0;min-height:80vh} /* Ensures all sections have equal height */
.section h2{font-family:'Playfair Display',serif;font-size:2rem;margin-bottom:1rem}

/* Presentation section (image left, boxed text right) */
.presentation{position:relative;overflow:hidden; /* lighter olive overlay so background image reads like hero */
  background: linear-gradient(180deg, rgba(107,122,46,0.42), rgba(107,122,46,0.34));
  color:#fff}
.presentation-pattern{position:absolute;inset:0;/* hero-like overlay + image */
  background-image: linear-gradient(rgba(12,8,6,0.38), rgba(12,8,6,0.28)), url('../assets/img/fondoverde.png');
  background-size: cover;background-position:center center;background-repeat:no-repeat;
  filter: saturate(1.06) contrast(1.06) brightness(1.02);
  opacity:1;transform:translateZ(0);
  z-index:0;pointer-events:none}
.presentation-grid{display:grid;grid-template-columns:40% 60%;gap:0;align-items:center;padding:2rem 0;position:relative;z-index:2}
.presentation-media img{width:100%;height:auto;border-radius:6px;box-shadow:0 12px 28px rgba(0,0,0,0.35);position:relative;z-index:2;display:block}
.presentation-media{margin-right:0}
.presentation-text .text-inner{border:2px solid rgba(255,255,255,0.18);padding:1.75rem;border-radius:6px;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));position:relative;z-index:3}

/* Make the image sit flush against the text box */
.presentation-media img{margin-right:-2px}
.presentation-text h3{font-family:'Playfair Display',serif;margin-top:0}
.presentation-text p{line-height:1.6}

/* Sponsors block */
/* ===== Sección presentación (Valora México) ===== */
.section.sponsors {
  background: url("../assets/img/fondoamarillo.png") repeat center center;
  background-size: cover;
  padding: 80px 0;
}

.container.sponsors-inner {
  display: flex;
  justify-content: center;
  padding: 2rem 2rem;
}

.sponsors-content {
  width: 100%;
  max-width: 1100px;
  background: #ffffff;
  border-radius: 12px;
  /* subtle top and bottom shadows + original soft surround */
  box-shadow: 0 -18px 36px rgba(0, 0, 0, 0.15),
              0 26px 48px rgba(0, 0, 0, 0.25),
              0 12px 24px rgba(0, 0, 0, 0.10);
  display: flex;
  gap: 2rem;
  align-items: center;
  padding: 2rem;
  margin: 3.25rem 1rem; /* vertical spacing so top/bottom shadows have room */
}

/* Columnas */
.sponsors-content .present-left,
.sponsors-content .present-right {
  text-align: justify;
  flex: 1;
}

/* Imagen izquierda: controlar tamaño y centrar */
.sponsors-content .present-logo img,
.sponsors-content .present-left img {
  max-width: 360px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 6px;
}

/* Texto: quitar fondo/box-shadow heredados y aplicar estilo legible */
.sponsors-content .present-right {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.sponsors-content .about-card {
  padding: 0;
  color: var(--text);
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  line-height: 1.6;
}

/* Si prefieres limitar el ancho de la tarjeta dentro del container */
.sponsors-content { margin: 0 1rem; }

/* Responsive: apilar en móviles */
@media (max-width: 900px) {
  /* Gallery: hide the big collage on mobile and show stacked images instead */
  .full-collage { display: none; }

  .gallery-mobile { display: block; }
  .gallery-mobile-item { margin: 0 0 1rem 0; }
  .gallery-mobile-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
  }
  /* On mobile we remove the desktop staggered layout for timeline items which
     uses negative top margins. That stagger breaks the horizontal slider, so
     neutralize it here. */
  .timeline-item:nth-child(odd) {
    transform: none !important;
    margin-top: 15px !important;
  }

  .timeline-wrapper {
    min-height: auto; /* allow content to define height, avoid forced clipping */
  }
  .sponsors-content {
    flex-direction: column;
    text-align: center; /* center content on mobile */
    padding: 1.25rem;
    align-items: center; /* center columns */
  }
  .sponsors-content .present-logo img {
    max-width: 260px;
  }
}

@media (max-width: 480px) {
  .sponsors-content .about-card {
    max-width: 92%;
    margin: 0 auto;
    text-align: center;
  }
  .sponsors-content .present-right {
    width: 100%;
  }
}

/* Timeline slider controls styling */
.timeline-prev, .timeline-next {
  display: none; /* shown only on small screens via media query below */
}

@media (max-width: 900px) {
  /* Hide desktop timeline and show mobile-only timeline */
  #historia { display: none; }
  #historia-mobile { display: block; }

  .timeline-prev, .timeline-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 1.4rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    z-index: 55;
  }
  .timeline-prev { left: 8px }
  .timeline-next { right: 8px }
}
.present-right {
  flex: 2;
}

/* Desktop: hide the mobile-only timeline */
@media (min-width: 901px) {
  #historia-mobile { display: none; }
}
.about-card {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text);
}
.highlight {
  color: var(--wine);
  font-weight: bold;
}

/* Fix: ensure the Valora logo doesn't overflow the white card and the card respects border-radius
   Remove any rule that forces .present-logo img to 50% width (conflicts earlier) and set a clear
   max-width with responsive behavior. Also prevent children from overflowing the rounded corners. */
.sponsors-content {
  overflow: hidden; /* keep contents within rounded corners */
}

.sponsors-content .present-logo img {
  /* prefer a fixed ideal width but allow shrink on small screens */
  max-width: 320px; /* desktop ideal */
  width: 100%;
  height: auto;
  display: block;
}

/* Optional: smoother top shadow fade using a pseudo-element when over a patterned background */
.sponsors-content::before{
  content:'';
  position:absolute;
  left:0;right:0;top:0;height:32px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.0));
  border-top-left-radius:12px;border-top-right-radius:12px;
}

/* When container narrows, let the left column take less horizontal space */
@media (min-width: 900px) {
  .sponsors-content .present-left { flex: 0 0 38%; }
  .sponsors-content .present-right { flex: 1; }
}

@media (max-width: 900px) {
  /* stack, but keep the logo contained */
  .sponsors-content { padding: 1.25rem; }
  .sponsors-content .present-logo img { max-width: 260px; margin: 0 auto; }
}

@media (max-width: 768px) {
  .sponsors {
    flex-direction: column;
    padding: 1rem;
  }

  .sponsors-inner {
    flex-direction: column;
    text-align: center;
  }

  .present-left,
  .present-right {
    flex: unset;
  }
}

/* About / institutional text styling for presentacion-2 */
.about-text{max-width:900px;margin:0 auto 1rem;color:#111;font-family:'Playfair Display',serif;font-size:1.05rem;line-height:1.6}
.about-text p{margin:0 0 1rem}

@media (max-width:900px){
  .about-text{font-size:1rem;padding:0 0.5rem}
}
@media (max-width:480px){
  .about-text{font-size:0.95rem}
}

@media (max-width:900px){
  .presentation-grid{grid-template-columns:1fr;gap:1.25rem}
  .presentation-text .text-inner{order:2}
  .presentation-media img{order:1}
  .sponsor-logos img{height:40px;margin:.5rem}
}

/* Timeline */
#historia {
  color: #fff;
  padding: 0.5rem 0; /* reduced vertical padding */
  font-family: 'Playfair Display', serif;
  position: relative;
  overflow: hidden;
  background-image: url('../assets/img/fondorojo.png');
  background-size: cover;
  background-position: center;
}

/* Mobile-only timeline background: use ornamental red pattern for mobile timeline */
#historia-mobile {
  background-image: url('../assets/img/fondorojo.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

#historia-mobile .timeline-wrapper {
  /* add a subtle dark overlay so posters/text stay readable */
  background: linear-gradient(rgba(10,6,6,0.45), rgba(10,6,6,0.35));
  padding: 1.5rem 0;
}

/* Mobile gallery background: use same ornamental red pattern and overlay */
#galeria-mobile {
  background-image: url('../assets/img/fondorojo.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  color: #fff;
  position: relative;
}

#galeria-mobile .container {
  background: linear-gradient(rgba(10,6,6,0.35), rgba(10,6,6,0.25));
  padding: 1rem 0;
}

/* === CONTENEDOR GENERAL === */
.timeline-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* allow absolutely positioned controls inside */
}

.timeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Mantiene las tarjetas en columnas ajustables */
  justify-content: start; /* Alinea las tarjetas a la izquierda */
  padding: 1rem;
  border-radius: 8px;
}

/* === CADA ITEM === */
.timeline-item {
  width: 200px;
  height: auto;
  padding: 0;
}
.timeline-item img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  /* convert timeline to a horizontal scroll-snap slider on small screens */
  .timeline {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    overflow-y: visible; /* ensure vertical overflow is visible, not clipped */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.5rem;
    width: 100%;
    margin-left: 0;
    align-items: center; /* vertically center slides */
  }
  .timeline::-webkit-scrollbar{height:8px}
  .timeline::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.15);border-radius:4px}

  /* Limit the timeline wrapper height so posters fit within the viewport (no page scroll)
     and anchor posters toward the bottom of each slide so they appear lower on screen. */
  /* Increase timeline wrapper height on mobile so posters fit without inner scroll
     and allow the page to scroll vertically when necessary. */
  .timeline-wrapper {
    min-height: calc(110vh - var(--header-height) - 80px); /* slightly taller than viewport */
    max-height: none;
    overflow: visible; /* allow page scroll instead of inner scroll */
    padding-bottom: 2rem; /* a bit of breathing room below slides */
  }

  /* Make each slide occupy full viewport width on mobile and stretch to wrapper height */
  .timeline-item {
    flex: 0 0 100%; /* each slide fills the viewport width */
    scroll-snap-align: center;
    margin: 0;
    display: flex;
    align-items: flex-end; /* anchor content to bottom */
    justify-content: center;
    background: transparent; /* let background show through */
    border-radius: 0;
    padding: 0 0 1rem 0; /* small bottom padding so image isn't flush to the edge */
    box-shadow: none;
    overflow: hidden; /* prevent inner scroll */
    width: 100%;
    height: 100%; /* match wrapper height */
  }

  /* Show the full poster without cropping and position it toward the bottom */
  .timeline-item img {
    width: auto;                     /* keep natural width but allow scaling */
    max-width: 92%;                  /* leave some horizontal gutters */
    height: auto;                    /* allow image height to determine section height */
    max-height: calc(110vh - var(--header-height) - 120px); /* slightly less than wrapper */
    object-fit: contain;             /* full poster visible */
    object-position: center bottom;  /* prefer bottom of image visible */
    display: block;
    margin: 0 auto 0.5rem auto;
  }

  .card.body {
    max-width: 100%;
  }

  /* reset desktop offsets so items don't overlap in slider mode */
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    transform: none;
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* Removed conflicting small-screen timeline grid rule so slider styles (<=900px) apply */

.timeline-item:nth-child(odd) {
  transform: none; /* Elimina cualquier desplazamiento */
  margin-top: -112px; /* Ajusta para tocar el borde superior */
}

.timeline-item:nth-child(even) {
  transform: none; /* Elimina cualquier desplazamiento */
  margin-bottom: -112px; /* Ajusta para tocar el borde inferior */
}

#historia .timeline-item .thumb img {
  width: 100%; /* Ensures the image fills the width of the container */
  height: 100%; /* Ensures the image fills the height of the container */
  object-fit: cover; /* Makes the image cover the container without distortion */
}

/* Gallery */
.gallery {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* Mobile-only gallery wrapper hidden by default (desktop) */
.gallery-mobile { display: none; }

/* Desktop: hide the mobile-only gallery */
@media (min-width: 901px) {
  #galeria-mobile { display: none; }
}

.gallery .grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 150px;
  gap: 5px; /* Reduced gap for closer arrangement */
}

.grid-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0; /* Optional for better contrast */
}

.grid-item img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Specific spans for a dynamic collage layout */
.grid-item:nth-child(1) {
  grid-column: span 1;
  grid-row: span 2;
}
.grid-item:nth-child(2) {
  grid-column: span 2;
  grid-row: span 1;
}
.grid-item:nth-child(3) {
  grid-column: span 1;
  grid-row: span 2;
}
.grid-item:nth-child(4) {
  grid-column: span 2;
  grid-row: span 1;
}
.grid-item:nth-child(5) {
  grid-column: span 1;
  grid-row: span 1;
}
.grid-item:nth-child(6) {
  grid-column: span 2;
  grid-row: span 2;
}
.grid-item:nth-child(7) {
  grid-column: span 3;
  grid-row: span 1;
}
.grid-item:nth-child(8) {
  grid-column: span 1;
  grid-row: span 1;
}
.grid-item:nth-child(9) {
  grid-column: span 2;
  grid-row: span 2;
}

/* CSS for gallery section collage image */
.gallery .full-collage {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center; /* Center the image horizontally */
  align-items: center;
}

.gallery .full-collage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Override default figure styles for gallery section */
.gallery .full-collage {
  margin: -1px; /* Remove default margins */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .gallery .grid {
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 100px;
    gap: 3px; /* Reduced gap for smaller screens */
  
  
  }

  .grid-item:nth-child(1),
  .grid-item:nth-child(6),
  .grid-item:nth-child(9) {
    grid-column: span 2;
    grid-row: span 2;
  }
}
/* Strong mobile override: hide desktop gallery and show mobile-only gallery */
  @media (max-width: 900px) {
    #galeria { display: none !important; }
    .full-collage { display: none !important; }
    #galeria-mobile { display: block !important; }
    .gallery-mobile { display: block !important; }
  }

/* CSS to adjust collage image size to fit section */
.gallery .full-collage img {
  width: 100%;
  height: auto;
  display: block;
}

/* Designers */
.designer-grid{display:grid;gap:1rem}
.designer-card{display:flex;gap:1rem;padding:1rem;border-radius:8px}
.designer-media img{margin-top: 25px; width: 394px;height:auto;object-fit:contain;border-radius:6px}
.designer-body {
  padding: 1rem;
  border-radius: 8px;
}
.designer-media-denisse img{margin-top: 45px; width: 394px;height:auto;object-fit:contain;border-radius:6px}
.designer-body h3{margin:.25rem 0;font-family:'Playfair Display',serif}
.designer-body .section-title,
#disenadores .section-title {
  color: var(--wine);
  font-family: 'Playfair Display', serif;
  /* Increased size for stronger visual hierarchy */
  font-size: 3.4rem;
  line-height: 1.02;
  letter-spacing: 0.5px;
  margin: 0 0 0.6rem 0;
  position: relative;
}

/* Decorative thin underline using pseudo-element */
#disenadores .section-title::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  /* thinner but wider decorative bar to match the larger title */
  height: 6px;
  background: var(--wine);
  opacity: 0.65;
  transform: translateY(14px);
  margin-top: 24px;
}

#disenadores p{margin-top: 30px;line-height:1.6; text-align:justify}

/* On narrower screens scale the title down and center it */
@media (max-width: 900px) {
  /* Scale down on narrower screens but keep prominence */
  #disenadores .section-title { font-size: 2.2rem; text-align: center; }
  #disenadores .section-title::after { transform: translateY(10px); height:4px; }
}
.designer-body .works img{width:200px;height: 192px;object-fit:cover;margin-right:.5rem;border-radius:4px}
.designer-body .works-denisse img{width: 173px;height: 220px;object-fit:fill;margin-right:.5rem;border-radius:4px}
.designer-card.muted{opacity:.85}

@media (max-width: 768px) {
  .designer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .designer-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .designer-media img {
    width: 100%;
    max-width: 300px;
    height: auto;
  }

  .designer-body {
    padding: 1rem;
  }

  .designer-body .works img {
    width: 128px;
    height: 132px;
    margin: 0.5rem;
  }
}

/* Final override: ensure mobile gallery section is the only visible gallery on narrow screens */
@media (max-width: 900px) {
  /* hide desktop gallery and collage */
  section#galeria { display: none !important; visibility: hidden !important; height: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; }

  /* show mobile gallery section */
  section#galeria-mobile { display: block !important; visibility: visible !important; height: auto !important; }

  /* make sure the inner mobile wrapper is visible */
  .gallery-mobile { display: block !important; }
}

/* Info */
.info-grid{display:flex;gap:1rem}
.info-block{flex:1;padding:1rem;border-radius:8px}
.info-block .big{font-weight:800;color:var(--wine);font-family:'Playfair Display',serif}

/* Separator line above info details */
.info-details{position:relative;padding-top:1.5rem}
.info-details::before{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,0.15)}

/* Style the small section headings inside info-blocks to match reference */
.info-block h4{font-family:'Montserrat',sans-serif;font-weight:700;color:var(--wine);margin:0 0 .75rem 0}
.info-block p{color:#fff}

/* Vertical divider between two info-blocks on wide screens */
.info-details::after{content:'';position:absolute;left:50%;top:14%;bottom:14%;width:2px;background:rgba(255,255,255,0.12);transform:translateX(-50%);box-shadow:0 0 8px rgba(133,42,53,0.12)}

@media (max-width:900px){
  .info-details{padding-top:0}
  .info-details::before{display:none}
  .info-details::after{display:none}
}

/* Fecha header image in informacion section */
.info-date{display:flex;flex-direction:column;align-items:center;gap:0.6rem}
.info-date .fecha-header{display:flex;justify-content:center;margin-bottom:0}
.info-date .fecha-header img{margin-left: 80px; max-width:1020px;width:90%;height:auto;display:block}

.info-date .date-big{font-family:'Playfair Display', serif; font-size:3.6rem; letter-spacing:0.14em; margin:0 0 .5rem 0}
.info-date .date-time{font-family:'Playfair Display', serif; font-size:1.6rem; margin:0 0 1rem 0}

/* Styled visual countdown box */
.countdown { display:flex;justify-content:center;align-items:center }
.countdown-visual { display:flex;align-items:center;gap:2rem;max-width:820px; border:2px solid rgba(201,162,74,0.18); box-shadow: 0 8px 20px rgba(0,0,0,0.18); }
.countdown-days {display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:80px}
.countdown-days #cd-days{display:block;font-family:'Playfair Display',serif;font-size:2.6rem}
.countdown-days small{font-size:0.75rem;letter-spacing:0.12em}
.countdown-time {display:inline-block; font-family: 'Playfair Display', serif; font-size: 2.2rem; letter-spacing: 0.18em; vertical-align:middle; padding: .35rem 1.25rem; margin:0 }
.countdown-time .cd-suffix{font-size:1.2rem; margin-left:0.5rem; letter-spacing:0.12em; display:inline-block; vertical-align:middle}

@media (max-width:900px){
  .countdown-time { font-size:2.2rem }
  .countdown-visual { padding: .5rem .8rem; box-shadow:none; border-width:1px }
}

/* Contact */
.form-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:end}
.form-grid input{padding:.6rem;border-radius:6px;border:1px solid #ccc}

/* Focus states for accessibility */
a:focus, button:focus, input:focus{outline:3px solid rgba(201,162,74,0.25);outline-offset:2px}

/* Ensure anchor targets are visible below fixed header */
section[id]{scroll-margin-top:calc(var(--header-height) + 12px)}

/* Footer */
.site-footer{background:var(--olive);color:#fff;padding:2rem 0}
.footer-inner{display:flex;flex-direction:column;gap:1rem;align-items:center}
.logos img{height:40px;margin:0 .5rem;opacity:.95}
.footer-links a{color:rgba(255,255,255,0.9);margin:0 .5rem;text-decoration:none}

/* Valora Section */
.section-valora {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 2rem;
  margin: 2rem 0;
}

.section-valora .valora-container {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.section-valora .valora-logo {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-valora .valora-text {
  flex: 2;
  font-size: 1rem;
  line-height: 1.5;
}

/* Ornamental background for sections */
.bg-ornamental {
  background-image: url('../assets/img/fondoblanco.png');
  background-size: cover;
  background-position: center;
  opacity: 0.9999;
}

/* Ornamental background for sections */
.bg-ornamentalinfo {
  background-image: url('../assets/img/fondoAzul.png');
  background-size: cover;
  background-position: center;
  opacity: 1;
}

/* Highlighted text */
.resaltado {
  color: #7b2b37;
  font-weight: bold;
}

@media (max-width:768px) {
  .section-valora .valora-container {
    flex-direction: column;
  }
}

/* Responsive */
@media (max-width:900px){
  .container{padding:0 1rem}
  .ornament-strip img{height:64px}
  .ornament-strip::after{height:64px}
  .hero h1{font-size:2.2rem}
  .main-nav ul{display:none}
  .main-nav.open ul{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1.25rem;
    position:relative;
    z-index:1000;
    background:linear-gradient(180deg,rgba(10,6,6,0.95),rgba(10,6,6,0.92));
    width:100vw;
    left:-1rem;
    top:0;
    padding:2rem 0 1.5rem 0;
    box-shadow:0 8px 32px rgba(0,0,0,0.18);
  }
  .main-nav.open a{
    padding:.7rem 0;
    display:block;
    font-size:1.2rem;
  }
  .main-nav.open{background:transparent;}
  .nav-toggle{display:block}
  .gallery .grid{grid-template-columns:repeat(2,1fr)}
  .designer-grid{grid-template-columns:1fr}
  .info-grid{flex-direction:column}
  .form-grid{grid-template-columns:1fr;}
}

/* Estilos responsivos para móviles */
@media (max-width: 768px) {
  #informacion {
    padding: 2rem 1rem;
  }

  .info-content {
    flex-direction: column;
    gap: 1.5rem;
  }

  .info-date {
    text-align: center;
  }

  .date-big {
    font-size: 3rem;
  }

  .date-time {
    font-size: 1.5rem;
  }

  .countdown {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: #f3e8c4;
    margin-top: 1rem;
  }

  .info-details {
    flex-direction: column;
    gap: 1rem;
  }

  .info-block {
    max-width: 100%;
    padding: 1.5rem;
  }

  .info-block h4 {
    font-size: 1.2rem;
  }

  .info-block p,
  .info-block ul li {
    font-size: 0.9rem;
  }

  /* Otros ajustes para móviles */
  .main-nav ul {
    flex-direction: column;
    gap: 0.5rem;
  }

  .hero h1 {
    font-size: 2rem;
  }

  .gallery .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
  }

  .designer-grid {
    grid-template-columns: 1fr;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }
}