/* ============================================================
   Xkale — Sitio en transformación
   Paleta y tipografía según el Manual de Marca Xkale v.02
   ============================================================ */

:root{
  --verde-planta:#6BD63D;
  --negro:#000000;
  --negro-carbon:#0A0C0A;   /* fondo del hero, negro con un matiz verdoso */
  --blanco:#FFFFFF;
  --gris-escudo:#D1DBCC;
  --display:"Public Sans", system-ui, sans-serif;
  --cuerpo:"Crimson Text", Georgia, serif;
}

*{ box-sizing:border-box; margin:; padding:0; }

html,body{ height:100%; }

body{
  background:var(--negro);
  color:var(--blanco);
  font-family:var(--cuerpo);
  min-height:100vh;
  overflow-x:hidden;
}

/* ---- Hero a pantalla completa ---- */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:64px 48px;
  overflow:hidden;
}

.hero__inner{
  position:relative;
  z-index:1;
  width:100%;
  max-width:1280px;
  margin:0 auto;
}

.contenido{ max-width:640px; }

/* ---- Logotipo ---- */
.logo{
  display:block;
  height:140px;
  width:auto;
  margin-bottom:56px;
}

/* ---- Título ---- */
.titulo{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(2.8rem, 7vw, 5.5rem);
  line-height:0.98;             /* leading negativo */
  letter-spacing:-0.03em;
  color:var(--blanco);
  margin-bottom:36px;
}
.titulo .destacado{ color:var(--verde-planta); }

/* ---- Cuerpos de texto (Public Sans, como en la foto) ---- */
.cuerpo{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.05rem, 1.6vw, 1.25rem);
  line-height:1.5;
  color:var(--gris-escudo);
  max-width:560px;
}
.cuerpo + .cuerpo{ margin-top:22px; }

/* ---- Botones de acción ---- */
.acciones{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:44px;
}
.btn{
  font-family:var(--display);
  font-weight:700;
  font-size:1rem;
  letter-spacing:0.01em;
  padding:16px 40px;
  border:2px solid var(--verde-planta);
  border-radius:10px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:background .2s ease, color .2s ease, transform .15s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primario{
  background:var(--verde-planta);
  color:var(--negro);
}
.btn--primario:hover,
.btn--primario:focus-visible{
  background:#7ee053;
}
.btn--linea{
  background:transparent;
  color:var(--blanco);
  border-radius:10px;
}
.btn--linea:hover,
.btn--linea:focus-visible{
  background:var(--verde-planta);
  color:var(--negro);
}

/* ---- Panel de contacto ---- */
.contacto-panel{
  display:flex;
  flex-wrap:wrap;
  gap:14px 40px;
  margin-top:30px;
  padding:22px 26px;
  border:1px solid rgba(209,219,204,0.35);
  border-radius:10px;
  max-width:560px;
  background:rgba(0,0,0,0.25);
}
.contacto-panel[hidden]{ display:none; }
.contacto-item{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--display);
  font-weight:500;
  font-size:1.05rem;
  color:var(--blanco);
  text-decoration:none;
  transition:color .2s ease;
}
.contacto-item:hover,
.contacto-item:focus-visible{ color:var(--verde-planta); }
.contacto-item svg{
  width:26px;
  height:26px;
  stroke:var(--verde-planta);
  flex:none;
}

/* ---- Barras verdes animadas (recurso de marca extraído del logotipo) ---- */
.barras{
  position:relative;
  width:100%;
  height:clamp(90px, 9vw, 140px);
  margin-top:clamp(32px, 4vw, 44px);
  overflow:hidden;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(107,214,61,0.0)   0px,
      rgba(107,214,61,0.85)  2px,
      rgba(107,214,61,0.1)   5px,
      rgba(0,0,0,0.9)        9px,
      rgba(107,214,61,0.55)  13px,
      rgba(178,166,87,0.4)   17px,
      rgba(0,0,0,0.6)        21px,
      rgba(107,214,61,0.9)   25px
    );
  background-size:200% 100%;
  animation:desliza 14s linear infinite;
}
.barras::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--negro) 0%, transparent 14%, transparent 86%, var(--negro) 100%);
}
@keyframes desliza{
  from{ background-position:0 0; }
  to{ background-position:200% 0; }
}

/* ---- Pie ---- */
.pie{
  position:absolute;
  left:48px;
  bottom:28px;
  z-index:1;
  font-family:var(--display);
  font-size:0.78rem;
  letter-spacing:0.02em;
  color:var(--gris-escudo);
  margin-top: 10px;
}

/* ---- Responsive ---- */

/* Pantallas de poca altura (laptops ~768-820px): compactar ritmo vertical
   para que las barras y el pie no queden cortados bajo el pliegue.
   padding-bottom debe ser mayor que el `bottom` del `.pie` (28px) más su
   propio alto de línea, o el pie queda montado sobre las barras. */
@media (max-height:820px){
  .hero{ padding-top:36px; padding-bottom:56px; }
  .logo{
        margin-bottom:32px;

    }
  .titulo{ margin-bottom:24px; }
  .acciones{ margin-top:28px; }
}

@media (max-width:640px){
  .hero{ padding:40px 24px 88px; }
  .logo{ height:72px; margin-bottom:40px; }
  .acciones{ gap:12px; }
  .btn{ width:100%; justify-content:center; }
  .pie{ left:24px; bottom:24px; }
}

/* ---- Accesibilidad ---- */
:focus-visible{ outline:2px solid var(--verde-planta); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .btn{ transition:none; }
  .barras{ animation:none; }
}