/* =========================================================
   TECOMSER - PRODUCTO / IDENTIFICACION
   Marca, nombre, valoracion y codigos del producto.
   ========================================================= */

.tc-pg-marca{
  color:var(--tc-tenue);
  font-size:13px;
  font-weight:600;
}

/* Nombre largo: peso medio y buen interlineado se leen mejor que
   una negrita cerrada. */
.tc-pg-nombre{
  margin:2px 0 0;
  color:var(--tc-tinta);
  font-size:clamp(18px,1.9vw,22px);
  font-weight:600;
  line-height:1.3;
}

.tc-pg-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 18px;
  margin-top:8px;
  padding-bottom:12px;
  border-bottom:1px solid var(--tc-linea);
}

.tc-pg-rating{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.tc-pg-estrellas{
  display:inline-flex;
  gap:1px;
  line-height:1;
}

.tc-pg-estrella{
  color:#dfe4ea;
  font-size:16px;
  line-height:1;
}

.tc-pg-estrella.is-llena{
  color:#f59e0b;
}

.tc-pg-estrella.is-media{
  color:#f59e0b;
  opacity:.45;
}

.tc-pg-rating-nota{
  color:var(--tc-tinta);
  font-size:13px;
  font-weight:700;
}

.tc-pg-rating-total{
  color:var(--tc-suave);
  font-size:12.5px;
}

.tc-pg-codigos{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px;
  color:var(--tc-tenue);
  font-size:12.5px;
}

/* "Ver más" del nombre. Solo lo enseña el guion, y solo cuando el nombre de
   verdad no cabe en las dos líneas del teléfono (ver producto.html). */
.tc-pg-nombre-mas{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:0;
  border:0;
  background:none;
  color:#1d4ed8;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  cursor:pointer;
}
.tc-pg-nombre-mas svg{
  width:14px;
  height:14px;
  transition:transform .18s ease;
}
.tc-pg-nombre-mas[aria-expanded="true"] svg{
  transform:rotate(180deg);
}
.tc-pg-codigos strong{
  color:var(--tc-suave);
  font-weight:600;
}


/* =========================================================
   TECOMSER - PRODUCTO / PRECIO
   Precio vigente, ahorro respecto al anterior y precio con tarjeta.
   ========================================================= */

/* PRECIO Y TARJETA EN UNA LÍNEA
   Iban uno debajo del otro, con un hueco reservado entre los dos para el
   precio tachado aunque no hubiera oferta: la ficha se estiraba sin decir
   nada más. Ahora es una fila que se parte sola: precio, -%, tachado y "Con
   tarjeta" al lado; "Ahorras…" baja a su propia línea solo si hay oferta. */
.tc-pg-precio{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:4px 18px;
}
.tc-pg-precio-fila{ order:1; }
.tc-pg-precio-anterior{ order:2; }
.tc-pg-tarjeta{ order:3; }
.tc-pg-ahorro{ order:4; flex-basis:100%; }

/* Orden de lectura: primero el precio que se paga, debajo el de lista
   tachado. El unico color fuerte de la ficha es el porcentaje rebajado. */
.tc-pg-precio-fila{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.tc-pg-precio-valor{
  color:var(--tc-tinta);
  font-size:clamp(29px,3.2vw,35px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.02em;
}

.tc-pg-precio-dscto{
  padding:3px 8px;
  border-radius:4px;
  background:var(--tc-oferta);
  color:#fff;
  font-size:13px;
  font-weight:700;
}

.tc-pg-precio-anterior{
  margin-top:0;
  color:var(--tc-tenue);
  font-size:14px;
  text-decoration:line-through;
}

.tc-pg-ahorro{
  display:inline-block;
  margin-top:0;
  color:var(--tc-suave);
  font-size:12.5px;
}

.tc-pg-ahorro strong{
  color:var(--tc-oferta);
  font-weight:700;
}

.tc-pg-tarjeta{
  display:flex;
  align-items:baseline;
  gap:7px;
  margin-top:0;
}

.tc-pg-tarjeta-texto{
  color:var(--tc-suave);
  font-size:13px;
}

.tc-pg-tarjeta-valor{
  color:var(--tc-tinta);
  font-size:17px;
  font-weight:600;
}

.tc-pg-tarjeta-extra{
  color:var(--tc-tenue);
  font-size:12px;
}


/* =========================================================
   TECOMSER - PRODUCTO / DISPONIBILIDAD
   Aviso discreto cuando quedan pocas unidades. Solo aparece si
   el producto controla stock y el numero es realmente bajo:
   avisarlo siempre le quitaria valor.
   ========================================================= */

.tc-pg-quedan{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  padding:5px 11px;
  border:1px solid #f3d9b0;
  border-radius:999px;
  background:#fdf8ef;
  color:#95601a;
  font-size:12.5px;
  font-weight:600;
}

.tc-pg-quedan svg{
  width:14px;
  height:14px;
}

.tc-pg-hay{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:#15803d;
  font-size:12.5px;
  font-weight:600;
}

.tc-pg-hay svg{
  width:15px;
  height:15px;
}


.tc-var{
  display:grid;
  gap:12px;
  margin:12px 0;
  padding:12px 0;
  border-top:1px solid var(--tc-linea,#e6ebf2);
  border-bottom:1px solid var(--tc-linea,#e6ebf2);
}

.tc-var-eje{ display:grid; gap:8px; }

.tc-var-nombre{
  font-size:12.5px;
  font-weight:600;
  color:var(--tc-tenue,#64748b);
}
.tc-var-elegido{
  margin-left:5px;
  color:var(--tc-tinta,#111827);
  font-weight:700;
}

.tc-var-opciones{ display:flex; flex-wrap:wrap; gap:8px; }
.tc-var-opciones:has(.tc-var-opcion--color){ gap:5px; }

.tc-var-opcion{
  min-height:38px;
  padding:0 15px;
  border:1.5px solid #d7dee8;
  border-radius:9px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.tc-var-opcion:hover{ border-color:#9aa8ba; }

.tc-var-opcion[aria-pressed="true"]{
  border-color:var(--tc-marca-azul,#071457);
  border-width:2px;
  color:var(--tc-marca-azul,#071457);
  background:#f4f6fc;
}

/* No existe con lo elegido en las filas de arriba: fuera de la vista. Con
   !important porque el botón de color se pinta con display:grid. */
.tc-var-opcion.is-oculta{ display:none !important; }

.tc-var-opcion.is-agotada{
  border-style:dashed;
  color:#94a3b8;
}

/* ---------- Muestras de color ---------- */

/* UNA SOLA CAJA
   El botón de color no dibuja nada suyo: ni marco ni fondo. La muestra es el
   botón. Antes se veían dos cuadrados encajados —el del botón y el aro de la
   muestra— y el elegido parecía tener dos bordes. */
.tc-var-opcion--color{
  display:grid;
  place-items:center;
  min-height:0;
  padding:4px;
  border:0;
  background:none;
  border-radius:9px;
}
.tc-var-opcion--color:hover{ border:0; background:none; }

/* Y el estado elegido tampoco pinta marco propio: lo lleva la muestra. */
.tc-var-opcion--color[aria-pressed="true"]{
  border:0;
  background:none;
}

.tc-var-muestra{
  width:28px;
  height:28px;
  border-radius:6px;
  background:var(--tono,#e5e7eb);
  /* El borde interior evita que un blanco o un transparente desaparezcan
     sobre el fondo de la ficha. */
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.14);
}

/* La elegida se marca en el marco y no oscureciendo la muestra: la muestra
   tiene que enseñar el color de verdad, no una versión apagada. */
/* El aro adelgaza con la muestra: a 28 px, cuatro píxeles de marco pesaban
   más que el propio color. */
.tc-var-opcion--color[aria-pressed="true"] .tc-var-muestra{
  box-shadow:inset 0 0 0 1px rgba(15,23,42,.14),
             0 0 0 1.5px #fff,
             0 0 0 3px var(--tc-marca-azul,#071457);
}

/* Agotada: la muestra se desatura y se cruza, en vez de tachar el nombre. */
.tc-var-opcion--color.is-agotada{ text-decoration:none; }
.tc-var-opcion--color.is-agotada .tc-var-muestra{
  filter:grayscale(.85) opacity(.55);
  position:relative;
}
.tc-var-opcion--color.is-agotada .tc-var-muestra::after{
  content:"";
  position:absolute; inset:0;
  /* La raya se estrecha también: en 28 px, una banda del 8% se comía la
     muestra entera. */
  background:linear-gradient(to top right, transparent 44%, rgba(15,23,42,.55) 44%,
             rgba(15,23,42,.55) 56%, transparent 56%);
  border-radius:inherit;
}


@media (max-width:640px){
  /* En el teléfono no se encogen más: por debajo de 26 px el dedo falla. */
  .tc-var-muestra{ width:26px; height:26px; }
}

/* La potencia al lado del amperaje: "3.42 A · 65 W". Es el número con que
   la gente busca un cargador, y en otro tono para que no compita con el
   amperaje, que es lo que se elige. */
.tc-var-watts{
  margin-left:6px;
  padding-left:7px;
  border-left:1px solid currentColor;
  font-weight:500;
  opacity:.7;
}

/* =========================================================
   EN EL TELÉFONO: UNA FILA POR EJE, QUE SE DESLIZA

   Los botones partían en varias líneas: cuatro amperajes eran dos filas
   de botones grandes, y con voltaje y color encima el selector se comía
   media pantalla. Ahora cada eje es UNA fila de botones más chicos. Los
   que caben se ven; los demás se alcanzan deslizando de lado, como las
   tallas en cualquier tienda del teléfono.

   EL BORDE AVISA QUE HAY MÁS
   Una fila cortada en seco parece completa y nadie la desliza. Cuando
   sobra contenido, el borde por donde sigue se difumina: a la derecha al
   empezar, a la izquierda al llegar al final, a los dos lados en medio.
   Lo decide el guion de abajo (hay-izq / hay-der), que mide de verdad; con
   pocas opciones que caben enteras no se difumina nada.

   Vale igual dentro de la hoja de compra (barra_compra.html): el selector
   es el mismo, solo cambia de sitio.
   ========================================================= */
@media (max-width:820px){
  .tc-var-opciones{
    flex-wrap:nowrap;
    gap:6px;

    overflow-x:auto;
    overflow-y:hidden;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
    scrollbar-width:none;

    /* Aire para el borde de 2 px del elegido: sin él, el recorte del
       desplazamiento le comía el marco de arriba y abajo. */
    padding:2px 1px;
  }

  .tc-var-opciones::-webkit-scrollbar{
    display:none;
  }

  .tc-var-opciones:has(.tc-var-opcion--color){
    gap:4px;
  }

  .tc-var-opciones.hay-der{
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }

  .tc-var-opciones.hay-izq{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 28px);
            mask-image:linear-gradient(to right, transparent, #000 28px);
  }

  .tc-var-opciones.hay-izq.hay-der{
    -webkit-mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
            mask-image:linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent);
  }

  .tc-var-opcion{
    flex:0 0 auto;
    min-height:34px;
    padding:0 10px;

    border-radius:8px;

    font-size:12.5px;
    white-space:nowrap;

    scroll-snap-align:start;
  }

  .tc-var-opcion--color{
    padding:3px;
  }

  .tc-var-muestra{
    width:26px;
    height:26px;
  }

  .tc-var-watts{
    margin-left:5px;
    padding-left:5px;
  }
}

.tc-var-estado{
  margin:0;
  font-size:12.5px;
  color:var(--tc-tenue,#64748b);
}
.tc-var-estado.is-listo{ color:#15803d; font-weight:600; }
.tc-var-estado.is-falta{ color:#b45309; }

/* Cuando alguien intenta reservar sin haber elegido, el selector parpadea
   una vez: es más claro que un mensaje de error en otra parte de la página. */
.tc-var.is-pidiendo{
  animation:tcVarLlamar .45s ease 2;
  border-radius:10px;
}
@keyframes tcVarLlamar{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,75,11,0); }
  50%{ box-shadow:0 0 0 4px rgba(255,75,11,.22); }
}
@media (prefers-reduced-motion:reduce){
  .tc-var.is-pidiendo{ animation:none; outline:2px solid var(--tc-marca-naranja,#ff4b0b); }
}


.tc-pack{
  display:flex;
  align-items:center;
  gap:14px;
  margin:14px 0;
  padding:12px 14px;
  border:1.5px solid #cfe3d3;
  border-radius:12px;
  background:linear-gradient(90deg,#f4fbf6,#fff 70%);
  text-decoration:none;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.tc-pack:hover{ border-color:#15803d; box-shadow:0 6px 18px rgba(21,128,61,.1); }

.tc-pack-foto{
  flex:0 0 58px; width:58px; height:58px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #e6ebf2; border-radius:9px; background:#fff;
  overflow:hidden;
}
.tc-pack-foto img{ width:100%; height:100%; object-fit:contain; }

.tc-pack-texto{ flex:1 1 auto; min-width:0; display:grid; gap:2px; }
.tc-pack-etiq{
  color:#15803d; font-size:10.5px; font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.tc-pack-texto strong{
  color:var(--tc-tinta,#111827);
  font-size:13px; font-weight:650; line-height:1.3;
}
.tc-pack-cuenta{ color:var(--tc-tenue,#64748b); font-size:11.5px; }

.tc-pack-precio{ flex:0 0 auto; display:grid; justify-items:end; gap:1px; }
.tc-pack-precio s{ color:#94a3b8; font-size:11.5px; }
.tc-pack-precio b{ color:#15803d; font-size:17px; font-weight:800; }
.tc-pack-precio em{ color:#15803d; font-size:10.5px; font-style:normal; font-weight:700; }

@media (max-width:640px){
  .tc-pack{ flex-wrap:wrap; }
  .tc-pack-precio{ justify-items:start; }
}


/* =========================================================
   TECOMSER - PRODUCTO / ACCIONES DE COMPRA
   Cantidad, carrito, compra directa, favorito y comparar.
   Usa el mismo motor de carrito que el catalogo.
   ========================================================= */

.tc-pg-acciones{
  margin-top:14px;
}

.tc-pg-compra{
  display:flex;
  align-items:center;
  gap:12px;
}

.tc-pg-cantidad-texto{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

.tc-pg-cantidad-control{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--tc-linea);
  border-radius:8px;
  overflow:hidden;
}

.tc-pg-cantidad-control button{
  width:38px;
  height:48px;
  border:0;
  background:#fff;
  color:var(--tc-suave);
  font:inherit;
  font-size:17px;
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}

.tc-pg-cantidad-control button:hover{
  background:#f6f7f9;
  color:var(--tc-tinta);
}

.tc-pg-cantidad-control input{
  width:46px;
  height:48px;
  border:0;
  outline:0;
  text-align:center;
  font:inherit;
  font-size:15px;
  font-weight:600;
  color:var(--tc-tinta);
  -moz-appearance:textfield;
}

.tc-pg-cantidad-control input::-webkit-outer-spin-button,
.tc-pg-cantidad-control input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

/* Un solo boton manda. El resto acompana sin competir por atencion. */
.tc-pg-carrito{
  flex:1;
  min-height:48px;
  padding:0 20px;
  border:0;
  border-radius:8px;
  background:var(--tc-accion);
  color:#fff;
  font:inherit;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease;
}

.tc-pg-carrito:hover{
  background:var(--tc-accion-hover);
}

.tc-pg-comprar{
  width:100%;
  min-height:46px;
  margin-top:9px;
  border:1px solid var(--tc-linea);
  border-radius:8px;
  background:#fff;
  color:var(--tc-tinta);
  font:inherit;
  font-size:14.5px;
  font-weight:600;
  cursor:pointer;
  transition:border-color .18s ease,background .18s ease;
}

.tc-pg-comprar:hover{
  border-color:var(--tc-tinta);
  background:#f9fafb;
}

.tc-pg-secundarios{
  display:flex;
  gap:18px;
  margin-top:10px;
}

/* Enlaces, no botones: son acciones de apoyo. */
.tc-pg-secundario{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--tc-suave);
  font:inherit;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  transition:color .16s ease;
}

.tc-pg-secundario svg{
  width:17px;
  height:17px;
}

.tc-pg-secundario:hover{
  color:var(--tc-tinta);
}

.tc-pg-secundario.is-active{
  color:var(--tc-oferta);
}

.tc-pg-secundario.is-active svg path{
  fill:currentColor;
}

.tc-pg-secundario.is-activo{
  color:var(--tc-tinta);
  font-weight:600;
}

/* El total cuando se lleva más de uno: "Total por 3 unidades: S/90.00".
   Con una unidad no sale, porque sería repetir el precio de arriba. */
.tc-pg-total{
  margin:10px 0 0;
  color:var(--tc-suave);
  font-size:13.5px;
}

.tc-pg-total strong{
  color:var(--tc-tinta);
  font-size:16px;
  font-weight:700;
}

/* Producto sin stock: se avisa y no se ofrece comprar. */
.tc-pg-agotado{
  padding:14px 16px;
  border:1px solid var(--tc-linea);
  border-radius:8px;
  background:#f9fafb;
  color:var(--tc-suave);
  font-size:13.5px;
  line-height:1.5;
}

.tc-pg-agotado strong{
  display:block;
  margin-bottom:3px;
  color:var(--tc-tinta);
  font-weight:600;
}

/* Agotado pero en camino: verde, con la fecha delante, como Falabella. */
.tc-pg-agotado--llega{
  border-color:#bbf7d0;
  background:#f0fdf4;
}
.tc-pg-llega-marca{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:8px;
  padding:4px 11px;
  border-radius:999px;
  background:#16a34a;
  color:#fff;
  font-size:13px;
  font-weight:700;
}
.tc-pg-llega-marca svg{ width:16px; height:16px; }

/* =========================================================
   EN EL TELÉFONO, SIN REPETIR

   COMPRAR YA ESTÁ ABAJO
   La barra fija (barra_compra.html) lleva "Agregar" y "Comprar" siempre a
   la vista. Los de aquí salían otra vez debajo de "Disponible": dos juegos
   de botones para lo mismo, y el de la ficha empujaba todo hacia abajo.
   Se esconden, pero siguen en la página: la barra los pulsa por dentro y
   la hoja se lleva prestada su caja de cantidad. Un producto agotado no
   tiene barra ni estos botones; su aviso sigue saliendo.

   ME GUSTA, COMPARAR, COMPARTIR: SOBRE LA FOTO
   Eran una fila de texto entre los botones y la tabla de sedes. En el
   teléfono pasan a iconos redondos junto al de pantalla completa, que es
   donde se buscan en cualquier tienda. El guion de abajo los mueve dentro
   de la foto y los devuelve si la pantalla se ensancha. El nombre de cada
   uno no se borra: queda oculto a la vista y lo sigue leyendo quien navega
   con lector de pantalla.
   ========================================================= */
@media (max-width:820px){
  body.tc-compacta .tc-pg-compra,
  body.tc-compacta .tc-pg-comprar{
    display:none;
  }

  /* Con los botones escondidos y los iconos sobre la foto, el contenedor
     se quedaba vacío pero con su margen: un hueco entre el selector y la
     tabla de sedes. Fuera, salvo si lleva el aviso de agotado. */
  body.tc-compacta .tc-pg-acciones:not(:has(.tc-pg-agotado)){
    display:none;
  }
}

/* ARRIBA A LA DERECHA, EN COLUMNA
   Iban en fila abajo, pegados al botón de pantalla completa: cuatro iconos
   juntos se leían como una sola barra de herramientas y tapaban la base de
   la foto, que es donde suele estar el producto. Arriba a la derecha y uno
   bajo otro quedan donde se buscan en las tiendas del teléfono, lejos de las
   etiquetas (NUEVO, -%) que van arriba a la izquierda, y el de ampliar se
   queda solo abajo. */
.tc-pg-secundarios.is-sobre-foto{
  position:absolute;
  top:12px;
  right:12px;
  z-index:3;

  display:flex;
  flex-direction:column;
  gap:8px;
  margin:0;
}

.tc-pg-secundarios.is-sobre-foto .tc-pg-secundario{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;
  gap:0;

  border:1px solid rgba(15,23,42,.10);
  border-radius:10px;
  background:rgba(255,255,255,.92);
  color:#334155;
  box-shadow:0 2px 10px rgba(15,23,42,.10);

  -webkit-tap-highlight-color:transparent;
}

.tc-pg-secundarios.is-sobre-foto .tc-pg-secundario svg{
  width:19px;
  height:19px;
}

.tc-pg-secundarios.is-sobre-foto .tc-pg-secundario span{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Me gusta marcado: el corazón se rellena, como fuera de la foto. */
.tc-pg-secundarios.is-sobre-foto .tc-pg-secundario.is-active{
  color:var(--tc-oferta,#d92d20);
}

/* Comparando: el icono se tiñe del azul de la marca. */
.tc-pg-secundarios.is-sobre-foto .tc-pg-secundario.is-activo{
  color:#071457;
  border-color:rgba(7,20,87,.35);
}

/* Encima del video, igual que la lupa: fuera. */
.tc-pg-principal:has(.tc-pg-video.is-visible) .tc-pg-secundarios.is-sobre-foto{
  display:none;
}


/* =========================================================
   TECOMSER - PRODUCTO / COMPRA POR WHATSAPP
   Arma el mensaje con el producto, el precio, la cantidad y la
   ubicacion que el cliente eligio en la barra superior, para que
   la conversacion empiece con todo lo necesario.
   ========================================================= */

.tc-pg-wsp{
  margin-top:14px;
  padding:13px 15px;
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--tc-linea);
  border-radius:8px;
  background:#fff;
}

.tc-pg-wsp-icono{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#25d366;
  color:#fff;
}

.tc-pg-wsp-icono svg{
  width:19px;
  height:19px;
}

.tc-pg-wsp-texto{
  flex:1;
  min-width:0;
}

.tc-pg-wsp-texto strong{
  display:block;
  color:var(--tc-tinta);
  font-size:13.5px;
  font-weight:600;
}

.tc-pg-wsp-texto span{
  display:block;
  margin-top:2px;
  color:var(--tc-suave);
  font-size:12.5px;
  line-height:1.45;
}

.tc-pg-wsp-boton{
  flex:0 0 auto;
  min-height:40px;
  padding:0 16px;
  display:inline-flex;
  align-items:center;
  border:1px solid #25d366;
  border-radius:7px;
  background:#fff;
  color:#128c3e;
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease;
}

.tc-pg-wsp-boton:hover{
  background:#f2fbf5;
}

@media (max-width:680px){
  .tc-pg-wsp{
    flex-wrap:wrap;
  }

  .tc-pg-wsp-boton{
    width:100%;
    justify-content:center;
  }
}


/* =========================================================
   TECOMSER - PRODUCTO / FICHA TECNICA DESTACADA
   Solo para computadoras y laptops: resume con iconos lo que
   de verdad decide la compra (procesador, RAM, disco, pantalla,
   sistema operativo y bateria). El detalle completo sigue
   estando en la tabla de caracteristicas.
   ========================================================= */

.tc-pg-ficha{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--tc-linea);
}

.tc-pg-ficha-titulo{
  margin:0 0 13px;
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--tc-tinta);
  font-size:14px;
  font-weight:600;
}

.tc-pg-ficha-titulo svg{
  width:17px;
  height:17px;
  color:var(--tc-tenue);
}

.tc-pg-ficha-lista{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.tc-pg-ficha-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:0;
}

.tc-pg-ficha-icono{
  flex:0 0 38px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#f6f7f9;
  color:var(--tc-tinta);
}

.tc-pg-ficha-icono svg{
  width:20px;
  height:20px;
}

.tc-pg-ficha-texto{
  min-width:0;
  padding-top:1px;
}

.tc-pg-ficha-nombre{
  display:block;
  color:var(--tc-tenue);
  font-size:11.5px;
  font-weight:500;
}

.tc-pg-ficha-valor{
  display:block;
  margin-top:2px;
  color:var(--tc-tinta);
  font-size:13.5px;
  font-weight:600;
  line-height:1.4;
}

.tc-pg-ficha-vertodo{
  display:inline-block;
  margin-top:13px;
  color:var(--tc-tinta);
  font-size:12.5px;
  font-weight:500;
  text-decoration:underline;
  text-underline-offset:3px;
}

.tc-pg-ficha-vertodo:hover{
  text-decoration:underline;
}

@media (max-width:680px){
  .tc-pg-ficha-lista{
    grid-template-columns:minmax(0,1fr);
  }
}


/* =========================================================
   TECOMSER - PRODUCTO / ENTREGA
   Recojo en tienda, llegada estimada y envio, con los mismos
   datos que muestra la tarjeta del catalogo.
   ========================================================= */

.tc-pg-entrega{
  margin-top:22px;
  padding-top:18px;
  display:grid;
  gap:14px;
  border-top:1px solid var(--tc-linea);
}

.tc-pg-entrega-cabecera{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.tc-pg-entrega-titulo{
  margin:0;
  color:var(--tc-tinta);
  font-size:14px;
  font-weight:600;
}

.tc-pg-entrega-titulo em{
  font-style:normal;
  text-decoration:underline;
  text-underline-offset:3px;
}

/* Abre el mismo selector de ubicacion de la barra superior. */
.tc-pg-entrega-cambiar{
  flex:0 0 auto;
  padding:0;
  border:0;
  background:transparent;
  color:#1d4ed8;
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
}

.tc-pg-entrega-cambiar:hover{
  text-decoration:underline;
}

.tc-pg-entrega-costo{
  flex:0 0 auto;
  color:var(--tc-tinta);
  font-size:12.5px;
  font-weight:600;
}

.tc-pg-entrega-gratis{
  color:#15803d;
}

.tc-pg-entrega-fila{
  display:flex;
  align-items:flex-start;
  gap:11px;
}

.tc-pg-entrega-fila svg{
  flex:0 0 21px;
  width:21px;
  height:21px;
  margin-top:1px;
  color:var(--tc-suave);
}

.tc-pg-entrega-fila--delivery svg{
  color:var(--tc-tinta);
}

.tc-pg-entrega-texto{
  min-width:0;
  color:var(--tc-suave);
  font-size:13px;
  line-height:1.5;
}

.tc-pg-entrega-texto strong{
  display:block;
  color:var(--tc-tinta);
  font-size:13.5px;
  font-weight:600;
}

.tc-pg-entrega-texto span{
  color:var(--tc-suave);
  font-size:12.5px;
}

.tc-pg-entrega-nota{
  margin:0;
  padding-top:11px;
  border-top:1px dashed #e5e7eb;
  color:var(--tc-tenue);
  font-size:12.5px;
  line-height:1.5;
}


/* =========================================================
   TECOMSER - PRODUCTO / COMPRA JUNTA
   El producto que se esta viendo mas los complementos que el
   catalogo sugiere. El total se recalcula al marcar o desmarcar,
   y todo se agrega al carrito de una sola vez.
   ========================================================= */

.tc-combo{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--tc-linea);
}

.tc-combo-titulo{
  margin:0 0 16px;
  color:var(--tc-tinta);
  font-size:17px;
  font-weight:600;
}

.tc-combo-caja{
  padding:18px;
  border:1px solid var(--tc-linea);
  border-radius:10px;
  background:#fafafa;
}

.tc-combo-pista{
  display:flex;
  align-items:stretch;
  gap:14px;
  overflow-x:auto;
  padding-bottom:6px;
}

.tc-combo-item{
  position:relative;
  flex:0 0 200px;
  padding:14px;
  border:1px solid var(--tc-linea);
  border-radius:9px;
  background:#fff;
}

/* El producto que se esta viendo siempre va incluido. */
.tc-combo-item--actual{
  border-color:#d6d9de;
}

.tc-combo-marca-actual{
  position:absolute;
  top:10px;
  left:10px;
  padding:3px 8px;
  border-radius:4px;
  background:#f0f1f3;
  color:var(--tc-suave);
  font-size:11px;
  font-weight:600;
}

.tc-combo-check{
  position:absolute;
  top:11px;
  left:11px;
  z-index:2;
  width:19px;
  height:19px;
  margin:0;
  display:grid;
  place-content:center;
  border:1.5px solid #c2cbd8;
  border-radius:3px;
  background:#fff;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .15s ease,background .15s ease;
}

.tc-combo-check:checked{
  border-color:var(--tc-accion);
  background:var(--tc-accion);
}

.tc-combo-check:checked::after{
  content:"";
  width:5px;
  height:9px;
  margin-top:-2px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

.tc-combo-media{
  width:100%;
  height:104px;
  display:grid;
  place-items:center;
  margin-bottom:10px;
}

.tc-combo-media img{
  max-width:100%;
  max-height:104px;
  object-fit:contain;
}

.tc-combo-marca{
  color:var(--tc-tenue);
  font-size:11.5px;
}

.tc-combo-nombre{
  margin:2px 0 7px;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  color:var(--tc-tinta);
  font-size:12.5px;
  font-weight:500;
  line-height:1.4;
}

.tc-combo-nombre a{
  color:inherit;
  text-decoration:none;
}

.tc-combo-nombre a:hover{
  text-decoration:underline;
}

.tc-combo-precio{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:6px;
}

.tc-combo-precio-valor{
  color:var(--tc-tinta);
  font-size:14px;
  font-weight:600;
}

.tc-combo-precio-anterior{
  color:var(--tc-tenue);
  font-size:11.5px;
  text-decoration:line-through;
}

.tc-combo-precio-dscto{
  color:#15803d;
  font-size:11.5px;
  font-weight:600;
}

/* Producto sin marcar: se atenua sin desaparecer. */
.tc-combo-item.is-fuera{
  opacity:.5;
}

.tc-combo-mas{
  flex:0 0 auto;
  align-self:center;
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--tc-accion);
  color:#fff;
  font-size:15px;
  line-height:1;
}

/* ---------- Pie con el total ---------- */

.tc-combo-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--tc-linea);
}

.tc-combo-total-texto{
  color:var(--tc-suave);
  font-size:13px;
}

.tc-combo-total-valor{
  margin-left:7px;
  color:var(--tc-tinta);
  font-size:22px;
  font-weight:700;
}

.tc-combo-ahorro{
  display:block;
  margin-top:3px;
  color:#15803d;
  font-size:12.5px;
  font-weight:600;
}

.tc-combo-boton{
  min-height:46px;
  padding:0 22px;
  border:0;
  border-radius:8px;
  background:var(--tc-accion);
  color:#fff;
  font:inherit;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease;
}

.tc-combo-boton:hover{
  background:var(--tc-accion-hover);
}

.tc-combo-boton[disabled]{
  background:#c9ced6;
  cursor:default;
}

@media (max-width:680px){
  .tc-combo-caja{
    padding:13px;
  }

  .tc-combo-item{
    flex:0 0 165px;
    padding:11px;
  }

  .tc-combo-pie{
    flex-direction:column;
    align-items:stretch;
  }

  .tc-combo-boton{
    width:100%;
  }
}


/* =========================================================
   TECOMSER - PRODUCTO / CARACTERISTICAS
   Tabla agrupada: el bloque (Procesamiento, Memoria, Pantalla...)
   ocupa la columna azul de la izquierda y sus caracteristicas van
   al costado. Los grupos salen de atributo_grupos, los mismos que
   se cargan en el admin.
   ========================================================= */

.tc-pg-bloque{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--tc-linea);
}

.tc-pg-bloque-titulo{
  margin:0 0 18px;
  color:var(--tc-tinta);
  font-size:17px;
  font-weight:600;
}

/* La tabla no cabe en un telefono y se desplaza de lado, pero cortada
   contra el borde parece rota y no invita a arrastrarla. Este
   degradado en el filo derecho la delata, y desaparece al llegar al
   final. */
.tc-pg-specs-envoltorio{
  position:relative;
}

.tc-pg-specs-envoltorio::after{
  content:"";
  position:absolute;
  top:1px;
  right:1px;
  bottom:1px;
  width:38px;

  border-radius:0 8px 8px 0;

  background:linear-gradient(
    to right,
    rgba(255,255,255,0),
    rgba(255,255,255,.92) 62%,
    #fff);

  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}

.tc-pg-specs-envoltorio.hay-mas::after{
  opacity:1;
}

/* Flecha sobre el degradado, para que se lea como "sigue". */
.tc-pg-specs-flecha{
  position:absolute;
  top:50%;
  right:9px;
  z-index:1;

  width:26px;
  height:26px;

  display:grid;
  place-items:center;

  transform:translateY(-50%);

  border:1px solid #e2e8f0;
  border-radius:50%;

  background:#fff;
  color:var(--tc-marca-azul,#071457);

  box-shadow:0 2px 8px rgba(15,23,42,.14);

  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
}

.tc-pg-specs-envoltorio.hay-mas .tc-pg-specs-flecha{
  opacity:1;
}

.tc-pg-specs-flecha svg{
  width:14px;
  height:14px;
}

.tc-pg-specs-marco{
  overflow-x:auto;

  /* Que el gesto horizontal se quede en la tabla y no arrastre la
     pagina entera al llegar al borde. */
  overscroll-behavior-x:contain;

  /* Safari anterior a la 13 no desplaza con inercia sin esto. */
  -webkit-overflow-scrolling:touch;

  border:1px solid #dfe3e8;
  border-radius:8px;
}

.tc-pg-specs{
  width:100%;
  border-collapse:collapse;
  min-width:520px;
}

.tc-pg-specs th,
.tc-pg-specs td{
  padding:10px 14px;
  text-align:left;
  vertical-align:top;
  font-size:13px;
  line-height:1.5;
  border-bottom:1px solid #e8ebef;
}

.tc-pg-specs tr:last-child th,
.tc-pg-specs tr:last-child td{
  border-bottom:0;
}

/* Columna del grupo: ocupa las filas de sus características.
   El selector incluye "th" para ganarle a la regla general de la tabla,
   que alinea todo a la izquierda. */
.tc-pg-specs th.tc-pg-specs-grupo{
  width:186px;
  padding:14px 12px;

  /* Azul de la marca, el mismo del pie y la cabecera. Antes era un
     plomo suelto que no aparecia en ningun otro sitio del sitio. */
  border-right:1px solid var(--tc-marca-azul-hondo,#050f42);
  border-bottom:1px solid var(--tc-marca-azul-hondo,#050f42);
  background:var(--tc-marca-azul,#071457);

  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-align:center;
  vertical-align:middle;
  line-height:1.45;
}

.tc-pg-specs-nombre{
  width:230px;
  border-right:1px solid #e8ebef;
  background:#fafbfc;
  color:var(--tc-suave);
  font-weight:500;
}

.tc-pg-specs-valor{
  color:var(--tc-tinta);
  font-weight:500;
}

/* Una dirección dentro de una característica: el driver, el manual.
   overflow-wrap porque una URL es una sola "palabra" de 54 caracteres y
   sin esto ensancha la columna y empuja la tabla fuera de la pantalla. */
.tc-pg-specs-valor .tc-pg-enlace{
  color:var(--tc-marca-azul,#071457);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  overflow-wrap:anywhere;
}

.tc-pg-specs-valor .tc-pg-enlace:hover{
  color:var(--tc-marca,#ff4b0b);
}

/* Un valor con varias líneas (listas de compatibilidad, puertos...) */
.tc-pg-specs-valor span{
  display:block;
}

.tc-pg-specs-valor span + span{
  margin-top:3px;
}

/* ---------- Copiar caracteristicas ---------- */

.tc-pg-specs-cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:18px;
}

.tc-pg-specs-cabecera .tc-pg-bloque-titulo{
  margin:0;
}

.tc-pg-copiar{
  flex:0 0 auto;
  margin-left:auto;
  min-height:36px;
  padding:0 13px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--tc-linea);
  border-radius:7px;
  background:#fff;
  color:var(--tc-suave);
  font:inherit;
  font-size:12.5px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .16s ease,color .16s ease;
}

.tc-pg-copiar svg{
  width:15px;
  height:15px;
}

.tc-pg-copiar:hover{
  border-color:var(--tc-tinta);
  color:var(--tc-tinta);
}

.tc-pg-copiar.is-copiado{
  border-color:#15803d;
  color:#15803d;
}

@media (max-width:680px){
  .tc-pg-bloque{
    margin-top:30px;
    padding-top:20px;
  }

  .tc-pg-specs th.tc-pg-specs-grupo{
    width:104px;
    font-size:10px;
    padding:9px 6px;
  }

  .tc-pg-specs-nombre{
    width:150px;
  }

  .tc-pg-specs th,
  .tc-pg-specs td{
    padding:8px 10px;
    font-size:12px;
  }
}


/* =========================================================
   TECOMSER - PRODUCTO / DESCRIPCION
   Texto largo del producto. Los videos viven en la galeria.
   ========================================================= */

.tc-pg-texto p{
  margin:0 0 11px;
  color:var(--tc-suave);
  font-size:14px;
  line-height:1.75;
}

.tc-pg-texto p:last-child{
  margin-bottom:0;
}



/* =========================================================
   TECOMSER - PRODUCTO / OPINIONES
   Promedio real de la tabla producto_valoraciones y formulario
   para calificar. Requiere sesion: una cuenta, un voto.
   ========================================================= */

.tc-val-resumen{
  display:flex;
  align-items:center;
  gap:22px;
  flex-wrap:wrap;
  padding-bottom:20px;
  border-bottom:1px solid var(--tc-linea);
}

.tc-val-nota{
  display:flex;
  align-items:baseline;
  gap:4px;
  color:var(--tc-tinta);
}

.tc-val-nota b{
  font-size:40px;
  font-weight:700;
  line-height:1;
}

.tc-val-nota span{
  color:var(--tc-tenue);
  font-size:15px;
}

.tc-val-detalle{
  display:grid;
  gap:4px;
}

.tc-val-estrellas{
  display:inline-flex;
  gap:2px;
  line-height:1;
}

.tc-val-estrella{
  color:#dfe4ea;
  font-size:19px;
  line-height:1;
}

.tc-val-estrella.is-llena{
  color:#f59e0b;
}

.tc-val-estrella.is-media{
  color:#f59e0b;
  opacity:.45;
}

.tc-val-total{
  color:var(--tc-suave);
  font-size:13px;
}

/* ---------- Calificar ---------- */

.tc-val-form{
  margin-top:20px;
}

.tc-val-form-titulo{
  margin:0 0 11px;
  color:var(--tc-tinta);
  font-size:14px;
  font-weight:600;
}

.tc-val-elegir{
  display:inline-flex;
  gap:4px;
  margin-bottom:12px;
}

.tc-val-elegir button{
  padding:0;
  border:0;
  background:transparent;
  color:#dfe4ea;
  font-size:29px;
  line-height:1;
  cursor:pointer;
  transition:color .12s ease,transform .12s ease;
}

.tc-val-elegir button:hover{
  transform:scale(1.12);
}

.tc-val-elegir button.is-marcada{
  color:#f59e0b;
}

.tc-val-comentario{
  width:100%;
  min-height:88px;
  padding:11px 13px;
  border:1px solid var(--tc-linea);
  border-radius:8px;
  outline:0;
  resize:vertical;
  font:inherit;
  font-size:13.5px;
  color:var(--tc-tinta);
}

.tc-val-comentario:focus{
  border-color:var(--tc-suave);
}

.tc-val-enviar{
  min-height:42px;
  margin-top:11px;
  padding:0 22px;
  border:0;
  border-radius:8px;
  background:var(--tc-accion);
  color:#fff;
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  cursor:pointer;
  transition:background .18s ease;
}

.tc-val-enviar:hover{
  background:var(--tc-accion-hover);
}

/* Mientras falta la nota, el boton no se puede pulsar, pero TIENE que
   verse. Antes se pintaba de gris claro sobre una tarjeta clara y
   desaparecia: el cliente no sabia que existia hasta que tocaba una
   estrella por casualidad. Ahora se lee como boton apagado, con su
   borde y su texto, no como un hueco. */
.tc-val-enviar[disabled]{
  border:1px solid #cbd5e1;
  background:#f1f5f9;

  /* Contraste 6:1 sobre ese fondo. Con el #64748b de la paleta suave
     se quedaba en el limite y volvia a costar leerlo. */
  color:#475569;

  cursor:default;
}

/* Dice que falta para poder enviar; desaparece al elegir la nota. */
.tc-val-pista{
  margin:8px 0 0;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--tc-suave);
  font-size:12.5px;
}

.tc-val-pista svg{
  width:14px;
  height:14px;
  flex:0 0 14px;
  color:#f59e0b;
}

.tc-val-form.tiene-nota .tc-val-pista{
  display:none;
}

.tc-val-aviso{
  margin:11px 0 0;
  color:var(--tc-suave);
  font-size:13px;
  line-height:1.55;
}

.tc-val-aviso a{
  color:#1d4ed8;
}

.tc-val-estado{
  margin:11px 0 0;
  color:#15803d;
  font-size:13px;
  font-weight:600;
}

.tc-val-vacio{
  margin:18px 0 0;
  color:var(--tc-suave);
  font-size:13.5px;
  line-height:1.6;
}

/* ---------- Lo que escribieron los clientes ---------- */

.tc-val-lista{
  list-style:none;
  margin:20px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--tc-linea,#e5e7eb);
  display:flex; flex-direction:column; gap:14px;
}

.tc-val-op{
  padding:13px 15px;
  border:1px solid var(--tc-linea,#e5e7eb); border-radius:11px;
  background:#fff;
}

/* La propia se distingue: quien acaba de escribir tiene que reconocerla
   de un vistazo, sin leer los nombres uno por uno. */
.tc-val-op.es-mia{ border-color:#fdba74; background:#fffbf5; }

/* La recien puesta se anuncia sola. Sin esto, guardar y que la lista cambie
   sin aviso deja la duda de si paso algo. */
.tc-val-op.es-nueva{ animation:tcOpAparece 1.6s ease-out; }
@keyframes tcOpAparece{
  0%   { background:#fff7ed; box-shadow:0 0 0 3px rgba(255,75,11,.22); }
  100% { background:#fffbf5; box-shadow:0 0 0 0 rgba(255,75,11,0); }
}
@media (prefers-reduced-motion:reduce){
  .tc-val-op.es-nueva{ animation:none; }
}

.tc-val-op-cab{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.tc-val-op-hueco{ flex:1 1 auto; }

.tc-val-op-quien{ color:var(--tc-tinta,#2b2f38); font-size:14px; font-weight:700; }

.tc-val-op-tuya{
  padding:2px 8px; border-radius:999px;
  background:#ffedd5; color:#9a3412;
  font-size:10.5px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
}

.tc-val-op-fecha{ color:#9ca3af; font-size:12px; }

.tc-val-op-estrellas{ display:block; margin-top:3px; color:#d1d5db; font-size:13px; letter-spacing:1px; }
.tc-val-op-estrellas .is-llena{ color:#f59e0b; }

.tc-val-op-texto{
  margin:7px 0 0;
  color:var(--tc-tinta,#2b2f38);
  font-size:14px; line-height:1.6;
  white-space:pre-line;
  overflow-wrap:anywhere;
}

/* ---------- Traer la siguiente tanda ---------- */

.tc-val-mas{ margin-top:14px; text-align:center; }

.tc-val-mas-boton{
  padding:9px 20px;
  border:1px solid var(--tc-linea,#e5e7eb); border-radius:9px; background:#fff;
  color:var(--tc-tinta,#2b2f38);
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
}
.tc-val-mas-boton:hover{ border-color:#ff4b0b; color:#ff4b0b; }
.tc-val-mas-boton:disabled{ opacity:.6; cursor:default; }

.tc-val-mas-aviso{ margin:8px 0 0; color:#9ca3af; font-size:12.5px; }

/* El centinela no se ve: solo esta ahi para que el vigia sepa que el
   visitante llego al final de lo que hay puesto. */
.tc-val-centinela{ height:1px; }

/* ---------- Fotos y compra verificada en una opinión ---------- */

.tc-val-op-verificada{
  padding:2px 8px;
  border-radius:999px;
  background:#ecfdf5;
  color:#065f46;
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap;
}

.tc-val-op-fotos{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:9px;
}

.tc-val-op-fotos a{ display:block; }

.tc-val-op-fotos img{
  width:84px;
  height:84px;
  object-fit:cover;
  display:block;
  border:1px solid var(--tc-linea,#e5e7eb);
  border-radius:9px;
  background:#f8fafc;
  transition:border-color .15s ease;
}

.tc-val-op-fotos a:hover img{ border-color:var(--tc-marca-azul,#071457); }

@media (max-width:520px){
  .tc-val-op-fotos img{ width:72px; height:72px; }
}


/* =========================================================
   TECOMSER - PRODUCTO / PESTANAS
   Caracteristicas, opiniones, garantia y descarga de la ficha.
   Sin JavaScript se ven todas las secciones una tras otra:
   el script solo agrupa lo que ya esta en la pagina.
   ========================================================= */

.tc-tabs{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--tc-linea);
}

.tc-tabs-barra{
  display:flex;
  align-items:center;
  gap:4px;
  overflow-x:auto;
  border-bottom:1px solid var(--tc-linea);
}

.tc-tabs-boton{
  flex:0 0 auto;
  padding:12px 18px;
  border:0;
  border-bottom:2px solid transparent;
  background:transparent;
  color:var(--tc-suave);
  font:inherit;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}

.tc-tabs-boton:hover{
  color:var(--tc-tinta);
}

.tc-tabs-boton.is-activo{
  border-bottom-color:var(--tc-accion);
  color:var(--tc-tinta);
  font-weight:600;
}

.tc-tabs-panel{
  padding-top:24px;
}

/* Con JavaScript activo solo se ve el panel elegido. */
.tc-tabs[data-listo="1"] .tc-tabs-panel[hidden]{
  display:none;
}

.tc-tabs-panel-titulo{
  margin:0 0 16px;
  color:var(--tc-tinta);
  font-size:17px;
  font-weight:600;
}

/* Con JavaScript el titulo interno sobra: ya lo dice la pestana. */
.tc-tabs[data-listo="1"] .tc-tabs-panel-titulo{
  display:none;
}

/* ---------- Garantia ---------- */

.tc-tabs-garantia{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

.tc-tabs-garantia-item{
  display:flex;
  align-items:flex-start;
  gap:11px;
}

.tc-tabs-garantia-item svg{
  flex:0 0 22px;
  width:22px;
  height:22px;
  margin-top:1px;
  color:var(--tc-suave);
}

.tc-tabs-garantia-texto strong{
  display:block;
  margin-bottom:3px;
  color:var(--tc-tinta);
  font-size:13.5px;
  font-weight:600;
}

.tc-tabs-garantia-texto span{
  color:var(--tc-suave);
  font-size:13px;
  line-height:1.6;
}

/* ---------- Descarga de la ficha ---------- */

.tc-tabs-descarga{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  padding:18px;
  border:1px solid var(--tc-linea);
  border-radius:10px;
  background:#fafafa;
}

.tc-tabs-descarga-icono{
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#fff;
  border:1px solid var(--tc-linea);
  color:var(--tc-oferta);
}

.tc-tabs-descarga-icono svg{
  width:22px;
  height:22px;
}

.tc-tabs-descarga-texto{
  flex:1;
  min-width:200px;
}

.tc-tabs-descarga-texto strong{
  display:block;
  color:var(--tc-tinta);
  font-size:13.5px;
  font-weight:600;
}

.tc-tabs-descarga-texto span{
  color:var(--tc-suave);
  font-size:12.5px;
}

.tc-tabs-descarga-boton{
  flex:0 0 auto;
  min-height:42px;
  padding:0 20px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  border-radius:8px;
  background:var(--tc-accion);
  color:#fff;
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease;
}

.tc-tabs-descarga-boton:hover{
  background:var(--tc-accion-hover);
}

.tc-tabs-descarga-boton svg{
  width:16px;
  height:16px;
}

/* ---------- Visor del PDF ---------- */

.tc-tabs-visor{
  margin-top:16px;
  border:1px solid var(--tc-linea);
  border-radius:10px;
  overflow:hidden;
  background:#f4f6f9;
}

.tc-tabs-visor iframe{
  width:100%;
  height:min(78vh,860px);
  border:0;
  display:block;
}

/* Si el navegador no sabe mostrar PDF (pasa en varios moviles) queda
   este aviso con el enlace de descarga. */
.tc-tabs-visor-aviso{
  padding:26px 20px;
  color:var(--tc-suave);
  font-size:13px;
  text-align:center;
}

@media (max-width:680px){
  .tc-tabs-visor iframe{
    height:70vh;
  }
}


/* =========================================================
   TECOMSER - PRODUCTO / OTROS PRODUCTOS
   Reutiliza la tarjeta del catalogo, asi se comporta igual:
   galeria, favoritos, comparar y carrito.
   ========================================================= */

.tc-pg-carrusel{
  margin-top:40px;
  padding-top:26px;
  border-top:1px solid var(--tc-linea);
}

.tc-pg-carrusel-titulo{
  margin:0 0 16px;
  color:var(--tc-tinta);
  font-size:17px;
  font-weight:600;
}

.tc-pg-carrusel-pista{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
}

@media (max-width:1240px){
  .tc-pg-carrusel-pista{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (max-width:900px){
  .tc-pg-carrusel-pista{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:680px){
  .tc-pg-carrusel-pista{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
}


/* =========================================================
   TECOMSER - PRODUCTO / FORMAS DE ENTREGA
   Ventana con las tarifas reales de delivery por distrito y el
   retiro en tienda. Se abre desde el enlace del bloque de entrega.
   ========================================================= */

.tc-fe-capa{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:8000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(15,23,42,.5);
}

.tc-fe-capa.is-abierta{
  display:flex;
}

.tc-fe{
  width:min(560px,100%);
  max-height:86vh;
  display:flex;
  flex-direction:column;
  border-radius:12px;
  background:#fff;
  box-shadow:0 24px 60px rgba(15,23,42,.28);
  overflow:hidden;
}

.tc-fe-cabecera{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 20px;
  border-bottom:1px solid var(--tc-linea,#e5e7eb);
  background:#fafafa;
}

.tc-fe-titulo{
  margin:0;
  color:#2b2f38;
  font-size:16px;
  font-weight:600;
}

.tc-fe-cerrar{
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:#6b7280;
  cursor:pointer;
  transition:background .15s ease;
}

.tc-fe-cerrar:hover{
  background:#eceef1;
}

.tc-fe-cerrar svg{
  width:17px;
  height:17px;
}

.tc-fe-cuerpo{
  padding:20px;
  overflow-y:auto;
}

.tc-fe-intro{
  margin:0 0 12px;
  color:#6b7280;
  font-size:13px;
}

.tc-fe-ubicacion{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-radius:8px;
  background:#f6f7f9;
}

.tc-fe-ubicacion-texto{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:#2b2f38;
  font-size:13.5px;
  font-weight:600;
}

.tc-fe-ubicacion-texto svg{
  flex:0 0 17px;
  width:17px;
  height:17px;
  color:#6b7280;
}

.tc-fe-cambiar{
  flex:0 0 auto;
  padding:0;
  border:0;
  background:transparent;
  color:#1d4ed8;
  font:inherit;
  font-size:12.5px;
  cursor:pointer;
}

.tc-fe-cambiar:hover{
  text-decoration:underline;
}

.tc-fe-seccion{
  margin-top:22px;
  padding-top:20px;
  border-top:1px solid var(--tc-linea,#e5e7eb);
}

.tc-fe-seccion:first-of-type{
  margin-top:20px;
}

.tc-fe-seccion-titulo{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 4px;
  color:#2b2f38;
  font-size:14px;
  font-weight:600;
}

.tc-fe-seccion-titulo svg{
  width:19px;
  height:19px;
  color:#6b7280;
}

.tc-fe-seccion-nota{
  margin:0 0 13px;
  color:#9aa3af;
  font-size:12.5px;
}

.tc-fe-zonas{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}

.tc-fe-zona{
  padding:12px 13px;
  border:1px solid var(--tc-linea,#e5e7eb);
  border-radius:8px;
  text-align:center;
}

/* La zona del cliente se resalta para que encuentre su tarifa. */
.tc-fe-zona.is-tuya{
  border-color:#2b2f38;
  background:#fafafa;
}

.tc-fe-zona-precio{
  display:block;
  color:#2b2f38;
  font-size:15px;
  font-weight:700;
}

.tc-fe-zona-nombre{
  display:block;
  margin-top:3px;
  color:#6b7280;
  font-size:12.5px;
}

.tc-fe-zona-tuya{
  display:block;
  margin-top:5px;
  color:#15803d;
  font-size:11.5px;
  font-weight:600;
}

.tc-fe-tienda{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 14px;
  border:1px solid var(--tc-linea,#e5e7eb);
  border-radius:8px;
}

.tc-fe-tienda-texto strong{
  display:block;
  color:#2b2f38;
  font-size:13.5px;
  font-weight:600;
}

.tc-fe-tienda-texto span{
  display:block;
  margin-top:2px;
  color:#6b7280;
  font-size:12.5px;
  line-height:1.5;
}

.tc-fe-gratis{
  color:#15803d;
  font-weight:700;
}

.tc-fe-aviso{
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px dashed var(--tc-linea,#e5e7eb);
  color:#9aa3af;
  font-size:12px;
  line-height:1.6;
}

@media (max-width:680px){
  .tc-fe-capa{
    padding:0;
    align-items:flex-end;
  }

  .tc-fe{
    width:100%;
    max-height:92vh;
    border-radius:14px 14px 0 0;
  }
}


.tc-pgb,
.tc-pgh{
  --pgb-azul:var(--tc-marca-azul,#071457);
  --pgb-naranja:var(--tc-marca-naranja,#ff4b0b);
  --pgb-tinta:#0f172a;
  --pgb-suave:#64748b;
  --pgb-linea:#e5e7eb;
}

.tc-pgb,
.tc-pgh{
  display:none;
}

@media (max-width:820px){

  /* ---------- La barra ---------- */

  body.tc-compacta .tc-pgb{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:2900;

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 10px calc(8px + env(safe-area-inset-bottom));

    /* Opaca. Translúcida dejaba leer el texto de la ficha a través del
       precio, y en un teléfono sin desenfoque eran dos textos encima. */
    background:#ffffff;
    border-top:1px solid var(--pgb-linea);
    box-shadow:0 -6px 18px rgba(15,23,42,.06);

    font-family:inherit;
  }

  /* Los dos botones se reparten el ancho a partes iguales. */
  .tc-pgb-boton{
    flex:1 1 0;
    min-width:0;

    height:46px;
    padding:0 12px;

    border:0;
    border-radius:999px;

    font:inherit;
    font-size:15px;
    font-weight:700;
    white-space:nowrap;

    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
    transition:transform .12s ease, filter .12s ease;
  }

  .tc-pgb-boton{
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .tc-pgb-boton:active{
    transform:scale(.97);
  }

  /* En los teléfonos más angostos "Agregar al carrito" no cabe a 15 px. */
  @media (max-width:360px){
    .tc-pgb-boton{
      font-size:13.5px;
      padding:0 8px;
    }
  }

  .tc-pgb-carrito{
    background:#fff1ea;
    color:var(--pgb-naranja);
  }

  .tc-pgb-comprar{
    background:var(--pgb-naranja);
    color:#ffffff;
    box-shadow:0 6px 14px rgba(255,75,11,.28);
  }

  /* Sitio debajo del pie para que la barra no tape lo último. */
  body.tc-compacta .tc-sitio{
    padding-bottom:calc(64px + env(safe-area-inset-bottom));
  }

  /* WhatsApp y sugerencias suben un escalón: si no, quedan encima de
     "Comprar". */
  body.tc-compacta .tc-wa{
    bottom:calc(74px + env(safe-area-inset-bottom));
  }

  body.tc-compacta .tc-wa.is-elevado{
    bottom:calc(157px + env(safe-area-inset-bottom));
  }

  body.tc-compacta .tc-op{
    bottom:calc(139px + env(safe-area-inset-bottom));
  }

  body.tc-compacta .tc-op.is-elevado{
    bottom:calc(221px + env(safe-area-inset-bottom));
  }

  /* La barra del comparador también va fija abajo, y encima de esta
     (z-index 7000): al tocar "Comparar" tapaba "Agregar" y "Comprar" y ya
     no había cómo comprar sin vaciar la comparación. Sube justo encima. */
  body.tc-compacta .tc-comparador{
    bottom:calc(64px + env(safe-area-inset-bottom));
  }

  /* Las migas se van: con la cabecera compacta, "Inicio / Catálogo /
     Cargadores / nombre entero" eran dos líneas antes de la foto. La
     categoría sigue en el enlace de volver del navegador y en la ficha. */
  body.tc-compacta .tc-pg-migas{
    display:none;
  }

  /* ---------- La hoja ---------- */

  .tc-pgh.is-abierta{
    position:fixed;
    inset:0;
    z-index:8800;

    display:block;
  }

  .tc-pgh-fondo{
    position:absolute;
    inset:0;

    background:rgba(15,23,42,.45);

    animation:tc-pgh-aparece .18s ease-out;
  }

  .tc-pgh-hoja{
    position:absolute;
    left:0;
    right:0;
    bottom:0;

    max-height:86vh;
    max-height:86dvh;

    display:flex;
    flex-direction:column;

    background:#ffffff;
    border-radius:18px 18px 0 0;
    box-shadow:0 -12px 32px rgba(15,23,42,.18);

    animation:tc-pgh-sube .22s cubic-bezier(.2,.8,.2,1);
  }

  .tc-pgh-asa{
    width:38px;
    height:4px;
    margin:8px auto 2px;

    border-radius:999px;
    background:#d6dce5;
  }

  .tc-pgh-cab{
    display:grid;
    grid-template-columns:76px minmax(0,1fr) 36px;
    align-items:start;
    gap:12px;

    padding:8px 14px 12px;

    border-bottom:1px solid var(--pgb-linea);
  }

  .tc-pgh-foto{
    width:76px;
    height:76px;

    object-fit:contain;

    border:1px solid var(--pgb-linea);
    border-radius:12px;
    background:#f8fafc;
  }

  .tc-pgh-datos{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:2px;
    padding-top:2px;
  }

  .tc-pgh-monto{
    color:var(--pgb-naranja);
    font-size:22px;
    font-weight:800;
    letter-spacing:-.02em;
    line-height:1.1;
  }

  /* "S/30.00 c/u · 2 unidades": solo con más de una. Arriba va el total,
     que es lo que se va a pagar; aquí, de dónde sale. */
  .tc-pgh-unidad{
    color:var(--pgb-suave);
    font-size:12px;
    font-weight:600;
  }

  .tc-pgh-nombre{
    display:-webkit-box;
    overflow:hidden;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    color:var(--pgb-tinta);
    font-size:13px;
    line-height:1.3;
  }

  .tc-pgh-cerrar{
    width:36px;
    height:36px;

    display:grid;
    place-items:center;

    border:0;
    border-radius:50%;
    background:#f1f5f9;
    color:var(--pgb-tinta);

    cursor:pointer;
  }

  .tc-pgh-cerrar svg{
    width:18px;
    height:18px;
  }

  .tc-pgh-cuerpo{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;

    padding:6px 14px 10px;
  }

  /* El selector prestado: sin el margen y la raya que lleva en la ficha. */
  .tc-pgh-cuerpo .tc-var{
    margin:0;
    padding:6px 0 0;
    border:0;
  }

  .tc-pgh-fila-cantidad{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-top:12px;
    padding-top:12px;

    border-top:1px solid var(--pgb-linea);

    color:var(--pgb-tinta);
    font-size:14px;
    font-weight:700;
  }

  /* Sin variantes no hay selector encima: la raya y el aire de la
     cantidad sobraban y salía una doble línea bajo la cabecera. */
  .tc-pgh-cuerpo [data-pgh-sitio-selector]:empty + .tc-pgh-fila-cantidad{
    margin-top:0;
    padding-top:4px;
    border-top:0;
  }

  .tc-pgh-pie{
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));

    border-top:1px solid var(--pgb-linea);
    background:#ffffff;
  }

  .tc-pgh-confirmar{
    width:100%;
    height:48px;

    border:0;
    border-radius:999px;

    background:var(--pgb-naranja);
    color:#ffffff;

    font:inherit;
    font-size:16px;
    font-weight:800;

    cursor:pointer;
    transition:filter .15s ease, background .15s ease;
  }

  /* Sin combinación cerrada se ve apagado, pero se puede tocar: al
     tocarlo, el selector parpadea y dice qué falta. Un botón muerto no
     explica nada. */
  .tc-pgh-confirmar[aria-disabled="true"]{
    background:#cbd5e1;
    color:#ffffff;
  }

  /* La caja de cantidad llega con el ancho que tenía en la ficha, donde
     compartía fila con "Agregar al carrito". Aquí va sola a la derecha. */
  .tc-pgh-fila-cantidad .tc-pg-cantidad-control{
    flex:0 0 auto;
    width:132px;
    margin:0;
  }

  html.tc-pgh-bloqueo,
  html.tc-pgh-bloqueo body{
    overflow:hidden;
  }

  /* Con la hoja abierta, WhatsApp y sugerencias se apartan: quedaban
     encima de la cantidad y del botón de confirmar. Vuelven al cerrar. */
  html.tc-pgh-bloqueo .tc-wa,
  html.tc-pgh-bloqueo .tc-op,
  html.tc-pgh-bloqueo .tc-comparador{
    visibility:hidden;
  }
}

@keyframes tc-pgh-aparece{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes tc-pgh-sube{
  from{ transform:translateY(100%); }
  to{ transform:none; }
}

@media (prefers-reduced-motion:reduce){
  .tc-pgh-fondo,
  .tc-pgh-hoja{
    animation:none;
  }
}


/* =========================================================
   TECOMSER - CARRITO / AVISO AL AGREGAR
   El carrito vive en el navegador (localStorage). Este aviso
   confirma la accion sin sacar al cliente de la pagina.
   ========================================================= */

.tc-carrito-aviso{
  position:fixed;
  right:18px;

  /* Por encima de los botones flotantes de WhatsApp y sugerencias,
     que ocupan la esquina inferior derecha. */
  bottom:148px;

  z-index:9000;
  max-width:min(360px,92vw);
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#fff;
  box-shadow:0 14px 40px rgba(15,23,42,.16);
  opacity:0;
  transform:translateY(10px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}

/* Amarillo, no verde: no se agrego lo que se pidio. Un aviso identico al
   de exito haria pensar que si. */
.tc-carrito-aviso.es-tope .tc-carrito-aviso-icono{ background:#fef3c7; color:#b45309; }
.tc-carrito-aviso.es-tope .tc-carrito-aviso-texto span{ color:#b45309; font-weight:600; }

.tc-carrito-aviso.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.tc-carrito-aviso-icono{
  flex:0 0 32px;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#dcfce7;
  color:#15803d;
}

.tc-carrito-aviso-icono svg{
  width:17px;
  height:17px;
}

.tc-carrito-aviso-texto{
  min-width:0;
  flex:1;
  color:#0f172a;
  font-size:12.5px;
  line-height:1.4;
}

.tc-carrito-aviso-texto strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:750;
}

.tc-carrito-aviso-texto span{
  color:#64748b;
  font-size:11.5px;
}

.tc-carrito-aviso a{
  flex:0 0 auto;
  padding:8px 13px;
  border-radius:8px;
  background:#071457;
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  text-decoration:none;
}

.tc-carrito-aviso a:hover{
  background:#050f42;
}


/* =========================================================
   VENTANA DE PRODUCTO AGREGADO
   ========================================================= */

.tc-agr[hidden]{ display:none; }

.tc-agr{
  position:fixed;
  inset:0;
  /* Por encima de la cabecera (3200) y de sus paneles (5000). */
  z-index:9400;
  display:grid;
  place-items:center;
  padding:16px;
}

.tc-agr-velo{
  position:absolute;
  inset:0;
  background:rgba(8,13,30,.55);
}

.tc-agr-caja{
  position:relative;
  width:min(100%,760px);
  max-height:min(92vh,92dvh);
  overflow-y:auto;
  border-radius:16px;
  background:#fff;
  box-shadow:0 24px 70px rgba(8,13,30,.34);
  animation:tcAgrEntra .18s ease-out;
}

@keyframes tcAgrEntra{
  from{ opacity:0; transform:translateY(10px) scale(.985); }
  to{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
  .tc-agr-caja{ animation:none; }
}

/* --- CABECERA --------------------------------------------------------- */

.tc-agr-cab{
  display:flex;
  align-items:center;
  gap:11px;
  padding:18px 20px;
  border-bottom:1px solid #eef2f7;
}

.tc-agr-tick{ flex:0 0 auto; color:#16a34a; }
.tc-agr-tick svg{ width:26px; height:26px; display:block; }

.tc-agr-cab h2{
  margin:0;
  flex:1 1 auto;
  font-size:16.5px;
  font-weight:700;
  color:#0f172a;
}

.tc-agr-x{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:#64748b;
  cursor:pointer;
}
.tc-agr-x:hover{ background:#f1f5f9; color:#0f172a; }
.tc-agr-x svg{ width:19px; height:19px; }

/* --- LA LÍNEA AGREGADA ------------------------------------------------ */

.tc-agr-linea{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 20px;
  flex-wrap:wrap;
}

.tc-agr-foto{
  flex:0 0 auto;
  width:66px;
  height:66px;
  border:1px solid #eef2f7;
  border-radius:10px;
  object-fit:contain;
  background:#fff;
}

.tc-agr-datos{ flex:1 1 200px; min-width:0; }

.tc-agr-marca{
  display:block;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
}

.tc-agr-nombre{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:2px;
  font-size:14px;
  font-weight:650;
  line-height:1.35;
  color:#0f172a;
}

.tc-agr-precio{
  flex:0 0 auto;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.01em;
  color:#0f172a;
}
.tc-agr-precio small{
  display:block;
  margin-top:1px;
  font-size:12px;
  font-weight:500;
  color:#94a3b8;
  text-decoration:line-through;
}

.tc-agr-cantidad{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:2px;
  border:1px solid #dbe3ec;
  border-radius:9px;
  overflow:hidden;
}
.tc-agr-cantidad button{
  width:34px;
  height:36px;
  border:0;
  background:#fff;
  color:#0f172a;
  font-size:17px;
  font-weight:700;
  cursor:pointer;
}
.tc-agr-cantidad button:hover{ background:#f1f5f9; }
.tc-agr-cantidad button:disabled{ color:#cbd5e1; cursor:default; background:#fff; }
.tc-agr-cantidad span{
  min-width:34px;
  text-align:center;
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
  color:#0f172a;
}

.tc-agr-tope{
  flex:0 0 auto;
  font-size:11.5px;
  color:#94a3b8;
}

/* --- SUGERIDOS -------------------------------------------------------- */

.tc-agr-sugeridos{
  padding:0 20px 6px;
  border-top:1px solid #eef2f7;
}
.tc-agr-sugeridos[hidden]{ display:none; }

.tc-agr-sugeridos h3{
  margin:16px 0 12px;
  font-size:15px;
  font-weight:700;
  color:#0f172a;
}

.tc-agr-carrusel{ position:relative; }

.tc-agr-pista{
  display:flex;
  gap:12px;
  /* Sitio para que las flechas no se coman la primera ni la última tarjeta. */
  padding-left:22px;
  padding-right:22px;
  overflow-x:auto;
  scroll-behavior:smooth;
  scroll-snap-type:x mandatory;
  padding-bottom:6px;
  scrollbar-width:none;
}
.tc-agr-pista::-webkit-scrollbar{ display:none; }

.tc-agr-item{
  flex:0 0 auto;
  width:174px;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  padding:12px;
  border:1px solid #e6ebf2;
  border-radius:12px;
  background:#fff;
  text-decoration:none;
}
.tc-agr-item:hover{ border-color:#c3d0e4; }

.tc-agr-item img{
  width:100%;
  height:104px;
  object-fit:contain;
  margin-bottom:9px;
}

/* NI LA MARCA NI EL NOMBRE VAN SUBRAYADOS

   Los dos viven dentro del <a> de la tarjeta, y un enlace sin regla propia
   sale subrayado por defecto del navegador. En una rejilla de cuatro
   tarjetas eso son ocho rayas compitiendo con las fotos: parece un listado
   de enlaces, no un escaparate.

   La tarjeta entera ya se ve pulsable -cambia al pasar por encima-, así que
   la raya no informa de nada que no se sepa ya. */
.tc-agr-item > a{
  display:block;
  color:inherit;
  text-decoration:none;
}
.tc-agr-item > a:hover .tc-agr-item-nombre{ color:#071457; }

.tc-agr-item-marca{
  font-size:10px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#94a3b8;
}

.tc-agr-item-nombre{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:2px 0 7px;
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  color:#0f172a;
  min-height:34px;
}

.tc-agr-item-precio{
  display:flex;
  align-items:baseline;
  gap:6px;
  flex-wrap:wrap;
  margin-top:auto;
}
.tc-agr-item-precio strong{ font-size:15px; font-weight:800; color:#0f172a; }
.tc-agr-item-precio s{ font-size:11.5px; color:#94a3b8; }

.tc-agr-item-dscto{
  padding:2px 7px;
  border-radius:999px;
  background:#d92d20;
  color:#fff;
  font-size:10px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
}

.tc-agr-item-boton{
  margin-top:10px;
  padding:9px 10px;
  border:0;
  border-radius:9px;
  background:#111827;
  color:#fff;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  text-align:center;
  cursor:pointer;
}
.tc-agr-item-boton:hover{ background:#000; }
.tc-agr-item-boton.is-puesto{ background:#16a34a; }

/* LAS FLECHAS

   Estaban en `top:calc(50% - 22px)`: un desplazamiento a ojo, que solo
   cuadra si las tarjetas miden exactamente lo que medían el día que se
   escribió. En cuanto un nombre ocupa dos líneas en vez de una, la tarjeta
   crece y la flecha se queda arriba.

   `top:50%` con `translateY(-50%)` centra de verdad, mida lo que mida.

   Y el icono ya no es el carácter «‹»: una tipografía lo dibuja donde
   quiere dentro de su caja, y por eso se veía descolgado hacia un lado
   aunque el botón sí estuviera centrado. Un SVG ocupa su caja entera y no
   depende de la tipografía que tenga instalada quien mira. */
.tc-agr-flecha{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:2;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:1px solid #dbe3ec;
  border-radius:50%;
  background:#fff;
  color:#0f172a;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(15,23,42,.12);
  transition:background .15s ease, border-color .15s ease;
}
.tc-agr-flecha:hover{ background:#f6f8fb; border-color:#c3cedb; }

.tc-agr-flecha svg{
  width:15px;
  height:15px;
  display:block;
}

/* DENTRO DEL CUADRO, NO FUERA

   Con `left:-10px` el botón asomaba por el borde del aviso y se veía
   cortado. Aquí dentro se ve entero, y la pista lleva sitio a los lados
   para que no tape la primera ni la última tarjeta. */
.tc-agr-flecha--izq{ left:2px; }
.tc-agr-flecha--der{ right:2px; }
.tc-agr-flecha[hidden]{ display:none; }

/* --- PIE -------------------------------------------------------------- */

.tc-agr-pie{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding:16px 20px 20px;
  border-top:1px solid #eef2f7;
}

.tc-agr-nota{
  flex:1 1 200px;
  font-size:12px;
  line-height:1.5;
  color:#94a3b8;
}

.tc-agr-botones{
  display:flex;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
}

.tc-agr-seguir{
  border:0;
  background:transparent;
  color:#0b3c8c;
  font-family:inherit;
  font-size:13.5px;
  font-weight:650;
  text-decoration:underline;
  cursor:pointer;
}

.tc-agr-ir{
  padding:13px 26px;
  border-radius:999px;
  background:#111827;
  color:#fff;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.tc-agr-ir:hover{ background:#000; }

@media (max-width:560px){
  .tc-agr{ padding:0; place-items:end center; }
  .tc-agr-caja{
    width:100%;
    max-height:94dvh;
    border-radius:16px 16px 0 0;
  }
  .tc-agr-linea{ gap:11px; }
  .tc-agr-precio{ font-size:17px; }
  .tc-agr-botones{ width:100%; justify-content:space-between; }
  .tc-agr-ir{ flex:1 1 auto; text-align:center; }
}


/* =========================================================
   TECOMSER - COMPARADOR
   Barra flotante que junta hasta 4 productos y lleva a /comparar.
   La seleccion vive en el navegador, asi que se conserva al
   pasar de pagina o de categoria.
   ========================================================= */

.tc-comparador{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:7000;
  padding:12px 20px;
  display:none;
  align-items:center;
  gap:16px;
  border-top:1px solid #e2e8f0;
  background:#fff;
  box-shadow:0 -10px 34px rgba(15,23,42,.13);
}

.tc-comparador.is-visible{
  display:flex;
}

.tc-comparador-titulo{
  flex:0 0 auto;
  color:#0f172a;
  font-size:13px;
  font-weight:800;
}

.tc-comparador-titulo span{
  display:block;
  margin-top:2px;
  color:#94a3b8;
  font-size:11px;
  font-weight:600;
}

.tc-comparador-items{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  overflow-x:auto;
  padding-bottom:2px;
}

.tc-comparador-item{
  position:relative;
  flex:0 0 auto;
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border:1px solid #e2e8f0;
  border-radius:9px;
  background:#fff;
  overflow:hidden;
}

.tc-comparador-item img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:6px;
}

.tc-comparador-quitar{
  position:absolute;
  top:2px;
  right:2px;
  width:19px;
  height:19px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(15,23,42,.72);
  color:#fff;
  font-size:12px;
  line-height:1;
  cursor:pointer;
}

.tc-comparador-quitar:hover{
  background:#e11d48;
}

.tc-comparador-hueco{
  flex:0 0 auto;
  width:66px;
  height:66px;
  border:1.5px dashed #cbd5e1;
  border-radius:9px;
}

.tc-comparador-acciones{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.tc-comparador-vaciar{
  padding:0;
  border:0;
  background:transparent;
  color:#64748b;
  font:inherit;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
}

.tc-comparador-vaciar:hover{
  color:#e11d48;
}

.tc-comparador-ver{
  min-height:44px;
  padding:0 22px;
  display:inline-flex;
  align-items:center;
  border:0;
  border-radius:9px;
  background:#ff4b0b;
  color:#fff;
  font-size:13px;
  font-weight:800;
  text-decoration:none;
  cursor:pointer;
  transition:background .18s ease;
}

.tc-comparador-ver:hover{
  background:#e94308;
}

.tc-comparador-ver.is-inactivo{
  background:#cbd5e1;
  cursor:not-allowed;
  pointer-events:none;
}

@media (max-width:680px){
  .tc-comparador{
    padding:10px 12px;
    gap:10px;
  }

  .tc-comparador-titulo{
    display:none;
  }

  .tc-comparador-item,
  .tc-comparador-hueco{
    width:54px;
    height:54px;
  }

  .tc-comparador-ver{
    min-height:42px;
    padding:0 15px;
    font-size:12px;
  }

  .tc-comparador-vaciar{
    display:none;
  }
}


/* =========================================================
   TECOMSER - PIE DE PAGINA
   Azul corporativo, logo blanco y datos reales de la empresa.
   La pestana de arriba lo pliega y despliega: en el movil el
   pie ocupa media pantalla y muchas veces estorba.
   ========================================================= */

.tc-pie{
  /* Azul hondo de la marca: sobre un area tan grande el azul de la
     cabecera se percibe mas claro, asi que el pie usa el tono profundo
     y ambos se leen igual. */
  --tc-pie-azul:var(--tc-marca-azul-hondo,#050f42);
  --tc-pie-azul-hondo:#030a2e;
  --tc-pie-naranja:var(--tc-marca-naranja,#ff4b0b);
  --tc-pie-tenue:#a9b4d4;
  --tc-pie-linea:rgba(255,255,255,.10);

  width:100%;

  position:relative;
  /* Mayor que el z-index:1 de .tc-contenido: la pestana asoma por
     encima del borde del pie y sin esto quedaba tapada por la pagina. */
  z-index:2;

  background:var(--tc-pie-azul);
  color:#fff;

  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.tc-pie *{
  box-sizing:border-box;
}

.tc-pie a{
  color:inherit;
  text-decoration:none;
}

/* ---------- Pestana para plegar ---------- */

.tc-pie-pestana-zona{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:flex-start;

  /* La pestana cuelga del borde superior sin empujar el contenido.

     OJO, no volver a "height:0" con "top:-38px" en el boton: asi el
     boton se dibujaba FUERA de la caja de su contenedor. Chrome y
     Firefox igual lo dejan pulsar, pero Safari de iPhone no le
     entrega el toque: se veia "Ver informacion" perfectamente y al
     tocarlo no pasaba nada, mientras en escritorio funcionaba.

     Con altura real y margen negativo el bloque entero sube lo
     mismo, se ve identico, pero el boton queda dentro de su padre y
     el toque le llega en cualquier navegador. */
  height:38px;
  margin-top:-38px;

  position:relative;
  z-index:1;
}

.tc-pie-pestana{
  min-height:38px;
  height:38px;
  padding:0 24px;

  position:relative;

  display:inline-flex;
  align-items:center;
  gap:9px;

  /* Un filo claro arriba la separa del contenido de la pagina, que
     puede ser una foto oscura. */
  border:1px solid rgba(255,255,255,.16);
  border-bottom:0;

  /* Esquinas redondeadas arriba, no la forma de trapecio. */
  border-radius:13px 13px 0 0;

  background:var(--tc-pie-azul);
  color:#fff;

  font:inherit;
  font-size:13px;
  font-weight:650;
  letter-spacing:.01em;

  cursor:pointer;

  box-shadow:0 -6px 18px rgba(3,10,46,.34);

  transition:background .18s ease,padding .18s ease;
}

.tc-pie-pestana:hover{
  background:var(--tc-pie-azul-hondo);
  padding:0 28px;
}

/* El dedo no tiene "hover": en el telefono la unica senal de que el
   boton respondio es este cambio al pulsar. */
.tc-pie-pestana:active{
  background:var(--tc-pie-azul-hondo);
}

.tc-pie-pestana:focus-visible{
  outline:2px solid var(--tc-pie-naranja);
  outline-offset:2px;
}

.tc-pie-pestana svg{
  width:15px;
  height:15px;
  color:var(--tc-pie-naranja);
  transition:transform .28s ease;
}

/* Plegado: la flecha apunta al otro lado. */
.tc-pie.is-plegado .tc-pie-pestana svg{
  transform:rotate(180deg);
}

.tc-pie-cuerpo{
  overflow:hidden;
  transition:max-height .32s ease,opacity .24s ease;
}

.tc-pie.is-plegado .tc-pie-cuerpo{
  max-height:0 !important;
  opacity:0;
}

/* ---------- Rejilla principal ---------- */

.tc-pie-contenedor{
  width:min(1480px,100%);
  margin:0 auto;
  padding:28px clamp(18px,3vw,40px) 0;
}

.tc-pie-rejilla{
  display:grid;
  /* La marca y CUATRO columnas de enlaces: la de la empresa se sumo a
     catalogo, servicio y cuenta. El minimo baja de 150 a 138 px porque con
     cuatro, a 1480 px de ancho, 150 dejaba la columna de la marca por debajo
     de su minimo y la rejilla se desbordaba. */
  grid-template-columns:minmax(230px,1.1fr) repeat(4,minmax(138px,1fr));
  gap:26px;
  padding-bottom:26px;
}

/* ---------- Columna de la marca ---------- */

.tc-pie-logo{
  display:inline-block;
  margin-bottom:20px;
}

.tc-pie-logo img{
  width:212px;
  max-width:100%;
  height:auto;
}

.tc-pie-sep{ margin:0 6px; opacity:.45; }

.tc-pie-mapa{
  display:block;
  margin-top:2px;
  color:var(--tc-marca-naranja,#ff8a5c);
  font-size:11.5px;
  font-weight:650;
}

.tc-pie-lema{
  max-width:38ch;
  margin:-8px 0 20px;
  color:rgba(255,255,255,.62);
  font-size:13px;
  line-height:1.6;
}

.tc-pie-titulo{
  margin:0 0 13px;
  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;
}

.tc-pie-contacto{
  display:grid;
  gap:9px;
  margin:0;
  padding:0;
  list-style:none;
}

.tc-pie-contacto li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:#e6eaf6;
  font-size:13px;
  line-height:1.45;
}

.tc-pie-contacto svg{
  flex:0 0 17px;
  width:17px;
  height:17px;
  margin-top:1px;
  color:var(--tc-pie-naranja);
}

.tc-pie-contacto a:hover{
  color:#fff;
  text-decoration:underline;
}

/* ---------- Contacto agrupado por area ----------

   Ventas y servicio tecnico son dos bloques, cada uno con su WhatsApp, su
   correo y su horario. El "li" del area no es una fila con icono: es una
   pila, asi que se desmonta el flex de .tc-pie-contacto li. */

.tc-pie-contacto li.tc-pie-area{
  display:grid;
  gap:6px;
  padding:10px 0 12px;
  border-bottom:1px solid rgba(255,255,255,.09);
}

/* El ultimo bloque no lleva raya: debajo va la direccion, que ya es otra
   cosa y se separa sola. */
.tc-pie-contacto li.tc-pie-area + li:not(.tc-pie-area){
  padding-top:12px;
}

.tc-pie-area-titulo{
  color:#fff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.tc-pie-area-dato{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

/* El horario ocupa dos lineas; sin esto el texto se mete debajo del reloj
   y la segunda linea arranca pegada al borde. */
.tc-pie-area-dato > span{
  min-width:0;
}

/* ---------- Columnas de enlaces ---------- */

.tc-pie-columna h3{
  margin:0 0 13px;
  font-size:14px;
  font-weight:700;
}

.tc-pie-lista{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.tc-pie-lista a{
  color:var(--tc-pie-tenue);
  font-size:13px;
  line-height:1.4;
  transition:color .15s ease;
}

.tc-pie-lista a:hover{
  color:#fff;
  text-decoration:underline;
}

/* ---------- Libro de reclamaciones ---------- */

/* El afiche oficial viene en blanco sobre transparente, asi que se
   apoya en un recuadro azul muy oscuro: sobre el azul del pie, que
   es mas claro, el dibujo se perderia. */
/* Cierra el pie a todo el ancho, encima del copyright. Antes colgaba
   de la columna de contacto; ahi quedaba escondido entre los enlaces
   y es lo que la ley pide tener a la vista. */
.tc-pie-libro{
  display:flex;
  align-items:center;
  gap:15px;

  margin:0 0 18px;
  padding:12px 16px 12px 12px;

  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;

  background:#030a26;

  transition:border-color .16s ease,background .16s ease;
}

.tc-pie-libro:hover{
  border-color:var(--tc-pie-naranja);
  background:#050e33;
}

.tc-pie-libro img{
  flex:0 0 96px;
  width:96px;
  height:auto;
}

.tc-pie-libro-texto strong{
  display:block;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
}

.tc-pie-libro-texto span{
  display:block;
  margin-top:2px;
  color:var(--tc-pie-tenue);
  font-size:11.5px;
  line-height:1.4;
}

/* ---------- Medios de pago ---------- */

/* Los logos son los oficiales de cada marca. Van sobre una ficha
   blanca porque asi los entregan sus manuales de marca y porque
   sobre el azul del pie perderian contraste. */
.tc-pie-pagos{
  padding:18px 20px;
  margin-bottom:16px;

  border:1px solid var(--tc-pie-linea);
  border-radius:12px;

  background:rgba(255,255,255,.04);
}

.tc-pie-pagos-grupo{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 11px;
}

.tc-pie-pagos-grupo + .tc-pie-pagos-grupo{
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--tc-pie-linea);
}

.tc-pie-pagos-titulo{
  flex:0 0 auto;
  min-width:98px;

  color:#dbe2f4;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
}

/* Ficha blanca de tamano fijo: los logos tienen proporciones muy
   distintas y sin una caja comun la fila queda desordenada. */
.tc-pie-marca{
  width:66px;
  height:40px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:6px 8px;

  border-radius:7px;

  background:#fff;

  box-shadow:0 1px 3px rgba(3,8,38,.3);
}

.tc-pie-marca img{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
}

/* Yape y Plin son iconos cuadrados: se les da algo mas de aire. */
.tc-pie-marca--cuadrado img{
  max-height:26px;
}

/* Lo que no tiene logo de marca va con icono y palabra. */
.tc-pie-otro{
  height:40px;
  padding:0 13px;

  display:inline-flex;
  align-items:center;
  gap:8px;

  border:1px solid var(--tc-pie-linea);
  border-radius:7px;

  color:#dbe2f4;
  font-size:12.5px;
  font-weight:600;
}

.tc-pie-otro svg{
  flex:0 0 17px;
  width:17px;
  height:17px;
  color:var(--tc-pie-naranja);
}

@media (max-width:620px){
  .tc-pie-pagos-titulo{
    flex:1 0 100%;
    min-width:0;
  }
}

/* ---------- Franja de confianza ---------- */

.tc-pie-franja{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:14px 30px;

  padding:14px 20px;
  margin-bottom:22px;

  border:1px solid var(--tc-pie-linea);
  border-radius:12px;

  background:rgba(255,255,255,.04);
}

.tc-pie-sello{
  display:flex;
  align-items:center;
  gap:9px;

  color:#dbe2f4;
  font-size:12.5px;
  font-weight:600;
}

.tc-pie-sello svg{
  flex:0 0 19px;
  width:19px;
  height:19px;
  color:var(--tc-pie-naranja);
}

/* ---------- Desarrollado por ---------- */

.tc-pie-autor{
  display:inline-flex;
  align-items:center;
  gap:11px;

  /* Sin caja: es un credito al pie, no un boton. Solo un filo fino
     que separa la palabra del logo. */
  padding:0;

  border:0;
  background:transparent;

  color:#93a0c2;
  font-size:10px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;

  transition:color .16s ease;
}

.tc-pie-autor::after{
  content:none;
}

.tc-pie-autor:hover{
  color:#c7d0e8;
}

/* Filo vertical entre el texto y el logo. */
.tc-pie-autor-linea{
  width:1px;
  height:20px;
  flex:0 0 1px;

  background:rgba(255,255,255,.18);
}

/* El logo llega en blanco con fondo transparente: se muestra tal cual
   y solo se le baja un poco la fuerza para que no compita con el de
   TECOMSER, que es la marca de la tienda. */
.tc-pie-autor img{
  height:30px;
  width:auto;

  /* A plena opacidad: si se atenua, sobre el azul desaparece. */
  opacity:1;

  transition:transform .16s ease;
}

.tc-pie-autor:hover img{
  transform:scale(1.05);
}

/* ---------- Barra final ---------- */

.tc-pie-final{
  border-top:1px solid var(--tc-pie-linea);
}

.tc-pie-final-contenedor{
  width:min(1480px,100%);
  margin:0 auto;
  padding:16px clamp(18px,3vw,40px);

  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 18px;

  color:var(--tc-pie-tenue);
  font-size:12px;
  text-align:center;
}

.tc-pie-final-sep{
  color:rgba(255,255,255,.22);
}

/* Los datos legales se agrupan aparte del credito del desarrollador. */
.tc-pie-final-legal{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 16px;
}

@media (max-width:1000px){
  .tc-pie-rejilla{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:860px){
  .tc-pie-final-contenedor{
    justify-content:center;
    text-align:center;
  }

  .tc-pie-final-legal{
    justify-content:center;
  }
}

/* ---------- Acordeon en celular ---------- */

/* El boton de cada titulo solo existe en pantallas chicas: en
   escritorio hay sitio de sobra y las listas van abiertas. */
.tc-pie-columna-titulo{
  width:100%;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;

  border:0;
  background:transparent;
  color:#fff;

  font:inherit;
  font-size:14px;
  font-weight:700;
  text-align:left;
}

.tc-pie-columna-flecha{
  display:none;
  flex:0 0 16px;
  width:16px;
  height:16px;
  color:var(--tc-pie-naranja);
  transition:transform .26s ease;
}

/* ---------- La pestana en el telefono ---------- */

/* Misma pastilla que en escritorio, solo que mas compacta: en una
   pantalla de 360 px la version grande se comia demasiado sitio.

   Lo que NO cambia es que el boton siga dentro de la caja de su
   contenedor (ver el comentario de .tc-pie-pestana-zona). El alto de
   la zona y su margen negativo se mueven juntos, siempre el mismo
   numero, o el boton vuelve a salirse y el iPhone deja de
   entregarle el toque. */
@media (max-width:820px){
  .tc-pie-pestana-zona{
    height:34px;
    margin-top:-34px;
  }

  .tc-pie-pestana{
    height:34px;
    min-height:34px;

    padding:0 16px;
    gap:7px;

    border-radius:11px 11px 0 0;

    font-size:12px;

    box-shadow:0 -4px 12px rgba(3,10,46,.30);
  }

  .tc-pie-pestana svg{
    width:13px;
    height:13px;
  }

  /* El dedo no hace hover: que no se ensanche sola al tocarla. */
  .tc-pie-pestana:hover{
    padding:0 16px;
  }
}

/* El titulo que se le invento a los medios de pago no debe salir en
   escritorio: ahi el bloque siempre se ve y no hay nada que plegar. */
.tc-pie-columna-titulo--movil{
  display:none;
}

/* Contactanos y los pagos son columnas de pleno derecho: sin esto el
   hueco entre bloques se descuadraba en escritorio. */
.tc-pie-columna--contacto,
.tc-pie-columna--pagos,
.tc-pie-columna--sellos{
  min-width:0;
}

/* En un monitor ancho, una tarjeta de 1400 px para un enlace queda
   desproporcionada: se le pone un ancho comodo y se centra. */
@media (min-width:621px){
  .tc-pie-libro{
    width:min(520px,100%);
    margin-left:auto;
    margin-right:auto;
  }
}

.tc-pie-columna--contacto .tc-pie-columna-titulo{
  margin:0 0 13px;
}

/* .tc-pie-lista separa a 8 px y la lista de contacto siempre uso 9:
   sin esto el bloque se comprimia un pelo respecto a como estaba. */
.tc-pie-columna--contacto .tc-pie-contacto{
  gap:9px;
}

@media (max-width:620px){
  .tc-pie-rejilla{
    grid-template-columns:minmax(0,1fr);
    gap:0;

    /* Los 26 px de relleno de escritorio abrian un hueco entre
       "Mi cuenta" y "Medios de pago", y las filas plegables dejaban
       de verse como una sola lista. */
    padding-bottom:0;
  }

  /* Aire recortado: con todo plegado el pie tiene que caber de una
     sola vez en la pantalla del telefono. */
  .tc-pie-contenedor{
    padding-top:14px;
  }

  /* En el telefono el pie es una columna unica: el logo suelto a la
     izquierda quedaba descolgado. Es inline-block, asi que se centra
     desde el contenedor, no con margenes automaticos. */
  .tc-pie-marca-bloque{
    text-align:center;
  }

  /* Solo el logo: los datos de contacto siguen alineados a la
     izquierda cuando se despliegan. */
  .tc-pie-marca-bloque .tc-pie-columna{
    text-align:left;
  }

  .tc-pie-logo{
    margin-bottom:12px;
  }

  .tc-pie-libro{
    margin-top:14px;
  }

  .tc-pie-franja{
    margin-bottom:12px;
    padding-top:10px;
    padding-bottom:10px;
  }

  .tc-pie-franja{
    justify-content:flex-start;
  }

  /* Cada columna pasa a ser una fila plegable. */
  .tc-pie-columna{
    border-top:1px solid var(--tc-pie-linea);
  }

  .tc-pie-columna-titulo{
    min-height:50px;
    cursor:pointer;
  }

  .tc-pie-columna-flecha{
    display:block;
  }

  .tc-pie-columna.is-abierta .tc-pie-columna-flecha{
    transform:rotate(180deg);
  }

  .tc-pie-lista{
    overflow:hidden;
    max-height:0;
    opacity:0;
    transition:max-height .3s ease,opacity .22s ease,padding .3s ease;
  }

  .tc-pie-columna.is-abierta .tc-pie-lista{
    max-height:520px;
    opacity:1;
    padding-bottom:14px;
  }

  /* ---- Contactanos y medios de pago, tambien plegables ---- */

  .tc-pie-columna-titulo--movil{
    display:flex;
  }

  .tc-pie-columna--contacto .tc-pie-columna-titulo{
    margin:0;
  }

  /* El bloque de pagos es una tarjeta con borde y fondo propios: al
     plegarse, ese marco vacio quedaba flotando. Se le quitan mientras
     esta cerrado y vuelven al abrirlo. */
  .tc-pie-columna--pagos .tc-pie-pagos{
    margin-bottom:0;
    padding:0;
    border:0;
    background:none;
  }

  .tc-pie-columna--pagos.is-abierta .tc-pie-pagos{
    padding:14px 15px;
    margin-bottom:16px;

    border:1px solid var(--tc-pie-linea);
    background:rgba(255,255,255,.04);
  }

  /* .tc-pie-pagos es un div, no una lista: hay que darle el mismo
     comportamiento de rejilla plegable. */
  .tc-pie-columna--pagos .tc-pie-lista{
    display:block;
  }

  /* ---- Sellos de confianza, tambien plegables ---- */

  .tc-pie-columna--sellos{
    border-top:1px solid var(--tc-pie-linea);
  }

  /* Mismo truco que en pagos: sin el marco mientras esta cerrado. */
  .tc-pie-columna--sellos .tc-pie-franja{
    display:grid;
    gap:0;

    margin-bottom:0;
    padding:0;

    border:0;
    background:none;
  }

  .tc-pie-columna--sellos.is-abierta .tc-pie-franja{
    gap:11px;

    padding:12px 15px;
    margin-bottom:14px;

    border:1px solid var(--tc-pie-linea);
    background:rgba(255,255,255,.04);
  }

  /* El libro cierra el pie: separado de lo de arriba y sin el borde
     de las filas plegables. */
  .tc-pie-libro{
    margin:16px 0 14px;
  }

  .tc-pie-marca-bloque{
    padding-bottom:0;
  }

  /* Cada bloque plegable lleva su propia linea separadora. */
  .tc-pie-columna--contacto,
  .tc-pie-columna--pagos{
    border-top:1px solid var(--tc-pie-linea);
  }

  .tc-pie-columna--pagos{
    margin-top:0;
  }

  .tc-pie-pagos{
    padding:14px 15px;
  }

  .tc-pie-pagos-grupo{
    gap:8px;
  }
}


.tc-pie-redes{
  display:flex;
  align-items:center;
  gap:9px;
}

.tc-pie-redes a{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:50%;
  color:rgba(255,255,255,.82);
  transition:border-color .2s ease, color .2s ease, background .2s ease, transform .2s ease;
}

/* Un solo color para todos, no el de cada marca: media docena de logotipos
   con sus tonos originales convierte el pie en un semáforo. */
.tc-pie-redes a:hover{
  border-color:var(--tc-marca-naranja,#ff4b0b);
  background:var(--tc-marca-naranja,#ff4b0b);
  color:#fff;
  transform:translateY(-2px);
}

.tc-pie-redes svg{
  width:17px;
  height:17px;
  fill:currentColor;
  display:block;
}

@media (max-width:700px){
  .tc-pie-redes{ justify-content:center; width:100%; order:-1; margin-bottom:4px; }
}

/* El "Configurar cookies" del pie es un boton porque abre un panel, pero en
   la lista tiene que leerse como un enlace mas: si se nota que es otra cosa,
   parece un error de maquetacion. */
.tc-pie-enlace-boton{
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.tc-pie-enlace-boton:hover{ color:#fff; text-decoration:underline; }



/* =========================================================
   TECOMSER - BOTON FLOTANTE DE WHATSAPP
   No es un enlace suelto: al abrirlo se elige con quien
   hablar (ventas o soporte), avisa si estamos atendiendo
   segun la hora del Peru y manda el mensaje ya escrito con
   la pagina desde la que escribe el cliente.
   ========================================================= */

.tc-wa{
  --tc-wa-verde:#25d366;
  --tc-wa-verde-hondo:#1da851;
  --tc-wa-tinta:#0f172a;
  --tc-wa-suave:#64748b;
  --tc-wa-linea:#e5e7eb;

  position:fixed;
  right:18px;
  bottom:18px;
  z-index:8600;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:11px;

  /* El panel se oculta con opacity:0, pero SIGUE ocupando su sitio:
     310 px de ancho y varios cientos de alto. Eso convertia a este
     contenedor en una lamina invisible sobre toda la esquina
     inferior derecha, por encima de la pagina (z-index 8600), que se
     tragaba los toques. El enlace del libro de reclamaciones, que
     vive justo debajo, no llegaba a recibirlos.

     El contenedor deja de capturar nada; solo responden las piezas
     que de verdad se ven. El globo y el panel ya se encargan de lo
     suyo mas abajo, segun esten abiertos o cerrados. */
  pointer-events:none;

  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.tc-wa *{
  box-sizing:border-box;
}

/* La barra de comparar vive pegada abajo: cuando aparece, el
   boton sube para no quedar tapado. */
.tc-wa.is-elevado{
  bottom:104px;
}

/* ---------- El boton redondo ---------- */

.tc-wa-boton{
  pointer-events:auto;

  position:relative;

  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:50%;

  background:var(--tc-wa-verde);
  color:#fff;

  cursor:pointer;

  box-shadow:0 8px 22px rgba(37,211,102,.34);

  transition:transform .18s ease,background .18s ease,box-shadow .18s ease;
}

.tc-wa-boton:hover{
  background:var(--tc-wa-verde-hondo);
  transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(37,211,102,.42);
}

.tc-wa-boton:active{
  transform:translateY(0);
}

.tc-wa-boton svg{
  width:31px;
  height:31px;
}

/* La cruz aparece cuando el panel esta abierto. */
.tc-wa-boton [data-wa-cerrar]{
  display:none;
}

.tc-wa.is-abierto .tc-wa-boton [data-wa-abrir]{
  display:none;
}

.tc-wa.is-abierto .tc-wa-boton [data-wa-cerrar]{
  display:block;
}

/* Anillo que late: llama la atencion sin tapar nada. */
.tc-wa-pulso{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;

  border-radius:50%;
  background:var(--tc-wa-verde);

  animation:tcWaPulso 2.4s ease-out infinite;
  pointer-events:none;
}

@keyframes tcWaPulso{
  0%   { transform:scale(1);    opacity:.45; }
  70%  { transform:scale(1.55); opacity:0;   }
  100% { transform:scale(1.55); opacity:0;   }
}

/* Quieto para quien pidió menos movimiento en su sistema. */
@media (prefers-reduced-motion:reduce){
  .tc-wa-pulso{ animation:none; opacity:0; }
}

.tc-wa.is-abierto .tc-wa-pulso{
  display:none;
}

/* Punto de estado: verde atendiendo, gris fuera de horario. */
.tc-wa-estado{
  position:absolute;
  top:2px;
  right:2px;

  width:13px;
  height:13px;

  border:2.5px solid #fff;
  border-radius:50%;

  background:#94a3b8;
}

.tc-wa-estado.is-atendiendo{
  background:#22c55e;
}

/* ---------- Globo de invitación ---------- */

.tc-wa-globo{
  max-width:min(230px,72vw);
  padding:9px 13px;

  border-radius:12px 12px 3px 12px;

  background:#fff;
  color:var(--tc-wa-tinta);

  font-size:12.5px;
  font-weight:600;
  line-height:1.4;

  box-shadow:0 8px 24px rgba(15,23,42,.16);

  opacity:0;
  transform:translateY(6px);
  pointer-events:none;

  transition:opacity .24s ease,transform .24s ease;
}

.tc-wa-globo.is-visible{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.tc-wa.is-abierto .tc-wa-globo{
  display:none;
}

.tc-wa-globo-cerrar{
  margin-left:6px;
  padding:0;

  border:0;
  background:transparent;
  color:var(--tc-wa-suave);

  font:inherit;
  font-size:13px;
  font-weight:700;

  cursor:pointer;
}

.tc-wa-globo-cerrar:hover{
  color:var(--tc-wa-tinta);
}

/* ---------- Panel ---------- */

.tc-wa-panel{
  width:min(310px,calc(100vw - 32px));

  overflow:hidden;

  border-radius:15px;

  background:#fff;

  box-shadow:0 20px 50px rgba(15,23,42,.24);

  opacity:0;
  transform:translateY(10px) scale(.97);
  transform-origin:bottom right;
  pointer-events:none;

  transition:opacity .2s ease,transform .2s ease;
}

.tc-wa.is-abierto .tc-wa-panel{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.tc-wa-panel-cabecera{
  padding:16px 17px;

  background:var(--tc-wa-verde-hondo);
  color:#fff;
}

.tc-wa-panel-cabecera strong{
  display:block;
  font-size:14.5px;
  font-weight:700;
}

.tc-wa-panel-cabecera span{
  display:flex;
  align-items:center;
  gap:6px;

  margin-top:3px;

  color:rgba(255,255,255,.88);
  font-size:11.5px;
  line-height:1.4;
}

.tc-wa-panel-cabecera span::before{
  content:"";

  width:7px;
  height:7px;
  flex:0 0 7px;

  border-radius:50%;
  background:#cbd5e1;
}

.tc-wa-panel-cabecera span.is-atendiendo::before{
  background:#86efac;
}

.tc-wa-canales{
  padding:9px;
}

.tc-wa-canal{
  width:100%;

  display:flex;
  align-items:center;
  gap:11px;

  padding:11px 12px;

  border:0;
  border-radius:10px;

  background:transparent;
  color:var(--tc-wa-tinta);

  font:inherit;
  text-align:left;
  text-decoration:none;

  cursor:pointer;
  transition:background .15s ease;
}

.tc-wa-canal:hover{
  background:#f1f7f3;
}

.tc-wa-canal-icono{
  width:38px;
  height:38px;
  flex:0 0 38px;

  display:grid;
  place-items:center;

  border-radius:10px;

  background:#e8f8ee;
  color:var(--tc-wa-verde-hondo);
}

.tc-wa-canal-icono svg{
  width:19px;
  height:19px;
}

.tc-wa-canal-texto{
  min-width:0;
  flex:1;
}

/* La puerta de sugerencias: es un botón, no un enlace, y no es WhatsApp.
   Mismo aspecto que los canales, con el icono en azul para distinguirla. */
.tc-wa-canal--opinion{
  display:none;
  font:inherit;
  text-align:left;
  cursor:pointer;
}

.tc-wa-canal--opinion .tc-wa-canal-icono{
  background:#eef2ff;
  color:#071457;
}

@media (max-width:820px){
  .tc-wa-canal--opinion{
    display:flex;
  }
}

.tc-wa-canal-texto strong{
  display:block;
  font-size:13.5px;
  font-weight:650;
}

.tc-wa-canal-texto span{
  display:block;
  margin-top:1px;

  color:var(--tc-wa-suave);
  font-size:11.5px;
  line-height:1.4;
}

.tc-wa-panel-pie{
  padding:11px 16px;

  border-top:1px solid var(--tc-wa-linea);

  color:var(--tc-wa-suave);
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

@media (max-width:600px){
  /* El globo "¿Te ayudamos a elegir?" se estiraba a lo ancho por
     encima del contenido y tapaba media pantalla del telefono. En
     movil se queda solo el boton redondo; el mensaje sigue en
     pantallas grandes, donde si hay sitio de sobra. */
  .tc-wa-globo{
    display:none !important;
  }

  .tc-wa{
    right:13px;
    bottom:13px;
  }

  .tc-wa.is-elevado{
    bottom:96px;
  }

  .tc-wa-boton{
    width:54px;
    height:54px;
  }
}


/* =========================================================
   TECOMSER - BOTON DE SUGERENCIAS
   Vive junto al de WhatsApp, un escalon mas arriba. Recoge
   tres cosas distintas (sugerencia, problema, felicitacion)
   porque cada una se atiende de otra manera, y guarda desde
   que pagina se escribio.
   ========================================================= */

.tc-op{
  --tc-op-azul:var(--tc-marca-azul,#071457);
  --tc-op-naranja:var(--tc-marca-naranja,#ff4b0b);
  --tc-op-tinta:#0f172a;
  --tc-op-suave:#64748b;
  --tc-op-tenue:#94a3b8;
  --tc-op-linea:#e5e7eb;

  position:fixed;
  right:18px;
  bottom:88px;
  z-index:8600;

  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:11px;

  /* Igual que en whatsapp.html: el contenedor no debe capturar
     toques, solo el boton que se ve. */
  pointer-events:none;

  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

.tc-op *{
  box-sizing:border-box;
}

/* Sube junto con el de WhatsApp cuando aparece la barra de comparar. */
.tc-op.is-elevado{
  bottom:174px;
}

/* ---------- El boton ---------- */

.tc-op-boton{
  pointer-events:auto;

  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border:1px solid var(--tc-op-linea);
  border-radius:50%;

  background:#fff;
  color:var(--tc-op-azul);

  cursor:pointer;

  box-shadow:0 6px 18px rgba(15,23,42,.16);

  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.tc-op-boton:hover{
  border-color:var(--tc-op-azul);
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(15,23,42,.2);
}

.tc-op-boton svg{
  width:21px;
  height:21px;
}

/* ---------- Ventana ---------- */

.tc-op-fondo{
  position:fixed;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:8700;

  display:none;
  align-items:center;
  justify-content:center;

  padding:18px;

  background:rgba(15,23,42,.6);
}

.tc-op-fondo.is-abierto{
  display:flex;
}

.tc-op-caja{
  width:min(430px,100%);
  max-height:calc(100vh - 36px);

  overflow-y:auto;

  border-radius:16px;

  background:#fff;

  box-shadow:0 26px 60px rgba(15,23,42,.32);
}

.tc-op-cabecera{
  position:relative;
  padding:20px 22px;

  background:var(--tc-op-azul);
  color:#fff;
}

.tc-op-cabecera h3{
  margin:0 0 3px;
  padding-right:30px;
  font-size:16px;
  font-weight:700;
}

.tc-op-cabecera p{
  margin:0;
  color:#c3cbe6;
  font-size:12.5px;
  line-height:1.5;
}

.tc-op-cerrar{
  position:absolute;
  top:16px;
  right:16px;

  width:28px;
  height:28px;

  display:grid;
  place-items:center;

  border:0;
  border-radius:7px;

  background:rgba(255,255,255,.12);
  color:#fff;

  cursor:pointer;
  transition:background .15s ease;
}

.tc-op-cerrar:hover{
  background:rgba(255,255,255,.24);
}

.tc-op-cerrar svg{
  width:14px;
  height:14px;
}

.tc-op-cuerpo{
  padding:20px 22px 22px;
}

.tc-op-grupo + .tc-op-grupo{
  margin-top:17px;
}

.tc-op-grupo > label,
.tc-op-rotulo{
  display:block;
  margin-bottom:8px;

  color:var(--tc-op-suave);
  font-size:12.5px;
  font-weight:600;
}

/* ---------- Tipo de mensaje ---------- */

.tc-op-tipos{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.tc-op-tipo{
  position:relative;
  display:block;
  cursor:pointer;
}

.tc-op-tipo input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.tc-op-tipo-caja{
  display:block;
  padding:11px 7px;

  border:1.5px solid var(--tc-op-linea);
  border-radius:10px;

  text-align:center;

  transition:border-color .15s ease,background .15s ease;
}

.tc-op-tipo-caja svg{
  width:19px;
  height:19px;
  margin-bottom:4px;
  color:var(--tc-op-tenue);
  transition:color .15s ease;
}

.tc-op-tipo-caja span{
  display:block;
  color:var(--tc-op-suave);
  font-size:11.5px;
  font-weight:600;
  line-height:1.3;
}

.tc-op-tipo input:checked + .tc-op-tipo-caja{
  border-color:var(--tc-op-azul);
  background:#f7f9fd;
}

.tc-op-tipo input:checked + .tc-op-tipo-caja svg,
.tc-op-tipo input:checked + .tc-op-tipo-caja span{
  color:var(--tc-op-azul);
}

.tc-op-tipo input:focus-visible + .tc-op-tipo-caja{
  box-shadow:0 0 0 3px rgba(7,20,87,.12);
}

/* ---------- Estrellas ---------- */

.tc-op-estrellas{
  display:flex;
  align-items:center;
  gap:5px;
}

.tc-op-estrella{
  width:36px;
  height:36px;

  display:grid;
  place-items:center;

  padding:0;
  border:0;
  border-radius:8px;

  background:transparent;
  color:#dde3ec;

  cursor:pointer;
  transition:color .12s ease,transform .12s ease;
}

.tc-op-estrella svg{
  width:26px;
  height:26px;
}

.tc-op-estrella:hover{
  transform:scale(1.12);
}

/* Encendidas: las que estan hasta la elegida. */
.tc-op-estrella.is-encendida{
  color:#f5a524;
}

.tc-op-nota{
  margin-left:6px;
  color:var(--tc-op-suave);
  font-size:12.5px;
  font-weight:600;
}

/* ---------- Campos ---------- */

.tc-op-cuerpo textarea,
.tc-op-cuerpo input[type="text"]{
  width:100%;
  padding:11px 12px;

  border:1px solid var(--tc-op-linea);
  border-radius:9px;

  background:#fff;
  color:var(--tc-op-tinta);

  font:inherit;
  font-size:14px;

  transition:border-color .15s ease,box-shadow .15s ease;
}

.tc-op-cuerpo textarea{
  min-height:96px;
  resize:vertical;
  line-height:1.55;
}

.tc-op-cuerpo textarea:focus,
.tc-op-cuerpo input[type="text"]:focus{
  outline:0;
  border-color:var(--tc-op-azul);
  box-shadow:0 0 0 3px rgba(7,20,87,.09);
}

.tc-op-contador{
  margin-top:5px;
  color:var(--tc-op-tenue);
  font-size:11.5px;
  text-align:right;
}

.tc-op-contador.is-lleno{
  color:#b42318;
}

.tc-op-contacto{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;
}

/* ---------- Enviar ---------- */

.tc-op-enviar{
  width:100%;
  min-height:46px;
  margin-top:18px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  border:0;
  border-radius:10px;

  background:var(--tc-op-azul);
  color:#fff;

  font:inherit;
  font-size:14.5px;
  font-weight:650;

  cursor:pointer;
  transition:background .16s ease;
}

.tc-op-enviar:hover{
  background:var(--tc-marca-azul-hondo,#050f42);
}

.tc-op-enviar[disabled]{
  opacity:.55;
  cursor:default;
}

.tc-op-error{
  margin:12px 0 0;
  padding:10px 12px;

  border:1px solid #f3c9c4;
  border-radius:9px;

  background:#fef4f3;
  color:#b42318;

  font-size:12.5px;
  line-height:1.5;
}

.tc-op-legal{
  margin:12px 0 0;
  color:var(--tc-op-tenue);
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

/* ---------- Gracias ---------- */

.tc-op-gracias{
  display:none;
  padding:34px 24px;
  text-align:center;
}

.tc-op-caja.is-enviado .tc-op-cuerpo{
  display:none;
}

.tc-op-caja.is-enviado .tc-op-gracias{
  display:block;
}

.tc-op-gracias-icono{
  width:56px;
  height:56px;
  margin:0 auto 14px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#eafaf0;
  color:#15803d;
}

.tc-op-gracias-icono svg{
  width:27px;
  height:27px;
}

.tc-op-gracias h4{
  margin:0 0 5px;
  font-size:16px;
  font-weight:700;
  color:var(--tc-op-tinta);
}

.tc-op-gracias p{
  margin:0;
  color:var(--tc-op-suave);
  font-size:13px;
  line-height:1.55;
}

/* En el teléfono no flota: se abre desde el panel de WhatsApp y desde el
   pie de página (ver el guion). */
@media (max-width:820px){
  .tc-op{
    display:none !important;
  }
}

@media (max-width:600px){
  .tc-op{
    right:13px;
    bottom:78px;
  }

  .tc-op.is-elevado{
    bottom:160px;
  }

  .tc-op-boton{
    width:42px;
    height:42px;
  }

  /* 100vh en iPhone cuenta tambien la franja del navegador: la
     ventana quedaba mas alta que lo visible y el boton de enviar
     caia debajo de la barra de Safari. */
  .tc-op-caja{
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
  }
}


.tc-ck[hidden]{ display:none; }

/* ---------- La barra ---------- */

.tc-ck-aviso{
  position:fixed;
  left:clamp(10px,2vw,20px);
  right:clamp(10px,2vw,20px);
  bottom:clamp(10px,2vw,20px);
  z-index:9200;

  display:flex;
  align-items:center;
  gap:clamp(14px,2.5vw,30px);

  max-width:1180px;
  margin:0 auto;
  padding:16px clamp(16px,2vw,22px);

  border-radius:14px;
  background:var(--tc-marca-azul,#071457);
  color:#fff;
  box-shadow:0 18px 44px rgba(4,10,40,.34);
}

.tc-ck-aviso[hidden]{ display:none; }

.tc-ck-texto{ min-width:0; }
.tc-ck-texto strong{
  display:block;
  margin-bottom:3px;
  font-size:14.5px;
  font-weight:750;
}
.tc-ck-texto p{
  margin:0;
  max-width:78ch;
  color:rgba(255,255,255,.8);
  font-size:12.5px;
  line-height:1.55;
}
.tc-ck-texto a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.tc-ck-texto a:hover{ color:var(--tc-marca-naranja,#ff6a35); }

.tc-ck-botones{
  display:flex;
  align-items:center;
  gap:9px;
  flex:0 0 auto;
  margin-left:auto;
}

/* ---------- Los botones ---------- */

.tc-ck-boton{
  padding:10px 18px;
  border:1px solid transparent;
  border-radius:9px;
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease;
}

.tc-ck-boton--lleno{
  background:var(--tc-marca-naranja,#ff4b0b);
  color:#fff;
}
.tc-ck-boton--lleno:hover{ background:#ff6a35; }

/* Rechazar pesa lo mismo que aceptar: mismo tamaño, mismo sitio, misma
   letra. Esconderlo en gris claro es la forma educada de no dejar decir que
   no. */
.tc-ck-boton--linea{
  background:transparent;
  border-color:rgba(255,255,255,.4);
  color:#fff;
}
.tc-ck-boton--linea:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

.tc-ck-boton--texto{
  padding:10px 8px;
  background:transparent;
  color:rgba(255,255,255,.8);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tc-ck-boton--texto:hover{ color:#fff; }

/* ---------- El panel ---------- */

.tc-ck-fondo{
  position:fixed;
  inset:0;
  z-index:9250;
  background:rgba(4,10,40,.55);
}
.tc-ck-fondo[hidden]{ display:none; }

.tc-ck-panel{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:9300;

  display:flex;
  flex-direction:column;

  width:min(94vw,560px);
  max-height:min(86vh,660px);

  border-radius:16px;
  background:#fff;
  box-shadow:0 30px 70px rgba(4,10,40,.4);
  overflow:hidden;
}
.tc-ck-panel[hidden]{ display:none; }

.tc-ck-panel-cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:18px 20px;
  border-bottom:1px solid #eef1f6;
}
.tc-ck-panel-cab h2{
  margin:0;
  font-size:17px;
  font-weight:750;
  color:var(--tc-marca-azul,#071457);
}

.tc-ck-cerrar{
  display:grid;
  place-items:center;
  width:32px; height:32px;
  padding:0;
  border:0;
  border-radius:8px;
  background:#f4f7fb;
  color:#5b6b80;
  cursor:pointer;
}
.tc-ck-cerrar:hover{ background:#e9eff7; color:var(--tc-marca-azul,#071457); }
.tc-ck-cerrar svg{ width:16px; height:16px; }

.tc-ck-panel-cuerpo{ padding:6px 20px 12px; overflow-y:auto; }

.tc-ck-grupo{ padding:16px 0; border-bottom:1px solid #f1f4f9; }
.tc-ck-grupo:last-child{ border-bottom:0; }

.tc-ck-grupo-cab{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:6px;
}
.tc-ck-grupo-cab strong{ font-size:14px; font-weight:700; color:#111827; }

.tc-ck-grupo p{
  margin:0;
  color:#7c8a9d;
  font-size:12.5px;
  line-height:1.6;
}
.tc-ck-grupo p strong{ color:#5b6b80; font-size:inherit; }

.tc-ck-fijo{
  flex:0 0 auto;
  padding:4px 10px;
  border-radius:999px;
  background:#eef3fb;
  color:#5b6b80;
  font-size:11px;
  font-weight:700;
}

/* El interruptor. La casilla real sigue ahí debajo, invisible pero viva: es
   la que recibe el foco y la que el teclado enciende con la barra. */
.tc-ck-interruptor{ flex:0 0 auto; position:relative; display:inline-flex; }
.tc-ck-interruptor input{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  margin:0;
  opacity:0;
  cursor:pointer;
}
.tc-ck-interruptor span{
  display:block;
  width:42px; height:24px;
  border-radius:999px;
  background:#d6dde7;
  transition:background-color .18s ease;
}
.tc-ck-interruptor span::after{
  content:"";
  display:block;
  width:18px; height:18px;
  margin:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.24);
  transition:transform .18s ease;
}
.tc-ck-interruptor input:checked + span{ background:var(--tc-marca-naranja,#ff4b0b); }
.tc-ck-interruptor input:checked + span::after{ transform:translateX(18px); }
.tc-ck-interruptor input:focus-visible + span{
  outline:2px solid var(--tc-marca-azul,#071457);
  outline-offset:2px;
}

.tc-ck-panel-pie{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:16px 20px;
  border-top:1px solid #eef1f6;
  background:#fafbfd;
}
.tc-ck-panel-pie .tc-ck-boton--linea{
  border-color:#dbe3ec;
  color:#5b6b80;
}
.tc-ck-panel-pie .tc-ck-boton--linea:hover{
  border-color:#b9c7da;
  background:#f1f4f9;
  color:var(--tc-marca-azul,#071457);
}

@media (max-width:860px){
  .tc-ck-aviso{ flex-direction:column; align-items:stretch; gap:14px; }
  .tc-ck-botones{ margin-left:0; flex-wrap:wrap; }
  .tc-ck-boton--lleno,
  .tc-ck-boton--linea{ flex:1 1 0; min-width:150px; text-align:center; }
  .tc-ck-boton--texto{ order:3; width:100%; text-align:center; }
}