/* ==========================================================================
   TIENDA EVOL-IA -- vitrina de tecnologia que EVOL-IA puede ofrecer.

   Archivo aparte a proposito: main.css no se toca. Si la vitrina se
   aprueba, esto puede fundirse en main.css o quedarse asi.

   La diferencia visual con Desarrollos es deliberada y se apoya en una
   sola decision: la foto del producto va sobre BLANCO. En un sitio
   oscuro, un mosaico de fotos blancas se lee como tienda en menos de un
   segundo, mientras que las tarjetas de texto oscuras de lab.html se
   leen como portafolio. No hace falta nada mas para separarlas.

   Movil primero: una columna, y las de mas ancho se anaden despues.
   ========================================================================== */

/* --- cabecera ----------------------------------------------------------- */
/* Solo el margen inferior: fijar tambien el horizontal aqui borraba
   el que .wrap aporta, y el titular quedaba pegado al borde
   izquierdo, desalineado del logo y de las tarjetas. */
.tienda-hero{padding-bottom:8px;}
.tienda-hero .lede{max-width:64ch;}

/* --- rejilla del catalogo ----------------------------------------------- */
/* minmax(0,1fr) y no 1fr: sin el, una foto ancha estira la columna y
   aparece scroll horizontal. Ya nos paso en otra rejilla del sitio. */
.tienda-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
  margin-top:34px;
}
@media(min-width:620px){
  .tienda-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(min-width:1000px){
  .tienda-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;}
}

/* --- la tarjeta --------------------------------------------------------- */
.tienda-card{
  position:relative;                 /* ancla del enlace extendido */
  display:flex;flex-direction:column;
  background:var(--bg-glass);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color .18s, transform .18s;
}
.tienda-card:hover{border-color:var(--line-strong);transform:translateY(-3px);}
@media(prefers-reduced-motion:reduce){
  .tienda-card,.tienda-card:hover{transition:none;transform:none;}
}
/* el foco se pinta sobre la tarjeta entera, no sobre el enlace invisible */
.tienda-card:focus-within{outline:2px solid var(--cyan);outline-offset:3px;}

/* --- la foto ------------------------------------------------------------ */
/* El blanco va DENTRO de la tarjeta, no ES la tarjeta. Con un margen
   oscuro alrededor y las esquinas redondeadas, siete fotos de producto
   sobre fondo blanco dejan de leerse como una pared de bloques
   brillantes sobre un sitio oscuro.
   No se puede sustituir el blanco por un gris suave: casi todos estos
   robots son blancos y se perderian contra el fondo.
   16:10 en vez de 4:3 baja la superficie clara del 52% de la tarjeta
   al 43%. El aspect-ratio sigue reservando el hueco antes de que
   cargue la imagen, para que la rejilla no salte. */
.tienda-card-foto{
  position:relative;
  padding:10px 10px 0;
}
.tienda-card-foto img{
  /* height:auto es obligatorio: el <img> lleva height="600" en el HTML
     y ese atributo actua como altura explicita, lo que hace que
     aspect-ratio se ignore por completo. */
  width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;display:block;
  background:#FFFFFF;border-radius:12px;
}

/* --- estado comercial --------------------------------------------------- */
/* --pending ya existe en main.css y significa exactamente esto: algo
   confirmado a medias. No hace falta un color nuevo. */
.tienda-estado{
  position:absolute;top:19px;left:19px;
  font-family:var(--font-body);
  font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--good);
  background:rgba(9,14,32,.86);
  border:1px solid var(--good);
  padding:4px 9px;border-radius:999px;
  white-space:nowrap;
}

/* --- cuerpo ------------------------------------------------------------- */
.tienda-card-cuerpo{
  display:flex;flex-direction:column;gap:7px;
  padding:18px 18px 20px;flex:1;
}
.tienda-cat{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--cyan);font-weight:600;margin:0;
}
.tienda-card h3{
  font-family:var(--font-display);
  font-size:21px;line-height:1.15;color:var(--ink-0);
  margin:0;font-weight:400;
}
/* la marca solo se pinta cuando esta documentada: hoy solo Eiliko */
.tienda-marca{font-size:12.5px;color:var(--ink-2);margin:0;}
.tienda-desc{font-size:14px;line-height:1.5;color:var(--ink-1);margin:0;flex:1;}

/* --- llamada a la accion ------------------------------------------------ */
/* ::after cubre la tarjeta entera para que en movil se pueda tocar en
   cualquier punto sin anidar enlaces (que seria HTML invalido). */
