:root{
  --brand:#195e30;
  --brand-dark:#124a26;
  --text:#111;
  --muted:#6b7280;
  --border:#e5e7eb;
}

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

body{
  font-family:'Inter', sans-serif;
  background:#fff;
  color:var(--text);
  min-height:100vh;
}

.icon{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-0.125em;
  flex-shrink:0;
}

.icon svg{
  display:block;
  width:100%;
  height:100%;
}

/* Fondo sutil (tamaños relativos al viewport en pantallas grandes) */
.bg-soft{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(900px 450px at 18% 30%, rgba(25,94,48,.08), transparent 55%),
    radial-gradient(700px 380px at 78% 25%, rgba(0,0,0,.05), transparent 60%),
    radial-gradient(900px 500px at 60% 85%, rgba(25,94,48,.06), transparent 60%);
  z-index:-1;
}

@media (min-width: 1600px){
  .bg-soft{
    background:
      radial-gradient(min(1100px, 55vw) min(520px, 32vh) at 18% 30%, rgba(25,94,48,.08), transparent 55%),
      radial-gradient(min(880px, 42vw) min(420px, 28vh) at 78% 25%, rgba(0,0,0,.05), transparent 60%),
      radial-gradient(min(1100px, 52vw) min(560px, 34vh) at 60% 85%, rgba(25,94,48,.06), transparent 60%);
  }
}

/* Layout */
.shell{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  padding:28px clamp(18px, 4vw, 56px);
}

/* Ancho de contenido: un poco más amplio en pantallas muy grandes */
.header,
.main,
.footer,
.notice-mobile{
  max-width:min(1100px, 100%);
}

/* Header: misma rejilla en todas las páginas (logo siempre misma celda; no depende de la altura del bloque derecho) */
.header{
  width:100%;
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:start;
  column-gap:14px;
  row-gap:0;

  padding-top:8px;
  padding-bottom:8px;
}

.header-brand{
  display:flex;
  align-items:flex-start;
  min-width:0;
}

.logo{
  flex-shrink:0;
}

.logo img{
  height:43px; /* <- tu tamaño */
  width:auto;
  display:block;
}

/* Mismo encuadre: logo como enlace (a.logo) o div.logo > a — evita desplazamiento por línea inline */
a.logo,
.logo > a{
  display:block;
  line-height:0;
  text-decoration:none;
  border-bottom:0;
  color:inherit;
}

a.logo:hover img,
.logo > a:hover img{
  opacity:.92;
}

.top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Botón WhatsApp superior */
.wa-top{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  text-decoration:none;
  font-size:14px;
  color:var(--text);
  transition:all .2s ease;
  background:#fff;
}

.wa-top .icon{
  font-size:18px;
  color:var(--brand);
}

.wa-top:hover{
  border-color:rgba(25,94,48,.45);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  transform:translateY(-1px);
}

/* Main */
.main{
  width:100%;
  margin:0 auto;
  flex:1;
  display:grid;
  align-items:center;
  padding:42px 0 18px;
}

/* Hero (base) */
.hero{
  display:grid;
  gap:18px;
  text-align:left;
}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  color:var(--muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.kicker .dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 6px rgba(25,94,48,.08);
}

h1{
  font-size:clamp(34px, 4vw, 56px);
  line-height:1.05;
  letter-spacing:-0.02em;
  font-weight:800;
}

h1 .brand{
  color:var(--brand);
}

.sub{
  font-size:clamp(16px, 1.35vw, 18px);
  line-height:1.6;
  color:#374151;
  max-width:52ch;
}

.rule{
  width:84px;
  height:2px;
  background:var(--brand);
  border-radius:999px;
  opacity:.95;
  margin-top:6px;
}

.ctas{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:10px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 18px;
  border-radius:14px;
  text-decoration:none;
  font-weight:600;
  transition:all .25s ease;
  border:1px solid transparent;
}

.btn-primary{
  background:var(--brand);
  color:#fff;
  box-shadow:0 14px 34px rgba(25,94,48,.22);
}

.btn-primary .icon{
  font-size:18px;
  color:#fff;
}

.btn-primary:hover{
  background:var(--brand-dark);
  transform:translateY(-1px);
  box-shadow:0 18px 44px rgba(25,94,48,.24);
}

.btn-ghost{
  background:#fff;
  color:var(--text);
  border-color:var(--border);
}

