/* =====================================================================
   0.46.0 · Home compacto (móvil y escritorio). Solo presentación.
   - Se elimina el relleno doble (contenedor de Astra + Home) que quitaba ~70 px de ancho a las tarjetas.
   - Barra única: chips de tienda (desplazables) + selector «Ordenar» (sustituye a las pestañas Recientes/Tendencias/Populares).
   - «Top del día» en una tira baja; ritmo vertical corto hasta la primera oferta.
   ===================================================================== */
/* El contenedor de Astra no debe sumar su relleno lateral a las páginas con diseño Cupones Tech. */
.ast-container:has(> .ctc-listado.ctc-home) { padding-left: 0; padding-right: 0; }

/* ---------- Barra: tiendas + ordenar ---------- */
.ctc-home .ctc-home-barra { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; min-width: 0; }
.ctc-home .ctc-home-barra .ctc-cuponera-filtros { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 6px; margin: 0; padding: 2px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.ctc-home .ctc-home-barra .ctc-cuponera-filtros::-webkit-scrollbar { display: none; }
.ctc-home .ctc-home-barra .ctc-cuponera-filtro { min-height: 36px; padding: 0 14px; font-size: 13.5px; display: inline-flex; align-items: center; text-decoration: none; }
.ctc-home .ctc-home-barra .ctc-cuponera-filtro:not(.is-activo) { color: var(--ctc-texto, #12141a); background: #fff; }

/* Selector «Ordenar»: botón rectangular con icono; el texto es el criterio activo. */
.ctc-home-orden { position: relative; flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 28px 0 32px; border: 1px solid var(--ctc-borde, #e4e7ee); border-radius: 10px; background: #fff; color: var(--ctc-texto, #12141a); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.ctc-home-orden--distinto { border-color: var(--ctc-azul, #1428a0); color: var(--ctc-azul, #1428a0); }
.ctc-home-orden-ico { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; pointer-events: none; background: no-repeat center / 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2312141a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5h14M6 10h8M9 15h2'/%3E%3C/svg%3E"); }
.ctc-home-orden--distinto .ctc-home-orden-ico { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231428a0' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M3 5h14M6 10h8M9 15h2'/%3E%3C/svg%3E"); }
.ctc-home-orden::after { content: ""; position: absolute; right: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid currentColor; border-width: 0 1.8px 1.8px 0; transform: rotate(45deg); pointer-events: none; }
.ctc-home-orden-select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: inherit; height: 34px; padding: 0; margin: 0; cursor: pointer; outline-offset: 6px; max-width: 128px; text-overflow: ellipsis; }
.ctc-home-orden:focus-within { outline: 2px solid var(--ctc-azul, #1428a0); outline-offset: 2px; }

/* ---------- Móvil / tablet ---------- */
@media (max-width: 1023px) {
	.ctc-listado.ctc-home { padding: 8px 12px 72px; }
	.ctc-home-layout { gap: 0; }
	/* Chips: degradado a la derecha para indicar que hay más tiendas */
	.ctc-home .ctc-home-barra .ctc-cuponera-filtros { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent); padding-right: 22px; }

	/* Top del día: tira compacta */
	.ctc-lat-movil { padding: 0 0 6px; }
	.ctc-lat-movil h2 { margin: 0 0 4px; font-size: 13px; line-height: 1.2; letter-spacing: .01em; }
	.ctc-lat-tira { margin: 0 -12px; padding: 0 12px 4px; gap: 8px; }
	.ctc-lat-tira .ctc-mini { flex: 0 0 min(250px, 72vw); height: 66px; padding: 6px 8px; gap: 8px; border-radius: 12px; }
	.ctc-lat-tira .ctc-mini__img { flex-basis: 52px; width: 52px; height: 52px; }
	.ctc-lat-tira .ctc-mini__t { font-size: 12.5px; line-height: 1.25; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
	.ctc-lat-tira .ctc-mini__p strong { font-size: 14px; }

	.ctc-home-grid { gap: 10px; }
	.ctc-seccion-cab { margin-bottom: 8px; }
}
@media (max-width: 359px) {
	.ctc-home-orden { padding-right: 24px; }
	.ctc-home-orden-select { max-width: 96px; }
}

/* ---------- Escritorio: misma barra, a la izquierda de la rejilla ---------- */
@media (min-width: 1024px) {
	.ctc-home .ctc-home-barra { margin-bottom: 14px; }
}

/* 0.46.0 — selector solo icono en móvil (más tiendas visibles) y fila superior de tarjeta sin recorte */
.ctc-oc-top { min-width: 0; }
.ctc-oc-tienda { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ctc-oc-top-der { flex: 0 0 auto; gap: 4px; }
@media (max-width: 479px) {
	.ctc-home-orden { width: 36px; padding: 0; justify-content: center; }
	.ctc-home-orden::after { display: none; }
	.ctc-home-orden-ico { left: 9px; }
	.ctc-home-orden-select { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; opacity: 0; }
	.ctc-oc-metricas { gap: 5px; }
}

/* ======================================================================
   0.46.1 — Imágenes más aprovechadas + tarjetas compactas (solo presentación)
   Las capturas originales NO se tocan; el visor ampliable sigue usando el archivo completo.
   Encuadre por proporción real (clase .ctc-enc--*, calculada en PHP): solo Samsung se acerca de forma acotada;
   las fotos de otras tiendas se muestran siempre completas (contain).
   Variables ajustables: --ctc-enc-pos (punto focal), --ctc-enc-zoom (acercamiento con contain).
   ====================================================================== */
.ctc-oc-img, .ctc-mini__img, .ctc-ficha .ctc-imagen { --ctc-enc-pos: 50% 50%; --ctc-enc-zoom: 1; }
/* 0.46.2: captura completa (contain) + acercamiento ligero; nunca recorte agresivo ni desplazamiento a los extremos */
body .ctc-enc--ancha img, body .ctc-enc--media img, body .ctc-enc--cuadrada img, body .ctc-enc--alta img { object-fit: contain; object-position: 50% 50%; transform: scale(var(--ctc-enc-zoom)); }
body .ctc-enc--ancha, body .ctc-enc--media { --ctc-enc-zoom: 1.1; }
body .ctc-enc--cuadrada, body .ctc-enc--alta { --ctc-enc-zoom: 1.12; }
body .ctc-enc--tienda img, body .ctc-enc--desconocida img { object-fit: contain; transform: none; }

@media (max-width: 1023px) {
	/* tarjeta */
	body .ctc-oc-main { grid-template-columns: 38% minmax(0, 1fr); }
	body .ctc-oc-img { min-height: 0; padding: 0; }
	body .ctc-oc-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
	body .ctc-oc-img.ctc-enc--tienda img, body .ctc-oc-img.ctc-enc--desconocida img { inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); }
	body .ctc-oc-img svg { position: relative; }
	body .ctc-oc-hace { left: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.92); font-size: 11px; line-height: 1.5; z-index: 1; }
	body .ctc-oc-destacado { left: 6px; top: 6px; }
	body .ctc-oc-body { gap: 5px; padding: 8px 10px 6px; }
	body .ctc-oc-top { min-height: 32px; }
	body .ctc-oc .ctc-fav-toggle.ctc-oc-fav,body .ctc-oc-compartir { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; }
	body .ctc-oc-titulo { font-size: 14px; line-height: 1.25; }
	body .ctc-oc-precio { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0 8px; padding: 6px 10px; border-radius: 10px; }
	body .ctc-oc-k { font-size: 10px; }
	body .ctc-oc-v { font-size: 22px; }
	body .ctc-oc-l { flex-basis: 100%; font-size: 11px; }
	body .ctc-oc-pct { top: 6px; right: 8px; font-size: 11px; padding: 1px 7px; }
	body .ctc-oc-ref { font-size: 12px; gap: 0 10px; }
	body .ctc-oc-extras { gap: 4px; }
	body .ctc-oc-chip { padding: 1px 7px; font-size: 11px; }
	body .ctc-oc-acts { padding: 8px 10px; gap: 8px; }
	body .ctc-oc-btn { height: 40px; font-size: 13.5px; }
	/* Top del día: Samsung más legible (miniatura apaisada) */
	body .ctc-lat-tira .ctc-mini { flex-basis: min(262px, 78vw); height: 68px; }
	body .ctc-lat-tira .ctc-mini__img { flex-basis: 56px; width: 56px; height: 56px; }
	body .ctc-lat-tira .ctc-mini__img.ctc-enc--ancha,body .ctc-lat-tira .ctc-mini__img.ctc-enc--media { flex-basis: 90px; width: 90px; }
	body .ctc-mini__img img { object-fit: cover; }
	body .ctc-mini__img.ctc-enc--tienda img, body .ctc-mini__img.ctc-enc--desconocida img { object-fit: contain; background: #fff; }
}

@media (min-width: 1024px) {
	body .ctc-oc-main { grid-template-columns: minmax(200px, 30%) minmax(0, 1fr); }
	body .ctc-oc-img { min-height: 0; padding: 0; }
	body .ctc-oc-img img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; }
	body .ctc-oc-img.ctc-enc--tienda img, body .ctc-oc-img.ctc-enc--desconocida img { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
	body .ctc-oc-hace { left: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: rgba(255,255,255,.92); z-index: 1; }
	body .ctc-oc-body { padding: 10px 16px 8px; gap: 7px; }
	body .ctc-oc-precio { padding: 8px 14px; }
	body .ctc-oc-v { font-size: 26px; }
	body .ctc-oc-acts { padding: 10px 16px; }
	body .ctc-oc-btn { height: 40px; }
	body .ctc-mini__img.ctc-enc--ancha, body .ctc-mini__img.ctc-enc--media { flex-basis: 90px; width: 90px; height: 60px; }
	body .ctc-mini__img img { object-fit: cover; }
	body .ctc-mini__img.ctc-enc--tienda img, body .ctc-mini__img.ctc-enc--desconocida img { object-fit: contain; background: #fff; }
}

/* Ficha: el encuadre con recorte solo en móvil (columna estrecha); en escritorio la captura se ve completa. El visor siempre abre el archivo original. */
body .ctc-ficha .ctc-imagen.ctc-enc--ancha img, body .ctc-ficha .ctc-imagen.ctc-enc--media img { padding: 0; }
@media (min-width: 1024px) {
	body .ctc-ficha .ctc-imagen.ctc-enc--ancha img, body .ctc-ficha .ctc-imagen.ctc-enc--media img { object-fit: contain; padding: 8px; }
}
@media (max-width: 1023px) {
	body .ctc-ficha.ctc-ficha--v2 .ctc-imagen.ctc-enc--ancha img, body .ctc-ficha.ctc-ficha--v2 .ctc-imagen.ctc-enc--media img { object-fit: contain; object-position: 50% 50%; padding: 2px; transform: scale(var(--ctc-enc-zoom)); }
	body .ctc-ficha.ctc-ficha--v2 .ctc-imagen.ctc-enc--cuadrada img, body .ctc-ficha.ctc-ficha--v2 .ctc-imagen.ctc-enc--alta img { padding: 2px; transform: scale(var(--ctc-enc-zoom)); }
}

/* 0.46.2: el precio nunca se encima con la insignia de descuento (columna de imagen más ancha en Samsung) */
@media (max-width: 1023px) { body .ctc-oc-k { letter-spacing: .04em; } body .ctc-oc-v { font-size: 21px; } }
@media (max-width: 380px) { body .ctc-oc-v { font-size: 19px; } body .ctc-oc-k { font-size: 9px; letter-spacing: 0; } body .ctc-oc-precio { column-gap: 6px; } body .ctc-oc-pct { right: 6px; font-size: 10.5px; padding: 1px 6px; } }

/* ======================================================================
   0.46.4 — Tarjeta «Precio limpio» (solo presentación)
   - Precio en negro sobre blanco (sin bloque azul); descuento en píldora verde suave; «Ahorras» en verde sobrio.
   - Azul de marca reservado a acciones e identidad. Punto de color por tienda (sin fondo de píldora).
   - Cabecera: tienda + favorito + compartir (sin borde). Métricas al pie del cuerpo, siempre en el mismo lugar.
   - Botones: «Ver en tienda» sólido (izq.) y «Ver detalles» delineado en azul (der.), 40 px.
   ====================================================================== */
body .ctc-oc { --ctc-ok: #0b6f37; --ctc-ok-bg: #e6f6ec; }
body .ctc-oc .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Cabecera */
body .ctc-oc-top { gap: 4px; }
body .ctc-oc-tienda { flex: 1 1 auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; letter-spacing: .04em; }
body .ctc-oc-tienda-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body .ctc-oc-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--ctc-dot, #1428a0); box-shadow: 0 0 0 1px rgba(0,0,0,.12) inset; }
body .ctc-oc .ctc-fav-toggle.ctc-oc-fav, body .ctc-oc-compartir { border-color: transparent; background: transparent; }
body .ctc-oc-top-der { margin-left: 0; }

/* Precio */
body .ctc-oc-precio { position: static; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0 8px; padding: 0; border-radius: 0; background: none; color: #12141a; width: auto; align-self: stretch; }
body .ctc-oc-k { order: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #5b5f6e; opacity: 1; }
body .ctc-oc-v { order: 1; font-size: 24px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: #12141a; }
body .ctc-oc-ant { order: 3; font-size: 13px; color: #7a7f8e; }
body .ctc-oc-ant s { text-decoration-thickness: 1px; }
body .ctc-oc-pct { order: 2; position: static; padding: 2px 8px; border-radius: 999px; background: var(--ctc-ok-bg); color: var(--ctc-ok); font-size: 12px; font-weight: 800; line-height: 1.3; }
body .ctc-oc-ahorro { order: 4; font-size: 12.5px; }
body .ctc-oc-l { order: 5; flex-basis: 100%; font-size: 11.5px; color: #5b5f6e; opacity: 1; }
body .ctc-oc-ref { font-size: 12.5px; gap: 0 10px; }
body .ctc-oc-ref b { color: inherit; }
body .ctc-oc-ahorro { color: var(--ctc-ok); font-weight: 700; }
body .ctc-oc-ahorro b { color: var(--ctc-ok); font-weight: 800; }

/* Métricas: pie del cuerpo, misma posición en todas las tarjetas */
body .ctc-oc-body { min-height: 0; }
body .ctc-oc-pie { margin-top: auto; padding-top: 2px; }
body .ctc-oc-pie .ctc-oc-metricas { gap: 10px; font-size: 11.5px; color: #6b7280; }

/* Botones */
body .ctc-oc-btn--primario { background: var(--ctc-azul, #1428a0); color: #fff; }
body .ctc-oc-btn--secundario { background: #fff; color: var(--ctc-azul, #1428a0); border-color: #c9cee6; }
body .ctc-oc-btn--secundario.is-vista { color: #5b5f6e; }
body .ctc-oc-btn { overflow: hidden; text-overflow: ellipsis; }
body .ctc-oc-btn--primario { flex: 1.25 1 0; }

@media (max-width: 1023px) {
	body .ctc-oc-precio { padding: 0; border-radius: 0; gap: 0 8px; }
	body .ctc-oc-v { font-size: 23px; }
	body .ctc-oc-pct { top: auto; right: auto; font-size: 11.5px; padding: 1px 7px; }
	body .ctc-oc-body { gap: 4px; padding: 6px 10px 6px; }
}
@media (max-width: 380px) {
	body .ctc-oc-v { font-size: 21px; }
	body .ctc-oc-precio { column-gap: 6px; }
	body .ctc-oc-pct { right: auto; font-size: 11px; padding: 1px 6px; }
	body .ctc-oc-k { font-size: 9.5px; letter-spacing: .02em; }
	body .ctc-oc-btn { font-size: 13px; padding: 0 6px; }
}
@media (min-width: 1024px) {
	body .ctc-oc-precio { padding: 0; width: auto; }
	body .ctc-oc-v { font-size: 28px; }
	body .ctc-oc-ant { font-size: 14px; }
	body .ctc-oc-pct { font-size: 12.5px; padding: 2px 9px; }
	body .ctc-oc-ref { font-size: 13px; }
}