.tienda-cta{
  margin-top:10px;align-self:flex-start;
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:11px 4px 11px 0;
  font-size:14px;font-weight:600;color:var(--cyan);
  text-decoration:none;
}
.tienda-cta::after{content:"";position:absolute;inset:0;}
.tienda-card:hover .tienda-cta{color:var(--ink-0);}
.tienda-cta:focus-visible{outline:none;}

/* --- como funciona ------------------------------------------------------ */
.tienda-pasos{
  display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:26px;
}
@media(min-width:760px){
  .tienda-pasos{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;}
}
.tienda-paso{
  border-top:2px solid var(--line-strong);padding-top:16px;
}
.tienda-paso .num{
  font-family:var(--font-mono);font-size:12px;color:var(--cyan);
  letter-spacing:.08em;margin:0 0 8px;
}
.tienda-paso h3{
  font-family:var(--font-display);font-size:18px;font-weight:400;
  color:var(--ink-0);margin:0 0 6px;
}
.tienda-paso p{font-size:14px;line-height:1.55;color:var(--ink-1);margin:0;}

/* --- nota de estado del catalogo ---------------------------------------- */
.tienda-nota{
  margin-top:30px;padding:16px 18px;
  border-left:2px solid var(--pending);
  background:var(--pending-bg);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
}
.tienda-nota p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-1);}
.tienda-nota strong{color:var(--ink-0);}

/* ==========================================================================
   FICHA DE PRODUCTO
   Se apoya en las mismas piezas que el catalogo. Igual que alli, la foto
   va sobre blanco: es lo que separa la Tienda del resto del sitio.
   ========================================================================== */

/* --- cabecera de la ficha ----------------------------------------------- */
.ficha-cab{
  display:grid;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:8px;
}
@media(min-width:900px){
  .ficha-cab{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:44px;align-items:center;}
}
.ficha-cab-foto{
  position:relative;aspect-ratio:4/3;background:#FFFFFF;
  border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;
}
.ficha-cab-foto img{width:100%;height:100%;object-fit:contain;display:block;}
.ficha-cab h1{margin:0 0 6px;}
.ficha-cab .lede{margin-top:14px;}

/* --- galeria ------------------------------------------------------------ */
/* Miniaturas + una grande. Nada de carrusel automatico: en movil compite
   con el gesto de desplazar y se odia. Sin JavaScript, cada miniatura es
   un enlace que abre la imagen; con JavaScript, la cambia en el sitio. */
.ficha-galeria{margin-top:26px;}
.ficha-galeria-grande{
  background:#FFFFFF;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;aspect-ratio:4/3;
}
.ficha-galeria-grande img{width:100%;height:100%;object-fit:contain;display:block;}
.ficha-miniaturas{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px;
}
@media(min-width:620px){
  .ficha-miniaturas{grid-template-columns:repeat(6,minmax(0,1fr));}
}
.ficha-min{
  display:block;background:#FFFFFF;border:1px solid var(--line);
  border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4/3;
  padding:0;cursor:pointer;transition:border-color .15s;
  min-height:44px;                       /* area tactil */
}
.ficha-min img{width:100%;height:100%;object-fit:contain;display:block;}
.ficha-min:hover{border-color:var(--line-strong);}
.ficha-min[aria-current="true"]{border-color:var(--cyan);border-width:2px;}
.ficha-min:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}

/* --- caracteristicas ---------------------------------------------------- */
.ficha-caps{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:20px;
}
@media(min-width:700px){ .ficha-caps{grid-template-columns:repeat(3,minmax(0,1fr));} }
.ficha-cap{
  background:var(--bg-glass);border:1px solid var(--line);
  border-radius:var(--radius-sm);padding:13px 15px;
  font-size:14px;color:var(--ink-1);
}

/* --- tabla de datos ----------------------------------------------------- */
.ficha-datos{
  margin-top:20px;border:1px solid var(--line);border-radius:var(--radius-md);
  overflow:hidden;background:var(--bg-glass);
}
.ficha-dato{
  display:grid;grid-template-columns:minmax(0,1fr);gap:2px;
  padding:13px 16px;border-bottom:1px solid var(--line);
}
@media(min-width:620px){
  .ficha-dato{grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:16px;align-items:baseline;}
}
.ficha-dato:last-child{border-bottom:none;}
.ficha-dato dt{font-size:13px;color:var(--ink-2);margin:0;}
.ficha-dato dd{font-size:14.5px;color:var(--ink-0);margin:0;font-variant-numeric:tabular-nums;}

