/* ============================================================
   PAGE · HOME — hero, manifiesto, casos, sistema, equipo, stats, cta
   ============================================================ */

/* .section-eyebrow ahora vive en 02-base.css (compartido) */
/* El hero + slider vive en assets/css/05-hero.css (módulo compartido) */

/* === MANIFIESTO === */
.manifesto {
  padding: 100px 40px;
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 80px;
}
.manifesto-num { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.14em; color: var(--ink-dim); text-transform: uppercase; padding-top: 6px; }
.manifesto-num small { display: block; font-family: var(--font-body); font-size: 10px; font-weight: 400; color: var(--gold); letter-spacing: 0.1em; margin-top: 6px; }
.manifesto-content h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(34px, 3.5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 40px;
}
.manifesto-content h2 em { font-style: italic; color: var(--gold); }
.manifesto-content h2 .strike { text-decoration: line-through; color: var(--ink-dim); }
.manifesto-features { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 60px; margin-top: 16px; }
.manifesto-feat { display: grid; grid-template-columns: 36px 1fr; gap: 20px; align-items: start; }
.manifesto-feat-num { font-family: var(--font-display); font-size: 22px; color: var(--gold); line-height: 1; }
.manifesto-feat h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -0.01em; margin-bottom: 6px; }
.manifesto-feat p { font-size: 14px; line-height: 1.7; color: var(--ink-dim); }
@media (max-width: 768px) {
  .manifesto { grid-template-columns: 1fr; gap: 32px; padding: 60px 20px; }
  .manifesto-features { grid-template-columns: 1fr; }
}

/* === 02 · CASOS — Filmstrip arrastrable === */
.casos-section { background: var(--bg2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 72px 0; }
.casos-inner { max-width: var(--max); margin: 0 auto; padding: 0 48px; }
.casos-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 40px; flex-wrap: wrap; }
.casos-body { display: flex; align-items: flex-start; gap: 0; }
.casos-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.casos-h em { font-style: italic; color: var(--gold); }
.casos-meta { font-size: 13px; color: var(--ink-dim); line-height: 1.6; text-align: right; flex-shrink: 0; }
.casos-meta strong { display: block; font-family: var(--font-display); font-size: 42px; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.cst-wrap { flex: 1; min-width: 0; margin: 0 -48px 0 0; position: relative; overflow: hidden; cursor: grab; user-select: none; }
.cst-wrap.is-dragging { cursor: grabbing; }
.cst-track { display: flex; gap: 6px; will-change: transform; }
.cst-card { flex: 0 0 286px; height: 372px; position: relative; overflow: hidden; background: #0f0f0f; box-shadow: inset 0 0 0 1px transparent; transition: box-shadow .4s ease; }
.cst-wrap.is-dragging .cst-card { pointer-events: none; }
.cst-wrap:not(.is-dragging) .cst-card:hover { box-shadow: inset 0 0 0 1px rgba(232,183,58,.35); }
.cst-img { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(100%) brightness(0.68) contrast(1.14); transform: scale(1.07); transition: filter .65s ease, transform .85s var(--ease); }
.cst-wrap:not(.is-dragging) .cst-card:hover .cst-img { filter: grayscale(0%) brightness(0.88) contrast(1.04); transform: scale(1.0); }
.cst-grad { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.06) 35%, rgba(0,0,0,.9) 100%); }
.cst-img--placeholder { background: linear-gradient(155deg, #161616 0%, #0a0a0a 100%); display: flex; align-items: center; justify-content: center; }
.cst-img--placeholder::after { content: attr(data-mark); font-family: var(--font-display); font-weight: 500; font-size: 96px; line-height: 1; color: rgba(240,237,230,.06); letter-spacing: -0.02em; }
.cst-num { position: absolute; top: 16px; left: 18px; z-index: 2; font-size: 10px; letter-spacing: .22em; color: rgba(240,237,230,.2); font-family: var(--font-display); }
.cst-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 21px; z-index: 2; }
.cst-tag { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(232,183,58,.65); margin-bottom: 8px; }
.cst-name { font-family: var(--font-display); font-weight: 400; font-size: clamp(18px, 1.89vw, 26px); letter-spacing: -.022em; line-height: 1.05; color: var(--ink); }
.cst-name em { font-style: italic; color: rgba(240,237,230,.48); }
.cst-line { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; background: var(--gold); transition: width .6s var(--ease); z-index: 3; }
.cst-wrap:not(.is-dragging) .cst-card:hover .cst-line { width: 100%; }
.cst-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 48px 0; }
.cst-hint { font-size: 13px; letter-spacing: .12em; color: var(--ink-dim); display: flex; align-items: center; gap: 8px; }
.cst-hint-arr { color: var(--gold); }
.cst-btns { display: flex; gap: 8px; }
.cst-btn { width: 47px; height: 47px; border-radius: 50%; border: 1px solid var(--border-strong); background: none; color: var(--ink); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .3s, color .3s, background .3s, transform .3s; }
.cst-btn:hover { border-color: var(--gold); color: var(--gold); background: rgba(232,183,58,.08); transform: scale(1.06); }
.cst-disclaimer { margin: 29px 0 0; padding: 0 48px; font-size: 13px; letter-spacing: .06em; line-height: 1.65; color: rgba(240,237,230,.28); text-align: center; white-space: nowrap; }
.cst-filters { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; width: 172px; margin-right: 0; padding-right: 24px; padding-top: 4px; scrollbar-width: none; }
.cst-filters::-webkit-scrollbar { display: none; }
.cst-filter { flex-shrink: 0; width: 100%; text-align: left; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--border); background: none; padding: 9px 14px; cursor: pointer; font-family: var(--font-display); transition: border-color .3s ease, color .3s ease; }
.cst-filter.active, .cst-filter:hover { border-color: var(--gold); color: var(--gold); }
@media (max-width: 920px) {
  .casos-section { padding: 60px 0; }
  .casos-inner { padding: 0 24px; }
  .casos-body { flex-direction: column; }
  .cst-filters { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; width: 100%; padding-right: 0; margin-bottom: 24px; }
  .cst-filter { width: auto; }
  .cst-wrap { margin: 0 -24px; }
  .cst-foot { padding: 18px 24px 0; }
  .cst-disclaimer { padding: 0 24px; white-space: normal; }
}
@media (max-width: 540px) {
  .casos-inner { padding: 0 20px; }
  .casos-meta { text-align: left; }
  .cst-wrap { margin: 0 -20px; }
  .cst-foot { padding: 18px 20px 0; }
  .cst-card { flex: 0 0 224px; height: 348px; }
  .cst-disclaimer { padding: 0 20px; }
}

