/* =====================================================
   styles.css – Estilos personalizados C95 Creative
   (complementa Tailwind CDN)
   ===================================================== */

/* ── Reset / Base ──────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ── Fuente base ────────────────────────────────────── */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Fuente serifa para slide 1 */
.font-cormorant {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

/* ── Header: modo oscuro (sobre slide claro) ────────── */
#main-header.header-dark .nav-link {
  color: #111 !important;
}
#main-header.header-dark {
  /* sin cambio de fondo, solo el color del texto */
}

/* ── Slides ─────────────────────────────────────────── */
.slide {
  opacity: 0;
  transform: translateX(100%);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none;
  will-change: transform, opacity;
  overflow: hidden;
}

/* Fondo con efecto parallax: zoom ligero para que
   la traslación no deje bordes visibles */
.slide-bg {
  transform: scale(1.06);
  transition: transform 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  z-index: 10;
}

/* Puntos cuadrados de navegación */
.dot {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  background: transparent;
  border-radius: 0;          /* cuadrado */
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
  padding: 0;
}
.dot.active {
  background: white;
  transform: scale(1.2);
}

/* ── Animaciones de entrada de elementos ────────────── */
.slide-anim-up {
  opacity: 0;
  transform: translateY(30px);
}
.slide-anim-left {
  opacity: 0;
  transform: translateX(-30px);
}
.slide-anim-right {
  opacity: 0;
  transform: translateX(30px);
}

/* ── Header transparente sobre slides ──────────────── */
#main-header {
  background: transparent;
  transition: background 0.4s ease;
}

/* ── Logo (imagen negra → invertida a blanca en slides) */
.logo-img {
  filter: invert(1);
  transition: filter 0.4s ease;
}

/* ── Barra de scroll personalizada ─────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #000; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #666; }

/* ── Selección de texto ─────────────────────────────── */
::selection { background: rgba(255,255,255,0.2); color: #fff; }

/* ── Inputs focus ring personalizado ───────────────── */
input:focus, textarea:focus {
  outline: none;
  border-color: #fff !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}

/* ── Smooth scroll para páginas internas ───────────── */
html { scroll-behavior: smooth; }

/* ── Progress bar del slider ───────────────────────── */
#slide-progress {
  position: fixed;
  bottom: 96px;
  left: 0;
  height: 2px;
  background: rgba(255,255,255,0.6);
  z-index: 40;
  transition: width 0.1s linear;
}

/* ── Value Propositions list ────────────────────────── */
.value-list {
  list-style: disc;
  padding-left: 1.4em;   /* el bullet queda fuera, el texto alineado */
  margin: 0;
}
.value-list li {
  padding-left: 0.2em;
}

/* ── Value Propositions – alineación títulos y listas ── */
/* Grid padre: todas las tarjetas se estiran a la misma altura */
.value-prop-grid {
  align-items: stretch;
}

/* Cada tarjeta ocupa toda la altura de la fila y es un flex-column */
.value-prop-grid > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2.5rem;
}

/* Envoltorio del título: altura compartida, centrado vertical */
.value-title-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 1.5rem;
  min-height: 5.5rem;           /* reserva espacio para títulos de 2 líneas */
}

/* Lista empieza siempre desde arriba (flex-grow 0) */
.value-prop-grid .value-list {
  flex: 0 0 auto;
}

