/* Portada: todo en la primera pantalla, también en el celular.
   Arriba la principal: Cartelería (el cartel WhatsApp + Instagram + Google).
   Abajo, una al lado de la otra: Páginas web (menú digital, e-commerce, página web)
   y Sistemas (ventas, facturación, WhatsApp). */

.home-v2{--nav-h:78px;--hv-r:12px}

.hv-top{padding:calc(var(--nav-h) + 20px) 0 34px}
.hv-intro{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 24px;max-width:1020px;margin:0 auto 16px;display:flex}
.hv-intro .hv-wa{background:var(--wa-green-deep);color:var(--light);border:0;min-height:54px;margin:0;padding:0 26px;font-size:1rem;gap:10px;box-shadow:0 10px 26px oklch(63% .16 156/.35)}
.hv-intro .hv-wa:hover{background:oklch(56% .15 156)}
.hv-intro .hv-wa svg{flex:none;width:22px;height:22px}
.hv-intro h1{text-wrap:balance;max-width:620px;margin:0;font-size:clamp(1rem,1.7vw,1.4rem);font-weight:700;line-height:1.25}

.hv-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"main main" "web sys";gap:16px;max-width:1020px;margin:0 auto;display:grid}
.hv-main{grid-area:main}
#paginas-web{grid-area:web}
#sistemas{grid-area:sys}

/* Tarjetas: foto a la izquierda y texto a la derecha */
.hv-card{border:1px solid var(--border);border-radius:var(--hv-r);background:var(--card);box-shadow:0 10px 30px oklch(39% .11 266/.08);grid-template-columns:minmax(0,var(--media-w)) minmax(0,1fr);min-width:0;display:grid;overflow:hidden}
.hv-main{--media-w:290px}
.hv-mini{--media-w:44%}
.hv-media{border-right:1px solid var(--border);background:var(--muted);min-height:0;display:block;position:relative;overflow:hidden}
.hv-media img{object-fit:cover;width:100%;height:100%;transition:transform .3s;display:block;position:absolute;inset:0}
.hv-media:hover img{transform:scale(1.025)}
.hv-main .hv-media{aspect-ratio:1113/1197}
.hv-main .hv-media img{object-position:center 40%}
.hv-mini .hv-media img{object-position:left top}

.hv-body{flex-direction:column;justify-content:center;min-width:0;padding:22px 26px;display:flex}
.hv-body .eyebrow{align-items:center;gap:8px;display:inline-flex}
.hv-body .eyebrow svg{flex:none;width:16px;height:16px}
.hv-body h2{margin:6px 0 0;font-size:1.35rem;line-height:1.15}
.hv-main .hv-body h2{font-size:clamp(1.6rem,3vw,2.4rem)}
.hv-text{color:var(--muted-foreground);margin:12px 0 0;font-size:.95rem;line-height:1.55}

/* Chips: WhatsApp / Instagram / Google, Menú digital / E-commerce / Página web, Ventas / Facturación / WhatsApp */
.hv-chips{flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none;display:flex}
.hv-chips li{border:1px solid var(--border);background:var(--muted);color:var(--foreground);border-radius:999px;align-items:center;gap:6px;padding:4px 10px;font-size:.78rem;font-weight:700;line-height:1.2;display:inline-flex}
.hv-chips img{border-radius:5px;flex:none;width:20px;height:20px}
.hv-main .hv-chips{gap:8px;margin-top:14px}
.hv-main .hv-chips li{background:var(--card);padding:5px 12px 5px 6px;font-size:.88rem}
.hv-main .hv-chips img{width:24px;height:24px}

.hv-cta{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}
.hv-cta>a{flex:1 1 auto;height:auto;min-height:42px}
.hv-main .hv-cta{gap:10px;margin-top:20px}
.hv-main .hv-cta>a{flex:0 1 auto;min-height:46px;padding-inline:22px}

/* Pantallas de notebook bajas: que igual entre todo */
@media (width>700px) and (height<=780px){
  .hv-top{padding-top:calc(var(--nav-h) + 14px)}
  .hv-intro{margin-bottom:12px}
  .hv-main{--media-w:250px}
  .hv-grid{gap:12px}
  .hv-mini .hv-body{padding-block:16px}
}

/* ---- Celular: arriba Cartelería y abajo las dos chicas una al lado de la otra; todo entra en la pantalla ---- */
@media (width<=700px){
  .home-v2{--nav-h:68px}
  .hv-top{padding:calc(var(--nav-h) + 10px) 0 22px}
  .hv-intro{margin-bottom:10px}
  .hv-intro .hv-wa{width:100%;min-height:52px}
  /* la frase queda para Google y lectores de pantalla: arriba va "Contactanos por WhatsApp" */
  .hv-intro h1{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
  .hv-grid{gap:10px}

  .hv-main{--media-w:53%}
  .hv-main .hv-media{aspect-ratio:auto;min-height:226px}
  .hv-long{display:none}
  .hv-body{justify-content:flex-start;padding:12px}
  .hv-body .eyebrow{gap:6px;font-size:.6rem}
  .hv-body .eyebrow svg{width:14px;height:14px}
  .hv-main .hv-body h2{margin-top:4px;font-size:1.3rem}
  .hv-text{display:none}
  .hv-main .hv-chips{flex-direction:column;align-items:flex-start;gap:4px;margin-top:6px}
  .hv-main .hv-chips li{padding:2px 9px 2px 3px;font-size:.72rem}
  .hv-main .hv-chips img{width:20px;height:20px}
  .hv-main .hv-cta{flex-direction:column;gap:6px;margin-top:auto;padding-top:8px}
  .hv-main .hv-cta>a{flex:none;min-height:36px;padding:3px 8px;font-size:.78rem}

  /* Páginas web y Sistemas: foto arriba, título, chips y botones */
  .hv-mini{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .hv-mini .hv-media{aspect-ratio:16/8;border-bottom:1px solid var(--border);border-right:0}
  .hv-mini .hv-body{padding:8px 9px 9px}
  .hv-mini .hv-body h2{margin:0;font-size:1.05rem}
  .hv-mini .hv-chips{gap:3px;margin-top:5px}
  .hv-mini .hv-chips li{padding:2px 6px;font-size:.6rem}
  .hv-mini .hv-cta{flex-direction:column;gap:5px;margin-top:auto;padding-top:8px}
  .hv-mini .hv-cta>a{flex:none;min-height:32px;padding:2px 8px;font-size:.74rem}

}

/* Celulares de pantalla baja */
@media (width<=700px) and (height<=680px){
  .hv-main .hv-media{min-height:200px}
  .hv-mini .hv-media{aspect-ratio:16/6.5}
}

/* Chip largo de la tarjeta Páginas web: puede ocupar dos líneas sin quedar como una cápsula estirada */
.hv-chips li.hv-chip-long{border-radius:10px;padding:5px 10px;line-height:1.3}

/* Celular: en Cartelería entra el botón de precio mayorista; los chips quedan solo con los logos */
@media (width<=700px){
  .hv-main .hv-chips{flex-direction:row;gap:6px;margin-top:8px}
  .hv-main .hv-chips li{border-radius:9px;padding:3px}
  .hv-main .hv-chips img{width:26px;height:26px}
  .hv-main .hv-chip-txt{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}
}