/* ========= Variables + Grid (12 col, 1366 / 32 / 48) ========= */
*{ box-sizing: border-box; }
:root{
  --max:1366px; --gutter:32px; --margin:48px;
  --text:#0E1F51; --muted:#0174B7; --brand:#0b63d1; --accent:#0a74c9;
  --border:#e4ebf2; --bg:#fff; --bg-alt:#f6f9fc; --shadow:0 10px 24px rgba(0,0,0,.12);
}
html,body{ height:100% }
body{ margin:0; font-family: "Mulish", Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.6; }

.container{ max-width:var(--max); margin-inline:auto; padding-inline:var(--margin);}
.grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gutter); }

/* ========= Header (sticky) ========= */
.site-header{ 
  position:fixed; left:0; right:0; width:100%; 
  top:0; z-index:50; 
  background:rgba(255,255,255,.9); 
  backdrop-filter:blur(8px); border-bottom:1px solid var(--border); transition:box-shadow .25s ease; height: 80px; padding-top: 8px;}
.site-header.scrolled{ box-shadow:0 6px 16px rgba(0,0,0,.06); }

.brand{ display:flex; align-items:center; }
.brand-logo{ height:64px; width:auto; }

.nav{ align-self:center; }
.nav-list{ display:flex; gap:24px; justify-content:center; list-style:none; margin:0; padding:0; }
.nav-list a{ color:var(--text); text-decoration:none; font-weight:500; position:relative; }
.nav-list a:is(:hover,:focus-visible){ color:var(--brand); outline: none; }
.nav-list a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-10px; height:2px; background:var(--brand); }

