/* ============================================================
   OPPO EVOLUTION · ACADEMIA DE TECNOLOGÍA · ESTILO ÚNICO V37
   Última capa visual: no mezclar con estilos históricos.
   Patrón: círculo + ícono → título → categoría → definición → Cómo explicarlo
   ============================================================ */

#tecnologia{
  padding:0 18px 34px!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(153,218,255,.18),transparent 28%),
    linear-gradient(180deg,#eef9ff 0%,#eafaff 52%,#f4ffff 100%)!important;
  border-radius:0!important;
  overflow:hidden;
}

#tecnologia .tech-academy-shell{
  position:relative!important;
  z-index:2;
  padding:16px 0 8px!important;
}

#tecnologia .tech-academy-hero{
  display:grid!important;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.8fr)!important;
  gap:28px!important;
  align-items:start!important;
  padding:8px 6px 18px!important;
  min-height:0!important;
  background:transparent!important;
  border-radius:0!important;
}

#tecnologia .tech-eyebrow{
  color:#2d68df!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:.02em!important;
  margin-bottom:10px!important;
}

#tecnologia .tech-hero-copy h2{
  font-size:32px!important;
  line-height:1.12!important;
  margin:0 0 10px!important;
  color:#102f66!important;
  font-weight:900!important;
  letter-spacing:-.03em!important;
}

#tecnologia .tech-hero-copy p{
  font-size:15px!important;
  line-height:1.55!important;
  max-width:800px!important;
  color:#557397!important;
  margin:0!important;
}

#tecnologia .tech-search-wrap{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  margin:2px 0 0!important;
}

#tecnologia .tech-search-wrap input{
  width:100%!important;
  height:50px!important;
  border-radius:27px!important;
  border:1px solid #d7e8f3!important;
  background:rgba(255,255,255,.96)!important;
  box-shadow:0 7px 18px rgba(63,113,153,.07)!important;
  padding:0 20px 0 48px!important;
  font-size:13px!important;
  color:#163b70!important;
  outline:none!important;
}

#tecnologia .tech-search-wrap input:focus{
  border-color:#83b4f5!important;
  box-shadow:0 0 0 4px rgba(45,104,223,.08)!important;
}

#tecnologia .tech-search-icon{
  position:absolute!important;
  left:18px!important;
  z-index:2!important;
  font-size:25px!important;
  line-height:1!important;
  color:#6b91bd!important;
  transform:rotate(-20deg);
}

/* Pestañas: una sola barra horizontal, todas funcionales. */
#tecnologia .tech-tabs{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  margin:0 0 18px!important;
  padding:11px!important;
  border:1px solid #e2edf5!important;
  border-radius:20px!important;
  background:rgba(255,255,255,.93)!important;
  box-shadow:0 8px 24px rgba(27,76,115,.07)!important;
  scrollbar-width:thin!important;
  scroll-behavior:smooth!important;
}

#tecnologia .tech-tabs .tab{
  position:relative!important;
  flex:0 0 auto!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-width:max-content!important;
  min-height:44px!important;
  padding:7px 15px 7px 9px!important;
  border:1px solid transparent!important;
  border-radius:25px!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:900!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  user-select:none!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}

#tecnologia .tech-tabs .tab:hover{
  transform:translateY(-1px)!important;
  box-shadow:0 5px 14px rgba(55,104,143,.09)!important;
}

#tecnologia .tech-tabs .tab.active{
  box-shadow:0 0 0 2px rgba(255,255,255,.96),0 7px 18px rgba(55,104,143,.13)!important;
  transform:translateY(-1px)!important;
}

#tecnologia .tech-tabs .tab>svg,
#tecnologia .tech-tab-icon.all{
  width:27px!important;
  height:27px!important;
  min-width:27px!important;
  min-height:27px!important;
  flex:0 0 27px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border-radius:50%!important;
}

#tecnologia .tech-tabs .tab>svg{
  padding:5px!important;
  background:rgba(255,255,255,.82)!important;
  stroke:currentColor!important;
  fill:none!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#tecnologia .tech-tab-icon.all{
  background:#eef4ff!important;
  font-size:14px!important;
  color:#235bc8!important;
}

