/* =========================================
   ESTILOS PÁGINA: HOME
   ========================================= */

/* ─────────── HERO — FULL WIDTH SPLIT ─────────── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-top: 64px;
  width: 100%;       /* Asegura que ocupe todo el ancho */
  max-width: none;   /* Quitamos el límite anterior */
  margin: 0;         /* Quitamos el centrado del contenedor */
  /* Fondo dividido: Blanco a la izquierda (50%), Gris a la derecha (50%) */
  background: linear-gradient(to right, #ffffff 50%, #fafafa 50%);
}


.hero-left {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-end;
  text-align: right; 
  padding: 80px 80px 80px 40px; 
  border-right: 1px solid rgba(0,0,0,0.07);
  /* Añadimos este padding dinámico para mantener el aire a la izquierda */
  padding-left: calc((100vw - 1360px) / 2); 
}

.hero-h1 {
  font-size: clamp(3rem, 5vw, 5.2rem); font-weight: 300; letter-spacing: -.04em;
  line-height: 0.95; color: #1d1d1f; margin-bottom: 36px;
}
.hero-h1 strong { font-weight: 600; display: block; }
.hero-h1 em { font-style: normal; font-weight: 500; color: #00A87A; display: block; }
.hero-p {
  font-size: 1.05rem; color: #4a4a4e; line-height: 1.6; font-weight: 300;
  max-width: 460px; margin-bottom: 52px; margin-left: auto;
}
.hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 24px; }


.hero-right {
  display: flex; flex-direction: column; justify-content: center;
  padding: 80px 40px 80px 80px; 
  position: relative; 
  overflow: visible; /* Asegúrate de que no esté en hidden */
  background: transparent; /* IMPORTANTE: Quitamos el fondo sólido de aquí */
  /* Añadimos este padding dinámico para mantener el aire a la derecha */
  padding-right: calc((100vw - 1360px) / 2);
}

/* 3. Añade este nuevo bloque de código al final de tu CSS */
/* Este pseudo-elemento crea el fondo que se extiende hasta el borde */
.hero-right::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 100vw; /* Un ancho masivo para cubrir el resto de la pantalla */
  left: 100%;   /* Lo posiciona justo al terminar la columna derecha */
  background: #fafafa; /* El mismo color de fondo */
}

@media (max-width: 1440px) {
  .hero-left { padding-left: 40px; }
  .hero-right { padding-right: 40px; }
}

@media (max-width: 960px) {
  .hero { 
    /* En móvil es mejor un fondo de un solo color o arriba/abajo */
    background: #ffffff; 
  }
}


