/* ===== Lumetric — base ===== */
@font-face{
  font-family: "GreysparkSansRegular";
  src: url("assets/fonts/GreysparkSansRegular.otf") format("opentype"),
       url("assets/fonts/GreysparkSansRegular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root{
  --navy: #1d2d3d;
  --navy-2: #16232f;
  --navy-soft: #29404f;
  --red: #c81a06;
  --red-dark: #a5150a;
  --white: #ffffff;
  --bg: #ffffff;
  --bg-alt: #f4f6f8;
  --text: #1d2d3d;
  --text-muted: #5b6b78;
  --border: #e3e7ea;
  --radius: 14px;
  --container: 1180px;
  --font-head: "GreysparkSansRegular", "Archivo", "Inter", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow: 0 20px 50px -25px rgba(29,45,61,.35);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3{font-family:var(--font-head); line-height:1.16; letter-spacing:.025em; margin:0 0 .5em; color:var(--navy);}
p{margin:0 0 1em;}
ul{margin:0; padding:0; list-style:none;}

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}

.eyebrow{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.45rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--red);
  margin:0 0 .8em;
}
.eyebrow-light{color:#aa0e00;}

h2{font-size:clamp(1.95rem, 2.85vw, 2.65rem); font-weight:800;}
.section-lead{max-width:720px; color:var(--text-muted); font-size:1.1rem;}

.text-red{color:var(--red);}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5em;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.23rem;
  letter-spacing:.015em;
  padding:.75em 1.4em;
  border-radius:999px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn-primary{background:var(--red); color:#fff;}
.btn-primary:hover{background:var(--red-dark); box-shadow:0 10px 24px -10px rgba(200,26,6,.55);}
.btn-ghost{background:transparent; color:var(--navy); border-color:var(--border);}
.btn-ghost:hover{border-color:var(--navy);}
.btn-outline-light{background:transparent; color:#fff; border-color:rgba(255,255,255,.35);}
.btn-outline-light:hover{border-color:#fff;}
.btn-lg{padding:.9em 1.7em; font-size:1.29rem;}

/* ===== Announcement bar ===== */
.announce-bar{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  background:#7a0f05;
  color:#fff;
  padding:10px 20px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.98rem;
  letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.announce-bar strong{color:#fff; font-weight:800;}

/* ===== Header ===== */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--border);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:76px;
}
.logo{display:flex; align-items:center; color:var(--navy);}
.logo-mark-full{height:38px; width:auto; display:block;}
.main-nav{display:flex; align-items:center; gap:2rem;}
.main-nav a{
  font-family:var(--font-head);
  font-weight:600;
  font-size:1.23rem;
  letter-spacing:.01em;
  color:var(--text-muted);
}
.main-nav a:hover{color:var(--navy);}
.header-actions{display:flex; align-items:center; gap:.9rem;}
.whatsapp-btn{
  display:none;
  align-items:center;
  gap:.5em;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.19rem;
  color:#1a8a4a;
  border:1.5px solid #bfe6cf;
  background:#f1faf4;
  padding:.6em 1em;
  border-radius:999px;
  transition:background-color .15s ease, border-color .15s ease;
}
.whatsapp-btn svg{width:18px; height:18px;}
.whatsapp-btn:hover{background:#e3f6ea; border-color:#8fd6ac;}
.nav-toggle{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none;
  border:none;
  cursor:pointer;
  padding:6px;
}
.nav-toggle span{width:22px; height:2px; background:var(--navy); border-radius:2px;}

/* ===== Hero ===== */
.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(200,26,6,.18), transparent 60%),
    linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:88px 0 64px;
}
.bg3d{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:.7;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:56px;
  align-items:center;
}
.hero h1{color:#fff; font-size:clamp(2.35rem, 4.2vw, 3.35rem); font-weight:800; letter-spacing:.02em;}
.hero-lead{color:#c5d0d9; font-size:1.12rem; max-width:520px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin:28px 0 40px;}
.hero .btn-ghost{background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.25);}
.hero .btn-ghost:hover{border-color:#fff; background:rgba(255,255,255,.12);}

.hero-stats{
  display:grid;
  grid-template-columns:repeat(4, auto);
  gap:28px;
  margin:0;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,.15);
}
.hero-stats div{display:flex; flex-direction:column; gap:.15em;}
.hero-stats dt{
  font-family:var(--font-head); font-weight:900; font-size:1.95rem; letter-spacing:.02em; color:#fff;
}
.hero-stats dd{margin:0; font-size:.88rem; color:#9fb0bd; text-transform:uppercase; letter-spacing:.05em;}

.hero-media img{
  border-radius:18px;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.12);
}

/* ===== Promo strip ===== */
.promo-strip{background:var(--navy);}
.promo-strip-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.promo-item{
  display:flex;
  align-items:flex-start;
  gap:18px;
  padding:28px 32px;
}
.promo-item + .promo-item{border-left:1px solid rgba(255,255,255,.12);}
.promo-icon{width:30px; height:30px; flex:none; color:var(--red); margin-top:2px;}
.promo-headline{
  font-family:var(--font-head); font-weight:800; font-size:1.2rem;
  color:#fff; margin:0 0 .3em; letter-spacing:.015em;
}
.promo-sub{color:#9fb0bd; font-size:.92rem; margin:0;}

/* ===== Origen de componentes ===== */
.origin-strip{
  display:grid;
  grid-template-columns:1fr 1fr;
}
.origin-card{
  display:flex;
  align-items:center;
  gap:26px;
  padding:56px 48px;
}
.origin-card-usa{
  background:linear-gradient(135deg, #101c30 0%, #1d2d3d 55%, #2d4463 100%);
  color:#fff;
}
.origin-card-kr{
  background:linear-gradient(135deg, #ffffff 0%, #f4f6f8 100%);
  color:var(--navy);
}
.origin-flag{
  flex:none;
  width:96px;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.5);
  border:1px solid rgba(255,255,255,.3);
}
.origin-card-kr .origin-flag{border-color:var(--border);}
.origin-flag svg{display:block; width:100%; height:auto;}
.origin-tag{
  display:block;
  font-family:var(--font-head); font-weight:800; font-size:.9rem;
  letter-spacing:.13em; text-transform:uppercase; margin-bottom:.45em;
}
.origin-card-usa .origin-tag{color:#aa0e00;}
.origin-card-kr .origin-tag{color:var(--red);}
.origin-copy h3{
  font-size:1.55rem;
  line-height:1.25;
  margin:0;
}
.origin-card-usa .origin-copy h3{color:#fff;}
.origin-card-kr .origin-copy h3{color:var(--navy);}

/* ===== Cert bar ===== */
.cert-bar{background:var(--bg-alt); border-bottom:1px solid var(--border);}
.cert-bar-inner{
  display:flex; align-items:center; gap:28px; flex-wrap:wrap;
  padding:18px 24px;
}
.cert-label{
  font-family:var(--font-head); font-weight:700; font-size:1.13rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted);
}
.cert-logos{display:flex; align-items:center; gap:28px; flex-wrap:wrap;}
.cert-logo{display:flex; align-items:center; color:var(--navy);}
.cert-logo-ce svg{height:34px; width:auto;}
.cert-logo-iso svg{height:30px; width:auto;}
.cert-logo-cofepris svg{height:30px; width:auto;}

/* ===== Sections ===== */
.section{padding:88px 0;}
.section-alt{background:var(--bg-alt);}

/* ===== Feature grid ===== */
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:44px;
}
.feature-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  transition:box-shadow .2s ease, transform .2s ease;
}
.feature-card:hover{box-shadow:var(--shadow); transform:translateY(-3px);}
.feature-icon{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(200,26,6,.08);
  color:var(--red);
  border-radius:12px;
  margin-bottom:18px;
}
.feature-icon svg{width:24px; height:24px;}
.feature-card h3{font-size:1.37rem; font-weight:700; margin-bottom:.5em;}
.feature-card p{color:var(--text-muted); font-size:.98rem; margin:0;}

/* ===== Pieza grid ===== */
.pieza-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:44px;
}
.pieza-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:30px;
}
.pieza-media{
  display:block;
  width:calc(100% + 60px);
  height:180px;
  object-fit:cover;
  margin:-30px -30px 20px;
  border-radius:var(--radius) var(--radius) 0 0;
}
.pieza-num{
  font-family:var(--font-head); font-weight:800; font-size:1.09rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--red);
}
.pieza-card h3{margin-top:.4em; font-size:1.55rem;}
.pieza-card p{color:var(--text-muted); font-size:.98rem;}
.tag-list{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px;}
.tag{
  font-family:var(--font-head); font-size:1.09rem; font-weight:700;
  color:var(--red);
  border:1.5px solid rgba(200,26,6,.35);
  padding:.4em .85em;
  border-radius:999px;
}

.callout{
  margin-top:40px;
  padding:26px 28px;
  background:#fff;
  border-left:4px solid var(--red);
  border-radius:0 var(--radius) var(--radius) 0;
  color:var(--text-muted);
  font-size:1rem;
  max-width:900px;
}
.callout strong{color:var(--navy);}

/* ===== Haz grid ===== */
.haz-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin-top:44px;
}
.haz-card{
  text-align:center;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:34px 24px;
}
.haz-icon{width:52px; height:52px; color:var(--red); margin:0 auto 18px;}
.haz-card h3{font-size:1.39rem;}
.haz-card p{color:var(--text-muted); font-size:.97rem; margin:0;}

.scan-shapes{margin-top:56px;}
.scan-shapes-label{
  font-family:var(--font-head); font-weight:700; font-size:1.13rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--text-muted);
  margin-bottom:20px;
}
.scan-shapes-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
}
.scan-shape{
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 12px;
  text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.scan-shape svg{width:38px; height:38px; color:var(--red);}
.scan-shape span{
  font-family:var(--font-head); font-weight:700; font-size:1.15rem; color:var(--navy);
}
.scan-shape-accent{
  background:var(--navy); color:#fff; justify-content:center;
}
.scan-shape-number{font-family:var(--font-head); font-weight:900; font-size:2.15rem; letter-spacing:.02em; color:#fff;}
.scan-shape-accent span:last-child{color:#c5d0d9; font-size:1.11rem;}

/* ===== Operación clínica ===== */
.two-col{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:56px;
  align-items:start;
}
.op-item{
  padding:22px 0;
  border-top:1px solid var(--border);
}
.op-item:first-of-type{border-top:none; padding-top:8px;}
.op-item h3{font-size:1.37rem;}
.op-item p{color:var(--text-muted); font-size:.98rem;}
.muted-note{font-size:.9rem; color:var(--text-muted); font-style:italic; margin:.5em 0 0;}

.op-media{position:sticky; top:100px;}
.console-card{
  background:var(--navy);
  color:#fff;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
}
.console-card-row{
  display:flex; align-items:center; gap:10px;
  padding:18px 24px;
  background:rgba(255,255,255,.06);
  font-family:var(--font-head); font-weight:700; letter-spacing:.07em; font-size:1.17rem;
}
.console-dot{width:9px; height:9px; border-radius:50%; background:var(--red);}
.console-card-body{padding:26px 24px 30px;}
.console-card-body p{color:#c5d0d9; font-size:.98rem;}
.console-card-body ul{margin-top:16px; display:flex; flex-direction:column; gap:12px;}
.console-card-body li{
  font-size:.96rem; color:#fff;
  padding-left:22px; position:relative;
}
.console-card-body li::before{
  content:"";
  position:absolute; left:0; top:.5em;
  width:8px; height:8px; border-radius:50%;
  background:var(--red);
}

/* ===== Spec table ===== */
.table-wrap{
  margin-top:36px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.spec-table{width:100%; border-collapse:collapse; font-size:.98rem;}
.spec-table tr:nth-child(even){background:var(--bg-alt);}
.spec-table th, .spec-table td{
  text-align:left;
  padding:14px 22px;
  border-bottom:1px solid var(--border);
}
.spec-table tr:last-child th, .spec-table tr:last-child td{border-bottom:none;}
.spec-table th{
  font-family:var(--font-head); font-weight:600; color:var(--text-muted);
  font-size:1.23rem;
  width:38%;
}
.spec-table td{font-weight:600; color:var(--navy);}
.table-footnote{margin-top:18px; font-size:.88rem; color:var(--text-muted);}

/* ===== CTA / contacto ===== */
.cta-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:96px 0;
  text-align:center;
}
.cta-inner{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center;}
.cta-section .eyebrow-light{margin-bottom:1.2em;}
.cta-logo{height:102px; width:auto; display:block; margin:0 auto 20px;}
.lm-word-light{font-family:"GreysparkSansRegular","Greyspark Sans"; font-size:554.91px; fill:#fff;}
.lm-line-light{fill:#fff; stroke:#fff; stroke-linecap:round; stroke-miterlimit:10; stroke-width:5px;}
.cta-section h2{color:#fff; font-size:clamp(1.8rem, 3vw, 2.6rem);}
.cta-lead{color:#c5d0d9; max-width:640px; margin:0 auto 48px; font-size:1.1rem;}

.cta-grid{
  display:grid;
  grid-template-columns:repeat(4, auto);
  gap:44px;
  margin-bottom:48px;
  text-align:left;
}
.cta-label{
  display:block;
  font-family:var(--font-head); font-weight:800; font-size:1.07rem;
  letter-spacing:.13em; text-transform:uppercase; color:var(--red);
  margin-bottom:.5em;
}
.cta-value{
  font-family:var(--font-head); font-weight:700; font-size:1.33rem; color:#fff; margin:0;
}
.cta-value a:hover{color:#aa0e00;}
.cta-buttons{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}

/* ===== Footer ===== */
.site-footer{background:var(--bg-alt); border-top:1px solid var(--border); color:var(--text-muted); padding:40px 0;}
.footer-inner{
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
}
.logo-footer .logo-mark-full{height:32px;}
.footer-copy{font-size:.9rem; margin:0; color:var(--text-muted);}
.footer-muted{color:#8b98a3;}

/* ===== WhatsApp float ===== */
.whatsapp-float{
  position:fixed; right:22px; bottom:22px; z-index:60;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.4);
  transition:transform .15s ease;
}
.whatsapp-float:hover{transform:scale(1.06);}
.whatsapp-float svg{width:28px; height:28px;}

/* ===== Responsive ===== */
@media (min-width: 560px){
  .whatsapp-btn{display:inline-flex;}
}

@media (max-width: 980px){
  .main-nav{display:none;}
  .nav-toggle{display:flex;}
  .hero-grid, .two-col{grid-template-columns:1fr; gap:40px;}
  .op-media{position:static;}
  .feature-grid, .pieza-grid, .haz-grid{grid-template-columns:repeat(2, 1fr);}
  .scan-shapes-grid{grid-template-columns:repeat(3, 1fr);}
  .cta-grid{grid-template-columns:repeat(2, auto); text-align:center; justify-items:center;}
  .hero-media{order:-1;}
}

@media (max-width: 600px){
  .header-actions .btn{display:none;}
  .feature-grid, .pieza-grid, .haz-grid{grid-template-columns:1fr;}
  .scan-shapes-grid{grid-template-columns:repeat(2, 1fr);}
  .hero-stats{grid-template-columns:repeat(2, auto);}
  .cta-grid{grid-template-columns:1fr;}
  .promo-strip-inner{grid-template-columns:1fr;}
  .promo-item + .promo-item{border-left:none; border-top:1px solid rgba(255,255,255,.12);}
  .origin-strip{grid-template-columns:1fr;}
  .origin-card{padding:36px 24px;}
  .section{padding:64px 0;}
  .hero{padding:56px 0 48px;}
  .announce-bar{font-size:.82rem; padding:9px 16px;}
  .media-photo{max-height:320px;}
}

/* ===== Active nav link ===== */
.main-nav a.active{color:var(--navy); position:relative;}
.main-nav a.active::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-27px;
  height:3px; background:var(--red); border-radius:2px 2px 0 0;
}
body.nav-open .main-nav a.active::after{display:none;}

/* ===== Inner page hero (Nosotros / FAQ / Contacto) ===== */
.page-hero{
  position:relative;
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-2) 100%);
  color:#fff;
  padding:72px 0 56px;
  text-align:center;
}
.page-hero .eyebrow-light{margin-bottom:.9em;}
.page-hero h1{color:#fff; font-size:clamp(2rem, 3.6vw, 2.9rem); max-width:820px; margin:0 auto .5em;}
.page-hero p.lead{color:#c5d0d9; font-size:1.1rem; max-width:640px; margin:0 auto;}

/* ===== Nosotros: valores grid reuses .feature-grid ===== */

/* ===== FAQ accordion ===== */
.faq-list{max-width:840px; margin:44px auto 0; display:flex; flex-direction:column; gap:14px;}
.faq-item{
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:20px 24px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.2rem;
  color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .faq-icon{
  flex:none;
  width:26px; height:26px;
  border-radius:50%;
  border:1.5px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--red);
  transition:transform .2s ease, background-color .2s ease;
}
.faq-item summary .faq-icon svg{width:12px; height:12px;}
.faq-item[open] summary .faq-icon{transform:rotate(45deg); background:var(--red); color:#fff; border-color:var(--red);}
.faq-item .faq-answer{padding:0 24px 22px; color:var(--text-muted); font-size:.98rem; max-width:680px;}

/* ===== Editorial media photo (Nosotros / Contacto / FAQ) ===== */
.media-photo{
  width:100%;
  height:100%;
  max-height:520px;
  object-fit:cover;
  display:block;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  border:1px solid var(--border);
}

/* ===== Mobile nav drawer ===== */
body.nav-open .main-nav{
  display:flex;
  flex:none;
  position:fixed;
  top:76px;
  left:0;
  right:0;
  height:calc(100vh - 76px);
  height:calc(100dvh - 76px);
  background:#fff;
  flex-direction:column;
  align-items:flex-start;
  gap:0;
  padding:12px 24px 24px;
  z-index:49;
  border-top:1px solid var(--border);
  overflow-y:auto;
}
body.nav-open .main-nav a{
  width:100%;
  padding:16px 0;
  border-bottom:1px solid var(--border);
  font-size:1.3rem;
}
