/*
  TIPOGRAFÍA:
  El diseño está pensado para "Gotham Black" (títulos) y "Gotham Light" (texto).
  Gotham es una fuente de pago (no distribuible por CDN), así que dejamos las reglas
  @font-face listas para que cargues tus propios archivos .woff/.woff2 con licencia.
  Mientras tanto, se usa Montserrat como reemplazo visual (misma familia geométrica).

  Para activar Gotham real: descomenta el bloque @font-face de abajo y coloca tus
  archivos en una carpeta /fonts junto a este HTML.
*/

/*
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Light.woff2') format('woff2');
  font-weight: 300;
}
@font-face {
  font-family: 'Gotham';
  src: url('fonts/Gotham-Black.woff2') format('woff2');
  font-weight: 900;
}
*/

:root{
  --green: #2FA84F;
  --green-dark: #1E7A38;
  --orange: #F5821F;
  --purple: #6C5CE7;
  --red: #E8483A;
  --ink: #16181C;
  --gray-text: #6B7280;
  --bg-soft: #F6F7F9;
  --border: #E7E9ED;
  --white: #FFFFFF;
  --surface: #FFFFFF;
  --surface-rgb: 255,255,255;
  --slot-bg: #FBFBFC;
  --slot-border: #C9CDD3;
  --slot-text: #9AA0A8;
  --font-title: 'Gotham', 'Montserrat', sans-serif;
  --font-body: 'Gotham', 'Montserrat', sans-serif;
}

:root[data-theme="dark"]{
  --ink: #F2F3F5;
  --gray-text: #9BA3AF;
  --bg-soft: #1B1E23;
  --border: #2C3038;
  --surface: #15171B;
  --surface-rgb: 21,23,27;
  --slot-bg: #1E2126;
  --slot-border: #3A3F47;
  --slot-text: #7A828C;
}

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

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  font-weight: 300; /* Gotham Light */
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
  padding-top: 82px;
}

section[id]{ scroll-margin-top: 90px; }

h1,h2,h3,h4, .title-black{
  font-family: var(--font-title);
  font-weight: 900; /* Gotham Black */
  letter-spacing: -0.01em;
}

a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ list-style:none; }
button{ font-family:inherit; cursor:pointer; border:none; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }

/* ---------- PLACEHOLDER (logos / fotos a cargar) ---------- */
.upload-slot{
  border: 2px dashed var(--slot-border);
  border-radius: 12px;
  background: var(--slot-bg);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--slot-text);
  font-size:12px;
  font-weight:500;
  text-align:center;
  gap:6px;
  padding:8px;
}
.upload-slot .icon{ font-size:20px; }

