:root{
	--brand: #0096b1;
	--ink: #004966;
	--bs-primary: hwb(29 3% 36%);
	--bs-primary-rgb: 163, 82, 7;
	--upfim-primary: #14b8c4;
	--upfim-primary-hover: #753905;
	--upfim-primary-active: #5e2f04;
}
body{ color: #1f2937; }
.btn-primary{
	--bs-btn-bg: var(--upfim-primary);
	--bs-btn-border-color: var(--upfim-primary);
	--bs-btn-hover-bg: var(--upfim-primary-hover);
	--bs-btn-hover-border-color: var(--upfim-primary-hover);
	--bs-btn-active-bg: var(--upfim-primary-active);
	--bs-btn-active-border-color: var(--upfim-primary-active);
}

.btn-outline-primary{
	--bs-btn-color: var(--upfim-primary);
	--bs-btn-border-color: var(--upfim-primary);
	--bs-btn-hover-bg: var(--upfim-primary);
	--bs-btn-hover-border-color: var(--upfim-primary);
	--bs-btn-active-bg: var(--upfim-primary-active);
	--bs-btn-active-border-color: var(--upfim-primary-active);
}
.progress-bar{
	background-color: var(--bs-primary);
}
/* Accordion institucional */
.accordion{
	--bs-accordion-active-color: #00568f;
	--bs-accordion-active-bg: rgba(163, 82, 7, 0.08);
	
	--bs-accordion-btn-focus-border-color: #006e8f;
	--bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(163, 82, 7, .25);
	
	--bs-accordion-border-color: rgba(163, 82, 7, .35);
}


.topbar{
	background:#0c94a7;
	color:#cbd5e1;
	font-size:.9rem;
}
.topbar a{ color:#cbd5e1; text-decoration:none; }
.topbar a:hover{ color:#fff; }
.navbar{
	transition: box-shadow .2s ease, background .2s ease;
}
.navbar.navbar-scrolled{
	box-shadow: 0 10px 30px rgba(0,0,0,.08);
	background:#fff;
}

.hero{
	background:
	linear-gradient(120deg, rgba(11,18,32,.80), rgba(11,18,32,.45)),
	url("../images/hero.jpg");
	background-size: cover;
	background-position: center;
	color: #fff;
	min-height: 74vh;
	display:flex;
	align-items:center;
}
.hero .badge{
	background: rgba(255,255,255,.14);
	border: 1px solid rgba(255,255,255,.22);
}
.section-title{
	letter-spacing:.08em;
	text-transform:uppercase;
	font-size:.85rem;
	color:#64748b;
}
.feature-card{
	border: 1px solid rgba(15, 23, 42, .08);
	box-shadow: 0 12px 32px rgba(15, 23, 42, .05);
	transition: transform .15s ease, box-shadow .15s ease;
	height:100%;
}
.feature-card:hover{
	transform: translateY(-3px);
	box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}
.icon-pill{
	width:44px;height:44px;border-radius:14px;
	display:grid;place-items:center;
	background: rgba(253, 157, 13, 0.1);
	color: var(--brand);
	font-size:1.25rem;
}

.soft-bg{ background: #fcfaf8; }
.img-cover{
	width:100%; height:100%; object-fit:cover;
	border-radius: 1.25rem;
}

.team-card img{
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 1rem;
}

.quote{
	font-size: 1.02rem;
	line-height: 1.7;
	color:#2a1c0f;
}

.counter{
	font-weight: 800;
	font-size: 2rem;
	color:#69380a;
}

.portfolio-item{
	position:relative;
	overflow:hidden;
	border-radius: 1rem;
	border: 1px solid rgba(15, 23, 42, .08);
}
.portfolio-item img{
	width:100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: transform .25s ease;
}
.portfolio-item:hover img{ transform: scale(1.04); }
.portfolio-item .overlay{
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(11,18,32,0) 35%, rgba(32, 21, 11, 0.78));
	display:flex;
	align-items:flex-end;
	padding: 1rem;
	color:#fff;
}
.overlay small{ color: rgba(255, 255, 255, 0.78); }

.price-card{
	border-radius: 1.25rem;
	border: 1px solid rgba(15, 23, 42, .08);
	box-shadow: 0 14px 40px rgba(15, 23, 42, .06);
	height:100%;
}
.price-card.popular{
	border: 2px solid rgba(141, 60, 6, 0.35);
}

footer{
	background:#200c02;
	color:#e1d6cb;
}
footer a{ color:#e1d6cb; text-decoration:none; }
footer a:hover{ color:#fff; }

.back-to-top{
	position: fixed;
	right: 18px;
	bottom: 18px;
	display: none;
	z-index: 1050;
}

/* ==========================
   Overlay modal robótica (blur + bokeh)
========================== */

/* Backdrop con blur real (aplica al fondo del sitio) */
.modal-backdrop.show{
  opacity: .78;
  background: rgba(2, 6, 23, 0.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Modal “glass” */
.robotica-modal-content{
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.14);
  position: relative;
}

/* Botón cerrar arriba */
.robotica-modal-close{
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
}

/* Lado imagen */
.robotica-modal-media{
  position: relative;
  min-height: 280px;
}
.robotica-modal-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.06);
}
.robotica-modal-media::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(0,0,0,.20), rgba(0,0,0,.55));
}

.robotica-modal-badges{
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Texto */
.robotica-modal-body{
  padding: 26px 24px;
  color: rgba(255,255,255,.92);
}

.robotica-kicker{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  letter-spacing: .2px;
  background: rgba(0,177,61,.18);
  border: 1px solid rgba(0,177,61,.35);
  padding: 8px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.robotica-title{ font-weight: 800; line-height: 1.08; }
.robotica-lead{ color: rgba(255,255,255,.85); max-width: 70ch; }

.robotica-meta{ display: grid; gap: 10px; }
.robotica-chip{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 10px 12px;
  color: rgba(255,255,255,.86);
}

.robotica-foot{ color: rgba(255,255,255,.82); }
.robotica-mini{ color: rgba(255,255,255,.68); font-size: .92rem; }

/* Bokeh (burbujas de luz) */
.robotica-bokeh{
  position: absolute;
  inset: -40px;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.robotica-bokeh span{
  position: absolute;
  display: block;
  width: 220px;
  height: 220px;
  border-radius: 999px;
  filter: blur(18px);
  opacity: .55;
  animation: rbFloat 10s ease-in-out infinite;
}
.robotica-bokeh .b1{ top: 10%; left: 5%;  background: rgba(0,177,61,.55); animation-duration: 11s; }
.robotica-bokeh .b2{ top: 55%; left: 12%; background: rgba(255,255,255,.25); animation-duration: 13s; }
.robotica-bokeh .b3{ top: 18%; right: 8%; background: rgba(255,193,7,.45); animation-duration: 12s; }
.robotica-bokeh .b4{ bottom: 8%; right: 10%; background: rgba(0,177,61,.40); animation-duration: 14s; }
.robotica-bokeh .b5{ top: 35%; right: 28%; background: rgba(255,255,255,.18); animation-duration: 15s; }
.robotica-bokeh .b6{ bottom: 18%; left: 35%; background: rgba(255,193,7,.30); animation-duration: 16s; }

@keyframes rbFloat{
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(10px,-18px,0) scale(1.08); }
  100% { transform: translate3d(0,0,0) scale(1); }
}

/* Para que el contenido quede arriba del bokeh */
#roboticaModal .modal-body > .row{ position: relative; z-index: 2; }

@media (max-width: 991.98px){
  .robotica-modal-body{ padding: 20px 18px; }
  .robotica-modal-media{ min-height: 220px; }
}

html, body { width:100%; overflow-x:hidden; }
.hero { overflow:hidden; }

@media (max-width: 991.98px){
  .hero{ background-attachment: scroll !important; }
  .hero{ min-height: 100svh; }
}