/* flots · css/paginas/inicio.css
   Inicio (/) — Home (1440), MLlamada y MHome (390).
   Clases de la página: .inicio-… (home) y .llamada-… (overlay de llamada entrante). */

/* ==========================================================================
   Home
   ========================================================================== */

/* En desktop la página ocupa el alto de la pantalla y la ventana de servicios
   crece para llenarlo (artboard 1440×960). */
.inicio{
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - var(--alto-banner));
  min-height:calc(100svh - var(--alto-banner));
}

.inicio-main{
  position:relative;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  gap:28px;
  width:100%;
  max-width:1440px;
  margin-inline:auto;
  padding:8px var(--gutter) 88px;
}

.inicio-titulo{ outline:none; }
.inicio-sub{
  font-size:18px;
  line-height:1.55;
  color:var(--muted);
}

/* ---------- Ventana "flots / servicios" ---------- */
.inicio-ventana{
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border-radius:18px;
  box-shadow:var(--sombra-ventana);
  overflow:hidden;
}
.inicio-ventana-barra{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  border-bottom:1px solid var(--line-soft);
}
.inicio-punto{
  flex-shrink:0;
  width:12px;
  height:12px;
  border-radius:50%;
}
.inicio-punto-rojo{ background:var(--punto-rojo); }
.inicio-punto-amarillo{ background:var(--punto-amarillo); }
.inicio-punto-verde{ background:var(--punto-verde); }
.inicio-ventana-ruta{
  margin-left:16px;
  font-size:14px;
  line-height:1.2;
  color:var(--muted);
}

.inicio-ventana-cuerpo{
  flex-grow:1;
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(320px, 26.4vw, 380px);
}

