/* home.css v9 */

.home-body { background:var(--c-g1); }

/* Desktop: full viewport */
.home-body .page-wrapper {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.home-body .page-main { flex:1; min-height:0; overflow:hidden; }
.home-body .site-footer { flex-shrink:0; }

.carousel {
  width:100%; height:100%;
  position:relative; overflow:hidden;
  background:var(--c-g1); user-select:none; touch-action:pan-y;
}
.slide-track {
  display:flex; height:100%;
  transition:transform .55s cubic-bezier(.4,0,.2,1); will-change:transform;
}
.slide { width:100%; height:100%; flex-shrink:0; position:relative; overflow:hidden; }

/* ── SLIDE 1 — DESKTOP ONLY: slideone-escritorio.png ── */
.slide-1 {
  background-image: url('../assets/images/slideone-escritorio.png');
  background-size: cover;
  background-position: center top;
  display:flex; align-items:flex-end;
  padding: 3rem clamp(1.5rem,5vw,5rem) 3.5rem;
}
.s1-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 55%, transparent 100%);
  pointer-events:none;
}
.s1-content {
  position:relative; z-index:1;
  display:flex; flex-direction:column; gap:1.75rem; max-width:520px;
}
.s1-tagline {
  font-family:'Raleway',sans-serif; font-weight:800;
  font-size:clamp(2.5rem,6vw,4.5rem);
  color:#EB5D27; letter-spacing:.04em; line-height:1.05;
  text-shadow:0 2px 24px rgba(0,0,0,.80);
}
.s1-cta {
  display:inline-flex; align-items:center;
  background:transparent; border:2.5px solid #fff; color:#fff;
  font-family:var(--f-display); font-weight:700; font-size:1rem;
  padding:.875rem 2.75rem; border-radius:var(--pill);
  text-transform:uppercase; letter-spacing:.15em;
  transition:background .2s,border-color .2s,color .2s; width:fit-content;
}
.s1-cta:hover { background:rgba(255,255,255,.12); border-color:var(--c-orange); color:var(--c-orange); }

/* ── SLIDE 2 ── */
.slide-2 { display:flex; flex-direction:column; height:100%; }
.s2-top { flex:1; display:flex; flex-direction:row; min-height:0; }

.s2-left {
  background-image:url('../assets/images/left-compartir1@3x.png');
  background-size:cover; background-position:center;
  flex:1; position:relative;
  display:flex; flex-direction:column; justify-content:flex-end;
  gap:.75rem; padding:1.75rem 1.25rem; cursor:pointer;
}
.s2-left-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.78),rgba(0,0,0,.1) 60%);
  pointer-events:none;
}
.s2-left-content { position:relative; z-index:1; display:flex; flex-direction:column; gap:.5rem; }
.s2-tag { display:inline-flex; align-items:center; gap:.35rem; background:var(--c-orange); border-radius:var(--pill); padding:.3rem .75rem; font-size:.65rem; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#fff; }
.s2-cta { border:var(--bos); background:transparent; color:var(--c-orange); font-family:var(--f-display); font-size:.8125rem; font-weight:600; border-radius:var(--pill); padding:.35rem .875rem; width:fit-content; transition:background .2s; }
.s2-cta:hover { background:var(--c-o15); }

.index-imag-td {
	vertical-align: bottom;
	text-align: left;
	background-repeat: no-repeat; 
	background-position: center; 
	background-size: cover;
}

.index-imag-td:hover {
  cursor: pointer;
  filter:brightness(.78);
}


.s2-right { flex:1;}
.s2-card-title { font-family:var(--f-title); font-size:.9375rem; color:#fff; line-height:1.3; padding-left:11px; }
.s2-card-sub   { font-size:.625rem; color:var(--c-lgray); margin-top:.1rem; padding-left:12px; padding-bottom:17px;}

/* Robot strip — posición relativa para los videos absolutos */
.s2-robot-strip {
  height:50%; flex-shrink:0; background:#000;
  overflow:hidden; position:relative; cursor:pointer;
}
.s2-robot-strip .s2-vid-desktop,
.s2-robot-strip .s2-vid-mobile {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  display:block;
}
/* Por defecto: desktop visible, mobile oculto */
.s2-robot-strip .s2-vid-mobile { display:none; }

/* Nav controles */
.car-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.55); border:1px solid var(--c-o30); width:38px; height:38px; border-radius:50%; z-index:10; display:flex; align-items:center; justify-content:center; transition:background .2s; }
.car-btn:hover { background:var(--c-o40); }
.car-btn img { width:18px; height:18px; }
.car-btn.prev { left:.75rem; }
.car-btn.next { right:.75rem; }
.car-dots { position:absolute; bottom:.75rem; left:50%; transform:translateX(-50%); display:flex; gap:.625rem; z-index:10; }
.dot { width:9px; height:9px; border-radius:50%; background:var(--c-w40); transition:background .3s; border:none; cursor:pointer; }
.dot.active { background:var(--c-orange); }

