/* «Lo que hemos construido»: 12 tarjetas, cada una con una mini pantalla en la identidad de un cliente
   distinto (colores y tipografías propias), para mostrar que cada proyecto se hace a la medida de su marca. */
.obras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.obra { background: var(--blanco); border: 1px solid var(--linea); border-radius: 22px; padding: 10px 10px 18px; display: flex; flex-direction: column; gap: 6px;
  transition: transform .6s var(--curva), box-shadow .6s var(--curva); }
.obra:hover { transform: translateY(-5px); box-shadow: 0 30px 60px -36px rgba(10,10,10,.4); }
.obra__mini { height: 168px; border-radius: 14px; overflow: hidden; position: relative; font-family: system-ui, sans-serif; }
.obra__num { font-family: var(--mono); font-size: 11px; color: var(--gris-2); margin: 10px 8px 0; }
.obra h3 { font-family: var(--display); font-size: 19px; font-weight: 600; letter-spacing: -.02em; margin: 0 8px; }
.obra p { font-size: 14px; color: var(--gris); margin: 0 8px; }

/* utilidades de las mini pantallas */
.m-barra { display: flex; align-items: center; gap: 6px; padding: 8px 10px; font-size: 10px; font-weight: 600; }
.m-punto { width: 8px; height: 8px; border-radius: 50%; }
.m-cuerpo { padding: 0 10px 10px; }
.m-fila { display: flex; align-items: center; gap: 6px; font-size: 9.5px; padding: 4px 0; }
.m-linea { height: 6px; border-radius: 3px; }
.crece { transform-origin: bottom; animation: crecer 1.6s cubic-bezier(.32,.72,0,1) both; }
.crece-x { transform-origin: left; animation: crecerX 1.6s cubic-bezier(.32,.72,0,1) both; }
@keyframes crecer { from { transform: scaleY(.1); } }
@keyframes crecerX { from { transform: scaleX(.1); } }
.obra:not(.visible) .crece, .obra:not(.visible) .crece-x { animation-play-state: paused; }