/* === 04 · EQUIPO — accordion cinematográfico === */
.team-strip { padding: 60px 48px 0; max-width: var(--max); margin: 0 auto; }
.team-strip-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; margin-bottom: 40px; flex-wrap: wrap; }
.team-strip-h { font-family: var(--font-display); font-weight: 500; font-size: clamp(34px, 3.5vw, 52px); line-height: 1.05; letter-spacing: -0.02em; }
.team-strip-h .italic { font-style: italic; color: var(--gold); }
.team-strip-meta { font-size: 13px; color: var(--ink-dim); line-height: 1.6; text-align: right; }
.team-strip-meta strong { display: block; font-family: var(--font-display); font-size: 42px; color: var(--gold); line-height: 1; margin-bottom: 6px; }
.accordion { display: flex; height: 72vh; min-height: 500px; max-height: 860px; gap: 2px; position: relative; overflow: hidden; }
.panel { position: relative; flex: 1; overflow: hidden; cursor: none; transition: flex 0.75s var(--ease); background: #111; }
.accordion.is-hovered .panel { flex: 0.35; }
.accordion.is-hovered .panel.is-active { flex: 0.9; }
.panel-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.1) brightness(0.5) sepia(0.85) hue-rotate(-15deg) saturate(2.2); transition: filter 1s var(--ease), transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: transform, filter; }
.panel:nth-child(1) .panel-bg { animation: kb1 12s ease-in-out infinite alternate; }
.panel:nth-child(2) .panel-bg { animation: kb2 14s ease-in-out infinite alternate; }
.panel:nth-child(3) .panel-bg { animation: kb3 11s ease-in-out infinite alternate; }
.panel:nth-child(4) .panel-bg { animation: kb4 13s ease-in-out infinite alternate; }
.panel:nth-child(5) .panel-bg { animation: kb5 15s ease-in-out infinite alternate; }
.panel:nth-child(6) .panel-bg { animation: kb3 13s ease-in-out infinite alternate; }
@keyframes kb1 { from { transform: scale(1.0) translateX(0);    } to { transform: scale(1.07) translateX(-1%); } }
@keyframes kb2 { from { transform: scale(1.04) translateY(-1%); } to { transform: scale(1.0)  translateY(1%);  } }
@keyframes kb3 { from { transform: scale(1.0) translateX(1%);   } to { transform: scale(1.08) translateX(0);   } }
@keyframes kb4 { from { transform: scale(1.06) translateY(1%);  } to { transform: scale(1.0)  translateY(-1%); } }
@keyframes kb5 { from { transform: scale(1.0) translateX(-1%);  } to { transform: scale(1.07) translateX(1%);  } }
.panel.is-active .panel-bg { filter: grayscale(0%) brightness(0.82) contrast(1.06) sepia(0.5) saturate(1.9) hue-rotate(-12deg); animation-play-state: paused; transform: none !important; }
.panel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.25) 45%, rgba(10,10,10,0.88) 100%); z-index: 2; transition: opacity 0.6s ease; }
.panel.is-active::after { opacity: 0.6; }
.panel-num { position: absolute; top: 28px; left: 22px; z-index: 5; font-size: 10px; letter-spacing: 0.22em; color: rgba(245,200,74,0.45); writing-mode: vertical-rl; text-transform: uppercase; transition: color 0.4s ease, opacity 0.4s ease; white-space: nowrap; }
.panel.is-active .panel-num { color: rgba(220,220,228,0.7); }
.panel-label-v { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%) rotate(180deg); z-index: 5; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(240,237,230,0.35); writing-mode: vertical-rl; white-space: nowrap; transition: color 0.4s ease; }
.panel.is-active .panel-label-v { color: rgba(200,205,215,0.6); }
.panel-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 0 36px 36px; z-index: 5; }
.panel-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(200,205,218,0.85); margin-bottom: 18px; opacity: 0; transform: translateY(12px); transition: opacity 0.4s ease 0.2s, transform 0.5s var(--ease) 0.2s; }
.panel-tag::before { content: ''; display: block; width: 24px; height: 1px; background: rgba(200,205,218,0.6); }
.panel.is-active .panel-tag { opacity: 1; transform: translateY(0); }
.panel-title-wrap { overflow: hidden; }
.panel-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 3.8vw, 60px); line-height: 0.94; letter-spacing: -0.035em; color: var(--ink); transform: translateY(105%); transition: transform 0.65s cubic-bezier(0.16,1,0.3,1) 0.1s; display: block; }
.panel.is-active .panel-title { transform: translateY(0); }
.panel-title em { font-style: italic; color: rgba(200,205,218,0.9); }
.panel-sub { font-size: 12px; color: var(--ink-dim); letter-spacing: 0.04em; margin-top: 14px; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease 0.3s, transform 0.5s var(--ease) 0.3s; line-height: 1.5; }
.panel.is-active .panel-sub { opacity: 1; transform: translateY(0); }
.panel-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background: rgba(200,205,218,0.5); transform: scaleX(0); transform-origin: left; z-index: 6; transition: transform 0.7s var(--ease); }
.panel.is-active .panel-bar { transform: scaleX(1); }
.explore-hint { position: absolute; bottom: 48px; right: 48px; z-index: 10; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(240,237,230,0.35); display: flex; align-items: center; gap: 10px; transition: opacity 0.4s ease; pointer-events: none; }
.explore-hint::after { content: '→'; color: var(--gold); font-size: 12px; }
.accordion.is-hovered .explore-hint { opacity: 0; }
@media (max-width: 920px) {
  .team-strip { padding: 60px 20px 0; }
  .team-strip-meta { text-align: left; }
  .accordion { flex-direction: column; height: auto; max-height: none; }
  .panel { flex: none !important; height: 56vw; min-height: 240px; }
  .panel-num, .panel-label-v, .explore-hint { display: none; }
}