/* ---------- NAVBAR ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:500;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  transition: background-color .2s ease, border-color .2s ease;
}
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
}
.logo{
  display:flex; align-items:baseline; gap:2px;
  font-family: var(--font-title);
  font-weight:900;
  font-size:24px;
}
.logo .deluxe{ color: var(--green); }
.logo .food{ color: var(--orange); }
.logo-tagline{ font-size:9px; color:var(--gray-text); font-weight:400; display:block; margin-top:-2px; }

nav ul{ display:flex; gap:32px; font-size:14px; font-weight:500; }
nav a:hover{ color: var(--green); }

.nav-right{ display:flex; align-items:center; gap:16px; }
.icon-btn{
  width:36px; height:36px; border-radius:50%;
  background: var(--bg-soft);
  color: inherit;
  padding:0;
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  transition: background-color .15s ease;
}
.icon-btn:hover{ background: var(--border); }
.icon-btn .flag-icon{
  width:21px; height:15px; border-radius:3px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
}

.theme-switch{
  position:relative; flex-shrink:0;
  width:52px; height:28px; border-radius:999px; padding:0;
  background: linear-gradient(135deg, #FDEEE1, #EAF7EE);
  border:1px solid var(--border);
  transition: background-color .3s ease, border-color .3s ease;
}
html[data-theme="dark"] .theme-switch{
  background: linear-gradient(135deg, #23262D, #101216);
  border-color:#2C3038;
}
.theme-switch-thumb{
  position:absolute; top:2px; left:2px;
  width:22px; height:22px; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  transition: transform .3s cubic-bezier(.4,0,.2,1), background-color .3s ease;
}
html[data-theme="dark"] .theme-switch-thumb{
  transform: translateX(24px);
  background:#2A2D34;
}
.theme-icon{
  position:absolute; width:14px; height:14px;
  transition: opacity .25s ease, transform .3s ease;
}
.theme-icon-sun{ color:#F5A623; opacity:1; transform:scale(1) rotate(0deg); }
.theme-icon-moon{ color:#A78BFA; opacity:0; transform:scale(.4) rotate(-70deg); }
html[data-theme="dark"] .theme-icon-sun{ opacity:0; transform:scale(.4) rotate(70deg); }
html[data-theme="dark"] .theme-icon-moon{ opacity:1; transform:scale(1) rotate(0deg); }

.btn{
  padding:10px 22px;
  border-radius:24px;
  font-size:14px;
  font-weight:600;
  white-space:nowrap;
  transition: background-color .25s ease, color .25s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-login{
  background:transparent;
  border:1.5px solid var(--purple) !important;
  color: var(--purple);
}
.btn-login:hover{
  background: var(--purple);
  color:#fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(108,92,231,.3);
}
.btn-signup{
  background: var(--red);
  color:#fff;
  animation: btn-pulse 2.5s ease-out infinite;
}
.btn-signup:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(232,72,58,.4);
  animation-play-state: paused;
}
.btn-purple{
  background: var(--purple);
  color:#fff;
}

@keyframes btn-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(232,72,58,.55); }
  70%{ box-shadow: 0 0 0 12px rgba(232,72,58,0); }
  100%{ box-shadow: 0 0 0 0 rgba(232,72,58,0); }
}

@media (max-width: 900px){
  nav{ display:none; }
}

/* ---------- HERO ---------- */
.hero{ padding:64px 0 40px; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: #EAF7EE; color: var(--green-dark);
  font-size:12px; font-weight:600;
  padding:6px 14px; border-radius:20px;
  margin-bottom:20px;
}
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  gap:24px;
  align-items:center;
}
.hero-photo{ position:relative; border-radius:20px; overflow:hidden; height:340px; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-card{
  position:absolute; left:14px; bottom:14px;
  background:var(--surface); border-radius:14px; padding:8px 14px;
  display:flex; align-items:center; gap:10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  font-size:12px;
  overflow:hidden;
  cursor:pointer;
  text-align:left;
  transition: transform .2s ease, box-shadow .2s ease;
}
.hero-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
}
.hero-card::before{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  animation: card-shine 3.2s ease-in-out infinite;
}
@keyframes card-shine{
  0%{ left:-60%; }
  40%{ left:130%; }
  100%{ left:130%; }
}
.hero-card .avatar{
  position:relative;
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
}
.avatar-badge{
  position:absolute; bottom:-3px; right:-3px;
  width:15px; height:15px; border-radius:50%;
  background: var(--purple); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 0 2px var(--surface);
}
.avatar-badge svg{ width:9px; height:9px; }
.hero-card b{ display:block; font-size:12px; }
.hero-card span{ color: var(--gray-text); font-size:10px; }

.hero-center{ text-align:center; }
.hero-center h1{
  font-size:44px;
  line-height:1.08;
  margin-bottom:16px;
}
.hero-center p{
  color: var(--gray-text);
  font-weight:400;
  max-width:420px;
  margin:0 auto 28px;
  font-size:15px;
}
.search-wrap{ max-width:440px; margin:0 auto; position:relative; }
.search-bar{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:30px; padding:6px 6px 6px 20px;
  box-shadow: 0 6px 20px rgba(0,0,0,.05);
}
.search-bar input{
  flex:1; min-width:0; border:none; outline:none; font-size:14px; font-family:inherit;
  color:inherit; background:transparent;
}
.search-bar .mic-btn{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  background: var(--bg-soft); color: var(--ink);
  display:flex; align-items:center; justify-content:center;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.search-bar .mic-btn svg{ width:17px; height:17px; }
.search-bar .mic-btn:hover{ background: var(--border); transform: scale(1.06); }
.search-bar .mic-btn.is-listening{
  background: var(--red); color:#fff;
  animation: mic-pulse 1.4s ease-out infinite;
}
@keyframes mic-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(232,72,58,.5); }
  70%{ box-shadow: 0 0 0 10px rgba(232,72,58,0); }
  100%{ box-shadow: 0 0 0 0 rgba(232,72,58,0); }
}

.search-bar .search-btn{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  background: linear-gradient(135deg, #F4C430, #8BC34A);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease, box-shadow .2s ease;
  animation: search-pulse 2.6s ease-out infinite;
}
.search-bar .search-btn svg{ width:18px; height:18px; }
.search-bar .search-btn:hover{
  transform: scale(1.08) rotate(-8deg);
  box-shadow: 0 8px 18px rgba(139,195,74,.4);
  animation-play-state: paused;
}

@keyframes search-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(244,196,48,.45), 0 0 0 0 rgba(139,195,74,.35); }
  70%{ box-shadow: 0 0 0 8px rgba(244,196,48,0), 0 0 0 14px rgba(139,195,74,0); }
  100%{ box-shadow: 0 0 0 0 rgba(244,196,48,0), 0 0 0 0 rgba(139,195,74,0); }
}

