:root{
  --bg:#ffffff;
  --bg-2:#f7fafc;
  --text:#0b1726;
  --muted:#475569;
  --brand:#2b6cb0;
  --brand-2:#2f855a;
  --line:rgba(0,0,0,.08);
  --radius:18px;
  --maxw:1200px;
  --shadow:0 10px 28px rgba(16,24,40,.06);
  --header-h:72px;
}

*{box-sizing:border-box}
html{scrollbar-gutter:stable}
body{
  margin:0; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(109,214,255,.15), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(156,245,156,.12), transparent 60%),
    linear-gradient(180deg, var(--bg), var(--bg-2));
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
  padding-top: var(--header-h); /* compensa header fijo */
}

a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
.wrap{max-width:var(--maxw); margin-inline:auto; padding:0 24px}

/* ===== Header fijo ===== */
.site-header{
  position:fixed; top:0; left:0; right:0; height:var(--header-h);
  z-index:9999;
  border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(140%) blur(8px);
}
.nav{height:var(--header-h); display:flex; align-items:center; justify-content:space-between}
.logo{display:flex; align-items:center; gap:12px; font-weight:800; letter-spacing:.2px}
.menu{display:flex; gap:22px; align-items:center}
.menu a{color:var(--muted)}
.cta{padding:10px 16px; border-radius:999px; background:var(--brand); color:#061018; font-weight:700}

/* Evita que anchors queden cubiertos por el header */
section[id]{ scroll-margin-top: calc(var(--header-h) + 16px); }

/* ===== HERO con video full-bleed (ya lo tienes) ===== */
.hero--video{ padding: 0; }
.hero-bleed{ width:100vw; margin-left:50%; transform:translateX(-50%); }
.hero-video{
  position:relative;
  background:#000;
  overflow:hidden;
  height: calc(100vh - var(--header-h));
}
@supports (height: 100dvh){
  .hero-video{ height: calc(100dvh - var(--header-h)); }
}

/* Video rotado 90° (ya lo tienes); aseguramos que no bloquee clicks del overlay */
.hero-video__media{
  position:absolute; top:50%; left:50%;
  width:auto; height:auto;
  transform: translate(-50%, -50%) rotate(90deg) scale(1);
  transform-origin: center center;
  pointer-events: none;          /* ⬅️ overlay clickable */
  z-index: 1;
}

/* ===== Overlay de texto encima del video ===== */
.hero-video__overlay{
  position:absolute; inset:0;
  z-index: 2;
  display:flex; flex-direction:column; justify-content:center;
  align-items:flex-start; gap:14px;
  padding: clamp(18px, 4vw, 48px);
  color:#fff;
  /* degradado suave para legibilidad sin “ensuciar” la imagen */
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.10) 35%, rgba(0,0,0,0) 70%);
}
.hero-video__overlay h1{ margin:14px 0 8px; font-size:clamp(30px, 5.6vw, 60px); line-height:1.05; }
.hero-video__overlay p{ margin:0 0 18px; font-size:18px; max-width:min(72ch, 92%); color:#e9eef7; }

.hero-video__overlay .pill{
  display:inline-flex; gap:8px; align-items:center;
  font-size:12px; color:#e8f0ff;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.06);
}
.hero-video__overlay .actions{ display:flex; gap:12px; flex-wrap:wrap; }
.hero-video__overlay .btn--ghost{
  border-color: rgba(255,255,255,.35);
  color:#fff;
}

/* ===== Rebanada con parallax (debajo del hero) ===== */
.parallax-slice{ position: relative; z-index: 0; }
.parallax-slice .bg-parallax{
  position:absolute; inset:0; pointer-events:none; z-index:-1;
}
.bg{
  position:absolute;
  will-change: transform;
  filter:drop-shadow(0 10px 20px rgba(16,24,40,.14));
  opacity:.9;
  transform:translate3d(0,0,0);
}

/* ===== Secciones base ===== */
section{padding:72px 0}
h2{font-size:clamp(22px,3.2vw,34px); margin:0 0 8px}
.muted{color:var(--muted)}
.grid{display:grid; gap:18px}
.grid--3{grid-template-columns:repeat(3,1fr)}
.feature{position:relative; padding:22px; border:1px solid var(--line); border-radius:var(--radius); background:linear-gradient(180deg, rgba(16,24,40,.02), rgba(16,24,40,.01))}
.feature h3{margin:8px 0 6px}
.tag{display:inline-block; font-size:12px; color:#061018; background:var(--brand-2); padding:4px 8px; border-radius:999px; font-weight:800}

/* ===== Comparativa ===== */
.hc-compare{padding:24px 0}
.hc-compare__title{margin:0 0 18px; font-size:clamp(22px,3vw,34px); text-align:center}
.hc-compare__panel{
  border:1px solid var(--line); border-radius:18px; background:#fff;
  display:grid; grid-template-columns:1fr 1fr; overflow:hidden;
  align-items:center; gap:0;
  min-height:clamp(480px, 50vw, 620px);
}
.hc-compare__col{
  padding:clamp(16px, 2vw, 28px);
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:8px;
}
.hc-compare__col--alt{border-left:1px solid var(--line); background:linear-gradient(180deg, rgba(2,6,23,0.00), rgba(2,6,23,0.02))}
.hc-compare__head{display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:12px; width:100%; max-width:380px}
.hc-compare__h3{margin:0; font-size:clamp(18px,2.4vw,26px); font-weight:800}
.hc-compare__h3 span{display:block; font-weight:600; color:var(--muted)}
.hc-implant-img{ width:clamp(120px, 18vw, 200px); height:auto; object-fit:contain }
.hc-compare__list{
  list-style:none; margin:0; padding:0; width:100%; max-width:380px; display:flex; flex-direction:column; gap:clamp(10px, 1.6vw, 14px); margin-inline:auto
}
.hc-compare__list li{padding:clamp(8px, 1.2vw, 12px); border-top:1px solid var(--line)}
.hc-compare__list li:first-child{border-top:none}
.k{font-weight:700; color:var(--brand); font-size:clamp(14px, 1.8vw, 18px)}
.v{color:var(--muted); font-size:clamp(13px, 1.6vw, 16px)}

/* ===== Bloques: sellado & preservación ===== */
.hc-section{display:flex; flex-direction:column; gap:clamp(40px, 6vw, 80px); padding:clamp(40px, 5vw, 80px) 0}
.hc-feature{display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(24px, 3vw, 48px)}
.hc-feature__image{display:flex; justify-content:center; align-items:center}
.hc-feature__image img{width:100%; max-width:680px; height:auto; border-radius:12px; object-fit:contain; box-shadow:0 2px 12px rgba(0,0,0,.05)}
.hc-feature__text h2{color:var(--brand); font-size:clamp(22px, 2.6vw, 32px); margin-bottom:clamp(10px, 1.2vw, 16px)}
.hc-feature__text p{color:var(--muted); font-size:clamp(15px, 1.4vw, 18px); line-height:1.6; margin-bottom:clamp(10px, 1.4vw, 18px)}
.hc-feature__text ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px}
.hc-feature__text ul li{color:var(--brand); font-weight:600; position:relative; padding-left:16px}
.hc-feature__text ul li::before{content:"•"; color:var(--brand); position:absolute; left:0}
.hc-feature--reverse .hc-feature__image{order:2}
.hc-feature--reverse .hc-feature__text{order:1}

/* ===== Contacto ===== */
.contact{display:grid; grid-template-columns:1.1fr .9fr; gap:24px}
form{display:grid; gap:12px}
input, textarea{width:100%; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:#ffffff; color:#0b1726}
textarea{min-height:140px; resize:none} /* <- no expandible */

/* ===== Footer ===== */
footer{border-top:1px solid var(--line); color:var(--muted)}
.foot{display:flex; gap:16px; justify-content:space-between; align-items:center; padding:22px 0}
.foot__links{display:flex; gap:14px; flex-wrap:wrap}

/* ===== Parallax + Reveal (contenido) ===== */
.par-el{ will-change: transform; }
.reveal{ opacity:0; transform: translate3d(0, 24px, 0); transition: transform .6s ease, opacity .6s ease; }
.reveal.in{ opacity:1; transform: translate3d(0,0,0); }
.reveal-left{ transform: translate3d(-24px, 24px, 0); }
.reveal-right{ transform: translate3d(24px, 24px, 0); }

/* ===== Responsive ===== */
@media (max-width: 980px){
  .contact{grid-template-columns:1fr}
  .grid--3{grid-template-columns:1fr}
  .menu{display:none}
}
@media (max-width: 900px){
  .hc-compare__panel{grid-template-columns:1fr; min-height:auto}
  .hc-compare__col{border-left:none; border-top:1px solid var(--line); padding:32px 16px}
  .hc-compare__col--alt{border-top:1px solid var(--line)}
  .hc-feature{grid-template-columns:1fr; text-align:center}
  .hc-feature__text{display:flex; flex-direction:column; align-items:center}
  .hc-feature__text ul{align-items:center}
  .hc-feature__image img{max-width:90%}
}

/* ===== BOTONES (base sólida para <a>, <button> e <input type=submit>) ===== */

/* Reset consistente */
a.cta,
.btn,
button,
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  outline: 0;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

/* Base .btn */
.btn,
button.btn,
input[type="submit"].btn,
a.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: 0 6px 14px rgba(16,24,40,.06);
}

/* Variante principal */
.btn--brand,
button.btn--brand,
input[type="submit"].btn--brand,
a.btn--brand {
  background: var(--brand);
  color: #061018;
  border-color: transparent;
  box-shadow: 0 8px 18px rgba(43,108,176,.25);
}
.btn--brand:hover { filter: brightness(1.05); }
.btn--brand:active { transform: translateY(1px); }

/* Variante ghost */
.btn--ghost,
a.btn--ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--line);
}
.btn--ghost:hover {
  background: rgba(2,6,23,.03);
}

/* Ghost sobre el video (texto claro) */
.hero-video__overlay .btn--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.35);
  background: rgba(255,255,255,.06);
}
.hero-video__overlay .btn--ghost:hover {
  background: rgba(255,255,255,.12);
}

/* CTA del header */
a.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--brand);
  color: #061018 !important;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(43,108,176,.25);
  border: none;
}
a.cta:hover { filter: brightness(1.05); }
a.cta:active { transform: translateY(1px); }

/* Botón del formulario: ancho auto (por si el navegador lo estira) */
#contacto form .btn,
#contacto form button,
#contacto form input[type="submit"] {
  width: auto;
  justify-self: start;     /* cámbialo a center si lo prefieres centrado */
}