/* =========================================================
   PUL Salud y Vida — Landing Styles (nivel pro)
   Tema oscuro elegante con oro/rojo, micro-animaciones
   ========================================================= */

/* ======= Tokens / Reset ======= */
:root{
  --dark:#0b0b0b;
  --dark-2:#121212;
  --card:#1a1a1a;
  --gold:#d4af37;      /* dorado elegante  */
  --red:#c62828;       /* rojo energía     */
  --text:#eaeaea;
  --muted:#bcbcbc;
  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%; display:block}

body{
  margin:0;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--dark);
}

.container{width:min(1200px, 100% - 32px); margin-inline:auto}

/* ======= Accesibilidad ======= */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:16px; top:16px; width:auto; height:auto; padding:8px 12px;
  background:var(--gold); color:#000; border-radius:8px; z-index:9999;
}

/* ======= Header / Nav ======= */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:#000; border-bottom:1px solid rgba(255,255,255,.08);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  background:rgba(0,0,0,.88);
  box-shadow:0 12px 34px rgba(0,0,0,.5);
  border-color:rgba(255,255,255,.12);
}
.nav-wrap{display:flex; align-items:center; gap:16px; min-height:68px}
.brand img{height:44px; width:auto}

/* Burger (CSS-only) */
.nav-toggle{display:none}
.nav-burger{margin-left:auto; display:none; width:38px; height:32px; cursor:pointer}
.nav-burger span{
  display:block; height:2px; margin:7px 0; background:var(--gold);
  transition:transform .25s ease, opacity .25s ease;
}

/* Nav list */
.main-nav{position:relative; z-index:1001;} /* sobre el héroe */
.main-nav ul{
  list-style:none; display:flex; gap:18px; margin:0; padding:0; margin-left:auto
}
.main-nav a{
  display:inline-block; color:#fff; text-decoration:none; font-weight:600; padding:10px 8px; position:relative;
  transition:color .25s ease, transform .25s ease;
}
.main-nav a::after{
  content:""; position:absolute; left:0; bottom:4px; height:2px; width:100%;
  background:var(--gold); transform:scaleX(0); transform-origin:right; transition:transform .3s ease;
}
.main-nav a:hover{color:var(--gold); transform:translateY(-1px)}
.main-nav a:hover::after{transform:scaleX(1); transform-origin:left}
.main-nav a.lock{opacity:.75}
.main-nav a.active{color:var(--gold)}
.main-nav a.active::after{transform:scaleX(1)}

/* ======= Hero ======= */
.hero{position:relative; min-height:74vh; display:grid; place-items:center; overflow:hidden; isolation:isolate}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05);
  transform:scale(1.02); transition:transform 8s ease-in-out;
}
.hero:hover .hero-media{transform:scale(1.08)}
.hero-overlay{position:absolute; inset:0; background:
  radial-gradient(1200px 600px at 20% 20%, rgba(212,175,55,.18), transparent 55%),
  linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.75));
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(6px 6px at 12% 14%, rgba(212,175,55,.28) 30%, transparent 31%) repeat,
    radial-gradient(5px 5px at 80% 30%, rgba(255,255,255,.04) 35%, transparent 36%) repeat;
  background-size: 220px 220px, 180px 180px;
  animation: drift 22s linear infinite;
  mix-blend-mode: screen; opacity:.35;
}
@keyframes drift { to { background-position: 220px 0, -180px 0; } }