/* ══════════ RESPONSIVE MÓVIL ══════════ */
@media (max-width:768px) {
  /* Sin min-height vacío — elimina bloque gris */
  .home-body .page-wrapper { height:auto; overflow:visible; min-height:0; }
  .home-body .page-main    { overflow:visible; flex:none; min-height:0; }
  .carousel  { height:auto; overflow:hidden; }
  .slide-track { height:auto; }
  .slide { height:auto; }

  /* Slide 1 MÓVIL — cubre todo el slide sin espacio negro */
  .slide-1 {
    background-image: url('../assets/images/slidespace-onemobile.jpg');
    background-size: cover;
    background-position: center center;
    background-color: var(--c-g1);
    background-repeat: no-repeat;
    /* min-height asegura que imagen llene el slide y se vea letrero + tornamesa */
    min-height: 72vw;
    padding: 1rem 1.25rem 1.75rem;
    align-items: flex-end;
  }
  .s1-tagline { font-size:clamp(1.5rem,5.5vw,2.25rem); }
  .s1-cta { font-size:.8125rem; padding:.65rem 1.5rem; }

  /* Slide 2 tablet */
  .slide-2 { height:auto; }
  .s2-top { flex-direction:column; height:auto; }
  .s2-left { min-height:180px; flex:none; }
  .s2-right { flex:none; min-height:150px; flex-direction:row; }
  .s2-card  { min-height:150px; }
  .s2-robot-strip { height:220px; }

  /* Móvil: esconder desktop video, mostrar mobile video */
  .s2-robot-strip .s2-vid-desktop { display:none; }
  .s2-robot-strip .s2-vid-mobile  { display:block; }
}

@media (max-width:480px) {
  .slide-1 { padding:.875rem 1rem 1.25rem; }
  .s1-tagline { font-size:clamp(1.35rem,6vw,2rem); }
  .s1-cta { font-size:.75rem; padding:.55rem 1.25rem; }
  .s2-left  { min-height:150px; }
  .s2-right { flex-direction:column; }
  .s2-card  { min-height:110px; flex:none; }
  .s2-robot-strip { height:190px; }
  .car-btn  { width:30px; height:30px; }
  .car-btn img { width:13px; height:13px; }
  .car-dots { bottom:.5rem; }
  .dot { width:7px; height:7px; }
}

/* ══════════════════════════════════
   HOME — relleno completo en 412-430 px
   El footer crece para cubrir el espacio del viewport
   y eliminar el fondo oscuro del body debajo de él.
══════════════════════════════════ */
@media (min-width: 411px) and (max-width: 431px) {
  .home-body .page-wrapper {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  /* El footer recibe el espacio sobrante */
  .home-body .site-footer {
    flex: 1;
    padding-bottom: 2rem;
  }
}