/* === STATS BAND === */
.stats { background: var(--gold); color: var(--bg); padding: 100px 40px; position: relative; overflow: hidden; }
.stats::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent, transparent 34px, rgba(10,10,10,0.04) 34px, rgba(10,10,10,0.04) 35px); pointer-events: none; }
.stats-eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--bg); opacity: 0.65; margin-bottom: 48px; text-align: center; display: flex; align-items: center; justify-content: center; gap: 14px; }
.stats-eyebrow::before, .stats-eyebrow::after { content: ''; display: block; width: 28px; height: 1px; background: var(--bg); opacity: 0.4; }
.stats-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; position: relative; z-index: 1; }
.stat-cell { border-left: 2px solid var(--bg); padding-left: 28px; }
.stat-cell:first-child { border-left: none; padding-left: 0; }
.stat-big { font-family: var(--font-display); font-size: clamp(52px, 6vw, 96px); line-height: 0.95; letter-spacing: -0.02em; color: var(--bg); margin-bottom: 12px; }
.stat-big em { font-style: normal; }
.stat-label { font-size: 11px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.12em; color: var(--bg); opacity: 0.7; line-height: 1.5; }
@media (max-width: 920px) {
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 40px 28px; }
  .stat-cell:nth-child(3) { border-left: none; padding-left: 0; }
}

/* === CTA BANNER === */
.cta-banner { background: var(--bg3); border-top: 1px solid var(--border); padding: 100px 40px; text-align: center; position: relative; overflow: hidden; }
.cta-banner-bg { position: absolute; inset: 0; font-family: var(--font-display); font-size: 280px; font-weight: 900; color: rgba(240,237,230,0.02); display: flex; align-items: center; justify-content: center; letter-spacing: -0.05em; pointer-events: none; user-select: none; }
.cta-bg-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: url('../../../img/contacto/contacto-01.jpg'); background-size: cover; background-position: center; filter: grayscale(100%) contrast(1.1) brightness(0.62) sepia(0.85) hue-rotate(-15deg) saturate(2.2); }
.cta-bg-overlay { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 30% 50%, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.7) 80%), linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.9) 100%); }
.cta-inner { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
.cta-banner h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(40px, 5vw, 72px); line-height: 1.0; letter-spacing: -0.02em; margin-bottom: 24px; }
.cta-banner h2 em { font-style: italic; color: var(--gold); }
.cta-banner p { font-size: 17px; color: var(--ink-dim); max-width: 560px; margin: 0 auto 48px; line-height: 1.7; }
.cta-banner p.section-eyebrow { font-size: 11px; text-align: left; margin: 0 0 48px; max-width: none; line-height: 1; }
@media (max-width: 540px) {
  .cta-banner-bg { font-size: 100px; }
}