/* ---------- Carpetas de servicio ---------- */
.inicio-carpetas{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  align-content:center;
  gap:16px;
  padding:24px 32px;
}
.inicio-carpeta{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  min-width:0;
  padding:16px 8px;
  border:0;
  border-radius:12px;
  background:transparent;
  font:inherit;
  color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.inicio-carpeta:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.inicio-carpeta-icono{
  display:flex;
  justify-content:center;
  width:100%;
}
.inicio-carpeta .carpeta-servicio{
  width:168px;
  max-width:100%;
  height:auto;
}
/* Levanta la carpeta al pasar el mouse (solo las no elegidas, como en el diseño) */
@media (hover: hover){
  .inicio-carpeta:hover .carpeta-servicio:not(.elegida){ transform:translateY(-6px); }
}
.inicio-carpeta:active .carpeta-servicio:not(.elegida){ transform:scale(.94); }
.inicio-carpeta-nombre{
  font-size:18px;
  font-weight:500;
  line-height:1.3;
  text-align:center;
}
.inicio-carpeta-desc{
  max-width:240px;
  font-size:13px;
  line-height:1.45;
  text-align:center;
  color:var(--muted);
}
.inicio-carpeta-estado{
  margin-top:auto;
  font-size:15px;
  font-weight:600;
  color:var(--accent);
}
.inicio-carpeta.elegida .inicio-carpeta-estado{ color:var(--muted); }

/* ---------- Carpeta "Tu proyecto" ---------- */
.inicio-proyecto{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-width:0;
  padding:24px 10px;
  border-left:1px solid var(--line-soft);
  background:var(--surface-2);
}

/* ---------- Pie ---------- */
.inicio-pie{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding-top:28px;
  border-top:1px solid var(--ink);
}
.inicio-pie-textos{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
}
.inicio-tiempo{ font-size:18px; line-height:1.3; }
.inicio-hablar{
  font-size:15px;
  line-height:1.45;
  color:var(--muted);
}
.inicio-hablar a{
  font-weight:500;
  color:var(--ink);
  text-underline-offset:2px;
}
.inicio-hablar a:hover{ color:var(--muted); }
.inicio-cta{ flex-shrink:0; }

.inicio-otra-vez{
  position:absolute;
  left:var(--gutter);
  bottom:32px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:14px;
  line-height:1.3;
  color:var(--muted);
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.inicio-otra-vez:hover{ color:var(--ink); }

/* ---------- Tablet: la carpeta del proyecto baja debajo de las carpetas ---------- */
@media (max-width: 1199px){
  .inicio-ventana-cuerpo{ grid-template-columns:minmax(0, 1fr); }
  .inicio-proyecto{
    padding:32px 16px 36px;
    border-left:0;
    border-top:1px solid var(--line-soft);
  }
}
@media (max-width: 959px){
  .inicio-carpetas{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* ---------- Celular (MHome) ---------- */
@media (max-width: 767px){
  .inicio{ min-height:0; }
  .inicio-main{
    flex:none;
    gap:20px;
    padding:12px 20px 120px;
  }
  .inicio-sub{ font-size:16px; line-height:1.5; }

  .inicio-ventana{
    flex:none;
    border-radius:16px;
    box-shadow:var(--sombra-ventana-celu);
  }
  .inicio-ventana-barra{ gap:6px; padding:12px 16px; }
  .inicio-punto{ width:10px; height:10px; }
  .inicio-ventana-ruta{ margin-left:10px; font-size:13px; }

  .inicio-carpetas{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    align-content:start;
    gap:4px;
    padding:12px;
  }
  .inicio-carpeta{ gap:8px; padding:12px 4px; }
  .inicio-carpeta .carpeta-servicio{ width:120px; transition-duration:.3s; }
  .inicio-carpeta-nombre{ font-size:16px; }
  .inicio-carpeta-desc{ font-size:12px; }
  .inicio-carpeta-estado{ font-size:14px; }

  .inicio-proyecto{ padding:20px 16px 24px; }

  .inicio-otra-vez{
    position:static;
    align-self:flex-start;
    font-size:13px;
  }

  /* Barra inferior fija (.barra-fija de componentes.css) */
  .inicio-barra .inicio-tiempo{
    font-size:14px;
    color:var(--muted);
  }
}

/* ==========================================================================
   Llamada entrante (overlay fijo sobre '/')
   ========================================================================== */
html.inicio-llamando,
html.inicio-llamando body{ overflow:hidden; }

.llamada{
  position:fixed;
  top:var(--alto-banner);
  right:0;
  bottom:0;
  left:0;
  z-index:50;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:calc(100vh - var(--alto-banner));
  min-height:calc(100svh - var(--alto-banner));
  padding:clamp(48px, 9.2vh, 88px) 24px clamp(48px, 10vh, 96px);
  overflow-x:hidden;
  overflow-y:auto;
  overscroll-behavior:contain;
  color:#FFFFFF;
  background:
    linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.12) 38%, rgba(13,13,13,.12) 62%, rgba(13,13,13,.5) 100%),
    #0D0D0D url("../../assets/llamada.jpg") center 40% / cover no-repeat;
}

.llamada-idioma{
  position:absolute;
  top:40px;
  right:var(--gutter);
  z-index:3;
}

.llamada-cabeza{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  text-align:center;
}
.llamada-marca{
  font-size:22px;
  font-weight:500;
  line-height:1.2;
  color:rgba(255,255,255,.8);
}
.llamada-titulo{
  margin:0;
  font-size:clamp(44px, 7vw, 84px);
  font-weight:600;
  line-height:1;
  letter-spacing:-0.035em;
  white-space:pre-line;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
  outline:none;
}

.llamada-base{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:44px;
  width:100%;
}

/* ---------- Escribir / Agendar ---------- */
.llamada-acciones{
  display:flex;
  justify-content:center;
  gap:360px;
}
.llamada-accion{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  font-size:20px;
  line-height:1.2;
  color:#FFFFFF;
  text-decoration:none;
  border-radius:8px;
}
.llamada-accion:hover{ color:#FFFFFF; }
.llamada-accion:focus-visible{ outline:2px solid #FFFFFF; outline-offset:6px; }
.llamada-accion-circulo{
  display:flex;
  align-items:center;
  justify-content:center;
  width:84px;
  height:84px;
  border-radius:50%;
  background:rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:#FFFFFF;
  transition:background-color .2s ease;
}
.llamada-accion:hover .llamada-accion-circulo{ background:rgba(255,255,255,.34); }

/* ---------- Deslizá para atender ---------- */
/* 602×114 con borde = 600×112 por dentro, como el artboard (maxX 488). */
.llamada-control{
  position:relative;
  width:602px;
  max-width:100%;
  height:114px;
}
.llamada-deslizador{
  position:relative;
  width:100%;
  height:100%;
  border:1px solid rgba(255,255,255,.4);
  border-radius:57px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  touch-action:none;
  -webkit-user-select:none;
  user-select:none;
  cursor:grab;
}
.llamada-deslizador.arrastrando{ cursor:grabbing; }
.llamada-pista{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding-left:90px;
  font-size:26px;
  line-height:1;
  white-space:nowrap;
  color:transparent;
  background:
    linear-gradient(90deg, rgba(29,29,27,.35) 0%, #1D1D1B 50%, rgba(29,29,27,.35) 100%) var(--shine-desde) 0 / 200px 100% no-repeat,
    rgba(29,29,27,.45);
  -webkit-background-clip:text;
  background-clip:text;
  animation:flotsShine 2.2s linear infinite;
  pointer-events:none;
}
.llamada-perilla{
  position:absolute;
  top:8px;
  left:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:96px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#FFFFFF;
  box-shadow:var(--sombra-perilla);
  color:var(--call-green);
  cursor:grab;
  touch-action:none;
  transition:transform .35s var(--ease-out);
}
.llamada-deslizador.arrastrando .llamada-perilla{ transition:none; cursor:grabbing; }
.llamada-perilla:focus-visible{ outline:3px solid var(--ink); outline-offset:3px; }

/* ---------- Atendida (celular): píldora "Entrar a flots" sobre la pista ---------- */
.llamada-entrar{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
  padding:0 28px 0 6px;
  border:1px solid rgba(255,255,255,.4);
  border-radius:57px;
  background:rgba(255,255,255,.62);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  font:inherit;
  color:var(--ink);
  text-align:left;
  cursor:pointer;
  animation:flotsIn .4s ease-out 1;
}
.llamada-entrar:focus-visible{ outline:3px solid #FFFFFF; outline-offset:3px; }
.llamada-entrar-icono{
  display:flex;
  flex-shrink:0;
  align-items:center;
  justify-content:center;
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--call-green);
  color:#FFFFFF;
}
.llamada-entrar-texto{
  flex-grow:1;
  min-width:0;
  font-size:20px;
  line-height:1.2;
}
.llamada-entrar-flecha{ font-size:22px; line-height:1; }

.llamada-sonar{
  margin-top:-20px;
  padding:0;
  border:0;
  background:none;
  font:inherit;
  font-size:14px;
  line-height:1.3;
  color:#FFFFFF;
  text-decoration:underline;
  text-underline-offset:2px;
  cursor:pointer;
}
.llamada-sonar:focus-visible{ outline:2px solid #FFFFFF; outline-offset:4px; }

/* ---------- Celular (MLlamada) ---------- */
@media (max-width: 767px){
  .llamada{
    gap:24px;
    padding:clamp(56px, 8.5svh, 72px) 24px clamp(32px, 6.6svh, 56px);
    background:
      linear-gradient(180deg, rgba(13,13,13,.55) 0%, rgba(13,13,13,.1) 38%, rgba(13,13,13,.1) 60%, rgba(13,13,13,.55) 100%),
      #0D0D0D url("../../assets/llamada.jpg") center 40% / cover no-repeat;
  }
  .llamada-idioma{ top:20px; right:20px; }

  .llamada-cabeza{ gap:10px; }
  .llamada-marca{
    font-size:17px;
    color:#FFFFFF;
    opacity:.85;
  }
  .llamada-titulo{
    font-size:44px;
    line-height:1.02;
    text-shadow:0 2px 20px rgba(0,0,0,.35);
  }

  .llamada-base{ gap:36px; }
  .llamada-acciones{
    justify-content:space-between;
    gap:16px;
    width:100%;
    padding:0 20px;
  }
  .llamada-accion{ gap:8px; font-size:15px; }
  .llamada-accion-circulo{ width:64px; height:64px; }
  .llamada-accion-circulo .icono{ width:24px; height:24px; }

  /* 344×86 con borde = 342×84 por dentro (maxX 258 al ancho del artboard). Como en el diseño,
     el borde puede asomar 1 px a cada lado de la columna de 342 (390 − 2 × 24). */
  .llamada-control{ width:344px; max-width:calc(100% + 2px); height:86px; }
  .llamada-deslizador{ border-radius:43px; cursor:auto; }
  .llamada-pista{
    padding-left:70px;
    font-size:20px;
    background-size:160px 100%;
  }
  .llamada-perilla{
    top:6px;
    left:6px;
    width:72px;
    height:72px;
    cursor:auto;
  }
  .llamada-perilla .icono{ width:32px; height:32px; }
  .llamada-entrar{ border-radius:43px; }
}

/* Pantallas bajas: se compacta la llamada para que entre sin scroll */
@media (min-width: 768px) and (max-height: 760px){
  .llamada{ gap:24px; }
  .llamada-titulo{ font-size:clamp(44px, 9vh, 84px); }
  .llamada-base{ gap:32px; }
}