.hero-content{position:relative; text-align:left; z-index:2}
.hero-content h1{font-size:clamp(32px,5vw,64px); margin:0 0 8px; color:var(--gold); letter-spacing:.5px}
.hero-content p{font-size:clamp(16px,2.5vw,22px); color:#fff; opacity:.9; margin:0 0 20px}

/* Botones */
.btn{
  display:inline-block; padding:12px 18px; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn-primary{
  background:var(--gold); color:#000;
  position:relative; overflow:hidden; isolation:isolate;
  box-shadow:0 16px 32px rgba(212,175,55,.25), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-primary:hover{background:var(--red); color:#fff; transform:translateY(-1px); box-shadow:var(--shadow)}
.btn-primary:active::after{
  content:""; position:absolute; left:var(--x,50%); top:var(--y,50%);
  width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.45);
  transform:translate(-50%,-50%) scale(1); animation:ripple .6s ease-out forwards;
}
@keyframes ripple { to{ transform:translate(-50%,-50%) scale(36); opacity:0 } }

/* ======= Secciones ======= */
.section{padding:64px 0; background:var(--dark)}
.section-light{background:var(--dark-2)}
.section h2{font-size:clamp(26px,3.2vw,36px); margin:0 0 10px; color:#fff}
.lead{color:var(--muted); max-width:860px}

/* Tarjetas base */
.card{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:20px; box-shadow:0 2px 12px rgba(0,0,0,.22);
}

/* Grids */
.grid{display:grid; gap:18px}
.grid-2{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3, minmax(0,1fr))}

/* Valores (iconografía) */
.values{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:14px; margin-top:18px}
.value{display:flex; align-items:center; gap:10px; background:#131313; border:1px solid rgba(255,255,255,.06); border-radius:999px; padding:10px 14px}
.icon-circle{
  width:34px; height:34px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), #f3d97a);
  color:#111; font-weight:bold;
}

/* Pasos / Oportunidad */
.steps{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; margin-top:14px}
.step{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:22px; text-align:center; box-shadow:0 2px 12px rgba(0,0,0,.22);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.step:hover{transform:translateY(-6px); box-shadow:0 14px 34px rgba(0,0,0,.35); border-color:rgba(212,175,55,.35)}
.step-icon{
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center; margin-inline:auto 10px; margin-bottom:8px;
  background:linear-gradient(135deg, var(--gold), #f3d97a); color:#111; font-size:28px; font-weight:700;
}

/* Cita */
.quote{
  margin:26px 0 0; padding:14px 18px; color:#fff; border-left:4px solid var(--gold);
  background:linear-gradient(180deg, rgba(212,175,55,.08), transparent);
  border-radius:10px;
}

/* Productos */
.cards-products .product{
  background:var(--card); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius); overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.cards-products .product:hover{
  transform:translateY(-6px); box-shadow:0 16px 36px rgba(0,0,0,.4); border-color:rgba(212,175,55,.55);
}
.product-media{aspect-ratio: 4 / 3; overflow:hidden}
.product-media img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.product:hover img{transform:scale(1.06)}
.product h3{margin:12px 14px 4px}
.product p{margin:0 14px 16px; color:var(--muted)}

/* Contacto */
.contact-list{list-style:none; padding:0; margin:14px 0 0}
.contact-list li{margin:6px 0}
.social{display:flex; gap:12px; align-items:center; justify-content:flex-end}
.social a{
  width:42px; height:42px; display:grid; place-items:center; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), #f3d97a); color:#111; font-weight:800; text-decoration:none;
  transition:transform .2s ease;
}
.social a:hover{transform:translateY(-2px)}

/* Footer */
.site-footer{background:#000; border-top:1px solid rgba(255,255,255,.08); padding:24px 0}
.footer-wrap{display:flex; align-items:center; gap:16px}
.footer-logo{height:28px; width:auto; opacity:.9}

/* ========= Animaciones “reveal” y “tilt” ========= */
.reveal{opacity:0; transform:translateY(18px) scale(.985)}
.reveal.show{opacity:1; transform:none; transition:opacity .65s ease, transform .65s cubic-bezier(.2,.65,.2,1)}

[data-tilt]{
  transform: perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(0);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
  will-change: transform;
}
[data-tilt]:hover{
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  border-color:rgba(212,175,55,.35);
}
.cards-products .product[data-tilt]:hover .product-media img{
  transform: scale(1.08) rotate(.6deg);
}

/* ========= Scroll-to-top (reutiliza .skip-link, sin HTML extra) ========= */
body:has(#empresa:target) .skip-link,
body:has(#oportunidad:target) .skip-link,
body:has(#productos:target) .skip-link,
body:has(#contacto:target) .skip-link{
  position:fixed; left:auto; top:auto; right:24px; bottom:24px;
  width:52px; height:52px; border-radius:50%;
  background:linear-gradient(135deg, var(--gold), #f3d97a);
  color:#111; display:grid; place-items:center; text-indent:-9999px;
  box-shadow:0 16px 36px rgba(0,0,0,.5);
  opacity:1; visibility:visible; z-index:1200;
  transition: transform .2s ease, background .2s ease, box-shadow .25s ease;
}
body:has(#empresa:target) .skip-link::after,
body:has(#oportunidad:target) .skip-link::after,
body:has(#productos:target) .skip-link::after,
body:has(#contacto:target) .skip-link::after{
  content:"↑"; text-indent:0; font-weight:900; font-size:22px;
}
body:has(#empresa:target) .skip-link:hover,
body:has(#oportunidad:target) .skip-link:hover,
body:has(#productos:target) .skip-link:hover,
body:has(#contacto:target) .skip-link:hover{
  background:linear-gradient(135deg, var(--red), #ff4d4d); color:#fff;
  transform:translateY(-2px);
}

/* ======= Estados de foco accesibles ======= */
:where(a,button,.btn):focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px; border-radius:10px;
}

/* ======= Responsive ======= */
@media (max-width: 960px){
  .grid-3{grid-template-columns:1fr 1fr}
  .values{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}

  /* NAV móvil */
  .nav-burger{display:block}
  .main-nav ul{
    position:fixed;
    top:68px; left:0; right:0;
    background:#000;
    padding:18px 16px;
    display:grid; gap:14px;
    transform:translateY(-120%);
    transition:transform .28s ease;
    border-bottom:1px solid rgba(255,255,255,.08);
    z-index:1200;
  }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
  .nav-toggle:checked ~ .main-nav ul{transform:translateY(0)}
  .main-nav a{padding:14px 6px}
}

@media (max-width: 760px){
  .grid-2, .grid-3{grid-template-columns:1fr}
  .footer-wrap{flex-direction:column; text-align:center}
}

/* ======= Reduced motion friendly ======= */
@media (prefers-reduced-motion: reduce){
  .hero:hover .hero-media{transform:none}
  .product:hover img, .step:hover{transform:none}
  .reveal,.reveal.show{opacity:1; transform:none; transition:none}
  [data-tilt]{transform:none}
}