@font-face{
  font-family: "Montserrat";
  src: url("./Montserrat/MoserratClassic.woff2") format("woff2"),
       url("./Montserrat/MoserratClassic.woff") format("woff");
  font-weight:400;
  font-style: normal;
  font-display: swap;
}

:root{
  /* Paleta y UI */
  --text:#ffffff;
  --muted:#9CA3AF;
  --card:#0f0f10;
  --border:rgba(255,255,255,.12);
  --yellow:#FFD54F;
  --pink:#FF5DA2;
  --white:#F5F5F5;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --cyan: #00ffff;

  /* Fondo creativo */
  --bg-deep-1:#0b0c10;
  --bg-deep-2:#0a0a0f;
  --glass: rgba(255,255,255,.035);

  --header-h: 64px;
}

/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  font:16px/1.6;
  font-family: "Montserrat", Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Fondo con capas: blobs de color + luz + base */
  background:
    radial-gradient(1200px 600px at -10% 5%, rgba(255,213,79,.09), transparent 60%),
    radial-gradient(1100px 550px at 110% 10%, rgba(255,93,162,.10), transparent 60%),
    radial-gradient(900px 520px at 50% 120%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(1200px 900px at 50% -40%, rgba(255,255,255,.04), transparent 70%),
    linear-gradient(180deg, var(--bg-deep-1), var(--bg-deep-2));
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* Luces suaves animadas */
body::before{
  content:"";
  position: fixed; inset:-10%;
  pointer-events:none; z-index:-1;
  background:
    radial-gradient(400px 280px at 15% 40%, rgba(255,213,79,.08), transparent 60%),
    radial-gradient(360px 260px at 85% 35%, rgba(255,93,162,.09), transparent 60%),
    radial-gradient(320px 220px at 70% 80%, rgba(255,255,255,.05), transparent 60%);
  filter: blur(2px);
  animation: bg-drift 38s linear infinite alternate;
}

/* Textura sutil */
body::after{
  content:"";
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  opacity:.10; mix-blend-mode: soft-light;
  background-image:
    repeating-linear-gradient( 0deg, rgba(255,255,255,.015) 0 1px, transparent 1px 2px),
    url("data:image/svg+xml;utf8,\<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'>\<filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .35 0'/></feComponentTransfer></filter>\<rect width='100%%' height='100%%' filter='url(#n)' />\</svg>");
  background-size: auto, 180px 180px;
  animation: grainMove 12s linear infinite;
}
@keyframes bg-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-1.5%,0) scale(1.02)}100%{transform:translate3d(0,1.5%,0) scale(1.01)}}
@keyframes grainMove{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-3%,-3%,0)}}

img{
  max-width:100%;
  display:block
}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 20px
}

/* Enlaces sin subrayado (global) */
a, a:visited, a:hover, a:focus, a:active { text-decoration:none; color:inherit; }