/* --- variantes ---------------------------------------------------------- */
.ficha-variantes{
  display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin-top:20px;
}
@media(min-width:700px){ .ficha-variantes{grid-template-columns:repeat(2,minmax(0,1fr));} }
.ficha-variante{
  border:1px solid var(--line);border-radius:var(--radius-md);
  padding:18px 20px;background:var(--bg-glass);
}
.ficha-variante h3{
  font-family:var(--font-display);font-size:19px;font-weight:400;
  color:var(--ink-0);margin:0 0 10px;
}
.ficha-variante p{font-size:14px;color:var(--ink-1);margin:0;
  font-variant-numeric:tabular-nums;line-height:1.7;}

/* --- documentacion y certificados --------------------------------------- */
.ficha-certs{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px;}
.ficha-cert{
  font-size:13px;color:var(--good);background:var(--good-bg);
  border:1px solid var(--good);border-radius:999px;padding:6px 14px;
}

/* .btn-secondary del sitio mide 39px de alto: se queda corto para el
   dedo, que necesita 44. Se corrige aqui porque tienda.css solo lo
   cargan las paginas de Tienda, asi que el resto del sitio no se ve
   afectado. El arreglo global en main.css sigue pendiente y toca
   tambien al boton "Conocenos ->" de Inicio. */
.btn-secondary{
  min-height:44px;display:inline-flex;align-items:center;
}

/* --- galeria compacta con pestanas ------------------------------------- */
/* Galeria y video eran dos secciones: 1.450px + 1.080px = 2.530px, el 41%
   de la ficha. Y la caja de imagen medía 1369px de ancho, así que las
   fotos de 1000px se ampliaban a 1,37x y se veían blandas. Topando el
   visor a 560px ninguna imagen del catálogo se amplía: ni la de Aibi,
   que es la más pequeña con 600px. El problema de nitidez se resuelve
   por geometría, sin tocar un solo original. */
.ficha-galeria--compacta{
  display:grid;grid-template-columns:88px minmax(0,1fr);
  gap:14px;max-width:664px;align-items:start;margin-top:22px;
}
.ficha-galeria--compacta .ficha-miniaturas{
  display:flex;flex-direction:column;gap:8px;margin-top:0;
}
.ficha-visor{display:flex;flex-direction:column;gap:12px;min-width:0;}
.ficha-visor-video{background:#000000;}
.ficha-visor-video video{width:100%;height:100%;object-fit:contain;display:block;}
.ficha-min--video{position:relative;}
.ficha-play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(6,12,34,.42);
}
.ficha-play::after{
  content:"";width:0;height:0;margin-left:3px;
  border-left:12px solid var(--ink-0);
  border-top:8px solid transparent;border-bottom:8px solid transparent;
}
.ficha-pestanas{display:flex;gap:6px;justify-content:center;}
.ficha-pest{
  font:inherit;font-size:13px;font-weight:600;letter-spacing:.02em;
  padding:8px 20px;min-height:38px;border-radius:999px;cursor:pointer;
  background:transparent;border:1px solid var(--line);color:var(--ink-2);
  transition:background .15s,color .15s,border-color .15s;
}
.ficha-pest:hover{border-color:var(--line-strong);color:var(--ink-1);}
.ficha-pest.is-activa{background:var(--cyan);color:var(--bg-void);border-color:var(--cyan);}
.ficha-pest:focus-visible{outline:2px solid var(--cyan);outline-offset:2px;}
@media(max-width:640px){
  /* en movil la columna de miniaturas robaria ancho al visor: se apilan */
  .ficha-galeria--compacta{grid-template-columns:1fr;max-width:none;}
  .ficha-galeria--compacta .ficha-visor{order:1;}
  .ficha-galeria--compacta .ficha-miniaturas{
    order:2;flex-direction:row;flex-wrap:wrap;
  }
  .ficha-galeria--compacta .ficha-min{flex:0 0 calc(25% - 6px);}
}
/* Las pestanas median 39px de alto en movil: por debajo de los 44px de
   area tactil. Va al final para ganar a la regla base, que las media
   queries no anaden especificidad. */
@media(max-width:768px){ .ficha-pest{min-height:44px;padding-top:11px;padding-bottom:11px;} }

/* La galería en la cabecera, sustituyendo a la foto única: imágenes y
   vídeo a la izquierda, nombre y botones a la derecha. Así desaparece la
   sección "Galería" y todo el material queda antes del primer scroll. */
