/* Portada CHACOVA: solo dos cajas. Estilos propios. */
@font-face{font-family:"Michroma";src:url("../assets/fonts/Michroma-Regular.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Lexend";src:url("../assets/fonts/Lexend.ttf") format("truetype");font-weight:100 900;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;background:#F3F2EF}
body.home{
  margin:0;
  min-height:100%;
  min-height:100dvh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  background:#F3F2EF;
  color:#24282D;
  font-family:"Lexend",system-ui,sans-serif;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
.skip{position:absolute;left:-999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;z-index:20;background:#fff;padding:10px 14px;border-radius:8px}

.home-shell{
  --gap:clamp(12px,1.8vw,22px);
  --side:min(620px, calc((100dvh - 120px) / 1.08), calc((min(1280px, 100vw) - 94px) / 2));
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  min-height:100dvh;
  min-height:100svh;
}

.home-bar{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:0;
  width:calc(var(--side) * 2 + var(--gap));
  max-width:calc(100% - 32px);
  margin:0 auto;
  padding:max(16px,env(safe-area-inset-top)) 0 8px;
}

.home-cards{
  flex:1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:var(--gap);
  padding:8px clamp(16px,2.4vw,36px) max(18px,env(safe-area-inset-bottom));
  min-height:0;
  width:100%;
}

.card{
  flex:0 0 var(--side);
  width:var(--side);
  height:calc(var(--side) * 1.08);
  display:grid;
  grid-template-rows:1fr auto;
  min-width:0;
  min-height:0;
  background:#fff;
  border:1px solid #DAD7D0;
  border-radius:22px;
  overflow:hidden;
  color:#1F2023;
  outline:none;
  -webkit-tap-highlight-color:transparent;
}
@media (hover:hover) and (pointer:fine){
  .card{transition:border-color .2s,box-shadow .2s,transform .2s}
  .card:hover{border-color:#A8741A;box-shadow:0 18px 40px -28px rgba(31,32,35,.5);transform:translateY(-2px)}
}
.card:focus-visible{outline:3px solid #A8741A;outline-offset:3px}

.card-media{
  min-height:0;
  min-width:0;
  overflow:hidden;
  background:#ECEAE5;
  position:relative;
}
.card-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 58%;
}
.card--chart .card-media{background:#25262A}
.card--chart .card-media img{
  object-fit:contain;
  padding:0;
}

.card h1{
  margin:0;
  padding:18px 22px 20px;
  font-size:clamp(1.12rem,2.15vw,1.55rem);
  font-weight:500;
  line-height:1.25;
  letter-spacing:-.02em;
  text-wrap:balance;
  background:#fff;
  min-height:4.2em;
  display:flex;
  align-items:center;
}

/* Celular: una encima de la otra, las dos a la vista */
@media (max-width:699px){
  .home-shell{--side:auto}
  .home-bar{width:100%;max-width:none;padding:max(14px,env(safe-area-inset-top)) 16px 8px;gap:10px}
  .home-bar .logo-glow{width:62px;height:62px}
  .home-bar .logo-glow img{width:32px;height:32px}
  .home-bar .logo-glow::before{width:76px;height:76px}
  .home-cards{
    --side:auto;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:1fr 1fr;
    gap:12px;
    padding:0 14px max(14px,env(safe-area-inset-bottom));
    align-items:stretch;
  }
  .card{
    flex:none;
    width:100%;
    height:100%;
    border-radius:18px;
  }
  .card h1{
    font-size:clamp(1.15rem,5.2vw,1.38rem);
    padding:14px 16px 16px;
    min-height:0;
  }
}

/* Celular horizontal: una al lado de la otra, compacto */
@media (orientation:landscape) and (max-height:500px){
  .home-shell{--side:min(400px, calc((100dvh - 72px) / 1.02), calc((100vw - 48px) / 2));--gap:12px}
  .home-bar{width:calc(var(--side) * 2 + var(--gap));max-width:calc(100% - 24px);padding:max(8px,env(safe-area-inset-top)) 0 4px}
  .home-bar .logo-glow{width:54px;height:54px}
  .home-bar .logo-glow img{width:28px;height:28px}
  .home-bar .logo-glow::before{width:68px;height:68px}
  .home-cards{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    padding:0 14px max(10px,env(safe-area-inset-bottom));
  }
  .card{
    flex:0 0 var(--side);
    width:var(--side);
    height:calc(var(--side) * 1.02);
    border-radius:16px;
  }
  .card h1{font-size:1.02rem;padding:10px 14px 12px;min-height:0}
}

/* Isologo solo, con luz blanca tenue que palpita */
.logo-glow{
  position:relative;
  display:grid;
  place-items:center;
  width:84px;
  height:84px;
  flex:none;
  overflow:visible;
}
.logo-glow img{
  position:relative;
  z-index:1;
  width:40px;
  height:40px;
}
.logo-glow::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:78px;
  height:78px;
  border-radius:50%;
  background:#fff;
  filter:blur(14px);
  pointer-events:none;
  animation:logo-palpitar 2.8s ease-in-out infinite;
}
@keyframes logo-palpitar{
  0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(.75)}
  50%{opacity:.88;transform:translate(-50%,-50%) scale(1.08)}
}
@media (prefers-reduced-motion:reduce){
  .logo-glow::before{animation:none;opacity:.4;transform:translate(-50%,-50%) scale(1)}
}