/* ——— LATAMIT PATCH (solo estilos, sin tocar HTML) ——— */

/* 1) Tamaño del logo (ajusta a tu gusto) */
:root { --logo-h: 56px; }       /* 48px, 56px, 64px... */
.brand .logo-img {
  height: var(--logo-h);
  width: auto;
  max-width: 220px;             /* seguridad en móvil */
}

/* 2) Evitar scroll horizontal en móvil */
html, body { overflow-x: hidden; }

/* 3) Fila de partners/tecnologías con salto de línea (antes podía desbordar) */
.trust { 
  display: flex; 
  flex-wrap: wrap; 
  gap: 10px 12px; 
  align-items: center; 
  justify-content: flex-start; 
}

/* 4) Código del hero: no romper el layout en pantallas pequeñas */
.hero pre, pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;         /* permite saltos de línea */
  word-break: break-word;
}

/* 5) Header compacto si agrandas mucho el logo */
.nav { padding: 8px 0; }         /* si ves el header muy alto, baja este valor */

/* 6) Ajustes móviles */
@media (max-width: 520px) {
  .domain-row { grid-template-columns: 1fr; }  /* Input arriba, botón abajo */
  .actions { flex-wrap: wrap; }
  .btn { padding: 10px 12px; }
  .title { font-size: clamp(26px, 7vw, 36px); }
}
/* ——— Clientes (Carrusel) ——— */
/* Seleccionamos por atributo para evitar escapar los : del id */
[id=":R1hb:"] { 
  padding: 40px 0; 
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--card) 70%, transparent);
}

[id=":R1hb:"] .marquee { position: relative; overflow: hidden; }
[id=":R1hb:"] .marquee-inner {
  display: flex; align-items: center; gap: 18px;
  width: max-content; will-change: transform;
  animation: logos-scroll var(--logos-speed, 28s) linear infinite;
}

/* Tarjeta/logo */
[id=":R1hb:"] .client-item {
  display: grid; place-items: center; height: 72px; min-width: 160px;
  padding: 0 14px; border: 1px solid var(--border); border-radius: 25px;
  /* background: color-mix(in oklab, var(--bg) 92%, transparent); */
  background: linear-gradient(135deg, var(--accent), var(--accent-2));

}

/* A COLOR por defecto; en gris solo al hover */
[id=":R1hb:"] .client-item img {
  max-height: 36px; max-width: 140px;
  opacity: .95;
  filter: grayscale(0) contrast(1.05);
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}
[id=":R1hb:"] .client-item img:hover {
  opacity: .75;           /* baja un poco para marcar el hover */
  filter: grayscale(1);   /* gris solo al hover */
  transform: none;
}

/* Pausar al pasar el cursor */
[id=":R1hb:"] .marquee:hover .marquee-inner { animation-play-state: paused; }

/* Respeto a “reducir movimiento” del SO */
@media (prefers-reduced-motion: reduce) {
  [id=":R1hb:"] .marquee-inner { animation: none; }
}

/* Responsive */
@media (max-width: 640px) {
  [id=":R1hb:"] .client-item { height: 64px; min-width: 140px; }
}

/* Animación del loop (duplicamos logos para que cierre perfecto) */
@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* —— Layout 2 columnas solo para el card de Datos cuando tenga la figura —— */
#contacto .grid-3 > .card:has(.contact-figure--side){
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px); /* datos | imagen */
  gap: 12px 16px;
}

/* Títulos, texto auxiliar y botones a lo ancho */
#contacto .grid-3 > .card:has(.contact-figure--side) h3,
#contacto .grid-3 > .card:has(.contact-figure--side) .help,
#contacto .grid-3 > .card:has(.contact-figure--side) .cta-row{
  grid-column: 1 / -1;
}

/* La lista a la columna izquierda */
#contacto .grid-3 > .card:has(.contact-figure--side) .list{
  grid-column: 1;
  margin: 0;
}

/* La imagen a la derecha */
#contacto .grid-3 > .card:has(.contact-figure--side) .contact-figure--side{
  grid-column: 2;
  align-self: auto;
  margin: 0;
  
  
  overflow: hidden;
 
}
#contacto .grid-3 > .card:has(.contact-figure--side) .contact-figure--side img{
  display: inline-block;
  width: 70%;
  height: auto;
  object-fit: auto;     /* recorte suave si la imagen es alta */
  max-height: 250px;     /* ajusta a tu gusto */
}
/* Responsive: en móvil se apilan */
@media (max-width: 760px){
  #contacto .grid-3 > .card:has(.contact-figure--side){
    grid-template-columns: 1fr;
  }
  #contacto .grid-3 > .card:has(.contact-figure--side) .contact-figure--side img{
    max-height: 200px;
  }
}

/* Efecto de cursor */
#typewriter::after {
  content: '|';
  display: inline-block;
  margin-left: 4px;
  animation: blink 0.7s infinite;
  color: var(--accent); /* mismo color del tema */
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

#codeBlock {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  white-space: pre-wrap;
  word-break: break-word;

  /* 🔒 Tamaño fijo estilo terminal */
  height: 420px;       /* ajusta a tu gusto */
  max-height: 420px;
  min-height: 420px;

  overflow-y: auto;    /* scroll vertical interno */
  overflow-x: hidden;  /* sin scroll horizontal */
}

#codeBlock::after {
  content: '▋';
  margin-left: 3px;
  color: var(--accent-2);
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

#codeBlock .comment { color: #9ca3af; }

/* —— Fondo en video —— */
.video-bg{
  position: fixed; inset: 0; z-index: -2; overflow: hidden;
}
.video-bg video{
  position: absolute; top: 50%; left: 50%;
  min-width: 100%; min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  filter: brightness(.45); /* oscurece un poco para legibilidad */
}

/* Si el usuario prefiere menos movimiento o ahorro de datos, oculta el video */
@media (prefers-reduced-motion: reduce){
  .video-bg video{ display:none; }
}

/* (Opcional) Capa extra para efecto vignette/sutil gradiente
.video-overlay{
  position: fixed; inset:0; z-index:-1;
  pointer-events: none;
  background: radial-gradient(1200px 600px at 70% -10%, rgba(34,211,238,.10), transparent 60%),
              radial-gradient(800px 500px at -10% 10%, rgba(59,130,246,.10), transparent 60%);
}
*/
/* Quita los gradientes de fondo del body para que se vea el video */
body{
  background: transparent !important;
}

/* Apaga la superposición de partículas (si no la quieres encima del video) */
:root{ --particles-opacity: 0 !important; }
/* Coloca TODO el contenido por encima del video */
main, .page, .wrapper, .site, .container, .hero, header, #app {
  position: relative;
  z-index: 0; /* o 1 si tienes overlays */
}
body::before { z-index: -2 !important; }
html, body { background: transparent !important; }