/* ── Campos formulario de contacto ──────────────────── */
.contact-field {
  background-color: #2c2c2c;
  border: none;
  color: #fff;
  transition: background-color 0.2s ease;
}
.contact-field:focus {
  background-color: #333;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}
.contact-field::placeholder {
  color: #888;
}

/* ── Responsive móvil ───────────────────────────────── */
@media (max-width: 1023px) and (orientation: portrait) {

  /* Ocultar chevrones en móvil */
  #prev-btn, #next-btn { display: none; }

  /* Dots más arriba para no pisar el footer compacto */
  #dots { bottom: 96px !important; }

  /* Progress bar acorde */
  #slide-progress { bottom: 80px; }

  /* ── Footer compacto en móvil ── */
  footer.fixed {
    padding: 8px 14px !important;
  }

  /* Fila: 3 columnas en flujo normal */
  footer .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    gap: 4px !important;
    position: static !important;
  }

  /* Bloque central: teléfono + email centrados (flujo normal) */
  footer .flex.lg\:hidden.flex-col.items-center {
    position: static !important;
    transform: none !important;
    text-align: center !important;
    gap: 3px !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
  }

  /* Iconos sociales: fila horizontal */
  footer .flex.lg\:hidden.flex-col.items-end .flex.items-center {
    flex-direction: row !important;
    gap: 10px !important;
  }

  /* ── Slide 1 – tamaños de texto ── */
  #slide-home .slide-content { padding-bottom: 10px !important; }
  #slide-home img { height: 90px !important; }
  #slide-home h2 { font-size: 1.4rem !important; margin-bottom: 0.5rem !important; }
  #slide-home p  { font-size: 1rem !important; }

  /* ── Slide 2 – About Us ── */
  #about .slide-bg { background-position: 60% top !important; }
  #about .relative.z-10 {
    padding: 0 16px !important;
    margin-right: 0 !important;
    margin-top: 80px !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #about h2 {
    font-size: 1.5rem !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
    color: #ffffff !important;
    text-shadow: -2px -2px 0 #003366, 2px -2px 0 #003366, -2px 2px 0 #003366, 2px 2px 0 #003366, 0 -2px 0 #003366, 0 2px 0 #003366, -2px 0 0 #003366, 2px 0 0 #003366 !important;
  }
  #about p  {
    font-size: 0.95rem !important;
    margin-bottom: 0.4rem !important;
    color: #ffffff !important;
    text-shadow: -1px -1px 0 #003366, 1px -1px 0 #003366, -1px 1px 0 #003366, 1px 1px 0 #003366, 0 -1px 0 #003366, 0 1px 0 #003366, -1px 0 0 #003366, 1px 0 0 #003366 !important;
  }

  /* ── Slide 3 – Services ── */
  #partnership .relative.z-10 { padding: 0 10px !important; }
  #partnership h2 { font-size: 1.8rem !important; margin-bottom: 0.5rem !important; }
  #partnership .grid { grid-template-columns: 1fr !important; gap: 8px !important; }
  #partnership .grid > div { padding: 12px !important; border-radius: 8px !important; }
  #partnership h3 { font-size: 1.1rem !important; margin-bottom: 4px !important; }
  #partnership p  { font-size: 0.85rem !important; }

  /* ── Slide 4 – Global Partnerships ── */
  #how {
    align-items: center !important;
    justify-content: center !important;
  }
  #how .relative.z-10 {
    padding: 0 16px !important;
    margin-left: 0 !important;
    padding-top: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #how h2 {
    font-size: 1.5rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: -2px -2px 0 #003366, 2px -2px 0 #003366, -2px 2px 0 #003366, 2px 2px 0 #003366, 0 -2px 0 #003366, 0 2px 0 #003366, -2px 0 0 #003366, 2px 0 0 #003366 !important;
  }
  #how p  {
    font-size: 0.95rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: -1px -1px 0 #003366, 1px -1px 0 #003366, -1px 1px 0 #003366, 1px 1px 0 #003366, 0 -1px 0 #003366, 0 1px 0 #003366, -1px 0 0 #003366, 1px 0 0 #003366 !important;
  }

  /* ── Slide 5 – Why C95 ── */
  #why .relative.z-10 { margin-top: 0 !important; }
  #why h2 { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; }
  #why li { font-size: 1rem !important; }

  /* ── Slide 6 – Value Propositions ── */
  #value .relative.z-10 { padding: 0 10px !important; }
  #value h2 { font-size: 1.6rem !important; margin-bottom: 0.5rem !important; }
  #value .grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  #value .grid > div { padding: 10px !important; border-radius: 8px !important; }
  #value h3 { font-size: 1rem !important; }
  #value .value-title-wrap { min-height: 2.5rem !important; padding-bottom: 0.5rem !important; }
  #value ul li { font-size: 0.8rem !important; }

  /* ── Slide 7 – How We Work ── */
  #how-we-work { justify-content: center !important; align-items: center !important; }
  #how-we-work .slide-bg { filter: blur(4px); transform: scale(1.12); }
  #how-we-work .relative.z-10 {
    padding: 0 24px !important;
    margin-left: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #how-we-work h2 { font-size: 2rem !important; margin-bottom: 0.75rem !important; }
  #how-we-work p  { font-size: 1.25rem !important; line-height: 1.6 !important; }

  /* ── Slide 8 – CTA ── */
  #cta h2  { font-size: 1.2rem !important; }
  #cta a.inline-block { font-size: 0.7rem !important; padding: 10px 20px !important; }
  #cta .flex.flex-col.items-center { margin-top: 0.5rem !important; gap: 8px !important; }
  #cta .flex.items-center.gap-10 { gap: 1.2rem !important; }
}