.header-cta{ display:flex; align-items:center; justify-content:flex-end; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:999px; text-decoration:none; border:1px solid var(--border); transition:transform .15s ease, box-shadow .2s ease; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 14px rgba(11,99,209,.18); }
.btn-primary{ background:var(--brand); color:#fff; border-color:transparent; }
.btn-outline{ background:#fff; }
.btn-link{ padding:.6rem .2rem; border:0; color:var(--accent); background:transparent; }

/* Hamburguesa + Overlay */
.hamburger{ display:none; position:absolute; right:16px; top:14px; width:46px; height:46px; border:1px solid var(--border); border-radius:12px; background:#fff; align-items:center; justify-content:center; gap:5px; }
.hamburger span{ width:22px; height:2px; background:var(--text); display:block; transition:.2s; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-overlay{ position:fixed; inset:0; background:rgba(255,255,255,.86); backdrop-filter:blur(6px); z-index:60; display:grid; place-items:start; /*padding:88px var(--margin) 32px;*/ }
.mobile-overlay[hidden]{ display:none; }
.mobile-nav ul{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
.mobile-nav a{ font-size:1.15rem; text-decoration:none; color:var(--text); }
.mobile-nav a:hover{ color:var(--brand); }

@media (max-width:900px){
  .nav{ display:none; }
  .header-cta{ display:none; }
  .hamburger{ display:flex; }
}

/* ========= Hero ========= */
.hero{ position:relative; padding:32px 0 16px; scroll-margin-top:90px; background: url(assets/img/hero_polvos.jpg) no-repeat; background-size: contain; background-position: right; min-height: 650px;}
.hero-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:var(--gutter); position:relative; z-index:2; min-height:260px; }
.eyebrow{ color:var(--muted); font-weight:700; margin-bottom: 0; }
.hero-title{ font-size:clamp(1.6rem,3.6vw,2.6rem); margin:8px 0 12px; }
.hero-actions{ display:flex; gap:16px; align-items:center; }
.accent{ color:var(--brand); }
/* Hero art (placeholder) */
.hero-art{ position:relative; margin-top:-60px; height:clamp(240px,42vw,520px); border-radius:20px; background:url('assets/img/hero.png') center/cover no-repeat;}

/* ========= Secciones ========= */
.section{ padding:80px 0; }
.subtitle{ text-align:center; margin:6px 0 24px; font-size:clamp(1.4rem,2.2vw,1.8rem); font-weight:600; }
.qs-head .eyebrow, .title h2{ color:#0080ff; letter-spacing:.02em; text-align:center; }
.title h3{ text-align:center; font-weight:600; margin-top:8px; }

/* Quiénes / Equipo */
.qs {
  background: var(--bg-alt);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.qs .grid > *{ text-align:left; }
.qs-media img{ width:100%; height:auto; display:block; border-radius:18px; /*box-shadow:var(--shadow);*/ }
.lead{ margin:0 0 16px; }
.h3{ margin:18px 0 10px; font-size:1.8rem; }
.qs-items{ list-style:none; padding:0; margin:10px 0 0; display:grid; gap:16px; }
.qs-item{ display:grid; grid-template-columns:40px 1fr; gap:12px; align-items:start; }
.qs-icon{ /*width:40px; height:40px; border-radius:50%; background:#d9e8fb; border:2px solid #b5d0f8;*/ }

/* Franja apoyo */
.support{ /*background:var(--bg-alt);*/ padding:20px 0; margin-top:24px; /*border-top:1px solid var(--border); border-bottom:1px solid var(--border);*/ }
.logo-badge{ display:inline-flex; align-items:center; justify-content:center; height:56px; min-width:120px; padding:0 16px; margin-right:12px; background:#fff; border:1px solid var(--border); border-radius:12px; color:#637b93; font-weight:700; }

/* Beneficios */
.beneficios {background-image: url('assets/img/Shape-632.png'); background-repeat: no-repeat; background-position: right;} 
.beneficios .grid{ grid-template-columns:repeat(12, minmax(0,1fr)); }
.beneficio{ text-align:center; padding:16px; transition:transform .18s ease, box-shadow .18s ease; }
/*.beneficio:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }*/
.icon.placeholder{ /*width:64px;*/ height:136px; margin:0 auto; border-radius:12px; /*background:#0a74c9;*/ opacity:.85; background-image: url('assets/img/shape.png');     background-repeat: no-repeat; background-position: center;place-content: center; }
.quote{ margin-top:48px; text-align:center; }
.quote p { font-size: 1.5rem; line-height: 40px;}
.quote .highlight{ color:#00b359; font-weight:700; }
.quote .quote-mark{ color:#0a74c9; font-weight:700; font-size:1.2rem; }

/* Aplicaciones layout */
.apps{ padding:56px 0 72px; }
.apps-head{ text-align:center; margin-bottom:32px; }
.apps-grid{ display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); /*gap:var(--gutter);*/ }
.card{ position:relative; overflow:hidden; border-radius:14px; box-shadow:var(--shadow); line-height:0;padding: 0;margin: 0; max-height: 224px;}
.card img{ width:100%; height:100%; object-fit:cover; display:block; aspect-ratio:315/210; }
.card.large img{ aspect-ratio:635/315; }
.card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25)); }
.card figcaption{ position:absolute; top:24px; right:24px; color:#fff; font-weight:800; letter-spacing:.04em; text-shadow:0 1px 2px rgba(0,0,0,.5); font-size: 1.125rem; }

/* Contacto */
.contacto .muted{ color:var(--muted); text-align:left; }
.contacto-info .subtitle{ text-align:left; margin-bottom:8px; }
.row{ display:grid; grid-template-columns:1fr; gap:var(--gutter); }
.field{ display:grid; gap:6px; margin-bottom: 24px; }
label{ font-weight:600; font-size: 0.875rem; }
input, textarea{ width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); }

/* Footer */
.site-footer{ padding-top:16px; border-top:1px solid var(--border); }
.footer-top{ align-items:center; padding-block:24px; }
.f-title{ margin:0 0 8px; font-size:.95rem; }
.social-list{ display:flex; gap:12px; padding:0; margin:6px 0 0; list-style:none; }
.social-list .ico, .ico-mail, .ico-pin{ display:inline-block; background:#e6eef7; border:1px solid var(--border); border-radius:50%; }
.social-list .ico{ width:28px; height:28px; }
.ico-mail, .ico-pin{ width:18px; height:18px; vertical-align:-3px; margin-right:8px; }
.award-badge{ width:80px; height:80px; border-radius:50%; /*background:#e6f7eb; border:1px solid #bfe5cc; background: url(assets/img/avonni_sello.png) no-repeat; background-size: contain;*/ display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.footer-bottom{ background:#0c2c4b; color:#dfeaf6; text-align:center; padding:10px 0; font-size:.9rem; }

/* ========= Microinteracciones / Motion ========= */
@media (prefers-reduced-motion:no-preference){
  .reveal-up{ opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
  .reveal-up.is-visible{ opacity:1; transform:none; }
}

/* ========= Responsivo ========= */
@media (min-width:840px){ .row{ grid-template-columns:1fr 1fr; } }

@media (max-width:1024px){
  /* Aplicaciones: 6 col en tablet */
  .apps-grid{ grid-template-columns:repeat(6, 1fr); }
  .card[style*="grid-column: 4 / span 3"]{ grid-column:1 / span 3; }
  .card[style*="grid-column: 7 / span 6"]{ grid-column:4 / span 3; }
  .card[style*="grid-column: 1 / span 3"]{ grid-column:1 / span 3; }
  .card[style*="grid-column: 4 / span 3"]:not(.zanahoria){ grid-column:4 / span 3; }
  .card[style*="grid-column: 7 / span 3"]{ grid-column:1 / span 3; }
}

@media (max-width:560px){
  .container{ padding-inline:24px; }
  .hero-art{ height:clamp(200px,55vw,420px); margin-top:-30px; }
}

h4.item-title {
  padding: 0;
  margin: 0;
  font-size: 1.2rem;
}
.qs-item-content p {
  margin-top: 0;
}

/* === Apilar columnas en tablet/móvil para secciones de texto+media === */
@media (max-width: 920px){
  /* Quiénes, Equipo, Contacto */
  #quienes-somos .grid > *,
  #equipo .grid > *,
  #contacto .grid > * {
    grid-column: 1 / -1 !important;
  }
  .subtitle,
  .contacto-info .subtitle { text-align: center; }
}

/* === Beneficios: 2 columnas en tablet, 1 columna en móvil === */
@media (max-width: 1024px){
  #beneficios .container.grid { grid-template-columns: repeat(6, 1fr); }
  #beneficios .container.grid > * { grid-column: span 3; }
  #beneficios .container.grid > header { grid-column: 1 / -1; }
  #beneficios .quote { grid-column: 1 / -1; }
}
@media (max-width: 600px){
  #beneficios .container.grid { grid-template-columns: 1fr; }
  #beneficios .container.grid > * { grid-column: 1 / -1 !important; }
}

/* === Aplicaciones ya la mapeas a 6 col; forzamos 1 col en móviles chicos === */
@media (max-width: 560px){
  .apps-grid { grid-template-columns: 1fr; }
  .apps-grid > * { grid-column: 1 / -1 !important; }
}

.title-head h2 {
  margin-bottom: 0;
}
.title-head {
  margin-bottom: 64px;
}
article.beneficio .icon.placeholder i.fa-solid {
  font-size: 4.5rem;
  color: #0174B7;
}

article.beneficio h4 {
  font-size: 1.313rem;
}

nav.mobile-nav {
  padding: 48px 24px;
  background-color: white;
  width: 100%;
}

/* ===== Menú móvil: barra superior dentro del overlay ===== */
.mobile-top{
  position: sticky;
  top: 0;
  z-index: 1;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--margin);
  width: 100%;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
.mobile-top .brand-logo{ height: 48px; }
.mobile-close{
  width: 44px; height: 44px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
}
.mobile-close i, .hamburger i{ font-size: 20px; color: var(--text); }

/* ===== Desde tablet a abajo: 1 columna en todo el main ===== */
@media (max-width: 920px){
  /* Cubre cualquier bloque con grid-column inline en las secciones del main */
  main .section .grid > [style*="grid-column"]{ grid-column: 1 / -1 !important; }

  /* Hero */
  .hero{ min-height: auto; padding-top: 24px; }
  .hero-grid{ grid-template-columns: 1fr; }
  .hero-copy{ grid-column: 1 / -1 !important; padding: 24px !important; }
  .hero{ background-size: cover; background-position: center; }

  /* Beneficios: ya haces 2 col a 1024; aquí reforzamos 1 col en tablet chica */
  #beneficios .container.grid{ grid-template-columns: 1fr; }
  #beneficios .container.grid > *{ grid-column: 1 / -1 !important; }

  /* Contacto: apilar */
  .row{ grid-template-columns: 1fr; }
}

/* Un poco más compacto en móviles pequeños */
@media (max-width: 560px){
  .brand-logo{ height: 56px; }
  .container{ padding-inline: 24px; }
}


/* ====== Fixed header offset ====== */
body.with-fixed-header{ padding-top: 88px; } /* header 80 + padding */


/* ====== Support strip ====== */
.support{ /*background: var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border);*/ }
.support-grid{ align-items: center; }

/* ====== Footer ====== */
.site-footer{ background:#fff; color:#0E1F51; padding: 48px 0; }
.site-footer a{ color:#0E1F51; text-decoration: none; }
.footer-bottom{ background:#071230; color:#fff; text-align:center; padding:16px; }

/* ====== Responsive stackers ====== */
@media (max-width: 1024px){
  .nav-list{ display:none; }
  .hamburger{ display:inline-flex; }
  .support-grid{ grid-template-columns: 1fr 1fr; }
  .site-footer .footer-top{ grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px){
  .support-grid{ grid-template-columns: 1fr !important; }
  .support-grid > *{ grid-column: 1 / -1 !important; }
  .site-footer .footer-top{ grid-template-columns: 1fr !important; }
  .site-footer .footer-top > *{ grid-column: 1 / -1 !important; }
  .eyebrow {text-align: center;}

  .footer-top.grid {
    justify-content: center;
    text-align: center;}
  ul.social-list {
    justify-content: center;
    }
    .f-award{place-items: center;}
}

/* Ensure mobile menu overlay is above fixed header */
.mobile-menu{ z-index: 100; }
.site-header{ z-index: 90; }