/* Links utilitarios */
.link{color:#cfcfcf}
.link:hover{color:#fff}

/* ===== Marca/Logo ===== */
.logo { color:#fff; gap:8px; }
.logo-img { height:40px; width:auto; display:block; }

/* ===== HEADER (glass + pills + underline) ===== */
.header{
  position: sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.52));
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(10px) saturate(140%);
}
.nav{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; }
.brand{ display:flex; align-items:center; gap:10px; color:#fff; }
.brand strong{ font-weight:800; letter-spacing:.2px; }

/* Menú + CTA */
.menu{
  flex:1; display:flex; justify-content:center; align-items:center; position:relative;
  padding-right:148px;
}
.menu a{
  position:relative; 
  font-size: 20px;
  padding:10px 14px; 
  border-radius:12px;
   color:#ffffff; 
   transition:color .2s ease; 
   overflow:hidden;
}
.menu a::before{
  content:""; 
  position:absolute; 
  inset:0; 
  border-radius:12px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,213,79,.16), transparent 60%),
              radial-gradient(120% 120% at 100% 100%, rgba(255,93,162,.16), transparent 60%);
  transform:scale(.9); 
  opacity:0; 
  transition:transform .25s ease, 
  opacity .25s ease;
}
.menu a::after{
  content:"";
  position:absolute; 
  left:14px; 
  right:14px;
  bottom:6px;
  height:2px;
  border-radius:2px;
  background: linear-gradient(90deg, var(--yellow), var(--pink));
  transform:scaleX(0); 
  transform-origin:left;
   transition:transform .25s ease; 
   opacity:.85;
}
.menu a:hover,.menu a:focus{ color:#fff; }
.menu a:hover::before{ opacity:1; transform:scale(1); }
.menu a:hover::after{ transform:scaleX(1); }

.menu .cta{
  position:absolute; right:0; background:linear-gradient(135deg, var(--pink), #f14a95);
  color:#000; font-weight:800 !important; padding:10px 16px; border-radius:999px;
  box-shadow:0 6px 20px rgba(255,93,162,.32); border:1px solid rgba(255,255,255,.12);
  transition:transform .15s ease, box-shadow .2s ease, filter .15s ease;
}
.menu .cta:hover{ filter:brightness(1.05); transform:translateY(-1px); box-shadow:0 10px 28px rgba(255,93,162,.38); }

/* Hamburguesa */
.hamburger{ display:none; border:1px solid var(--border); border-radius:12px; padding:8px; background:#000; color:#fff }
.hamburger svg{ width:20px; height:20px }

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;padding:80px 0;text-align:center}
.hero::before{content:"";position:absolute;inset:-20%;z-index:-1;background:
  radial-gradient(600px 300px at 10% 10%, var(--yellow), transparent 60%),
  radial-gradient(600px 300px at 90% 10%, var(--pink), transparent 60%)}
.hero h1{
  font-size:58px;
  line-height:1.15;
  margin:0}
.hero p{
  font-size:20px;
  color:var(--white);
  max-width:720px;
  margin:30px auto
}
.hero-ctas{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:30px;
  flex-wrap:wrap
}
.bullets{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; color:#d8d8d8; margin:26px 0 0; padding:0; list-style:none }

.hero{
  /* usa svh/dvh para móviles modernos (teclado, barras, etc.) */
  min-height: calc(100svh - var(--header-h, 0px));
  display: grid;
  place-content: center;        /* centra título, texto y botones */
  padding-block: clamp(40px, 8vh, 96px);
}

/* opcional: limita el ancho del contenido del hero */
.hero .container{ max-width: 1100px; }
/* ===== Botones ===== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  border-radius:12px;
  font-weight:700;
  border:1px solid transparent;
  cursor:pointer
}
.btn-yellow{ background:var(--yellow); color:#000 !important }
.btn-cyan{ background:var(--cyan); color:#000 !important}
.btn-pink{ background:var(--pink); color:#000 }
.btn-outline{border-color:var(--border);color:#fff;background:transparent}
.btn-ghost{border-color:var(--border);background:transparent;color:#fff}
.btn:hover{filter:brightness(1.05)}

/* ===== Secciones ===== */
.section{
  padding:40px 0;
}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.section h2{font-size:28px;margin:0}

.separation{
  padding: 20px;
}
/* ===== Cards ===== */
.grid{display:grid;gap:20px}
.cards{grid-template-columns:repeat(3,1fr)}
.card,.service,.cta-final,.form{
  background: var(--glass); backdrop-filter: blur(6px);
  border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.card{
  padding:20px
}
.tag{
  position:absolute;
  top:14px;right:14px;
  font-size:10px;
  letter-spacing:.06em;
  padding:6px 8px;
  border-radius:999px;
  color:#000;
  font-weight:700
}
.tag-pink{
  background:var(--pink)
}

.card .ph{
  height: 200px;              /* alto del recuadro (cámbialo si quieres) */
  border-radius: 12px;
  background: white;
  overflow: hidden;
  display: flex;               /* centra la imagen */
  align-items: center;
  justify-content: center;
}
.card .ph img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;         /* clave: quepa dentro del recuadro */
  display: block;
}
/* ===== Servicios ===== */
.service{padding:20px}
.bar{width:8px;height:24px;border-radius:6px;margin-bottom:10px}
.bar-yellow{background:var(--yellow)}
.bar-pink{background:var(--pink)}

/* ===== Grid marcas (legacy) ===== */
.brands{grid-template-columns:repeat(5,1fr)}
.brand-card{display:grid;place-items:center;height:72px;border:1px solid var(--border);border-radius:12px;background:rgba(0,0,0,.4);opacity:.9}

/* ===== Contacto ===== */
.contact{display:grid;grid-template-columns:1.1fr .9fr;gap:26px}
.contact-list{margin:14px 0 0;padding:0;list-style:none;color:#e1e1e1}
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px}
.form label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.form label.full{grid-column:1 / -1}
.form input,.form textarea{background:#0b0b0b;border:1px solid var(--border);border-radius:12px;padding:12px;color:#fff}
.form input:focus,.form textarea:focus{outline:none;border-color:#ffffff3a}
.form-msg{margin:8px 0 0;color:var(--white)}

/* ===== CTA final ===== */
.cta-final{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px}
.cta-actions{display:flex;gap:10px;flex-wrap:wrap}
.txt-yellow{color:var(--yellow)}
.txt-cyan{color:var(--cyan)}
.txt-pink{color:var(--pink)}

/* ===== Footer ===== */
.footer{ border-top:1px solid var(--border); padding:24px 0; color:#cfcfcf }
.footer .container{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap }
.footer a{ color:#cfcfcf }
.footer a:hover{ color:#fff }
.footer .foot-links{
  margin-left: auto;                 /* empuja el grupo a la derecha */
  display: flex;
  gap: 10px;
}

.footer .foot-links a{
  position: relative;
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  color: #cfcfcf;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: color .2s ease, filter .2s ease;
}

/* brillo suave en hover (igual al menú) */
.footer .foot-links a::before{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(120% 120% at 0% 0%, rgba(255,213,79,.16), transparent 60%),
    radial-gradient(120% 120% at 100% 100%, rgba(255,93,162,.16), transparent 60%);
  transform: scale(.92);
  opacity: 0;
  transition: transform .25s ease, opacity .25s ease;
}

/* subrayado degradado */
.footer .foot-links a::after{
  content: "";
  position: absolute; left: 14px; right: 14px; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--yellow), var(--pink));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
  opacity: .9;
}

.footer .foot-links a:hover,
.footer .foot-links a:focus{
  color:#fff;
}

.footer .foot-links a:hover::before{ 
  opacity:1; 
  transform:scale(1); 
}
.footer .foot-links a:hover::after{ 
  transform:scaleX(1);
 }


/* ===== Marquee de marcas ===== */
.brand-scroller{ --gap:24px; position:relative; overflow:hidden; padding:8px 0;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);}
.brand-track{ display:flex; align-items:center; gap:var(--gap); width:max-content; will-change:transform; animation:brand-scroll var(--dur,28s) linear infinite; }
.brand-scroller:hover .brand-track{ animation-play-state:running; }
.brand-pill{ flex:0 0 auto; min-width:230px; min-height:130px; padding:18px 28px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:center; }
.brand-pill img{ display:block; height:34px; width:auto; opacity:.95; }
.brand-pill img[alt="Kyocera"]{ height:60px } .brand-pill img[alt="Samsung"]{ height:60px } .brand-pill img[alt="Canon"]{ height:80px } .brand-pill img[alt="Epson"]{ height:70px } .brand-pill img[alt="HP"]{ height:60px } .brand-pill img[alt="Brother"]{ height:40px }
@keyframes brand-scroll{from{transform:translateX(0)}to{transform:translateX(var(--to,-50%))}}

/* ===== Título / filtros ===== */
.catalogo-title{ text-align:center; font-size:34px; margin:0 0 16px; }
.brand-tabs{ display:flex; gap:18px; align-items:center; justify-content:center; padding:12px 18px; border:1px solid var(--border); border-radius:999px; background:rgba(255,255,255,.03); box-shadow:var(--shadow); overflow:auto; }
.brand-tab{ position:relative; border:1px solid transparent; background:transparent; color:#e8e8e8; padding:10px 16px; border-radius:999px; font-weight:700; cursor:pointer; transition:filter .2s ease,color .2s ease,border-color .2s ease; white-space:nowrap; }
.brand-tab:hover{ color:#fff; filter:brightness(1.05); }
.brand-tab.is-active{ color:#000; }
.brand-tab.is-active .pill-fill{ display:inline-block; padding:8px 16px; border-radius:999px; background: linear-gradient(135deg, var(--yellow), var(--pink)); }
.brand-tab--outline{ border-color: rgba(255,255,255,.25); border-radius:999px; }
.brand-tab--outline.is-active{ color:#fff; border-color:#fff; }

/* Pills filtros */
.filters{ position:sticky; top:70px; z-index:5; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:18px auto 10px; padding:10px 12px; background:var(--glass); border:1px solid var(--border); border-radius:999px; width:max-content; backdrop-filter: blur(6px); }
.filters a{ position:relative; display:inline-block; padding:10px 16px; border-radius:999px; color:#e6e6e6; font-weight:600; white-space:nowrap; transition: color .2s ease, border-color .2s ease, filter .2s ease; isolation:isolate; }
.filters a::after{ content:""; position:absolute; inset:0; border-radius:inherit; background: linear-gradient(135deg, yellow, var(--pink)); opacity:0; transition: opacity .22s ease, transform .25s ease; z-index:-1; }
.filters a:hover{ color:#000; border-color:#000; filter:brightness(1.02); }
.filters a:hover::after{ opacity:1; transform:scale(1); }
.filters a.is-active{ color:#000; border-color:#000; }
.filters a.is-active::after{ opacity:1; transform:scale(1); }
.filters a:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

/* ===== Breadcrumbs / secciones catálogo ===== */
.breadcrumb{ color:#cfcfcf; font-size:14px; margin:10px 0 0 }
.breadcrumb a,.breadcrumb strong{ opacity:.9; font-size:16px; }
.page-title{ text-align:center; margin:24px 0 40px }
.brand-section{ padding:34px 0; border-top:1px solid var(--border) }
.brand-title{ display:flex; align-items:center; justify-content:center; gap:12px; margin:0 0 40px; font-size:26px; }
.brand-title img{ height:50px; width:auto; opacity:.95 }
.brand-title img[alt="Xerox"]{ height:50px } .brand-title img[alt="Minolta"]{ height:50px } .brand-title img[alt="Ricoh"]{ height:40px } .brand-title img[alt="Kyocera"]{ height:80px } .brand-title img[alt="Samsung"]{ height:80px } .brand-title img[alt="Canon"]{ height:90px } .brand-title img[alt="Epson"]{ height:80px } .brand-title img[alt="HP"]{ height:80px } .brand-title img[alt="Brother"]{ height:50px }

/* ===== Flechas centradas (sin animación) + Carrusel (3 por vista) ===== */
.brand-section .container{ position:relative; }

/* Flechas sin animación/hover y centradas verticalmente */
.brand-arrow{
  position:absolute;
  top:50%;
  width:44px; height:44px;
  display:grid; place-items:center;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--border);
  box-shadow:none;
  cursor:pointer;
  z-index:4;
  transform:translateY(50%);
  transition:none;              /* sin animación */
}
.brand-arrow:hover,
.brand-arrow:focus{ filter:none; transform:translateY(50%); }
.brand-arrow:disabled{ opacity:.55; cursor:default; }
.brand-arrow svg{ width:22px; height:22px; color:#fff; }
.brand-arrow--prev{ left:-30px; }
.brand-arrow--next{ right:-30px; }

/* Carrusel 3 visibles */
.cards.carousel{
  --gap:20px;
  display:block;                /* anula el grid debajo */
  position:relative;
  overflow:hidden;
}
.cards.carousel .cards-rail{
  display:flex; gap:var(--gap);
  will-change:transform;
  transition:transform .35s ease;
}
.cards.carousel .card{
  flex:0 0 auto;
  min-width:calc((100% - 2 * var(--gap)) / 3);
}

/* Contenedor del botón + iconos: en columna y centrado */
.cta-actions{
  display:flex;
  flex-direction:column;
  align-items:center;          /* centra los iconos con el botón */
  gap:12px;
}
.cta-actions .btn{
  white-space:nowrap;         /* evita que el texto del botón se parta */
  padding:14px 28px;          /* más “largo” */
  min-width:320px;            /* fuerza un ancho cómodo (ajusta a gusto) */
}

/* Fila de iconos circulares */
.social-ctas{
  display:flex;
  gap:12px;
}

/* Botones redondos sin texto */
.icon-round{
  width:48px;
  height:48px;
  border-radius:999px;
  display:grid;
  place-items:center;
  border:1px solid var(--border);
  background:rgba(255,255,255,.04);
  transition:filter .15s ease, transform .1s ease;
}
.icon-round:hover{ filter:brightness(1.08); transform:translateY(-1px); }
.icon-round img{
  width:22px; height:22px; display:block;
}

/* ===== Servicios (rediseño) ===== */
.services .services-head{
  text-align:center; margin-bottom:22px;
}
.services-head h2{
  font-size: 40px;
}
.services .services-sub{
  font-size: 20px;
  color:var(--white);
   margin:8px auto 0; 
   max-width:720px;
}

.services-grid{
  display:grid; gap:18px;
  grid-template-columns: repeat(3, 1fr);
}

.srv-card{
  position:relative;
  padding:22px 20px;
  border:1px solid var(--border);
  border-radius:20px;
  background: radial-gradient(120% 120% at 0% 0%, rgba(255,213,79,.06), transparent 60%),
              radial-gradient(120% 120% at 100% 100%, rgba(255,93,162,.06), transparent 60%),
              rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .2s ease, filter .2s ease;
}
.srv-card:hover{ transform: translateY(-2px); border-color:#ffffff2a; filter:brightness(1.02); }

.srv-icon{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center; font-size:20px; font-weight:700;
  background: linear-gradient(135deg, var(--yellow), var(--pink));
  color:#000; margin-bottom:10px;
}

.srv-card h3{ margin:6px 0 4px; }
.srv-card p{ color:#fafafa; margin:0 0 10px; }
.srv-list{ margin:0; padding-left:18px; color:#e9e9e9; }
.srv-list li{ margin:6px 0; }

/* Obligaciones */
.duties{
  margin-top:26px;
  display:grid; gap:16px;
  grid-template-columns: 1fr 1fr;
}
.duties-col{
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 20px;
  background: rgba(255,255,255,.03);
}
.duties-col h4{ margin:0 0 8px; }
.duties-col ul{ margin:0; padding-left:18px; color:#e9e9e9; }
.duties-col li{ margin:8px 0; }

/* Responsive */
@media (max-width:980px){
  .services-grid{ grid-template-columns:1fr 1fr; }
  .duties{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .services-grid{ grid-template-columns:1fr; }
}


/* Opcional: en pantallas muy pequeñas, un poco más chicos */
@media (max-width:480px){
  .icon-round{ width:44px; height:44px; }
  .icon-round img{ width:20px; height:20px; }
}


@media (max-width:860px){
  .brand-arrow{ display:none; }
}

/* ===== Responsive ===== */
@media (max-width:980px){ .cards{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .cards{grid-template-columns:1fr} }

@media (max-width:860px){
  .menu{ display:none; padding-right:0 }
  .hamburger{ display:inline-flex }
  .mobile{ display:flex; flex-direction:column; gap:8px; padding:12px 0 16px }
  .mobile a{ position:relative; padding:12px 14px; border-radius:12px; color:#e6e6e6; background:rgba(255,255,255,.03); border:1px solid var(--border) }
  .mobile a:hover{ color:#fff; background:rgba(255,255,255,.06) }
  .mobile .cta{ align-self:flex-start; background:linear-gradient(135deg, var(--pink), #ff81b9); border:1px solid rgba(255,255,255,.12) }
}

@media (max-width:900px){ .contact{grid-template-columns:1fr} }