/* 01 · plataforma de cursos (lila) */
.t-curso { background: #F4F1FF; color: #2B2257; font-family: Georgia, serif; }
.t-curso .m-barra { color: #6D5BD0; }
.t-curso .video { margin: 0 10px; height: 64px; border-radius: 10px; background: linear-gradient(135deg, #6D5BD0, #A99BF2); display: grid; place-items: center; color: #fff; font-size: 18px; }
.t-curso .prog { margin: 8px 10px 4px; height: 5px; border-radius: 3px; background: #DCD5FF; overflow: hidden; }
.t-curso .prog i { display: block; height: 100%; width: 62%; background: #6D5BD0; }
.t-curso .m-fila { padding: 2px 10px; font-family: system-ui, sans-serif; }
.t-curso .ok { color: #6D5BD0; }

/* 02 · agenda de un centro (verde azulado) */
.t-agenda { background: #EAF7F4; color: #0B3B35; }
.t-agenda .m-barra { color: #0F9D8A; }
.t-agenda .sem { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 0 10px; }
.t-agenda .sem span { font-size: 8.5px; text-align: center; color: #5E8C85; }
.t-agenda .col { display: grid; gap: 3px; align-content: start; height: 104px; }
.t-agenda .col i { border-radius: 4px; display: block; }
.t-agenda .a { background: #0F9D8A; } .t-agenda .b { background: #7FD1C4; } .t-agenda .c { background: #F2B880; }

/* 03 · inventario de una viña (burdeo y crema) */
.t-vina { background: #FBF6EE; color: #3B0F1E; font-family: Georgia, serif; }
.t-vina .m-barra { color: #7B1E3A; font-style: italic; font-size: 11px; }
.t-vina .m-fila { padding: 3px 10px; gap: 8px; }
.t-vina .m-fila span { width: 64px; font-size: 9.5px; }
.t-vina .bar { flex: 1; height: 8px; background: #EFE3D2; border-radius: 2px; overflow: hidden; }
.t-vina .bar i { display: block; height: 100%; background: #7B1E3A; }
.t-vina .bar i.bajo { background: #C8963E; }
.t-vina b { font-family: system-ui, sans-serif; font-size: 9px; color: #7B1E3A; width: 34px; text-align: right; }

/* 04 · retail (azul corporativo) */
.t-retail { background: #FFFFFF; color: #10213F; border: 1px solid #E3E9F5; }
.t-retail .m-barra { color: #1F5FBF; border-bottom: 1px solid #E3E9F5; }
.t-retail .kp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 10px; }
.t-retail .kp div { background: #F2F6FD; border-radius: 6px; padding: 5px 7px; font-size: 8.5px; color: #5A6B8C; }
.t-retail .kp b { display: block; font-size: 13px; color: #10213F; }
.t-retail .barras { display: flex; align-items: flex-end; gap: 6px; height: 58px; padding: 0 12px; }
.t-retail .barras i { flex: 1; background: #1F5FBF; border-radius: 3px 3px 0 0; }
.t-retail .barras i.baja { background: #F59E0B; }

/* 05 · calidad de datos (grises y ámbar) */
.t-calidad { background: #F6F6F4; color: #2A2A2A; font-family: ui-monospace, monospace; }
.t-calidad .m-barra { color: #555; }
.t-calidad table { width: calc(100% - 20px); margin: 0 10px; border-collapse: collapse; font-size: 8.5px; }
.t-calidad td { padding: 4px 3px; border-bottom: 1px solid #E2E2DD; }
.t-calidad tr.flag td { background: #FFF4D6; }
.t-calidad .tag { background: #F2A900; color: #2A2A2A; border-radius: 3px; padding: 1px 4px; font-size: 7.5px; }

/* 06 · panel oscuro (azul marino y cian) */
.t-panel { background: #0E1A2B; color: #E6F1FF; }
.t-panel .m-barra { color: #22D3EE; }
.t-panel .cifra { padding: 0 10px; font-size: 22px; font-weight: 700; }
.t-panel .cifra small { font-size: 9px; color: #4ADE80; margin-left: 6px; }
.t-panel svg { display: block; width: 100%; height: 78px; }

/* 07 · cobros (verde) */
.t-cobro { background: #F0FBF4; color: #0B3A22; display: grid; place-items: center; }
.t-cobro .tel { width: 92px; height: 150px; border-radius: 16px; border: 4px solid #0B3A22; background: #fff; padding: 12px 7px 7px; display: grid; gap: 5px; align-content: start; }
.t-cobro .ok { border-radius: 8px; background: #12A150; color: #fff; font-size: 8px; padding: 6px; text-align: center; }
.t-cobro .ok b { display: block; font-size: 12px; }
.t-cobro .tel span { font-size: 7.5px; border-bottom: 1px solid #E3F3E9; padding-bottom: 3px; display: flex; justify-content: space-between; }

/* 08 · asistente con IA (violeta) */
.t-ia { background: linear-gradient(160deg, #1E1035, #3B1C6E); color: #EDE7FF; padding: 12px; display: grid; gap: 6px; align-content: end; }
.t-ia .yo { justify-self: end; background: #7C3AED; border-radius: 10px 10px 2px 10px; padding: 6px 8px; font-size: 9px; max-width: 80%; }
.t-ia .el { background: rgba(255,255,255,.1); border-radius: 10px 10px 10px 2px; padding: 6px 8px; font-size: 9px; max-width: 88%; }
.t-ia .el i { display: block; height: 4px; border-radius: 2px; background: #C4B5FD; margin-top: 4px; }

/* 09 · informe en PDF (papel y rojo) */
.t-pdf { background: #E9E7E2; display: grid; place-items: center; }
.t-pdf .hoja { width: 118px; height: 150px; background: #fff; box-shadow: 0 6px 16px rgba(0,0,0,.15); padding: 10px; font-family: Georgia, serif; display: grid; gap: 5px; align-content: start; }
.t-pdf .hoja b { font-size: 10px; color: #1A1A1A; border-bottom: 2px solid #D7263D; padding-bottom: 3px; }
.t-pdf .l { height: 3px; background: #D9D6CF; border-radius: 2px; }
.t-pdf .mini-barras { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 4px; }
.t-pdf .mini-barras i { flex: 1; background: #1A1A1A; }
.t-pdf .mini-barras i:last-child { background: #D7263D; }

/* 10 · visión por computador (cámara y verde) */
.t-vision { background: radial-gradient(circle at 40% 30%, #3a3f44, #16191c); }
.t-vision .rec { position: absolute; top: 8px; left: 10px; font-size: 8.5px; color: #fff; font-family: ui-monospace, monospace; display: flex; gap: 5px; align-items: center; }
.t-vision .rec i { width: 7px; height: 7px; border-radius: 50%; background: #FF3B3B; animation: parpadeo 1.2s infinite; }
@keyframes parpadeo { 50% { opacity: .2; } }
.t-vision .persona { position: absolute; border: 1.5px solid #39FF14; border-radius: 3px; }
.t-vision .persona::before { content: attr(data-id); position: absolute; top: -12px; left: -1.5px; background: #39FF14; color: #000; font-size: 7px; padding: 1px 3px; font-family: ui-monospace, monospace; }
.t-vision .persona::after { content: ""; position: absolute; inset: 20% 25%; border-radius: 40% 40% 10% 10%; background: rgba(255,255,255,.12); }
.t-vision .linea-conteo { position: absolute; left: 0; right: 0; top: 70%; height: 0; border-top: 1.5px dashed #FFD60A; }
.t-vision .conteo { position: absolute; right: 10px; bottom: 8px; background: rgba(0,0,0,.6); color: #39FF14; font-size: 10px; padding: 3px 7px; border-radius: 4px; font-family: ui-monospace, monospace; }
.t-vision .camina { animation: caminar 6s linear infinite; }
@keyframes caminar { from { transform: translateX(-20px); } to { transform: translateX(60px); } }

/* 11 · sitio conectado (durazno pastel) */
.t-sitio { background: #FFF6EF; color: #4A2C22; }
.t-sitio .nav-s { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; font-size: 9px; }
.t-sitio .nav-s b { font-family: Georgia, serif; font-size: 11px; }
.t-sitio .hero-s { margin: 0 10px; border-radius: 10px; background: linear-gradient(120deg, #FFB199, #FF8A65); height: 72px; padding: 10px; color: #fff; font-family: Georgia, serif; font-size: 13px; display: flex; flex-direction: column; justify-content: space-between; }
.t-sitio .hero-s span { align-self: flex-start; background: #fff; color: #FF6B3D; font-family: system-ui, sans-serif; font-size: 8.5px; font-weight: 600; padding: 4px 9px; border-radius: 999px; }
.t-sitio .cards-s { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin: 7px 10px; }
.t-sitio .cards-s i { height: 34px; border-radius: 6px; background: #FFE3D6; }

/* 12 · videos y capacitación (oscuro y amarillo) */
.t-video { background: #111; color: #fff; }
.t-video .pantalla { margin: 10px; height: 92px; border-radius: 8px; background: linear-gradient(135deg, #2a2a2a, #444); display: grid; place-items: center; }
.t-video .play { width: 34px; height: 34px; border-radius: 50%; background: #FFC531; display: grid; place-items: center; color: #111; font-size: 13px; }
.t-video .prog { margin: 0 10px; height: 4px; background: #333; border-radius: 2px; overflow: hidden; }
.t-video .prog i { display: block; height: 100%; width: 40%; background: #FFC531; animation: avanzaVideo 8s linear infinite; }
@keyframes avanzaVideo { from { width: 10%; } to { width: 95%; } }
.t-video .caps { display: flex; gap: 4px; margin: 8px 10px 0; }
.t-video .caps span { font-size: 7.5px; padding: 3px 6px; border-radius: 4px; background: #222; color: #bbb; }
.t-video .caps span:first-child { background: #FFC531; color: #111; }

@media (max-width: 1100px) { .obras { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .obras { grid-template-columns: 1fr; } }