/* ===== Estilos propios de ComexLaw (se suman a style.css) ===== */

/* ---- Marca ComexLaw en cabecera ---- */
.cl-wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.cl-wordmark .cl-name {
  font-family: var(--serif); font-size: 1.55rem; font-weight: 700;
  color: var(--navy); letter-spacing: .01em;
}
.cl-wordmark .cl-name .tld { color: var(--gold); font-size: 1rem; vertical-align: super; }
.cl-emblem { height: 52px; width: auto; margin-right: .7rem; flex: none; }
.cl-cta-logo { width: 150px; height: auto; display: block; margin: 0 auto 1.2rem; }

/* ---- Inicio: el membrete está oculto durante los videos y baja al terminar ---- */
body.home .site-header {
  position: fixed; top: 0; left: 0; right: 0;
  transform: translateY(-110%);
  transition: transform .8s ease;
}
body.home.intro-done .site-header { transform: translateY(0); }

/* ---- Hero: video a pantalla completa, el texto sube al final ---- */
.cl-hero {
  position: relative; overflow: hidden;
  background: var(--navy);
  min-height: 92vh;
  min-height: 90svh;
  border-bottom: 4px solid var(--gold);
}
.cl-hero-video {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain; object-position: center;
  background: var(--navy);
  z-index: 0; pointer-events: none;
}
/* El segundo video (el del logo) se muestra ENTERO, sin recortar, centrado; el azul se funde con el fondo */
.cl-hero-video2 { z-index: 1; opacity: 0; transition: opacity .6s ease; object-fit: contain; object-position: center 47%; background: var(--navy); transform: scale(0.86); }
/* El video 2 ya termina en el logo de ComexLaw; no hace falta overlay de marca */
.cl-hero-audio-toggle {
  position: absolute; bottom: 18px; right: 22px; z-index: 3;
  background: rgba(11,23,41,0.85); color: var(--gold);
  border: 2px solid var(--gold); padding: 9px 16px;
  cursor: pointer; font-size: 12px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  font-family: var(--sans); display: flex; align-items: center; gap: .5rem;
  transition: all .2s ease;
}
.cl-hero-audio-toggle:hover { background: var(--gold); color: var(--navy); }
.cl-hero-audio-toggle.active { background: rgba(11,23,41,0.55); }

/* ---- Presentación: texto + logo que suben cuando el barco terminó de avanzar ---- */
.cl-hero-content {
  position: absolute; left: 0; right: 0; bottom: 20%; z-index: 2;
  text-align: center; padding: 0 1.5rem;
  opacity: 0; transform: translateY(48px);
  transition: opacity 1.1s ease, transform 1.1s ease;
}
.cl-hero.reveal .cl-hero-content { opacity: 1; transform: translateY(0); }
/* Estado final: sobre el blanco, surge el logo dorado + el nombre + la frase */
/* La frase aparece al pie cuando el video termina en el logo */
.cl-hero-tagline {
  position: absolute; left: 0; right: 0; bottom: 6%; z-index: 5;
  text-align: center; padding: 0 1.5rem;
  font-family: var(--serif); color: rgba(255,255,255,0.97); font-weight: 600;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: .01em;
  max-width: 820px; margin: 0 auto; line-height: 1.25;
  opacity: 0; transition: opacity 1.1s ease;
}
.cl-hero.reveal .cl-hero-tagline { opacity: 1; }
.cl-hero.reveal .cl-hero-audio-toggle { opacity: 0; pointer-events: none; transition: opacity .4s ease; }
@media (max-width: 700px) {
  .cl-hero-tagline { bottom: 8%; }
  /* En celular el logo del cierre se ve más grande (la pantalla es angosta) */
  .cl-hero-video2 { transform: scale(1.05); object-position: center 46%; }
}

/* ---- Banner de marca (imagen del barco) ---- */
.cl-showcase img { width: 100%; display: block; }

/* ---- Franja de respaldo (fotos del estudio) ---- */
.cl-photo { overflow: hidden; box-shadow: var(--shadow-md); }
.cl-photo img { width: 100%; height: 380px; object-fit: cover; display: block; }
@media (max-width: 820px) { .cl-photo img { height: 280px; } }

/* ---- Tarjetas de público ---- */
.cl-audience { border-top: 3px solid var(--gold); }
.cl-audience h3 { display: flex; align-items: center; gap: .6rem; }
.cl-audience .tag {
  display: inline-block; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold); font-weight: 600; margin-bottom: .4rem;
}

/* ---- Bloque co-marca ---- */
.cl-cobrand { text-align: center; }
.cl-cobrand .badges {
  display: flex; align-items: center; justify-content: center; gap: 1rem;
  flex-wrap: wrap; margin-top: 2rem;
}
.cl-pill {
  border: 1px solid rgba(255,255,255,0.3); padding: .7rem 1.4rem;
  font-weight: 600; letter-spacing: .04em; border-radius: 2px;
}
.cl-pill.fixed { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.cl-plus { font-size: 1.4rem; color: var(--gold); }

/* ---- Acceso base/premium ---- */
.cl-tiers .card { text-align: left; }
.cl-tier-name { font-family: var(--serif); font-size: 1.5rem; color: var(--navy); margin-bottom: .3rem; }
.cl-tier-tag {
  display: inline-block; font-size: .65rem; letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .7rem; margin-bottom: .8rem; font-weight: 600;
}
.cl-tier-tag.base { background: var(--grey-100); color: var(--grey-600); }
.cl-tier-tag.premium { background: var(--gold); color: var(--navy); }
.cl-tiers ul { list-style: none; padding: 0; }
.cl-tiers li { padding: .45rem 0 .45rem 1.5rem; position: relative; color: #333; }
.cl-tiers li::before { content: "→"; position: absolute; left: 0; color: var(--gold); }

/* ---- CTA final ---- */
.cl-cta-final { text-align: center; }
.cl-cta-final h2 { color: var(--white); }
.cl-cta-final p { color: rgba(255,255,255,0.82); max-width: 600px; margin: 0 auto 1.8rem; }

@media (max-width: 820px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
}