/* ── Tablet / móvil ancho en landscape (hasta 1024px) ── */
@media (max-width: 1023px) and (orientation: landscape) {

  /* Footer compacto */
  footer.fixed {
    padding: 6px 20px !important;
  }

  /* Contenedor padre: relativo para centrar el bloque central */
  footer .flex.items-center.justify-between {
    position: relative !important;
  }

  /* Bloque central: centrado absolutamente en pantalla */
  footer .flex.lg\:hidden.flex-col.items-center {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-align: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
  }

  /* Bloque central del footer: reducir tamaño en landscape */
  footer .flex.lg\:hidden.flex-col.items-center p,
  footer .flex.lg\:hidden.flex-col.items-center p a {
    font-size: 11px !important;
  }

  /* Dots y progress bar por encima del footer compacto */
  #dots { bottom: 62px !important; }
  #slide-progress { bottom: 50px !important; }

  /* Chevrones: subidos respecto al centro de la pantalla */
  #prev-btn, #next-btn {
    top: 50% !important;
    transform: translateY(-80%) !important;
  }

  /* Slide 1: limitar ancho del bloque de texto */
  #slide-home .slide-content {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-bottom: 3rem !important;
    margin-top: -40px !important;
  }
  #slide-home img { height: 70px !important; }
  #slide-home h2  { font-size: 1.3rem !important; margin-bottom: 0.4rem !important; }
  #slide-home p   { font-size: 0.95rem !important; max-width: 460px !important; margin-left: auto !important; margin-right: auto !important; }

  /* Slide 2: limitar ancho, aumentar texto, reducir interlineado */
  #about .relative.z-10 {
    max-width: 420px !important;
    margin-right: 4rem !important;
    padding: 0 1rem !important;
    text-align: right !important;
  }
  #about h2 {
    font-size: 1.8rem !important;
    line-height: 1.15 !important;
    margin-bottom: 0.6rem !important;
  }
  #about p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.5rem !important;
  }

  /* Slide 3 – Services: reducir ancho para no tocar los chevrones */
  #partnership .relative.z-10 {
    max-width: 680px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #partnership h2 { font-size: 2rem !important; margin-bottom: 0.6rem !important; }
  #partnership .grid { gap: 10px !important; }
  #partnership .grid > div { padding: 14px 16px !important; }
  #partnership h3 { font-size: 1.3rem !important; margin-bottom: 4px !important; }
  #partnership p  { font-size: 1rem !important; }

  /* Slide 6 – Value Propositions: reducir ancho para no tocar los chevrones */
  #value .relative.z-10 {
    max-width: 760px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  #value h2 { font-size: 2rem !important; margin-bottom: 0.6rem !important; }
  #value .grid { gap: 10px !important; }
  #value .grid > div { padding: 12px 14px !important; }
  #value h3 { font-size: 1.1rem !important; }
  #value .value-title-wrap { min-height: 3rem !important; padding-bottom: 0.5rem !important; }
  #value ul li { font-size: 0.9rem !important; }

  /* Slide 5 – Why C95 Creative */
  #why h2 {
    font-size: 3rem !important;
    margin-bottom: 2rem !important;
  }
  #why ul {
    gap: 0 !important;
  }
  #why li {
    font-size: 1.6rem !important;
    margin-bottom: 0.35rem !important;
  }
  #why ul.space-y-5 > * + * {
    margin-top: 0.35rem !important;
  }

  /* Slide 4 – Global Partnerships: centrado, texto más grande, con borde */
  #how {
    align-items: center !important;
    justify-content: center !important;
  }
  #how .relative.z-10 {
    margin-left: 0 !important;
    padding-top: 0 !important;
    max-width: 100% !important;
    text-align: center !important;
  }
  #how h2 {
    font-size: 3.5rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: -2px -2px 0 #003366, 2px -2px 0 #003366, -2px 2px 0 #003366, 2px 2px 0 #003366, 0 -2px 0 #003366, 0 2px 0 #003366, -2px 0 0 #003366, 2px 0 0 #003366 !important;
  }
  #how p {
    font-size: 1.8rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: -1px -1px 0 #003366, 1px -1px 0 #003366, -1px 1px 0 #003366, 1px 1px 0 #003366, 0 -1px 0 #003366, 0 1px 0 #003366, -1px 0 0 #003366, 1px 0 0 #003366 !important;
  }
}