.ficha-cab-galeria{position:relative;min-width:0;}
.ficha-cab-galeria .ficha-galeria--compacta{margin-top:0;max-width:none;}
/* la insignia va sobre el visor, no sobre la columna de miniaturas */
.ficha-cab-galeria > .tienda-estado{top:12px;left:114px;z-index:2;}
@media(max-width:640px){
  /* ahí las miniaturas bajan y el visor arranca en el borde */
  .ficha-cab-galeria > .tienda-estado{left:12px;}
}

/* La tira de miniaturas, como cinta a la altura del visor -------------- */
/* Con ocho miniaturas la columna medía casi 600px y el visor unos 380:
   sobresalía por debajo del vídeo. height:0 + min-height:100% hace que la
   columna no aporte altura a la fila (la marca el visor) pero ocupe toda
   la que este decida; lo que no cabe se desplaza dentro. Sin medidas
   fijas: se adapta al ancho que toque. */
@media(min-width:641px){
  .ficha-galeria--compacta{align-items:stretch;}
  .ficha-galeria--compacta .ficha-miniaturas{
    height:0;min-height:100%;overflow-y:auto;overscroll-behavior:contain;
    padding-right:6px;
  }
  /* las miniaturas no se aplastan al topar la altura */
  .ficha-galeria--compacta .ficha-min{flex:0 0 auto;}
  .ficha-galeria--compacta .ficha-miniaturas::-webkit-scrollbar{width:8px;}
  .ficha-galeria--compacta .ficha-miniaturas::-webkit-scrollbar-track{background:linear-gradient(180deg,rgba(34,211,245,.18),rgba(155,77,255,.18));}
  .ficha-galeria--compacta .ficha-miniaturas::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,var(--cyan),var(--violet));border-radius:999px;
  }
  .ficha-galeria--compacta .ficha-miniaturas:hover::-webkit-scrollbar-thumb{filter:brightness(1.18);}
  /* Reserva aislada, por el mismo motivo anotado en main.css: declarar
     scrollbar-width sin este @supports hace que Chrome ignore todas las
     reglas ::-webkit-scrollbar de arriba. */
  @supports not selector(::-webkit-scrollbar){
    .ficha-galeria--compacta .ficha-miniaturas{scrollbar-width:thin;scrollbar-color:#5E90FA transparent;}
  }
}

/* --- recuadros flotantes ------------------------------------------------ */
/* Las capacidades iban en rejilla de tres columnas y las filas incompletas
   dejaban huecos: un recuadro solo ocupando un tercio y dos vacíos al lado.
   Ahora fluyen y cada uno mide lo que mide su texto. Y se elevan sobre el
   fondo con sombra propia, que es lo que pedía la idea de "flotante". */
.ficha-caps{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.ficha-cap{flex:0 1 auto;}
.ficha-cap,
.ficha-variante,
.ficha-cert,
.page-contracts .enfoque-card{
  box-shadow:0 2px 10px rgba(3,7,20,.45);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ficha-cap:hover,
.ficha-variante:hover,
.ficha-cert:hover,
.page-contracts .enfoque-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 26px rgba(3,7,20,.6);
  border-color:var(--line-strong);
}
@media(prefers-reduced-motion:reduce){
  .ficha-cap,.ficha-variante,.ficha-cert,.page-contracts .enfoque-card{transition:none;}
  .ficha-cap:hover,.ficha-variante:hover,.ficha-cert:hover,
  .page-contracts .enfoque-card:hover{transform:none;}
}

/* --- idioma en la tarjeta de Tienda -------------------------------------- */
/* Se ve antes de entrar a la ficha, que es donde se decide. Verde el que
   habla español, neutro el que no, y apagado el que el fabricante no
   documenta: callarlo invitaría a suponer que sí lo habla. */
.tienda-idioma{
  font-size:12px;letter-spacing:.02em;margin:0 0 12px;
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:999px;border:1px solid var(--line);
  color:var(--ink-2);background:rgba(255,255,255,.03);
}
.tienda-idioma::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto;}
.tienda-idioma--si{color:var(--good);border-color:var(--good);background:var(--good-bg);}
.tienda-idioma--ok{color:var(--ink-1);border-color:var(--line-strong);}
.tienda-idioma--no{color:var(--ink-2);border-style:dashed;}
/* La tarjeta es una columna flex y estiraba la píldora a todo el ancho.
   align-self la devuelve a ceñirse a su texto, que es lo que es. */
.tienda-idioma{align-self:flex-start;width:auto;max-width:100%;}