/* ---------- PANEL DE RESULTADOS DEL BUSCADOR ---------- */
.search-results{
  position:absolute; top:calc(100% + 10px); left:0; right:0; z-index:60;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  box-shadow:0 20px 45px rgba(0,0,0,.16);
  padding:14px; text-align:left;
  max-height:360px; overflow-y:auto;
  opacity:0; transform:translateY(-6px); pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
}
.search-results.is-open{ opacity:1; transform:translateY(0); pointer-events:auto; }
.search-results-head{
  font-size:10.5px; font-weight:700; color:var(--gray-text);
  text-transform:uppercase; letter-spacing:.03em; padding:2px 10px 10px;
}
.search-results-list{ display:flex; flex-direction:column; gap:2px; }
.result-item{
  width:100%; display:flex; align-items:flex-start; gap:12px;
  padding:9px 10px; border-radius:14px; text-align:left; background:none;
  transition: background-color .15s ease;
}
.result-item:hover, .result-item:focus-visible{ background:var(--bg-soft); }
.result-icon{ font-size:19px; line-height:1.3; flex-shrink:0; }
.result-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.result-title{ font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.result-tag{
  font-size:10px; font-weight:700; font-style:normal; color:var(--purple);
  background:#EFEDFD; padding:2px 8px; border-radius:10px; white-space:nowrap;
}
.result-desc{ font-size:11.5px; color:var(--gray-text); font-weight:400; line-height:1.4; }
.search-results-empty{ font-size:13px; color:var(--gray-text); font-weight:400; text-align:center; padding:20px 10px; }

.tutorial-badge{
  position:absolute; right:16px; top:16px;
  background:rgba(var(--surface-rgb),.95);
  color: var(--ink);
  padding:8px 14px; border-radius:24px;
  font-size:13px; font-weight:600;
  display:flex; align-items:center; gap:8px;
  cursor:pointer;
  animation: tutorial-pulse 2.4s ease-out infinite;
  transition: transform .2s ease, box-shadow .2s ease;
}
.tutorial-badge:hover{
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px rgba(108,92,231,.35);
  animation-play-state: paused;
}
.tutorial-badge .play-icon{ width:20px; height:20px; color:var(--purple); flex-shrink:0; }

@keyframes tutorial-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(108,92,231,.45); }
  70%{ box-shadow: 0 0 0 10px rgba(108,92,231,0); }
  100%{ box-shadow: 0 0 0 0 rgba(108,92,231,0); }
}

.features-row{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; margin-top:56px;
}
.feature-item{ text-align:center; padding:0 12px; }
.feature-item .f-icon{
  width:64px; height:64px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 14px;
}
.feature-item .f-icon svg{ width:40px; height:40px; }
.feature-item h4{ font-size:15px; margin-bottom:6px; }
.feature-item p{ font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.5; }

/* ---------- PLANES ---------- */
.planes-section{ padding:80px 0; }
.pricing-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:20px; align-items:stretch;
}
.plan-card{
  position:relative;
  display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:32px 24px; box-shadow:0 8px 24px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.09); }
.plan-card.is-featured{
  border-color:var(--purple);
  box-shadow:0 16px 40px rgba(108,92,231,.22);
  transform:scale(1.03);
}
.plan-card.is-featured:hover{ transform:scale(1.03) translateY(-4px); }
.plan-badge{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--purple); color:#fff; font-size:11px; font-weight:700;
  padding:5px 16px; border-radius:20px; white-space:nowrap;
  box-shadow:0 6px 14px rgba(108,92,231,.35);
}
.plan-name{ display:block; font-family:var(--font-title); font-weight:900; font-size:17px; margin-bottom:14px; }
.plan-price{ display:flex; align-items:baseline; gap:4px; margin-bottom:12px; }
.plan-price .currency{ font-size:13px; font-weight:700; color:var(--gray-text); }
.plan-price .amount{ font-family:var(--font-title); font-weight:900; font-size:32px; }
.plan-price .amount.amount-text{ font-size:22px; }
.plan-price .period{ font-size:12px; color:var(--gray-text); font-weight:400; }
.plan-tagline{ font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.5; margin-bottom:20px; min-height:58px; }
.plan-features{ display:flex; flex-direction:column; gap:10px; margin-bottom:24px; flex:1; }
.plan-features li{ font-size:13px; color:var(--ink); font-weight:400; line-height:1.4; padding-left:20px; position:relative; }
.plan-features li::before{
  content:"✓"; position:absolute; left:0; top:0;
  color:var(--green); font-weight:700; font-size:12px;
}
.plan-cta{ width:100%; text-align:center; }
.plan-card-corp{ background:var(--bg-soft); }

@media (max-width:1000px){
  .pricing-grid{ grid-template-columns:repeat(2,1fr); }
  .plan-card.is-featured{ transform:none; }
  .plan-card.is-featured:hover{ transform:translateY(-4px); }
}
@media (max-width:560px){
  .pricing-grid{ grid-template-columns:1fr; }
  .plan-tagline{ min-height:0; }
}