.btn-ghost:hover{
  border-color:rgba(25,94,48,.35);
  transform:translateY(-1px);
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.badge{
  font-size:13px;
  color:#374151;
  border:1px solid var(--border);
  background:#fff;
  border-radius:999px;
  padding:8px 12px;
}

/* Footer */
.footer{
  width:100%;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:18px 0 0;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:12px;
}

.footer a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}

.footer a:hover{
  color:var(--brand);
  border-bottom-color:rgba(25,94,48,.35);
}

.footer-links{
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

.coming{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--brand);
  background:rgba(25,94,48,.06);
  border:1px solid rgba(25,94,48,.18);
  padding:6px 10px;
  border-radius:8px;
  margin-top:8px;
}

/* =========================================
   HERO SPLIT (texto + imagen) — AJUSTADO
   ========================================= */

.hero-split{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items:center;
  gap:48px;
}

.hero-text{
  display:grid;
  gap:18px;
  max-width:640px;
}

.hero-text h1{
  font-size:clamp(32px, 3.3vw, 50px);
  line-height:1.06;
}

.hero-text .sub{
  max-width:44ch;
}

.hero-image{
  position:relative;
}

.hero-image:before{
  content:"";
  position:absolute;
  inset:-14px -14px -14px 18px;
  border-radius:30px;
  background: radial-gradient(500px 260px at 10% 50%, rgba(25,94,48,.10), transparent 70%);
  z-index:-1;
}

.hero-image img{
  width:100%;
  /* Escala en pantallas altas/anchas; en móvil lo fija el media query */
  height:clamp(360px, min(52vh, 30vw), 580px);
  object-fit:cover;
  border-radius:26px;
  box-shadow:0 18px 50px rgba(0,0,0,.12);
}

/* Responsive: 2 columnas hasta 900px y después stack */
@media (max-width:900px){
  .hero-split{
    grid-template-columns:1fr;
    gap:28px;
  }

  .hero-image{
    order:-1; /* imagen arriba */
  }

  .hero-image img{
    height:260px;
    border-radius:22px;
  }
}

/* =========================
   Header notice (inline + mobile)
   ========================= */

.header-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  justify-self:stretch;
  min-width:0;
}

.notice-inline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.notice-inline .notice-dot{
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 6px rgba(25,94,48,.10);
  flex:0 0 auto;
}

.notice-text{
  font-size:13px;
  color:#374151;
  white-space:nowrap;
}

.notice-close{
  background:none;
  border:none;
  cursor:pointer;
  font-size:14px;
  opacity:.55;
  padding:2px 6px;
  border-radius:8px;
  transition:.2s;
}
.notice-close:hover{
  opacity:1;
  background:rgba(0,0,0,.05);
}

.notice-mobile{
  display:none;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:14px;
  background:#f5f9f6;
  border:1px solid rgba(25,94,48,.20);
  color:#0f172a;
  font-size:13.5px;
  line-height:1.35;
  width:100%;
  margin:10px auto 0;
  box-shadow:0 10px 24px rgba(0,0,0,.05);
}

.notice-mobile .notice-content{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
}

.notice-mobile .notice-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 4px rgba(25,94,48,.12);
  flex:0 0 auto;
}

.notice-mobile .notice-msg{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.notice-mobile button{
  background:transparent;
  border:0;
  cursor:pointer;
  font-size:16px;
  padding:4px 6px;
  border-radius:8px;
  color:#0f172a;
  opacity:.7;
  flex:0 0 auto;
}

/* debajo de 900: escondemos inline y mostramos mobile */
@media (max-width:900px){
  .notice-inline{ display:none; }
  .notice-mobile{ display:flex; }
}

/* =========================
   MOBILE (≤640px) — UNIFICADO
   ========================= */
@media (max-width:640px){

  .shell{
    padding:20px 16px;
  }

  .header{
    align-items:start;
  }

  .logo img{
    height:36px;
  }

  .main{
    align-items:flex-start;
    padding:22px 0 16px;
  }

  .hero{
    gap:20px;
  }

  .kicker{
    font-size:12px;
    letter-spacing:.10em;
    margin-bottom:4px;
  }

  h1{
    font-size:32px;
    line-height:1.08;
    margin-bottom:4px;
  }

  .rule{
    width:60px;
    margin:6px 0 8px;
  }

  .sub{
    font-size:15px;
    line-height:1.6;
    max-width:34ch;
  }

  .ctas{
    flex-direction:column;
    align-items:stretch;
    margin-top:14px;
    gap:12px;
  }

  .btn{
    width:100%;
    justify-content:center;
    padding:16px;
    border-radius:14px;
  }

  .btn-primary .icon{
    font-size:19px;
  }

  .badges{
    margin-top:18px;
    gap:10px;
  }

  .badge{
    font-size:12px;
    padding:8px 12px;
  }

  .footer{
    flex-direction:column;
    align-items:flex-start;
    padding-top:18px;
    gap:10px;
  }

  .footer > div:last-child{
    width:100%;
    gap:10px;
  }

  .wa-top span.txt{ display:none; }
}

/* =========================
   TABLET (641px - 1024px)
   ========================= */
@media (min-width:641px) and (max-width:1024px){

  .shell{
    padding:32px 28px;
  }

  .main{
    padding:60px 0 30px;
  }

  .hero{
    gap:26px;
  }

  h1{
    font-size:46px;
    line-height:1.07;
  }

  .sub{
    font-size:17px;
    max-width:46ch;
  }

  .btn{
    padding:15px 22px;
  }

  .badges{
    gap:12px;
  }
}
.notice-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  text-decoration:none;
  background:rgba(25,94,48,.08);
  border:1px solid rgba(25,94,48,.18);
  color:var(--brand);
  transition:.2s ease;
}