/* ── Tablet landscape (min-height para excluir móviles pequeños) ── */
@media (max-width: 1023px) and (orientation: landscape) and (min-height: 501px) {
  #how h2 {
    font-size: 3.5rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: -2px -2px 0 #003366, 2px -2px 0 #003366, -2px 2px 0 #003366, 2px 2px 0 #003366, 0 -2px 0 #003366, 0 2px 0 #003366, -2px 0 0 #003366, 2px 0 0 #003366 !important;
  }
  #how p {
    font-size: 1.8rem !important;
    text-align: center !important;
    color: #ffffff !important;
    text-shadow: -1px -1px 0 #003366, 1px -1px 0 #003366, -1px 1px 0 #003366, 1px 1px 0 #003366, 0 -1px 0 #003366, 0 1px 0 #003366, -1px 0 0 #003366, 1px 0 0 #003366 !important;
  }
  #why h2 {
    font-size: 3rem !important;
    margin-bottom: 2rem !important;
  }
  #why li {
    font-size: 1.6rem !important;
    margin-bottom: 0.35rem !important;
  }
  #why ul.space-y-5 > * + * {
    margin-top: 0.35rem !important;
  }
}

/* ── Móvil landscape ─────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {

  /* Footer: una sola fila ultrafina */
  footer.fixed {
    padding: 4px 14px !important;
  }
  footer .flex.items-center.justify-between {
    flex-direction: row !important;
    align-items: center !important;
    gap: 6px !important;
    position: relative !important;
  }

  /* Logo más pequeño */
  footer .flex.lg\:hidden.flex-col.items-start img { height: 20px !important; }
  footer .flex.lg\:hidden.flex-col.items-start a   { font-size: 7px !important; }

  /* Tel + email en una sola línea, centrado en pantalla */
  footer .flex.lg\:hidden.flex-col.items-center {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    flex-direction: row !important;
    gap: 8px !important;
    pointer-events: auto !important;
  }
  footer .flex.lg\:hidden.flex-col.items-center p {
    font-size: 9px !important;
    margin: 0 !important;
  }

  /* Iconos sociales más pequeños */
  footer .flex.lg\:hidden.flex-col.items-end .flex.items-center a i {
    font-size: 11px !important;
  }

  /* Dots más cerca del footer */
  #dots { bottom: 56px !important; }
  #slide-progress { bottom: 46px !important; }

  /* Chevrones subidos y más pequeños */
  #prev-btn, #next-btn {
    display: flex !important;
    width: 32px !important;
    height: 32px !important;
    top: 50% !important;
    transform: translateY(-80%) !important;
  }

  /* Slides: reducir márgenes y fuentes para caber en pantalla baja */
  #slide-home .slide-content { margin-top: -20px !important; padding-bottom: 2rem !important; }
  #slide-home img { height: 50px !important; }
  #slide-home h2  { font-size: 1.4rem !important; margin-bottom: 1rem !important; }
  #slide-home p   { font-size: 1rem !important; }

  #about .relative.z-10 { margin-top: 50px !important; }
  #about h2 { font-size: 1.1rem !important; margin-bottom: 0.3rem !important; }
  #about p  { font-size: 0.8rem !important; margin-bottom: 0.2rem !important; }

  #partnership h2 { font-size: 1.2rem !important; margin-bottom: 0.3rem !important; }
  #partnership .grid { gap: 4px !important; }
  #partnership .grid > div { padding: 6px 10px !important; }
  #partnership h3 { font-size: 0.85rem !important; margin-bottom: 2px !important; }
  #partnership p  { font-size: 0.72rem !important; }

  #how .relative.z-10 { padding-top: 0 !important; }
  #how h2 { font-size: 1.1rem !important; }
  #how p  { font-size: 1rem !important; }

  #why .relative.z-10 { margin-top: -10px !important; }
  #why h2 { font-size: 1.4rem !important; margin-bottom: 2rem !important; }
  #why li { font-size: 0.82rem !important; margin: 0.25rem 0 !important; line-height: 1.8rem !important; }


  #value h2 { font-size: 1.1rem !important; margin-bottom: 0.3rem !important; }
  #value .grid { grid-template-columns: repeat(4, 1fr) !important; gap: 4px !important; }
  #value .grid > div { padding: 6px 8px !important; }
  #value h3 { font-size: 0.78rem !important; }
  #value .value-title-wrap { min-height: 1.5rem !important; padding-bottom: 0.25rem !important; }
  #value ul li { font-size: 0.7rem !important; }

  #how-we-work .relative.z-10 { padding: 0 16px !important; }
  #how-we-work h2 { font-size: 1.3rem !important; margin-bottom: 0.4rem !important; }
  #how-we-work p  { font-size: 0.9rem !important; line-height: 1.4 !important; }

  #cta h2  { font-size: 0.9rem !important; }
  #cta a.inline-block { font-size: 0.62rem !important; padding: 7px 16px !important; }
  #cta .flex.flex-col.items-center { gap: 5px !important; margin-top: 0 !important; }
  #cta .flex.items-center.gap-10 { gap: 1rem !important; }
}