/* Colores únicos por categoría: pestaña y tarjeta comparten código cromático. */
#tecnologia .tech-cat-ia-camara{--tech-color:#7a3ff2;--tech-bg:#eee2ff;--tech-pill:#f1e7ff}
#tecnologia .tech-cat-bateria-carga{--tech-color:#0da77f;--tech-bg:#dcf8ee;--tech-pill:#e7faf3}
#tecnologia .tech-cat-procesador{--tech-color:#2d6fe4;--tech-bg:#e0ecff;--tech-pill:#e9f2ff}
#tecnologia .tech-cat-conectividad{--tech-color:#109b86;--tech-bg:#dcf8f2;--tech-pill:#e8faf7}
#tecnologia .tech-cat-proteccion{--tech-color:#f28a2d;--tech-bg:#ffead8;--tech-pill:#fff2e7}
#tecnologia .tech-cat-camara{--tech-color:#7a3ff2;--tech-bg:#eee2ff;--tech-pill:#f1e7ff}
#tecnologia .tech-cat-pantalla{--tech-color:#8a3fe5;--tech-bg:#f0e3ff;--tech-pill:#f5edff}
#tecnologia .tech-cat-rendimiento{--tech-color:#3c72e5;--tech-bg:#e2edff;--tech-pill:#edf4ff}
#tecnologia .tech-cat-almacenamiento{--tech-color:#dc6d3f;--tech-bg:#ffebe2;--tech-pill:#fff1eb}
#tecnologia .tech-cat-software{--tech-color:#7051df;--tech-bg:#ece7ff;--tech-pill:#f3efff}
#tecnologia .tech-cat-video{--tech-color:#dc5f88;--tech-bg:#ffe7ef;--tech-pill:#fff0f5}
#tecnologia .tech-cat-memoria{--tech-color:#138ca3;--tech-bg:#def5fa;--tech-pill:#ebfafc}

#tecnologia .tech-tabs .tab.tech-cat-todos{background:#f4f8ff!important;color:#235bc8!important}
#tecnologia .tech-tabs .tab.tech-cat-ia-camara{background:#f0e5ff!important;color:#7434df!important}
#tecnologia .tech-tabs .tab.tech-cat-bateria-carga{background:#e5fbf3!important;color:#168c72!important}
#tecnologia .tech-tabs .tab.tech-cat-procesador{background:#e7f0ff!important;color:#2369d9!important}
#tecnologia .tech-tabs .tab.tech-cat-conectividad{background:#e4fbf7!important;color:#10927e!important}
#tecnologia .tech-tabs .tab.tech-cat-proteccion{background:#fff0df!important;color:#ec7927!important}
#tecnologia .tech-tabs .tab.tech-cat-camara{background:#f0e6ff!important;color:#7b36d8!important}
#tecnologia .tech-tabs .tab.tech-cat-pantalla{background:#f2e7ff!important;color:#8b3fd7!important}
#tecnologia .tech-tabs .tab.tech-cat-rendimiento{background:#e7efff!important;color:#356ed8!important}
#tecnologia .tech-tabs .tab.tech-cat-almacenamiento{background:#ffefe7!important;color:#d96a3a!important}
#tecnologia .tech-tabs .tab.tech-cat-software{background:#eeeaff!important;color:#6e50d9!important}
#tecnologia .tech-tabs .tab.tech-cat-video{background:#ffe8f0!important;color:#d95784!important}
#tecnologia .tech-tabs .tab.tech-cat-memoria{background:#e0f7fb!important;color:#16869f!important}

/* Tarjetas: patrón visual único. */
#tecnologia .tech-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:16px!important;
  padding:0 2px!important;
  margin:0!important;
  align-items:stretch!important;
}

#tecnologia .tech-card{
  position:relative!important;
  min-height:300px!important;
  height:auto!important;
  padding:18px 18px 16px!important;
  border-radius:18px!important;
  border:1px solid rgba(215,229,239,.95)!important;
  background:rgba(255,255,255,.98)!important;
  box-shadow:0 8px 22px rgba(49,96,133,.075)!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}

#tecnologia .tech-card:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 27px rgba(49,96,133,.11)!important;
}

/* EL ÍCONO ESTÁ DENTRO DEL CÍRCULO. */
#tecnologia .tech-card .tech-card-icon,
#tecnologia .tech-card .tech-icon{
  width:58px!important;
  height:58px!important;
  min-width:58px!important;
  min-height:58px!important;
  margin:0 0 14px!important;
  border-radius:50%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 58px!important;
  background:var(--tech-color,#7a3ff2)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.82)!important;
  box-shadow:0 6px 15px color-mix(in srgb,var(--tech-color,#7a3ff2) 20%,transparent)!important;
}

#tecnologia .tech-card .tech-card-icon svg,
#tecnologia .tech-card .tech-icon svg{
  width:30px!important;
  height:30px!important;
  display:block!important;
  flex:0 0 30px!important;
  stroke:#fff!important;
  fill:none!important;
  stroke-width:1.9!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
}

#tecnologia .tech-card h3{
  margin:0 0 9px!important;
  color:#102f63!important;
  font-size:17px!important;
  line-height:1.22!important;
  letter-spacing:-.015em!important;
}

#tecnologia .tech-card .tech-top{
  display:block!important;
  margin:0 0 11px!important;
}