.notice-pill .icon{
  font-size:13px;
}

.notice-pill:hover{
  background:var(--brand);
  color:#fff;
  transform:translateY(-1px);
}

.notice-pill.mobile{
  margin-left:auto;
}
/* =========================
   Reveal on scroll (progressive enhancement: .js-reveal en <html> vía <head>)
   ========================= */
.reveal{
  opacity: 1;
  transform: none;
}

.js-reveal .reveal{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .65s cubic-bezier(.2,.7,.2,1),
    transform .65s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
  transition-delay: var(--d, 0ms);
}

.js-reveal .reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .reveal,
  .js-reveal .reveal,
  .js-reveal .reveal.is-visible{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* Fix: notice mobile sin corte (wrap prolijo) */
@media (max-width:640px){
  .notice-mobile{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:10px;
  }

  .notice-mobile .notice-content{
    width:100%;
  }

  .notice-mobile .notice-msg{
    white-space:normal;      /* 👈 permite salto de línea */
    overflow:visible;
    text-overflow:clip;
    line-height:1.3;
  }

  /* CTA de Instagram abajo, prolijo */
  .notice-pill.mobile{
    margin-left:0;
    margin-top:2px;
  }
}

/* =========================
   PRO TOUCH: CTA shimmer
   ========================= */
.btn.btn-primary{
  position: relative;
  overflow: hidden;
}

.btn.btn-primary:after{
  content:"";
  position:absolute;
  top:-40%;
  left:0;
  width:42%;
  height:180%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  transform: translate3d(-100%, 0, 0) rotate(20deg);
  opacity: 0;
  animation: shine 7.5s ease-in-out infinite;
  pointer-events:none;
}

@keyframes shine{
  0%,72% { transform: translate3d(-100%, 0, 0) rotate(20deg); opacity:0; }
  76%    { transform: translate3d(40%, 0, 0) rotate(20deg); opacity:1; }
  100%   { transform: translate3d(280%, 0, 0) rotate(20deg); opacity:0; }
}

@media (prefers-reduced-motion: reduce){
  .btn.btn-primary:after{ animation: none; display:none; }
}

/* Pantallas grandes / 4K: más aire útil sin perder legibilidad */
@media (min-width: 1400px){
  .header,
  .main,
  .footer,
  .notice-mobile{
    max-width:min(1440px, 100%);
  }

  /* El hero queda bajo el header; sin centrar verticalmente en el viewport */
  .main{
    align-items:start;
    align-content:start;
    padding-top:clamp(28px, 4vh, 52px);
    padding-bottom:28px;
  }

  .hero-split{
    grid-template-columns: 1fr 1fr;
    gap:min(64px, 4vw);
  }

  .hero-text{
    max-width:760px;
  }
}

@media (min-width: 1800px){
  .header,
  .main,
  .footer,
  .notice-mobile{
    max-width:min(1640px, 100%);
  }

  .hero-split{
    gap:min(84px, 5vw);
  }

  .hero-image img{
    height:clamp(420px, min(58vh, 33vw), 680px);
  }

  .hero-text h1{
    font-size:clamp(34px, 2.8vw, 64px);
  }
}

@media (min-width: 2400px){
  .header,
  .main,
  .footer,
  .notice-mobile{
    max-width:min(1840px, 100%);
  }

  .hero-split{
    gap:min(110px, 5.5vw);
  }

  .hero-text{
    max-width:860px;
  }
}

/* =========================
   Página: material / descargas (prefijos .downloads-*, .download-*)
   ========================= */

.main.downloads-main{
  display:block;
  align-items:stretch;
  padding:42px 0 18px;
}

@media (min-width:641px) and (max-width:1024px){
  .main.downloads-main{
    padding:60px 0 30px;
  }
}

@media (min-width:1400px){
  .main.downloads-main{
    padding-top:clamp(28px, 4vh, 52px);
    padding-bottom:28px;
  }
}

.downloads-page{
  width:100%;
  max-width:100%;
}

.downloads-page__intro{
  margin-bottom:36px;
}

/* El intro reutiliza .hero-text del home (columna angosta); acá el ancho debe alinear con la grilla. */
.downloads-page__intro.hero-text{
  max-width:none;
  width:100%;
}

.downloads-page__intro.hero-text .sub{
  max-width:min(40ch, 100%);
}

.downloads-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

@media (min-width:901px){
  .downloads-grid{
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:24px;
  }
}

@media (max-width:900px) and (min-width:641px){
  .downloads-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:20px;
  }
}