/* ---------- FOTOS DE CERTIFICADOS ---------- */
.cert-photos-section{ padding:32px 0 8px; }
.cert-photos-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:16px; align-items:stretch;
}
.cert-photo-card{
  height:96px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:12px; box-shadow:0 6px 18px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cert-photo-card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.1); }
.cert-photo-card img{ max-width:100%; max-height:100%; object-fit:contain; }

@media (max-width:700px){ .cert-photos-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:420px){ .cert-photos-grid{ grid-template-columns:repeat(2,1fr); } }

/* ---------- NOSOTROS ---------- */
.nosotros-hero{ padding:72px 0 40px; text-align:center; }
.nosotros-hero-title{ font-size:34px; max-width:680px; margin:0 auto 16px; line-height:1.15; }
.nosotros-hero-p{ font-size:15px; color:var(--gray-text); font-weight:400; max-width:560px; margin:0 auto 28px; line-height:1.6; }
.nosotros-hero-actions{ display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:36px; flex-wrap:wrap; }

.trust-badges{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }
.trust-badge{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:14px;
  padding:10px 20px; min-width:150px;
}
.trust-badge-label{ font-size:11px; color:var(--gray-text); font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.trust-badge-value{ font-size:14px; font-weight:800; }

.chain-banner{ background:#14161A; padding:16px 0; }
.chain-banner-inner{ display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.chain-step{ color:#fff; font-size:13px; font-weight:600; }
.chain-sep{ color:rgba(255,255,255,.4); font-size:14px; }

.section-title-block{ font-size:30px; text-align:center; max-width:680px; margin:0 auto 16px; line-height:1.2; }
.section-lead{ font-size:14px; color:var(--gray-text); font-weight:400; text-align:center; max-width:600px; margin:0 auto 40px; line-height:1.6; }

.plataforma-section{ padding:80px 0; background:var(--bg-soft); }
.plataforma-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.ccp-card{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:28px; box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.ccp-icon{ width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.ccp-icon svg{ width:24px; height:24px; }
.ccp-tag{ display:block; font-size:12px; font-weight:800; letter-spacing:.03em; color:var(--purple); margin-bottom:14px; }
.ccp-list{ display:flex; flex-direction:column; gap:10px; }
.ccp-list li{ font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.5; padding-left:16px; position:relative; }
.ccp-list li::before{ content:""; position:absolute; left:0; top:7px; width:6px; height:6px; border-radius:50%; background:var(--green); }
.ccp-list li b{ color:var(--ink); font-weight:700; }

.fsma-section{ padding:80px 0; }
.fsma-panel{
  display:flex; gap:18px; align-items:flex-start;
  max-width:640px; margin:0 auto 28px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:24px; box-shadow:0 8px 24px rgba(0,0,0,.05);
}
.fsma-panel-icon{ width:48px; height:48px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.fsma-panel-icon svg{ width:24px; height:24px; }
.fsma-panel-tag{ display:block; font-size:11px; font-weight:700; color:var(--red); margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em; }
.fsma-panel-body b{ display:block; font-size:16px; margin-bottom:8px; }
.fsma-panel-body p{ font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.6; }

.fsma-alliance{
  display:flex; align-items:center; justify-content:center; gap:10px;
  max-width:640px; margin:0 auto 48px; font-size:13px; color:var(--gray-text); font-weight:400; text-align:center; flex-wrap:wrap;
}
.fsma-alliance-icon{ width:32px; height:32px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.fsma-alliance-icon svg{ width:16px; height:16px; }
.fsma-alliance b{ color:var(--ink); font-weight:700; }

.benefits-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.benefit-card{ text-align:left; }
.benefit-num{ display:block; font-family:var(--font-title); font-weight:900; font-size:26px; color:var(--purple); opacity:.5; margin-bottom:10px; }
.benefit-card h4{ font-size:14px; margin-bottom:8px; line-height:1.35; }
.benefit-card p{ font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.55; }

.resultados-section{ padding:80px 0; background:var(--bg-soft); }
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:40px; }
.stat-tile{
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px 20px; text-align:center;
}
.stat-value{ display:block; font-family:var(--font-title); font-weight:900; font-size:30px; margin-bottom:8px; }
.stat-tile b{ display:block; font-size:14px; margin-bottom:6px; }
.stat-tile p{ font-size:12px; color:var(--gray-text); font-weight:400; line-height:1.5; }

.uso-section{ padding:80px 0; }
.device-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:40px; }
.device-card{
  text-align:center; background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:32px 24px; transition: transform .2s ease, box-shadow .2s ease;
}
.device-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.08); }
.device-icon{ width:56px; height:56px; border-radius:50%; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; }
.device-icon svg{ width:26px; height:26px; }
.device-card h4{ font-size:15px; margin-bottom:8px; }
.device-card p{ font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.55; }

.nosotros-cta{ padding:72px 0; background:var(--bg-soft); }
.nosotros-cta-inner{ text-align:center; }

@media (max-width:900px){
  .plataforma-grid{ grid-template-columns:1fr; }
  .benefits-grid{ grid-template-columns:repeat(2,1fr); }
  .stats-grid{ grid-template-columns:repeat(2,1fr); }
  .device-grid{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .benefits-grid, .stats-grid{ grid-template-columns:1fr; }
  .nosotros-hero-title{ font-size:26px; }
  .section-title-block{ font-size:24px; }
}

/* ---------- PARTNERS ---------- */
.partners{ background: var(--bg-soft); padding:56px 0; margin-top:64px; }
.section-title{ text-align:center; margin-bottom:8px; font-size:24px; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; max-width:640px; margin-left:auto; margin-right:auto; }

@media (max-width:600px){ .section-title{ font-size:19px; } }
.section-eyebrow{
  text-align:center; font-size:12px; color: var(--purple); font-weight:600;
  background:#EFEDFD; display:inline-block; padding:4px 12px; border-radius:14px;
  margin: 0 auto 12px; display:table;
}
.partners-fda-intro{
  text-align:center; font-size:13px; color: var(--gray-text); font-weight:400;
  max-width:520px; margin:0 auto 32px;
}
.logo-grid{
  display:grid; grid-template-columns:repeat(6,1fr);
  gap:16px; max-width:900px; margin:0 auto;
}
.logo-slot{ height:108px; }
.logo-slot .upload-slot{ height:100%; }

.cert-card{
  width:100%; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; padding:12px 6px; border-radius:14px;
  background: var(--surface); border:1px solid var(--border);
  text-align:center; transition: transform .15s ease, box-shadow .15s ease;
  font-family:inherit;
}
.cert-card:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.cert-icon{
  width:42px; height:42px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.cert-icon svg{ width:22px; height:22px; }

.icon-fill{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; }
.icon-fill svg{ width:56px; height:56px; }
.cert-label{ font-size:11px; font-weight:600; color:var(--ink); line-height:1.3; }

.tint-purple{ background:#EFEDFD; color:var(--purple); }
.tint-green{ background:#EAF7EE; color:var(--green-dark); }
.tint-orange{ background:#FDEEE1; color:var(--orange); }
.tint-red{ background:#FBE7E5; color:var(--red); }

@media (max-width:700px){ .logo-grid{ grid-template-columns:repeat(3,1fr);} }

/* ---------- CONTROL DE PROCESOS ---------- */
.control-section{ padding:80px 0; }
.control-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:48px; align-items:center;
}
.control-visual{
  display:grid;
  grid-template-columns: 1fr 1.15fr 1.15fr;
  grid-template-areas:
    "stats   photoA photoA"
    "materia photoA photoA"
    "photoB  estad  estad";
  gap:16px;
}
.float-card{
  display:flex; flex-direction:column; justify-content:center;
  background:var(--surface); border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08); padding:16px;
}
.card-stats{ grid-area:stats; }
.card-stats .amount{ font-size:20px; font-weight:900; }
.card-stats .delta{ color:var(--green); font-size:11px; font-weight:600; }
.bars-mini{ display:flex; align-items:flex-end; gap:4px; height:36px; margin-top:8px; }
.bars-mini span{ width:6px; background:var(--purple); border-radius:2px; }

.card-materia{ grid-area:materia; text-align:center; }
.ring{
  width:70px; height:70px; border-radius:50%; margin:0 auto 8px;
  background: conic-gradient(var(--green) 0% 72%, #EDEDED 72% 100%);
  display:flex; align-items:center; justify-content:center;
}
.ring span{
  width:52px; height:52px; border-radius:50%; background:var(--surface);
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800;
}
.card-materia small{ display:block; font-size:11px; color:var(--gray-text); }

.card-estad{ grid-area:estad; justify-content:flex-start; }

/* Espacios para fotos/capturas de gráficas dentro de "Control de Procesos" */
.control-photo{
  position:relative; border-radius:16px; overflow:hidden;
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
  transition: transform .2s ease, box-shadow .2s ease;
}
.control-photo:hover{ transform: translateY(-3px); box-shadow: 0 18px 38px rgba(0,0,0,.22); }
.control-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.photo-a{ grid-area:photoA; min-height:220px; }
.photo-b{ grid-area:photoB; min-height:130px; }

@media (max-width:640px){
  .control-visual{
    grid-template-columns:1fr;
    grid-template-areas:
      "photoA"
      "stats"
      "materia"
      "photoB"
      "estad";
  }
}

.live-badge{
  position:absolute; top:10px; left:10px; z-index:2;
  display:flex; align-items:center; gap:6px;
  background:rgba(15,17,20,.6); backdrop-filter: blur(2px);
  color:#fff; font-size:9px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:4px 10px 4px 8px; border-radius:20px;
}
.live-dot{
  width:6px; height:6px; border-radius:50%; background:#3DDC64; flex-shrink:0;
  box-shadow:0 0 0 0 rgba(61,220,100,.7);
  animation: live-pulse 1.8s ease-out infinite;
}
@keyframes live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(61,220,100,.7); }
  70%{ box-shadow:0 0 0 8px rgba(61,220,100,0); }
  100%{ box-shadow:0 0 0 0 rgba(61,220,100,0); }
}
.card-estad .legend{ display:flex; gap:10px; font-size:9px; color:var(--gray-text); margin-bottom:8px; }
.legend i{ width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:3px; }
.bars-big{ display:flex; align-items:flex-end; gap:8px; height:70px; }
.bars-big .bar-group{ display:flex; gap:3px; align-items:flex-end; flex:1; }
.bars-big .bar-group span{ flex:1; border-radius:3px 3px 0 0; }

.control-copy .tag{
  display:inline-block; font-size:11px; font-weight:700; color:var(--purple);
  background:#EFEDFD; padding:4px 12px; border-radius:14px; margin-bottom:14px;
}
.control-copy h2{ font-size:32px; margin-bottom:24px; }
.control-feature{ display:flex; gap:14px; margin-bottom:18px; align-items:flex-start; }
.control-feature .cf-icon{ font-size:20px; }
.control-feature h4{ font-size:15px; margin-bottom:2px; }
.control-feature p{ font-size:13px; color:var(--gray-text); font-weight:400; }
.control-actions{ display:flex; align-items:center; gap:20px; margin-top:24px; }
.control-actions p{ font-size:13px; color:var(--gray-text); font-weight:400; max-width:220px; }

@media (max-width:800px){
  .control-grid, .hero-grid{ grid-template-columns:1fr; }
  .hero-photo{ height:220px; }
}

@media (max-width:480px){
  .hero-photo{ height:180px; }
}

/* ---------- TRAZABILIDAD ---------- */
.traza-section{ padding:60px 0 80px; background: var(--bg-soft); }
.traza-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
.video-frame{
  border-radius:16px; overflow:hidden; aspect-ratio:16/9;
  background:#000; position:relative; margin-bottom:16px;
}
.video-frame iframe{ width:100%; height:100%; border:0; }
.traza-search{
  display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1px solid var(--border); border-radius:24px;
  padding:10px 16px; font-size:13px; color:var(--gray-text); margin-bottom:16px;
}
.food-photo{ border-radius:16px; overflow:hidden; height:280px; }
.food-photo img{ width:100%; height:100%; object-fit:cover; }

.traza-copy h2{
  font-size:28px; display:inline-block; padding-bottom:10px;
  border-bottom:4px solid var(--purple); margin-bottom:24px;
}
.traza-images{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.traza-images img{ width:100%; height:120px; object-fit:cover; border-radius:12px; }

/* ---------- CASOS DE ÉXITO ---------- */
.casos-section{ padding:80px 0; text-align:center; }
.casos-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:24px;
  text-align:left; margin-top:40px;
}
.caso-card{
  display:flex; flex-direction:column; gap:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:26px; box-shadow:0 8px 24px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.caso-card:hover{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(0,0,0,.09); }
.caso-card-head{ display:flex; align-items:center; gap:14px; }
.caso-thumb{
  width:56px; height:56px; border-radius:14px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.caso-thumb svg{ width:26px; height:26px; }
.caso-tag{
  display:block; font-size:10.5px; font-weight:700; color:var(--gray-text);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px;
}
.caso-card h4{ font-size:16px; }
.caso-metric{
  align-self:flex-start;
  background:var(--bg-soft); color:var(--purple); font-weight:700; font-size:12px;
  padding:6px 12px; border-radius:20px;
}
.caso-quote{
  font-size:13.5px; color:var(--ink); font-weight:400; font-style:italic; line-height:1.6;
}
.caso-author{ display:flex; align-items:center; gap:10px; margin-top:auto; }
.caso-author .avatar-dot{
  width:34px; height:34px; border-radius:50%; font-size:11px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
}
.caso-author b{ display:block; font-size:12.5px; font-weight:700; }
.caso-author span{ display:block; font-size:11px; color:var(--gray-text); font-weight:400; }

@media (max-width:800px){
  .traza-grid, .casos-grid{ grid-template-columns:1fr; }
}

/* ---------- OTROS SECTORES ---------- */
.sectores-section{ padding:80px 0; text-align:center; }
.sectores-grid{
  display:flex; justify-content:center; gap:56px; flex-wrap:wrap;
  margin:40px 0 48px;
}
.sector-item{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  width:150px;
}
.sector-icon{
  width:92px; height:92px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sector-item:hover .sector-icon{ transform: translateY(-4px) scale(1.04); box-shadow:0 14px 30px rgba(0,0,0,.14); }
.sector-icon svg{ width:38px; height:38px; }
.sector-item span{ font-size:13px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; }

.sectores-cta p{ font-size:14px; color:var(--gray-text); font-weight:400; max-width:520px; margin:0 auto 20px; line-height:1.6; }
.sectores-cta-actions{ display:flex; justify-content:center; gap:16px; flex-wrap:wrap; }

/* ---------- CONTACTO ---------- */
.contacto-section{ padding:80px 0; text-align:center; }
.contacto-section .section-eyebrow{ margin:0 auto 14px; }
.contacto-section h2{ font-size:28px; margin-bottom:14px; }
.contacto-section > .wrap > p{
  max-width:560px; margin:0 auto 36px; color:var(--gray-text); font-weight:400; font-size:14px; line-height:1.7;
}

.contacto-icons{ display:flex; justify-content:center; gap:16px; margin-bottom:48px; flex-wrap:wrap; }
.contacto-icon-chip{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  animation: chip-float 3.6s ease-in-out infinite;
}
.contacto-icon-chip svg{ width:24px; height:24px; }
.contacto-icon-chip:nth-child(2){ animation-delay:.3s; }
.contacto-icon-chip:nth-child(3){ animation-delay:.6s; }
.contacto-icon-chip:nth-child(4){ animation-delay:.9s; }
.contacto-icon-chip:nth-child(5){ animation-delay:1.2s; }
.contacto-icon-chip:nth-child(6){ animation-delay:1.5s; }
@keyframes chip-float{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

.contacto-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  max-width:760px; margin:0 auto;
}
.contacto-card{
  display:flex; align-items:center; gap:16px;
  background:var(--surface); border:1px solid var(--border); border-radius:18px;
  padding:22px 24px; text-align:left;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  position:relative; overflow:hidden;
}
.contacto-card::before{
  content:"";
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg);
  pointer-events:none;
  transition: left .6s ease;
}
.contacto-card:hover::before{ left:130%; }
.contacto-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0,0,0,.12);
}
.contacto-card-icon{
  width:48px; height:48px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  transition: transform .2s ease;
}
.contacto-card:hover .contacto-card-icon{ transform: scale(1.1); }
.contacto-card-icon svg{ width:24px; height:24px; }
.contacto-whatsapp .contacto-card-icon{ background:#EAF7EE; color:#25D366; }
.contacto-whatsapp:hover{ border-color:#25D366; }
.contacto-email .contacto-card-icon{ background:#EFEDFD; color:var(--purple); }
.contacto-email:hover{ border-color:var(--purple); }
.contacto-card-body{ flex:1; min-width:0; }
.contacto-card-body b{ display:block; font-size:14px; margin-bottom:2px; }
.contacto-card-body span{ font-size:13px; color:var(--gray-text); font-weight:400; word-break:break-word; }
.contacto-card-arrow{
  font-size:16px; color:var(--gray-text); flex-shrink:0;
  transition: transform .2s ease, color .2s ease;
}
.contacto-card:hover .contacto-card-arrow{ transform: translateX(4px); color:var(--ink); }

@media (max-width:700px){
  .contacto-grid{ grid-template-columns:1fr; }
}

/* ---------- FOOTER ---------- */
footer{ background:var(--surface); border-top:1px solid var(--border); padding:56px 0 24px; }
.footer-top{
  display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap:32px; margin-bottom:40px;
}
.footer-brand .logo{ margin-bottom:10px; }
.footer-brand p{ font-size:13px; color:var(--gray-text); font-weight:400; margin-bottom:16px; }
.subscribe-title{ font-size:15px; font-weight:800; margin-bottom:10px; }
.subscribe-box{
  display:flex; border:1px solid var(--border); border-radius:24px; overflow:hidden;
  max-width:260px;
}
.subscribe-box input{ flex:1; border:none; outline:none; padding:10px 14px; font-size:12px; font-family:inherit; color:inherit; background:transparent; }
.subscribe-box button{ background: var(--green); color:#fff; padding:0 18px; font-size:12px; font-weight:700; }

.footer-col h5{ font-size:13px; font-weight:800; margin-bottom:14px; }
.footer-col li{ margin-bottom:10px; }
.footer-col a{ font-size:13px; color:var(--gray-text); font-weight:400; }
.footer-col a:hover{ color: var(--green); }

.footer-bottom{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:24px; border-top:1px solid var(--border);
  font-size:12px; color:var(--gray-text); flex-wrap:wrap; gap:16px;
}
.socials{ display:flex; gap:10px; }
.socials span{
  width:30px; height:30px; border-radius:50%; background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; font-size:12px;
}
.footer-actions{ display:flex; gap:10px; }

/* ---------- BOTÓN FLOTANTE DE WHATSAPP ---------- */
.whatsapp-float{
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  z-index: 999;
  transition: transform .15s ease;
}
.whatsapp-float:hover{ transform: scale(1.08); }
.whatsapp-float svg{ width: 30px; height: 30px; }

@media (max-width:900px){
  .footer-top{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- MODAL DE VIDEO ---------- */
.video-modal{
  position:fixed; inset:0; z-index:1200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.video-modal.is-open{ display:flex; }
.video-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,10,14,.78);
  backdrop-filter: blur(2px);
  animation: modal-fade-in .2s ease;
}
.video-modal-dialog{
  position:relative; width:min(900px, 100%);
  animation: modal-pop-in .25s ease;
}
.video-modal-frame{
  border-radius:16px; overflow:hidden; aspect-ratio:16/9;
  background:#000; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.video-modal-frame iframe{ width:100%; height:100%; border:0; }
.video-modal-close{
  position:absolute; top:-44px; right:0;
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  font-size:20px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .15s ease, transform .15s ease;
}
.video-modal-close:hover{ background:rgba(255,255,255,.25); transform: scale(1.08); }

@keyframes modal-fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes modal-pop-in{ from{ opacity:0; transform: scale(.94); } to{ opacity:1; transform: scale(1); } }

@media (max-width:600px){
  .video-modal-close{ top:-40px; width:32px; height:32px; font-size:18px; }
}

/* ---------- MODAL DE AGENDA DE REUNIÓN ---------- */
.meeting-modal{
  position:fixed; inset:0; z-index:1200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.meeting-modal.is-open{ display:flex; }
.meeting-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,10,14,.6);
  backdrop-filter: blur(2px);
  animation: modal-fade-in .2s ease;
}
.meeting-modal-dialog{
  position:relative; width:min(420px, 100%);
  background:var(--surface); border-radius:20px; padding:28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: modal-pop-in .25s ease;
  max-height:90vh; overflow-y:auto;
}
.meeting-modal-close{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background: var(--bg-soft); color:var(--ink);
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .15s ease, transform .15s ease;
}
.meeting-modal-close:hover{ background:var(--border); transform: scale(1.08); }

.meeting-modal-head{
  display:flex; align-items:center; gap:12px; margin-bottom:22px; padding-right:24px;
}
.meeting-modal-head .avatar{
  border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.meeting-modal-head b{ display:block; font-size:15px; margin-bottom:2px; }
.meeting-modal-head span{ font-size:12px; color:var(--gray-text); font-weight:400; }

.meeting-form{ display:flex; flex-direction:column; gap:14px; }
.meeting-form label{ display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; color:var(--ink); }
.meeting-form input,
.meeting-form textarea{
  font-family:inherit; font-size:13px; font-weight:400; color:inherit;
  background:var(--bg-soft); border:1px solid var(--border); border-radius:10px;
  padding:10px 12px; outline:none; resize:vertical;
  transition: border-color .15s ease;
}
.meeting-form input:focus,
.meeting-form textarea:focus{ border-color:var(--purple); }
.meeting-form-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.meeting-form .btn{ margin-top:4px; width:100%; text-align:center; }

.meeting-success{ text-align:center; padding:12px 0 4px; }
.meeting-success-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  background:#EAF7EE; color:var(--green-dark);
  display:flex; align-items:center; justify-content:center;
}
.meeting-success-icon svg{ width:28px; height:28px; }
.meeting-success b{ display:block; font-size:17px; margin-bottom:8px; }
.meeting-success p{ font-size:13px; color:var(--gray-text); font-weight:400; margin-bottom:20px; line-height:1.5; }
.meeting-success .btn{ width:100%; }

@media (max-width:480px){
  .meeting-form-row{ grid-template-columns:1fr; }
}

/* ---------- MODAL DE INFORMACIÓN DE CERTIFICACIONES ---------- */
.cert-modal{
  position:fixed; inset:0; z-index:1200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.cert-modal.is-open{ display:flex; }
.cert-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(10,10,14,.6);
  backdrop-filter: blur(2px);
  animation: modal-fade-in .2s ease;
}
.cert-modal-dialog{
  position:relative; width:min(420px, 100%);
  background:var(--surface); border-radius:20px; padding:28px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: modal-pop-in .25s ease;
  max-height:85vh; overflow-y:auto;
  text-align:center;
}
.cert-modal-close{
  position:absolute; top:14px; right:14px;
  width:30px; height:30px; border-radius:50%;
  background: var(--bg-soft); color:var(--ink);
  font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition: background-color .15s ease, transform .15s ease;
}
.cert-modal-close:hover{ background:var(--border); transform: scale(1.08); }
.cert-modal-icon{
  width:56px; height:56px; border-radius:50%; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center;
}
.cert-modal-icon svg{ width:28px; height:28px; }
.cert-modal-title{ display:block; font-size:18px; margin-bottom:16px; }
.cert-modal-lines{
  list-style:none; text-align:left; display:flex; flex-direction:column; gap:10px;
}
.cert-modal-lines li{
  font-size:13px; color:var(--gray-text); font-weight:400; line-height:1.5;
  padding-left:16px; position:relative;
}
.cert-modal-lines li::before{
  content:""; position:absolute; left:0; top:7px;
  width:6px; height:6px; border-radius:50%; background:var(--purple);
}