/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — Home v2: arquitectura modular estilo Hendricks Karavaan
   - Sistema de secciones repetible con generosidad editorial
   - Mantiene paleta dark + gold + Bodoni italic (brand OperaMorelia)
   - Replica disciplina y espacios de hendrickskaravaan.nl (no la paleta clara)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── ESCALA DE SECCIONES MODULARES ──────────── */

/* Sección base — padding generoso, ancho contenedor */
.mod-section{
  position: relative;
  padding: 96px 0;                /* generoso vertical (Hendricks usa 80-120) */
  width: 100%;
}
@media (max-width: 833px){
  .mod-section{ padding: 64px 0; }
}

.mod-section--bone{
  /* Fondo bone sutil para alternar visualmente como Hendricks alterna white/light */
  background: rgba(245, 245, 247, 0.025);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mod-section--ink{
  background: #0a0a0a;
}

.mod-section--gold-accent{
  background: linear-gradient(135deg, #1a1814 0%, #15130f 100%);
  border-top: 1px solid rgba(189,176,157,0.15);
  border-bottom: 1px solid rgba(189,176,157,0.15);
}

.mod-section .mod-inner{
  max-width: var(--max, 1320px);
  margin: 0 auto;
  padding: 0 28px;
}
@media (max-width: 833px){
  .mod-section .mod-inner{ padding: 0 22px; }
}

/* ──────────── TIPOGRAFÍA EDITORIAL (escala Hendricks-adaptada) ──────────── */

.mod-eyebrow{
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold, #BDB09D);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mod-eyebrow::before{
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold, #BDB09D);
}

.mod-h2{
  font-family: 'Bodoni Moda', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  font-size: clamp(2.4rem, 5.2vw, 4.6rem);   /* Hendricks H2: 56-80px */
  line-height: 1.08;
  letter-spacing: -0.01em;
  color: var(--bone, #F2EDE2);
  margin: 0 0 28px;
  max-width: 920px;
}
.mod-h2 em{
  font-style: italic;
  color: var(--gold, #BDB09D);
}

.mod-h3{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--bone, #F2EDE2);
  margin: 0 0 16px;
}

.mod-lede{
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.005em;
  color: rgba(255,255,255,0.72);
  max-width: 680px;                /* Hendricks usa ~600-720 */
  margin: 0 0 36px;
}

.mod-prose{
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.72;
  letter-spacing: -0.003em;
  color: rgba(255,255,255,0.78);
  max-width: 720px;
}
.mod-prose p{ margin: 0 0 18px; }
.mod-prose p:last-child{ margin-bottom: 0; }
.mod-prose strong{ color: var(--bone, #F2EDE2); font-weight: 600; }
.mod-prose em{ color: var(--gold, #BDB09D); font-style: italic; }

/* Encabezado de sección (eyebrow + h2 + lede) — patrón usado en TODA sección */
.mod-section-head{
  margin: 0 0 56px;
  max-width: 920px;
}
@media (max-width: 833px){
  .mod-section-head{ margin-bottom: 40px; }
}
.mod-section-head .mod-lede{ margin-bottom: 0; }

/* ──────────── CTAs ──────────── */

.mod-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 28px;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  border-radius: 980px;            /* pill (Apple/OperaMorelia style — NO Hendricks sharp) */
  transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1;
  cursor: pointer;
}
.mod-btn--gold{
  background: var(--gold, #BDB09D);
  color: #11100E;
  font-weight: 600;
}
.mod-btn--gold:hover{
  background: var(--gold-2, #A89882);
  transform: translateY(-1px);
}
.mod-btn--ghost{
  background: transparent;
  color: var(--bone, #F2EDE2);
  border-color: rgba(255,255,255,0.25);
}
.mod-btn--ghost:hover{
  color: #fff;
  border-color: rgba(189,176,157,0.5);
}
.mod-btn--arrow::after{
  content: "→";
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  margin-left: 2px;
  transition: transform .25s ease;
}
.mod-btn--arrow:hover::after{
  transform: translateX(4px);
}

.mod-cta-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/* ──────────── PATRÓN: 3-UP CARD GRID (Hendricks "De Locaties") ──────────── */

.mod-cards-3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 16px;
}
@media (max-width: 980px){
  .mod-cards-3{ grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 640px){
  .mod-cards-3{ grid-template-columns: 1fr; gap: 24px; }
}

.mod-card{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.mod-card:hover{
  transform: translateY(-4px);
}
.mod-card-img{
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;             /* Hendricks usa landscape */
  overflow: hidden;
  background: #1a1814;
  margin-bottom: 22px;
  border-radius: 4px;              /* sutil — más editorial */
}
.mod-card-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  display: block;
}
.mod-card:hover .mod-card-img img{
  transform: scale(1.04);
  filter: brightness(1.08);
}
.mod-card-tag{
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(0,0,0,0.66);
  color: var(--gold, #BDB09D);
  padding: 6px 12px;
  border-radius: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mod-card-body{
  padding: 0 4px;
}
.mod-card-title{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--bone, #F2EDE2);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.mod-card-meta{
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,0.55);
  margin: 0 0 14px;
  font-weight: 400;
  letter-spacing: -0.003em;
}
.mod-card-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--gold, #BDB09D);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: gap .25s ease;
}
.mod-card:hover .mod-card-link{
  gap: 10px;
}
.mod-card-link::after{
  content: "→";
}

/* ──────────── PATRÓN: 2-UP CARDS más grandes (Hendricks partnerships) ──────────── */

.mod-cards-2{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  margin-top: 16px;
}
@media (max-width: 760px){
  .mod-cards-2{ grid-template-columns: 1fr; gap: 28px; }
}

.mod-card-2{
  display: flex;
  flex-direction: column;
  padding: 44px 36px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
  text-decoration: none;
  color: inherit;
}
.mod-card-2:hover{
  background: rgba(255,255,255,0.045);
  border-color: rgba(189,176,157,0.3);
  transform: translateY(-3px);
}
.mod-card-2 h3{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(1.6rem, 2.4vw, 2rem);
  color: var(--bone, #F2EDE2);
  margin: 0 0 14px;
  line-height: 1.15;
}
.mod-card-2 p{
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255,255,255,0.72);
  margin: 0 0 22px;
  flex: 1;
}

/* ──────────── PATRÓN: COLABORADORES typographic (Hendricks partners adapted) ──────────── */

.mod-collab{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
@media (max-width: 820px){
  .mod-collab{ grid-template-columns: 1fr; }
}
.mod-collab-item{
  padding: 44px 44px;
  border-right: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.mod-collab-item:first-child{ padding-left: 0; }
.mod-collab-item:last-child{ border-right: 0; padding-right: 0; }
@media (max-width: 820px){
  .mod-collab-item{
    border-right: 0;
    padding: 36px 0;
  }
  .mod-collab-item:first-child{ padding-left: 0; }
  .mod-collab-item:last-child{ padding-right: 0; }
}
.mod-collab-name{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.5rem;
  color: var(--bone, #F2EDE2);
  margin: 0 0 10px;
  line-height: 1.2;
}
.mod-collab-meta{
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold, #BDB09D);
  margin: 0 0 14px;
}
.mod-collab-desc{
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255,255,255,0.68);
  margin: 0;
}

/* ──────────── PATRÓN: FAQ ──────────── */

.mod-faq{
  margin-top: 24px;
}
.mod-faq details{
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: 0;
}
.mod-faq details:last-child{
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.mod-faq summary{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 0;
  cursor: pointer;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.3;
  color: var(--bone, #F2EDE2);
  transition: color .25s ease;
}
.mod-faq summary::-webkit-details-marker{ display: none; }
.mod-faq summary:hover{
  color: var(--gold, #BDB09D);
}
.mod-faq summary::after{
  content: "";
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23BDB09D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}
.mod-faq details[open] summary::after{
  transform: rotate(45deg);
}
.mod-faq-answer{
  padding: 0 0 32px;
  max-width: 760px;
}
.mod-faq-answer p{
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255,255,255,0.72);
  margin: 0 0 14px;
}
.mod-faq-answer p:last-child{ margin-bottom: 0; }

/* ──────────── PATRÓN: FINAL CTA dorado ──────────── */

.mod-final-cta{
  text-align: center;
  padding: 88px 28px;
  background: linear-gradient(180deg, rgba(189,176,157,0.06) 0%, rgba(189,176,157,0.02) 100%);
  border-top: 1px solid rgba(189,176,157,0.18);
  border-bottom: 1px solid rgba(189,176,157,0.18);
}
.mod-final-cta .mod-h2{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.mod-final-cta .mod-lede{
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.mod-final-cta .mod-cta-row{
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME v2.2 · RITMO EDITORIAL — rompe la monotonía dark
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── STATS BAND (cifras editoriales sobre fondo bone-on-dark) ──────────── */
.mod-stats{
  padding: 72px 0;
  background:
    linear-gradient(180deg, rgba(189,176,157,0.045) 0%, rgba(189,176,157,0.02) 100%);
  border-top: 1px solid rgba(189,176,157,0.18);
  border-bottom: 1px solid rgba(189,176,157,0.18);
}
.mod-stats-inner{
  max-width: var(--max, 1320px);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: end;
}
@media (max-width: 880px){
  .mod-stats-inner{ grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
}
.mod-stat{
  text-align: left;
  padding: 0;
}
.mod-stat-num{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: clamp(3rem, 7vw, 5.2rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold, #BDB09D);
  margin: 0 0 12px;
  display: block;
}
.mod-stat-label{
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  margin: 0;
}

/* ──────────── PULL QUOTE editorial ──────────── */
.mod-quote{
  padding: 120px 0;
  position: relative;
  background: #050505;
  text-align: center;
}
@media (max-width: 833px){
  .mod-quote{ padding: 80px 0; }
}
.mod-quote-inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 28px;
  position: relative;
}
.mod-quote-mark{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-size: 8rem;
  line-height: 1;
  color: rgba(189,176,157,0.16);
  margin: 0 0 -32px;
  display: block;
  user-select: none;
}
.mod-quote-text{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.9rem, 4.2vw, 3.4rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bone, #F2EDE2);
  margin: 0 0 36px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.mod-quote-text em{
  color: var(--gold, #BDB09D);
}
.mod-quote-cite{
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mod-quote-cite::before{
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(189,176,157,0.5);
}

/* ──────────── PORTRAIT ASIMÉTRICA (foto LEFT + texto RIGHT) ──────────── */
.mod-portrait{
  padding: 112px 0;
  background: #0a0a0a;
}
@media (max-width: 833px){
  .mod-portrait{ padding: 72px 0; }
}
.mod-portrait-inner{
  max-width: var(--max, 1320px);
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 880px){
  .mod-portrait-inner{
    grid-template-columns: 1fr;
    gap: 48px;
  }
}
.mod-portrait-img{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #1a1814;
  aspect-ratio: 4 / 5;
  max-width: 460px;
}
@media (max-width: 880px){
  .mod-portrait-img{
    max-width: 340px;
    margin: 0 auto;
  }
}
.mod-portrait-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(0.18) contrast(1.05) brightness(0.96);
  transition: filter .55s ease;
}
.mod-portrait:hover .mod-portrait-img img{
  filter: grayscale(0) contrast(1.05) brightness(1);
}
.mod-portrait-body{
  display: flex;
  flex-direction: column;
}
.mod-portrait-name{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--bone, #F2EDE2);
  margin: 0 0 8px;
}
.mod-portrait-role{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: var(--gold, #BDB09D);
  margin: 0 0 28px;
}
.mod-portrait-body .mod-prose{
  margin-bottom: 28px;
}

/* ──── FIRMA MANUSCRITA — Omar Nieto en esquina del portrait ──── */
.mod-portrait-img{
  position: relative;
}
.mod-portrait-signature{
  position: absolute;
  bottom: 20px;
  right: 26px;
  font-family: 'Allura', 'Pinyon Script', 'Sacramento', 'Brush Script MT', cursive;
  font-size: 44px;
  line-height: 1;
  color: rgba(242, 237, 226, 0.88);
  font-weight: 400;
  letter-spacing: 0.01em;
  transform: rotate(-4deg);
  text-shadow:
    0 2px 12px rgba(0, 0, 0, 0.55),
    0 0 24px rgba(189, 176, 157, 0.08);
  pointer-events: none;
  user-select: none;
  z-index: 2;
  white-space: nowrap;
}
@media (max-width: 880px){
  .mod-portrait-signature{
    font-size: 36px;
    bottom: 16px;
    right: 18px;
  }
}

/* ──────────── FULL-BLEED PHOTO MOMENT (impacto cinemático) ──────────── */
.mod-photomoment{
  position: relative;
  width: 100%;
  height: 64vh;
  min-height: 480px;
  max-height: 760px;
  overflow: hidden;
  background: #000;
}
@media (max-width: 833px){
  .mod-photomoment{ height: 56vh; min-height: 380px; }
}
.mod-photomoment::before{
  /* Gradient overlay — desde dark abajo */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.15) 35%,
      rgba(0,0,0,0.55) 75%,
      rgba(0,0,0,0.85) 100%);
  z-index: 2;
  pointer-events: none;
}
.mod-photomoment::after{
  /* Gradient sutil arriba para suavizar borde con sección anterior */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}
.mod-photomoment-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  filter: brightness(0.85) saturate(0.92) contrast(1.04);
}
.mod-photomoment-text{
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 32px;
}
.mod-photomoment-quote{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--bone, #F2EDE2);
  margin: 0 0 18px;
  max-width: 1100px;
  text-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
.mod-photomoment-caption{
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.62);
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.mod-photomoment-caption::before,
.mod-photomoment-caption::after{
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(189,176,157,0.45);
}

/* ──────────── SECCIÓN INVERTIDA (bone / light — UN solo respiro) ──────────── */
.mod-section--invert{
  background: #F2EDE2;
  color: #0a0a0a;
  border-top: 1px solid rgba(0,0,0,0.06);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.mod-section--invert .mod-eyebrow{
  color: #8A7D6A;                       /* gold-3 — más oscuro sobre bone */
}
.mod-section--invert .mod-eyebrow::before{
  background: #8A7D6A;
}
.mod-section--invert .mod-h2{
  color: #0a0a0a;
}
.mod-section--invert .mod-h2 em{
  color: #6B5E48;                       /* gold-4 más oscuro */
}
.mod-section--invert .mod-prose{
  color: rgba(10,10,10,0.78);
}
.mod-section--invert .mod-prose strong{
  color: #0a0a0a;
}
.mod-section--invert .mod-prose em{
  color: #6B5E48;
}
.mod-section--invert .mod-btn--ghost{
  color: #0a0a0a;
  border-color: rgba(0,0,0,0.32);
}
.mod-section--invert .mod-btn--ghost:hover{
  color: #0a0a0a;
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.6);
}
.mod-section--invert .mod-lede{
  color: rgba(10,10,10,0.7);
}

/* ──────────── HISTORIA LAYOUT (texto izq + foto der · asimétrica) ──────────── */
.mod-historia{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 72px;
  align-items: center;
}
@media (max-width: 980px){
  .mod-historia{
    grid-template-columns: 1fr;
    gap: 40px;
  }
}
.mod-historia-text .mod-section-head{
  margin-bottom: 32px;
}
.mod-historia-img{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #1a1814;
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 520px;
}
@media (max-width: 980px){
  .mod-historia-img{
    max-width: 460px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
  }
}
.mod-historia-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.mod-historia-img:hover img{
  transform: scale(1.03);
}
.mod-historia-img-caption{
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 6px 12px;
  border-radius: 2px;
}

/* ──────────── TIMELINE editorial — 12 hitos de la compañía ──────────── */
.mod-timeline{
  margin-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.mod-timeline-row{
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 32px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  transition: background .3s ease;
  position: relative;
}
.mod-timeline-row:hover{
  background: linear-gradient(90deg, rgba(189,176,157,0.04) 0%, rgba(189,176,157,0) 100%);
}
@media (max-width: 760px){
  .mod-timeline-row{
    grid-template-columns: 70px 1fr;
    gap: 20px;
    padding: 22px 0;
  }
}
.mod-timeline-year{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-style: italic;
  font-size: 1.6rem;
  line-height: 1;
  color: var(--gold, #BDB09D);
  letter-spacing: -0.01em;
}
@media (max-width: 760px){
  .mod-timeline-year{ font-size: 1.3rem; }
}
.mod-timeline-body{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mod-timeline-title{
  font-family: 'Bodoni Moda', Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  color: var(--bone, #F2EDE2);
  letter-spacing: -0.005em;
  margin: 0;
}
.mod-timeline-title em{
  font-style: italic;
  color: var(--gold, #BDB09D);
  font-weight: 400;
}
.mod-timeline-meta{
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  color: rgba(255,255,255,0.6);
  margin: 0;
  letter-spacing: -0.003em;
}
.mod-timeline-tag{
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(189,176,157,0.7);
  padding: 4px 10px;
  border: 1px solid rgba(189,176,157,0.25);
  border-radius: 2px;
  align-self: center;
  white-space: nowrap;
}
@media (max-width: 760px){
  .mod-timeline-tag{ display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME v3 · HÍBRIDO LIGHT/DARK (Festival d'Aix-en-Provence pattern)
   - .mod-section--light = secciones contenido institucional (Met/ROH style)
   - Las demás siguen dark (drama)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Variables LIGHT — cream paper editorial */
:root{
  --opm-light-bg:        #F4F0E8;          /* warm cream (entre #F4F3F1 de Hendricks y #F5F5F0) */
  --opm-light-bg-2:      #EAE3D4;          /* cream más cálido para alternar dentro de light */
  --opm-light-ink:       #1A1817;          /* near-black warm */
  --opm-light-ink-2:     #4A4642;          /* secondary dark warm */
  --opm-light-muted:     rgba(26,24,23,.62);
  --opm-light-faint:     rgba(26,24,23,.42);
  --opm-light-border:    rgba(26,24,23,.10);
  --opm-light-border-2:  rgba(26,24,23,.18);
  --opm-light-gold:      #8A7758;           /* gold más oscuro para legibilidad sobre cream */
  --opm-light-gold-2:    #6B5A40;           /* gold acento más profundo */
}

/* ──────────── SECCIÓN LIGHT (variante general) ──────────── */
.mod-section--light{
  background: var(--opm-light-bg);
  color: var(--opm-light-ink);
  border-top: 1px solid var(--opm-light-border);
  border-bottom: 1px solid var(--opm-light-border);
}

/* Tipografía dentro de light */
.mod-section--light .mod-eyebrow{
  color: var(--opm-light-gold);
}
.mod-section--light .mod-eyebrow::before{
  background: var(--opm-light-gold);
}
.mod-section--light .mod-h2{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-h2 em{
  color: var(--opm-light-gold-2);
}
.mod-section--light .mod-h3{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-lede{
  color: var(--opm-light-muted);
}
.mod-section--light .mod-prose{
  color: var(--opm-light-muted);
}
.mod-section--light .mod-prose strong{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-prose em{
  color: var(--opm-light-gold-2);
}

/* Buttons en LIGHT */
.mod-section--light .mod-btn--ghost{
  color: var(--opm-light-ink);
  border-color: var(--opm-light-border-2);
}
.mod-section--light .mod-btn--ghost:hover{
  background: rgba(26,24,23,0.04);
  border-color: var(--opm-light-ink-2);
}

/* Cards 3-up en LIGHT */
.mod-section--light .mod-card-title{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-card-meta{
  color: var(--opm-light-muted);
}
.mod-section--light .mod-card-link{
  color: var(--opm-light-gold-2);
}
.mod-section--light .mod-card-img{
  background: var(--opm-light-bg-2);
}
.mod-section--light .mod-card-tag{
  background: rgba(255,255,255,0.92);
  color: var(--opm-light-ink);
  backdrop-filter: blur(8px);
}

/* Cards 2-up en LIGHT */
.mod-section--light .mod-card-2{
  background: rgba(255,255,255,0.55);
  border-color: var(--opm-light-border);
}
.mod-section--light .mod-card-2:hover{
  background: rgba(255,255,255,0.85);
  border-color: var(--opm-light-gold);
}
.mod-section--light .mod-card-2 h3{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-card-2 p{
  color: var(--opm-light-muted);
}
.mod-section--light .mod-card-2 .mod-card-link{
  color: var(--opm-light-gold-2);
}

/* Colaboradores en LIGHT */
.mod-section--light .mod-collab{
  border-top-color: var(--opm-light-border-2);
}
.mod-section--light .mod-collab-item{
  border-right-color: var(--opm-light-border-2);
  border-bottom-color: var(--opm-light-border-2);
}
.mod-section--light .mod-collab-name{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-collab-meta{
  color: var(--opm-light-gold-2);
}
.mod-section--light .mod-collab-desc{
  color: var(--opm-light-muted);
}

/* FAQ en LIGHT */
.mod-section--light .mod-faq details{
  border-top-color: var(--opm-light-border-2);
}
.mod-section--light .mod-faq details:last-child{
  border-bottom-color: var(--opm-light-border-2);
}
.mod-section--light .mod-faq summary{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-faq summary:hover{
  color: var(--opm-light-gold-2);
}
.mod-section--light .mod-faq summary::after{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A7758' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.mod-section--light .mod-faq-answer p{
  color: var(--opm-light-muted);
}

/* Timeline en LIGHT */
.mod-section--light .mod-timeline{
  border-top-color: var(--opm-light-border-2);
}
.mod-section--light .mod-timeline-row{
  border-bottom-color: var(--opm-light-border-2);
}
.mod-section--light .mod-timeline-row:hover{
  background: linear-gradient(90deg, rgba(138,119,88,0.06) 0%, rgba(138,119,88,0) 100%);
}
.mod-section--light .mod-timeline-year{
  color: var(--opm-light-gold-2);
}
.mod-section--light .mod-timeline-title{
  color: var(--opm-light-ink);
}
.mod-section--light .mod-timeline-title em{
  color: var(--opm-light-gold-2);
}
.mod-section--light .mod-timeline-meta{
  color: var(--opm-light-muted);
}
.mod-section--light .mod-timeline-tag{
  color: var(--opm-light-gold-2);
  border-color: rgba(138,119,88,0.35);
}

/* Stats band en light (refinado para el cream) */
.mod-section--light.mod-stats{
  background: var(--opm-light-bg);
  border-top: 1px solid var(--opm-light-border);
  border-bottom: 1px solid var(--opm-light-border);
}
.mod-section--light .mod-stat-num,
.mod-stats.mod-section--light .mod-stat-num{
  color: var(--opm-light-gold-2);
}
.mod-stats.mod-section--light .mod-stat-label{
  color: var(--opm-light-muted);
}

/* ──────────── INTRO con foto lateral (split layout en LIGHT) ──────────── */
.mod-intro-split{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 80px;
  align-items: center;
}
@media (max-width: 980px){
  .mod-intro-split{ grid-template-columns: 1fr; gap: 48px; }
}
.mod-intro-text .mod-section-head{
  margin-bottom: 28px;
}
.mod-intro-img{
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 4px;
  background: var(--opm-light-bg-2);
}
@media (max-width: 980px){
  .mod-intro-img{ margin: 0 auto; max-width: 420px; }
}
.mod-intro-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.mod-intro-img:hover img{
  transform: scale(1.04);
}

/* ──────────── ESCUELA 2-UP con fotos en cards ──────────── */
.mod-card-2--photo{
  padding: 0;
  overflow: hidden;
}
.mod-card-2--photo .mod-card-2-img{
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--opm-light-bg-2);
  margin-bottom: 0;
}
.mod-card-2--photo .mod-card-2-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .55s cubic-bezier(.2,.7,.2,1);
}
.mod-card-2--photo:hover .mod-card-2-img img{
  transform: scale(1.05);
}
.mod-card-2--photo .mod-card-2-body{
  padding: 32px 32px 36px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOME v4 · DARK APPLE-STYLE no-monotone
   Tonos sutiles del dark — fotos dan el color, fondo se mantiene oscuro
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --opm-d-base:    #0a0a0a;            /* base — default dark */
  --opm-d-deep:    #000000;            /* pure black — drama */
  --opm-d-2:       #13110d;            /* warm dark gold-tinted */
  --opm-d-3:       #1a1815;            /* warm midnight */
  --opm-d-4:       #16161a;            /* cool dark navy */
  --opm-d-5:       #1d1d1f;            /* Apple's dark gray */
}

/* Tonos sutiles para alternar dark */
.mod-section--d-deep{
  background: var(--opm-d-deep);
  border-top: 1px solid rgba(189,176,157,0.06);
  border-bottom: 1px solid rgba(189,176,157,0.06);
}
.mod-section--d-warm{
  background: var(--opm-d-2);
  border-top: 1px solid rgba(189,176,157,0.08);
  border-bottom: 1px solid rgba(189,176,157,0.08);
}
.mod-section--d-midnight{
  background: var(--opm-d-3);
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.mod-section--d-cool{
  background: var(--opm-d-4);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mod-section--d-apple{
  background: var(--opm-d-5);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}