.download-product-card{
  display:flex;
  flex-direction:column;
  min-height:100%;
  background:#fff;
  border:1px solid var(--border);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 12px 36px rgba(0,0,0,.05);
  transition:border-color .2s ease, box-shadow .2s ease;
}

.download-product-card:hover{
  border-color:rgba(25,94,48,.22);
  box-shadow:0 16px 44px rgba(0,0,0,.07);
}

.download-product-card__media{
  aspect-ratio:16 / 11;
  overflow:hidden;
  background:#e8eee9;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.download-product-card__media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.download-product-card__body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:16px 18px 18px;
  flex:1;
}

.download-product-card__name{
  font-size:1.125rem;
  font-weight:800;
  letter-spacing:-0.02em;
  color:var(--text);
  line-height:1.25;
}

.download-product-card__actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:stretch;
  margin-top:auto;
  padding-top:0;
  border-top:none;
}

.download-product-card__actions .download-product-card__btn{
  flex:1 1 calc(50% - 4px);
  min-width:0;
  justify-content:center;
  text-align:center;
}

.download-product-card__btn{
  padding:10px 14px;
  font-size:13px;
  border-radius:12px;
  gap:8px;
}

.download-product-card__btn.btn-primary .icon{
  font-size:15px;
}

/* Video aún no disponible (misma forma que el botón, sin enlace) */
.download-product-card__btn--pending-video{
  opacity:0.55;
  cursor:default;
  pointer-events:none;
  box-shadow:none;
}

.download-product-card__btn--pending-video.btn-primary:hover{
  background:var(--brand);
  transform:none;
  box-shadow:none;
}

.downloads-page .download-product-card__btn--pending-video.btn-primary:after{
  display:none;
}

/* Reveal: escalonado solo dentro de esta página */
.downloads-page .downloads-page__intro.reveal{ --d: 0ms; }
.downloads-page .download-product-card:nth-child(1).reveal{ --d: 40ms; }
.downloads-page .download-product-card:nth-child(2).reveal{ --d: 80ms; }
.downloads-page .download-product-card:nth-child(3).reveal{ --d: 120ms; }
.downloads-page .download-product-card:nth-child(4).reveal{ --d: 160ms; }
.downloads-page .download-product-card:nth-child(5).reveal{ --d: 200ms; }

@media (max-width:640px){
  .main.downloads-main{
    padding:22px 0 16px;
  }

  .downloads-page__intro{
    margin-bottom:28px;
  }

  .downloads-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .download-product-card__body{
    padding:16px 16px 18px;
  }

  .downloads-page .download-product-card__actions{
    flex-direction:column;
  }

  .downloads-page .download-product-card__actions .download-product-card__btn{
    width:100%;
    flex:1 1 auto;
    min-width:0;
    justify-content:center;
    padding:12px 12px;
  }
}

/* Página 404 (layout centrado; no afecta al resto del sitio) */
.page-404{
  text-align:center;
  justify-items:center;
  width:100%;
}

.page-404 .hero-text{
  margin-left:auto;
  margin-right:auto;
}

.page-404 .hero-text h1{
  font-size:clamp(28px, 3.5vw, 44px);
}

.page-404 .rule{
  margin-left:auto;
  margin-right:auto;
}

.page-404 .sub{
  margin-left:auto;
  margin-right:auto;
}

.page-404-redirect{
  font-size:15px;
  color:var(--muted);
}