#tecnologia .tech-card .tech-cat{
  display:inline-flex!important;
  align-items:center!important;
  padding:5px 10px!important;
  border-radius:999px!important;
  font-size:10.5px!important;
  line-height:1!important;
  font-weight:900!important;
  color:var(--tech-color,#7a3ff2)!important;
  background:var(--tech-pill,#eee3ff)!important;
}

#tecnologia .tech-card>p{
  margin:0!important;
  color:#5b7595!important;
  font-size:12.5px!important;
  line-height:1.52!important;
}

/* Cómo explicarlo: siempre visible en el nuevo patrón. */
#tecnologia .tech-card .tech-explain{
  display:block!important;
  margin-top:auto!important;
  padding:11px 12px!important;
  border-radius:13px!important;
  background:var(--tech-pill,#f3f8fc)!important;
  border:1px solid rgba(221,235,243,.9)!important;
  color:#426587!important;
  font-size:11px!important;
  line-height:1.45!important;
}

#tecnologia .tech-card .tech-explain>span{
  display:block!important;
  margin:0 0 4px!important;
  color:var(--tech-color,#7a3ff2)!important;
  font-size:10px!important;
  line-height:1.2!important;
  font-weight:900!important;
  text-transform:none!important;
  letter-spacing:0!important;
}

#tecnologia .tech-card .tech-explain p{
  margin:0!important;
  color:#3f6284!important;
  font-size:11px!important;
  line-height:1.45!important;
}

#tecnologia .tech-card .explain,
#tecnologia .tech-card .key,
#tecnologia .tech-detail-link{
  display:none!important;
}

#tecnologia .tech-empty{
  grid-column:1/-1!important;
  padding:55px!important;
  text-align:center!important;
  border-radius:20px!important;
  background:#fff!important;
  color:#5e7189!important;
}

@media(max-width:1200px){
  #tecnologia .tech-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(max-width:980px){
  #tecnologia .tech-academy-hero{grid-template-columns:1fr!important}
  #tecnologia .tech-search-wrap{max-width:720px!important;margin-top:4px!important}
  #tecnologia .tech-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:650px){
  #tecnologia{padding:0 10px 22px!important}
  #tecnologia .tech-hero-copy h2{font-size:27px!important}
  #tecnologia .tech-hero-copy p{font-size:14px!important}
  #tecnologia .tech-tabs{padding:9px!important}
  #tecnologia .tech-tabs .tab{min-height:42px!important;font-size:11px!important;padding-right:13px!important}
  #tecnologia .tech-grid{grid-template-columns:1fr!important}
  #tecnologia .tech-card{min-height:0!important}
}


/* V38: contenido comercial visible en cada tarjeta */
#tecnologia .tech-card .tech-definition,
#tecnologia .tech-card .tech-explain,
#tecnologia .tech-card .tech-key{
  display:block!important;
}
#tecnologia .tech-card .tech-definition{
  margin-top:0!important;
  color:#587493!important;
}
#tecnologia .tech-card .tech-definition strong,
#tecnologia .tech-card .tech-explain strong,
#tecnologia .tech-card .tech-key strong{
  display:block!important;
  margin-bottom:4px!important;
  color:var(--tech-color,#315f9a)!important;
  font-size:10px!important;
  font-weight:900!important;
  line-height:1.25!important;
}
#tecnologia .tech-card .tech-definition p,
#tecnologia .tech-card .tech-explain p,
#tecnologia .tech-card .tech-key p{
  margin:0!important;
  font-size:11px!important;
  line-height:1.42!important;
}
#tecnologia .tech-card .tech-explain{
  margin-top:11px!important;
  padding:10px 11px!important;
  border-radius:13px!important;
  background:var(--tech-pill,#f3f8fc)!important;
  border:1px solid rgba(221,235,243,.9)!important;
}
#tecnologia .tech-card .tech-explain strong{
  color:var(--tech-color,#315f9a)!important;
}
#tecnologia .tech-card .tech-key{
  margin-top:9px!important;
  padding-top:8px!important;
  border-top:1px solid #edf2f6!important;
}
#tecnologia .tech-card .tech-key strong{
  color:#587493!important;
}
#tecnologia .tech-card .tech-key p{
  color:#6b8199!important;
}
#tecnologia .tech-tabs .tab{
  pointer-events:auto!important;
  position:relative!important;
  z-index:5!important;
}

/* V101 · Tecnología: jerarquía tipográfica ligeramente mayor */
#tecnologia .tech-card .tech-definition p,
#tecnologia .tech-card .tech-explain p,
#tecnologia .tech-card .tech-key p{font-size:11.6px!important;line-height:1.45!important}
#tecnologia .tech-card .tech-definition strong,
#tecnologia .tech-card .tech-key strong{font-size:10.4px!important;font-weight:750!important}
#tecnologia .tech-card .tech-explain strong{font-size:10.5px!important;font-weight:650!important;letter-spacing:.01em!important}