.hero-visual { position:relative; }
.stat-block {
  background:#fff; border:1px solid rgba(0,0,0,0.08); border-radius:16px; padding:28px 32px;
  margin-bottom:12px; opacity:0; transform:translateX(20px); animation: slideIn .5s ease forwards;
}
.stat-block:nth-child(2) { animation-delay:.1s; }
.stat-block:nth-child(3) { animation-delay:.2s; }
@keyframes slideIn { to { opacity:1; transform:translateX(0); } }
.stat-block-label { font-size:.68rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#646464; margin-bottom:10px; }
.stat-block-value { font-size:2.4rem; font-weight:200; letter-spacing:-.04em; color:#1d1d1f; line-height:1; }
.stat-block-value span { color:#00A87A; font-weight:500; }
.stat-block-sub { font-size:.78rem; color:#686868; margin-top:4px; font-weight:300; }
.hero-float-badge {
  position:absolute; bottom:-10px; right:0; background:#00A87A; color:#fff;
  font-size:.7rem; font-weight:500; letter-spacing:.05em; padding:10px 18px;
  border-radius:100px; white-space:nowrap; animation: slideIn .5s .3s ease forwards; opacity:0;
}

/* ─────────── MARQUEE STRIP ─────────── */
.strip {
  border-top: 1px solid rgba(0,0,0,0.07); 
  border-bottom: 1px solid rgba(0,0,0,0.07);
  padding: 8px 0; /* Mantiene la barra delgada */
  overflow: hidden; 
  background: #fafafa;
  display: flex; /* Mantiene a los dos grupos en una sola línea horizontal */
}

.strip-content {
  display: flex;
  flex-shrink: 0; /* Evita que los logos se aplasten */
  align-items: center;
  gap: 32px;
  padding-right: 64px; /* IMPORTANTE: Simula el espacio del final para que el clon empalme perfecto sin saltos */
  animation: marquee 30s linear infinite; /* 30s para que no vaya tan rápido, ajusta a tu gusto */
}

.strip-logo {
  height: 72px; /* Logos grandes */
  width: auto;
  object-fit: contain;
  vertical-align: middle;
  opacity: 0.8; 
  transition: opacity 0.3s ease;
}

.strip-logo:hover {
  opacity: 1;
}

.strip-item { 
  font-size: 1.2rem; /* Puntos un poco más grandes para balancear con los logos */
  font-weight: 500; 
  letter-spacing: .08em; 
  text-transform: uppercase; 
  color: #c0c0c0; 
  white-space: nowrap; 
  display: flex;
  align-items: center;
}

.strip-item.accent { 
  color: #00A87A; 
}

/* La magia matemática: movemos el contenedor exactamente el 100% de su propio ancho */
@keyframes marquee { 
  from { transform: translateX(0); } 
  to { transform: translateX(-100%); } 
}

/* ─────────── FEATURE BENTO ─────────── */
.bento-section { padding:120px 56px; max-width:1160px; margin:0 auto; }
.bento { display:grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap:12px; }
.bento-card {
  background:#fafafa; border:1px solid rgba(0,0,0,0.07); border-radius:20px; padding:40px;
  transition:border-color .25s, box-shadow .25s;
}
.bento-card:hover { border-color:rgba(0,168,122,.2); box-shadow:0 8px 40px rgba(0,168,122,.06); }
.b1 { grid-column:span 5; }
.b2 { grid-column:span 7; }
.b3 { grid-column:span 7; }
.b4 { grid-column:span 5; }
.bento-icon { width:44px; height:44px; background:rgba(0,168,122,.08); border-radius:12px; display:flex; align-items:center; justify-content:center; margin-bottom:28px; font-size:1.2rem; }
.bento-h3 { font-size:1.1rem; font-weight:500; letter-spacing:-.02em; margin-bottom:10px; }
.bento-p { font-size:.83rem; color:#4a4a4e; line-height:1.65; font-weight:300; }
.bento-big-num { font-size:4rem; font-weight:200; letter-spacing:-.05em; color:#1d1d1f; margin-bottom:4px; line-height:1; }
.bento-big-num span { color:#00A87A; }

/* =========================================
   ESTILOS FALTANTES AÑADIDOS
   ========================================= */

/* ─────────── PRODUCT (FINORA) ─────────── */
.product-section {
  border-top:1px solid rgba(0,0,0,0.07);
  background:#fafafa;
}
.product-inner {
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
}
.product-left {
  padding:100px 72px 100px 56px;
  border-right:1px solid rgba(0,0,0,0.07);
}
.product-badge {
  display:inline-flex; align-items:center; gap:6px;
  font-size:.66rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#00A87A; margin-bottom:20px;
}
.live-dot {
  width:6px; height:6px; background:#00A87A;
  border-radius:50%;
  animation:pulse 2s infinite;
}
@keyframes pulse {
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.5;transform:scale(.7)}
}
.product-name {
  font-size:3.6rem; font-weight:200; letter-spacing:-.05em;
  line-height:.95; margin-bottom:20px;
}
.product-name strong { font-weight:500; color:#00A87A; display:block; }
.product-tagline {
  font-size:1rem; color:#4a4a4e; font-weight:300;
  line-height:1.65; max-width:340px; margin-bottom:48px;
}
.feature-rows { margin-bottom:48px; }
.feat-row {
  display:flex; align-items:flex-start; gap:16px;
  padding:16px 0;
  border-bottom:1px solid rgba(0,0,0,0.06);
}
.feat-row:first-child { border-top:1px solid rgba(0,0,0,0.06); }
.feat-num {
  font-size:.68rem; font-weight:600; color:#646464;
  letter-spacing:.06em; width:24px; flex-shrink:0; padding-top:2px;
}
.feat-text { font-size:.88rem; color:#1d1d1f; line-height:1.5; }
.feat-text small {
  display:block; font-size:.75rem;
  color:#646464; font-weight:300; margin-top:2px;
}
.product-right {
  padding:100px 56px 100px 72px;
  display:flex; flex-direction:column; justify-content:center;
}
.problem-label {
  font-size:.68rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:#646464; margin-bottom:28px;
}
.problem-cards { display:flex; flex-direction:column; gap:10px; }
.prob-card {
  background:#fff; border:1px solid rgba(0,0,0,0.07);
  border-radius:12px; padding:20px 24px;
  display:flex; align-items:center; gap:16px;
  transition:border-color .2s;
}
.prob-card:hover { border-color:rgba(0,0,0,0.16); }
.prob-icon {
  width:32px; height:32px; background:rgba(255,59,48,.07);
  border-radius:8px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0;
  font-size:.7rem; color:#ff3b30; font-weight:700;
}
.prob-text { font-size:.85rem; color:#1d1d1f; font-weight:400; }
.product-cta { margin-top:48px; }

/* ─────────── CONTACT SECTION (HOME) ─────────── */
.contact-section {
  border-top:1px solid rgba(0,0,0,0.07);
  padding:120px 56px;
  max-width:1160px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr; gap:80px;
  align-items:center;
}
.contact-left .big-text {
  font-size:clamp(2rem,4.5vw,4rem);
  font-weight:200; letter-spacing:-.04em; line-height:1.08;
  margin-bottom:20px;
}
.contact-left .big-text strong { font-weight:500; }
.contact-left p {
  font-size:.9rem; color:#4a4a4e; line-height:1.7;
  font-weight:300; max-width:340px; margin-bottom:40px;
}
.contact-right {
  display:flex; flex-direction:column; gap:20px;
}
.contact-item {
  padding:28px 32px;
  border:1px solid rgba(0,0,0,0.08); border-radius:16px;
  display:flex; align-items:center; gap:20px;
  transition:border-color .2s, box-shadow .2s;
  text-decoration:none; color:inherit;
}
.contact-item:hover {
  border-color:rgba(0,168,122,.25);
  box-shadow:0 4px 24px rgba(0,168,122,.06);
}
.contact-icon {
  width:40px; height:40px; background:#fafafa;
  border:1px solid rgba(0,0,0,0.07);
  border-radius:10px; display:flex; align-items:center;
  justify-content:center; font-size:1rem; flex-shrink:0;
}
.contact-detail small {
  display:block; font-size:.68rem; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:#646464;
  margin-bottom:4px;
}
.contact-detail span { font-size:.88rem; color:#1d1d1f; }


/* ─────────── RESPONSIVE (HOME) ─────────── */
@media(max-width:960px){
  .hero { grid-template-columns:1fr; min-height:auto; }
  .hero-left { padding:80px 28px 60px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.07); }
  .hero-right { padding:48px 28px; }
  .bento-section { padding:80px 24px; }
  .bento { grid-template-columns:1fr 1fr; }
  .b1,.b2,.b3,.b4 { grid-column:span 1; }
  /* Reglas añadidas */
  .product-inner { grid-template-columns:1fr; }
  .product-left { padding:72px 28px 48px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.07); }
  .product-right { padding:48px 28px 72px; }
  .contact-section { grid-template-columns:1fr; gap:40px; padding:80px 28px; }
}
@media(max-width:540px){
  .bento { grid-template-columns:1fr; }
  .hero-h1 { font-size:2.6rem; }
}

/* ─────────── RESPONSIVE (HOME) ─────────── */
@media(max-width:960px){
  .hero { 
    grid-template-columns: 1fr; 
    min-height: auto; 
    background: #ffffff; /* Fondo sólido en móvil */
  }

  .hero-left { 
    /* Cambiamos alineaciones de derecha a IZQUIERDA */
    align-items: flex-start; 
    text-align: left; 
    
    padding: 60px 24px; /* Ajuste de aire en móvil */
    border-right: none; 
    border-bottom: 1px solid rgba(0,0,0,0.07);
  }

  .hero-p {
    /* Quitamos el margin-left: auto que lo empujaba a la derecha */
    margin-left: 0;
    margin-right: auto;
  }

  .hero-actions {
    /* Alineamos los botones a la izquierda */
    justify-content: flex-start;
  }

  .hero-right { 
    padding: 48px 24px; 
  }
  
  /* Reset de padding dinámico de desktop para que no falle en pantallas chicas */
  .hero-left, .hero-right {
    padding-left: 24px;
    padding-right: 24px;
  }

  .product-inner { grid-template-columns:1fr; }
  .product-left { padding:72px 28px 48px; border-right:none; border-bottom:1px solid rgba(0,0,0,0.07); }
  .product-right { padding:48px 28px 72px; }
  .contact-section { grid-template-columns:1fr; gap:40px; padding:80px 28px; }

  .break-mobile {
        display: block; /* Esto fuerza a que 'hoy.' baje a la siguiente línea */
        margin-top: 5px; /* Opcional: un poquito de aire arriba de la palabra */
    }
}

@media(max-width:540px){
  .bento { grid-template-columns:1fr; }
  .hero-h1 { font-size: 2.4rem; } /* Un poco más pequeño para que quepa bien */
}